/* ============================================================
   Components — Buttons, badges, modals, toasts, tooltips,
                tags, forms, menus, directory browser
   ============================================================ */

/* ── Buttons ───────────────────────────────────────────────── */

.btn {
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    border: 1px solid var(--control-border);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: var(--fs-md);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    min-height: var(--control-height);
    font-family: var(--font-sans);
    line-height: 1.4;
}

.btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.btn-primary {
    background: var(--accent-dim);
    border-color: var(--accent-dim);
    color: var(--text-on-accent);
}

/* .btn:hover sets the primary text colour, which on the accent fill was 2.2:1 (dark) and 3.0:1
   (light); a hovered primary button keeps its white text on a slightly deeper fill (>= 5.5:1, #4218). */
.btn-primary:hover {
    background: color-mix(in srgb, var(--accent-dim) 85%, var(--bg-primary));
    border-color: color-mix(in srgb, var(--accent-dim) 85%, var(--bg-primary));
    color: var(--text-on-accent);
}

.btn-primary:active {
    transform: scale(0.95);
}

.btn-warning {
    border-color: var(--control-border);
    color: var(--text-secondary);
    background: var(--bg-tertiary);
}

.btn-warning:hover {
    background: rgba(var(--fx-amber-rgb), 0.15);
    border-color: var(--warning);
    color: var(--warning);
}

.btn-danger {
    border-color: var(--control-border);
    color: var(--text-secondary);
    background: var(--bg-tertiary);
}

.btn-danger:hover {
    background: rgba(var(--fx-red-rgb), 0.15);
    border-color: var(--error);
    color: var(--error);
}

.btn-success {
    border-color: var(--success);
    color: var(--success);
    background: transparent;
}

.btn-success:hover {
    background: rgba(var(--fx-green-rgb), 0.15);
}

.btn-danger-text {
    border: none;
    background: transparent;
    color: var(--text-muted);
    padding: 6px 12px;
}

.btn-danger-text:hover {
    color: var(--error);
}

.btn-small {
    padding: var(--space-xs) var(--space-md);
    font-size: var(--fs-md);
    margin: 8px 20px;
    min-height: var(--control-compact-height);
}

.mb-project-count, .mb-project-meta, .mb-message-count {
    font-size: var(--fs-base);
    color: var(--text-secondary);
}
.mb-project-count { margin-left: auto; }
.mb-message-count { text-align: center; padding: var(--space-xs) 0 var(--space-md); }

/* Message board — sleep banner */
.mb-sleep-banner {
    text-align: center;
    padding: 12px 16px;
    background: rgba(var(--fx-amber-rgb), 0.1);
    border: 1px solid rgba(var(--fx-amber-rgb), 0.25);
    border-radius: var(--radius-lg);
    color: var(--warning);
    font-size: 0.8125rem;
    margin: 8px 16px 12px;
}

.restart-spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: restart-spin 0.8s linear infinite;
    margin-bottom: 12px;
}

@keyframes restart-spin {
    to { transform: rotate(360deg); }
}

/* Sleeping agent in sidebar — grey out text but keep controls visible */
.session-group-item.sleeping .session-label,
.session-group-item.sleeping .session-goal,
.session-group-item.sleeping .badge {
    color: var(--text-muted);
}

.session-group-item.sleeping .session-dot {
    opacity: 0.5;
}

/* Message board — container spacing and max-width */
#mb-messages {
    padding-left: 20px !important;
    max-width: 840px;
    margin: 0 auto;
    /* The auto margins centre it on a wide screen, but they also stop it stretching: it took the width of its widest
       unbreakable content, which at 200% text on a phone (the nowrap "Load earlier" button) was wider than the screen,
       and every row was laid out in that box and clipped (#4505, WCAG 1.4.10). Never wider than its column. */
    width: 100%;
    min-width: 0;
}

/* "Load earlier" wraps instead of running off the feed at large text (#4505). */
.mb-load-earlier .btn {
    white-space: normal;
    max-width: 100%;
}

/* Message board — avatar rows (#3590, the operator's choice): the sender's initials in their
   palette colour at the left, the name and time on one line, the body beneath; no boxes or
   dividers, a highlight on hover. Posts in a row from one sender share the avatar and name. */
.mb-message {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 12px;
    padding: 8px 10px;
    position: relative;
    border-radius: var(--radius-lg);
}

.mb-message:hover {
    background: var(--bg-hover);
}

/* The sender's colour, in the theme's AA shade (boardMessageColorStyle). */
.mb-message {
    --mb-color: var(--mb-color-dark);
    --mb-tint: var(--mb-tint-dark);
}
[data-theme="light"] .mb-message {
    --mb-color: var(--mb-color-light);
    --mb-tint: var(--mb-tint-light);
}

.mb-avatar {
    display: flex;
    grid-row: 1 / span 2;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-lg);
    background: var(--mb-tint);
    color: var(--mb-color);
    font-weight: 700;
    font-size: 0.75rem;
}

.mb-message-header,
.mb-message-body {
    grid-column: 2;
}

.mb-message-first {
    margin-top: 8px;
}

.mb-message-grouped {
    padding-top: 2px;
}

.mb-message-grouped .mb-avatar {
    visibility: hidden;
    height: 0;
}

.mb-message-grouped .mb-agent-name {
    display: none;
}

.mb-message-first:first-of-type {
    margin-top: 0;
}

/* Task-queue lines (#3343): a run of them is one muted, collapsible row. */
.mb-queue-run {
    margin: 10px 0;
    font-size: 0.75rem;
    color: var(--text-muted);
}
.mb-queue-summary {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 2px 8px;
    border-radius: var(--radius-md);
    cursor: pointer;
    list-style: none;
}
.mb-queue-summary::-webkit-details-marker { display: none; }
.mb-queue-summary::before { content: '▸'; font-size: 0.625rem; }
.mb-queue-run[open] > .mb-queue-summary::before { content: '▾'; }
.mb-queue-summary:hover, .mb-queue-summary:focus-visible { background: var(--bg-tertiary); color: var(--text-secondary); }
.mb-queue-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-queue-line {
    display: flex;
    gap: 8px;
    padding: 3px 8px 3px 24px;
    overflow-wrap: anywhere;
}
.mb-queue-time { flex: none; opacity: 0.8; }
.mb-queue-text { min-width: 0; white-space: pre-wrap; }

.mb-message-header {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.mb-agent-name {
    font-weight: 700;
    font-size: 0.8125rem;
    color: var(--mb-color);
    /* A long sender name with no break (a job title or a hub name) wraps like the body does, never widening the feed (#4502). */
    min-width: 0;
    overflow-wrap: anywhere;
}

.mb-message-time {
    font-size: var(--fs-base);
    color: var(--text-secondary);
}

/* Cross-team message: "from <board>" (inbound) or "to <board>" (mirror). */
.mb-external-badge {
    font-size: var(--fs-sm, 11px);
    padding: 0 6px;
    border-radius: var(--radius-md, 6px);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    background: var(--bg-secondary);
    white-space: nowrap;
}
.mb-hub-user-badge { border-color: var(--border); color: var(--text-secondary); }
.mb-hub-user-badge.is-unknown { border-style: dashed; }
.mb-hub-user-badge.is-operator { border-color: var(--accent, var(--border)); color: var(--accent, var(--text-secondary)); }
.settings-cloud-hub-operator-actions { margin-top: 6px; }
.settings-cloud-hub-operator-actions ol { margin: 4px 0 0; padding-left: 18px; font-size: var(--fs-sm, 11px); color: var(--text-secondary); }
.mb-external-badge:not(.is-outbound):not(.mb-hub-user-badge) {
    border-color: var(--accent, var(--border));
    color: var(--link-text, var(--accent, var(--text-secondary))); /* the accent was 4.44:1 on the badge's panel in the light theme; the link colour is 5.9 or more (#5273) */
}

.mb-message-body {
    font-size: var(--fs-lg);
    color: var(--mb-text);
    line-height: 1.6;
    /* A long unbroken token (a hash, a URL, a path) wraps instead of widening the whole feed;
       fenced code keeps its own horizontal scroll (pre below). */
    overflow-wrap: anywhere;
    min-width: 0;
}

/* Files that came with a cross-team message (#5503): under the text, in its column; an image is a thumbnail, any other file a chip with its name and size. */
.mb-attachments {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
    min-width: 0;
}
.mb-attachment {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-height: 32px;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 6px);
    background: var(--bg-secondary);
    color: var(--link-text);
    text-decoration: none;
    font-size: var(--fs-md, 13px);
}
.mb-attachment:hover { background: var(--bg-hover); text-decoration: underline; }
.mb-attachment.is-image { flex-direction: column; align-items: flex-start; padding: 6px; }
.mb-attachment-thumb { display: block; max-width: min(100%, 220px); max-height: 140px; border-radius: var(--radius-sm); object-fit: contain; background: var(--bg-primary); }
.mb-attachment-icon { font-size: 1.125rem; color: var(--text-secondary); }
.mb-attachment-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28ch; }
.mb-attachment-size { color: var(--text-secondary); font-size: var(--fs-sm, 11px); white-space: nowrap; }
/* A link in a message from another Coral whose file did not come with it: plain muted text and a note, nothing to open. */
.mb-not-here { color: var(--text-secondary); }
.mb-not-here-note { font-size: var(--fs-sm, 11px); font-style: italic; white-space: nowrap; }
@media (max-width: 767px), (pointer: coarse) {
    .mb-attachment { min-height: 44px; }
    .mb-attachment.is-image { min-height: 0; }
}

/* Message board delete button */
.mb-delete-msg-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 4px;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
    margin-left: auto;
}

.mb-message:hover .mb-delete-msg-btn,
.mb-message:focus-within .mb-delete-msg-btn {
    opacity: 1;
}

.mb-delete-msg-btn:hover {
    color: var(--error);
}

/* Save for later on a board message (#4510): beside Delete, shown on hover or focus, always while saved. */
.mb-save-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 4px;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
    margin-left: auto;
}
.mb-save-btn + .mb-delete-msg-btn { margin-left: 0; }
.mb-save-btn svg { width: var(--icon-inline-size, 1rem); height: var(--icon-inline-size, 1rem); }
.mb-message:hover .mb-save-btn,
.mb-message:focus-within .mb-save-btn,
.mb-save-btn[aria-pressed="true"] { opacity: 1; }
.mb-save-btn:hover { color: var(--text-primary); }
.mb-save-btn[aria-pressed="true"] { color: var(--accent); }
.mb-save-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; opacity: 1; }
.mb-save-btn[hidden] { display: none; }
@media (hover: none) { .mb-save-btn { opacity: 1; } }

/* The Export dialog's agent rows: a global input width stretched each checkbox across its row (#3702). */
#mb-export-body .export-agent-cb {
    flex: none;
    width: 16px;
    height: 16px;
    min-height: 0;
    margin: 0;
}

/* Message board multi-select */
.mb-select-checkbox {
    margin-right: 8px;
    cursor: pointer;
    accent-color: var(--accent);
    flex-shrink: 0;
}

.mb-message-selected {
    background: rgba(var(--accent-rgb), 0.08);
}

.mb-select-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--border);
    border-radius: 0 0 8px 8px;
    z-index: 10;
}

.mb-select-count {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-right: auto;
}

.mb-select-action-btn {
    padding: 6px 14px;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: var(--radius-md);
}

#mb-select-btn.active,
.board-select-btn.active {
    background: var(--accent);
    color: var(--text-on-accent);
}

/* The board panel's Pause and Export are icon buttons (#5491): a square target, the icon the only content; a paused board's play icon is in the warning colour. */
.board-chat-header .board-icon-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; padding: 0 var(--space-sm); }
.board-chat-header .board-icon-btn .material-icons { font-size: 1.25rem; line-height: 1; }
.board-chat-header .board-icon-btn.mb-action-danger { color: var(--warning); }
@media (max-width: 767px), (pointer: coarse) { .board-chat-header .board-icon-btn { min-width: var(--control-touch-height, 44px); min-height: var(--control-touch-height, 44px); } }

/* Message board markdown content */
/* Links in a post and a subscriber's name: the theme's link colour, not the browser's #0000ee,
   which is unreadable on the dark theme (#3548); underlined on hover; the focus ring is the
   page-wide one (base.css). */
.mb-message-body a,
.board-artifact-link,
.subscriber-history-link {
    color: var(--link-text);
    text-decoration: none;
}
.mb-message-body a:hover,
.board-artifact-link:hover,
.subscriber-history-link:hover {
    text-decoration: underline;
}
/* A subscriber's name opens that agent: a button that reads as a link. */
button.subscriber-history-link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.mb-message-body p {
    margin: 0 0 10px;
}

.mb-message-body p:last-child {
    margin-bottom: 0;
}

.mb-message-body h1, .mb-message-body h2, .mb-message-body h3,
.mb-message-body h4, .mb-message-body h5, .mb-message-body h6 {
    margin: 8px 0 4px;
    font-size: 0.8125rem;
    font-weight: 700;
}

.mb-message-body h2 { font-size: 0.875rem; }
.mb-message-body h3 { font-size: 0.8125rem; color: var(--mb-heading); }

.mb-message-body ul, .mb-message-body ol {
    margin: 6px 0 10px;
    padding-left: 22px;
}

.mb-message-body li {
    margin: 4px 0;
}

.mb-message-body > :last-child {
    margin-bottom: 0;
}

.mb-message-body code {
    background: var(--mb-code-bg);
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-family: var(--font-mono);
}

.mb-message-body pre {
    background: var(--mb-code-bg);
    padding: 8px 10px;
    border-radius: var(--radius-md);
    overflow-x: auto;
    overflow-wrap: normal;
    max-width: 100%;
    margin: 6px 0;
}

.mb-message-body pre code {
    background: none;
    padding: 0;
    font-size: 0.75rem;
}

.mb-message-body strong {
    font-weight: 700;
    color: var(--mb-text-bright);
}

.mb-message-body blockquote {
    border-left: 3px solid var(--border);
    margin: 6px 0;
    padding: 2px 10px;
    color: var(--text-muted);
}

/* Keyboard-key style buttons */
.btn-nav {
    border: 1px solid var(--control-border);
    border-bottom: 2px solid var(--border-light);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    min-width: 34px;
    height: var(--control-compact-height);
    text-align: center;
    font-weight: 600;
    font-size: var(--fs-md);
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    margin: 0;
    white-space: nowrap;
    font-family: var(--font-sans);
}

.btn-nav:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--text-muted);
}

