/* =====================================================================
 * Ask-the-fish chat popup.
 *
 * Source of truth: Figma DzsLCogHGGEym6WYjlOpvD, node 277:11 (panel),
 * node 344:173 (fish asset).
 *
 * Two states:
 *   Closed — .chat-fab, fixed bottom-right, idle swim/bob loop.
 *   Open   — .chat-panel, 420x640 desktop / bottom-sheet under 640px.
 *
 * Local vars only. Reuses token palette from tokens.css for the ocean
 * teal / cream family; the odd chat-only alphas + type sizes live here
 * because tokens.css is do-not-edit.
 * ===================================================================== */

.chat {
  --chat-bg-top:      #163e51;
  --chat-bg-mid:      #0e2742;
  --chat-bg-bottom:   var(--surface-ocean-bottom);       /* #0a153c */
  --chat-border:      rgba(46, 124, 144, 0.5);           /* --surface-ocean-mid @ 50% */
  --chat-rule:        rgba(46, 124, 144, 0.45);
  --chat-input-brd:   rgba(46, 124, 144, 0.55);
  --chat-bubble-brd:  rgba(46, 124, 144, 0.4);
  --chat-bubble-bg:   rgba(255, 255, 255, 0.08);
  --chat-input-bg:    rgba(255, 255, 255, 0.07);
  --chat-chip-brd:    rgba(176, 229, 224, 0.55);
  --chat-eyebrow:     rgba(176, 229, 224, 0.55);
  --chat-placeholder: rgba(176, 229, 224, 0.6);
  --chat-teal:        var(--surface-ocean-top);          /* #b0e5e0 */
  --chat-ink-dark:    var(--surface-ocean-bottom);       /* #0a153c */
  --chat-ink-body:    #e1f2f1;
  --chat-shadow:      0 18px 44px rgba(5, 15, 41, 0.4);

  --chat-inset:       24px;
  --chat-panel-w:     420px;
  --chat-panel-h:     640px;
  --chat-fab-size:    72px;   /* halo-inclusive fish glyph bounding box */
}


/* -------------------- Closed state: floating fish -------------------- */

/* FAB is just the fish glyph — no circle chrome (matches Figma node 55:3673).
   Its halo carries the visual weight; the button itself is a transparent
   hitbox. */
.chat-fab {
  position: fixed;
  right: var(--chat-inset);
  bottom: var(--chat-inset);
  z-index: 90;

  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;

  display: block;
  line-height: 0;

  transition: transform 0.25s ease, opacity 0.2s ease;
}

.chat-fab:hover  { transform: translateY(-2px); }
.chat-fab:focus-visible {
  outline: 2px solid var(--chat-teal);
  outline-offset: 4px;
  border-radius: 999px;
}

/* Fish glyph — nested wrappers so translateY (4s) and translateX (6.5s)
   run on different periods and never resync. Tail + eye animations live
   inside fish.svg's <style> so <use> shadow instances pick them up. All
   durations/amplitudes/play-state are custom properties so state
   modifiers below can retune motion without redefining keyframes. */

.chat-fish {
  --cf-amp-y:      6px;
  --cf-amp-x:      3px;
  --cf-y-dur:      4s;
  --cf-x-dur:      6.5s;
  --cf-tail-dur:   1.6s;
  --cf-dart-dur:   9s;
  --cf-blink-dur:  7s;
  --cf-tail-play:  running;
  --cf-eye-play:   running;

  display: inline-block;
  width: var(--chat-fab-size);
  height: calc(var(--chat-fab-size) * 115 / 113);  /* fish.svg is 113x115 */
  vertical-align: middle;
}

.chat-fish--sm { width: 40px; height: calc(40px * 115 / 113); }

.chat-fish__floaty,
.chat-fish__floatx {
  display: block;
  width: 100%;
  height: 100%;
  will-change: transform;
}

.chat-fish__floaty { animation: chat-fish-y var(--cf-y-dur) ease-in-out infinite; }
.chat-fish__floatx { animation: chat-fish-x var(--cf-x-dur) ease-in-out infinite; }

