: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: 0.9375rem;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  touch-action: pan-y pinch-zoom;
}

.login { max-width: 420px; margin: 18vh auto 0; padding: 28px; text-align: center; }
.login input { display: block; width: 100%; margin-top: 12px; }
.login .button { margin-top: 18px; }
.login .error { color: var(--danger, #a33); }
.login-progress { display: grid; justify-items: center; gap: 12px; }
.login-progress p { margin: 0; }
.login-spinner { width: 28px; height: 28px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: login-spin 1s linear infinite; }
@keyframes login-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .login-spinner { animation: none; } }

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

.spacer { margin-left: auto; }

/* 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.danger { border-color: var(--danger, #a33); color: var(--danger, #a33); }
.chip.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.chip.voice-button:not(.active):hover { border-color: var(--line); color: inherit; }
.notification-schedules-heading { margin-bottom: 0.35rem; }
.notification-schedules-list { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; }
.chip.ghost.schedule { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; width: 100%; padding: 0; border: 0; border-radius: 0; color: var(--ink); font-size: 1rem; cursor: default; overflow-wrap: anywhere; }
.schedule-item { width: 100%; min-width: 0; padding: 8px 0; }
.schedule-owner { font-weight: 600; }
.schedule-when { color: var(--ink); font-size: 1.0625rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.schedule-note { flex: 1 1 160px; }
.schedule-actions { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.schedule-actions .chip-remove { width: 30px; min-height: 36px; }
.schedule-notify { color: var(--ink); background: var(--accent-soft); border-radius: 999px; padding: 2px 9px; font-size: 0.8125rem; white-space: nowrap; }
.schedule-edit-button { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--ink); font-size: 1.4rem; cursor: pointer; }
.schedule-edit-button:hover { background: var(--accent-soft); border-color: var(--accent); }
.schedule-dialog { max-height: calc(100dvh - 32px); overflow-y: auto; }
.schedule-dialog-note { margin: 0; overflow-wrap: anywhere; }
.schedule-dialog .schedule-edit-form { border: 0; padding: 6px 0 0; margin: 0; }
.schedule-edit-form { display: grid; gap: 16px; margin-top: 8px; padding: 18px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; }
.schedule-edit-form .schedule-date-field { display: grid; gap: 6px; min-width: 0; }
.schedule-field-label { font-weight: 600; }
.schedule-edit-form input[type="datetime-local"] { display: block; width: 100%; max-width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); font: inherit; font-size: 1.0625rem; font-weight: 600; }
.schedule-zone { color: var(--muted); font-size: 0.8125rem; }
.schedule-edit-form .schedule-push-field { display: flex; align-items: center; gap: 16px; cursor: pointer; }
.schedule-push-copy { display: grid; gap: 4px; flex: 1; min-width: 0; }
.schedule-push-hint { font-size: 0.8125rem; }
.schedule-toggle { position: relative; flex: 0 0 66px; width: 66px; height: 36px; }
.schedule-toggle input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; z-index: 1; cursor: pointer; }
.schedule-toggle-track { display: block; height: 100%; border-radius: 999px; background: var(--line); color: var(--ink); box-shadow: inset 0 0 0 1px var(--muted); }
.schedule-toggle-track::after { content: ""; position: absolute; top: 4px; left: 4px; width: 28px; height: 28px; border-radius: 50%; background: var(--card); box-shadow: 0 1px 3px #0003; }
.schedule-toggle-on, .schedule-toggle-off { position: absolute; top: 8px; font-size: 11px; font-weight: 700; line-height: 20px; }
.schedule-toggle-on { left: 9px; display: none; }
.schedule-toggle-off { right: 7px; }
.schedule-toggle input:checked + .schedule-toggle-track { background: var(--ink); color: var(--card); box-shadow: none; }
.schedule-toggle input:checked + .schedule-toggle-track::after { transform: translateX(30px); }
.schedule-toggle input:checked + .schedule-toggle-track .schedule-toggle-on { display: block; }
.schedule-toggle input:checked + .schedule-toggle-track .schedule-toggle-off { display: none; }
.schedule-toggle input:focus-visible + .schedule-toggle-track { outline: 2px solid var(--accent); outline-offset: 3px; }
.schedule-toggle input:disabled + .schedule-toggle-track { opacity: 0.5; }
.persona-schedule-row { border-bottom: 1px solid var(--line); padding: 8px 0; min-width: 0; }
.chip-remove { border: 0; background: transparent; color: var(--muted); padding: 0 2px; font: inherit; cursor: pointer; }
.chip-remove:hover { color: var(--danger, #a33); }

/* 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);
}
/* Held while what is in it is being sent. */
.compose-text[readonly], .reply-input[readonly] { color: var(--muted); }
.persona-editor .skill-input[readonly] {
  border-color: transparent;
  background: transparent;
  padding-inline: 0;
  resize: none;
}
/* Three lines, 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 {
  min-height: 5.1em;
  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: 8px 14px; padding: 12px 2px; flex-wrap: wrap; }
.who-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.who-label { color: var(--muted); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; }
.persona-chip { background: var(--accent-soft); border-color: transparent; }
.persona-chip {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.persona-chip { cursor: grab; transition: box-shadow 0.15s, transform 0.15s; }
.persona-chip.dragging { transform: scale(1.06); }
.persona-chip.nudge { animation: nudge 1.1s ease-in-out 0.4s 2; }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 35% { transform: translateX(10px); } 70% { transform: translateX(-3px); } }
@media (prefers-reduced-motion: reduce) { .persona-chip, .persona-chip.nudge { animation: none; transition: none; } }
.persona-chip.dragging { cursor: grabbing; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); position: relative; z-index: 1; }
.person-chip { background: var(--card); border-color: var(--line); }
/* The card a tapped name scrolled to, so it is obvious which one opened. */
.persona.revealed { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

/* 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; }
/* On a narrow screen the head wraps as a whole; a name or a chip never breaks
   in the middle of a word. */
.post-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 0.8rem; color: var(--muted); }
.post-head > *, .said-head > * { white-space: nowrap; }
.post-head .who { font-weight: 600; color: var(--ink); }
.persona.speaker-card { margin: 8px 0; opacity: 1; }
.speaker-card-host { margin: 4px 0 8px; }
button.who-link { background: none; border: 0; padding: 0; margin: 0; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; text-align: left; }
button.who-link:hover, button.who-link:focus-visible { text-decoration: underline; }
/* 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; } }
@media (max-width: 600px) {
  .post-head, .said-head { position: relative; padding-right: 36px; min-height: 36px; }
  .post-head > .remove, .said-head > .remove {
    position: absolute; top: 0; right: 0;
    width: 36px; height: 36px; padding: 0;
  }
}
.at { color: var(--muted); font-size: 0.76rem; }
.said { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Rendered Markdown, and the one HTML frame. Spacing comes from the grid, not
   margins, so a reply stays tight whatever it contains. */
.said.said-markdown { display: grid; gap: 6px; }
.said-markdown p { margin: 0; white-space: pre-wrap; }
.said-markdown h4 { margin: 2px 0; font-size: 1rem; }
.said-markdown ul, .said-markdown ol { margin: 0; padding-left: 22px; }
.said-markdown li { margin: 2px 0; }
.said-markdown li.task { list-style: none; margin-left: -18px; }
.said-markdown .task-marker { font-size: 0.9em; }
.said-markdown blockquote { margin: 0; padding: 2px 0 2px 12px; border-left: 3px solid var(--line); }
.said-markdown pre { margin: 0; padding: 8px; background: var(--bg); border-radius: 8px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.84rem; max-height: 320px; overflow: auto; }
.said-markdown code { font-size: 0.84rem; }
.said-markdown pre.markdown-code { border-left: 3px solid var(--accent); }
.said-markdown .token-comment { color: var(--muted); font-style: italic; }
.said-markdown .token-string { color: #8a4b08; }
.said-markdown .token-keyword { color: #7651b5; font-weight: 600; }
.said-markdown .token-number { color: #16736b; }
.markdown-mermaid { overflow-x: auto; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.markdown-mermaid svg { display: block; width: 100%; min-width: 320px; max-height: 520px; }
.mermaid-node { fill: var(--card); stroke: var(--accent); stroke-width: 1.5; }
.mermaid-node-label, .mermaid-edge-label { fill: var(--ink); font: 14px system-ui, sans-serif; }
.mermaid-edge, .mermaid-lifeline { stroke: var(--muted); stroke-width: 1.5; }
.mermaid-lifeline { stroke-dasharray: 5 4; }
.mermaid-arrow { fill: var(--muted); }
.markdown-mermaid-unsupported > p { color: var(--muted); font-size: 0.78rem; }
.said-markdown a { color: var(--accent); overflow-wrap: anywhere; }
.said-markdown .markdown-table { overflow-x: auto; }
.said-markdown table { border-collapse: collapse; }
.said-markdown th, .said-markdown td { border: 1px solid var(--line); padding: 4px 8px; text-align: left; font-size: 0.88rem; }
.markdown-callout { border-left: 3px solid var(--accent); padding: 4px 0 4px 12px; display: grid; gap: 2px; }
.markdown-callout-head { font-weight: 600; }
.markdown-callout-icon { color: var(--muted); }
.markdown-callout[data-type="question"], .markdown-callout[data-type="warning"] { border-left-color: var(--warn); }
.markdown-callout[data-type="danger"], .markdown-callout[data-type="failure"], .markdown-callout[data-type="bug"] { border-left-color: var(--warn); }
.markdown-callout[data-type="quote"] { border-left-color: var(--muted); }
.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; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 0.8rem; color: var(--muted); }
.said-head .who { font-weight: 600; color: var(--ink); }
.model-badge { font-size: 0.68rem; line-height: 1; padding: 2px 6px; border: 1px solid var(--accent); border-radius: 999px; color: var(--accent); font-weight: 600; }
.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); }
.thread-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.thread-toggle { padding-left: 2px; }
.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);
  /* Reaching the end of the sheet does not go on to scroll the page. */
  overscroll-behavior: contain;
}
#sheet.required { inset: 0; max-height: none; border-radius: 0; }
/* The page behind an open sheet holds still. Fixing the body is what works on
   iOS, where overflow: hidden alone still lets a finger drag the page; the
   scroll position is kept in top and restored on close. */
