/* Jarvis's screen: a heads-up display. His brain turns in the middle, panels about your day and about him run down the
   sides, and what is being said shows under the brain like subtitles. Every colour is a token; the brain he thinks
   with sets the glow (cyan for Opus, amber for Sonnet). */
:root {
  --bg: #03060c;
  --panel: rgba(11, 20, 35, .62);
  --panel-solid: #0a1322;
  --line: rgba(130, 190, 255, .12);
  --line-strong: rgba(130, 190, 255, .24);
  --text: #e7f1ff;
  --text-2: #a3b6cf;
  --text-3: #62758c;
  --danger: #ff7a7a;
  --ok: #5fe3a1;
  --glow: #5ee7ff;
  --glow-ink: #021018;
  --glow-soft: color-mix(in srgb, var(--glow) 22%, transparent);
  --glow-faint: color-mix(in srgb, var(--glow) 8%, transparent);
  --radius: 14px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --level: 0;
  color-scheme: dark;
}
.app[data-brain="sonnet"], .login[data-brain="sonnet"] { --glow: #ffb547; --glow-ink: #1d1203; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text); font: 15px/1.55 var(--font);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overscroll-behavior: none;
}
/* A faint grid and a glow behind the brain. */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(55vmax 45vmax at 50% 42%, var(--glow-faint), transparent 70%),
    linear-gradient(rgba(130, 190, 255, .035) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(130, 190, 255, .035) 1px, transparent 1px) 0 0 / 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 30%, transparent 85%);
  mask-image: radial-gradient(ellipse at 50% 45%, #000 30%, transparent 85%);
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; }
svg.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---- frame ----------------------------------------------------------------------------------------------------------- */
.app { position: relative; z-index: 1; height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.bar { display: flex; align-items: center; gap: 12px; padding: max(12px, env(safe-area-inset-top)) 16px 6px; }
.mark { display: flex; align-items: center; gap: 10px; font-weight: 650; letter-spacing: .42em; font-size: 13px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 10px var(--glow); transition: background .3s, box-shadow .3s; }
.dot.off { background: var(--text-3); box-shadow: none; }
.clock { margin-left: auto; font: 500 13px var(--mono); color: var(--text-2); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.bar-actions { display: flex; gap: 2px; }
.icon-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid transparent;
  background: transparent; color: var(--text-2); transition: color .15s, background .15s;
}
.icon-btn:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.icon-btn[aria-pressed="true"] { color: var(--glow-ink); background: var(--glow); box-shadow: 0 0 18px var(--glow-soft); }

.hud { min-height: 0; position: relative; }

/* ---- the brain --------------------------------------------------------------------------------------------------------- */
.center { display: grid; justify-items: center; align-content: center; gap: 8px; padding: 0 8px 12px; min-width: 0; }
.orb {
  --size: clamp(250px, 30vw, 430px);
  position: relative; width: var(--size); height: var(--size); padding: 0; border: 0; border-radius: 50%; background: none;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.orb:active { transform: scale(.985); }
.orb canvas { position: absolute; inset: 12%; width: 76%; height: 76%; }
.orb .rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 10px var(--glow-soft)); }
.ring { fill: none; stroke: var(--glow); transform-origin: 100px 100px; }
.r-outer { stroke-width: .5; opacity: .3; }
.r-ticks { stroke-width: 3.2; stroke-dasharray: .45 2.33; opacity: .3; animation: spin 120s linear infinite; }
.r-segments { stroke-width: 1.6; stroke-dasharray: 9 3.5; opacity: .42; animation: spin 50s linear infinite reverse; }
.r-arc { stroke-width: 1.8; stroke-dasharray: 16 84; stroke-linecap: round; opacity: 0; transition: opacity .3s; }
.orb .ripple { position: absolute; inset: 14%; border-radius: 50%; border: 1px solid var(--glow); opacity: 0; pointer-events: none; }

