/* chatbot-layout.css — RTS Ferries
 */

#chat-btn {
  position: fixed; bottom: 28px; right: 28px;
  width: 60px; height: 60px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  border-radius: 50%; border: none;
  cursor: pointer; z-index: 9000;
  box-shadow: 0 6px 20px rgba(11,37,69,.28);
  display: flex; align-items: center; justify-content: center;
  transition: transform .18s ease, box-shadow .18s ease;
  overflow: visible; padding: 0;
}
/* Quiet breathing ring — restrained motion, not a neon pulse. This is the
   kind of detail that got cut along with the colors last round; it isn't
   decoration, it's what signals "this is alive" on an otherwise still page. */
#chat-btn::before {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 1.5px solid var(--accent); opacity: 0;
  animation: breathe 2.6s ease-in-out infinite;
}
@keyframes breathe { 0%,100% { opacity:0; transform:scale(.94); } 50% { opacity:.35; transform:scale(1.06); } }
#chat-btn:hover { transform: scale(1.05); box-shadow: 0 8px 24px rgba(11,37,69,.34); }
#chat-btn:active { transform: scale(.97); }
#chat-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.chat-avatar-img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; display: block; }
#chat-btn .chat-icon { width: 26px; height: 26px; fill: #fff; }

.chat-bubble-tip {
  position: absolute; bottom: 70px; right: 0;
  background: #fff; color: var(--text); font-size: 12.5px; font-weight: 600;
  padding: 8px 14px; border-radius: 12px;
  border: 1px solid var(--grey-light);
  box-shadow: 0 4px 16px rgba(11,37,69,.1);
  white-space: nowrap; font-family: var(--font-body);
  display: flex; align-items: center; gap: 7px;
  animation: bubbleIn .2s ease-out;
}
.chat-bubble-tip::after {
  content: ''; position: absolute; bottom: -6px; right: 20px;
  width: 10px; height: 10px; background: #fff;
  border-right: 1px solid var(--grey-light); border-bottom: 1px solid var(--grey-light);
  transform: rotate(45deg);
}
.chat-bubble-close {
  font-size: 9px; color: var(--grey-text); cursor: pointer;
  width: 15px; height: 15px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--off-white); flex-shrink: 0; line-height: 1;
}
.chat-bubble-close:hover { background: var(--grey-light); color: var(--text); }
@keyframes bubbleIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

.chat-badge {
  position: absolute; top: 3px; right: 3px;
  width: 12px; height: 12px;
  background: var(--accent); border-radius: 50%; border: 2px solid #fff;
}

/* Root fix for the dead-space bug: height is now auto (content decides it)
   instead of a fixed tall box, so a short idle state doesn't leave an empty
   void underneath it. max-height caps it once a real conversation grows,
   at which point .chat-msgs scrolls. This is also resize-safe — ui.js reads
   getBoundingClientRect() at drag-start, so an auto height measures fine and
   a manual drag still takes over via its own inline style afterward. */
#chat-window {
  position: fixed; bottom: 96px; right: 28px;
  width: 380px; min-width: 320px;
  max-width: min(420px, calc(100vw - 40px));
  height: min(560px, calc(100vh - 140px));
  background: #fff; border-radius: 16px;
  border: 1px solid var(--grey-light);
  box-shadow: 0 16px 44px rgba(11,37,69,.18);
  display: flex; flex-direction: column; z-index: 9000; overflow: hidden;
  transform: translateY(14px) scale(.98); transform-origin: bottom right;
  opacity: 0; pointer-events: none;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .18s ease-out;
}
#chat-window.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: all; }

.rb-resize-handle { position: absolute; z-index: 10; }
.rb-resize-handle.n  { top:0;    left:8px;   right:8px;  height:6px; cursor:n-resize; }
.rb-resize-handle.s  { bottom:0; left:8px;   right:8px;  height:6px; cursor:s-resize; }
.rb-resize-handle.e  { right:0;  top:8px;    bottom:8px; width:6px;  cursor:e-resize; }
.rb-resize-handle.w  { left:0;   top:8px;    bottom:8px; width:6px;  cursor:w-resize; }
.rb-resize-handle.ne { top:0;    right:0;    width:14px; height:14px; cursor:ne-resize; }
.rb-resize-handle.nw { top:0;    left:0;     width:14px; height:14px; cursor:nw-resize; }
.rb-resize-handle.se { bottom:0; right:0;    width:14px; height:14px; cursor:se-resize; }
.rb-resize-handle.sw { bottom:0; left:0;     width:14px; height:14px; cursor:sw-resize; }

.chat-header {
  display:flex; flex-direction:column; flex-shrink:0; cursor:grab;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
}
.chat-header:active { cursor:grabbing; }

.chat-header-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 10px 12px 18px;
  gap: 10px;
}
.chat-header-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.chat-header-title {
  color: #fff; font-size: 14.5px; font-weight: 700;
  font-family: var(--font-head); line-height: 1.2; white-space: nowrap;
}
.chat-header-sub {
  display: flex; align-items: center; gap: 6px;
  color: rgba(255,255,255,.75); font-size: 11.5px; font-weight: 500;
}
.chat-online-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #22C55E; flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(34,197,94,.25);
}

