@font-face { font-family: "Oxanium"; src: url("/static/fonts/oxanium-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Oxanium"; src: url("/static/fonts/oxanium-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --void: #04090c;       /* background: deep blue-black */
  --hull: #08141a;       /* panels */
  --hull-2: #0c1d24;     /* raised */
  --line: rgba(110, 230, 215, .14);
  --line-strong: rgba(110, 230, 215, .32);
  --holo: #4fe3d1;       /* hologram teal (Abrahms brand) */
  --holo-dim: #1f7f76;
  --amber: #ffb547;      /* thinking / needs your OK */
  --ink: #d9f4f0;
  --dim: #6e908c;
  --danger: #ff6b78;
  --hud: "Oxanium", "SF Pro Display", system-ui, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --safe-top: env(safe-area-inset-top); --safe-bottom: env(safe-area-inset-bottom);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; color: var(--ink); font: 16px/1.5 var(--body); background: var(--void); }
body {
  background:
    radial-gradient(1200px 700px at 12% -10%, rgba(79, 227, 209, .10), transparent 60%),
    radial-gradient(900px 600px at 110% 110%, rgba(79, 227, 209, .06), transparent 60%),
    var(--void);
}
body::before {          /* faint holographic grid */
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 30% 20%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 30% 20%, #000 0%, transparent 70%);
}
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--holo); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.screen { position: relative; height: 100%; }

/* ---------- the core ---------- */
.core-slot { display: grid; place-items: center; padding: 0; border: 0; background: none; }
.core { width: 100%; height: 100%; overflow: visible; }
.core .halo { fill: rgba(79, 227, 209, .05); stroke: var(--line); stroke-width: .6; }
.core .ring circle { fill: none; stroke: var(--holo); }
.core .r1 circle { stroke-width: 1.4; stroke-dasharray: 70 12 24 12 120 18 40 64; opacity: .85; }
.core .r2 circle { stroke-width: 5; stroke-dasharray: 1.5 4.5; opacity: .45; }
.core .r3 circle { stroke-width: 2.2; stroke-dasharray: 96 24 48 72 30 90; opacity: .9; }
.core .ticks line { stroke: var(--holo); stroke-width: 1; opacity: .35; }
.core .ticks line.major { opacity: .8; stroke-width: 1.4; }
.core .heart { opacity: .9; }
.core .s0 { stop-color: #e9fffb; } .core .s1 { stop-color: var(--holo); } .core .s2 { stop-color: var(--holo); stop-opacity: 0; }
.core .iris { fill: #eafffb; filter: drop-shadow(0 0 6px var(--holo)); }
.core .ring, .core .ticks, .core .heart { transform-origin: 100px 100px; transform-box: view-box; }
.core { filter: drop-shadow(0 0 14px rgba(79, 227, 209, .35)); }

.core .r1 { animation: spin 38s linear infinite; }
.core .r2 { animation: spin 60s linear infinite reverse; }
.core .r3 { animation: spin 24s linear infinite; }
.core .ticks { animation: spin 120s linear infinite reverse; }
.core .heart { animation: breathe 5s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { transform: scale(1.08); opacity: 1; } }
@keyframes beat { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.22); } 60% { transform: scale(.96); } }
@keyframes ripple { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.18); opacity: .2; } }

