:root {
  --bg: #000;
  --fg: #f4f6f8;
  --dim: rgba(244, 246, 248, .55);
  --faint: rgba(244, 246, 248, .28);
  --line: rgba(255, 255, 255, .09);
  --panel: rgba(14, 16, 19, .92);
  --accent: #8fe3ff;
  --danger: #ff6b6b;
  --ok: #7dffb3;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --font: "SF Pro Display", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); }
body {
  font-family: var(--font);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.app {
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: calc(var(--safe-t) + 10px) 16px calc(var(--safe-b) + 16px);
  max-width: 560px;
  margin: 0 auto;
}

/* ---------- top bar ---------- */
.top { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 6px; }
.brand { justify-self: center; font: 500 11px/1 var(--mono); letter-spacing: .32em; color: var(--faint); }
.brand span { color: var(--dim); }
.icon-btn {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--dim);
  border: 1px solid var(--line);
  transition: color .25s, border-color .25s, background .25s, transform .15s var(--ease);
}
.icon-btn:active { transform: scale(.92); }
.icon-btn:focus-visible, .all:focus-visible, .check:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.icon-btn:disabled { opacity: .3; }
#btn-mic .i-mic, #btn-mute .i-muted { display: none; }
#btn-mic.on .i-mic { display: block; }
#btn-mic.on .i-mic-off { display: none; }
#btn-mic.on { color: var(--bg); background: var(--fg); border-color: var(--fg); box-shadow: 0 0 0 0 rgba(255,255,255,.4); animation: ring 2.4s var(--ease) infinite; }
#btn-mute.on .i-vol { display: none; }
#btn-mute.on .i-muted { display: block; }
#btn-mute.on { color: var(--danger); border-color: rgba(255, 107, 107, .35); }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.35); } 70%, 100% { box-shadow: 0 0 0 14px rgba(255,255,255,0); } }

/* ---------- stage / orb ---------- */
.stage { position: relative; min-height: 0; display: grid; place-items: center; }
#orb { position: absolute; inset: 0; width: 100%; height: 100%; }
.hud { position: absolute; left: 0; right: 0; bottom: 4%; text-align: center; padding: 0 8px; pointer-events: none; }
.status { margin: 0 0 10px; font: 500 10.5px/1 var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--faint); }
.transcript, .reply {
  margin: 0 auto; max-width: 30ch; min-height: 1.4em;
  opacity: 0; transform: translateY(6px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.transcript { font-size: 15px; color: var(--dim); }
.transcript.interim { color: var(--faint); }
.reply { margin-top: 8px; font-size: 17px; color: var(--fg); }
.transcript.show, .reply.show { opacity: 1; transform: none; }

/* ---------- next task ---------- */
.next {
  position: relative;
  border-top: 1px solid var(--line);
  padding: 18px 2px 0;
}
.next-head { display: flex; justify-content: space-between; align-items: baseline; }
.label { font: 500 10.5px/1 var(--mono); letter-spacing: .3em; color: var(--accent); opacity: .85; }
.due { font: 500 12px/1 var(--mono); color: var(--dim); letter-spacing: .04em; }
.due.overdue, .t-due.overdue { color: var(--danger); }
.next-row { display: flex; align-items: center; gap: 14px; margin: 14px 0 18px; }
#next-title {
  flex: 1; margin: 0;
  font-size: clamp(26px, 8vw, 36px); line-height: 1.12; font-weight: 600; letter-spacing: -.02em;
  text-wrap: balance;
  animation: rise .6s var(--ease);
}
.next.empty #next-title { color: var(--faint); font-weight: 400; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.all {
  width: 100%; height: 48px; border-radius: 14px;
  border: 1px solid var(--line);
  font: 500 12px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--dim);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: background .25s, color .25s;
}
.all:active { background: rgba(255,255,255,.05); }
.count:not(:empty) { padding: 3px 7px; border-radius: 99px; background: rgba(255,255,255,.08); color: var(--fg); letter-spacing: 0; }

.check {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--faint); display: grid; place-items: center; color: transparent;
  transition: border-color .2s, background .2s, color .2s, transform .15s var(--ease);
}
.check svg { width: 18px; height: 18px; stroke-width: 2.2; }
.check.big { width: 52px; height: 52px; }
.check.big svg { width: 24px; height: 24px; }
.check:hover { border-color: var(--fg); color: var(--dim); }
.check:active { transform: scale(.9); background: var(--fg); color: var(--bg); }