.btn-enter {
    border-color: var(--accent-dim);
    border-bottom-color: var(--accent-dim);
    background: rgba(var(--fx-blue-rgb), 0.15);
    color: var(--accent);
}

.btn-enter:hover {
    background: rgba(var(--fx-blue-rgb), 0.25);
    border-color: var(--accent);
    color: var(--accent);
}

.btn-mode {
    gap: 5px;
}

.btn-mode svg {
    flex-shrink: 0;
}

.btn-mode:hover {
    background: rgba(124, 58, 237, 0.15);
    border-color: var(--badge-claude);
    color: var(--badge-claude);
}

.btn-send {
    background: var(--accent) !important;
    color: var(--text-on-accent) !important;
    font-weight: 700;
    padding: 6px 20px;
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.25);
    transition: all 0.15s;
    border: none !important;
    border-bottom: none !important;
    flex-shrink: 0;
    font-size: 0.8125rem;
}

.btn-send:hover {
    background: var(--accent-light) !important;
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.35);
    transform: translateY(-1px);
    color: var(--text-on-accent) !important;
}

/* ── Badges ────────────────────────────────────────────────── */

.badge {
    font-size: 0.6875rem;
    padding: 2px 8px;
    border-radius: var(--radius-xl);
    font-weight: 600;
    text-transform: uppercase;
}

.badge.claude { background: var(--badge-claude); color: var(--text-on-accent); }
.badge.agy, .badge.antigravity { background: var(--badge-agy); color: var(--text-on-accent); }
.badge.gemini { background: var(--badge-gemini); color: var(--text-on-accent); }
.badge.codex { background: var(--badge-codex); color: var(--text-on-accent); }
.badge.board-badge { background: var(--success); color: var(--text-on-accent); }

.badge.waiting-badge {
    background: var(--warning);
    color: #000;
    font-size: 0.625rem;
}

/* ── Modal ─────────────────────────────────────────────────── */

.modal {
    position: fixed;
    inset: 0;
    background: var(--modal-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

/* A confirmation is asked from other dialogs (Settings' Prune, Start automatic cleanup, Delete received files, Delete terminal logs) and comes earlier in the page than
   they do, so at the same layer they were painted over it: the dimmed page, and no question to answer. It is above the dialog that asked. */
#confirm-modal { z-index: 110; }

.modal-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    width: 400px;
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* When using modal-header/body/footer structure, body scrolls instead */
.modal-content:has(.modal-body) {
    overflow: hidden;
    padding: 0;
}

.modal-content:has(.modal-body) .modal-header {
    position: static;
    margin: 0;
    padding: 24px 24px 12px;
    border-bottom: 1px solid var(--border);
}

.modal-content:has(.modal-body) .modal-header:has(> .modal-close-btn) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
}
.modal-header:has(> .modal-close-btn) h3 { min-width: 0; overflow-wrap: anywhere; }
.modal-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--control-compact-height);
    height: var(--control-compact-height);
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}
.modal-close-btn .material-icons { font-size: var(--icon-size); }
.modal-close-btn:hover { background: var(--bg-hover); color: var(--text-primary); }

.modal-body {
    padding: 12px 24px;
}

.modal-content:has(.modal-body) .modal-footer {
    position: static;
    margin: 0;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
}

.modal-content-wide {
    width: 520px;
}

.modal-content-extra-wide {
    width: 820px;
}

.modal-content h3 {
    margin: 0;
    font-size: var(--fs-xl);
}

.modal-header,
.modal-footer {
    flex-shrink: 0;
    background: var(--bg-secondary);
}

.modal-header {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: -24px -24px 0;
    padding: 24px 24px 16px;
    border-bottom: 1px solid var(--border);
}

.modal-header > *:last-child {
    margin-bottom: 0;
}

.modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 1;
    margin: 16px -24px -24px;
    padding: 16px 24px 24px;
    border-top: 1px solid var(--border);
}

.modal-content label {
    display: block;
    font-size: var(--fs-md);
    color: var(--text-secondary);
    margin-bottom: 12px;
    font-weight: 500;
}

.modal-content input,
.modal-content select,
.modal-content textarea {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 8px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--fs-md);
    font-family: var(--font-sans);
    outline: none;
}

/* Size text fields without changing native checkbox/radio/color controls. */
.modal-content input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]),
.modal-content select {
    min-height: var(--control-height);
}

.btn .material-icons { font-size: var(--icon-size); vertical-align: middle; }

.modal-content input:focus,
.modal-content select:focus,
.modal-content textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent);
}

.settings-toggle {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    text-align: left;
}

.settings-toggle input[type="checkbox"] {
    width: auto;
    margin: 2px 0 0;
    flex-shrink: 0;
}

.settings-toggle span {
    flex: 1;
}

.settings-toggle strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
}

.settings-toggle .toggle-desc {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-base);
    line-height: 1.35;
    color: var(--text-secondary);
}

.modal-actions {
    display: flex;
    flex-wrap: wrap; /* #4344: at 200% text the buttons wrap instead of running off the left edge */
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}

.modal-footer.modal-actions {
    margin-top: 16px;
}

.launch-modal-step {
    flex: 1;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
}

#launch-step-chooser {
    overflow-y: hidden;
}

.launch-modal-step > h3 {
    position: sticky;
    top: -24px;
    z-index: 1;
    background: var(--bg-secondary);
    margin: -24px 0 16px;
    padding: 24px 4px 16px 0;
    border-bottom: 1px solid var(--border);
}

.launch-modal-step > .modal-actions {
    position: sticky;
    bottom: -24px;
    z-index: 1;
    background: var(--bg-secondary);
    margin: 16px 0 -24px;
    padding: 16px 4px 24px 0;
    border-top: 1px solid var(--border);
}

/* ── Info Grid (modal detail view) ─────────────────────────── */

.info-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 16px;
    font-size: 0.8125rem;
}

.info-grid dt {
    color: var(--text-secondary);
    font-weight: 600;
    white-space: nowrap;
}

.info-grid dd {
    color: var(--text-primary);
    word-break: break-all;
    display: flex;
    align-items: center;
    gap: 8px;
}

.info-grid dt.toggle-dt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    white-space: normal;
    align-self: start;
}

.info-grid dt.toggle-dt + dd {
    justify-content: flex-end;
    align-self: start;
    padding-top: 1px;
}

.info-grid dt.toggle-dt .toggle-desc {
    font-size: var(--fs-base);
    color: var(--text-secondary);
    font-weight: 400;
    line-height: 1.3;
    margin-top: -2px;
}

/* A checkbox in a settings row is a box, not a field: the generic input width of 100% made it a full-width box with the tick
   centred in it, detached from its label on a phone (#3981). */
.info-grid dd > input[type="checkbox"], .info-grid dd > .check-hit > input[type="checkbox"] { width: auto; margin: 0; flex: none; }
.info-grid dd code {
    background: var(--bg-tertiary);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

.session-info-modal {
    width: min(1120px, calc(100vw - 48px));
    max-width: 1120px;
}

.session-info-grid {
    grid-template-columns: minmax(170px, 210px) minmax(0, 1fr);
    gap: 16px 24px;
    align-items: start;
}

.session-info-grid dt {
    padding-top: 8px;
    line-height: 1.35;
}

.session-info-grid dd {
    min-width: 0;
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    word-break: normal;
    overflow-wrap: anywhere;
}

.session-info-grid > dt:first-child,
.session-info-grid > dt:first-child + dd,
.session-info-grid > dt:nth-child(3),
.session-info-grid > dt:nth-child(3) + dd,
.session-info-grid > dt:nth-child(5),
.session-info-grid > dt:nth-child(5) + dd {
    padding-top: 0;
}

.info-value-emphasis {
    font-size: 0.9375rem;
    font-weight: 600;
}

.info-value-mono,
.info-value-path {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.45;
}

.info-command-row {
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
}

.info-code-block {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    padding: 10px 12px !important;
    border: 1px solid var(--border);
    background: var(--bg-secondary) !important;
}

.info-text-block {
    white-space: pre-wrap;
    line-height: 1.45;
}

.info-token-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
}

.info-token-label {
    color: var(--text-secondary);
    font-size: var(--fs-base);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.info-token-value {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.1;
}

.settings-grid {
    grid-template-columns: minmax(170px, 210px) minmax(0, 1fr);
    gap: 14px 18px;
    align-items: start;
}

.settings-grid dt {
    white-space: normal;
    line-height: 1.35;
    padding-top: 8px;
}

.settings-grid dd {
    min-width: 0;
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
    word-break: normal;
    overflow-wrap: anywhere;
}

@media (max-width: 760px) {
    .session-info-modal {
        width: min(100%, calc(100vw - 20px));
        max-width: none;
    }

    .session-info-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .session-info-grid dt {
        padding-top: 0;
    }

    .session-info-grid dd {
        margin-bottom: 6px;
    }

    .info-command-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .info-token-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .settings-grid dt {
        padding-top: 0;
    }

    .settings-grid dd {
        margin-bottom: 6px;
    }

    .settings-api-key-row,
    .settings-cli-row {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .settings-cli-label,
    .cli-verify-result {
        width: auto;
        min-width: 0;
        text-align: left;
    }
}

.copy-btn {
    background: var(--bg-tertiary);
    border: 1px solid var(--control-border);
    color: var(--text-secondary);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-md);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}

.copy-btn:hover {
    background: var(--accent-dim);
    color: var(--text-on-accent);
    border-color: var(--accent-dim);
}

/* ── Toast Notification ────────────────────────────────────── */

.toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 12px 20px;
    font-size: 0.8125rem;
    color: var(--text-primary);
    z-index: 200;
    animation: slideIn 0.3s ease, fadeOut 0.3s ease 2.7s;
}

.toast.error {
    border-color: var(--error);
    color: var(--error);
}

.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: min(520px, calc(100vw - 40px));
}

/* A toast with an action stays until dismissed or timed out; it must not fade
   while its button is still meant to be used. */
.toast.has-action {
    animation: slideIn 0.3s ease;
}

.toast-message {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.toast-action,
.toast-close {
    flex: none;
    font: inherit;
    cursor: pointer;
    border-radius: var(--radius-md);
}

.toast-action {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent-dim);
    padding: 3px 10px;
}

.toast-close {
    background: transparent;
    color: var(--text-muted);
    border: none;
    padding: 0 2px;
    font-size: 1rem;
    line-height: 1;
}

.toast-action:hover,
.toast-close:hover {
    color: var(--text-primary);
}

.toast-action:focus-visible,
.toast-close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ── Notification Toast (top-right, larger) ───────────────── */

.notification-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--warning);
    border-left: 4px solid var(--warning);
    border-radius: var(--radius-ml);
    padding: 0;
    font-size: 0.875rem;
    color: var(--text-primary);
    z-index: 300;
    min-width: 300px;
    max-width: 420px;
    box-shadow: 0 8px 24px rgba(var(--black-rgb), 0.4);
    animation: slideInFromTop 0.3s ease, fadeOut 0.3s ease 9.7s;
    overflow: hidden;
}

.notification-toast-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
}

.notification-toast-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notification-toast-title {
    font-size: 0.875rem;
}

.notification-toast-detail {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.4;
    padding: 6px 8px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
}

.notification-toast-link {
    color: var(--accent);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
}

.notification-toast-link:hover {
    text-decoration: underline;
}

.notification-toast-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1rem;
    padding: 0 0 0 8px;
    line-height: 1;
}

.notification-toast-close:hover {
    color: var(--text-primary);
}

@keyframes slideInFromTop {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.alert-notification-overlay {
    position: fixed;
    inset: 0;
    background: rgba(var(--black-rgb), 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.2s ease;
}

.alert-notification {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 32px 40px;
    max-width: 440px;
    width: 90%;
    text-align: center;
    box-shadow: 0 8px 32px rgba(var(--black-rgb), 0.4);
    animation: scaleIn 0.2s ease;
}

.alert-notification-icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
}

.alert-notification-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.alert-notification-message {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 16px;
}

.alert-notification-link {
    display: inline-block;
    color: var(--accent);
    font-size: 0.8125rem;
    margin-bottom: 20px;
    text-decoration: none;
}

.alert-notification-link:hover {
    text-decoration: underline;
}

.alert-notification-host {
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-left: 6px;
    overflow-wrap: anywhere; /* a long host or IDN wraps instead of overflowing the alert at phone width */
}

.alert-notification-ok {
    min-width: 100px;
    padding: 8px 24px;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scaleIn {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* ── Update Toast ──────────────────────────────────────────── */

.update-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--accent-dim);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-ml);
    padding: 0;
    font-size: 0.8125rem;
    color: var(--text-primary);
    z-index: 300;
    min-width: 320px;
    max-width: 440px;
    box-shadow: 0 8px 24px rgba(var(--black-rgb), 0.4);
    animation: slideInFromTop 0.3s ease;
}

/* The data folder security warning (#3637): the update notice's look, in the warning colour,
   below it so both can show. */
.security-warning-toast {
    top: auto;
    bottom: 20px;
    border-color: rgba(var(--warning-rgb), 0.5);
    border-left-color: var(--warning);
}

.security-warning-text {
    margin: 0;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.update-toast-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
}

.update-toast-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.update-toast-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--accent);
}

.update-toast-current {
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.update-toast-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.125rem;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
}

.update-toast-close:hover {
    color: var(--text-primary);
}

.update-toast-notes {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.update-toast-notes li::before {
    content: "\2022  ";
    color: var(--accent-dim);
}

/* ── Tooltips ──────────────────────────────────────────────── */

.btn-nav[data-tooltip],
.macro-btn-wrap [data-tooltip] {
    position: relative;
}

.btn-nav[data-tooltip]:hover::after,
.macro-btn-wrap [data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 0;
    bottom: 100%;
    margin-bottom: 6px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
    opacity: 0;
    animation: tooltip-fade-in 0s 1s forwards;
    border-radius: var(--radius-md);
    padding: 8px 12px;
    font-size: 0.75rem;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    width: 280px;
    word-break: break-word;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(var(--black-rgb), 0.3);
    pointer-events: none;
}

.btn-send[data-tooltip]:hover::after,
.btn-enter[data-tooltip]:hover::after {
    left: auto;
    right: 0;
}

@keyframes tooltip-fade-in {
    to { opacity: 1; }
}

/* ── Emoji Picker ──────────────────────────────────────────── */

.emoji-picker {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    max-height: 400px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-ml);
    box-shadow: 0 8px 32px rgba(var(--black-rgb), 0.4);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.emoji-picker-header {
    display: flex;
    gap: 6px;
    padding: 10px;
    border-bottom: 1px solid var(--border);
}

.emoji-picker-search {
    flex: 1;
    padding: 6px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.8125rem;
    outline: none;
}

.emoji-picker-search:focus {
    border-color: var(--accent);
}

.emoji-picker-clear {
    padding: 4px 10px;
    background: none;
    border: 1px solid var(--control-border);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-size: 0.6875rem;
    cursor: pointer;
    white-space: nowrap;
}

.emoji-picker-clear:hover {
    color: var(--error);
    border-color: var(--error);
}

.emoji-picker-grid {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.emoji-picker-category {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 4px 2px;
}

.emoji-picker-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding-bottom: 4px;
}

.emoji-picker-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    background: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.1s;
}

