/* Quotes are set in Newsreader (bundled, close to Apple's New York); everything else uses the system
   font (SF Pro on macOS), which already carries Apple's optical sizes and tracking tables. */
@font-face { font-family: "Newsreader"; font-weight: 400; font-display: swap; src: url("fonts/newsreader-400.woff2") format("woff2"); }

:root {
  /* 8px grid */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;

  /* Corners: continuous-feeling, concentric where things nest (outer = inner + gap). */
  --radius-container: 12px;   /* conversation cards, menus */
  --inset-container: 16px;
  --radius-row: 4px;          /* entry rows: 12px card − 8px inset */
  --radius-item: 6px;         /* menu items: 12px menu − 6px padding */
  --inset-nested: 8px;
  --radius-control: 10px;     /* search, fields, buttons */

  --font-heading: "Newsreader", "New York", Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;

  /* Type scale, Apple-style: hierarchy from weight + size + leading together. Leading is unitless
     so it scales with the size, and every role that wraps to 3+ lines gets at least 1.4. */
  --type-large-title: 400 36px/1.1 var(--font-heading); /* page title, tracked -0.02em */
  --type-quote: 400 17px/1.5 var(--font-heading);       /* the saved passage: reading text, so reading size and leading */
  --type-serif-title: 400 20px/1.3 var(--font-heading); /* empty-state heading */
  --type-headline: 600 15px/1.3 var(--font-body);       /* conversation title, day, popover title */
  --type-body: 400 15px/1.55 var(--font-body);          /* prompt, response, note, search */
  --type-callout: 400 13px/1.4 var(--font-body);        /* summary, segments, menu items, empty-state copy */
  --type-control: 500 13px/1.4 var(--font-body);        /* buttons, toast */
  --type-footnote: 400 12px/1.4 var(--font-body);       /* time, hints, labels */
  --type-code: 600 17px/1 var(--font-body);             /* one-time-code cells */

  /* Neutrals match ChatGPT's chat surface, so the extension reads as part of the page. Fills and
     separators are Apple's translucent greys, so they sit correctly on either background. */
  --bg: #ffffff;
  --surface: #ffffff;
  --text: #0d0d0d;
  --muted: #616166;                          /* ≥4.5:1 on white and on the grey fills */
  --fill: rgba(118, 118, 128, 0.12);         /* search, fields, segmented track */
  --fill-hover: rgba(118, 118, 128, 0.08);   /* row hover */
  --separator: rgba(0, 0, 0, 0.08);
  --material: rgba(255, 255, 255, 0.72);     /* toolbar, menus, popovers: blurred, content shows through */
  --thumb: #ffffff;
  --accent: #f0ad00;                         /* the ★'s gold, used as the app tint (like Notes' yellow) */
  --accent-text: #8f6200;                    /* gold dark enough to read as text on white */
  --on-accent: #241a00;
  --danger: #ff3b30;
  --danger-text: #d70015;                    /* red that passes 4.5:1 as small text */
  --success: #248a3d;
  --mark: color-mix(in srgb, var(--accent) 30%, transparent);   /* search match inside text */
  --accent-tint: color-mix(in srgb, var(--accent) 24%, transparent);   /* just-saved glow: meant to be noticed */
  --accent-hover: color-mix(in srgb, var(--accent) 12%, transparent);  /* menu hover: a hint of the brand, not a highlight */
  --shadow-card: 0 0 0 0.5px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.04);
  --shadow-float: 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.12);
  --shadow-thumb: 0 0 0 0.5px rgba(0, 0, 0, 0.04), 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* close to a critically damped spring */
  --type-highlight: #a87700;                 /* the star: darker than the accent so it reaches 3:1 */
  --type-insight: #7a5af8;
  --type-action: #007aff;

  /* Your question, as a chat bubble: a soft blue tint, like a sent message. */
  --bubble-bg: #eaf1fb;
  --on-bubble: #1d2a44;                      /* 12.6:1 on the bubble */

  /* The toast is an inverted surface in both themes. */
  --toast-bg: rgba(28, 28, 30, 0.86);
  --on-toast: #ffffff;
  --on-toast-muted: rgba(255, 255, 255, 0.7);
  --toast-hover: rgba(255, 255, 255, 0.14);
  --toast-success: #30d158;
  --toast-danger: #ff6961;                   /* 3.9:1 on the light toast, 3.4:1 on the dark one */
  --shadow-toast: 0 8px 24px rgba(0, 0, 0, 0.18);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #212121;
    --surface: #2a2a2a;
    --text: #ececec;
    --muted: #b4b4b8;
    --fill: rgba(118, 118, 128, 0.24);
    --fill-hover: rgba(118, 118, 128, 0.16);
    --separator: rgba(255, 255, 255, 0.08);
    --material: rgba(44, 44, 46, 0.72);
    --thumb: #636366;
    --accent: #ffd60a;
    --accent-text: #ffd60a;
    --on-accent: #241a00;
    --danger: #ff453a;
    --danger-text: #ff6961;
    --success: #30d158;
    --mark: rgba(255, 214, 10, 0.28);
    --shadow-card: 0 0 0 0.5px rgba(255, 255, 255, 0.06);
    --shadow-float: 0 0 0 0.5px rgba(255, 255, 255, 0.1), 0 12px 32px rgba(0, 0, 0, 0.5);
    --shadow-thumb: 0 3px 8px rgba(0, 0, 0, 0.24);
    --type-highlight: #ffd60a;
    --toast-bg: rgba(72, 72, 74, 0.9);
    --bubble-bg: #26324a;
    --on-bubble: #e3ebf7;                    /* 10.7:1 on the bubble */
    --type-insight: #bf9cff;
    --type-action: #0a84ff;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
}

