/* manticloud.ai. Tokens and base, then the chat shell; signin.css holds the sign-in page.
   Drawn from the manticloud-ai site mockups (site/chat.html, site/signin.html). */
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/static/fonts/fira-sans-400.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("/static/fonts/fira-sans-500.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("/static/fonts/fira-sans-600.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("/static/fonts/fira-sans-700.woff2") format("woff2"); }
/* Tokens. Light on bare :root; dark is the v2 palette, copied exactly, plus shared extras. */
:root {
  --night: #FBF7EE;
  --chrome: #071A2C;
  --deck: #FFFDF8;
  --deck-2: #EEE5D0;
  --edge: #E3D8C1;
  --cream: #0B1F3B;
  --sand: #33465F;
  --dust: #5F6E82;
  --sky: #1E4D7A;
  --amber: #F6A623;
  --ember: #F05A28;
  --rust: #C83B22;
  --mint: #2C7A50;
  --note: #FCEFD0;
  --font: "Fira Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --side: #F7F2E7;
  --bubble: #F0E7D3;
  --pop: #FFFFFF;
  --field: #FFFFFF;
  --on-chrome: #F6EBD0;
  --on-chrome-dim: #C9BFA8;
  --tint-bad: rgba(200, 59, 34, .07);
  --line-bad: rgba(200, 59, 34, .45);
  --on-accent: #FFFFFF;
  --accent: #C4441A;
  --accent-hover: #A93A15;
  --amber-ink: #8A5300;
  --bad-ink: #A8321C;
  --tint-sky: rgba(30, 77, 122, .09);
  --tint-sky-2: rgba(30, 77, 122, .18);
  --tint-amber: rgba(246, 166, 35, .16);
  --line-amber: rgba(176, 110, 0, .45);
  --tint-mint: rgba(44, 122, 80, .08);
  --line-mint: rgba(44, 122, 80, .4);
  --mark: rgba(246, 166, 35, .38);
  --scrim: rgba(11, 31, 59, .4);
  --drop: rgba(251, 247, 238, .92);
  --toast: #0B1F3B;
  --on-toast: #F6EBD0;
  --focus: #1E4D7A;
  --shadow: 0 18px 40px rgba(11, 31, 59, .14);
  --shadow-soft: 0 4px 16px rgba(11, 31, 59, .06);
  --tone-1: #8DB8DC; --tone-2: #F6A623; --tone-3: #7FD1A4; --tone-4: #F2A39D;
  --on-tone: #0B1F3B;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --night: #06121F; --chrome: #071A2C; --deck: #0C2239; --deck-2: #10294A; --edge: #1D3A5E;
    --cream: #F6EBD0; --sand: #C9BFA8; --dust: #8FA3BD; --sky: #8DB8DC; --amber: #F6A623;
    --ember: #F05A28; --rust: #C83B22; --mint: #7FD1A4; --note: #3A2F12;
    --side: #0A1D33; --bubble: #10294A; --pop: #071A2C; --field: #0C2239;
    --accent: #F05A28; --accent-hover: #D94C1D; --amber-ink: #F6A623; --bad-ink: #F2A39D;
    --tint-sky: rgba(141, 184, 220, .16); --tint-sky-2: rgba(141, 184, 220, .3);
    --tint-amber: rgba(246, 166, 35, .12); --line-amber: rgba(246, 166, 35, .45);
    --tint-mint: rgba(127, 209, 164, .08); --line-mint: rgba(127, 209, 164, .35);
    --mark: rgba(246, 166, 35, .25); --scrim: rgba(2, 8, 15, .6); --drop: rgba(6, 18, 31, .9);
    --toast: #F6EBD0; --on-toast: #0B1F3B; --focus: #F6A623;
    --tint-bad: rgba(242, 163, 157, .08); --line-bad: rgba(242, 163, 157, .5);
    --shadow: 0 20px 50px rgba(0, 0, 0, .5); --shadow-soft: 0 4px 16px rgba(0, 0, 0, .25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --night: #06121F; --chrome: #071A2C; --deck: #0C2239; --deck-2: #10294A; --edge: #1D3A5E;
  --cream: #F6EBD0; --sand: #C9BFA8; --dust: #8FA3BD; --sky: #8DB8DC; --amber: #F6A623;
  --ember: #F05A28; --rust: #C83B22; --mint: #7FD1A4; --note: #3A2F12;
  --side: #0A1D33; --bubble: #10294A; --pop: #071A2C; --field: #0C2239;
  --accent: #F05A28; --accent-hover: #D94C1D; --amber-ink: #F6A623; --bad-ink: #F2A39D;
  --tint-sky: rgba(141, 184, 220, .16); --tint-sky-2: rgba(141, 184, 220, .3);
  --tint-amber: rgba(246, 166, 35, .12); --line-amber: rgba(246, 166, 35, .45);
  --tint-mint: rgba(127, 209, 164, .08); --line-mint: rgba(127, 209, 164, .35);
  --mark: rgba(246, 166, 35, .25); --scrim: rgba(2, 8, 15, .6); --drop: rgba(6, 18, 31, .9);
  --toast: #F6EBD0; --on-toast: #0B1F3B; --focus: #F6A623;
  --tint-bad: rgba(242, 163, 157, .08); --line-bad: rgba(242, 163, 157, .5);
  --shadow: 0 20px 50px rgba(0, 0, 0, .5); --shadow-soft: 0 4px 16px rgba(0, 0, 0, .25);
  color-scheme: dark;
}

[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--night); color: var(--cream); font-family: var(--font); font-size: 16px; line-height: 1.55; overflow: hidden; }
a { color: var(--sky); text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { flex: none; }
.ic { width: 16px; height: 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Shell */
.shell { display: grid; grid-template-columns: 276px minmax(0, 1fr); height: 100%; }

/* Sidebar */
.side { background: var(--side); border-right: 1px solid var(--edge); display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.side-brand { background: var(--chrome); padding: 12px 14px 0 max(14px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; }
.side-brand .row { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; }
.logo { display: flex; align-items: center; gap: 3px; text-decoration: none; color: var(--on-chrome); }
.logo img { width: 58px; height: 32px; display: block; object-fit: contain; }
.logo b { font-family: var(--mono); font-weight: 500; color: var(--amber); font-size: 15px; }
.close-nav { display: none; background: transparent; border: 0; color: var(--on-chrome); padding: 6px; border-radius: 6px; }
.stripe { height: 3px; margin: 0 -14px 0 calc(-1 * max(14px, env(safe-area-inset-left, 0px))); background: linear-gradient(90deg, var(--amber) 0 34%, var(--ember) 34% 67%, var(--rust) 67%); }

.side-top { padding: 12px 10px 6px max(10px, env(safe-area-inset-left, 0px)); display: grid; gap: 8px; position: relative; }
.project { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--deck); border: 1px solid var(--edge); border-radius: 9px; padding: 7px 10px; }
.project:hover { border-color: var(--dust); }
.project .mark { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--chrome); color: var(--amber); font-family: var(--mono); font-size: 12px; font-weight: 500; }
.project .names { display: grid; min-width: 0; line-height: 1.25; flex: 1; }
.project b { font-weight: 600; font-size: 14.5px; }
.project small { font-family: var(--mono); font-size: 11.5px; color: var(--dust); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project svg { color: var(--dust); }
.new-chat { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--accent); color: var(--on-accent); border: 0; border-radius: 9px; padding: 9px 12px; font-weight: 600; font-size: 14.5px; }
.new-chat:hover { background: var(--accent-hover); }

.menu { position: absolute; z-index: 30; background: var(--pop); border: 1px solid var(--edge); border-radius: 11px; box-shadow: var(--shadow); padding: 6px; display: grid; gap: 2px; font-size: 14px; }
.menu .menu-note { font-size: 12.5px; color: var(--dust); padding: 6px 10px 4px; margin: 0; }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: 0; border-radius: 7px; padding: 7px 10px; color: var(--cream); text-decoration: none; }
.menu-item:hover { background: var(--deck-2); }
.menu-item .grow { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.menu-item small { font-family: var(--mono); font-size: 11.5px; color: var(--dust); }
.menu-item .check { color: var(--sky); }
.menu hr { border: 0; border-top: 1px solid var(--edge); margin: 4px 2px; }
#project-menu { top: calc(100% - 46px); left: 10px; right: 10px; }

.side-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 10px 14px max(10px, env(safe-area-inset-left, 0px)); }
.nav { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 1px; }
.nav-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: 0; border-radius: 7px; padding: 7px 10px; color: var(--sand); font-size: 14.5px; }
.nav-item:hover:not(:disabled) { background: var(--deck-2); color: var(--cream); }
.nav-item[aria-current="page"] { background: var(--deck-2); color: var(--cream); font-weight: 500; }
.nav-item svg { color: var(--dust); }
.nav-item .count { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--dust); }
.nav-item:disabled { cursor: default; color: var(--dust); }
.soon { margin-left: auto; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--amber-ink); border: 1px solid var(--line-amber); border-radius: 999px; padding: 0 7px; white-space: nowrap; }
.group { margin: 18px 10px 4px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.group h2 { margin: 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dust); font-weight: 500; }
.group span { font-size: 11.5px; color: var(--dust); }
.threads { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.thread { display: grid; width: 100%; text-align: left; background: transparent; border: 0; border-radius: 7px; padding: 6px 10px; color: var(--sand); line-height: 1.35; }
.thread:hover { background: var(--deck-2); color: var(--cream); }
.thread[aria-current="page"] { background: var(--deck-2); color: var(--cream); }
.t-title { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread[aria-current="page"] .t-title { font-weight: 500; }
.t-meta { font-size: 12px; color: var(--dust); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.side-user { position: relative; border-top: 1px solid var(--edge); padding: 8px 10px max(8px, env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px)); }
.user-btn { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--deck); border: 1px solid var(--edge); border-radius: 9px; padding: 6px 8px; cursor: pointer; }
.user-btn:hover, .side-user[open] > .user-btn { background: var(--deck-2); border-color: var(--dust); }
.user-btn:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.user-btn .grow { display: grid; line-height: 1.3; min-width: 0; flex: 1; }
.user-btn b { font-weight: 600; font-size: 14px; }
.user-btn small { color: var(--dust); font-size: 12.5px; }
.user-btn svg { color: var(--sand); transition: transform .15s; }
.side-user[open] > .user-btn svg { transform: rotate(180deg); }
#user-menu { bottom: calc(100% - 4px); left: 10px; right: 10px; }
.theme-row { padding: 6px 10px 8px; display: grid; gap: 6px; }
.theme-row > span { font-size: 12.5px; color: var(--dust); }
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--edge); border-radius: 8px; padding: 2px; gap: 2px; }
.seg button { background: transparent; border: 0; border-radius: 6px; padding: 4px 6px; font-size: 13px; color: var(--sand); }
.seg button[aria-pressed="true"] { background: var(--deck-2); color: var(--cream); font-weight: 500; }