/* Icons grouped into one pill instead of floating with gaps between them */
.chat-icons { display:flex; gap:1px; flex-shrink: 0; background: rgba(255,255,255,.12); border-radius: 10px; padding: 2px; }
.ci-btn {
  background: transparent; border: none; color: rgba(255,255,255,.85);
  width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; transition: background .15s, color .15s; position: relative;
}
.ci-btn:hover { background: rgba(255,255,255,.18); color: #fff; }
.ci-btn[data-tip]::after {
  content: attr(data-tip); position: absolute;
  bottom: calc(100% + 6px); right: 0;
  background: var(--text); color: #fff;
  font-size: 10px; white-space: nowrap; padding: 4px 8px;
  border-radius: 5px; pointer-events: none; opacity: 0; transition: opacity .15s;
}
.ci-btn:hover::after { opacity: 1; }

/* Header dropdown — kept inside the window's own rounded rectangle (not
   portaled to <body>) so #chat-window's overflow:hidden, which exists to
   clip content into the rounded corners, never clips this menu too. */
.more-menu { position: relative; }
.more-menu-panel {
  position: absolute; top: calc(100% + 6px); right: 0;
  width: 210px; background: #fff; border-radius: 12px;
  border: 1px solid var(--grey-light);
  box-shadow: 0 12px 32px rgba(11,37,69,.18);
  padding: 6px; display: flex; flex-direction: column; gap: 1px;
  opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 20;
}
.more-menu-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; }
.more-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border: none; background: transparent;
  border-radius: 8px; color: var(--text); font-size: 12.5px; font-weight: 500;
  font-family: var(--font-body); cursor: pointer; text-align: left;
  transition: background .15s;
}
.more-menu-item:hover { background: var(--off-white); }
.more-menu-item svg { flex-shrink: 0; color: var(--grey-text); }
.more-menu-item:disabled { opacity: .5; cursor: not-allowed; }

.chat-hero {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 18px 16px; flex-shrink: 0;
}
.chat-hero-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.4);
  overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12); color: #fff;
}
.chat-hero-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.chat-hero-avatar-icon { font-size: 16px; }
.chat-hero-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.chat-hero-name { font-size: 13px; font-weight: 600; color: #fff; font-family: var(--font-body); }
.chat-wa-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2); border-radius: 16px;
  color: rgba(255,255,255,.8); font-size: 11px; font-weight: 600;
  cursor: pointer; flex-shrink: 0;
}

/* Language row lives in the white zone, right at the seam with the navy
   header — no redundant "Default: English" label next to it anymore. */
.chat-lang-bar {
  display: flex; align-items: center; justify-content: flex-end;
  padding: 10px 18px; background: #fff; border-bottom: 1px solid var(--grey-light);
}
.chat-lang-bar .lang-wrap { display: flex; align-items: center; }
.lang-select-wrap { position: relative; display: inline-flex; align-items: center; }
#lang-select {
  font-size: 11.5px; font-family: var(--font-body); font-weight: 600;
  color: var(--text); background: var(--off-white);
  border: 1px solid var(--grey-light); border-radius: 14px;
  padding: 4px 24px 4px 10px;
  cursor: pointer; outline: none; appearance: none; -webkit-appearance: none;
  transition: border-color .15s;
}
#lang-select:focus-visible { border-color: var(--navy); }
.lang-chevron {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 10px; height: 10px; color: var(--grey-text); pointer-events: none;
}
#lang-note { display: none; }

.chat-msgs {
  flex:1; min-height:0; overflow-y:auto;
  padding:16px 14px; display:flex; flex-direction:column;
  gap:10px; scroll-behavior:smooth;
  background: #fff;
}
.chat-msgs::-webkit-scrollbar       { width:4px; }
.chat-msgs::-webkit-scrollbar-track { background: transparent; }
.chat-msgs::-webkit-scrollbar-thumb { background: var(--grey-mid); border-radius:4px; }

.chat-input-row {
  padding: 12px 14px; border-top: 1px solid var(--grey-light);
  display: flex; gap: 8px; align-items: center;
  background: #fff; flex-shrink: 0;
}
.chat-input-wrap { flex: 1; min-width: 0; display: flex; align-items: center; }
.chat-input-wrap #chat-input { width: 100%; }
#chat-input {
  flex:1; border: 1px solid var(--grey-mid); border-radius: 22px; padding: 10px 16px;
  font-size: 13px; font-family: var(--font-body);
  outline: none; transition: border-color .15s, box-shadow .15s;
  min-width: 0; color: var(--text); background: #fff;
}
#chat-input:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(11,37,69,.08); }
#chat-input::placeholder { color: var(--grey-text); }

#mic-btn {
  width:36px; height:36px; border-radius:50%; border: 1px solid var(--grey-light);
  background: #fff; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; transition:background .15s, border-color .15s;
}
#mic-btn:hover { background: var(--off-white); }
#mic-btn.listening { background: var(--navy); border-color: var(--navy); }
#mic-btn.listening svg { stroke: #fff; }

#send-btn {
  width:36px; height:36px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  border:none; border-radius:50%; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition: opacity .15s, transform .1s;
}
#send-btn:hover { opacity: .9; }
#send-btn:active { transform: scale(.94); }
#send-btn svg   { width:14px; height:14px; fill:#fff; }

#voice-wave { display: none; flex: 1; border: 1px solid var(--grey-light); border-radius: 22px; background: #fff; }

.chat-disclaimer {
  padding:8px 14px 10px; background:#fff; border-top:1px solid var(--grey-light);
  font-size:10px; color: var(--grey-text); line-height:1.4;
  text-align:center; flex-shrink:0;
}

@media (max-width:480px) {
  #chat-window {
    width:calc(100vw - 16px) !important; right:8px !important;
    left:8px !important; bottom:84px !important;
    min-width:unset; max-width:unset; border-radius:14px;
    height:calc(100vh - 116px) !important;
  }
}