/* ============================================================
   Super Future — AI chat page (/ai)
   Standalone from styles.css: this page is a dark, full-viewport
   experience and shares nothing but the brand's Arabic typeface.
   ============================================================ */

:root {
  --bg: #05070d;
  --bg-soft: #0a0f1a;
  --blue: #2e9bff;
  --blue-dim: #1c5f9e;
  --amber: #ff7a18;
  --amber-soft: #ffd9a0;
  --text: #e8eef7;
  --muted: #8a97ab;
  --line: rgba(46, 155, 255, 0.16);
  --font-ar: "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ar);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* A faint radial lift behind the figure so the black isn't flat. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(
    ellipse 70% 55% at 50% 38%,
    rgba(46, 155, 255, 0.09),
    transparent 70%
  );
  pointer-events: none;
}

.stage {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-width: 900px;
  margin-inline: auto;
  padding: 0 18px;
}

/* ---------- Header ---------- */

.ai-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 2px 8px;
  z-index: 3;
}

.ai-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.ai-brand img {
  height: 26px;
  width: auto;
  opacity: 0.95;
}

.ai-status {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 7px;
}

.ai-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 8px var(--blue);
}

.header-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Mute lives in the header rather than the composer: it has to be
   findable the moment the assistant starts talking, and the composer
   is already carrying four controls. */
.btn-mute {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  font-family: inherit;
  font-size: 12.5px;
  padding: 7px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.btn-mute svg {
  width: 15px;
  height: 15px;
  display: block;
}

.btn-mute .ico-off {
  display: none;
}

.btn-mute.is-muted {
  color: #ff9c6b;
  border-color: rgba(255, 122, 24, 0.45);
  background: rgba(255, 122, 24, 0.1);
}

.btn-mute.is-muted .ico-on {
  display: none;
}

.btn-mute.is-muted .ico-off {
  display: block;
}

/* While the assistant is actually talking, the button reads as the
   thing that stops it. */
.btn-mute.is-speaking {
  color: var(--text);
  border-color: rgba(46, 155, 255, 0.55);
  background: rgba(46, 155, 255, 0.1);
}

.btn-mute:hover {
  color: var(--text);
  border-color: rgba(46, 155, 255, 0.45);
}

.btn-end {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  padding: 8px 15px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.btn-end:hover {
  color: var(--text);
  border-color: rgba(46, 155, 255, 0.45);
  background: rgba(46, 155, 255, 0.08);
}

/* ---------- Avatar ---------- */

/* Bounded to the area ABOVE the message layer rather than the whole
   stage. Centring the figure in the full height and then nudging it up
   with a translate happens to work at one viewport height and overlaps
   at another; reserving the bottom third outright holds at every
   height. */
/* The figure is now the page's backdrop rather than an element in the
   column: fixed to the viewport, behind everything, escaping the
   stage's 900px cap so it can use the full width. */
.avatar-wrap {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 0;
  /* The dim lives here rather than on the canvas. Both used to share one
     opacity, which meant the 0.6s ease written for the dim also governed
     the artwork appearing — so the entrance cross-faded in while it was
     supposed to be drawing itself slice by slice, and its first half
     happened at partial opacity. Two different ideas, two nodes. */
  opacity: var(--sf-avatar-dim, 1);
  transition: opacity 0.6s cubic-bezier(0.16, 0.84, 0.44, 1);
}

/* Darkens the lower half so the messages stay legible over the figure,
   and leaves the face — which sits in the upper third — untouched. */
.scrim {
  position: fixed;
  inset: auto 0 0 0;
  height: 56%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(5, 7, 13, 0.94) 0%,
    rgba(5, 7, 13, 0.86) 26%,
    rgba(5, 7, 13, 0.55) 58%,
    rgba(5, 7, 13, 0) 100%
  );
}

/* The bitmap is much larger than the figure drawn in it. The wave
   rings are sized to the canvas so they can never be clipped at its
   edge — a clipped ring is cut off dead straight, and several of those
   cuts stack into a stray bright line along the border. Giving them
   room is what makes the effect possible at all.
   The canvas is transparent and pointer-events: none, so the extra
   area costs nothing but fill rate. */
/* Sized and lifted so the figure clears the message layer entirely
   rather than being overlapped by it: the drawn figure ends above the
   top of the conversation, and `--sf-avatar-scale` shrinks it further
   as the conversation fills up. */
#avatar {
  width: 100%;
  height: 100%;
  display: block;
  /* 0 until the artwork resolves, then 1 — and instantly, with no
     transition of its own. Everything the visitor sees after that point
     is drawn on the canvas: the figure is revealed a slice at a time
     under a moving mask. A CSS cross-fade layered over that would only
     wash out the part of it that matters most. The dim is on
     .avatar-wrap, where its easing belongs. */
  opacity: var(--sf-avatar-ready, 0);
}

