/* Q Ceramic Sales Voice — Qatar maroon theme (flag colour #8A1538) */
:root {
  --maroon: #8a1538;
  --maroon-deep: #4a0b1e;
  --maroon-light: #8a1538;
  --maroon-glow: #a3244c;
  --bg: #07020a;
  --text: #f6eef1;
  --muted: #b9a3ab;
  --level: 0; /* 0..1, set from JS by mic / speaker loudness */
  font-family: system-ui, -apple-system, 'Segoe UI', Tahoma, 'Noto Sans Arabic', Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(60vmax 50vmax at 0% 0%, #5a0e2766, transparent 60%),
    radial-gradient(60vmax 55vmax at 100% 100%, #8a153855, transparent 60%),
    radial-gradient(40vmax 30vmax at 100% 0%, #3a081833, transparent 70%),
    var(--bg);
  overflow: hidden;
}

/* Not positioned on purpose: the logo and the account controls anchor to the screen corners. */
.app {
  height: 100dvh;
  max-width: 720px;
  margin: 0 auto;
  padding: max(28px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom))
    max(22px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Narrow screens: the status pill would collide with the corner controls, so start below them. */
@media (max-width: 600px) {
  .app { padding-top: calc(max(16px, env(safe-area-inset-top)) + 50px); }
}

/* ---------- Header ---------- */
.top { text-align: center; }

/* Logo is black calligraphy on white: invert to light strokes, and "screen" drops the (now black) background. */
.logo {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  left: 16px;
  width: auto;
  height: 46px;
  filter: invert(1) sepia(0.35) saturate(2) hue-rotate(295deg) brightness(0.95);
  mix-blend-mode: screen;
  opacity: 0.9;
  pointer-events: none;
}

.caption {
  display: inline-block;
  margin: 0 0 14px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--muted);
  background: #ffffff0d;
  border: 1px solid #ffffff14;
}
body[data-state='listening'] .caption { color: #f3cddb; border-color: #c9386b55; }
body[data-state='thinking'] .caption { color: #ffe2b8; }
body[data-state='speaking'] .caption { color: #fff; border-color: #c9386b99; }

.headline {
  margin: 0;
  font-size: clamp(1.8rem, 3vw + 1rem, 3rem);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.headline-ar {
  display: block;
  margin-top: 8px;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
}

/* ---------- Orb (swirling glow ring) ---------- */
/* The stage takes whatever height is left; the orb sizes itself to fit it (container query units). */
.stage {
  flex: 1 1 0;
  min-height: 120px;
  width: 100%;
  display: grid;
  place-items: center;
  container-type: size;
}

.orb {
  --size: min(78cqmin, 460px);
  --spin: 9s;
  --boost: 0.55;
  position: relative;
  width: var(--size);
  height: var(--size);
  transform: scale(calc(0.94 + var(--level) * 0.14));
  transition: transform 0.12s ease-out, filter 0.4s;
  filter: brightness(calc(0.85 + var(--boost) * 0.25 + var(--level) * 0.5));
  /* reset <button> look */
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.orb:focus-visible { outline: 2px solid var(--maroon-glow); outline-offset: 6px; }
.orb[data-state='idle'] { cursor: pointer; }
.orb[data-state='idle']:hover { --boost: 0.6; }
.orb[data-state='idle']:active { transform: scale(0.9); }

/* Mic icon in the centre: only shown while idle, as a "tap here" cue */
.orb-mic {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22%;
  height: 22%;
  translate: -50% -50%;
  fill: none;
  stroke: #f3cddb;
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.orb-mic rect { fill: #8a153855; }
.orb[data-state='idle'] .orb-mic { opacity: 0.85; animation: micHint 2.6s ease-in-out infinite; }

/* Sonar ripples: only visible while listening */
.orb .ripple {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  border: 2px solid var(--maroon-glow);
  box-shadow: 0 0 18px #a3244c88, 0 0 18px #a3244c55 inset;
  opacity: 0;
  pointer-events: none;
}

.orb .glow {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 38%, #a8214f55 52%, #8a153833 62%, transparent 72%);
  filter: blur(18px);
  opacity: calc(0.5 + var(--level) * 0.5);
}

.orb .swirl {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  mix-blend-mode: lighten; /* "screen" would brighten stacked maroon layers into pink */
  -webkit-mask: radial-gradient(circle, transparent 50%, #000 57%, #000 63%, transparent 71%);
          mask: radial-gradient(circle, transparent 50%, #000 57%, #000 63%, transparent 71%);
  filter: blur(5px);
  /* --k = speed multiplier, --dir = direction, --t = speaking pulse period (per layer) */
  animation: spin calc(var(--spin) * var(--k, 1)) linear infinite var(--dir, normal);
}

.orb .s1 {
  background: conic-gradient(from 0deg, transparent 0 8%, var(--maroon-light) 22%, var(--maroon-glow) 30%, transparent 42%,
    var(--maroon) 58%, #d8b4c2 66%, transparent 78%, var(--maroon-light) 92%, transparent);
}
.orb .s2 {
  inset: 4%;
  background: conic-gradient(from 120deg, transparent 0 15%, #efd3dd99 24%, var(--maroon-glow) 30%, transparent 45%,
    var(--maroon-light) 70%, transparent 85%);
  --k: 0.7;
  --dir: reverse;
  --t: 0.9s;
  opacity: 0.8;
}
.orb .s3 {
  inset: -4%;
  background: conic-gradient(from 240deg, transparent 0 20%, var(--maroon) 35%, var(--maroon-glow) 45%, transparent 60%,
    #6e1030 80%, transparent 92%);
  --k: 1.4;
  --t: 1.15s;
  opacity: 0.75;
  filter: blur(9px);
}
.orb .s4 {
  inset: 8%;
  background: conic-gradient(from 60deg, transparent 0 30%, #f0c6d6 38%, transparent 46%, var(--maroon-glow) 75%, transparent 85%);
  --k: 0.5;
  --t: 0.55s;
  opacity: 0.55;
  filter: blur(3px);
}
.orb .rim {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 1px solid #d06a9233;
  box-shadow: 0 0 30px #8a153866 inset;
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { opacity: 0.45; } }
@keyframes idleBreathe { 50% { scale: 1.04; } }
@keyframes micHint { 50% { opacity: 0.45; scale: 0.92; } }
@keyframes ripple {
  0% { opacity: 0; scale: 0.92; }
  15% { opacity: calc(0.45 + var(--level) * 0.55); }
  100% { opacity: 0; scale: 1.45; }
}
@keyframes listenRim { 50% { box-shadow: 0 0 46px #a3244caa inset; border-color: #d06a9277; } }
@keyframes talk {
  0% { scale: 0.96; }
  100% { scale: 1.07; }
}
@keyframes talkGlow {
  0%, 100% { scale: 1; opacity: 0.6; }
  50% { scale: 1.12; opacity: 1; }
}

/* State tuning */
.orb[data-state='idle'] { --spin: 16s; --boost: 0.2; animation: idleBreathe 3.2s ease-in-out infinite; }
.orb[data-state='connecting'],
.orb[data-state='reconnecting'] { --spin: 4s; --boost: 0.3; }
.orb[data-state='connecting'] .swirl,
.orb[data-state='reconnecting'] .swirl {
  animation: spin calc(var(--spin) * var(--k, 1)) linear infinite var(--dir, normal), breathe 1.4s ease-in-out infinite;
}

/* Listening: sonar ripples expand outward (stronger when you speak) + the inner rim breathes */
.orb[data-state='listening'] { --spin: 9s; --boost: 0.6; }
.orb[data-state='listening'] .ripple { animation: ripple 2.4s cubic-bezier(0.2, 0.6, 0.4, 1) infinite; }
.orb[data-state='listening'] .r2 { animation-delay: 0.8s; }
.orb[data-state='listening'] .r3 { animation-delay: 1.6s; }
.orb[data-state='listening'] .rim { animation: listenRim 2.4s ease-in-out infinite; }

.orb[data-state='thinking'] { --spin: 2.2s; --boost: 0.7; }

/* Speaking: each swirl layer pulses at its own rate, like a voice waveform, and the glow throbs */
.orb[data-state='speaking'] { --spin: 6s; --boost: 1; }
.orb[data-state='speaking'] .swirl {
  animation:
    spin calc(var(--spin) * var(--k, 1)) linear infinite var(--dir, normal),
    talk var(--t, 0.7s) ease-in-out infinite alternate;
}
.orb[data-state='speaking'] .glow { animation: talkGlow 0.9s ease-in-out infinite; }

.orb[data-state='muted'] { --spin: 20s; --boost: 0; filter: grayscale(0.7) brightness(0.6); }

/* ---------- Transcript (live captions) ---------- */
.transcript {
  width: 100%;
  max-height: 24dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 2px 4px;
  -webkit-mask: linear-gradient(to bottom, transparent, #000 24px);
          mask: linear-gradient(to bottom, transparent, #000 24px);
  scrollbar-width: none;
}
.transcript::-webkit-scrollbar { display: none; }
.transcript:empty { display: none; }

.bubble {
  max-width: 88%;
  padding: 8px 13px;
  border-radius: 16px;
  line-height: 1.5;
  font-size: 0.98rem;
  white-space: pre-wrap;
  word-wrap: break-word;
  unicode-bidi: plaintext; /* correct order for mixed Arabic / English / numbers */
  text-align: start;
}
.bubble.user {
  align-self: flex-end;
  background: #ffffff10;
  color: var(--muted);
  border: 1px solid #ffffff12;
}
.bubble.model {
  align-self: flex-start;
  background: linear-gradient(135deg, #8a153855, #4a0b1e66);
  border: 1px solid #a8214f44;
}
.bubble[dir='rtl'] { font-size: 1.05rem; }
.bubble.interrupted { opacity: 0.6; }
.bubble.interrupted::after { content: ' …'; }

.tool-line { align-self: center; font-size: 0.8rem; color: var(--muted); }
.tool-line.pending::before {
  content: ''; display: inline-block; width: 7px; height: 7px; margin-inline-end: 6px;
  border-radius: 50%; background: var(--maroon-glow); animation: breathe 0.8s infinite;
}
.tool-line.failed { color: #ff9db0; }

/* ---------- Errors ---------- */
.error {
  width: 100%;
  margin: 6px 0 0;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.9rem;
  background: #3a0712cc;
  color: #ffd5de;
  border: 1px solid #a8214f;
}

/* ---------- Bottom dock ---------- */
.dock {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.dock > :first-child { justify-self: start; }
.dock > :last-child { justify-self: end; }

.side-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  color: var(--text);
  background: #ffffff0f;
  border: 1px solid #ffffff1f;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.side-btn:hover { border-color: var(--maroon-light); }
.side-btn[hidden] { display: inline-grid; visibility: hidden; } /* keep the dock layout stable */

.icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#muteBtn .icon-mic-off { display: none; }
#muteBtn[aria-pressed='true'] { background: var(--maroon); border-color: var(--maroon-light); }
#muteBtn[aria-pressed='true'] .icon-mic { display: none; }
#muteBtn[aria-pressed='true'] .icon-mic-off { display: block; }

.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle:has(input:checked) { background: #8a153866; border-color: var(--maroon-light); color: #f3cddb; }
.toggle:has(input:focus-visible) { outline: 2px solid var(--maroon-glow); outline-offset: 2px; }

.center-slot { display: grid; place-items: center; }

.main-btn {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  background: radial-gradient(circle, #1a0510, #0a0306);
  border: 1px solid #a8214f66;
  box-shadow: 0 0 28px #8a153866;
  transition: transform 0.15s, box-shadow 0.2s;
}
.main-btn:hover { transform: scale(1.05); box-shadow: 0 0 38px #a8214f88; }
.main-btn:disabled { cursor: wait; opacity: 0.7; }
.main-btn[hidden] { display: none; }

.mini-ring {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: conic-gradient(var(--maroon), var(--maroon-glow), #f3cddb, var(--maroon-light), var(--maroon));
  -webkit-mask: radial-gradient(circle, transparent 54%, #000 58%, #000 70%, transparent 76%);
          mask: radial-gradient(circle, transparent 54%, #000 58%, #000 70%, transparent 76%);
  filter: blur(1px) drop-shadow(0 0 6px var(--maroon-glow));
  animation: spin 5s linear infinite;
}

.main-btn.end {
  background: radial-gradient(circle, var(--maroon-light), var(--maroon));
  border-color: #d06a92;
  color: #fff;
}
.main-btn.end .icon { width: 28px; height: 28px; stroke-width: 2.2; }

/* ---------- Screen sizes ---------- */
/* Tablets and desktops: a little more room for the captions and bigger call buttons. */
@media (min-width: 768px) and (min-height: 700px) {
  .transcript { max-height: 28dvh; }
  .bubble { font-size: 1.05rem; }
  .bubble[dir='rtl'] { font-size: 1.12rem; }
  .side-btn { width: 58px; height: 58px; }
  .main-btn { width: 86px; height: 86px; }
}

/* Landscape phones (and other short screens): text and buttons on one side, the ring on the other. */
@media (orientation: landscape) and (max-height: 560px) {
  .app {
    max-width: 1000px;
    padding-top: calc(max(16px, env(safe-area-inset-top)) + 46px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: 'top stage' 'error stage' 'transcript stage' 'dock stage';
    column-gap: 24px;
    align-items: start;
  }
  .top { grid-area: top; }
  .stage { grid-area: stage; height: 100%; min-height: 0; }
  .error { grid-area: error; }
  .transcript { grid-area: transcript; max-height: none; height: 100%; padding-top: 8px; }
  .dock { grid-area: dock; padding-top: 6px; }
  .caption { margin-bottom: 8px; }
  .headline { font-size: clamp(1.3rem, 3.2vw, 1.8rem); }
  .app .headline [data-i18n='voice.headline'] { white-space: normal; }
  .headline-ar { margin-top: 4px; font-size: 0.95rem; }
  .main-btn { width: 64px; height: 64px; }
  .side-btn { width: 46px; height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Slow the spin, but keep the listening/speaking cues: they carry state information. */
  .orb .swirl { --k: 3 !important; }
  .mini-ring { animation-duration: 20s; }
}