/* A full-height column, so an empty state can take the space left under the toolbar. */
main {
  --gutter: var(--space-2);
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-6) var(--gutter);
}

@media (min-width: 640px) {
  main { --gutter: var(--space-3); }
}

/* Chrome's side panel header already names the extension: no title, toolbar at the top. */
main.panel { padding-top: 0; }

/* The page title shares the quotes' serif: the one place the UI itself speaks in the editorial voice. */
.page-header { margin: 0 0 var(--space-2); }

h1 {
  font: var(--type-large-title);
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

.summary {
  margin: 4px 0 0;
  font: var(--type-callout);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Lucide icons, drawn a touch lighter than its default, closer to SF Symbols' regular weight. */
svg.lucide { stroke-width: 1.5; flex-shrink: 0; }

/* One focus indicator for every control: an outline (kept in forced-colors mode), in the gold
   that reads as text: 5.4:1 on white, 10:1 in dark. */
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Empty states ------------------------------------------------------------------------ */
/* Fills the space under the toolbar and centres in it, nudged up by the bottom padding: true centre
   reads as low, so this sits a little above it, where it looks centred. */
.empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding-bottom: var(--space-6);
  max-width: 320px;
  text-align: center;
}

.empty-state h2 { font: var(--type-serif-title); letter-spacing: -0.01em; margin: var(--space-2) 0 4px; }
.empty-state p { margin: 0; font: var(--type-callout); color: var(--muted); text-wrap: pretty; }
.empty-state strong { color: var(--text); font-weight: 600; white-space: nowrap; }
.empty-state.compact .text-button { margin-top: 4px; font: var(--type-callout); }

/* The three type markers, tossed loosely like stickers; they settle in one after another. */
.empty-glyphs { display: flex; gap: 12px; }
.empty-glyphs .type-icon { height: 22px; width: auto; animation: settle 500ms var(--ease-out) backwards; }
.empty-glyphs .type-icon:nth-child(1) { transform: rotate(-12deg); }
.empty-glyphs .type-icon:nth-child(2) { transform: translateY(-4px); animation-delay: 100ms; }
.empty-glyphs .type-icon:nth-child(3) { transform: rotate(10deg); animation-delay: 200ms; }

@keyframes settle { from { opacity: 0; translate: 0 8px; scale: 0.6; } }

kbd {
  display: inline-block;
  min-width: 20px;
  margin: 0 1px;
  padding: 2px 5px;
  font: var(--type-footnote);
  font-weight: 600;
  color: var(--text);
  text-align: center;
  background: var(--surface);
  border-radius: 5px;
  box-shadow: 0 0 0 0.5px var(--separator), 0 1px 0 var(--separator), 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* --- Toolbar: a translucent material that content scrolls under ----------------------------- */
.toolbar {
  container: toolbar / inline-size;   /* the filters and search adapt to the panel's real width */
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0 calc(-1 * var(--gutter));
  padding: 12px var(--gutter);
  background: color-mix(in srgb, var(--bg) 78%, transparent);   /* page-coloured glass: invisible until content passes under */
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}

/* Search keeps at least 160px; when that doesn't fit, the round buttons wrap below it. */
.toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) 4px;
}