/* ---------- sheet ---------- */
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  height: calc(100dvh - var(--safe-t) - 70px);
  max-width: 560px; margin: 0 auto;
  display: flex; flex-direction: column;
  background: var(--panel);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  border: 1px solid var(--line); border-bottom: 0;
  border-radius: 24px 24px 0 0;
  transform: translateY(102%);
  visibility: hidden;
  transition: transform .55s var(--ease), visibility 0s linear .55s;
  padding-bottom: var(--safe-b);
}
.sheet-open .sheet { transform: none; visibility: visible; transition: transform .55s var(--ease), visibility 0s; }
.sheet-open .stage, .sheet-open .next { opacity: .25; transition: opacity .5s var(--ease); }
.stage, .next { transition: opacity .5s var(--ease); }
.sheet-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 14px 10px 20px; }
.list { list-style: none; margin: 0; padding: 0 10px 12px; overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }
.task {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 6px 10px 10px; border-bottom: 1px solid var(--line);
  animation: slide .5s var(--ease) both; animation-delay: calc(var(--i) * 28ms + 120ms);
}
@keyframes slide { from { opacity: 0; transform: translateY(14px); } }
.t-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; cursor: pointer; padding: 4px 0; }
.t-title { font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.t-due { font: 500 11px/1 var(--mono); color: var(--dim); }
.task.done .t-title { color: var(--faint); text-decoration: line-through; text-decoration-color: var(--faint); }
.task.done .check { background: rgba(255,255,255,.12); border-color: transparent; color: var(--dim); }
.icon-btn.small { width: 38px; height: 38px; border-color: transparent; color: var(--faint); }
.icon-btn.small svg { width: 18px; height: 18px; }
.icon-btn.danger:hover, .task.confirm .icon-btn.danger { color: var(--danger); border-color: rgba(255, 107, 107, .4); }
.task.confirm .icon-btn.danger { background: rgba(255, 107, 107, .12); }
.divider { padding: 22px 10px 8px; font: 500 10.5px/1 var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--faint); }
.empty-row { padding: 28px 10px; color: var(--faint); text-align: center; }
.sheet-foot { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px 14px; font-size: 12px; color: var(--faint); border-top: 1px solid var(--line); }
.link { color: var(--dim); text-decoration: underline; text-underline-offset: 3px; font-size: 12px; }

/* ---------- editor ---------- */
.editor {
  width: min(92vw, 420px); padding: 0; border: 1px solid var(--line); border-radius: 20px;
  background: #0b0c0e; color: var(--fg);
}
.editor[open] { animation: pop .35s var(--ease); }
.editor::backdrop { background: rgba(0,0,0,.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.editor form { padding: 22px; display: grid; gap: 16px; }
.editor h2, .login h2 { margin: 0; font-size: 18px; font-weight: 600; }
.editor label { display: grid; gap: 8px; font-size: 12px; color: var(--dim); letter-spacing: .04em; }
input {
  width: 100%; height: 48px; padding: 0 14px;
  font: 16px var(--font); color: var(--fg);
  background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 12px;
  outline: none; user-select: text; color-scheme: dark;
}
input:focus { border-color: rgba(143, 227, 255, .5); }
.actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.primary, .ghost { height: 44px; padding: 0 20px; border-radius: 12px; font-weight: 600; }
.primary { background: var(--fg); color: var(--bg); }
.primary:disabled { opacity: .5; }
.ghost { color: var(--dim); }

/* ---------- login ---------- */
.login { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: var(--bg); padding: 16px; }
.login[hidden] { display: none; }
.login form { width: min(100%, 340px); display: grid; gap: 12px; text-align: center; }
.login-orb { justify-self: center; margin-bottom: 8px; animation: rise .8s var(--ease); }
.login-orb img { border-radius: 22px; }
.muted { margin: 0 0 8px; color: var(--dim); font-size: 14px; }
.error { min-height: 1.2em; margin: 0; color: var(--danger); font-size: 13px; }
.locked .app { filter: blur(6px); }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; top: calc(var(--safe-t) + 66px); z-index: 40;
  transform: translate(-50%, -10px); opacity: 0; pointer-events: none;
  padding: 10px 16px; border-radius: 99px; font-size: 13px;
  background: rgba(30, 32, 36, .95); border: 1px solid var(--line);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media (min-height: 760px) { .next-row { margin: 18px 0 22px; } }