/* ---------- Messages ---------- */

.conversation {
  position: relative;
  z-index: 2;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* The bottom third, and no more. Anything taller reaches up into the
     figure and the two render on top of each other. */
  max-height: 30dvh;
  overflow-y: auto;
  padding: 14px 14px 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(46, 155, 255, 0.3) transparent;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22px);
  mask-image: linear-gradient(to bottom, transparent, #000 22px);
}

.conversation::-webkit-scrollbar {
  width: 5px;
}

.conversation::-webkit-scrollbar-thumb {
  background: rgba(46, 155, 255, 0.3);
  border-radius: 999px;
}

/* The bubbles now float over the artwork, so they carry their own
   opacity and blur rather than relying on a dark page behind them. */
.msg {
  max-width: 82%;
  padding: 11px 16px;
  border-radius: 16px;
  font-size: 15px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  animation: rise 0.32s cubic-bezier(0.16, 0.84, 0.44, 1) both;
}

.msg-assistant {
  align-self: flex-start;
  background: rgba(9, 17, 30, 0.86);
  border: 1px solid rgba(46, 155, 255, 0.22);
  border-bottom-right-radius: 5px;
}

.msg-user {
  align-self: flex-end;
  background: rgba(24, 66, 116, 0.82);
  border: 1px solid rgba(46, 155, 255, 0.38);
  border-bottom-left-radius: 5px;
  color: #f2f7ff;
}

/* ---------- System notice ---------- */

/* Not a bubble, and deliberately unlike one: a flat strip with a hard
   accent edge, so it reads as coming from the page rather than from
   the assistant. Nothing here is part of the conversation. */
.notice {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 10px 2px 0;
  padding: 10px 12px;
  border-inline-start: 3px solid rgba(255, 122, 24, 0.8);
  border-radius: 4px;
  background: rgba(255, 122, 24, 0.08);
  color: #ffcfae;
  font-size: 13px;
  line-height: 1.7;
  animation: rise 0.28s cubic-bezier(0.16, 0.84, 0.44, 1) both;
}

.notice[hidden] {
  display: none;
}

.notice > svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin-top: 3px;
  opacity: 0.85;
}

.notice-text {
  flex: 1;
}

.notice-close {
  flex: 0 0 auto;
  border: 0;
  background: none;
  color: inherit;
  opacity: 0.6;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}

