/* ═══════════════════════════════════════════════════════════════════════
   DELPHOS · APP-SHELL.CSS
   Loaded LAST. The shared window (#consentModal — Tools, Settings,
   Scheduler …), the app's confirm dialog, and the Tools / Playbooks /
   Connectors / Sub-Agents surfaces that live inside it.

     1. Window shell        — real enter/exit transitions, a proper footer
     2. Tools panel         — grouped rows with icon tiles
     3. DelphosConfirm      — the themed confirmation dialog
     4. Playbooks           — list rows, icon tiles, quick window
     5. Connectors          — skeleton contrast, overlay exit
     6. Sub-Agents settings — agent cards and the editor
     7. Motion preferences

   Specificity note: app-windows.css, style.css and ui-polish.css all
   declare the window with !important. Rules here are anchored on
   `html body #consentModal` so they win without piling on more flags.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --shell-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --shell-tile: rgba(255, 255, 255, 0.06);
    --shell-card: rgba(255, 255, 255, 0.022);
    --shell-line: rgba(255, 255, 255, 0.075);
}

body.light_mode {
    --shell-tile: rgba(24, 28, 36, 0.055);
    --shell-card: rgba(255, 255, 255, 0.7);
    --shell-line: rgba(24, 28, 36, 0.09);
}

/* ─────────────────────────────────────────────────────────────
   1. WINDOW SHELL
   WHY IT FELT GLITCHY
     • Opening set display:block and an attribute selector
       ([style*="display: block"]) flipped the window to its visible
       state in the same frame — no transition can run from display:none,
       and the popIn keyframes lost to an !important transform. It popped.
     • Closing added .is-closing, which no stylesheet styled: the window
       froze for 170ms, then vanished.
     • The only footer button ("Close") was absolutely positioned over the
       scrolling panel, covering the last row's switch.
   Now _openModal commits the closed state, then adds .is-open; the
   window fades and scales in with the individual `scale`/`translate`
   properties (untouched by the !important `transform` elsewhere), and
   .is-open coming off plays the same transition out.
   ───────────────────────────────────────────────────────────── */
html body #consentModal.data-window,
html body #consentModal.data-window[style] {
    transform: translate(-50%, -50%) !important;
    opacity: 0 !important;
    scale: 0.97;
    translate: 0 6px;
    animation: none !important;
    transition:
        opacity 170ms ease,
        scale 240ms var(--shell-ease),
        translate 240ms var(--shell-ease) !important;
}

html body #consentModal.data-window.is-open {
    opacity: 1 !important;
    scale: 1;
    translate: 0 0;
}

html body .windows-overlay.active {
    opacity: 0;
    transition: opacity 200ms ease !important;
}

html body .windows-overlay.active.is-open { opacity: 1; }
html body .windows-overlay.is-closing { opacity: 0 !important; }

/* Content column: the viewer scrolls, the footer is a real bar under it. */
html body #consentModal .content {
    display: flex !important;
    flex-direction: column;
}

html body #consentModal .content > .content-viewer {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
}

html body #consentModal .content > .content-viewer:not(:has(.stg-shell, .devs-shell, .memory-con)) {
    padding-bottom: 24px !important;
}

html body #consentModal .content > .data-window-actions {
    position: static !important;
    inset: auto !important;
    flex: 0 0 auto;
    display: none;
    justify-content: flex-end;
    gap: 10px;
    width: auto !important;
    margin: 0 !important;
    padding: 12px 20px !important;
    border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    background: var(--darker-background, #1a1a1a) !important;
    z-index: 1;
}

html body #consentModal.has-footer .content > .data-window-actions { display: flex; }

/* The settings/tools main column no longer has to clear a floating button. */
html body #consentModal .stg-main {
    padding-bottom: 28px !important;
}

/* Loader: a calm scrim + ring, faded rather than snapped. */
html body #consentModal .window-loaders {
    background: color-mix(in srgb, var(--darker-background, #1a1a1a) 55%, transparent) !important;
    animation: shellFade 160ms ease;
}

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

@media screen and (max-width: 820px) {
    html body #consentModal.data-window,
    html body #consentModal.data-window[style] {
        transform: none !important;
        scale: 1;
        translate: 0 18px;
    }

    html body #consentModal.data-window.is-open { translate: 0 0; }

    html body #consentModal .content > .data-window-actions {
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    }

    html body #consentModal .stg-main {
        padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* The drilled-in panel header is sticky and pulled up by -18px to bleed
       over .stg-main's top padding — but sticky `top: 0` is measured inside
       that padding, so it was pushed back DOWN by 18px and sat on top of the
       first line of every panel (the intro text was half hidden). Sticking at
       -18px puts it exactly where the flow puts it, and flush when scrolled. */
    html body #consentModal .stg-shell.panel-open .stg-panel-head {
        top: -18px !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   2. TOOLS PANEL
   ───────────────────────────────────────────────────────────── */