.search {
  flex: 1 1 160px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 var(--inset-container);   /* icon on the same 16px edge as day headings and titles */
  margin-inline-end: 4px;
  color: var(--muted);
  background: var(--fill);
  border-radius: var(--radius-control);
  cursor: text;
}

/* The field's own outline is suppressed; the whole search shape takes the ring instead. */
.search:has(input:focus-visible) { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.search svg { width: 16px; height: 16px; }

.search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  font: var(--type-body);
  color: var(--text);
  background: none;
  border: none;
  outline: none;
}

.search input::placeholder { color: var(--muted); }
.search input::-webkit-search-cancel-button { cursor: pointer; }

/* Round toolbar buttons: quiet until hovered, like Safari's. */
.icon-button {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  color: var(--muted);
  background: none;
  border: none;
  border-radius: 50%;
  cursor: default;
  transition-property: background-color, color, transform;
  transition-duration: 150ms;
  transition-timing-function: var(--ease-out);
}

.icon-button:hover, .icon-button[data-popup-open] { color: var(--text); background: var(--fill); }
.icon-button:active { transform: scale(0.96); }
.icon-button svg { width: 18px; height: 18px; }

/* Only appears when sync needs you; the details are inside the menu. */
.attention-dot {
  position: absolute;
  top: 7px;
  inset-inline-end: 7px;
  width: 8px;
  height: 8px;
  background: var(--danger);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--bg);
}

/* --- Segmented control: equal segments on a track; one thumb slides to the selection --------- */
.segmented {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(max-content, 1fr);   /* equal shares, but never narrower than a label */
  margin-top: var(--space-2);
  padding: 2px;
  background: var(--fill);
  border-radius: 9px;
}

.segmented-thumb {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;                                   /* physical: --thumb-x is measured from the left in both directions */
  width: var(--thumb-w, 0);
  transform: translateX(var(--thumb-x, 0));
  background: var(--thumb);
  border-radius: 7px;
  box-shadow: var(--shadow-thumb);
}

/* Transitions, so a fast second click retargets mid-slide. */
.segmented[data-ready] .segmented-thumb {
  transition-property: transform, width;
  transition-duration: 300ms;
  transition-timing-function: var(--ease-out);
}

.segmented label {
  position: relative;   /* above the thumb */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  height: 28px;
  padding: 0 10px;
  font: var(--type-callout);
  color: var(--text);
  background: none;
  border: none;
  border-radius: 7px;
  white-space: nowrap;
  cursor: default;
}

.segmented label.selected { font-weight: 600; }

/* The label always takes its bold width (a hidden bold copy underneath), so weight changes never move it. */
.segment-text { display: inline-flex; flex-direction: column; }
.segment-text::after {
  content: attr(data-text) / "";
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: 600;
}
.segmented label:has(input:focus-visible) { outline: 2px solid var(--accent-text); outline-offset: 1px; }
.segmented .type-icon { flex-shrink: 0; height: 10px; width: auto; }

/* Narrow panels: the filter labels need all the room, so the (redundant) icons step aside. */
@container toolbar (max-width: 327px) {   /* content box: a panel under 360px */
  .segmented.filters .type-icon { display: none; }
}

/* Very narrow (e.g. 200% zoom): four equal columns no longer fit the labels, so the filters wrap
   and the selected one carries its own thumb instead of the sliding one. */
@container toolbar (max-width: 267px) {   /* content box: a panel under 300px */
  .segmented.filters { display: flex; flex-wrap: wrap; gap: 2px; }
  .segmented.filters .segmented-thumb { display: none; }
  .segmented.filters label { flex: 1 1 auto; }
  .segmented.filters label.selected { background: var(--thumb); box-shadow: var(--shadow-thumb); }
}

