:root {
  --bg: #03070b;
  --panel: rgba(8, 22, 32, 0.72);
  --line: rgba(64, 224, 255, 0.28);
  --cyan: #40e0ff;
  --orange: #ff9838;
  --text: #dff8ff;
  --muted: #7fa9b8;
  --danger: #ff6b6b;
  --top: env(safe-area-inset-top, 0px);
  --bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); }
body {
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
  background: radial-gradient(ellipse at 50% 30%, #062030 0%, var(--bg) 60%);
}
button { font: inherit; color: inherit; cursor: pointer; }
.hidden { display: none !important; }

.app {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: calc(var(--top) + 6px) 12px calc(var(--bottom) + 8px);
  max-width: 720px;
  margin: 0 auto;
}

/* top bar */
.top { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.brand { font: 600 13px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 3px; color: var(--cyan); }
.status { flex: 1; display: flex; align-items: center; gap: 6px; font: 11px ui-monospace, Menlo, monospace; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: #445; }
.dot.on { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.dot.busy { background: var(--orange); box-shadow: 0 0 8px var(--orange); }
.actions { display: flex; gap: 4px; }
.icon { background: none; border: 1px solid transparent; border-radius: 10px; width: 38px; height: 38px; font-size: 18px; display: grid; place-items: center; }
.icon:active { border-color: var(--line); }
.icon.off { opacity: 0.35; }

/* orb */
.orb-wrap { position: relative; flex: 0 0 auto; height: min(42vh, 360px); display: flex; justify-content: center; transition: height 0.3s; }
.orb { height: 100%; aspect-ratio: 1 / 1; max-width: 100%; object-fit: contain; }
.app.typing .orb-wrap { height: min(22vh, 180px); }

/* login */
.login { display: flex; justify-content: center; padding-top: 20px; }
.login form { width: min(100%, 320px); display: flex; flex-direction: column; gap: 10px; }
.login label { font: 11px ui-monospace, monospace; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
input[type=password], input[type=text] {
  width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(3, 14, 20, 0.85); color: var(--text); font-size: 16px; outline: none;
}
input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(64, 224, 255, 0.12); }
.primary { padding: 12px; border-radius: 12px; border: 1px solid var(--cyan); background: rgba(64, 224, 255, 0.12); color: var(--cyan); letter-spacing: 2px; text-transform: uppercase; font-size: 13px; }
.error { color: var(--danger); min-height: 1.4em; margin: 0; font-size: 13px; }

/* chat */
.chat { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.messages { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.msg { max-width: 86%; padding: 9px 12px; border-radius: 14px; white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--line); background: var(--panel); }
.msg.jarvis { align-self: flex-start; border-top-left-radius: 4px; }
.msg.user { align-self: flex-end; border-top-right-radius: 4px; border-color: rgba(255, 152, 56, 0.35); background: rgba(40, 22, 8, 0.6); }
.msg.heard::before { content: "🎙️ "; }
.msg a { color: var(--cyan); }
.msg .meta { display: block; margin-top: 4px; font: 10px ui-monospace, monospace; color: var(--muted); }
.buttons { display: flex; gap: 8px; margin-top: 8px; }
.buttons button { flex: 1; padding: 9px; border-radius: 10px; border: 1px solid var(--cyan); background: rgba(64, 224, 255, 0.1); color: var(--text); }
.buttons button:disabled { opacity: 0.35; }
.composer { display: flex; gap: 6px; align-items: center; }
.composer input { flex: 1; }
.mic.rec { background: rgba(64, 224, 255, 0.2); border-color: var(--cyan); box-shadow: 0 0 14px rgba(64, 224, 255, 0.5); }
.send { color: var(--cyan); }

/* menu */
.menu { position: absolute; top: calc(var(--top) + 48px); right: 12px; z-index: 5; display: flex; flex-direction: column; min-width: 220px; padding: 6px; border-radius: 14px; border: 1px solid var(--line); background: rgba(4, 16, 24, 0.96); }
.menu button { text-align: left; padding: 10px 12px; border: none; background: none; border-radius: 8px; }
.menu button:active { background: rgba(64, 224, 255, 0.12); }

/* small extras in messages */
.msg strong { color: #fff; font-weight: 600; }
.msg code { font: 13px ui-monospace, Menlo, monospace; background: rgba(64, 224, 255, 0.1); padding: 1px 5px; border-radius: 5px; }
.msg.thinking { display: flex; gap: 5px; padding: 12px 14px; }
.msg.thinking span { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); opacity: 0.3; animation: blink 1.2s infinite; }
.msg.thinking span:nth-child(2) { animation-delay: 0.2s; }
.msg.thinking span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 40% { opacity: 1; box-shadow: 0 0 8px var(--cyan); } }
.icon.call { color: var(--cyan); }

/* start-up screen: one tap, then the orb powers up */
.boot { position: absolute; inset: 0; z-index: 10; display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: calc(var(--bottom) + 18vh); border: none; background: radial-gradient(circle at 50% 32%, rgba(3, 7, 11, 0) 0, rgba(3, 7, 11, 0.55) 60%); }
.boot-text { font: 12px ui-monospace, Menlo, monospace; letter-spacing: 5px; color: var(--cyan); text-shadow: 0 0 10px var(--cyan); animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }

/* calls: the orb fills the screen, chat is hidden */
.callbar { display: none; }
.app.in-call .chat, .app.in-call .actions, .app.in-call .login { display: none !important; }
.app.in-call .orb-wrap { flex: 1; height: auto; min-height: 0; }
.app.in-call .callbar { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-bottom: 10px; }
.call-state { font: 12px ui-monospace, Menlo, monospace; letter-spacing: 3px; text-transform: uppercase; color: var(--cyan); }
.call-time { font: 22px ui-monospace, Menlo, monospace; color: var(--text); letter-spacing: 2px; }
.caption { min-height: 3em; max-width: 92%; text-align: center; color: var(--muted); font-size: 15px; }
.caption.jarvis { color: var(--text); }
.call-buttons { display: flex; gap: 18px; margin-top: 8px; }
.round { width: 62px; height: 62px; border-radius: 50%; border: 1px solid var(--line); background: rgba(8, 22, 32, 0.8); font-size: 24px; }
.round.active { border-color: var(--cyan); background: rgba(64, 224, 255, 0.2); box-shadow: 0 0 14px rgba(64, 224, 255, 0.4); }
.round.end { background: #d93a3a; border-color: #ff6b6b; color: #fff; }
.cam { position: absolute; right: 0; bottom: 0; width: 30%; max-width: 140px; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 14px; border: 1px solid var(--cyan); box-shadow: 0 0 14px rgba(64, 224, 255, 0.35); background: #000; }
.cam.mirror { transform: scaleX(-1); }