/* ==========================================================================
   JEZT GLASS — Apple-inspired monochrome liquid-glass design system,
   applied to AgneticOS. Light + dark modes, glass surfaces, pill
   controls. Every component rule below is driven by the token blocks.

   Theme is applied as <html data-theme="dark|light"> (dark is the default)
   and switched via the sidebar toggle; the choice is stored under
   localStorage["am-theme"].
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Inter, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;

    --r-sm: 10px;
    --r: 16px;
    --r-lg: 22px;
    --r-xl: 28px;
    --blur: blur(24px) saturate(180%);

    --ok: #30d158;
    --warn: #ffd60a;
    --danger: #ff453a;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 44px;

    --measure: 1080px;
    --sidebar-width: 252px;

    --duration-fast: 110ms;
    --duration-base: 180ms;
    --duration-slow: 320ms;
    --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);

    /* Dark theme is the default */
    color-scheme: dark;
    --bg: #000000;
    --bg-soft: #0b0b0d;
    --text: #f5f5f7;
    --text-2: #a1a1a6;
    --text-3: #6e6e73;
    --glass: rgba(120, 120, 128, 0.10);
    --glass-2: rgba(120, 120, 128, 0.16);
    --glass-3: rgba(120, 120, 128, 0.22);
    --line: rgba(255, 255, 255, 0.10);
    --line-2: rgba(255, 255, 255, 0.18);
    --accent: #f5f5f7;
    --on-accent: #000000;
    --accent-soft: rgba(245, 245, 247, 0.12);
    --ok-soft: rgba(48, 209, 88, 0.16);
    --warn-soft: rgba(255, 214, 10, 0.14);
    --danger-soft: rgba(255, 69, 58, 0.16);
    --danger-border: rgba(255, 69, 58, 0.38);
    --shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
    --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.35);
}

html[data-theme="light"] {
    color-scheme: light;
    --bg: #f5f5f7;
    --bg-soft: #ececf0;
    --text: #1d1d1f;
    --text-2: #6e6e73;
    --text-3: #aeaeb2;
    --glass: rgba(255, 255, 255, 0.62);
    --glass-2: rgba(255, 255, 255, 0.8);
    --glass-3: rgba(0, 0, 0, 0.06);
    --line: rgba(0, 0, 0, 0.08);
    --line-2: rgba(0, 0, 0, 0.16);
    --accent: #1d1d1f;
    --on-accent: #ffffff;
    --accent-soft: rgba(29, 29, 31, 0.08);
    --ok-soft: rgba(48, 209, 88, 0.14);
    --warn-soft: rgba(200, 150, 0, 0.12);
    --danger-soft: rgba(255, 69, 58, 0.12);
    --danger-border: rgba(179, 38, 30, 0.32);
    --shadow: 0 24px 60px rgba(0, 0, 0, 0.12);
    --shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.07);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-width: 320px;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}

a { color: inherit; text-decoration: none; }
img { display: block; }

h1 {
    margin: 0;
    color: var(--text);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1.1;
    letter-spacing: -0.03em;
}

h2 { margin: 0; color: var(--text); font-size: 1.14rem; letter-spacing: -0.01em; }

button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--accent); color: var(--on-accent); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: var(--r-xl);
    background: var(--line-2);
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: content-box; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    top: 10px;
    left: 50%;
    z-index: 10000;
    padding: 10px 16px;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 0.82rem;
    font-weight: 650;
    box-shadow: var(--shadow-sm);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -140%);
    transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}

.skip-link:focus {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

/* --------------------------------------------------------------------------
   3. App shell — floating glass sidebar + blurred topbar
   -------------------------------------------------------------------------- */
.shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
}

.sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    margin: 14px 0 14px 14px;
    padding: 26px 16px 18px;
    border-radius: var(--r-xl);
    background: var(--glass);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 4px;
    color: var(--text);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.brand-mark {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 34px; height: 34px;
    border-radius: var(--r-sm);
    background: var(--accent);
    color: var(--on-accent);
    font-size: 0.8rem;
    font-weight: 900;
    box-shadow: var(--shadow-sm);
}

.brand-word { overflow: hidden; white-space: nowrap; }

.sidebar nav { display: grid; gap: 4px; margin-top: 34px; }

.sidebar nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 13px;
    border-radius: 12px;
    color: var(--text-2);
    font-size: 0.9rem;
    transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.sidebar nav a:hover { background: var(--accent-soft); color: var(--text); }

.sidebar nav a.active { background: var(--glass-2); color: var(--text); font-weight: 600; }

.nav-icon { flex: 0 0 auto; width: 18px; text-align: center; opacity: 0.85; font-size: 1.05rem; }
.nav-label { overflow: hidden; white-space: nowrap; }

.nav-group { display: grid; gap: 4px; }

.nav-group-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 13px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--text-2);
    font: inherit;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.nav-group-toggle:hover { background: var(--accent-soft); color: var(--text); }
.nav-group-toggle.active,
.nav-group.has-active .nav-group-toggle { background: var(--glass-2); color: var(--text); font-weight: 600; }

.nav-chevron {
    margin-left: auto;
    font-size: 0.8rem;
    opacity: 0.7;
    transition: transform var(--duration-base) var(--ease-standard);
}
.nav-group.is-open .nav-chevron { transform: rotate(180deg); }

.nav-submenu {
    display: grid;
    gap: 4px;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--duration-base) var(--ease-standard);
}
.nav-group.is-open .nav-submenu { max-height: 640px; }
.nav-submenu a { padding-left: 34px; font-size: 0.86rem; }

.sidebar-bottom { margin-top: auto; display: grid; gap: 6px; }

.sidebar-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 4px 14px;
    border-top: 1px solid var(--line);
    margin-top: 8px;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--glass-2);
    color: var(--text-2);
    font-size: 0.78rem;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.theme-toggle:hover { background: var(--glass-3); color: var(--text); }
.theme-toggle-icon::before { content: "◐"; }

.user { display: flex; align-items: center; gap: 10px; padding: 6px 4px 0; min-width: 0; }

.avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--glass-2);
    color: var(--text);
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid var(--line);
}

.user-info { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); flex: 1; }
.user-info strong { font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-info small { color: var(--text-3); font-size: 0.7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.signout-form { margin: 0; }

.logout {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--glass);
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.logout:hover { background: var(--danger-soft); border-color: transparent; color: var(--danger); }

main { min-width: 0; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    height: 64px;
    padding: 0 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-2);
    font-size: 0.82rem;
    background: color-mix(in srgb, var(--bg) 72%, transparent);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
    border-bottom: 1px solid var(--line);
}

.crumb { display: flex; align-items: center; min-width: 0; }
.crumb span { margin: 0 8px; color: var(--text-3); }
.crumb-page { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.system { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.balance { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; color: var(--text-2); }
.balance-label { font-size: 0.82rem; }

.presence-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--warn);
    box-shadow: 0 0 9px var(--warn);
    flex: 0 0 auto;
}
#agent-presence[data-state="up"] .presence-dot { background: var(--ok); box-shadow: 0 0 9px var(--ok); }
#agent-presence[data-state="down"] .presence-dot { background: var(--danger); box-shadow: 0 0 9px var(--danger); }
#agent-presence[data-state="down"] { color: var(--danger); }
#provider-balance[data-state="up"] .presence-dot { background: var(--ok); box-shadow: 0 0 9px var(--ok); }
#provider-balance[data-state="low"] .presence-dot { background: var(--danger); box-shadow: 0 0 9px var(--danger); animation: am-blink 1s step-end infinite; }
#provider-balance[data-state="low"] { color: var(--danger); }
#provider-balance[data-state="down"] .presence-dot { background: var(--text-3); box-shadow: none; }

.mobile-menu { display: none; background: none; border: 0; font-size: 1.2rem; cursor: pointer; color: var(--text); }

.content { max-width: 1560px; margin: auto; padding: 38px 40px 90px; }

/* Single-page navigation: thin progress bar + a soft fade on content swap. */
.nav-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    z-index: 200;
    pointer-events: none;
    opacity: 0;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: opacity var(--duration-fast) var(--ease-standard);
}
.nav-progress.is-active {
    opacity: 1;
    animation: nav-progress-slide 1s var(--ease-standard) infinite;
}
@keyframes nav-progress-slide {
    0% { transform: scaleX(0); }
    40% { transform: scaleX(0.55); }
    100% { transform: scaleX(0.92); }
}
.content-is-loading { opacity: 0.5; transition: opacity var(--duration-fast) var(--ease-standard); }
.content-fade { animation: content-fade-in var(--duration-slow) var(--ease-standard); }
@keyframes content-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

/* Chat pages fill the viewport: the page itself never scrolls, only the
   message list and the side panels do. */
.content:has(> .chat-shell) { height: calc(100vh - 64px); height: calc(100dvh - 64px); max-width: none; padding: 14px 18px calc(18px + env(safe-area-inset-bottom)); overflow: hidden; }

/* --------------------------------------------------------------------------
   4. Page furniture
   -------------------------------------------------------------------------- */
.page-header,
.actions {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: 28px;
}
.page-header > div { min-width: 0; }
.actions { align-items: center; margin-bottom: var(--space-5); }

.eyebrow,
.conversation-kicker,
.message-role {
    margin: 0 0 10px;
    color: var(--text-3);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.subtitle {
    max-width: 620px;
    margin: 0.5rem 0 0;
    color: var(--text-2);
    line-height: 1.6;
}

.empty-copy { padding: var(--space-6); color: var(--text-2); }

/* --------------------------------------------------------------------------
   5. Buttons and links (monochrome pills)
   -------------------------------------------------------------------------- */
.agent-link,
.secondary-link,
.button-secondary,
.icon-button,
.send-button,
.stop-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 999px;
    padding: 11px 20px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.86rem;
    white-space: nowrap;
    text-decoration: none;
    transition: transform var(--duration-fast) var(--ease-standard), background var(--duration-base) var(--ease-standard), opacity var(--duration-base) var(--ease-standard);
}

.agent-link:active,
.secondary-link:active,
.button-secondary:active,
.send-button:active:not(:disabled),
.stop-button:active { transform: scale(0.97); }

.agent-link { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-sm); }
.agent-link:hover { opacity: 0.88; }

.secondary-link,
.button-secondary,
.icon-button,
.stop-button {
    background: var(--glass-2);
    border: 1px solid var(--line);
    color: var(--text);
}
.secondary-link:hover,
.button-secondary:hover,
.icon-button:hover,
.stop-button:hover { background: var(--glass-3); }

.send-button {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    padding: 0;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 18px;
    line-height: 1;
    box-shadow: var(--shadow-sm);
}
.send-button:hover:not(:disabled) { opacity: 0.88; }
.send-button:disabled { opacity: 0.45; cursor: default; }

/* Labelled pill variant — used by the chat-home composer as the primary
   "send / start chat" action. */
.send-button.send-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: auto;
    height: auto;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* --------------------------------------------------------------------------
   6. Panels, cards, tables
   -------------------------------------------------------------------------- */
.inventory-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: var(--space-5);
}

.inventory-grid article,
.table-panel,
.form-panel,
.empty-panel,
.conversation-list,
.plan-grid article,
.approval-panel,
.change-explorer,
.agent-node,
.chat-intro {
    background: var(--glass);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}

.inventory-grid article { padding: var(--space-5); }
.inventory-grid article p { margin: 0; color: var(--text-2); font-size: 0.78rem; }
.inventory-grid article strong { display: block; margin: 12px 0 5px; font-size: 2.1rem; font-weight: 700; letter-spacing: -0.03em; }
.inventory-grid article small { color: var(--text-3); font-size: 0.72rem; }

.section-title { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line); }

.table-panel { overflow: hidden; }

table { width: 100%; border-collapse: collapse; text-align: left; }

th, td {
    padding: 13px var(--space-5);
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

th {
    color: var(--text-3);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

td { color: var(--text-2); font-size: 0.9rem; }
td a { color: var(--text); }
td.memory-content { max-width: 42ch; white-space: pre-wrap; overflow-wrap: anywhere; }
tbody tr { transition: background var(--duration-fast) var(--ease-standard); }
tbody tr:hover { background: var(--glass-2); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }

/* Row action pills (View / Edit / Rescan / Delete) */
.row-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}
.row-actions form { margin: 0; display: inline-flex; }
.row-actions a,
.row-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 5px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--text-2);
    font: inherit;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--duration-fast) var(--ease-standard),
                background var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard),
                transform var(--duration-fast) var(--ease-standard);
}
.row-actions a:hover,
.row-actions button:hover {
    background: var(--glass-2);
    border-color: var(--line-2);
    color: var(--text);
    transform: translateY(-1px);
}
.row-actions a:active,
.row-actions button:active { transform: scale(0.96); }
.row-actions .primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.row-actions .primary:hover { opacity: 0.88; color: var(--on-accent); }
.row-actions .danger { color: var(--danger); }
.row-actions .danger:hover { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger); }

.form-panel { max-width: 760px; padding: var(--space-6); }

/* --------------------------------------------------------------------------
   7. Forms and inputs
   -------------------------------------------------------------------------- */
input, select, textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 11px 13px;
    background: var(--glass);
    color: var(--text);
    font: inherit;
    outline: none;
    transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