.emoji-picker-btn:hover {
    background: rgba(var(--white-rgb), 0.1);
}

/* ── Tags ──────────────────────────────────────────────────── */

.tag-list {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: var(--radius-xl);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-on-accent);
    white-space: nowrap;
}

.tag-pill .tag-remove {
    cursor: pointer;
    opacity: 0.6;
    font-size: 0.8125rem;
    line-height: 1;
    margin-left: 2px;
}

.tag-pill .tag-remove:hover {
    opacity: 1;
}

.sidebar-tag-pills {
    display: flex;
    gap: 3px;
    margin-top: 2px;
    flex-wrap: wrap;
}

.sidebar-tag-pill {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Tag Dropdown ──────────────────────────────────────────── */

.tag-dropdown {
    position: relative;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 12px;
    margin-top: 8px;
    z-index: 50;
}

.tag-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.tag-dropdown-header .btn-small {
    margin: 0;
    padding: 2px 8px;
}

.tag-dropdown-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.tag-dropdown-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--radius-xl);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-on-accent);
    cursor: pointer;
    transition: opacity 0.15s;
}

.tag-dropdown-item:hover {
    opacity: 0.8;
}

.tag-dropdown-create {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

.tag-dropdown-create input[type="text"] {
    flex: 1;
    padding: 4px 8px;
    background: var(--bg-primary);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.75rem;
    outline: none;
}

.tag-dropdown-create input[type="text"]:focus {
    border-color: var(--accent);
}

.tag-dropdown-create input[type="color"] {
    width: 28px;
    height: 28px;
    border: 1px solid var(--control-border);
    border-radius: var(--radius-sm);
    background: none;
    cursor: pointer;
    padding: 0;
}

.tag-dropdown-create .btn-small {
    margin: 0;
}

/* ── Folder Tag Dropdown ──────────────────────────────────── */

.folder-tag-dropdown {
    position: fixed;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 12px;
    z-index: 100;
    min-width: 200px;
    max-width: 280px;
    box-shadow: 0 4px 16px rgba(var(--black-rgb), 0.3);
}

.folder-tag-current {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

/* ── Pagination Controls ───────────────────────────────────── */

.pagination-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.pagination-controls .btn-small {
    margin: 0;
}

.pagination-controls .btn-small:disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

.pagination-info {
    font-size: var(--fs-base);
    color: var(--text-secondary);
}

/* ── Directory Browser ─────────────────────────────────────── */

.dir-input-row {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.dir-input-row input {
    flex: 1;
    margin-top: 0 !important;
}

.dir-input-row .btn {
    flex-shrink: 0;
    padding: 8px 12px;
    font-size: var(--fs-md);
}

.flag-shortcuts {
    display: flex;
    gap: 6px;
    margin-top: -8px;
    margin-bottom: 12px;
}

.flag-shortcut-btn {
    font-size: 0.6875rem;
    font-family: var(--font-mono);
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    border: 1px solid var(--control-border);
    background: var(--bg-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.flag-shortcut-btn:hover {
    color: var(--text-primary);
    border-color: var(--text-muted);
}

.flag-shortcut-btn.active {
    background: var(--accent);
    color: var(--text-on-accent);
    border-color: var(--accent);
}

.dir-browser {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-primary);
    margin-bottom: 12px;
    overflow: hidden;
    /* Modals are flex columns — without this the browser is squashed instead of the modal scrolling */
    flex-shrink: 0;
}

.dir-browser-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border);
}

.dir-browser-up {
    margin: 0;
    padding: 2px 8px;
    font-size: 0.75rem;
}

.dir-browser-path {
    font-size: 0.75rem;
    font-family: var(--font-mono);
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dir-browser-list {
    list-style: none;
    height: 320px;
    min-height: 96px;
    max-height: 70vh;
    overflow-y: auto;
    resize: vertical;
}

.dir-browser-recents {
    border-bottom: 1px solid var(--border);
    padding: 4px 0;
}

.dir-browser-recents-label {
    padding: 4px 12px 2px;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.dir-browser-recent {
    padding: 5px 12px;
    font-size: 0.8125rem;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.1s;
}

.dir-browser-recent:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.dir-browser-recent .dir-name {
    flex-shrink: 0;
    color: var(--text-primary);
}

.dir-browser-recent-path {
    font-size: 0.6875rem;
    font-family: var(--font-mono);
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    direction: rtl;
    text-align: left;
}

.dir-browser-list li {
    padding: 6px 12px;
    font-size: 0.8125rem;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.1s;
}

.dir-browser-list li:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.dir-browser-list li.empty-state {
    cursor: default;
    color: var(--text-muted);
    font-style: italic;
    justify-content: center;
    padding: 16px 12px;
}

.dir-browser-list li.empty-state:hover {
    background: transparent;
    color: var(--text-muted);
}

.dir-icon {
    font-size: 0.875rem;
    flex-shrink: 0;
}

.dir-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Settings / Toggle ─────────────────────────────────────── */

.settings-select {
    width: 100%;
}

.settings-modal-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
/* At 200% text on a phone a button's one-line label was wider than the modal and the body scrolled sideways, cutting buttons and selects off (#4247):
   buttons may wrap their text and nothing is wider than its container. */
.settings-modal-body .btn, .settings-modal-body select, .settings-modal-body input[type=text], .settings-modal-body input[type=number], .settings-modal-body input[type=password] { max-width: 100%; box-sizing: border-box; }
.settings-modal-body .btn { white-space: normal; }
.settings-modal-body .settings-editions-btn { margin-left: 0; }

.settings-theme-btn,
.settings-prompts-btn {
    width: 100%;
    margin: 0;
    flex: none; /* #4344: in the body's column a wrapped label made the button shorter than its text at large text sizes */
}

.settings-input {
    width: 100%;
    box-sizing: border-box;
}

.settings-mono-input {
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

.settings-api-key-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.settings-api-key-row .settings-input {
    flex: 1 1 100%; /* the key on its own full-width line, its buttons below (#3152) */
    min-width: 0;
}

.settings-copy-btn {
    flex-shrink: 0;
    margin: 0;
}

.settings-cli-paths {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.settings-cli-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    width: 100%;
    margin: 0;
}

.settings-cli-label {
    width: 56px;
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.settings-cli-paths .settings-input {
    flex: 1;
    font-size: 0.75rem;
    font-family: var(--font-mono);
    margin-top: 0;
}

.settings-cli-actions {
    display: flex;
    justify-content: flex-start;
    margin-top: 2px;
}

.settings-hint {
    font-size: var(--fs-base);
    color: var(--text-secondary);
    margin-top: 2px;
}
.settings-hint[data-state="restart-required"] { color: var(--warning); }
/* A field that is off (the storage limits while they load, or when the load failed) reads as off, not as an empty box to fill in (#4469, UX). */
#settings-modal input:disabled, #settings-modal select:disabled { opacity: .6; cursor: not-allowed; }
.settings-hint[data-state="warn"], .settings-hint [data-state="warn"] { color: var(--warning); }
/* The controls of one setting on one wrapping row (field, kind, then the buttons side by side) instead of a stack that grows tall (#4469). */
.settings-controls-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); }
.settings-controls-row > * { margin: 0; }
.settings-controls-row .settings-inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); max-width: 100%; } /* the words wrap at the field when the row is narrow (popover_bounds: no sideways scroll at 200% text) */
.settings-controls-row .settings-inline input { display: inline-block; margin: 0; width: 3.5em; min-width: 44px; flex: none; } /* never narrower than a touch target (text200_wide) */
.settings-hint[data-state="error"] { color: var(--danger); }
.settings-database-encryption-warning {
    display: block;
    margin-top: 6px;
    max-width: 560px;
}

.cli-verify-result {
    font-size: var(--fs-base);
    flex-shrink: 0;
    min-width: 48px;
    text-align: right;
}

.cli-verify-ok {
    color: var(--success);
}

.cli-verify-fail {
    color: var(--error);
}

/* ── Overflow Menu ─────────────────────────────────────────── */

.overflow-menu-trigger {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 5px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    height: 30px;
}

.overflow-menu-trigger:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.overflow-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 4px;
    min-width: 180px;
    box-shadow: var(--shadow-lg);
    z-index: 50;
}

.overflow-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-family: inherit;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background 0.1s;
}

.overflow-menu-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.overflow-menu-item.overflow-menu-danger:hover {
    background: rgba(var(--fx-red-rgb), 0.15);
    color: var(--error);
}

/* A team action this account may not take through the Coral Hub (#3443): shown, not usable,
   with a short visible note; the full reason is the title. */
.overflow-menu-item.overflow-menu-blocked,
.overflow-menu-item.overflow-menu-blocked:hover {
    opacity: 0.6;
    cursor: not-allowed;
    background: none;
}
.overflow-menu-note {
    margin-left: auto;
    font-size: var(--fs-xs, 11px);
    color: var(--text-muted);
}

.overflow-menu-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 4px 0;
}

.overflow-menu-version { padding: 4px 14px 6px; font-size: 0.6875rem; color: var(--text-muted); user-select: text; }
#coral-version-row[hidden] { display: none; }

.overflow-menu-tier {
    padding: 6px 14px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.overflow-menu-tier .tier-label {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.overflow-menu-tier .tier-pro {
    background: rgba(var(--accent-rgb), 0.15);
    color: var(--accent);
}

/* ── Resume Modal Items ────────────────────────────────────── */

/* ── Launch Type Chooser ──────────────────────────────────── */

.launch-type-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 8px;
}

/* The chooser's four choices in a row (#3630). */
.modal-content-wide.launch-choosing {
    width: 640px;
    max-width: 95vw;
}

/* Open folder (#3630) */
.open-folder-help {
    margin: 0 0 var(--space-lg);
    color: var(--text-secondary);
    font-size: var(--fs-md);
}
.open-folder-error {
    margin-top: var(--space-md);
    color: var(--error-text);
    font-size: var(--fs-md);
}

.launch-type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 18px 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-ml);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    color: var(--text-secondary);
}

.launch-type-card:hover {
    border-color: var(--accent);
    background: var(--bg-hover);
    color: var(--text-primary);
    box-shadow: 0 2px 12px rgba(var(--accent-rgb), 0.15);
}

.launch-type-icon {
    color: var(--text-muted);
    transition: color 0.15s;
}

.launch-type-card:hover .launch-type-icon {
    color: var(--accent);
}

.launch-type-label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.launch-type-desc {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.4;
}

.agent-persona-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 0;
}

.agent-persona-actions .btn-small {
    margin: 0;
}

.agent-persona-actions .btn-subtle {
    padding: 4px 10px;
    border-radius: 999px;
    background: transparent;
    border-color: var(--control-border);
    color: var(--text-muted);
}

.agent-persona-actions .btn-subtle:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
    border-color: var(--accent);
}

.agent-persona-actions .btn:first-child {
    color: var(--accent);
}
/* Save Persona on hover: the accent text on the hover fill was 4.31:1 in the light theme; the other subtle buttons turn to the primary text colour (#4673). */
.agent-persona-actions .btn:first-child:hover {
    color: var(--text-primary);
}

.agent-persona-actions .btn:first-child:hover {
    background: rgba(var(--accent-rgb), 0.08);
}

.acf-name,
.acf-model,
.acf-model-select,
.acf-prompt,
.acf-agent-type,
#launch-dir,
#launch-board-select,
#launch-board-name,
#launch-board-server {
    background: var(--field-fill);
}

.acf-prompt {
    min-height: 120px;
}

.acf-auto-permissions-flag {
    font-size: 0.75rem;
    font-weight: 600;
}

.agent-persona-actions .btn {
    width: auto;
    justify-content: center;
}

.acf-top-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
}

.acf-auto-permissions-note {
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

.acf-auto-permissions-flag {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--accent);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
}

.acf-flags-details {
    margin-top: 12px;
}

/* Locked preset fields */

.team-agents-container {
    border: 1px solid var(--border);
    border-radius: var(--radius-ml);
    padding: 12px;
    background: var(--inset-fill);
}

.team-agents-header {
    margin-bottom: 10px;
}

.team-agents-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 4px 0 0;
    line-height: 1.4;
}

.team-field-hint {
    margin: -4px 0 12px;
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.team-field-hint.error {
    color: var(--error);
}

.team-agents-footer {
    margin-top: 8px;
    display: flex;
    justify-content: stretch;
}

.team-add-agent-btn-full {
    width: 100%;
    padding: 10px;
    font-size: 0.8125rem;
    border-radius: var(--radius-ml);
    border: 2px dashed var(--border);
    background: transparent;
    color: var(--accent);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.team-add-agent-btn-full:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
}

.team-template-dropdown-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.team-template-dropdown-label select {
    margin-top: 4px;
}

.team-template-actions {
    display: flex;
    gap: 8px;
    margin: 0 0 14px;
    flex-wrap: wrap;
    align-items: center;
}

.team-template-actions .btn-small {
    margin: 0;
}

.team-template-actions .btn-subtle {
    padding: 4px 10px;
    border-radius: 999px;
    background: transparent;
    border-color: var(--control-border);
    color: var(--text-muted);
}

.team-template-actions .btn-subtle:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
    border-color: var(--accent);
}

.team-template-actions .btn:last-of-type {
    color: var(--accent);
}

.team-generate-ai-btn {
    border-color: rgba(var(--fx-indigo-rgb), 0.35) !important;
    color: var(--accent) !important;
    background: rgba(var(--fx-indigo-rgb), 0.08) !important;
}

.team-generate-ai-btn:hover {
    background: rgba(var(--fx-indigo-rgb), 0.16) !important;
    border-color: var(--accent) !important;
}

.team-template-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: help;
}

.team-advanced {
    margin-top: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-ml);
    background: rgba(var(--black-rgb), 0.08);
}

