/* ── Single-agent popout mode (/agent/{uuid}) ────────────────────────────
   Only the selected-agent workspace is shown. Everything else is chrome. */

body.popout-mode .top-bar,
body.popout-mode .sidebar,
body.popout-mode #sidebar-resize-handle,
body.popout-mode .sidebar-resize-handle,
body.popout-mode .tablet-sidebar-backdrop,
body.popout-mode .tablet-sidebar-toggle,
body.popout-mode #mobile-agent-list,
body.popout-mode .mobile-tab-bar,
body.popout-mode #welcome-screen,
body.popout-mode #agentic-tab-board,
body.popout-mode #session-ended-default,
body.popout-mode #terminal-open-window-link {
    display: none !important;
}

body.popout-mode .layout {
    height: 100vh;
    height: 100dvh;
}

body.popout-mode .main-content {
    width: 100%;
}

/* ── Slim header: identity + type + state pill on the left, actions right ── */

/* .terminal-header-left sizing lives in session.css (it must keep room for the identity; a min-width: 0 here, loaded
   later, used to override it and let the folder path squeeze the name to nothing). */

body.popout-mode .terminal-session-label {
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 40vw;
}

.terminal-state-pill {
    font-size: 0.625rem;
    line-height: 16px;
    padding: 0 6px;
    flex-shrink: 0;
}

.terminal-state-pill {
    background: rgba(var(--fx-slate-rgb), 0.15);
    color: var(--text-muted);
}
.terminal-state-pill[data-state="working"]      { background: rgba(var(--fx-green-rgb), 0.15); color: var(--success); }
.terminal-state-pill[data-state="waiting"],
.terminal-state-pill[data-state="check"]        { background: rgba(var(--fx-amber-rgb), 0.18); color: var(--warning); }
.terminal-state-pill[data-state="stuck"],
.terminal-state-pill[data-state="not-found"]    { background: rgba(var(--fx-red-rgb), 0.15); color: var(--error); }
.terminal-state-pill[data-state="your-turn"]    { background: transparent; color: var(--text-secondary); box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.4); }
.terminal-state-pill[data-state="sleeping"],
.terminal-state-pill[data-state="ended"]        { background: rgba(var(--fx-slate-rgb), 0.15); color: var(--text-secondary); }
.terminal-state-pill[data-state="reconnecting"] { background: rgba(var(--fx-amber-rgb), 0.18); color: var(--warning); }

.terminal-header-actions .terminal-header-btn {
    font-size: 0.6875rem;
    gap: 4px;
    text-decoration: none;
    min-height: 26px;
}
.terminal-header-actions .terminal-header-btn[hidden] { display: none !important; }
.terminal-header-btn[aria-pressed="true"] { color: var(--accent); }

/* Kebab "Open Agent Tab" is an anchor: match the button items */
.overflow-menu-item.overflow-menu-open-window {
    text-decoration: none;
    color: inherit;
}

/* ── Ended / not-found: workspace stays visible, input disabled ───────── */

body.popout-mode.popout-ended #command-input { opacity: 0.6; }
/* Terminal actions are gated with the input: blocked while loading/reconnecting,
   sleeping, ended or not-found. Header navigation/panel/retry stay usable. */
body.popout-mode.popout-terminal-blocked .command-pane-toolbar button,
body.popout-mode.popout-terminal-blocked .mobile-send-btn {
    pointer-events: none;
    opacity: 0.5;
}
#popout-ended .btn, #popout-not-found .btn { margin: 4px; text-decoration: none; }
#popout-restarted-link[hidden] { display: none !important; }

/* ── Phone: workspace renders directly; quick-action strip stays reachable ── */

@media (max-width: 767px) {
    body.popout-mode .live-body, body.popout-mode .main-row { flex-direction: column !important; }
    body.popout-mode .terminal-header {
        position: sticky;
        top: 0;
        z-index: 11;
    }
    body.popout-mode .terminal-session-label { max-width: 46vw; }
    body.popout-mode .terminal-header-actions .terminal-header-btn {
        min-width: 36px;
        min-height: 36px;
        justify-content: center;
    }
    body.popout-mode .command-pane-toolbar {
        display: flex !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 6px;
        padding: 6px 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    body.popout-mode .command-pane-toolbar::-webkit-scrollbar { display: none; }
    body.popout-mode .command-pane-toolbar .btn-nav,
    body.popout-mode .command-pane-toolbar .btn-add-macro {
        min-height: 44px;
        min-width: 44px;
        flex: 0 0 auto;
    }
    body.popout-mode .command-pane-toolbar .toolbar-spacer { display: none; }
    /* Side panel is reached through the header toggle → overlay below the slim header */
    body.popout-mode .agentic-state.mobile-panel-overlay { top: 36px; }
    body.popout-mode .command-pane { max-height: 40vh; }
}

/* ── Header declutter ───────────────────────────────────────────────── */
/* Calm states are already shown by the status dot (as in the sidebar rows);
   the pill appears only when something needs attention or has changed. */
.terminal-state-pill[data-state="your-turn"],
.terminal-state-pill[data-state="idle"],
.terminal-state-pill[data-state="working"],
.terminal-state-pill[data-state=""] {
    display: none !important;
}