/* ============================================================
   Layout — Top bar, sidebar, main content grid
   ============================================================ */

/* ── Top Bar ───────────────────────────────────────────────── */

.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 20px 7px 12px;
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--topbar-border);
    position: relative;
    z-index: 20;
    flex-shrink: 0;
}

.top-bar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Top Nav Tabs ─────────────────────────────────────────── */

.top-nav-tabs {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-left: 24px;
    margin-right: auto;
    flex: 1 1 auto;
    min-width: 0; /* the row takes the room the bar leaves; tabs that do not fit go under More (nav_tabs.js, #3816) */
    position: relative;
}

.top-nav-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-size: var(--fs-md);
    font-weight: 500;
    font-family: var(--font-sans);
    cursor: pointer;
    padding: 4px 0 6px;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
    flex: 0 0 auto;
    min-height: var(--control-height);
}

.top-nav-tab:hover {
    color: var(--text-primary);
}

.top-nav-tab.active {
    color: var(--text-primary);
    border-bottom-color: var(--accent);
    font-weight: 600;
}

/* The Inbox tab's badge: how many agents wait for input (#4718). */
.nav-tab-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    min-width: 16px;
    border-radius: var(--radius-lg);
    /* 11px text: the unread red alone is 3.9:1 with white in the dark theme, so it is darkened here (5.5:1 dark, higher in light). */
    background: color-mix(in srgb, var(--rail-badge-unread) 82%, #000);
    color: var(--rail-badge-text);
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    vertical-align: 1px;
}
.nav-tab-badge[hidden] { display: none; }
.nav-more-item .nav-more-badge { margin-left: auto; }
.top-nav-tab.nav-overflowed { display: none; }
.nav-more-wrap { display: flex; flex: 0 0 auto; }
/* The row is text only; More shows a small chevron. */
.top-nav-tab .material-icons { display: none; }
.nav-more-btn .material-icons { display: inline-block; font-size: 1rem; vertical-align: -3px; margin-left: 2px; }

/* The More menu (the row's, when tabs do not fit) and the phone's view list share one element. */
.nav-more-menu {
    position: fixed;
    z-index: 60;
    min-width: 180px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-ml);
    padding: 4px;
    box-shadow: 0 8px 24px rgba(var(--black-rgb), 0.4);
}
.nav-more-menu[hidden] { display: none; }
.nav-more-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    background: none;
    border: none;
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font: inherit;
    cursor: pointer;
    text-align: left;
}
.nav-more-item:hover, .nav-more-item.active { background: var(--bg-tertiary); }
.nav-more-item .material-icons { color: var(--text-secondary); font-size: 1.25rem; }
/* Icons only in the phone's list of views. */
.nav-more-menu:not(.nav-all) .nav-more-item .material-icons { display: none; }

/* The phone's current-view dropdown (<= 767 px: mobile.css shows it in place of the row). */
.nav-select { display: none; }

.top-bar-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.top-bar h1 {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.top-bar .btn-primary {
    font-size: 0.75rem;
    padding: 5px 14px;
}

.startup-loading {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 0.8125rem;
    padding: 4px 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    animation: startup-fade 1.5s ease-in-out infinite alternate;
}

.startup-loading.hidden { display: none; }

.startup-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: startup-spin 0.8s linear infinite;
}

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

@keyframes startup-fade {
    from { opacity: 0.6; }
    to { opacity: 1; }
}

.top-bar-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.top-bar-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    transition: color 0.15s, background 0.15s;
}

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

/* ── Layout Grid ───────────────────────────────────────────── */

.layout {
    display: flex;
    flex: 1;
    min-height: 0;
    height: auto;
}

/* ── Sidebar ───────────────────────────────────────────────── */

