/* ============================================================
   CHAT KEYBOARD MODE — phones only. While the chat input has focus and
   the keyboard is up, the screen is reorganised so the bot stays in the
   conversation instead of being shoved off the top:

     ┌──────────────────────┐  ← top of the VISIBLE area (above keyboard)
     │  frame top + eyes    │    the top 24% of the frame — the same band
     ├──────────────────────┤    that shows above the entry plaque
     │  chat box, full      │
     │  width, fills the    │
     │  remaining height    │
     ├──────────────────────┤
     │  input               │  ← sits right above the keyboard
     └──────────────────────┘  ← keyboard starts here

   Why this exists: iOS never shrinks the page for the keyboard — it pans
   the whole page up until the focused input clears it, which is what
   dragged the frame off screen. So the fix is to put the input (and the
   things we want visible) inside the area that will be left above the
   keyboard, measured by chat-keyboard.js from the visualViewport and
   handed over as --kb-top / --kb-height.

   Scoped twice: phone widths AND body.chat-keyboard (added only on a
   touch device, only while #user-input has focus). Desktop never sees
   any of this. The frame keeps its normal size — nothing is scaled,
   only moved and clipped — so the eyes track and blink as usual.
   ============================================================ */

:root {
  /* Defaults until chat-keyboard.js measures the visible area. */
  --kb-top: 0px;
  --kb-height: var(--viewport-height, 100vh);
}

@media (max-width: 599px) {
  body.chat-keyboard {
    --kb-margin: 6px;    /* breathing room under the address bar */
    --kb-input: 60px;    /* the input row */
    --kb-gap: 14px;      /* wallpaper between chat box and input */
    /* What's left for the frame band + chat box together. */
    --kb-room: calc(var(--kb-height) - var(--kb-margin) - var(--kb-gap) - var(--kb-input));
    /* The frame keeps its normal size unless the visible area is so short
       (small phone, tall keyboard) that its band would eat the chat box:
       then it shrinks so the band takes at most 42% of the room and the
       chat keeps the rest. On today's phones this is simply --frame-size. */
    --kb-frame: min(var(--frame-size), calc(var(--kb-room) * 0.42 / var(--chat-top-pct)));
    --kb-band: calc(var(--kb-frame) * var(--chat-top-pct));   /* frame top down to the opening */
  }

  /* The frame: slid to the top of the visible area and clipped to its
     top band. The wrapper keeps the full square inside the clip, so the
     eyes and eyelids (sized in % of it) sit exactly where they always do. */
  body.chat-keyboard #chatbot-overlay {
    top: calc(var(--kb-top) + var(--kb-margin));
    width: var(--kb-frame);
    height: var(--kb-band);
    transform: translateX(-50%);
    overflow: hidden;
  }
  body.chat-keyboard .frame-wrapper {
    width: var(--kb-frame);
    height: var(--kb-frame);
  }

  /* The chat box: flush under the frame band, edge to edge, down to the
     input. A faint shadow at its top edge seats the frame on top of it. */
  body.chat-keyboard #chat-box {
    top: calc(var(--kb-top) + var(--kb-margin) + var(--kb-band));
    left: 0;
    width: 100vw;
    height: calc(var(--kb-room) - var(--kb-band));
    box-shadow: inset 0 8px 10px -8px rgba(0, 0, 0, 0.45);
  }

  /* The input: pinned just above the keyboard. */
  body.chat-keyboard .external-chat-input {
    bottom: auto;
    top: calc(var(--kb-top) + var(--kb-height) - var(--kb-input));
    width: 90vw;
    max-width: none;
  }
  /* Its dark halo is trimmed so it doesn't creep over the chat box. */
  body.chat-keyboard .external-chat-input::before {
    top: -10px;
    bottom: -6px;
  }

  /* Nothing to steer while typing, and they'd land on the input. */
  body.chat-keyboard .nav-arrow {
    opacity: 0;
    pointer-events: none;
  }

  @media (max-width: 399px) {
    body.chat-keyboard { --kb-input: 50px; }   /* the smaller send button */
  }

  /* Once the mode is on, follow the keyboard's real height smoothly
     (the first estimate → the measured value, or a rotation). The switch
     into the mode itself is instant — chat-keyboard.js adds -live a frame
     later — so nothing tweens between the two layouts. */
  body.chat-keyboard-live #chatbot-overlay   { transition: top 0.18s ease, opacity 0.3s ease; }
  body.chat-keyboard-live #chat-box          { transition: top 0.18s ease, height 0.18s ease, opacity 0.2s ease; }
  body.chat-keyboard-live .external-chat-input { transition: top 0.18s ease; }
}