/*
 * Murmur theme: Blend style with the Deep space colors.
 * Exported from the style preview and loaded after app.css, so it overrides
 * the base styles. The particle background is set up in background.js; the
 * sliding focus highlight and typewriter headline are in chat.js.
 */
:root {
  --bg: #F5F7FF; --panel: #E9EDFA; --surface: #FFFFFF; --ink: #0A0A0A;
  --muted: #5C5C5C; --line: #D5DBEE; --accent: #04050A; --accent-ink: #FFFFFF;
  --bubble: #E6EBFA; --kw: rgba(10,10,10,0.09); --danger: #0A0A0A; --sel: rgba(10,10,10,0.07);
  --body: "Jost", "Segoe UI", system-ui, -apple-system, sans-serif;
  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --bg: #05080E; --panel: #020306; --surface: #0C0E18; --ink: #FFFFFF;
  --muted: #A0A0A0; --line: #1E2336; --accent: #C7C833; --accent-ink: #0A0A0A;
  --bubble: #151A2C; --kw: rgba(255,255,255,0.14); --danger: #FFFFFF; --sel: rgba(255,255,255,0.09);
  }
}
:root[data-theme="dark"] {
  --bg: #05080E; --panel: #020306; --surface: #0C0E18; --ink: #FFFFFF;
  --muted: #A0A0A0; --line: #1E2336; --accent: #C7C833; --accent-ink: #0A0A0A;
  --bubble: #151A2C; --kw: rgba(255,255,255,0.14); --danger: #FFFFFF; --sel: rgba(255,255,255,0.09);
}
body { font-size: 17px; }
.empty h1 { font-size: calc(clamp(2rem, 5vw, 3rem) * 0.95); font-weight: 500; letter-spacing: -0.03em; max-width: 18ch; }
.brand { font-weight: 500; }
.empty .picker-head { text-transform: uppercase; letter-spacing: .08em; }
/* Typewriter headline: every headline sits invisibly in the same spot, so the heading
   reserves room for the longest one and the page below never shifts */
.typer { display: grid; }
.typer > .typer-sizer, .typer > .typer-line { grid-area: 1 / 1; }
.typer-sizer { display: grid; visibility: hidden; }
.typer-sizer > span { grid-area: 1 / 1; }
.typer-caret { width: 2px; height: .92em; margin-left: .06em; vertical-align: -.06em; }
.typer.typing .typer-caret { animation: none; }
/* Sliding focus highlight: one shape behind the options glides to the selected one */
.pills { position: relative; }
.pill { position: relative; z-index: 1; transition: color .3s ease, border-color .3s ease; }
.pill-indicator { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.12); border-radius: 5px; transition: transform .45s cubic-bezier(.3,.7,.2,1), width .45s cubic-bezier(.3,.7,.2,1), height .45s cubic-bezier(.3,.7,.2,1); }
.pills.has-indicator .pill[aria-checked="true"] { background: transparent; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .pill-indicator { transition: none; } }
/* Selected focus stays regular weight, so the focus bar keeps the same width whichever option is chosen */
.pill[aria-checked="true"] { font-weight: 400; }
.composer { border-radius: 5.5px; }
.msg-user { border-radius: 5px 5px 1.5px 5px; }
.chip, .pill, .topic-btn { border-radius: 5px; }
.pills { border-radius: 5.5px; }
.send { border-radius: 4.8px; }
.topic-menu { border-radius: 3.5px; }
.topic-opt { border-radius: 2.3px; }

/* Left-aligned grid: welcome, conversation and message box share one column */
.empty { align-items: flex-start; text-align: left; width: 100%; max-width: 820px; margin: 0 auto; padding: 56px 24px 8px; }
.empty .chips, .empty .pills { justify-content: flex-start; }
.thread { max-width: 820px; padding-left: 24px; padding-right: 24px; }
.composer-wrap { padding-left: 24px; padding-right: 24px; }
.composer, .hint { max-width: 772px; }
@media (max-width: 760px) {
  .empty { padding-top: 24px; }
}

/* Blend: halfway between Soft and Bauhaus */
:root { --bw: 1px; --edge: var(--line); }
.pub-top { border-bottom: 1px solid var(--line); }
.empty h1 { line-height: 1.02; }
.empty .intro { border-left: 3px solid var(--accent); padding-left: 14px; }
.pills { background: var(--panel); padding: 4px; gap: 4px; border: var(--bw) solid var(--edge); border-radius: 24px; }
/* Focus options are fully rounded; the holder's 24px corner is their radius (about 19px) plus its 4px padding and border, so the curves stay concentric even when the options wrap onto two rows */
.pill { border-radius: 999px; }
.pill[aria-checked="true"] { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.pill-indicator { background: var(--accent); box-shadow: none; border-radius: 999px; }
.chip { border: var(--bw) solid var(--edge); border-radius: 5px; }
.chip:hover { border-color: var(--muted); }
.topic-btn { border: var(--bw) solid var(--edge); border-radius: 5px; }
.topic-btn:hover { border-color: var(--muted); }
.topic-menu { border: var(--bw) solid var(--edge); border-radius: 3.5px; }
.composer { border: var(--bw) solid var(--edge); border-radius: 5.5px; box-shadow: 0 4px 16px -10px rgba(0,0,0,.25); }
.composer:focus-within { border-color: var(--muted); }
.msg-user { border: var(--bw) solid var(--edge); border-radius: 5px 5px 1.5px 5px; }
.send { border-radius: 50%; }
.caret { background: var(--ink); }
/* Clear surfaces, on the welcome screen and in the conversation: no fill, border kept, 3px background blur */
.pills, .composer, .chip, .msg-user, .topic-btn { background: transparent; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.pills { box-shadow: none; }
.msg-user { border: var(--bw, 1px) solid var(--edge, var(--line)); color: var(--ink); }
.bot-text { display: inline-block; max-width: 100%; padding: 10px 16px; border: var(--bw, 1px) solid var(--edge, var(--line)); border-radius: 5px 5px 5px 1.5px; background: transparent; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.msg-bot > .mark { margin-top: 8px; }
/* Focus selector holder: no border, tinted with the accent at 10% */
.pills { border: 0; background: var(--sel); background: color-mix(in srgb, var(--accent) 10%, transparent); }
/* Conversation: text at 70% of the way from the background to the text color */
.thread .bot-text, .thread .msg-user { color: var(--muted); color: color-mix(in srgb, var(--ink) 70%, var(--bg)); }
/* Your messages: rounded on three corners, with a small point at the bottom right */
.thread .msg-user { border-radius: 14px 14px 1.5px 14px; }
/* Replies: the same shape mirrored, with the small point at the bottom left, outlined in the accent color */
.thread .bot-text { border-radius: 14px 14px 14px 1.5px; border-color: var(--edge, var(--line)); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
/* Only the latest reply's avatar is in color; earlier ones are greyed out */
.msg-bot > .mark { transition: filter .6s ease, opacity .6s ease; }
.msg-bot:has(~ .msg-bot) > .mark { filter: grayscale(1); opacity: .55; }