:root {
  --bg: #faf8f4;
  --card: #fffdfa;
  --ink: #23201c;
  --muted: #857c70;
  --line: #e6e0d6;
  --accent: #a4622f;
  --accent-soft: #f4e7dc;
  --warn: #b3502f;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161513;
    --card: #1e1c19;
    --ink: #ece7df;
    --muted: #9b938a;
    --line: #2e2b27;
    --accent: #d79a68;
    --accent-soft: #302722;
    --warn: #e0866a;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

.login { max-width: 420px; margin: 18vh auto 0; padding: 28px; text-align: center; }
.login .button { margin-top: 18px; }
.login .error { color: var(--danger, #a33); }

#app {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 16px calc(48px + env(safe-area-inset-bottom));
}

.spacer { margin-left: auto; }

.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0 8px;
  position: sticky;
  top: 0;
  background: linear-gradient(var(--bg) 70%, transparent);
  z-index: 5;
}
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: 0.02em; }
.brand-mark { width: 22px; height: 22px; border-radius: 6px; }
/* Navigation, and only navigation. The read-aloud switch is a mode over the
   timeline, so it sits down there with it instead of in this row. */
.topbar .nav { font-size: 0.8rem; }

/* Buttons */
.button, .chip {
  font: inherit;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: inherit;
  cursor: pointer;
  padding: 6px 14px;
}
.chip { font-size: 0.84rem; padding: 4px 11px; }
.button:hover, .chip:hover { border-color: var(--accent); color: var(--accent); }
.button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.button.primary:hover { color: #fff; filter: brightness(1.05); }
.chip.ghost { border-color: transparent; background: transparent; color: var(--muted); }
.chip.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* Nobody in the room. The one state where the app cannot do its job at all, so
   it is the one time the screen leads with something other than the timeline. */
.nobody {
  display: grid;
  gap: 8px;
  margin: 4px 0 12px;
  padding: 14px 16px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 16px;
}
.nobody[hidden] { display: none; }
.nobody-line { margin: 0; font-weight: 600; }
.nobody .hint { color: inherit; opacity: 0.72; }
.nobody-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chip.add { background: var(--card); }

/* Putting something in */
.compose {
  display: grid;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
}
.compose-text, .reply-input, .skill-input {
  font: inherit;
  width: 100%;
  resize: vertical;
  border: none;
  background: transparent;
  color: inherit;
  outline: none;
  padding: 2px;
}
.reply-input, .skill-input {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px;
  background: var(--bg);
}
/* One line, and taller only when there is more in it. The timeline is what the
   screen is for; this is the way through to it. */
.compose-text {
  resize: none;
  line-height: 1.7;
  max-height: 40vh;
  overflow-y: auto;
}
.compose-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.compose-status { color: var(--muted); font-size: 0.8rem; }
.compose-preview { display: flex; align-items: flex-start; gap: 8px; }
.compose-preview img {
  max-height: 180px;
  max-width: 70%;
  border-radius: 10px;
  border: 1px solid var(--line);
}

.who-bar { display: flex; align-items: center; gap: 6px; padding: 12px 2px; flex-wrap: wrap; }
.chip.speak { background: var(--bg); }
.persona-chip { background: var(--accent-soft); border-color: transparent; }

/* The timeline */
.feed { display: grid; gap: 14px; }
.empty { color: var(--muted); padding: 28px 4px; display: grid; gap: 6px; }
.empty-line { margin: 0; color: var(--ink); }
/* Said while a timeline is new, and not after. */
.note { margin: 0; padding: 0 4px; color: var(--muted); font-size: 0.8rem; }
.thread {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px 14px;
  display: grid;
  gap: 10px;
}
.post { display: grid; gap: 8px; }
.post-head { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--muted); }
.post-head .who { font-weight: 600; color: var(--ink); }
/* Append-only makes a delete recoverable in the log, but nobody wants to go and
   get it back. Reachable, not in the way - and always there without hover. */
.remove { opacity: 0; transition: opacity 120ms ease; }
.thread:hover .remove, .remove:focus-visible { opacity: 1; }
@media (hover: none) { .remove { opacity: 1; } }
.at, .place { color: var(--muted); font-size: 0.76rem; }
.said { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.shot img {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--line);
  display: block;
}
.link { color: var(--accent); font-size: 0.84rem; overflow-wrap: anywhere; }