.tw-shell .stg-panel-head { align-items: center; }

.tw-count {
    margin-left: auto;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--shell-tile);
    font-size: 12px;
    font-weight: 500;
    color: var(--subheading-color, #9b9b9b);
    white-space: nowrap;
}

.tw-card {
    margin: 0 0 4px;
    padding: 0 14px;
    border: 1px solid var(--shell-line);
    border-radius: 14px;
    background: var(--shell-card);
}

.tw-card .stg-row {
    gap: 12px;
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--shell-line) !important;
}

.tw-card .stg-row:last-child { border-bottom: 0 !important; }

.tw-tile {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--shell-tile);
    color: var(--text-color);
}

.tw-tile .material-symbols-rounded { font-size: 19px; }

.tw-tool-row .stg-row-text h4 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px !important;
}

.tw-tool-row .stg-row-text p { margin-top: 2px !important; }

.tw-tool-row.is-locked .tw-tile,
.tw-tool-row.is-locked .stg-row-text h4 { opacity: 0.55; }

.tw-lock-note { color: var(--accent, #b7795c); }

@media screen and (max-width: 820px) {
    .tw-card { padding: 0 12px; }
    .tw-card .stg-row { flex-wrap: nowrap !important; }
    .tw-tile { width: 32px; height: 32px; }
}

/* ─────────────────────────────────────────────────────────────
   3. DELPHOS CONFIRM
   ───────────────────────────────────────────────────────────── */
.dph-confirm {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(8, 8, 10, 0.5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 160ms ease;
}

.dph-confirm.is-open { opacity: 1; }

.dph-confirm-card {
    width: min(400px, 100%);
    padding: 22px 22px 18px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    border-radius: 18px;
    background: var(--darker-background, #252321);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
    scale: 0.96;
    transition: scale 200ms var(--shell-ease);
}

.dph-confirm.is-open .dph-confirm-card { scale: 1; }

.dph-confirm-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: 12px;
    border-radius: 11px;
    background: var(--shell-tile);
    font-size: 21px;
    color: var(--text-color);
}

.dph-confirm-title {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-color);
}

.dph-confirm-msg {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--subheading-color, #aaa39b);
    white-space: pre-line;
}

.dph-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}

.dph-confirm-btn {
    height: 36px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, opacity 140ms ease;
}

.dph-confirm-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-ring, rgba(183, 121, 92, 0.35));
}

.dph-confirm-btn.is-ghost {
    background: transparent;
    border-color: var(--border-color, rgba(255, 255, 255, 0.14));
    color: var(--text-color);
}

.dph-confirm-btn.is-ghost:hover { background: var(--shell-tile); }

.dph-confirm-btn.is-primary {
    background: var(--text-color);
    color: var(--primary-color, #1f1e1c);
}

.dph-confirm-btn.is-primary:hover { opacity: 0.88; }

.dph-confirm-btn.is-danger {
    background: #d2443c;
    color: #fff;
}

.dph-confirm-btn.is-danger:hover { background: #bb3a33; }

/* ─────────────────────────────────────────────────────────────
   4. PLAYBOOKS
   ───────────────────────────────────────────────────────────── */
.pbk-tile {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--shell-tile);
    color: var(--text-color);
    font-size: 18px;
    line-height: 1;
}

.pbk-tile .material-symbols-rounded { font-size: 19px; }
.pbk-tile.is-sm { width: 26px; height: 26px; border-radius: 8px; font-size: 14px; }
.pbk-tile.is-sm .material-symbols-rounded { font-size: 16px; }
.ms-opt .pbk-tile.is-sm { margin-right: 2px; }

.pbk-list-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 2px 8px;
    font-size: 12px;
    color: var(--subheading-color, #9b9b9b);
}

.pbk-list-head-sep { opacity: 0.6; }

.pbk-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--shell-line);
    border-radius: 14px;
    background: var(--shell-card);
    overflow: hidden;
}

.pbk-list .pbk-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--shell-line);
    cursor: pointer;
    transition: background 140ms ease;
}