input:focus, select:focus, textarea:focus {
    border-color: var(--line-2);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Native dropdown popups ignore the translucent glass surface, so they fall
   back to a white menu with light text in dark mode. Give the option rows an
   opaque, themed surface and legible label colour (applies to every <select>:
   model, device, project, database, inventory, etc.). */
select option,
select optgroup {
    background-color: var(--bg-soft);
    color: var(--text);
}
select option:checked { background-color: var(--glass-3); }
select option:disabled { color: var(--text-3); }

.field { display: grid; gap: var(--space-2); margin-bottom: var(--space-5); }
.field label { font-size: 0.78rem; font-weight: 600; color: var(--text-2); }
.field small,
.errorlist { margin: 0; color: var(--text-3); font-size: 0.78rem; }
.errorlist { color: var(--danger); list-style: none; padding: 0; }

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

.notice { padding: var(--space-3) var(--space-4); border-radius: var(--r); }
.error-notice {
    border: 1px solid var(--danger-border);
    background: var(--danger-soft);
    color: var(--danger);
}

/* --------------------------------------------------------------------------
   8. Badges / status chips
   -------------------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--glass-2);
    color: var(--text-2);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.badge-pending { background: var(--warn-soft); color: var(--warn); }
.badge-running { background: var(--warn-soft); color: var(--warn); animation: am-pulse 1.4s ease-in-out infinite; }
.badge-completed { background: var(--ok-soft); color: var(--ok); }
.badge-interrupted { background: var(--glass-2); color: var(--text-2); }
.badge-error { background: var(--danger-soft); color: var(--danger); }

/* --------------------------------------------------------------------------
   9. Landing page
   -------------------------------------------------------------------------- */
.empty-panel {
    display: grid;
    justify-items: start;
    gap: var(--space-3);
    padding: var(--space-8);
}
.empty-panel .mark {
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    margin-bottom: var(--space-2);
    border-radius: var(--r-lg);
    background: var(--accent);
    color: var(--on-accent);
    font-size: 1rem;
    font-weight: 900;
    box-shadow: var(--shadow-sm);
}
.empty-panel p { margin: 0; max-width: 560px; color: var(--text-2); line-height: 1.6; }
.empty-panel-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }

/* --------------------------------------------------------------------------
   10. Conversation list + chat home
   -------------------------------------------------------------------------- */
.chat-home {
    display: grid;
    height: 100%;
    min-height: 0;
    place-content: center;
    gap: var(--space-7);
}
.chat-home-copy { text-align: center; }
.chat-home-copy h1 { margin: var(--space-3) 0 var(--space-2); }
.chat-home-copy p { margin: 0; color: var(--text-2); }
.chat-home-mark {
    display: inline-grid;
    place-items: center;
    width: 42px; height: 42px;
    border-radius: 14px;
    background: var(--glass-2);
    color: var(--text);
    font-size: 20px;
}

.conversation-list { overflow: hidden; }

.conversation-item {
    display: flex;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--line);
    color: var(--text);
    font-size: 0.9rem;
    transition: background var(--duration-fast) var(--ease-standard);
}
.conversation-item:first-of-type { border-top: 0; }
.conversation-item:hover { background: var(--glass-2); }
.conversation-item small { color: var(--text-3); font-size: 0.72rem; }

/* --------------------------------------------------------------------------
   11. Agent console (chat)
   -------------------------------------------------------------------------- */
.chat-layout {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-columns: minmax(0, 1fr);
    height: 100%;
    min-height: 0;
}

.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 0 0 var(--space-4);
    min-width: 0;
}

.chat-new-link { color: var(--text-2); font-size: 0.86rem; font-weight: 650; }
.chat-new-link:hover { color: var(--text); }

.chat-header-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.chat-header-right { display: flex; align-items: center; gap: 12px; margin-left: auto; min-width: 0; }

/* Debug-only chat id pill (rendered only when Django DEBUG is on). */
.chat-debug-id {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border: 1px dashed var(--line);
    border-radius: 999px;
    background: var(--glass);
    color: var(--text-3);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.68rem;
    white-space: nowrap;
    user-select: all;
}

/* Top-right live status readout: model · tokens · cost · context progress. */
.chat-statusbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--glass);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    color: var(--text-2);
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
}
.status-model { max-width: 220px; overflow: hidden; text-overflow: ellipsis; color: var(--text); font-weight: 650; }
.status-divider { color: var(--text-3); }
.status-item { color: var(--text-2); }
.status-progress {
    position: relative;
    width: 84px; height: 6px;
    border-radius: 999px;
    background: var(--glass-3);
    overflow: hidden;
}
.status-progress-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); transition: width var(--duration-base) var(--ease-standard); }

/* Host resource chip in the universal topbar: CPU · RAM · disk. */
.host-metrics {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--glass);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    color: var(--text-2);
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.host-metric { display: inline-flex; align-items: baseline; gap: 4px; }
.host-metric-key { color: var(--text-3); font-size: 0.6rem; font-weight: 650; letter-spacing: 0.06em; }
.host-metric-value { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; }

/* Peak / off-peak pricing pill in the universal topbar. */
.peak-indicator {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--glass);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    font-size: 0.74rem;
    font-weight: 650;
    white-space: nowrap;
    color: var(--text-2);
}
.peak-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--text-3);
}
.peak-indicator[data-state="peak"] .peak-dot { background: var(--danger); box-shadow: 0 0 9px var(--danger); }
.peak-indicator[data-state="peak"] { color: var(--danger); border-color: var(--danger-soft); }
.peak-indicator[data-state="offpeak"] .peak-dot { background: var(--ok); box-shadow: 0 0 9px var(--ok); }
.peak-indicator[data-state="offpeak"] { color: var(--ok); border-color: var(--ok-soft); }

/* Composer tools: attachment button + single options menu. */
.composer-tools { display: flex; align-items: center; gap: 8px; }
.tool-button {
    display: inline-grid;
    place-items: center;
    width: 34px; height: 34px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--glass-2);
    color: var(--text-2);
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
}
.tool-button:hover { background: var(--glass-3); color: var(--text); }

/* Voice dictation pill: pulses red while recording, dims while transcribing. */
.mic-button.is-recording {
    color: var(--danger);
    border-color: var(--danger-border);
    background: var(--danger-soft);
    animation: mic-pulse 1.4s ease-in-out infinite;
}
.mic-button.is-busy { opacity: 0.55; pointer-events: none; }
@keyframes mic-pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--danger-soft); }
    50% { box-shadow: 0 0 0 6px transparent; }
}
@media (prefers-reduced-motion: reduce) {
    .mic-button.is-recording { animation: none; }
}

.chat-menu-wrap { position: relative; }
.chat-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 240px;
    padding: 7px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--glass-2);
    color: var(--text-2);
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
}
.chat-menu-toggle:hover { background: var(--glass-3); color: var(--text); }
.chat-menu-model { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 650; }
.chat-menu-caret { font-size: 0.6rem; color: var(--text-3); }

.chat-menu {
    position: absolute;
    z-index: 30;
    bottom: 44px;
    left: 0;
    width: min(340px, calc(100vw - 40px));
    max-height: min(460px, calc(100vh - 200px));
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-lg);
    background: color-mix(in srgb, var(--bg) 88%, var(--text) 12%);
    box-shadow: var(--shadow);
    display: grid;
    gap: 6px;
}
.menu-group { border-bottom: 1px solid var(--line); }
.menu-group:last-child { border-bottom: 0; }
.menu-group-title {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    list-style: none;
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 650;
}
.menu-group-title::-webkit-details-marker { display: none; }
.menu-group-title:hover { background: var(--accent-soft); }
.menu-group-title > span:first-child { flex: 0 0 auto; }
.menu-group-title::after { content: "▾"; color: var(--text-3); font-size: 0.62rem; transition: transform 0.15s; }
.menu-group[open] .menu-group-title::after { transform: rotate(180deg); }
.menu-group-value { flex: 1 1 auto; min-width: 0; color: var(--text-3); font-weight: 500; font-size: 0.74rem; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-group-items { display: grid; gap: 2px; padding: 0 0 8px; }
.menu-group-heading { padding: 9px 12px 3px; color: var(--text-3); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.menu-params { color: var(--text-3); font-size: 0.68rem; font-variant-numeric: tabular-nums; }
.menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 8px 10px 8px 18px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-2);
    font-size: 0.82rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.menu-item-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-usage { flex: 0 0 auto; color: var(--text-3); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.02em; }
.menu-item:hover { background: var(--accent-soft); color: var(--text); }
.menu-item.active { background: var(--glass-3); color: var(--text); font-weight: 650; }
.menu-item.active .model-usage { color: var(--text-2); }

/* Composer slash-command palette (slash.js): floats above the composer. */
.slash-palette {
    position: absolute;
    z-index: 40;
    bottom: calc(100% + 8px);
    left: 0;
    right: 0;
    max-height: min(340px, calc(100vh - 220px));
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-lg);
    background: color-mix(in srgb, var(--bg) 88%, var(--text) 12%);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    box-shadow: var(--shadow);
    display: grid;
    gap: 2px;
}
.slash-palette-head {
    padding: 7px 10px 5px;
    color: var(--text-3);
    font-size: 0.68rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.slash-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 8px 12px;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-2);
    font: inherit;
    font-size: 0.84rem;
    text-align: left;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.slash-item-label { flex: 0 0 auto; color: var(--text); font-weight: 600; }
.slash-item-hint { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; color: var(--text-3); font-size: 0.74rem; }
.slash-item:hover, .slash-item.active { background: var(--accent-soft); }
.slash-item.active .slash-item-label { color: var(--text); }
.slash-empty { padding: 10px 12px; color: var(--text-3); font-size: 0.8rem; }
@media (prefers-reduced-motion: reduce) {
    .slash-item { transition: none; }
}

/* Pending attachments above the composer. */
.attachment-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.attachment-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 4px 4px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--glass);
    color: var(--text-2);
    font-size: 0.74rem;
    max-width: 260px;
}
.attachment-thumb {
    width: 34px; height: 34px;
    border-radius: 7px;
    object-fit: cover;
    background: var(--glass-2);
    flex: 0 0 auto;
}
.attachment-file-icon { display: grid; place-items: center; font-size: 1rem; }
.attachment-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-remove {
    border: 0; background: transparent; color: var(--text-3);
    font-size: 0.9rem; cursor: pointer; padding: 2px 4px; border-radius: 6px;
}
.attachment-remove:hover { background: var(--danger-soft); color: var(--danger); }

/* Rendered attachments inside a message. */
.message-attachments { display: flex; flex-wrap: wrap; gap: 8px; }
.message-attachments img.attachment-image {
    max-width: 260px; max-height: 260px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--bg-soft);
}
.message-attachments .attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--glass);
    color: var(--text-2);
    font-size: 0.78rem;
}

.chat-panel {
    overflow-y: auto;
    padding: var(--space-5) 0 var(--space-7);
    scroll-behavior: smooth;
}

.chat-welcome {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    width: min(var(--measure), 100%);
    margin: 18vh auto 0;
    color: var(--text-2);
}
.chat-welcome p { margin: 4px 0 0; }

/* Floating "jump to oldest" control. The console opens on the latest turn;
   this glass pill sticks to the top of the transcript once the operator scrolls
   into history, so it never collides with the composer. */
.chat-jump-top-anchor {
    position: sticky;
    top: 6px;
    height: 0;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    pointer-events: none;
}
.chat-jump-bottom-anchor {
    position: sticky;
    bottom: 6px;
    height: 0;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    pointer-events: none;
}
.chat-jump-top {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--glass);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    box-shadow: var(--shadow-sm);
    color: var(--text-2);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.chat-jump-top-icon { font-size: 0.92rem; line-height: 1; }
.chat-jump-top-label { letter-spacing: 0.02em; }
.chat-jump-top:hover { color: var(--text); background: var(--glass-3); border-color: var(--line-2); }
.chat-jump-top:active { transform: scale(0.96); }
.chat-jump-top:focus-visible { outline: none; box-shadow: var(--shadow-sm), 0 0 0 3px var(--accent-soft); }
.chat-jump-top[hidden] { display: none; }

.agent-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 27px; height: 27px;
    border-radius: var(--r-sm);
    background: var(--accent);
    color: var(--on-accent);
    font-size: 10px;
    font-weight: 900;
}

.chat-intro {
    display: flex;
    gap: var(--space-3);
    max-width: var(--measure);
    margin: 0 auto var(--space-7);
    padding: var(--space-4) var(--space-5);
    color: var(--text-2);
    font-size: 0.9rem;
}
.chat-intro strong { color: var(--text); }
.chat-intro p { margin: 5px 0 0; line-height: 1.45; }

.message { max-width: var(--measure); margin: 0 auto var(--space-6); border: 0; border-radius: 0; background: transparent; animation: am-enter var(--duration-slow) var(--ease-standard) both; }
.message.user {
    width: fit-content;
    max-width: min(78%, var(--measure));
    margin-left: auto;
    margin-right: max(0px, calc((100% - var(--measure)) / 2));
    padding: var(--space-3) var(--space-4);
    border-radius: var(--r);
    background: var(--accent);
    color: var(--on-accent);
}
.message.assistant { padding: 0 var(--space-1); }

.message-body { display: grid; gap: var(--space-3); }

.message-text { margin: 0; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.message.user .message-text { color: var(--on-accent); }

.message.assistant.is-streaming {
    padding-left: var(--space-3);
    border-left: 2px solid var(--accent);
    animation: am-enter var(--duration-slow) var(--ease-standard) both, am-breathe 1.8s ease-in-out infinite;
}

.message-role { display: none; }

/* Markdown prose */
.text-block > :first-child { margin-top: 0; }
.text-block > :last-child { margin-bottom: 0; }
.text-block p { margin: 0 0 var(--space-3); line-height: 1.65; overflow-wrap: anywhere; }
.text-block h1 { font-size: 1.4rem; margin: var(--space-5) 0 var(--space-3); }
.text-block h2 { font-size: 1.1rem; margin: var(--space-5) 0 var(--space-3); }
.text-block h3, .text-block h4, .text-block h5, .text-block h6 { margin: var(--space-4) 0 var(--space-2); font-size: 1rem; }
.text-block ul, .text-block ol { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
.text-block li { margin-bottom: var(--space-1); line-height: 1.6; }
.text-block a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }

.message-table-wrap {
    overflow-x: auto;
    margin: 0 0 var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--r);
}
.message-table { min-width: 620px; margin: 0; }
.message-table th, .message-table td { padding: 10px var(--space-3); }
.message-table td { color: var(--text-2); white-space: nowrap; }
.message-table td:last-child { white-space: normal; }

