/* Press (on trial, Oct 14 2026; was Dispatch Desk): a woodblock printer's two inks on paper. Indigo is the
   ink for rules, links and actions; vermilion (--signal) is the seal's, kept for what is current or
   needs someone. Young Serif for the wordmark and titles, Work Sans for everything people work in, and
   Source Serif for what customers and reps wrote, read like letters. Dark is the same print at night.
   Calm by default, dark mode from the first commit. */

:root {
  --font-body: "Work Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: "Young Serif", Georgia, "Times New Roman", serif;
  --font-letter: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --bg: #f8f2e4;
  --surface: #fdfaf2;
  --sunken: #f3ead6;
  --product-hey: rgb(85 34 250);
  --product-basecamp: hsl(148.4 68.8% 31.4%);
  --ink: #1d1d1f;
  --muted: #5e5a52;
  --rule: #d8ccb0;
  --rule-strong: #1f3a63; /* the ruled lines of the sidebar and boxes */
  --accent: #1f3a63; /* indigo */
  --accent-ink: #f8f2e4;
  --accent-soft: #dedcd4;
  --link: #1f3a63;
  --signal: #b83d27; /* vermilion */
  --signal-ink: #fbf5e8;
  --info: #2f5f9e; /* a Note callout: blue, as Help Scout's */
  --note: #f1e4bf;
  --note-rule: #c39a46;
  --ai: #6b4fbb;
  --ai-soft: #eee7f7;
  --danger: #a8382c;
  --warn: #8a5a00;
  --paper: #ffffff;
  --paper-ink: #1d1c1a;
  --shadow: none;
  --radius: 3px;
  --sidebar-bg: var(--sunken);
  /* Keeps a palette's sidebar artwork off the brand at the top: the sidebar's own colour, solid behind the logo and fading to nothing over the next stretch so the artwork comes in gradually instead of starting at a hard edge. */
  --sidebar-cover: linear-gradient(180deg, var(--sidebar-top) 0, var(--sidebar-top) 38%, transparent 100%) top / 100% 88px no-repeat;
  --header-bg: none;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%235e5a52%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6 9l6 6 6-6%27/%3E%3C/svg%3E");
}
/* Dark and light from one list. A browser without light-dark() (Safari before 17.5, which the public support form still has to serve) keeps the light values above. */
@supports (color: light-dark(#000, #fff)) {
  :root {
    --bg: light-dark(#f8f2e4, #151b26);
    --surface: light-dark(#fdfaf2, #1c2433);
    --sunken: light-dark(#f3ead6, #10151d);
    --product-hey: light-dark(rgb(85 34 250), rgb(134 126 255));
    --product-basecamp: light-dark(hsl(148.4 68.8% 31.4%), hsl(133.5 40% 60.8%));
    --ink: light-dark(#1d1d1f, #ece4d2);
    --muted: light-dark(#5e5a52, #a9a291);
    --rule: light-dark(#d8ccb0, #323d52);
    --rule-strong: light-dark(#1f3a63, #8ea3c8);
    --accent: light-dark(#1f3a63, #a9bde0);
    --accent-ink: light-dark(#f8f2e4, #121a28);
    --accent-soft: light-dark(#dedcd4, #26324a);
    --link: light-dark(#1f3a63, #a9bde0);
    --signal: light-dark(#b83d27, #e0674f);
    --signal-ink: light-dark(#fbf5e8, #160f0c);
    --info: light-dark(#2f5f9e, #8db4e8);
    --note: light-dark(#f1e4bf, #3b3423);
    --note-rule: light-dark(#c39a46, #7a6431);
    --ai: light-dark(#6b4fbb, #b9a4ff);
    --ai-soft: light-dark(#eee7f7, #352d43);
    --danger: light-dark(#a8382c, #f0948a);
    --warn: light-dark(#8a5a00, #e2b45a);
    --paper: light-dark(#ffffff, #f4f2ee);
  }
}
/* The same dark values for a browser without light-dark(): keep both lists in step (test/models/rep/palette_test.rb checks). */
@supports not (color: light-dark(#000, #fff)) {
  @media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] {
      --bg: #151b26;
      --surface: #1c2433;
      --sunken: #10151d;
      --product-hey: rgb(134 126 255);
      --product-basecamp: hsl(133.5 40% 60.8%);
      --ink: #ece4d2;
      --muted: #a9a291;
      --rule: #323d52;
      --rule-strong: #8ea3c8;
      --accent: #a9bde0;
      --accent-ink: #121a28;
      --accent-soft: #26324a;
      --link: #a9bde0;
      --signal: #e0674f;
      --signal-ink: #160f0c;
      --info: #8db4e8;
      --note: #3b3423;
      --note-rule: #7a6431;
      --ai: #b9a4ff;
      --ai-soft: #352d43;
      --danger: #f0948a;
      --warn: #e2b45a;
      --paper: #f4f2ee;
    }
  }
  :root[data-theme="dark"] {
    --bg: #151b26;
    --surface: #1c2433;
    --sunken: #10151d;
    --product-hey: rgb(134 126 255);
    --product-basecamp: hsl(133.5 40% 60.8%);
    --ink: #ece4d2;
    --muted: #a9a291;
    --rule: #323d52;
    --rule-strong: #8ea3c8;
    --accent: #a9bde0;
    --accent-ink: #121a28;
    --accent-soft: #26324a;
    --link: #a9bde0;
    --signal: #e0674f;
    --signal-ink: #160f0c;
    --info: #8db4e8;
    --note: #3b3423;
    --note-rule: #7a6431;
    --ai: #b9a4ff;
    --ai-soft: #352d43;
    --danger: #f0948a;
    --warn: #e2b45a;
    --paper: #f4f2ee;
  }
}
/* Light, Dark, or follow the computer (Auto): color-scheme is what light-dark() reads. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="auto"] { color-scheme: light dark; }
:root[data-theme="dark"] { color-scheme: dark; }
/* --chevron is an image URL, not a colour, so it keeps its own dark rule. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] { --chevron: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23a9a291%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6 9l6 6 6-6%27/%3E%3C/svg%3E"); }
}
:root[data-theme="dark"] { --chevron: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23a9a291%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6 9l6 6 6-6%27/%3E%3C/svg%3E"); }
/* Artwork is a layer of the palette, so the Settings checkbox can drop it and keep the colours. */
:root:root[data-art="off"] { --sidebar-art: none; --header-art: none; }   /* doubled so it still beats a theme sheet's palette block, which loads after this file */
/* --brand-art stays: the animated title ornament is a motion effect, which works without the artwork */
*, *::before, *::after { box-sizing: border-box; }
/* `hidden` always wins: any class that sets display (.composer__then, .tag) otherwise overrides it. */
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.2; margin: 0; }
/* Georgia for the wordmark and titles only; everything people work in stays sans serif. */
.page-header h1, .conversation__header h1, .article__header h1, .knowledge__collection-header h2 { font-family: var(--font-heading); font-weight: 400; text-transform: var(--heading-transform, none); letter-spacing: var(--heading-tracking, normal); }
/* Press: small labels are vermilion spaced capitals. */
.eyebrow { margin: 0; color: var(--signal); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; }
code { font-family: var(--font-mono); font-size: 0.9em; }
.muted { color: var(--muted); }
.inline { display: inline; }
/* App frame */

.app { --sidebar: 220px; display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: 100vh; }
.app__main { position: relative; min-width: 0; }
/* The knowledge base's sidebar is wider: it holds an article's panels as well as the way around the docs. */
.app--knowledge { --sidebar: 320px; grid-template-columns: var(--sidebar) 1fr; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.flash { margin: 14px 28px 0; padding: 10px 14px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-weight: 600; }
/* A page's message keeps clear of the top right's search, as its header does (Copilot's review of #100). */
@media (min-width: 961px) { .app:not(.app--full) > .app__main > .flash { margin-right: var(--corner); } } /* a full-window page has no top right */
/* Inside a page (a form's own error) rather than above it. */
.narrow .flash { margin: 0 0 14px; }
.sign-in .flash { margin: 0; }
.flash--error { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger); }
kbd { padding: 0 5px; border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 4px; font: 12px var(--font-mono); }
.sidebar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 3px;
  padding: 18px 12px 0;
  border-right: 2px solid var(--rule-strong);
  background: var(--sidebar-bg);
}
.sidebar__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.sidebar__item { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: var(--radius); color: var(--ink); }
a.sidebar__item:hover { background: var(--accent-soft); text-decoration: none; }
.sidebar__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar__item--current { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.sidebar__item .count { color: var(--ink); font-variant-numeric: tabular-nums; }
.sidebar__item--current .count { color: var(--accent); }

/* Press: the folders run across the sidebar, an icon and spaced capitals each. A rule starts each group;
   the rows themselves have none (Chase: too busy with a line each). */
.sidebar__folders .sidebar__list { gap: 0; margin: 0 -12px; padding: 6px 0; border-top: 2px solid var(--rule-strong); }
.sidebar__folders .sidebar__list + .sidebar__list, .sidebar__views + .sidebar__list { margin-top: 10px; }
.sidebar__folders .sidebar__item { gap: 12px; padding: 10px 20px; border-radius: 0; color: var(--accent); font-size: 12.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.sidebar__folders .sidebar__item .icon { flex: none; }
.sidebar__folders .sidebar__item .count { color: var(--ink); letter-spacing: 0; }
/* The current folder is an indigo wash with a vermilion edge (Chase picked it from five, Oct 14 2026: a block
   of vermilion was too intense), the same edge as the highlighted row in the list. */
.sidebar__folders .sidebar__item--current, .sidebar__folders a.sidebar__item--current:hover { background: var(--accent-soft); color: var(--accent); box-shadow: inset 4px 0 0 var(--signal); font-weight: 600; }
.sidebar__folders .sidebar__item--current .count { color: var(--accent); }
.sidebar__views-heading { padding: 0 8px; text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; font-weight: 600; }

/* Pinned to the bottom, so Settings stays in reach when the lists are taller than the window. */
.sidebar__bar { position: sticky; bottom: 0; display: flex; align-items: center; gap: 6px; margin: auto 0 0; padding: 14px 0 14px; background: var(--sunken); }
/* The press's button: notched ends, spaced capitals. */
.sidebar__new { flex: 1; display: flex; align-items: center; justify-content: center; min-width: 0; gap: 8px; padding: 12px 10px; background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%); }
.sidebar__new:hover { background: color-mix(in srgb, var(--accent) 88%, var(--ink)); text-decoration: none; }
/* The notches clip an outline away, so its focus ring is drawn inside (Copilot's review of #100). */
.sidebar__new:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent-ink), inset 0 0 0 4px var(--accent); }

/* The signed-in rep's photo, top right of every page (layouts/_account). Headers that reach the right
   edge (the list's search, the conversation's Previous/Next) keep clear of it. */
.menu.account { position: absolute; top: 27px; right: 20px; z-index: 15; } /* .menu would make it relative */
/* Search and the palette, beside the photo on every page (layouts/application). The headers and bars
   that reach the right edge keep --corner clear for the two of them. */
:root { --corner: 384px; }
.top-search {
  position: absolute; top: 26px; right: 68px; z-index: 15; width: 296px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px;
  border: 1.5px solid var(--rule-strong); border-radius: var(--radius); background: var(--surface); color: var(--muted);
  font: inherit; font-size: 13px; cursor: pointer;
}
.top-search:hover { color: var(--ink); }
.top-search kbd { border: 0; padding: 0; font: 600 12px var(--font-body); color: var(--accent); }
.app__main:has(> .conversation__nav, > .article-bar) > .top-search { top: 7px; }
.sidebar > .sidebar__search { display: none; } /* on a desktop it is .top-search; a phone keeps it in the top bar */
/* In Help Docs the top right searches the docs, so a rep without ⌘K (shortcuts off) opens the palette here. */
body[data-keyboard=off] .sidebar--knowledge > .sidebar__search { display: flex; }
body[data-keyboard=off] .sidebar__search kbd { display: none; }
/* The top row lines up on the top of the page title's capitals (a 27px Georgia title, 20px down): the photo
   and the list's search start there. The conversation page's top row is its Back bar, so it centres there. */
.app__main:has(> .conversation__nav, > .article-bar) > .menu.account { top: 8px; }
.account > summary { display: block; border-radius: 50%; cursor: pointer; }
.account > summary:hover .avatar { box-shadow: 0 0 0 2px var(--rule); }
.account > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.account[open] > summary .avatar { box-shadow: 0 0 0 2px var(--accent); }
.account .menu__items { min-width: 230px; }
.account__who { display: grid; gap: 1px; margin: 4px 10px; font-size: 13px; }
.account__who .muted { font-size: 12px; overflow-wrap: anywhere; }
.account .menu__item[aria-current=page] { color: var(--accent); font-weight: 600; }
/* Lists */

.page-header { background: var(--header-bg); display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 20px var(--corner) 14px 28px; }
.page-header > .search { margin-top: 7px; }
/* A header's button keeps its words on one line; a long description beside it wraps instead. */
.page-header > .button_to, .page-header > .button { flex: none; }
.page-header__actions { display: flex; flex: 0 1 auto; min-width: 0; flex-wrap: wrap; gap: 8px; } /* beside the title it is at the right already; wrapped under it, it starts on the left */
.page-header h1 { font-size: 34px; line-height: 1.05; }
.page-header__sub { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
/* The list's inbox, picked in the line under the title (conversations/_scope_menu). */
.scope-menu > summary { gap: 3px; color: var(--ink); font-weight: 500; cursor: pointer; }
.scope-menu > summary:hover, .scope-menu[open] > summary { color: var(--accent); }
.scope-menu .menu__items { min-width: 230px; max-height: 70vh; overflow-y: auto; font-size: 14px; font-weight: 400; }
.scope-menu .menu__item:hover { text-decoration: none; }
.scope-menu__name { flex: 1; }
.scope-menu__count { color: var(--muted); font-variant-numeric: tabular-nums; }
.search input {
  width: min(310px, 40vw); padding: 8px 12px;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 13px;
}
.search input::placeholder { color: var(--muted); }
/* What sits beside a title (a search box, Relays' buttons) goes under it when both don't fit beside the top right's
   search, rather than running under that (Copilot's review of #100): the title keeps at least 280px. */
.page-header { flex-wrap: wrap; }
.page-header > :first-child { flex: 1 1 280px; min-width: 0; }
.page-header > .search { flex: 0 1 310px; min-width: 0; }
.page-header > .search input { width: 100%; }
.search-options__error { margin: 0; font-size: 13px; color: var(--danger); }

/* A search's own page (searches/show; Chase, Oct 14 2026, after HEY's advanced search): the words across the top,
   refinements down the left, the customers and conversations it finds beside them. */
/* It takes the whole window (layouts/application's app--full): a bar with the seal, its name and a way back. */
.app--full { grid-template-columns: minmax(0, 1fr); }
.search-bar { display: flex; align-items: center; gap: 12px; padding: 12px 28px; border-bottom: 2px solid var(--rule-strong); background: var(--sunken); }
.search-bar__brand { display: flex; }
.search-bar__title { margin: 0; color: var(--accent); font: 400 22px/1 var(--font-heading); }
.search-bar__close { margin-left: auto; display: flex; padding: 6px; border-radius: var(--radius); color: var(--accent); }
.search-bar__close:hover { background: var(--accent-soft); }
.search-page__words { position: relative; display: flex; align-items: center; margin: 22px 28px 18px; }
.search-page__words input {
  width: 100%; height: 52px; padding: 0 48px;
  border: 1.5px solid var(--rule-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink);
  font: 400 20px var(--font-body);
}
.search-page__words input::-webkit-search-cancel-button { display: none; } /* the clear button is ours */
.search-page__words-icon { position: absolute; left: 16px; color: var(--muted); pointer-events: none; }
.search-page__clear { position: absolute; right: 12px; display: flex; padding: 6px; border-radius: 50%; color: var(--muted); }
.search-page__clear:hover { background: var(--accent-soft); color: var(--accent); }
/* Only the header row keeps --corner clear for the top right's search; the results use the full width. */
.search-page { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 36px; padding: 6px 28px 48px; }
.search-page .conversation-table { margin: 0; }
/* Underline fields (Chase, Oct 14 2026): a small capital label above, the value on a rule, no box, like a form on
   paper; a chosen one, label and value, turns indigo. background-color only, so a select keeps its arrow. */
.search-page__refine { display: grid; gap: 16px; align-content: start; }
.search-page__refine label { display: grid; gap: 3px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.search-page__refine :is(select, input[type=text], input[type=date]) {
  width: 100%; min-width: 0; height: 32px; padding: 0 22px 0 0;
  border: 0; border-bottom: 1.5px solid var(--rule); border-radius: 0; background-color: transparent; background-position: right 2px center;
  color: var(--ink); font: inherit; font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none;
}
.search-page__refine :is(select, input[type=text], input[type=date]):focus { outline: none; border-bottom: 2px solid var(--accent); } /* not the checkbox: it keeps its ring */
.search-page__refine input[type=date] { padding-right: 0; }
.search-page__refine label.search-page__field--set { color: var(--accent); }
.search-page__refine .search-page__field--set :is(select, input[type=text], input[type=date]) { border-bottom-color: var(--accent); color: var(--accent); font-weight: 600; }
.search-page__refine label.search-page__check { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.search-page__check input { accent-color: var(--accent); }
.search-page__dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.search-page__dates[hidden] { display: none; }
.search-page__actions { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.search-page__notice { margin: 0; padding: 10px 14px; border-left: 3px solid var(--note-rule); background: var(--note); font-size: 14px; }
.search-page__results { display: grid; gap: 30px; align-content: start; min-width: 0; }
.search-page__section { display: grid; gap: 12px; }
.search-page__section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.search-page__section-head .saved-view-links { margin: 0; }
.search-page__customers { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.search-page__customer { display: grid; gap: 2px; padding: 10px 14px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); color: var(--ink); font-size: 14px; }
.search-page__customer:hover { border-color: var(--rule-strong); text-decoration: none; }
.search-page__customer span { color: var(--muted); font-size: 13px; }
/* A search's words in what it found. */
:is(.conversation-row, .search-page__customer) mark { padding: 0 1px; border-radius: 2px; background: color-mix(in srgb, var(--signal) 20%, transparent); color: inherit; }
@media (max-width: 960px) {
  .search-page { grid-template-columns: minmax(0, 1fr); padding: 6px 16px 40px; }
  .search-bar { padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); }
  .search-page__words { margin: 16px 16px 12px; }
}
.saved-view-links { margin-top: 6px; font-size: 12px; color: var(--muted); }
.sidebar__views-heading { display: block; padding: 0 8px; margin: 14px 0 5px; color: var(--muted); font-size: 11px; }
.sidebar__views-heading:hover { color: var(--accent); text-decoration: none; }
.saved-views { list-style: none; padding: 0; }
.saved-views > li { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.saved-views__name { flex: 1; overflow-wrap: anywhere; }
.saved-views__actions { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 960px) {
  .sidebar__views { display: contents; }
  .sidebar__views-heading { display: none; }
  .sidebar__views .sidebar__item { white-space: nowrap; }
}

/* A quiet table: people and subjects first, the wait on the right. */
.conversation-table { margin: 0 28px; }
.conversation-table__head, .conversation-row { display: grid; grid-template-columns: 36px 150px minmax(0, 1fr) 150px 112px; align-items: center; gap: 12px; padding: 0 12px; }
.conversation-table--no-assignee :is(.conversation-table__head, .conversation-row) { grid-template-columns: 36px 150px minmax(0, 1fr) 112px; }
.conversation-table__head { padding-block: 10px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; }
.conversation-table__head span:last-child { text-align: right; }
/* The Assigned to heading picks a person (conversations/_assignee_picker): it reads as the heading until opened. */
.assignee-picker > summary { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.assignee-picker > summary:hover, .assignee-picker[open] > summary { color: var(--ink); }
.assignee-picker .menu__items { max-height: 360px; overflow-y: auto; color: var(--ink); font-size: 14px; text-transform: none; letter-spacing: normal; }
.next-page { display: block; }
.next-page:not([complete])::before { content: "Loading more…"; display: block; padding: 14px 12px; color: var(--muted); font-size: 13px; }
.conversation-table__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 0; padding: 18px 0 28px; color: var(--muted); font-size: 12px; }
.conversation-table__foot kbd { font-size: 11px; }
.conversation-list { list-style: none; margin: 0; padding: 0; }
.conversation-list__item { position: relative; }
/* The checkbox sits over the first column, which is empty: customers are named in the next one. */
.conversation-row__check, .conversation-table__all { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.conversation-row__check { position: absolute; top: 50%; left: 20px; translate: 0 -50%; z-index: 1; }
.conversation-table__all { margin-left: 8px; }
.bulk-bar { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent-soft); }
.bulk-bar[hidden] { display: none; }
.bulk-bar__count { margin-right: auto; color: var(--accent); font-weight: 500; }
.bulk-bar :is(input[type=text], select) { padding: 4px 8px; border: 1px solid var(--rule); border-radius: 4px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; }
.conversation-row { padding-block: 11px; border-top: 1px solid var(--rule); color: var(--ink); }
.conversation-list li:last-child .conversation-row { border-bottom: 1px solid var(--rule); }
.conversation-row:hover { background: var(--surface); text-decoration: none; }
.conversation-row--automated { opacity: 0.7; }
/* j/k selection: the paper row of the references, with a thin bar so it still reads at a glance. */
.conversation-row--selected { background: var(--surface); box-shadow: inset 4px 0 0 var(--signal); }
.conversation-row__who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-row__what { display: grid; gap: 2px; min-width: 0; }
.conversation-row__line, .conversation-row__preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-row__line .tag { margin-right: 4px; vertical-align: 1px; }
.conversation-row__subject { font-weight: 500; }
/* How the customer reached us (Conversation::Channel), named at the top of the conversation. Outpost is in
   the accent: it's the messaging channel, answered differently. */
.channel { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); vertical-align: -1px; }
.channel--outpost { color: var(--accent); }
.conversation-row__preview { color: var(--muted); font-size: 13px; }
.conversation-row__note { color: var(--ink); }
.conversation-row__note .icon { margin-right: 5px; color: var(--accent); vertical-align: -1px; }
.conversation-row__assignee { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 13px; }
.conversation-row__assignee > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-row__assignee .icon { flex: none; color: var(--muted); }
.conversation-row__meta { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 60px; color: var(--muted); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.conversation-row__time--waiting { color: var(--ink); }
/* Login, two-factor and emergency conversations, above the list (conversations/_urgent). No box: a ruled label and
   a vermilion bar in the left margin beside the rows. The bar sits outside the rows because a rule inside a row
   already means the selected one. The same rows, their waits in the panel's ink. */
.urgent-panel { --urgent: var(--signal); margin-bottom: 22px; }
.urgent-panel__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 0 12px 6px; border-bottom: 1px solid var(--urgent); color: var(--urgent); }
.urgent-panel__head h2 { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.urgent-panel__count { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.urgent-panel__why { margin-left: auto; color: var(--muted); font-size: 12px; }
.urgent-panel > .conversation-list { position: relative; }
.urgent-panel > .conversation-list::before { content: ""; position: absolute; inset: 0 auto 0 -12px; width: 4px; background: var(--urgent); }
.urgent-panel .conversation-row__time--waiting { color: var(--urgent); font-weight: 600; }
/* An open outage's conversations still to link: louder than the urgent rows, because an outage is an alarm. A framed
   amber box with a count instead of rows, its heading stamped: a block of ink with the label knocked out of it.
   Colors mix into --surface, so the box reads in light and dark. */
.urgent-panel--outage { --urgent: var(--warn); margin: 0 28px 14px; border: 2px solid var(--urgent); background: var(--surface); overflow: hidden; }
.urgent-panel--outage .urgent-panel__head { align-items: center; padding: 0 14px 0 0; border-bottom: 1.5px solid var(--urgent); background: color-mix(in srgb, var(--urgent) 8%, var(--surface)); }
.urgent-panel--outage .urgent-panel__head h2 { align-self: stretch; display: flex; align-items: center; margin: 0 4px 0 0; padding: 9px 14px; background: var(--urgent); color: var(--signal-ink); }
.urgent-panel--outage .urgent-panel__count { padding: 0 7px; border-radius: 999px; background: var(--urgent); color: var(--surface); line-height: 1.6; }
.urgent-panel--outage h2 a { color: inherit; }
.urgent-panel--outage .urgent-panel__why { margin-left: 0; }
.urgent-panel__action { margin-left: auto; padding: 4px 12px; font-size: 13px; }
.relay-suggesting { margin: 0 28px 14px; color: var(--muted); font-size: 13px; }
.urgent-panel__more { margin: 0; padding: 9px 14px; border-top: 1px solid color-mix(in srgb, var(--urgent) 18%, var(--rule)); color: var(--muted); font-size: 13px; }
.empty { padding: 48px 28px; color: var(--muted); text-align: center; }
/* Badges: small and bordered. Words carry the meaning; color only helps. */
.tag { display: inline-block; padding: 1px 6px; border: 1px solid var(--rule); border-radius: 4px; background: var(--surface); color: var(--muted); font-size: 11px; font-weight: 400; line-height: 1.5; }
.tag--muted { background: var(--sunken); }
.tag--label { color: var(--ink); }
.tag--inbox { color: var(--ink); }
.tag--draft { border-color: var(--note-rule); background: var(--note); color: var(--ink); }
/* A tag someone gave a colour. Mixed from --ink and --surface, so each reads in light and dark. */
.tag--color { border-color: color-mix(in srgb, var(--tag) 45%, var(--rule)); background: color-mix(in srgb, var(--tag) 16%, var(--surface)); color: color-mix(in srgb, var(--tag) 55%, var(--ink)); }
.tag--red, .swatch--red { --tag: #d04b3b; }
.tag--orange, .swatch--orange { --tag: #dc7a22; }
.tag--yellow, .swatch--yellow { --tag: #b08a0e; }
.tag--green, .swatch--green { --tag: #3d9150; }
.tag--teal, .swatch--teal { --tag: #1f9a9a; }
.tag--blue, .swatch--blue { --tag: #3b78d0; }
.tag--purple, .swatch--purple { --tag: #7b5bd0; }
.tag--pink, .swatch--pink { --tag: #cf4a8b; }
.tag--ai { border-color: color-mix(in srgb, var(--ai) 35%, var(--rule)); background: var(--ai-soft); color: var(--ink); }
.tag--public { border-color: color-mix(in srgb, var(--accent) 35%, var(--rule)); background: var(--accent-soft); color: var(--accent); }
.avatar {
  display: inline-grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  font-size: 12px; font-weight: 500; letter-spacing: 0.02em;
}
.avatar--small { width: 24px; height: 24px; font-size: 10px; }
.avatar--large { width: 44px; height: 44px; font-size: 15px; }
.avatar--photo { overflow: hidden; background: var(--sunken); }
.avatar--photo img { width: 100%; height: 100%; object-fit: cover; }
.settings__photo { display: flex; gap: 14px; align-items: flex-start; }
.settings__photo .avatar--large { width: 56px; height: 56px; }
.settings__photo p { margin: 6px 0 0; font-size: 13px; }
/* Conversation */
/* The toolbar spans the thread and the customer panel; the panel is a column, not cards. */
.conversation__nav { display: flex; align-items: center; gap: 14px; padding: 13px var(--corner) 13px 24px; border-bottom: 1px solid var(--rule); background: var(--surface); font-size: 14px; }
.conversation__nav a { color: var(--ink); }
/* The conversation's own bar (conversations/_toolbar): the top of the thread's column, staying there as it
   scrolls, with the subject, the controls as icons, and the tags once they have scrolled away. */
.conversation__bar { position: sticky; top: 0; z-index: 5; margin: -24px -24px 20px; padding: 8px 24px; border-bottom: 1px solid var(--rule); background: var(--bg); }
.conversation__toolbar { display: flex; align-items: center; gap: 14px; min-width: 0; }
.conversation__bar-title { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 15px; }
.conversation__bar-subject { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.conversation__bar-tags { display: flex; gap: 6px; visibility: hidden; opacity: 0; transform: translateY(4px); transition: opacity 0.15s, transform 0.15s, visibility 0.15s; }
.conversation__bar--titled .conversation__bar-tags { visibility: visible; opacity: 1; transform: none; }
.conversation__bar-tags .tag { flex: none; }
.conversation__actions { display: flex; align-items: center; gap: 4px; }
.pill.pill--icon { justify-content: center; width: 34px; height: 34px; padding: 0; border-color: transparent; background: none; color: var(--muted); }
.pill.pill--icon:hover, .menu[open] > .pill.pill--icon { border-color: var(--rule); background: var(--bg); color: var(--ink); }
.pill.pill--icon .icon { margin: 0; vertical-align: 0; }
.icon--filled { fill: currentColor; } /* a mark that is on, such as a bookmark: filled in, not only outlined */
.pill.pill--icon .status-dot { width: 11px; height: 11px; }
.pill.pill--icon.pill--on, .pill.pill--icon.pill--snoozed { color: var(--accent); }
.conversation__position { margin-left: auto; font-size: 12px; }
.conversation__step:hover { text-decoration: none; color: var(--accent); }
.conversation { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
.conversation__main { min-width: 0; padding: 24px 24px 48px; }
.conversation__crumbs { margin: 0 0 7px; color: var(--muted); font-size: 12px; }
.conversation__crumbs a { color: var(--muted); }
.conversation__header h1 { font-size: 27px; overflow-wrap: anywhere; }
.conversation__header .tags { margin: 12px 0 22px; }
.conversation__waiting { margin-left: 4px; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.pill {
  padding: 7px 10px; border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer;
}
.pill:hover { border-color: var(--muted); }
.pill--on { border-color: var(--accent); color: var(--accent); }
.pill .icon { vertical-align: -2px; margin-right: 5px; }
.mention { padding: 0 4px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); font-weight: 500; white-space: nowrap; }
.pill--current { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
/* The folded middle of a long thread: one quiet bar between the first entry and the last few. */
.fold { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.fold::before, .fold::after { content: ""; flex: 1; border-top: 1px dashed var(--rule); }
.fold__button { padding: 5px 12px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.fold__button:hover { border-color: var(--muted); }
/* Where they left off: the quiet line when only automation ran since. Clears the sticky bar when scrolled to. */
.new-since { display: flex; align-items: center; gap: 12px; scroll-margin-top: 72px; color: var(--accent); font-size: 12px; font-weight: 600; cursor: pointer; }
.new-since::before, .new-since::after { content: ""; flex: 1; border-top: 1px solid var(--accent); }
.new-since--quiet { color: var(--muted); font-weight: 500; }
.new-since--quiet::before, .new-since--quiet::after { border-top-color: var(--rule); }

/* The Quote button beside a selection in the thread (quote_controller). */
.quote { display: contents; }
.quote__button { position: fixed; z-index: 20; padding: 4px 10px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,.15); cursor: pointer; }
.quote__button[hidden] { display: none; }
.quote__button kbd { margin-left: 4px; color: var(--muted); font-size: 11px; }

.entry { padding: 18px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
/* Our replies: a plain box with a green edge, so a long thread isn't a wall of green. */
.entry--email-out { border-left: 3px solid var(--accent); }
.entry--automated { background: transparent; border-style: dashed; padding: 10px 18px; }
.entry__header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.entry--automated .entry__header { margin-bottom: 0; }
.entry__who { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; min-width: 0; }
.entry__author { flex-basis: 100%; color: var(--ink); }
.entry__label { color: var(--muted); font-size: 12px; }
.entry__header time { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.entry__collapsed summary { margin-top: 8px; color: var(--muted); font-size: 13px; cursor: pointer; }
/* What a customer or rep wrote is set like a letter; a note stays in the working sans. */
.entry__body { overflow-wrap: anywhere; line-height: 1.6; font-family: var(--font-letter); font-size: 16px; }
.entry--note .entry__body { font-family: var(--font-body); font-size: inherit; }
/* Attachments on our own entries (notes, replies) match the thumbnails in emails (message_content_controller.js). */
.entry__body figure.attachment { display: inline-block; vertical-align: top; max-width: 176px; margin: 8px 8px 0 0; }
.entry__body .attachment__link { display: block; padding: 4px; border: 1px solid var(--rule); border-radius: var(--radius); color: inherit; text-decoration: none; }
.entry__body .attachment--preview img { display: block; width: 166px; height: 112px; object-fit: cover; border-radius: 5px; }
.entry__body .attachment__caption { display: flex; gap: 6px; padding: 4px 4px 0; font-size: 12px; line-height: 1.4; }
.entry__body .attachment__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry__body .attachment__size { flex: none; color: var(--muted); }
/* Internal notes: a tinted block with its author and "Internal note" spelled out, so it never
   depends on the color to read as internal. */
.entry--note { padding: 13px 15px; border-color: transparent; background: var(--note); font-size: 13px; }
.entry--note .entry__header { margin-bottom: 4px; }
.entry--note .entry__who { flex-wrap: nowrap; column-gap: 0; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
.entry--note .entry__author { flex-basis: auto; }
.entry--note .entry__label { color: var(--ink); font-size: inherit; }
.entry--note .entry__label::before { content: "·"; margin: 0 6px; }
.entry--note .entry__body { line-height: 1.5; }
.entry--pending { opacity: 0.65; }
.entry--pending .entry__label::after { content: ""; display: inline-block; width: 10px; }
.entry--failed { opacity: 1; border-color: var(--danger); }
.entry--failed .entry__label { color: var(--danger); }
/* Calls and voicemails from Switchboard: a strip with the call's facts, then the note or transcript.
   A call that never connected (a hang-up at the tone, a callback nobody answered) is a quiet line. */
.call-strip { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--sunken); font-size: 14px; }
.call-strip .icon { flex: none; color: var(--muted); }
.call-strip__length { color: var(--muted); }
.call-strip__length::before { content: "·"; margin-right: 8px; }
.call-strip__action { margin-left: auto; padding: 3px 12px; border: 1px solid var(--accent); border-radius: 6px; color: var(--accent); font-size: 13px; font-weight: 600; text-decoration: none; }
.call-strip__action:hover { background: var(--accent); color: var(--accent-ink); }
.call-strip + .entry__body { margin-top: 12px; }
.entry__provenance { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.entry--call-missed, .entry--call-no-answer, .entry--call-busy { background: transparent; box-shadow: none; border-style: dashed; padding: 10px 18px; }
.entry--call-missed .call-strip, .entry--call-no-answer .call-strip, .entry--call-busy .call-strip { padding: 0; background: none; }
.message--paper { padding: 14px; border-radius: 8px; background: var(--paper); color: var(--paper-ink); --link: #1d5fb8; --muted: #666; --rule: #d6d6d6; }
/* Composer */
.composer { margin-top: 22px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
.composer__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 14px; border-top: 1px solid var(--rule); }
.composer__hint { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 8px 17px; border-bottom: 1px solid var(--rule); font-size: 13px; }
.composer__prototype { margin-left: auto; color: var(--muted); font-size: 12px; }
.composer__note { margin: 0; color: var(--muted); font-size: 12px; }
/* A new conversation: From, To and Subject as rows at the top of the box, like an email. */
.composer__fields { border-bottom: 1px solid var(--rule); }
.composer__field { display: flex; align-items: center; gap: 10px; padding: 0 17px; }
.composer__field:not(:first-child) { border-top: 1px solid var(--rule); }
.composer__field > span { flex: none; width: 56px; color: var(--muted); font-size: 13px; }
.composer__field:focus-within > span { color: var(--accent); }
.composer__field input, .composer__field select { flex: 1; min-width: 0; padding: 11px 0; border: 0; background-color: transparent; color: var(--ink); font: inherit; outline: none; }
.composer__field input::placeholder { color: var(--muted); }
.composer__signature { margin: 0; padding: 10px 17px; border-top: 1px dashed var(--rule); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer--new .composer__buttons { flex-wrap: wrap; justify-content: flex-end; }
.composer--new .composer__note { align-self: center; margin-right: 6px; }
/* Who the To address already is (customer_lookups/show): a hint under the field. */
#customer_lookup:empty { display: none; }
.lookup { display: flex; gap: 10px; padding: 10px 17px; border-top: 1px solid var(--rule); background: var(--accent-soft); font-size: 13px; }
.lookup .avatar { background: var(--surface); }
.lookup__who { margin: 0; }
.lookup__list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; }
.lookup__list .muted { margin-left: 6px; font-size: 12px; }
.composer__buttons { display: flex; gap: 8px; flex: none; margin-left: auto; }
.saved-replies { position: relative; margin-left: auto; }
.saved-replies summary { list-style: none; padding: 5px 12px; border-radius: 999px; color: var(--muted); font-size: 14px; cursor: pointer; }
.saved-replies summary::-webkit-details-marker { display: none; }
.saved-replies[open] summary { background: var(--sunken); color: var(--ink); }
.saved-replies ul {
  position: absolute; right: 0; z-index: 10; min-width: 260px; margin: 6px 0 0; padding: 6px; list-style: none;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); box-shadow: 0 8px 24px rgb(0 0 0 / 0.15);
}
.saved-replies li button { width: 100%; padding: 7px 10px; border: 0; border-radius: 6px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.saved-replies li button:hover { background: var(--sunken); }

/* The placeholders a saved reply can use (saved_replies/_form). */
.saved-reply-placeholders summary { color: var(--muted); font-size: 14px; cursor: pointer; }
.saved-reply-placeholders p { margin: 6px 0 8px; }
.saved-reply-placeholders dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; font-size: 14px; }
.saved-reply-placeholders dt, .saved-reply-placeholders dd { margin: 0; }

.button { display: inline-block; padding: 8px 18px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent); color: var(--accent-ink); font: inherit; font-weight: 500; cursor: pointer; }
.button:hover { text-decoration: none; filter: brightness(1.08); }
.button--small { padding: 4px 12px; font-size: 13px; }
.button--secondary { background: transparent; color: var(--accent); }
/* A destructive action: outlined in the danger colour so it never looks like the main one. */
.button--danger { background: transparent; border-color: color-mix(in srgb, var(--danger) 45%, var(--rule)); color: var(--danger); }
.button--danger:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); filter: none; }
/* Customer panel: a column beside the thread, sections divided by rules. */
.conversation__aside { position: sticky; top: 0; display: grid; align-content: start; min-height: calc(100vh - 50px); padding: 26px 20px; border-left: 1px solid var(--rule); }
.aside__section + .aside__section { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule); }
.aside__section > .eyebrow { margin-bottom: 13px; }
/* Movable sections (aside_controller): the title folds one, the grip beside it moves it. */
.aside__sections { display: grid; }
.aside__section + .aside__sections > .aside__section:first-child { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule); }
.aside__head { display: flex; align-items: center; gap: 4px; margin-bottom: 13px; }
.aside__toggle { display: flex; flex: 1; align-items: center; gap: 6px; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.aside__toggle:hover .eyebrow { color: var(--ink); }
.aside__chevron { color: var(--muted); transition: rotate 0.15s; }
.aside__handle { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--muted); cursor: grab; opacity: 0.45; }
.aside__handle svg { fill: currentColor; }
.aside__section:hover .aside__handle, .aside__handle:focus-visible { opacity: 1; }
.aside__handle:hover { background: var(--sunken); }
.aside__section--collapsed .aside__head { margin-bottom: 0; }
.aside__section--collapsed > :not(.aside__head) { display: none; }
.aside__section--collapsed .aside__chevron { rotate: -90deg; }
.aside__section--dragging { opacity: 0.5; }
.card { padding: 16px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
.card h3 { margin-bottom: 8px; font-size: 11px; font-weight: 400; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
/* Settings > Appearance: room between a picker and the label of the next one. */
.palette-label { margin: 20px 0 8px; }
.palette-art { margin-top: 16px; }
.customer { display: flex; align-items: center; gap: 10px; }
.customer h2 { font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.customer p { margin: 2px 0 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.customer p:empty { display: none; }
/* Staff tools: a name, then its links, one per line. */
.tools { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 13px; }
.tools__tool { display: grid; justify-items: start; gap: 2px; min-width: 0; }
.tools__name { font-weight: 500; }
.tools__action { padding: 0; border: 0; background: none; color: var(--link); font: inherit; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.tools__action:hover { text-decoration: underline; }
.tools__note { color: var(--muted); font-size: 12px; }
.placeholder { margin: 14px 0 0; padding: 10px; border: 1px dashed var(--rule); border-radius: 8px; color: var(--muted); font-size: 13px; }
.rearrange__form + .rearrange__form { margin-top: 12px; }
.rearrange__label { display: block; margin-bottom: 4px; color: var(--muted); font-size: 12px; }
.rearrange__row { display: flex; gap: 6px; }
.rearrange__row :is(input, select) { flex: 1; min-width: 0; padding: 4px 8px; border: 1px solid var(--rule); border-radius: 4px; background: transparent; color: var(--ink); font: inherit; font-size: 13px; }
.mini-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 13px; }
.mini-list .muted { display: block; font-size: 12px; }
.mini-list__more { margin: 10px 0 0; font-size: 13px; font-weight: 600; }
.customer-notes__preview { margin-top: 16px; font-size: 13px; }
.customer-notes__preview p { margin: 0 0 6px; }
.customer-notes__preview .customer-notes__body { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.customer-notes__body { white-space: pre-wrap; overflow-wrap: anywhere; }
.customer-notes__list { list-style: none; margin: 0 0 20px; padding: 0; }
.customer-notes__list > li { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.customer-notes__actions { display: flex; align-items: center; gap: 16px; font-size: 13px; }
@media (max-width: 960px) {
  .customer-notes { scroll-margin-top: 116px; }
}

/* Filters */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; padding: 0 28px 14px; }
.filters__chips, .filters__form { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.filters__form { gap: 9px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); color: var(--ink); font-size: 13px; }
.chip:hover { border-color: var(--muted); text-decoration: none; }
.chip--on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.filter { padding: 4px 8px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; font-size: 12px; }
.filter--on { border-color: var(--accent); color: var(--accent); }
.filters__clear { font-size: 12px; }
/* A list's filters are chips (Chase, Oct 14 2026): "How can we help: Any". A chosen one fills with the indigo
   tint and has an ✕; the dropdown inside stays the native one, its box taken away. */
.chip { display: inline-flex; align-items: center; height: 32px; padding: 0 6px 0 14px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); font-size: 13px; }
.chip:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.chip__field { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); cursor: pointer; }
.chip--on { border-color: var(--accent); background: var(--accent-soft); }
.chip--on .chip__field { color: var(--accent); }
.chip__clear { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 4px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); }
.chip__clear:hover { opacity: 0.85; text-decoration: none; }
.filters--flush { padding-inline: 0; padding-bottom: 0; }
/* Tags page */
.tag-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.tag-list__item { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.tag-list__item .muted { font-size: 12px; }
.tag-list__colors { margin-left: auto; }
.swatches { display: flex; gap: 6px; margin: 0; padding: 0; border: 0; }
.swatch { position: relative; display: inline-block; width: 20px; height: 20px; border-radius: 50%; background: var(--tag, transparent); cursor: pointer; }
.swatch--none { border: 1.5px dashed var(--muted); }
.swatch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.swatch:has(input:checked) { outline: 2px solid var(--ink); outline-offset: 2px; }
.swatch:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Level with the page title's capitals (27px, 20px down), like the photo menu: the shorthand sets
   line-height to normal, so the wordmark sits 3px lower inside its box to meet them. */
/* The seal and the name at one weight (Chase, Oct 14 2026: "balanced sizes"): a 27px seal, a 21px name. */
.sidebar__brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 20px; color: var(--accent); font: 400 21px/1 var(--font-heading); letter-spacing: 0.08em; text-transform: uppercase; }
.sidebar__brand:hover { text-decoration: none; }
.brand-mark { flex: none; }
/* With a palette's artwork on, its own mark replaces the seal (drawn over it, which keeps the space). */
.brand-slot { position: relative; display: inline-flex; flex: none; }
.brand-slot::after { content: ""; position: absolute; inset: -3px; }
:root[data-art="on"] .brand-slot::after { background: var(--brand-art, none) center / contain no-repeat; }
:root[data-art="on"]:not([data-palette="desk"]) .brand-slot .brand-mark { opacity: 0; }
/* Shadow */
/* Collision detection: who else has this conversation open, on its page and on list rows. */
.presence { margin: 0 0 14px; }
.presence ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.presence li { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; background: var(--accent-soft); color: var(--ink); font-size: 14px; }
.presence__replying { background: color-mix(in srgb, var(--danger) 12%, var(--surface)) !important; }
.viewers { display: inline-flex; flex-direction: row-reverse; }
.viewers__rep { margin-left: -6px; }
.viewers__rep--replying .avatar { box-shadow: 0 0 0 2px var(--danger); }
.reply-warning { margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--rule); background: color-mix(in srgb, var(--danger) 12%, var(--surface)); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.reply-warning > div { flex: 1 1 260px; }
.reply-warning p { margin: 0; }
.reply-warning p + p { margin-top: 4px; }

.shadow-banner { margin-top: 22px; padding: 14px 16px; border: 1px dashed var(--rule); border-radius: var(--radius); color: var(--muted); }
.shadow-banner strong { color: var(--ink); }
.shadow { display: grid; gap: 16px; }
.shadow .card h2 { margin-bottom: 10px; font-size: 16px; }
.shadow pre { margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--sunken); overflow-x: auto; }
.parity__numbers { display: flex; flex-wrap: wrap; gap: 28px; margin-bottom: 12px; }
.parity__numbers > div { display: grid; gap: 2px; max-width: 280px; }
.parity__big { font-size: 44px; font-weight: 650; line-height: 1.1; letter-spacing: -0.02em; color: var(--accent); font-variant-numeric: tabular-nums; }
.parity__big--quiet { color: var(--ink); font-size: 28px; }
/* Command palette */
.sidebar__search {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 0 0 12px; padding: 7px 10px;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; font-size: 12px; cursor: pointer;
}
.sidebar__search kbd { border: 0; padding: 0; font: inherit; }
.sidebar__search:hover { border-color: var(--muted); color: var(--ink); }
.palette {
  width: min(600px, calc(100vw - 32px)); margin-top: 12vh; padding: 0; border: 1px solid var(--rule); border-radius: 14px;
  background: var(--surface); color: var(--ink); box-shadow: 0 24px 64px rgb(0 0 0 / 0.3);
}
.palette::backdrop { background: rgb(0 0 0 / 0.35); }
.palette__input { width: 100%; padding: 16px 18px; border: 0; border-bottom: 1px solid var(--rule); background: transparent; color: var(--ink); font: inherit; font-size: 17px; outline: none; }
.palette__items { max-height: min(420px, 55vh); margin: 0; padding: 6px; overflow-y: auto; list-style: none; }
.palette__group { padding: 8px 10px 4px; color: var(--muted); font-size: 12px; font-weight: 600; }
.palette__item { border-radius: 8px; cursor: pointer; }
.palette__item[aria-selected="true"] { background: var(--accent-soft); }
.palette__item[aria-selected="true"] .palette__label { color: var(--accent); font-weight: 600; }
.palette__form { display: block; margin: 0; }
.palette__action { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.palette__action:hover { text-decoration: none; }
.palette__action .icon { color: var(--muted); }
.palette__label { flex: 1; }
.palette__check { visibility: hidden; color: var(--accent); font-weight: 600; }
/* tags mode: ✓ on the conversation's tags */
.palette__tag[data-on="true"] .palette__check { visibility: visible; }
.palette__empty { margin: 0; padding: 18px; color: var(--muted); text-align: center; }
.palette__foot { display: flex; gap: 6px; align-items: center; margin: 0; padding: 8px 14px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 12px; }
.palette__keys { display: inline-flex; gap: 3px; }
.palette__help { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.palette__help:hover { color: var(--ink); }
.shortcuts { width: min(720px, calc(100vw - 32px)); max-height: 80vh; overflow-y: auto; padding: 20px 24px; border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: 0 24px 64px rgb(0 0 0 / 0.3); }
.shortcuts::backdrop { background: rgb(0 0 0 / 0.35); }
.shortcuts__head { display: flex; justify-content: space-between; align-items: baseline; }
.shortcuts__head h2 { margin: 0; }
.shortcuts__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 28px; }
.shortcuts h3 { margin: 14px 0 6px; color: var(--muted); font-size: 12px; }
.shortcuts dl { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 0; }
.shortcuts dt { margin: 0; }
.shortcuts dd { display: inline-flex; gap: 3px; margin: 0; }
/* Menus, tags, forms */
.menu { position: relative; display: inline-block; }
.menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 5px; }
.menu > summary::-webkit-details-marker { display: none; }
.menu__items {
  position: absolute; left: 0; z-index: 10; display: grid; min-width: 220px; margin-top: 6px; padding: 6px;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); box-shadow: 0 8px 24px rgb(0 0 0 / 0.15);
}
.menu--right .menu__items { left: auto; right: 0; }
.menu__items form { display: block; }
.menu__item { width: 100%; padding: 7px 10px; border: 0; border-radius: 6px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.menu__item:hover { background: var(--sunken); }
.menu__item { display: flex; align-items: center; gap: 8px; }
.menu__item--current { font-weight: 600; }
.menu__item--current::after { content: "✓"; margin-left: auto; color: var(--accent); }
.menu__rule { margin: 4px 6px; border: 0; border-top: 1px solid var(--rule); }
.menu > summary .icon:last-child { color: var(--muted); }
.menu > summary.pill--on .icon:last-child { color: inherit; } /* a menu that is on (bookmarked, waiting on a relay) shows it in the accent */
.status-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.status-dot--open { background: #2f9e6e; }
.status-dot--pending { background: #d99a1e; }
.status-dot--closed { background: var(--muted); }
.status-dot--spam { background: var(--danger); }
.pill--status { font-weight: 600; }
.pill--snoozed { border-color: var(--accent); color: var(--accent); }
.avatar--tiny { width: 18px; height: 18px; font-size: 8px; }
.composer__then { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-size: 12px; }
.composer__then select { padding: 7px 8px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; font-size: 12px; }
.composer__buttons { align-items: center; }
.menu__hint { margin: 6px 10px 2px; color: var(--muted); font-size: 12px; }
.pill { display: inline-flex; align-items: center; gap: 5px; }
.tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 22px; }
.tags .tag--label { display: inline-flex; align-items: center; gap: 4px; }
.tag__remove { display: inline-grid; place-items: center; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; }
.tag__remove:hover { color: var(--ink); }
/* The tag menu (conversations/_header): "Add tag" opens every tag, ✓ on the conversation's. */
.tags__add { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border: 1px dashed var(--rule); border-radius: 4px; color: var(--muted); font-size: 12px; line-height: 1.5; cursor: pointer; }
.tags__add:hover, .tags__picker[open] .tags__add { border-color: var(--muted); color: var(--ink); }
.tags__picker .menu__items { min-width: 240px; }
/* The case topic (conversations/_case_menu), first in the tags row: solid once a rep has set it, dashed and lighter
   while it's a rule's or the import's, and the same dashed "Topic" as Add tag when there is none. */
.case-pill { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border: 1px solid var(--rule); border-radius: 4px; background: var(--surface); color: var(--ink); font-size: 12px; line-height: 1.5; cursor: pointer; list-style: none; }
.case-pill::-webkit-details-marker { display: none; }
.case-pill--suggested { border-style: dashed; color: var(--muted); font-style: italic; }
.case-pill--blank { border-style: dashed; background: none; color: var(--muted); }
.case-menu[open] .case-pill, .case-pill:hover { border-color: var(--muted); }
.case-menu .menu__items { min-width: 280px; }
.case-menu__source { margin-top: 4px; }
.case-menu__ticks { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 2px 10px 6px; font-size: 13px; }
.case-menu__ticks form { display: inline; }
.case-menu__ticks label { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; cursor: pointer; }
.case-tag { color: var(--ink); }
/* Who wrote in, and the inbox as a menu to open it or move the conversation (conversations/_header). */
.case-stage { padding: 0 6px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 500; line-height: 1.6; }
.conversation__inbox-menu { display: inline-block; }
.conversation__inbox-menu summary { display: inline-flex; align-items: center; gap: 3px; color: var(--muted); cursor: pointer; list-style: none; }
.conversation__inbox-menu summary::-webkit-details-marker { display: none; }
.conversation__inbox-menu summary:hover, .conversation__inbox-menu[open] summary { color: var(--ink); }
.conversation__inbox-menu .menu__item { color: var(--ink); text-decoration: none; }
.tags__new { margin-bottom: 4px; }
.tags__options { max-height: 280px; overflow-y: auto; }
.composer__status { margin-left: 8px; color: var(--muted); font-size: 12px; }
.narrow { max-width: 760px; padding: 0 28px 48px; }
.page-header--flush { padding-inline: 0; }
/* A narrow page sits at the left, so its header reaches under the top right's search (296px wide, 68px from the
   edge) only on a smaller window, and keeps clear by just that much (Copilot's review of #100): the header's right
   edge (its 100% plus the page's 28px left padding) less where the search starts, plus a 16px gap. */
@media (min-width: 961px) {
  .narrow > .page-header--flush { padding-right: clamp(0px, calc(100% + 28px + 68px + 296px + 16px - (100vw - var(--sidebar))), var(--corner)); }
}
/* The new conversation pages: room for a real message. */
.narrow--wide { max-width: 1040px; }
.new-tabs { display: flex; gap: 3px; margin: 0 0 14px; }
.new-tabs__tab { padding: 7px 14px; border-radius: var(--radius); color: var(--ink); }
.new-tabs__tab:hover { background: var(--accent-soft); text-decoration: none; }
.new-tabs__tab--current { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.stacked { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.field > span { color: var(--muted); font-size: 13px; font-weight: 600; }
.field input, .field select, .field textarea {
  padding: 8px 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit;
}
.field input:disabled { background: var(--sunken); }
.fields { display: grid; gap: 10px; }
.field--compact { gap: 4px; }
.field--compact > span { font-size: 12px; font-weight: 500; }
.field--compact input, .field--compact select, .field--compact textarea { padding: 5px 8px; font-size: 13px; }
.custom-field + .custom-field { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); }
.custom-field__actions { display: flex; gap: 8px; }
.check { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--muted); }
.settings { display: grid; gap: 16px; }
.settings .card h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 16px; }
.settings .card .field + .field { margin-top: 18px; }
.settings .card h2 + .muted { margin: -4px 0 14px; }
.field > .field__hint { color: var(--muted); font-size: 12px; font-weight: 400; }
.field .check { margin-top: 0; }
.field .segmented { justify-self: start; }
/* A name on the left, its setting or count on the right, ruled between rows. */
.settings__rows { list-style: none; margin: 0; padding: 0; }
.settings__rows > * { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule); }
.settings__rows > :first-child { padding-top: 0; border-top: 0; }
.settings__rows > :last-child { padding-bottom: 0; }
.settings__rows label { font-weight: 600; }
.settings__rows a { font-weight: 500; }
.settings__rows .filter { min-width: 0; padding: 6px 28px 6px 10px; font-size: 13px; }
.settings__acks { display: grid; }
.settings__ack { display: grid; gap: 8px; justify-items: start; padding: 14px 0; border-top: 1px solid var(--rule); }
.settings__ack:first-child { padding-top: 0; border-top: 0; }
.settings__ack:last-child { padding-bottom: 0; }
.settings__ack .check { margin-top: 0; color: var(--ink); }
.settings__ack .field { justify-self: stretch; }
.card--mock { border-style: dashed; box-shadow: none; }
.choices { width: 100%; border-collapse: collapse; }
.choices th, .choices td { padding: 8px 0; border-bottom: 1px solid var(--rule); text-align: center; }
.choices thead th { color: var(--muted); font-size: 12px; font-weight: 600; }
.choices tbody th { font-weight: 400; text-align: left; }
.choices th:first-child { width: auto; padding-right: 12px; }
.choices td { width: 64px; }
.choices input { width: 18px; height: 18px; accent-color: var(--accent); }
.choices__inboxes { margin: 0; padding: 0; border: 0; }
.choices__inboxes legend { padding: 0; color: var(--muted); font-size: 13px; font-weight: 600; }
.device { display: grid; gap: 8px; justify-items: start; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); }
.device p, .device ol { margin: 0; }
.device ol { padding-left: 20px; }
.settings__save { display: flex; justify-content: flex-end; }
.settings__addresses { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 6px; }
.settings__addresses li { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.settings__addresses li span { overflow-wrap: anywhere; }
.settings__add-address { display: flex; gap: 8px; }
.settings__add-address input { flex: 1; min-width: 0; padding: 6px 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; }
/* Outages from 37status: its incidents to start from, its timeline, and the conversations suggested for linking. */
.status-incidents__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.status-incidents__item .button_to { margin: 0; flex: none; }
.status-incidents__or { margin-top: 8px; font-size: 16px; }
.status-incidents__resolved { margin: 0; }
.status-incidents__resolved a { text-decoration: underline; }
.status-incidents__updates { margin-top: 12px; }
.status-incidents__suggested { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }

/* A bug or feature's waiting conversations, by who owes them word: a row each, with Dismiss. Nobody owning some is
   the thing to fix, so it reads as a warning. */
.relay-owner { margin: 16px 0 8px; font-size: 14px; }
.relay-owner:first-of-type { margin-top: 4px; }
.relay-owner--nobody { color: var(--warn); }
.relay-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.relay-link > div { min-width: 0; }
.relay-link .button_to { margin: 0; flex: none; }
.segmented-row + .segmented-row { margin-top: 6px; }
.segmented { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--sunken); }
.segmented label { position: relative; }
.segmented input { position: absolute; opacity: 0; }
.segmented span { display: block; padding: 6px 14px; border-radius: 8px; color: var(--muted); cursor: pointer; }
.segmented input:checked + span { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); }
.segmented input:focus-visible + span { outline: 2px solid var(--accent); }
/* Help Docs */
.knowledge { display: grid; gap: 18px; max-width: 1080px; padding: 10px 28px 48px; }
/* Its box top right searches the docs (layouts/_knowledge_search): the field fills the box the palette's button has elsewhere. */
.top-search--docs { padding: 0; cursor: auto; }
.top-search--docs:focus-within { border-color: var(--accent); }
.top-search--docs input { flex: 1; min-width: 0; padding: 8px 12px; border: 0; background: none; color: var(--ink); font: inherit; outline: none; }
.top-search--docs input::placeholder { color: var(--muted); }
.knowledge__note { margin: 0; font-size: 13px; }
.knowledge__collection { display: grid; gap: 6px; padding: 21px; }
.knowledge__collection p { margin: 0; }
.knowledge__collection > .muted { font-size: 12px; }
.knowledge__collection-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.knowledge__collection-header h2 { font-size: 20px; }
.knowledge__collection-header h2 .muted { margin-left: 4px; font-family: var(--font-body); font-size: 11px; font-weight: 400; letter-spacing: 0.08em; }
.tag--audience { padding: 2px 8px; font-size: 12px; }
/* One column, in the order the collection keeps its categories: moving one up or down has to read as that. */
.knowledge__categories { display: grid; margin-top: 12px; }
.knowledge__category { padding: 14px 0 12px; border-top: 1px solid var(--rule); }
.knowledge__categories h3 { margin-bottom: 8px; font-size: 14px; font-weight: 500; color: var(--ink); text-transform: none; letter-spacing: normal; }
.knowledge__categories h3 .muted { font-weight: 400; }
.knowledge__categories .mini-list { gap: 0; }
.knowledge__categories .mini-list { font-size: 14px; }
/* A title, then any tag that isn't Published, on one line. */
.knowledge__categories .mini-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 5px 0; }
.knowledge__collection .knowledge__write { margin-top: 8px; }
/* The Help Docs sidebar (layouts/_knowledge_sidebar), and Reports' (reports/_sidebar). */
.sidebar--knowledge, .sidebar--pages { gap: 6px; padding-bottom: 24px; }
.sidebar__back { display: flex; align-items: center; gap: 6px; padding: 4px 10px; color: var(--muted); font-size: 13px; }
.sidebar__heading { margin: 14px 0 2px; padding: 0 10px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.sidebar__heading a { color: inherit; }
.sidebar__links { list-style: none; display: grid; gap: 2px; margin: 4px 0 0; padding: 0; font-size: 13px; }
.sidebar__links a { display: block; padding: 3px 10px; color: var(--muted); }
.sidebar__links a:hover { color: var(--ink); }
/* New article (layouts/_knowledge_new) opens upward, the width of the sidebar, from its foot. */
.sidebar__new-menu { display: flex; flex: 1; min-width: 0; }
.sidebar__new-menu > summary.sidebar__new { display: flex; cursor: pointer; }
.sidebar__new-menu .menu__items { top: auto; bottom: 100%; right: 0; margin: 0 0 6px; }
.sidebar__sublist { list-style: none; margin: 1px 0 4px 14px; padding: 0 0 0 8px; border-left: 1px solid var(--rule); display: grid; gap: 1px; font-size: 14px; }
.sidebar__sublist .sidebar__item { padding: 3px 8px; }
.knowledge__readonly { font-size: 12px; }
.knowledge__category { scroll-margin-top: 16px; }
.knowledge__category-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.knowledge__category-header h3 { margin: 0; }
.knowledge__category-tools { display: flex; align-items: center; gap: 4px; }
.knowledge__category-tools .button_to { margin: 0; }
.knowledge__category-note { margin: 0 0 6px; font-size: 13px; }
.knowledge__category-status { color: var(--warn); }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; }
.icon-button:hover { border-color: var(--rule); color: var(--ink); }
.knowledge__products { padding-bottom: 18px; }
/* The product's own color, as Outpost uses it, so a glance says whose docs these are. */
.product-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.product-dot--hey { background: var(--product-hey); }
.product-dot--basecamp { background: var(--product-basecamp); }
.article-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.article-results li { padding: 12px 16px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
.article-results__title { margin-right: 8px; font-weight: 500; }
.article-results p { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.article-results mark, .article-body mark { background: color-mix(in srgb, #e5a50a 30%, transparent); color: inherit; border-radius: 2px; }

.article { padding: 22px var(--corner) 48px 28px; max-width: 1240px; }
/* An article's panels (articles/_panels) take the room on its right that the top right's search keeps clear: a
   column beside the article, level with its title. Not sticky: the bar above wraps to two or three rows and would
   cover it. Too narrow for two columns, they stack under the title. */
.article:has(.article__rail) { padding-right: 28px; }
.article__rail { display: grid; gap: 14px; align-content: start; margin-bottom: 22px; }
@media (min-width: 1180px) {
  /* The last row takes whatever height the rail needs beyond the article, so none opens between its parts. */
  .article:has(.article__rail) > article { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: repeat(5, auto) 1fr; column-gap: 40px; align-items: start; }
  .article:has(.article__rail) > article > * { grid-column: 1; }
  .article:has(.article__rail) > article > .article__rail { grid-column: 2; grid-row: 1 / -1; margin-bottom: 0; }
  /* With no bar (a past version), the search box is level with the title: the rail starts under it. */
  .app__main:not(:has(> .article-bar)) .article__rail { margin-top: 48px; }
}
/* With no bar (an imported article, a past version), the search box sits level with the crumbs and title: they keep
   clear of it. Two columns end short of it already, so the title only needs it in one (Copilot's review of #109). */
.app__main:not(:has(> .article-bar)) > .article > .conversation__crumbs { padding-right: calc(var(--corner) - 28px); }
@media (max-width: 1179px) {
  .app__main:not(:has(> .article-bar)) > .article .article__header { padding-right: calc(var(--corner) - 28px); }
}
.article__header h1 { font-size: 26px; }
.article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 22px; font-size: 13px; }
.article__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.article__actions .button_to { margin: 0; }
/* The table of contents, at the top of an article with a few sections. */
.article-toc { border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); }
.article-toc summary { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; cursor: pointer; font-weight: 600; list-style: none; }
.article-toc summary::-webkit-details-marker { display: none; }
.article-toc[open] summary { border-bottom: 1px solid var(--rule); }
.article-toc[open] .article-toc__chevron { transform: rotate(180deg); }
.article-toc ol { list-style: none; margin: 0; padding: 8px 14px 10px; display: grid; gap: 2px; }
.article-toc li a { display: block; padding: 3px 0; color: var(--muted); }
.article-toc li a:hover { color: var(--ink); }
.article-toc .article-toc__sub { padding-left: 14px; font-size: 0.92em; }
.plan-note { color: var(--muted); font-size: 12px; }
.plan-note--off { color: var(--ink); font-weight: 500; }
.plan-ruling { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; font-size: 14px; }
.plan-ruling label { display: flex; align-items: center; gap: 8px; }
.plan-ruling__stale { margin: 8px 0 0; color: var(--warn); font-size: 12px; }
/* An HTML block in the editor (articles/html_blocks/_html_block): one piece, its words, not its layout. */
.html-block { margin: 0; padding: 10px 14px; border: 1px dashed var(--rule); border-radius: 8px; background: var(--sunken); }
.html-block__label { color: var(--ink); font-size: 12px; font-weight: 600; }
.html-block__text { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
/* What Publish rules for the version it publishes (articles/_publish_fields). */
.publish-fields { display: grid; gap: 6px; margin: 0 0 10px; padding: 0; border: 0; font-size: 14px; }
.publish-fields label { display: flex; align-items: center; gap: 8px; }
.publish-fields p { margin: 4px 0 0; font-size: 13px; }
.publish-fields__plans { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.publishing__form { margin: 0 0 10px; }
.publishing__status { display: grid; justify-items: start; gap: 4px; margin-bottom: 10px; }
.publishing__fact { margin: 0; font-size: 13px; }
.publishing__note { margin: 0 0 12px; font-size: 13px; }
.publishing__hint { margin: 0; font-size: 13px; }
/* The article's actions, kept at the top of the page as it scrolls (articles/_action_bar). Right padding leaves room for the account menu. */
.article-bar { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 9px var(--corner) 9px 28px; border-bottom: 1px solid var(--rule); background: var(--surface); }
.article-bar__status { display: flex; align-items: center; }
.article-bar__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.article-bar__link { font-size: 13px; }
.article-bar__danger { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.article-bar .button_to { margin: 0; }
.category-picker { display: grid; gap: 6px; margin: 0; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--radius); }
.category-picker legend { padding: 0 6px; font-weight: 600; font-size: 13px; }
.category-picker p { margin: 4px 0 0; font-size: 13px; }
.category-danger { display: grid; justify-items: start; gap: 6px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--rule); }
.category-danger h3 { margin: 0; }
.category-danger p { margin: 0; font-size: 13px; }
.article-body { max-width: 68ch; font-size: 16px; line-height: 1.6; }
.article-body > * + * { margin-top: 0.9em; }
.article-body h2, .article-body h3, .article-body h4 { margin-top: 1.6em; line-height: 1.3; scroll-margin-top: 16px; }
.article-body h2 { font-size: 20px; }
.article-body h3 { font-size: 17px; }
.article-body h4 { font-size: 15px; }
.article-body p, .article-body ul, .article-body ol { margin-bottom: 0; }
.article-body li + li { margin-top: 0.35em; }
.article-body img { display: block; max-width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 8px; }
.article-body pre { padding: 12px 14px; overflow-x: auto; border-radius: 8px; background: var(--sunken); font-family: var(--font-mono); font-size: 13px; }
.article-body code { font-family: var(--font-mono); font-size: 0.9em; }
.callout { padding: 12px 16px; border-left: 3px solid var(--note-rule); border-radius: 8px; background: var(--note); }
.callout > * + * { margin-top: 0.6em; }
.callout > :first-child { margin-top: 0; }
.callout--blue, .callout--info { border-color: var(--info); background: color-mix(in srgb, var(--info) 12%, transparent); }
.callout--green, .callout--success { border-color: var(--accent); background: var(--accent-soft); }
.callout--red, .callout--danger { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.article-body__table { overflow-x: auto; }
.article-body table { border-collapse: collapse; font-size: 14px; }
.article-body th, .article-body td { padding: 6px 12px; border: 1px solid var(--rule); text-align: left; vertical-align: top; }
.article-body th { background: var(--sunken); }
.article-body blockquote { margin: 0; padding-left: 14px; border-left: 3px solid var(--rule); color: var(--muted); }
.article-tabs { border: 1px solid var(--rule); border-radius: 8px; }
.article-tabs__bar { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px 6px 0; border-bottom: 1px solid var(--rule); }
.article-tabs__radio { position: absolute; opacity: 0; pointer-events: none; }
.article-tabs__bar label { margin-bottom: -1px; padding: 6px 12px; border: 1px solid transparent; border-radius: 6px 6px 0 0; color: var(--muted); font-size: 14px; cursor: pointer; }
.article-tabs__radio:checked + label { border-color: var(--rule); border-bottom-color: var(--surface); background: var(--surface); color: var(--ink); font-weight: 600; }
.article-tabs__radio:focus-visible + label { outline: 2px solid var(--accent); }
.article-tabs__panel { display: none; padding: 12px 16px; }
.article-tabs__panel > * + * { margin-top: 0.6em; }
/* Radio n checked shows panel n. Eight is more tabs than any doc uses. */
.article-tabs:has(> .article-tabs__bar > .article-tabs__radio:nth-of-type(1):checked) > .article-tabs__panel:nth-of-type(1),
.article-tabs:has(> .article-tabs__bar > .article-tabs__radio:nth-of-type(2):checked) > .article-tabs__panel:nth-of-type(2),
.article-tabs:has(> .article-tabs__bar > .article-tabs__radio:nth-of-type(3):checked) > .article-tabs__panel:nth-of-type(3),
.article-tabs:has(> .article-tabs__bar > .article-tabs__radio:nth-of-type(4):checked) > .article-tabs__panel:nth-of-type(4),
.article-tabs:has(> .article-tabs__bar > .article-tabs__radio:nth-of-type(5):checked) > .article-tabs__panel:nth-of-type(5),
.article-tabs:has(> .article-tabs__bar > .article-tabs__radio:nth-of-type(6):checked) > .article-tabs__panel:nth-of-type(6),
.article-tabs:has(> .article-tabs__bar > .article-tabs__radio:nth-of-type(7):checked) > .article-tabs__panel:nth-of-type(7),
.article-tabs:has(> .article-tabs__bar > .article-tabs__radio:nth-of-type(8):checked) > .article-tabs__panel:nth-of-type(8) { display: block; }
.article-body__video a::before { content: "▶ "; }
.grants { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.grants li { display: flex; align-items: center; gap: 8px; }
.grants--yes .icon { color: var(--accent); }
.grants--no { color: var(--muted); }
.grants__why { margin: 10px 0 0; font-size: 12px; }
.demo__chips { margin: 14px 0 6px; }
/* Queenbee customer card */
.queenbee { display: grid; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 13px; }
.queenbee__loading { margin: 14px 0 0; font-size: 13px; }
.queenbee__sample { margin: 0; color: var(--warn); font-size: 12px; font-weight: 600; }
.queenbee__item h4 { margin: 0 0 4px; font-size: 14px; }
.queenbee__item h4 a { font-weight: 400; }
.queenbee__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; overflow-wrap: anywhere; }
.queenbee__item details { margin-top: 4px; }
.queenbee__item summary { cursor: pointer; }
.queenbee__item details .queenbee__facts { margin: 4px 0 0 12px; }
.queenbee-samples__note { margin: 0 28px 16px; }
.queenbee-samples { display: grid; grid-template-columns: repeat(auto-fill, 300px); gap: 18px; align-items: start; padding: 0 28px 48px; }
.queenbee-samples__name { margin: 0; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
/* Lexxy, in Dispatch's colors */
:root {
  --lexxy-color-canvas: var(--surface);
  --lexxy-color-ink: var(--ink); /* .lexxy-content's own text color: without it, notes and replies were near-black in dark mode */
  --lexxy-color-text: var(--ink);
  --lexxy-color-text-subtle: var(--muted);
  --lexxy-color-link: var(--link);
  --lexxy-color-selected: var(--accent-soft); /* pressed toolbar buttons (bold on, a menu open): Lexxy's blue otherwise */
  --lexxy-color-selected-hover: var(--accent-soft);
  --lexxy-color-ink-lighter: var(--rule);
  --lexxy-color-ink-lightest: var(--sunken);
  --lexxy-color-code-bg: var(--sunken);
}
lexxy-editor { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
/* In the composer the editor sits flush inside the box, between the tabs and the footer. */
.composer lexxy-editor { border: 0; border-radius: 0; }
/* The reply toolbar, after Help Scout's (Chase, Oct 5 2026): format, bold, italic, underline, link,
   lists, quote, code, image, attach, plus our own menus for help article links and saved replies
   (composer_controller places them). Lexxy only switches its upload buttons by setting, so the rest
   are hidden here; their hotkeys still work. */
.composer lexxy-toolbar :is(button[name="strikethrough"], button[name="table"], button[name="divider"], button[name="undo"], button[name="redo"]),
.composer lexxy-toolbar lexxy-highlight-dropdown { display: none; }
.toolbar-menu { position: relative; display: inline-flex; }
.toolbar-menu > summary { list-style: none; cursor: pointer; }
.toolbar-menu > summary::-webkit-details-marker { display: none; }
.toolbar-menu[open] > summary { background-color: var(--lexxy-color-selected); }
.toolbar-menu__panel { left: auto; right: 0; width: 320px; max-height: 340px; overflow-y: auto; }
.toolbar-menu__search { width: 100%; margin-bottom: 4px; padding: 7px 10px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; }
.article-link { display: grid; gap: 1px; }
.article-link .muted { font-size: 12px; }
lexxy-editor .lexxy-editor__content { min-height: 160px; padding: 14px 17px; line-height: 1.65; }
.composer--note lexxy-editor { --lexxy-color-canvas: var(--note); background: var(--note); }
/* Reply, Text and Note (entries/_composer): a button for each, opening a box of its own. The box's edge says
   which it is, so a note never looks like a reply. */
.composers__picker { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.composers__pick { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.composers__pick kbd { border-color: currentColor; opacity: .75; }
[data-keyboard=off] .composers__pick kbd { display: none; }
.composers__pick--email-out { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.composers__pick--note { border-color: var(--note-rule); background: var(--note); }
.composers__pick:hover { filter: brightness(.96); }
.composers__draft { padding: 1px 6px; border-radius: 4px; background: var(--surface); color: var(--muted); font-size: 11px; font-weight: 500; }
.composer--email-out, .composer--sms { border-color: var(--accent); }
.composer--note { border-color: var(--note-rule); }
.composer__head { display: flex; align-items: center; gap: 8px; padding-right: 8px; border-bottom: 1px solid var(--rule); }
.composer__head .composer__hint { flex: 1; border-bottom: 0; }
.composer__close { display: inline-flex; padding: 6px; border: 0; border-radius: var(--radius); background: none; color: var(--muted); cursor: pointer; }
.composer__close:hover { background: var(--accent-soft); color: var(--ink); }
/* An Outpost conversation reads like messages: the customer's on the left, ours on the right, notes and
   the trail full width between them. The reply box is a chat box: no formatting bar, no Cc or Send later,
   a short box that grows. Files stay: a screenshot shows in the widget (outpost/visits/conversations). (Conversation::Channel#messaging?) */
.timeline--chat .entry--widget, .timeline--chat .entry--email-out:not(.entry--automated) { max-width: min(78%, 620px); padding: 12px 16px; border-radius: 16px; }
.timeline--chat .entry--widget { justify-self: start; border-bottom-left-radius: 4px; }
.timeline--chat .entry--email-out:not(.entry--automated) { justify-self: end; border: 0; border-bottom-right-radius: 4px; background: var(--accent-soft); }
.timeline--chat :is(.entry--widget, .entry--email-out) .entry__header { margin-bottom: 6px; }
.timeline--chat :is(.entry--widget, .entry--email-out) .entry__header .avatar { display: none; }
.timeline--chat :is(.entry--widget, .entry--email-out) .entry__author { flex-basis: auto; font-weight: 500; }
.composer--chat lexxy-toolbar, .composer--chat .composer__add, .composer--chat .composer__fields,
.composer--chat .composer__later { display: none; }
.composer--chat lexxy-editor .lexxy-editor__content { min-height: 2.6em; max-height: 40vh; overflow-y: auto; }
/* Selects draw their own chevron with room around it: the native one sits flush against the border on
   macOS. After every select's own rule, so their background and padding shorthands don't undo it. */
.filter, .composer__then select, .field select, .composer__field select, .search-page__refine select {
  appearance: none; padding-right: 28px;
  background-image: var(--chevron); background-repeat: no-repeat; background-position: right 9px center; background-size: 12px;
}
/* A date field shows its own calendar: no arrow beside it. */
input.filter[type=date] { padding-right: 8px; background-image: none; }
/* Inside a chip the dropdown loses its box: the chip is the box. */
.chip .filter { field-sizing: content; height: 30px; padding: 0 20px 0 2px; border: 0; border-radius: 0; background-color: transparent; background-position: right 2px center; color: var(--ink); font: inherit; outline: none; }
.chip input.filter[type=date] { padding-right: 2px; }
.chip--on .filter { color: var(--accent); font-weight: 600; }
/* Focus is the app's indigo, not the browser's blue. */
:is(.filter, .composer__then select, .field select, .composer__field select):focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.chip .filter:focus-visible { outline: none; }

/* The folders: part of the sidebar's column on a desktop, a sideways strip on a phone. */
.sidebar__folders { display: contents; }
@media (max-width: 960px) {
/* start: on a short page the spare height must not be shared out to the top bar's row. */
  .app, .app--knowledge { grid-template-columns: 1fr; align-content: start; }
/* On a phone the Help Docs and Reports sidebars are a block above the page, not a sticky bar; Help Docs' New article keeps its words. */
  .sidebar:is(.sidebar--knowledge, .sidebar--pages) { position: static; flex-direction: column; align-items: stretch; max-height: none; height: auto; padding: 10px 16px 16px; }
/* Brand, search and New stay put at the top; the folders scroll sideways under them. */
  .sidebar { position: sticky; top: 0; z-index: 20; height: auto; max-height: 100dvh; overflow-y: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 16px 0; padding-top: max(10px, env(safe-area-inset-top)); border-right: 0; border-bottom: 1px solid var(--rule); }
  .sidebar__brand { padding: 0; font-size: 15px; }
  .sidebar__search, .sidebar > .sidebar__search { display: flex; flex: 1; min-width: 0; margin: 0; padding: 9px 10px; font-size: 13px; }
  :root { --corner: 60px; } /* a phone has the photo only; search is in the top bar */
  .top-search { display: none; }
  .sidebar__search kbd { display: none; }
  .sidebar__folders { order: 1; display: flex; flex: 0 0 100%; gap: 2px; margin: 0 -16px; padding: 0 16px 8px; overflow-x: auto; scrollbar-width: none; }
  .sidebar__folders::-webkit-scrollbar { display: none; }
  .sidebar__folders .sidebar__list { display: flex; gap: 2px; }
  .sidebar__folders .sidebar__item { flex: none; padding: 9px 12px; font-size: 12.5px; border: 1.5px solid var(--rule-strong); }
  /* In the sideways strip each folder is its own boxed tab, not a ruled row. */
  .sidebar__folders .sidebar__list { margin: 0; border-top: 0; }
  .sidebar__folders .sidebar__list + .sidebar__list, .sidebar__views + .sidebar__list { margin-top: 0; }
  /* New conversation sits beside the search, its pencil alone. */
  .sidebar__bar { position: static; margin: 0; padding: 0; border: 0; background: none; }
  .sidebar__new { flex: none; padding: 9px 12px; }
  .sidebar__new span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .page-header { flex-wrap: wrap; padding: 24px 60px 18px 16px; }
  .menu.account { top: 31px; right: 16px; }
/* the phone's title starts 24px down */
  .app__main:has(> .conversation__nav) > .menu.account { top: 7px; }
  .page-header .search { margin-right: -44px; }
  .page-header--flush { padding-inline: 0; }
  .search, .search input { width: 100%; }
  .filters { padding: 0 16px 18px; }
  .filters__form { margin-left: 0; }
/* The customer moves above the subject, so person, subject and wait all stay readable. */
  .conversation-table { margin: 0 16px; }
  .urgent-panel--outage, .relay-suggesting { margin-right: 16px; margin-left: 16px; }
  .conversation-table__head { display: none; }
  .conversation-row, .conversation-table--no-assignee .conversation-row { grid-template-columns: 32px minmax(0, 1fr) auto; row-gap: 2px; padding: 11px 4px; }
  .conversation-row__check { top: 18px; left: 10px; translate: none; }
  .conversation-row__who { grid-column: 2; font-size: 13px; color: var(--muted); }
  .conversation-row__what { grid-column: 2; }
  .conversation-row__meta { grid-column: 3; grid-row: 1 / 3; align-self: start; min-width: 0; }
  .conversation-row__assignee { grid-column: 2; color: var(--muted); font-size: 12px; }
  .conversation-row__assignee .avatar { display: none; }
/* The subject first, up to two lines, then its tags: they used to squeeze it to three letters. */
  .conversation-row__line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; overflow: visible; white-space: normal; }
  .conversation-row__line .tag { margin-right: 0; vertical-align: baseline; }
  .conversation-row__subject { order: -1; flex: 1 0 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .conversation-table__keys { display: none; }
  .conversation__nav { padding: 12px 60px 12px 16px; }
/* Under the phone's own top bar, so it scrolls with the thread; the big title is right under it. */
  .conversation__bar { position: static; margin: -20px -16px 16px; padding: 6px 8px; }
  .conversation__bar-title { display: none; }
  .conversation { grid-template-columns: 1fr; }
  .conversation__main { padding: 20px 16px 32px; }
  .conversation__header h1 { font-size: 25px; }
  .conversation__aside { position: static; min-height: 0; padding: 20px 16px; border-left: 0; border-top: 1px solid var(--rule); }
/* Settings and other single-column pages: nothing may be wider than the screen. */
  .narrow { padding: 0 16px 32px; }
  .settings { grid-template-columns: minmax(0, 1fr); }
/* The reply box: send buttons wrap under what they act on, and fields are 16px so iOS doesn't zoom into them. */
  .composer__footer { flex-direction: column; align-items: stretch; }
  .composer__buttons { flex-wrap: wrap; margin-left: 0; }
  .composer__buttons .button, .composer__buttons summary { flex: 1 1 auto; justify-content: center; }
  .composer__then { flex-wrap: wrap; }
  .composer__field > span { width: 44px; }
  input, select, textarea, lexxy-editor .lexxy-editor__content { font-size: 16px; }
  .palette__action { padding-block: 13px; }
  .palette__foot { display: none; }
  .button, .sidebar__new { min-height: 40px; }
  .button--small { min-height: 34px; }
/* The editor's toolbar wraps to a second row instead of running off the screen. */
  lexxy-toolbar { flex-wrap: wrap; }
  .settings__photo > div { min-width: 0; }
  .settings input[type="file"] { max-width: 100%; }
  .segmented { display: flex; flex-wrap: wrap; }
  .settings__save { justify-content: stretch; }
  .settings__save .button { flex: 1; }
  .article { padding: 16px; }
  .knowledge { padding: 10px 16px 32px; }
  .sidebar--knowledge .sidebar__bar { margin-top: 12px; }
  .sidebar--knowledge .sidebar__new { flex: 1; }
  .sidebar--knowledge .sidebar__new span { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  /* The docs' search is the page's first row, clear of the photo, as Search or jump to is in the top bar. */
  .top-search.top-search--docs { position: static; display: flex; width: auto; margin: 16px var(--corner) 0 16px; }
  .knowledge__collection { padding: 17px; }
}
/* What customers said of the docs and the AI's answers. */
.feedback { margin: 0 28px; max-width: 720px; }
.feedback h2 { margin: 24px 0 8px; font-size: 15px; }
.feedback__table { width: 100%; border-collapse: collapse; }
.feedback__table th, .feedback__table td { padding: 6px 8px; border-bottom: 1px solid var(--rule); text-align: left; }
.feedback__comments { margin: 0; padding: 0; list-style: none; }
.feedback__comments li { padding: 10px 0; border-bottom: 1px solid var(--rule); }
.feedback__comments p { margin: 4px 0 0; }
/* The demo mailbox (demo_messages): what inboxes would have sent, shown as the customer gets it. The email is
   on --paper, as mail apps show it, whatever the theme. */
.demo-mailbox { width: calc(100% - 56px); margin: 0 28px; border-collapse: collapse; }
.demo-mailbox th, .demo-mailbox td { padding: 8px; border-bottom: 1px solid var(--rule); text-align: left; overflow-wrap: anywhere; }
.demo-mailbox th { color: var(--muted); font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.07em; }
.demo-message__headers { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 0 0 16px; font-size: 13px; }
.demo-message__headers dt { color: var(--muted); }
.demo-message__headers dd { margin: 0; overflow-wrap: anywhere; }
.demo-message__body { display: block; width: 100%; height: 420px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); }
.demo-message__text { margin: 0; padding: 16px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); color: var(--paper-ink); white-space: pre-wrap; font-family: var(--font-body); }
.demo-message__answer { margin-top: 20px; }
@media (max-width: 960px) {
  .demo-mailbox { width: calc(100% - 32px); margin: 0 16px; }
  .demo-mailbox th:nth-child(3), .demo-mailbox td:nth-child(3) { display: none; }
}
/* Saved reply menu search, and the tag admin table */
.menu__search { width: calc(100% - 12px); margin: 4px 6px 6px; padding: 6px 8px; border: 1px solid var(--rule); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; }
.menu__item[hidden] { display: none; }
.tag-admin { width: 100%; border-collapse: collapse; font-size: 13px; }
.tag-admin th { padding: 6px 8px; color: var(--muted); font-weight: 600; text-align: left; }
.tag-admin td { padding: 4px 8px; border-top: 1px solid var(--rule); vertical-align: middle; }
.tag-admin input { width: 100%; padding: 4px 8px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--ink); font: inherit; }
.tag-admin input:hover, .tag-admin input:focus { border-color: var(--rule); background: var(--surface); }
.tag-admin__actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.tag-admin__actions input { border-color: var(--rule); width: 140px; }
.sign-in { display: grid; gap: 16px; max-width: 360px; margin: 12vh auto 0; padding: 0 16px; }
.sign-in h1 { font: 400 24px/1.2 var(--font-heading); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.sign-in__brand { display: flex; align-items: center; justify-content: center; gap: 14px; }

/* Outbound email: Cc/Bcc, attachments, undo send, schedule, forward. */
.composer__add { display: inline-flex; gap: 10px; }
.composer__buttons { flex-wrap: wrap; justify-content: flex-end; }
.link { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; cursor: pointer; }
.link:hover { text-decoration: underline; }
form.inline { display: inline; }
.composer__attach { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.composer__later { position: relative; }
.composer__later .menu__items { right: 0; left: auto; bottom: 100%; top: auto; min-width: 210px; }
.composer__custom { display: grid; gap: 4px; }
.composer__custom input { padding: 6px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; }
.entry__hold { display: flex; align-items: center; gap: 10px; margin: -4px 0 8px; padding: 6px 12px; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent); font-size: 12px; }
/* After a reply is sent: top middle of the page, above everything, with Undo until the hold ends (layouts/_undo_toast). */
.undo-toast { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 1000; display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px); padding: 10px 14px 10px 18px; border-radius: 10px; background: var(--ink); color: var(--surface); box-shadow: 0 6px 24px rgb(0 0 0 / 25%); font-size: 14px; font-weight: 600; }
.undo-toast__undo { padding: 4px 12px; border: 1px solid currentColor; border-radius: 6px; background: none; color: inherit; font: inherit; cursor: pointer; }
.undo-toast__undo:hover { background: rgb(255 255 255 / 15%); }
.undo-toast__close { padding: 0 4px; border: 0; background: none; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; opacity: .7; }
.undo-toast__close:hover { opacity: 1; }
/* ⋮ beside a message's time: Forward, Split, Edit, Hide, Copy link (entries/_menu). */
.entry__menu { margin-left: 2px; }
.entry__menu > summary { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--muted); cursor: pointer; }
.entry__menu > summary svg { fill: currentColor; }
.entry__menu > summary:hover, .entry__menu[open] > summary { background: var(--sunken); color: var(--ink); }
.entry__menu .menu__items { min-width: 180px; font-size: 14px; }
/* Hidden for everyone (and from the customer): folded like automatic mail, shown on request. */
.entry--hidden { background: transparent; border-style: dashed; padding: 10px 18px; }
.entry--hidden .entry__header { margin-bottom: 0; }
.entry__sent { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--rule); font-size: 12px; }
.entry__sent p, .entry__files { margin: 0 0 4px; }
.entry__files { padding-left: 0; list-style: none; }
.entry--forward { padding: 13px 15px; border-color: transparent; background: var(--note); font-size: 13px; }
/* Notifications: mentions and followed activity. An unread one has an accent bar, like a selected row. */
.notifications__tabs { margin-bottom: 14px; }
.notifications { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.notifications__item { border-bottom: 1px solid var(--rule); }
.notifications__item button { display: grid; gap: 2px; width: 100%; padding: 12px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.notifications__item button:hover { background: var(--surface); }
.notifications__item--unread { box-shadow: inset 2px 0 0 var(--accent); }
.notifications__item--unread .notifications__what { font-weight: 600; }
.notifications__preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notifications__time { font-size: 12px; }
/* Reports */
.report { margin: 0 28px 32px; max-width: 1040px; }
.report h2 { margin: 28px 0 10px; font-size: 15px; }
.report__filters { padding-inline: 28px; }
.report__figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.report__figure { display: grid; gap: 2px; align-content: start; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
.report__figure strong { font-size: 24px; font-weight: 500; }
.report__label { color: var(--muted); font-size: 12px; }
.report__clamp { padding-inline: 28px; }
.report__note { margin: 10px 0 0; font-size: 12px; max-width: 70ch; }
.report__scroll { overflow-x: auto; }
.report__table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.report__table th, .report__table td { padding: 5px 8px; border-bottom: 1px solid var(--rule); text-align: left; white-space: nowrap; }
.report__table thead th { color: var(--muted); font-size: 12px; font-weight: 400; }
.report__table tbody th { font-weight: 400; }
.report__counting { display: grid; gap: 8px; margin-top: 14px; padding: 14px 10px 0; border-top: 1px solid var(--rule); color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.report__counting .sidebar__heading { margin: 0 0 2px; padding: 0; }
.report__counting p { margin: 0; }
.report h2[id] { scroll-margin-top: 16px; }
.report__chart-sub { margin: -6px 0 12px; font-size: 13px; }
/* Over time: one column per day (or month), the busiest at the top of a round-number scale. The value is in the
   column's tip on hover and focus. */
.report-chart { position: relative; margin: 0; padding: 0 0 0 36px; }
.report-chart__grid { position: absolute; inset: 0 0 22px 36px; pointer-events: none; }
.report-chart__grid span { position: absolute; left: 0; right: 0; border-top: 1px solid var(--rule); }
.report-chart__grid span::before { content: attr(data-value); position: absolute; right: calc(100% + 6px); top: -8px; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.report-chart__plot { display: flex; align-items: flex-end; gap: 2px; height: 180px; margin: 0; padding: 0; list-style: none; }
.report-chart__col { position: relative; flex: 1; display: flex; justify-content: center; align-items: flex-end; height: 100%; min-width: 0; outline: none; }
.report-chart__bar { display: block; width: 100%; max-width: 24px; min-height: 1px; border-radius: 4px 4px 0 0; background: var(--accent); }
.report-chart__col:is(:hover, :focus-visible) .report-chart__bar { background: color-mix(in srgb, var(--accent) 75%, var(--surface)); }
.report-chart__col:focus-visible { box-shadow: inset 0 -2px 0 var(--accent); }
.report-chart__col:not(:hover, :focus-visible) .report-chart__tip { width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.report-chart__tip { position: absolute; bottom: calc(100% + 6px); left: 50%; z-index: 5; width: max-content; max-width: 220px; padding: 6px 9px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); color: var(--muted); font-size: 12px; line-height: 1.4; transform: translateX(-50%); }
.report-chart__tip strong { color: var(--ink); font-weight: 600; }
.report-chart__col:first-child .report-chart__tip, .report-chart__col:nth-child(2) .report-chart__tip { left: 0; transform: none; }
.report-chart__col:last-child .report-chart__tip, .report-chart__col:nth-last-child(2) .report-chart__tip { left: auto; right: 0; transform: none; }
.report-chart__axis { display: flex; justify-content: space-between; height: 22px; padding-top: 6px; border-top: 1px solid var(--rule-strong); color: var(--muted); font-size: 11px; }
.report__lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 24px; margin-top: 16px; }
.report__lists h3 { margin: 0 0 6px; color: var(--muted); font-size: 12px; font-weight: 400; }
.report__lists .muted { margin: 0; font-size: 13px; }
.report__list { display: grid; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.report__list li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--rule); }
.report__list li > :first-child { min-width: 0; overflow-wrap: anywhere; }
.report__list .count { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 960px) {
  .report { margin-inline: 16px; }
  .report__filters { padding-inline: 16px; }
/* On a phone Reports' sidebar is two rows of chips, the range and the inbox, so the figures start on the first screen. */
  .sidebar--pages .sidebar__list { display: flex; flex-wrap: wrap; gap: 6px; }
  .sidebar--pages .sidebar__list .sidebar__item { padding: 4px 10px; border: 1px solid var(--rule); border-radius: 999px; font-size: 13px; }
  .sidebar--pages .sidebar__heading { margin-top: 8px; }
  .sidebar--pages .report__sections, .sidebar--pages .report__counting { display: none; }
}
/* Comparing two versions of an article (articles/comparisons). Colour is never the only cue: removals are struck through, additions underlined. */
.diff h3 { margin: 22px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.diff__text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.diff__text--title { font-size: 20px; }
.diff__added, .diff__key--added, .diff__chip--added, .diff__chip--moved { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink); }
.diff__removed, .diff__key--removed, .diff__chip--removed { background: color-mix(in srgb, var(--danger) 20%, transparent); color: var(--ink); }
.diff__added { text-decoration: underline; text-decoration-thickness: 1px; }
.diff__removed, .diff__chip--removed { text-decoration: line-through; }
.diff__key { padding: 2px 8px; border-radius: 4px; font-size: 12px; }
.diff__categories { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.diff__picker { display: grid; gap: 8px; font-size: 13px; }
.diff__picker label { display: grid; gap: 2px; }
.revisions__compare { display: flex !important; gap: 10px; }
@keyframes cp-spin { to { transform: rotate(360deg); } }
:root[data-scenery][data-art="on"] .turbo-progress-bar { background: linear-gradient(90deg, var(--fx-bar-1), var(--fx-bar-2)); height: 3px; box-shadow: 0 0 8px var(--fx-bar-2); }
:root[data-scenery][data-art="on"][data-loading] .brand-mark::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--fx-bar-1); border-right-color: var(--fx-bar-2); animation: fx-spin .7s linear infinite; }
:root[data-scenery][data-art="on"] form[aria-busy="true"] button::after { content: ""; display: inline-block; width: 11px; height: 11px; margin-left: 8px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--fx-bar-1); border-right-color: var(--fx-bar-2); vertical-align: -2px; animation: fx-spin .7s linear infinite; }
@keyframes fx-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) and (min-width: 961px) {
  :root[data-scenery][data-motion="on"] .sidebar::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--fx-opacity, .7);
    background: var(--fx-a) 0 0 / var(--fx-a-size) repeat, var(--fx-b) 0 0 / var(--fx-b-size) repeat;
    animation: fx-move var(--fx-dur, 40s) linear infinite, fx-twinkle 6s ease-in-out infinite alternate;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); }
  :root[data-scenery][data-motion="on"] .sidebar > :not(.sidebar__bar) { position: relative; }
  :root[data-scenery][data-banner="on"] .page-header h1::after { content: ""; display: inline-block; width: .78em; height: .78em; margin-left: .45em; vertical-align: -.04em;
    background: var(--brand-art) center / contain no-repeat; animation: var(--fx-icon-anim, fx-pulse 3s ease-in-out infinite alternate); }
  @keyframes fx-move { to { background-position: var(--fx-a-end), var(--fx-b-end); } }
  @keyframes fx-twinkle { from { opacity: calc(var(--fx-opacity, .7) * .65); } to { opacity: var(--fx-opacity, .7); } }
  @keyframes fx-sway { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
  @keyframes fx-bob { from { transform: translateY(1.5px); } to { transform: translateY(-2.5px); } }
  @keyframes fx-pulse { from { transform: scale(.9); opacity: .8; } to { transform: scale(1.1); opacity: 1; } }
  @keyframes fx-rotate { to { transform: rotate(360deg); } }
  @keyframes fx-flicker { 0%, 100% { transform: scale(1); opacity: 1; } 30% { transform: scale(.93); opacity: .75; } 60% { transform: scale(1.07); opacity: 1; } 80% { transform: scale(.97); opacity: .88; } }
}
/* ===== end Theme effects ===== */
:root[data-scenery][data-art="on"] .empty { padding-top: max(48px, calc(45vh - 175px)); font: 500 16px var(--font-heading); }
:root[data-scenery][data-art="on"] .empty::before { content: ""; display: block; width: 150px; height: 112px; margin: 0 auto 14px; background: var(--empty-art) center / contain no-repeat; }
/* The New conversation bar: a transparent strip (not a flat solid one) so a gradient sidebar shows through behind the button. */
/* Press's inks (vermilion for what is current, a strong rule for the sidebar and boxes) follow a palette's own accent and rule. */
:root:not([data-palette="desk"]) { --signal: var(--accent); --rule-strong: var(--rule); }
/* Press draws a line icon on every folder. Where a theme brings its own folder icons (every palette but the default, with artwork on), they replace it. */
:root[data-art="on"]:not([data-palette="desk"]) .sidebar__folders .sidebar__item[data-folder] > .icon { display: none; }
:root[data-motion="on"] .sidebar__bar { z-index: 2; }     /* above the animated layers (canvases, fireworks), which sit at 0 and 1: the button is never painted over */
:root:not([data-palette="desk"]) .sidebar__bar { background: transparent; border-top-color: transparent; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* ===== end Theme empty states ===== */
@keyframes tm-spin { to { transform: rotate(360deg); } }
/* end light-mode contrast */
/* ===== end Winter snow ===== */
/* A window nobody is looking at (hidden or not focused) pauses every theme animation; application.js sets [data-idle]
   and stops the canvas and firework loops itself. The animations pick up where they left off. */
:root[data-motion="on"][data-idle] :is(.sidebar, .brand-slot, .fx-firework, .fx-firework i),
:root[data-motion="on"][data-idle] .sidebar::before,
:root[data-motion="on"][data-idle] .sidebar::after,
:root[data-banner="on"][data-idle] .page-header h1::after { animation-play-state: paused !important; }
/* After 10s idle (application.js) the animated image layers fade out ([data-idle-deep]) and are then taken out altogether ([data-idle-gone]), because animations inside
   images aren't stopped by animation-play-state; they fade back in ([data-idle-wake]) when the window is used again. */
@keyframes idle-fade { to { opacity: 0 } }
@keyframes idle-wake { from { opacity: 0 } }
:root[data-motion="on"][data-idle-deep] .sidebar::before, :root[data-motion="on"][data-idle-deep] .sidebar::after,
:root[data-banner="on"][data-idle-deep] .page-header h1::after { animation: idle-fade .6s ease forwards !important; }
:root[data-motion="on"][data-idle-gone] .sidebar::before, :root[data-motion="on"][data-idle-gone] .sidebar::after,
:root[data-banner="on"][data-idle-gone] .page-header h1::after { display: none !important; }
:root[data-motion="on"][data-idle-wake] .sidebar::before, :root[data-motion="on"][data-idle-wake] .sidebar::after,
:root[data-banner="on"][data-idle-wake] .page-header h1::after { animation: idle-wake .6s ease !important; }
/* Shown beside the animation checkbox when the frame-rate guard has switched the animation off for this session. */
.motion-throttled-note { display: none; }
:root[data-motion-throttled] .motion-throttled-note { display: block; }
/* ===== Theme folder icons (generated; replace this whole block to regenerate) =====
   Every theme except Default, Terminal and Cyberpunk (which have their own sets) gets themed icons beside the sidebar's
   folders: a themed object for Unassigned and Notifications, and a duotone line icon in the theme's colours for the rest. */
:root[data-scenery][data-art="on"] .sidebar__item[data-folder]::before { content: ""; flex: none; width: 16px; height: 16px; background: var(--fi, none) center / contain no-repeat; }

/* Boosts: a "nice one" under a rep's note or reply. Chips name who gave them; nothing counts them. */
.boosts { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.boost, .boost__form .boost { display: inline-flex; align-items: baseline; gap: 6px; padding: 2px 10px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; line-height: 1.5; }
.boost__form { display: inline; margin: 0; }
.boost--mine { cursor: pointer; border-color: var(--accent); }
.boost--mine:hover { text-decoration: line-through; }
.boost__who { color: var(--muted); font-size: 11px; }
.menu.boosts__add { position: static; } /* the popup anchors to the whole row, so it can't run off a narrow screen */
.boosts__button { padding: 2px 8px; border-radius: 999px; color: var(--muted); font-size: 12px; cursor: pointer; list-style: none; }
.boosts__button::-webkit-details-marker { display: none; }
.boosts__button:hover, .boosts__add[open] .boosts__button { color: var(--ink); background: var(--rule); }
.boosts__add:not([open]) { opacity: 0.55; }
.entry:hover .boosts__add, .boosts__add:focus-within, .boosts__add[open] { opacity: 1; }
.boosts__menu { box-sizing: border-box; min-width: min(250px, 100%); max-width: 100%; padding: 8px; }
.boosts__quick { display: flex; gap: 2px; margin-bottom: 8px; }
.boosts__quick form { display: inline; margin: 0; }
.boosts__emoji { padding: 4px 6px; border: 0; border-radius: 6px; background: transparent; font-size: 18px; cursor: pointer; }
.boosts__emoji:hover:not(:disabled) { background: var(--rule); }
.boosts__emoji:disabled { opacity: 0.35; cursor: default; }
.boosts__own { display: flex; gap: 6px; }
.boosts__own input[type=text] { flex: 1; min-width: 0; }

/* Rule previews stay below the editor, with one result per sample conversation. */
.rule-preview { border-top: 1px solid var(--rule); margin-top: 20px; padding-top: 12px; }
.rule-preview li { margin-bottom: 8px; }
.rule-preview__reply { border-left: 3px solid var(--rule); padding-left: 12px; overflow-wrap: anywhere; }