.pbk-list .pbk-row:last-child { border-bottom: 0; }
.pbk-list .pbk-row:hover { background: var(--hover-bg, rgba(255, 255, 255, 0.035)); }
.pbk-list .pbk-row:focus-visible { outline: 2px solid var(--accent, #b7795c); outline-offset: -2px; }

.pbk-list .pbk-row-text { flex: 1 1 auto; min-width: 0; }

.pbk-list .pbk-row-title {
    gap: 6px;
    font-size: 13.5px;
}

.pbk-row-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pbk-list .pbk-row-desc {
    margin-top: 2px;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.pbk-row-meta {
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--subheading-color, #8a8a8a);
    opacity: 0.8;
}

.pbk-list .pbk-row.is-off .pbk-tile,
.pbk-list .pbk-row.is-off .pbk-row-title,
.pbk-list .pbk-row.is-off .pbk-row-desc { opacity: 0.55; }

.pbk-list .pbk-switch { margin-left: 4px; }

/* One switch size across Tools, Playbooks and Connectors. */
.pbk-switch { width: 42px !important; height: 24px !important; }
.pbk-switch span::after { width: 18px !important; height: 18px !important; top: 3px !important; left: 3px !important; }
.pbk-switch input:checked + span::after { transform: translateX(18px) !important; }

/* Quick window (composer "+" → Playbooks): fades out instead of vanishing. */
.pbk-quick-overlay { transition: opacity 160ms ease; }
.pbk-quick-overlay:not(.is-open) { opacity: 0; }

@media screen and (max-width: 640px) {
    .pbk-list .pbk-row { padding: 11px 12px; gap: 10px; }
    .pbk-tile { width: 32px; height: 32px; }
}

/* ─────────────────────────────────────────────────────────────
   5. CONNECTORS / DIRECTORY
   ───────────────────────────────────────────────────────────── */
/* The skeleton plates were painted in --secondary-color, the same colour as
   the card they sat on, so the "loading" state was an empty box. */
.dir-skel-line,
.dir-skel-tile {
    background-color: var(--dph-sk-base, rgba(255, 255, 255, 0.055)) !important;
}

.dir-overlay { transition: opacity 160ms ease; }
.dir-overlay.is-closing { opacity: 0; pointer-events: none; }

/* ─────────────────────────────────────────────────────────────
   6. SUB-AGENTS SETTINGS
   ───────────────────────────────────────────────────────────── */
.stg-panel[data-panel="subagents"].sa-editing > .stg-panel-intro,
.stg-panel[data-panel="subagents"].sa-editing > .stg-section-label,
.stg-panel[data-panel="subagents"].sa-editing > #stg-subagents-builtin,
.stg-panel[data-panel="subagents"].sa-editing > #stg-subagents-custom,
.stg-panel[data-panel="subagents"].sa-editing > .sa-set-notice { display: none !important; }

.sa-set-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--accent, #b7795c) 35%, transparent);
    border-radius: 12px;
    background: var(--accent-soft, rgba(183, 121, 92, 0.12));
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-color);
}

.sa-set-notice .material-symbols-rounded { font-size: 18px; color: var(--accent, #b7795c); }

.sa-set-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--shell-line);
    border-radius: 14px;
    background: var(--shell-card);
    overflow: hidden;
}

.sa-set-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border-bottom: 1px solid var(--shell-line);
    transition: opacity 180ms ease, background 140ms ease;
}

.sa-set-card:last-child { border-bottom: 0; }
.sa-set-card:hover { background: var(--hover-bg, rgba(255, 255, 255, 0.025)); }
.sa-set-card.is-off .sa-set-avatar,
.sa-set-card.is-off .sa-set-main { opacity: 0.5; }
.sa-set-card.is-off .sa-set-avatar { filter: grayscale(1); }

.sa-set-avatar {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--shell-tile);
    font-size: 19px;
    line-height: 1;
}

.sa-set-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sa-set-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 20px;
}

.sa-set-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
}

.sa-set-badge {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--accent-soft, rgba(183, 121, 92, 0.14));
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--accent, #b7795c);
    white-space: nowrap;
}

.sa-set-badge.is-quiet {
    background: var(--shell-tile);
    color: var(--subheading-color, #9b9b9b);
}

.sa-set-desc {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--subheading-color, #9b9b9b);
}

.sa-set-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 4px;
}

.sa-set-tool {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px 2px 6px;
    border: 1px solid var(--shell-line);
    border-radius: 999px;
    font-size: 11px;
    color: var(--subheading-color, #9b9b9b);
    white-space: nowrap;
}

.sa-set-tool .material-symbols-rounded { font-size: 13px; }
.sa-set-tool.is-none { padding-left: 8px; font-style: italic; }

.sa-set-side {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.sa-set-actions {
    display: flex;
    gap: 2px;
    opacity: 0.65;
    transition: opacity 140ms ease;
}

.sa-set-card:hover .sa-set-actions,
.sa-set-actions:focus-within { opacity: 1; }

.sa-set-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--subheading-color, #9b9b9b);
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}

.sa-set-icon .material-symbols-rounded { font-size: 18px; }
.sa-set-icon:hover { background: var(--shell-tile); color: var(--text-color); }
.sa-set-icon.is-danger:hover { background: rgba(210, 68, 60, 0.12); color: #e5675f; }
.sa-set-icon:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-ring, rgba(183, 121, 92, 0.4)); }