/* The dark fill above darkens the light theme's panel, taking the labels in it (Agent Configuration, Flags, the optional notes) to 3.4 to 4.4:1: a light fill there (#4673). */
[data-theme="light"] .team-advanced { background: rgba(var(--white-rgb), 0.5); }

.team-advanced summary {
    cursor: pointer;
    padding: 10px 12px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    list-style: none;
}

.team-advanced summary::-webkit-details-marker {
    display: none;
}

.team-advanced summary::after {
    content: "+";
    float: right;
    color: var(--text-muted);
}

.team-advanced[open] summary::after {
    content: "-";
}

.team-advanced-body {
    padding: 0 12px 12px;
}

.team-settings-toggle {
    margin-top: 8px;
    padding: 12px 0 0;
    border-top: 1px solid var(--border);
}

/* Inside a dialog the generic ".modal-content label" (block) outranks .settings-toggle: the box sits beside its words again (#4962: the launch dialog's health option; the worktree option had the same). */
.modal-content label.team-settings-toggle,
.sd-modal-content .settings-pane label.team-settings-toggle {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-height: var(--control-touch-height, 0);
}
.modal-content label.team-settings-toggle input[type="checkbox"],
.sd-modal-content .settings-pane label.team-settings-toggle input[type="checkbox"] {
    width: auto;
    margin: 3px 0 0;
    flex-shrink: 0;
}

.team-settings-toggle strong {
    display: block;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.team-settings-note {
    margin-top: 4px;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

.mobile-launch-section {
    min-width: 0;
}

.mobile-launch-section summary {
    display: none;
}

.team-agents-scroll {
    max-height: 360px;
    overflow-y: auto;
    padding-right: 4px;
}

.team-wizard-subtitle {
    margin: 10px 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.team-wizard-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.team-wizard-intro {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(var(--accent-rgb), 0.14);
    background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.08), rgba(var(--accent-rgb), 0.02));
}

.team-wizard-intro-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-xl);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--accent);
    flex-shrink: 0;
}

.team-wizard-intro strong {
    display: block;
    margin-bottom: 4px;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.team-wizard-intro p {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.team-wizard-body textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.5;
}

.team-wizard-error {
    padding: 12px 14px;
    border-radius: var(--radius-ml);
    border: 1px solid rgba(255, 107, 107, 0.3);
    background: rgba(255, 107, 107, 0.08);
    color: var(--error);
    font-size: 0.75rem;
    line-height: 1.5;
}

.team-wizard-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 24px;
    text-align: center;
}

.team-wizard-success-icon {
    font-size: 3rem;
    color: var(--success);
}

.team-wizard-success strong {
    font-size: 1.125rem;
}

.team-wizard-success p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.team-wizard-success .btn {
    margin-top: 12px;
}

.generated-team-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin: 12px 0;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(var(--fx-indigo-rgb), 0.12), rgba(168, 85, 247, 0.08));
    border: 1px solid rgba(var(--fx-indigo-rgb), 0.25);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.generated-team-banner .material-icons {
    font-size: 1.125rem;
    color: var(--accent);
    flex-shrink: 0;
}

.team-agent-row {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 8px;
    position: relative;
    overflow: hidden;
}

.team-agent-row:hover {
    border-color: var(--border-light);
}

/* Collapsed card summary */
.team-agent-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    cursor: pointer;
    gap: 8px;
}

.team-agent-summary-left {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.team-agent-role-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.team-agent-prompt-preview {
    font-size: var(--fs-base);
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.4;
}

.team-agent-summary-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.team-agent-edit-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-sm);
    line-height: 1;
    transition: color 0.15s;
}

.team-agent-edit-btn:hover {
    color: var(--accent-primary);
}

.team-agent-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1rem;
    padding: 0 4px;
    line-height: 1;
}

.team-agent-remove:hover {
    color: var(--danger);
}

/* Expandable edit form */
.team-agent-form {
    display: none;
    padding: 0 12px 12px;
}

.team-agent-card.editing .team-agent-form {
    display: block;
}

.team-agent-card.editing .team-agent-summary {
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
    margin-bottom: 4px;
}

.team-agent-card.editing {
    border-color: var(--accent-primary);
}

.team-agent-row label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.8125rem;
}

.team-agent-row input,
.team-agent-row textarea {
    width: 100%;
    box-sizing: border-box;
}

.team-agent-row textarea {
    resize: vertical;
    min-height: 48px;
}

.agent-preset-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 0 12px 0;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 12px;
}

.import-export-row {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.btn-subtle {
    background: var(--bg-tertiary);
    border: 1px solid var(--control-border);
    color: var(--text-secondary);
    font-size: var(--fs-md);
    font-weight: 500;
    padding: 5px 12px;
}

.btn-subtle:hover {
    color: var(--text-primary);
    border-color: var(--accent);
    background: var(--bg-hover);
}

.add-agent-board-subtitle {
    color: var(--text-muted);
    font-size: 0.8125rem;
    margin: -8px 0 12px 0;
}

.launch-back-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.125rem;
    padding: 0 8px 0 0;
    vertical-align: middle;
    transition: color 0.15s;
}

.launch-back-btn:hover {
    color: var(--text-primary);
}

/* ── Template Browser ─────────────────────────────────────── */

.template-browser {
    width: 800px !important;
    max-width: 95vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.template-browser-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.template-browser-header h3 {
    margin: 0;
    white-space: nowrap;
}

.template-browser-search {
    flex: 1;
    padding: 6px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.8125rem;
    outline: none;
}

.template-browser-search:focus {
    border-color: var(--accent);
}

.template-browser-close {
    font-size: 1.125rem;
    padding: 2px 8px !important;
    min-width: 0;
}

.template-browser-body {
    display: flex;
    gap: 1px;
    flex: 1;
    min-height: 0;
    margin-top: 12px;
    background: var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.template-browser-categories,
.template-browser-list {
    width: 180px;
    flex-shrink: 0;
    overflow-y: auto;
    background: var(--bg-secondary);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.template-browser-list {
    width: 200px;
}

.template-browser-preview {
    flex: 1;
    overflow-y: auto;
    background: var(--bg-primary);
    padding: 16px;
}

.template-cat-btn,
.template-item-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 6px 10px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: var(--fs-md);
    cursor: pointer;
    text-transform: capitalize;
}

.template-cat-btn:hover,
.template-item-btn:hover {
    background: rgba(var(--white-rgb), 0.05);
    color: var(--text-primary);
}

.template-cat-btn.active {
    background: var(--accent);
    color: var(--text-on-accent);
}

.template-browser-empty,
.template-browser-loading {
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.template-preview-name {
    font-size: 1rem;
    font-weight: 700;
    text-transform: capitalize;
    margin-bottom: 6px;
}

.template-preview-desc {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.template-preview-meta {
    font-size: var(--fs-base);
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.template-preview-body {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px;
    margin-bottom: 12px;
    max-height: 250px;
    overflow-y: auto;
}

.template-preview-body pre {
    margin: 0;
    white-space: pre-wrap;
    font-size: 0.6875rem;
    font-family: var(--font-mono);
    color: var(--text-secondary);
    line-height: 1.5;
}

.template-use-btn {
    width: 100%;
}

/* Message board — header actions */

.mb-view-header h2 { font-size: var(--type-page-size); }

.mb-header-actions {
    display: flex;
    gap: 4px;
    align-items: center;
    /* With the right sidebar open (#4539) the board is narrower than it was: the actions wrap, right-aligned, inside the gutter. */
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
    max-width: 100%;
}
/* The board's More menu (#4538) is a phone's (mobile.css): on a wider screen its group is laid out inline, as before. */
.mb-more, .mb-more-menu { display: contents; }
.mb-action-btn.mb-more-btn { display: none; }

/* With the right sidebar open on a board (#4539) the board is narrower and the toolbar uses the same More menu a phone does (#4538, mobile.css): Select, Export, Pause
   and Delete in a menu, the Subscribers list being in the sidebar. The rules repeat the phone's, behind the sidebar being open (body[data-dock-open], sidebar.js). */
@media (min-width: 768px) {
    /* The title, its badge and More wrap onto lines of their own when the board is this narrow, instead of printing over each other. */
    body[data-dock-page="board"][data-dock-open="1"] #messageboard-view .mb-view-header { flex-wrap: wrap; row-gap: 8px; }
    body[data-dock-page="board"][data-dock-open="1"] #messageboard-view .mb-view-header-left { flex-wrap: wrap; min-width: 0; row-gap: 4px; }
    body[data-dock-page="board"][data-dock-open="1"] #messageboard-view .mb-header-actions { margin-left: auto; }
    body[data-dock-page="board"][data-dock-open="1"] #messageboard-view.mb-has-board .mb-more { display: inline-block; position: relative; }
    body[data-dock-page="board"][data-dock-open="1"] #messageboard-view.mb-has-board .mb-more-btn { display: inline-flex; }
    body[data-dock-page="board"][data-dock-open="1"] #messageboard-view .mb-more-menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        min-width: 200px;
        max-width: calc(100vw - 32px);
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 4px 0;
        box-shadow: 0 8px 24px rgba(var(--black-rgb), 0.3);
        z-index: 1000;
    }
    body[data-dock-page="board"][data-dock-open="1"] #messageboard-view .mb-more.open .mb-more-menu { display: flex; }
    body[data-dock-page="board"][data-dock-open="1"] #messageboard-view .mb-more-menu .mb-action-btn {
        width: 100%;
        min-height: 36px;
        justify-content: flex-start;
        padding: 8px 16px;
        border: 0;
        border-radius: 0;
        background: none;
        white-space: normal;
        text-align: left;
    }
    body[data-dock-page="board"][data-dock-open="1"] #messageboard-view .mb-more-menu .mb-action-btn:hover,
    body[data-dock-page="board"][data-dock-open="1"] #messageboard-view .mb-more-menu .mb-action-btn:focus-visible { background: var(--bg-hover); }
    body[data-dock-page="board"][data-dock-open="1"] #messageboard-view .mb-more.open .mb-more-chevron { transform: rotate(180deg); }
    body[data-dock-page="board"][data-dock-open="1"] #messageboard-view .mb-more-menu #mb-pause-btn.mb-action-danger,
    body[data-dock-page="board"][data-dock-open="1"] #messageboard-view .mb-more-menu #mb-pause-btn.mb-action-danger:hover { color: var(--warning); opacity: 1; }
}

.mb-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: var(--space-xs) var(--space-md);
    min-height: var(--control-compact-height);
    font-size: var(--fs-md);
    font-family: var(--font-sans);
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.mb-action-btn:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.mb-action-btn.mb-action-danger {
    color: var(--error);
    opacity: 0.7;
    border-color: rgba(var(--fx-red-rgb), 0.3);
}

.mb-action-btn.mb-action-danger:hover {
    opacity: 1;
    color: var(--error);
    background: rgba(var(--fx-red-rgb), 0.1);
}

/* ── Permissions Editor ──────────────────────────────────── */

.permissions-section {
    margin-top: 4px;
}

.permissions-toggle-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.75rem;
    font-family: inherit;
    padding: 4px 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.permissions-toggle-btn:hover {
    color: var(--text-primary);
}

.permissions-chevron {
    transition: transform 0.15s;
    flex-shrink: 0;
}

.permissions-editor {
    padding: 8px 0;
}

.perms-group {
    margin-bottom: 8px;
}

.perms-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
    display: block;
}

.perms-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.perm-chip {
    font-size: 0.6875rem;
    font-family: var(--font-mono);
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    border: 1px solid var(--control-border);
    background: var(--bg-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.perm-chip:hover {
    color: var(--text-primary);
    border-color: var(--text-muted);
}

.perm-chip.active {
    background: var(--accent);
    color: var(--text-on-accent);
    border-color: var(--accent);
}

.perms-shell-patterns {
    margin-top: 6px;
}

.perms-shell-input {
    width: 100%;
    box-sizing: border-box;
    font-size: 0.75rem;
    font-family: var(--font-mono);
}

/* ── Team Agent Reorder ──────────────────────────────────── */

.team-agent-row {
    cursor: grab;
    transition: opacity 0.15s, transform 0.15s;
}

.team-agent-row.dragging {
    opacity: 0.4;
    cursor: grabbing;
}

.team-agent-row.drag-over {
    border-top: 2px solid var(--accent);
}

.team-agent-reorder-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px;
    border-radius: var(--radius-xs);
    display: flex;
    align-items: center;
    opacity: 0.5;
    transition: opacity 0.15s, color 0.15s;
}

.team-agent-reorder-btn:hover {
    opacity: 1;
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

/* The first card cannot move up and the last cannot move down (#3770). */
.team-agent-reorder-btn:disabled {
    opacity: 0.2;
    cursor: default;
    background: none;
    color: var(--text-muted);
}

/* ── CLI Check Warning ───────────────────────────────────── */

.cli-check-warning {
    font-size: 0.6875rem;
    color: var(--warning);
    margin-top: 2px;
}

/* ── Color Picker Popover ────────────────────────────────── */

.color-picker-popover {
    position: fixed;
    z-index: 200;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 10px;
    box-shadow: 0 4px 16px rgba(var(--black-rgb), 0.3);
    width: 210px;
}

.color-picker-swatches {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    margin-bottom: 8px;
}

.color-swatch {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.1s, transform 0.1s;
}

.color-swatch:hover {
    transform: scale(1.15);
    border-color: rgba(var(--white-rgb), 0.4);
}

.color-swatch.active {
    border-color: #fff;
    box-shadow: 0 0 0 1px var(--bg-tertiary), 0 0 0 3px currentColor;
}

.color-picker-custom {
    display: flex;
    gap: 4px;
    align-items: center;
}

.color-picker-hex {
    flex: 1;
    padding: 4px 6px;
    font-size: 0.6875rem;
    font-family: var(--font-mono);
    background: var(--bg-primary);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    outline: none;
}

.color-picker-hex:focus {
    border-color: var(--accent);
}

.color-picker-apply,
.color-picker-reset {
    font-size: var(--fs-md);
    padding: 4px 8px;
}

/* ── Message Board Layout ──────────────────────────────────── */

/* The page gutter (#3607): the heading keeps clear of the sidebar, and Delete and the Subscribers
   column keep clear of the window's right edge, as the Jobs and Workflows views do. */
#messageboard-view {
    padding-inline: var(--space-2xl);
    min-width: 0;
}

.mb-view-header.mb-view-header {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-lg) 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-md);
}

.mb-view-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mb-view-body {
    display: flex;
    gap: var(--space-2xl);
    overflow: hidden;
    min-width: 0;
}

.mb-project-list {
    flex: 1;
    overflow-y: auto;
}

.mb-board {
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.mb-messages-wrap {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.mb-messages-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 8px 4px 12px;
}

.mb-messages-scroll:focus { outline: none; }

/* The "N new messages, jump to latest" pill (#4502): at the bottom edge of the messages while you read higher up. */
.mb-new-pill {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    display: flex;
    justify-content: center;
    pointer-events: none;
}
.mb-new-pill-btn[hidden] { display: none; }
.mb-new-pill-btn {
    pointer-events: auto;
    background: var(--accent-dim); /* white on --accent is 2.5:1; on --accent-dim it clears 4.5:1 */
    color: var(--text-on-accent, #fff);
    border: 0;
    border-radius: 999px;
    padding: 6px 14px;
    min-height: 32px;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(var(--black-rgb), 0.35);
}
.mb-new-pill-btn:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }
@media (pointer: coarse) { .mb-new-pill-btn { min-height: 44px; padding: 10px 18px; } }

.mb-post-form {
    border-top: 1px solid var(--border);
    padding: 12px 12px 16px;
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.mb-post-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--control-border);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.875rem;
    resize: vertical;
    font-family: inherit;
    line-height: 1.5;
    min-height: 44px;
}

.mb-post-send-btn {
    height: 44px;
    padding: 0 20px;
}

.mb-subscribers-panel {
    /* A tab of the right sidebar (#4539): the sidebar draws its own edge and scrolls this panel. */
    padding: var(--space-lg) 24px;
}

.mb-subscribers-title {
    font-size: 0.8125rem;
    margin: 0 0 8px;
    color: var(--text-muted);
}

.mb-subscribers-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* A long title or id wraps inside the column instead of being cut off (#3607). */
.mb-subscriber {
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--border);
    min-width: 0;
    overflow-wrap: anywhere;
}

.mb-subscriber-name {
    font-weight: 600;
    font-size: var(--fs-base);
}

.mb-subscriber-name .subscriber-history-link {
    text-align: start;
    overflow-wrap: anywhere;
}

.mb-subscriber-id {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

/* ── Modal Width Variants ──────────────────────────────────── */

.modal-sm { width: 400px; }
.modal-md { width: 420px; }
.modal-xl { width: 600px; }

/* ── Default Prompts Modal ─────────────────────────────────── */

.prompts-description {
    color: var(--text-secondary);
    font-size: 0.75rem;
    margin: 0 0 12px;
}

.prompt-field {
    margin-bottom: 16px;
}

.prompt-field:last-child {
    margin-bottom: 12px;
}

.prompt-field-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.prompt-field-label {
    font-weight: 600;
    font-size: 0.8125rem;
}

.prompt-field-reset {
    font-size: var(--fs-md);
    padding: 2px 8px;
}

.prompt-textarea {
    resize: vertical;
    font-family: monospace;
    font-size: 0.75rem;
}

.prompts-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 16px 0;
}

/* ── Settings / About Section ────────────────────────────── */

.settings-about-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.settings-about-title {
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-secondary);
}