/* states */
body[data-state="listening"] .core .r1 { animation: ripple 1.1s ease-out infinite; }
body[data-state="listening"] .core .r2 { animation-duration: 8s; opacity: .8; }
body[data-state="listening"] .core .heart { animation: breathe 1.1s ease-in-out infinite; }
body[data-state="thinking"] { --holo: #ffc76a; }
body[data-state="thinking"] .core .r1 { animation-duration: 2.4s; }
body[data-state="thinking"] .core .r3 { animation-duration: 1.4s; animation-direction: reverse; }
body[data-state="speaking"] .core .heart { animation: beat .55s ease-in-out infinite; }
body[data-state="speaking"] .core .r3 { animation-duration: 6s; }
body[data-state="offline"] { --holo: #5b6f6d; }
body[data-state="offline"] .core * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .core * { animation: none !important; } }

.core-xl { width: 220px; height: 220px; margin: 0 auto; }
.core-lg { width: 132px; height: 132px; flex: none; }
.core-sm { width: 46px; height: 46px; flex: none; }

.wordmark { font-family: var(--hud); font-weight: 600; letter-spacing: .14em; }
.wordmark.small { font-size: 18px; letter-spacing: .12em; }
.state-text { font-family: var(--hud); font-size: 14px; color: var(--holo); letter-spacing: .04em; transition: color .3s; }

/* ---------- login ---------- */
#login { display: grid; place-items: center; padding: 24px; }
.login { width: 100%; max-width: 360px; text-align: center; }
.login .wordmark { font-size: 34px; margin: 22px 0 6px; }
.login-sub { color: var(--dim); margin: 0 0 26px; }
#login-form { display: grid; gap: 12px; }
#login-form input { width: 100%; padding: 15px 16px; border-radius: 12px; border: 1px solid var(--line-strong);
  background: rgba(8, 20, 26, .8); color: var(--ink); font-size: 17px; outline: none; letter-spacing: .06em; }
#login-form input:focus { border-color: var(--holo); box-shadow: 0 0 0 4px rgba(79, 227, 209, .12); }
#login-form button { padding: 15px; border-radius: 12px; border: 1px solid var(--holo); background: rgba(79, 227, 209, .14);
  color: var(--ink); font-family: var(--hud); font-weight: 600; font-size: 17px; letter-spacing: .1em; }
#login-form button:disabled { opacity: .6; }
.error { color: var(--danger); min-height: 1.5em; }

/* ---------- main layout ---------- */
#chat { display: grid; grid-template-columns: 340px 1fr; }
.console { border-right: 1px solid var(--line); background: rgba(6, 15, 19, .72); backdrop-filter: blur(10px);
  overflow-y: auto; padding: calc(var(--safe-top) + 22px) 22px 22px; }
.console-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.state-line { display: grid; gap: 2px; }
.block { border-top: 1px solid var(--line); padding: 16px 0 6px; }
.block h2 { margin: 0 0 10px; font: 600 13px/1 var(--hud); letter-spacing: .08em; color: var(--dim); }

.systems, .next { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.systems li { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 10px; font-size: 14px; }
.systems .led { width: 8px; height: 8px; border-radius: 50%; background: #2a3b3a; }
.systems li.on .led { background: var(--holo); box-shadow: 0 0 8px var(--holo); }
.systems .note { color: var(--dim); font-size: 12px; }
.systems li:not(.on) .sys-name { color: var(--dim); }
.next li { display: grid; grid-template-columns: 104px 1fr; gap: 10px; font-size: 14px; }
.next time { font-family: var(--hud); color: var(--holo); font-size: 13px; white-space: nowrap; }
.next .none { color: var(--dim); grid-column: 1 / -1; }

.actions { display: grid; gap: 7px; }
.actions button { text-align: left; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--line);
  background: rgba(12, 29, 36, .6); font-size: 14px; transition: border-color .15s, background .15s; }
.actions button:hover { border-color: var(--line-strong); background: rgba(12, 29, 36, .95); }
.actions .quiet { color: var(--danger); border-color: transparent; background: none; }

.comms { display: flex; flex-direction: column; min-width: 0; height: 100%; }
.bar { display: none; }

/* feed: a comms log rather than chat bubbles */
#feed { flex: 1; overflow-y: auto; padding: 26px clamp(14px, 4vw, 48px) 10px; display: flex; flex-direction: column; gap: 14px;
  overscroll-behavior: contain; }
.day { align-self: center; font: 600 12px/1 var(--hud); color: var(--dim); letter-spacing: .08em; padding: 6px 0; }
.msg { max-width: min(680px, 88%); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15.5px; }
.msg.julian { align-self: flex-start; padding: 2px 0 2px 16px; border-left: 2px solid var(--holo-dim); }
.msg.julian.alert { border-left-color: var(--amber); }
.msg.you { align-self: flex-end; padding: 10px 14px; border-radius: 14px 14px 4px 14px;
  background: rgba(79, 227, 209, .12); border: 1px solid var(--line-strong); }