.orb[data-state="listening"] .ripple { animation: ripple 1.9s ease-out infinite; }
.orb[data-state="listening"] .ripple.late { animation-delay: .95s; }
.orb[data-state="listening"] .r-outer { opacity: .6; }
.orb[data-state="thinking"] .r-arc { opacity: .95; animation: spin 1.2s linear infinite; }
.orb[data-state="thinking"] .r-segments { animation-duration: 7s; opacity: .7; }
.orb[data-state="speaking"] .r-segments { opacity: .75; }
.orb[data-state="speaking"] .r-outer { opacity: calc(.3 + var(--level) * .7); }
.orb[data-state="waiting"] .r-outer { opacity: .7; stroke-dasharray: 2 6; animation: spin 14s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ripple { from { transform: scale(.85); opacity: .5; } to { transform: scale(1.35); opacity: 0; } }

.status { margin: 2px 0 0; font-size: 11.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--text-2); min-height: 1.5em; text-align: center; }
.heard { margin: 0; max-width: 52ch; text-align: center; color: var(--text-2); font-size: 15px; min-height: 1.5em; }
.reply {
  width: min(640px, 100%); max-height: 8.2em; overflow-y: auto; scrollbar-width: none; text-align: center;
  font-size: clamp(17px, 1.45vw, 21px); line-height: 1.5; letter-spacing: -.003em;
}
.reply::-webkit-scrollbar { display: none; }
.reply.long { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 2.2em); mask-image: linear-gradient(to bottom, transparent 0, #000 2.2em); }
.reply-text { white-space: pre-wrap; }
.reply-text:empty { display: none; }
.tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.tool { font-size: 11.5px; letter-spacing: .04em; color: var(--text-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; background: rgba(255, 255, 255, .02); }
.tool::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--glow); opacity: .75; margin-right: 6px; vertical-align: 1px; }
.extras { width: min(560px, 100%); display: grid; gap: 10px; }
.extras:empty { display: none; }
.note { margin: 0; color: var(--text-3); font-size: 13.5px; text-align: center; }
.note.err { color: var(--danger); }
.confirm { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.chips:empty { display: none; }
.chip { border: 1px solid var(--line-strong); background: var(--panel); border-radius: 999px; padding: 7px 14px; font-size: 13.5px; transition: border-color .15s; }
.chip:hover { border-color: var(--glow); }

.draft { border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--panel-solid); overflow: hidden; text-align: left; }
.draft-head { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--text-2); }
.draft-head span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.draft-body { margin: 0; padding: 12px 14px; white-space: pre-wrap; font: 14px/1.55 var(--font); max-height: 260px; overflow: auto; }

/* ---- panels ------------------------------------------------------------------------------------------------------------ */
.side { display: grid; align-content: start; gap: 14px; min-height: 0; }
.panel {
  position: relative; padding: 13px 16px 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(13, 25, 43, .66), rgba(7, 13, 24, .52)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
/* Corner brackets, as on a heads-up display. */
.panel::before, .panel::after { content: ""; position: absolute; width: 16px; height: 16px; color: var(--glow); opacity: .6; pointer-events: none; }
.panel::before { top: -1px; left: -1px; border-top: 1.5px solid; border-left: 1.5px solid; border-top-left-radius: var(--radius); }
.panel::after { bottom: -1px; right: -1px; border-bottom: 1.5px solid; border-right: 1.5px solid; border-bottom-right-radius: var(--radius); }
.panel > header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.panel h2 { margin: 0; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--glow); font-weight: 600; }
.panel .meta { margin-left: auto; font: 500 11.5px var(--mono); color: var(--text-3); font-variant-numeric: tabular-nums; }
.panel .empty { margin: 0; color: var(--text-3); font-size: 13.5px; line-height: 1.5; }
.panel .empty button { border: 0; background: none; padding: 0; color: var(--glow); text-decoration: underline; text-underline-offset: 3px; }

