:root{
  --bg: #0B0D12;
  --surface: #12151C;
  --surface-2: #191D27;
  --border: rgba(255,255,255,0.08);
  --text: #E9EBF0;
  --muted: #8B90A0;
  --violet: #7C5CFF;
  --violet-soft: rgba(124,92,255,0.35);
  --amber: #FFB454;
  --amber-soft: rgba(255,180,84,0.4);
  --danger: #FF6868;
  --radius: 18px;
  --display-font: 'Space Grotesk', sans-serif;
  --body-font: 'Inter', sans-serif;
  --mono-font: 'JetBrains Mono', monospace;
}

*{ box-sizing: border-box; }
html,body{ height:100%; margin:0; }
body{
  background: radial-gradient(120% 120% at 50% -10%, #161A24 0%, var(--bg) 55%);
  color: var(--text);
  font-family: var(--body-font);
  -webkit-font-smoothing: antialiased;
}

.app{
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Topbar ─────────────────────────────────────────── */
.topbar{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: rgb(95 102 119 / 70%);
  backdrop-filter: blur(12px);
  z-index: 5;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{
  width:10px; height:10px; border-radius:50%;
  background: var(--violet);
  box-shadow: 0 0 12px 2px var(--violet-soft);
}
.brand h1{
  font-family: var(--display-font);
  font-size: 18px; font-weight: 600;
  margin: 0; letter-spacing: 0.01em;
}
.topbar-center{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center;
}
.topbar-right{
  margin-left: auto;
  display: flex; align-items: center; gap: 16px;
}
.topbar-logo{
  height: 36px;
  width: auto;
  object-fit: contain;
}
.topbar-center .topbar-logo{
  height: 36px;
}
.status{
  display: flex; align-items: center; gap: 8px;
}
.status #statusText{
  font-family: var(--display-font);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
}

.listen-timer{
  font-family: var(--mono-font);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.02em;
  min-width: 38px;
}
.status .dot{
  width:7px; height:7px; border-radius:50%;
  background: var(--violet);
  transition: background .3s ease;
}
body[data-status="listening"] .status .dot{ background: var(--violet); box-shadow:0 0 8px var(--violet-soft); }
body[data-status="thinking"]  .status .dot{ background: var(--muted); }
body[data-status="speaking"]  .status .dot{ background: var(--amber); box-shadow:0 0 8px var(--amber-soft); }

.icon-btn{
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  cursor:pointer;
  transition: color .2s ease, border-color .2s ease, transform .2s ease;
}
.icon-btn:hover{ color: var(--text); border-color: rgba(255,255,255,0.2); }
.icon-btn:active{ transform: scale(0.94); }

.lang-select{
  height: 36px;
  padding: 0 10px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: var(--body-font);
  font-size: 13px;
  cursor: pointer;
  transition: border-color .2s ease;
}
.lang-select:hover{ border-color: rgba(255,255,255,0.2); }
.icon-btn:focus-visible,
.mic-btn:focus-visible,
.send-btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline: 2px solid var(--violet);
  outline-offset: 2px;
}

/* ── Stage: side-by-side on desktop ─────────────────── */
.stage-area{
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 0;
}
.stage-area.chat-hidden{
  grid-template-columns: 1fr;
}
.stage-area.chat-hidden .chat-panel{
  display: none;
}
.stage-area.chat-hidden .avatar-stage{
  border-right: none;
  background: #000;
}
/* With the chat panel gone the video panel is a different shape than the
   video's own aspect ratio, so instead of cropping to fill (object-fit:
   cover, used in the normal side-by-side layout) show the whole frame
   centered on black — pillarboxed on wide screens, letterboxed on tall
   phone screens. */
.stage-area.chat-hidden .persona-video{
  object-fit: contain;
  object-position: center center;
  background: #000;
}

/* Chat only — avatar/video/mic hidden entirely, text-only interaction.
   speak() is also skipped in this mode (see app.js) since there's no avatar
   on screen for audio to accompany. */
.stage-area.chat-only{
  grid-template-columns: 1fr;
}
.stage-area.chat-only .avatar-stage{
  display: none;
}

.icon-btn.active{
  color: var(--violet);
  border-color: var(--violet-soft);
  background: rgba(124,92,255,0.12);
}

/* ── Video panel ─────────────────────────────────────── */
.avatar-stage{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 0;
  border-right: 1px solid var(--border);
  overflow: hidden;
  background: var(--surface);
}

.ring{
  --ring-color: var(--violet-soft);
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
}

body[data-status="listening"] .ring{ box-shadow: inset 0 0 60px var(--ring-color); }
body[data-status="thinking"]  .ring{ box-shadow: inset 0 0 60px rgba(139,144,160,0.2); }
body[data-status="speaking"]  .ring{ box-shadow: inset 0 0 60px var(--amber-soft); }

/* Video fills the whole stage — no letterboxing, no black bars.
   pointer-events: none keeps it purely decorative so hovering never triggers
   the browser's native fullscreen/picture-in-picture overlay on the video. */
.persona-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
  background: var(--surface);
  display: block;
  pointer-events: none;
}