/* Avatars */
.av { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: 11.5px; font-weight: 600; color: var(--on-tone); background: var(--tone-1); flex: none; }
.av.tone-2 { background: var(--tone-2); } .av.tone-3 { background: var(--tone-3); } .av.tone-4 { background: var(--tone-4); }
.av.ai { background: linear-gradient(180deg, var(--amber), var(--ember) 60%, var(--rust)); position: relative; overflow: hidden; }
.av.ai::after { content: ""; position: absolute; inset: 55% 0 0; background: repeating-linear-gradient(180deg, transparent 0 3px, var(--chrome) 3px 4.5px); opacity: .55; }

/* Main pane */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.head { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px max(16px, env(safe-area-inset-right, 0px)) 8px 20px; border-bottom: 1px solid var(--edge); }
.menu-btn { display: none; background: transparent; border: 1px solid var(--edge); border-radius: 8px; padding: 6px; color: var(--sand); }
.head-title { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.head h1 { font-size: 16px; font-weight: 600; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.badge { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; padding: 1px 8px; border: 1px solid var(--tint-sky-2); color: var(--sky); background: var(--tint-sky); white-space: nowrap; }
.badge.team { color: var(--amber-ink); border-color: var(--line-amber); background: var(--tint-amber); }
.head-meta { font-size: 13px; color: var(--dust); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ghost { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 1px solid var(--edge); color: var(--cream); border-radius: 8px; padding: 6px 11px; font-size: 13.5px; font-weight: 500; white-space: nowrap; text-decoration: none; }
.ghost:hover { border-color: var(--dust); }
.ghost svg { width: 15px; height: 15px; }

.view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.log-wrap { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.log { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; scroll-behavior: smooth; }
.col { width: 100%; max-width: 780px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.msgs { padding-top: 26px; padding-bottom: 28px; }

/* Messages */
.msg { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; margin-bottom: 24px; }
.who { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 13px; color: var(--dust); margin-bottom: 3px; }
.who b { color: var(--cream); font-weight: 600; font-size: 14px; }
.who .model { font-family: var(--mono); font-size: 11px; }
.text { font-size: 15.5px; line-height: 1.65; overflow-wrap: anywhere; }
.text p { margin: 0 0 10px; }
.text p:last-child, .text ul:last-child, .text ol:last-child { margin-bottom: 0; }
.text ul, .text ol { margin: 0 0 10px; padding-left: 22px; }
.text li { margin-bottom: 4px; }
.msg.user .text { background: var(--bubble); border-radius: 12px; padding: 9px 14px; width: fit-content; max-width: 100%; }
.caret::after { content: ""; display: inline-block; width: 7px; height: 15px; background: var(--amber); margin-left: 2px; vertical-align: -2px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.cite { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 5px; margin: 0 1px; border-radius: 5px; background: var(--tint-sky); color: var(--sky); font-size: 11.5px; font-family: var(--mono); border: 0; vertical-align: 1px; line-height: 1; }
.cite:hover, .cite[aria-expanded="true"] { background: var(--tint-sky-2); }
.srcs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.src-chip { display: inline-flex; gap: 6px; align-items: center; background: var(--deck); border: 1px solid var(--edge); border-radius: 7px; color: var(--sand); font-size: 12.5px; padding: 3px 9px; max-width: 100%; }
.src-chip:hover { color: var(--cream); border-color: var(--dust); }
.src-chip .n { font-family: var(--mono); color: var(--sky); }
.src-chip .d { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.mini { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--edge); color: var(--dust); border-radius: 7px; font-size: 12.5px; padding: 3px 9px; }
.mini:hover:not(:disabled) { color: var(--cream); border-color: var(--dust); }
.mini:disabled { cursor: default; color: var(--mint); border-color: var(--line-mint); }
.mini svg { width: 13px; height: 13px; }
.saved { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--mint); background: var(--tint-mint); border: 1px solid var(--line-mint); border-radius: 999px; padding: 2px 10px; }
.saved svg { width: 13px; height: 13px; }
.thinking { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--dust); animation: bob 1s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes bob { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.step { font-family: var(--mono); font-size: 12.5px; color: var(--dust); }


/* Empty state */
.empty { margin: auto; padding: 32px 0 24px; text-align: center; }
.sunmark { width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%; position: relative; overflow: hidden; background: linear-gradient(180deg, var(--amber), var(--ember) 60%, var(--rust)); }
.sunmark::after { content: ""; position: absolute; inset: 50% 0 0; background: repeating-linear-gradient(180deg, transparent 0 5px, var(--night) 5px 8px); }
.empty h2 { font-size: 26px; margin: 0; font-weight: 600; line-height: 1.25; }
.empty > p { color: var(--sand); margin: 8px auto 26px; max-width: 46ch; }
.suggests { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; text-align: left; }
.suggest { width: 100%; height: 100%; text-align: left; background: var(--deck); border: 1px solid var(--edge); border-radius: 11px; padding: 11px 14px; color: var(--sand); font-size: 14.5px; line-height: 1.45; }
.suggest:hover { color: var(--cream); border-color: var(--dust); }

/* Passage card */
.passage { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); width: min(720px, calc(100% - 32px)); z-index: 6; background: var(--pop); border: 1px solid var(--edge); border-radius: 12px; padding: 14px 16px 16px; box-shadow: var(--shadow); font-size: 14.5px; }
.passage header { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.passage header div { display: grid; min-width: 0; }
.passage b { font-size: 14.5px; overflow-wrap: anywhere; }
.passage .where { color: var(--dust); font-size: 12.5px; font-family: var(--mono); }
.passage p { margin: 0; color: var(--sand); line-height: 1.6; }
.passage mark { background: var(--mark); color: var(--cream); padding: 0 2px; border-radius: 3px; }
.x { background: transparent; border: 0; color: var(--dust); padding: 4px; border-radius: 6px; line-height: 0; }
.x:hover { color: var(--cream); }

/* Composer */
.composer { padding: 0 max(16px, env(safe-area-inset-right, 0px)) max(10px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.box { max-width: 780px; margin: 0 auto; background: var(--field); border: 1px solid var(--edge); border-radius: 14px; padding: 8px 8px 8px 12px; box-shadow: var(--shadow-soft); }
.box:focus-within { border-color: var(--sky); }
.ref { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 6px; font-size: 12.5px; color: var(--amber-ink); background: var(--tint-amber); border: 1px solid var(--line-amber); border-radius: 999px; padding: 1px 4px 1px 10px; }
.ref .x { padding: 2px; color: var(--amber-ink); }
.box textarea { display: block; width: 100%; resize: none; background: transparent; border: 0; outline: none; color: var(--cream); font-size: 15.5px; line-height: 1.5; padding: 6px 0; min-height: 40px; max-height: 200px; field-sizing: content; }
.box textarea::placeholder { color: var(--dust); }
.box-row { display: flex; align-items: flex-end; gap: 8px; margin-top: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; flex: 1; min-width: 0; }
.chip { display: inline-flex; align-items: center; gap: 5px; background: transparent; border: 1px solid var(--edge); color: var(--sand); border-radius: 999px; font-size: 12.5px; padding: 3px 9px; white-space: nowrap; }
.chip:hover { border-color: var(--dust); color: var(--cream); }
.chip[aria-pressed="true"] { border-color: var(--sky); color: var(--cream); background: var(--tint-sky); }
.chip svg { width: 12px; height: 12px; }
.chip .state { font-family: var(--mono); font-size: 10.5px; color: var(--dust); }
.chip[aria-pressed="true"] .state { color: var(--sky); }
.chips .sep { display: none; }
.models { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.send { display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: var(--on-accent); border: 0; border-radius: 10px; height: 36px; padding: 0 14px; font-weight: 600; font-size: 14px; }
.send:hover:not(:disabled) { background: var(--accent-hover); }
.send:disabled { opacity: .45; cursor: default; }
.privacy { max-width: 780px; margin: 7px auto 0; font-size: 12.5px; color: var(--dust); text-align: center; display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.privacy svg { width: 13px; height: 13px; }

/* Pages: documents, memory, images */
.page { flex: 1; min-height: 0; overflow-y: auto; }
.page-in { max-width: 880px; margin: 0 auto; padding: 26px max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px)); }
.page-in > h2 { font-size: 22px; margin: 0 0 6px; }
.lead { color: var(--sand); margin: 0 0 6px; max-width: 64ch; }
.aside { color: var(--dust); font-size: 14px; margin: 0 0 22px; max-width: 64ch; }
.rows { list-style: none; margin: 0; padding: 0; border: 1px solid var(--edge); border-radius: 12px; overflow: hidden; background: var(--deck); }
.rows > li + li { border-top: 1px solid var(--edge); }

.view { position: relative; }
.src-head { display: flex; gap: 12px 20px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 18px; }
.src-head > div:first-child { flex: 1 1 320px; min-width: 0; }
.src-head .lead { margin-bottom: 0; }
.acts { display: flex; gap: 8px; flex-wrap: wrap; }
.srcrow { padding: 14px 16px; display: grid; gap: 10px; }
.srcrow-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: start; }
.src-open { background: transparent; border: 0; padding: 0; text-align: left; display: grid; gap: 1px; min-width: 0; border-radius: 6px; }
.src-open:hover .f-name { text-decoration: underline; text-underline-offset: 3px; }
.f-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.f-name { font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.f-path { font-family: var(--mono); font-size: 12px; color: var(--dust); overflow-wrap: anywhere; }
.f-side { display: grid; text-align: right; font-size: 13px; color: var(--sand); }
.f-read { font-size: 12.5px; color: var(--dust); }
.badge.me { color: var(--sky); }
.status { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; font-size: 13.5px; color: var(--sand); }
.status-line { display: inline-flex; align-items: center; gap: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); flex: none; }
.dot.busy { background: var(--amber); }
.stored-note { color: var(--dust); font-size: 12.5px; }
.issue > summary { cursor: pointer; color: var(--amber-ink); font-size: 13px; border-radius: 5px; }
.issue ul { margin: 6px 0 0; padding-left: 18px; color: var(--sand); font-size: 13px; display: grid; gap: 4px; }
.issue b { color: var(--cream); font-weight: 500; }
progress.bar { -webkit-appearance: none; appearance: none; width: 160px; max-width: 100%; height: 6px; border: 0; border-radius: 3px; background: var(--tint-sky); overflow: hidden; vertical-align: middle; }
progress.bar::-webkit-progress-bar { background: var(--tint-sky); border-radius: 3px; }
progress.bar::-webkit-progress-value { background: linear-gradient(90deg, var(--amber), var(--ember)); border-radius: 3px; transition: width .3s; }
progress.bar::-moz-progress-bar { background: linear-gradient(90deg, var(--amber), var(--ember)); border-radius: 3px; }
progress.bar.small { width: 70px; }
.back { margin-bottom: 14px; }
.d-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.d-title h2 { margin: 0; font-size: 20px; overflow-wrap: anywhere; }
.d-title .status { margin-top: 6px; }
.frow { display: grid; grid-template-columns: 46px minmax(0, 1fr) 72px minmax(0, 210px); gap: 2px 12px; align-items: center; padding: 9px 16px; font-size: 13.5px; }
.frow .file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; color: var(--cream); }
.fsize { font-family: var(--mono); font-size: 11.5px; color: var(--dust); text-align: right; white-space: nowrap; }
.fstat { font-size: 12.5px; color: var(--sand); display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.fstat.ready { color: var(--mint); }
.fstat.bad { color: var(--bad-ink); }
.fstat.stored { color: var(--dust); }
.fstat.busy { color: var(--amber-ink); }
.ext { font-family: var(--mono); font-size: 10px; padding: 1px 5px; border-radius: 4px; color: var(--on-tone); font-weight: 500; flex: none; background: var(--tone-1); min-width: 38px; text-align: center; text-transform: lowercase; }
.ext.pdf { background: var(--tone-4); } .ext.docx, .ext.doc { background: var(--tone-1); } .ext.txt, .ext.csv, .ext.html, .ext.htm { background: var(--tone-3); } .ext.other { background: var(--deck-2); color: var(--dust); }
.src-empty { text-align: center; padding: 40px 20px; border: 1px dashed var(--edge); border-radius: 14px; background: var(--deck); }
.src-empty h2 { margin: 0 0 6px; font-size: 20px; }
.src-empty p { margin: 0 auto 18px; max-width: 48ch; color: var(--sand); }
.src-empty .acts { justify-content: center; }
.demo-line { margin: 22px 0 0; font-size: 12.5px; color: var(--dust); font-family: var(--mono); }
.linkish { background: transparent; border: 0; padding: 0; color: var(--sky); text-decoration: underline; text-underline-offset: 2px; font-family: var(--mono); font-size: 12.5px; }
.dropzone { position: absolute; inset: 10px; z-index: 8; border: 2px dashed var(--sky); border-radius: 14px; background: var(--drop); display: grid; place-items: center; text-align: center; pointer-events: none; padding: 16px; }
.dropzone b { display: block; font-size: 17px; margin-bottom: 4px; }
.dropzone span { color: var(--sand); font-size: 14px; }
.d-title p { margin: 2px 0 0; }
.msg.user .text:empty { display: none; }
.hidden-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Attachments */
.atts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin: 2px 0 6px; }
.att-list, .sent-files { display: flex; flex-wrap: wrap; gap: 6px; }
.att, .sent-file { display: inline-flex; align-items: center; gap: 7px; background: var(--deck-2); border: 1px solid var(--edge); border-radius: 8px; padding: 3px 4px 3px 8px; font-size: 12.5px; max-width: 100%; min-width: 0; }
.att svg, .sent-file svg { width: 13px; height: 13px; color: var(--dust); }
.att-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; min-width: 0; }
.att-size { font-family: var(--mono); font-size: 11px; color: var(--dust); white-space: nowrap; }
.att-tag { font-family: var(--mono); font-size: 10.5px; color: var(--amber-ink); white-space: nowrap; }
.att-note { margin: 0; font-size: 12px; color: var(--dust); }
.sent-files { margin-top: 8px; }
.sent-file { background: var(--deck); padding: 5px 6px 5px 9px; font-size: 13px; flex-wrap: wrap; }
.sent-file .mini { padding: 2px 8px; }
.clip { display: inline-grid; place-items: center; width: 28px; height: 26px; background: transparent; border: 1px solid var(--edge); color: var(--sand); border-radius: 999px; }
.clip:hover { color: var(--cream); border-color: var(--dust); }
.clip svg { width: 14px; height: 14px; }

/* Dialog pickers */
dialog.wide { width: min(560px, calc(100% - 32px)); max-width: none; max-height: calc(100% - 32px); overflow-y: auto; }
fieldset { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
fieldset:disabled { opacity: .5; }
legend { font-weight: 600; font-size: 14px; padding: 0; margin-bottom: 6px; }
.pick-list { list-style: none; margin: 0; padding: 4px; display: grid; gap: 2px; max-height: 210px; overflow-y: auto; border: 1px solid var(--edge); border-radius: 10px; background: var(--deck); }
.pick { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: 14px; min-width: 0; }
.pick:hover { background: var(--deck-2); }
.pick:focus-within { outline: 2px solid var(--focus); outline-offset: -2px; }
.pick input { accent-color: var(--sky); margin: 0; flex: none; }
.pick .p-name { min-width: 0; overflow-wrap: anywhere; }
.pick .p-sub { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--dust); white-space: nowrap; }
.pick.depth-1 { padding-left: 32px; } .pick.depth-2 { padding-left: 54px; }
.pick.is-off { cursor: default; color: var(--dust); }
.pick-desc { display: grid; }
.pick-desc small { color: var(--dust); font-size: 12.5px; }
dialog .muted-line { font-size: 13px; color: var(--dust); margin: 0 0 16px; }
.more { font-size: 12.5px; color: var(--dust); padding: 4px 0 0; }

.mem { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; }
.mem > div { flex: 1; min-width: 0; }
.mem-text { margin: 0 0 4px; font-size: 15px; }
.mem-meta { margin: 0; font-size: 12.5px; color: var(--dust); }
.mem-meta b { color: var(--sand); font-weight: 500; }
.empty-row { padding: 18px 16px; color: var(--dust); font-size: 14px; }

.only { font-family: var(--mono); font-size: 10.5px; color: var(--sky); }

/* Toast and dialog */
.toast { position: fixed; left: 50%; bottom: calc(110px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60; background: var(--toast); color: var(--on-toast); border-radius: 10px; padding: 9px 10px 9px 14px; font-size: 14px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow); max-width: calc(100% - 32px); }
.toast button { background: transparent; border: 1px solid currentColor; color: inherit; border-radius: 6px; font-size: 13px; padding: 2px 9px; }
dialog { border: 1px solid var(--edge); border-radius: 14px; background: var(--pop); color: var(--cream); padding: 20px 22px; max-width: min(440px, calc(100% - 32px)); box-shadow: var(--shadow); }
dialog::backdrop { background: var(--scrim); }
dialog h2 { margin: 0 0 8px; font-size: 18px; line-height: 1.3; }
dialog p { margin: 0 0 18px; color: var(--sand); font-size: 15px; }
.dlg-btns { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 7px; border-radius: 8px; padding: 8px 14px; font-weight: 600; font-size: 14px; border: 1px solid transparent; }
.btn-hot { background: var(--accent); color: var(--on-accent); }
.btn-hot:hover { background: var(--accent-hover); }
.scrim { display: none; }

/* Narrow: the sidebar slides in over the pane. */
@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; z-index: 50; top: 0; bottom: 0; left: 0; width: min(300px, 86vw); transform: translateX(-100%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; box-shadow: var(--shadow); }
  .shell[data-nav="open"] .side { transform: none; visibility: visible; transition: transform .2s ease; }
  .shell[data-nav="open"] .scrim { display: block; position: fixed; inset: 0; z-index: 45; background: var(--scrim); }
  .menu-btn, .close-nav { display: inline-grid; place-items: center; }
  .head { padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
  .head-meta { display: none; }
  .share-label { display: none; }
}
@media (max-width: 520px) {
  .suggests { grid-template-columns: minmax(0, 1fr); }
  .empty h2 { font-size: 22px; }
  .chips .sep { display: none; }
  .srcrow-top { grid-template-columns: minmax(0, 1fr); }
  .f-side { text-align: left; }
  .frow { grid-template-columns: 46px minmax(0, 1fr) auto; }
  .fstat { grid-column: 2 / -1; }
  .att { width: 100%; }
  .att-name { flex: 1 1 0%; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .log { scroll-behavior: auto; }
  .side, .shell[data-nav="open"] .side { transition: none; }
  progress.bar::-webkit-progress-value { transition: none; }
}

/* What the server draws beyond the mockup: notices, links standing in for its buttons,
   the native controls behind the chips, and quoted passages. */
.notice { margin: 10px auto 0; max-width: 780px; width: calc(100% - 32px); padding: 9px 14px; border-radius: 10px; border: 1px solid var(--line-mint); background: var(--tint-mint); font-size: 14px; }
.notice.bad { border-color: var(--line-bad); background: var(--tint-bad); }
.off-line { margin: 0 auto 14px; color: var(--sand); font-size: 14px; text-align: center; }
a.new-chat, a.nav-item, a.thread { text-decoration: none; }
.nav-item.is-off { color: var(--dust); }
.t-none { padding: 6px 10px; font-size: 13px; color: var(--dust); }
.side-user > summary { list-style: none; }
.side-user > summary::-webkit-details-marker { display: none; }
.side-user .menu form { margin: 0; }
.chip input { margin: 0; accent-color: var(--sky); }
.chip:has(input:checked) { border-color: var(--sky); color: var(--cream); background: var(--tint-sky); }
.clip { position: relative; cursor: pointer; }
details.src-chip { display: block; }
details.src-chip > summary { display: inline-flex; gap: 6px; cursor: pointer; list-style: none; }
details.src-chip[open] { flex-basis: 100%; }
.quote { margin: 8px 0 4px; color: var(--sand); font-size: 13.5px; line-height: 1.55; white-space: pre-line; }
.quote-where { margin: 0; font-family: var(--mono); font-size: 11.5px; color: var(--dust); }
.refused { margin: 6px 0 0; color: var(--bad-ink); font-size: 14.5px; }
.dot.bad { background: var(--bad-ink); }
.mini.upload { position: relative; cursor: pointer; }
.acts form { margin: 0; }
.sub-head { font-size: 17px; margin: 28px 0 4px; }
dialog .field { display: grid; gap: 6px; margin-bottom: 16px; }
dialog .field > label { font-weight: 600; font-size: 14px; }
dialog .field input[type="text"], dialog .field select { font: inherit; color: var(--cream); background: var(--field); border: 1px solid var(--edge); border-radius: 8px; padding: 8px 10px; }
.foot form { margin: 0; }
.msg .text .notes > :last-child { margin-bottom: 0; }
.mem-text p { margin: 0 0 6px; }