code {
    padding: 1px 5px;
    border-radius: 6px;
    background: var(--glass-2);
    font-family: var(--font-mono);
    font-size: 0.92em;
}

.code-block {
    position: relative;
    margin: 0 0 var(--space-3);
    padding: var(--space-3) var(--space-4);
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--bg-soft);
}
.code-block code {
    padding: 0;
    background: transparent;
    color: var(--text);
    font-size: 12.5px;
    line-height: 1.6;
    white-space: pre;
}
.code-block[data-lang] { padding-top: var(--space-6); }
.code-block[data-lang]::before {
    content: attr(data-lang);
    position: absolute;
    top: var(--space-2);
    left: var(--space-4);
    color: var(--text-3);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.code-copy {
    position: absolute;
    top: 6px; right: 6px;
    padding: 3px var(--space-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--glass-2);
    color: var(--text-2);
    font-size: 0.72rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.code-block:hover .code-copy, .code-copy:focus-visible { opacity: 1; }
.code-copy:hover { color: var(--text); }

/* --------------------------------------------------------------------------
   am-html chat widgets — sandboxed standalone documents rendered inline in
   messages. Glass card chrome + fullscreen states (native :fullscreen and
   the in-chat overlay fallback).
   -------------------------------------------------------------------------- */
.chat-widget {
    margin: var(--space-3) 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--glass);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    overflow: hidden;
}
.chat-widget-bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--line);
}
.chat-widget-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-3);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.chat-widget-actions { display: flex; gap: var(--space-1); }
.chat-widget-action {
    padding: 3px var(--space-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--glass-2);
    color: var(--text-2);
    font-size: 0.72rem;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}
.chat-widget-action:hover { color: var(--text); background: var(--glass-3); }
.chat-widget-frame {
    display: block;
    width: 100%;
    height: 480px;
    border: 0;
    background: var(--bg-soft);
}
.chat-widget-source {
    margin: 0;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    max-height: 480px;
    overflow: auto;
}
.chat-widget-pending {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
}
.chat-widget-pending-text { color: var(--text-3); font-size: 0.82rem; }

/* In-chat overlay fallback (no Fullscreen API): fills the viewport. */
.chat-widget.chat-widget-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    margin: 0;
    border-radius: 0;
    background: var(--bg);
}
.chat-widget.chat-widget-overlay .chat-widget-frame { flex: 1; }

/* Native fullscreen on the card: fill the screen, keep the toolbar. */
.chat-widget:fullscreen,
.chat-widget:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    margin: 0;
    border-radius: 0;
    background: var(--bg);
}
.chat-widget:fullscreen .chat-widget-frame,
.chat-widget:-webkit-full-screen .chat-widget-frame { flex: 1; }
.chat-widget:fullscreen .chat-widget-bar,
.chat-widget:-webkit-full-screen .chat-widget-bar { flex: none; }

@media (prefers-reduced-motion: reduce) {
    .chat-widget-action { transition: none; }
}

.reasoning-block { border: 1px solid var(--line); border-radius: var(--r); background: var(--glass); }
.reasoning-block summary {
    padding: var(--space-2) var(--space-3);
    color: var(--text-3);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    list-style: none;
}
.reasoning-block summary::-webkit-details-marker { display: none; }
.reasoning-block summary::before { content: "› "; display: inline-block; transition: transform var(--duration-fast) var(--ease-standard); }
.reasoning-block[open] summary::before { transform: rotate(90deg); }
.reasoning-block summary:hover { color: var(--text-2); }
.reasoning-body { padding: 0 var(--space-4) var(--space-3) var(--space-5); color: var(--text-2); font-size: 0.82rem; line-height: 1.6; }
.reasoning-body p { margin: 0 0 var(--space-2); }

.tool-card { border: 1px solid var(--line); border-radius: var(--r); background: var(--glass); overflow: hidden; }
.tool-card[data-status="error"] { border-color: var(--danger-border); }

.tool-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.82rem;
    text-align: left;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-standard);
}
.tool-card-header:hover { background: var(--glass-2); }

.tool-card-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 24px; height: 24px;
    border-radius: 7px;
    background: var(--glass-2);
    color: var(--text-2);
    font-family: var(--font-mono);
    font-size: 0.82rem;
}
.tool-card-name { flex: 0 0 auto; font-family: var(--font-mono); font-weight: 600; }
.tool-card-summary { flex: 1 1 auto; min-width: 0; color: var(--text-3); font-family: var(--font-mono); font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-card-chevron { flex: 0 0 auto; color: var(--text-3); transition: transform var(--duration-fast) var(--ease-standard); }
.tool-card-header[aria-expanded="true"] .tool-card-chevron { transform: rotate(90deg); }

.tool-card-body { display: grid; gap: var(--space-2); padding: var(--space-2) var(--space-3) var(--space-3); border-top: 1px solid var(--line); }
.tool-card-body .code-block { margin: 0; max-height: 320px; overflow: auto; }
.tool-card-output code { color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }

.patch-chip {
    display: inline-flex;
    align-items: center;
    align-self: start;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--glass);
    color: var(--text-2);
    font-family: var(--font-mono);
    font-size: 0.78rem;
}

.meta-footer { color: var(--text-3); font-size: 0.72rem; letter-spacing: 0.04em; }

/* Composer */
.composer-panel {
    position: relative;
    width: min(var(--measure), 100%);
    margin: 0 auto;
    padding: 10px 11px 9px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-lg);
    background: var(--glass);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--duration-base) var(--ease-standard);
}
.composer-panel:focus-within { border-color: var(--line-2); box-shadow: var(--shadow-sm), 0 0 0 3px var(--accent-soft); }

.composer-panel textarea {
    min-height: 48px;
    max-height: 240px;
    padding: 7px var(--space-1);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    resize: none;
}
.composer-panel textarea:focus,
.composer-panel textarea:focus-visible { outline: none; box-shadow: none; }

.chat-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); min-height: 30px; }
.composer-hint, .stream-status { color: var(--text-3); font-size: 0.78rem; }
.stream-status { margin-right: auto; }
.stream-status.active { display: inline-flex; align-items: center; gap: 7px; color: var(--text-2); }
.stream-status.active::before { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); content: ""; animation: am-pulse 1.1s ease-in-out infinite; }

.home-composer {
    width: min(760px, calc(100vw - 48px));
    display: flex;
    align-items: flex-end;
    gap: 10px;
}
.home-composer textarea { flex: 1; min-width: 0; }
.chat-home form { display: grid; justify-items: center; }
.chat-home .composer-hint {
    display: block;
    margin: 12px 0 0;
    text-align: center;
}

/* --------------------------------------------------------------------------
   11b. Chat shell — conversations rail (left), chat, changes panel (right)
   -------------------------------------------------------------------------- */
.chat-shell {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
    height: 100%;
    min-height: 0;
}
.chat-shell.changes-open { grid-template-columns: 250px minmax(0, 1fr) 290px; }

.chat-main { position: relative; min-width: 0; height: 100%; min-height: 0; }

.conv-rail,
.changes-panel {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-radius: var(--r-lg);
    background: var(--glass);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.rail-head { padding: 14px; border-bottom: 1px solid var(--line); }
.conv-new {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 14px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
    transition: opacity 0.18s;
}
.conv-new:hover { opacity: 0.88; }

.rail-search {
    width: 100%;
    margin-top: 10px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--glass-2);
    color: var(--text);
    font: inherit;
    font-size: 0.82rem;
    outline: none;
    transition: border-color var(--duration-fast) var(--ease-standard);
}
.rail-search::placeholder { color: var(--text-3); }
.rail-search:focus { border-color: var(--line-2); }

.rail-list { flex: 1; overflow-y: auto; padding: 8px; display: grid; gap: 2px; }
.conv-item { position: relative; border-radius: 12px; transition: background 0.18s; }
.conv-link {
    display: grid;
    gap: 3px;
    padding: 10px 30px 10px 12px;
    color: var(--text-2);
    font-size: 0.85rem;
    text-decoration: none;
    transition: color 0.18s;
}
.conv-item:hover { background: var(--accent-soft); }
.conv-item.active { background: var(--glass-2); }
.conv-link:hover { color: var(--text); }
.conv-item.active .conv-link { color: var(--text); font-weight: 600; }
.conv-item.archived { padding: 10px 30px 10px 12px; display: grid; gap: 3px; opacity: 0.62; }
.conv-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.conv-action { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); opacity: 0; transition: opacity 0.18s; }
.conv-item:hover .conv-action, .conv-action:focus-within { opacity: 1; }
.conv-action button { border: 0; background: transparent; color: var(--text-3); font-size: 0.95rem; line-height: 1; padding: 4px 5px; border-radius: 6px; cursor: pointer; }
.conv-action button:hover { background: var(--glass-2); color: var(--danger); }
.archived-head { padding: 12px 12px 4px; color: var(--text-3); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; }
.conv-running {
    flex: 0 0 auto;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 8px var(--ok);
    animation: am-pulse 1.2s ease-in-out infinite;
}
.conv-item small { color: var(--text-3); font-size: 0.68rem; }

.changes-panel .panel-title { padding: 16px 16px 12px; border-bottom: 1px solid var(--line); margin: 0; }
.changes-list { flex: 1; overflow-y: auto; padding: 8px 12px 12px; display: grid; gap: 2px; }
.change-item {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 12px;
    text-decoration: none;
    transition: background 0.18s;
}
.change-item:hover { background: var(--accent-soft); }
.change-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.change-top strong { font-size: 0.82rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.change-item small { color: var(--text-3); font-size: 0.72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.change-item time { color: var(--text-3); font-size: 0.68rem; }

/* Operation/change state badges (django state slugs) */
.badge-draft, .badge-waiting_approval, .badge-queued { background: var(--glass-2); color: var(--text-2); }
.badge-approved, .badge-completed { background: var(--ok-soft); color: var(--ok); }
.badge-rejected, .badge-failed { background: var(--danger-soft); color: var(--danger); }
.badge-rolled_back { background: var(--warn-soft); color: var(--warn); }

/* Rail / changes header toggles */
.chat-mini-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 10px;
    min-height: 34px;
}
.rail-toggle, .changes-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--glass-2);
    color: var(--text-2);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
}
.rail-toggle:hover, .changes-toggle:hover { background: var(--glass-3); color: var(--text); }
.changes-toggle[aria-expanded="true"] { background: var(--accent-soft); color: var(--text); }
.rail-toggle { display: none; }

/* Revert action under assistant replies that edited files */
.revert-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--glass);
    color: var(--text-2);
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.revert-button:hover { background: var(--danger-soft); border-color: transparent; color: var(--danger); }

.empty-copy.compact { padding: 14px; font-size: 0.78rem; }

/* Chat shell responsive */
@media (max-width: 1200px) {
    .chat-shell, .chat-shell.changes-open { grid-template-columns: 220px minmax(0, 1fr); }
    .chat-shell.changes-open .changes-panel {
        position: fixed;
        top: 74px;
        right: 14px;
        width: 300px;
        max-height: calc(100vh - 90px);
        max-height: calc(100dvh - 90px);
        z-index: 25;
        box-shadow: var(--shadow);
    }
}
@media (max-width: 900px) {
    .chat-shell, .chat-shell.changes-open { grid-template-columns: minmax(0, 1fr); }
    .conv-rail {
        position: fixed;
        z-index: 25;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(86vw, 300px);
        padding-top: env(safe-area-inset-top);
        border-radius: 0 var(--r-lg) var(--r-lg) 0;
        transform: translateX(-105%);
        transition: transform 0.22s ease;
        box-shadow: var(--shadow);
    }
    .chat-shell.rail-open .conv-rail { transform: none; }
    .rail-toggle { display: inline-flex; }
    .chat-mini-header { justify-content: space-between; }
    .chat-shell.rail-open::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 24;
        background: rgba(0, 0, 0, 0.42);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
    }
}

/* --------------------------------------------------------------------------
   12. Permission / question cards
   -------------------------------------------------------------------------- */
.permission-card {
    margin: 14px 0;
    padding: 14px;
    border: 1px solid var(--warn-soft);
    border-radius: var(--r);
    background: var(--glass);
}
.permission-card strong { font-size: 0.82rem; }
.permission-card p { margin: 6px 0 12px; color: var(--text-2); font: 0.78rem/1.5 var(--font-mono); white-space: pre-wrap; }

.permission-actions { display: flex; gap: 8px; }
.permission-actions button { border-radius: 999px; padding: 7px 12px; cursor: pointer; font-size: 0.78rem; font-weight: 700; }
.permission-deny { border: 1px solid var(--line); background: transparent; color: var(--text-2); }
.permission-deny:hover { background: var(--glass-2); color: var(--text); }
.permission-allow { border: 1px solid transparent; background: var(--accent); color: var(--on-accent); }
.permission-allow:hover { opacity: 0.88; }

.question-card fieldset { margin: 12px 0; padding: 0; border: 0; }
.question-card legend { margin-bottom: 8px; font-weight: 700; font-size: 0.82rem; }
.question-option { display: flex; align-items: flex-start; gap: 9px; margin: 6px 0; padding: 9px; border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; }
.question-option span { display: grid; gap: 2px; }
.question-option small { color: var(--text-3); }
.question-custom { width: 100%; margin-top: 7px; }
.question-resolved { opacity: 0.72; }
.question-card .error-text { color: var(--danger); }

/* --------------------------------------------------------------------------
   13. Agent tree
   -------------------------------------------------------------------------- */
.agent-tree { margin: 24px 0; }
.agent-node { display: grid; gap: 4px; padding: 14px; }
.agent-node span, .agent-node small { color: var(--text-3); }
.agent-node strong { font-size: 0.9rem; }

.main-agent { width: min(320px, 100%); margin: 0 auto 28px; position: relative; }
.main-agent::after { position: absolute; left: 50%; bottom: -29px; width: 1px; height: 28px; background: var(--line-2); content: ""; }
.agent-branches { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; border-top: 1px solid var(--line); padding-top: 20px; }

