:root {
  /* Two looks (her ask, 2026-11-04: "a light and dark mode. Dark mode shouldn't be purple… the same dark colour as the
     default dark mode of Discord"). Dark = Discord's default dark greys (#313338 page, #2b2d31 bars and cards, #383a40
     controls, blurple accent); light = Discord's light theme. html[data-theme] is set before the first paint by a tiny
     script in index.html, from the device's choice (localStorage "theme": dark | light | system).
     The page says which scheme it is in, so the browser draws its own parts to match (Android's navigation bar under
     the page, select lists, date pickers, scrollbars, autofill). */
  color-scheme: dark;
  --bg: #313338;
  --bg2: #2b2d31;
  --bg3: #383a40;
  --border: #3f4147;
  --text: #dbdee1;
  --muted: #949ba4;
  --accent: #5865f2;
  --accent2: #7983f5;
  --danger: #f23f43;
  --user: #3c3e45;
  --bot: #2b2d31;
  --quote: #f2f3ff;
  --shadow: rgba(0,0,0,.45);
  --backdrop: rgba(0,0,0,.6);
  --radius: 14px;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f3f5;
  --bg2: #ffffff;
  --bg3: #e3e5e8;
  --border: #d7d9dd;
  --text: #313338;
  --muted: #5c5e66;
  --accent: #5865f2;
  --accent2: #4752c4;
  --danger: #da373c;
  --user: #e8eaee;
  --bot: #ffffff;
  --quote: #3038a8;
  --shadow: rgba(0,0,0,.18);
  --backdrop: rgba(0,0,0,.45);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-text-size-adjust: 100%; }