.time-big { font: 300 46px/1 var(--mono); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.date-line { color: var(--text-2); font-size: 13.5px; margin-top: 6px; }
.sky { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.sky .temp { grid-row: span 2; font: 300 34px/1 var(--font); }
.sky .cond { font-size: 14px; }
.sky .more { font: 12px var(--mono); color: var(--text-3); }

.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.rows li { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.rows time { font: 500 12.5px var(--mono); color: var(--glow); font-variant-numeric: tabular-nums; }
.rows .what { min-width: 0; overflow-wrap: anywhere; font-size: 14px; line-height: 1.4; }
.rows .who { display: block; color: var(--text-3); font-size: 12.5px; }
.rows.wide li { grid-template-columns: 78px minmax(0, 1fr); }

.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; margin: 0; align-items: center; }
.kv dt { color: var(--text-3); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.kv dd { margin: 0; text-align: right; font-size: 13.5px; display: flex; justify-content: flex-end; align-items: center; gap: 7px; min-width: 0; }
.kv dd .v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.led { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); flex: none; }
.led.on { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.led.warn { background: var(--danger); box-shadow: 0 0 8px var(--danger); }
.spend { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); display: grid; gap: 7px; }
.spend .line { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-2); }
.spend .line b { font: 500 13px var(--mono); color: var(--text); }
.track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.track i { display: block; height: 100%; background: var(--glow); border-radius: 2px; transition: width .4s; }
/* "All day" or "Late" where a time would be. */
.rows time.word { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.2; align-self: center; }
.rows .tag { display: inline-block; margin-top: 3px; font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; }
.rows .who + .tag { margin-left: 0; }

/* The Health panel: each measure, its value, and a bar towards its target. */
.meters { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.meters li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; align-items: baseline; }
.meters .k { color: var(--text-3); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.meters b { font: 500 13.5px var(--mono); font-variant-numeric: tabular-nums; }
.meters .track { grid-column: 1 / -1; display: block; }

/* Which model answered, first among the chips. */
.tool.via { color: var(--glow); border-color: var(--glow-soft); }
.tool.via::before { display: none; }

/* Settings → Other AI models: the order models are tried in, and this month's costs by model. */
.order { display: grid; gap: 6px; }
.order-row { display: flex; align-items: center; gap: 2px; padding: 4px 4px 4px 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, .02); }
.order-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.order-row .icon-btn { width: 30px; height: 30px; }
.costs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.costs li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: baseline; }
.costs li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 12px; }
.costs b { font: 500 12.5px var(--mono); }