/* --------------------------------------------------------------------------
   14. Change explorer / plan grid / approval
   -------------------------------------------------------------------------- */
.change-explorer { margin: 20px 0; padding: 18px; }
.explorer-controls { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; color: var(--text-2); font-size: 0.78rem; }
.explorer-controls input { width: auto; }
.change-timeline { margin: 0; padding: 0 0 0 25px; border-left: 2px solid var(--line); transition: font-size 0.15s ease; list-style: none; }
.change-timeline li { position: relative; margin: 0 0 18px; padding: 0 0 0 12px; }
.change-timeline li::before { position: absolute; left: -33px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--text-3); content: ""; }
.change-timeline li.done::before { background: var(--ok); }
.change-timeline li.current::before { background: var(--warn); }
.change-timeline li.failed::before { background: var(--danger); }
.change-timeline strong { display: block; font-size: 0.9rem; }
.change-timeline span, .change-timeline p { color: var(--text-3); font-size: 0.82rem; }
.change-timeline p { margin: 4px 0; }

.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.plan-grid article, .approval-panel { padding: 15px; }
.plan-grid h2, .approval-panel h2 { margin-top: 0; font-size: 1rem; }
.approval-panel { margin-top: 16px; }
.approval-panel form { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.approval-panel label { width: 100%; font-size: 0.78rem; font-weight: 600; color: var(--text-2); }
.approval-panel input { flex: 1; min-width: 180px; }
.approval-panel button { border: 0; border-radius: 999px; padding: 10px 18px; cursor: pointer; font-weight: 600; font-size: 0.86rem; }
.approval-panel button[value="approved"] { background: var(--ok-soft); color: var(--ok); }
.approval-panel button[value="rejected"] { background: var(--danger-soft); color: var(--danger); }

/* --------------------------------------------------------------------------
   15. Login — centered glass auth card
   -------------------------------------------------------------------------- */
.login-page { min-height: 100vh; display: grid; place-items: center; overflow: hidden; }
.login-page::before {
    content: "";
    position: fixed; inset: 0;
    background: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: radial-gradient(circle at center, #000 0, transparent 74%);
    -webkit-mask-image: radial-gradient(circle at center, #000 0, transparent 74%);
    pointer-events: none;
}

.login-card {
    position: relative;
    width: min(420px, calc(100vw - 32px));
    padding: 36px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-xl);
    background: var(--glass-2);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    backdrop-filter: blur(40px) saturate(180%);
    box-shadow: var(--shadow);
}
.login-card .brand { justify-content: center; margin-bottom: 34px; letter-spacing: 0.08em; }
.login-card h1 { font-size: 2.3rem; letter-spacing: -0.04em; margin-bottom: var(--space-5); }
.login-form .agent-link { width: 100%; margin-top: var(--space-3); }
.mfa-help { color: var(--text-2); margin-bottom: var(--space-5); line-height: 1.5; }
.mfa-qr {
    display: block;
    margin: 0 auto var(--space-5);
    width: min(220px, 62vw);
    height: auto;
    padding: 10px;
    border-radius: var(--r-lg);
    background: #fff;
}
.mfa-secret { display: grid; gap: 6px; margin-bottom: var(--space-5); }
.mfa-secret span { font-size: 0.78rem; font-weight: 600; color: var(--text-2); }
.mfa-secret code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    word-break: break-all;
}

/* --------------------------------------------------------------------------
   16. Motion
   -------------------------------------------------------------------------- */
@keyframes am-pulse {
    0%, 100% { opacity: 0.35; transform: scale(0.75); }
    50% { opacity: 1; transform: scale(1); }
}
@keyframes am-enter {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes am-breathe {
    0%, 100% { border-left-color: var(--accent); }
    50% { border-left-color: var(--line-2); }
}
@keyframes am-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    .chat-panel { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   17. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .shell { grid-template-columns: 78px minmax(0, 1fr); }
    .sidebar { padding: 24px 10px; }
    .brand { justify-content: center; }
    .brand-word, .nav-label { display: none; }
    .sidebar nav a, .nav-group-toggle { justify-content: center; }
    .nav-submenu a { padding-left: 13px; }
    .sidebar-tools { flex-direction: column; gap: 8px; }
    .theme-toggle { padding: 8px 10px; }
    .theme-toggle-label { display: none; }
    .user-info, .logout { display: none; }
    .user { justify-content: center; }
    .inventory-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 650px) {
    .shell { display: block; }
    .sidebar { position: fixed; z-index: 30; width: min(84vw, 260px); transform: translateX(-104%); transition: transform 0.22s ease; margin: 0; height: 100vh; height: 100dvh; padding-top: env(safe-area-inset-top); border-radius: 0 var(--r-xl) var(--r-xl) 0; }
    .nav-open .sidebar { transform: none; }
    body.nav-open::after { content: ""; position: fixed; inset: 0; z-index: 29; background: rgba(0, 0, 0, 0.42); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
    .brand-word, .nav-label { display: initial; }
    .brand { justify-content: flex-start; }
    .sidebar nav a, .nav-group-toggle { justify-content: flex-start; }
    .nav-submenu a { padding-left: 34px; }
    .sidebar-tools { flex-direction: row; }
    .theme-toggle-label { display: initial; }
    .user-info, .logout { display: initial; }
    .user { justify-content: flex-start; }
    .topbar { height: 56px; padding: 0 16px; }
    .mobile-menu { display: block; }
    .content { padding: 24px 16px 70px; }
    .content:has(> .chat-shell) { height: calc(100vh - 56px); height: calc(100dvh - 56px); padding: 10px 10px calc(14px + env(safe-area-inset-bottom)); }
    .page-header { align-items: start; }
    .inventory-grid { grid-template-columns: 1fr; }
    .table-panel { overflow-x: auto; }
    .empty-panel { padding: var(--space-6); }
    .chat-layout { height: 100%; min-height: 0; }
    .composer-hint { display: none; }
    .chat-header { flex-wrap: wrap; }
    .chat-header-left { flex: 1 1 auto; min-width: 0; }
    .chat-header-left select { max-width: 118px; }
    .chat-statusbar { display: none; }
    .host-metrics { display: none; }
    .crumb { max-width: 60%; }
    .chat-shell.changes-open .changes-panel { top: auto; bottom: 12px; left: 12px; right: 12px; width: auto; max-height: 62vh; max-height: 62dvh; }
    .message.user { max-width: 88%; }
}


.skill-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.skill-card { background: var(--glass-2); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: grid; gap: 8px; }
.skill-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.skill-head strong { color: var(--text); font-size: 0.92rem; }
.skill-source { color: var(--text-3); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; }
.skill-card p { color: var(--text-2); font-size: 0.8rem; line-height: 1.5; margin: 0; }

.badge-complete { background: var(--ok-soft); color: var(--ok); }
.change-meta { color: var(--text-3); font-size: 0.78rem; }
.change-files { padding: 0 16px 14px; display: grid; gap: 6px; }
.change-files details { font-size: 0.8rem; color: var(--text-2); }
.change-files summary { cursor: pointer; color: var(--text-2); }
.change-files ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 2px; }
.change-files li { font-size: 0.75rem; color: var(--text-3); }
.change-files code { font-size: 0.75rem; color: var(--text-2); }

/* --------------------------------------------------------------------------
   Thinking orbs — live activity indicators (thinking-orbs engine, MIT © Jakub Antalik)
   -------------------------------------------------------------------------- */
.orb { display: block; flex: 0 0 auto; }

/* Composer stream status: orb + text while the agent is working */
.stream-status { display: inline-flex; align-items: center; gap: 7px; }
.stream-status .status-orb { display: none; }
.stream-status.active .status-orb { display: block; }
.stream-status.has-orb.active::before { display: none; }

/* Tool cards: the glyph becomes a live orb while pending/running */
.tool-card-icon.has-orb { background: transparent; }

/* Per-assistant-turn activity orb, visible for the whole run */
.agent-activity { display: inline-flex; align-items: center; gap: 10px; margin: 2px 0 4px; color: var(--text-2); }
.agent-activity-label { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-3); letter-spacing: 0.02em; }

/* Chats rail running indicator (upgraded from the pulsing dot) */
.conv-orb { width: 14px; height: 14px; }

/* Welcome / home marks */
.chat-welcome-orb { width: 52px; height: 52px; }
.chat-home-orb { width: 64px; height: 64px; margin-bottom: 2px; }

/* --------------------------------------------------------------------------
   Bot avatars — living characters for the main agent and its subagents
   (bot-avatars engine, MIT © Jakub Antalik)
   -------------------------------------------------------------------------- */
.bot { display: block; flex: 0 0 auto; background: transparent; }

/* Main agent on each assistant turn's activity line */
.agent-activity-bot { align-self: center; }

/* A delegated task (subagent) wears its bot as the tool-card icon */
.tool-card-icon.has-bot { background: transparent; }
.tool-card-bot { align-self: center; }

/* Welcome / home marks */
.chat-welcome-bot { flex: 0 0 auto; }
.chat-home-bot { margin: 0 auto var(--space-2); }

/* --------------------------------------------------------------------------
   Fleet map — the coordinator, its work board, and every subagent
   -------------------------------------------------------------------------- */
.chat-shell { position: relative; }
.fleet-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--glass-2);
    color: var(--text-2);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.fleet-toggle:hover { background: var(--glass-3); color: var(--text); }
.fleet-toggle[aria-expanded="true"] { background: var(--accent-soft); color: var(--text); }

.fleet-panel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: min(370px, 92vw);
    display: flex;
    flex-direction: column;
    border-radius: var(--r-lg);
    background: var(--glass);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lg, var(--shadow-sm));
    overflow: hidden;
    z-index: 40;
}
.fleet-panel[hidden] { display: none; }
.fleet-panel-title { padding: 16px 16px 12px; border-bottom: 1px solid var(--line); margin: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fleet-close { border: 0; background: transparent; color: var(--text-3); font-size: 1.15rem; line-height: 1; padding: 2px 8px; border-radius: 8px; cursor: pointer; }
.fleet-close:hover { background: var(--glass-2); color: var(--danger); }
.fleet-body { flex: 1; overflow-y: auto; padding: 12px; display: grid; gap: 12px; align-content: start; }

.fleet-coord { display: flex; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--glass-2); }
.fleet-coord-avatar { flex: 0 0 auto; }
.fleet-coord-main { min-width: 0; display: grid; gap: 2px; }
.fleet-coord-top { display: flex; align-items: center; gap: 8px; }
.fleet-pill { font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; padding: 2px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--text-2); }
.fleet-coord-status { font-size: 0.8rem; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fleet-coord-device { font-size: 0.72rem; color: var(--text-3); font-family: var(--font-mono); }

.fleet-board { border: 1px solid var(--line); border-radius: var(--r); background: var(--glass-2); overflow: hidden; }
.fleet-board-head { padding: 9px 12px; border-bottom: 1px solid var(--line); }
.fleet-board-list { list-style: none; margin: 0; padding: 8px 12px; display: grid; gap: 5px; }
.fleet-board-item { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--text-2); }
.fleet-board-mark { flex: 0 0 auto; width: 14px; color: var(--text-3); }
.fleet-board-item[data-status="completed"] { color: var(--text-3); text-decoration: line-through; }
.fleet-board-item[data-status="completed"] .fleet-board-mark { color: var(--ok); }
.fleet-board-item[data-status="in_progress"] .fleet-board-mark { color: var(--warn, var(--accent)); }
.fleet-board-content { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fleet-board-pri { flex: 0 0 auto; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); }
.fleet-board-empty { font-size: 0.76rem; color: var(--text-3); }

.fleet-agents { display: grid; gap: 8px; }
.fleet-node { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border: 1px solid var(--line); border-left: 3px solid var(--line-2, var(--line)); border-radius: var(--r); background: var(--glass-2); }
.fleet-node-avatar { flex: 0 0 auto; margin-top: 1px; }
.fleet-node-main { min-width: 0; flex: 1 1 auto; display: grid; gap: 3px; }
.fleet-node-top { display: flex; align-items: center; gap: 8px; }
.fleet-node-name { font-family: var(--font-mono); font-size: 0.82rem; }
.fleet-node-desc { font-size: 0.76rem; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fleet-node-activity { font-size: 0.72rem; color: var(--text-3); font-family: var(--font-mono); min-height: 0.9em; }
.fleet-node-files { display: flex; flex-wrap: wrap; gap: 4px; }
.fleet-file { font-family: var(--font-mono); font-size: 0.64rem; padding: 1px 6px; border-radius: 999px; background: var(--glass-3); color: var(--text-3); }
.fleet-node-result { font-size: 0.72rem; color: var(--text-2); max-height: 120px; overflow: auto; padding-top: 3px; border-top: 1px dashed var(--line); white-space: pre-wrap; overflow-wrap: anywhere; }
.fleet-node-result.fleet-node-error { color: var(--danger); }
.fleet-avatar-fallback { display: grid; place-items: center; border-radius: 50%; background: var(--glass-3); color: var(--text-2); font-weight: 700; font-size: 0.72rem; }

.workspace-save-status { font-size: 0.7rem; color: var(--text-3); font-family: var(--font-mono); }

@media (max-width: 760px) {
    .fleet-panel { top: auto; bottom: 12px; left: 12px; right: 12px; width: auto; max-height: 66vh; max-height: 66dvh; }
}

/* --------------------------------------------------------------------------
   18. Terminal — operator consoles (2x2 live SSH panes)
   -------------------------------------------------------------------------- */
/* The terminal page fills the viewport, so the 2x2 blocks never need page scroll. */
.content:has(> .terminal-workspace) {
    height: calc(100vh - 64px);
    height: calc(100dvh - 64px);
    max-width: none;
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.terminal-workspace {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--space-3);
}

.terminal-tab-panels { min-height: 0; }
.terminal-pane-grid {
    height: 100%;
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
}
.terminal-pane-grid[data-count="1"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
}
.terminal-pane-grid[data-count="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
}
.terminal-pane-grid[data-count="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
}
.terminal-pane-grid[data-count="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
}
.content:has(> .terminal-workspace) .terminal-pane { min-height: 0; }

.terminal-tabs {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--glass);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    overflow-x: auto;
}
.terminal-tab-list { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; min-width: 0; }
.terminal-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-2);
    font-size: 0.78rem;
    white-space: nowrap;
    cursor: pointer;
}
.terminal-tab:hover { background: var(--accent-soft); color: var(--text); }
.terminal-tab.active { background: var(--glass-3); border-color: var(--line-2); color: var(--text); }
.terminal-tab-label { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.terminal-tab-count {
    font-size: 0.68rem;
    color: var(--text-3);
    background: var(--glass-3);
    border-radius: 999px;
    padding: 1px 6px;
    font-variant-numeric: tabular-nums;
}
.terminal-tab-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); }
.terminal-tab-dot[data-state="active"] { background: var(--ok); }
.terminal-tab-dot[data-state="starting"] { background: var(--warn); }
.terminal-tab-dot[data-state="error"] { background: var(--danger); }
.terminal-tab-close {
    opacity: 0.55;
    font-size: 0.95rem;
    line-height: 1;
    padding: 0 3px;
    border-radius: 5px;
}
.terminal-tab-close:hover { opacity: 1; background: var(--danger-soft); color: var(--danger); }
.terminal-tab-add {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--glass-2);
    color: var(--text-2);
    font-size: 1rem;
    cursor: pointer;
}
.terminal-tab-add:hover { background: var(--glass-3); color: var(--text); }