/* In an expanded entry: sized to its labels rather than full width. */
.segmented.compact { display: inline-grid; margin-top: 0; }
.segmented.compact label { padding: 0 12px; }
.segmented.type-picker { margin-bottom: var(--space-3); }   /* same gap as the other sections */

/* Type icons: one shape and color per type. */
.type-icon { fill: currentColor; }
.type-icon.highlight { color: var(--type-highlight); }
.type-icon.insight { color: var(--type-insight); }
.type-icon.action { color: var(--type-action); }

/* --- Days and conversations ------------------------------------------------------------- */
/* Grouped-list section header: small, muted, aligned with the card content below. */
/* One card per conversation. */
.conversations { display: flex; flex-direction: column; gap: 12px; margin-top: var(--space-2); }
.conversation:focus-visible { outline-offset: 4px; }   /* focus lands here after a jump from the index */

/* --- Full-page index: a line per conversation in the left margin ------------------------------- */
.conversation-index { display: none; }

/* Only where the margin can hold it beside the 720px column without covering it. */
@media (min-width: 1040px) {
  .conversation-index {
    display: block;
    position: fixed;
    top: 50%;
    left: max(24px, calc(50% - 360px - 72px));
    z-index: 3;
    transform: translateY(-50%);
  }
}

.conversation-index ol { margin: 0; padding: 0; list-style: none; }

/* Rows shrink when there are many conversations, so the rail always fits in 70% of the window. */
.conversation-index a {
  position: relative;
  display: flex;
  align-items: center;
  width: 40px;
  height: min(16px, calc(70vh / var(--n)));
  color: var(--text);
  text-decoration: none;
  border-radius: 4px;
}

.index-line {
  width: 14px;
  height: 2px;
  background: color-mix(in srgb, var(--muted) 45%, transparent);
  border-radius: 1px;
  transition-property: width, background-color;
  transition-duration: 200ms;
  transition-timing-function: var(--ease-out);
}

.conversation-index a:hover .index-line { width: 20px; background: var(--muted); }
.conversation-index a[aria-current] .index-line { width: 28px; background: var(--text); }

/* The full name, in a small material label beside the line. Present for screen readers always;
   visible on hover and keyboard focus. */
.index-label {
  position: absolute;
  left: 40px;
  top: 50%;
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 10px;
  font: var(--type-callout);
  white-space: nowrap;
  background: var(--material);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-radius: 8px;
  box-shadow: var(--shadow-float);
  opacity: 0;
  transform: translate(-4px, -50%);
  pointer-events: none;
  transition-property: opacity, transform;
  transition-duration: 150ms;
  transition-timing-function: var(--ease-out);
}

.index-count { font: var(--type-footnote); color: var(--muted); font-variant-numeric: tabular-nums; }

.conversation-index a:hover .index-label,
.conversation-index a:focus-visible .index-label { opacity: 1; transform: translate(0, -50%); }

/* Cards are lifted by shadow, not outlined. */
.conversation {
  background: var(--surface);
  border-radius: var(--radius-container);
  box-shadow: var(--shadow-card);
  padding: 12px var(--inset-container) var(--inset-nested);
}

/* Title (and count) leading; when you last saved from it trailing, on the first line. */
.conversation-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 4px;
}