.chat-fish__glyph { display: block; width: 100%; height: 100%; }

@keyframes chat-fish-y {
  0%, 100% { transform: translateY(calc(var(--cf-amp-y) * -1)); }
  50%      { transform: translateY(var(--cf-amp-y)); }
}
@keyframes chat-fish-x {
  0%, 100% { transform: translateX(calc(var(--cf-amp-x) * -1)); }
  50%      { transform: translateX(var(--cf-amp-x)); }
}

/* Hover — quicker float, doubled tail beat. */
.chat-fab:hover .chat-fish {
  --cf-y-dur:    2.6s;
  --cf-x-dur:    4.2s;
  --cf-tail-dur: 0.8s;
}

/* Panel open — float amplitude drops to ~1/3, tail keeps its beat. */
.chat.is-open .chat-fish {
  --cf-amp-y: 2px;
  --cf-amp-x: 1px;
}

/* Generating a reply — tail flaps fast, eye holds still. Reads as a
   typing indicator; also cranks amp back up so it's obvious. */
.chat.is-generating .chat-fish {
  --cf-amp-y:    4px;
  --cf-tail-dur: 0.42s;
  --cf-eye-play: paused;
}

/* When the panel is open, tuck the FAB away — the panel header carries
   its own fish so the user still sees it. */
.chat.is-open .chat-fab {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.85);
}


/* -------------------- "ask me anything" hint bubble --------------------
   Matches Figma node 55:3669: rgba(255,255,255,0.94) pill, 16px radius,
   Scandia Line 13px, --ink-bubble ink. Separate element — does NOT float
   with the fish. Fades on FAB hover (sibling selector, requires
   .chat-hint to sit after .chat-fab in DOM) and on panel open. */

.chat-hint {
  position: fixed;
  right: calc(var(--chat-inset) + var(--chat-fab-size) + 8px);
  bottom: calc(var(--chat-inset) + (var(--chat-fab-size) / 2) - 16px);
  z-index: 89;

  padding: 8px 14px;
  border-radius: 16px;
  background: var(--surface-status-translucent);   /* rgba(255,255,255,0.94) */
  color: var(--ink-bubble);                         /* #33505a */
  font-family: var(--font-line);                    /* Scandia Line */
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(5, 15, 41, 0.18);

  opacity: 1;
  transition: opacity 0.25s ease;
}

.chat-hint__arrow { margin-left: 2px; font-family: var(--font-body); }

.chat-fab:hover ~ .chat-hint,
.chat.is-open .chat-hint {
  opacity: 0;
}


/* -------------------- Open state: panel -------------------- */

.chat-panel {
  position: fixed;
  right: var(--chat-inset);
  bottom: var(--chat-inset);
  z-index: 95;

  width: var(--chat-panel-w);
  height: var(--chat-panel-h);
  max-height: calc(100vh - (var(--chat-inset) * 2));

  display: flex;
  flex-direction: column;
  padding: 22px 24px 20px;

  border: 1px solid var(--chat-border);
  border-radius: 20px;
  background:
    linear-gradient(180deg,
      var(--chat-bg-top)    0%,
      var(--chat-bg-mid)   55%,
      var(--chat-bg-bottom) 100%);
  box-shadow: var(--chat-shadow);
  color: var(--chat-ink-body);
  font-family: var(--font-body);

  overflow: hidden;
}

.chat-panel[hidden] { display: none; }


/* Header */

.chat-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}

.chat-panel__title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat-panel__title {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 17px;
  line-height: 1;
  color: #fff;
}

.chat-panel__close {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(176, 229, 224, 0.7);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
}

.chat-panel__close:hover        { color: var(--chat-teal); }
.chat-panel__close:focus-visible {
  outline: 2px solid var(--chat-teal);
  outline-offset: 2px;
}


/* Rules */

.chat-panel__rule {
  height: 1px;
  background: var(--chat-rule);
  border: 0;
  margin: 0;
  flex-shrink: 0;
}

