/* The Agents view: the view itself, its list in the side panel (the
   search field, the top, the groups, a row with its menu and threads, the
   collapsed sections), the sentence asking for an agent, and the routines
   under an agent's settings. */
@layer views {
  /* Agents: the view is the thread alone; the list is in the side panel. */

  .agents {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
  }

  .agents-message { margin: 0 0 12px; }

  /* The search field at the top of the agents list (agents.js filters the
     rows). The label draws the field, so the icon sits inside its border. */
  .search {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin: 0 0 16px;
    padding: 0 12px;
    border: 1px solid var(--field-line);
    border-radius: var(--radius-control);
    background: var(--raised);
    color: var(--muted);
    cursor: text;
  }
  .search:focus-within {
    border-color: var(--green);
    box-shadow: 0 0 0 1px var(--green);
  }
  .search svg { flex: none; }
  .search input {
    flex: 1;
    min-width: 0;
    min-height: 42px;
    padding: 0;
    border: 0;
    outline: none;
    background: none;
    color: var(--ink);
    font: inherit;
    /* 16px, as every text field here, so iOS does not zoom on focus. */
    font-size: 16px;
  }
  .search input::placeholder { color: var(--muted); }
  /* The list's top: Search and New chat as round icons at the right, or
     the search field in their place. The row is lean: it rises into the
     panel's top padding to sit 8px under the panel's edge, and the first
     row starts 4px under it. */
  .agents-list-head { margin: -16px 0 4px; }
  .agents-list-tools {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }
  .ghost-button.agents-list-icon { border-radius: 999px; }
  .agents-list-head > .search { margin: 0; }

  .agent-group { margin-bottom: 20px; }
  .agent-group-pinned,
  .agent-group-ungrouped { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
  /* The agents in no group continue the top section, under one line. */
  .agent-group-pinned:has(+ .agent-group-ungrouped) { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }

  .agent-group-heading {
    margin: 0 0 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .agent-group-head .agent-group-heading { min-width: 0; margin: 0; }
  /* The heading's name is the fold's button (components.css .fold), in the
     heading's type; a folded group keeps its heading and drops its rows,
     but a search shows its matches. */
  .fold.agent-group-toggle {
    min-height: 28px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-align: left;
  }
  @media (hover: none) {
    .fold.agent-group-toggle { min-height: 44px; margin: -8px 0; }
  }
  .agent-group-folded:not(.agent-group-searched) > :is(.agent-item, .agent-threads, .agent-threads-section) { display: none; }
  .agent-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
    cursor: default;
  }
  /* A group heading's ⋯, shown as an agent row's is: on hover or focus,
     always on a phone, with its centre over the rows' ⋯ and the heading
     no taller for it. */
  .agent-group-more {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    margin: -6px -8px -6px 8px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font-size: 16px;
    cursor: pointer;
    opacity: 0;
  }
  .agent-group-head:hover .agent-group-more,
  .agent-group-head:focus-within .agent-group-more,
  .agent-group-more[aria-expanded="true"] { opacity: 1; }
  .agent-group-more:hover { background: var(--hover-tint); color: var(--ink); }
  @media (hover: none) {
    .agent-group-more { width: 36px; height: 36px; margin: -10px -4px -10px 8px; opacity: 1; }
  }
  .agent-group-name-input {
    min-width: 0;
    flex: 1;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--ink);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    letter-spacing: inherit;
    text-transform: none;
  }
  .agent-group-heading-editing {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
  }
  .agent-group-refusal { margin: 0 0 6px; color: var(--red); font-size: 12px; }
  /* A dragged agent row and its drop line look like Goals' and the board's
     (goal-row-dragging, dropline); the line takes no height between rows. */
  .agent-row-dragging { opacity: 0.35; }
  .agent-dropline { height: 2px; margin: -1px 0; border-radius: 2px; background: var(--green); }

  /* A plain row, as a phone's messaging list draws one: no border, fill,
     or shadow, the avatar spanning the name line and the preview line
     beside them. Hover tints it; the open chat's row takes a deeper tint,
     the one mark it carries. */
  .agent-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 8px 12px;
    margin: 0 -12px;
    border-radius: 10px;
    color: var(--ink);
    text-decoration: none;
  }
  .agent-row > .avatar,
  .agents-archive-row > .avatar { flex: none; width: 44px; height: 44px; font-size: 16px; }
  .agent-row-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  a.agent-row:hover { background: var(--hover-tint); }
  a.agent-row[aria-current="true"],
  .agent-threads-row[aria-current="true"] { background: var(--selected-tint); }
  /* The open agent's row while one of its other threads is open: a lighter
     mark than the open thread's own row. */
  a.agent-row.agent-row-open:not([aria-current="true"]) { background: var(--hover-tint); }

  .agent-row-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    min-width: 0;
  }

  .agent-row-name {
    font-weight: 600;
    overflow-wrap: anywhere;
  }

  .provider-chip {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--side);
    color: var(--muted);
    font-size: 12px;
  }

  /* A provider's mark, filled in its brand color through its SVG as a mask;
     --provider-color is set per badge from agents.js's PROVIDER_ICONS map. */
  .provider-icon {
    flex: none;
    width: 16px;
    height: 16px;
    background-color: var(--provider-color, var(--muted));
    -webkit-mask: no-repeat center / contain;
    mask: no-repeat center / contain;
  }

  .agent-row-time {
    margin-left: auto;
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
  }

  .agent-row-preview {
    overflow: hidden;
    color: var(--muted);
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .agent-row-preview:empty { display: none; }

  .agent-row-state {
    font-size: 13px;
    font-weight: 600;
  }
  .agent-row-state-muted { color: var(--muted); font-weight: 400; }
  .agent-row-state-bad { color: var(--red); }

  /* Beside the name on a row wanting the user: a dot, not a text chip. */
  .agent-row-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
  }
  .agent-row-dot-wait { background: var(--amber); }

  /* An agent's row with its ⋯ beside the link (agents.js row()). The ⋯
     shows on hover or focus over the row's time, and always on a phone,
     where the row leaves room for it. */
  .agent-item { position: relative; }
  .agent-row-more {
    position: absolute;
    top: 6px;
    right: -8px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font-size: 16px;
    cursor: pointer;
    opacity: 0;
  }
  .agent-item:hover .agent-row-more,
  .agent-item:focus-within .agent-row-more,
  .agent-row-more[aria-expanded="true"] { opacity: 1; }
  .agent-item:hover .agent-row-time,
  .agent-item:focus-within .agent-row-time,
  .agent-item:has(.agent-row-more[aria-expanded="true"]) .agent-row-time { visibility: hidden; }
  .agent-row-more:hover { background: var(--hover-tint); color: var(--ink); }
  @media (hover: none) {
    .agent-item > .agent-row { padding-right: 52px; }
    .agent-row-more { top: 50%; right: -4px; width: 36px; height: 36px; opacity: 1; transform: translateY(-50%); }
    .agent-item:hover .agent-row-time,
    .agent-item:focus-within .agent-row-time,
    .agent-item:has(.agent-row-more[aria-expanded="true"]) .agent-row-time { visibility: visible; }
  }
  .agent-item > .agent-row-input { width: calc(100% + 24px); min-height: 44px; margin: 0 -12px; }
  .agent-row-confirm { padding: 4px 0 6px; }
  .agent-row-note { margin: 2px 0 6px; color: var(--muted); font-size: 12px; }
  .agent-row-note-refusal { color: var(--red); }

  /* An agent's menu, and a thread's: the row menu's look (.row-menu),
     fixed where agents.js places it, at the pointer or under the ⋯. */
  .row-menu.agent-menu { position: fixed; right: auto; z-index: 30; width: 200px; max-height: calc(100vh - 16px); overflow-y: auto; animation: agent-menu-in 120ms ease-out; }
  .agent-menu .row-menu-entry { min-height: 34px; }
  .agent-menu .row-menu-entry:disabled { color: var(--muted); background: none; cursor: default; }
  .agent-menu .agent-menu-danger { color: var(--red); }
  @keyframes agent-menu-in { from { opacity: 0; transform: translateY(-4px); } }
  @media (hover: none) {
    .row-menu.agent-menu { gap: 8px; }
    .agent-menu .row-menu-entry { min-height: 36px; }
    .agent-menu .row-menu-divided { margin-top: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .row-menu.agent-menu { animation: none; }
  }

  /* The open agent's threads, indented under its row; the ⋯ shows on hover
     or focus, and always on a phone. */
  .agent-threads { margin: 2px 0 6px 20px; }
  /* A running agent's threads sit under the Chats label: muted, normal
     weight, sentence case, in the size of a row's preview line
     (.agent-row-preview), at the list's own left edge, no taller than a
     row. Its chevron follows the text and is drawn as the Routines
     fold's: down while the rows show, right once folded; on a desk the
     chevron and the + show on hover or focus, folded or not, both always
     on a phone. The + at the right is the list's
     top-row + made smaller, centered over the rows' ⋯. */
  .agent-threads-section { margin: 2px 0 6px; }
  /* The rows' titles line up with the agent's name, past its avatar. */
  .agent-threads-section > .agent-threads { margin: 0 0 0 42px; }
  .agent-threads-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 28px;
  }
  .agent-threads-toggle {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    min-height: 28px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
  }
  .agent-threads-toggle:hover { color: var(--ink); }
  .agent-threads-chevron {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 0 3px 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: 0;
  }
  .agent-threads-toggle[aria-expanded="false"] > .agent-threads-chevron { margin-bottom: 1px; transform: rotate(-45deg); }
  .agent-threads-label:hover .agent-threads-chevron,
  .agent-threads-label:focus-within .agent-threads-chevron { opacity: 1; }
  .ghost-button.agent-threads-new { width: 28px; height: 28px; opacity: 0; }
  .agent-threads-label:hover .agent-threads-new,
  .agent-threads-label:focus-within .agent-threads-new { opacity: 1; }
  .ghost-button.agent-threads-new svg { width: 16px; height: 16px; }
  .agent-threads-section > .agent-threads-refusal { margin: 2px 0 4px; }
  @media (hover: none) {
    .agent-threads-chevron { opacity: 1; }
    .ghost-button.agent-threads-new { opacity: 1; }
    .ghost-button.agent-threads-new { width: 36px; height: 36px; margin: -4px -4px -4px 0; }
  }
  .agent-threads-head { display: flex; align-items: center; gap: 2px; }
  .agent-threads-row {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 36px;
    padding: 6px 10px;
    border-radius: 8px;
    color: var(--ink);
    font-size: 14px;
    text-decoration: none;
  }
  .agent-threads-row:hover { background: var(--hover-tint); }
  /* The title, mark, and time on one line of fixed height: the title
     takes at least 12 characters' room and the rest, and the time wraps
     out of sight before the title would get less. */
  .agent-threads-line {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 8px;
    min-width: 0;
    height: 20px;
    overflow: hidden;
    line-height: 20px;
  }
  .agent-threads-title { flex: 1 1 12ch; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .agent-threads-line > .agent-row-dot,
  .agent-threads-line > .agent-row-time { flex: none; }
  .agent-threads-more {
    flex: none;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font-size: 16px;
    cursor: pointer;
    opacity: 0;
  }
  .agent-threads-head:hover .agent-threads-more,
  .agent-threads-head:focus-within .agent-threads-more,
  .agent-threads-more[aria-expanded="true"] { opacity: 1; }
  .agent-threads-more:hover { background: var(--hover-tint); color: var(--ink); }
  @media (hover: none) {
    .agent-threads-more { opacity: 1; }
  }
  .agent-threads-input,
  .agent-row-input {
    width: 100%;
    min-height: 36px;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-size: 14px;
  }
  .agent-threads-confirm { padding: 4px 10px 6px; }
  .agent-threads-refusal { margin: 2px 10px 6px; color: var(--red); font-size: 12px; }

  /* Archived chats: the way back and the heading in the list's top, then
     the rows, a thread's as wide as an agent's, its title and date over
     its agent's name. */
  .agents-archive-head { display: flex; align-items: center; gap: 4px; margin-left: -8px; }
  .agents-archive-title { margin: 0; font-size: 15px; font-weight: 600; }
  .agents-archive .agent-threads-head { margin: 0 -8px 0 -12px; }
  .agents-archive-row {
    gap: 12px;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: 10px;
  }
  .agents-archive-row .agent-threads-line { flex: none; }
  @media (hover: none) {
    .agents-archive .agent-threads-head { margin-right: -4px; }
    .agents-archive .agent-threads-more { width: 36px; height: 36px; }
  }

  .agent-thread {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--surface-column);
  }

  .thread-empty {
    margin: 0;
    padding: calc(var(--controls-h) + 16px) 34px 40px;
    color: var(--muted);
  }
  .thread-empty:empty { display: none; }

  @media (max-width: 719.98px) {
    /* The To field has the way back to the list at the band's left, in the
       toggle's place. New agent's form covers the way back with its sheet
       and keeps the toggle. */
    body[data-view="agents"] .stage:has(#agent-panel:not([hidden]) .thread-composing) > .stage-controls > .panel-toggle { display: none; }
    /* The drawer fills the screen under the controls' band: the list's top
       row rises into the band, its icons centered on the toggle's round and
       clear of it and the menu's round at either side. */
    .agents-list-head { margin: calc(-10px - var(--controls-h)) 50px 4px; }

    /* With no thread open, the open drawer replaces the column. */
    .shell.panel-open .agent-thread:has(> .thread-panel[hidden]) { display: none; }

    .thread-empty { padding: calc(var(--controls-h) + 16px) 16px 20px; }
  }

  /* Routines: the panel's list and form under an agent's settings, the
     collapsed section at the foot of the Agents list, and a routine's
     message and line in the thread. Health's jobs keep the .routine-row and
     .routine-run rules in health.css; these are the routine-item and
     routine-run-row family. */
  .details-routines {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
  }
  .details-routines-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
  }
  .details-routines-head .card-name {
    margin: 0;
    overflow-wrap: anywhere;
  }
  .details-routines-head .card-name:focus { outline: none; }
  /* The Library group under the routines and their Add routine button. */
  .details-routines .details-library { margin-top: 20px; }
  .routine-items {
    display: grid;
    gap: 2px;
    margin: 0 0 12px;
  }
  .routine-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: calc(100% + 24px);
    min-height: 44px;
    padding: 8px 12px;
    margin: 0 -12px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--ink);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }
  .routine-item:hover { background: var(--hover-tint); }
  .routine-item-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
  }
  .routine-item-name {
    font-weight: 600;
    overflow-wrap: anywhere;
  }
  .routine-item-when {
    color: var(--muted);
    font-size: 13px;
  }
  .routine-chip {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--side);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
  }
  .routine-chip-wait { background: var(--amber-bg); color: var(--amber); }
  .routine-chip-bad { background: var(--red-bg); color: var(--red); }
  .routine-chip-muted { font-weight: 400; }
  .routine-chip-off { background: none; border: 1px solid var(--line); }
  .routine-empty {
    margin: 0 0 12px;
    color: var(--muted);
  }
  /* The pane's fold, Details' Advanced, is a .drawer-heading drawer
     (components.css), as Goals' "Done and dropped" is. */
  .pane-fold { margin-top: 20px; }
  .pane-fold-body { display: grid; gap: 12px; margin-top: 12px; }
  .details-form > .pane-advanced { margin-top: 4px; }
  /* Who may message's agents, shown for Some agents. */
  .pane-accepts { display: grid; margin-top: 4px; }
  .pane-accepts[hidden] { display: none; }
  .pane-accepts-problem { margin: 4px 0 0; color: var(--red); font-size: 14px; }
  .pane-accepts-problem[hidden] { display: none; }
  /* Identity: the agent's Instructions as text. */
  .pane-instructions-note { margin: -4px 0 8px; }
  .pane-instructions-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
  textarea.form-input.instructions-box { min-height: 120px; }
  /* Routines' rows: the chip after the name. */
  .pane-routine .routine-chip { align-self: center; }
  .details-routines-list .button { margin-top: 12px; }
  /* Skills and Always allowed are settings rows (core/settings-rows.js):
     Share or Remove at the right, Share's confirm under its row, then the
     line counting the other skills. */
  .agent-skills-rest { margin: 12px 0 0; color: var(--muted); font-size: 13px; }
  .details-permissions-list .settings-list-title { font-weight: 400; overflow-wrap: anywhere; }
  /* Answered's rows open the card's thread, as Routines' rows open a
     routine; Show more under them. The Approvals tab's waiting dot is the
     agent rows'. */
  /* History is a fold; its label lines up with the group headings above it
     (Always allowed, Waiting), which sit at the rows' inset. */
  .pane-history > .fold::before { margin-left: 0; }
  .pane-history:first-child { margin-top: 0; }
  .details-answered-list .settings-list-title { overflow-wrap: anywhere; }
  .details-answered-list .button { margin-top: 12px; }
  .pane-tab-dot { display: inline-block; margin-left: 6px; vertical-align: middle; }
  .routine-form .form-when-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .routine-form .form-when-row input[type="time"] {
    width: auto;
    min-width: 128px;
    justify-self: start;
  }
  .routine-form .form-when-row input[hidden] { display: none; }
  .routine-form .form-days {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
  }
  .routine-form .form-days .form-check { min-height: 28px; }
  .routine-form .form-field-dom { margin-top: 4px; }
  /* A command routine's fields: the command and its sentence. */
  .routine-form-command-fields {
    display: grid;
    gap: 12px;
  }
  .routine-form-command-fields .form-note { margin-top: -8px; }
  /* A command starts one field's height tall. */
  textarea.form-input.form-mono {
    min-height: var(--field-height);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  }
  .routine-form-limit {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .routine-form-limit input[type="number"],
  .routine-form input[name="maxTurns"] {
    width: 96px;
  }
  .routine-form-unit { color: var(--muted); }
  .reminder-detail-value { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
  .routine-actions { margin-top: 8px; }
  .routine-confirm {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--amber-bg);
    color: var(--amber);
  }
  /* Archive and Delete at the foot of an agent's settings, red rows in a
     card of their own (components.css's .settings-list-actions), with the
     inline confirm and a refusal sentence; the confirm shares the routine
     confirm's look. */
  .details-delete {
    display: grid;
    gap: 10px;
    margin-top: 24px;
  }
  .delete-confirm {
    display: grid;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--amber-bg);
    color: var(--amber);
  }
  .instruction-conflict { margin-block: 12px; scroll-margin-block: 64px; }
  .instruction-conflict .text-card { color: var(--ink); }
  .delete-confirm-text {
    margin: 0;
    overflow-wrap: anywhere;
  }
  .delete-confirm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .delete-refusal {
    margin: 0;
    color: var(--red);
    overflow-wrap: anywhere;
  }
  .routine-runs { margin-top: 20px; }
  .routine-runs .form-label { margin: 0 0 6px; }
  .routine-run-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
  }
  .routine-run-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
  }
  .routine-run-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
  }
  .routine-run-time { color: var(--muted); white-space: nowrap; }
  .routine-run-note,
  .routine-run-context {
    color: var(--muted);
    overflow-wrap: anywhere;
  }
  .routine-run-reply {
    color: var(--ink);
    overflow-wrap: anywhere;
  }
  .routine-run-reply-body { margin-top: 4px; }
  .routine-run-output {
    margin: 4px 0 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--side);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 320px;
    overflow: auto;
  }

  /* The collapsed sections under the groups: Hidden, then Routines. */
  .agents-routines { margin: 4px 0 16px; }
  .agents-hidden { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid var(--line); }
  .agents-hidden-summary .agent-row-dot { margin-left: 8px; }
  /* Folds (components.css's .fold) whose text is the side panel's
     uppercase group heading, as WORK and PERSONAL above them are. */
  .agents-hidden-summary,
  .agents-routines-summary {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .agents-routines-group { margin: 4px 0 10px; }
  .agents-routines-heading {
    margin: 0 0 2px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
  }
  .agents-routines .routine-item { padding: 6px 12px; }
  .agents-routines .routine-empty { margin: 4px 0 8px; font-size: 13px; }

  /* A routine's instruction in the thread, and the line its run posts. */
  .thread-message-label {
    padding: 0 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
  }
  .thread-routine-input {
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
  }
  /* A service card's arguments scroll inside the fold, as the agent prompt
     box above does, so the buttons stay near. */
  .proposal-card .thread-routine-input {
    max-height: 320px;
    overflow: auto;
  }

  /* What quick chat sent along: the detail keeps its lines. */
  .thread-context-detail {
    margin: 0;
    font-family: var(--sans);
    white-space: pre-wrap;
  }

  /* Search results follow Archived chats' title, time, and preview rows. */
  #agents-chat-search { padding-block: 12px; }
  #agents-chat-search .panel-heading { padding-inline: 12px; }
  .agents-chat-search-row .agent-row-preview:last-child { white-space: normal; }
  .agents-chat-search-row { align-items: flex-start; }
}