body { overscroll-behavior-y: none; }
a { color: var(--accent2); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 1px solid var(--border); background: var(--bg3); border-radius: 10px; padding: 8px 14px; transition: background .15s, border-color .15s; }
button:hover { border-color: var(--accent2); }
button.primary { background: linear-gradient(135deg, var(--accent), var(--accent2)); border: none; color: #fff; font-weight: 600; }
button.danger { color: var(--danger); }
button.ghost { background: transparent; border-color: transparent; }
button.small { padding: 4px 10px; font-size: 13px; }
button:disabled { opacity: .5; cursor: default; }
input, select, textarea { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--accent2); }
textarea { resize: vertical; min-height: 80px; }
label { display: block; font-size: 13px; color: var(--muted); margin: 14px 0 6px; }
label:first-child { margin-top: 0; }
.hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
.muted { color: var(--muted); }
.hidden { display: none !important; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.grow { flex: 1; }
h1, h2, h3 { margin: 0 0 12px; font-weight: 650; }
h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
.card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.card + .card { margin-top: 14px; }

#app { display: flex; flex-direction: column; height: 100dvh; }
/* The top bar (her ask, 2026-11-04: "Search should be on the middle of the top panel"): brand on the left, the search
   box in the middle, the links and the theme switch on the right. On a desktop it is a three-column grid with equal
   outer columns, so the box sits in the true middle whatever the links weigh. */
#topbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: calc(8px + var(--sat)) 16px 8px; border-bottom: 1px solid var(--border); background: var(--bg2); flex: none; min-width: 0; }
#topbar .search { justify-self: center; }
/* from 1280 px up the box sits in the true middle (the links go compact below 1500 px so all seven fit beside it);
   narrower desktops centre it between the brand and the links instead of scrolling the links */
@media (min-width: 1280px) { #topbar { grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr); } }
/* (the compact-links rule for 641–1499 px is at the end of this file, after the base rules it overrides) */
#topbar .brand { font-weight: 700; color: var(--text); font-size: 16px; flex: none; white-space: nowrap; display: flex; align-items: center; gap: 8px; justify-self: start; }
#topbar .brand-icon { width: 22px; height: 22px; border-radius: 6px; display: block; }
#topbar .search { display: flex; align-items: center; width: clamp(200px, 30vw, 440px); max-width: 100%; min-width: 0; margin: 0; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 0 4px 0 12px; height: 38px; }
#topbar .search:focus-within { border-color: var(--accent2); }
#topbar .search input { flex: 1; min-width: 0; border: none; background: transparent; padding: 0; height: 100%; font-size: 14px; border-radius: 0; -webkit-appearance: none; appearance: none; }
#topbar .search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
#topbar .search button { flex: none; width: 32px; height: 32px; padding: 0; border: none; background: transparent; border-radius: 50%; font-size: 15px; }
#topbar .search button:hover { background: var(--bg3); }
#topbar .bar-end { display: flex; align-items: center; gap: 4px; justify-self: end; min-width: 0; max-width: 100%; }
#topbar nav { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
#topbar nav::-webkit-scrollbar { display: none; }
#topbar nav a { padding: 6px 9px; border-radius: 8px; color: var(--muted); font-size: 14px; white-space: nowrap; flex: none; }
@media (max-width: 1100px) { #topbar nav a { padding: 6px 7px; font-size: 13px; } }
#topbar nav a.active, #topbar nav a:hover { background: var(--bg3); color: var(--text); }
#topbar .icon { width: 38px; height: 38px; padding: 0; font-size: 17px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; }
#topbar .icon:hover { background: var(--bg3); border-color: transparent; }
#topbar #menuBtn { display: none; }
/* The phone's menu: the links sit in a drawer that slides in from the right (the bar holds only the search and ☰). */
#drawer { position: fixed; inset: 0; z-index: 45; }
#drawer .drawer-back { position: absolute; inset: 0; background: var(--backdrop); }
#drawer .drawer-nav { position: absolute; top: 0; right: 0; bottom: 0; width: min(300px, 82vw); background: var(--bg2); border-left: 1px solid var(--border); padding: calc(12px + var(--sat)) 12px calc(16px + var(--sab)); display: flex; flex-direction: column; gap: 4px; overflow-y: auto; box-shadow: -10px 0 30px var(--shadow); }
#drawer .drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; min-height: 38px; }
#drawer .drawer-who { font-weight: 650; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
#drawer .drawer-nav a, #drawer .drawer-nav button { display: flex; align-items: center; gap: 10px; padding: 11px 14px; min-height: 46px; border-radius: 10px; color: var(--text); font-size: 16px; text-align: left; background: transparent; border: none; }
#drawer .drawer-nav a.active { background: var(--bg3); }
#drawer .drawer-nav a:hover, #drawer .drawer-nav button:hover { background: var(--bg3); }
#drawer .drawer-nav button { margin-top: auto; border-top: 1px solid var(--border); border-radius: 0; padding-top: 14px; }
#drawer .icon { width: 38px; height: 38px; padding: 0; font-size: 16px; border-radius: 50%; }
#view { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.page { max-width: 900px; margin: 0 auto; padding: 20px 16px calc(20px + var(--sab)); min-width: 0; overflow-wrap: anywhere; }
.page img, .page svg { max-width: 100%; }
.page pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.loading { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); padding: 60px 20px; }
.spinner { width: 18px; height: 18px; border: 2px solid var(--border); border-top-color: var(--accent2); border-radius: 50%; animation: ccspin .8s linear infinite; flex: none; }
@keyframes ccspin { to { transform: rotate(360deg); } }
.offline { position: fixed; top: calc(8px + var(--sat)); left: 50%; transform: translateX(-50%); z-index: 60; max-width: calc(100vw - 32px); background: #5a1d2b; color: #fff; border: 1px solid var(--danger); border-radius: 10px; padding: 8px 14px; font-size: 13px; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.page.narrow { max-width: 640px; }
.page-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.page-head h1 { margin: 0; flex: 1; }

/* toast */
#toast { position: fixed; left: 50%; bottom: calc(24px + var(--sab)); transform: translateX(-50%); background: var(--bg3); border: 1px solid var(--border); padding: 10px 16px; border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 50; max-width: 90vw; }
#toast.show { opacity: 1; }
#toast.error { border-color: var(--danger); }
/* In-app ping (her ask, 2026-11-04): a text landed while she was elsewhere in the app. Above windows (40) and the toast
   (50), under the connection banner (60); it waits off the top of the screen until it has something to say. */
.tx-ping { position: fixed; top: calc(8px + var(--sat)); left: 50%; transform: translate(-50%, -140%); width: min(440px, calc(100vw - 24px)); z-index: 55; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; background: var(--bg3); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.45); cursor: pointer; opacity: 0; transition: transform .25s ease, opacity .25s; }
.tx-ping.show { transform: translate(-50%, 0); opacity: 1; }
.tx-ping .pav { width: 38px; height: 38px; font-size: 16px; }
.tx-ping-body { flex: 1; min-width: 0; }
.tx-ping-who { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-ping-who .pill { margin-left: 6px; }
.tx-ping-text { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-ping-x { flex: none; width: 36px; height: 36px; padding: 0; border-radius: 50%; font-size: 15px; }
.page-head .bell { font-size: 18px; padding: 4px 10px; min-height: 36px; min-width: 40px; }

/* modal */
.modal { position: fixed; inset: 0; background: var(--backdrop); display: flex; align-items: center; justify-content: center; z-index: 40; padding: 16px; }
.modal .card { width: 100%; max-width: 420px; max-height: 90vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* the sign-in as the opening page (2026-10-24): the app stays out of sight until someone has signed in */
body.signin #topbar, body.signin #view, body.signin #toast { display: none; }
body.signin #login { background: var(--bg); }
#login .signin-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; margin-bottom: 14px; }
#login .signin-brand .brand-icon { width: 28px; height: 28px; }
#login input { margin-bottom: 10px; }
#login .signin-switch { text-align: center; margin: 12px 0 0; font-size: 14px; }
#login .signin-switch a { color: var(--accent); text-decoration: underline; padding: 6px 2px; display: inline-block; }
/* on a phone the other windows are sheets at the bottom; the opening page sits in the middle of the screen */
@media (max-width: 640px) { body.signin #login { align-items: center; } body.signin #login .card { border-radius: 16px; } }
.modal .card.wide { max-width: 680px; }
.scroll-box { max-height: 40vh; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; padding: 4px 10px; background: var(--bg); }
/* a tall window's Cancel / Save stay in view while its body scrolls (the link editor on a phone, 2026-11-02) */
.modal .card .sticky-actions { position: sticky; bottom: 0; margin: 12px -2px 0; padding: 10px 2px 6px; background: inherit; }
.modal .card input, .modal .card select, .modal .card textarea { margin-bottom: 10px; }

/* characters grid */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.char-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; cursor: pointer; transition: transform .12s, border-color .15s; display: flex; flex-direction: column; }
.char-card:hover { transform: translateY(-2px); border-color: var(--accent2); }
.avatar { width: 100%; aspect-ratio: 3/4; object-fit: cover; background: var(--bg3); display: block; }
.avatar.placeholder { display: flex; align-items: center; justify-content: center; font-size: 42px; color: var(--muted); }
.char-card .body { padding: 10px 12px 12px; }
.char-card .name { font-weight: 650; }
.char-card .tagline { color: var(--muted); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.tag { font-size: 11px; background: var(--bg3); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; color: var(--muted); }
.empty { text-align: center; color: var(--muted); padding: 60px 20px; }

/* folders and shortcuts on the Characters page */
.sect { font-size: 15px; color: var(--muted); font-weight: 600; margin: 18px 0 10px; }
.sect:first-of-type { margin-top: 4px; }
.shortcuts { display: flex; gap: 10px; flex-wrap: wrap; }
.shortcut { display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--bg2); border: 1px solid var(--border); max-width: 100%; }
.shortcut:hover { border-color: var(--accent); }
.shortcut .pav { width: 38px; height: 38px; }
.shortcut span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; font-size: 14px; }
.folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
@media (max-width: 640px) { .page-head.many h1 { flex: 1 1 100%; } }
.folder-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 14px; border-radius: var(--radius); background: var(--bg2); border: 1px solid var(--border); min-width: 0; }
.folder-tile:hover { border-color: var(--accent2); }
.folder-tile .fname { font-weight: 650; font-size: 15px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-tile .fcount { font-size: 12px; color: var(--muted); }
.folder-tile .fpeek { display: flex; margin-top: 6px; min-height: 26px; }
.folder-tile .fpeek .pav { margin-right: -6px; border: 2px solid var(--bg2); }
/* The Characters page's folders, big (her ask, 2026-10-28: "the folders should be bigger on the screen" and the
   unfiled characters "lower down"). The archive's and a character's chat folders keep the small tiles. */
.folders.big { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.folders.big .folder-tile { padding: 18px 18px 16px; min-height: 116px; }
.folders.big .fname { font-size: 19px; }
.folders.big .fcount { font-size: 13px; }
.folders.big .fpeek { margin-top: 10px; min-height: 38px; }
.folders.big .fpeek .pav, .folders.big .fpeek .pav.xs { width: 38px; height: 38px; margin-right: -8px; }
h2.sect.sect-unfiled { margin-top: 34px; }
.char-card { position: relative; }
.card-org { position: absolute; top: 6px; right: 6px; z-index: 2; width: 32px; height: 32px; padding: 0; border-radius: 50%; border: none; background: rgba(0,0,0,.55); color: #fff; font-size: 15px; line-height: 1; }
.card-org:hover { background: rgba(0,0,0,.8); border: none; }
label.tick { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; color: var(--text); font-size: 15px; margin: 10px 0; }
label.tick input, .modal .card label.tick input { width: auto; margin: 3px 0 0; flex: none; }
a.chip { text-decoration: none; }

/* character profile */
.profile { display: grid; grid-template-columns: 200px 1fr; gap: 20px; }
.profile .avatar { border-radius: var(--radius); aspect-ratio: 3/4; }
.profile .desc { white-space: pre-wrap; color: var(--muted); font-size: 14px; max-height: 240px; overflow: auto; }
.chat-list .item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg2); margin-top: 8px; cursor: pointer; }
.chat-list .item:hover { border-color: var(--accent2); }
.chat-list .item .title { font-weight: 600; }
.chat-list .item .meta { font-size: 12px; color: var(--muted); }
.chat-list .item .preview { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Chat labels: a small tag on a chat's row, and the row highlighted in the tag's colour. */
.lab-pink { --lab: #e879a8; } .lab-red { --lab: #e5484d; } .lab-orange { --lab: #f08c3a; } .lab-yellow { --lab: #d9b216; } .lab-green { --lab: #46a758; }
.lab-teal { --lab: #12a594; } .lab-blue { --lab: #4a90e2; } .lab-purple { --lab: #9b6cf2; } .lab-grey { --lab: #8b8d98; }
.chat-list .item.labelled { border-left: 4px solid var(--lab); background: color-mix(in srgb, var(--lab) 10%, var(--bg2)); }
.chat-label { display: inline-block; font-size: 11px; font-weight: 650; line-height: 1.6; border-radius: 999px; padding: 0 8px; margin-left: 6px; vertical-align: middle; background: var(--lab); color: #fff; border: none; white-space: nowrap; }
.chat-label.lab-yellow { color: #2b2300; }
button.chat-label.pick { cursor: pointer; margin-left: 0; padding: 3px 11px; font-size: 12px; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.swatch { width: 28px; height: 28px; border-radius: 50%; background: var(--lab); border: 2px solid transparent; padding: 0; }
.swatch.on { border-color: var(--text); box-shadow: inset 0 0 0 2px var(--bg2); }
/* ⋮ on a chat row: a small menu to label or archive the chat without opening it. */
.chat-list .item { position: relative; }
.row-more { font-size: 18px; line-height: 1; padding: 4px 10px; }
.row-menu { position: absolute; right: 44px; top: calc(100% - 10px); background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; z-index: 20; min-width: 170px; box-shadow: 0 10px 30px rgba(0,0,0,.4); cursor: default; }
.row-menu button { display: block; width: 100%; text-align: left; background: transparent; border: none; border-radius: 0; padding: 11px 14px; color: var(--text); font-size: 14px; }
.row-menu button:hover { background: var(--bg2); }
/* Behind an open row menu: takes every click outside the menu, so a missed click only closes the menu. */
.row-menu-back { position: fixed; inset: 0; z-index: 19; background: transparent; }
/* Chat folders inside a character's page (the same tiles as the Characters page) and roleplays pinned to the front page. */
.chat-folders { margin: 10px 0 4px; }
.chats-head { display: flex; align-items: center; gap: 10px; margin-top: 22px; }
.chats-head h2 { margin: 0; flex: 1; min-width: 0; }
@media (pointer: coarse) { .chats-head button { min-height: 40px; padding: 8px 12px; font-size: 14px; } }
/* gallery (2026-10-23): a character's labelled reference pictures, attached to lorebook groups */
.gal-empty { margin: 6px 0 0; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-top: 10px; }
.gal-tile { position: relative; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg2); aspect-ratio: 1; min-width: 0; }
.gal-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-tile .gal-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 6px 5px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.78)); color: #fff; font-size: 12px; line-height: 1.25; text-align: left; display: flex; flex-direction: column; gap: 1px; }
.gal-tile .gal-cap b, .gal-tile .gal-cap i { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gal-tile .gal-cap i { font-style: normal; opacity: 0.8; font-size: 11px; }
.gal-tile .gal-cap i.warn { color: #ffb4a2; }
.gal-view { display: block; max-width: 100%; max-height: 40vh; margin: 0 auto 10px; border-radius: var(--radius); object-fit: contain; }
@media (max-width: 420px) { .gal-head { flex-wrap: wrap; } .gal-head h2 { flex-basis: 100%; } }
.gallery.folded { max-height: 128px; overflow: hidden; }
.gal-more { margin-top: 8px; }
.pic-view { display: block; max-width: 100%; max-height: 75vh; margin: 0 auto; border-radius: var(--radius); object-fit: contain; }
.pics-grid .pic-open { padding: 0; border: 0; background: none; cursor: zoom-in; }
@media (pointer: coarse) { .pic-preview img { width: 72px; height: 72px; } .pic-preview .pv button { width: 30px; height: 30px; top: -8px; right: -8px; font-size: 14px; } .pic-preview { padding-top: 10px; } }
@media (max-width: 640px) { .composer .bar { gap: 5px; } }
/* five round buttons beside the persona chip at 320 px: a touch smaller (still ≥ 36 px) so the chip keeps its name */
@media (max-width: 360px) { .composer .bar { gap: 4px; } .composer .bar .sparkle { width: 38px; min-width: 38px; height: 38px; padding: 0; } }
/* the strip's picker (▾) never scrolls out of reach: with ✦ 📱 ＋ ↑ beside it the strip is narrow on a phone */
.persona-strip .persona-mini[data-p="pick"] { position: sticky; right: 0; z-index: 1; background: var(--bg2); box-shadow: -6px 0 6px var(--bg2); }
.pins { display: flex; flex-direction: column; gap: 8px; }
.pin-row { display: flex; align-items: center; gap: 12px; padding: 9px 10px 9px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg2); cursor: pointer; position: relative; }
.pin-row:hover { border-color: var(--accent); }
.pin-row .pav { width: 38px; height: 38px; flex: none; }
.pin-row .title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pin-row .meta { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pin-row.labelled { border-left: 4px solid var(--lab); background: color-mix(in srgb, var(--lab) 10%, var(--bg2)); }
.pin-row [data-unpin] { flex: none; min-width: 36px; min-height: 36px; font-size: 16px; }

/* editor */
.editor-grid { display: grid; grid-template-columns: 180px 1fr; gap: 20px; }
.editor-grid .avatar { border-radius: var(--radius); cursor: pointer; }
.alt-greeting { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; }
.alt-greeting textarea { min-height: 60px; }

.lore-entry { border: 1px solid var(--border); border-radius: 10px; padding: 10px; margin-top: 8px; background: var(--bg); }
.lore-entry textarea { min-height: 60px; }
.warn-badge { font-size: 10px; color: var(--danger); border: 1px solid var(--danger); border-radius: 999px; padding: 0 6px; vertical-align: middle; font-weight: 500; }

/* personas */
.persona-row { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg2); margin-top: 8px; cursor: pointer; }
.persona-row:hover { border-color: var(--accent2); }
.persona-row.selected { border-color: var(--accent2); background: var(--bg3); }
.pav { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--bg3); flex: none; }
.pav.placeholder { display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--muted); }
.pav.big { width: 84px; height: 84px; cursor: pointer; font-size: 30px; }
.pav.xs { width: 26px; height: 26px; font-size: 12px; }
.persona-row .desc { font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pill { font-size: 11px; border: 1px solid var(--border); border-radius: 999px; padding: 0 7px; color: var(--muted); margin-left: 6px; vertical-align: middle; font-weight: 500; }
.pill.default { color: var(--accent); border-color: var(--accent); }
.persona-chip { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 10px; border-radius: 10px; background: var(--bg3); border: 1px solid var(--border); max-width: 150px; flex: none; }
.persona-chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
/* several personas at once: a strip of small chips in place of the single chip (scrolls sideways when there are many) */
.persona-strip { display: flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; max-width: 62%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.persona-strip::-webkit-scrollbar { display: none; }
.persona-mini { display: flex; align-items: center; gap: 5px; height: 36px; padding: 0 9px; border-radius: 999px; background: var(--bg3); border: 1px solid var(--border); flex: none; font-size: 12px; max-width: 120px; color: var(--muted); }
.persona-mini span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.persona-mini.on { border-color: var(--accent2); background: var(--bg2); color: var(--text); }
.persona-mini.all { font-weight: 600; }
.persona-mini.all.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.persona-mini.pick { padding: 0 8px; }
@media (max-width: 640px) {
  .persona-strip { max-width: none; }
  .persona-mini { height: 40px; padding: 0 7px; }
  .persona-mini:not(.all):not(.pick) span { display: none; } /* faces only on a phone; the chosen one is outlined */
}
.cast-bar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 6px 12px; border-bottom: 1px solid var(--border); background: var(--bg2); font-size: 12px; color: var(--muted); flex: none; }
.chip { display: inline-flex; align-items: center; gap: 4px; background: var(--bg3); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; font-size: 12px; color: var(--text); cursor: default; }
.chip button { background: none; border: none; padding: 0 2px; color: var(--muted); font-size: 12px; }
.chip button:hover { color: var(--danger); }
.msg .bubble { position: relative; }
.msg-menu { position: absolute; right: 8px; bottom: 34px; background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; z-index: 15; min-width: 190px; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.msg-menu button { display: block; width: 100%; text-align: left; background: transparent; border: none; border-radius: 0; padding: 9px 12px; color: var(--text); font-size: 13px; }
.msg-menu button:hover { background: var(--bg2); }
input[type=range] { padding: 0; height: 28px; accent-color: var(--accent); }
.prompt-row { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); margin-top: 8px; cursor: pointer; }
.prompt-row.active { border-color: var(--accent2); }
.link-row { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); margin-top: 8px; }
/* ---------- phones ---------- */
@media (max-width: 640px) {
  .persona-chip { max-width: 96px; padding: 0 8px; height: 40px; }
  .persona-chip span.muted { display: none; }
  .composer { padding: 6px 8px calc(8px + var(--sab)); }
  .composer .box { padding: 4px 6px 6px; }
  .composer textarea { min-height: 44px; font-size: 16px; }
  .composer .sparkle, .composer .send { width: 42px; height: 42px; }
  .persona-chip { max-width: 150px; height: 40px; }
  .modal { padding: 8px; align-items: flex-end; }
  .modal .card, .modal .card.wide { max-width: 100%; max-height: 92vh; padding: 14px; border-radius: 16px 16px 0 0; }
  .persona-row { flex-wrap: wrap; }
  .persona-row > .row { width: 100%; justify-content: flex-end; }
  .msg .actions button { padding: 6px 9px; font-size: 15px; }
  .msg .actions .pager button { font-size: 20px; padding: 4px 10px; }
  .msg-menu { right: 4px; left: 4px; bottom: 40px; min-width: 0; }
  .msg-menu button { padding: 12px 14px; font-size: 14px; }
  .menu { right: 8px; left: 8px; top: 52px; }
  .menu button { padding: 12px 14px; }
  .chat-head { padding: 6px 8px; gap: 8px; }
  .chat-head .mini { width: 34px; height: 34px; }
  .chat-head select { max-width: 104px; font-size: 12px; }
  .cast-bar { padding: 5px 8px; }
  .page-head h1 { width: 100%; }
  .page-head { gap: 8px; }
  .page-head button { padding: 7px 10px; font-size: 13px; }
  .scroll-box { max-height: 45vh; }
  .prompt-row { flex-wrap: wrap; }
  .lore-entry .row { flex-wrap: wrap; }
  input[type=range] { min-width: 0; }
  .qr svg { width: 160px; height: 160px; }
}
.persona { display: flex; gap: 12px; align-items: flex-start; }
.persona .badge { font-size: 11px; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 1px 8px; margin-left: 8px; }

/* settings */
.models-list .model { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.models-list .model:last-child { border-bottom: none; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; }
.dot.ok { background: #5fd39a; }
.dot.no { background: var(--danger); }
.qr { background: #fff; border-radius: 12px; padding: 10px; display: inline-block; }
.qr svg { display: block; width: 200px; height: 200px; }
code { background: var(--bg3); padding: 2px 6px; border-radius: 6px; font-size: 13px; }

/* chat */
.chat { display: flex; flex-direction: column; height: 100%; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--bg2); flex: none; }
.chat-head .mini { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: var(--bg3); flex: none; }
.chat-head .who { min-width: 0; flex: 1; }
.chat-head .who .name { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-head .who .sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-head select { width: auto; max-width: 180px; padding: 6px 8px; font-size: 13px; }
.messages { flex: 1; overflow-y: auto; padding: 16px 12px; display: flex; flex-direction: column; gap: 14px; -webkit-overflow-scrolling: touch; }
.msg { display: flex; gap: 10px; max-width: 860px; width: 100%; margin: 0 auto; }
.msg .mini { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--bg3); flex: none; margin-top: 2px; }
.msg .mini.placeholder { display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--muted); }
.msg .bubble { flex: 1; min-width: 0; background: var(--bot); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; }
.msg.user .bubble { background: var(--user); }
.msg .head { display: flex; align-items: baseline; gap: 8px; font-size: 13px; margin-bottom: 4px; }
.msg .head .name { font-weight: 650; }
.msg .head .model { color: var(--muted); font-size: 11px; }
.msg .content { white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; }
.msg .content i { color: var(--accent2); font-style: italic; }
.msg .content .q { color: var(--quote); }
/* Discord-style code: ```blocks``` and `inline` show exactly as typed, monospace on a darker panel; blocks wrap so nothing scrolls sideways on a phone */
.msg .content pre { background: var(--bg); border: 1px solid var(--border); padding: 8px 10px; border-radius: 6px; margin: 6px 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.45 ui-monospace, Consolas, "Cascadia Mono", Menlo, monospace; }
.msg .content code { background: var(--bg); border: 1px solid var(--border); padding: 1px 5px; border-radius: 4px; font: 0.9em ui-monospace, Consolas, "Cascadia Mono", Menlo, monospace; overflow-wrap: anywhere; }
.msg .content pre:first-child { margin-top: 0; }
.msg .content pre:last-child { margin-bottom: 0; }
/* Discord-style quotes: "> line" and ">>> the rest", a grey bar down the left */
.msg .content blockquote { margin: 4px 0; padding: 1px 0 1px 12px; border-left: 4px solid var(--muted); border-radius: 2px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg .content blockquote:first-child { margin-top: 0; }
.msg .content blockquote:last-child { margin-bottom: 0; }
/* the rest of Discord's shorthand: headers, subtext, lists, underline, strikethrough, masked links, spoilers */
.msg .content h1, .msg .content h2, .msg .content h3 { margin: 6px 0 2px; line-height: 1.25; font-weight: 700; }
.msg .content h1 { font-size: 1.45em; } .msg .content h2 { font-size: 1.25em; } .msg .content h3 { font-size: 1.1em; }
.msg .content h1:first-child, .msg .content h2:first-child, .msg .content h3:first-child { margin-top: 0; }
.msg .content .sub { font-size: 0.8em; color: var(--muted); }
.msg .content ul, .msg .content ol { margin: 2px 0; padding-left: 22px; }
.msg .content ul ul, .msg .content ul ol, .msg .content ol ul, .msg .content ol ol { margin: 0; }
.msg .content li { margin: 1px 0; }
.msg .content u { text-decoration: underline; }
.msg .content s { text-decoration: line-through; }
.msg .content a { color: var(--accent2); text-decoration: underline; overflow-wrap: anywhere; }
.msg .content .spoiler { background: var(--muted); border-radius: 4px; padding: 0 2px; cursor: pointer; user-select: none; transition: background .15s; }
.msg .content .spoiler:not(.open), .msg .content .spoiler:not(.open) * { color: transparent !important; }
.msg .content .spoiler.open { background: var(--bg3); user-select: text; }
.msg .content.streaming::after { content: "▍"; color: var(--accent); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: 0; } }
.typing { color: var(--muted); font-style: italic; }
.typing .dots::after { content: ""; animation: dots 1.2s steps(4, end) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.msg .actions { display: flex; gap: 2px; margin-top: 6px; align-items: center; opacity: .55; transition: opacity .15s; flex-wrap: wrap; }
.msg:hover .actions, .msg:focus-within .actions { opacity: 1; }
.msg .actions button { background: transparent; border: none; padding: 3px 7px; color: var(--muted); font-size: 13px; border-radius: 6px; }
.msg .actions button:hover { background: var(--bg3); color: var(--text); }
.msg .actions .swipe { font-size: 12px; color: var(--muted); margin: 0 2px; }
.msg .edit textarea { min-height: 100px; margin-bottom: 8px; }
.notice { text-align: center; font-size: 12px; color: var(--muted); max-width: 860px; margin: 0 auto; padding: 0 12px; }
.notice.error { color: var(--danger); }
.composer { flex: none; background: var(--bg2); padding: 8px 12px calc(10px + var(--sab)); }
.composer .box { max-width: 860px; margin: 0 auto; border: 1px solid var(--accent2); border-radius: 14px; background: var(--bg3); padding: 6px 8px 6px; box-shadow: 0 0 0 1px rgba(88,101,242,.18); }
.composer textarea { width: 100%; min-height: 40px; max-height: 40vh; resize: none; padding: 8px 8px 4px; background: transparent; border: none; border-radius: 0; font-size: 15px; }
.composer textarea:focus { border: none; }
.composer .bar { display: flex; align-items: center; gap: 8px; padding: 2px 0 0; }
.composer .sparkle { width: 38px; height: 38px; padding: 0; font-size: 20px; color: var(--accent2); flex: none; border-radius: 10px; }
.composer .sparkle:hover { background: var(--bg2); color: var(--accent); }
.composer .send { width: 38px; height: 38px; min-width: 0; padding: 0; font-size: 18px; border-radius: 10px; flex: none; }
.composer .stop { height: 38px; min-width: 60px; color: var(--danger); flex: none; }
.persona-chip { height: 36px; }
/* Her narrator voice: direction out of character, hidden behind a grey bar until poked (tap the head to fold it again). */
.msg.narr .bubble { background: var(--bg3); border-style: dashed; }
.msg.narr .head { cursor: pointer; }
.msg.narr .head .name::before { content: "🎬 "; }
.msg.narr .head::after { content: "fold"; margin-left: auto; font-size: 11px; color: var(--muted); }
.msg.narr.closed { align-items: center; cursor: pointer; }
.msg.narr.closed .mini, .msg.narr.closed .head, .msg.narr.closed .content, .msg.narr.closed .actions, .msg.narr.closed .tx-marker, .msg.narr.closed .pics { display: none; }
.msg.narr.closed .bubble { padding: 0; height: 14px; min-height: 14px; background: var(--border); border: none; border-radius: 7px; }
.msg.narr.closed .bubble:hover { background: var(--muted); }
.mini.placeholder.narr, .pav.placeholder.narr { font-size: 18px; }
.persona-chip.narr, .persona-mini.narr.on { border-color: var(--accent2); border-style: dashed; }
.persona-row.narr-row { display: flex; gap: 10px; align-items: center; }
.msg .actions .pager { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; }
.msg .actions .pager button { font-size: 18px; line-height: 1; padding: 2px 8px; }
.msg .actions .pager button:disabled { opacity: .3; }
.msg .actions button[data-act="continue"] { font-size: 15px; }

/* menu */
.menu { position: absolute; right: 12px; top: 56px; background: var(--bg3); border: 1px solid var(--border); border-radius: 12px; overflow: hidden auto; z-index: 20; min-width: 200px; box-shadow: 0 10px 30px rgba(0,0,0,.4); max-height: calc(100dvh - 72px); overscroll-behavior: contain; } /* a long menu scrolls inside the screen instead of running off the bottom of a phone */
.menu button { display: block; width: 100%; text-align: left; background: transparent; border: none; border-radius: 0; padding: 10px 14px; }
/* "Unsaved text from before was brought back" under the rules / lore box */
.draft-note { margin-top: 6px; padding: 6px 10px; border-radius: 8px; background: var(--bg3); color: var(--text); }
.draft-note a { margin-left: 4px; text-decoration: underline; }
.menu button:hover { background: var(--bg2); }

/* ---------- texts (phone conversations) ---------- */
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; flex: none; background: var(--bg); }
.seg button { border: none; border-radius: 0; background: transparent; padding: 6px 11px; font-size: 13px; color: var(--muted); }
.seg button.on { background: var(--bg3); color: var(--text); font-weight: 600; }
.tx-chips { gap: 6px; margin: -4px 0 8px; }
.tx-chips:empty { display: none; }
.chat-list .item .pav { flex: none; }
.composer .sparkle.phone { font-size: 19px; display: inline-flex; align-items: center; justify-content: center; }
.phone-ic { vertical-align: -0.18em; flex: none; }
/* A text thread pinned to a roleplay message: a small button under that message. */
.tx-marker { display: block; width: 100%; margin-top: 8px; text-align: left; font-size: 13px; padding: 7px 10px; border-radius: 10px; background: var(--bg3); border: 1px dashed var(--accent2); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-info { padding: 8px 14px 6px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--border); }

/* The phone. Base = ordinary texting (iMessage look, dark); the other apps and the light looks override the variables. */
.tx { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--tx-bg); color: var(--tx-text);
  --tx-bg: #000; --tx-text: #fff; --tx-head: #1c1c1e; --tx-head-text: #fff; --tx-in: #26252a; --tx-in-text: #fff; --tx-out: #0a84ff; --tx-out-text: #fff;
  --tx-meta: #8e8e93; --tx-accent: #0a84ff; --tx-field: #1c1c1e; --tx-field-border: #3a3a3c; --tx-radius: 19px; --tx-tick: #53bdeb;
  --tx-font: -apple-system, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, system-ui, sans-serif; }
.tx[data-platform="sms"][data-look="light"] { --tx-bg: #fff; --tx-text: #000; --tx-head: #f6f6f6; --tx-head-text: #000; --tx-in: #e9e9eb; --tx-in-text: #000; --tx-out: #007aff; --tx-out-text: #fff; --tx-accent: #007aff; --tx-field: #fff; --tx-field-border: #c7c7cc; }
.tx[data-platform="whatsapp"] { --tx-bg: #0b141a; --tx-text: #e9edef; --tx-head: #202c33; --tx-head-text: #e9edef; --tx-in: #202c33; --tx-in-text: #e9edef; --tx-out: #005c4b; --tx-out-text: #e9edef;
  --tx-meta: #8696a0; --tx-accent: #00a884; --tx-field: #2a3942; --tx-field-border: transparent; --tx-radius: 9px; --tx-font: "Segoe UI", Roboto, "Helvetica Neue", system-ui, sans-serif; }
.tx[data-platform="whatsapp"][data-look="light"] { --tx-bg: #efeae2; --tx-text: #111b21; --tx-head: #008069; --tx-head-text: #fff; --tx-in: #fff; --tx-in-text: #111b21; --tx-out: #d9fdd3; --tx-out-text: #111b21; --tx-meta: #667781; --tx-field: #fff; }
.tx[data-platform="line"] { --tx-bg: #1b1e24; --tx-text: #fff; --tx-head: #1b1e24; --tx-head-text: #fff; --tx-in: #30343c; --tx-in-text: #fff; --tx-out: #5ac463; --tx-out-text: #0c1a10;
  --tx-meta: #9aa0aa; --tx-accent: #06c755; --tx-field: #2a2e36; --tx-field-border: transparent; --tx-radius: 19px; --tx-font: "Hiragino Sans", "Noto Sans", "Segoe UI", Roboto, system-ui, sans-serif; }
.tx[data-platform="line"][data-look="light"] { --tx-bg: #8cabd9; --tx-text: #111; --tx-head: #8cabd9; --tx-head-text: #fff; --tx-in: #fff; --tx-in-text: #111; --tx-out: #8de055; --tx-out-text: #111; --tx-meta: #eef3fa; --tx-field: #fff; }

.tx-head { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: var(--tx-head); color: var(--tx-head-text); flex: none; }
.tx-head > button.ghost { color: var(--tx-head-text); font-size: 20px; padding: 4px 10px; }
.tx-head .tx-contact { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; background: transparent; border: none; padding: 2px 4px; color: inherit; text-align: left; border-radius: 10px; }
.tx-head .mini { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: var(--bg3); flex: none; display: block; }
.tx-head .mini.placeholder { display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--muted); }
.tx-head .who { min-width: 0; flex: 1; display: block; }
.tx-head .who .name { display: block; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--tx-font); }
.tx-head .who .sub { display: block; font-size: 12px; opacity: .7; min-height: 0; }
.tx-head .who .sub:empty { display: none; }
.tx-bar { display: flex; gap: 8px; align-items: center; padding: 6px 10px; background: var(--bg2); border-bottom: 1px solid var(--border); flex: none; color: var(--text); }
.tx-bar select { flex: 1; min-width: 0; width: auto; padding: 6px 8px; font-size: 13px; }
/* where a compacted chat was cut, and the peek at a text that just came in during a roleplay */
.compact-mark { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 4px 0; padding: 6px 10px; border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border); color: var(--muted); font-size: 12px; text-align: center; }
.tx .compact-mark { color: inherit; opacity: .75; border-color: rgba(127,127,127,.4); }
.tx-peek { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 10px 0; }
.tx-peek > div { max-width: 100%; padding: 8px 12px; border-radius: 16px; background: var(--bg3); color: var(--text); overflow-wrap: anywhere; }
/* a link as a card (thumbnail, title, where it is), a GIF's tag, the start-time button, the new-text window's photo */
.tx-lcard { display: flex; gap: 10px; align-items: center; max-width: 270px; text-decoration: none; color: inherit; }
.tx-lcard img { width: 72px; height: 54px; object-fit: cover; border-radius: 8px; flex: none; background: rgba(127,127,127,.25); }
.tx-lcard .t { display: flex; flex-direction: column; min-width: 0; gap: 2px; font-size: 13px; line-height: 1.25; text-align: left; }
.tx-lcard .t b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font-weight: 600; }
.tx-lcard .t .s { font-size: 11px; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-linkb { position: relative; padding-right: 54px; }
.tx-linkb .tx-next { top: 50%; transform: translateY(-50%); }
.tx-gif img { min-width: 140px; }
.tx-lwrap { align-self: flex-end; max-width: 78%; margin-top: 3px; padding: 8px 10px; border-radius: var(--tx-radius, 16px); background: rgba(127,127,127,.18); }
.tx-gif { position: relative; }
.tx-giftag { position: absolute; left: 8px; bottom: 8px; padding: 1px 6px; border-radius: 6px; background: rgba(0,0,0,.6); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .5px; pointer-events: none; }
.tx-clock { background: transparent; border: 1px solid var(--border); border-radius: 999px; color: inherit; font: inherit; padding: 0 8px; line-height: 1.5; cursor: pointer; }
.tx-clock.on { background: var(--tx-accent, #007aff); color: #fff; border-color: transparent; }
.tx-paused { margin-top: 10px; font-weight: 600; }
/* on a phone the 🕐 button is a finger-sized target, not an 11px word in a thin line */
@media (pointer: coarse) {
  .tx-meta { padding: 4px 10px 5px; }
  .tx-clock { min-height: 32px; padding: 0 12px; font-size: 13px; }
}
/* choosing a time of day: a typed box with an AM/PM switch (the browser's own time field took no choice on her phone) */
.clockpick .ck-row { flex-wrap: nowrap; gap: 8px; }
.clockpick .ck-typed, .modal .card .clockpick .ck-typed { flex: 1 1 120px; min-width: 90px; width: auto; margin-bottom: 0; font-variant-numeric: tabular-nums; }
.clockpick .ck-ampm { flex: none; }
.clockpick .ck-ampm button { padding: 9px 12px; }
.clockpick .ck-shows { margin: 6px 0 10px; }
.clockpick .ck-shows.bad { color: var(--danger); }
.tx-stamp { margin-top: 10px; }
/* a quoted reply (WhatsApp look): the bit of the earlier text above hers, in the bubble and in the bar above the box */
.tx-quote { display: block; border-left: 3px solid var(--tx-accent); background: rgba(0,0,0,.18); border-radius: 6px; padding: 4px 8px; margin: 0 0 6px; font-size: 13px; line-height: 1.3; cursor: pointer; }
.tx-quote b { display: block; font-size: 12px; color: var(--tx-accent); }
.tx-quote span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; opacity: .85; }
.tx-b .tx-quote { max-width: 100%; min-width: 120px; }
.tx-replybar { display: flex; align-items: center; gap: 6px; padding: 6px 8px 0; background: var(--tx-bg); color: var(--tx-text); }
.tx-replybar .tx-quote { flex: 1; min-width: 0; margin: 0; cursor: default; background: rgba(127,127,127,.18); }
.tx-replybar .tx-quote span { max-width: none; }
.tx-group.flash .tx-b { outline: 2px solid var(--tx-accent); }
/* a group chat: the sender's name above each run of their bubbles, on every look */
.tx.group .tx-who { display: block; font-size: 12px; color: var(--tx-meta); padding: 0 4px 1px; margin-top: 6px; }
.tx.group .tx-group.in .tx-who:first-child, .tx.group .tx-group.live .tx-who:first-child { margin-top: 0; }
.tx.group[data-platform="line"] .tx-group.in { padding-left: 0; }
/* transplanting a stretch of a roleplay: the bar above the box while a copy is open */
.copy-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg2); border-top: 1px solid var(--border); font-size: 13px; color: var(--text); flex: none; }
.copy-bar span { flex: 1; min-width: 0; }
/* the ＋ sheet: pictures, a described picture, a voice memo */
.tx-sheet button { display: block; width: 100%; text-align: left; padding: 12px 14px; font-size: 15px; margin-top: 6px; }
.nt-two { align-items: flex-start; gap: 14px; margin-top: 4px; }
.nt-photo { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; }
/* tokens per reply and the cache timer: one thin line under the bar */
.tx-meta { flex: none; padding: 2px 10px 3px; background: var(--bg2); border-bottom: 1px solid var(--border); color: var(--muted); font-size: 11px; line-height: 1.4; text-align: center; white-space: normal; font-variant-numeric: tabular-nums; }
.tx-meta:empty { display: none; }
.chat-head .who .sub { font-variant-numeric: tabular-nums; }
.tx .cast-bar { color: var(--muted); }
.tx .menu { top: 50px; right: 10px; color: var(--text); }

.tx-msgs { flex: 1; overflow-y: auto; padding: 10px 10px 14px; display: flex; flex-direction: column; font-family: var(--tx-font); -webkit-overflow-scrolling: touch; }
.tx[data-platform="whatsapp"] .tx-msgs { background-image: radial-gradient(rgba(134,150,160,.10) 1px, transparent 1.6px); background-size: 22px 22px; }
.tx-empty { margin: auto; text-align: center; color: var(--tx-meta); font-size: 14px; padding: 30px 20px; max-width: 320px; }
.tx-day { align-self: center; margin: 12px 0 4px; font-size: 12px; color: var(--tx-meta); }
.tx[data-platform="whatsapp"] .tx-day span, .tx[data-platform="line"] .tx-day span { background: rgba(0,0,0,.28); color: #e9edef; padding: 3px 10px; border-radius: 999px; }
.tx-group { display: flex; flex-direction: column; gap: 2px; margin: 8px auto 0; width: 100%; max-width: 760px; position: relative; flex: none; }
.tx-group.in { align-items: flex-start; }
.tx-group.out { align-items: flex-end; }
.tx-b { position: relative; max-width: min(78%, 500px); padding: 7px 12px; border-radius: var(--tx-radius); background: var(--tx-in); color: var(--tx-in-text); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16px; line-height: 1.33; }
.tx-group.out .tx-b { background: var(--tx-out); color: var(--tx-out-text); }
.tx-b.tx-emoji { background: transparent !important; font-size: 40px; line-height: 1.15; padding: 0 2px; }
.tx-b .tx-link { text-decoration: underline; }
/* bubble corners: iMessage and LINE pinch the last bubble of a run, WhatsApp squares the first one */
.tx[data-platform="sms"] .tx-group.in .tx-b.last, .tx[data-platform="line"] .tx-group.in .tx-b.first { border-bottom-left-radius: 5px; }
.tx[data-platform="sms"] .tx-group.out .tx-b.last { border-bottom-right-radius: 5px; }
.tx[data-platform="line"] .tx-group.in .tx-b.first { border-bottom-left-radius: var(--tx-radius); border-top-left-radius: 5px; }
.tx[data-platform="line"] .tx-group.out .tx-b.first { border-top-right-radius: 5px; }
.tx[data-platform="whatsapp"] .tx-group.in .tx-b.first { border-top-left-radius: 0; }
.tx[data-platform="whatsapp"] .tx-group.out .tx-b.first { border-top-right-radius: 0; }
.tx[data-platform="whatsapp"] .tx-b { box-shadow: 0 1px .5px rgba(0,0,0,.2); }
/* pictures */
.tx-b.tx-pic { padding: 3px; overflow: hidden; }
.tx-pic img { display: block; max-width: 100%; max-height: 340px; border-radius: calc(var(--tx-radius) - 3px); }
.tx-ph { width: 230px; max-width: 100%; min-height: 150px; border-radius: calc(var(--tx-radius) - 3px); background: linear-gradient(135deg, rgba(127,127,127,.30), rgba(127,127,127,.10)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 12px; text-align: center; white-space: normal; }
.tx-ph .ic { font-size: 26px; font-style: normal; }
.tx-ph .d { font-size: 13px; font-style: italic; line-height: 1.3; }
.tx-pin { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: rgba(0,0,0,.28); border: none; color: inherit; font-style: normal; margin-top: 2px; }
.tx-att { white-space: normal; }
.tx-voice { display: flex; align-items: center; gap: 9px; min-width: 170px; }
.tx-voice .ic { font-size: 15px; }
.tx-wave { flex: 1; height: 20px; opacity: .55; background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 5px); -webkit-mask-image: linear-gradient(180deg, transparent 0 18%, #000 18% 82%, transparent 82%); mask-image: linear-gradient(180deg, transparent 0 18%, #000 18% 82%, transparent 82%); }
.tx-dur { font-size: 12px; opacity: .8; font-style: normal; }
.tx-said { font-size: 13.5px; font-style: italic; opacity: .9; margin-top: 5px; line-height: 1.3; }
.tx-said::before { content: "“"; } .tx-said::after { content: "”"; }
.tx-file { display: flex; gap: 10px; align-items: center; }
.tx-file .ic { font-size: 20px; }
.tx-b.tx-sticker { background: transparent !important; border: 1.5px dashed var(--tx-meta); color: var(--tx-text) !important; font-size: 14px; font-style: italic; white-space: normal; box-shadow: none !important; }
.tx-sticker .tx-tag { display: block; font-size: 10px; font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-meta); }
/* time, ticks, read marks: hidden in ordinary texting (it shows "Delivered" instead), inside the bubble on WhatsApp, beside it on LINE */
.tx-time { display: none; font-size: 11px; white-space: nowrap; }
.tx-status { display: none; font-size: 11px; color: var(--tx-meta); padding: 1px 6px 0; }
.tx[data-platform="sms"] .tx-status { display: block; }
.tx[data-platform="whatsapp"] .tx-time { display: inline-block; float: right; margin: 7px -3px -3px 10px; opacity: .65; }
.tx[data-platform="whatsapp"] .tx-pic .tx-time { position: absolute; right: 8px; bottom: 6px; margin: 0; float: none; opacity: 1; background: rgba(0,0,0,.45); color: #fff; padding: 1px 6px; border-radius: 8px; }
.tx[data-platform="whatsapp"] .tx-time .rd { display: none; }
.tx[data-platform="whatsapp"] .tx-time .tick { margin-left: 4px; letter-spacing: -3px; padding-right: 3px; }
.tx[data-platform="whatsapp"] .tx-time .tick.read { color: var(--tx-tick); }
.tx[data-platform="line"] .tx-time { display: block; position: absolute; bottom: 1px; color: var(--tx-meta); line-height: 1.15; }
.tx[data-platform="line"] .tx-group.in .tx-time { left: 100%; margin-left: 6px; }
.tx[data-platform="line"] .tx-group.out .tx-time { right: 100%; margin-right: 6px; text-align: right; }
.tx[data-platform="line"] .tx-time .rd { display: block; }
.tx[data-platform="line"] .tx-time .tick { display: none; }
.tx[data-platform="line"] .tx-b { max-width: min(68%, 460px); }
/* LINE shows the sender's photo and name beside incoming messages */
.tx-av, .tx-who { display: none; }
.tx[data-platform="line"] .tx-group.in { padding-left: 44px; }
.tx[data-platform="line"] .tx-group.in .tx-av { display: flex; position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--bg3); align-items: center; justify-content: center; font-weight: 700; color: var(--muted); aspect-ratio: auto; font-size: 15px; }
.tx[data-platform="line"] .tx-group.in .tx-who { display: block; font-size: 12px; color: var(--tx-meta); padding: 0 4px 1px; }
/* typing dots */
.tx-typing { display: inline-flex; gap: 4px; align-items: center; padding: 12px 13px; }
.tx-typing span { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .35; animation: txdot 1.2s infinite; }
.tx-typing span:nth-child(2) { animation-delay: .15s; }
.tx-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes txdot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: .95; transform: translateY(-3px); } }
/* COMMS: a human phone talking to an Autobot's comm systems. Dark, cyan, squared off, monospaced. */
.tx[data-platform="comms"] { --tx-bg: #05090d; --tx-text: #d8f6ff; --tx-head: #0a141b; --tx-head-text: #7fe9ff; --tx-in: #0d1b24; --tx-in-text: #d8f6ff; --tx-out: #0f4a5c; --tx-out-text: #e9fbff;
  --tx-meta: #5f8a99; --tx-accent: #22c7e8; --tx-field: #0a141b; --tx-field-border: #1f4756; --tx-radius: 4px; --tx-font: "Cascadia Mono", Consolas, "Roboto Mono", ui-monospace, monospace; }
.tx[data-platform="comms"][data-look="light"] { --tx-bg: #e9f1f4; --tx-text: #0b2530; --tx-head: #0f3a49; --tx-head-text: #cdf6ff; --tx-in: #fff; --tx-in-text: #0b2530; --tx-out: #c5ecf6; --tx-out-text: #0b2530; --tx-meta: #527785; --tx-field: #fff; --tx-field-border: #a9c9d3; }
.tx[data-platform="comms"] .tx-group.in .tx-b { border-left: 2px solid var(--tx-accent); }
.tx[data-platform="comms"] .tx-b { font-size: 15px; }
.tx[data-platform="comms"] .tx-status { display: block; }
.tx[data-platform="comms"] .tx-msgs { background-image: repeating-linear-gradient(0deg, rgba(34,199,232,.035) 0 1px, transparent 1px 4px); }
.tx[data-platform="comms"] .tx-head .who .name::before { content: "COMM // "; opacity: .6; font-weight: 400; }
/* A format she described herself: the app's own colours, nothing borrowed from a real product. */
.tx[data-platform="custom"] { --tx-bg: #313338; --tx-text: #dbdee1; --tx-head: #2b2d31; --tx-head-text: #dbdee1; --tx-in: #383a40; --tx-in-text: #dbdee1; --tx-out: #5865f2; --tx-out-text: #fff;
  --tx-meta: #949ba4; --tx-accent: #5865f2; --tx-field: #2b2d31; --tx-field-border: #3f4147; --tx-radius: 16px; }
.tx[data-platform="custom"][data-look="light"] { --tx-bg: #f2f3f5; --tx-text: #313338; --tx-head: #fff; --tx-head-text: #313338; --tx-in: #fff; --tx-in-text: #313338; --tx-out: #5865f2; --tx-out-text: #fff; --tx-meta: #5c5e66; --tx-field: #fff; --tx-field-border: #d7d9dd; }
.tx[data-platform="custom"] .tx-time { display: inline-block; float: right; margin: 7px -3px -3px 10px; opacity: .65; }
.tx[data-platform="custom"] .tx-time .rd, .tx[data-platform="custom"] .tx-time .tick { display: none; }
.tx[data-platform="custom"] .tx-status { display: block; }
.seg.wrap { flex-wrap: wrap; }
/* the tapped bubble, and » on a picture for a different one */
.tx-b.sel { outline: 2px solid var(--tx-accent); outline-offset: 2px; }
.tx-next { position: absolute; right: 8px; top: 8px; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: none; background: rgba(0,0,0,.55); color: #fff; font-size: 19px; line-height: 1; font-weight: 700; }
.tx-next:hover { background: rgba(0,0,0,.75); border: none; }
/* a photo that is still being looked up, and the buttons on a photo card */
.tx-ph.busy .spinner { border-color: rgba(127,127,127,.4); border-top-color: currentColor; }
.tx-ph-btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.tx-meme .tx-tag { color: var(--tx-accent); }
.tx-actions .tx-src { font-size: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(127,127,127,.24); color: var(--tx-text); text-decoration: none; }
.tx-typing-label { font-size: 11px; color: var(--tx-meta); padding: 1px 6px 0; }
/* between bubbles the dots drop out for a beat (they read, they think), then come back */
.tx-group.live.paused .tx-typing, .tx-group.live.paused .tx-typing-label { visibility: hidden; }
/* where a conversation ended or was picked up again */
.tx-note { align-self: center; margin: 14px 0 6px; font-size: 12px; color: var(--tx-meta); display: flex; align-items: center; gap: 10px; width: 100%; max-width: 760px; flex: none; }
.tx-note::before, .tx-note::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .3; }
.tx-end { flex: none; font-size: 12px; padding: 4px 10px; border-radius: 999px; background: transparent; border: 1px solid currentColor; color: var(--tx-head-text); opacity: .8; }
.tx-end:hover { opacity: 1; border-color: currentColor; }
.tx-ended { display: flex; align-items: center; justify-content: center; gap: 12px; max-width: 760px; margin: 0 auto; padding: 6px 4px; color: var(--tx-meta); font-size: 14px; font-family: var(--tx-font); }
.tx-ended button { background: var(--tx-accent); color: #fff; border: none; border-radius: 999px; padding: 7px 16px; font-size: 14px; }
/* tap a message for its buttons */
.tx-actions { display: none; gap: 5px; margin: 4px 0 2px; flex-wrap: wrap; align-items: center; }
.tx-group.out .tx-actions { justify-content: flex-end; }
.tx-group.open .tx-actions { display: flex; }
.tx-actions button { background: rgba(127,127,127,.24); border: none; color: var(--tx-text); font-size: 12px; padding: 5px 10px; border-radius: 999px; }
/* on a phone the buttons under a tapped bubble are finger-sized */
@media (pointer: coarse) { .tx-actions button { font-size: 13px; padding: 9px 12px; min-height: 36px; } .tx-actions .tx-src { padding: 9px 12px; } }
/* a message near the top of the list opens its ⋯ menu downward, so the menu stays on screen */
.msg-menu.below { bottom: auto; top: calc(100% + 4px); }
.tx-actions .pager { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--tx-meta); }
.tx-actions .pager button { font-size: 16px; line-height: 1; padding: 3px 10px; }
.tx-actions .pager button:disabled { opacity: .35; }
.tx-group .edit { width: min(100%, 520px); }
.tx-group .edit textarea { min-height: 90px; background: var(--tx-field); color: var(--tx-text); border-color: var(--tx-field-border); font-size: 16px; }
.tx .notice { color: var(--tx-meta); margin-top: 10px; flex: none; }
.tx .notice.error { color: var(--danger); }
/* composer */
.tx-compose { flex: none; background: var(--tx-bg); padding: 6px 8px calc(8px + var(--sab)); border-top: 1px solid rgba(127,127,127,.2); }
.tx-row { display: flex; align-items: flex-end; gap: 4px; max-width: 760px; margin: 0 auto; }
.tx-row textarea { flex: 1; min-width: 0; min-height: 40px; max-height: 30vh; resize: none; border-radius: 20px; padding: 9px 14px; background: var(--tx-field); border: 1px solid var(--tx-field-border); color: var(--tx-text); font-size: 16px; line-height: 1.3; font-family: var(--tx-font); }
.tx-row textarea:focus { border-color: var(--tx-accent); }
.tx-ic { width: 38px; height: 40px; border-radius: 50%; padding: 0; border: none; background: transparent; color: var(--tx-accent); font-size: 22px; flex: none; }
.tx-ic:hover { border: none; }
.tx-ic.tx-send { width: 40px; background: var(--tx-accent); color: #fff; font-size: 18px; font-weight: 700; }
.tx-ic.tx-stop { width: 40px; background: rgba(127,127,127,.3); color: var(--danger); font-size: 14px; }
/* Pictures her persona shows in a roleplay (her ask, 2026-10-23): a strip of what goes with the next message, and in the
   chat a folded line ("🖼 2 pictures Ariel shows · show") that opens the thumbnails only when tapped. */
.pic-preview { display: flex; gap: 8px; padding: 6px 6px 2px; overflow-x: auto; }
.pic-preview .pv { position: relative; flex: none; }
.pic-preview img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; display: block; }
.pic-preview .pv button { position: absolute; top: -5px; right: -5px; width: 22px; height: 22px; border-radius: 50%; padding: 0; font-size: 11px; line-height: 1; background: #000; color: #fff; border: 1px solid #666; }
.composer .plus { font-size: 20px; font-weight: 600; }
.msg .pics { margin-top: 6px; }
.msg .pics-toggle { font-size: 13px; padding: 5px 11px; border-radius: 999px; background: var(--bg3); border: 1px solid var(--border); color: var(--muted); min-height: 32px; }
.msg .pics-toggle:hover { color: var(--text); border-color: var(--accent2); }
.msg .pics-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.msg .pics-grid .pic-open { display: block; flex: none; }
.msg .pics-grid .pic-cell { display: flex; flex-direction: column; gap: 3px; max-width: 132px; }
.msg .pics-grid .pic-note { font-size: 12px; color: var(--muted); line-height: 1.25; }
.pic-preview .pv { display: flex; flex-direction: column; align-items: center; gap: 2px; max-width: 84px; }
.pic-preview .pv img { cursor: pointer; }
.pic-preview .pv-note { font-size: 11px; line-height: 1.2; color: var(--text); max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.pic-preview .pv-note.empty { color: var(--muted); font-style: italic; }
.composer .me.busy { animation: mepulse 1.1s ease-in-out infinite; }
.ro-chips { flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
/* a narrator direction on a message (2026-10-24): a grey bar until tapped, like the Narrator's own messages */
.msg .dir { margin: 6px 0; cursor: pointer; }
.msg .dir .dir-bar { display: block; height: 14px; border-radius: 7px; background: var(--border); }
.msg .dir .dir-text { display: none; font-size: 13px; color: var(--muted); border: 1px dashed var(--accent2); border-radius: 10px; padding: 6px 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg .dir:not(.closed) .dir-bar { display: none; }
.msg .dir:not(.closed) .dir-text { display: block; }
.msg .dir .dir-edit { margin-left: 6px; min-height: 28px; }
.msg.narr.closed .dir { display: none; }
@media (pointer: coarse) { .msg .dir.closed { padding: 11px 0; margin: 0; } }
.composer .dir-box { display: flex; align-items: flex-start; gap: 6px; padding: 6px 6px 2px; }
.composer .dir-box .dir-ic { font-size: 16px; line-height: 30px; }
.composer .dir-box textarea { flex: 1; min-height: 30px; max-height: 160px; resize: none; font-size: 14px; padding: 5px 8px; border: 1px dashed var(--accent2); border-radius: 10px; background: var(--bg2); color: var(--text); }
.composer .dir-box #dirX { min-height: 30px; }
@media (pointer: coarse) { .composer .dir-box textarea { font-size: 16px; } .composer .dir-box #dirX { min-height: 36px; min-width: 36px; } }
@media (pointer: coarse) { .ro-chips button, .tx-chips button { min-height: 36px; padding: 6px 12px; } }
@keyframes mepulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.row-link { color: inherit; text-decoration: none; }
.row-link:hover { text-decoration: underline; }
@media (max-width: 420px) { .msg .pics-grid .pic-cell { max-width: 96px; } }
.msg .pics-grid img { width: 132px; height: 132px; object-fit: cover; border-radius: 8px; display: block; border: 1px solid var(--border); }
.msg .pics.closed .pics-grid { display: none; }
@media (pointer: coarse) { .msg .pics-toggle { min-height: 36px; } }
@media (max-width: 420px) { .msg .pics-grid img { width: 96px; height: 96px; } }
.tx-preview { display: flex; gap: 8px; padding: 4px 4px 8px; max-width: 760px; margin: 0 auto; overflow-x: auto; }
.tx-preview .pv { position: relative; flex: none; }
.tx-preview img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; display: block; }
.tx-preview .pv button { position: absolute; top: -5px; right: -5px; width: 20px; height: 20px; border-radius: 50%; padding: 0; font-size: 11px; line-height: 1; background: #000; color: #fff; border: 1px solid #666; }

@media (max-width: 640px) {
  /* The phone's bar: the brand icon, the search box across the middle, and ☰ for the drawer with the links. */
  #topbar { grid-template-columns: auto minmax(0, 1fr) auto; padding-left: 8px; padding-right: 6px; gap: 8px; }
  #topbar .brand span { display: none; }
  #topbar .search { width: 100%; height: 40px; padding-right: 2px; }
  #topbar .search button { width: 36px; height: 36px; }
  #topbar nav { display: none; }
  #topbar #themeBtn { display: none; }
  #topbar #menuBtn { display: inline-flex; width: 40px; height: 40px; }
  .dsec .small { min-height: 34px; }
  .page-head button { min-height: 36px; }
  .composer .persona-chip { flex: 0 1 auto; min-width: 56px; }
  .tx-b { font-size: 16px; max-width: 80%; }
  .tx-bar { padding: 5px 8px; gap: 6px; }
  .seg button { padding: 6px 9px; }
  .tx .menu { right: 8px; left: 8px; top: 48px; }
  .page { padding: 14px 12px calc(14px + var(--sab)); }
  .grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
  .profile, .editor-grid { grid-template-columns: 1fr; }
  .profile .avatar, .editor-grid .avatar { max-width: 200px; }
  .chat-head select { max-width: 120px; }
  .msg .mini { width: 32px; height: 32px; }
  .msg .actions { opacity: .9; }
  .msg .bubble { padding: 8px 11px; }
  .messages { padding: 12px 8px; gap: 10px; }
  body.in-chat #topbar { display: none; }
}
/* Narrow phones: the model picker gives way so the character's name stays readable in the roleplay header. */
@media (max-width: 380px) {
  .chat-head { gap: 6px; }
  .chat-head select { max-width: 92px; }
}
@media (max-width: 340px) {
  .chat-head select { max-width: 78px; }
  .chat-head > button.ghost { padding-left: 6px; padding-right: 6px; }
}

/* the image library (her ask, 2026-10-27): pictures the character posts show open, larger and uncropped */
.msg .lib-pics .pics-grid .pic-cell { max-width: none; }
.msg .lib-pics .pics-grid img { width: auto; height: auto; max-width: 100%; max-height: 340px; object-fit: contain; }
@media (max-width: 420px) { .msg .lib-pics .pics-grid img { max-height: 260px; } }

/* ---------- the welcome banner on the front page (2026-11-04) ----------
   Drawn in CSS: the dark theme shows a lava lamp (blurred blobs drifting, screen-blended), the light theme a day sky
   with clouds crossing. Only transforms animate (cheap on a phone); reduced-motion devices get a still picture. */
.banner { position: relative; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--border); min-height: 168px; margin: 0 0 18px; display: flex; align-items: center; justify-content: center; isolation: isolate; }
.banner h2 { position: relative; z-index: 2; margin: 0 44px; padding: 8px 20px; border-radius: 14px; background: rgba(8, 14, 30, .26); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); text-align: center; color: #fff; font-size: clamp(22px, 4.6vw, 36px); font-weight: 800; letter-spacing: .2px; line-height: 1.2; text-shadow: 0 2px 22px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.45); }
.banner .banner-x { position: absolute; top: 6px; right: 6px; z-index: 3; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: none; background: rgba(0,0,0,.35); color: #fff; font-size: 14px; line-height: 1; opacity: .75; }
.banner .banner-x:hover { opacity: 1; background: rgba(0,0,0,.6); border: none; }
.banner .lava, .banner .sky { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
:root[data-theme="light"] .banner .lava { display: none; }
:root:not([data-theme="light"]) .banner .sky { display: none; }
.banner .lava { background: radial-gradient(120% 90% at 30% 110%, #1b0f33 0%, #0f0b1f 60%, #09070f 100%); }
.banner .blob { position: absolute; display: block; width: 38%; aspect-ratio: 1 / 1; border-radius: 50%; filter: blur(30px); opacity: .62; mix-blend-mode: screen; will-change: transform; animation: lava-drift 22s ease-in-out infinite alternate; }
.banner .blob.b1 { left: -10%; top: -40%; background: #ff4d8d; animation-duration: 19s; }
.banner .blob.b2 { left: 25%; top: 30%; width: 38%; background: #ff8a3d; animation-duration: 25s; animation-delay: -7s; }
.banner .blob.b3 { left: 55%; top: -50%; background: #7c4dff; animation-duration: 21s; animation-delay: -12s; }
.banner .blob.b4 { left: 72%; top: 25%; width: 42%; background: #22c3ff; animation-duration: 27s; animation-delay: -4s; }
.banner .blob.b5 { left: 5%; top: 45%; width: 34%; background: #ff2fa0; animation-duration: 23s; animation-delay: -15s; }
@keyframes lava-drift { 0% { transform: translate(0, 0) scale(1); } 25% { transform: translate(14%, -22%) scale(1.15, .9); } 50% { transform: translate(-10%, 18%) scale(.9, 1.15); } 75% { transform: translate(18%, 10%) scale(1.1); } 100% { transform: translate(-6%, -14%) scale(1); } }
.banner .sky { background: linear-gradient(180deg, #3fa7ff 0%, #8ed1ff 55%, #d6efff 100%); }
.banner .sun { position: absolute; right: 9%; top: -34px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, #fff8c8 0%, #ffe680 42%, rgba(255,230,128,0) 72%); }
.banner .cloud { position: absolute; display: block; height: 34px; width: 120px; background: #fff; border-radius: 999px; opacity: .97; filter: drop-shadow(0 4px 6px rgba(0,60,120,.14)); will-change: transform; animation: cloud-drift linear infinite; }
.banner .cloud::before, .banner .cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.banner .cloud::before { width: 54px; height: 54px; left: 18px; top: -26px; }
.banner .cloud::after { width: 40px; height: 40px; left: 60px; top: -16px; }
.banner .cloud.c1 { top: 24%; width: 150px; height: 40px; animation-duration: 52s; animation-delay: -12s; }
.banner .cloud.c2 { top: 58%; width: 100px; height: 28px; opacity: .9; animation-duration: 70s; animation-delay: -40s; }
.banner .cloud.c3 { top: 10%; width: 90px; height: 26px; opacity: .85; animation-duration: 64s; animation-delay: -25s; }
.banner .cloud.c4 { top: 66%; width: 170px; height: 44px; animation-duration: 58s; animation-delay: -5s; }
.banner .cloud.c5 { top: 40%; width: 120px; height: 32px; opacity: .92; animation-duration: 80s; animation-delay: -60s; }
@keyframes cloud-drift { from { transform: translateX(-260px); } to { transform: translateX(1100px); } }
@media (prefers-reduced-motion: reduce) { .banner .blob, .banner .cloud { animation: none; } }
@media (max-width: 640px) { .banner { min-height: 124px; margin-bottom: 14px; } .banner h2 { margin: 0 40px; padding: 6px 12px; } .banner .blob { filter: blur(20px); } @keyframes cloud-drift { from { transform: translateX(-200px); } to { transform: translateX(520px); } } }

/* ---------- folded sections: the Features page, the tutorials on the Import page, the Texts page blurb ---------- */
details.feat { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); margin: 0 0 10px; padding: 0 16px; }
details.feat > summary { cursor: pointer; padding: 13px 0; font-weight: 650; font-size: 16px; list-style: none; display: flex; align-items: center; gap: 8px; min-height: 48px; }
details.feat > summary::-webkit-details-marker { display: none; }
details.feat > summary::after { content: "▸"; margin-left: auto; color: var(--muted); transition: transform .15s; flex: none; }
details[open].feat > summary::after { transform: rotate(90deg); }
details[open].feat > summary { border-bottom: 1px solid var(--border); margin-bottom: 8px; }
details.feat > :last-child:not(summary) { margin-bottom: 14px; }
details.feat p { margin: 8px 0; }
details.feat ul, details.feat ol { margin: 6px 0; padding-left: 22px; }
details.feat li { margin: 3px 0; }
details.feat h3 { margin: 14px 0 4px; font-size: 15px; }
details.feat.tut, details.feat.blurb { background: var(--bg); }
details.feat.tut { margin: 8px 0 12px; }
details.feat.blurb { margin: 0 0 14px; }
.features .page-head { margin-bottom: 8px; }
.features > .muted { margin: 0 0 14px; }
.dsec { margin-top: 14px; }
.dsec h3 { margin-bottom: 6px; }

/* ---------- the public site (her ask, 2026-11-04): search filters, published bots, a bot's page, profiles ---------- */
/* Switches and chips are pill buttons at least 36 px tall that wrap onto more rows on a narrow phone. */
.site-filters { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; }
.site-filters .frow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sw, .fchip { min-height: 36px; padding: 6px 12px; border-radius: 999px; font-size: 13px; background: var(--bg2); border: 1px solid var(--border); color: var(--muted); white-space: nowrap; }
.sw::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--border); margin-right: 7px; vertical-align: middle; }
.sw.on { color: var(--text); border-color: var(--accent); background: var(--bg3); }
.sw.on::before { background: var(--accent); }
.fchip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip.tag-filter { min-height: 36px; padding: 2px 4px 2px 12px; font-size: 13px; }
.chip.tag-filter button { min-width: 36px; min-height: 36px; }
h2.sect.sect-yours { margin-top: 30px; }
.pub-card .by { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pub-card .tags .pill, .bot-pills .pill { margin-left: 0; }
.pub-card .name { overflow-wrap: anywhere; }
.pill.nsfw { color: var(--danger); border-color: var(--danger); }
.pill.mine { color: var(--accent2); border-color: var(--accent2); }
.site-more { display: block; margin: 14px auto 0; min-height: 40px; }
.bot-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.bot-pills:empty { display: none; }
a.tag { cursor: pointer; display: inline-flex; align-items: center; min-height: 36px; padding: 4px 12px; font-size: 13px; }
a.tag:hover { border-color: var(--accent2); color: var(--text); }
.bot-actions { margin-top: 14px; gap: 8px; }
.bot-actions button, .pub-actions button { min-height: 40px; }
details.feat .fm { white-space: pre-wrap; font-size: 14px; max-height: 300px; overflow: auto; margin-bottom: 12px; overflow-wrap: anywhere; }
.about { white-space: pre-wrap; overflow-wrap: anywhere; }
.prof-counts { margin: -6px 0 14px; }
.prof-counts .pill { margin-left: 4px; }
.follow-row { margin: 6px 0; flex-wrap: nowrap; }
.follow-row a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.follow-row button { min-height: 36px; flex: none; }
.opt-row { display: flex; flex-wrap: wrap; gap: 0 18px; }
.opt-row label.tick { margin: 2px 0; min-height: 36px; align-items: center; }
.opt-row label.tick input { margin: 0; }
#toast.linked { pointer-events: auto; }
#toast a { margin-left: 12px; font-weight: 650; }

/* ---------- standalone lorebooks and packages (her ask, 2026-11-04, phase 4) ---------- */
/* the search page's Characters | Lorebooks tabs (its own class: .seg belongs to the texting pickers) */
.kind-seg { display: inline-flex; max-width: 100%; border: 1px solid var(--border); border-radius: 999px; background: var(--bg2); padding: 3px; gap: 2px; margin: -4px 0 4px; }
.kind-seg .seg-b { min-height: 36px; padding: 6px 16px; border-radius: 999px; border: none; background: transparent; color: var(--muted); font-size: 14px; white-space: nowrap; }
.kind-seg .seg-b.on { background: var(--accent); color: #fff; }
/* a package's card: a 📚 face, shorter than a bot's portrait */
.pack-card .pack-face { aspect-ratio: 3/2; font-size: 48px; }
.pack-card .pack-count { font-size: 12px; color: var(--muted); margin-top: 4px; }
/* the account's own books as rows */
.lb-list { display: flex; flex-direction: column; gap: 8px; }
.lb-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg2); color: var(--text); text-decoration: none; min-width: 0; }
.lb-row:hover { border-color: var(--accent2); }
.lb-face { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--bg3); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.lb-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lb-name { font-weight: 650; overflow-wrap: anywhere; }
.lb-meta { font-size: 12px; color: var(--muted); }
.lb-row .tags:empty { display: none; }
.lb-row .tags .pill { margin-left: 0; }
.lb-intro { margin: -6px 0 14px; }
.lb-packs { margin-top: 18px; }
.pack-row .pub-actions, .pack-row .row { margin-top: 8px; gap: 8px; }
.pack-row .pub-actions button { min-height: 36px; }
.stale-note { color: var(--accent2); margin: 6px 0 0; }
.pack-books .pack-book { margin-top: 8px; }
.pack-names { margin-top: 4px; overflow-wrap: anywhere; }
/* tick lists (attach to bots, books in a package): each row a comfortable tap */
.tick-list label.tick { margin: 2px 0; min-height: 36px; align-items: center; }
.tick-list label.tick input { margin: 0; }
.tick-list label.tick span { min-width: 0; overflow-wrap: anywhere; }
.lore-line a { color: var(--accent); }

/* ---------- shared image libraries and the base pool (her ask, 2026-11-04, phase 5) ---------- */
/* a shared library's card: a square 2×2 mosaic of its first pictures in place of the portrait */
.lib-mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; aspect-ratio: 1; background: var(--bg3); overflow: hidden; }
.lib-mosaic.one { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.lib-mosaic.two { grid-template-rows: 1fr; }
.lib-mosaic.three img:first-child { grid-row: 1 / -1; }
.lib-mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; min-width: 0; min-height: 0; }
.lib-mosaic .lib-face { grid-column: 1 / -1; grid-row: 1 / -1; display: flex; align-items: center; justify-content: center; font-size: 42px; }
.lib-mosaic.mini { flex: none; width: 56px; border-radius: 8px; }
.lib-mosaic.mini .lib-face { font-size: 24px; }
.lib-card .pack-count { font-size: 12px; color: var(--muted); margin-top: 4px; }
.lib-sect-head { margin-top: 0; }
.lib-sect-head .sect { margin: 0; }
.lib-site-row { gap: 8px; margin-top: 8px; }
.li-pool { gap: 10px; margin-top: 4px; flex-wrap: nowrap; align-items: center; }
.li-pool button { flex: none; min-height: 36px; }
.li-pool .hint { min-width: 0; }
/* thumb grids: the library page, the pool and the picker window (3 across on the narrowest phone, 4 from 390 px) */
.thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-top: 12px; }
.thumb-grid.compact { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin-top: 8px; }
.thumb { position: relative; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; border: 2px solid var(--border); background: var(--bg2); min-width: 0; }
.thumb.on { border-color: var(--accent); }
.thumb-open { display: block; width: 100%; height: 100%; padding: 0; border: none; border-radius: 0; background: none; }
.thumb-open img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* the tick: a 36 px tap area in the corner round a 28 px round mark */
.thumb-tick { position: absolute; top: 0; right: 0; width: 40px; height: 40px; padding: 6px; border: none; background: none; display: flex; align-items: flex-start; justify-content: flex-end; }
.thumb-tick span { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; background: rgba(0, 0, 0, 0.45); color: transparent; font-size: 15px; font-weight: 700; line-height: 24px; text-align: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.thumb.on .thumb-tick span { background: var(--accent); border-color: var(--accent); color: #fff; }
.site-pic-name { margin: 10px 0 2px; font-size: 16px; overflow-wrap: anywhere; }
.pool-search { gap: 8px; margin: 0 0 10px; flex-wrap: nowrap; }
.pool-search input { flex: 1; min-width: 0; margin-bottom: 0; }
.modal .card .pool-search input { margin-bottom: 0; }
.pool-search button { flex: none; min-height: 40px; }
.pool-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.pool-tags:empty { display: none; }
.pool-actions { gap: 8px; margin-bottom: 4px; }
.pool-actions button { min-height: 40px; }
.pool-edit { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 6px; }
.fs-lib-top { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.fs-lib-body { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.fs-lib-body .tags:empty { display: none; }
.fs-lib-body .tags .pill { margin-left: 0; }
.fs-lib-acts { gap: 8px; margin-top: 8px; align-items: center; }
.fs-lib-acts button { min-height: 36px; }
.fs-open { display: inline-flex; align-items: center; min-height: 36px; padding: 0 6px; font-size: 13px; }
.modal .card .kind-seg { margin: 0 0 10px; }
@media (max-width: 640px) {
  .sw, .fchip { padding: 6px 10px; }
  .bot-actions button { flex: 1 1 auto; }
  .pack-row .pub-actions button { flex: 1 1 auto; }
  .kind-seg { display: flex; }
  .kind-seg .seg-b { flex: 1 1 0; padding: 6px 10px; }
  /* three tabs on a narrow phone: the labels may take two short lines rather than spill out */
  .kind-seg3 .seg-b { padding: 4px 6px; font-size: 13px; white-space: normal; line-height: 1.2; }
  .thumb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .thumb-grid.compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pool-actions button { flex: 1 1 auto; }
  .lib-site-row button { flex: 1 1 auto; min-height: 40px; }
}
@media (max-width: 389px) {
  .thumb-grid, .thumb-grid.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* desktops below 1500 px: compact links and a narrower search box, so all seven links fit beside the centred box */
@media (min-width: 641px) and (max-width: 1499px) { #topbar nav a { padding: 6px 7px; font-size: 13px; } #topbar .search { width: clamp(180px, 19vw, 440px); } }