.sidebar {
    width: 320px;
    min-width: 200px;
    max-width: 50vw;
    background: var(--bg-secondary);
    border-right: none;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

body.panel-dragging .sidebar {
    contain: layout style;
}

/* ── Sidebar Footer (+ New button) ────────────────────────── */

.sidebar-header {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    /* The search box, the server button and the icon buttons share one height (#4062). */
    --ctl-h: 36px;
}

.sidebar-footer {
    padding: 12px 12px 20px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    margin-top: auto;
    display: flex;
}

.sidebar-search {
    flex: 1;
    min-width: 0;
    position: relative;
}

.sidebar-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

.sidebar-search-input {
    width: 100%;
    height: var(--ctl-h, 36px);
    box-sizing: border-box;
    padding: 0 10px 0 30px;
    background: var(--bg-primary);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.8125rem;
}

.sidebar-search-input:focus { outline: none; border-color: var(--accent); }

.sidebar-header {
    display: flex;
    gap: 8px;
    align-items: center;
}

.sidebar-collapse-btn,
.sidebar-rail-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sidebar-collapse-btn { width: var(--ctl-h, 36px); height: var(--ctl-h, 36px); }
.sidebar-rail-btn { width: 40px; height: 40px; }
.sidebar-collapse-btn:hover,
.sidebar-rail-btn:hover { color: var(--text-primary); background: var(--bg-hover); }

/* Collapsed icon rail (desktop only) */
.sidebar-rail { display: none; }

@media (min-width: 768px) {
    .layout.sidebar-collapsed > .sidebar {
        width: 56px !important;
        min-width: 56px;
        overflow: hidden;
        align-items: center;
    }
    .layout.sidebar-collapsed > .sidebar > :not(.sidebar-rail) { display: none; }
    .layout.sidebar-collapsed > .sidebar-resize-handle { pointer-events: none; }
    .layout.sidebar-collapsed .sidebar-rail {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        width: 100%;
        height: 100%;
        padding: 8px 0;
        box-sizing: border-box;
    }
    .sidebar-rail-list {
        flex: 1;
        min-height: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 7px;
        overflow-y: auto;
        scrollbar-width: none;
    }
    .sidebar-rail-list::-webkit-scrollbar { display: none; }
    .sidebar-rail-item {
        position: relative;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        flex-shrink: 0;
    }
    .rail-tile {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 3px;
        width: 44px;
        height: 28px;
        box-sizing: border-box;
        border-radius: var(--radius-lg);
        /* The expanded list's look, from its own tokens (operator, #4184): no tile of its own, the
           initials in the colour of the agent's name in its row (session.css .session-label-name),
           the row's hover and selected backgrounds. */
        background: transparent;
        color: var(--agent-name-color, var(--text-secondary));
        font: 600 0.6875rem/1 var(--font-sans);
        transition: background 0.12s, color 0.12s;
    }
    /* The palette is tuned for dark backgrounds: deepen it on light themes, as the full list does. */
    [data-theme="light"] .rail-tile[style] { color: color-mix(in srgb, var(--agent-name-color) 62%, black); }
    .sidebar-rail-item:hover .rail-tile { background: var(--bg-hover, rgba(var(--white-rgb), 0.045)); }
    .sidebar-rail-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-lg); }
    /* Selected: the selected row's soft accent tile, and its name's primary colour */
    .sidebar-rail-item.active .rail-tile { background: rgba(var(--accent-rgb), 0.14); }
    .sidebar-rail-item.active .rail-tile:not([style]) { color: var(--text-primary); }
    .sidebar-rail-item.active:hover .rail-tile { background: rgba(var(--accent-rgb), 0.17); }
    .rail-tile .rail-tile-icon { font-size: 0.625rem !important; width: 10px; height: 10px; line-height: 10px; }
    .rail-tile-emoji { font-size: 0.5625rem; line-height: 1; }
    .rail-tile-badge {
        position: absolute;
        top: -5px;
        right: -4px;
        min-width: 14px;
        height: 14px;
        padding: 0 3px;
        box-sizing: border-box;
        border-radius: 7px;
        font: 700 0.5625rem/0.875rem var(--font-sans);
        text-align: center;
        color: var(--rail-badge-text);
        border: 1.5px solid var(--bg-secondary);
    }
    .rail-tile-unread { background: var(--rail-badge-unread); }
    .rail-tile-done { background: var(--rail-badge-done); font-size: 0.625rem; line-height: 11px; }
    .rail-tile-dot { bottom: -3px; right: -3px; width: 9px; height: 9px; }
    .sidebar-rail-btn:last-child { border: 1px dashed var(--border); border-radius: var(--radius-lg); width: 40px; height: 32px; }
    .sidebar-rail-group {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 3px;
        width: 44px;
        height: 24px;
        margin-top: 8px;
        padding: 0;
        flex-shrink: 0;
        /* A team's header in the list: bold text with no fill, in the colour the user picked for the
           team (--team-accent, as session.css), else the headers' step down from the primary text. */
        background: transparent;
        border: none;
        border-radius: var(--radius-md);
        color: var(--team-accent, color-mix(in srgb, var(--text-primary) 82%, transparent));
        cursor: pointer;
    }
    .sidebar-rail-group:first-child { margin-top: 0; }
    .sidebar-rail-group:hover { background: var(--bg-hover, rgba(var(--white-rgb), 0.045)); }
    .sidebar-rail-group.collapsed { opacity: 0.55; }
    .sidebar-rail-letter { font: 600 0.6875rem/1 var(--font-sans); }
}