.conversation h2 {
  flex: 1;
  min-width: 0;
  font: var(--type-headline);
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

.last-saved {
  flex-shrink: 0;
  font: var(--type-footnote);
  color: var(--muted);
  white-space: nowrap;
}

.count {
  margin-inline-start: 6px;
  font: var(--type-callout);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Entry row: bleeds into the card inset so its content aligns with the title. */
.card {
  position: relative;
  margin: 0 calc(-1 * var(--inset-nested));
  padding: var(--inset-nested);
  border-radius: var(--radius-row);
  cursor: default;
  transition: background-color 150ms var(--ease-out);
}

@media (hover: hover) {
  .card:hover { background: var(--fill-hover); }
}
.card.expanded { background: var(--fill-hover); }

/* Just saved from ChatGPT: a warm glow that fades, and the marker pops in. */
.card.fresh { animation: fresh-glow 1600ms var(--ease-out); }
.card.fresh .marker .type-icon { animation: marker-pop 300ms cubic-bezier(0.2, 0, 0, 1); }

@keyframes fresh-glow { from { background: var(--accent-tint); } }
@keyframes marker-pop { from { opacity: 0; scale: 0.25; filter: blur(4px); } }

/* Details toggle: always visible, so it's clear an entry opens; rotates when open. */
.disclosure {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-inline-start: 2px;
  padding: 0;
  color: var(--muted);
  background: none;
  border: none;
  border-radius: 8px;
  cursor: default;
  transition-property: background-color, color, transform;
  transition-duration: 150ms;
  transition-timing-function: var(--ease-out);
}

.disclosure:hover { color: var(--text); background: var(--fill); }
.disclosure:active { transform: scale(0.96); }
.disclosure svg { width: 14px; height: 14px; transition: rotate 200ms var(--ease-out); }
.disclosure[aria-expanded="true"] svg { rotate: 180deg; }

/* Hover actions: a small material capsule at the trailing end of the meta row. It sits in the
   row's flow (invisible until hover, but its space is kept), so at narrow widths it wraps onto
   its own line instead of covering the time and the Details button. */
.card-actions {
  margin-inline-start: auto;
  display: flex;
  padding: 2px;
  background: var(--material);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-radius: 10px;
  box-shadow: var(--shadow-float);
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms var(--ease-out);
}

.card:hover .card-actions,
.card:focus-within .card-actions,
.card.expanded .card-actions { opacity: 1; pointer-events: auto; }

@media (hover: none) {
  .card-actions { opacity: 1; pointer-events: auto; }
}

.card-actions button, .card-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--muted);
  background: none;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  cursor: default;
  transition-property: background-color, color, transform;
  transition-duration: 150ms;
  transition-timing-function: var(--ease-out);
}

.card-actions button:hover, .card-actions a:hover { color: var(--text); background: var(--fill); }
.card-actions button:active, .card-actions a:active { transform: scale(0.96); }
.card-actions .delete:hover { color: var(--danger); }
.card-actions svg { width: 15px; height: 15px; }

.icon-swap { display: grid; }
.icon-swap > svg {
  grid-area: 1 / 1;
  transition-property: opacity, scale, filter;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}
.icon-swap .done { color: var(--success); }
.icon-swap[data-swapped="false"] .done,
.icon-swap[data-swapped="true"] > svg:not(.done) { opacity: 0; scale: 0.25; filter: blur(4px); }

/* Marker and quote share the first line's baseline. */
.quote {
  display: grid;
  grid-template-columns: var(--space-2) 1fr;
  column-gap: var(--space-1);
  align-items: baseline;
}

/* Set in the quote's font so 1cap = the quote's capital height: the icon sits on the
   baseline and its top meets the tops of the capitals, whatever the font size. */
.marker { font: var(--type-quote); }
.marker .type-icon { display: inline-block; height: 1cap; width: auto; }