.terminal-boxes {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--glass-2);
}
.terminal-boxes-label {
    padding: 0 6px 0 4px;
    color: var(--text-3);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.terminal-boxes-btn {
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-2);
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}
.terminal-boxes-btn:hover { background: var(--accent-soft); color: var(--text); }
.terminal-boxes-btn.active { background: var(--glass-3); color: var(--text); }

.terminal-pane {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 340px;
    background: var(--glass);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
}

.terminal-pane-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--line);
    background: var(--glass-2);
}

.terminal-pane-index {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--glass-3);
    color: var(--text-2);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
}

.terminal-target {
    flex: 1 1 auto;
    min-width: 0;
    appearance: none;
    background: var(--glass-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 6px 10px;
    color: var(--text);
    font-size: 0.78rem;
}

.terminal-state {
    flex: 0 0 auto;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-3);
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--glass-3);
}
.terminal-state[data-state="active"] { color: var(--ok); background: var(--ok-soft); }
.terminal-state[data-state="starting"] { color: var(--warn); background: var(--warn-soft); }
.terminal-state[data-state="error"] { color: var(--danger); background: var(--danger-soft); }

.terminal-pane-actions { display: flex; gap: var(--space-2); }
.terminal-pane-actions button { padding: 6px 12px; font-size: 0.74rem; }

.terminal-pane:has(.terminal-sudo:not([hidden])) {
    grid-template-rows: auto auto minmax(0, 1fr);
}
.terminal-sudo {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--line);
    background: var(--glass-2);
}
.terminal-sudo-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.terminal-sudo-form {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1 1 auto;
    min-width: 0;
}
.terminal-sudo-input {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--glass-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 6px 10px;
    color: var(--text);
    font-size: 0.78rem;
}
.terminal-sudo-hint {
    margin: 0;
    color: var(--text-3);
    font-size: 0.68rem;
}
.terminal-sudo button[disabled] { opacity: 0.45; cursor: not-allowed; }

.terminal-mount {
    min-height: 0;
    padding: 8px 10px;
    background: var(--bg);
    overflow: hidden;
}
.terminal-mount .xterm { height: 100%; }
.terminal-mount .xterm-viewport { background: transparent !important; }

.terminal-notice {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--glass);
    color: var(--text-2);
    font-size: 0.78rem;
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
}
.terminal-notice-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--warn);
    box-shadow: 0 0 0 3px var(--warn-soft);
}

.terminal-toasts {
    position: fixed;
    right: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom));
    z-index: 40;
    display: grid;
    gap: 8px;
    max-width: min(360px, 80vw);
    pointer-events: none;
}
.terminal-toast {
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--glass-2);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    box-shadow: var(--shadow-sm);
    color: var(--text);
    font-size: 0.8rem;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}
.terminal-toast.show { opacity: 1; transform: none; }

@media (max-width: 900px) {
    .content:has(> .terminal-workspace) { height: auto; overflow: visible; }
    .terminal-pane-grid,
    .terminal-pane-grid[data-count] {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-rows: minmax(280px, 1fr);
    }
}

/* Chat rail management: multi-select, rename, delete */
.rail-head-row { display: flex; align-items: center; gap: 8px; }
.rail-head-row .conv-new { flex: 1 1 auto; }
.rail-select-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--glass-2);
    color: var(--text-2);
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
}
.rail-select-toggle:hover { background: var(--glass-3); color: var(--text); }
.rail-select-toggle[aria-pressed="true"] { background: var(--accent-soft); color: var(--text); }
.rail-bulk {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--glass-2);
}
.rail-bulk-count { font-size: 0.72rem; color: var(--text-2); }
.rail-bulk-delete {
    margin-left: auto;
    padding: 5px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--danger);
    color: var(--on-accent);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
}
.rail-bulk-delete:disabled { opacity: 0.45; cursor: not-allowed; }
.rail-bulk-cancel {
    padding: 5px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: transparent;
    color: var(--text-2);
    font-size: 0.72rem;
    cursor: pointer;
}
.rail-bulk-cancel:hover { color: var(--text); }
.conv-check { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); z-index: 2; }
.conv-item .conv-actions {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.18s;
}
.conv-item:hover .conv-actions,
.conv-item:focus-within .conv-actions { opacity: 1; }
.conv-actions .conv-action { position: static; transform: none; opacity: 1; }
.conv-actions button,
.conv-actions .conv-action button {
    border: 0;
    background: transparent;
    color: var(--text-3);
    font-size: 0.85rem;
    line-height: 1;
    padding: 4px 5px;
    border-radius: 6px;
    cursor: pointer;
}
.conv-actions button:hover,
.conv-actions .conv-action button:hover { background: var(--glass-2); color: var(--text); }
.conv-actions .conv-edit:hover { color: var(--text); }
.conv-actions .conv-delete:hover { color: var(--danger); }
.conv-rename-input {
    width: 100%;
    margin-top: 6px;
    padding: 4px 8px;
    border: 1px solid var(--line-2);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 0.82rem;
}

/* Terminal panel inside the chat shell */
.terminal-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--glass-2);
    color: var(--text-2);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
}
.terminal-toggle:hover { background: var(--glass-3); color: var(--text); }
.terminal-toggle[aria-expanded="true"] { background: var(--accent-soft); color: var(--text); }

.chat-shell.terminal-open { grid-template-columns: 250px minmax(0, 1fr) minmax(320px, 560px); }
.terminal-panel {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-radius: var(--r-lg);
    background: var(--glass);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.terminal-panel-title { padding: 16px 16px 12px; border-bottom: 1px solid var(--line); margin: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.terminal-toggle-close {
    border: 0;
    background: transparent;
    color: var(--text-3);
    font-size: 1.1rem;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 8px;
    cursor: pointer;
}
.terminal-toggle-close:hover { background: var(--glass-2); color: var(--danger); }
.terminal-panel-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 10px; }
.terminal-panel-body .terminal-workspace { flex: 1 1 auto; min-height: 0; }
.terminal-panel-body .terminal-pane { min-height: 0; }
.terminal-panel-body .terminal-pane-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.terminal-panel-body .terminal-pane-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.terminal-panel-body .terminal-pane-grid[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.terminal-panel-body .terminal-pane-grid[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.terminal-panel-body .terminal-toasts { bottom: calc(24px + env(safe-area-inset-bottom)); }

@media (max-width: 900px) {
    .chat-shell.terminal-open { grid-template-columns: minmax(0, 1fr); }
    .terminal-panel {
        position: fixed;
        top: auto;
        bottom: 12px;
        left: 12px;
        right: 12px;
        width: auto;
        max-height: 70vh;
        z-index: 45;
        height: 70vh;
    }
}

/* Nested subagent activity inside a task tool-card */
.subagent-activity {
    margin-top: 6px;
    padding: 6px 8px 8px;
    border-top: 1px dashed var(--line);
    display: grid;
    gap: 6px;
}
.subagent-activity-label {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 2px 0;
    border: 0;
    background: transparent;
    color: var(--text-3);
    font: inherit;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: left;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-standard);
}
.subagent-activity-label:hover { color: var(--text-2); }
.subagent-activity-count { font-variant-numeric: tabular-nums; opacity: 0.75; }
.subagent-activity-chevron {
    margin-left: auto;
    font-size: 0.85rem;
    transform: rotate(90deg);
    transition: transform var(--duration-base) var(--ease-standard);
}
.subagent-activity.is-collapsed .subagent-activity-chevron { transform: rotate(0deg); }
.subagent-activity-list { display: grid; gap: 6px; }
.subagent-activity.is-collapsed .subagent-activity-list { display: none; }
.subagent-activity .tool-card {
    margin: 0;
    border-left: 2px solid var(--line-2);
}

@media (prefers-reduced-motion: reduce) {
    .terminal-toast { transition: none; }
}

/* --------------------------------------------------------------------------
   Workspace IDE
   -------------------------------------------------------------------------- */
.content:has(> .workspace) {
    height: calc(100vh - 64px);
    height: calc(100dvh - 64px);
    max-width: none;
    padding: 0;
    overflow: hidden;
}

.workspace {
    height: 100%;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    min-height: 0;
}

/* Left rail: instance picker, folder input, actions, file tree */
.ws-side {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid var(--line);
    background: var(--glass);
    backdrop-filter: var(--blur);
}

.ws-side-head {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3);
    border-bottom: 1px solid var(--line);
}

.ws-instance {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--glass-2);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 8px 10px;
    font: inherit;
    font-size: 0.85rem;
}

.ws-icon-btn,
.ws-mini-btn {
    font: inherit;
    font-size: 0.78rem;
    color: var(--text);
    background: var(--glass-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 6px 12px;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.ws-icon-btn { padding: 6px 11px; }
.ws-icon-btn:hover,
.ws-mini-btn:hover { background: var(--glass-3); border-color: var(--line-2); }
.ws-mini-btn.ws-danger { color: var(--danger); border-color: var(--danger-border); }
.ws-mini-btn.ws-danger:hover { background: var(--danger-soft); }
.ws-mini-btn.ws-primary { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.ws-mini-btn.ws-primary:hover { background: var(--accent); border-color: var(--accent); opacity: 0.9; }

.ws-rootbar {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-3) var(--space-2);
}

.ws-root-input {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--bg-soft);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 7px 10px;
    font-family: var(--font-mono);
    font-size: 0.76rem;
}

.ws-note {
    margin: 0 var(--space-3) var(--space-2);
    font-size: 0.68rem;
    color: var(--text-3);
    line-height: 1.4;
    word-break: break-all;
}
.ws-note[data-access="fs"] { color: var(--warn); }

.ws-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: 0 var(--space-3) var(--space-3);
    border-bottom: 1px solid var(--line);
}

.ws-tree {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: var(--space-2) var(--space-2) var(--space-6);
    font-size: 0.8rem;
}

.ws-node { outline: none; }
.ws-node-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-2);
    white-space: nowrap;
}
.ws-node-row:hover { background: var(--glass-2); color: var(--text); }
.ws-node.is-selected > .ws-node-row { background: var(--accent-soft); color: var(--text); }
.ws-node:focus-visible > .ws-node-row { box-shadow: 0 0 0 2px var(--line-2); }
.ws-twisty { width: 12px; color: var(--text-3); font-size: 0.7rem; }
.ws-icon { color: var(--text-3); width: 14px; text-align: center; }
.ws-name { overflow: hidden; text-overflow: ellipsis; }
.ws-children { padding-left: 14px; }
.ws-loading,
.ws-empty,
.ws-tree-error { padding: 4px 10px; color: var(--text-3); font-size: 0.74rem; }
.ws-tree-error { color: var(--danger); }

/* Right pane: tabs, Monaco, status bar */
.ws-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.ws-tabs {
    display: flex;
    align-items: stretch;
    gap: 2px;
    height: 40px;
    padding: 0 var(--space-2);
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    background: var(--glass);
    backdrop-filter: var(--blur);
}
.ws-tabs-empty { align-self: center; color: var(--text-3); font-size: 0.76rem; padding: 0 8px; }

.ws-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px 0 14px;
    max-width: 220px;
    color: var(--text-2);
    font-size: 0.78rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.ws-tab:hover { color: var(--text); }
.ws-tab.is-active { color: var(--text); border-bottom-color: var(--accent); }
.ws-tab.is-dirty .ws-tab-label::after { content: " •"; color: var(--warn); }
.ws-tab-label { overflow: hidden; text-overflow: ellipsis; }
.ws-tab-close {
    font: inherit;
    background: none;
    border: none;
    color: var(--text-3);
    cursor: pointer;
    border-radius: 6px;
    line-height: 1;
    padding: 2px 5px;
}
.ws-tab-close:hover { background: var(--glass-3); color: var(--text); }

.ws-editor { flex: 1 1 auto; min-height: 0; }

.ws-statusbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    height: 26px;
    padding: 0 var(--space-3);
    border-top: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-3);
    background: var(--glass);
}
.ws-status { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Instance picker (home) */
.ws-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-4);
}
.ws-pick-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--glass);
    backdrop-filter: var(--blur);
    color: var(--text);
    text-decoration: none;
    transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}
.ws-pick-card:hover { border-color: var(--line-2); background: var(--glass-2); }
.ws-pick-mark {
    width: 40px; height: 40px; flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: 12px;
    background: var(--accent-soft);
    font-weight: 600;
}
.ws-pick-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ws-pick-body small { color: var(--text-3); font-family: var(--font-mono); font-size: 0.7rem; }

