/* v89: the faces harmonism.io sets, shipped with the app (SIL OFL, fonts/), so every
   phone and computer shows the same Lodestone, offline too. */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/cormorant-garamond-latin-ext-500-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/cormorant-garamond-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/cormorant-garamond-latin-ext-500-italic.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/cormorant-garamond-latin-500-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 200 900; font-display: swap; src: url('fonts/source-sans-3-latin-ext-wght-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 200 900; font-display: swap; src: url('fonts/source-sans-3-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Sans 3'; font-style: italic; font-weight: 200 900; font-display: swap; src: url('fonts/source-sans-3-latin-ext-wght-italic.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Sans 3'; font-style: italic; font-weight: 200 900; font-display: swap; src: url('fonts/source-sans-3-latin-wght-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* MunAI Offline — palette from harmonia-astro BaseLayout (dark: emanation, light: carving) */
:root, [data-theme="dark"] {
  --font-body: 'Source Sans 3', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-header: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --bg: #0a0a14;
  --bg-surface: #12122a;
  --bg-elevated: #1a1a3a;
  --bg-hover: #222250;
  --text: #d8d8e8;
  --text-muted: #8888a8;
  --text-heading: #f0f0ff;
  --accent: #9B3DBE;
  --accent-secondary: #B892D4;
  --link: #CDB0E6;   /* v89: one accent; gold is the Matter pillar's alone */
  --border: #1e1e40;
  --border-light: #2a2a55;
  --user-bubble: #1a1a3a;
  --danger: #e0707a;
  --ok: #3DBEA0;
  --pillar-presence: #B892D4; --pillar-health: #3DBEA0; --pillar-matter: #DAA520; --pillar-service: #4A7BA7;
  --pillar-relationships: #E97A8F; --pillar-learning: #6B5BB5; --pillar-nature: #4A9D5A; --pillar-recreation: #E89B7E;
  color-scheme: dark;
}
/* The Lodestone sprite's light skin: clear amethyst crystal, plum border. */
[data-theme="light"] {
  --sp-f1:#E4DAF2;
  --sp-f2:#CDBFE3;
  --sp-f3:#B9A8D6;
  --sp-f4:#B6A4D3;
  --sp-f5:#BFAFDA;
  --sp-f6:#D6CAEB;
  --sp-f7:#EEE7F8;
  --sp-base:#CDBFE3;
  --sp-edge:#7A6598;
  --sp-rim:#7A6598;
  --sp-rim-o:0.75;
  --sp-glint-o:0.95;
  --sp-foot:#A893C9;
  --sp-foot-top:#E4DAF2;
  --sp-mouth:#7A6598;
  --sp-mouth-open:#6A4E88;
  --sp-mouth-open-stroke:#7A6598;
  --sp-lid:#7A6598;
  --sp-outline:#7A6598;
  --sp-outline-o:0.85;
  --sp-sheen-o:0.55;
  --sp-sheen-fill:url(#ls-sheen);
  --sp-sparkle:#9B7FC8;
}
[data-theme="light"] {
  --bg: #f8f6f2;
  --bg-surface: #ffffff;
  --bg-elevated: #f0ede8;
  --bg-hover: #e8e4de;
  --text: #2a2a3a;
  --text-muted: #6a6a80;
  --text-heading: #1a1a2e;
  --accent: #7B2D8E;
  --accent-secondary: #7B2D8E;
  --link: #6E2A82;
  --border: #d8d4ce;
  --border-light: #c8c4be;
  --user-bubble: #efe9f3;
  --danger: #b0303e;
  --ok: #1A8A6E;
  --pillar-presence: #7B2D8E; --pillar-health: #1A8A6E; --pillar-matter: #B8860B; --pillar-service: #1B3A6B;
  --pillar-relationships: #C0374F; --pillar-learning: #3A2D8E; --pillar-nature: #1B6B3A; --pillar-recreation: #D4644A;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
[hidden] { display: none !important; }
a { color: var(--link); }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: var(--text); }
svg { stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* 2026-10-26: pinned to the whole screen. 100dvh in an installed iPhone app
   (black-translucent status bar) is the screen less the status bar, which left
   a dead band under the composer; inset: 0 is the whole screen everywhere. */
#app { position: fixed; inset: 0; display: flex; flex-direction: column; }
.screen { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ── Setup ── */
#setup { overflow-y: auto; }
.setup-inner { max-width: 620px; margin: 0 auto; padding: max(28px, env(safe-area-inset-top)) 18px 40px; }
.setup-top-back { margin: 0 0 -8px -12px; }
.set-model-other { display: flex; gap: 8px; margin: -4px 0 10px; }
.set-model-other input { flex: 1; min-width: 0; }
.setup-sprite { width: 64px; height: 75px; display: block; margin: 8px auto 18px; fill: none; stroke: none; }
h1, h2, h3, h4 { font-family: var(--font-header); color: var(--text-heading); font-weight: 600; letter-spacing: .01em; }
h1 { font-size: 2rem; text-align: center; line-height: 1.2; }
h2 { font-size: 1.3rem; margin: 28px 0 12px; }
.lede { color: var(--text-muted); text-align: center; margin: 12px auto 0; max-width: 34em; }
.choices { display: grid; gap: 10px; }
.choice {
  text-align: left; background: var(--bg-surface); border: 1px solid var(--border-light);
  border-radius: 12px; padding: 14px 16px; display: grid; gap: 3px; transition: border-color .15s, background .15s;
}
.choices-more { border-top: 1px solid var(--border); padding-top: 8px; }
.choices-more summary { cursor: pointer; color: var(--text-muted); font-size: .93rem; padding: 6px 2px; }
.choices-more[open] summary { margin-bottom: 4px; }
.choices-more .hint { margin: 0 0 10px; }
.choice:hover { background: var(--bg-elevated); }
.choice[aria-pressed="true"] { border-color: var(--accent-secondary); box-shadow: 0 0 0 1px var(--accent-secondary) inset; }
.choice[disabled] { opacity: .45; cursor: not-allowed; }
.choice strong { font-size: 1.02rem; color: var(--text-heading); }
.choice .sub { color: var(--text-muted); font-size: .9rem; }
.choice .tag { font-size: .75rem; color: var(--accent-secondary); text-transform: uppercase; letter-spacing: .06em; }
.choice .models { font-size: .82rem; color: var(--text-body, var(--text-muted)); }
#setupNow { margin: -.2rem 0 .8rem; }
.server-fields { display: grid; gap: 10px; margin-top: 12px; padding: 14px; border: 1px dashed var(--border-light); border-radius: 12px; }
label { display: grid; gap: 4px; font-size: .9rem; color: var(--text-muted); }
input[type=text], input[type=url], input[type=number], input[type=search], input[type=password], input[type=email], select, textarea {
  background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: 8px; padding: 9px 11px; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-secondary); outline-offset: 0; border-color: transparent; }
.check { display: flex; align-items: flex-start; gap: 8px; margin: 18px 0 6px; color: var(--text); }
.check input { margin-top: 5px; }
.note { margin-top: 14px; padding: 10px 12px; border-left: 3px solid var(--link); background: var(--bg-surface); font-size: .92rem; }
.btn { border: 1px solid var(--border-light); background: transparent; border-radius: 10px; padding: 10px 16px; text-decoration: none; display: inline-flex; justify-content: center; align-items: center; gap: 8px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn.primary:disabled { opacity: .45; cursor: not-allowed; }
.btn.ghost:hover { background: var(--bg-elevated); }
.btn.danger { color: var(--danger); border-color: var(--danger); }
.btn.block { width: 100%; margin-top: 8px; }
#beginSetup { width: 100%; margin-top: 18px; padding: 13px; font-size: 1.05rem; }
.progress-block { margin-top: 18px; display: grid; gap: 8px; }
.prog { display: grid; grid-template-columns: 110px 1fr 70px; align-items: center; gap: 10px; font-size: .88rem; }
.prog em { font-style: normal; color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }
.bar { height: 6px; background: var(--bg-elevated); border-radius: 3px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-secondary)); transition: width .2s; }
.hint { color: var(--text-muted); font-size: .86rem; }
.fine { color: var(--text-muted); font-size: .8rem; margin-top: 26px; }

/* ── Topbar ── */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: calc(8px + env(safe-area-inset-top)) 10px 8px; border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.title strong { font-family: var(--font-header); font-size: 1.25rem; color: var(--text-heading); display: block; line-height: 1.1; }
.mini-sprite { width: 56px; height: 65px; flex: 0 0 56px; margin: -10px 0; fill: none; stroke: none; }
@media (max-width: 760px) { .mini-sprite { width: 40px; height: 47px; flex-basis: 40px; margin: -4px 0; } }
.badge { font-size: .72rem; color: var(--text-muted); letter-spacing: .04em; }
.badge.live { color: var(--ok); }
/* Green is kept for a model on hardware the practitioner owns; a rented one reads in violet. */
.badge.live.rented { color: var(--accent-secondary); }
.top-actions { display: flex; gap: 2px; }
.icon-btn { background: none; border: 0; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 1.4rem; line-height: 1; color: var(--text-muted); }
.icon-btn:hover { background: var(--bg-elevated); color: var(--text); }
.icon-btn svg { width: 22px; height: 22px; }
/* The toolbar names what each icon opens; on a narrow screen the names give way to the icons. */
.icon-btn.labeled { width: auto; min-width: 40px; padding: 0 11px 0 9px; display: inline-flex; align-items: center; gap: 7px; font-size: .9rem; text-decoration: none; color: var(--text-muted); }
.icon-btn.labeled:hover { color: var(--text); }
.icon-btn.labeled .lbl { white-space: nowrap; letter-spacing: .01em; }
@media (max-width: 760px) {
  .icon-btn.labeled { width: 40px; padding: 0; justify-content: center; }
  .icon-btn.labeled .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

.engine-bar { display: flex; align-items: center; gap: 10px; padding: 6px 14px; font-size: .8rem; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.engine-bar .bar { flex: 0 0 120px; }

/* ── Check-ins ── */
.home-note { flex-shrink: 0; display: flex; gap: 8px; align-items: flex-start; max-width: 760px; width: calc(100% - 24px); margin: 10px auto 0; padding: 10px 12px; border-left: 3px solid var(--link); background: var(--bg-surface); border-radius: 10px; font-size: .9rem; }
.home-note[hidden] { display: none; }
.home-note p { margin: 0; flex: 1; }
.checkins:empty { display: none; }
.checkins { padding: 10px 12px 0; display: grid; gap: 8px; max-width: 760px; width: 100%; margin: 0 auto; }
.checkin { background: var(--bg-surface); border: 1px solid var(--border-light); border-left: 3px solid var(--pc, var(--accent-secondary)); border-radius: 10px; padding: 10px 12px; }
.checkin p { font-size: .95rem; }
.checkin .row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.checkin .row button { font-size: .85rem; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--border-light); background: transparent; }
.checkin .row button:hover { background: var(--bg-elevated); }

/* ── Chat ── */
.chat { flex: 1; overflow-y: auto; padding: 18px 12px 12px; scroll-behavior: smooth; }
.msg { max-width: 760px; margin: 0 auto 16px; display: flex; gap: 10px; }
.msg .body { min-width: 0; }
.msg.user { justify-content: flex-end; }
.msg.user .body { background: var(--user-bubble); border-radius: 14px 14px 4px 14px; padding: 9px 13px; max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.assistant .avatar { width: 40px; height: 47px; flex: 0 0 40px; margin-top: -6px; fill: none; stroke: none; }
@media (max-width: 760px) { .msg.assistant .avatar { width: 32px; height: 37px; flex-basis: 32px; margin-top: -4px; } }
.msg.assistant .body { flex: 1; }
.msg .actions { display: flex; gap: 12px; margin-top: 6px; opacity: .75; transition: opacity .15s; }   /* always there: found without hovering */
.msg:hover .actions, .msg:focus-within .actions { opacity: 1; }
.msg .actions button { background: none; border: 0; font-size: .78rem; color: var(--text-muted); padding: 2px 0; }
.msg .actions button:hover { color: var(--text); }
.msg.crisis .body { border-left: 3px solid var(--danger); padding-left: 12px; }
.sources { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.sources button { font-size: .78rem; background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: 999px; padding: 3px 10px; color: var(--accent-secondary); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sources button:hover { background: var(--bg-elevated); }
.typing::after { content: '▍'; animation: blink 1s steps(2) infinite; color: var(--accent-secondary); }
@keyframes blink { 50% { opacity: 0; } }
.empty { max-width: 560px; margin: 8vh auto 0; text-align: center; color: var(--text-muted); }
.empty .empty-sprite { width: 72px; height: 84px; margin-bottom: 14px; display: block; margin-inline: auto; fill: none; stroke: none; }
.empty h2 { margin: 0 0 8px; }
.starters { display: grid; gap: 8px; margin-top: 20px; text-align: left; }
.starters button { background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: 10px; padding: 10px 12px; text-align: left; }
.starters button:hover { background: var(--bg-elevated); }

/* prose */
.prose p { margin: 0 0 .75em; }
.prose p:last-child { margin-bottom: 0; }
.prose h1, .prose h2, .prose h3, .prose h4 { margin: 1.2em 0 .4em; line-height: 1.25; }
.prose h2 { font-size: 1.4rem; } .prose h3 { font-size: 1.18rem; } .prose h4 { font-size: 1.05rem; }
.prose ul, .prose ol { margin: 0 0 .8em 1.3em; }
.prose li { margin: .15em 0; }
.prose blockquote { border-left: 3px solid var(--border-light); padding-left: 12px; color: var(--text-muted); margin: 0 0 .8em; }
.prose code { background: var(--bg-elevated); padding: 1px 5px; border-radius: 4px; font-size: .9em; }
.prose hr { border: 0; border-top: 1px solid var(--border-light); margin: 1.4em 0; }
.prose table { border-collapse: collapse; margin: 0 0 1em; font-size: .9rem; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--border-light); padding: 5px 8px; text-align: left; vertical-align: top; }
.prose a[data-wikilink] { color: var(--accent-secondary); text-decoration: none; border-bottom: 1px dotted currentColor; }

/* composer */
.composer { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); max-width: 800px; width: 100%; margin: 0 auto; }
.composer textarea { resize: none; max-height: 180px; border-radius: 14px; padding: 11px 14px; line-height: 1.45; }
.send { flex: 0 0 44px; height: 44px; border-radius: 12px; border: 0; background: var(--accent); color: #fff; display: grid; place-items: center; }
.send svg { width: 22px; height: 22px; }
.send.stop { background: var(--bg-elevated); color: var(--text); }
.send:disabled { opacity: .4; }

/* drawers */
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 20; }
.drawer { position: fixed; top: 0; bottom: 0; width: min(360px, 92vw); background: var(--bg); border: 1px solid var(--border); z-index: 30; display: flex; flex-direction: column; padding: calc(10px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom)); overflow-y: auto; }
.drawer.left { left: 0; } .drawer.right { right: 0; }
/* v97: on a phone the conversation moves aside to the right to show the list beneath it (main.js syncPush) */
@media (max-width: 760px) {
  html.threads-push { --tw: min(330px, 84vw); }
  html.threads-push #drawerThreads { width: var(--tw); z-index: 5; border: 0; animation: none !important; transform: none !important; }
  html.threads-push #main { position: relative; z-index: 10; background: var(--bg); transition: transform .22s var(--ease-out); }
  html.threads-shown #main { --dim: 1; transform: translateX(var(--tw)); box-shadow: -12px 0 32px rgba(0,0,0,.35); }
  html.threads-push #main::after { content: ""; position: absolute; inset: 0; z-index: 50; background: rgba(0,0,0,.42); opacity: var(--dim, 0); pointer-events: none; transition: opacity .22s ease; }
  html.threads-shown #main::after { pointer-events: auto; }
  html.push-drag #main, html.push-drag #main::after { transition: none; }
  html.threads-shown #scrim { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) { html.threads-push #main, html.threads-push #main::after { transition: none; } }
/* v95: a drawer never scrolls sideways, so a swipe from right to left over it is never taken for a scroll (swipeAllowed) */
.drawer { overflow-x: hidden; }
.drawer.wide { width: min(620px, 100vw); }
.drawer-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.drawer-head h3 { flex: 1; font-size: 1.3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-list, .lib-list, .practice-list { list-style: none; margin-top: 10px; }
.thread-list li { display: flex; align-items: center; gap: 4px; border-radius: 8px; }
.thread-list li.active { background: var(--bg-elevated); }
.thread-list li button.t { flex: 1; text-align: left; background: none; border: 0; padding: 9px 10px; overflow: hidden; }
.thread-list li button.t span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread-list li button.t small { color: var(--text-muted); font-size: .75rem; }
.thread-list li button.del { background: none; border: 0; color: var(--text-muted); padding: 6px 10px; }
.search { margin-bottom: 6px; }
.lib-list li { border-bottom: 1px solid var(--border); }
.lib-list li button { width: 100%; text-align: left; background: none; border: 0; padding: 9px 4px; }
.lib-list li button small { display: block; color: var(--text-muted); font-size: .76rem; }
.lib-list li.group { font-family: var(--font-header); color: var(--text-heading); font-size: 1.1rem; padding: 14px 4px 4px; border: 0; }
.reader-meta { color: var(--text-muted); font-size: .8rem; margin-bottom: 12px; }
.reader .prose { font-size: 1.02rem; line-height: 1.72; }
.reader-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--border); }

.me-body, .settings-body { display: grid; gap: 26px; }
.me-body section, .settings-body section { display: grid; gap: 8px; }
.me-body h4, .settings-body h4 { font-size: 1.15rem; }
.practice-list li { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; padding: 9px 10px; border: 1px solid var(--border-light); border-left: 3px solid var(--pc); border-radius: 8px; margin-bottom: 6px; }
.practice-list li small { color: var(--text-muted); font-size: .76rem; grid-column: 1; }
.practice-list li button { grid-row: 1 / span 2; grid-column: 2; background: none; border: 0; color: var(--text-muted); }
.practice-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.practice-form input { grid-column: 1 / -1; }
.practice-form button { grid-column: 1 / -1; }
.wheel-wrap { display: grid; grid-template-columns: minmax(260px, 320px) 1fr; gap: 12px; align-items: center; }
@media (max-width: 520px) { .wheel-wrap { grid-template-columns: 1fr; } #wheelSvg { width: 100%; max-width: 320px; margin: 0 auto; } }
#wheelSvg text { stroke: none; font-size: 10px; font-weight: 600; font-family: var(--font-body); }
.wheel-rows { display: grid; gap: 4px; }
.wheel-row { display: grid; grid-template-columns: 116px 1fr; align-items: center; gap: 8px; font-size: .85rem; }
.wheel-row span { color: var(--pc); font-weight: 600; }
.wheel-row select { padding: 4px 6px; font-size: .82rem; }
.kv { font-size: .86rem; color: var(--text-muted); display: grid; gap: 2px; }
.kv b { color: var(--text); font-weight: 600; }
.seg { display: inline-flex; border: 1px solid var(--border-light); border-radius: 10px; overflow: hidden; }
.seg button { background: none; border: 0; padding: 7px 14px; }
.seg button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.file-btn { cursor: pointer; color: var(--text); font-size: 1rem; }

.toast { position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--bg-elevated); border: 1px solid var(--border-light); padding: 9px 16px; border-radius: 10px; z-index: 50; font-size: .9rem; max-width: 92vw; }

@media (min-width: 900px) {
  .chat { padding-top: 28px; }
}
[dir="rtl"] .msg.user .body { border-radius: 14px 14px 14px 4px; }

.help-body { font-size: .98rem; }
.help-body h4 { margin: 1.3em 0 .35em; font-size: 1.12rem; }
.help-body h4:first-child { margin-top: .2em; }

/* Desktop app (desktop/): hide what only makes sense on the web. */
html:not(.desktop) .desktop-only { display: none !important; }
.desktop .web-only { display: none !important; }

/* Desktop: "Look this up online" — armed for one question at a time. */
.web-toggle { flex: 0 0 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border-light); background: transparent; color: var(--text-muted); display: grid; place-items: center; }
.web-toggle svg { width: 21px; height: 21px; }
.web-toggle[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.composer.web-armed textarea { border-color: var(--accent); }

/* Desktop: attachments — read on this computer before the model sees them. */
.attach-bar { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 0; max-width: 800px; width: 100%; margin: 0 auto; }
.attach-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 6px 5px 10px; border: 1px solid var(--border-light); border-radius: 999px; font-size: 13px; color: var(--text); background: var(--bg-elevated, transparent); }
.attach-chip .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.attach-chip small { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.attach-chip.err { border-color: #e0707a; }
/* A file dragged over the window: the whole window takes it. */
body.dropping::after { content: "Drop to attach: documents, spreadsheets, PDFs, images, recordings, videos, archives"; position: fixed; inset: 10px; z-index: 2147483000; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; border: 2px dashed var(--accent, #9B3DBE); border-radius: 16px; background: color-mix(in srgb, var(--bg, #111) 82%, transparent); color: var(--text); font-size: 17px; pointer-events: none; }
.attach-chip.err small { color: #e0707a; white-space: normal; }
.attach-chip button { border: 0; background: transparent; color: var(--text-muted); font-size: 16px; line-height: 1; padding: 0 4px; cursor: pointer; }
.msg-files { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; justify-content: flex-end; }
.msg-files span { font-size: 12.5px; color: var(--text-muted); border: 1px solid var(--border-light); border-radius: 999px; padding: 2px 9px; }
.sources .web-src { border-style: dashed; }
a.icon-btn { display: inline-grid; place-items: center; color: inherit; }

/* Desktop: the model menu under the composer — change the model mid-conversation. */
.composer-foot { max-width: 800px; width: 100%; margin: 0 auto; padding: 0 12px 8px; display: flex; align-items: center; gap: 10px; min-height: 0; }
.composer-foot:not(:has(> :not([hidden]))) { display: none; }
.model-row { position: relative; flex: 1 1 auto; min-width: 0; display: flex; }
.model-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 3px 8px 3px 10px; border: 1px solid var(--border-light); border-radius: 999px; background: transparent; color: var(--text-muted); font-size: 12.5px; cursor: pointer; }
.model-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-chip svg { width: 14px; height: 14px; flex: 0 0 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.model-chip.rented { border-style: dashed; }
.model-chip:hover, .model-chip[aria-expanded="true"] { color: var(--text); border-color: var(--accent-secondary); }
.model-menu { position: absolute; left: 0; bottom: calc(100% + 4px); z-index: 30; width: min(420px, calc(100vw - 24px)); max-height: min(60vh, 520px); overflow: auto; padding: 6px; background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.28); }
.model-group { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); padding: 8px 8px 4px; }
.model-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left; padding: 7px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--text); cursor: pointer; }
.model-item:hover { background: var(--bg-elevated, rgba(127,127,127,.12)); }
.model-item.active { box-shadow: inset 3px 0 0 var(--accent-secondary); }
.model-item .n { font-size: 14px; }
.model-item .s { font-size: 12px; color: var(--text-muted); }
.model-note { font-size: 12.5px; color: var(--text-muted); margin: 4px 8px 6px; }
.model-other { display: flex; gap: 6px; padding: 6px 8px; }
.model-other input { flex: 1; min-width: 0; font-size: 13px; }
.model-manage { display: block; width: 100%; text-align: left; margin-top: 4px; padding: 8px; border: 0; border-top: 1px solid var(--border-light); background: transparent; color: var(--accent-secondary); font-size: 13px; cursor: pointer; }
.model-switch { align-self: center; margin: 6px auto; font-size: 12px; color: var(--text-muted); border: 1px solid var(--border-light); border-radius: 999px; padding: 2px 10px; }
.summary-note { align-self: center; max-width: 720px; margin: 6px auto 12px; font-size: 13px; color: var(--text-muted); border: 1px solid var(--border-light); border-radius: 12px; padding: 6px 12px; }
.summary-note summary { cursor: pointer; }
.summary-note p { margin: 8px 0 4px; line-height: 1.5; white-space: pre-wrap; }
.summary-note small { opacity: .75; }

/* Desktop: Settings → Advanced, folders Lodestone may read */
.folder-list { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.folder-row { display: flex; align-items: center; gap: 8px; }
.folder-row .p { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; direction: rtl; text-align: left; }
.row-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.sources .own-src { font-size: .78rem; border: 1px dashed var(--border-light); border-radius: 999px; padding: 3px 10px; color: var(--text-muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Conversations docked on the left in a wide window (see syncDock in main.js).
   Above the scrim (20), below the open drawers (30): another drawer's scrim
   dims the page but never the docked conversations. */
html.threads-docked #drawerThreads { width: 280px; z-index: 25; border-width: 0 1px 0 0; }
html.threads-docked #app { margin-left: 280px; }
html.threads-docked .toast { left: calc(50% + 140px); }
.account-box { margin: 18px 0 6px; }
.sync-form { display: grid; gap: 8px; margin-top: 8px; }
.sync-form .check, #syncBody .check { margin: 6px 0; font-size: .9rem; }
.account-box h2 { margin-bottom: 4px; }
#hpBox .row-btns { margin-top: 8px; }

/* ── Gear: drawn a touch heavier than the line icons, as Claude's and Apple's are ── */
.icon-btn svg.gear { stroke-width: 1.7; }

/* ── Settings: grouped cards, Apple's inset-grouped pattern ── */
#drawerSettings:not(.page) { width: min(460px, 100vw); padding-left: 16px; padding-right: 16px; background: var(--bg); }
#drawerSettings:not(.page) .drawer-head { position: sticky; top: calc(-10px - env(safe-area-inset-top)); z-index: 2; margin: calc(-10px - env(safe-area-inset-top)) -16px 12px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: var(--bg); border-bottom: 1px solid var(--border); }
.settings-body { gap: 14px; }
.settings-body section { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px 16px; gap: 10px; }
.settings-body section h4 { display: flex; align-items: center; gap: 9px; font-family: var(--font-body); font-size: .78rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); }
.settings-body section h4 svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--accent-secondary); stroke-width: 1.7; }
.settings-body .fine, .settings-body .hint { margin-top: 0; line-height: 1.5; }
.settings-body > .fine { text-align: center; padding: 4px 0 8px; }
.settings-body .kv { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; gap: 3px; }
.settings-body .kv:empty { display: none; }
.settings-body .btn.block { margin-top: 0; }
.settings-body .btn { padding: 8px 14px; font-size: .93rem; border-radius: 10px; }
.settings-body .btn.ghost { background: var(--bg); }
.settings-body .btn.ghost:hover { background: var(--bg-elevated); }
.settings-body .btn.block + .btn.block, .settings-body .btn.block + label.btn { margin-top: -2px; }
.settings-body .seg { display: flex; }
.settings-body .seg button { flex: 1; }
.settings-body label { gap: 5px; }
.settings-body select, .settings-body input[type=text] { background: var(--bg); }
[data-theme="light"] .settings-body section { box-shadow: 0 1px 2px rgba(30, 20, 40, .04); }

/* ── Dictation ── */
.web-toggle.mic .i-stop, .web-toggle.mic .i-wait { display: none; }
.web-toggle.mic.recording { background: var(--danger); border-color: var(--danger); color: #fff; }
.web-toggle.mic.recording .i-mic { display: none; }
.web-toggle.mic.recording .i-stop { display: block; }
.web-toggle.mic.working .i-mic { display: none; }
.web-toggle.mic.working .i-wait { display: block; width: 18px; height: 18px; border: 2px solid var(--border-light); border-top-color: var(--accent-secondary); border-radius: 50%; animation: spin .8s linear infinite; }
.web-toggle.mic:disabled { cursor: progress; }
@keyframes spin { to { transform: rotate(360deg); } }
.recbar { max-width: 800px; width: calc(100% - 24px); margin: 0 auto 8px; display: flex; align-items: center; gap: 10px; padding: 7px 12px; border: 1px solid var(--border-light); border-radius: 12px; background: var(--bg-surface); font-size: .86rem; }
.recbar .recdot { width: 9px; height: 9px; border-radius: 50%; background: var(--danger); animation: blink 1.2s steps(2) infinite; }
.recbar .mono { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.recbar .meter { --lvl: .04; width: 70px; height: 6px; border-radius: 3px; background: var(--bg-elevated); position: relative; overflow: hidden; }
.recbar .meter::after { content: ""; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--lvl)); background: linear-gradient(90deg, var(--ok), var(--accent-secondary)); transition: transform .08s linear; }
.recbar .spacer { flex: 1; }
.recbar .rec-hint { color: var(--text-muted); font-size: .78rem; }
.recbar .rec-cancel { background: none; border: 1px solid var(--border-light); border-radius: 8px; padding: 3px 10px; font-size: .8rem; color: var(--text-muted); }
.recbar .rec-cancel:hover { color: var(--text); background: var(--bg-elevated); }
.recbar.working .recdot { background: var(--accent-secondary); }
@media (max-width: 620px) { .recbar .rec-hint { display: none; } }

/* ── Costs ── */
.cost-line { margin-left: auto; flex: 0 1 auto; min-width: 0; background: none; border: 0; padding: 3px 2px; font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.cost-line:hover { color: var(--text); text-decoration: underline dotted; text-underline-offset: 3px; }
.msg .actions .meta { margin-left: auto; font-size: .74rem; color: var(--text-muted); opacity: .85; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usage-tabs { display: flex; margin: 2px 0 14px; }
.usage-tabs button { flex: 1; white-space: nowrap; padding: 7px 8px; font-size: .9rem; }
.usage-body { display: grid; gap: 14px; font-size: .9rem; }
.usage-tot { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.usage-tot div { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.usage-tot b { display: block; font-size: 1.25rem; color: var(--text-heading); font-variant-numeric: tabular-nums; line-height: 1.2; }
.usage-tot small { color: var(--text-muted); font-size: .76rem; }
.usage-body table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.usage-body th, .usage-body td { padding: 6px 4px; border-bottom: 1px solid var(--border); text-align: left; }
.usage-body th { color: var(--text-muted); font-weight: 600; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; }
.usage-body .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.usage-body h5 { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); font-weight: 600; margin-bottom: -6px; }

/* ── Conversations: pinned group, row menu, inline rename, search ── */
.thread-search { margin: 10px 0 0; }
.thread-list li.group { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); padding: 12px 10px 4px; font-weight: 600; }
.thread-list li.group:first-child { padding-top: 2px; }
.thread-list li.empty-row { color: var(--text-muted); font-size: .86rem; padding: 10px; }
.thread-list li.row { position: relative; }
.thread-list li.row:hover { background: var(--bg-surface); }
.thread-list li.row.active { background: var(--bg-elevated); }
.thread-list li button.t small { display: flex; gap: 6px; }
.thread-list li button.t small .c { margin-left: auto; font-variant-numeric: tabular-nums; }
.thread-list li .snip { display: block; font-size: .76rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.thread-list li .snip mark { background: none; color: var(--accent-secondary); font-weight: 600; }
.thread-list li button.t span.pin-dot { display: inline; color: var(--accent-secondary); font-size: .6rem; vertical-align: 2px; margin-right: 6px; }
.thread-list li button.t small span { display: inline; }
.thread-list li button.more { background: none; border: 0; color: var(--text-muted); width: 30px; height: 30px; border-radius: 8px; flex: 0 0 30px; font-size: 1.05rem; line-height: 1; opacity: 0; transition: opacity .12s; margin-right: 4px; }
.thread-list li.row:hover button.more, .thread-list li.row.active button.more, .thread-list li button.more:focus-visible, .thread-list li button.more[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { .thread-list li button.more { opacity: .8; } }
.thread-list li button.more:hover { background: var(--bg-hover); color: var(--text); }
.thread-list li .rename { flex: 1; margin: 4px 6px; padding: 6px 9px; font-size: .95rem; }
.row-menu { position: fixed; z-index: 60; min-width: 190px; padding: 5px; background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .3); display: grid; }
.row-menu button { display: flex; align-items: center; gap: 10px; text-align: left; background: none; border: 0; border-radius: 8px; padding: 7px 10px; font-size: .9rem; color: var(--text); }
.row-menu button:hover, .row-menu button:focus-visible { background: var(--bg-elevated); outline: none; }
.row-menu button svg { width: 16px; height: 16px; color: var(--text-muted); }
.row-menu button.del, .row-menu button.del svg { color: var(--danger); }
.row-menu hr { border: 0; border-top: 1px solid var(--border); margin: 4px 6px; }

/* ── Monthly limit card, above the message box ── */
.cap-card { max-width: 800px; width: calc(100% - 24px); margin: 8px auto 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 9px 10px 9px 14px; border: 1px solid var(--link); border-left-width: 3px; border-radius: 12px; background: var(--bg-surface); font-size: .88rem; }
.cap-card .spacer { flex: 1; }
.cap-card button { background: none; border: 1px solid var(--border-light); border-radius: 8px; padding: 4px 10px; font-size: .84rem; }
.cap-card button:hover { background: var(--bg-elevated); }
.cap-card button.x { border: 0; font-size: 1.1rem; color: var(--text-muted); padding: 0 6px; }
.msg .actions .meta.stopped { margin-left: 0; color: var(--link); }
.msg .actions .meta.stopped + .meta { margin-left: auto; }

/* ── Spoken replies ── */
.voice-wrap { position: relative; flex: 0 0 auto; }
.voice-chip svg { width: 15px; height: 15px; flex: 0 0 15px; }
.voice-chip.on { color: var(--accent-secondary); border-color: color-mix(in srgb, var(--accent-secondary) 55%, var(--border-light)); }
.voice-menu { left: auto; right: 0; width: min(340px, calc(100vw - 24px)); }
.model-item:disabled { opacity: .45; cursor: not-allowed; }
.msg .actions .listen-btn.on { color: var(--accent-secondary); }
.msg .body.folded { display: none; }
.voice-row { display: flex; align-items: center; gap: 10px; padding: 6px 4px 2px; font-size: .88rem; color: var(--text-muted); }
.voice-row button { background: none; border: 1px solid var(--border-light); border-radius: 999px; padding: 2px 11px; font-size: .8rem; color: var(--text-muted); }
.voice-row button:hover { color: var(--text); background: var(--bg-elevated); }
.vr-wave { display: inline-flex; align-items: center; gap: 2px; height: 16px; }
.vr-wave i { display: block; width: 3px; height: 5px; border-radius: 2px; background: var(--accent-secondary); opacity: .5; }
.voice-row:has(.vr-stop:not([hidden])) .vr-wave i { opacity: 1; animation: vrw 1s ease-in-out infinite; }
.voice-row.paused .vr-wave i { animation-play-state: paused; }
.msg .actions .listen-pair { display: contents; }
.vr-wave i:nth-child(2) { animation-delay: .15s !important; } .vr-wave i:nth-child(3) { animation-delay: .3s !important; } .vr-wave i:nth-child(4) { animation-delay: .45s !important; }
@keyframes vrw { 0%, 100% { height: 4px; } 50% { height: 15px; } }
.voice-row-set { display: flex; align-items: flex-end; gap: 10px; }
.voice-row-set label { flex: 1; }
#setVoiceMode button:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 520px) { .composer-foot { flex-wrap: wrap; } }
/* A phone's composer carries attach, look-up, the microphone and send: narrower
   buttons (still 44 px tall to touch), a tighter gap, and the placeholder on one line. */
@media (max-width: 520px) {
  .composer { gap: 6px; padding-left: 8px; padding-right: 8px; }
  .composer .web-toggle { flex-basis: 38px; }
  .composer textarea { padding: 11px 10px; }
  .composer textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ── The Wheel's movements ── */
.wheel-score { float: right; font-family: var(--font-body); font-size: .85rem; color: var(--text-muted); }
.wheel-score b { font-size: 1.15rem; color: var(--accent-secondary); font-variant-numeric: tabular-nums; }
.checkin.proposal { border-left-width: 4px; }
.checkin.proposal .pr-ev { color: var(--text-muted); font-style: italic; }
.checkin.lifebook .lb-text { white-space: pre-wrap; margin-top: 6px; }
.checkin.lifebook .lb-diff del { color: var(--text-muted); }
.checkin.lifebook .lb-diff ins { text-decoration: none; font-weight: 600; }
.lb-notes { display: grid; gap: 6px; margin-top: 8px; }
.checkin.lifebook .lb-plan { margin: 6px 0 0 1.1em; padding: 0; font-size: .92em; }
.checkin.lifebook .lb-plan li { margin: 2px 0; }
.lb-note summary { cursor: pointer; font-weight: 600; }
.lb-note.off summary { font-weight: 400; opacity: .6; }
.lb-note summary .fine { font-weight: 400; }
.lb-note .lb-body { white-space: pre-wrap; word-break: break-word; font: inherit; font-size: .92em; margin: 6px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--surface-2, rgba(127,127,127,.08)); max-height: 40vh; overflow: auto; }
.checkin.lifebook .lb-edit, .checkin.lifebook .lb-path { width: 100%; margin-top: 6px; font: inherit; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border-light); background: var(--bg-elevated); color: inherit; box-sizing: border-box; }
.checkin.lifebook code { font-size: .85em; }
.level-up { position: fixed; left: 50%; top: calc(74px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 26; display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 12px; min-width: min(380px, calc(100vw - 24px)); background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: 16px; box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
html.threads-docked .level-up { left: calc(50% + 140px); }
.level-up.show { animation: lu-in .5s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes lu-in { from { opacity: 0; transform: translate(-50%, -12px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
.lu-ring { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, color-mix(in srgb, var(--pc) 30%, transparent) 0 55%, transparent 56%); border: 2px solid var(--pc); box-shadow: 0 0 18px color-mix(in srgb, var(--pc) 55%, transparent); animation: lu-glow 1.6s ease-in-out 2; }
.lu-ring span { font-weight: 700; color: var(--pc); font-variant-numeric: tabular-nums; }
@keyframes lu-glow { 50% { box-shadow: 0 0 34px color-mix(in srgb, var(--pc) 85%, transparent); } }
.lu-text { display: grid; gap: 2px; flex: 1; }
.lu-text strong { font-family: var(--font-header); font-size: 1.15rem; color: var(--text-heading); }
.lu-text span { font-size: .85rem; color: var(--text-muted); }
.lu-x { background: none; border: 0; color: var(--text-muted); font-size: 1.2rem; align-self: flex-start; }
.learned-pillars { list-style: none; display: grid; gap: 6px; }
.learned-pillars li { font-size: .88rem; border-left: 3px solid var(--pc); padding: 2px 0 2px 10px; }
.sub-h { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); font-weight: 600; margin: 6px 0 4px; }
.wheel-history { list-style: none; display: grid; gap: 3px; font-size: .86rem; }
.wheel-history li span { color: var(--text-muted); font-variant-numeric: tabular-nums; display: inline-block; min-width: 54px; }
.wheel-history li.up::before { content: "▲ "; color: var(--ok); font-size: .7rem; }
.wheel-history li.down::before { content: "▼ "; color: var(--link); font-size: .7rem; }
.wheel-history li.declined { opacity: .6; }
.wheel-history li.declined::before { content: "· "; }

/* ── The Wisdom Canon ── */
.canon-station { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--border-light); border-radius: 12px; background: var(--bg-surface); }
.cs-head b { font-family: var(--font-header); font-size: 1.12rem; color: var(--text-heading); }
.canon-bar { height: 5px; border-radius: 3px; background: var(--bg-elevated); overflow: hidden; }
.canon-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-secondary)); }
.canon-note { display: grid; gap: 6px; }
.canon-note select { width: auto; }
.canon-notes { list-style: none; display: grid; gap: 6px; }
.canon-notes li { font-size: .9rem; border-left: 2px solid var(--border-light); padding-left: 10px; }
.canon-notes li small { display: block; color: var(--text-muted); font-size: .72rem; }
.canon-plan { font-size: .88rem; padding: 10px 12px; border-left: 3px solid var(--accent-secondary); background: var(--bg-surface); border-radius: 8px; }
.canon-plan small { color: var(--text-muted); }

/* ── Linking a device ── */
.link-code { font: 600 1.6rem/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .12em; text-align: center; padding: 14px 10px; border: 1px dashed var(--accent-secondary); border-radius: 12px; background: var(--bg); color: var(--text-heading); user-select: all; }
.link-code.small { display: block; font-size: .95rem; letter-spacing: .06em; padding: 10px; word-break: break-all; }
.link-requests { display: grid; gap: 10px; }
.link-requests:empty { display: none; }
.link-request { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--accent-secondary); border-radius: 12px; background: var(--bg); }
.link-request small { color: var(--text-muted); }
.link-input { font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; }
.link-alt summary { cursor: pointer; color: var(--text-muted); font-size: .88rem; }
.link-alt .row-btns input { flex: 1; min-width: 0; }
.recovery { display: grid; gap: 6px; }
.devices { display: grid; gap: 8px; margin-bottom: 6px; }
.devices h5 { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: 0; }
.device-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.device { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--border, var(--accent-secondary)); border-radius: 12px; background: var(--bg); }
.device.here { border-color: var(--accent-secondary); }
.device-name { display: grid; gap: 2px; min-width: 0; }
.device-name b { overflow-wrap: anywhere; }
.device-name small { color: var(--text-muted); }
.device .row-btns { justify-content: flex-end; flex-wrap: wrap; }
.device .row-btns input { min-width: 0; flex: 1 1 160px; }
.device > .hint { grid-column: 1 / -1; margin: 0; }
.device > .hint:empty { display: none; }
.link-btn.danger { color: var(--danger, #e06c75); }
@media (max-width: 480px) { .device { grid-template-columns: 1fr; } .device .row-btns { justify-content: flex-start; } }

/* Page readings (the browser extension's conversations) */
.readings-btn { margin-top: 8px; font-size: .86rem; }
.thread-list li button.t small .pg { margin-left: 6px; color: var(--text-muted); }
.readings-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 4px; }
.readings-bar .search { flex: 1; min-width: 180px; margin: 0; }
.readings-list { list-style: none; margin-top: 8px; }
.readings-list li.reading { border-bottom: 1px solid var(--border); padding: 8px 4px 10px; }
.readings-list li.reading button.t { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; }
.readings-list li.reading .rt { display: block; color: var(--text-heading); font-weight: 600; }
.readings-list li.reading small { color: var(--text-muted); font-size: .76rem; }
.readings-list li.reading .rurl { display: block; font-size: .8rem; word-break: break-all; margin-top: 2px; }
.readings-list .kinds { margin-top: 4px; }
.readings-list .kind { display: inline-block; font-size: .7rem; border: 1px solid var(--border); border-radius: 10px; padding: 0 7px; margin-right: 4px; color: var(--text-muted); }
.readings-list .kind.harmonist { border-color: var(--accent, #9B3DBE); }
.page-strip { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding: 8px 12px; margin: 0 0 12px; border: 1px solid var(--border); border-radius: 10px; font-size: .88rem; }
.page-strip .lbl { color: var(--text-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.page-strip small { flex-basis: 100%; color: var(--text-muted); font-size: .76rem; word-break: break-all; }
.readings-list li.empty-row { color: var(--text-muted); font-size: .86rem; padding: 10px 4px; list-style: none; }
.hp-paste { margin-top: 8px; }
.hp-paste summary { cursor: pointer; color: var(--text-muted); font-size: .85rem; }
.hp-paste textarea { width: 100%; font-family: var(--font-mono, monospace); font-size: .75rem; margin: 6px 0; }
#hpShown { margin: 6px 0 10px; }
.mem-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .85rem; color: var(--text-muted); padding: 8px 10px; border: 1px solid var(--border-light); border-radius: 10px; margin: 0 0 14px; }
.mem-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); flex: none; }
.mem-dot.on { background: #5aa86f; }
.link-btn { background: none; border: 0; padding: 0; color: var(--accent-secondary); cursor: pointer; text-decoration: underline; font: inherit; }
.btn.small { padding: 4px 10px; font-size: .8rem; }
.mem-line { flex-wrap: nowrap; align-items: flex-start; }
.mem-line .mem-text { flex: 1; }
.mem-line .mem-dot { margin-top: 6px; }
.mem-line > button { flex: none; }

/* Sync without a switch: the offer to let this device in, and requests from other devices, above the conversation. */
.sync-banner[hidden] { display: none; }
.sync-banner .link-request { border-left-width: 3px; }

/* ─── The Harmonic Profile page ─── */
.pv-overlay { position: fixed; inset: 0; z-index: 60; overflow-y: auto; background: var(--bg, #0b0b12); color: var(--text); }
.pv-top { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--bg, #0b0b12); border-bottom: 1px solid var(--border-light); }
.pv-top-sp { flex: 1; }
.pv-page { max-width: 820px; margin: 0 auto; padding: 24px 16px 64px; line-height: 1.6; }
.pv-cover { padding: 24px 0 8px; border-bottom: 1px solid var(--border-light); margin-bottom: 8px; }
.pv-cover h1 { font-family: var(--font-display, serif); font-size: 2.2rem; margin: 4px 0; text-align: left; }
.pv-page h1, .pv-page h2, .pv-page h3 { color: var(--text); text-align: left; }
.pv-kicker { text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; color: var(--text-muted); margin: 0; }
.pv-date, .pv-capsule { color: var(--text-muted); margin: 4px 0; }
.pv-section { padding: 22px 0; border-bottom: 1px solid var(--border-light); break-inside: avoid-page; }
.pv-section h2 { font-family: var(--font-display, serif); font-size: 1.45rem; margin: 0 0 12px; }
.pv-section h3 { font-size: 1rem; margin: 18px 0 6px; }
.pv-muted { color: var(--text-muted); font-size: .9rem; }
.pv-big { font-family: var(--font-display, serif); font-size: 2.4rem; margin: 4px 0 8px; }
.pv-big small { font-size: 1rem; color: var(--text-muted); margin-left: 6px; }
.pv-facts { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: .9rem; color: var(--text-muted); }
.pv-facts b { color: var(--text); font-weight: 600; }
.pv-radar { width: 100%; max-width: 520px; display: block; margin: 0 auto 10px; }
.pv-pentagon { width: 100%; max-width: 340px; display: block; margin: 6px auto; }
.pv-grid { stroke: var(--border-light); stroke-width: .7; fill: none; }
.pv-area { fill: var(--accent); fill-opacity: .18; stroke: var(--accent-secondary); stroke-width: 1.2; }
.pv-overlay svg, .pv-overlay svg text, .pv-inline svg, .pv-inline svg text { stroke: none; }
.pv-overlay svg .pv-grid, .pv-inline svg .pv-grid { stroke: var(--border-light); }
.pv-overlay svg .pv-area, .pv-inline svg .pv-area { stroke: var(--accent-secondary); }
.pv-label { font-size: 12px; font-weight: 600; }
.pv-pentagon .pv-label { fill: var(--text-muted); }
.pv-strong { fill: var(--text); }
.pv-table { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 6px 0 10px; }
.pv-table th, .pv-table td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--border-light); }
.pv-table th { font-weight: 600; color: var(--text-muted); font-size: .8rem; }
.pv-table td:first-child { font-weight: 600; }
.pv-bar { display: grid; grid-template-columns: 54px 1fr 34px; align-items: center; gap: 10px; margin: 8px 0; font-size: .9rem; }
.pv-bar small { grid-column: 2 / 4; color: var(--text-muted); font-size: .78rem; margin-top: -4px; }
.pv-track { position: relative; height: 10px; border-radius: 5px; background: var(--border-light); overflow: visible; }
.pv-fill { height: 100%; border-radius: 5px; background: var(--accent-secondary); }
.pv-doshas { display: flex; height: 30px; border-radius: 6px; overflow: hidden; font-size: .78rem; font-weight: 600; color: #fff; }
.pv-dosha { display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; }
.pv-V { background: #b89a4f; } .pv-P { background: #d97a5f; } .pv-K { background: #6b8eb8; }
.pv-yy { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 10px; font-size: .85rem; color: var(--text-muted); }
.pv-yy .pv-track { background: linear-gradient(90deg, #3c4a6b, #c9a96e); }
.pv-pointer { position: absolute; top: -4px; width: 4px; height: 18px; margin-left: -2px; border-radius: 2px; background: var(--text); }
.pv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.pv-card { border: 1px solid var(--border-light); border-left: 3px solid var(--pc); border-radius: 8px; padding: 12px 14px; break-inside: avoid; }
.pv-card h3 { margin: 4px 0 6px; }
.pv-horizon { padding: 10px 0; }
.pv-ask { background: none; border: 0; padding: 0; margin-top: 4px; color: var(--accent-secondary); text-decoration: underline; cursor: pointer; font: inherit; font-size: .85rem; text-align: left; }
.pv-foot { color: var(--text-muted); font-size: .82rem; padding-top: 18px; }
.acct-body { display: grid; gap: 10px; font-size: .9rem; }
.acct-body h5 { margin: 6px 0 0; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.acct-body .acct-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--text-muted); opacity: .6; }
.acct-body .acct-dot.on { background: #5aa86f; opacity: 1; }
@media print {
  body.pv-open > *:not(#profileView) { display: none !important; }
  body.pv-open { background: #fff !important; }
  #profileView { position: static; overflow: visible; background: #fff; color: #1a1a22; --text: #1a1a22; --text-muted: #555; --border-light: #ddd; --bg: #fff; }
  #profileView h1, #profileView h2, #profileView h3, #profileView b, #profileView strong { color: #1a1a22 !important; }
  .pv-section { break-inside: auto; }
  .pv-section h2, .pv-card, .pv-horizon, .pv-radar, .pv-pentagon { break-inside: avoid; }
  .pv-section h2, .pv-section h3 { break-after: avoid; }
  .pv-top, .pv-ask { display: none !important; }
  .pv-page { max-width: none; padding: 0; }
  .pv-section { border-color: #ddd; }
}

/* ─── Full-window pages: Settings and Your path ───
   The chat steps aside; a section list on the left, the sections in one
   readable column on the right. A phone gets the list as a strip on top. */
.drawer.page { left: 0; right: 0; width: auto; padding: 0; border: 0; z-index: 35; display: grid; grid-template-columns: 236px minmax(0, 1fr); overflow: hidden; }
.drawer.page[hidden] { display: none; }
.page-nav { display: flex; flex-direction: column; gap: 2px; padding: calc(16px + env(safe-area-inset-top)) 10px calc(14px + env(safe-area-inset-bottom)); background: var(--bg-surface); border-right: 1px solid var(--border); overflow-y: auto; }
.page-back { display: flex; align-items: center; gap: 9px; background: none; border: 0; color: var(--text); font-size: .93rem; padding: 8px 12px; margin-bottom: 12px; border-radius: 10px; text-align: left; }
.page-back:hover { background: var(--bg-elevated); }
.page-back svg { width: 17px; height: 17px; flex: 0 0 17px; }
.page-nav-items { display: flex; flex-direction: column; gap: 2px; }
.page-nav-items button { display: flex; align-items: center; gap: 11px; width: 100%; background: none; border: 0; border-radius: 10px; padding: 8px 12px; color: var(--text-muted); font-size: .93rem; text-align: left; }
.page-nav-items button:hover { background: var(--bg-elevated); color: var(--text); }
.page-nav-items button.on { background: var(--bg-elevated); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-light); }
.page-nav-items button svg { width: 17px; height: 17px; flex: 0 0 17px; stroke-width: 1.7; }
.page-nav-items button.on svg { color: var(--accent-secondary); }
.page-nav-foot { margin-top: auto; padding: 12px 12px 2px; border-top: 1px solid var(--border); font-size: .78rem; color: var(--text-muted); line-height: 1.45; display: grid; gap: 6px; }
.page-nav-foot:empty { display: none; }
.page-nav-foot b { display: block; color: var(--text); font-weight: 600; font-size: .8rem; }
.page-nav-foot .p { word-break: break-all; }
.page-nav-foot button { justify-self: start; background: none; border: 0; padding: 0; color: var(--accent-secondary); font-size: .78rem; text-decoration: underline; cursor: pointer; }
.page-main { overflow-y: auto; padding: calc(30px + env(safe-area-inset-top)) clamp(16px, 5vw, 64px) calc(72px + env(safe-area-inset-bottom)); scroll-behavior: smooth; }
.page-main > .drawer-head, .page-main > .me-body, .page-main > .settings-body, .page-main > .mem-line { max-width: 880px; margin-left: auto; margin-right: auto; width: 100%; }
.drawer.page .drawer-head { position: static; margin: 0 auto 24px; padding: 0; border: 0; background: none; }
.drawer.page .drawer-head h3 { font-family: var(--font-header); font-size: 2.2rem; font-weight: 400; color: var(--text-heading); }
.drawer.page section { scroll-margin-top: 18px; }
.drawer.page .settings-body { gap: 16px; }
.drawer.page .settings-body section { padding: 18px 22px 20px; }
.drawer.page .me-body { gap: 16px; }
.drawer.page .me-body > section { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px 22px 20px; gap: 10px; }
.drawer.page .me-body > section[hidden] { display: none; }
.drawer.page .me-body > section > h4 { display: flex; align-items: center; gap: 10px; font-family: var(--font-header); font-weight: 400; font-size: 1.35rem; color: var(--text-heading); }
.drawer.page .me-body > section > h4 svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--accent-secondary); stroke-width: 1.6; fill: none; stroke: currentColor; }
.drawer.page .wheel-wrap { grid-template-columns: minmax(300px, 430px) 1fr; gap: 24px; }
.drawer.page .practice-form { grid-template-columns: 2fr 1fr 1fr auto; align-items: center; }
.drawer.page .practice-form input, .drawer.page .practice-form button { grid-column: auto; }
.drawer.page #meNotes { min-height: 160px; }
[data-theme="light"] .drawer.page .me-body > section { box-shadow: 0 1px 2px rgba(30, 20, 40, .04); }
/* The profile itself, inside Your path: the cover and the Wheel are already above it. */
.pv-inline { padding: 4px 0 0; max-width: none; margin: 0; }
.pv-inline > .pv-cover, .pv-inline > section.pv-section:first-of-type { display: none; }
.pv-inline > .pv-section:last-of-type { border-bottom: 0; }
/* The vault, in the top bar of the desktop app. */
.vault-chip .lbl { max-width: 26ch; overflow: hidden; text-overflow: ellipsis; }
.vault-chip.none { color: var(--accent-secondary); }
@media (max-width: 760px) {
  .drawer.page { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .page-nav { flex-direction: row; align-items: center; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--border); padding: calc(8px + env(safe-area-inset-top)) 8px 8px; scrollbar-width: none; }
  .page-back { margin: 0; padding: 8px; flex: 0 0 auto; font-size: 0; gap: 0; }
  .page-nav-items { flex-direction: row; }
  .page-nav-items button { width: auto; white-space: nowrap; padding: 7px 11px; }
  .page-nav-items button svg { display: none; }
  .page-nav-foot { display: none; }
  .page-main { padding: 18px 14px calc(56px + env(safe-area-inset-bottom)); }
  .drawer.page .drawer-head h3 { font-size: 1.6rem; }
  .drawer.page .me-body > section, .drawer.page .settings-body section { padding: 14px 14px 16px; }
  .drawer.page .wheel-wrap { grid-template-columns: 1fr; }
  .drawer.page .practice-form { grid-template-columns: 1fr 1fr; }
  .drawer.page .practice-form input, .drawer.page .practice-form button { grid-column: 1 / -1; }
}
@media print { .drawer.page { display: none !important; } }
.drawer.page .settings-body section h4 { font-family: var(--font-header); font-weight: 400; font-size: 1.35rem; letter-spacing: 0; text-transform: none; color: var(--text-heading); gap: 10px; }
.drawer.page .settings-body section h4 svg { width: 20px; height: 20px; flex: 0 0 20px; stroke-width: 1.6; }
.hp-shown > summary { cursor: pointer; color: var(--text-muted); font-size: .86rem; }
.hp-shown[open] > summary { margin-bottom: 8px; }

/* ─── The top bar's menus on the left, Settings at the foot of the
   conversations, Your path and the Library across the whole window ─── */
.topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
.top-left { display: flex; align-items: center; gap: 4px; min-width: 0; }
.top-left .top-actions { margin-left: 2px; }
.topbar > .title { justify-self: center; }
.top-right { justify-self: end; }
/* With the conversations docked, Settings sits at their foot and leaves the bar. */
html.threads-docked .top-settings { display: none; }
@media (max-width: 760px) { .topbar { grid-template-columns: auto minmax(0, 1fr) 0; } .topbar > .title { justify-self: center; } }

.threads-foot { position: sticky; bottom: calc(-14px - env(safe-area-inset-bottom)); margin: auto -14px calc(-14px - env(safe-area-inset-bottom)); padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--border); }
.threads-settings { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; border-radius: 10px; padding: 9px 10px; color: var(--text-muted); font-size: .93rem; text-align: left; }
.threads-settings:hover { background: var(--bg-elevated); color: var(--text); }
.threads-settings svg { width: 19px; height: 19px; flex: 0 0 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Your path: the whole window, two columns of cards beside a large Wheel. */
#drawerMe .page-main > .drawer-head, #drawerMe .page-main > .me-body, #drawerMe .page-main > .mem-line { max-width: 1680px; }
#drawerMe .page-main { padding-left: clamp(16px, 3vw, 48px); padding-right: clamp(16px, 3vw, 48px); }
#drawerMe .wheel-wrap { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 32px; }
#drawerMe #wheelSvg { width: 100%; height: auto; max-height: 62vh; }
#drawerMe #wheelSvg text { font-size: 9px; }
#drawerMe .wheel-row { grid-template-columns: 150px 1fr; font-size: .95rem; }
#drawerMe .wheel-row select { padding: 7px 10px; font-size: .92rem; }
@media (min-width: 1180px) {
  #drawerMe .me-body { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  #drawerMe .me-body > #hpBox, #drawerMe .me-body > section:first-child { grid-column: 1 / -1; }
  #drawerMe .pv-inline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  #drawerMe .pv-inline > .pv-section { border-bottom: 0; border-top: 1px solid var(--border-light); }
  /* Altitude beside the Enneagram; the constitution, edges and horizons across. */
  #drawerMe .pv-inline > * { grid-column: 1 / -1; }
  #drawerMe .pv-inline > section.pv-section:nth-of-type(2), #drawerMe .pv-inline > section.pv-section:nth-of-type(3) { grid-column: auto; }
}
@media (max-width: 900px) { #drawerMe .wheel-wrap { grid-template-columns: 1fr; } }

/* The Library: the list on the left, the article on the right, the whole window. */
.lib-page { grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); }
.lib-side { display: flex; flex-direction: column; min-height: 0; padding: calc(16px + env(safe-area-inset-top)) 12px 0; background: var(--bg-surface); border-right: 1px solid var(--border); }
.lib-side .search { margin: 0 0 6px; }
.lib-side #libMeta { padding: 0 4px 6px; }
.lib-side .lib-list { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -12px; padding: 0 12px 24px; }
.lib-list li.active button { background: var(--bg-elevated); border-radius: 8px; }
.lib-list li.active button { color: var(--text); }
.lib-main > .drawer-head, .lib-main > .lib-empty, .lib-main > .reader { max-width: 780px; margin-left: auto; margin-right: auto; width: 100%; }
.lib-main .drawer-head h3 { white-space: normal; line-height: 1.15; }
.lib-main .lib-back { display: none; }
.lib-empty { color: var(--text-muted); font-size: 1rem; line-height: 1.6; }
.lib-main .reader .prose { font-size: 1.06rem; line-height: 1.75; }
@media (max-width: 760px) {
  .lib-page { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); }
  .lib-page .lib-main { display: none; }
  .lib-page.reading .lib-side { display: none; }
  .lib-page.reading .lib-main { display: block; }
  .lib-page .lib-side .page-back { font-size: .93rem; gap: 9px; padding: 8px 12px; margin-bottom: 8px; }
  .lib-main .lib-back { display: grid; }
}

/* Asked once at the start: sign in, so the memory is the person's own. */
.signin-ask { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(0, 0, 0, .55); padding: 16px; }
.signin-ask[hidden] { display: none; }
.signin-card { width: min(440px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: 16px; padding: 24px 24px 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); display: grid; gap: 12px; }
.signin-card h3 { font-family: var(--font-header); font-weight: 400; font-size: 1.55rem; color: var(--text-heading); margin: 0; }
.signin-card p { margin: 0; color: var(--text-muted); line-height: 1.55; font-size: .93rem; }
.signin-card .sync-form { margin-top: 2px; }
.signin-card .sync-form .btn.ghost.block { background: var(--accent); color: #fff; border-color: transparent; }
.signin-card .later { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 4px; }
.signin-card .later button { background: none; border: 0; padding: 4px 0; color: var(--text-muted); font-size: .85rem; cursor: pointer; text-decoration: underline; }
.signin-card .row-btns .btn { flex: 1; text-align: center; }
#hpInline .pv-section { display: block; }
#drawerMe .pv-inline { align-items: start; }
.lib-main > .drawer-head, .lib-main > .lib-empty, .lib-main > .reader { max-width: 940px; }
#hpInline > .pv-cover, #hpInline > section.pv-section:first-of-type { display: none; }
/* The privacy gate (1.12): what was found, masked */
.gate-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: .9rem; color: var(--text); }
.gate-list code { font-size: .85em; padding: 1px 5px; border-radius: 4px; background: var(--bg-elevated, rgba(255,255,255,.06)); }
/* 1.13: a conversation by voice */
.web-toggle.talk.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.talkbar[data-phase="writing"] .recdot, .talkbar[data-phase="answering"] .recdot { background: var(--accent-secondary); animation: none; }
.talkbar[data-phase="speaking"] .recdot { background: var(--ok); }
/* 1.13: notices the app writes, never a model (the pause bell, the crisis line after a care moment) */
.msg.notice .body { border: 1px dashed var(--border-light); border-radius: 12px; padding: 10px 14px; color: var(--text-muted); font-size: .92rem; white-space: pre-wrap; background: transparent; }
.msg.notice.care .body { border-style: solid; border-color: var(--accent-secondary); color: var(--text); }
/* 1.13: what an answer remembered from earlier conversations */
.sources.recalled { align-items: center; }
.sources.recalled .rc-label { color: var(--text-muted); font-size: .8rem; }
.sources.recalled .rc { display: inline-flex; gap: 2px; align-items: center; }
.sources.recalled .rc.gone { opacity: .45; text-decoration: line-through; }
.sources.recalled .rc-forget { font-size: .75rem; opacity: .7; }
.review-box { display: grid; gap: 8px; margin-top: 6px; }
.review-box select { width: auto; }

/* Settings → Help Lodestone improve: the copy to share, read before it goes. */
.share-names { display: grid; gap: 6px; }
.share-name { display: grid; grid-template-columns: auto 1fr minmax(8em, 11em); gap: 8px; align-items: center; font-size: .9rem; }
.share-name small { color: var(--text-muted); }
.share-name input[type="text"] { font-size: .85rem; padding: 4px 6px; min-width: 0; }
.share-preview { max-height: 60vh; overflow: auto; display: grid; gap: 8px; padding: 8px; border: 1px solid var(--border-light); border-radius: 10px; background: var(--bg-surface); }
.share-msg { padding: 8px 10px; border-radius: 8px; background: var(--bg); font-size: .86rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.share-msg.user { background: var(--user-bubble); }
.share-msg.off { opacity: .45; }
.share-msg.note { border: 1px dashed var(--border-light); }
.share-msg header { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; font-size: .78rem; font-weight: 600; color: var(--text-muted); white-space: normal; }
.share-msg mark { background: color-mix(in srgb, var(--accent) 32%, transparent); color: inherit; border-radius: 4px; padding: 0 2px; }
.share-sent { gap: 4px; }
@media (max-width: 520px) { .share-name { grid-template-columns: auto 1fr; } .share-name input[type="text"] { grid-column: 2; } }

/* The composer (1.14.1): one row of every option, then a larger text box with send. */
.composer { flex-direction: column; align-items: stretch; gap: 8px; }
.composer-tools { display: flex; align-items: center; gap: 6px; min-width: 0; }
.composer-tools .web-toggle { flex: 0 0 40px; height: 40px; }
.composer-tools .model-row { flex: 0 1 auto; min-width: 0; }
.composer-tools .voice-wrap { flex: 0 0 auto; }
.composer-tools .model-chip { height: 34px; padding: 0 9px 0 11px; font-size: 13px; }
.composer-tools .voice-chip { padding-left: 9px; }
.composer-tools .voice-menu { left: auto; right: 0; }
.tools-spacer { flex: 1 1 0; min-width: 0; }
.composer-main { display: flex; gap: 8px; align-items: flex-end; }
.composer-main textarea { flex: 1 1 auto; min-width: 0; min-height: 84px; max-height: 240px; }
.composer-main .send { height: 48px; flex-basis: 48px; }
@media (max-width: 520px) {
  .composer-tools { gap: 5px; }
  .composer-tools .web-toggle { flex-basis: 38px; height: 38px; }
  .composer-tools .model-chip { font-size: 12.5px; padding: 0 7px 0 9px; }
  .composer-tools .voice-chip span { max-width: 76px; }
  .composer-main textarea { min-height: 96px; }
  .composer textarea::placeholder { white-space: normal; }
}

/* The Library on a phone: the reader's back and close sit below the status bar,
   large enough to touch, and stay at the top while the article scrolls. */
@media (max-width: 760px) {
  #drawerLibrary .lib-main { padding-top: 0; }
  #drawerLibrary .lib-main > .drawer-head { position: sticky; top: 0; z-index: 3; max-width: none; width: auto; margin: 0 -14px 16px; padding: calc(18px + env(safe-area-inset-top)) 8px 10px; background: var(--bg); border-bottom: 1px solid var(--border); }
  #drawerLibrary .lib-main > .drawer-head .icon-btn { flex: 0 0 52px; width: 52px; height: 52px; font-size: 2.1rem; border-radius: 12px; }
  #drawerLibrary .lib-main .drawer-head h3 { font-size: 1.3rem; line-height: 1.2; overflow-wrap: anywhere; }
}
.prose a.art-link { color: var(--accent-secondary); text-decoration: none; border-bottom: 1px dotted currentColor; cursor: pointer; }
.prose a.art-link:hover { border-bottom-style: solid; }

/* Settings (1.14.1): no sideways drift on a phone, the version and updates first,
   the sections in six named groups. */
.drawer.page .page-main { overflow-x: hidden; overscroll-behavior-x: none; }
.settings-body, .settings-body > *, .settings-body section, .settings-body section > * { min-width: 0; max-width: 100%; }
.settings-body .kv, .settings-body .fine, .settings-body .hint, .settings-body label { overflow-wrap: anywhere; }
.settings-body select { min-width: 0; max-width: 100%; }
.set-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; }
.set-top-ver { flex: 1 1 180px; min-width: 0; display: grid; gap: 2px; font-size: .84rem; color: var(--text-muted); }
.set-top-ver b { color: var(--text); font-size: 1rem; font-weight: 600; }
.set-top .btn { flex: 0 0 auto; }
.set-top #setUpdateMsg { flex-basis: 100%; margin: 0; }
.set-top #setUpdateMsg:empty { display: none; }
.set-top #setUpdateMsg p { margin: 4px 0 0; }
.set-group { display: grid; gap: 12px; min-width: 0; scroll-margin-top: 14px; }
.set-group-title { font-family: var(--font-body); font-size: .74rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); margin: 14px 4px 0; }
@media (max-width: 760px) {
  .drawer.page { grid-template-columns: minmax(0, 1fr); }
  .page-nav-items button { padding: 7px 10px; font-size: .92rem; }
}

/* The composer, second pass (1.14.1): no dead band under the box (the home
   indicator's inset is the form's last padding), dictation inside the box,
   converse and send share the last slot, the cost in the model menu on a phone. */
.composer { padding: 8px 12px calc(6px + env(safe-area-inset-bottom)); }
.composer-tools .cost-line { margin-left: auto; padding-left: 8px; }
.input-wrap { position: relative; flex: 1 1 auto; min-width: 0; display: flex; }
.input-wrap textarea { flex: 1 1 auto; min-width: 0; min-height: 76px; max-height: 240px; padding-right: 98px; }
.input-wrap .mic { position: absolute; right: 50px; bottom: 6px; width: 38px; height: 38px; flex: none; border: 0; border-radius: 10px; background: transparent; }
.input-wrap .mic:hover { background: var(--bg-elevated); color: var(--text); }
.composer-main .talk { flex: 0 0 48px; height: 48px; border-radius: 12px; border-color: var(--accent); color: var(--accent); }
.composer-main .talk.on { color: #fff; }
#composer:has(#talkBtn:not([hidden])):has(#input:placeholder-shown):not(:has(.send.stop, .mic.recording, .mic.working)) #sendBtn { display: none; }
#composer:not(:has(#input:placeholder-shown)) #talkBtn, #composer:has(.send.stop, .mic.recording, .mic.working) #talkBtn { display: none; }
:root:has(#attachBar:not([hidden])) #sendBtn { display: grid !important; }
:root:has(#attachBar:not([hidden])) #talkBtn { display: none !important; }
.model-menu .model-cost { display: none; }
@media (max-width: 520px) {
  .composer { padding: 6px 8px max(4px, calc(env(safe-area-inset-bottom) - 22px)); gap: 6px; }
  .composer-tools .cost-line { display: none; }
  .model-menu .model-cost { display: block; }
  .input-wrap textarea { min-height: 76px; padding-right: 96px; }
}
/* 1.14.1: the answer's actions wrap on a phone; the last answer's are fully shown. */
.msg .actions { flex-wrap: wrap; row-gap: 4px; }
#chat > .msg:last-of-type .actions { opacity: 1; }
/* 1.14.1: an answer's common actions as icons */
.msg .actions { align-items: center; }
.msg .actions .act-icon { display: inline-grid; place-items: center; width: 30px; height: 28px; padding: 0; border-radius: 8px; }
.msg .actions .act-icon svg { width: 18px; height: 18px; stroke-width: 1.7; }
.msg .actions .act-icon:hover { background: var(--bg-elevated); }
.msg .actions .act-icon.on { color: var(--accent-secondary); }
.msg .actions .act-icon + .act-icon { margin-left: -8px; }
/* 1.14.1: where a kept line goes, chosen in the card */
.lifebook .lb-where-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.lifebook .lb-where-row span { color: var(--text-muted); font-size: .88rem; }
.lifebook .lb-where { flex: 1; min-width: 0; }

/* ── Back, everywhere (October 26, 2026) ── */
.head-back { flex: 0 0 auto; margin-left: -8px; }
.head-back svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pv-top .head-back { margin-left: 0; }
/* The swipe's cue: a disc that follows the finger in from the left edge. */
.swipe-cue { position: fixed; z-index: 90; left: 0; top: 50%; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-elevated); border: 1px solid var(--border-light); color: var(--text-muted); box-shadow: 0 4px 18px rgba(0,0,0,.25); pointer-events: none; opacity: 0; transform: translateX(calc(-48px + var(--p, 0) * 64px)) scale(calc(.7 + var(--p, 0) * .3)); transition: opacity .12s, background .12s, color .12s; }
.swipe-cue.on { opacity: calc(.35 + var(--p, 0) * .65); }
.swipe-cue.go { background: var(--accent); color: #fff; border-color: transparent; }
.swipe-cue svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ── The foot of the conversations: Your path, the vault, Settings ── */
.threads-foot { display: grid; gap: 1px; }
.threads-settings .tf-lbl { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.threads-settings .tf-lbl small { font-size: .74rem; color: var(--text-muted); opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.threads-settings .tf-lbl small:empty { display: none; }

/* ── Your path in four groups ── */
.me-group-title { font-family: var(--font-body); font-size: .74rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); margin: 14px 4px -6px; grid-column: 1 / -1; }
.me-group-title:first-child { margin-top: 0; }
.page-nav-group { font-size: .68rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); opacity: .75; padding: 14px 12px 4px; }
.page-nav-group:first-child { padding-top: 2px; }
@media (min-width: 1180px) {
  #drawerMe .me-body > section[data-nav="Wheel"], #drawerMe .me-body > #lbBox { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .page-nav-group { display: none; }
  .me-group-title { margin: 10px 2px -6px; }
}

/* ── The life book, in Your path ── */
.lb-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lb-tools .search { flex: 1 1 220px; margin: 0; min-width: 0; }
.lb-tools .seg button { padding: 6px 12px; font-size: .86rem; }
.lb-actions { margin-top: 2px; }
.lb-groups { display: grid; gap: 8px; }
.lb-group { border: 1px solid var(--border-light); border-radius: 12px; padding: 0 12px; }
.lb-group > summary { display: flex; align-items: center; gap: 10px; padding: 10px 0; cursor: pointer; font-weight: 600; list-style: none; }
.lb-group > summary::-webkit-details-marker { display: none; }
.lb-group > summary::before { content: "›"; display: inline-block; width: 10px; color: var(--text-muted); transition: transform .15s; }
.lb-group[open] > summary::before { transform: rotate(90deg); }
.lb-group > summary .n { margin-left: auto; font-weight: 400; font-size: .82rem; color: var(--text-muted); }
.lb-group-body { display: grid; gap: 2px; padding: 0 0 10px; }
.lb-group .lb-note { border-top: 1px solid var(--border); padding: 8px 0 6px; }
.lb-group .lb-note > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; list-style: none; }
.lb-group .lb-note > summary::-webkit-details-marker { display: none; }
.lb-group .lb-note > summary .t { font-weight: 600; }
.lb-group .lb-note > summary .fine { font-weight: 400; overflow-wrap: anywhere; }
.lb-note-body { display: grid; gap: 8px; padding-top: 8px; }
.lb-note-actions { gap: 6px; }
.lb-note-body .lb-edit, .lb-note-body .lb-path, .lb-new .lb-edit, .lb-new .lb-path { width: 100%; font: inherit; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--border-light); background: var(--bg); color: var(--text); }
.lb-note-body .lb-edit { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; line-height: 1.45; }
.lb-new { display: grid; gap: 8px; padding: 12px; border: 1px dashed var(--border-light); border-radius: 12px; }
.lb-new .lb-where-row, .lb-note-body .lb-where-row { display: flex; align-items: center; gap: 8px; }
.lb-new .lb-where-row span, .lb-note-body .lb-where-row span { color: var(--text-muted); font-size: .88rem; }

/* 2026-10-26 (v86): the voice button and Send share the box's last slot, beside
   dictation, inside the box: voice while it is empty, Send once there is text. */
.input-wrap .send, .input-wrap .talk { position: absolute; right: 6px; bottom: 6px; width: 38px; height: 38px; flex: none; border-radius: 10px; }
.input-wrap .talk { background: transparent; border: 1px solid var(--accent); color: var(--accent); }
.input-wrap .talk.on { background: var(--accent); color: #fff; }
.input-wrap .send svg { width: 20px; height: 20px; }

/* v88: the page's own background under everything, which iOS also takes for the
   band it draws below an installed app; and no bottom inset where the page stops
   short of the screen's foot (fitFoot() in main.js). */
html { background: var(--bg); }
html.foot-held .composer { padding-bottom: 6px; }

/* ── v89: the composer as one block ──────────────────────────────────────────
   The box holds the words and, under them, every setting of the next message,
   as the flagship apps draw it. It opens on one line and grows (autosize()). */
.composer { gap: 0; }
.composer-box { display: flex; flex-direction: column; background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: 22px; transition: border-color .18s ease, box-shadow .18s ease; }
.composer-box:focus-within { border-color: color-mix(in srgb, var(--accent-secondary) 55%, var(--border-light)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.composer-box textarea, .composer-box textarea:focus { display: block; width: 100%; min-height: 46px; max-height: min(240px, 38vh); padding: 13px 16px 4px; border: 0; border-radius: 22px 22px 0 0; background: transparent; outline: none; resize: none; line-height: 1.45; font-size: 16.5px; }
.composer-box textarea::placeholder { color: var(--text-muted); opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.composer-box .composer-tools { display: flex; align-items: center; gap: 4px; padding: 4px 8px 8px; min-width: 0; }
.composer-box .composer-tools .web-toggle, .composer-box .composer-tools .mic { position: static; flex: 0 0 36px; width: 36px; height: 36px; border: 0; border-radius: 999px; background: transparent; color: var(--text-muted); }
.composer-box .composer-tools .web-toggle:hover { background: var(--bg-elevated); color: var(--text); }
.composer-box .composer-tools .web-toggle[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent-secondary); }
.composer-box .composer-tools .web-toggle svg { width: 20px; height: 20px; }
.composer-box .composer-tools .model-chip { height: 32px; border-radius: 999px; font-size: 13px; padding: 0 10px 0 9px; }
.composer-box .tools-spacer { flex: 1 1 0; min-width: 0; }
.composer-box .send, .composer-box .talk { position: static; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; }
.composer-box .send { border: 0; background: var(--accent); color: #fff; }
.composer-box .send svg { width: 19px; height: 19px; stroke-width: 2; }
.composer-box .send.stop { background: var(--bg-elevated); color: var(--text); }
.composer-box .talk { border: 0; background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent-secondary); }
.composer-box .talk.on { background: var(--accent); color: #fff; }
.composer-box .mic.recording { background: var(--danger); color: #fff; }
@media (max-width: 520px) {
  .composer { padding-left: 8px; padding-right: 8px; }
  .composer-box .composer-tools { gap: 2px; padding: 2px 6px 6px; }
  .composer-box .composer-tools .cost-line { display: none; }
}

/* v89: a message's actions appear with it: on hover or focus, by a tap on a touch
   screen, and always under the latest answer. Hidden, they take no taps. */
.msg .actions { opacity: 0; pointer-events: none; transition: opacity .18s ease; gap: 2px; }
.msg:hover .actions, .msg:focus-within .actions, .msg.show-actions .actions, #chat > .msg.assistant:last-of-type .actions { opacity: 1; pointer-events: auto; }
.msg.user .actions { justify-content: flex-end; }
.msg .actions .act-icon + .act-icon { margin-left: 0; }
.row-menu-info { padding: 7px 10px 4px; margin-top: 4px; border-top: 1px solid var(--border); font-size: .76rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.row-menu button svg { flex: none; }

/* v89: the top bar as the flagship apps hold it: the conversations on the left,
   Lodestone in the middle, a new conversation on the right. On a phone, Your path,
   the Library and Settings live at the foot of the conversations. The state of the
   model is a quiet line with a dot, green on owned hardware, violet when rented. */
.topbar { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.top-right { display: flex; justify-content: flex-end; }
.badge, .badge.live, .badge.live.rented { color: var(--text-muted); font-size: .7rem; letter-spacing: .03em; }
.badge.live::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); margin-right: 6px; vertical-align: 1px; }
.badge.live.rented::before { background: var(--accent-secondary); }
@media (max-width: 760px) {
  .topbar { grid-template-columns: 44px minmax(0, 1fr) 44px; padding-left: 6px; padding-right: 6px; }
  .top-left .top-actions { display: none; }
  .topbar > .title { justify-self: center; }
  .title { gap: 8px; }
  .title strong { font-size: 1.2rem; }
  .mini-sprite { width: 32px; height: 38px; flex-basis: 32px; margin: -2px 0; }
}
@media (min-width: 761px) { #btnLibrarySide { display: none; } }
/* v92: on a phone, Settings beside the conversations and Your path beside a new
   conversation, one tap each from the chat; the Library and the vault stay at the
   foot of the conversations. */
.top-phone { display: none; }
@media (max-width: 760px) {
  .topbar { grid-template-columns: 84px minmax(0, 1fr) 84px; }
  .top-left .top-actions { display: flex; margin-left: 0; }
  .top-left .top-actions > :not(#btnSettings) { display: none; }
  .top-right { gap: 2px; }
  .top-phone { display: inline-flex; align-items: center; justify-content: center; }
}
/* v92: what Lodestone has learned, read and corrected in place. */
.learned-notes { position: relative; font-size: .92rem; line-height: 1.55; }
.learned-notes.clamped { max-height: 15.5em; overflow: hidden; }
.learned-notes.clamped::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4em; background: linear-gradient(transparent, var(--bg-surface)); pointer-events: none; }
.learned-notes > :first-child { margin-top: 0; }
.learned-notes h1, .learned-notes h2, .learned-notes h3 { font-size: 1rem; margin: .8em 0 .3em; }
.learned-notes p, .learned-notes ul { margin: .4em 0; }
.learned-notes-empty { color: var(--text-muted); font-size: .9rem; }
.learned-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.learned-tools .btn { padding: 6px 12px; font-size: .86rem; }
.learned-edit { display: grid; gap: 8px; }
.learned-edit textarea { min-height: 12em; }
.learned-pillars li { display: flex; gap: 8px; align-items: flex-start; }
.learned-pillars li > .lp-text { flex: 1; min-width: 0; }
.lp-edit { flex: 0 0 auto; background: none; border: 0; color: var(--text-muted); padding: 2px 4px; border-radius: 6px; }
.lp-edit svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lp-form { display: grid; gap: 6px; flex: 1; }
.lp-form textarea { min-height: 2.6em; }
/* v95: fields one taps to change (main.js field()) */
.lf { display: grid; gap: 4px; }
.lf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lf-head label { display: block; font-size: .86rem; color: var(--text-muted); }
.lf-clear { background: none; border: 0; color: var(--accent); font-size: .84rem; padding: 4px 8px; margin: -4px -6px -4px 0; border-radius: 6px; }
.lf textarea { resize: none; overflow: hidden; line-height: 1.45; }
.lp-hint { margin: 0; font-size: .82rem; color: var(--text-muted); }
.lp-avoid { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: .9rem; color: var(--text-muted); }
.lp-avoid .btn { padding: 5px 12px; font-size: .86rem; }
.learned-pillars .lp-text[role=button] { cursor: pointer; }
.learned-pillars li.lp-empty .lp-text { color: var(--text-muted); }
.greet-open { margin-top: 22px; text-align: left; }
.greet-open .sub-h { margin: 0 0 6px; }
.greet-open .starters { margin-top: 0; }
.learned-kv-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* v89: one accent. Actions are violet; links a lighter violet with a quiet underline;
   a button drawn as a link takes the text's colour, not the link's. */
a { text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; }
a.btn, a.btn:visited { color: var(--text); text-decoration: none; }
.prose a[data-wikilink], .prose a.art-link { color: var(--link); border-bottom: 0; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--link) 38%, transparent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a[data-wikilink]:hover, .prose a.art-link:hover { text-decoration-color: currentColor; }
.note, .home-note { border-left-color: var(--accent); }

/* ── v89: motion. Things arrive and leave rather than blink: drawers slide, pages
   and sheets rise, menus open from where they were asked, a new message settles in.
   Short and soft; none of it for someone who has asked their device for less motion. */
@keyframes ls-from-left { from { transform: translateX(-104%); } to { transform: none; } }
@keyframes ls-from-right { from { transform: translateX(104%); } to { transform: none; } }
@keyframes ls-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ls-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ls-pop { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ls-to-left { to { transform: translateX(-104%); } }
@keyframes ls-to-right { to { transform: translateX(104%); } }
@keyframes ls-sink { to { opacity: 0; transform: translateY(14px); } }
@keyframes ls-out { to { opacity: 0; } }
:root { --ease-out: cubic-bezier(.22, .8, .24, 1); }
.drawer.left:not([hidden]) { animation: ls-from-left .26s var(--ease-out); }
.drawer.right:not([hidden]) { animation: ls-from-right .26s var(--ease-out); }
.drawer.page:not([hidden]), .drawer.wide.page:not([hidden]) { animation: ls-rise .24s var(--ease-out); }
.scrim:not([hidden]) { animation: ls-fade .2s ease; }
.drawer.left.leaving { animation: ls-to-left .2s ease-in forwards; }
.drawer.right.leaving { animation: ls-to-right .2s ease-in forwards; }
.drawer.page.leaving { animation: ls-sink .18s ease-in forwards; }
.scrim.leaving { animation: ls-out .2s ease forwards; }
html.threads-docked #drawerThreads { animation: none; }
/* v96: a layer moved by a swipe is already where it should be: no entrance animation
   (its leaving animation still plays), and a shadow while it is under the finger. */
html .drawer.swiped:not(.leaving):not([hidden]), html .scrim.swiped:not(.leaving):not([hidden]), html #profileView.swiped { animation: none; }
.drawer.dragging, #profileView.dragging { box-shadow: 0 0 32px rgba(0, 0, 0, .4); will-change: transform; }
.model-menu:not([hidden]) { animation: ls-pop .16s var(--ease-out); transform-origin: bottom left; }
.row-menu { animation: ls-pop .14s var(--ease-out); transform-origin: top left; }
.signin-ask:not([hidden]) { animation: ls-fade .2s ease; }
.signin-ask:not([hidden]) .signin-card { animation: ls-rise .26s var(--ease-out); }
@keyframes ls-toast { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.toast { animation: ls-toast .2s var(--ease-out); }
#chat > .msg.fresh { animation: ls-rise .32s var(--ease-out); }   /* v99: only a message just sent or begun, never one a deletion or redraw leaves last */
#chat > .empty { animation: ls-fade .4s ease; }
button, .btn, .icon-btn, .act-icon, .web-toggle, .model-chip, .threads-settings { transition: background-color .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease, transform .1s ease; }
button:active:not(:disabled), .btn:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
#chat > .msg.settled { animation: none; }
/* v89: Lodestone's own question sheet, in place of the browser's confirm(). */
.ask-card { width: min(420px, 100%); max-height: calc(100% - 32px); overflow-y: auto; background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: 18px; padding: 22px 22px 18px; box-shadow: 0 24px 64px rgba(0, 0, 0, .45); display: grid; gap: 10px; }
.ask-card h3 { font-family: var(--font-header); font-weight: 500; font-size: 1.45rem; line-height: 1.25; color: var(--text-heading); margin: 0; }
.ask-card p { margin: 0; color: var(--text-muted); font-size: .93rem; line-height: 1.55; }
.ask-card .ask-lead { color: var(--text); font-size: 1rem; }
.ask-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.ask-btns .btn { min-width: 96px; }
.btn.primary.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.ask-choices { display: grid; gap: 8px; margin-top: 6px; }
.ask-choice { display: grid; gap: 2px; text-align: left; padding: 11px 14px; border: 1px solid var(--border-light); border-radius: 12px; background: var(--bg); color: var(--text); }
.ask-choice b { font-weight: 600; }
.ask-choice span { color: var(--text-muted); font-size: .86rem; line-height: 1.45; }
.ask-choice.yes { border-color: color-mix(in srgb, var(--accent) 55%, var(--border-light)); }
.ask-choice:hover, .ask-choice:focus-visible { background: var(--bg-elevated); outline: none; }
.ask-sheet.leaving { animation: ls-out .18s ease forwards; }

/* v89: a page (Settings, Your path) has one way out, Back, and on a phone its title
   comes first: a bar with Back and the title, then the sections as tabs that scroll,
   fading at the edge so it is plain there are more. */
:is(#drawerSettings, #drawerMe) .page-main > .drawer-head [data-close] { display: none; }
.page-title { display: none; }
@media (max-width: 760px) {
  :is(#drawerSettings, #drawerMe) .page-nav { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; row-gap: 6px; padding: calc(6px + env(safe-area-inset-top)) 6px 8px; }
  :is(#drawerSettings, #drawerMe) .page-nav .page-back { grid-row: 1; grid-column: 1; width: 40px; height: 40px; margin: 0; padding: 0; justify-content: center; font-size: 0; }
  :is(#drawerSettings, #drawerMe) .page-nav .page-back svg { width: 21px; height: 21px; flex-basis: 21px; }
  :is(#drawerSettings, #drawerMe) .page-title { display: block; grid-row: 1; grid-column: 2; text-align: center; font-family: var(--font-header); font-weight: 600; font-size: 1.3rem; color: var(--text-heading); }
  :is(#drawerSettings, #drawerMe) .page-nav-items { grid-row: 2; grid-column: 1 / -1; overflow-x: auto; scrollbar-width: none; padding: 0 4px; -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent); }
  :is(#drawerSettings, #drawerMe) .page-nav-items::-webkit-scrollbar { display: none; }
  :is(#drawerSettings, #drawerMe) .page-nav-items button { border-radius: 999px; }
  :is(#drawerSettings, #drawerMe) .page-nav-foot { display: none; }
  :is(#drawerSettings, #drawerMe) .page-main > .drawer-head { display: none; }
}

/* v89: no box inside a card: the facts of a section read as its own text. */
.settings-body .kv { background: none; border: 0; border-radius: 0; padding: 0 2px; gap: 4px; line-height: 1.5; }
.settings-body .kv b { font-size: .95rem; }

/* v89: the inline marks (a page read, a file, a source) sit on the text's line. */
svg.ico { width: 1.05em; height: 1.05em; flex: none; vertical-align: -0.17em; margin-right: .35em; stroke-width: 1.7; }
.icon-btn > svg.ico, button[data-close] > svg.ico, .lib-back > svg.ico, .more > svg.ico { width: 20px; height: 20px; margin: 0; vertical-align: middle; }
.readings-btn svg.ico { width: 17px; height: 17px; }
button.x > svg.ico, button.lu-x > svg.ico, .attach-bar button > svg.ico { margin: 0; width: 16px; height: 16px; }

/* v98: the two voices told apart at a glance, as in a messaging app: the practitioner's words in a violet bubble with
   white text, Lodestone's answer on a card of its own colour, its tail at the
   sprite. Bold carries weight and the heading colour, so it is seen. */
:root, [data-theme="dark"] { --user-bubble: #6E3393; --user-bubble-text: #ffffff; --answer-card: #1b1b40; --answer-edge: #34346a; }
[data-theme="light"] { --user-bubble: #7B2D8E; --user-bubble-text: #ffffff; --answer-card: #ffffff; --answer-edge: #ddd3ea; }
.msg.user .body, .share-msg.user { color: var(--user-bubble-text); }
.msg.user .body { border-radius: 18px 18px 5px 18px; padding: 10px 14px; }
[dir="rtl"] .msg.user .body { border-radius: 18px 18px 18px 5px; }
.msg.assistant:not(.notice) > .col > .body { background: var(--answer-card); border: 1px solid var(--answer-edge); border-radius: 5px 18px 18px 18px; padding: 12px 15px; box-shadow: 0 1px 2px rgba(40, 20, 60, .07); }
.msg.assistant:not(.notice) > .col > .body.folded { display: none; }
.msg.assistant.crisis > .col > .body { border-left: 3px solid var(--danger); padding-left: 15px; }
.prose strong, .prose b { font-weight: 700; color: var(--text-heading); }
.msg.assistant .actions { padding-left: 6px; }
.msg { margin-bottom: 18px; }
.msg.user.pinned .body, .msg.assistant.pinned > .col > .body { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }
.msg.flash > .col > .body { animation: ls-flash 1.2s ease; }
@keyframes ls-flash { 0%, 40% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 45%, transparent); } 100% { box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .msg.flash > .col > .body { animation: none; } }

/* v98: the pinned message, held at the top of the conversation as Telegram does:
   a tap goes to it (to the next one when several), × unpins. */
.pin-bar { position: sticky; top: -18px; z-index: 3; max-width: 760px; margin: -18px auto 14px; display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--bg-surface); border-bottom: 1px solid var(--border-light); border-left: 3px solid var(--accent); border-radius: 0 0 10px 10px; box-shadow: 0 2px 6px rgba(0,0,0,.08); cursor: pointer; }
.pin-bar .pin-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pin-bar .pin-label { font-size: .72rem; font-weight: 600; letter-spacing: .04em; color: var(--accent-secondary); }
.pin-bar .pin-line { font-size: .9rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pin-bar button { flex: none; background: none; border: 0; color: var(--text-muted); width: 32px; height: 32px; display: grid; place-items: center; border-radius: 999px; }
.pin-bar button:hover { background: var(--bg-elevated); color: var(--text); }
.pin-bar button svg { width: 18px; height: 18px; }

/* v98: on a touch screen a message is held, not selected: a long press opens its
   menu (Copy, Pin, Delete…), as in Telegram; Copy takes the whole message. */
@media (hover: none) { #chat .msg .body { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } }
.msg.held > .col > .body { transform: scale(.985); transition: transform .12s ease; }

/* v99: jump to the latest — a round button above the composer while the reader is
   scrolled up; a dot when something new has arrived below. */
.jump-bottom { position: fixed; z-index: 20; width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; background: var(--bg-surface); color: var(--text); border: 1px solid var(--border-light); box-shadow: 0 4px 14px rgba(0,0,0,.18); animation: ls-pop .16s ease; }
.jump-bottom svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jump-bottom.new::after { content: ""; position: absolute; top: 2px; right: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg-surface); }
.jump-bottom[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .jump-bottom { animation: none; } }

/* v99: a message left without an answer: said in place, with Try again. */
.msg.unanswered .unanswered-card { border: 1px dashed color-mix(in srgb, var(--danger) 55%, var(--border-light)); border-radius: 5px 18px 18px 18px; padding: 11px 14px; background: color-mix(in srgb, var(--danger) 6%, var(--answer-card)); }
.msg.unanswered .unanswered-card p { margin: 0 0 6px; }
.msg.unanswered .unanswered-card .small { font-size: .82rem; }
.msg.unanswered .row-btns { display: flex; gap: 8px; margin-top: 8px; }
.msg.unanswered { padding-left: 50px; }
@media (max-width: 760px) { .msg.unanswered { padding-left: 42px; } }

/* v99: where the day changes. */
.day-sep { max-width: 760px; margin: 6px auto 16px; display: flex; justify-content: center; }
.day-sep span { font-size: .74rem; font-weight: 600; letter-spacing: .02em; color: var(--text-muted); background: var(--bg-elevated); border-radius: 999px; padding: 3px 11px; }
.day-sep span::first-letter { text-transform: uppercase; }

/* v99: an answer still being written shows no actions (they would act on nothing). */
.msg.streaming .actions { display: none; }
.tail-space { flex: none; pointer-events: none; }

/* v99: on a touch screen every control under a message, and in the composer,
   is at least 40 px to the finger, whatever the icon's size. */
@media (pointer: coarse) {
  .msg .actions .act-icon { width: 40px; height: 40px; }
  .msg .actions .act-icon + .act-icon { margin-left: 0; }
  .composer-box .web-toggle, .composer-box .send, .composer-box .talk { min-width: 40px; min-height: 40px; }
}
.msg.assistant .prose code { background: color-mix(in srgb, var(--accent) 14%, transparent); }
/* v99: before the first word. */
.msg .body .thinking { color: var(--text-muted); font-size: .92rem; font-style: italic; animation: ls-breathe 1.6s ease-in-out infinite; }
.msg .body.typing:has(.thinking)::after { content: none; }
@keyframes ls-breathe { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .msg .body .thinking { animation: none; } }
/* v99: Select text, from the held menu. */
#chat .msg .body.selectable { -webkit-user-select: text !important; user-select: text !important; -webkit-touch-callout: default !important; }
/* v99: a start that failed, said as a card with Reload. */
.boot-fail { position: fixed; inset: auto 16px 40% 16px; z-index: 100; background: var(--bg-surface); color: var(--text); border: 1px solid var(--border-light); border-radius: 14px; padding: 18px; box-shadow: 0 12px 32px rgba(0,0,0,.25); }
.boot-fail h3 { margin: 0 0 6px; }
/* v99: the update bar. */
.update-bar { position: fixed; left: 50%; transform: translateX(-50%); top: calc(10px + env(safe-area-inset-top)); z-index: 70; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; background: var(--bg-surface); color: var(--text); border: 1px solid var(--border-light); border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.18); font-size: .9rem; animation: ls-pop .2s ease; max-width: calc(100vw - 32px); }
.update-bar .btn { padding: 5px 12px; border-radius: 999px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* v100: on a phone, a message's menu as a sheet from the foot of the screen. */
.sheet-scrim { position: fixed; inset: 0; z-index: 59; background: rgba(10, 8, 20, .38); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: ls-fade .18s ease; }
.row-menu.sheet, .sheet.leaving { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); top: auto !important; min-width: 0; max-height: 70vh; overflow-y: auto; padding: 6px 6px 8px; border-radius: 18px; box-shadow: 0 -8px 40px rgba(0,0,0,.28); animation: ls-sheet-in .24s cubic-bezier(.2,.9,.3,1); transition: transform .18s ease; z-index: 60; background: var(--bg-surface); border: 1px solid var(--border-light); display: grid; }
.row-menu.sheet button, .sheet.leaving button { min-height: 48px; font-size: 1rem; padding: 10px 14px; gap: 14px; border-radius: 12px; }
.row-menu.sheet button svg { width: 20px; height: 20px; }
.sheet-grip { width: 38px; height: 5px; border-radius: 999px; background: var(--border-light); margin: 4px auto 6px; }
.sheet.leaving { animation: ls-sheet-out .18s ease forwards; }
.sheet-scrim.leaving { animation: ls-fade .18s ease reverse forwards; }
@keyframes ls-sheet-in { from { transform: translateY(105%); } to { transform: none; } }
@keyframes ls-sheet-out { to { transform: translateY(105%); } }
@keyframes ls-fade { from { opacity: 0; } to { opacity: 1; } }
.sheet-preview { margin: 0 8px 6px; padding: 8px 12px; border-radius: 12px; background: var(--bg-elevated); color: var(--text-muted); font-size: .88rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .row-menu.sheet, .sheet.leaving, .sheet-scrim { animation: none; } }

/* v100: reply — the quote above the composer, and inside a message. */
#chat .msg { touch-action: pan-y; }
.reply-bar { display: flex; align-items: center; gap: 6px; padding: 8px 8px 2px 12px; }
.reply-bar[hidden] { display: none; }
.reply-bar .icon-btn { flex: none; width: 32px; height: 32px; }
.reply-bar .icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.reply-quote { display: flex; flex-direction: column; gap: 1px; min-width: 0; text-align: left; border: 0; border-left: 3px solid var(--accent); border-radius: 4px 8px 8px 4px; background: color-mix(in srgb, var(--accent) 9%, transparent); padding: 5px 9px; color: var(--text); font: inherit; cursor: pointer; }
.reply-quote.in-bar { flex: 1; cursor: default; }
.reply-quote b { font-size: .74rem; color: var(--accent-secondary); font-weight: 600; }
.reply-quote span { font-size: .86rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg.user .col > .reply-quote { align-self: flex-end; max-width: 100%; margin-bottom: 4px; }
.msg.assistant .col > .reply-quote { margin-bottom: 4px; }
.msg .col { transition: transform .22s ease; }
.msg.reply-ready > .col > .body { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }

/* v100: search inside a conversation. */
.find-bar { display: flex; align-items: center; gap: 4px; max-width: 800px; width: 100%; margin: 0 auto; padding: 6px 10px; border-bottom: 1px solid var(--border); background: var(--bg); }
.find-bar[hidden] { display: none; }
.find-input { flex: 1; min-width: 0; border: 1px solid var(--border-light); border-radius: 10px; padding: 8px 11px; background: var(--bg-surface); color: var(--text); font: inherit; }
.find-count { font-size: .8rem; color: var(--text-muted); min-width: 3.5em; text-align: center; font-variant-numeric: tabular-nums; }
.find-bar .icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
::highlight(lodestone-find) { background-color: color-mix(in srgb, #f5c542 45%, transparent); color: inherit; }
::highlight(lodestone-find-now) { background-color: #f5c542; color: #1a1a2e; }

/* v100: the iPhone's keyboard open — no home-bar inset under the composer. */
html.kb-open .composer { padding-bottom: 6px !important; }
html.kb-open #app { top: 0; }
.msg .body > .reply-quote { width: 100%; margin: 0 0 6px; white-space: normal; }
.msg.user .body > .reply-quote { background: rgba(255,255,255,.16); border-left-color: rgba(255,255,255,.85); }
.msg.user .body > .reply-quote b, .msg.user .body > .reply-quote span { color: rgba(255,255,255,.92); }
.row-menu.sheet button.del { margin-top: 4px; border-top: 1px solid var(--border); border-radius: 0 0 12px 12px; }