/* Waveform indicator removed — it faded/pulsed in and out right over the
   video every time the mic was toggled, which read as a blinking effect. */
.waveform{ display: none; }

.mic-btn{
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  width: 58px; height: 58px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(18,21,28,0.85);
  backdrop-filter: blur(8px);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  z-index: 2;
}
.mic-btn:active{ transform: translateX(-50%) scale(0.96); }
.mic-btn.active{
  background: var(--violet);
  color: #fff;
  box-shadow: 0 0 0 8px var(--violet-soft);
}

.hint{
  position: absolute;
  left: 50%;
  bottom: 88px;
  transform: translateX(-50%);
  font-family: var(--mono-font);
  font-size: 12px;
  font-weight: 600;
  color: var(--violet);
  margin: 0;
  text-align: center;
  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
  background: rgba(11,13,18,0.7);
  backdrop-filter: blur(4px);
  padding: 4px 10px;
  border-radius: 8px;
}

/* ── Chat panel ──────────────────────────────────────── */
.chat-panel{
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 20px 20px 16px;
  background: var(--surface);
}
.transcript{
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.empty-state{
  margin: auto 0;
  text-align: center;
  color: var(--muted);
}
.empty-state p{ margin: 4px 0; font-size:14px; }
.empty-state .muted{ font-size: 13px; color: rgba(139,144,160,0.7); }

.msg{
  max-width: 86%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.msg.user{
  align-self: flex-end;
  background: var(--violet);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.msg.user.live-user{
  opacity: 0.85;
  font-style: italic;
}
.msg.assistant{
  align-self: flex-start;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.msg.error{
  align-self: center;
  background: rgba(255,104,104,0.1);
  border: 1px solid rgba(255,104,104,0.35);
  color: var(--danger);
  font-family: var(--mono-font);
  font-size: 12px;
}

.composer{
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-shrink: 0;
}
.composer input{
  flex: 1;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--text);
  font-family: var(--body-font);
  font-size: 14px;
  transition: border-color .2s ease;
}
.composer input:focus{ border-color: var(--violet); outline: none; }
.composer input::placeholder{ color: var(--muted); }
.send-btn{
  width: 44px; flex-shrink: 0;
  border-radius: 12px;
  border: none;
  background: var(--violet);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease, opacity .15s ease;
}
.send-btn:hover{ opacity: 0.88; transform: translateY(-1px); }
.send-btn:active{ transform: scale(0.95); }

/* ── Settings drawer ─────────────────────────────────── */
.settings-panel{
  position: fixed;
  top: 0; right: 0;
  height: 100vh; height: 100dvh;
  width: 360px;
  max-width: 92vw;
  background: var(--surface);
  border-left: 1px solid var(--border);
  padding: 22px;
  transform: translateX(100%);
  transition: transform .28s ease;
  z-index: 20;
  overflow-y: auto;
}
.settings-panel.open{ transform: translateX(0); }
.settings-header{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.settings-header h2{
  font-family: var(--display-font);
  font-size: 16px; margin: 0;
}
.settings-body{ display: flex; flex-direction: column; gap: 16px; }
.field{ display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.field span{ font-family: var(--mono-font); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.field input, .field select, .field textarea{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text);
  font-family: var(--body-font);
  font-size: 13.5px;
  resize: vertical;
}
.secondary-btn{
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  transition: border-color .2s ease, color .2s ease;
}
.secondary-btn:hover{ border-color: var(--danger); color: var(--danger); }
.note{
  font-size: 11.5px;
  color: rgba(139,144,160,0.85);
  line-height: 1.5;
}

.backdrop{
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 15;
}
.backdrop.open{ opacity: 1; pointer-events: auto; }

/* ── Toast ───────────────────────────────────────────── */
.toast{
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translate(-50%, 12px);
  background: var(--surface-2);
  border: 1px solid rgba(255,104,104,0.4);
  color: var(--text);
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 30;
  white-space: nowrap;
}
.toast.show{ opacity: 1; transform: translate(-50%, 0); }

/* ── Mobile: video top, chat bottom ─────────────────── */
@media (max-width: 700px){
  .app{
    height: 100dvh;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* stack vertically */
  .stage-area{
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  /* video — fixed 45% of viewport height */
  .avatar-stage{
    flex: 0 0 45vh;
    height: 45vh;
    min-height: 180px;
    border-right: none;
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    position: relative;
  }

  /* chat hidden — no chat panel left to share the screen with, so the video
     takes the full height instead of staying pinned at 45vh. */
  .stage-area.chat-hidden .avatar-stage{
    flex: 1 1 auto;
    height: auto;
    border-bottom: none;
  }
  /* chat only (avatar hidden) needs no override here — .chat-panel is
     already flex:1 by default, so it fills the space on its own once
     .avatar-stage is display:none. */

  /* chat — fills all remaining space */
  .chat-panel{
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 12px 14px 10px;
    display: flex;
    flex-direction: column;
  }

  .transcript{
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }

  .composer{ margin-top: 10px; }
  .composer input{ padding: 10px 12px; font-size: 13px; }

  .mic-btn{ bottom: 12px; width: 50px; height: 50px; }
  .hint{ bottom: 68px; font-size: 11px; }
  .waveform{ bottom: 82px; }

  .msg{ font-size: 13px; }

  /* Topbar: the logo was absolutely centered regardless of how much room
     the brand name and status/timer needed, so on narrow phones the two-line
     wrapped title grew tall enough to run straight into the (still 160px!)
     logo. Below 700px the logo drops into the normal flex flow instead of
     being centered over everything, and the brand name is truncated to a
     single line so it can't grow into its neighbors. */
  .topbar{ padding: 8px 10px; gap: 6px; }
  .brand{ min-width: 0; flex: 1 1 auto; overflow: hidden; }
  .brand h1{
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .topbar-center{
    position: static;
    transform: none;
    flex: 0 0 auto;
  }
  .topbar-center .topbar-logo{ height: 26px; }
  .topbar-right{ flex: 0 0 auto; gap: 6px; }
  .status #statusText{ font-size: 13px; }
  .listen-timer{ font-size: 11px; min-width: 30px; }
  .lang-select{ height: 30px; padding: 0 6px; font-size: 12px; }
}

/* ── Tablet ──────────────────────────────────────────── */
@media (min-width: 701px) and (max-width: 1024px){
  .stage-area{ grid-template-columns: 1.2fr 0.8fr; }
}

@media (prefers-reduced-motion: reduce){
  .ring{ animation: none !important; }
  .waveform span{ animation: none; }
}