:root {
  --bg:#f5f7fb; --panel:#fff; --ink:#161f33; --muted:#6b7689;
  --line:#e3e8f0; --accent:#2f6df6; --accent-soft:#eaf1fe;
  --good:#1c9b62; --warn:#c9770a; --radius:12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0f141d; --panel:#161d29; --ink:#e8edf5; --muted:#94a0b4;
    --line:#26303f; --accent:#5b8dfa; --accent-soft:#1b2740;
    --good:#3fbd85; --warn:#e0972f;
  }
}

* { box-sizing: border-box; }

body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size:15px; line-height:1.5;
}

h1 { font-size:1.5rem; margin:0 0 .2rem; }
h2 { font-size:1.05rem; margin:1.8rem 0 .6rem; }
a { color:inherit; text-decoration:none; }
code { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.88em; }
mark { background:var(--accent-soft); color:inherit; border-radius:3px; padding:0 2px; }

.sub { color:var(--muted); margin:0 0 1.2rem; }
.hint { color:var(--muted); font-size:.85rem; }
.error { color:#c02626; background:#fdecec; padding:.6rem .8rem; border-radius:8px; }
.spacer { flex:1; }

/* ---- chrome ---- */
.topbar {
  display:flex; align-items:center; gap:1rem; padding:.7rem 1.2rem;
  background:var(--panel); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:10;
}
.brand { font-weight:600; }
.topsearch { flex:1; max-width:520px; }
.topsearch input {
  width:100%; padding:.45rem .7rem; border:1px solid var(--line);
  border-radius:999px; background:var(--bg); color:var(--ink);
}

.shell { display:grid; grid-template-columns:210px 1fr; align-items:start; }
.side { padding:1.2rem .8rem; display:flex; flex-direction:column; gap:2px; }
.side a {
  padding:.4rem .7rem; border-radius:8px; color:var(--muted);
  display:flex; align-items:center; gap:.5rem;
}
.side a:hover { background:var(--panel); color:var(--ink); }
.side a.on { background:var(--accent-soft); color:var(--accent); font-weight:600; }
.side-label {
  font-size:.72rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); margin:1rem 0 .3rem .7rem;
}
.badge {
  background:var(--accent); color:#fff; font-size:.7rem; font-weight:600;
  border-radius:999px; padding:0 .4rem; margin-left:auto;
}

.main { padding:1.6rem 2rem 4rem; max-width:820px; }
.centered { display:grid; place-items:center; min-height:100vh; padding:1.5rem; }

/* ---- capture ---- */
.capture {
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:.8rem; margin-bottom:1.5rem;
}
.capture textarea, .capture input, .capture select {
  width:100%; border:0; background:transparent; color:var(--ink);
  font:inherit; resize:vertical; outline:none;
}
.capture-foot {
  display:flex; align-items:center; gap:.5rem; margin-top:.6rem;
  flex-wrap:wrap;
}
.capture-foot select {
  width:auto; border:1px solid var(--line); border-radius:8px;
  padding:.25rem .4rem; background:var(--bg);
}