.sa-set-card.is-skeleton { pointer-events: none; }
.sa-set-card.is-skeleton .sa-set-main { gap: 8px; padding-top: 2px; }
.sa-set-card.is-skeleton .sa-set-avatar { width: 38px; height: 38px; }

.sa-set-empty {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px dashed var(--shell-line);
    border-radius: 14px;
}

.sa-set-empty > .material-symbols-rounded {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--shell-tile);
    font-size: 20px;
    color: var(--subheading-color, #9b9b9b);
}

.sa-set-empty > div { flex: 1 1 auto; min-width: 0; }
.sa-set-empty h4 { margin: 0 0 2px; font-size: 13.5px; font-weight: 600; color: var(--text-color); }
.sa-set-empty p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--subheading-color, #9b9b9b); }
.sa-set-empty.is-error { border-style: solid; border-color: rgba(229, 130, 122, 0.25); }

/* style.css paints EVERY button inside `.data-window .content` navy through a
   selector of thirteen :not() exemptions (0,13,1) — the Sub-Agents controls
   were not on its list, so the icon buttons came out as blue boxes. Anchored
   on the window's id, these restate the real skin and win outright. */
html body #consentModal .content .sa-set-icon,
html body #consentModal .content .sa-ed-back,
html body #consentModal .content .sa-ed-emoji,
html body #consentModal .content .sa-ed-emoji-grid button,
html body #consentModal .content .sa-ed-tool,
html body #consentModal .content .sa-seg-opt {
    box-shadow: none;
    transform: none;
    will-change: auto;
    font-size: inherit;
}

html body #consentModal .content .sa-set-icon { padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--subheading-color, #9b9b9b); }
html body #consentModal .content .sa-set-icon:hover { background: var(--shell-tile); color: var(--text-color); }
html body #consentModal .content .sa-set-icon.is-danger:hover { background: rgba(210, 68, 60, 0.12); color: #e5675f; }
html body #consentModal .content .sa-ed-back { padding: 0; border: 1px solid var(--shell-line); border-radius: 10px; background: transparent; color: var(--text-color); }
html body #consentModal .content .sa-ed-back:hover { background: var(--shell-tile); }
html body #consentModal .content .sa-ed-emoji { padding: 0; border: 1px solid var(--shell-line); border-radius: 12px; background: var(--shell-tile); color: inherit; font-size: 22px; }
html body #consentModal .content .sa-ed-emoji-grid button { padding: 0; border: 0; border-radius: 8px; background: transparent; font-size: 17px; }
html body #consentModal .content .sa-ed-emoji-grid button:hover { background: var(--shell-tile); }
html body #consentModal .content .sa-ed-tool { padding: 8px 10px; border: 1px solid var(--shell-line); border-radius: 10px; background: transparent; color: var(--subheading-color, #9b9b9b); font-size: 12.5px; }
html body #consentModal .content .sa-ed-tool:hover { background: var(--shell-tile); color: var(--text-color); }
html body #consentModal .content .sa-ed-tool.is-on { border-color: color-mix(in srgb, var(--accent, #b7795c) 55%, transparent); background: var(--accent-soft, rgba(183, 121, 92, 0.12)); color: var(--text-color); }
html body #consentModal .content .sa-seg-opt { padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--subheading-color, #9b9b9b); font-size: 12.5px; }
html body #consentModal .content .sa-seg-opt:hover { color: var(--text-color); }
html body #consentModal .content .sa-seg-opt.is-on { background: var(--shell-tile); color: var(--text-color); box-shadow: inset 0 0 0 1px var(--shell-line); }

html body #consentModal .content .sub-btn {
    padding: 8px 14px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.14));
    border-radius: 10px;
    background: transparent;
    color: var(--text-color);
    font-size: 12.5px;
    letter-spacing: normal;
    box-shadow: none;
    transform: none;
}

html body #consentModal .content .sub-btn:hover { background: var(--shell-tile); }

/* Material Symbols draws its glyphs through ligatures, and any letter-spacing
   switches ligatures off — the section label's 0.05em tracking was inherited by
   the "add" icon in the New button, which then rendered as nothing. */
html body #consentModal .content .sub-btn .material-symbols-rounded,
.stg-section-label .material-symbols-rounded { letter-spacing: normal; }