body.sheet-open { position: fixed; inset: 0 auto auto 0; width: 100%; overflow: hidden; }
body.dialog-open { position: fixed; inset: 0 auto auto 0; width: 100%; overflow: hidden; }
/* The strip of page above the sheet takes the tap and the drag, so neither
   reaches the timeline. */
body.sheet-open::before { content: ""; position: fixed; inset: 0; z-index: 19; }
/* The header stays above that strip: its buttons still switch or close the sheet. */
body.sheet-open .topbar { z-index: 21; }
.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);
}
.sheet-close { min-width: 36px; min-height: 36px; border-radius: 999px; font-size: 1.35rem; line-height: 1; }
.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; }
/* One line across the panel: above it what you set up, below it what almost
   nobody changes. The section stays shut until it is asked for. */
.settings-advanced { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 14px; }
.settings-advanced > summary { cursor: pointer; color: var(--accent); font-size: 0.9rem; list-style: none; }
.settings-advanced > summary::-webkit-details-marker { display: none; }
.settings-advanced > summary::before { content: "▸ "; }
.settings-advanced[open] > summary::before { content: "▾ "; }
.advanced-body { display: grid; gap: 14px; }
.advanced-category { border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.advanced-category > summary { cursor: pointer; font-size: 0.9rem; font-weight: 600; }
.advanced-category-body { display: grid; gap: 14px; padding-top: 12px; }
.advanced-category-body > .settings-block { display: grid; gap: 14px; }
.advanced-body > [hidden] { display: none; }
.advanced-category-body > [hidden] { display: none; }
.external-agent, .external-agent .settings-block { display: grid; gap: 14px; }
.external-agent[hidden], .external-agent [hidden] { display: none; }
.external-agent .hint { margin: 0; }
.mcp-connection-values { margin: 0; display: grid; gap: 4px; }
.mcp-connection-values dt { color: var(--muted); font-size: 0.78rem; }
.mcp-connection-values dd { margin: 0 0 8px; overflow-wrap: anywhere; user-select: text; }
.mcp-connection-values code { font-size: 0.85rem; }
.mcp-connection { display: grid; gap: 12px; }
.mcp-connection .hint { margin: 0; }
.mcp-connection [role="alert"]:empty { display: none; }
.mcp-add-connection { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.mcp-add-connection .field { flex: 1 1 14rem; min-width: 0; }
.mcp-connections { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.mcp-connections legend { padding: 0; margin-bottom: 4px; font-weight: 600; }
.mcp-connection-row { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.mcp-connection-row.active { border-color: var(--accent); }
.mcp-connection-row .check-field, label.mcp-connection-row { display: flex; align-items: center; gap: 8px; }
.mcp-connection-row input[type="radio"] { width: auto; margin: 0; }
.mcp-connection-name { font-weight: 600; overflow-wrap: anywhere; }
.mcp-connection-row .chip-note { font-size: 0.75rem; color: var(--accent); }
.settings-block > [hidden] { display: none; }
.openrouter-models { display: grid; gap: 12px; }
.openrouter-models[hidden] { display: none; }
.openrouter-models > [hidden] { display: none; }
.openrouter-models > .hint { margin: 0; }
.fixed-model strong { padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--soft); }
.model-picker { border: 1px solid var(--line); border-radius: 9px; background: var(--bg); }
.model-picker summary { padding: 7px 9px; cursor: pointer; overflow-wrap: anywhere; }
.model-picker[open] { padding-bottom: 6px; }
.model-picker[open] summary { border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.model-picker input { width: calc(100% - 12px); margin: 0 6px 6px; }
.model-picker-list { max-height: 240px; overflow-y: auto; padding: 0 6px; display: grid; gap: 2px; }
.model-picker-list button { border: 0; border-radius: 6px; padding: 8px; background: transparent; color: inherit; text-align: left; overflow-wrap: anywhere; }
.model-picker-list button:hover, .model-picker-list button.selected { background: var(--soft); }
.model-picker-list .hint { padding: 8px; }
/* The settings sheet: each h3 opens a section, set off by a rule and an accent
   label, so a long sheet reads as a few groups rather than one column. */
.settings-panel { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-bottom: 32px; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .settings-panel, #sheet:has(.settings-panel) .sheet-head {
    padding-left: max(1.5rem, env(safe-area-inset-left));
    padding-right: max(1.5rem, env(safe-area-inset-right));
  }
}
/* Native controls and nested grids can otherwise impose their content width,
   especially with enlarged text or long device-specific voice names. */
.settings-panel :is(.field, .settings-block, .advanced-body, .advanced-category-body, .openrouter-models, .mcp-connection, .mcp-connection-row, .bluesky-connection) {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
}
.settings-panel :is(input, select, button, .chip) { min-width: 0; max-width: 100%; }
.settings-panel p { margin: 0; line-height: 1.6; }
.settings-panel h3 {
  margin: 18px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.settings-panel h3:first-child { margin-top: 4px; padding-top: 0; border-top: 0; }
.settings-panel > p:not(.hint) { color: var(--muted); font-size: 0.88rem; }
.settings-panel a:not(.chip) {
  justify-self: start;
  color: var(--accent);
  font-size: 0.88rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent-soft);
}
.settings-panel a:not(.chip):hover { text-decoration-color: var(--accent); }
.settings-panel .field { gap: 6px; }
.settings-panel .field > span:first-child { font-weight: 600; }
.settings-panel .field.check-field > span:first-child { font-weight: 400; }
.settings-panel .hint { margin: 0; color: var(--muted); font-size: 0.78rem; line-height: 1.55; }
.settings-panel .hint.warn { padding: 10px 12px; border-radius: 10px; background: var(--accent-soft); color: var(--ink); }
.settings-panel input:focus-visible, .settings-panel select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.settings-panel .chip { justify-self: start; padding: 7px 14px; }
.settings-panel .settings-advanced { margin-top: 18px; padding-top: 18px; }
.settings-panel .settings-advanced > summary { font-weight: 700; letter-spacing: 0.06em; font-size: 0.78rem; }
.settings-panel .advanced-category { padding: 0; background: var(--bg); overflow: hidden; }
.settings-panel .advanced-category > summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 14px; list-style: none;
}
.settings-panel .advanced-category > summary::-webkit-details-marker { display: none; }
.settings-panel .advanced-category > summary::after { content: "›"; color: var(--muted); font-size: 1.2rem; transition: transform 0.15s; }
.settings-panel .advanced-category[open] > summary::after { transform: rotate(90deg); }
.settings-panel .advanced-category > summary:hover { color: var(--accent); }
.settings-panel .advanced-category[open] > summary { border-bottom: 1px solid var(--line); }
.settings-panel .advanced-category-body { padding: 14px; background: var(--card); }
.field.check-field { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.field.check-field input { width: auto; }
.field.check-field > span:first-child { color: inherit; font-size: inherit; }
input[type="text"], input[type="search"], input[type="email"], 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%;
}

.login input {
  min-height: 48px;
  padding: 11px 13px;
  border-radius: 12px;
  background: var(--card);
}

.login input::placeholder {
  color: var(--muted);
  opacity: .85;
}

.login input:focus-visible {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.hint { color: var(--muted); font-size: 0.78rem; line-height: 1.6; margin: 0; }
.hint.warn { color: var(--warn); }

.persona-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.persona-tab {
  border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  background: none; color: var(--muted); font: inherit; font-weight: 600;
  padding: 8px 14px; cursor: pointer;
}
.persona-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.persona-filters { display: flex; gap: 8px; align-items: center; }
.persona-search { flex: 1 1 auto; min-width: 0; }
.persona-order { flex: 0 0 auto; width: auto; }
.persona-list { display: grid; gap: 14px; }
.check-in-every { width: auto; flex: 0 0 auto; }
.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;
  /* The sheet holds still while a field is edited: a sideways drag inside it
     must not pan the page behind, which reads as the dialog wobbling. */
  overflow: hidden;
  overscroll-behavior: contain;
}
.dialog {
  background: var(--card);
  border-radius: 16px;
  padding: 16px;
  width: min(560px, 100%);
  max-width: 100%;
  min-width: 0;
  display: grid;
  gap: 10px;
}
.dialog-close {
  position: sticky;
  top: 0;
  z-index: 2;
  justify-self: end;
  min-width: 36px;
  min-height: 36px;
  margin-bottom: -46px;
  border-radius: 999px;
  background: var(--card);
  font-size: 1.35rem;
  line-height: 1;
}
/* A grid child defaults to its content's minimum width, so one long line can
   push the sheet wider than the screen. */
.dialog > * { min-width: 0; }
.dialog h3 { margin: 0; }
/* The close button floats over the dialog's first line; a long title wraps
   before it instead of running under it. */
.dialog-close + h2, .dialog-close + h3 { padding-right: 44px; }
#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; }
.mic-activity {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 6%, var(--card));
}
.mic-activity[hidden] { display: none; }
.mic-activity.processing::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: mic-spin 0.8s linear infinite;
}
.mic-copy { display: grid; min-width: 0; gap: 2px; }
.mic-title { font-size: 0.88rem; font-weight: 600; }
.mic-activity .mic-status { max-width: none; }
@keyframes mic-spin { to { transform: rotate(360deg); } }