.settings-version-label {
    font-size: var(--fs-base);
    color: var(--text-secondary);
    margin-top: 8px;
}

.tier-branding {
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

/* ── Misc Extracted Inline Styles ──────────────────────────── */

.capture-wrapper {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.mobile-connect-url-box {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.mobile-connect-url-code {
    flex: 1;
    user-select: all;
    word-break: break-all;
}

.mobile-connect-qr {
    margin: 0 auto 16px;
    display: flex;
    justify-content: center;
}

.mobile-connect-api-key {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 10px;
    font-size: 0.75rem;
    margin-bottom: 12px;
    text-align: left;
}

.mobile-connect-hint {
    color: var(--text-secondary);
    font-size: var(--fs-base);
}

.text-muted-sm {
    color: var(--text-muted);
    font-weight: normal;
}

.text-secondary-sm {
    color: var(--text-secondary);
    font-size: 0.8125rem;
}

.icon-inline {
    font-size: 1rem;
    vertical-align: middle;
    margin-right: 6px;
}

.files-search-row-wrapper {
    position: relative;
}

.top-bar-icon {
    font-size: 1.125rem;
}

.notes-panel-body {
    padding: 12px 14px;
    overflow-y: auto;
    flex: 1;
}

.icon-btn-inline {
    font-size: 0.875rem;
    vertical-align: -2px;
    margin-right: 2px;
}

/* Tmux missing banner — shown across the top when tmux can't be found.
   Agents need tmux to run, so we surface install instructions instead of
   silently failing on launch. */
.tmux-missing-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: color-mix(in srgb, var(--warning) 18%, var(--bg-secondary));
    border-bottom: 1px solid color-mix(in srgb, var(--warning) 40%, transparent);
    color: var(--text-primary);
    font-size: 0.8125rem;
}
.tmux-missing-banner-icon {
    color: var(--warning);
    font-size: 1.25rem;
    flex-shrink: 0;
}
.tmux-missing-banner-body {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    flex: 1;
    align-items: baseline;
}
.tmux-missing-banner-body strong {
    color: var(--warning);
}
.tmux-missing-banner-cmd code {
    background: var(--bg-secondary);
    padding: 2px 6px;
    border-radius: var(--radius-xs);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
}
.tmux-missing-banner-close {
    background: transparent;
    border: 0;
    color: var(--text-primary);
    opacity: 0.7;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    flex-shrink: 0;
}
.tmux-missing-banner-close:hover { opacity: 1; }

/* ── Servers settings dialog (multi-server hub) ───────────────────── */

.servers-intro, .servers-empty { color: var(--text-secondary); font-size: var(--fs-base); margin: 0 0 var(--space-lg); }
.servers-list { list-style: none; margin: 0 0 var(--space-xl); padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.servers-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md) var(--space-lg);
    padding: var(--space-lg);
}
.servers-row + .servers-row { border-top: 1px solid var(--border); }
.servers-row-main { flex: 1 1 14em; min-width: 0; }
.servers-row-title { font-size: var(--fs-md); font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
.servers-id, .servers-tag {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-secondary);
}
.servers-tag { padding: 0 var(--space-sm); border: 1px solid var(--warning); border-radius: var(--radius-md); font-family: var(--font-sans); }
.servers-row-meta { font-size: var(--fs-base); color: var(--text-secondary); overflow-wrap: anywhere; }
.servers-row-error { margin-top: var(--space-xs); font-size: var(--fs-base); color: var(--error); overflow-wrap: anywhere; }
.servers-row-warn { display: flex; align-items: flex-start; gap: var(--space-sm); margin-top: var(--space-xs); font-size: var(--fs-base); font-weight: 400; color: var(--text-primary); overflow-wrap: anywhere; min-width: 0; } /* #4301: icon and words, not only a colour */
.servers-row-warn .material-icons { flex: none; font-size: 1.15em; color: var(--warning); }
.servers-url-error { display: flex; align-items: flex-start; gap: var(--space-sm); margin-top: calc(-1 * var(--space-sm)); margin-bottom: var(--space-lg); font-size: var(--fs-base); font-weight: 400; color: var(--text-primary); overflow-wrap: anywhere; }
.servers-url-error .material-icons { flex: none; font-size: 1.15em; color: var(--error); }
.servers-form input[aria-invalid="true"] { border-color: var(--error); }
.servers-row-status { flex: 0 0 auto; }
.servers-row-actions { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.servers-row-detail { display: inline; color: var(--text-secondary); }
.servers-row-detail summary { display: inline; cursor: pointer; color: var(--text-secondary); text-decoration: underline; }
.servers-row-detail[open] summary { display: block; margin: var(--space-xs) 0; }
.server-status { display: inline-flex; align-items: center; gap: var(--space-sm); font-size: var(--fs-base); font-weight: 500; }
.servers-form {
    border-top: 1px solid var(--border);
    padding-top: var(--space-lg);
}
.servers-form h4 { margin: 0 0 var(--space-lg); font-size: var(--fs-lg); }
.servers-help { display: block; margin-top: var(--space-xs); font-size: var(--fs-base); font-weight: 400; color: var(--text-secondary); }
.servers-warning { color: var(--warning); }
.servers-form-error {
    margin-bottom: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    border: 1px solid var(--error);
    border-radius: var(--radius-md);
    font-size: var(--fs-base);
    color: var(--text-primary);
    overflow-wrap: anywhere;
}
.modal-content label.servers-check { display: flex; align-items: flex-start; gap: var(--space-md); }
.modal-content label.servers-check input { width: auto; margin-top: 3px; flex-shrink: 0; }
.servers-form-actions { display: flex; justify-content: flex-end; gap: var(--space-md); }
.servers-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-md); margin: 0 0 var(--space-lg); }
.servers-summary { color: var(--text-secondary); font-size: var(--fs-base); }
/* The Add/Edit server form in the Servers tab (a page, not a dialog) looks like the dialogs' forms (#4324): labels above full-width fields that
   share the field look, a checkbox row of its own, and wrapping help text; nothing wider than the page at 390 px or 200% text. */
.servers-form { min-width: 0; max-width: 100%; }
.servers-form label { display: block; font-size: var(--fs-md); color: var(--text-secondary); margin-bottom: var(--space-lg); font-weight: 500; min-width: 0; }
.servers-form input:not([type="checkbox"]):not([type="radio"]) {
    display: block; width: 100%; max-width: 100%; box-sizing: border-box; margin-top: var(--space-xs); padding: 8px 12px; min-height: var(--control-height);
    background: var(--bg-primary); border: 1px solid var(--control-border); border-radius: var(--radius-md); color: var(--text-primary);
    font-size: var(--fs-md); font-family: var(--font-sans); outline: none;
}
.servers-form input:not([type="checkbox"]):not([type="radio"]):focus { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent); }
.servers-form input[aria-invalid="true"], .servers-form input[aria-invalid="true"]:focus { border-color: var(--error); }
.servers-form input:disabled { opacity: .6; cursor: not-allowed; }
.servers-form label.servers-check { display: flex; align-items: flex-start; gap: var(--space-md); }
.servers-form label.servers-check input { width: auto; margin: 3px 0 0; flex: none; }
.servers-form .servers-help { overflow-wrap: anywhere; }
.servers-form-actions { flex-wrap: wrap; margin-top: var(--space-lg); }
@media (max-width: 767px), (pointer: coarse) {
    .servers-form input:not([type="checkbox"]):not([type="radio"]), .servers-form-actions .btn, .servers-top .btn { min-height: var(--control-touch-height, 44px); }
    .servers-form label.servers-check { min-height: var(--control-touch-height, 44px); } /* the whole row is the tap target; the box stays by the first line */
}
@media (pointer: coarse) { .servers-row-actions .btn { min-height: 44px; } }

/* Settings > Coral Hub (cloud connector) */
.settings-cloud-code { margin: 6px 0; font-size: var(--fs-base); }
.settings-cloud-usercode { font-size: 1.6em; letter-spacing: 0.12em; margin-top: 4px; user-select: all; }
.settings-cloud-actions { display: flex; gap: 8px; margin: 6px 0; }