blockquote {
  max-width: 68ch;   /* same reading measure as the note and response */
  margin: 0;
  font: var(--type-quote);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

blockquote.clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

blockquote::before { content: "“"; }
blockquote::after { content: "”"; }

/* The note and time line share the quote's leading edge. The expanded details use the row's full
   width instead, with equal insets either side (the marker's edge and the actions' edge). */
.note, .meta { margin-inline-start: var(--space-3); }

.note {
  max-width: 68ch;
  margin-top: 4px;
  margin-bottom: 0;
  color: var(--muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.meta {
  min-height: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 4px;
  margin-top: 2px;
  font: var(--type-footnote);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* --- Expanded entry --------------------------------------------------------------------- */
.context {
  margin-top: var(--space-1);
  padding-top: var(--space-2);
  border-top: 0.5px solid var(--separator);
  cursor: auto;
}

.label {
  display: block;
  font: var(--type-footnote);
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 6px;
}

.note-field {
  display: block;
  width: 100%;
  margin: 0 0 var(--space-3);
  padding: var(--space-1) 12px;
  font: var(--type-body);
  color: var(--text);
  background: var(--fill);
  border: none;
  border-radius: var(--radius-control);
  resize: vertical;
}

.note-field::placeholder { color: var(--muted); }

.text {
  max-width: 68ch;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0 0 var(--space-3);
}

/* Side panel: long question/response text starts at a few lines (--lines, set per field). */
.text.clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--lines);
  line-clamp: var(--lines);
  overflow: hidden;
}

/* Your question reads as your message, the way ChatGPT shows it: a bubble. The response stays plain
   text below it, so "you" and "the answer" are told apart at a glance. */
.text.bubble {
  /* Vertical inset as a transparent border, not padding: a clamped box clips at its padding edge,
     so padding would let the next line peek through. The background still paints under it. */
  padding: 0 var(--inset-container);
  border-block: 12px solid transparent;
  color: var(--on-bubble);
  background: var(--bubble-bg);
  border-radius: 20px;
}

.long-text:has(.more) .text { margin-bottom: 4px; }
.long-text:has(.more) .bubble { margin-bottom: 6px; }
.long-text .more { display: block; margin: 0 0 var(--space-3); font: var(--type-footnote); }
.context > .long-text:last-child > :last-child { margin-bottom: 0; }   /* no trailing gap inside the row */

mark {
  background: var(--mark);
  color: inherit;
  border-radius: 3px;
}

/* --- Menus and popovers (shadcn/Base UI behaviour, Apple material) -------------------------- */
.menu, .popover {
  background: var(--material);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  box-shadow: var(--shadow-float);
  color: var(--text);
  transform-origin: var(--transform-origin);   /* grows out of the ⋯ button */
  transition-property: opacity, transform;
  transition-duration: 200ms;
  transition-timing-function: var(--ease-out);
}

.menu[data-starting-style], .menu[data-ending-style],
.popover[data-starting-style], .popover[data-ending-style] { opacity: 0; transform: scale(0.96); }

/* Closing is quicker and softer than opening. */
.menu[data-ending-style], .popover[data-ending-style] { transition-duration: 150ms; }

.menu {
  width: 248px;
  padding: 6px;
  border-radius: var(--radius-container);
}

.menu [data-slot="dropdown-menu-item"] {
  height: 30px;
  gap: 10px;
  padding: 0 var(--space-1);
  font: var(--type-callout);
  border-radius: var(--radius-item);
}

/* Menu highlight in the app's tint, like a highlighter pass over the row. */
.menu [data-slot="dropdown-menu-item"][data-highlighted] { color: var(--text); background: var(--accent-hover); }
.menu [data-slot="dropdown-menu-item"]:focus-visible { outline-offset: -2px; }
.menu, .popover { outline: none; }   /* containers: focus moves to the items/fields inside */
.menu [data-slot="dropdown-menu-item"] svg { width: 16px; height: 16px; color: var(--muted); }
.menu [data-slot="dropdown-menu-item"][data-highlighted] svg { color: var(--text); }

.menu-account {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px var(--space-1) var(--space-1);
}

.menu-account-email { font: var(--type-callout); font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.menu-account-status { font: var(--type-footnote); color: var(--muted); }
.menu-account-status.problem { color: var(--danger-text); }

.menu-separator {
  height: 0.5px;
  margin: 6px var(--space-1);
  background: var(--separator);
}

.popover-positioner { z-index: 50; }   /* above the sticky toolbar, like the menu */

.popover {
  width: min(320px, calc(100vw - 32px));
  padding: var(--inset-container);
  border-radius: calc(var(--radius-control) + var(--inset-container));   /* concentric with the fields and buttons inside */
}

.popover-title { font: var(--type-headline); letter-spacing: -0.01em; margin: 0 0 4px; }
.popover-hint { font: var(--type-footnote); color: var(--muted); margin: 0 0 12px; text-wrap: pretty; }

.popover-error {
  display: flex;
  gap: 6px;
  margin: var(--space-1) 0 0;
  font: var(--type-footnote);
  color: var(--danger-text);
}

.popover-error svg { width: 14px; height: 14px; margin-top: 1px; }

.popover-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);   /* the plain button has no shape, so the space marks where it ends */
  margin-top: 12px;
}

/* --- Controls: fields and buttons --------------------------------------------------------- */
.field {
  display: block;
  width: 100%;
  height: 36px;
  padding: 0 12px;
  font: var(--type-body);
  color: var(--text);
  background: var(--fill);
  border: none;
  border-radius: var(--radius-control);
}

.field::placeholder { color: var(--muted); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  font: var(--type-control);
  color: var(--text);
  background: var(--fill);
  border: none;
  border-radius: var(--radius-control);
  cursor: default;
  transition-property: background-color, opacity, transform, filter;
  transition-duration: 150ms;
  transition-timing-function: var(--ease-out);
}

.button.primary { color: var(--on-accent); background: var(--accent); font-weight: 600; }
.button.plain { color: var(--text); background: none; }   /* gold is "yours", not "clickable" */
.button:hover:not(:disabled) { filter: brightness(0.96); }
.button:active:not(:disabled) { transform: scale(0.96); }
.button:disabled { opacity: 0.4; }

/* One-time code: separate rounded cells, like iOS. Overrides the shadcn joined-cell look. */
.otp, .otp-group { width: 100%; }
.otp-group { gap: 6px; }

.otp-slot.otp-slot {
  flex: 1;
  min-width: 0;
  width: auto;
  height: 40px;
  font: var(--type-code);
  background: var(--fill);
  border: none;
  border-radius: var(--radius-row);
  box-shadow: none;
  transition-property: background-color, outline-color;   /* replaces shadcn's transition-all */
  transition-duration: 150ms;
}

.otp-slot.otp-slot[data-active="true"] { outline: 2px solid var(--accent-text); outline-offset: 1px; }
.otp input:focus-visible { outline: none; }   /* the active cell shows focus instead */

/* --- Toast: a dark capsule that floats over everything, so it reads as a message --------------- */
.toast-region {
  position: fixed;
  inset-inline: 0;
  bottom: var(--space-2);
  z-index: 60;
  display: flex;
  justify-content: center;
  padding: 0 var(--space-2);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  max-width: 420px;
  margin: 0;
  padding: 10px var(--space-2);
  font: var(--type-control);
  color: var(--on-toast);
  background: var(--toast-bg);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-radius: 999px;
  box-shadow: var(--shadow-toast);
  text-wrap: pretty;
  animation: toast-in 300ms var(--ease-out);
}

.toast svg { width: 16px; height: 16px; }
.toast svg.lucide { stroke-width: 2; }   /* beside medium-weight text */
.toast.error { pointer-events: auto; }

.toast-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-block: -4px;
  margin-inline: 0 -8px;
  padding: 0;
  color: var(--on-toast-muted);
  background: none;
  border: none;
  border-radius: 50%;
  cursor: default;
}