button { font:inherit; cursor:pointer; border-radius:8px; }
button.primary { background:var(--accent); color:#fff; border:0; padding:.45rem 1rem; }
button.ghost {
  background:transparent; border:1px solid var(--line); color:var(--muted);
  padding:.2rem .55rem; font-size:.82rem;
}
button.ghost:hover { color:var(--ink); border-color:var(--muted); }

/* ---- notes ---- */
.notes { display:flex; flex-direction:column; gap:.7rem; }
.note {
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:.8rem .9rem;
}
.note-body { white-space:pre-wrap; word-wrap:break-word; }
.note-foot {
  display:flex; align-items:center; gap:.4rem; margin-top:.6rem;
  flex-wrap:wrap; font-size:.8rem;
}
.note-foot select {
  border:1px solid var(--line); border-radius:8px; padding:.15rem .3rem;
  background:var(--bg); color:var(--muted); font-size:.8rem;
}
.note.going { opacity:.35; transition:opacity .2s; }

.src { color:var(--muted); text-transform:uppercase; font-size:.68rem; letter-spacing:.06em; }
.pill {
  background:var(--accent-soft); color:var(--accent);
  border-radius:999px; padding:.05rem .5rem; font-size:.75rem;
}
.pill.ai { background:transparent; border:1px dashed var(--accent); }
.tag { color:var(--muted); font-size:.75rem; }

/* ---- tasks ---- */
.tasks { display:flex; flex-direction:column; gap:.4rem; }
.task {
  display:flex; align-items:center; gap:.6rem;
  background:var(--panel); border:1px solid var(--line);
  border-radius:10px; padding:.55rem .8rem;
}
.task.done .task-title { text-decoration:line-through; color:var(--muted); }
.task-title { flex:1; }
.tasks.muted { opacity:.6; }
.chip {
  font-size:.72rem; color:var(--muted); border:1px solid var(--line);
  border-radius:999px; padding:.05rem .5rem;
}
.chip.deep { color:var(--accent); border-color:var(--accent); }
.chip.due { color:var(--warn); border-color:var(--warn); }

/* ---- the day ---- */
.day-head { display:flex; justify-content:space-between; align-items:flex-start; }
.day-nav { display:flex; gap:.3rem; align-items:center; }
.ghost-link {
  color:var(--muted); border:1px solid var(--line); border-radius:8px;
  padding:.15rem .55rem; font-size:.85rem;
}
.ghost-link:hover { color:var(--ink); border-color:var(--muted); }

.stats {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:.6rem; margin:1rem 0 1.4rem;
}
.stat {
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:.7rem .9rem;
  display:flex; flex-direction:column; gap:.1rem;
}
.stat-n { font-size:1.3rem; font-weight:600; }
.stat-l { color:var(--muted); font-size:.8rem; }

.day-actions {
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-bottom:.5rem;
}

.timeline { display:flex; flex-direction:column; gap:.35rem; }
.slot {
  display:flex; align-items:center; gap:.7rem;
  background:var(--panel); border:1px solid var(--line);
  border-left:3px solid var(--line);
  border-radius:10px; padding:.5rem .8rem;
}
.slot-time {
  color:var(--muted); font-size:.8rem; font-variant-numeric:tabular-nums;
  min-width:92px;
}
.slot-body { flex:1; display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; }
.slot-acts { display:flex; gap:.3rem; }
.slot.meeting { border-left-color:var(--muted); }
.slot.deep { border-left-color:var(--accent); }
.slot.admin { border-left-color:var(--warn); }
.slot.break { border-left-color:var(--good); }
.slot.is-done { opacity:.5; }
.slot.is-done strong { text-decoration:line-through; }

.gaps { display:flex; flex-wrap:wrap; gap:.4rem; }
.gap {
  background:var(--panel); border:1px dashed var(--line);
  border-radius:999px; padding:.2rem .7rem; font-size:.85rem;
  font-variant-numeric:tabular-nums;
}

.answer p { margin:.3rem 0; }
.answer { border-left:3px solid var(--accent); }

/* ---- chat ---- */
.threads { display:flex; gap:.4rem; overflow-x:auto; margin-bottom:.9rem; }
.thread {
  white-space:nowrap; font-size:.82rem; color:var(--muted);
  border:1px solid var(--line); border-radius:999px; padding:.2rem .7rem;
  background:var(--panel);
}
.thread.on { color:var(--accent); border-color:var(--accent); background:var(--accent-soft); }

.messages { display:flex; flex-direction:column; gap:.6rem; margin-bottom:1rem; }
.msg {
  padding:.6rem .85rem; border-radius:var(--radius);
  white-space:pre-wrap; word-wrap:break-word; max-width:85%;
}
.msg.user {
  align-self:flex-end; background:var(--accent); color:#fff;
  border-bottom-right-radius:4px;
}
.msg.assistant {
  align-self:flex-start; background:var(--panel); border:1px solid var(--line);
  border-bottom-left-radius:4px;
}
.msg.pending { color:var(--muted); font-style:italic; }
.msg.error-msg {
  align-self:flex-start; background:transparent;
  border:1px solid var(--warn); color:var(--warn);
}
.used-tools {
  margin-top:.4rem; font-size:.72rem; color:var(--muted);
  border-top:1px solid var(--line); padding-top:.3rem;
}

.composer {
  position:sticky; bottom:.6rem;
  /* The bar floats over the thread, so it needs its own backdrop or the last
     message shows through it. */
  box-shadow:0 -12px 16px -8px var(--bg);
}
#mic { touch-action:none; user-select:none; }
#mic.recording { color:#fff; background:var(--warn); border-color:var(--warn); }

.check {
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.85rem; color:var(--muted); white-space:nowrap;
}
.check input { width:auto; margin:0; }

/* Markdown inside a reply. */
.msg ul { margin:.4rem 0; padding-left:1.1rem; }
.msg li { margin:.15rem 0; }
.msg code {
  background:var(--bg); border:1px solid var(--line);
  border-radius:4px; padding:0 .25rem;
}
.msg.user code { background:rgba(255,255,255,.18); border-color:transparent; }

/* ---- panels ---- */
.panel {
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:1rem 1.1rem; margin-bottom:1rem;
}
.panel h2 { margin-top:0; }
.row {
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.45rem 0; border-bottom:1px solid var(--line);
}
.row:last-of-type { border-bottom:0; }
.status { color:var(--muted); font-size:.85rem; }
.status.ok { color:var(--good); }
.status.warn { color:var(--warn); }

.empty {
  background:var(--panel); border:1px dashed var(--line);
  border-radius:var(--radius); padding:2rem; text-align:center; color:var(--muted);
}
.empty p { margin:.2rem 0; }

.card {
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.8rem; width:100%; max-width:380px;
}
.field { display:block; margin:.8rem 0; font-size:.85rem; color:var(--muted); }
.field input {
  display:block; width:100%; margin-top:.25rem; padding:.5rem .6rem;
  border:1px solid var(--line); border-radius:8px;
  background:var(--bg); color:var(--ink); font:inherit;
}
.card button.primary { width:100%; margin-top:1rem; padding:.6rem; }

.scopes { list-style:none; padding:0; margin:1rem 0; }
.scopes li {
  display:flex; flex-direction:column; gap:.15rem;
  padding:.5rem .7rem; margin-bottom:.4rem;
  background:var(--bg); border:1px solid var(--line); border-radius:8px;
}
.scopes span { font-size:.85rem; color:var(--muted); }
button.wide { width:100%; margin-top:.5rem; padding:.5rem; }

.toast {
  position:fixed; bottom:1.2rem; left:50%; transform:translateX(-50%);
  background:var(--ink); color:var(--bg); padding:.5rem 1rem;
  border-radius:999px; font-size:.85rem; opacity:0; transition:opacity .2s;
  pointer-events:none;
}
.toast.show { opacity:1; }

@media (max-width: 760px) {
  .shell { grid-template-columns:1fr; }
  .side {
    flex-direction:row; overflow-x:auto; padding:.5rem .8rem;
    border-bottom:1px solid var(--line); background:var(--panel);
  }
  .side a { white-space:nowrap; }
  .side-label { display:none; }
  .main { padding:1.2rem 1rem 3rem; }
  .topsearch { display:none; }
}