.notice-close:hover {
  opacity: 1;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(9px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Typing indicator */
.dots {
  display: inline-flex;
  gap: 4px;
  vertical-align: middle;
}

.dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
  animation: blink 1.3s infinite ease-in-out;
}

.dots i:nth-child(2) {
  animation-delay: 0.18s;
}
.dots i:nth-child(3) {
  animation-delay: 0.36s;
}

@keyframes blink {
  0%,
  70%,
  100% {
    opacity: 0.25;
  }
  35% {
    opacity: 1;
  }
}

/* ---------- Quick topic starters ---------- */

.topics {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 12px 6px 2px;
  animation: rise 0.4s cubic-bezier(0.16, 0.84, 0.44, 1) both;
}

.topics[hidden] {
  display: none;
}

/* Outlined, never filled — a solid chip would compete with the avatar
   for attention on a background this dark. */
.topics button {
  font-family: inherit;
  font-size: 13.5px;
  color: #b9cbe2;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid rgba(46, 155, 255, 0.32);
  background: transparent;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.topics button:hover {
  color: #eaf3ff;
  border-color: rgba(46, 155, 255, 0.75);
  background: rgba(46, 155, 255, 0.07);
  box-shadow: 0 0 16px rgba(46, 155, 255, 0.22);
}

.topics button:focus-visible {
  outline: 2px solid rgba(46, 155, 255, 0.8);
  outline-offset: 2px;
}

/* ---------- Composer ---------- */

.composer {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  gap: 9px;
  margin: 10px 0 16px;
  padding: 7px 7px 7px 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(10, 15, 26, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: border-color 0.2s;
}

.composer:focus-within {
  border-color: rgba(46, 155, 255, 0.5);
}

.composer textarea {
  flex: 1;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.65;
  max-height: 118px;
  padding: 8px 4px;
}

.composer textarea::placeholder {
  color: #5d6b80;
}

/* ---------- Voice input ---------- */

/* Both controls are `hidden` in the markup and only revealed by the
   script when the Web Speech API is actually present. */
.btn-mic {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.btn-mic svg {
  width: 18px;
  height: 18px;
  display: block;
}

.btn-mic:hover {
  color: var(--text);
  border-color: rgba(46, 155, 255, 0.5);
}

.btn-mic.is-recording {
  color: #fff;
  border-color: rgba(255, 122, 24, 0.8);
  background: rgba(255, 122, 24, 0.16);
  animation: micPulse 1.5s ease-in-out infinite;
}

@keyframes micPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 122, 24, 0.45); }
  50%      { box-shadow: 0 0 0 7px rgba(255, 122, 24, 0); }
}

/* Continuous voice mode. */
.btn-voice {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.btn-voice svg {
  width: 18px;
  height: 18px;
  display: block;
}

.btn-voice:hover {
  color: var(--text);
  border-color: rgba(46, 155, 255, 0.5);
}

.btn-voice.is-on {
  color: #cfe8ff;
  border-color: rgba(46, 155, 255, 0.85);
  background: rgba(46, 155, 255, 0.16);
  box-shadow: 0 0 16px rgba(46, 155, 255, 0.3);
}

/* The bars ripple only while the loop is actually running. */
.btn-voice.is-on svg path {
  animation: voiceBars 1.1s ease-in-out infinite;
  transform-origin: center;
}

.btn-voice.is-on svg path:nth-child(2) { animation-delay: 0.12s; }
.btn-voice.is-on svg path:nth-child(3) { animation-delay: 0.24s; }
.btn-voice.is-on svg path:nth-child(4) { animation-delay: 0.36s; }
.btn-voice.is-on svg path:nth-child(5) { animation-delay: 0.48s; }

@keyframes voiceBars {
  0%, 100% { transform: scaleY(0.72); }
  50%      { transform: scaleY(1.15); }
}

.mic-lang {
  flex: 0 0 auto;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  align-self: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.mic-lang:hover {
  color: var(--text);
  border-color: rgba(46, 155, 255, 0.5);
}

.btn-send {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--blue), var(--blue-dim));
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: opacity 0.2s, transform 0.15s;
}

.btn-send:hover:not(:disabled) {
  transform: scale(1.06);
}

.btn-send:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.btn-send svg {
  width: 19px;
  height: 19px;
  display: block;
}

/* Mirror the paper-plane in RTL so it points at the text direction. */
html[dir="rtl"] .btn-send svg {
  transform: scaleX(-1);
}

.composer-meta {
  position: absolute;
  bottom: -19px;
  inset-inline-start: 16px;
  font-size: 11px;
  color: #4e5b6e;
}

/* ---------- Call mode ---------- */

/* Everything the chat page normally shows steps aside. The figure is
   already a fixed backdrop, so it needs no duplicate — it simply
   becomes the whole interface. */
body.in-call .stage {
  display: none;
}

.call {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 26px 20px 30px;
  text-align: center;
}

.call[hidden] {
  display: none;
}

.call-timer {
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--muted);
  animation: rise 0.4s cubic-bezier(0.16, 0.84, 0.44, 1) both;
}