.sidebar-footer .sidebar-new-btn-full {
    flex: 1;
    min-width: 0;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.layout.sidebar-hidden > .sidebar,
.layout.sidebar-hidden > .sidebar-resize-handle,
.layout.sidebar-hidden > .tablet-sidebar-backdrop {
    display: none;
}

.sidebar-resize-handle {
    width: 1px;
    cursor: col-resize;
    background: var(--border);
    flex-shrink: 0;
    transition: background 0.15s;
    position: relative;
}

.sidebar-resize-handle:hover,
.sidebar-resize-handle.dragging {
    background: var(--accent);
}

/* Keep the divider visually thin while providing a comfortable drag target. */
.sidebar-resize-handle::before {
    content: '';
    position: absolute;
    inset: 0 -4px;
}

.sidebar-section {
    padding: 12px 2px 12px 10px;
}

.sidebar-section:last-child {
    border-bottom: none;
    flex: 1;
    overflow-y: auto;
}

.sidebar-section.collapsed .sidebar-section-body {
    display: none;
}

.sidebar-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px 8px 12px;
    cursor: pointer;
    user-select: none;
}

.sidebar-section-header:hover {
    background: rgba(var(--white-rgb), 0.02);
}

.sidebar-section-header h2 {
    padding: 0;
}

.sidebar-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
}

.section-count-badge {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    padding: 0 6px;
    line-height: 16px;
    min-width: 16px;
    text-align: center;
}

/* ── Sidebar Subtabs ───────────────────────────────────────── */

.sidebar-subtabs {
    display: flex;
    gap: 2px;
    padding: 0 12px 8px;
}

.sidebar-subtab {
    flex: 1;
    padding: 4px 8px;
    font-size: var(--fs-md);
    font-weight: 500;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
    min-height: var(--control-compact-height);
}

.sidebar-subtab.active {
    background: var(--bg-tertiary);
    border-color: var(--accent-dim);
    color: var(--text-primary);
}

.sidebar-subtab:hover:not(.active) {
    background: var(--bg-hover);
}

.subtab-count:empty {
    display: none;
}

.subtab-count {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    margin-left: 2px;
}

.sidebar-new-btn-full {
    width: 100%;
    padding: 8px 0;
    font-size: var(--fs-md);
    font-weight: 600;
    font-family: inherit;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
}

/* Top-bar settings dropdown */
.top-bar-settings-wrapper {
    position: relative;
}

.top-bar-settings-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 180px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 4px 0;
    box-shadow: 0 8px 24px rgba(var(--black-rgb), 0.3);
    z-index: 1000;
}

.sidebar-section h2 {
    font-size: var(--fs-base);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: normal;
    color: var(--text-secondary);
    padding: 0 16px 8px;
}

.sidebar-section .sidebar-section-header h2 {
    font-size: 0.875rem;
    text-transform: none;
    letter-spacing: normal;
    color: var(--text-primary);
    padding: 0;
}

/* ── History Search & Filters ──────────────────────────────── */

.history-filters {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 12px 8px;
}

.history-filters input[type="search"] {
    width: 100%;
    padding: 5px 10px;
    background: var(--bg-primary);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-size: 0.75rem;
    outline: none;
}

.history-filters input[type="search"]:focus {
    border-color: var(--accent);
}

/* ── Advanced Filter Panel ─────────────────────────────────── */

.hf-search-row {
    display: flex;
    gap: 6px;
    align-items: center;
}

.hf-search-row input[type="search"] {
    flex: 1;
    min-width: 0;
}

.hf-adv-btn {
    flex-shrink: 0;
    position: relative;
    padding: 5px 8px;
}

.hf-active-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--accent);
    color: var(--bg-primary);
    border-radius: var(--radius-ml);
    font-size: var(--fs-sm);
    font-weight: 700;
    min-width: 14px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    padding: 0 2px;
}

.hf-advanced {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 0 4px;
    border-top: 1px solid var(--border);
    margin-top: 2px;
}

.hf-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-height: 22px;
}

.hf-label {
    font-size: var(--fs-base);
    color: var(--text-muted);
    min-width: 44px;
    flex-shrink: 0;
}

.hf-toggle-group {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
}