/* A field the server rejected (e.g. a launch directory that does not exist, #3152). */
.input-invalid,
input[aria-invalid="true"] {
    border-color: var(--error, #e05545) !important;
    box-shadow: 0 0 0 1px var(--error, #e05545);
}

/* Auto-accept (#3182): the AUTO chip (agent row and header), the menu switch's state and the warning dialog. */
.auto-accept-chip {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 4px;
    padding: 0 5px;
    border-radius: var(--radius-sm);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 16px;
    color: var(--warning);
    background: rgba(var(--warning-rgb), 0.14);
    border: 1px solid rgba(var(--warning-rgb), 0.45);
}
button.auto-accept-header-chip { cursor: pointer; font-family: inherit; margin: 0 4px 0 0; }
button.auto-accept-header-chip:hover { background: rgba(var(--warning-rgb), 0.24); }
button.auto-accept-header-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.auto-accept-menu-item .auto-accept-state { margin-left: auto; padding-left: 12px; font-size: var(--fs-sm, 11px); color: var(--text-muted); }
.auto-accept-menu-item[aria-checked="true"] .auto-accept-state { color: var(--warning); font-weight: 600; }
.auto-accept-menu-item[disabled] { opacity: 0.5; cursor: not-allowed; }

dialog.auto-accept-confirm {
    margin: auto;
    width: min(460px, calc(100vw - 32px));
    box-sizing: border-box;
    padding: 20px 22px;
    border: 1px solid rgba(var(--warning-rgb), 0.5);
    border-radius: var(--radius-ml);
    background: var(--bg-secondary);
    color: var(--text-primary);
}
dialog.auto-accept-confirm::backdrop { background: rgba(var(--black-rgb), 0.55); }
dialog.auto-accept-confirm h3 { margin: 0 0 6px; font-size: 1rem; }
.auto-accept-confirm-agent { margin: 0 0 10px; color: var(--text-secondary); font-weight: 600; }
#auto-accept-confirm-text { margin: 0 0 18px; line-height: 1.5; color: var(--text-secondary); }
#auto-accept-confirm-text p { margin: 0 0 8px; }
#auto-accept-confirm-text p:last-child { margin: 0; }
#auto-accept-confirm-text strong { color: var(--text-primary); font-weight: 600; }
.auto-accept-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.auto-accept-confirm-enable { background: var(--warning); border-color: var(--warning); color: #111; font-weight: 600; }
.auto-accept-confirm-enable:hover { filter: brightness(1.08); }
#stop-all-auto-accept[hidden] { display: none; }
.auto-accept-confirm-duration { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; color: var(--text-secondary); }
.auto-accept-confirm-duration select { background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--control-border); border-radius: var(--radius-md); padding: 4px 8px; font: inherit; }
.settings-cloud-auto-accept { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
#settings-cloud-auto-accept-row[hidden] { display: none; }
#settings-cloud-hub-operator-row[hidden], #settings-cloud-hub-operator-msg[hidden] { display: none; }
.settings-cloud-hub-operator { margin-top: 8px; }
.settings-cloud-hub-operator .settings-error { color: var(--error, var(--fx-red)); }
/* The popout's switch while auto-accept is off (#3182): an outlined, quiet header button. */
button.auto-accept-header-off { display: inline-flex; align-items: center; margin: 0 4px 0 0; padding: 0 6px; border-radius: var(--radius-sm); font: inherit; font-size: 0.6875rem; line-height: 18px; background: none; color: var(--text-secondary); border: 1px solid var(--control-border); cursor: pointer; }
button.auto-accept-header-off:hover { color: var(--text-primary); border-color: rgba(var(--warning-rgb), 0.6); }
button.auto-accept-header-off:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* An agent whose terminal is gone (#3218): on its row and in the header; a click restarts it. */
.terminal-gone-chip {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 4px;
    padding: 0 5px;
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 16px;
    color: var(--error);
    background: rgba(var(--error-rgb), 0.12);
    border: 1px solid rgba(var(--error-rgb), 0.45);
    cursor: pointer;
}
.terminal-gone-chip:hover { background: rgba(var(--error-rgb), 0.22); }
.terminal-gone-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
button.terminal-gone-header { margin: 0 4px 0 0; font-size: 0.6875rem; line-height: 20px; padding: 0 8px; }

/* Machine health (#3446): a status dot and a compact card. The dot is the only coloured part;
   every value is text in the normal text colours (contrast as in the accessibility pass). */
.machine-health-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 auto;
    vertical-align: middle;
    background: transparent;
    border: 1.5px solid var(--text-muted);
}
.machine-health-dot.machine-health-ok { background: var(--success); border-color: var(--success); }
.machine-health-dot.machine-health-busy { background: var(--warning); border-color: var(--warning); }
.machine-health-dot.machine-health-stalled { background: var(--error); border-color: var(--error); }
.machine-health-card {
    margin: 6px 0;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
}
.machine-health-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.machine-health-title {
    margin: 0;
    font-size: var(--fs-sm, 12px);
    font-weight: 600;
    color: var(--text-primary);
}
.machine-health-status {
    font-size: var(--fs-sm, 12px);
    color: var(--text-secondary);
}
.machine-health-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 2px 12px;
    margin: 6px 0 0;
    font-size: var(--fs-sm, 12px);
}
.machine-health-grid dt { color: var(--text-secondary); }
.machine-health-grid dd { margin: 0; color: var(--text-primary); overflow-wrap: anywhere; }
.machine-health-note {
    margin: 6px 0 0;
    font-size: var(--fs-sm, 12px);
    color: var(--text-secondary);
}
.cs-title .machine-health-dot { margin-left: 6px; }

/* ── Artifact viewer (#3540): a board, chat or team artifact opens here ── */
.artifact-viewer[hidden] { display: none; }
.artifact-viewer-content {
    width: min(900px, 94vw);
    max-height: 88vh;
    padding: 0;
    overflow: hidden;
}
.artifact-viewer-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border);
}
.artifact-viewer-title {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: var(--fs-lg, 16px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.artifact-viewer-body {
    overflow: auto;
    padding: var(--space-lg);
    min-height: 120px;
}
.artifact-viewer-text { white-space: pre-wrap; }
.board-artifact-image { cursor: zoom-in; }
/* The Subscribers button and sheet: only at phone width, where the column is hidden (#3610). */
.mb-subscribers-btn { display: none; }
.mb-subscribers-sheet { align-items: flex-end; }
.mb-subscribers-sheet-content {
    width: 100%;
    max-width: 100%;
    max-height: 70vh;
    padding: var(--space-xl);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-sizing: border-box;
}
.mb-subscribers-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    margin-bottom: var(--space-md);
}
.mb-subscribers-sheet-header .mb-subscribers-title { margin: 0; }
.mb-subscribers-sheet .mb-subscribers-list { overflow-y: auto; min-height: 0; }

/* An image in a post fits its column; it never makes the feed scroll sideways (#3607). */
.mb-message-body img { max-width: 100%; height: auto; }

/* Settings > Terminal backend (#3634) */
.tb-row { grid-column: 1 / -1; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-lg) 24px; margin: var(--space-xs) 0 var(--space-md); background: var(--bg-primary); }
.tb-head { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-xs); }
.tb-label { font-weight: 600; color: var(--text-primary); font-size: var(--fs-md); }
.tb-now { margin-left: auto; font-size: var(--fs-sm); padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-secondary); background: var(--bg-tertiary); }
.tb-now b { color: var(--text-primary); }
.tb-sub { font-size: var(--fs-base); color: var(--text-muted); margin: 0 0 var(--space-md); }
#settings-modal label.tb-opt { display: flex; flex-direction: row; gap: var(--space-md); align-items: flex-start; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-md) var(--space-lg); margin-bottom: var(--space-md); cursor: pointer; }
#settings-modal label.tb-opt:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
#settings-modal .tb-opt input { flex: none; width: 16px; height: 16px; min-height: 0; margin: 3px 0 0; }
.tb-opt > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tb-t { font-weight: 600; font-size: var(--fs-md); color: var(--text-primary); }
.tb-default { font-weight: 400; color: var(--text-muted); }
.tb-d { font-size: var(--fs-base); color: var(--text-secondary); line-height: 1.45; }
.tb-note { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.45; margin: var(--space-xs) 0 0; }
.tb-pending { font-size: var(--fs-base); color: var(--warning); margin: var(--space-sm) 0 0; }
.tb-fixed { font-size: var(--fs-base); color: var(--text-secondary); line-height: 1.45; margin: 0; }
.leftover-tmux-banner { display: flex; align-items: center; gap: var(--space-lg); margin: var(--space-md) var(--space-xl) 0; padding: var(--space-md) var(--space-lg); border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb, var(--warning) 50%, var(--border)); background: color-mix(in srgb, var(--warning) 12%, var(--bg-secondary)); color: var(--text-primary); font-size: var(--fs-md); }
.leftover-tmux-banner[hidden] { display: none; }
.leftover-tmux-banner .material-icons { color: var(--warning); }
.leftover-tmux-text { flex: 1; min-width: 0; }
.local-auth-banner { flex: none; display: flex; align-items: flex-start; gap: 12px; padding: 10px 16px; background: color-mix(in srgb, var(--error) 16%, var(--bg-secondary)); border-bottom: 1px solid var(--error); color: var(--text-primary); font-size: var(--fs-base, 13px); } /* #4291 */
.local-auth-banner[hidden] { display: none; }
.local-auth-banner .material-icons { flex: none; color: var(--error); font-size: 1.25rem; }
.local-auth-banner-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 767px) { .leftover-tmux-banner { flex-wrap: wrap; } }
/* Agents on an older hook set (#3665). One line (the count and three buttons); the list opens below it, bounded
   in height and scrollable, grouped by team (#3729). */
/* The banners sit at the top of the main area, above whichever view is showing (#3729). */
.main-content > .leftover-tmux-banner { flex: none; order: -1; }
/* One calm line while Claude is not signed in (#5478): quiet type, no box, no warning colour */
.signin-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); margin: var(--space-sm) var(--space-xl) 0; font-size: var(--fs-base); color: var(--text-secondary); }
.signin-line[hidden] { display: none; }
.main-content > .signin-line { flex: none; order: -1; }
.signin-line-btn { display: inline-flex; align-items: center; gap: var(--space-sm); padding: 2px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: help; }
.signin-line-btn .material-icons { font-size: 1rem; }
.signin-line-hint[hidden] { display: none; }
.hooks-banner { flex-direction: column; align-items: stretch; gap: var(--space-sm); }
.hooks-bar { display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; }
.hooks-bar .leftover-tmux-text { flex: 1 1 12rem; }
.hooks-panel { display: flex; flex-direction: column; gap: var(--space-sm); }
.hooks-panel[hidden] { display: none; }
.hooks-detail { margin: 0; color: var(--text-secondary); font-size: var(--fs-sm, 13px); }
.hooks-list { display: flex; flex-direction: column; gap: var(--space-sm); max-height: min(40vh, 320px); overflow-y: auto; padding-right: var(--space-xs, 4px); }
.hooks-team { margin: 0; }
.hooks-team h4 { margin: 0 0 var(--space-xs, 4px); font-size: var(--fs-sm, 13px); font-weight: 600; color: var(--text-secondary); }
.hooks-team ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-xs, 4px); }
.hooks-team li { display: grid; grid-template-columns: minmax(8rem, 1fr) auto auto; align-items: center; column-gap: var(--space-md); font-size: var(--fs-sm, 13px); }
.hooks-team .hooks-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hooks-team .hooks-state { color: var(--text-secondary); text-align: right; }
@media (max-width: 767px) {
    /* name over state, the button to the right of both */
    .hooks-team li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; padding: 2px 0; }
    .hooks-team .hooks-state { grid-column: 1; grid-row: 2; text-align: left; }
    .hooks-team li .btn { grid-column: 2; grid-row: 1 / span 2; }
}

/* Auto-wake on pty (#3636) */
.tb-autowake { border-top: 1px solid var(--border); margin-top: var(--space-md); padding-top: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); }
#settings-modal .tb-autowake label { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--fs-base); color: var(--text-primary); }
#settings-modal .tb-autowake input[type="checkbox"] { flex: none; width: 16px; height: 16px; min-height: 0; margin: 0; }
#settings-modal .tb-autowake input[type="number"] { width: 4.5em; min-height: 0; padding: 2px 6px; }

/* "Coral now requires sign-in" (#3939): the modal shown when the page has no sign-in session */
dialog.signed-out-panel { margin: auto; /* the base reset's margin:0 would pin it top-left */ width: min(460px, calc(100vw - 32px)); box-sizing: border-box; padding: 22px 24px; border: 1px solid var(--border); border-radius: var(--radius-ml); background: var(--bg-secondary); color: var(--text-primary); }
dialog.signed-out-panel::backdrop { background: rgba(var(--black-rgb), .6); }
dialog.signed-out-panel h2 { margin: 0 0 10px; font-size: var(--fs-lg, 17px); }
dialog.signed-out-panel p { margin: 0 0 12px; color: var(--text-secondary); font-size: var(--fs-sm, 13px); line-height: 1.5; }
dialog.signed-out-panel code { background: var(--bg-tertiary); padding: 1px 6px; border-radius: var(--radius-sm); color: var(--text-primary); }
.signed-out-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 8px; }
.signed-out-actions .btn { text-decoration: none; }
.signed-out-status { min-height: 1.2em; margin: 0; }

/* ── Browser password (#3948): the set-password prompt and Settings > Browser sign-in ─────────────────────────── */
.pw-lead { margin: 8px 0 14px; line-height: 1.5; color: var(--text-secondary); font-size: 0.875rem; }
.pw-field { display: block; margin: 0 0 12px; font-size: 0.8125rem; }
.pw-label { display: block; margin-bottom: 5px; font-weight: 500; color: var(--text-primary); }
.pw-input-row { display: block; position: relative; }
.pw-input { width: 100%; box-sizing: border-box; padding: 9px 64px 9px 11px; font-size: 0.875rem; border-radius: var(--radius-lg);
    border: 1px solid var(--control-border); background: var(--bg-primary); color: var(--text-primary); }
.pw-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
[data-theme="light"] .pw-toggle { color: var(--accent-dim); }   /* AA on the light card (#4023) */
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--accent);
    font-size: 0.8125rem; cursor: pointer; padding: 6px 8px; }
.pw-meter { height: 6px; border-radius: var(--radius-xs); background: var(--bg-tertiary); overflow: hidden; margin: 2px 0 4px; }
.pw-meter > i { display: block; height: 100%; width: 0; border-radius: var(--radius-xs); background: #d4a72c; transition: width .15s; }
.pw-strength[data-level="strong"] .pw-meter > i { background: var(--fx-green); }
.pw-strength[data-level="weak"] .pw-meter > i { background: var(--fx-red); }
.pw-hint { font-size: 0.75rem; color: var(--text-secondary); margin: 0 0 12px; min-height: 1.3em; line-height: 1.45; }
.pw-hint b { color: var(--text-primary); font-weight: 600; }
.pw-error { color: var(--fx-red); font-size: 0.8125rem; margin: 0 0 10px; }
.pw-note { font-size: 0.75rem; color: var(--text-secondary); margin: 8px 0 0; line-height: 1.5; }
.sec-row details { margin: 10px 0; }
.sec-row summary { cursor: pointer; font-weight: 600; font-size: 0.8125rem; margin-bottom: 10px; }
.sec-sessions { border-top: 1px solid var(--border); margin-top: 14px; padding-top: 12px; }
.sec-sub-head { font-weight: 600; font-size: 0.8125rem; margin-bottom: 6px; }
.sec-count { color: var(--text-secondary); font-weight: 400; }
.sec-list { list-style: none; margin: 0 0 10px; padding: 0; font-size: 0.8125rem; }
.sec-item { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.sec-who { overflow-wrap: anywhere; }
.sec-when { color: var(--text-secondary); text-align: right; flex: none; }
.sec-failed .sec-who { color: var(--fx-red); }
@media (max-width: 480px) { .sec-item { flex-direction: column; gap: 0; } .sec-when { text-align: left; } }
.sec-gap { margin-top: 14px; }
.sec-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 767px), (pointer: coarse) { .sec-actions .btn { min-height: var(--control-touch-height, 44px); } }
.sec-muted { color: var(--text-secondary); font-weight: 400; }
#settings-modal .sec-switch { display: flex; flex-direction: row; gap: 10px; align-items: flex-start; font-size: 0.8125rem; margin: 6px 0; cursor: pointer; }
#settings-modal .sec-switch input[type="checkbox"] { width: 16px; height: 16px; flex: none; margin: 2px 0 0; padding: 0; }
.sec-warn { display: flex; gap: 8px; align-items: flex-start; background: rgba(212, 167, 44, .13); border: 1px solid rgba(212, 167, 44, .55); border-radius: var(--radius-lg); padding: 10px 12px; font-size: 0.7812rem; line-height: 1.5; margin: 8px 0; }
.sec-add { display: flex; gap: 8px; align-items: center; }
.sec-add .btn { margin: 0; }
#settings-modal .sec-sessions .btn { margin: 0; }   /* .btn-small's 20 px side margin pushed these buttons off their row */

/* A Settings checkbox is wrapped in its own label, which is the tap target: 44 px square on a phone or a touch screen (the box is 13 px; the label for= sits in the
   other column of the row), and unchanged on a mouse (#4252). */
.check-hit { display: inline-flex; align-items: center; justify-content: flex-start; vertical-align: middle; } /* the box stays at the left of its column */
/* (the hub switch's box was as wide as the generic input rule makes it; a checkbox is its own size) */
.settings-hub-mode-toggle > input[type="checkbox"] { width: auto; flex: none; margin: 0; }
@media (max-width: 767px), (pointer: coarse) {
    .check-hit { min-width: var(--control-touch-height, 44px); min-height: var(--control-touch-height, 44px); }
    /* A switch row whose label holds its own text is a target the height of a touch control. */
    .settings-hub-mode-toggle { display: flex; align-items: center; gap: var(--space-sm, 8px); min-height: var(--control-touch-height, 44px); }
}

/* The Model picker of the launch and restart forms (#4066): a list with the free-text box behind "Other…". */
.acf-model-picker[hidden], .acf-model-picker [hidden] { display: none; }
.acf-model-picker { display: block; margin-top: var(--space-xs); }
.acf-model-row { display: flex; gap: var(--space-sm); align-items: center; }
.acf-model-select { flex: 1; min-width: 0; }
.acf-model-refresh {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0;
    border: 1px solid var(--control-border); border-radius: var(--radius-md);
    background: none; color: var(--text-secondary); cursor: pointer;
}
.acf-model-refresh .material-icons { font-size: 1rem; }
.acf-model-refresh:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-primary); }
.acf-model-refresh:disabled { opacity: .5; cursor: progress; }
.acf-model-id { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: var(--fs-sm, 11px); font-weight: 400; color: var(--text-muted); overflow-wrap: anywhere; }
.acf-model-id:empty { display: none; }
.acf-model-note { display: block; margin-top: 2px; font-size: var(--fs-sm, 11px); font-weight: 400; color: var(--text-secondary); }
.acf-model-note:empty { display: none; }
.acf-thinking-note, .acf-thinking-ran { display: block; margin-top: 2px; font-size: var(--fs-sm, 11px); font-weight: 400; color: var(--text-secondary); }
.acf-thinking-note:empty, .acf-thinking-ran:empty { display: none; }
.acf-model-picker:not([hidden]) + .acf-model:not([hidden]) { margin-top: var(--space-sm); }
@media (pointer: coarse), (max-width: 767px) { .acf-model-refresh { width: var(--control-touch-height, 44px); height: var(--control-touch-height, 44px); } }