/* Jobs for the phone, under the exchange: tap to call, send or log. */
.jobs { width: min(560px, 100%); display: grid; gap: 8px; }
.jobs[hidden] { display: none; }
.job { display: flex; align-items: center; justify-content: center; gap: 6px; }
.job .btn { text-decoration: none; display: inline-flex; align-items: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job .icon-btn { width: 32px; height: 32px; }

.log-lines { font: 12px/1.65 var(--mono); color: var(--text-2); max-height: 196px; overflow-y: auto; scrollbar-width: none; }
.log-lines::-webkit-scrollbar { display: none; }
.log-lines p { margin: 0; display: grid; grid-template-columns: 62px minmax(0, 1fr); }
.log-lines time { color: var(--text-3); }
.log-lines span { overflow-wrap: anywhere; }
.log-lines .hot span { color: var(--glow); }

/* Tasks for the helper in Anthropic's cloud: what each is doing, and the taps it may need. */
.tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.task { display: grid; gap: 5px; min-width: 0; }
.task + .task { padding-top: 11px; border-top: 1px solid var(--line); }
.task-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.task-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.task-head b { font: 500 12px var(--mono); color: var(--text-3); font-variant-numeric: tabular-nums; }
.task[data-status="starting"] .led, .task[data-status="working"] .led { background: var(--glow); box-shadow: 0 0 8px var(--glow); animation: blink 1.6s ease-in-out infinite; }
.task[data-status="waiting"] .led, .task[data-status="capped"] .led { background: #ffb547; box-shadow: 0 0 8px #ffb547; }
.task[data-status="done"] .led { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.task[data-status="failed"] .led { background: var(--danger); }
.task-line { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-2); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tasks.all .task-line { display: block; }
.task-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.task-actions:empty { display: none; }
.task-actions .btn { min-height: 28px; padding: 0 10px; font-size: 12.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.task-actions .icon-btn { width: 28px; height: 28px; margin-left: auto; }
.routines { list-style: none; margin: 11px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line); display: grid; gap: 4px; font-size: 13px; color: var(--text-2); }
.routines li { display: flex; align-items: center; gap: 8px; }
.routines li span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.routines .icon-btn { width: 28px; height: 28px; }
@keyframes blink { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .task .led { animation: none !important; } }

.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.facts li { font-size: 13.5px; line-height: 1.45; padding-left: 14px; position: relative; color: var(--text); }
.facts li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 1px; background: var(--glow); opacity: .7; transform: rotate(45deg); }

/* ---- the composer ------------------------------------------------------------------------------------------------------ */
.composer { padding: 8px 12px max(12px, env(safe-area-inset-bottom)); position: relative; z-index: 2; }
.composer-row {
  display: flex; align-items: center; gap: 2px; padding: 5px; border: 1px solid var(--line-strong); border-radius: 18px;
  background: var(--panel-solid); max-width: 720px; margin: 0 auto;
}
.composer-row:focus-within { border-color: color-mix(in srgb, var(--glow) 55%, transparent); }
.text { flex: 1; min-width: 0; border: 0; background: transparent; padding: 9px 8px; font-size: 16px; outline: none; }
.text::placeholder { color: var(--text-3); }
.send { color: var(--glow-ink); background: var(--glow); }
.send:hover { color: var(--glow-ink); background: var(--glow); filter: brightness(1.1); }
.attachment { max-width: 720px; margin: 0 auto 8px; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); }
.attachment img { width: 44px; height: 44px; object-fit: cover; border-radius: 9px; border: 1px solid var(--line-strong); }

/* ---- buttons and fields ------------------------------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 12px;
  border: 1px solid var(--line-strong); background: rgba(255, 255, 255, .03); font-weight: 550; white-space: nowrap;
}
.btn:hover { border-color: var(--glow); }
a.btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.btn.primary { background: var(--glow); border-color: var(--glow); color: var(--glow-ink); }
.btn.small { min-height: 32px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.btn.danger { color: var(--danger); }
.field { display: grid; gap: 6px; }
.field > span { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.field .hint { font-size: 12.5px; color: var(--text-3); letter-spacing: 0; text-transform: none; }
.input, .select, .login input {
  width: 100%; min-height: 42px; padding: 9px 12px; border-radius: 11px; border: 1px solid var(--line-strong); background: rgba(0, 0, 0, .25);
  font-size: 16px; color: var(--text);
}
.input:focus, .select:focus, .login input:focus { outline: none; border-color: var(--glow); box-shadow: 0 0 0 3px var(--glow-faint); }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row .field.inline { flex: 1 1 96px; }
.pair { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.keybox { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--glow-faint); }
.keybox[hidden] { display: none; }
.keybox p { margin: 0; }
.copyrow { display: flex; align-items: center; gap: 8px; min-width: 0; }
.copyrow code { flex: 1; min-width: 0; overflow-wrap: anywhere; font: 12.5px var(--mono); padding: 7px 9px; border-radius: 8px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line); }
input[type="range"] { width: 100%; accent-color: var(--glow); }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
.seg { display: inline-flex; flex-wrap: wrap; padding: 3px; border: 1px solid var(--line-strong); border-radius: 12px; gap: 3px; }
.seg button { border: 0; background: none; padding: 7px 12px; border-radius: 9px; color: var(--text-2); font-size: 14px; }
.seg button[aria-pressed="true"] { background: var(--glow); color: var(--glow-ink); font-weight: 600; }
.switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.switch input { appearance: none; width: 44px; height: 26px; border-radius: 99px; background: rgba(255, 255, 255, .12); position: relative; flex: none; transition: background .2s; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; }
.switch input:checked { background: var(--glow); }
.switch input:checked::after { transform: translateX(18px); }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); font-size: 13px; }
.error { color: var(--danger); font-size: 13.5px; min-height: 1.2em; margin: 0; }

/* ---- side sheet (settings, memory, the conversation) ------------------------------------------------------------------------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 20; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(1, 4, 9, .6); backdrop-filter: blur(3px); animation: fade .2s; }
.sheet {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(460px, 100%); background: var(--panel-solid); border-left: 1px solid var(--line-strong);
  display: grid; grid-template-rows: auto minmax(0, 1fr); animation: slide .25s cubic-bezier(.2, .8, .2, 1);
}
.sheet-head { display: flex; align-items: center; gap: 8px; padding: max(14px, env(safe-area-inset-top)) 12px 10px 20px; border-bottom: 1px solid var(--line); }
.sheet-head h2 { flex: 1; margin: 0; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; font-weight: 600; }
.sheet-body { overflow-y: auto; padding: 18px 20px max(24px, env(safe-area-inset-bottom)); display: grid; gap: 22px; align-content: start; }
.group { display: grid; gap: 12px; }
.group > h3 { margin: 0; font-size: 11.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--glow); font-weight: 600; }
.list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.list li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 6px 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .02); }
.list li > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.list .icon-btn { width: 32px; height: 32px; }
.history { display: grid; gap: 16px; }
.msg { max-width: 92%; }
.msg.you { justify-self: end; background: rgba(255, 255, 255, .055); border: 1px solid var(--line); padding: 8px 13px; border-radius: 14px 14px 4px 14px; color: var(--text-2); }
.msg.jarvis { justify-self: start; padding-left: 12px; border-left: 2px solid var(--glow-soft); }
.msg.jarvis .say { white-space: pre-wrap; }
.msg .tools { justify-content: flex-start; margin-top: 6px; }
@keyframes fade { from { opacity: 0; } }
@keyframes slide { from { transform: translateX(30px); opacity: 0; } }

/* ---- sign-in --------------------------------------------------------------------------------------------------------------- */
.login { position: relative; z-index: 1; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.login-card { width: min(360px, 100%); display: grid; gap: 16px; text-align: center; }
.login-card h1 { margin: 0; font-size: 14px; letter-spacing: .5em; font-weight: 650; }
.login-card .field { text-align: left; }
.login-mark { width: 120px; height: 120px; justify-self: center; filter: drop-shadow(0 0 18px var(--glow-soft)); }
.login-mark svg { width: 100%; height: 100%; overflow: visible; }
.login-core { fill: var(--glow); opacity: .5; animation: breathe 4s ease-in-out infinite; transform-origin: 100px 100px; }
@keyframes breathe { 0%, 100% { transform: scale(.94); opacity: .4; } 50% { transform: scale(1); opacity: .6; } }

.toast {
  position: fixed; z-index: 30; left: 50%; top: max(14px, env(safe-area-inset-top)); transform: translateX(-50%); max-width: min(92vw, 520px);
  padding: 10px 16px; border-radius: 12px; background: var(--panel-solid); border: 1px solid var(--glow-soft); box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
  animation: fade .2s;
}
.toast.err { border-color: var(--danger); }
.desktop-only { display: none; }

/* ---- powering up ------------------------------------------------------------------------------------------------------------ */
.app.booting .orb { animation: power 1s cubic-bezier(.2, .8, .2, 1) backwards; }
.app.booting .panel { animation: panel-in .7s cubic-bezier(.2, .8, .2, 1) backwards; }
.app.booting .side .panel:nth-child(2) { animation-delay: .12s; }
.app.booting .side .panel:nth-child(3) { animation-delay: .24s; }
.app.booting .left .panel { animation-name: panel-in-left; }
.app.booting .status, .app.booting .chips, .app.booting .composer { animation: fade .6s .5s backwards; }
@keyframes power { from { opacity: 0; transform: scale(.86); } }
@keyframes panel-in { from { opacity: 0; transform: translateX(16px); } }
@keyframes panel-in-left { from { opacity: 0; transform: translateX(-16px); } }

/* ---- wide screens: panels down both sides ----------------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .hud { display: grid; grid-template-columns: minmax(230px, 300px) minmax(0, 1fr) minmax(230px, 300px); gap: 20px; padding: 6px 20px 0; }
  .side { overflow-y: auto; padding-bottom: 12px; scrollbar-width: none; }
  .side::-webkit-scrollbar { display: none; }
  .desktop-only { display: inline-grid; }
  .composer { padding: 8px 20px 18px; }
}

/* ---- phones and narrow windows: the brain first, the panels in two swipeable rows under it --------------------------------- */
@media (max-width: 899px) {
  .hud { display: flex; flex-direction: column; overflow-y: auto; gap: 12px; padding-bottom: 8px; }
  .center { order: -1; padding: 4px 16px 12px; }
  .orb { --size: min(66vw, 290px); }
  .side { display: flex; overflow-x: auto; gap: 12px; padding: 2px 16px 4px; scroll-snap-type: x mandatory; scrollbar-width: none; flex: none; }
  .side::-webkit-scrollbar { display: none; }
  .side .panel { flex: 0 0 min(80vw, 320px); scroll-snap-align: start; }
  .clock { display: none; }
  .bar-actions { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}