/* Locally bundled OFL fonts. No third-party requests from PA Direct. */
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/dm-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/dm-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("/fonts/bricolage-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("/fonts/bricolage-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: light;
  /* Header and strong chips keep a separate scale so the dark palette can
     soften without touching the light appearance. */
  --header-bg: #16181d;
  --header-text: #ffffff;
  --header-muted: #c4c6cb;
  --header-button: #2c2f35;
  --header-button-border: #4a4f58;
  --dot: #9a9da3;
  /* SMS-sized reading text; rem sizing respects browser text scaling. */
  --bg: #e7ebf1;
  --surface: #ffffff;
  --text: #171b22;
  --muted: #5f636b;
  --border: #cbd2dc;
  --message-border: #dde2e9;
  --border-strong: #a7b0be;
  --chip: #edf0f5;
  --brand: #25282e;
  --brand-ink: #ffffff;
  --danger: #ab232c;
  --danger-bg: #fbeeec;
  /* One accent family shared by the primary action, secondary chat actions,
     the focus ring and links so no corner shows competing colours. Ten
     curated schemes (see Settings → Highlight colour) each set the same
     token names in matching light/dark pairs. On dark surfaces, saturated
     actions and brighter reading links use separate tones of one hue. */
  --accent: #1a63d6;
  --accent-ink: #ffffff;
  --accent-soft: #cfe1fc;
  --accent-soft-ink: #0f3d78;
  --accent-border: #7fb2ee;
  --accent-dim: #d3e3fb;
  --accent-dim-ink: #4a5c74;
  --focus: var(--accent);
  --link: #1a63d6;
  --placeholder: #6d7078;
  --code: #eef1f5;
  --quote: #f3f5f8;
  --composer: #f8fbff;
  --composer-border: #aebdce;
  --composer-highlight: rgba(255, 255, 255, .95);
  --composer-shadow: 0 14px 34px rgba(34, 49, 72, .18), 0 3px 10px rgba(34, 49, 72, .1);
  /* Quieter desktop bubble outline (v49): sits closer to the canvas than
     --border so wide screens lose the carded look. */
  --bubble-border: #e1e5eb;
  /* Desktop user bubbles keep the edgeless fill of the phone (their border
     matches --user-bg); only dark mode gets a quieter outline. Kept as
     literals so tests can assert on the resolved token. */
  --user-border-desktop: #25282e;
  --user-bg: #25282e;
  --user-border: #25282e;
  --user-text: #ffffff;
  --success: #187446;
  --danger-border: #e2b4b8;
  /* Settings use a quieter grouped-control palette than chat actions. */
  --settings-border: #d6dce5;
  --settings-control: #e9edf3;
  --settings-selected: #ffffff;
  --settings-selected-border: #c5cdd9;
  --settings-divider: #e1e5ec;
  --settings-shadow: 0 1px 2px rgba(20, 27, 38, .05);
  font-family: "DM Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
  font-size: 16px;
  font-synthesis: none;
  line-height: 1.5;
}
/* Coordinated accent schemes: the swatch column shows the only colour in
   Settings; every scheme is checked in both themes against its own text and
   the neutral surfaces (Send, disabled Send, Chats/New chat, chips, links,
   focus ring) at 4.5:1 or better — ten schemes in total. */
:root[data-accent="teal"] {
  --accent: #0f766e; --accent-ink: #ffffff; --accent-soft: #cce8e5; --accent-soft-ink: #0a4f4a;
  --accent-border: #7ec4bd; --accent-dim: #d3ebe8; --accent-dim-ink: #3d6a66; --link: #0f766e;
}
:root[data-accent="violet"] {
  --accent: #7c3aed; --accent-ink: #ffffff; --accent-soft: #e7dcfc; --accent-soft-ink: #471a95;
  --accent-border: #b493f2; --accent-dim: #ece3fd; --accent-dim-ink: #6b5b8a; --link: #7c3aed;
}
:root[data-accent="amber"] {
  --accent: #a84d06; --accent-ink: #ffffff; --accent-soft: #fbe3cd; --accent-soft-ink: #6d3404;
  --accent-border: #dba765; --accent-dim: #fdeedd; --accent-dim-ink: #7d5a34; --link: #a84d06;
}
:root[data-accent="rose"] {
  --accent: #be123c; --accent-ink: #ffffff; --accent-soft: #fbdde4; --accent-soft-ink: #8c0e2d;
  --accent-border: #e58aba; --accent-dim: #fde5ea; --accent-dim-ink: #8c5560; --link: #be123c;
}
:root[data-accent="green"] {
  --accent: #15803d; --accent-ink: #ffffff; --accent-soft: #d5eedd; --accent-soft-ink: #14532d;
  --accent-border: #86cfa0; --accent-dim: #ddf0e3; --accent-dim-ink: #3d6b4d; --link: #15803d;
}
:root[data-accent="lime"] {
  --accent: #4d7c0f; --accent-ink: #ffffff; --accent-soft: #e3ecd2; --accent-soft-ink: #38540f;
  --accent-border: #a4c878; --accent-dim: #e9f1dd; --accent-dim-ink: #5a6b40; --link: #4d7c0f;
}
:root[data-accent="orange"] {
  --accent: #c2410c; --accent-ink: #ffffff; --accent-soft: #fbe4d4; --accent-soft-ink: #7c2d08;
  --accent-border: #eda27c; --accent-dim: #fdeade; --accent-dim-ink: #8a543c; --link: #c2410c;
}
:root[data-accent="pink"] {
  --accent: #be185d; --accent-ink: #ffffff; --accent-soft: #fbdce9; --accent-soft-ink: #831843;
  --accent-border: #e891c0; --accent-dim: #fde5ef; --accent-dim-ink: #8f5570; --link: #be185d;
}
:root[data-accent="indigo"] {
  --accent: #4338ca; --accent-ink: #ffffff; --accent-soft: #dee3f9; --accent-soft-ink: #312e81;
  --accent-border: #a1aaf0; --accent-dim: #e7ebfd; --accent-dim-ink: #55597f; --link: #4338ca;
}
/* Shared tokens cover chat, setup, diagnostics and native form controls. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #15171c;
  --surface: #23272f;
  --text: #d3d9e2;
  --muted: #9ba4b3;
  --border: #464f5d;
  --message-border: #343b46;
  --border-strong: #6d7889;
  --chip: #2f353f;
  --brand: #d3d9e2;
  --brand-ink: #1b1f26;
  --danger: #ffa2a8;
  --danger-bg: #3d2129;
  --danger-border: #ac626c;
  --accent: #2173e3;
  --accent-ink: #ffffff;
  --accent-soft: #33507a;
  --accent-soft-ink: #e2eeff;
  --accent-border: #6f9ade;
  --accent-dim: #2b3a52;
  --accent-dim-ink: #9db6d6;
  --focus: var(--accent);
  --link: #8fbcff;
  --placeholder: #9ba4b3;
  --code: #2e343d;
  --quote: #272d36;
  --composer: #29313d;
  --composer-border: #59677b;
  --composer-highlight: rgba(160, 184, 220, .16);
  --composer-shadow: 0 16px 38px rgba(0, 0, 0, .5), 0 4px 12px rgba(0, 0, 0, .3);
  --bubble-border: #353d49;
  --user-border-desktop: #353d49;
  --user-bg: #343c48;
  --user-border: #46505e;
  --user-text: #f2f4f7;
  --success: #8fd9b0;
  --header-bg: #1e222a;
  --header-text: #dde3ea;
  --header-muted: #a9afb9;
  --header-button: #2f343d;
  --header-button-border: #4a515e;
  --dot: #a2a6ad;
  --settings-border: #38414d;
  --settings-control: #2b313a;
  --settings-selected: #3b4350;
  --settings-selected-border: #586476;
  --settings-divider: #38414d;
  --settings-shadow: none;
}
/* Dark-theme halves of the coordinated accent schemes (Blue keeps the values
   above). Same token names, same contrast checks. */