/* Saved for later (#4510): the right sidebar's Saved tab, its list, the top bar's button with its count, and the jump. Theme tokens only. */
.saved-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.saved-pane { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; container-type: inline-size; }
/* The dashboard's own Inbox (#4811), on every Coral but the hub's frame: Needs you, then Saved for later (the one Saved list, moved in by saved.js). The page scrolls as one. */
.inbox-local { box-sizing: border-box; width: 100%; max-width: 880px; margin: 0 auto; align-self: flex-start; padding: var(--space-lg, 16px); display: flex; flex-direction: column; gap: var(--space-xl, 24px); }
.inbox-local[hidden] { display: none; }
.inbox-local { gap: var(--space-md, 12px); }
.inbox-head { margin: 0; }
.inbox-title { margin: 0 0 4px; font-size: 1.5rem; font-weight: 600; color: var(--text-primary); }
.inbox-sub { margin: 0; color: var(--text-secondary); font-size: 0.875rem; }
.inbox-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); }
.inbox-tab { background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--text-secondary); font: inherit; font-size: 0.9375rem; font-weight: 600; padding: 10px 14px; min-height: 44px; cursor: pointer; }
.inbox-tab:hover { color: var(--text-primary); }
.inbox-tab[aria-selected="true"] { color: var(--text-primary); border-bottom-color: var(--accent); }
.inbox-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius-sm); }
.inbox-panel[hidden] { display: none; }
.inbox-needs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.inbox-needs-item { width: 100%; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; text-align: left; font: inherit; font-size: 0.875rem; color: var(--text-primary); background: var(--bg-secondary); border: 1px solid var(--control-border); border-left: 3px solid var(--warning); border-radius: var(--radius-ml); padding: 10px 12px; min-height: 44px; cursor: pointer; }
.inbox-needs-item:hover { background: var(--bg-tertiary); }
.inbox-needs-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.inbox-needs-name { font-weight: 700; overflow-wrap: anywhere; }
.inbox-needs-why { color: var(--warning); font-size: 0.8125rem; }
.inbox-needs-team { color: var(--text-muted); font-size: 0.8125rem; margin-left: auto; }
.inbox-needs-empty { margin: 0; color: var(--text-secondary); font-size: 0.875rem; }
.inbox-needs-empty[hidden] { display: none; }
/* Saved inside the Inbox flows with the page: no scroll of its own, no sidebar X, a title like Needs you's. */
.saved-view > .saved-pane { display: block; }
.saved-view .saved-panel { overflow: visible; }
.saved-view .saved-close { display: none; } /* the page is left by another tab (or Escape): no sidebar to shut */
.saved-view .saved-scope { font-size: 1.125rem; padding-left: 0; padding-right: 0; }
.saved-view .saved-tabs { padding-left: 0; padding-right: 0; }
.saved-view .saved-list { padding-left: 0; padding-right: 0; }
/* The right sidebar has a Saved tab only where the list is of an agent or a team: never an everything list there (#4811). A page with no other tab loses the sidebar. */
body[data-saved-scope="all"] #agentic-state #agentic-tab-saved { display: none !important; } /* an id more than the page kinds' own tab rules above */
body[data-saved-scope="all"] #agentic-state[data-page="other"], body[data-saved-scope="all"] #agentic-state[data-page="chats"] { display: none !important; }
body[data-saved-scope="all"][data-dock-page="other"] #panel-toggle-btn, body[data-saved-scope="all"][data-dock-page="chats"] #panel-toggle-btn { display: none !important; }
/* Which scope the list shows (#4792): "Saved: QA Engineer", "Saved: coral-go-team" or "Saved: all". */
.saved-scope { margin: 0; padding: 10px 12px 2px; font-size: 0.8125rem; font-weight: 600; color: var(--text-primary); flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-tabs { display: flex; gap: 4px; padding: 0 12px; border-bottom: 1px solid var(--border); flex: none; align-items: center; }
/* A visible way to shut the sidebar the Saved button opened (#4742): the dock's own edge chevron is easy to miss. A phone's overlay has its own close. */
.saved-close { margin-left: auto; background: none; border: none; color: var(--text-secondary); cursor: pointer; border-radius: var(--radius-sm); width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.saved-close:hover { color: var(--text-primary); background: var(--bg-tertiary); }
.saved-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.saved-close .material-icons { font-size: 1.125rem; }
@media (max-width: 767px) { .saved-close { display: none; } }
@media (pointer: coarse) { .saved-close { width: 44px; height: 44px; } } /* a touch tablet wider than a phone: a 44px target */
.saved-tab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-secondary); font: inherit; font-size: 0.8125rem; font-weight: 600; padding: 8px 10px; cursor: pointer; min-height: 36px; }
.saved-tab[aria-selected="true"] { color: var(--text-primary); border-bottom-color: var(--accent); }
.saved-tab .n { color: var(--text-muted); font-weight: 500; margin-left: 4px; }
.saved-panel { overflow-y: auto; min-height: 0; flex: 1; }
.saved-panel:focus { outline: none; }
.saved-list { list-style: none; margin: 0; padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.saved-item { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-ml); padding: 10px 12px; }
.saved-item .top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.saved-item .top .material-icons { font-size: 1rem; color: var(--text-muted); flex: none; }
.saved-item .src { font-size: 0.8125rem; font-weight: 700; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.saved-item .kind { font-size: 0.6875rem; color: var(--text-secondary); border: 1px solid var(--border); border-radius: 9px; padding: 0 7px; line-height: 17px; flex: none; }
.saved-item .kind.gone { color: var(--warning); border-color: var(--warning); }
.saved-item .server { font-size: 0.6875rem; color: var(--text-muted); line-height: 17px; flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: auto; }
/* In a narrow panel (a phone's overlay, a narrowed sidebar, large text) the name and the server wrap under the title instead of being cut (UX, #4551). */
@container (max-width: 480px) {
    .saved-item .top { flex-wrap: wrap; row-gap: 0.5rem; } /* rem, so it grows with the text: at 200% a fixed gap let the wrapped server name touch the chip */
    .saved-item .kind, .saved-item .server { line-height: 1.4; }
    .saved-item .src { white-space: normal; overflow-wrap: anywhere; flex: 1 1 8em; }
    .saved-item .server { flex: 1 0 100%; max-width: 100%; margin-left: 0; white-space: normal; overflow-wrap: anywhere; }
}
/* A registered server that did not answer (hub mode): one line, not an error (#4551). */
.saved-note { font-size: 0.75rem; color: var(--warning); border: 1px solid var(--warning); border-radius: var(--radius-md); padding: 6px 10px; }
.saved-item .snip { margin: 6px 0 4px; font-size: 0.8125rem; line-height: 1.45; color: var(--text-primary); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.saved-item .meta { font-size: 0.71875rem; color: var(--text-muted); display: flex; gap: 6px; flex-wrap: wrap; }
.saved-item .acts { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.saved-item .acts .btn { margin: 0; padding: 3px 10px; min-height: 28px; font-size: 0.78125rem; display: inline-flex; align-items: center; gap: 4px; }
.saved-item .acts .btn .material-icons { font-size: 0.9375rem; }
.saved-item.gone { opacity: 0.92; border-style: dashed; }
.saved-item.gone .snip, .saved-item.done .snip { color: var(--text-secondary); }
.saved-item .why { font-size: 0.75rem; color: var(--warning); margin: 2px 0 0; display: flex; gap: 5px; align-items: flex-start; }
.saved-item .why[hidden] { display: none; }
.saved-item .why .material-icons { font-size: 0.9375rem; }
.saved-empty { padding: 26px 16px; text-align: center; color: var(--text-secondary); font-size: 0.8125rem; }
.saved-status { min-height: 1.25em; color: var(--text-secondary); font-size: 0.8125rem; padding: 0 12px 8px; flex: none; }
@media (pointer: coarse) {
    .saved-item .acts .btn, .saved-tab { min-height: 44px; min-width: 44px; }
    .saved-item .acts .btn { padding: 8px 14px; font-size: 0.875rem; }
    .saved-item .acts { gap: 8px; }
    .saved-item .snip, .saved-item .src { font-size: 0.9375rem; }
    .saved-tab { font-size: 0.875rem; }
}
/* The top bar's Saved button: a bookmark with the number open. */
.saved-top-btn { position: relative; }
.saved-top-btn.on { color: var(--accent); }
.saved-top-btn .saved-count { position: absolute; top: -2px; right: -3px; min-width: 14px; padding: 0 4px; border-radius: var(--radius-lg); background: var(--accent-dim); color: var(--text-on-accent, #fff); font-size: 0.625rem; font-weight: 700; line-height: 14px; text-align: center; }
.saved-top-btn .saved-count[hidden] { display: none; }
/* The jump: a slim bar above the conversation, and the "Saved" tag on the message. */
.jumpbar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--bg-tertiary); border-bottom: 1px solid var(--border); font-size: 0.78125rem; color: var(--text-secondary); flex: none; }
.jumpbar .btn { margin: 0; padding: 2px 10px; min-height: 26px; font-size: 0.75rem; }
.jumpbar span { flex: 1; }
@media (pointer: coarse) { .jumpbar .btn { min-height: 44px; min-width: 44px; } }
.saved-jump { position: relative; }
.saved-jump::before { content: "Saved"; position: absolute; left: 0; top: -22px; background: var(--accent-dim); color: var(--text-on-accent, #fff); font-size: 0.625rem; font-weight: 700; border-radius: var(--radius-lg); padding: 0 7px; line-height: 16px; pointer-events: none; }
.saved-menu-item { display: none; }
.saved-menu-item .saved-count { margin-left: 6px; min-width: 14px; padding: 0 5px; border-radius: var(--radius-lg); background: var(--accent-dim); color: var(--text-on-accent, #fff); font-size: 0.6875rem; font-weight: 700; line-height: 16px; text-align: center; }
.saved-menu-item .saved-count[hidden] { display: none; }
/* Large text on a phone: the settings menu has Saved, the top bar does not (see saved_marks.js). */
.saved-in-menu #saved-btn { display: none; }
.saved-in-menu .saved-menu-item { display: flex; }

/* The install help where an agent CLI is missing (#4569): the vendor's page as a link in the theme's link colour, and a quiet note. */
.acf-cli-warning .cli-install-link, .acf-cli-warning .cli-install-note { margin: 6px 0 0; }
.acf-cli-warning .cli-install-link a { display: block; color: var(--accent); overflow-wrap: anywhere; }
.acf-cli-warning .cli-install-note { color: var(--text-secondary); font-size: 0.75rem; line-height: 1.5; }
/* ── Settings: a wide dialog with its groups down the left (#4566) ──────────────────────────────────────────────────────────
   The dialog is 65rem wide (92vw at most). Under 60rem of its own width (a phone, a small window, or large text) the group list is a
   selector at the top and the rows stack; the sizes are rem, so large text takes the narrow layout by itself. Every explanation sits
   behind an (i) button (settings_nav.js). */
.settings-modal-content { width: min(65rem, 92vw); max-width: none; height: min(46rem, 90vh); container: settings / inline-size; }
.modal-content:has(.settings-shell) .settings-modal-body { padding: 0; flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: row; gap: 0; }
.settings-shell { display: flex; flex: 1; min-width: 0; min-height: 0; }
.settings-nav { width: 13.5rem; flex: none; border-right: 1px solid var(--border); padding: .6rem; overflow-y: auto; background: var(--bg-tertiary); }
.settings-nav .settings-group-pick { display: none; }
.info-grid.settings-grid .settings-row > dt, .settings-row > dt label { font-size: .875rem; font-weight: 600; }
.settings-row .settings-controls-row select, .settings-row .settings-controls-row input { width: auto; }
.settings-row .settings-controls-row .settings-inline input { width: 4.5em; }
.settings-tabs { display: flex; flex-direction: column; gap: 2px; }
.settings-tab { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left; background: none; border: 0; border-radius: var(--radius-md); color: var(--text-secondary); font: inherit; font-size: .875rem; padding: .5rem .7rem; min-height: 2.25rem; cursor: pointer; }
.settings-tab:hover { background: var(--bg-hover); color: var(--text-primary); }
.settings-tab[aria-selected="true"] { background: var(--bg-hover); color: var(--text-primary); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
.settings-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.settings-tab[hidden] { display: none; }
.settings-tab .material-icons { font-size: 1.125rem; flex: none; }
.settings-panes { flex: 1; min-width: 0; overflow: auto; padding: 1.1rem 1.6rem 1.5rem; container: settingspane / inline-size; }
.settings-pane[hidden] { display: none; }
.settings-pane:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius-md); }
.settings-pane-title { margin: 0 0 .15rem; font-size: 1.0625rem; }
.settings-pane-sub { margin: 0 0 .8rem; color: var(--text-secondary); font-size: .8125rem; }
.settings-modal-body .settings-grid { display: block; }
.settings-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, 22rem); gap: .4rem 1.5rem; align-items: start; padding: .7rem 0; border-top: 1px solid var(--border); }
.settings-row[hidden] { display: none; }
.settings-row-wide { grid-template-columns: minmax(0, 1fr); }
.info-grid.settings-grid .settings-row > dt, .info-grid.settings-grid .settings-row > dt.toggle-dt { display: flex; align-self: start; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .1rem .4rem; padding-top: .35rem; min-width: 0; color: var(--text-primary); }
.settings-row > dt label { cursor: default; color: var(--text-primary); }
.settings-row > dd { min-width: 0; margin: 0; }
.settings-row > dd:has(> .check-hit) { align-items: flex-end; }
.settings-row > dd:has(> .check-hit) .settings-hint { align-self: stretch; text-align: right; }
.settings-info-btn { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; padding: 0; flex: none; border: 1px solid var(--control-border); border-radius: 50%; background: none; color: var(--text-secondary); cursor: pointer; }
.settings-info-btn .material-icons { font-size: 1rem; }
.settings-info-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.settings-info-btn[aria-expanded="true"] { background: var(--accent-dim); border-color: var(--accent-dim); color: var(--text-on-accent); }
.settings-info-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.settings-info-text { grid-column: 1 / -1; background: var(--bg-elevated, var(--bg-tertiary)); border: 1px solid var(--border); border-radius: var(--radius-md); padding: .6rem .8rem; color: var(--text-secondary); font-size: .8125rem; line-height: 1.5; max-width: 46rem; }
.settings-info-text[hidden] { display: none; }
.settings-info-text > * + * { margin-top: .4rem; }
.settings-pane > .settings-theme-btn, .settings-pane > .settings-prompts-btn { margin-top: 1rem; }
/* The on/off boxes are switches; they stay native checkboxes (the keyboard, the screen reader and the touch target are unchanged). */
#settings-modal .settings-row .check-hit input[type="checkbox"],
#settings-modal .settings-hub-mode-toggle > input[type="checkbox"] { appearance: none; -webkit-appearance: none; position: relative; width: 2.5rem; height: 1.4rem; margin: 0; flex: none; border-radius: 1rem; border: 1px solid var(--control-border); background: var(--bg-hover); cursor: pointer; }
#settings-modal .settings-row .check-hit input[type="checkbox"]::before,
#settings-modal .settings-hub-mode-toggle > input[type="checkbox"]::before { content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.4rem - 8px); height: calc(1.4rem - 8px); border-radius: 50%; background: var(--text-secondary); transition: transform .12s; }
#settings-modal .settings-row .check-hit input[type="checkbox"]:checked,
#settings-modal .settings-hub-mode-toggle > input[type="checkbox"]:checked { background: var(--accent-dim); border-color: var(--accent-dim); }
#settings-modal .settings-row .check-hit input[type="checkbox"]:checked::before,
#settings-modal .settings-hub-mode-toggle > input[type="checkbox"]:checked::before { background: #fff; transform: translateX(1.1rem); }
#settings-modal .settings-row .check-hit input[type="checkbox"]:focus-visible,
#settings-modal .settings-hub-mode-toggle > input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#settings-modal .settings-row .check-hit input[type="checkbox"]:disabled,
#settings-modal .settings-hub-mode-toggle > input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { #settings-modal .settings-row .check-hit input[type="checkbox"]::before { transition: none; } }
@container settingspane (max-width: 40rem) {
    .settings-row { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
    .settings-row:has(> dd > .check-hit) { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
    .settings-row:has(> dd > .check-hit) > dd { display: contents; } /* the toggle takes the second column and the hint spans the row: while the hint sat inside the cell, a long one squeezed the label to 46 px (#5057) */
    .settings-row:has(> dd > .check-hit) .settings-hint { grid-column: 1 / -1; text-align: left; }
    .settings-row:has(> dd > .check-hit) .check-hit { display: inline-flex; align-items: center; justify-content: flex-start; align-self: center; margin: .35rem 0 0; } /* level with the (i): the box was at the top of its 44 px area (the cell is a label: its generic 12 px bottom margin was part of the box that got centred, and the visible box sat at its top, about 17 px above the (i)'s centre); the top margin matches the label's first padding (.35rem) that the (i) is centred below (#5109) */
}
/* The sectioned dialogs (#4950: Restart, New Agent, Agent Team, the team's agent dialog) are the Settings shell in a smaller dialog: the same list, panes, heading and footer. They switch to the selector at the top
   under 40rem of their own width (Settings does at 60rem, as it is wider). One more thing the shell has here: a sub-line in the header, and a dot on a section that holds a problem. */
.sd-modal-content { container: sd / inline-size; width: min(56rem, 94vw); max-width: none; height: min(36rem, 92vh); } /* (not .settings-modal-content: the Settings dialog is the one element with that class, and code and tests find it by it) */
.modal-header .sd-sub { margin: .15rem 0 0; color: var(--text-secondary); font-size: .8125rem; font-weight: 400; }
.sd-modal-content .modal-footer { flex: none; }
/* In the launch dialog the sectioned steps sit inside the dialog's own box: it has no padding then, the step's header and footer are full width, the fixed footer is always in view. */
.modal-content.sd-modal-content:has(.launch-modal-step) { padding: 0; overflow: hidden; }
.sd-modal-content > .launch-access-note, .sd-modal-content > .launch-server-row { margin: 0; padding: 12px 24px 0; }
.sd-modal-content .launch-modal-step { overflow: hidden; }
.sd-step-header { flex: none; padding: 24px 24px 12px; border-bottom: 1px solid var(--border); }
.sd-step-header h3 { margin: 0; }
.sd-step-header .sd-sub { margin: .15rem 0 0; color: var(--text-secondary); font-size: .8125rem; }
.sd-modal-content .launch-modal-step > .modal-actions { position: static; flex: none; margin: 0; padding: 16px 24px; border-top: 1px solid var(--border); background: none; }
.sd-acf { display: contents; }
/* The back arrow in a sectioned launch step's header: room between it and the title, so its focus ring does not touch the words (#4976). */
.sd-step-header .launch-back-btn { margin-right: .5rem; border-radius: var(--radius-md); }
.sd-step-header .launch-back-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
/* On a phone a team member's card keeps its name and prompt on the first line and its four buttons (move up, move down, edit, remove) on a second line of 44 px targets, instead of four 16-24 px icons squeezed beside the text (#4976). Tapping the card itself still opens the agent. */
@media (max-width: 767px), (pointer: coarse) {
    .team-agent-summary { flex-wrap: wrap; }
    .team-agent-summary-actions { flex: 1 0 100%; justify-content: flex-end; gap: 4px; }
    .team-agent-summary-actions > button { display: inline-flex; align-items: center; justify-content: center; min-width: var(--control-touch-height, 44px); min-height: var(--control-touch-height, 44px); }
}
.sd-modal-content .agent-persona-actions .btn-subtle { color: var(--text-primary); } /* 4.5:1 on the light panel (the accent blue was 4.44) */
.sd-extra:empty { display: none; }
.settings-tab .sd-dot { margin-left: auto; width: .5rem; height: .5rem; flex: none; border-radius: 50%; background: var(--danger, #f85149); }
.settings-tab .sd-dot[hidden] { display: none; }
.sd-modal-content .settings-pane label { display: block; margin-bottom: .9rem; }
.sd-modal-content .settings-pane :is(input[type="text"], select, textarea) { max-width: 38rem; width: 100%; box-sizing: border-box; }
.sd-modal-content .settings-pane textarea.acf-prompt { max-width: none; min-height: 16rem; resize: vertical; font-family: var(--font-mono, monospace); font-size: .8125rem; }
@container sd (max-width: 40rem) {
    .sd-modal-content .settings-nav { width: auto; flex: none; border-right: 0; border-bottom: 1px solid var(--border); padding: .6rem 1rem; overflow: visible; }
    .sd-modal-content .settings-shell { flex-direction: column; }
    .sd-modal-content .settings-tabs { display: none; }
    .sd-modal-content .settings-nav .settings-group-pick { display: block; }
    .sd-modal-content .settings-group-pick select { width: 100%; max-width: none; min-height: 44px; }
    .sd-modal-content .settings-panes { padding: .8rem 1rem 1.2rem; }
    .sd-modal-content .settings-pane :is(select, input[type="text"], textarea, .btn, .perm-chip) { min-height: 44px; }
    .sd-modal-content .modal-footer .btn { min-height: 44px; }
    .sd-modal-content .modal-header .sd-sub, .sd-step-header .sd-sub { display: none; }
    .sd-step-header { padding: 16px 16px 10px; }
    .sd-modal-content .launch-modal-step > .modal-actions { padding: 12px 16px; }
    .sd-modal-content .launch-modal-step > .modal-actions .btn { min-height: 44px; }
}
@container settings (max-width: 60rem) {
    .settings-nav { width: auto; flex: none; border-right: 0; border-bottom: 1px solid var(--border); padding: .6rem 1rem; overflow: visible; }
    .settings-shell { flex-direction: column; }
    .settings-tabs { display: none; }
    .settings-nav .settings-group-pick { display: block; }
    .settings-group-pick select { width: 100%; min-height: 44px; }
    .settings-panes { padding: .8rem 1rem 1.2rem; }
    .settings-info-btn { width: 44px; height: 44px; border-radius: var(--radius-md); }
    .settings-row > dt > label { flex: 1 1 0; min-width: 0; } /* the label wraps so its (i) button stays beside it, not on a row of its own (#5057) */
    .settings-modal-body select, .settings-modal-body input[type="text"], .settings-modal-body input[type="number"], .settings-modal-body input[type="password"], .settings-modal-body .btn { min-height: 44px; }
}

/* The board's search (#4771): the bar under the header, First and Latest beside Filters, the results line, and the matches marked in the messages. The marks are dark text on a yellow that
   passes 4.5:1 in both themes (checked by board_search_browser). */
.mb-tools { flex: none; padding: 0 var(--space-md, 12px); }
.mb-tools:empty { display: none; }
.mb-tools .list-bar-bar { padding-left: 0; padding-right: 0; }
.mb-search-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mb-search-status[hidden] { display: none; }
.mb-search-results { margin-right: auto; font-size: 0.8125rem; font-weight: 600; color: var(--text-primary); }
.mb-search-step { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; padding: 2px 6px; }
.mb-search-step:disabled { opacity: 0.45; cursor: default; }
.mb-hit { background: #ffd33d; color: #1f2328; border-radius: 2px; padding: 0 1px; }
.mb-message-current .mb-hit { background: #ff9f1a; box-shadow: 0 0 0 1px #1f2328; }
.mb-message-match { box-shadow: inset 3px 0 0 #ffd33d; }
.mb-message-current { box-shadow: inset 3px 0 0 var(--accent); }

/* The Saved panel's search bar (#4778): the shared list bar between its tabs and its list. */
.saved-bar:empty { display: none; }
.saved-bar { flex: none; }

/* The Servers list's search box (#4778): the shared list bar above the list, from six machines up. */
.servers-bar[hidden] { display: none; }
.servers-bar { max-width: 880px; margin: 0 auto var(--space-md, 8px); }
.servers-bar .list-bar-bar { padding-left: 0; padding-right: 0; } /* the bar lines up with the list's own edges */

/* The Inbox's live region for the agents that start waiting (#4926): read aloud, never drawn. */
.inbox-live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* The control that was clicked while its module is still loading, on a slow link only (lazy_panels.js, #5377): a progress cursor and aria-busy; nothing that moves and no dimming (a dimmed row loses its text contrast, QA). */
.lazy-loading { cursor: progress; }

/* Settings > Agents > Custom models (#5480): a group per provider, a row per model, an inline form to add or edit one */
.settings-custom-models { display: flex; flex-direction: column; gap: var(--space-md, 8px); width: 100%; min-width: 0; }
.cm-group { border: 1px solid var(--border); border-radius: var(--radius-md); margin: 0; padding: var(--space-md, 8px) var(--space-lg, 12px); min-width: 0; width: 100%; box-sizing: border-box; }
.cm-group > legend { font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); padding: 0 var(--space-sm, 4px); }
.cm-list { list-style: none; margin: 0 0 var(--space-md, 8px); padding: 0; display: flex; flex-direction: column; gap: var(--space-sm, 4px); }
.cm-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm, 4px) var(--space-md, 8px); min-width: 0; }
.cm-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-sm, 4px) var(--space-md, 8px); flex: 1 1 12rem; min-width: 0; }
.cm-id { font-family: var(--font-mono); font-size: 0.8125rem; overflow-wrap: anywhere; }
.cm-name { color: var(--text-secondary); font-size: 0.8125rem; overflow-wrap: anywhere; }
.cm-levels { display: inline-flex; flex-wrap: wrap; gap: var(--space-xs, 2px) var(--space-sm, 4px); }
.cm-chip { font-size: 0.6875rem; padding: 1px var(--space-sm, 4px); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); }
.cm-empty { color: var(--text-secondary); font-size: 0.8125rem; }
.cm-form { display: flex; flex-direction: column; gap: var(--space-md, 8px); width: 100%; min-width: 0; }
.cm-field { display: flex; flex-direction: column; gap: var(--space-xs, 2px); font-size: 0.75rem; color: var(--text-secondary); margin: 0; }
.cm-field .settings-input { width: 100%; margin: 0; }
.cm-levels-field { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-sm, 4px) var(--space-lg, 12px); font-size: 0.8125rem; }
.cm-levels-field > legend { font-size: 0.75rem; color: var(--text-secondary); padding: 0; margin-bottom: var(--space-sm, 4px); }
.cm-levels-field .settings-hint { flex-basis: 100%; }
.cm-levels-field .cm-level { display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: var(--space-sm, 4px); min-height: 44px; min-width: 44px; margin: 0; }
.cm-levels-field .cm-level input { flex: none; width: auto; margin: 0; }
.cm-levels-field .cm-level span { flex: none; white-space: nowrap; }
.cm-add { align-self: flex-start; }
.settings-custom-models .btn { margin: 0; }
.cm-error { color: var(--error); font-size: 0.8125rem; margin: 0; }
.cm-actions { display: flex; gap: var(--space-md, 8px); }
.cm-status:empty { display: none; }
@media (max-width: 767px) {
    .cm-row .btn, .cm-actions .btn, .cm-add { min-height: 44px; min-width: 44px; }
}