.msg a { color: var(--holo); }
.meta { display: block; margin-top: 4px; font: 12px/1 var(--hud); color: var(--dim); letter-spacing: .04em; }
.msg.you .meta { text-align: right; }
.msg audio { display: block; width: 260px; max-width: 100%; margin-top: 10px; height: 36px; }
.file { display: inline-flex; gap: 8px; align-items: center; margin-top: 10px; padding: 9px 13px; border-radius: 10px;
  border: 1px solid var(--line-strong); background: rgba(79, 227, 209, .07); text-decoration: none; font-size: 14px; }
.decide { display: flex; gap: 8px; margin-top: 12px; max-width: 360px; }
.decide button { flex: 1; padding: 10px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--hull-2); }
.decide .yes { border-color: var(--amber); background: rgba(255, 181, 71, .16); color: #ffe2b0; font-weight: 600; }
.decide button:disabled { opacity: .45; }

.empty { margin: auto; text-align: center; color: var(--dim); display: grid; gap: 8px; max-width: 420px; }
.empty p { margin: 0 0 6px; }
.empty button { padding: 11px 14px; border-radius: 12px; border: 1px dashed var(--line-strong); background: none; color: var(--ink); font-size: 14px; }

.typing { display: flex; align-items: center; gap: 5px; margin: 0 clamp(14px, 4vw, 48px) 8px; color: var(--amber);
  font: 13px var(--hud); }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
.typing span { margin-left: 6px; }
@keyframes blink { 50% { opacity: .2; } }

#composer { display: flex; align-items: flex-end; gap: 8px; padding: 12px clamp(10px, 4vw, 48px) calc(var(--safe-bottom) + 12px);
  border-top: 1px solid var(--line); background: rgba(4, 9, 12, .85); backdrop-filter: blur(10px); }
#text { flex: 1; resize: none; max-height: 140px; padding: 12px 15px; border-radius: 14px; border: 1px solid var(--line-strong);
  background: rgba(8, 20, 26, .9); color: var(--ink); font: 16px/1.4 var(--body); outline: none; }
#text:focus { border-color: var(--holo); }
.mic, .send { width: 48px; height: 48px; border-radius: 14px; flex: none; display: grid; place-items: center; }
.mic svg, .send svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mic { border: 1px solid var(--line-strong); background: var(--hull-2); color: var(--holo); }
.mic.recording { border-color: var(--danger); color: var(--danger); background: rgba(255, 107, 120, .12); animation: rec 1s infinite; }
@keyframes rec { 50% { box-shadow: 0 0 0 8px rgba(255, 107, 120, .15); } }
.send { border: 1px solid var(--holo); background: rgba(79, 227, 209, .18); color: var(--ink); }

.hint { display: flex; gap: 10px; align-items: start; margin: 10px clamp(10px, 4vw, 48px) 0; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line-strong); background: rgba(79, 227, 209, .07); font-size: 14px; }
.hint button { margin-left: auto; border: 0; background: none; font-size: 20px; line-height: 1; color: var(--dim); }
.link { width: 9px; height: 9px; border-radius: 50%; background: var(--holo); box-shadow: 0 0 8px var(--holo); margin-left: auto; }
.link.down { background: var(--danger); box-shadow: none; }

/* ---------- phone ---------- */
@media (max-width: 860px) {
  #chat { display: block; }
  .comms { height: 100%; }
  .bar { display: flex; align-items: center; gap: 12px; padding: calc(var(--safe-top) + 8px) 14px 10px;
    border-bottom: 1px solid var(--line); background: rgba(4, 9, 12, .85); backdrop-filter: blur(10px); }
  .bar-text { display: grid; line-height: 1.25; }
  .console { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; max-height: 82%; border-right: 0;
    border-top: 1px solid var(--line-strong); border-radius: 20px 20px 0 0; background: rgba(6, 15, 19, .97);
    padding: 18px 18px calc(var(--safe-bottom) + 18px); transform: translateY(105%); transition: transform .28s ease; }
  .console.open { transform: none; }
  .console-head { justify-content: center; }
  .scrim { position: fixed; inset: 0; z-index: 10; background: rgba(0, 0, 0, .5); }
  #feed { padding-top: 18px; }
  .msg { max-width: 92%; }
}