:root[data-theme="dark"][data-accent="teal"] {
  --accent: #078276; --accent-ink: #ffffff; --accent-soft: #0f3d3a; --accent-soft-ink: #99f0e6;
  --accent-border: #3a7c74; --accent-dim: #0c3a36; --accent-dim-ink: #7db8b1; --link: #2dd4bf;
}
:root[data-theme="dark"][data-accent="violet"] {
  --accent: #8152e0; --accent-ink: #ffffff; --accent-soft: #32275a; --accent-soft-ink: #d9ccff;
  --accent-border: #6b5b99; --accent-dim: #2b224d; --accent-dim-ink: #b0a1d9; --link: #a78bfa;
}
:root[data-theme="dark"][data-accent="amber"] {
  --accent: #e4a126; --accent-ink: #121922; --accent-soft: #4a340b; --accent-soft-ink: #ffdf9e;
  --accent-border: #8a6a2a; --accent-dim: #3f2d08; --accent-dim-ink: #d9b877; --link: #f5b83d;
}
:root[data-theme="dark"][data-accent="rose"] {
  --accent: #ca264e; --accent-ink: #ffffff; --accent-soft: #52182a; --accent-soft-ink: #fecdd6;
  --accent-border: #a04a5e; --accent-dim: #471422; --accent-dim-ink: #e5a4b0; --link: #fb7185;
}
:root[data-theme="dark"][data-accent="green"] {
  --accent: #168545; --accent-ink: #ffffff; --accent-soft: #16442a; --accent-soft-ink: #b7f4d0;
  --accent-border: #3f8158; --accent-dim: #123d24; --accent-dim-ink: #94cfab; --link: #6ee7a0;
}
:root[data-theme="dark"][data-accent="lime"] {
  --accent: #a4ce34; --accent-ink: #121922; --accent-soft: #33491c; --accent-soft-ink: #d9f0b2;
  --accent-border: #647d40; --accent-dim: #2c3f17; --accent-dim-ink: #bfd695; --link: #a9d963;
}
:root[data-theme="dark"][data-accent="orange"] {
  --accent: #e77828; --accent-ink: #121922; --accent-soft: #532a12; --accent-soft-ink: #ffd2b0;
  --accent-border: #96603c; --accent-dim: #4a2510; --accent-dim-ink: #e8b391; --link: #fb9a55;
}
:root[data-theme="dark"][data-accent="pink"] {
  --accent: #cb2b78; --accent-ink: #ffffff; --accent-soft: #571a39; --accent-soft-ink: #fecfe4;
  --accent-border: #9c4c73; --accent-dim: #4b1730; --accent-dim-ink: #e9a8c9; --link: #f770b6;
}
:root[data-theme="dark"][data-accent="indigo"] {
  --accent: #5353d9; --accent-ink: #ffffff; --accent-soft: #2c2c6e; --accent-soft-ink: #d6dcff;
  --accent-border: #5b5cae; --accent-dim: #262657; --accent-dim-ink: #b0b8e8; --link: #a5b4fc;
}
/* Brand-family trial: apply the shared paper/navy to the *actual* working
   interface, not only the unpaired welcome. Highlight colours remain separate
   per-device user choices (Blue is still the default). */
:root {
  --bg: #f6f4ef;
  --surface: #fffefa;
  --text: #192c35;
  --muted: #52646a;
  --border: #d8dfdb;
  --message-border: #e3e4dd;
  --border-strong: #9fafa9;
  --chip: #e9ede8;
  --header-bg: #192c35;
  --header-button: #353a3d;
  --header-button-border: #607178;
  /* The selected highlight tints both user messages and chat actions.
     Bubble uses the soft/ink ramp, not the saturated Send fill. */
  --user-bg: var(--accent-soft);
  --user-text: var(--accent-soft-ink);
  --user-border: var(--accent-soft);
  --user-border-desktop: var(--accent-soft);
  --bubble-border: #e3e4dd;
  --composer: #fffefa;
  --composer-border: #9fafa9;
  --settings-border: #d8dfdb;
  --settings-control: #e9ede8;
  --settings-divider: #d8dfdb;
}
:root[data-theme="dark"] {
  --bg: #15222b;
  --surface: #24333c;
  --text: #d3d9e2;
  --muted: #acb9bd;
  --border: #485a60;
  --message-border: #38494e;
  --border-strong: #75868b;
  --chip: #2b3c44;
  --header-bg: #192c35;
  --header-button: #353a3d;
  --header-button-border: #607178;
  --user-bg: var(--accent-soft);
  --user-text: var(--accent-soft-ink);
  --user-border: var(--accent-soft);
  --user-border-desktop: var(--accent-soft);
  --bubble-border: #38494e;
  --composer: #293a43;
  --composer-border: #75868b;
  --settings-border: #485a60;
  --settings-control: #2b3c44;
  --settings-divider: #485a60;
}

* { box-sizing: border-box; }

/* Brand family surface tokens (brand-family-v1): the quiet Sydney Agentic
   paper-and-navy family for the shared app canvas and pairing welcome.
   Accent choices are independent: ten highlights and Blue default remain. */
