:root {
  --bg: #04070f;
  --panel: #0b1428;
  --line: rgba(80, 170, 255, 0.2);
  --line-strong: rgba(80, 190, 255, 0.5);
  --text: #dbe9ff;
  --muted: #8299bd;
  --accent: #29b6ff;
  --accent-2: #00e5ff;
  --rec: #00e5a0;
  --think: #b07cff;
  --danger: #ff5370;
  --state: var(--accent);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Arabic", "Geeza Pro", Tahoma, sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: radial-gradient(700px 500px at 50% -10%, rgba(20, 80, 160, 0.35), transparent 70%), var(--bg);
  color: var(--text);
  font: 16px/1.5 var(--font);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
body[data-state="recording"] { --state: var(--rec); }
body[data-state="thinking"], body[data-state="transcribing"] { --state: var(--think); }

button { font: inherit; color: inherit; cursor: pointer; }
svg { width: 22px; height: 22px; fill: currentColor; }

.top {
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(10px + var(--safe-top)) 16px 10px;
  border-bottom: 1px solid var(--line);
  background: rgba(4, 8, 18, 0.85);
}
.brand { display: flex; align-items: center; gap: 10px; letter-spacing: 0.3em; font-weight: 600; color: #bfe6ff; }
.orb-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--state); box-shadow: 0 0 12px var(--state); }
body:not([data-state="idle"]) .orb-dot { animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: 0.35; transform: scale(0.85); } }
.conn { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.conn .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.conn.ok .dot { background: var(--rec); }
.conn.bad .dot { background: var(--danger); }

.banner {
  display: flex; gap: 10px; align-items: flex-start; justify-content: space-between;
  margin: 10px 12px 0; padding: 10px 12px; border-radius: 12px;
  border: 1px solid rgba(255, 83, 112, 0.55); background: rgba(255, 83, 112, 0.12); color: #ffd0d8; font-size: 14px;
}
.banner[hidden] { display: none; }
.banner button { background: none; border: none; padding: 0 4px; }

.chat { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.messages { list-style: none; margin: 0; padding: 14px 12px; display: flex; flex-direction: column; gap: 10px; }
.msg {
  max-width: 86%; padding: 10px 13px; border-radius: 16px; white-space: pre-wrap; overflow-wrap: anywhere;
  unicode-bidi: plaintext; font-size: 16px;
}
.msg.user { align-self: flex-end; background: rgba(41, 182, 255, 0.16); border: 1px solid rgba(41, 182, 255, 0.4); }
.msg.assistant { align-self: flex-start; background: var(--panel); border: 1px solid var(--line); }
.msg.note { align-self: center; font-size: 12px; color: var(--muted); border: 1px dashed var(--line); background: transparent; }
.msg pre { direction: ltr; text-align: left; white-space: pre; overflow-x: auto; background: #050a16; border: 1px solid var(--line); border-radius: 8px; padding: 8px; font-size: 13px; }
.empty { text-align: center; color: var(--muted); margin-top: 30vh; padding: 0 24px; }

.status { min-height: 22px; padding: 2px 16px; font-size: 13px; color: var(--muted); text-align: center; }

.composer {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 10px 12px calc(10px + var(--safe-bottom));
  border-top: 1px solid var(--line); background: rgba(4, 8, 18, 0.92);
}
.composer textarea {
  flex: 1; min-width: 0; resize: none; max-height: 120px;
  background: #08101f; color: var(--text); border: 1px solid var(--line); border-radius: 18px;
  padding: 10px 14px; font: 16px var(--font); outline: none; /* 16px avoids iOS zoom on focus */
}
.composer textarea:focus { border-color: var(--line-strong); }
.round {
  flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-strong); background: rgba(10, 26, 52, 0.9);
}
.round:disabled { opacity: 0.4; }
.send { background: rgba(41, 182, 255, 0.25); }
.mic { width: 54px; height: 54px; background: radial-gradient(circle, rgba(41, 182, 255, 0.35), rgba(10, 26, 52, 0.95)); }
.mic .stop-ico { display: none; }
body[data-state="recording"] .mic { background: radial-gradient(circle, rgba(0, 229, 160, 0.6), rgba(10, 40, 40, 0.95)); box-shadow: 0 0 22px var(--rec); }
body[data-state="recording"] .mic .mic-ico, body[data-state="speaking"] .mic .mic-ico { display: none; }
body[data-state="recording"] .mic .stop-ico, body[data-state="speaking"] .mic .stop-ico { display: block; }
#voiceBtn .off { display: none; }
#voiceBtn[aria-pressed="false"] .on { display: none; }
#voiceBtn[aria-pressed="false"] .off { display: block; }
#voiceBtn[aria-pressed="false"] { color: var(--muted); }