.hf-toggle {
    padding: 2px 8px;
    font-size: var(--fs-md);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-xs);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s;
}

.hf-toggle.active {
    background: var(--accent-dim);
    border-color: var(--accent);
    color: var(--text-on-accent);
}

.hf-toggle:hover:not(.active) {
    background: var(--bg-hover);
}

.hf-tag-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.hf-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px;
    border-radius: var(--radius-ml);
    font-size: 0.6875rem;
    background: var(--accent-dim);
    color: var(--text-on-accent);
}

.hf-tag-remove {
    cursor: pointer;
    opacity: 0.75;
    font-size: 0.8125rem;
    line-height: 1;
}

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

.hf-tag-add-select {
    max-width: 90px;
    padding: 2px 4px;
    background: var(--bg-tertiary);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: var(--fs-md);
    outline: none;
    cursor: pointer;
}

.hf-tag-add-select:focus {
    border-color: var(--accent);
}

.hf-date {
    flex: 1;
    min-width: 0;
    padding: 3px 6px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--fs-md);
    outline: none;
}

.hf-date:focus {
    border-color: var(--accent);
}

.hf-dur-input {
    width: 50px;
    padding: 3px 5px;
    background: var(--bg-tertiary);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--fs-md);
    outline: none;
}

.hf-dur-input:focus {
    border-color: var(--accent);
}

.hf-dur-sep,
.hf-dur-unit {
    font-size: var(--fs-base);
    color: var(--text-muted);
}

.hf-clear-btn {
    align-self: flex-start;
    font-size: var(--fs-md);
    color: var(--text-muted);
    margin-top: 2px;
}

/* ── Main Content ──────────────────────────────────────────── */

.main-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

/* The views and the right sidebar share a row (#4539): the sidebar is part of the app layout, so it is on every page. */
.main-row {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

.main-stage {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.main-stage > .session-view {
    flex: 1 1 0;
    min-height: 0;
}

/* ── Welcome Screen ────────────────────────────────────────── */

.welcome {
    /* In normal flow, filling what is left of the main area: the banners above it (hook set, auto-wake, leftover tmux)
       take their own room instead of being drawn under, or over, a screen that covers everything (#3729). */
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    --welcome-preset-card-width: 190px;
    --welcome-preset-gap: 14px;
    --welcome-preset-columns: 3;
    --welcome-row-width: min(
        calc(
            (var(--welcome-preset-card-width) * var(--welcome-preset-columns)) +
            (var(--welcome-preset-gap) * (var(--welcome-preset-columns) - 1))
        ),
        calc(100vw - 32px)
    );
    flex-direction: column;
    align-items: center;
    /* Centered when there is room, from the top (and scrollable) when there is not: justify-content: center would
       push the top of a too-tall screen out of reach, as when a banner above takes room (#3729). */
    justify-content: flex-start;
    overflow-y: auto;
    color: var(--text-secondary);
    gap: 8px;
}
.welcome > :first-child { margin-top: auto; }
.welcome > :last-child { margin-bottom: auto; }

.welcome h2 {
    font-size: 1.25rem;
    margin-bottom: 4px;
    font-weight: 600;
    color: var(--text-primary);
}

.welcome p {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 16px;
}

    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    width: var(--welcome-row-width);
    margin-bottom: 8px;

/* Simplified launch page */
.welcome {
    display: block;
    padding: clamp(36px, 7vh, 80px) 28px;
}
.welcome-shell { width: min(640px, 100%); margin: 0 auto; }
.welcome-header { margin-bottom: 30px; }
.welcome-eyebrow { display: block; margin-bottom: 10px; color: var(--accent); font-size: 0.6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.welcome-header h1 { margin: 0 0 8px; color: var(--text-primary); font-size: clamp(1.625rem, 3.4vw, 2.375rem); line-height: 1.15; letter-spacing: -.035em; }
.welcome-header p { margin: 0; color: var(--text-secondary); font-size: 0.875rem; }
.welcome-launch:hover { border-color: var(--border-light); background: var(--bg-tertiary); } /* --bg-hover takes the muted line under 4.5:1 (#4218) */
.welcome-connect { display: none; align-items: center; flex-wrap: wrap; gap: 14px 16px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-secondary); }
/* Coral Hub with no machine connected (#4586): the connect card stands in for the launch cards, which have nowhere to launch. */
body.hub-no-machine .welcome-first-run, body.hub-machines-offline .welcome-offline { display: flex; }
body.hub-no-machine .welcome-launch-list, body.hub-no-machine .welcome-header p, body.hub-machines-offline .welcome-launch-list, body.hub-machines-offline .welcome-header p { display: none; }
.welcome-connect-icon { display: flex; align-items: center; justify-content: center; width: 2.625rem; height: 2.625rem; border-radius: 11px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); flex: none; }
.welcome-connect-copy { flex: 1 1 14rem; min-width: 0; }
.welcome-connect-copy h2 { margin: 0 0 4px; font-size: 0.9375rem; color: var(--text-primary); }
.welcome-connect-copy p + p { margin-top: 4px; }
.welcome-connect-copy p { margin: 0; font-size: 0.8125rem; line-height: 1.45; color: var(--text-secondary); }
.hub-connect-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 12px; font-style: normal; }
.hub-connect-empty strong { color: var(--text-primary); font-size: 0.8125rem; }
.session-list li.hub-connect-empty { font-style: normal; }
.session-list li.hub-connect-empty .btn { margin: 0; } /* in line with the text above it */
.welcome-launch-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } /* agent, team, Open folder (#3630) */
.welcome-launch { position: relative; display: flex; border: 1px solid var(--border); font-family: inherit; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; padding: 20px; border-radius: 14px; background: var(--bg-secondary); color: var(--text-secondary); text-align: left; }
.welcome-launch:hover { transform: translateY(-1px); }
.welcome-launch .welcome-launch-icon { display: flex; align-items: center; justify-content: center; width: 2.625rem; height: 2.625rem; border-radius: 11px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-size: 1.3125rem; line-height: 1; }
.welcome-launch-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.welcome-launch-copy strong { color: var(--text-primary); font-size: 0.9375rem; }
.welcome-launch-copy span { color: var(--text-muted); font-size: 0.75rem; line-height: 1.45; }
.welcome-launch .welcome-launch-arrow { position: absolute; top: 20px; right: 20px; color: var(--text-muted); font-size: 1.1875rem; }
.welcome-launch:hover .welcome-launch-arrow { color: var(--accent); }
.welcome-links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 28px; }
.welcome-links a,
.welcome-links button { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 0.8125rem; text-decoration: none; background: none; border: none; padding: 0; font-family: inherit; cursor: pointer; }
.welcome-links a:hover,
.welcome-links button:hover { color: var(--accent); }
.welcome-links .material-icons { font-size: 1.0625rem; color: var(--text-muted); }
.welcome-links a:hover .material-icons,
.welcome-links button:hover .material-icons { color: var(--accent); }