:root {
  --brand-bg: #f6f4ef;      /* warm off-white paper */
  --brand-surface: #fffefa; /* raised card on paper */
  --family-ink: #1d3a4a;    /* deep navy ink, AAA on paper */
  --brand-muted: #52646a;   /* quiet slate, AA+ on paper */
  --brand-rule: #d8dfdb;    /* fine sage-grey rule */
}
:root[data-theme="dark"] {
  --brand-bg: #15222b;      /* deep warm navy, readable not void */
  --brand-surface: #21353e; /* raised card on navy */
  --family-ink: #dde3ea;
  --brand-muted: #a9b6bc;
  --brand-rule: #40545a;
}

html, body { margin: 0; background: var(--bg); }
html { overflow: hidden; }
body {
  width: 100%;
  height: 100vh; height: var(--app-height, 100dvh);
  min-height: var(--app-height, 100dvh);
  display: flex; flex-direction: column; overflow: hidden; overscroll-behavior: none;
}
button, input, textarea { font: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }

button, .file-button {
  min-height: 48px; border: 0; border-radius: 11px; padding: .7rem 1.05rem;
  background: var(--brand); color: var(--brand-ink); font-weight: 650; cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 120ms ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
button:disabled { cursor: default; background: var(--chip); color: var(--placeholder); border: 1px solid var(--border); }
/* Chat actions carry the accent; settings and approval buttons stay neutral. */
#send-button {
  flex: 0 0 44px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent);
}
#send-button svg { width: 20px; height: 20px; }
/* An idle Send keeps the accent hue so the action is still recognisable,
   but dims enough to read as inactive. */
#send-button:disabled { background: var(--accent-dim); color: var(--accent-dim-ink); border-color: color-mix(in srgb, var(--accent-border) 55%, var(--accent-dim)); }
#new-chat-button, #chats-button { background: var(--accent-soft); color: var(--accent-soft-ink); border-color: color-mix(in srgb, var(--accent-border) 55%, var(--accent-soft)); }
body:has(#settings-view:not(.hidden)) #chats-button {
  background: var(--header-button); color: var(--header-text); border-color: var(--header-button-border);
}
body:has(#settings-view:not(.hidden)) #settings-button {
  /* Header stays quiet; only the active gear glyph adopts the chosen highlight. */
  background: var(--header-button); color: color-mix(in srgb, var(--accent) 55%, white);
  border-color: var(--header-button-border); box-shadow: none;
}
button.secondary:disabled, .file-button:disabled { opacity: .55; }
button.secondary, .file-button { background: var(--chip); color: var(--text); border: 1px solid var(--border); }
.icon-button {
  min-height: 44px; padding: .45rem .7rem; font-size: .88rem; background: var(--header-button); color: var(--header-text);
  border: 1px solid var(--header-button-border); font-weight: 600; white-space: nowrap; flex-shrink: 0;
}
.header-new-chat {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.header-new-chat svg { width: 22px; height: 22px; }
.settings-icon-button {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--header-button); color: var(--header-text); border: 1px solid var(--header-button-border); box-shadow: none;
}
.settings-icon-button svg { width: 24px; height: 24px; }