/* What the app read out of the capture: available, not in the way. */
.read { font-size: 0.84rem; color: var(--muted); }
.read summary { cursor: pointer; }
.read-body { padding: 6px 0 2px; display: grid; gap: 6px; }
.read.pending, .read.error { margin: 0; }
.read.error { color: var(--warn); }
.ocr {
  margin: 0;
  padding: 8px;
  background: var(--bg);
  border-radius: 8px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.82rem;
  max-height: 320px;
  overflow: auto;
}
.origin { margin: 0; }

.said-row {
  display: grid;
  gap: 4px;
  padding-left: 10px;
  border-left: 2px solid var(--accent-soft);
}
.said-row.mine { border-left-color: var(--line); }
.said-row > .chip { justify-self: start; }
.said-head { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--muted); }
.said-head .who { font-weight: 600; color: var(--ink); }
.avatar { font-size: 1rem; }
.source {
  color: var(--accent);
  font-size: 0.78rem;
  justify-self: start;
  overflow-wrap: anywhere;
}
.reply { display: grid; gap: 8px; }
/* Replying is one of the two things you do here, so it is not the faintest text
   in the thread. It looks like somewhere to type, not like a footnote. */
.reply-open { justify-self: start; background: var(--bg); color: var(--muted); }
.reply-open:hover { color: var(--accent); }

/* Panels */
#sheet:empty { display: none; }
#sheet {
  position: fixed;
  inset: auto 0 0 0;
  max-height: 88vh;
  overflow: auto;
  background: var(--card);
  border-top: 1px solid var(--line);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.18);
  z-index: 20;
  padding-bottom: env(safe-area-inset-bottom);
}
.sheet { max-width: 680px; margin: 0 auto; }
.sheet-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 8px;
  position: sticky;
  top: 0;
  background: var(--card);
}
.panel-body { padding: 0 16px 24px; display: grid; gap: 14px; align-content: start; }
.panel-body h3 { margin: 8px 0 0; font-size: 0.9rem; }
.field { display: grid; gap: 4px; }
.field > span:first-child { color: var(--muted); font-size: 0.78rem; }
.field.row-field { grid-auto-flow: column; justify-content: start; align-items: center; gap: 8px; }
input[type="text"], input[type="password"], select, input[type="range"] {
  font: inherit;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg);
  color: inherit;
  width: 100%;
}
.hint { color: var(--muted); font-size: 0.78rem; line-height: 1.6; margin: 0; }
.hint.warn { color: var(--warn); }

.persona {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  display: grid;
  gap: 6px;
  opacity: 0.6;
}
.persona.on { opacity: 1; border-color: var(--accent); }
.persona-head { display: flex; align-items: center; gap: 8px; }
.persona-head .who { font-weight: 600; }
.tag { font-size: 0.72rem; color: var(--accent); }
.note-tag { font-size: 0.76rem; color: var(--muted); }
.domain { margin: 0; font-size: 0.82rem; color: var(--muted); }
.tools { margin: 0; font-size: 0.76rem; color: var(--muted); }
.switch { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; cursor: pointer; }
.switch input { width: auto; }
.install summary { cursor: pointer; font-size: 0.86rem; color: var(--accent); }
.install { display: grid; gap: 8px; }
.notes { display: grid; gap: 4px; max-height: 46vh; overflow: auto; }
.note summary { cursor: pointer; font-size: 0.82rem; color: var(--accent); }
.note .memo { max-height: none; }
.memo {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--bg);
  border-radius: 10px;
  padding: 10px;
  max-height: 46vh;
  overflow: auto;
  font-size: 0.86rem;
  margin: 0;
}

/* Dialogs and toasts */
.dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: grid;
  place-items: center;
  padding: 16px;
  z-index: 40;
}
.dialog {
  background: var(--card);
  border-radius: 16px;
  padding: 16px;
  width: min(560px, 100%);
  display: grid;
  gap: 10px;
}
.dialog h3 { margin: 0; }
#toasts {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom));
  display: grid;
  gap: 8px;
  z-index: 60;
}
.toast {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.86rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}
.toast-error { border-color: var(--warn); color: var(--warn); }

/* Dictation, carried over from the ported stack */
.mic-row { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mic-meter { display: none; align-items: flex-end; gap: 2px; height: 18px; }
.mic-meter.live { display: inline-flex; }
.mic-meter span { width: 3px; background: var(--accent); border-radius: 2px; }
.mic-status { max-width: 220px; color: var(--muted); font-size: 0.8rem; }