/* The "New sub-agent" button: the app's quiet primary, never a stray blue. */
html body #consentModal .content .stg-panel[data-panel="subagents"] .sub-btn--primary,
.stg-panel[data-panel="subagents"] .sub-btn--primary {
    background: var(--text-color) !important;
    color: var(--primary-color, #1f1e1c) !important;
    border-color: transparent !important;
}

html body #consentModal .content .sub-btn--danger { color: #e5675f; }

/* A window-wide icon colour rule painted the glyph light-on-light inside the
   (light) primary button. Button icons follow their button. */
html body #consentModal .content .sub-btn .material-symbols-rounded { color: inherit !important; }

.stg-panel[data-panel="subagents"] .sub-btn--primary:hover { opacity: 0.88; }
.stg-panel[data-panel="subagents"] .sub-btn--primary:disabled { opacity: 0.4; cursor: not-allowed; }
.stg-panel[data-panel="subagents"] .sub-btn { border-radius: 10px; padding: 8px 14px; transform: none !important; }

/* ── the editor ── */
.sa-ed {
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: shellFade 180ms ease;
}

.sa-ed-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sa-ed-back {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--shell-line);
    border-radius: 10px;
    background: transparent;
    color: var(--text-color);
    cursor: pointer;
}

.sa-ed-back:hover { background: var(--shell-tile); }
.sa-ed-back .material-symbols-rounded { font-size: 19px; }