.toast-close:hover { color: var(--on-toast); background: var(--toast-hover); }
.toast .toast-close.toast-close svg { width: 14px; height: 14px; color: inherit; }
.toast.success svg { color: var(--toast-success); }
.toast.error svg { color: var(--toast-danger); }
.toast.leaving { animation: toast-out 200ms var(--ease-out) forwards; }

@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(0.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px) scale(0.98); } }

/* --- AI organisation: topic + tags in the expanded view -------------------------------- */
/* Outlined capsules: labels, not controls. Filled, squarer shapes are the controls (the type picker
   right below), so these keep an outline and full rounding to read differently. */
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--space-3); }

.tag {
  padding: 2px 10px;
  font: var(--type-footnote);
  color: var(--muted);
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  border-radius: 999px;
}

.tag.topic { color: var(--text); font-weight: 600; }

.ai-state { margin: 0 0 var(--space-3); font: var(--type-footnote); color: var(--muted); }

/* Inline actions read as actions by their underline, not by colour (gold means "yours", not "clickable"). */
.text-button {
  padding: 0;
  font: inherit;
  color: var(--text);
  background: none;
  border: none;
  text-decoration: underline;
  text-underline-position: from-font;
  text-decoration-thickness: from-font;
  cursor: default;
}

.text-button:hover { color: var(--muted); }