input, textarea {
  width: 100%; border: 1.5px solid var(--border-strong); border-radius: 11px; padding: .8rem .85rem;
  background: var(--surface); color: var(--text); font-size: 1rem;
}
input::placeholder, textarea::placeholder { color: var(--placeholder); opacity: 1; }
textarea {
  resize: none; max-height: 9rem;
  transition: border-color 140ms ease, box-shadow 140ms ease;
  scrollbar-width: none;
}
#message { min-height: 48px; padding-top: .6rem; padding-bottom: .6rem; line-height: 1.5; }
label { display: block; margin: 1.05rem 0 .4rem; font-weight: 600; font-size: .95rem; }
label:first-child { margin-top: 0; }
code { overflow-wrap: anywhere; }
.error { color: var(--danger); }
.hint { color: var(--muted); font-size: .92rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.hidden { display: none !important; }

.app-header {
  position: relative; z-index: 5; flex: 0 0 auto; min-height: 72px; padding: calc(.6rem + env(safe-area-inset-top)) max(.9rem, env(safe-area-inset-right)) .6rem max(.9rem, env(safe-area-inset-left));
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap;
  background: var(--header-bg); color: var(--header-text); border-bottom: 0;
}
.app-header strong { font-family: "Bricolage Grotesque", "DM Sans", sans-serif; font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }
h1, h2, .empty-state strong { font-family: "Bricolage Grotesque", "DM Sans", sans-serif; }
/* v57 brand lockup: the logo mark leads the wordmark on the top-left.
   The mark is the app icon's glyph cut to a transparent alpha matte, so it
   sits on --header-bg without carrying the icon's navy plate. */
.app-brand { display: flex; flex: 1; align-items: center; gap: .6rem; min-width: 5rem; }
.app-title { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
/* 26px keeps the mark subordinate to the "PA Direct" wordmark: at 30px the
   glyph's mass read heavier than the name it sits beside. */
.app-logo { flex: none; height: 26px; width: auto; display: block; }
.connection { display: inline-flex; align-items: center; gap: .4rem; color: var(--header-muted); font-size: .84rem; font-weight: 500; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dot); flex: none; }
.status-dot.ok { background: #34c759; }
.status-dot.warn { background: #f3a73c; }
.status-dot.bad { background: #ff6b61; }

.history-overlay {
  position: fixed; inset: 0; z-index: 40; display: flex; justify-content: flex-end;
  background: rgba(8, 10, 14, .58); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.history-panel {
  width: 100%; height: 100%; min-width: 0; overflow-y: auto;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1.25rem, env(safe-area-inset-bottom)) 1rem;
  background: var(--bg); color: var(--text); border-left: 0;
  box-shadow: none; -webkit-overflow-scrolling: touch;
}
.history-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.history-heading h1 { margin: .08rem 0 0; font-size: 1.65rem; letter-spacing: -.025em; }
.eyebrow { color: var(--muted); font-size: .76rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.history-close { min-height: 44px; padding: .45rem .8rem; }
.new-chat-action {
  width: 100%; min-height: 54px; display: flex; align-items: center; justify-content: flex-start; gap: .7rem;
  margin-bottom: .85rem; padding: .75rem .9rem; border: 1px solid var(--accent-border); font-size: 1rem;
}
.new-chat-action > span:first-child { font-size: 1.45rem; line-height: 1; font-weight: 400; }
.history-status { min-height: 1.25rem; margin: .15rem 0 .55rem; color: var(--muted); font-size: .9rem; }
.history-status:empty { display: none; }
.conversation-list { display: grid; gap: .55rem; }
.conversation-row {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 48px;
  min-height: 74px; overflow: visible; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 13px;
}
.conversation-row.current {
  border-color: var(--accent-border); box-shadow: inset 3px 0 0 var(--accent);
}
.conversation-item {
  width: 100%; min-width: 0; min-height: 72px; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: .28rem .75rem; padding: .78rem .3rem .78rem .85rem; text-align: left;
  background: transparent; color: var(--text); border: 0; border-radius: 13px 0 0 13px; font-weight: 400;
}
.conversation-actions {
  min-width: 48px; width: 48px; min-height: 48px; height: 48px; align-self: center; padding: 0;
  display: grid; place-items: center; background: transparent; color: var(--muted); border: 0; border-radius: 50%;
}
.conversation-actions:hover, .conversation-actions[aria-expanded="true"] { background: var(--chip); color: var(--text); }
.conversation-menu {
  position: absolute; z-index: 3; top: calc(100% + .25rem); right: 0; min-width: 10rem;
  padding: .3rem; display: grid; gap: .3rem; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(10, 15, 25, .18);
}
.conversation-delete,
.conversation-rename {
  width: 100%; padding: .65rem .8rem; text-align: left;
}

.conversation-delete {
  background: var(--danger-bg); color: var(--danger);
  border: 1px solid var(--danger-border);
}

.conversation-rename {
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
}

.conversation-rename:hover { background: var(--chip); }

.conversation-rename-input {
  width: 100%; min-width: 0; padding: .2rem .45rem;
  font-size: inherit; font-weight: 700;
}
.conversation-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.conversation-date { color: var(--muted); font-size: .78rem; white-space: nowrap; align-self: center; }
.conversation-preview {
  grid-column: 1 / -1; min-width: 0; overflow: hidden; color: var(--muted); font-size: .9rem;
  font-weight: 400; text-overflow: ellipsis; white-space: nowrap;
}
/* Compact row: when the preview just repeats the title it is hidden (the
   [hidden] attribute), and the row sheds its reserved two-row height. */
.conversation-item:not(:has(.conversation-preview:not([hidden]))) { min-height: 0; }
.conversation-item:not(:has(.conversation-preview:not([hidden]))) .conversation-title { font-weight: 650; }
.history-search { margin: 0 0 .55rem; }
.history-search input { min-height: 44px; padding: .5rem .85rem; font-size: 1rem; }
.history-more { width: 100%; margin-top: .75rem; }
.delete-confirmation {
  position: fixed; inset: 0; z-index: 4; display: grid; place-items: center; padding: 1.1rem;
  background: rgba(8, 10, 14, .68); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.delete-confirmation-card {
  width: min(100%, 23rem); padding: 1.25rem; background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 16px; box-shadow: 0 16px 42px rgba(0, 0, 0, .3);
}
.delete-confirmation-card h2 { margin: 0 0 .55rem; font-size: 1.2rem; overflow-wrap: anywhere; }
.delete-confirmation-card p { margin: 0 0 1rem; color: var(--muted); }
.delete-chat-error:empty { display: none; }
.delete-chat-error:not(:empty) { color: var(--danger); }
.delete-confirmation-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
button.danger { background: var(--danger); color: #fff; border: 1px solid var(--danger); }
:root[data-theme="dark"] button.danger { color: #241417; }


main { width: min(100%, 54rem); flex: 1; min-height: 0; margin: 0 auto; display: flex; flex-direction: column; overflow-y: auto; }
/* Let the conversation's own scroller reach the browser edge on wide screens.
   Setup and settings keep the narrower reading width. */
main:has(#chat-view:not(.hidden)) { width: 100%; }
.card {
  margin: 1rem; padding: 1.35rem 1.2rem; border: 1px solid var(--border); border-radius: 16px;
  background: var(--surface); box-shadow: 0 1px 3px rgba(20,20,25,.06);
}
#pair-view {
  margin-top: clamp(2rem, 14vh, 6rem);
  /* brand-family-v1: the pairing welcome sits on the quiet brand paper
     surface; readable ink and fine rules in both appearances. */
  background: var(--brand-bg);
  border-color: var(--brand-rule);
  color: var(--family-ink);
}
#pair-view p { color: var(--brand-muted); }
#pair-view strong { color: var(--family-ink); }
#pair-view #show-manual {
  background: #192c35;
  border-color: #192c35;
  color: #f6f4ef;
}
:root[data-theme="dark"] #pair-view #show-manual {
  background: #dce7df;
  border-color: #dce7df;
  color: #192c35;
}
#pair-view input {
  background: var(--brand-surface);
  border-color: var(--brand-rule);
  color: var(--family-ink);
}
.brand-attribution {
  margin: 1.4rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--brand-rule);
  font-size: .88rem;
  color: var(--brand-muted);
}
.brand-attribution strong { color: var(--family-ink); }
.card h1, .card h2 { margin-top: 0; }
h1 { font-size: 1.5rem; line-height: 1.25; letter-spacing: -.015em; }
h2 { font-size: 1.2rem; letter-spacing: -.01em; }

.chat { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.messages {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  overflow-anchor: none; scrollbar-gutter: stable;
  list-style: none; margin: 0; padding: 1.15rem .9rem 1.25rem;
  display: flex; flex-direction: column; gap: 1rem;
  /* Native momentum; never layer smooth-scroll over streaming rAF updates. */
  scroll-behavior: auto;
}
.messages > .message:first-child { margin-top: auto; }
.message {
  flex-shrink: 0; min-width: 0; max-width: 92%; padding: .75rem 1rem; border-radius: 20px; background: var(--surface);
  border: 1px solid var(--message-border); box-shadow: 0 1px 2px rgba(20,20,25,.05); overflow-wrap: anywhere;
  font-size: 1rem; line-height: 1.5; font-weight: 400;
}
.message.user { max-width: 85%; white-space: pre-wrap; align-self: flex-end; background: var(--user-bg); color: var(--user-text); border-color: var(--user-border); border-bottom-right-radius: 5px; }
.message.assistant { align-self: flex-start; border-bottom-left-radius: 5px; }
/* Ordinary reply text is regular weight; only headings and explicit emphasis
   are heavier, so prose does not read as one long bold block. */
.message.assistant strong, .message.assistant b,
.message.assistant h1, .message.assistant h2, .message.assistant h3,
.message.assistant h4, .message.assistant h5, .message.assistant h6 { font-weight: 700; }
.message.failed { border: 1.5px solid var(--danger); }
.message > :first-child { margin-top: 0; }
.message > :last-child { margin-bottom: 0; }
.message p { margin: 0 0 .6em; }
.message ul, .message ol { margin: .65rem 0 .85rem; padding-left: 1.2rem; }
.message ul { list-style-type: disc; }
.message li { margin: .35rem 0; }
.message li::marker { color: var(--muted); }
.message blockquote {
  margin: .6rem 0; padding: .65rem .9rem; border-left: 3px solid var(--border-strong);
  background: var(--quote); border-radius: 8px; font-size: .97rem;
}
.message blockquote p { margin: .3rem 0; }
.message pre {
  max-width: 100%; padding: .7rem; overflow-x: auto; border-radius: 8px; background: var(--code); margin: .5rem 0;
}
.message code { background: var(--code); padding: .08em .35em; border-radius: 6px; font-size: .92em; }
.message pre code { background: none; padding: 0; font-size: .92em; }
.message img { max-width: 100%; height: auto; }
/* Photo sends: the image is the message; the caption is optional. */
.message.with-image { padding: .5rem; }
.sent-image { display: block; width: 100%; max-width: 320px; max-height: 340px; object-fit: cover; border-radius: 15px; }
.image-caption { display: block; padding: .5rem .5rem .25rem; white-space: pre-wrap; }
/* Compact attachment card: full-width filename above a separate action row. */
.file-card {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center;
  gap: .5rem .65rem; margin: .35rem 0; padding: .65rem;
  border: 1px solid var(--border-strong); border-radius: 12px; background: var(--chip);
  max-width: 100%; min-width: 0;
}
.file-card-icon { width: 26px; height: 26px; color: var(--accent-dim-ink); }
.file-card-meta { min-width: 0; display: flex; flex-direction: column; gap: .1rem; line-height: 1.3; }
.file-card-name {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere; font-weight: 600;
}
.file-card-size { color: var(--muted); font-size: .85rem; }
.file-card-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.file-card-action {
  min-width: 0; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  padding: .3rem .6rem; border-radius: 10px; text-decoration: none; font-weight: 600;
  background: var(--accent-soft); color: var(--accent-soft-ink); border: 1px solid color-mix(in srgb, var(--accent-border) 55%, var(--accent-soft));
  cursor: pointer; font-size: inherit;
}
button.file-card-action { appearance: none; }
.file-card-action.secondary { background: transparent; color: var(--accent-soft-ink); }
.file-card-expired { flex: 0 0 auto; align-self: center; color: var(--muted); font-size: .85rem; }
/* In-app document preview overlay with an explicit way back to the chat. */
.file-preview {
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column;
  background: var(--bg);
}
.file-preview-bar {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .6rem .9rem; padding-top: calc(.6rem + env(safe-area-inset-top));
  background: var(--header-bg); color: var(--header-text);
}
.file-preview-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.file-preview-close {
  flex: 0 0 auto; min-height: 44px; min-width: 64px; border: none; border-radius: 999px;
  padding: .35rem 1rem; font-weight: 600; font-size: 1rem; cursor: pointer;
  background: var(--header-button); color: var(--header-text);
}
.file-preview-frame { flex: 1 1 auto; width: 100%; border: none; background: var(--surface); }
.file-preview-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.file-preview-pages {
  flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px;
}
.file-preview-page { background: #ffffff; box-shadow: 0 1px 4px rgba(0,0,0,.25); border-radius: 4px; max-width: 100%; height: auto; }
.file-preview-note { margin: auto 1.5rem; color: var(--muted); text-align: center; }
.bubble-actions { display: flex; justify-content: flex-end; margin-top: .45rem; }
.response-copy {
  min-width: 44px; min-height: 44px; margin: 0 -.45rem -.45rem 0; padding: .45rem; border: 0; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--muted);
  font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
}
.response-copy svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.response-copy:hover { background: var(--chip); color: var(--text); }
.response-copy:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.empty-state {
  margin: auto 1.5rem; padding: 2rem 0; flex-shrink: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; color: var(--muted); gap: .3rem;
}
.empty-state strong { display: block; font-size: 1.35rem; color: var(--text); margin-bottom: .3rem; }
.empty-eyebrow { font-size: .7rem; letter-spacing: .12em; font-weight: 700; color: #92531f; margin-bottom: .4rem; }
:root[data-theme="dark"] .empty-eyebrow { color: #e8b484; }

.run-state {
  display: flex; align-items: center; gap: .5rem; width: min(100%, 47.5rem); max-width: 100%;
  flex: 0 0 auto; margin: 0 auto .4rem; padding: .1rem .35rem .2rem;
  background: transparent; color: var(--muted); font-size: .82rem; line-height: 1.35; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.run-state.activity::before {
  content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  animation: activity-pulse 1.4s ease-in-out infinite;
}
@keyframes activity-pulse {
  0%, 100% { opacity: .5; transform: scale(.82); }
  50% { opacity: 1; transform: scale(1); }
}
.composer {
  position: relative; z-index: 4; flex: 0 0 auto; width: 100%;
  padding: 1rem max(.75rem, env(safe-area-inset-right)) max(.75rem, env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left));
  background: transparent;
}
.composer textarea { font-size: 1rem; }
.jump-to-bottom {
  position: fixed; z-index: 30; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0;
  left: 50%; right: auto; transform: translateX(-50%);
  bottom: calc(var(--composer-height, 96px) + 12px + env(safe-area-inset-bottom));
  display: inline-flex; justify-content: center; align-items: center;
  border: 1px solid var(--composer-border); border-radius: 22px;
  background: var(--composer); color: var(--text);
  box-shadow: var(--composer-shadow);
  animation: jump-fade-in 160ms ease;
}
.jump-to-bottom:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@keyframes jump-fade-in {
  from { opacity: 0; transform: translate(-50%, 4px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.composer-actions, .button-row, .section-heading { display: flex; align-items: center; gap: .55rem; }
.composer-row {
  width: min(100%, 47.5rem); margin: 0 auto; padding: .25rem; display: flex; align-items: flex-end; gap: .25rem;
  background: var(--composer); border: 1px solid var(--composer-border); border-radius: 18px;
  box-shadow: inset 0 1px 0 var(--composer-highlight), var(--composer-shadow);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
/* Typing on touch keeps the composer quiet; fine-pointer keyboard users retain a focus cue. */
@media (hover: hover) and (pointer: fine) {
  .composer-row:has(#message:focus-visible) {
    border-color: var(--focus);
    box-shadow: inset 0 1px 0 var(--composer-highlight), var(--composer-shadow), 0 0 0 3px color-mix(in srgb, var(--focus) 18%, transparent);
  }
}
.composer-row #message {
  flex: 1; width: 0; min-width: 0; min-height: 44px; padding: .55rem .35rem;
  background: var(--composer); border: 0; border-radius: 12px; outline: none;
}
.composer-row button { flex-shrink: 0; min-width: 44px; min-height: 44px; padding: .5rem .8rem; border-radius: 14px; }
.composer-row:has(#stop-button:not(.hidden)) #send-button { display: none; }
.file-button {
  display: inline-flex; justify-content: center; align-items: center; flex: 0 0 44px; width: 44px; height: 44px;
  margin: 0; padding: 0; border: 0; border-radius: 14px; background: var(--composer); color: var(--text);
}
/* Visually hidden but never pointer-interactive: their static position in the
   composer row would otherwise intercept taps meant for the attach button.
   pointer-events: none is safe — they are only opened via .click(). */
#file, #files { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.attachment {
  width: min(100%, 47.5rem); margin: 0 auto .65rem; padding: .55rem .7rem;
  border: 1px solid var(--composer-border); border-radius: 12px; background: var(--composer); font-size: .92rem;
}
.attach-menu {
  /* Anchor to the attach trigger, not the viewport: this element is already
     inside .composer, so subtracting --composer-height placed it mid-chat. */
  position: absolute; bottom: calc(100% - .5rem);
  left: max(1rem, calc((100% - 47.5rem) / 2 + 1rem));
  z-index: 30; display: grid; gap: .25rem; width: 12rem; max-width: calc(100% - 2rem); padding: .4rem;
  border: 1px solid var(--composer-border); border-radius: 14px; background: var(--composer);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.attach-menu-item {
  display: flex; align-items: center; gap: .6rem; width: 100%; margin: 0; padding: .65rem .75rem;
  border: 0; border-radius: 10px; background: none; color: var(--text); font-size: .95rem; text-align: left;
}
.attachment-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.attachment-chip {
  display: inline-flex; align-items: center; gap: .5rem; max-width: 100%;
  padding: .35rem .55rem; border: 1px solid var(--border); border-radius: 10px; background: var(--chip);
}
.attachment-chip.uploading { opacity: .7; }
.attachment-thumb { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; flex: 0 0 auto; }
.attachment-icon { font-size: 1.1rem; line-height: 1; }
.attachment-chip-info { display: flex; flex-direction: column; min-width: 0; }
.attachment-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 12rem; }
.attachment-chip-size { font-size: .78rem; opacity: .7; }
.attachment-remove {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 8px;
  background: none; color: var(--text); font-size: 1.1rem; line-height: 1;
}
.attachment-error { margin: 0 0 .4rem; padding: .35rem .55rem; border-left: 4px solid var(--danger); border-radius: 6px; background: var(--danger-bg); font-size: .88rem; }
.spinner {
  display: inline-block; width: .85rem; height: .85rem; margin-right: .45rem; vertical-align: -.05em;
  border: 2px solid rgba(255,255,255,.35); border-top-color: currentColor; border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }

/* Pairing */
#pair-view.card { max-width: 30rem; margin: 2.5rem auto; }
.pair-steps { margin: 1rem 0 0; padding-left: 1.35rem; display: grid; gap: .9rem; }
.pair-steps li::marker { font-weight: 700; color: var(--text); }
.pair-steps li { padding-left: .25rem; }
.pair-command-row { display: flex; align-items: center; gap: .5rem; background: var(--chip); border: 1px solid var(--border); border-radius: 10px; padding: .5rem .65rem; margin-top: .45rem; }
.pair-command-row code { flex: 1; font-size: .95rem; background: none; padding: 0; }
.copy-chip { min-height: 40px; padding: .35rem .8rem; font-size: .9rem; border-radius: 8px; }
.token-input-row { display: flex; gap: .55rem; align-items: stretch; }
#pair-token { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1rem; }
.paste-button { min-height: 48px; padding: .45rem .9rem; font-size: .95rem; }
.pair-error { margin-top: .9rem; padding: .6rem .75rem; border-left: 4px solid var(--danger); border-radius: 8px; background: var(--danger-bg); font-size: .95rem; }
.pair-error:empty { display: none; }
.center { text-align: center; }
.linklike { background: none; border: 0; color: var(--focus); font-weight: 600; min-height: 44px; padding: .4rem .6rem; }
.setup-note { margin: 1rem auto 2.5rem; max-width: 30rem; }

/* Settings */
.settings-card {
  padding: 1rem; border-color: var(--settings-border); border-radius: 14px;
  box-shadow: var(--settings-shadow);
}
.settings-card h2,
.settings-card h3 { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 650; letter-spacing: -.01em; }
.settings-card .hint { font-size: 14px; line-height: 1.45; }
.settings-card > .hint { margin: .25rem 0 0; }
.settings-divider { height: 1px; margin: .9rem 0; background: var(--settings-divider); }
.appearance-options { border: 0; padding: 0; min-width: 0; }
.theme-options {
  height: 44px; display: flex; gap: 0; margin: .65rem 0 0;
  overflow: visible; border: 1px solid var(--settings-border); border-radius: 11px;
  background: var(--settings-control);
}
.theme-options label {
  flex: 1; min-width: 0; min-height: 44px; margin: -1px 0; padding: 4px 3px;
  position: relative; display: flex; align-items: center; text-align: center;
}
.theme-options input { position: absolute; opacity: 0; width: 1px; height: 1px; padding: 0; }
.theme-options span {
  width: 100%; height: 36px; display: flex; align-items: center; justify-content: center;
  padding: 0 .25rem; border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--muted); cursor: pointer; font-size: .9rem; font-weight: 600;
}
.theme-options input:checked + span {
  background: var(--settings-selected); color: var(--text); border-color: var(--settings-selected-border);
  box-shadow: 0 1px 2px rgba(10, 15, 24, .14);
}
.theme-options input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
#appearance-hint { margin-bottom: 0; }
/* Highlight colour: the swatch is the only place Settings itself shows colour. */
.highlight-options {
  display: grid; grid-template-columns: repeat(5, minmax(44px, 1fr));
  gap: .4rem .25rem; margin: .65rem 0 0;
}
.highlight-options label {
  min-width: 0; min-height: 58px; margin: 0; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .32rem;
  border-radius: 10px; cursor: pointer;
}
.highlight-options input { position: absolute; opacity: 0; width: 1px; height: 1px; padding: 0; }
.highlight-options .swatch {
  position: relative; width: 32px; height: 32px; min-height: 32px; border-radius: 8px;
  border: 1px solid rgba(128, 128, 128, .38); box-sizing: border-box;
  transition: box-shadow 120ms ease, transform 120ms ease;
}
.highlight-options .swatch::after {
  content: ""; position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; font-size: 16px; line-height: 1; font-weight: 800;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.highlight-options .swatch-blue { background: #1a63d6; }
:root[data-theme="dark"] .highlight-options .swatch-blue { background: #2173e3; }
.highlight-options .swatch-teal { background: #0f766e; }
.highlight-options .swatch-violet { background: #7c3aed; }
.highlight-options .swatch-amber { background: #a84d06; }
.highlight-options .swatch-rose { background: #be123c; }
.highlight-options .swatch-green { background: #15803d; }
.highlight-options .swatch-lime { background: #4d7c0f; }
.highlight-options .swatch-orange { background: #c2410c; }
.highlight-options .swatch-pink { background: #be185d; }
.highlight-options .swatch-indigo { background: #4338ca; }
/* Preview the actual saturated Send fill for each dark-mode highlight. */
:root[data-theme="dark"] .highlight-options .swatch-teal { background: #078276; }
:root[data-theme="dark"] .highlight-options .swatch-violet { background: #8152e0; }
:root[data-theme="dark"] .highlight-options .swatch-amber { background: #e4a126; }
:root[data-theme="dark"] .highlight-options .swatch-rose { background: #ca264e; }
:root[data-theme="dark"] .highlight-options .swatch-green { background: #168545; }
:root[data-theme="dark"] .highlight-options .swatch-lime { background: #a4ce34; }
:root[data-theme="dark"] .highlight-options .swatch-orange { background: #e77828; }
:root[data-theme="dark"] .highlight-options .swatch-pink { background: #cb2b78; }
:root[data-theme="dark"] .highlight-options .swatch-indigo { background: #5353d9; }
:root[data-theme="dark"] .highlight-options :is(.swatch-amber, .swatch-lime, .swatch-orange)::after {
  color: #121922; text-shadow: none;
}
.highlight-options input + .swatch,
.highlight-options input + .swatch + span { cursor: pointer; }
.highlight-options input:checked + .swatch {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text);
  transform: translateY(-1px);
}
.highlight-options input:checked + .swatch::after { content: "✓"; }
.highlight-options input:focus-visible + .swatch { outline: 3px solid var(--focus); outline-offset: 3px; }
.highlight-options input:checked + .swatch + span { color: var(--text); font-weight: 650; }
.highlight-options span:last-child {
  display: block; min-height: 16px; border: 0; color: var(--muted);
  font-size: .75rem; line-height: 1.25; font-weight: 500;
}
#highlight-hint { margin-bottom: 0; }
.setting-toggle {
  min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin: .7rem 0 0; cursor: pointer;
}
.setting-toggle > span { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.setting-toggle strong, .setting-row-title, .settings-info-row > strong { font-size: .95rem; line-height: 1.35; font-weight: 650; }
.setting-toggle .hint { line-height: 1.4; font-weight: 400; }
.setting-toggle input[type="checkbox"] {
  position: relative; flex: 0 0 auto; width: 50px; height: 30px; margin: 0; padding: 0;
  appearance: none; -webkit-appearance: none; border: 1px solid var(--border-strong);
  border-radius: 999px; background: var(--chip); cursor: pointer; transition: background-color 140ms ease, border-color 140ms ease;
}
.setting-toggle input[type="checkbox"]::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--text); opacity: .72; transition: transform 140ms ease, opacity 140ms ease;
}
.setting-toggle input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
.setting-toggle input[type="checkbox"]:checked::before { transform: translateX(20px); background: var(--accent-ink); opacity: 1; }
.setting-toggle input[type="checkbox"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.setting-block { min-width: 0; }
.setting-copy { margin: .25rem 0 .65rem; color: var(--muted); font-size: 14px; line-height: 1.45; }
.settings-actions { gap: .5rem; margin-top: .65rem; }
#qr-target { background: #fff; border-radius: 8px; padding: .5rem; width: fit-content; margin: auto; }
#qr-target:empty { display: none; }
.settings {
  width: min(100%, 42rem); flex: 1; min-height: 0; margin: 0 auto;
  overflow-y: auto; padding: .75rem 0 calc(2rem + env(safe-area-inset-bottom));
}
.settings > .section-heading { padding: 0 1rem .75rem; justify-content: space-between; }
.settings > .section-heading h1 { margin: 0; font-size: 1.35rem; }
.settings > .settings-card { margin: 0 1rem .75rem; }
.settings button {
  height: 44px; min-height: 44px; padding: .5rem .85rem;
  border-radius: 10px; font-size: .9rem; font-weight: 600;
}
.settings-info-list { margin-top: .45rem; }
.settings-info-row { padding: .7rem 0; border-top: 1px solid var(--settings-divider); }
.settings-info-row:first-child { border-top: 0; }
.settings-info-row .hint { margin: .2rem 0 0; }
.device-item { display: flex; align-items: center; gap: .7rem; padding: .75rem 0; border-bottom: 1px solid var(--settings-divider); }
.device-item:last-child { border-bottom: 0; }
.device-icon { position: relative; flex: 0 0 auto; display: block; color: var(--muted); }
.device-mobile { width: 16px; height: 22px; border: 1.5px solid currentColor; border-radius: 3px; }
.device-mobile::after {
  content: ""; position: absolute; left: 50%; bottom: 2px; width: 3px; height: 1.5px;
  border-radius: 999px; background: currentColor; transform: translateX(-50%);
}
.device-desktop { width: 22px; height: 15px; margin-bottom: 5px; border: 1.5px solid currentColor; border-radius: 2px; }
.device-desktop::before {
  content: ""; position: absolute; left: 50%; top: 100%; width: 1.5px; height: 4px;
  background: currentColor; transform: translateX(-50%);
}
.device-desktop::after {
  content: ""; position: absolute; left: 50%; top: calc(100% + 4px); width: 10px; height: 1.5px;
  border-radius: 999px; background: currentColor; transform: translateX(-50%);
}
.device-main { flex: 1; min-width: 0; }
.device-name { font-weight: 650; }
.device-meta { display: flex; flex-direction: column; gap: .05rem; color: var(--muted); font-size: .82rem; }
.danger { background: var(--surface); color: var(--danger); border: 1px solid var(--danger-border); }
.advanced.settings-card { padding: .5rem 1rem; }
.advanced > summary {
  min-height: 44px; display: flex; align-items: center; justify-content: space-between; cursor: pointer;
  color: var(--text); font-size: .9rem; font-weight: 600; list-style: none;
}
.advanced > summary::-webkit-details-marker { display: none; }
.advanced > summary::after {
  content: "›"; flex: 0 0 auto; margin-left: 1rem; color: var(--muted);
  font-size: 1.35rem; line-height: 1; transform-origin: center; transition: transform 140ms ease;
}
.advanced[open] > summary::after { transform: rotate(90deg); }
.advanced[open] > summary { padding-bottom: .65rem; border-bottom: 1px solid var(--settings-divider); color: var(--text); }
.advanced-content { padding-top: .75rem; }
.advanced-content > .section-heading { justify-content: space-between; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { padding: .5rem .4rem; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.status-yes { color: var(--success); font-weight: 700; }
.status-no { color: var(--muted); }

@media (max-width: 359px) {
  .highlight-options { grid-template-columns: repeat(4, minmax(44px, 1fr)); }
}

@media (max-width: 699px) {
  .message { font-size: 1.125rem; }
}
@media (min-width: 700px) {
  .history-panel {
    width: min(92vw, 430px); min-width: min(300px, 100vw);
    border-left: 1px solid var(--border); box-shadow: -18px 0 44px rgba(0, 0, 0, .24);
  }
  /* v49 desktop density refinement: the phone look is the reference, so wide
     screens shed the extra card weight. Text size (16px), button sizing and
     touch targets are untouched. */
  .messages { padding: 1.15rem 1.25rem 1.25rem; gap: .75rem; }
  .message, .message.user { max-width: min(76%, 38rem); }
  .message {
    padding: .625rem .875rem; border-radius: 14px; line-height: 1.45;
    border-color: var(--bubble-border); box-shadow: none;
  }
  /* Review fix: the base .message.user rule outranks a bare .message, so the
     quiet token above only ever reached assistant bubbles — user bubbles kept
     the loud --user-border outline on wide screens. Re-assert at matching
     strength via the per-theme --user-border-desktop; :not(.failed) leaves
     the danger outline on failures alone. */
  .message.user:not(.failed) { border-color: var(--user-border-desktop, var(--bubble-border)); }
  /* The message scroller has 1.25rem side padding; offset bubbles to the
     same 47.5rem centred column as the composer rather than the old 54rem. */
  .message.assistant { margin-left: max(0px, calc((100vw - 47.5rem) / 2 - 1.25rem)); }
  .message.user { margin-right: max(0px, calc((100vw - 47.5rem) / 2 - 1.25rem)); }
  .message.assistant :is(strong, b, h1, h2, h3, h4, h5, h6) { font-weight: 600; }
  .card { margin-left: 2rem; margin-right: 2rem; padding: 1.5rem; }
  #pair-view.card { margin: 3rem auto; }
}
/* v50 desktop-only header/button compaction (wide pointers, no touch, >=700px):
   the phone header is the reference and stays exactly as shipped. The width
   floor matters as much as the pointer: a narrow desktop window keeps the
   phone layout, which is width-driven. */
@media (hover: hover) and (pointer: fine) and (min-width: 700px) {
  /* Native desktop text renders more cleanly at 16px than the bundled display
     face. Keep the larger DM Sans treatment on touch screens unchanged. */
  :root { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
  .app-header strong, h1, h2, .empty-state strong { font-family: inherit; }
  .app-header { min-height: 0; padding: .45rem 1rem; gap: 1.25rem; }
  .app-header strong { font-size: .95rem; font-weight: 600; }
  .app-brand { gap: .5rem; }
  .app-logo { height: 23px; }
  .connection { font-size: .78rem; gap: .3rem; }
  .status-dot { width: 7px; height: 7px; }
  .app-header .icon-button {
    min-height: 0; padding: .4rem .8rem; font-size: .8rem;
    border-radius: 9px;
  }
  .app-header .header-new-chat {
    width: 32px; height: 32px; min-width: 32px; min-height: 32px; padding: 0;
  }
  .app-header .header-new-chat svg { width: 19px; height: 19px; }
  .app-header .settings-icon-button {
    width: 32px; height: 32px; min-width: 32px; min-height: 32px; padding: 0;
  }
  .app-header .settings-icon-button svg { width: 19px; height: 19px; }
}
/* Only intentional theme changes fade; initial paint is immediate. */
html.theme-changing, .theme-changing * {
  transition-property: background-color, color, border-color, box-shadow;
  transition-duration: 180ms;
  transition-timing-function: ease;
}
/* Motion explains arrivals and interactions, never each streamed token. */
.message-enter { animation: message-in 160ms ease-out; }
.settings:not(.hidden), #pair-view:not(.hidden) { animation: view-in 140ms ease-out; }
/* Streaming is rendered Markdown too: block spacing, not source newlines. */
.message.streaming { white-space: normal; text-wrap: stable; }
.message h1, .message h2, .message h3 { margin: 1rem 0 .5rem; line-height: 1.35; }
.message h1 { font-size: 1.25rem; }
.message h2 { font-size: 1.12rem; }
.message h3 { font-size: 1rem; }
.message a { color: var(--link); text-underline-offset: .15em; }
.message table { display: block; max-width: 100%; overflow-x: auto; }
.message > :first-child { margin-top: 0; }
.message > :last-child { margin-bottom: 0; }
.button-row { flex-wrap: wrap; }
.advanced { margin: .5rem 1rem; }
.attachment, .run-state, .device-name { overflow-wrap: anywhere; }
#pair-view.card { width: calc(100% - 2rem); flex-shrink: 0; }
#message:focus { outline: none; border-color: transparent; box-shadow: none; }
.file-button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
button:not(:disabled):active, .file-button:active { transform: scale(.97); }
@media (hover: hover) {
  button:not(:disabled):hover, .file-button:hover { box-shadow: inset 0 0 0 999px rgba(128,128,128,.12); }
}
@keyframes message-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes view-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 360px) {
  .app-header { padding-left: .65rem; padding-right: .65rem; gap: .35rem; }
  .app-header strong { font-size: 1rem; }
  .icon-button { padding: .4rem .55rem; }
  .connection { font-size: .76rem; }
  .messages { padding-left: .65rem; padding-right: .65rem; }
  .message { max-width: 94%; padding: .8rem .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}