.call-foot {
  grid-row: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* Whose turn it is, in words and in motion — the words alone are too
   slow to read mid-conversation. */
.call-who {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(9, 17, 30, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 15px;
  color: var(--text);
  transition: border-color 0.3s, background 0.3s;
}

.call-bars {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 18px;
}

.call-bars i {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: currentColor;
  transform-origin: center;
  transform: scaleY(0.3);
  transition: transform 0.3s;
}

/* Listening: the bars follow the visitor. */
.call.is-listening .call-who {
  border-color: rgba(46, 155, 255, 0.6);
  color: #cfe8ff;
}

.call.is-listening .call-bars i {
  animation: callBars 0.9s ease-in-out infinite;
}

/* Thinking: a slow, even pulse — nothing is arriving yet. */
.call.is-thinking .call-who {
  border-color: rgba(255, 122, 24, 0.5);
  color: #ffd0a8;
}

.call.is-thinking .call-bars i {
  animation: callThink 1.4s ease-in-out infinite;
}

/* Speaking: faster and warmer, so the turn is unmistakable. */
.call.is-speaking .call-who {
  border-color: rgba(255, 122, 24, 0.85);
  background: rgba(50, 22, 6, 0.7);
  color: #ffe0c2;
}

.call.is-speaking .call-bars i {
  animation: callBars 0.5s ease-in-out infinite;
}

.call-bars i:nth-child(2) { animation-delay: 0.1s; }
.call-bars i:nth-child(3) { animation-delay: 0.2s; }
.call-bars i:nth-child(4) { animation-delay: 0.3s; }
.call-bars i:nth-child(5) { animation-delay: 0.4s; }

@keyframes callBars {
  0%, 100% { transform: scaleY(0.3); }
  50%      { transform: scaleY(1); }
}

@keyframes callThink {
  0%, 100% { transform: scaleY(0.35); opacity: 0.5; }
  50%      { transform: scaleY(0.7); opacity: 1; }
}

.call-end {
  min-height: 52px;
  padding: 0 30px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(140deg, #b3283c, #7c1f2b);
  color: #fff;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(124, 31, 43, 0.4);
  transition: transform 0.15s, box-shadow 0.2s;
}

.call-end:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(124, 31, 43, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  .call-bars i,
  .call-timer {
    animation: none !important;
  }
  .call-bars i {
    transform: scaleY(0.6);
  }
  .call-end:hover {
    transform: none;
  }
}

/* ---------- Thank-you screen ---------- */

.farewell {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: none;
  place-items: center;
  text-align: center;
  padding: 28px;
  background: rgba(5, 7, 13, 0.93);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.farewell.is-open {
  display: grid;
}

.farewell-card {
  max-width: 460px;
}

.farewell h1 {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.farewell p {
  color: var(--muted);
  font-size: 15px;
  margin-bottom: 26px;
}

.farewell .glyph {
  width: 62px;
  height: 62px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--amber-soft), var(--amber) 55%, transparent 72%);
  box-shadow: 0 0 46px rgba(255, 122, 24, 0.5);
}

.btn-home {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  transition: background 0.2s, border-color 0.2s;
}

.btn-home:hover {
  background: rgba(46, 155, 255, 0.1);
  border-color: rgba(46, 155, 255, 0.45);
}

/* ---------- Gate (no valid session) ---------- */

.gate {
  position: fixed;
  inset: 0;
  z-index: 11;
  display: none;
  place-items: center;
  text-align: center;
  padding: 28px;
  background: var(--bg);
}

.gate.is-open {
  display: grid;
}

/* The raw cause. Monospace and selectable because its whole job is
   to be copied into a message; dim because nobody should have to
   look at it when things are working. */

/* The in-call typing box. Sits directly above the composer so it
   reads as part of the conversation rather than a modal over it —
   the call is still running and must not feel interrupted. */
/* Without this the class's own `display` beats the UA rule for the
   hidden attribute and the box is permanently on screen. */
.askbox[hidden] {
  display: none;
}

.askbox {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* The call overlay is a three-row grid — timer, space, footer.
     The box takes the middle row and sits centred in it, so it
     reads as part of the call rather than something layered over
     it. Bounded, because a full-width field on a desktop looks
     like a form. */
  align-self: center;
  justify-self: center;
  width: min(420px, 100%);
  margin: 0;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(9, 17, 30, 0.92);
  border: 1px solid rgba(46, 155, 255, 0.4);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  animation: askIn 0.22s ease both;
}
@keyframes askIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .askbox { animation: none; }
}

.askbox-label {
  font-size: 0.86rem;
  font-weight: 600;
  color: rgba(233, 238, 247, 0.9);
}

.askbox-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.askbox-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(5, 7, 13, 0.45);
  color: #e9eef7;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95rem;
}
.askbox-input:focus {
  outline: none;
  border-color: rgba(46, 155, 255, 0.75);
  box-shadow: 0 0 0 3px rgba(46, 155, 255, 0.18);
}

.askbox-send {
  flex: 0 0 auto;
  padding: 0 18px;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: #05070d;
  background: #2e9bff;
}
.askbox-send:disabled { opacity: 0.5; cursor: not-allowed; }

.askbox-note {
  min-height: 1em;
  font-size: 0.78rem;
  color: rgba(233, 238, 247, 0.6);
}
.askbox-note.is-error { color: #ff9d8a; }

.gate-diag {
  margin-top: 14px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.74rem;
  line-height: 1.6;
  color: rgba(233, 238, 247, 0.66);
  word-break: break-word;
  user-select: all;
}

/* When a session drops mid-conversation the transcript stays visible
   behind the panel — losing sight of what was said makes it feel gone,
   and it is not. */
.gate.is-soft {
  background: rgba(5, 7, 13, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.gate.is-soft .farewell-card {
  background: rgba(9, 17, 30, 0.92);
  border: 1px solid rgba(46, 155, 255, 0.24);
  border-radius: 16px;
  padding: 26px 22px;
}

.gate p {
  color: var(--muted);
  margin-bottom: 22px;
}

/* ---------- Footer note ---------- */

.legal {
  position: relative;
  z-index: 3;
  text-align: center;
  font-size: 11px;
  color: #3f4b5c;
  padding-bottom: 10px;
}

.legal a {
  color: #5b6a80;
}

/* ---------- Motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  .msg,
  .topics,
  .notice {
    animation: none;
  }
  .dots i {
    animation: none;
    opacity: 0.6;
  }
  .btn-send:hover:not(:disabled) {
    transform: none;
  }
  .btn-mic.is-recording,
  .btn-voice.is-on svg path {
    animation: none;
  }
  /* Follows the opacity to its new home. #avatar no longer carries a
     transition to disable. */
  .avatar-wrap {
    transition: none;
  }
}

/* ---------- Small screens ---------- */

@media (max-width: 640px) {
  .scrim {
    height: 62%;
  }

  .conversation {
    max-height: 34dvh;
  }

  .msg {
    max-width: 90%;
    font-size: 14.5px;
  }

  .topics {
    padding: 10px 2px 0;
    gap: 6px;
  }

  /* ---------- Touch targets ----------
     Every control reaches at least 44px on a touch screen. The desktop
     sizes (40px circles, 26px chips, padded pills) are comfortable with
     a pointer and too small for a fingertip. */

  .btn-mic,
  .btn-voice,
  .btn-send {
    width: 44px;
    height: 44px;
  }

  .mic-lang {
    min-width: 44px;
    height: 44px;
    border-radius: 22px;
    font-size: 12px;
  }

  .btn-end,
  .btn-mute,
  .topics button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .btn-end,
  .btn-mute {
    padding-inline: 14px;
  }

  .topics button {
    font-size: 12.5px;
    padding: 0 14px;
  }

  .notice-close {
    min-width: 44px;
    min-height: 44px;
    margin: -10px -8px -10px 0;
  }

  /* The composer grows with the taller buttons. */
  .composer {
    align-items: center;
    padding: 6px 6px 6px 12px;
  }
}