/* Toasts */
.ws-toasts {
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    z-index: 300;
}
.ws-toast {
    padding: 10px 16px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-2);
    background: var(--glass-3);
    backdrop-filter: var(--blur);
    box-shadow: var(--shadow-sm);
    color: var(--text);
    font-size: 0.8rem;
    max-width: 340px;
    transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}
.ws-toast.is-ok { border-color: rgba(48, 209, 88, 0.4); }
.ws-toast.is-warn { border-color: rgba(255, 214, 10, 0.4); }
.ws-toast.is-error { border-color: var(--danger-border); }
.ws-toast.is-out { opacity: 0; transform: translateY(6px); }

@media (max-width: 860px) {
    .workspace { grid-template-columns: 1fr; grid-template-rows: 42% 58%; }
    .ws-side { border-right: none; border-bottom: 1px solid var(--line); }
}

@media (prefers-reduced-motion: reduce) {
    .ws-toast, .ws-tab, .ws-mini-btn, .ws-icon-btn { transition: none; }
}

/* --------------------------------------------------------------------------
   Workspace IDE — enriched (folder picker, groups, popovers)
   -------------------------------------------------------------------------- */
.ws-folderbar { position: relative; padding: var(--space-3) var(--space-3) var(--space-2); }

.ws-folder-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    font: inherit;
    font-size: 0.8rem;
    color: var(--text);
    background: var(--glass-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    cursor: pointer;
}
.ws-folder-btn:hover { border-color: var(--line-2); background: var(--glass-3); }
.ws-folder-glyph { color: var(--text-3); }
.ws-folder-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; font-family: var(--font-mono); font-size: 0.74rem; }
.ws-chevron { color: var(--text-3); }

.ws-folder-menu {
    position: absolute;
    left: var(--space-3);
    top: calc(100% - 4px);
    width: min(380px, calc(100vw - 24px));
    z-index: 120;
    display: flex;
    flex-direction: column;
    max-height: 60vh;
    border: 1px solid var(--line-2);
    border-radius: var(--r);
    background: var(--bg-soft);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.ws-folder-menu-head {
    display: flex;
    gap: 6px;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--line);
}
.ws-folder-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 6px var(--space-3);
    border-bottom: 1px solid var(--line);
    font-size: 0.72rem;
}
.ws-crumb { font: inherit; background: none; border: none; color: var(--text-2); cursor: pointer; padding: 2px 4px; border-radius: 6px; font-family: var(--font-mono); }
.ws-crumb:hover { color: var(--text); background: var(--glass-2); }
.ws-crumb-sep { color: var(--text-3); }
.ws-folder-list { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 6px; }
.ws-folder-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--text-2);
}
.ws-folder-row:hover { background: var(--glass-2); color: var(--text); }
.ws-folder-row-name { overflow: hidden; text-overflow: ellipsis; }
.ws-folder-menu-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--line);
}
.ws-folder-menu-foot .ws-note { margin: 0; flex: 1 1 auto; }

.ws-side-foot {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--line);
}

.ws-groups { flex: 1 1 auto; min-height: 0; display: flex; }
.ws-groups[data-count="2"] .ws-group + .ws-group { border-left: 1px solid var(--line); }
.ws-group { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.ws-group.is-focused { box-shadow: inset 0 0 0 1px var(--line-2); }

.ws-tabbar {
    display: flex;
    align-items: stretch;
    height: 40px;
    border-bottom: 1px solid var(--line);
    background: var(--glass);
    backdrop-filter: var(--blur);
}
.ws-tabbar .ws-tabs { flex: 1 1 auto; min-width: 0; height: 40px; border-bottom: none; }
.ws-tabs-menu-btn {
    flex: 0 0 auto;
    width: 34px;
    font: inherit;
    color: var(--text-2);
    background: none;
    border: none;
    border-left: 1px solid var(--line);
    cursor: pointer;
}
.ws-tabs-menu-btn:hover { color: var(--text); background: var(--glass-2); }

/* Floating popover: all open editors */
.ws-popover {
    position: fixed;
    z-index: 200;
    min-width: 280px;
    max-width: 460px;
    max-height: 60vh;
    overflow: auto;
    padding: 6px;
    border: 1px solid var(--line-2);
    border-radius: var(--r);
    background: var(--bg-soft);
    box-shadow: var(--shadow);
}
.ws-popover-head { padding: 6px 10px; font-size: 0.72rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; }
.ws-popover-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.78rem;
    color: var(--text-2);
}
.ws-popover-row:hover { background: var(--glass-2); color: var(--text); }
.ws-popover-row.is-dirty .ws-popover-label::after { content: " •"; color: var(--warn); }
.ws-popover-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 0.72rem; }
.ws-popover-close { font: inherit; background: none; border: none; color: var(--text-3); cursor: pointer; border-radius: 6px; padding: 2px 6px; }
.ws-popover-close:hover { background: var(--glass-3); color: var(--text); }

/* Context menu */
.ws-context {
    position: fixed;
    z-index: 220;
    min-width: 180px;
    padding: 6px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    background: var(--bg-soft);
    box-shadow: var(--shadow);
}
.ws-context-item {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    font-size: 0.78rem;
    color: var(--text);
    background: none;
    border: none;
    border-radius: 8px;
    padding: 7px 10px;
    cursor: pointer;
}
.ws-context-item:hover:not(:disabled) { background: var(--glass-2); }
.ws-context-item:disabled { color: var(--text-3); cursor: default; }
.ws-context-sep { height: 1px; margin: 5px 8px; background: var(--line); }

/* Quick open */
.ws-quickopen {
    position: fixed;
    inset: 0;
    z-index: 250;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 12vh;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(3px);
}
.ws-quickopen-box {
    width: min(680px, 92vw);
    max-height: 62vh;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line-2);
    border-radius: var(--r);
    background: var(--bg-soft);
    box-shadow: var(--shadow);
    overflow: hidden;
}
#ws-quickopen-input {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 18px;
    font: inherit;
    font-size: 0.95rem;
    color: var(--text);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--line);
    outline: none;
}
.ws-quickopen-list { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 6px; }
.ws-quickopen-row {
    padding: 7px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ws-quickopen-row:hover { background: var(--glass-2); color: var(--text); }

/* Status bar extras */
.ws-status-right { display: flex; align-items: center; gap: var(--space-3); }
.ws-status-btn {
    font: inherit;
    font-size: 0.7rem;
    color: var(--text-2);
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 6px;
}
.ws-status-btn:hover { color: var(--text); background: var(--glass-2); }
.ws-status-btn.is-on { color: var(--on-accent); background: var(--accent); }

/* --------------------------------------------------------------------------
   Workspace IDE — VS Code-like shell
   -------------------------------------------------------------------------- */
.workspace {
    grid-template-columns: 48px var(--ws-sidebar, 300px) 5px minmax(0, 1fr);
    grid-template-rows: none;
}
.workspace.is-sidebar-hidden { grid-template-columns: 48px minmax(0, 1fr); }
.workspace.is-sidebar-hidden .ws-sidebar,
.workspace.is-sidebar-hidden .ws-resizer { display: none; }

.ws-activity {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 0;
    border-right: 1px solid var(--line);
    background: var(--glass);
    backdrop-filter: var(--blur);
}
.ws-activity-spacer { flex: 1 1 auto; }
.ws-act-btn {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    font: inherit; font-size: 1.05rem;
    color: var(--text-3);
    background: none; border: none; border-radius: 10px;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}
.ws-act-btn:hover { color: var(--text); background: var(--glass-2); }
.ws-act-btn.is-active { color: var(--text); background: var(--accent-soft); }

.ws-sidebar {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    border-right: 1px solid var(--line);
    background: var(--glass);
    backdrop-filter: var(--blur);
}
.ws-panel { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.ws-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px 6px;
    font-size: 0.66rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-3);
}
.ws-panel-actions { display: flex; gap: 2px; }
.ws-panel-btn {
    font: inherit; font-size: 0.85rem; line-height: 1;
    color: var(--text-3); background: none; border: none; border-radius: 6px;
    padding: 3px 6px; cursor: pointer;
}
.ws-panel-btn:hover { color: var(--text); background: var(--glass-2); }

.ws-resizer { cursor: col-resize; background: transparent; }
.ws-resizer:hover { background: var(--accent-soft); }
body.ws-resizing { cursor: col-resize; user-select: none; }

/* Breadcrumbs */
.ws-breadcrumbs {
    display: flex; align-items: center; gap: 1px;
    height: 30px; padding: 0 var(--space-3);
    border-bottom: 1px solid var(--line);
    font-size: 0.74rem; overflow: hidden; white-space: nowrap;
    background: var(--glass);
}
.ws-breadcrumbs .ws-crumb { color: var(--text-2); }
.ws-breadcrumbs .ws-crumb.is-current { color: var(--text); }