/* --- Accessibility ----------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .segmented[data-ready] .segmented-thumb { transition: none; }
  .menu, .popover { transition-property: opacity; }
  .menu[data-starting-style], .menu[data-ending-style],
  .popover[data-starting-style], .popover[data-ending-style] { transform: none; }
  .toast { animation-name: fade-in; }
  .toast.leaving { animation-name: fade-out; }
  .empty-glyphs .type-icon, .card.fresh .marker .type-icon { animation: none; }
  .icon-swap > svg { scale: 1 !important; filter: none !important; }
  .disclosure svg { transition: none; }
  .index-line, .index-label { transition-property: opacity, background-color; }
  .index-label { transform: translate(0, -50%); }
  .icon-button:active, .card-actions button:active, .card-actions a:active, .button:active:not(:disabled),
  .disclosure:active { transform: none; }
}

@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }

@media (prefers-reduced-transparency: reduce) {
  :root { --material: var(--surface); }
  .toolbar { background: var(--bg); }
  .toolbar, .card-actions, .menu, .popover, .toast, .index-label { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (prefers-contrast: more) {
  .conversation { box-shadow: 0 0 0 1px var(--muted); }
  .menu, .popover { box-shadow: 0 0 0 1px var(--muted), var(--shadow-float); }
}

/* --- Sort & filter menu, active-filter chips ------------------------------------------- */
/* Radio items and submenu triggers share the plain menu items' metrics and highlight. */
.menu [data-slot="dropdown-menu-radio-item"],
.menu [data-slot="dropdown-menu-sub-trigger"] {
  height: 30px;
  gap: 10px;
  padding: 0 var(--space-1);
  font: var(--type-callout);
  border-radius: var(--radius-item);
}
.menu [data-slot="dropdown-menu-radio-item"] { padding-right: 28px; }   /* room for the check */
.menu [data-slot="dropdown-menu-radio-item"][data-highlighted],
.menu [data-slot="dropdown-menu-sub-trigger"][data-highlighted],
.menu [data-slot="dropdown-menu-sub-trigger"][data-popup-open] { color: var(--text); background: var(--accent-hover); }
.menu [data-slot="dropdown-menu-radio-item-indicator"] svg { width: 14px; height: 14px; color: var(--accent-text); }
.menu [data-slot="dropdown-menu-sub-trigger"] svg { width: 14px; height: 14px; color: var(--muted); margin-left: 0; }
.menu [data-slot="dropdown-menu-sub-trigger"][data-disabled] { opacity: 0.5; }

.menu-label {
  padding: 6px var(--space-1) 2px;
  font: var(--type-footnote);
  font-weight: 600;
  color: var(--muted);
}
.menu-current {
  margin-left: auto;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: var(--type-footnote);
  color: var(--muted);
}
.menu-scroll { max-height: min(320px, var(--available-height, 320px)); overflow-y: auto; }
.menu-option { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-count { margin-left: auto; font: var(--type-footnote); font-variant-numeric: tabular-nums; color: var(--muted); }

.icon-button { position: relative; }
.filter-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  font: 600 10px/15px var(--font-body);
  font-variant-numeric: tabular-nums;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 999px;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: var(--space-1) 0 0;
  padding: 0;
  list-style: none;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 6px 0 10px;
  font: var(--type-footnote);
  font-weight: 500;
  color: var(--text);
  background: var(--accent-tint);
  border: none;
  border-radius: 999px;
  cursor: pointer;
}
.filter-chip svg { width: 13px; height: 13px; color: var(--muted); }
.filter-chip:hover svg { color: var(--text); }
.filter-chip:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 1px; }

/* Topic/tag pills apply a filter when clicked. */
button.tag { font: var(--type-footnote); background: none; cursor: pointer; }
button.tag.topic { font-weight: 600; }
button.tag:hover { color: var(--text); background: var(--fill-hover); }
button.tag:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 1px; }

/* --- Markdown selection ------------------------------------------------------------------ */
.card.selecting { padding-left: 36px; position: relative; }
.select-box {
  position: absolute;
  top: 14px;
  left: 10px;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.card.selected { background: var(--accent-hover); }

.selection-bar {
  position: sticky;
  bottom: 12px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-2);
  padding: 12px;
  background: var(--material);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  border-radius: var(--radius-container);
  box-shadow: var(--shadow-float);
}
.selection-row { display: flex; align-items: center; gap: var(--space-1) 12px; }
.selection-row .button { flex: 1; }
.selection-count { font: var(--type-callout); font-weight: 600; font-variant-numeric: tabular-nums; }
.selection-done { margin-left: auto; font-weight: 600; }

/* A record the server rejected: kept locally, flagged quietly. */
.sync-error {
  margin-right: 6px;
  font: var(--type-footnote);
  font-weight: 600;
  color: var(--danger-text);
}
.selection-bar .button { white-space: nowrap; gap: 6px; }
.selection-bar .button svg { width: 15px; height: 15px; flex-shrink: 0; }