.persona-builder {
  width: min(680px, 100%);
  max-width: 100%;
  max-height: 90dvh;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.builder-conversation { max-height: 35vh; overflow-y: auto; overflow-x: hidden; }
.builder-message { padding: 10px 12px; margin: 8px 0; border: 1px solid var(--line); border-radius: 10px; }
.builder-message.user { margin-left: 24px; }
.builder-message p, .builder-detail { white-space: pre-wrap; overflow-wrap: anywhere; }
.persona-builder form { display: grid; gap: 8px; }
.persona-builder [hidden] { display: none; }
.builder-notice { margin: 8px 0 12px; padding: 10px 12px; border: 1px solid var(--accent); border-radius: 10px; background: var(--accent-soft); font-weight: 600; }
.builder-log { margin: 12px 0; }
.builder-actions { flex-wrap: wrap; }
/* Adding is the one thing the draft asks for, so it leads, full width. */
.builder-actions > .button.primary { order: -1; flex-basis: 100%; }
.builder-log > summary { cursor: pointer; color: var(--muted, #666); }
.persona-form { display: grid; gap: 12px; margin: 12px 0; }
.persona-field { display: grid; gap: 4px; }
.basic-info { margin: 4px 0; font-size: 0.85rem; }
.basic-info summary { cursor: pointer; color: var(--accent); }
.basic-info-text { margin: 6px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.persona-field select { width: 100%; }
.persona-tools { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.persona-editor .previous { font-size: .85em; color: var(--muted, #666); border-left: 3px solid var(--accent-soft); padding-left: 8px; }
.persona-editor .previous summary { cursor: pointer; }
.persona-editor .warn:empty { display: none; }
.persona-editor .warn { color: #b3261e; }
.ai-panel { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }

.timeline-paging { text-align: center; padding: 16px; min-height: 48px; }
/* Search stays inside the same sheet as settings and personas. */
.timeline-search { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: .75rem; padding: 1rem; }
.speaker-view { display: grid; gap: .75rem; padding: 1rem; }
.timeline-search-form { display: flex; flex-wrap: wrap; gap: .5rem; }
.timeline-search-form input { flex: 1 1 12rem; min-width: 0; }
/* Small input text triggers focus zoom on mobile Safari. Keep text scaling
   while giving the automatically focused search field a 16px minimum. */
@media (max-width: 600px) {
  .timeline-search-form input[type="search"] { font-size: max(16px, 1rem); }
}
.search-results { display: grid; gap: .75rem; }
.search-hit { display: grid; gap: .5rem; width: 100%; padding: 1rem; text-align: left; font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.search-hit:hover, .search-hit:focus-visible { border-color: var(--accent); }
.search-snippet { white-space: pre-wrap; overflow-wrap: anywhere; }
.timeline-search [hidden] { display: none; }

/* Existing OKF notes, presented as readable concepts with their evidence. */
.memory-dialog { width: min(720px, 100%); max-height: calc(100dvh - 32px); overflow: auto; }
.memory-dialog:focus { outline: none; }
.memory-dialog h2 { margin: 0; font-size: 1.2rem; line-height: 1.5; }
.memory-inspector { display: grid; gap: 18px; overflow-wrap: anywhere; }
.memory-list { display: grid; gap: 10px; }
.memory-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px; min-width: 0; }
.memory-card h4 { margin: 0 0 8px; font-size: 1rem; }
.memory-head { display: flex; align-items: center; gap: 8px; }
.memory-head h4 { margin: 0; flex: 1; min-width: 0; }
.memory-description { margin: 0 0 12px; line-height: 1.7; }
.memory-body { font-size: .9rem; line-height: 1.7; }
.memory-body h5 { font-size: .85rem; margin: 16px 0 6px; color: var(--muted); }
.memory-body p { margin: 6px 0; white-space: pre-wrap; }
.memory-body ul, .memory-body ol { padding-left: 22px; margin: 6px 0 12px; }
.memory-body li { margin: 5px 0; }
.memory-body blockquote { margin: 8px 0; padding-left: 12px; border-left: 3px solid var(--line); }
.memory-body pre { white-space: pre-wrap; }
.memory-table { overflow-x: auto; }
.memory-table table { border-collapse: collapse; width: 100%; }
.memory-table th, .memory-table td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; }
.memory-note-link { display: inline; background: none; border: 0; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; }
.memory-card a { color: var(--accent); text-decoration: underline; }
.memory-original { margin-top: 14px; }
.memory-card summary { cursor: pointer; }
.memory-original summary { font-size: .78rem; color: var(--muted); }
.memory-card:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

.memory-forget { margin-top: 12px; }

.mention-picker { max-height: 220px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; padding: 4px; }
.mention-option { display: block; width: 100%; text-align: left; padding: 10px 12px; background: transparent; color: inherit; border: 0; border-radius: 6px; cursor: pointer; }
.mention-option[aria-selected="true"] { background: var(--line); }

.persona-more { display: inline-flex; white-space: nowrap; }
@media (max-width: 600px) {
  .who-bar .persona-chip { max-width: 11em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .who-bar.expanded .persona-chip { max-width: 100%; }
}

.social-dialog { width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; border: 1px solid var(--line); color: var(--ink); }
.social-dialog::backdrop { background: #0008; }
.social-dialog h2 { margin: 0; font-size: 1.2rem; }
.social-selection, .bluesky-connection, .social-preview { display: grid; gap: 12px; }
.social-choice { display: flex; align-items: start; gap: 10px; padding-block: 8px; }
.social-choice input { flex: 0 0 auto; width: auto; margin-top: 4px; }
.social-choice .said { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
.social-preview-post { border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.social-preview-post img { display: block; max-width: 100%; max-height: 280px; object-fit: contain; }
.social-preview a { overflow-wrap: anywhere; }

.social-dialog:not([open]) { display: none; }

.sync-status { display: flex; gap: .75rem; align-items: center; margin-block: .5rem; }
.local-shot { max-width: 100%; max-height: 28rem; object-fit: contain; }

/* Match the settings fields while keeping account connection a clear group. */
.bluesky-connection {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
}
.bluesky-connect-form { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.bluesky-handle { flex: 1 1 220px; min-width: 0; gap: 8px; }
.bluesky-handle input { min-height: 44px; padding: 10px 12px; background: var(--card); }
.bluesky-handle input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bluesky-connect-button { min-height: 44px; flex: 0 0 auto; }
.bluesky-account { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.bluesky-connection > .chip { justify-self: start; }
.bluesky-status:empty { display: none; }
@media (max-width: 480px) {
  .bluesky-connect-button { width: 100%; }
}
.social-preview-post > .tag { margin-inline-start: 8px; white-space: nowrap; }
.social-published-link:empty { display: none; }
.social-published-link a { color: var(--accent); text-underline-offset: 3px; }

/* The router's call about a post: who it chose, whom it passed over and why,
   each with a way to say the router was wrong. */
/* A one-glyph chip: the pencil, the scales, the cross. */
.chip.icon { padding-inline: 8px; font-size: 1rem; line-height: 1; }
.routing-dialog { width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow: auto; }
.routing-dialog:focus { outline: none; }
.routing-dialog h2 { margin: 0; font-size: 1.2rem; line-height: 1.5; }
.routing { display: grid; gap: 10px; }
.routing-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.9rem; padding-left: 10px; border-left: 2px solid var(--line); }
.routing-row .who { font-weight: 600; }
.routing-persona { border: 0; padding: 0; background: none; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.routing-persona:hover { text-decoration-color: currentColor; }
.routing-verdict { color: var(--muted); font-size: 0.78rem; }
.routing-reason { color: var(--muted); flex-basis: 100%; }
.routing-fix { justify-self: start; }
.condition-fix { width: min(640px, 100%); max-height: calc(100dvh - 32px); overflow: auto; }
.condition-fix:focus { outline: none; }
.condition-fix h2 { margin: 0; font-size: 1.2rem; line-height: 1.5; }
.condition-body { display: grid; gap: 10px; }
.condition-quote { margin: 0; padding-left: 12px; border-left: 3px solid var(--line); color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.condition-words { display: grid; gap: 2px; }
.condition-word { display: flex; align-items: center; gap: 8px; padding-block: 4px; }
.condition-word input { flex: 0 0 auto; width: auto; margin: 0; }
.condition-current { margin: 0; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
/* An author display rule would beat the hidden attribute, so the grid applies only while shown. */
.condition-ask:not([hidden]) { display: grid; gap: 8px; }
.said-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.reply-fix .condition-quote { display: block; }
.reply-fix .condition-quote .who { font-weight: 600; color: var(--ink); }
.reply-current summary { cursor: pointer; font-size: 0.85rem; color: var(--muted); }
.reply-current { display: grid; gap: 8px; }
.said-notes { display: flex; flex-wrap: wrap; gap: 6px; }
.said-note { font-size: 0.78rem; }
.memory-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.memory-tag, .memory-type, .memory-expires, .memory-review { font-size: 0.78rem; }
.memory-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.memory-more-row { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }

.persona-menu { border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); padding: 16px; }
.persona-menu[open] { display: flex; flex-direction: column; gap: 10px; min-width: 12rem; }
.persona-menu::backdrop { background: #0005; }
/* HTML answers keep their own typography and scroll independently. */
.said-html { width: 100%; min-width: 0; }
.html-document { display: block; width: 100%; height: 70vh; min-height: 28rem; border: 1px solid var(--line, #ddd); border-radius: .75rem; background: white; }

.favorite[aria-pressed="true"] { color: var(--accent); }
.favorite-item { margin-bottom: 18px; }
.favorites-view { display: grid; gap: .75rem; padding: 1rem; }
.favorites-view select { max-width: 100%; }

.entry-place { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; font-size: .85rem; margin: .4rem 0; overflow-wrap: anywhere; }
.place-credit { font-size: .75rem; color: var(--muted); text-align: center; padding: .75rem; }