/* File-type icons */
.ws-fileicon {
    flex: 0 0 auto;
    width: 18px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-3);
}
.ws-fileicon.is-py { color: #5fa8d3; }
.ws-fileicon.is-js { color: #e8c07d; }
.ws-fileicon.is-ts { color: #6db3d6; }
.ws-fileicon.is-json { color: #d0b45a; }
.ws-fileicon.is-yaml { color: #c98bd0; }
.ws-fileicon.is-md { color: #8fb0c9; }
.ws-fileicon.is-html { color: #e08a6b; }
.ws-fileicon.is-css { color: #6fb0e0; }
.ws-fileicon.is-sh { color: #7dc98f; }
.ws-fileicon.is-sql { color: #d98f6b; }
.ws-fileicon.is-go { color: #6fc8d6; }
.ws-fileicon.is-rs { color: #d69a6b; }
.ws-fileicon.is-java { color: #d68f8f; }
.ws-fileicon.is-c { color: #9aa7d6; }
.ws-fileicon.is-cpp { color: #9a9fd6; }
.ws-fileicon.is-php { color: #a99ad6; }
.ws-fileicon.is-rb { color: #d67f7f; }

/* Search panel */
.ws-search-box { display: flex; gap: 6px; padding: 0 12px 8px; }
.ws-search-meta { padding: 0 12px 6px; font-size: 0.68rem; color: var(--text-3); }
.ws-search-results { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0 6px 12px; }
.ws-search-file { margin-bottom: 6px; }
.ws-search-file-head {
    display: flex; gap: 8px; align-items: center; width: 100%;
    background: none; border: none; color: var(--text); cursor: pointer;
    padding: 5px 8px; border-radius: 8px; text-align: left;
}
.ws-search-file-head:hover { background: var(--glass-2); }
.ws-search-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 0.7rem; }
.ws-search-file-matches { padding-left: 12px; }
.ws-search-match {
    display: flex; gap: 8px; padding: 3px 8px; border-radius: 6px; cursor: pointer;
    font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-2);
}
.ws-search-match:hover { background: var(--glass-2); color: var(--text); }
.ws-search-line { color: var(--text-3); min-width: 30px; text-align: right; }
.ws-search-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Quick-open path */
.ws-quickopen-row { display: flex; gap: 8px; align-items: center; }
.ws-quickopen-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Integrated terminal panel */
.ws-terminal-panel {
    height: 260px; min-height: 120px;
    display: flex; flex-direction: column;
    border-top: 1px solid var(--line);
    background: var(--bg-soft);
}
.ws-term-head {
    display: flex; align-items: center; gap: var(--space-2);
    padding: 6px 10px; border-bottom: 1px solid var(--line);
}
.ws-term-title { text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.66rem; color: var(--text-3); }
.ws-term-head .ws-instance { max-width: 220px; font-size: 0.74rem; padding: 4px 8px; }
.ws-term-state { font-size: 0.66rem; color: var(--text-3); text-transform: uppercase; }
.ws-term-state[data-state="active"] { color: var(--ok); }
.ws-term-state[data-state="failed"] { color: var(--danger); }
.ws-term-body { flex: 1 1 auto; min-height: 0; padding: 6px 8px; overflow: hidden; }

.ws-status-item { color: var(--text-3); }

@media (max-width: 900px) {
    .workspace { grid-template-columns: 44px var(--ws-sidebar, 220px) 5px minmax(0, 1fr); grid-template-rows: none; }
}

/* CRITICAL: an author `display` rule overrides the UA `[hidden]{display:none}`,
   so every workspace element that uses the `hidden` attribute needs this to
   actually hide. Without it the quick-open/command overlays and the folder
   menu render permanently and cover the page. */
.ws-folder-menu[hidden],
.ws-popover[hidden],
.ws-context[hidden],
.ws-quickopen[hidden],
.ws-panel[hidden],
.ws-terminal-panel[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   11c. Multi-chat workspace — project-grouped rail + open-chat tabs
   -------------------------------------------------------------------------- */
.rail-group { display: grid; gap: 2px; margin: 0 0 6px; }
.rail-group-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px 4px;
    color: var(--text-3);
    font-size: 0.66rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.rail-group-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-group-count { margin-left: auto; opacity: 0.7; }
.conv-item.unread { box-shadow: inset 3px 0 0 var(--accent); }
.conv-item.unread .conv-title { font-weight: 650; color: var(--text); }

.chat-workspace-main { display: flex; flex-direction: column; min-height: 0; }
.chat-workspace-header { justify-content: flex-start; }
.chat-tabstrip {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}
.chat-workspace-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; }

.chat-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 220px;
    padding: 6px 8px 6px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--glass-2);
    color: var(--text-2);
    font-size: 0.8rem;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.chat-tab:hover { color: var(--text); background: var(--glass-3); }
.chat-tab.is-active { background: var(--accent-soft); color: var(--text); border-color: var(--line-2); font-weight: 600; }
.chat-tab-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-tab-close {
    border: 0;
    background: transparent;
    color: var(--text-3);
    font-size: 0.95rem;
    line-height: 1;
    padding: 1px 4px;
    border-radius: 6px;
    cursor: pointer;
}
.chat-tab-close:hover { color: var(--danger); background: var(--glass-2); }
.chat-tab-running, .chat-tab-unread { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.chat-tab-running { background: var(--ok); box-shadow: 0 0 6px var(--ok); animation: am-pulse 1.2s ease-in-out infinite; }
.chat-tab-unread { background: var(--accent); }
.chat-tab-running[hidden], .chat-tab-unread[hidden] { display: none; }

.chat-panes {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    --chat-split: 1;
    grid-template-columns: repeat(var(--chat-split), minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
    gap: 10px;
}
.chat-pane-frame {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    border: 0;
    border-radius: var(--r-lg);
    background: transparent;
}
.chat-pane-frame[hidden] { display: none; }
.chat-workspace-home { position: absolute; inset: 0; overflow: auto; z-index: 1; background: var(--bg); }
.chat-workspace-home[hidden] { display: none !important; }

.chat-boxes {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--glass-2);
}
.chat-boxes-label {
    padding: 0 6px 0 4px;
    color: var(--text-3);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.chat-boxes-btn {
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-2);
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}
.chat-boxes-btn:hover { background: var(--accent-soft); color: var(--text); }
.chat-boxes-btn[aria-pressed="true"] { background: var(--glass-3); color: var(--text); }

/* Standalone pane document (loaded inside a workspace iframe). */
.chat-pane-body { height: 100dvh; margin: 0; padding: 0; background: var(--bg); color: var(--text); overflow: hidden; }
.chat-pane-body .chat-main { height: 100%; padding: 12px 16px; box-sizing: border-box; }
.chat-pane-body .rail-toggle,
.chat-pane-body .chat-new-link,
.chat-pane-body .changes-toggle,
.chat-pane-body .terminal-toggle { display: none; }


/* Local model swap progress overlay. */
.am-swap-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.45); backdrop-filter: blur(4px); }
.am-swap-overlay[hidden] { display: none; }
.am-swap-card { width: min(420px, 90vw); padding: 22px 24px; border-radius: 16px; border: 1px solid var(--line); background: var(--glass-2, #141417); color: var(--text, #eee); box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.am-swap-title { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #8a8a90); }
.am-swap-model { font-size: 1rem; font-weight: 650; margin: 6px 0 14px; }
.am-swap-track { height: 8px; border-radius: 999px; background: rgba(128,128,128,.25); overflow: hidden; }
.am-swap-fill { height: 100%; width: 4%; border-radius: 999px; background: linear-gradient(90deg, var(--ok,#5ad), var(--accent,#7af)); transition: width .4s ease; }
.am-swap-hint { margin-top: 10px; font-size: .78rem; color: var(--muted, #8a8a90); }

/* --------------------------------------------------------------------------
   12. Minimal root landing page
   -------------------------------------------------------------------------- */
body.landing-page { overflow: hidden; }

.landing-page::before {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 41%, rgba(255, 255, 255, 0.075) 0, rgba(255, 255, 255, 0.022) 21%, transparent 43%),
        radial-gradient(circle at 50% 52%, var(--glass-2) 0, transparent 58%);
    opacity: 0.82;
    content: "";
}

.landing-page .shell {
    display: block;
    min-height: 100vh;
    min-height: 100dvh;
}

.landing-page .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    width: min(280px, calc(100vw - 28px));
    height: calc(100vh - 28px);
    height: calc(100dvh - 28px);
    visibility: hidden;
    pointer-events: none;
    transform: translateX(calc(-100% - 28px));
    transition: transform var(--duration-base) var(--ease-standard), visibility var(--duration-base);
}

.landing-page.nav-open .sidebar {
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
}

.landing-page.nav-open::after {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgba(0, 0, 0, 0.28);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    content: "";
}

.landing-page main {
    min-height: 100vh;
    min-height: 100dvh;
}

.landing-page .topbar { display: none; }

.landing-page .content {
    display: grid;
    place-items: center;
    width: 100%;
    max-width: none;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 32px;
}

.landing-menu {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 50;
    display: grid;
    place-content: center;
    gap: 4px;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--glass);
    color: var(--text);
    box-shadow: var(--shadow-sm);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    cursor: pointer;
    transition: opacity var(--duration-fast) var(--ease-standard), visibility var(--duration-fast), background var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}

.landing-menu:hover { background: var(--glass-2); }
.landing-menu:active { transform: scale(0.96); }

.landing-menu span {
    display: block;
    width: 18px;
    height: 1.5px;
    border-radius: 999px;
    background: currentColor;
    transition: transform var(--duration-base) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard);
}

.landing-page.nav-open .landing-menu {
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.88);
}

.landing-chat {
    display: grid;
    position: relative;
    z-index: 1;
    gap: 34px;
    width: min(850px, 100%);
    transform: translateY(-1.5vh);
}

.landing-identity {
    display: grid;
    justify-items: center;
    gap: 24px;
}

.landing-orb-wrap {
    position: relative;
    display: grid;
    place-items: center;
    width: 108px;
    height: 108px;
}

.landing-orb-wrap::before {
    position: absolute;
    inset: -38px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0, rgba(255, 255, 255, 0.035) 34%, transparent 69%);
    filter: blur(12px);
    opacity: 0.9;
    content: "";
}

.landing-orb-ring {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 90px;
    height: 90px;
    border: 2px solid rgba(255, 255, 255, 0.72);
    border-radius: 50%;
    background: radial-gradient(circle at 42% 32%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.025) 46%, rgba(0, 0, 0, 0.14) 72%);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.36), 0 0 32px rgba(255, 255, 255, 0.14), inset 0 0 18px rgba(255, 255, 255, 0.06);
    animation: landing-orb-breathe 5s ease-in-out infinite;
}

.landing-orb { position: relative; z-index: 1; opacity: 0.72; }

@keyframes landing-orb-breathe {
    0%, 100% { transform: scale(0.97); box-shadow: 0 0 8px rgba(255, 255, 255, 0.3), 0 0 28px rgba(255, 255, 255, 0.11), inset 0 0 18px rgba(255, 255, 255, 0.06); }
    50% { transform: scale(1.025); box-shadow: 0 0 12px rgba(255, 255, 255, 0.48), 0 0 44px rgba(255, 255, 255, 0.18), inset 0 0 22px rgba(255, 255, 255, 0.09); }
}

.landing-copy { display: grid; justify-items: center; gap: 12px; }

.landing-heading {
    max-width: 850px;
    margin: 0;
    text-align: center;
    font-size: clamp(2.35rem, 4.4vw, 3.45rem);
    font-weight: 720;
    line-height: 1;
    letter-spacing: -0.055em;
    text-wrap: balance;
}

.landing-subtitle {
    margin: 0;
    color: var(--text-2);
    font-size: clamp(1.05rem, 2vw, 1.45rem);
    font-weight: 400;
    letter-spacing: -0.02em;
}

.landing-chat form { width: 100%; }

.landing-composer {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    width: 100%;
    padding: 13px 14px 13px 28px;
    border-color: var(--line-2);
    border-radius: 28px;
    background: color-mix(in srgb, var(--glass) 88%, transparent);
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.26), inset 0 1px rgba(255, 255, 255, 0.04);
}

.landing-composer textarea {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 46px;
    max-height: 180px;
    padding: 11px 2px;
    line-height: 1.4;
    overflow-y: auto;
}

.landing-composer textarea::placeholder { color: var(--text-3); }

.landing-send {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    cursor: pointer;
    transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}

.landing-send:hover { opacity: 0.86; }
.landing-send:active { transform: scale(0.95); }

@media (max-width: 640px) {
    .landing-page .content { padding: 22px; }
    .landing-menu { top: 14px; left: 14px; }
    .landing-chat { gap: 26px; transform: translateY(-1vh); }
    .landing-identity { gap: 18px; }
    .landing-orb-wrap { transform: scale(0.84); margin: -8px 0; }
    .landing-heading { font-size: clamp(1.6rem, 8vw, 2.25rem); }
    .landing-composer { padding: 10px 11px 10px 18px; border-radius: 24px; }
    .landing-send { width: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
    .landing-page .sidebar,
    .landing-menu,
    .landing-menu span,
    .landing-orb-ring,
    .landing-send { transition: none; }
}

/* --------------------------------------------------------------------------
   13. Product settings hub, guided empty states, and responsive CCTV aperture
   -------------------------------------------------------------------------- */
main:focus { outline: none; }

.settings-header { align-items: center; }
.settings-header .subtitle { max-width: 660px; }
.settings-role {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--glass);
    color: var(--text-2);
    font-size: 0.76rem;
    font-weight: 650;
    letter-spacing: 0.04em;
}

.settings-stack { display: grid; gap: 42px; }
.settings-section { display: grid; gap: 16px; }
.settings-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    padding: 0 4px;
}
.settings-section-heading .eyebrow { margin-bottom: 6px; }
.settings-section-heading > p { margin: 0; color: var(--text-3); font-size: 0.78rem; }

.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.settings-grid-compact { grid-template-columns: minmax(0, 1fr); }
.settings-card {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 112px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: linear-gradient(145deg, var(--glass-2), var(--glass));
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
    overflow: hidden;
    transition: border-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}
.settings-card::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 12% 20%, var(--accent-soft), transparent 42%);
    opacity: 0;
    content: "";
    transition: opacity var(--duration-fast) var(--ease-standard);
}
a.settings-card:hover { border-color: var(--line-2); transform: translateY(-2px); background: var(--glass-2); }
a.settings-card:hover::before { opacity: 1; }
.settings-card-icon {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--glass-3);
    color: var(--text);
    font-size: 1.05rem;
}
.settings-card > div { position: relative; z-index: 1; min-width: 0; }
.settings-card h3 { margin: 0 0 6px; font-size: 0.98rem; letter-spacing: -0.01em; }
.settings-card p { margin: 0; color: var(--text-2); font-size: 0.8rem; line-height: 1.5; }
.settings-card-arrow { position: relative; z-index: 1; color: var(--text-3); font-size: 0.9rem; }
.settings-card-control { grid-template-columns: 44px minmax(0, 1fr) auto; }
.settings-theme-toggle { position: relative; z-index: 1; min-width: 92px; justify-content: center; }

.empty-state {
    display: grid;
    justify-items: center;
    gap: 14px;
    min-height: 420px;
    padding: clamp(36px, 7vw, 82px) 28px;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: radial-gradient(circle at 50% 28%, var(--accent-soft), transparent 33%), var(--glass);
    text-align: center;
    box-shadow: var(--shadow-sm), inset 0 1px rgba(255, 255, 255, 0.025);
}
.empty-state h2 { font-size: clamp(1.45rem, 3vw, 2rem); letter-spacing: -0.035em; }
.empty-state > p:not(.eyebrow) { max-width: 650px; margin: 0; color: var(--text-2); line-height: 1.65; }
.empty-state-orb {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin-bottom: 4px;
    border: 1px solid var(--line-2);
    border-radius: 50%;
    background: var(--glass-2);
    box-shadow: 0 0 36px var(--accent-soft), inset 0 0 20px var(--accent-soft);
}
.empty-state-orb span { width: 24px; height: 24px; border: 1px solid var(--text-2); border-radius: 8px; transform: rotate(45deg); }
.empty-state-steps { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 10px 0 6px; }
.empty-state-steps span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--glass-2); color: var(--text-2); font-size: 0.76rem; }
.empty-state-steps b { color: var(--text-3); font-family: var(--font-mono); font-size: 0.66rem; }
.empty-state-steps i { color: var(--text-3); font-style: normal; }

/* Camera-aperture treatment layered around the bundled animated thinking orb. */
.landing-orb-wrap {
    --landing-orb-size: clamp(94px, 9vw, 116px);
    width: var(--landing-orb-size);
    height: var(--landing-orb-size);
}
.landing-orb-ring {
    width: var(--landing-orb-size);
    height: var(--landing-orb-size);
    border: 0;
    background:
        radial-gradient(circle, transparent 0 39%, color-mix(in srgb, var(--text) 36%, transparent) 40% 41%, transparent 42%),
        repeating-conic-gradient(from 15deg, color-mix(in srgb, var(--text) 42%, transparent) 0deg 1.5deg, transparent 1.5deg 60deg);
    box-shadow: 0 0 10px color-mix(in srgb, var(--text) 24%, transparent), 0 0 52px var(--accent-soft), inset 0 0 28px var(--accent-soft);
}
.landing-orb-ring::before,
.landing-orb-ring::after {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    content: "";
}
.landing-orb-ring::before { inset: 7px; border: 1px solid color-mix(in srgb, var(--text) 42%, transparent); }
.landing-orb-ring::after { inset: -6px; border: 1px dashed color-mix(in srgb, var(--text) 17%, transparent); animation: landing-aperture-spin 24s linear infinite; }
@keyframes landing-aperture-spin { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
    .settings-grid { grid-template-columns: minmax(0, 1fr); }
    .settings-section-heading { align-items: start; flex-direction: column; gap: 6px; }
    .settings-card { min-height: 104px; padding: 17px; border-radius: 19px; }
    .settings-card-control { grid-template-columns: 40px minmax(0, 1fr); }
    .settings-card-control .settings-theme-toggle { grid-column: 1 / -1; width: 100%; }
    .empty-state { min-height: 360px; border-radius: 22px; }
    .empty-state-steps i { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .landing-orb-ring::after { animation: none; }
}

/* AgneticOS chat: one persistent history column; the conversation reflows. */
.chat-page .shell { grid-template-columns: minmax(0, 1fr); }
.chat-page .sidebar { position: fixed; z-index: 82; inset: 0 auto 0 0; width: min(300px, 86vw); height: 100dvh; transform: translateX(-110%); transition: transform .22s ease; border-radius: 0 24px 24px 0; }
.chat-page.nav-open .sidebar { transform: none; }
.chat-page .mobile-menu { display: inline-flex; }
.chat-page .content { min-height: 0; }
.chat-page .chat-shell, .chat-page .chat-shell.changes-open { grid-template-columns: clamp(172px, 21vw, 268px) minmax(0, 1fr); position: relative; transition: grid-template-columns .25s ease; }
.chat-page .chat-shell.rail-collapsed { grid-template-columns: minmax(0, 1fr); }
.chat-page .conv-rail { position: relative; z-index: auto; inset: auto; width: auto; height: 100%; padding-top: 0; border-radius: 20px; transform: none; transition: opacity .2s ease; box-shadow: var(--shadow-sm); }
.chat-page .conv-rail[hidden] { display: none !important; }
.chat-page .chat-shell::before, .chat-page .chat-rail-backdrop { display: none !important; }
.chat-page .rail-toggle, .chat-pane-body .rail-toggle { display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 12px; font-size: 19px; }
.chat-page .chat-workspace-header { justify-content: flex-start; }
.chat-page .chat-workspace-label { color: var(--text-2); font-size: .85rem; font-weight: 600; }
.chat-page .chat-main:has(.chat-workspace-home) { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.chat-page .chat-workspace-home { position: relative; inset: auto; min-height: 0; width: 100%; }
.chat-page .chat-home-copy { display: grid; justify-items: center; gap: 12px; }
.chat-page .chat-home-copy h1 { margin: 0; font-size: clamp(1.65rem, 6vw, 4rem); letter-spacing: -.06em; }
.chat-page .chat-home-copy p { font-size: clamp(1rem, 2vw, 1.3rem); }
.ag-os-orb { display: block; width: 92px; height: 92px; border-radius: 50%; border: 2px solid rgba(235,240,250,.82); background: radial-gradient(circle at 35% 30%, rgba(220,230,245,.3), transparent 42%), radial-gradient(circle at 55% 70%, rgba(200,210,225,.18), transparent 55%); box-shadow: 0 0 14px rgba(230,240,255,.3), 0 0 55px rgba(210,225,245,.12), inset 0 0 22px rgba(230,235,245,.16); animation: ag-os-breathe 5s ease-in-out infinite; }
.ag-os-orb.small { width: 48px; height: 48px; border-width: 1px; }
@keyframes ag-os-breathe { 50% { transform: scale(1.06); box-shadow: 0 0 24px rgba(230,240,255,.5), 0 0 72px rgba(210,225,245,.18), inset 0 0 28px rgba(230,235,245,.21); } }
.chat-page .chat-home { width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr); align-content: center; justify-content: stretch; padding-inline: clamp(8px, 3vw, 28px); }
.chat-page .chat-home form { width: min(760px, 100%); min-width: 0; justify-self: center; }
.chat-page .home-composer { width: 100%; border-radius: 26px; }
.chat-page .chat-workspace-home { background: radial-gradient(ellipse 42% 48% at 50% 47%, rgba(155,170,200,.09), transparent 90%), var(--bg); }
@media (max-width: 640px) { .chat-page .content { padding: 8px; } .chat-page .chat-shell { gap: 8px; } .chat-page .chat-shell, .chat-page .chat-shell.changes-open { grid-template-columns: clamp(148px, 40vw, 190px) minmax(0, 1fr); } .chat-page .chat-shell.rail-collapsed { grid-template-columns: minmax(0, 1fr); } .chat-page .chat-home-copy { padding-inline: 12px; } .chat-page .chat-home form { width: 100%; } .chat-page .home-composer { width: 100%; } .chat-page .host-metrics { display: none; } .chat-page .chat-header-right { display: none; } }
@media (prefers-reduced-motion: reduce) { .chat-page .sidebar, .chat-page .conv-rail, .ag-os-orb { animation: none; transition: none; } }

.nav-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 29; border: 0; background: rgba(0,0,0,.4); cursor: default; }
.chat-page .nav-backdrop:not([hidden]) { z-index: 81; }
.landing-page .nav-backdrop:not([hidden]) { z-index: 39; }

.settings-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 28px; align-items: start; }
.settings-index { position: sticky; top: 86px; display: grid; gap: 3px; padding: 8px; border: 1px solid var(--line); border-radius: 18px; background: var(--glass); }
.settings-index a { padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--text-2); font-size: .83rem; }
.settings-index a:hover, .settings-index a:focus-visible { background: var(--glass-2); color: var(--text); }
.settings-layout .settings-table { display: none; margin: 0; }
.settings-layout .settings-table:first-child { display: block; }
.settings-layout:has(.settings-table:target) .settings-table:first-child { display: none; }
.settings-layout .settings-table:target { display: block; animation: settings-reveal .24s ease-out both; }
.settings-index a[href="#account"] { background: var(--glass-2); color: var(--text); font-weight: 650; }
.settings-layout:has(.settings-table:target) .settings-index a[href="#account"] { background: transparent; color: var(--text-2); font-weight: 400; }
.settings-layout:has(#appearance:target) .settings-index a[href="#appearance"], .settings-layout:has(#agent:target) .settings-index a[href="#agent"], .settings-layout:has(#notifications:target) .settings-index a[href="#notifications"], .settings-layout:has(#devices:target) .settings-index a[href="#devices"], .settings-layout:has(#administration:target) .settings-index a[href="#administration"], .settings-layout:has(#account:target) .settings-index a[href="#account"] { background: var(--glass-2); color: var(--text); font-weight: 650; }
.settings-layout.settings-ready .settings-table:not([hidden]) { display: block; }
.settings-layout.settings-ready .settings-table[hidden] { display: none !important; }
.settings-layout.settings-ready .settings-index a { background: transparent; color: var(--text-2); font-weight: 400; }
.settings-layout.settings-ready .settings-index a[aria-current="page"] { background: var(--glass-2); color: var(--text); font-weight: 650; }
@keyframes settings-reveal { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .settings-layout .settings-table:target { animation: none; } }
.settings-tables { display: grid; gap: 20px; min-width: 0; }
.settings-table { overflow: hidden; margin-bottom: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--glass); }
.settings-table h2 { margin: 0; padding: 18px 22px; font-size: 1.04rem; border-bottom: 1px solid var(--line); }
.setting-row { display: grid; grid-template-columns: minmax(190px, 2fr) minmax(120px, 1fr) minmax(100px, auto); align-items: center; gap: 18px; padding: 15px 22px; margin: 0; border-bottom: 1px solid var(--line); font-size: .84rem; }
.setting-row:last-child { border-bottom: 0; }
.setting-row > div:first-child { min-width: 0; }
.setting-row strong { color: var(--text); font-weight: 620; }
.setting-row small { display: block; margin-top: 4px; color: var(--text-3); font-size: .76rem; line-height: 1.4; }
.setting-row > span, .setting-row > time { color: var(--text-2); }
.setting-row > a { justify-self: end; color: var(--text); text-decoration: none; border: 1px solid var(--line); padding: 7px 12px; border-radius: 10px; }
.setting-row > a:hover { background: var(--glass-2); }
.setting-row select { width: 100%; max-width: 270px; }
.setting-row button { justify-self: end; }
.setting-row .muted { color: var(--text-3); font-size: .76rem; }
.row-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.row-actions form { margin: 0; }
.record-pagination { display: flex; align-items: center; justify-content: center; gap: 18px; margin: -4px 0 22px; color: var(--text-3); font-size: .82rem; }
.record-pagination a { color: var(--text); text-decoration: none; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; }
.record-pagination a:hover { background: var(--glass-2); }
.audit-detail { margin-top: 8px; color: var(--text-2); font-size: .76rem; }
.audit-detail summary { cursor: pointer; }
.audit-detail pre { max-width: min(100%, 720px); overflow: auto; white-space: pre-wrap; word-break: break-word; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--glass-2); }
.device-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr)); gap: 16px; }
.device-card { display: flex; gap: 16px; min-height: 180px; padding: 24px; border: 1px solid var(--line); border-radius: 22px; background: var(--glass); }
.device-glyph { display: grid; place-items: center; flex: 0 0 48px; height: 48px; border-radius: 15px; border: 1px solid var(--line); background: var(--glass-2); font-size: 24px; }
.device-card h2 { margin: 8px 0; font-size: 1.2rem; }
.device-card p { margin: 0 0 12px; color: var(--text-2); line-height: 1.5; }
.device-card small { color: var(--text-3); }
.device-preview { border-style: dashed; }
.device-instances { margin-top: 22px; }
.device-table-scroll { overflow-x: auto; }
.device-instances table { min-width: 690px; }
.device-instances td small { display: block; margin-top: 4px; color: var(--text-3); }
.device-instances code { white-space: nowrap; font-size: .78rem; }
.device-instances .row-actions { flex-wrap: nowrap; }
.device-form { max-width: 980px; display: grid; gap: 18px; }
.device-form-section { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(0, 2fr); gap: 28px; padding: 26px; border: 1px solid var(--line); border-radius: 22px; background: var(--glass); }
.device-form-intro h2 { margin: 8px 0; font-size: 1.1rem; }
.device-form-intro p { color: var(--text-2); font-size: .83rem; line-height: 1.5; }
.device-form-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.device-form .field { display: grid; align-content: start; gap: 7px; min-width: 0; }
.device-form .field-wide { grid-column: 1 / -1; }
.device-form .field label { font-size: .8rem; font-weight: 620; }
.device-form .field input:not([type="checkbox"]), .device-form .field select, .device-form .field textarea { width: 100%; }
.device-form .field small { color: var(--text-3); font-size: .75rem; line-height: 1.4; }
.device-form .field-check { display: block; }
.device-form-advanced { border: 1px solid var(--line); border-radius: 16px; background: var(--glass); }
.device-form-advanced summary { cursor: pointer; padding: 16px 22px; font-weight: 600; }
.device-form-advanced .device-form-fields { padding: 0 22px 22px; }
.device-form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 18px; }
.device-form-actions > a { color: var(--text-2); }
@media (max-width: 760px) { .device-form-section { grid-template-columns: minmax(0,1fr); gap: 16px; padding: 20px; } }
@media (max-width: 520px) { .device-form-fields { grid-template-columns: minmax(0,1fr); } }
.schedule-form { display: grid; gap: 18px; max-width: 720px; padding: 26px; border: 1px solid var(--line); border-radius: 20px; background: var(--glass); }
.schedule-form label { display: grid; gap: 7px; font-size: .83rem; color: var(--text-2); }
.schedule-form input, .schedule-form select, .schedule-form textarea { width: 100%; }
/* A dimensional lens rather than a flat spinner: independent, slow light layers. */
.landing-page .shell, .landing-page main, .landing-page .content { width: 100vw; max-width: 100vw; margin: 0; }
.landing-page .content { justify-items: center; }
.landing-page .sidebar { margin: 0; height: 100dvh; width: min(320px, 88vw); border-radius: 0 24px 24px 0; padding-top: max(32px, env(safe-area-inset-top)); }
.landing-page.nav-open .landing-menu { display: none; }
.landing-page .brand { padding: 0 8px; }
.brand-word small { display: block; font-size: .65rem; font-weight: 500; letter-spacing: .11em; color: var(--text-3); }
.landing-orb-wrap { position: relative; isolation: isolate; }
.landing-orb-wrap::before { content: ''; position: absolute; z-index: -1; inset: -68px; border-radius: 50%; background: radial-gradient(circle, rgba(190,205,230,.15), rgba(175,190,225,.04) 45%, transparent 72%); filter: blur(14px); animation: ag-os-halo 8s ease-in-out infinite; }
.landing-orb-ring { position: relative; display: grid; place-items: center; border: 0; background: transparent; box-shadow: none; }
.landing-orb-ring::before { inset: 0; border: 1px solid rgba(232,238,248,.18); box-shadow: inset 0 0 22px rgba(226,235,250,.12), 0 0 30px rgba(218,229,246,.1); animation: ag-os-orbit 18s linear infinite; }
.landing-orb-ring::after { inset: -12px; border: 1px dashed rgba(225,233,246,.12); animation: ag-os-orbit 34s linear infinite reverse; }
.landing-orb-ring .ag-os-orb { position: relative; width: 72%; height: 72%; border: 1px solid rgba(246,248,255,.78); background: radial-gradient(circle at 36% 26%, rgba(244,248,255,.34), transparent 26%), radial-gradient(circle at 62% 70%, rgba(164,181,218,.2), transparent 55%), linear-gradient(132deg, rgba(255,255,255,.13), rgba(85,100,138,.07) 49%, rgba(245,248,255,.16)); box-shadow: inset 0 0 14px rgba(255,255,255,.15), inset -10px -12px 25px rgba(30,40,64,.3), 0 0 25px rgba(230,240,255,.28), 0 0 78px rgba(210,224,250,.11); animation: ag-os-float 6.5s ease-in-out infinite; }
.landing-orb-ring .ag-os-orb::after { content: ''; position: absolute; inset: 10%; border-radius: 50%; background: conic-gradient(from 40deg, transparent, rgba(235,242,255,.2), transparent 38%, rgba(180,197,230,.12), transparent 74%); filter: blur(7px); animation: ag-os-orbit 12s linear infinite; }
@keyframes ag-os-orbit { to { transform: rotate(360deg); } }
@keyframes ag-os-float { 50% { transform: translateY(-5px) scale(1.035); filter: brightness(1.16); } }
@keyframes ag-os-halo { 50% { transform: scale(1.16); opacity: .65; } }
@media (max-width: 880px) { .settings-layout { grid-template-columns: minmax(0,1fr); gap: 18px; } .settings-index { position: static; display: flex; overflow-x: auto; white-space: nowrap; } }
@media (max-width: 630px) { .setting-row { grid-template-columns: minmax(0,1fr) auto; gap: 10px; padding: 15px; } .setting-row > div:first-child { grid-column: 1 / -1; } .setting-row > a, .setting-row > button { justify-self: end; } .settings-table h2 { padding: 16px; } }
@media (prefers-reduced-motion: reduce) { .landing-orb-wrap::before, .landing-orb-ring::before, .landing-orb-ring::after, .landing-orb-ring .ag-os-orb, .landing-orb-ring .ag-os-orb::after { animation: none; } }