.sa-ed-title { font-size: 15.5px; font-weight: 600; color: var(--text-color); }
.sa-ed-sub { margin-top: 1px; font-size: 12px; color: var(--subheading-color, #9b9b9b); }

.sa-ed-error {
    padding: 9px 12px;
    border: 1px solid rgba(229, 130, 122, 0.28);
    border-radius: 10px;
    background: rgba(229, 130, 122, 0.08);
    font-size: 12.5px;
    color: #e99a92;
}

body.light_mode .sa-ed-error { color: #b3453b; }

.sa-ed-identity {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.sa-ed-emoji-wrap { position: relative; flex: 0 0 auto; }

.sa-ed-emoji {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--shell-line);
    border-radius: 12px;
    background: var(--shell-tile);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.sa-ed-emoji:hover { border-color: var(--subheading-color, #9b9b9b); }

.sa-ed-emoji-grid {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(8, 32px);
    gap: 2px;
    padding: 6px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    border-radius: 12px;
    background: var(--darker-background, #252321);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.sa-ed-emoji-grid[hidden] { display: none; }

.sa-ed-emoji-grid button {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font-size: 17px;
    cursor: pointer;
}

.sa-ed-emoji-grid button:hover { background: var(--shell-tile); }

.sa-ed-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.sa-ed-grow { flex: 1 1 auto; }

.sa-ed-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-color);
}

.sa-ed-count {
    font-size: 11px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--subheading-color, #9b9b9b);
}

.sa-ed-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    border-radius: 10px;
    background: var(--secondary-color, rgba(255, 255, 255, 0.04));
    color: var(--text-color);
    font: inherit;
    font-size: 13.5px;
    line-height: 1.45;
    outline: none;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.sa-ed-input::placeholder { color: var(--placeholder-color, #938d86); }

.sa-ed-input:focus {
    border-color: color-mix(in srgb, var(--accent, #b7795c) 60%, var(--border-color));
    box-shadow: 0 0 0 3px var(--accent-soft, rgba(183, 121, 92, 0.15));
}

.sa-ed-textarea {
    min-height: 150px;
    resize: vertical;
    font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
    font-size: 12.5px;
}

.sa-ed-hint {
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--subheading-color, #9b9b9b);
}

.sa-ed-tools {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 6px;
}

.sa-ed-tool {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--shell-line);
    border-radius: 10px;
    background: transparent;
    color: var(--subheading-color, #9b9b9b);
    font: inherit;
    font-size: 12.5px;
    text-align: left;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.sa-ed-tool > span:nth-child(2) {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sa-ed-tool .material-symbols-rounded { font-size: 16px; }
.sa-ed-tool:hover { background: var(--shell-tile); color: var(--text-color); }

.sa-ed-tool.is-on {
    border-color: color-mix(in srgb, var(--accent, #b7795c) 55%, transparent);
    background: var(--accent-soft, rgba(183, 121, 92, 0.12));
    color: var(--text-color);
}

.sa-ed-tool-check { opacity: 0; color: var(--accent, #b7795c); transition: opacity 140ms ease; }
.sa-ed-tool.is-on .sa-ed-tool-check { opacity: 1; }
.sa-ed-tool:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-ring, rgba(183, 121, 92, 0.4)); }

.sa-ed-row2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 16px;
}

.sa-seg {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--shell-line);
    border-radius: 11px;
    background: var(--shell-card);
    align-self: flex-start;
}

.sa-seg-opt {
    height: 30px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--subheading-color, #9b9b9b);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}

.sa-seg-opt:hover { color: var(--text-color); }

.sa-seg-opt.is-on {
    background: var(--shell-tile);
    color: var(--text-color);
    box-shadow: inset 0 0 0 1px var(--shell-line);
}

.sa-seg-opt:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-ring, rgba(183, 121, 92, 0.4)); }

.sa-ed-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--shell-line);
}

@media screen and (max-width: 640px) {
    .sa-set-card { padding: 12px; gap: 10px; }
    .sa-set-avatar { width: 34px; height: 34px; font-size: 17px; }
    .sa-ed-row2 { grid-template-columns: minmax(0, 1fr); }
    .sa-ed-tools { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .sa-set-empty { flex-wrap: wrap; }
}

/* ─────────────────────────────────────────────────────────────
   7. MOTION PREFERENCES
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    html body #consentModal.data-window,
    html body #consentModal.data-window[style],
    html body .windows-overlay.active,
    .dph-confirm, .dph-confirm-card,
    .pbk-quick-overlay, .dir-overlay {
        transition: none !important;
        scale: 1 !important;
        translate: none !important;
    }
    .sa-ed, html body #consentModal .window-loaders { animation: none !important; }
}

html body.pref-reduce-motion #consentModal.data-window,
html body.pref-reduce-motion #consentModal.data-window[style],
html body.pref-reduce-motion .dph-confirm-card {
    transition: none !important;
    scale: 1 !important;
    translate: none !important;
}

/* ─────────────────────────────────────────────────────────────
   8. NATIVE MOBILE
   What made the phone build read as "a website":
     • the drawer did not follow the finger (see ui-manager.js
       enableDrawerGesture) and its scrim let taps fall through;
     • hover colours stuck on after every tap, and taps had no
       press state of their own;
     • pull-to-refresh / overscroll glow on the chat, iOS text
       inflation, phone numbers auto-linked;
     • env(safe-area-inset-*) always resolved to 0 (no
       viewport-fit=cover), so nothing cleared the notch or the
       home indicator in landscape / standalone;
     • the composer hid behind the iOS keyboard;
     • hundreds of GPU layers: responsive.css promotes every
       message, bubble, text block and icon (will-change +
       translateZ) "for smoothness", which on a long chat is what
       makes scrolling stutter and text go soft.
   ───────────────────────────────────────────────────────────── */

/* 8a. Document-level behaviour */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

@media (max-width: 999px) {
    /* No pull-to-refresh / scroll chaining off the chat. `contain` (not
       `none`) keeps iOS's native edge bounce. */
    html,
    body {
        overscroll-behavior-y: contain;
    }
}

/* Taps are taps: no double-tap-zoom wait, no iOS long-press preview on
   controls (text in replies keeps its own callout). */
button,
a,
label,
summary,
[role="button"],
.ripple,
.ai-act-btn,
.tool-block .tool-header,
.act-head,
.history-user {
    touch-action: manipulation;
}

button,
[role="button"],
.ai-act-btn,
.material-symbols-rounded {
    -webkit-touch-callout: none;
}

/* 8b. Touch screens: no sticky hover; a real press state instead */
@media (hover: none) {
    .ai-act-btn:hover {
        background: transparent;
        color: var(--subheading-color, #98a2b3);
    }
    .ai-act-btn:hover .material-symbols-rounded,
    .ai-act-btn.regen-btn:hover .material-symbols-rounded {
        transform: none;
    }
    .ai-act-btn:active {
        background: var(--secondary-hover-color, rgba(255, 255, 255, 0.08));
        color: var(--text-color);
    }

    .input-tools-left .tool-btn:hover,
    .input-actions-right .action-btn:not(.send-btn):not(.stop-btn):hover {
        background-color: transparent;
    }
    .input-tools-left .tool-btn:hover .tools-icon { opacity: 0.7; }
    .input-tools-left .tool-btn:active,
    .input-actions-right .action-btn:not(.send-btn):not(.stop-btn):active {
        background-color: var(--hover-bg, rgba(127, 127, 127, 0.14));
    }

    html body .nav-menu .chats-history .history-user:hover:not(.selected) {
        background: transparent !important;
    }
    html body .nav-menu .chats-history .history-user:active {
        background: rgba(245, 238, 230, 0.08) !important;
    }
    body.light_mode .nav-menu .chats-history .history-user:active {
        background: rgba(40, 32, 24, 0.07) !important;
    }

    html body .nav .nav-menu-button:hover,
    html body .nav #start-live-voice:hover,
    html body .nav .nav-menu-button:hover .icon,
    html body .nav #start-live-voice:hover .icon,
    html body .nav .action-icon:hover .icon {
        background: transparent !important;
    }
    html body .nav .nav-menu-button:active .icon,
    html body .nav #start-live-voice:active,
    html body .nav .action-icon:active .icon {
        background: var(--secondary-hover-color, rgba(255, 255, 255, 0.08)) !important;
    }

    .act-head:hover .act-title { color: var(--act-text); }
    .tool-block.has-results .tool-header:hover { color: var(--subheading-color, #9b9b9b); }
}

/* 8c. Drawer: scrim + gesture surfaces (driven by enableDrawerGesture) */
.nav-overlay-swipe {
    position: fixed;
    inset: 0;
    z-index: 998;
    background: rgba(0, 0, 0, 0.46);
    opacity: var(--drawer-p, 0);
    pointer-events: none;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    transition: opacity var(--drawer-dur, var(--sidebar-motion-duration, 320ms)) var(--sidebar-motion-ease, cubic-bezier(0.22, 0.8, 0.2, 1));
}

body.nav-drawer-open {
    --drawer-p: 1;
    --drawer-edge: min(304px, 86vw);
}

body.nav-drawer-open .nav-overlay-swipe { pointer-events: auto; }

@media (min-width: 1000px) {
    .nav-overlay-swipe { display: none !important; }
}

@media (max-width: 999px) {
    /* The drawer scrolls vertically itself; a sideways drag on it is the
       close gesture, so the browser has nothing to do with it. */
    html body .nav-menu { touch-action: pan-y; }

    /* The strip of top bar beside the open drawer dims with the scrim and
       closes the drawer on tap — the bar sits above the drawer, so without
       this its right half stayed bright and live next to a dimmed chat. */
    html body .nav::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: -1px;
        left: var(--drawer-edge, 0px);
        z-index: 5;
        background: rgba(0, 0, 0, 0.46);
        opacity: var(--drawer-p, 0);
        pointer-events: none;
        transition:
            opacity var(--drawer-dur, var(--sidebar-motion-duration, 320ms)) var(--sidebar-motion-ease, cubic-bezier(0.22, 0.8, 0.2, 1)),
            left var(--drawer-dur, var(--sidebar-motion-duration, 320ms)) var(--sidebar-motion-ease, cubic-bezier(0.22, 0.8, 0.2, 1));
    }
    html body.nav-drawer-open .nav::after { pointer-events: auto; }
    html body.nav-drawer-open .nav { touch-action: none; }

    body.nav-drawer-dragging .nav-overlay-swipe,
    html body.nav-drawer-dragging .nav::after {
        transition: none !important;
    }
}

/* 8d. Safe areas (notch, home indicator, landscape side insets).
   `translate` composes with any existing `transform`, so these offsets
   never have to know — or fight — the positions set elsewhere. */
@media (max-width: 999px) {
    html body .nav {
        height: calc(52px + env(safe-area-inset-top, 0px)) !important;
    }
    html body .nav .nav-primary-controls {
        translate: env(safe-area-inset-left, 0px) env(safe-area-inset-top, 0px);
    }
    html body .nav #start-live-voice {
        translate: env(safe-area-inset-left, 0px) calc(env(safe-area-inset-top, 0px) / 2);
    }
    html body .nav .action-buttons {
        translate: calc(-1 * env(safe-area-inset-right, 0px)) env(safe-area-inset-top, 0px);
    }
    html body .chat-list {
        margin-top: calc(72px + env(safe-area-inset-top, 0px)) !important;
    }
    html body.new-chat-view .chat-list { margin-top: 0 !important; }

    html body .nav-menu .side_account {
        translate: 0 calc(-1 * env(safe-area-inset-bottom, 0px));
    }

    html body .chat-container {
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }
    html body .typing-area {
        padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
    }
}

@media (max-width: 520px) {
    html body .typing-area {
        padding-left: max(8px, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(8px, env(safe-area-inset-right, 0px)) !important;
    }
}

/* 8e. On-screen keyboard (--dph-kb / html.kb-open from app-windows.js).
   Where the browser already resized the layout for the keyboard the
   value is 0 and none of this applies. */
html.kb-open .typing-area {
    transform: translate3d(0, calc(-1 * var(--dph-kb, 0px)), 0) !important;
    /* The home indicator is under the keyboard now — no need to clear it. */
    padding-bottom: 8px !important;
    transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
html.kb-open body:not(.new-chat-view) .chat-list {
    padding-bottom: calc(var(--dph-composer-h, 140px) + var(--dph-kb, 0px) + 16px) !important;
}

/* 8f. Composer details on phones */
@media (max-width: 768px) {
    /* "Choose mo…" — the model pill was capped at 132px on a row that
       has room for twice that; it now takes what the row can spare. */
    html body #model-selector.model-selector .model-picker-trigger {
        max-width: min(230px, 56vw);
    }
}

/* 8g. Toasts ride above the composer (and the keyboard), like a snackbar,
   instead of covering the input the user is looking at. */
@media screen and (max-width: 820px) {
    html body .toast-stack {
        bottom: calc(var(--dph-composer-h, 0px) + var(--dph-kb, 0px) + 10px);
    }
    html body:is(.delphos-coding, .delphos-designing) .toast-stack,
    html body:has(.windows-overlay.active) .toast-stack {
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }
}

/* 8h. Confirm dialog → bottom sheet on phones */
@media screen and (max-width: 640px) {
    .dph-confirm {
        align-items: flex-end;
        padding: 0;
    }
    .dph-confirm-card {
        width: 100%;
        max-width: none;
        padding: 22px 18px calc(16px + env(safe-area-inset-bottom, 0px));
        border-width: 1px 0 0;
        border-radius: 22px 22px 0 0;
        scale: 1;
        translate: 0 100%;
        transition: translate 260ms var(--shell-ease);
    }
    .dph-confirm-card::before {
        content: "";
        display: block;
        width: 36px;
        height: 4px;
        margin: -10px auto 14px;
        border-radius: 99px;
        background: var(--shell-line);
    }
    .dph-confirm.is-open .dph-confirm-card { translate: 0 0; }
    .dph-confirm-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 22px;
    }
    .dph-confirm-btn {
        height: 46px;
        border-radius: 13px;
        font-size: 14.5px;
    }
}

/* 8i. Fewer GPU layers. These are responsive.css's per-element promotions
   (same selectors, same media query); a layer per message/bubble/text
   block costs memory and scroll smoothness on long chats and renders text
   without subpixel smoothing. Only the translateZ(0) "hints" are undone —
   no element here uses its transform for anything else. */
@media (max-width: 768px) {
    html body .outgoingRadius,
    html body .outgoing,
    html body .outgoing .text,
    html body .incoming .text,
    html body .chat-list .message .message-content,
    html body .header :is(.title, .subtitle),
    html body .typing-area .disclaimer-text,
    html body .typing-form .typing-input {
        will-change: auto;
        transform: none;
        backface-visibility: visible;
    }
    html body .icon,
    html body .chat-list .message .icon,
    html body .chat-list .message .avatar {
        will-change: auto;
    }
}

html body .chat-list .message .message-content { will-change: auto; }
html body .chat-container { will-change: auto; }

@media (prefers-reduced-motion: reduce) {
    .nav-overlay-swipe,
    html body .nav::after,
    html.kb-open .typing-area,
    .dph-confirm-card {
        transition: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   §9 CHAT vs WORK in Tools and Settings (auth-manager.js)
   ══════════════════════════════════════════════════════════════════════════ */
.tw-modebar {
    display: flex; flex-direction: column; gap: 8px; margin: 4px 0 14px; padding: 12px 14px; border-radius: 14px;
    border: 1px solid var(--border-color, rgba(255,255,255,.1)); background: var(--secondary-color, rgba(255,255,255,.03));
}
.tw-modebar-cur { display: flex; align-items: center; gap: 6px; font-size: 13.5px; }
.tw-modebar-cur .material-symbols-rounded { font-size: 18px; color: var(--accent, #b7795c); }
.tw-modebar p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--subheading-color); }
.tw-mode-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.tw-mf {
    padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border-color, rgba(255,255,255,.12)); background: transparent;
    color: var(--subheading-color); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.tw-mf[aria-pressed="true"] { color: var(--text-color); border-color: var(--accent, #b7795c); background: var(--accent-soft, rgba(183,121,92,.12)); }
.tw-mode-tag {
    display: inline-flex; align-items: center; margin-left: 6px; padding: 1px 7px; border-radius: 6px; vertical-align: 1px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: var(--subheading-color);
    border: 1px solid var(--border-color, rgba(255,255,255,.12));
}
.tw-mode-tag.is-work { color: var(--accent, #b7795c); border-color: color-mix(in srgb, var(--accent, #b7795c) 45%, transparent); }
.tw-tool-row.is-other-mode .tw-tile { opacity: .55; }
.tw-tool-row[hidden], .tw-card[hidden], [data-tw-groups] .stg-section-label[hidden] { display: none !important; }

.stg-modes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 14px; }
.stg-mode-card {
    padding: 14px; border-radius: 14px; border: 1px solid var(--border-color, rgba(255,255,255,.1));
    background: var(--secondary-color, rgba(255,255,255,.03));
}
.stg-mode-card.is-current { border-color: var(--accent, #b7795c); box-shadow: 0 0 0 1px var(--accent, #b7795c) inset; }
.stg-mode-head { display: flex; align-items: center; gap: 6px; font-size: 14.5px; margin-bottom: 8px; }
.stg-mode-head .material-symbols-rounded { font-size: 20px; color: var(--accent, #b7795c); }
.stg-mode-cur { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--accent, #b7795c); }
.stg-mode-card ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; line-height: 1.45; color: var(--subheading-color); }
@media (max-width: 640px) { .stg-modes-grid { grid-template-columns: 1fr; } }