/* More ways to run Coral (#3221): a quiet section under the launch cards, never above them */
.editions-home { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border); }
.editions-home[hidden] { display: none; }
.editions-home-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.editions-home-head h2 { margin: 0; color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.editions-home-hide { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: none; border-radius: var(--radius-md); background: none; color: var(--text-muted); cursor: pointer; }
.editions-home-hide:hover, .editions-home-hide:focus-visible { color: var(--text-primary); background: var(--bg-hover); }
.editions-home-hide .material-icons { font-size: 1.125rem; }
@media (pointer: coarse), (max-width: 1024px) { .editions-home-hide { width: 44px; height: 44px; margin: -8px -8px -8px 0; } }
.editions-home-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.editions-home-item { position: relative; display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 14px 40px 14px 14px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: transparent; color: var(--text-secondary); font-family: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.editions-home-item:hover, .editions-home-item:focus-visible { border-color: var(--border-light); background: var(--bg-tertiary); } /* as .welcome-launch (#4218) */
.editions-home-icon { flex-shrink: 0; color: var(--text-muted); font-size: 1.25rem; }
.editions-home-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.editions-home-copy strong { color: var(--text-primary); font-size: 0.875rem; font-weight: 600; }
.editions-home-copy span { color: var(--text-muted); font-size: 0.75rem; line-height: 1.45; }
.editions-home-copy code, .editions-content code { white-space: nowrap; padding: 0 4px; border-radius: var(--radius-sm); background: var(--bg-tertiary); color: var(--text-primary); font-size: .95em; }
.editions-home-arrow { position: absolute; top: 14px; right: 14px; color: var(--text-muted); font-size: 1.0625rem; }
.editions-home-item:hover .editions-home-arrow { color: var(--accent); }

/* The first-launch "Connect to Coral Hub" screen */
.editions-modal .editions-content { width: 520px; gap: 0; }
.editions-title { margin: 0 0 6px; color: var(--text-primary); font-size: 1.25rem; line-height: 1.25; }
.editions-sub { margin: 0 0 18px; color: var(--text-secondary); font-size: 0.8125rem; line-height: 1.5; }
.editions-cloud { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--bg-primary); }
.editions-status { color: var(--text-primary); font-size: 0.875rem; line-height: 1.45; }
.editions-code { color: var(--text-secondary); font-size: 0.8125rem; }
.editions-code[hidden], .editions-mode[hidden], .editions-cloud [hidden] { display: none; }
.editions-code a { color: var(--accent); word-break: break-all; }
.editions-usercode { margin-top: 6px; color: var(--text-primary); font: 600 1.5rem/1.2 var(--font-mono, monospace); letter-spacing: .12em; user-select: all; }
.editions-cloud-actions { display: flex; gap: 8px; }
.editions-cloud-actions:not(:has(> :not([hidden]))) { display: none; }
.cloud-command-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cloud-command-row[hidden] { display: none; }
.cloud-command-row code { padding: 4px 8px; border-radius: var(--radius-md); background: var(--bg-tertiary); color: var(--text-primary); font-size: 0.8125rem; user-select: all; }
.editions-mode { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.editions-mode label { color: var(--text-primary); font-size: 0.8125rem; font-weight: 500; }
.editions-auto-accept { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 0.8125rem; }
.editions-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.editions-actions-spacer { flex: 1; }
.editions-actions .btn.editions-own { padding-left: 0; padding-right: 0; background: none; border-color: transparent; box-shadow: none; color: var(--accent); }
.editions-actions .btn.editions-own:hover, .editions-actions .btn.editions-own:focus-visible { background: none; text-decoration: underline; }
.editions-steps { margin: 0 0 16px; padding-left: 20px; color: var(--text-secondary); font-size: 0.875rem; line-height: 1.55; }
.editions-steps li + li { margin-top: 8px; }
.editions-guide { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; color: var(--accent); font-size: 0.8125rem; text-decoration: none; }
.editions-guide:hover { text-decoration: underline; }
.editions-guide .material-icons { font-size: 0.9375rem; }
.editions-actions { margin-top: 20px; }
.editions-modal .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; }
.settings-editions-btn { margin-top: 10px; }

/* ── Resize Handle Grip Pattern ────────────────────────────── */

.task-bar-resize-handle::after,
.sidebar-resize-handle::after {
    content: '';
    display: block;
    width: 4px;
    height: 20px;
    margin: auto;
    background: radial-gradient(circle, var(--text-muted) 1px, transparent 1px);
    background-size: 4px 4px;
    opacity: 0;
    transition: opacity 0.15s;
}

.task-bar-resize-handle:hover::after,
.sidebar-resize-handle:hover::after {
    opacity: 0.6;
}

/* Welcome screen secondary links */

/* Native app rules moved to css/native.css and css/native-macos.css */

/* Agent summaries are opt-in: hide the goal line unless the toggle is on. */
.sidebar.summary-hidden .session-goal { display: none; }
/* With no second line the rows shrink to a single compact line; an unread
   chip still keeps its line. */
.sidebar.summary-hidden .session-line2:not(:has(.session-unread-chip)) { display: none; }
.sidebar.summary-hidden .session-group-item:not(:has(.session-unread-chip)),
.sidebar.summary-hidden .board-card-agents .session-group-item:not(:has(.session-unread-chip)) {
    min-height: 0;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}
.sidebar-collapse-btn.active { color: var(--accent); }

/* Coral Hub connection indicator in the header (#3544) */
.hub-indicator[hidden] { display: none; }
.hub-indicator[data-state="connected"] { color: var(--success); } /* a status, not a selected button (the accent) */
.hub-indicator[data-state="connecting"] { color: var(--text-muted); animation: hub-indicator-pulse 1.6s ease-in-out infinite; }
.hub-indicator[data-state="disconnected"] { color: var(--warning); }
.hub-indicator[data-state]:hover { background: var(--bg-hover); }
@keyframes hub-indicator-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) {
    .hub-indicator[data-state="connecting"] { animation: none; }
}

/* Through the Coral Hub, a launch the machine's access level refuses says so as the form opens (#4586). */
.launch-access-note { margin: 0 0 12px; padding: 8px 10px; border-radius: var(--radius-md); border: 1px solid var(--warning, var(--fx-amber)); background: var(--bg-tertiary); color: var(--text-primary); font-size: 0.8125rem; line-height: 1.4; }
.launch-access-note[hidden] { display: none; }