.chat-panel__rule--top    { margin-top: 16px; margin-bottom: 18px; }
.chat-panel__rule--bottom { margin-top: auto; margin-bottom: 14px; }


/* Greeting bubble */

.chat-panel__greeting {
  padding: 14px 16px 15px;
  border: 1px solid var(--chat-bubble-brd);
  border-radius: 12px;
  background: var(--chat-bubble-bg);
  color: var(--chat-ink-body);
  font-size: 14px;
  line-height: 1.55;
  flex-shrink: 0;
}

.chat-panel__greeting p { margin: 0; }
.chat-panel__greeting p + p { margin-top: 0; }


/* Suggestion chips */

.chat-panel__chips {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  list-style: none;
  flex-shrink: 0;
}

.chat-chip {
  padding: 8px 14px 9px;
  border: 1px solid var(--chat-chip-brd);
  border-radius: 999px;
  background: transparent;
  color: var(--chat-teal);
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.chat-chip:hover { background-color: rgba(176, 229, 224, 0.08); }
.chat-chip:focus-visible {
  outline: 2px solid var(--chat-teal);
  outline-offset: 2px;
}


/* Message list — fills the spacer region (Figma node 277:30) */

.chat-panel__messages {
  flex: 1 1 0;
  min-height: 0;
  margin-top: 14px;
  padding-right: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;

  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-panel__messages::-webkit-scrollbar        { width: 6px; }
.chat-panel__messages::-webkit-scrollbar-thumb  { background: var(--chat-rule); border-radius: 3px; }

.chat-msg {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  word-wrap: break-word;
}

.chat-msg--user {
  align-self: flex-end;
  background: var(--chat-teal);
  color: var(--chat-ink-dark);
  border-bottom-right-radius: 4px;
}

.chat-msg--fish {
  align-self: flex-start;
  background: var(--chat-bubble-bg);
  border: 1px solid var(--chat-bubble-brd);
  color: var(--chat-ink-body);
  border-bottom-left-radius: 4px;
}


/* Eyebrow */

.chat-panel__eyebrow {
  margin: 0 0 10px;
  font-size: 9.5px;
  letter-spacing: 1.14px;
  color: var(--chat-eyebrow);
  text-transform: uppercase;
  flex-shrink: 0;
}


/* Composer */

.chat-panel__composer {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.chat-panel__input {
  flex: 1 1 0;
  min-width: 0;
  padding: 12px 16px 13px;
  border: 1px solid var(--chat-input-brd);
  border-radius: 999px;
  background: var(--chat-input-bg);
  color: var(--chat-teal);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1;
}

.chat-panel__input::placeholder { color: var(--chat-placeholder); }
.chat-panel__input:focus-visible {
  outline: 2px solid var(--chat-teal);
  outline-offset: 1px;
}

.chat-panel__send {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--chat-teal);
  color: var(--chat-ink-dark);
  font-family: "Inter", var(--font-body);
  font-weight: 500;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.chat-panel__send:hover         { transform: translateY(-1px); }
.chat-panel__send:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.chat-panel__send:disabled      { opacity: 0.45; cursor: not-allowed; transform: none; }


/* -------------------- Mobile: bottom sheet under 640px -------------------- */

@media (max-width: 640px) {
  .chat-fab {
    right: 16px;
    bottom: 16px;
  }

  .chat-panel {
    right: 0;
    left: 0;
    bottom: 0;
    width: auto;
    height: min(85vh, 640px);
    max-height: 85vh;
    border-radius: 20px 20px 0 0;
    border-bottom: 0;
  }
}


/* -------------------- Reduced motion --------------------
   Under reduce, the fish holds still: float wrappers stop, tail/eye
   animations inside fish.svg also cut out (see fish.svg's own
   @media (prefers-reduced-motion) block). Transitions on FAB/send/hint
   are also suppressed so state flips are instant. */

@media (prefers-reduced-motion: reduce) {
  .chat-fish__floaty,
  .chat-fish__floatx { animation: none; }

  .chat-fab,
  .chat-panel__send,
  .chat-hint { transition: none; }
}