@import url('https://fonts.googleapis.com/css2?family=Cal+Sans&family=Inter:wght@300;400;500;600;700&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 20px; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #282828;
    color: #F0F0F0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

h1, h2, h3 { font-family: 'Cal Sans', 'Inter', system-ui, sans-serif; line-height: 1.2; }

/* Login */
.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-card {
    background: #333333;
    border: 1px solid #4a4a4a;
    border-radius: 8px;
    padding: 2rem;
    width: 360px;
    text-align: center;
}

.login-card h1 { color: #03C497; margin-bottom: 0.25rem; font-family: 'Cal Sans', 'Inter', system-ui, sans-serif; }
.login-card .subtitle { color: #999999; margin-bottom: 1.5rem; font-size: 0.9rem; }

.login-card input {
    width: 100%;
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.75rem;
    background: #282828;
    border: 1px solid #4a4a4a;
    border-radius: 4px;
    color: #F0F0F0;
    font-size: 0.95rem;
}

.login-card button {
    width: 100%;
    padding: 0.6rem;
    background: #0D9373;
    border: none;
    border-radius: 4px;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    min-height: 44px;
}

.login-card button:hover { background: #03C497; }

.error {
    background: #490202;
    border: 1px solid #f85149;
    color: #f85149;
    padding: 0.5rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    font-size: 0.85rem;
}

/* ==================== HEADER ==================== */

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.5rem;
    background: #333333;
    border-bottom: 1px solid #4a4a4a;
    gap: 0.25rem;
    position: sticky;
    top: 0;
    z-index: 50;
    height: 36px;
    min-height: 36px;
}

/* ---- Top icon nav (replaces both header-nav and mobile-bottom-nav) ---- */
.top-nav {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    flex: 1 1 auto;
    flex-shrink: 1;
    min-width: 0;
    overflow: visible;
}

.top-nav-scroll {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.top-nav-scroll::-webkit-scrollbar { display: none; }

.top-nav-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: #999999;
    text-decoration: none;
    font-size: 0.72rem;
    padding: 0.2rem 0.45rem;
    border-radius: 4px;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
}
.top-nav-item:hover { color: #F0F0F0; background: #3d3d3d; }
.top-nav-item.active { color: #03C497; background: #06503D; }
.top-nav-icon { width: 14px; height: 14px; flex-shrink: 0; }
.top-nav-label { font-size: 0.72rem; }

/* Unread badge next to "Tasks"/"Board" — count of tasks whose latest
   attention-state (Completed / Failed / Awaiting input / …) hasn't been
   opened by the user yet. */
.nav-unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 0.3rem;
    margin-left: 0.15rem;
    border-radius: 999px;
    background: #d29922;
    color: #1c1c1c;
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1;
}
.nav-unread-badge.zero { display: none !important; }

/* Status-coloured row/card unread dots */
.task-unread-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    margin-right: 0.35rem;
    vertical-align: middle;
    background: #d29922; /* default = awaiting attention */
    box-shadow: 0 0 0 2px rgba(210,153,34,0.15);
}
.task-unread-dot.completed { background: #03C497; box-shadow: 0 0 0 2px rgba(3,196,151,0.18); }
.task-unread-dot.failed { background: #f85149; box-shadow: 0 0 0 2px rgba(248,81,73,0.18); }
.task-unread-dot.cancelled { background: #999999; box-shadow: 0 0 0 2px rgba(153,153,153,0.18); }
.task-unread-dot.awaiting_input,
.task-unread-dot.awaiting_approval { background: #d29922; box-shadow: 0 0 0 2px rgba(210,153,34,0.18); }

/* Bolder treatment for unread rows in the dashboard table */
tr.task-row-unread td:first-child { position: relative; }
tr.task-row-unread { background: rgba(210,153,34,0.04); }

/* Bolder treatment for unread board cards */
.board-card.board-card-unread { border-left: 3px solid #d29922; }
.board-card.board-card-unread.completed-state { border-left-color: #03C497; }
.board-card.board-card-unread.failed-state { border-left-color: #f85149; }

.top-nav-more {
    position: relative;
    flex-shrink: 0;
}

.top-nav-more summary {
    list-style: none;
    cursor: pointer;
}

.top-nav-more summary::-webkit-details-marker { display: none; }

.top-nav-more[open] > .top-nav-item {
    color: #F0F0F0;
    background: #3d3d3d;
}

.top-nav-more.active > .top-nav-item {
    color: #03C497;
    background: #06503D;
}

.top-nav-more-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 150px;
    padding: 0.35rem;
    border: 1px solid #4a4a4a;
    border-radius: 8px;
    background: #2f2f2f;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    z-index: 80;
}

.top-nav-more-link {
    display: flex;
    align-items: center;
    color: #bdbdbd;
    text-decoration: none;
    font-size: 0.78rem;
    padding: 0.4rem 0.55rem;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
}

.top-nav-more-link:hover {
    color: #F0F0F0;
    background: #3d3d3d;
}

.top-nav-more-link.active {
    color: #03C497;
    background: #06503D;
}

.header-right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

/* User menu */
.user-menu-wrap { position: relative; }
.user-menu-btn {
    background: transparent;
    border: 1px solid #4a4a4a;
    border-radius: 50%;
    color: #999999;
    font-size: 0.7rem;
    width: 24px;
    height: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, border-color 0.15s;
    font-family: inherit;
    padding: 0;
}
.user-menu-btn:hover { color: #F0F0F0; border-color: #999999; }

.user-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: #333333;
    border: 1px solid #4a4a4a;
    border-radius: 6px;
    padding: 0.35rem 0;
    min-width: 120px;
    z-index: 200;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.user-menu.hidden { display: none; }
.user-menu-name {
    display: block;
    padding: 0.3rem 0.75rem;
    color: #F0F0F0;
    font-size: 0.75rem;
    font-weight: 600;
    border-bottom: 1px solid #3d3d3d;
    margin-bottom: 0.2rem;
}
.user-menu-item {
    display: block;
    padding: 0.3rem 0.75rem;
    color: #999999;
    text-decoration: none;
    font-size: 0.75rem;
    transition: background 0.15s, color 0.15s;
}
.user-menu-item:hover { background: #3d3d3d; color: #F0F0F0; }

/* ==================== SUBSCRIPTION SWITCHER ==================== */

.subscription-bar {
    display: none !important; /* replaced by compact header-sub-select dropdown */
}

/* Compact subscription select — hidden dropdown behind icon */
.header-sub-select {
    appearance: none;
    -webkit-appearance: none;
    background: #1e1e1e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23999999'/%3E%3C/svg%3E") no-repeat right 6px center;
    border: 1px solid #4a4a4a;
    border-radius: 4px;
    color: #03C497;
    font-size: 0.7rem;
    font-family: inherit;
    padding: 0.3rem 1.4rem 0.3rem 0.5rem;
    min-height: 26px;
    cursor: pointer;
    max-width: 160px;
    text-overflow: ellipsis;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.header-sub-select:focus { outline: none; border-color: #0D9373; }
.header-sub-select.switching { animation: sub-pulse 0.8s ease-in-out infinite; border-color: #d29922; color: #d29922; }

.sub-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #999999;
    font-size: 0.72rem;
    padding: 0.15rem 0.5rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
    font-family: inherit;
}
.sub-btn:hover {
    color: #F0F0F0;
    background: #3d3d3d;
    border-color: #4a4a4a;
}
.sub-btn.active {
    color: #03C497;
    background: #06503D;
    border-color: #0D9373;
    cursor: default;
}
.sub-btn.switching {
    animation: sub-pulse 0.8s ease-in-out infinite;
    color: #d29922;
    border-color: #d29922;
}
@keyframes sub-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.sub-type {
    display: block;
    font-size: 0.58rem;
    color: #656565;
    line-height: 1;
    margin-top: 1px;
}
.sub-btn.active .sub-type { color: #03C497; }
.sub-switching-label {
    font-size: 0.65rem;
    color: #d29922;
    animation: sub-pulse 0.8s ease-in-out infinite;
    white-space: nowrap;
    padding: 0 0.25rem;
}

main {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 36px);
    height: calc(100dvh - 36px);
    overflow: hidden;
}

/* ==================== AGENT STRIP ==================== */

.agent-panel {
    padding: 0.15rem 1rem;
    border-bottom: 1px solid #3d3d3d;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: #282828;
    flex-shrink: 0;
}
.agent-panel::-webkit-scrollbar { display: none; }

.agent-panel h2 { display: none; } /* label hidden — strip is self-explanatory */

.agent-cards { display: flex; gap: 0.3rem; flex-wrap: nowrap; align-items: center; }

/* --- Idle/offline: ultra-minimal dot+name, almost invisible --- */
.agent-card {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0.15rem 0.3rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s;
    opacity: 0.45;
    cursor: pointer;
}
.agent-card:hover { opacity: 0.7; }
.agent-card.busy:hover, .agent-card.error:hover,
.agent-card.waiting_for_human:hover, .agent-card.targeted:hover {
    opacity: 1; filter: brightness(1.15);
}

.agent-name { font-weight: 500; font-size: 0.68rem; color: #656565; }
.agent-status { font-size: 0; width: 0; overflow: hidden; }
.agent-task { display: none; }

.agent-card::before {
    content: "";
    width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
    background: #4a4a4a;
}

/* Online/idle: slightly visible green dot */
.agent-card.online, .agent-card.idle { opacity: 0.55; }
.agent-card.online::before, .agent-card.idle::before { background: #0D9373; }
.agent-card.online .agent-name, .agent-card.idle .agent-name { color: #656565; }

/* Disabled by operator choice: inactive, not alarming. */
.agent-card.disabled { opacity: 0.35; }
.agent-card.disabled::before { background: #4a4a4a; }
.agent-card.disabled .agent-name { color: #656565; }

/* Offline: dimmest */
.agent-card.offline { opacity: 0.3; }
.agent-card.offline::before { background: #4a4a4a; }

/* --- BUSY: elevated, glowing, prominent --- */
.agent-card.busy {
    opacity: 1;
    background: #1c1500;
    border: 1px solid #d29922;
    border-radius: 14px;
    padding: 0.25rem 0.65rem;
    box-shadow: 0 0 8px rgba(210, 153, 34, 0.15);
    order: -1; /* float busy agents to the front */
}
.agent-card.busy::before {
    background: #d29922;
    width: 6px; height: 6px;
    animation: pulse-dot 1.5s ease-in-out infinite;
}
.agent-card.busy .agent-name {
    color: #e3b341; font-weight: 700; font-size: 0.72rem;
}
.agent-card.busy .agent-task {
    display: inline;
    font-size: 0.62rem; color: #999999;
    max-width: 180px; overflow: hidden; text-overflow: ellipsis;
}

/* --- ERROR: red, prominent --- */
.agent-card.error {
    opacity: 1;
    background: #1a0505;
    border: 1px solid #f85149;
    border-radius: 14px;
    padding: 0.25rem 0.65rem;
    box-shadow: 0 0 8px rgba(248, 81, 73, 0.15);
    order: -1;
}
.agent-card.error::before { background: #f85149; width: 6px; height: 6px; }
.agent-card.error .agent-name { color: #f85149; font-weight: 700; font-size: 0.72rem; }

/* --- WAITING FOR HUMAN: amber, prominent --- */
.agent-card.waiting_for_human {
    opacity: 1;
    background: #1c1500;
    border: 1px solid #d29922;
    border-radius: 14px;
    padding: 0.25rem 0.65rem;
    box-shadow: 0 0 8px rgba(210, 153, 34, 0.15);
    order: -1;
}
.agent-card.waiting_for_human::before {
    background: #d29922; width: 6px; height: 6px;
    animation: pulse-dot 1.5s ease-in-out infinite;
}
.agent-card.waiting_for_human .agent-name { color: #e3b341; font-weight: 700; font-size: 0.72rem; }

/* --- TARGETED: user-selected target agent (blue) --- */
.agent-card.targeted {
    opacity: 1;
    outline: 2px solid #03C497;
    outline-offset: 1px;
    border-radius: 14px;
    background: #06503D;
    padding: 0.25rem 0.65rem;
}
.agent-card.targeted::before { background: #03C497; width: 6px; height: 6px; }
.agent-card.targeted .agent-name { color: #32CDA7; font-weight: 700; font-size: 0.72rem; }

/* Input hint when targeting an agent */
.msg-form.has-target textarea {
    border-color: #03C497;
    border-left: 3px solid #03C497;
}

/* ==================== DASHBOARD VIEW ==================== */

#dashboard-view {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ==================== TASK LIST ==================== */

.task-panel {
    padding: 0.4rem 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.task-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.3rem;
    flex-shrink: 0;
}

.task-header h2 { font-size: 0.8rem; color: #999999; text-transform: uppercase; }

.task-filters {
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.task-filters::-webkit-scrollbar { display: none; }

.filter-btn {
    padding: 0.15rem 0.4rem;
    background: #3d3d3d;
    border: 1px solid #4a4a4a;
    border-radius: 4px;
    color: #999999;
    font-size: 0.68rem;
    cursor: pointer;
    white-space: nowrap;
    min-height: 26px;
}

.filter-btn:hover { color: #F0F0F0; border-color: #999999; }
.filter-btn.active { background: #4a4a4a; color: #F0F0F0; border-color: #03C497; }

.task-table-wrap {
    overflow-y: auto;
    flex: 1;
}

.task-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.task-table th {
    text-align: left;
    padding: 0.4rem 0.6rem;
    color: #999999;
    font-size: 0.7rem;
    text-transform: uppercase;
    border-bottom: 1px solid #4a4a4a;
    position: sticky;
    top: 0;
    background: #282828;
}

.task-table td {
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid #3d3d3d;
}

.task-table tr:hover { background: #333333; }
.task-table tr[data-task-id] { cursor: pointer; }
.task-table tr[data-task-id]:hover { background: #3a3a3a !important; }

.task-status-badge {
    display: inline-block;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 600;
}

.task-status-badge.pending { background: #3d3d3d; color: #999999; }
.task-status-badge.in_progress { background: #2d1b00; color: #d29922; }
.task-status-badge.completed { background: #06503D; color: #03C497; }
.task-status-badge.failed { background: #300; color: #f85149; }
.task-status-badge.escalated { background: #2d1600; color: #db6d28; }
.task-status-badge.awaiting_approval { background: #2d2000; color: #d29922; }
.task-status-badge.awaiting_input { background: #2d2000; color: #d29922; }
/* System-wait states (no user action needed) — blue, distinct from amber. */
.task-status-badge.awaiting_subtask { background: #0d2030; color: #388bfd; }
.task-status-badge.awaiting_jobs { background: #0d2030; color: #388bfd; }
.task-status-badge.cancelled { background: #3d3d3d; color: #656565; text-decoration: line-through; }
.task-status-badge.paused { background: #0a3d30; color: #03C497; }

.priority-high { color: #f85149; }
.priority-critical { color: #f85149; font-weight: 700; }
.priority-normal { color: #999999; }
.priority-low { color: #656565; }

/* Archive button in task list rows */
.col-archive { width: 36px; text-align: center; padding: 0 !important; }
.task-row-archive-btn {
    background: none;
    border: 1px solid transparent;
    color: #999999;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 4px 6px;
    border-radius: 4px;
    transition: all 0.15s ease;
    line-height: 1;
}
.task-row-archive-btn:hover {
    background: #3d3d3d;
    border-color: #d29922;
    color: #d29922;
}

/* Row archiving animation */
.task-row-archiving {
    animation: slideOutRight 0.3s ease forwards;
}
@keyframes slideOutRight {
    to { transform: translateX(100%); opacity: 0; max-height: 0; padding: 0; overflow: hidden; }
}

/* Mobile swipe-to-archive */
.task-row-swiping td {
    transition: none !important;
    position: relative;
    z-index: 2;
}
.task-row-swiping {
    background: #2d1b00 !important;
}
.task-row-swipe-ready {
    background: #3d2800 !important;
}
.task-row-swipe-ready td:first-child::before {
    content: "📦 Archive";
    position: absolute;
    left: -80px;
    top: 50%;
    transform: translateY(-50%);
    color: #f0b429;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Subtask summary inline in task table title cell */
.subtask-summary {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.25rem;
    font-size: 0.68rem;
    color: #999999;
    background: #333333;
    border: 1px solid #3d3d3d;
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
}
.subtask-summary-icon { font-size: 0.72rem; color: #03C497; }
.subtask-summary-count { font-weight: 600; color: #F0F0F0; margin-right: 0.15rem; }
.subtask-summary-breakdown { display: inline-flex; gap: 0.2rem; }
.subtask-summary-breakdown span {
    display: inline-block;
    min-width: 14px;
    text-align: center;
    padding: 0 0.2rem;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1.5;
}
.st-completed { background: #06503D; color: #03C497; }
.st-in-progress { background: #2d1b00; color: #d29922; }
.st-failed { background: #300; color: #f85149; }
.st-pending { background: #3d3d3d; color: #999999; }

.task-empty {
    text-align: center;
    color: #656565;
    padding: 1.5rem;
    font-size: 0.85rem;
    display: none;
}

/* ==================== INPUT SECTION ==================== */

.input-section {
    padding: 0.4rem 1rem;
    border-top: 1px solid #4a4a4a;
    background: #333333;
    flex-shrink: 0;
}

.msg-form { display: flex; gap: 0.5rem; align-items: flex-end; }

.msg-form textarea {
    flex: 1;
    min-width: 0;
    padding: 0.4rem 0.6rem;
    background: #282828;
    border: 1px solid #4a4a4a;
    border-radius: 4px;
    color: #F0F0F0;
    font-size: 0.85rem;
    font-family: inherit;
    min-height: 34px;
    max-height: 200px;
    resize: none;
    overflow-y: auto;
    line-height: 1.4;
    field-sizing: content;
}

/* ---- Mobile full-height input expansion ---- */
@media (max-width: 768px) {
    .input-section.expanded,
    .canvas-input.expanded {
        position: fixed;
        inset: 0;
        z-index: 9000;
        display: flex;
        flex-direction: column;
        padding: 2.5rem 0.75rem 0.75rem;
        background: #2a2a2a;
        border-top: none;
    }
    .input-section.expanded .msg-attachments,
    .canvas-input.expanded .msg-attachments {
        flex-shrink: 0;
    }
    .input-section.expanded .msg-form,
    .canvas-input.expanded .msg-form {
        flex: 1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem;
        align-content: start;
    }
.input-section.expanded .msg-form textarea,
.canvas-input.expanded .msg-form textarea {
    grid-column: 1 / -1;
    flex: 1;
    max-height: min(25vh, 12rem);
    min-height: 80px;
    font-size: 0.92rem;
    line-height: 1.38;
    border-radius: 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
    field-sizing: fixed;
}
    .input-section.expanded .msg-form .attach-btn,
    .canvas-input.expanded .msg-form .attach-btn {
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
        z-index: 1;
    }
    .input-section.expanded .msg-form .runtime-select,
    .input-section.expanded .msg-form .mode-select,
    .canvas-input.expanded .msg-form .runtime-select,
    .canvas-input.expanded .msg-form .mode-select {
        width: 100%;
        min-width: 0;
        font-size: 0.78rem;
        min-height: 36px;
    }
    .input-section.expanded .msg-form .critic-options,
    .canvas-input.expanded .msg-form .critic-options {
        grid-column: 1 / -1;
        font-size: 0.78rem;
    }
    .input-section.expanded .msg-form .workspace-contract-toggle,
    .canvas-input.expanded .msg-form .workspace-contract-toggle,
    .input-section.expanded .msg-form button[type="submit"],
    .canvas-input.expanded .msg-form button[type="submit"] {
        width: 100%;
    }
    .input-section.expanded .msg-form button[type="submit"],
    .canvas-input.expanded .msg-form button[type="submit"] {
        width: 100%;
        min-height: 44px;
        font-size: 0.9rem;
        border-radius: 8px;
        grid-column: 1 / -1;
    }
    /* Hide pause banner in expanded mode (takes too much space) */
    .canvas-input.expanded .canvas-pause-banner {
        display: none !important;
    }
    /* Collapse button */
    .input-collapse-btn {
        display: none;
    }
    .input-section.expanded .input-collapse-btn,
    .canvas-input.expanded .input-collapse-btn {
        display: block;
        position: absolute;
        top: 0.5rem;
        left: 0.75rem;
        background: none;
        border: 1px solid #4a4a4a;
        border-radius: 4px;
        color: #999;
        font-size: 1.2rem;
        cursor: pointer;
        padding: 0.2rem 0.5rem;
        z-index: 1;
        line-height: 1;
    }
    .input-section.expanded .input-collapse-btn:hover,
    .canvas-input.expanded .input-collapse-btn:hover {
        color: #fff;
        border-color: #666;
    }
}
@media (min-width: 769px) {
    .input-collapse-btn { display: none; }
}

.msg-form textarea:focus { outline: none; border-color: #03C497; }

.msg-form button {
    padding: 0.4rem 1rem;
    background: #0D9373;
    border: none;
    border-radius: 4px;
    color: #fff;
    font-size: 0.85rem;
    cursor: pointer;
    min-height: 34px;
}

.msg-form button:hover { background: #03C497; }
.workspace-contract-toggle {
    background: #2b2b2b;
    color: #9fe8d5;
    border: 1px solid #3f675d;
}
.workspace-contract-toggle.active {
    background: #11483b;
    border-color: #03C497;
    color: #d7fff4;
}
.workspace-contract-editor {
    margin-top: 0.55rem;
    padding: 0.7rem;
    border: 1px solid #3d4d49;
    border-radius: 10px;
    background: linear-gradient(180deg, #252d2a 0%, #202624 100%);
    max-height: min(52vh, 34rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    container-type: inline-size;
}
.workspace-contract-label {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #8fd8c5;
    margin-bottom: 0.45rem;
}
.workspace-contract-builder {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.workspace-contract-builder-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}
.workspace-contract-picker-card {
    border: 1px solid rgba(143, 216, 197, 0.14);
    border-radius: 10px;
    background: rgba(11, 17, 15, 0.32);
    padding: 0.65rem;
}
.workspace-contract-picker-title {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9fe8d5;
}
.workspace-contract-picker-copy {
    margin-top: 0.22rem;
    color: #9fb0ae;
    font-size: 0.68rem;
    line-height: 1.35;
}
.workspace-scope-list {
    display: grid;
    gap: 0.4rem;
    min-width: 0;
}
.workspace-scope-repo-card {
    border: 1px solid rgba(63, 85, 79, 0.72);
    border-radius: 9px;
    background: rgba(19, 25, 23, 0.94);
    padding: 0.4rem 0.5rem;
    min-width: 0;
}
.workspace-scope-repo-head {
    display: grid;
    grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr);
    gap: 0.65rem;
    align-items: center;
    min-width: 0;
}
.workspace-scope-repo-ident {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    min-width: 0;
    flex-wrap: wrap;
    max-width: 100%;
}
.workspace-scope-repo-title {
    font-size: 0.72rem;
    font-weight: 600;
    color: #f0f6fc;
    line-height: 1.2;
}
.workspace-scope-repo-path {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    padding: 0.06rem 0.3rem;
    font-size: 0.6rem;
    color: #d7fff4;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-all;
}
.workspace-scope-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
    gap: 0.3rem;
    min-width: 0;
}
.workspace-scope-option {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 8px;
    border: 1px solid rgba(64, 80, 76, 0.9);
    background: rgba(24, 32, 30, 0.92);
    padding: 0.4rem 0.5rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    min-width: 0;
    overflow: hidden;
}
.workspace-scope-option:hover {
    border-color: rgba(3, 196, 151, 0.28);
}
.workspace-scope-option.checked {
    border-color: rgba(3, 196, 151, 0.45);
    background: rgba(10, 53, 43, 0.42);
}
.workspace-scope-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.workspace-scope-dot {
    flex: 0 0 auto;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(159, 232, 213, 0.32);
    background: transparent;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.workspace-scope-option.checked .workspace-scope-dot {
    background: #03C497;
    border-color: #03C497;
    box-shadow: inset 0 0 0 2px rgba(19, 31, 27, 0.95);
}
.workspace-scope-option-title {
    font-size: 0.68rem;
    color: #f0f6fc;
    line-height: 1.22;
    min-width: 0;
    flex: 1 1 auto;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.workspace-scope-selected-copy {
    margin-top: 0.3rem;
    color: #9fb0ae;
    font-size: 0.62rem;
    line-height: 1.28;
    font-style: italic;
    min-height: 0.8rem;
}
/* Docker access section — per-app scoped Docker selection. */
.workspace-docker-section {
    margin-top: 0.75rem;
    border-top: 1px solid rgba(64, 80, 76, 0.6);
    padding-top: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.workspace-docker-section-head {
    font-size: 0.74rem;
    font-weight: 600;
    color: #f0f6fc;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
}
.workspace-docker-section-hint {
    font-size: 0.62rem;
    font-weight: 400;
    color: #9fb4ad;
}
.workspace-docker-scope {
    border: 1px solid rgba(64, 80, 76, 0.7);
    border-radius: 10px;
    background: rgba(20, 27, 25, 0.6);
    padding: 0.5rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.workspace-docker-ident {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
}
.workspace-docker-title {
    font-size: 0.72rem;
    font-weight: 600;
    color: #f0f6fc;
}
.workspace-docker-sensitive {
    font-size: 0.56rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #ffcaa8;
    border: 1px solid rgba(255, 150, 100, 0.4);
    border-radius: 999px;
    padding: 0.05rem 0.4rem;
}
.workspace-docker-networks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}
.workspace-docker-net {
    font-size: 0.6rem;
    color: #9fe8d5;
    background: rgba(3, 196, 151, 0.1);
    border-radius: 4px;
    padding: 0.05rem 0.35rem;
}
.workspace-docker-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
    gap: 0.3rem;
    min-width: 0;
}
.workspace-docker-option {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 8px;
    border: 1px solid rgba(64, 80, 76, 0.9);
    background: rgba(24, 32, 30, 0.92);
    padding: 0.4rem 0.5rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    min-width: 0;
    overflow: hidden;
}
.workspace-docker-option:hover {
    border-color: rgba(3, 196, 151, 0.28);
}
.workspace-docker-option.checked {
    border-color: rgba(3, 196, 151, 0.45);
    background: rgba(10, 53, 43, 0.42);
}
.workspace-docker-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.workspace-docker-option.checked .workspace-scope-dot {
    background: #03C497;
    border-color: #03C497;
    box-shadow: inset 0 0 0 2px rgba(19, 31, 27, 0.95);
}
.workspace-docker-option-title {
    font-size: 0.68rem;
    color: #f0f6fc;
    line-height: 1.22;
    min-width: 0;
    flex: 1 1 auto;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.workspace-scope-selected-copy:empty {
    display: none;
}
@container (max-width: 44rem) {
    .workspace-scope-repo-head {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }
}
.workspace-artifact-roots {
    margin-top: 0.45rem;
    padding-top: 0.45rem;
    border-top: 1px solid rgba(63, 85, 79, 0.58);
}
.workspace-artifact-roots.is-disabled {
    display: none;
}
.workspace-artifact-roots-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}
.workspace-artifact-roots-title {
    color: #d7fff4;
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}
.workspace-artifact-roots-count {
    min-width: 1.4rem;
    padding: 0.08rem 0.32rem;
    border-radius: 999px;
    background: rgba(3, 196, 151, 0.14);
    border: 1px solid rgba(3, 196, 151, 0.26);
    color: #bdf7e8;
    font-size: 0.58rem;
    text-align: center;
}
.workspace-artifact-root-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    gap: 0.3rem;
}
.workspace-artifact-root-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    border: 1px solid rgba(64, 80, 76, 0.9);
    border-radius: 7px;
    background: rgba(24, 32, 30, 0.76);
    padding: 0.32rem 0.42rem;
    cursor: pointer;
}
.workspace-artifact-root-option.checked {
    border-color: rgba(3, 196, 151, 0.45);
    background: rgba(10, 53, 43, 0.42);
}
.workspace-artifact-root-option input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.workspace-artifact-root-mark {
    flex: 0 0 auto;
    width: 0.78rem;
    height: 0.78rem;
    border-radius: 4px;
    border: 1px solid rgba(159, 232, 213, 0.32);
}
.workspace-artifact-root-option.checked .workspace-artifact-root-mark {
    background: #03C497;
    border-color: #03C497;
    box-shadow: inset 0 0 0 2px rgba(19, 31, 27, 0.95);
}
.workspace-artifact-root-label {
    color: #f0f6fc;
    font-size: 0.64rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.workspace-artifact-root-empty {
    color: #899996;
    font-size: 0.62rem;
    font-style: italic;
}
.workspace-artifact-new-row {
    display: grid;
    grid-template-columns: 4.6rem minmax(0, 1fr);
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.35rem;
}
.workspace-artifact-new-label {
    color: #9fb0ae;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.workspace-artifact-new-root {
    width: 100%;
    min-height: 30px;
    border: 1px solid rgba(64, 80, 76, 0.9);
    border-radius: 7px;
    background: rgba(9, 13, 12, 0.78);
    color: #f0f6fc;
    padding: 0.32rem 0.45rem;
    font-size: 0.65rem;
    outline: none;
}
.workspace-artifact-new-root:focus {
    border-color: rgba(3, 196, 151, 0.5);
}
.workspace-contract-source {
    display: none;
}
.workspace-contract-input {
    width: 100%;
    min-height: 140px;
    resize: vertical;
    padding: 0.65rem 0.75rem;
    border-radius: 8px;
    border: 1px solid #40504c;
    background: #18201e;
    color: #e6edf3;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.74rem;
    line-height: 1.4;
}
.workspace-contract-input:focus {
    outline: none;
    border-color: #03C497;
    box-shadow: 0 0 0 2px rgba(3, 196, 151, 0.18);
}
.workspace-contract-preview {
    margin-top: 0.6rem;
}
.workspace-contract-preview-error {
    padding: 0.55rem 0.65rem;
    border: 1px dashed rgba(210, 153, 34, 0.55);
    border-radius: 8px;
    background: rgba(45, 32, 0, 0.35);
    color: #f0d487;
    font-size: 0.72rem;
    line-height: 1.35;
}

/* Runtime selector */
.runtime-select {
    padding: 0.3rem 0.4rem;
    background: #3d3d3d;
    border: 1px solid #4a4a4a;
    border-radius: 4px;
    color: #F0F0F0;
    font-size: 0.75rem;
    font-family: inherit;
    min-height: 34px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.4rem center;
    padding-right: 1.4rem;
}
.runtime-select:hover { border-color: #666; }
.runtime-select:focus { outline: none; border-color: #03C497; }
.runtime-select option { background: #2a2a2a; color: #F0F0F0; }
/* Model selector lives next to the runtime selector and uses the same look.
   The list of options is populated by JS based on the chosen runtime; for
   runtimes with no real model choice (e.g. antigravity-tty) the dropdown is
   hidden via inline style from app.js. */
.runtime-select.model-select { min-width: 5rem; }

.monitor-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 34px;
    padding: 0.25rem 0.45rem;
    background: #2a2a2a;
    border: 1px solid #4a4a4a;
    border-radius: 4px;
    color: #c9d1d9;
    font-size: 0.72rem;
    white-space: nowrap;
    cursor: pointer;
}
.monitor-toggle input {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: #03C497;
}
.monitor-toggle:hover { border-color: #666666; color: #f0f0f0; }

/* Mode selector */
.mode-select {
    padding: 0.3rem 0.4rem;
    background: #3d3d3d;
    border: 1px solid #4a4a4a;
    border-radius: 4px;
    color: #F0F0F0;
    font-size: 0.75rem;
    font-family: inherit;
    min-height: 34px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.4rem center;
    padding-right: 1.4rem;
}
.mode-select:hover { border-color: #666; }
.mode-select:focus { outline: none; border-color: #03C497; }
.mode-select option { background: #2a2a2a; color: #F0F0F0; }

/* Critic options (checkboxes) */
.critic-options {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.2rem 0.4rem;
    background: #2a2a2a;
    border: 1px solid #4a4a4a;
    border-radius: 4px;
    font-size: 0.75rem;
}
.critic-cb {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    color: #ccc;
    white-space: nowrap;
}
.critic-cb input[type="checkbox"] {
    accent-color: #03C497;
    cursor: pointer;
}
.mode-help {
    color: #9ca3af;
    font-size: 0.72rem;
    line-height: 1.2;
    max-width: 220px;
}
.mode-help.warning {
    color: #e6a817;
}

/* Critic evaluation in live activity */
.canvas-live-msg.type-critic_evaluation {
    border-left: 3px solid #e6a817;
    background: #2a2510;
    padding: 0.5rem;
    margin: 0.3rem 0;
}
.canvas-live-msg.type-critic_evaluation .live-source {
    color: #e6a817;
}
.canvas-live-msg.type-critic_start {
    border-left: 3px solid #e6a817;
    opacity: 0.7;
}
.canvas-live-msg.type-critic_pipeline {
    border-left: 3px solid #e6a817;
    font-style: italic;
    opacity: 0.8;
}
.critic-badge {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    background: #e6a817;
    color: #1a1a1a;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 600;
    margin-left: 0.3rem;
}

/* Council plan mode messages */
.canvas-live-msg.type-council_phase {
    border-left: 3px solid #7b68ee;
    font-style: italic;
    opacity: 0.85;
}
.canvas-live-msg.type-council_plan {
    border-left: 3px solid #7b68ee;
    background: #1a1530;
}
.canvas-live-msg.type-council_review {
    border-left: 3px solid #7b68ee;
    background: #1a1530;
    padding: 0.5rem;
    margin: 0.3rem 0;
}
.canvas-live-msg.type-council_review .live-source {
    color: #7b68ee;
}
.canvas-live-msg.type-council_votes {
    border-left: 3px solid #7b68ee;
    background: #201a35;
    font-weight: 600;
}
.canvas-live-msg.type-council_consensus {
    border-left: 3px solid #7b68ee;
    background: #201a35;
    font-weight: 700;
}
.council-badge {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 600;
    margin-left: 0.3rem;
}
.council-badge.vote-approve { background: #0D9373; color: #fff; }
.council-badge.vote-revise { background: #e6a817; color: #1a1a1a; }
.council-badge.vote-reject { background: #c0392b; color: #fff; }
.council-label {
    color: #7b68ee;
    font-weight: 600;
    font-size: 0.75rem;
}

.run-state-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.5rem;
    margin: 0.75rem 0;
}
.run-state-pill {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.55rem 0.65rem;
    background: var(--bg-secondary);
}
.run-state-pill span {
    display: block;
    color: var(--text-secondary);
    font-size: 0.72rem;
    margin-bottom: 0.2rem;
}
.run-state-pill strong {
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
}
.run-plan-version pre,
.run-vote-card pre,
.run-critic-card pre {
    white-space: pre-wrap;
    overflow: auto;
    max-height: 280px;
    margin: 0.5rem 0 0;
    padding: 0.65rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.78rem;
}
.run-vote-grid,
.run-review-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.65rem;
}
.run-vote-card,
.run-critic-card {
    border: 1px solid var(--border-color);
    border-left: 3px solid #7AA2F7;
    border-radius: 6px;
    padding: 0.7rem;
    background: var(--bg-secondary);
}
.run-vote-card > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.run-vote-card.vote-approve { border-left-color: #0D9373; }
.run-vote-card.vote-revise { border-left-color: #e6a817; }
.run-vote-card.vote-reject { border-left-color: #c0392b; }
.run-critic-card.status-completed { border-left-color: #0D9373; }
.run-critic-card.status-failed { border-left-color: #c0392b; }
.run-state-timeline {
    display: grid;
    gap: 0.45rem;
}
.run-state-timeline-item {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) minmax(100px, auto);
    gap: 0.5rem;
    align-items: center;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    font-size: 0.8rem;
}
.run-state-timeline-item span,
.run-state-timeline-item small {
    color: var(--text-secondary);
}
.run-error {
    color: #f7768e;
}

/* Attach button */
.attach-btn {
    display: flex; align-items: center; justify-content: center;
    min-width: 34px; min-height: 34px; cursor: pointer;
    background: #3d3d3d; border: 1px solid #4a4a4a; border-radius: 4px;
    transition: background 0.15s;
}
.attach-btn:hover { background: #4a4a4a; }
.attach-icon { width: 16px; height: 16px; }

/* Attachment preview strip */
.msg-attachments {
    display: flex; gap: 0.5rem; padding: 0; flex-wrap: wrap;
}
.msg-attachments:empty { display: none; }
.msg-attachments .attach-preview {
    position: relative; display: inline-block;
    border: 1px solid #4a4a4a; border-radius: 4px; overflow: hidden;
    background: #333333;
}
.msg-attachments .attach-preview img {
    height: 56px; width: auto; max-width: 120px; object-fit: cover; display: block;
}
.msg-attachments .attach-file-icon {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 6px 10px; min-width: 80px; max-width: 140px; height: 56px; gap: 1px;
}
.msg-attachments .attach-file-icon .file-emoji {
    font-size: 1.2rem; line-height: 1;
}
.msg-attachments .attach-file-icon .file-name {
    font-size: 0.6rem; color: #F0F0F0; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; max-width: 120px; text-align: center;
}
.msg-attachments .attach-file-icon .file-size {
    font-size: 0.55rem; color: #999999;
}
.msg-attachments .attach-remove {
    position: absolute; top: 2px; right: 2px;
    background: rgba(0,0,0,0.7); color: #f85149; border: none;
    border-radius: 50%; width: 18px; height: 18px; font-size: 0.65rem;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    line-height: 1;
}
.msg-attachments .attach-uploading {
    height: 56px; width: 56px; display: flex; align-items: center; justify-content: center;
    background: #333333; border: 1px solid #4a4a4a; border-radius: 4px;
    font-size: 0.7rem; color: #999999;
}

/* ==================== QUESTION BANNER ==================== */

.question-banner {
    padding: 0.45rem 1rem;
    background: #1a1500;
    border-top: 2px solid #d29922;
    border-bottom: 2px solid #d29922;
    animation: question-pulse 2s ease-in-out infinite;
}

@keyframes question-pulse {
    0%, 100% { background: #1a1500; }
    50% { background: #2d2000; }
}

.question-banner-inner {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.question-banner-icon { font-size: 1.1rem; line-height: 1; flex-shrink: 0; margin-top: 0.05rem; }
.question-banner-text { flex: 1; min-width: 0; }
.question-banner-label { font-size: 0.65rem; color: #d29922; font-weight: 700; text-transform: uppercase; margin-bottom: 0.15rem; }
.question-banner-question { font-size: 0.78rem; color: #f0e6d0; line-height: 1.3; margin-bottom: 0.25rem; }
.question-banner-form { display: flex; gap: 0.35rem; flex-shrink: 0; align-self: center; }
.question-banner-actions { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.question-banner-form .question-response-input { width: 220px; padding: 0.3rem 0.5rem; background: #282828; border: 1px solid #d29922; border-radius: 4px; color: #F0F0F0; font-size: 0.76rem; min-height: 34px; max-height: 160px; line-height: 1.35; font-family: inherit; resize: none; overflow-y: auto; box-sizing: border-box; }
.question-banner-form .question-response-input:focus { outline: none; border-color: #f0c000; box-shadow: 0 0 0 2px rgba(210, 153, 34, 0.3); }
.question-banner-form button { padding: 0.3rem 0.7rem; background: #d29922; border: none; border-radius: 4px; color: #282828; font-size: 0.76rem; font-weight: 700; cursor: pointer; min-height: 34px; }
.question-banner-form button:hover { background: #f0c000; }
.question-banner-form button:disabled { background: #8b6914; cursor: wait; }
.question-banner-form .workspace-contract-toggle {
    background: #3a3320;
    border-color: #6f5b20;
    color: #f0d487;
}
.question-banner-form .workspace-contract-toggle.active {
    background: #5a4914;
    border-color: #f0c000;
}
.question-banner.scope-open .question-banner-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
}
.question-banner.scope-open .question-banner-form {
    grid-column: 1 / -1;
    width: 100%;
    align-self: stretch;
    flex-wrap: wrap;
}
.question-banner.scope-open .question-banner-form .question-response-input {
    width: auto;
    min-width: min(100%, 16rem);
    flex: 1 1 18rem;
}
.question-banner.scope-open .question-banner-actions {
    flex: 0 0 auto;
}
.question-banner-editor {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 0.55rem;
    box-sizing: border-box;
    flex: 1 0 100%;
}

.msg.type-question_for_human { border-left: 3px solid #d29922; background: #1a1500; border: 1px solid #3d2e00; }
.msg.type-question_for_human .msg-type { color: #d29922; font-weight: 700; }
.msg.type-question_for_human .question-content { font-size: 0.9rem; color: #f0e6d0; }
.msg.type-human_response { border-left: 3px solid #03C497; background: #0a2e24; }

/* ==================== TASK DETAIL OVERLAY (compat) ==================== */

.task-detail-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    z-index: 100;
    display: flex;
    justify-content: flex-end;
    animation: fadeIn 0.15s ease;
}
.task-detail-overlay.hidden { display: none; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }

.task-detail-panel {
    width: min(680px, 90vw);
    background: #282828;
    border-left: 1px solid #4a4a4a;
    display: flex;
    flex-direction: column;
    height: 100vh;
    animation: slideIn 0.2s ease;
}

.task-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid #4a4a4a;
    background: #333333;
    flex-shrink: 0;
}

.task-detail-header h2 { font-size: 0.95rem; color: #F0F0F0; word-break: break-word; max-width: 90%; }

.task-detail-close {
    background: none; border: none; color: #999999; font-size: 1.5rem; cursor: pointer; padding: 0 0.25rem; line-height: 1;
    min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center;
}
.task-detail-close:hover { color: #f85149; }

.task-detail-meta {
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid #3d3d3d;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.5rem 1rem;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.meta-item { display: flex; flex-direction: column; gap: 0.1rem; }
.meta-label { color: #999999; font-size: 0.7rem; text-transform: uppercase; font-weight: 600; }
.meta-value { color: #F0F0F0; word-break: break-word; }

.task-detail-log-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.5rem 1.25rem; border-bottom: 1px solid #3d3d3d; flex-shrink: 0;
}
.task-detail-log-header h3 { font-size: 0.75rem; color: #999999; text-transform: uppercase; }

.log-count {
    font-size: 0.7rem; color: #999999; background: #3d3d3d;
    padding: 0.15rem 0.4rem; border-radius: 10px;
}

.task-detail-log { flex: 1; overflow-y: auto; padding: 0.5rem 1.25rem; }

/* ==================== LOG STEP ==================== */
/*
 * Condensed task-log layout: each step is a thin row with a colored left
 * stripe (category marker) + a single inline meta line + content.
 * Categories drive color and default visibility:
 *   user      = human prompts/follow-ups (distinct blue, highlighted bg)
 *   agent     = agent thinking/text (default green)
 *   final     = final response (emphasised green block)
 *   lifecycle = task_start / task_complete / milestone / paused (muted)
 *   action    = delegation / awaiting_input / user_action (amber)
 *   error     = errors (red)
 *   tool      = tool_call / tool_result (hidden behind "Tool output" toggle)
 *   verbose   = workspace/system/recovery noise (hidden behind "Verbose" toggle)
 */

.log-step {
    display: flex; gap: 0.5rem;
    padding: 0.25rem 0.5rem 0.3rem 0.4rem;
    font-size: 0.8rem;
    border-left: 3px solid transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.log-step:last-child { border-bottom: none; }

.hide-tool-steps .tool-step { display: none; }
.hide-verbose-steps .verbose-step { display: none; }

/* Left stripe marker — a thin vertical bar matching the category color.
   Replaces the old 24px circular icon to save horizontal space. */
.log-step-marker {
    flex-shrink: 0; width: 3px; align-self: stretch;
    border-radius: 2px;
    background: #4a4a4a;
    margin-top: 0.15rem;
    margin-bottom: 0.15rem;
}

.log-step-body { flex: 1; min-width: 0; }

/* Single condensed meta row: label + agent + tool + time, no wrapping. */
.log-step-meta {
    display: flex; align-items: baseline; gap: 0.5rem;
    font-size: 0.65rem; color: #656565;
    margin-bottom: 0.1rem;
    line-height: 1.2;
}
.log-step-label {
    font-weight: 700; font-size: 0.62rem;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: #888;
    white-space: nowrap;
}
.log-step-agent-inline {
    color: #888; font-style: italic; white-space: nowrap;
    font-size: 0.65rem;
}
.log-step-tool-name {
    color: #0D9373; font-family: "SF Mono", "Fira Code", monospace;
    font-size: 0.65rem; white-space: nowrap;
}
.log-step-time-inline {
    color: #555; margin-left: auto; font-size: 0.6rem;
    white-space: nowrap;
}

/* ----- Category styling ----- */

/* User prompt — distinct from agent text. */
.log-step-cat-user {
    background: rgba(125, 200, 255, 0.06);
    border-left-color: #7DC8FF;
}
.log-step-cat-user .log-step-marker { background: #7DC8FF; }
.log-step-cat-user .log-step-label { color: #7DC8FF; }
.log-step-cat-user .log-step-content { color: #DCE7F4; }

/* Agent response (text) — default look, no extra background. */
.log-step-cat-agent .log-step-marker { background: #03C497; }
.log-step-cat-agent .log-step-content { color: #F0F0F0; }

/* Final response — emphasised green block. */
.log-step-cat-final {
    background: rgba(3, 196, 151, 0.06);
    border-left-color: #03C497;
}
.log-step-cat-final .log-step-marker { background: #03C497; }
.log-step-cat-final .log-step-label { color: #03C497; }
.log-step-cat-final .log-step-content { color: #F0F0F0; font-weight: 500; }

/* Lifecycle markers (task_start/complete/milestone/paused) — muted gray. */
.log-step-cat-lifecycle .log-step-marker { background: #6e7681; }
.log-step-cat-lifecycle .log-step-label { color: #8a8f96; }
.log-step-cat-lifecycle .log-step-content { color: #c9d1d9; }

/* Action events (delegation, awaiting_input, user_action) — amber. */
.log-step-cat-action .log-step-marker { background: #d29922; }
.log-step-cat-action .log-step-label { color: #d29922; }
.log-step-cat-action { border-left-color: rgba(210, 153, 34, 0.45); }

/* Errors — red. */
.log-step-cat-error {
    background: rgba(248, 81, 73, 0.05);
    border-left-color: #f85149;
}
.log-step-cat-error .log-step-marker { background: #f85149; }
.log-step-cat-error .log-step-label { color: #f85149; }
.log-step-cat-error .log-step-content { color: #ffcccc; }

/* Tool steps — teal (kept behind toggle by default). */
.log-step-cat-tool .log-step-marker { background: #0D9373; }
.log-step-cat-tool .log-step-label { color: #0D9373; }
.log-step-cat-tool .log-step-content { color: #d0d0d0; }

/* Verbose / noisy infra — dim gray (kept behind toggle by default). */
.log-step-cat-verbose .log-step-marker { background: #3d3d3d; }
.log-step-cat-verbose .log-step-label { color: #6e7681; }
.log-step-cat-verbose .log-step-content {
    color: #888; font-size: 0.74rem;
    font-family: "SF Mono", "Fira Code", monospace;
}
.log-step-cat-verbose .log-step-agent-inline { color: #555; }

/* ----- Turn divider (between agent CLI turns) ----- */

.log-turn-divider {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.3rem 0.4rem; margin: 0.15rem 0;
}
.log-turn-label {
    font-size: 0.62rem; color: #666; white-space: nowrap; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.log-turn-runtime {
    font-size: 0.62rem; font-weight: 700; white-space: nowrap;
}
.log-turn-line {
    flex: 1; height: 1px; background: #2a2a2a; min-width: 2rem;
}

/* ----- Content & truncation ----- */

.log-step-content {
    color: #F0F0F0; line-height: 1.4; white-space: pre-wrap; word-break: break-word;
    max-height: 80px; overflow: hidden; position: relative;
}
.log-step-content.expanded { max-height: none; }
.log-step-content.truncated::after {
    content: ""; position: absolute; bottom: 0; left: 0; right: 0;
    height: 24px; background: linear-gradient(transparent, #282828);
}

.log-step-toggle {
    background: none; border: none; color: #03C497; cursor: pointer;
    font-size: 0.68rem; padding: 0.1rem 0; margin-top: 0.1rem;
}
.log-step-toggle:hover { text-decoration: underline; }

.log-tool-detail {
    margin-top: 0.25rem; background: rgba(13, 147, 115, 0.06);
    border: 1px solid #2a3a32; border-radius: 4px;
    font-family: "SF Mono", "Fira Code", monospace; font-size: 0.68rem;
    max-height: 140px; overflow-y: auto; padding: 0.35rem 0.55rem;
    white-space: pre-wrap; word-break: break-all; color: #9fd9c5;
}

.log-tool-detail-label {
    font-size: 0.62rem; color: #999999;
    margin-top: 0.25rem; margin-bottom: 0.1rem;
    text-transform: uppercase; letter-spacing: 0.04em;
}

.log-empty { text-align: center; color: #656565; padding: 2rem; font-size: 0.85rem; }

.task-detail-loading { display: flex; align-items: center; justify-content: center; padding: 2rem; color: #999999; gap: 0.5rem; }

.spinner {
    width: 16px; height: 16px; border: 2px solid #4a4a4a; border-top: 2px solid #03C497;
    border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.task-result-box {
    margin: 0.5rem 1.25rem; padding: 0.6rem 0.8rem; background: #0a2e24;
    border: 1px solid #0D9373; border-radius: 4px; font-size: 0.8rem; line-height: 1.4;
    white-space: pre-wrap; word-break: break-word; max-height: 200px; overflow-y: auto; color: #F0F0F0; flex-shrink: 0;
}
.task-result-box.failed { background: #1f0d0d; border-color: #402020; }

/* ==================== TASK CANVAS ==================== */

.canvas-view {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 36px);
    height: calc(100dvh - 36px);
}

.canvas-header {
    display: flex; align-items: center; padding: 0.3rem 1rem;
    background: #333333; border-bottom: 1px solid #4a4a4a;
    gap: 0.5rem; flex-shrink: 0;
}

/* Unified canvas tab bar */
.canvas-tabs {
    display: flex; background: #333333; border-bottom: 1px solid #4a4a4a;
    padding: 0 0.75rem; flex-shrink: 0;
}

/* Canvas tab panels */
.canvas-panel {
    flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0;
}
.canvas-panel .log-view-steps {
    flex: 1; overflow-y: auto; padding: 0.3rem 0.75rem;
}
#canvas-panel-info, #canvas-panel-artifacts, #canvas-panel-run, #canvas-panel-live {
    overflow-y: auto; padding: 0.75rem;
}

.canvas-back-btn {
    background: #3d3d3d; border: 1px solid #4a4a4a; border-radius: 4px;
    color: #999999; padding: 0.2rem 0.5rem; cursor: pointer; font-size: 0.75rem;
    flex-shrink: 0; min-height: 28px; display: flex; align-items: center;
}
.canvas-back-btn:hover { color: #F0F0F0; border-color: #999999; }

.canvas-title-wrap { display: flex; align-items: center; gap: 0.4rem; min-width: 0; flex: 1; }
.canvas-title {
    font-size: 0.88rem; color: #F0F0F0; word-break: break-word;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; line-height: 1.35;
}

.canvas-actions { display: flex; gap: 0.4rem; flex-shrink: 0; margin-left: auto; }
.canvas-action-btn {
    padding: 0.2rem 0.6rem; border: none; border-radius: 4px;
    font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: background 0.15s; min-height: 26px;
}
.canvas-action-btn.approve { background: #0D9373; color: #fff; }
.canvas-action-btn.approve:hover { background: #03C497; }
.canvas-action-btn.complete { background: #0D9373; color: #fff; }
.canvas-action-btn.complete:hover { background: #03C497; }
.canvas-action-btn.reject { background: #da3633; color: #fff; }
.canvas-action-btn.reject:hover { background: #f85149; }
.canvas-action-btn.cancel { background: #3d3d3d; color: #999999; border: 1px solid #4a4a4a; }
.canvas-action-btn.cancel:hover { color: #F0F0F0; border-color: #999999; }
.canvas-action-btn.pause { background: #0a3d30; color: #03C497; border: 1px solid #0D9373; }
.canvas-action-btn.pause:hover { color: #32CDA7; border-color: #03C497; background: #0a3d30; }
.canvas-action-btn.archive { background: #3d3d3d; color: #d29922; border: 1px solid #4a4a4a; }
.canvas-action-btn.archive:hover { color: #e3b341; border-color: #d29922; }

/* Canvas tab buttons (unified tab bar) */
.canvas-tab {
    flex: 1;
    padding: 0.5rem 0.5rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: #999999;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    min-height: 36px;
}
.canvas-tab.active { color: #03C497; border-bottom-color: #03C497; }
.canvas-tab.attention:not(.active) { color: #f0c674; border-bottom-color: rgba(240, 198, 116, 0.55); }
.canvas-tab:hover { color: #F0F0F0; }

/* Canvas body: 3-column layout on desktop */
.canvas-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.canvas-sidebar {
    width: 260px;
    border-right: 1px solid #4a4a4a;
    overflow-y: auto;
    padding: 0.75rem;
    flex-shrink: 0;
    background: #282828;
}

.canvas-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.canvas-artifacts-col {
    width: 260px;
    border-left: 1px solid #4a4a4a;
    overflow-y: auto;
    flex-shrink: 0;
    background: #282828;
}

/* Canvas metadata */
.canvas-meta { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; font-size: 0.78rem; }
.canvas-meta .meta-row { display: flex; justify-content: space-between; gap: 0.4rem; }
.canvas-meta .meta-label { color: #999999; font-size: 0.68rem; text-transform: uppercase; font-weight: 600; }
.canvas-meta .meta-value { color: #F0F0F0; text-align: right; word-break: break-all; }
.workspace-contract-summary {
    margin-top: 0.75rem;
    padding: 0.75rem;
    border: 1px solid #3d4d49;
    border-radius: 10px;
    background: linear-gradient(180deg, #26302d 0%, #1f2624 100%);
}
.workspace-contract-summary.is-preview {
    margin-top: 0;
}
.workspace-contract-summary-header {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.workspace-contract-summary-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.workspace-contract-summary-title {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #8fd8c5;
}
.workspace-contract-summary-badges {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.workspace-contract-count {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.42rem;
    border-radius: 999px;
    border: 1px solid rgba(143, 216, 197, 0.24);
    background: rgba(13, 147, 115, 0.12);
    color: #bff7e9;
    font-size: 0.64rem;
}
.workspace-contract-summary-copy {
    font-size: 0.74rem;
    color: #d0d7de;
    line-height: 1.35;
}
.workspace-contract-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    margin-top: 0.7rem;
}
.workspace-contract-checklist-card {
    padding: 0.6rem;
    border-radius: 8px;
    border: 1px solid rgba(143, 216, 197, 0.12);
    background: rgba(12, 17, 16, 0.28);
}
.workspace-contract-checklist-title {
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9fe8d5;
    margin-bottom: 0.45rem;
}
.workspace-contract-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: min(24vh, 14rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 0.2rem;
}
.workspace-contract-checklist-item {
    display: flex;
    gap: 0.45rem;
    align-items: flex-start;
}
.workspace-contract-checklist-item.empty {
    opacity: 0.75;
}
.workspace-contract-check {
    width: 0.8rem;
    height: 0.8rem;
    margin-top: 0.1rem;
    border-radius: 999px;
    border: 1px solid rgba(159, 232, 213, 0.32);
    background: transparent;
    flex-shrink: 0;
}
.workspace-contract-check.checked {
    background: #03C497;
    border-color: #03C497;
    box-shadow: inset 0 0 0 2px rgba(19, 31, 27, 0.95);
}
.workspace-contract-check.blocked {
    background: #f85149;
    border-color: #f85149;
    box-shadow: inset 0 0 0 2px rgba(36, 10, 10, 0.95);
}
.workspace-contract-checklist-body {
    min-width: 0;
}
.workspace-contract-checklist-name {
    color: #f0f6fc;
    font-size: 0.73rem;
    line-height: 1.3;
}
.workspace-contract-checklist-meta {
    margin-top: 0.12rem;
    color: #9fb0ae;
    font-size: 0.68rem;
    line-height: 1.35;
    word-break: break-word;
}
.workspace-contract-checklist-meta code {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    padding: 0.08rem 0.28rem;
    font-size: 0.66rem;
    color: #d7fff4;
}
.workspace-contract-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.28rem;
    margin-top: 0.28rem;
}
.workspace-contract-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.36rem;
    border-radius: 999px;
    background: rgba(159, 232, 213, 0.1);
    border: 1px solid rgba(159, 232, 213, 0.16);
    color: #c9fff2;
    font-size: 0.62rem;
    line-height: 1.2;
}
.workspace-contract-chip.muted {
    color: #aab8b6;
    border-color: rgba(170, 184, 182, 0.18);
    background: rgba(170, 184, 182, 0.08);
}

/* Token usage badge (inline on messages) */
.token-badge {
    display: inline-block;
    font-size: 0.65rem;
    color: #32CDA7;
    background: rgba(56, 139, 253, 0.12);
    border: 1px solid rgba(56, 139, 253, 0.25);
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: 6px;
    cursor: default;
    white-space: nowrap;
}

/* Token usage section in canvas sidebar */
.canvas-token-usage {
    margin-bottom: 1rem;
    font-size: 0.78rem;
}
.token-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid #3d3d3d;
    margin-bottom: 0.4rem;
}
.token-section-header h4 {
    margin: 0;
    font-size: 0.72rem;
    color: #999999;
    text-transform: uppercase;
    font-weight: 600;
}
.token-total {
    font-size: 0.82rem;
    font-weight: 700;
    color: #32CDA7;
}
.token-summary {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.token-summary .meta-row { display: flex; justify-content: space-between; gap: 0.4rem; }
.token-summary .meta-label { color: #999999; font-size: 0.68rem; text-transform: uppercase; font-weight: 600; }
.token-summary .meta-value { color: #F0F0F0; text-align: right; }
.token-turns-wrap { margin-top: 0.5rem; }
.token-turns-btn {
    background: none;
    border: 1px solid #4a4a4a;
    color: #03C497;
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
}
.token-turns-btn:hover { background: #333333; }
.token-turns-detail { margin-top: 0.4rem; }
.token-turns-loading { color: #999999; font-size: 0.72rem; padding: 0.3rem 0; }
.token-turns-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.68rem;
}
.token-turns-table th {
    color: #999999;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.62rem;
    text-align: left;
    padding: 3px 4px;
    border-bottom: 1px solid #3d3d3d;
}
.token-turns-table td {
    color: #F0F0F0;
    padding: 3px 4px;
    border-bottom: 1px solid #333333;
}
.token-turns-table tr:hover td { background: #333333; }

/* Subtasks */
.canvas-subtasks h3 { font-size: 0.72rem; color: #999999; text-transform: uppercase; margin-bottom: 0.4rem; padding-bottom: 0.3rem; border-bottom: 1px solid #3d3d3d; }
.canvas-subtask-empty { color: #656565; font-size: 0.75rem; padding: 0.5rem 0; }

.subtask-item { display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0; font-size: 0.78rem; border-bottom: 1px solid #333333; cursor: pointer; min-height: 36px; }
.subtask-item:hover { background: #333333; border-radius: 3px; }

.subtask-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.subtask-dot.pending { background: #656565; }
.subtask-dot.in_progress { background: #d29922; }
.subtask-dot.completed { background: #03C497; }
.subtask-dot.failed { background: #f85149; }
.subtask-dot.awaiting_approval { background: #d29922; }
.subtask-dot.awaiting_input { background: #d29922; }
.subtask-dot.awaiting_subtask { background: #388bfd; }
.subtask-dot.awaiting_jobs { background: #388bfd; }
.subtask-dot.cancelled { background: #656565; }
.subtask-dot.escalated { background: #db6d28; }
.subtask-dot.paused { background: #03C497; }

.subtask-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #F0F0F0; }
.subtask-agent { font-size: 0.65rem; color: #03C497; flex-shrink: 0; }

/* Canvas result */
.canvas-result { margin-top: 1rem; }
.canvas-result-box {
    padding: 0.6rem 0.8rem; background: #0a2e24; border: 1px solid #0D9373; border-radius: 4px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; font-size: 0.78rem; line-height: 1.5;
    white-space: pre-wrap; word-break: break-word; max-height: 300px; overflow-y: auto; color: #F0F0F0;
}
.canvas-result-box.failed { background: #1f0d0d; border-color: #402020; }
.canvas-result-box.cancelled { background: #333333; border-color: #4a4a4a; color: #999999; }
.canvas-result-label { font-size: 0.68rem; color: #999999; text-transform: uppercase; font-weight: 600; margin-bottom: 0.3rem; }

/* Canvas question */
/* Context usage warning banner */
.context-warning-banner {
    display: flex; align-items: flex-start; gap: 0.6rem;
    padding: 0.6rem 0.8rem; margin: 0.4rem 0;
    border-radius: 6px; font-size: 0.78rem;
    position: relative;
}
.context-warning-banner.high-usage {
    background: rgba(210,153,34,0.12); border: 1px solid rgba(210,153,34,0.4);
}
.context-warning-banner.compaction {
    background: rgba(248,81,73,0.12); border: 1px solid rgba(248,81,73,0.4);
}
.context-warning-icon { font-size: 1.1rem; flex-shrink: 0; line-height: 1.2; }
.context-warning-body { flex: 1; min-width: 0; }
.context-warning-title { font-weight: 700; color: #f0e6d0; margin-bottom: 0.2rem; }
.context-warning-text { color: #999999; line-height: 1.4; }
.context-warning-bar-wrap {
    width: 100%; height: 6px; background: #3d3d3d; border-radius: 3px;
    margin: 0.3rem 0; overflow: hidden;
}
.context-warning-bar { height: 100%; border-radius: 3px; transition: width 0.3s ease; }
.context-warning-dismiss {
    position: absolute; top: 0.3rem; right: 0.4rem;
    background: none; border: none; color: #999999; cursor: pointer;
    font-size: 0.8rem; padding: 0.2rem; line-height: 1;
}
.context-warning-dismiss:hover { color: #F0F0F0; }

/* Context usage bar in sidebar */
.canvas-context-usage { padding: 0.5rem 0; }
.context-bar-wrap {
    width: 100%; height: 6px; background: #3d3d3d; border-radius: 3px;
    margin: 0.3rem 0 0.4rem; overflow: hidden;
}
.context-bar { height: 100%; border-radius: 3px; transition: width 0.5s ease; }

.canvas-question {
    padding: 0.45rem 0.9rem; background: #1a1500; border-bottom: 2px solid #d29922;
    animation: question-pulse 2s ease-in-out infinite; flex-shrink: 0;
}
.canvas-question-inner { display: flex; align-items: flex-start; gap: 0.5rem; }
.canvas-question-icon { font-size: 1.05rem; flex-shrink: 0; color: #d29922; }
.canvas-question-text { flex: 1; font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; font-size: 0.76rem; color: #f0e6d0; line-height: 1.35; white-space: pre-wrap; margin: 0; padding: 0; }
.canvas-question-form { display: flex; gap: 0.3rem; flex-shrink: 0; }
.canvas-question-actions { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.canvas-question-form .question-response-input { width: 210px; padding: 0.3rem 0.5rem; background: #282828; border: 1px solid #d29922; border-radius: 4px; color: #F0F0F0; font-size: 0.74rem; min-height: 34px; max-height: 160px; line-height: 1.35; font-family: inherit; resize: none; overflow-y: auto; box-sizing: border-box; }
.canvas-question-form .question-response-input:focus { outline: none; border-color: #f0c000; box-shadow: 0 0 0 2px rgba(210,153,34,0.3); }
.canvas-question-form button { padding: 0.3rem 0.65rem; background: #d29922; border: none; border-radius: 4px; color: #282828; font-size: 0.74rem; font-weight: 700; cursor: pointer; min-height: 34px; }
.canvas-question-form button:hover { background: #f0c000; }
.canvas-question-form .workspace-contract-toggle {
    background: #3a3320;
    border-color: #6f5b20;
    color: #f0d487;
}
.canvas-question-form .workspace-contract-toggle.active {
    background: #5a4914;
    border-color: #f0c000;
}
.canvas-question.scope-open .canvas-question-inner {
    flex-wrap: wrap;
}
.canvas-question.scope-open .canvas-question-form {
    width: 100%;
    flex: 1 1 100%;
    align-self: stretch;
    flex-wrap: wrap;
}
.canvas-question.scope-open .canvas-question-form .question-response-input {
    width: auto;
    min-width: min(100%, 16rem);
    flex: 1 1 18rem;
}
.canvas-question-editor {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 0.55rem;
    box-sizing: border-box;
    flex: 1 0 100%;
}

/* Live activity area */
.canvas-live {
    flex: 1; min-height: 0; overflow-y: auto; padding: 0.3rem 0.75rem;
}

.canvas-section-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.2rem;
}
.canvas-section-header h3 { font-size: 0.65rem; color: #999999; text-transform: uppercase; }

/* Follow checkbox — sits in footer panels */
.follow-label {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.7rem; color: #999999; cursor: pointer;
    user-select: none; -webkit-user-select: none;
    white-space: nowrap;
}
.follow-label input[type="checkbox"] {
    width: 14px; height: 14px; margin: 0; cursor: pointer;
    accent-color: #03C497;
}
.follow-label:hover { color: #F0F0F0; }

/* Follow label is now inline in header bars — no separate footer needed */

.canvas-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #656565; }
.canvas-live-dot.active { background: #03C497; animation: pulse-dot 1.5s ease-in-out infinite; }

@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.canvas-live-messages { display: flex; flex-direction: column; gap: 0.3rem; }

.canvas-live-msg {
    font-size: 0.78rem; line-height: 1.4; padding: 0.3rem 0.5rem;
    background: #333333; border-radius: 3px; border-left: 2px solid #4a4a4a;
}
.canvas-live-msg .live-meta { font-size: 0.65rem; color: #999999; margin-bottom: 0.1rem; }
.canvas-live-msg .live-source { color: #03C497; font-weight: 600; }
.canvas-live-msg .live-type { color: #d29922; }
.canvas-live-msg .live-content {
    white-space: pre-wrap; word-break: break-word;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; font-size: 0.88em;
    margin: 0; padding: 0; line-height: 1.5;
}

.canvas-live-msg.type-stream { border-left-color: #03C497; }
.canvas-live-msg.type-delegation { border-left-color: #d29922; }
.canvas-live-msg.type-tool_output { border-left-color: #0D9373; }
.canvas-live-msg.type-error { border-left-color: #f85149; }
.canvas-live-msg.type-task_summary { border-left-color: #03C497; background: #0a2e24; }

.live-empty { color: #656565; font-style: italic; padding: 1.5rem 1rem; text-align: center; font-size: 0.85rem; }

.canvas-final-response {
    margin-top: 0.5rem; padding: 0.6rem 0.8rem; background: #0a2e24;
    border: 1px solid #0D9373; border-radius: 6px; border-left: 3px solid #03C497;
}
.canvas-final-response.failed { background: #1f0d0d; border-color: #402020; border-left-color: #f85149; }
.canvas-final-response.cancelled { background: #333333; border-color: #4a4a4a; border-left-color: #999999; }
.canvas-final-label {
    font-size: 0.65rem; color: #03C497; text-transform: uppercase; font-weight: 700; margin-bottom: 0.3rem;
}
.canvas-final-response.failed .canvas-final-label { color: #f85149; }
.canvas-final-response.cancelled .canvas-final-label { color: #999999; }
.canvas-final-text {
    font-size: 0.82rem; line-height: 1.5; color: #F0F0F0;
    word-break: break-word;
}
.canvas-final-text h1 { font-size: 1rem; }
.canvas-final-text h2 { font-size: 0.92rem; }
.canvas-final-text h3 { font-size: 0.86rem; }
.canvas-final-text h4, .canvas-final-text h5, .canvas-final-text h6 { font-size: 0.82rem; }
.canvas-final-text .md-code-block { font-size: 0.75rem; }

.full-log-link {
    font-size: 0.72rem; color: #03C497; text-decoration: none; margin-left: auto;
}
.full-log-link:hover { text-decoration: underline; }

/* Canvas bottom input */
.canvas-input {
    padding: 0.3rem 0.75rem; border-top: 1px solid #4a4a4a;
    background: #333333; flex-shrink: 0;
}

/* Artifacts section */
.canvas-artifacts { padding: 0.75rem; }
.canvas-artifacts h3 { font-size: 0.75rem; color: #999999; text-transform: uppercase; margin-bottom: 0.5rem; }

/* --- Artifact section headers --- */
.artifact-section-header {
    font-size: 0.65rem; color: #999999; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.04em; padding: 0.5rem 0.5rem 0.25rem;
    margin-top: 0.5rem; display: flex; align-items: center; gap: 0.4rem;
}
.artifact-section-header:first-child { margin-top: 0; }
.artifact-section-icon { font-size: 0.8rem; }
.artifact-section-count {
    font-weight: 400; color: #656565; font-size: 0.55rem;
    margin-left: auto; text-transform: none;
}
.artifact-section-toggle {
    cursor: pointer; border-radius: 4px; padding: 0.35rem 0.45rem;
    transition: background 0.15s; user-select: none;
}
.artifact-section-toggle:hover { background: #3d3d3d; }
.artifact-toggle-chevron {
    font-size: 0.5rem; color: #656565; display: inline-block;
    transition: transform 0.15s; width: 0.7rem;
}
.artifact-section-open .artifact-toggle-chevron { color: #999999; }

/* --- Artifact items --- */
.artifact-item {
    display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.3rem 0.4rem;
    border-radius: 4px; cursor: pointer; font-size: 0.7rem; transition: background 0.15s;
    min-height: 32px;
}
.artifact-item:hover { background: #3d3d3d; }
.artifact-featured {
    background: #282828; border: 1px solid #3d3d3d; border-radius: 6px;
    padding: 0.4rem 0.5rem; margin-bottom: 0.2rem;
}
.artifact-featured:hover { background: #333333; border-color: #4a4a4a; }
.artifact-icon { font-size: 0.85rem; flex-shrink: 0; margin-top: 0.1rem; }
.artifact-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.artifact-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #03C497; }
.artifact-meta { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.artifact-size { color: #656565; font-size: 0.6rem; flex-shrink: 0; }
.artifact-time { color: #656565; font-size: 0.55rem; flex-shrink: 0; }
.artifact-turn-badge {
    font-size: 0.5rem; padding: 0.05rem 0.25rem; border-radius: 3px;
    background: rgba(139,92,246,0.15); color: #03C497; font-weight: 600;
    flex-shrink: 0;
}
.artifact-empty, .artifact-loading { color: #656565; font-size: 0.7rem; font-style: italic; padding: 0.25rem 0; }
.artifact-turn-label {
    font-size: 0.6rem; color: #656565; text-transform: uppercase;
    letter-spacing: 0.05em; padding: 0.4rem 0.5rem 0.15rem;
    border-top: 1px solid #3d3d3d; margin-top: 0.25rem;
}
.artifact-turn-label:first-child { border-top: none; margin-top: 0; }
.artifact-op-badge {
    font-size: 0.5rem; padding: 0.1rem 0.3rem; border-radius: 3px;
    font-weight: 600; flex-shrink: 0; text-transform: uppercase;
    letter-spacing: 0.03em;
}
.badge-created { background: rgba(63,185,80,0.15); color: #03C497; }
.badge-modified { background: rgba(210,153,34,0.15); color: #d29922; }
.badge-generated { background: rgba(88,166,255,0.15); color: #03C497; }

/* --- Collapsible supporting files --- */
.artifact-collapsible { margin-top: 0.25rem; }
.artifact-collapsible-content { padding-left: 0; }

/* ==================== BROADCASTS VIEW ==================== */

.broadcasts-view {
    display: flex; flex-direction: column; height: calc(100vh - 36px); height: calc(100dvh - 36px);
}

.view-header {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.3rem 1rem; background: #333333;
    border-bottom: 1px solid #4a4a4a; flex-shrink: 0;
}
.view-header h2 { font-size: 0.88rem; color: #F0F0F0; flex: 1; }

.broadcasts-messages {
    flex: 1; overflow-y: auto; padding: 0.3rem 0.75rem;
    display: flex; flex-direction: column; gap: 0.3rem;
}

/* Broadcast message styles (reuse .msg classes) */
.broadcasts-messages .msg {
    background: #333333; border: 1px solid #4a4a4a; border-radius: 4px;
    padding: 0.5rem 0.75rem; font-size: 0.8rem; line-height: 1.4;
}
.broadcasts-messages .msg .msg-meta { display: flex; gap: 0.5rem; margin-bottom: 0.2rem; font-size: 0.7rem; color: #999999; }
.broadcasts-messages .msg .msg-source { color: #03C497; font-weight: 600; }
.broadcasts-messages .msg .msg-type { color: #d29922; }
.broadcasts-messages .msg .msg-content { white-space: pre-wrap; word-break: break-word; }

.broadcasts-messages .msg.type-error { border-left: 3px solid #f85149; }
.broadcasts-messages .msg.type-user_message { border-left: 3px solid #03C497; }
.broadcasts-messages .msg.type-response { border-left: 3px solid #03C497; }
.broadcasts-messages .msg.type-delegation { border-left: 3px solid #d29922; }
.broadcasts-messages .msg.type-tool_output { border-left: 3px solid #0D9373; }
.broadcasts-messages .msg.type-task_summary { border-left: 3px solid #03C497; background: #0a2e24; }
.broadcasts-messages .msg.streaming .msg-content::after { content: "\2588"; animation: blink-cursor 1s step-end infinite; color: #03C497; }

@keyframes blink-cursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.broadcast-task-link {
    font-size: 0.65rem; color: #0D9373; text-decoration: none;
    background: #0a3d30; padding: 0.1rem 0.3rem; border-radius: 3px;
}
.broadcast-task-link:hover { text-decoration: underline; }

/* ==================== FULL LOG VIEW ==================== */

.log-view {
    display: flex; flex-direction: column; height: calc(100vh - 36px); height: calc(100dvh - 36px);
}

.log-view-steps {
    flex: 1; overflow-y: auto; padding: 0.3rem 0.75rem;
}

/* ==================== ARTIFACT VIEWER OVERLAY ==================== */

.artifact-viewer {
    position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7);
    z-index: 2000; display: flex; justify-content: center; align-items: center;
}
.artifact-viewer.hidden { display: none; }

.artifact-viewer-panel {
    background: #333333; border: 1px solid #4a4a4a; border-radius: 8px;
    width: calc(100vw - 48px); max-width: none; height: calc(100dvh - 48px);
    display: flex; flex-direction: column; overflow: hidden;
}

.artifact-viewer-header {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.75rem 1rem; border-bottom: 1px solid #4a4a4a; flex-shrink: 0;
    padding-top: max(0.75rem, env(safe-area-inset-top, 0px));
}
.artifact-viewer-header h2 { font-size: 0.95rem; color: #F0F0F0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.artifact-viewer-actions {
    display: flex; align-items: center; gap: 0.45rem; flex-shrink: 0; flex-wrap: wrap;
}
.artifact-viewer-actions.hidden,
.artifact-action-btn.hidden,
.artifact-pdf-toggle.hidden { display: none; }
.artifact-action-btn,
.artifact-pdf-toggle {
    border: 1px solid #4a4a4a; border-radius: 6px; background: #282828; color: #F0F0F0;
    min-height: 34px; padding: 0.25rem 0.55rem; display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.72rem; line-height: 1.1; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.artifact-action-btn:hover,
.artifact-pdf-toggle:hover { border-color: #03C497; color: #03C497; text-decoration: none; }
.artifact-pdf-toggle input { margin: 0; accent-color: #03C497; }

/* Close button — always visible, never squeezed */
.artifact-close-btn {
    background: none; border: 1px solid #4a4a4a; color: #999999; font-size: 1rem;
    cursor: pointer; padding: 0.3rem 0.6rem; line-height: 1; border-radius: 6px;
    min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center;
    gap: 0.3rem; flex-shrink: 0; white-space: nowrap;
}
.artifact-close-btn:hover { color: #f85149; border-color: #f85149; }
.artifact-close-btn .close-label { font-size: 0.8rem; }

/* Back button for deep-link navigation */
.artifact-back-btn {
    background: none; border: 1px solid #4a4a4a; color: #999999; font-size: 1rem;
    cursor: pointer; padding: 0.3rem 0.6rem; line-height: 1; border-radius: 6px;
    min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.artifact-back-btn:hover { color: #03C497; border-color: #03C497; }
.artifact-back-btn.hidden { display: none; }

.artifact-viewer-content { flex: 1; overflow: auto; padding: 1rem 1.25rem; }
.artifact-image { max-width: 100%; height: auto; border-radius: 4px; }

.artifact-code {
    background: #282828; border: 1px solid #4a4a4a; border-radius: 4px;
    padding: 1rem; font-size: 0.85rem; color: #F0F0F0;
    white-space: pre-wrap; word-break: break-word; line-height: 1.5; overflow-x: auto;
}

.code-container {
    padding: 0 !important;
}
.code-line {
    display: flex;
    align-items: flex-start;
    line-height: 1.5;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}
.code-line:hover {
    background: rgba(255, 255, 255, 0.03);
}
.code-line.highlighted {
    background: rgba(3, 196, 151, 0.15) !important;
    border-left: 3px solid #03C497;
}
.code-line.highlighted .line-num {
    color: #03C497;
    font-weight: bold;
}
.line-num {
    color: #666;
    text-align: right;
    padding-right: 12px;
    padding-left: 8px;
    user-select: none;
    min-width: 3.5em;
    border-right: 1px solid #4a4a4a;
    margin-right: 12px;
    background: #222;
}
.line-content {
    white-space: pre-wrap;
    word-break: break-all;
    flex: 1;
}

.artifact-markdown { color: #F0F0F0; line-height: 1.6; font-size: 0.9rem; }
.artifact-markdown h1 { font-size: 1.6rem; color: #fff; margin: 1rem 0 0.5rem; border-bottom: 1px solid #4a4a4a; padding-bottom: 0.3rem; }
.artifact-markdown h2 { font-size: 1.3rem; color: #fff; margin: 0.8rem 0 0.4rem; border-bottom: 1px solid #3d3d3d; padding-bottom: 0.2rem; }
.artifact-markdown h3 { font-size: 1.1rem; color: #F5F5F5; margin: 0.6rem 0 0.3rem; }
.artifact-markdown h4, .artifact-markdown h5, .artifact-markdown h6 { font-size: 0.95rem; color: #F0F0F0; margin: 0.5rem 0 0.25rem; }
.artifact-markdown p { margin: 0.3rem 0; }
.artifact-markdown ul, .artifact-markdown ol { padding-left: 1.5rem; margin: 0.25rem 0; }
.artifact-markdown li { margin: 0.15rem 0; }
.artifact-markdown a { color: #03C497; text-decoration: none; }
.artifact-markdown a:hover { text-decoration: underline; }
.artifact-markdown strong { color: #fff; }
.artifact-markdown hr { border: none; border-top: 1px solid #4a4a4a; margin: 0.75rem 0; }
.artifact-markdown .md-code-block { background: #282828; border: 1px solid #4a4a4a; border-radius: 4px; padding: 0.75rem; margin: 0.5rem 0; overflow-x: auto; font-size: 0.85rem; line-height: 1.4; }
.artifact-markdown .md-code-block code { color: #F0F0F0; }
.artifact-markdown .md-inline-code { background: #3d3d3d; padding: 0.15rem 0.35rem; border-radius: 3px; font-size: 0.85em; color: #F5F5F5; }
.artifact-markdown .md-image { max-width: 100%; border-radius: 4px; margin: 0.5rem 0; }
.artifact-markdown .md-table-wrapper { overflow-x: auto; margin: 0.65rem 0; max-width: 100%; }
.artifact-markdown .md-table { border-collapse: collapse; width: max-content; min-width: 100%; font-size: 0.83rem; table-layout: auto; }
.artifact-markdown .md-table th, .artifact-markdown .md-table td { border: 1px solid #4a4a4a; padding: 6px 8px; text-align: left; vertical-align: top; }
.artifact-markdown .md-table th { background: #333333; color: #F5F5F5; font-weight: 600; line-height: 1.2; vertical-align: bottom; white-space: normal; overflow-wrap: anywhere; }
.artifact-markdown .md-table td { color: #F0F0F0; }
.artifact-markdown .md-table col.md-numeric-col { width: 1%; }
.artifact-markdown .md-table .md-text-col { min-width: 6rem; max-width: 14rem; }
.artifact-markdown .md-table .md-numeric-col { text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.artifact-markdown .md-table th.md-numeric-col { min-width: 4.75rem; max-width: 7.5rem; font-size: 0.76rem; line-height: 1.15; color: #D8D8D8; }
.artifact-markdown .md-table td.md-numeric-col { min-width: 4.75rem; max-width: 7.5rem; white-space: nowrap; }
.artifact-markdown .md-table-compact-numeric th.md-numeric-col { padding-left: 6px; padding-right: 6px; }
.artifact-markdown .md-table-compact-numeric td.md-numeric-col { padding-left: 6px; padding-right: 6px; }
.artifact-markdown .md-table tr:nth-child(even) td { background: rgba(110,118,129,0.05); }
.artifact-markdown .md-table tr:hover td { background: rgba(110,118,129,0.1); }
.artifact-error { color: #f85149; padding: 1rem; text-align: center; }

.report-pdf-mode-layout {
    display: grid; grid-template-columns: minmax(210px, 270px) minmax(0, 1fr);
    gap: 1rem; height: 100%; min-height: 0;
}
.report-section-panel {
    border: 1px solid #4a4a4a; border-radius: 6px; background: #282828;
    min-height: 0; overflow: hidden; display: flex; flex-direction: column;
}
.report-section-panel-head {
    display: flex; justify-content: space-between; gap: 0.5rem; align-items: center;
    padding: 0.7rem 0.8rem; border-bottom: 1px solid #3d3d3d; color: #F0F0F0; font-size: 0.82rem;
}
.report-section-panel-head span { color: #999999; font-size: 0.72rem; }
.report-section-all {
    display: flex; align-items: center; gap: 0.45rem; padding: 0.55rem 0.8rem;
    color: #d8d8d8; font-size: 0.76rem; border-bottom: 1px solid #3d3d3d;
}
.report-section-list { overflow-y: auto; padding: 0.45rem; display: flex; flex-direction: column; gap: 0.35rem; }
.report-section-option {
    display: grid; grid-template-columns: auto auto auto minmax(0, 1fr); align-items: center;
    gap: 0.35rem; padding: 0.42rem; border: 1px solid transparent; border-radius: 5px;
    color: #d8d8d8; font-size: 0.72rem; cursor: pointer;
}
.report-section-option:hover { background: #333333; border-color: #3d3d3d; }
.report-section-option.is-active {
    background: rgba(3,196,151,0.12); border-color: rgba(3,196,151,0.55);
}
.report-section-option input,
.report-section-all input { accent-color: #03C497; }
.report-section-index {
    color: #656565; font-variant-numeric: tabular-nums; min-width: 1.2rem; text-align: right;
}
.report-section-type {
    color: #03C497; background: rgba(3,196,151,0.1); border-radius: 3px;
    padding: 0.05rem 0.25rem; text-transform: uppercase; font-size: 0.58rem;
}
.report-section-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-selected-preview {
    min-width: 0; overflow: auto; padding-right: 0.25rem;
}
.report-preview-block {
    border: 1px solid #3d3d3d; border-radius: 6px; padding: 0.55rem 0.7rem;
    margin-bottom: 0.7rem; background: #303030;
}
.report-preview-block.is-active {
    border-color: rgba(3,196,151,0.65); box-shadow: 0 0 0 1px rgba(3,196,151,0.18);
}
.report-preview-block.is-deselected {
    background: #2b2b2b; border-style: dashed;
}
.report-preview-block.is-deselected .report-preview-block-body { display: none; }
.report-preview-block-tools {
    display: flex; gap: 0.4rem; justify-content: space-between; align-items: center; color: #656565;
    font-size: 0.62rem; text-transform: uppercase; margin-bottom: 0.35rem;
}
.report-preview-block-meta { display: flex; gap: 0.4rem; align-items: center; min-width: 0; flex: 1; }
.report-preview-block-kind,
.report-preview-block-mode { flex-shrink: 0; }
.report-preview-block-title {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: #d8d8d8; text-transform: none; font-size: 0.72rem;
}
.report-block-visibility-btn {
    border: 1px solid #4a4a4a; border-radius: 4px; background: #282828; color: #d8d8d8;
    min-height: 26px; padding: 0.12rem 0.45rem; font-size: 0.64rem; text-transform: uppercase;
    cursor: pointer; flex-shrink: 0;
}
.report-block-visibility-btn:hover { border-color: #03C497; color: #03C497; }
.report-preview-block.is-deselected .report-block-visibility-btn {
    border-color: rgba(3,196,151,0.45); color: #03C497;
}
.report-preview-block-body[contenteditable="true"] {
    outline: none; border-radius: 4px; padding: 0.2rem;
}
.report-preview-block-body[contenteditable="true"]:focus {
    box-shadow: 0 0 0 2px rgba(3,196,151,0.25); background: rgba(3,196,151,0.05);
}

/* ==================== LIVE STATUS ==================== */

.live-status-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.live-status-header {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: flex-start;
    background: #303333;
    border: 1px solid #4a4a4a;
    border-left: 3px solid #03C497;
    border-radius: 8px;
    padding: 0.85rem 1rem;
}

.live-status-eyebrow {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #32cda7;
    margin-bottom: 0.25rem;
}

.live-status-header h3 {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    color: #f5f5f5;
}

.live-status-header p {
    margin: 0;
    color: #c9d1d9;
    font-size: 0.82rem;
    line-height: 1.45;
}

.live-status-time {
    flex-shrink: 0;
    color: #8b949e;
    font-size: 0.72rem;
}

.live-status-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row dense;
    align-items: start;
    gap: 0.75rem;
}

.live-status-card {
    background: #333333;
    border: 1px solid #4a4a4a;
    border-radius: 8px;
    padding: 0.85rem;
    min-width: 0;
}

.live-status-card-header,
.live-job-top {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.55rem;
}

.live-status-card-header h3 {
    margin: 0;
    font-size: 0.72rem;
    color: #b9c0c8;
    text-transform: uppercase;
}

.live-status-card-header span {
    color: #8b949e;
    font-size: 0.7rem;
}

.live-status-card p,
.live-next {
    color: #d0d7de;
    font-size: 0.82rem;
    line-height: 1.45;
}

.live-status-card h4 {
    margin: 0.65rem 0 0.25rem;
    color: #999999;
    font-size: 0.68rem;
    text-transform: uppercase;
}

.live-status-card ul {
    margin: 0;
    padding-left: 1rem;
    color: #d0d7de;
    font-size: 0.78rem;
}

.live-status-card ul.concerns { color: #f0c674; }
.live-status-muted,
.live-status-empty {
    color: #8b949e;
    font-size: 0.8rem;
    font-style: italic;
    padding: 0.3rem 0;
}

.live-monitor-headline {
    margin: 0.25rem 0 0.5rem;
    font-weight: 600;
    color: #58a6ff;
    font-size: 0.85rem;
}

.live-monitor-focus {
    margin: 0.25rem 0;
    padding: 0.4rem 0.55rem;
    background: rgba(88,166,255,0.07);
    border-left: 2px solid #58a6ff;
    font-size: 0.78rem;
    color: #d0d7de;
}

.live-monitor-meta {
    margin-top: 0.6rem;
    color: #6e7681;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Monitor Timeline card — sits beside the Monitor card on desktop, falls back
   to a full-width row below it on narrow desktops and mobile. */
.live-timeline-card {
    /* Wide desktop: natural placement (column 2 of row 1, beside Monitor). */
    padding: 0.7rem 0.75rem 0.75rem;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.live-timeline-card .live-status-card-header {
    margin-bottom: 0.4rem;
}

.live-timeline-top {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    align-items: flex-start;
    margin-bottom: 0.45rem;
}

.live-timeline-top > div:first-child {
    min-width: 0;
}

.live-timeline-top strong {
    display: block;
    color: #f0f0f0;
    font-size: 0.86rem;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-timeline-top p {
    margin: 0.18rem 0 0;
    color: #aeb6bf;
    font-size: 0.74rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.live-timeline-percent {
    flex: 0 0 auto;
    color: #32cda7;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}

.live-timeline-progress {
    height: 5px;
    background: #1f2424;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 0.6rem;
}

.live-timeline-progress div {
    height: 100%;
    background: linear-gradient(90deg, #03C497, #58a6ff);
    border-radius: inherit;
    transition: width 220ms ease;
}

.live-timeline-list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    max-height: 460px;
    overflow-y: auto;
    padding: 0.05rem 0.15rem 0.05rem 0;
    scrollbar-width: thin;
    scrollbar-color: #4a4a4a transparent;
}

.live-timeline-list::-webkit-scrollbar { width: 6px; }
.live-timeline-list::-webkit-scrollbar-thumb {
    background: #4a4a4a;
    border-radius: 999px;
}
.live-timeline-list::-webkit-scrollbar-track { background: transparent; }

/* Vertical rail connecting all step markers. */
.live-timeline-list::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: linear-gradient(
        to bottom,
        rgba(3,196,151,0.55) 0%,
        rgba(88,166,255,0.4) 55%,
        rgba(110,118,129,0.35) 100%
    );
    border-radius: 2px;
}

.live-timeline-step {
    position: relative;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 0.5rem;
    align-items: start;
}

.live-timeline-marker {
    position: relative;
    z-index: 1;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    margin-top: 0.18rem;
}

.live-timeline-marker span {
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #2a2e2e;
    border: 1.5px solid #6e7681;
    color: #c9d1d9;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 0 0 3px #333333;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.live-timeline-body {
    min-width: 0;
    padding: 0.35rem 0.5rem 0.4rem;
    background: rgba(255,255,255,0.018);
    border: 1px solid rgba(255,255,255,0.06);
    border-left: 2px solid transparent;
    border-radius: 6px;
    transition: background 160ms ease, border-color 160ms ease;
}

.live-timeline-step.current .live-timeline-body {
    border-color: rgba(88,166,255,0.45);
    border-left-color: #58a6ff;
    background: rgba(88,166,255,0.08);
    box-shadow: inset 0 0 0 1px rgba(88,166,255,0.12);
}

.live-timeline-step.current .live-timeline-marker span {
    transform: scale(1.05);
    box-shadow: 0 0 0 3px #333333, 0 0 0 5px rgba(88,166,255,0.25);
}

.live-timeline-step-top {
    display: flex;
    justify-content: space-between;
    gap: 0.4rem;
    align-items: center;
}

.live-timeline-step-top h4 {
    margin: 0;
    color: #e8edf2;
    font-size: 0.76rem;
    font-weight: 600;
    text-transform: none;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}

.live-timeline-step-top span {
    flex: 0 0 auto;
    color: #8b949e;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.08rem 0.4rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    line-height: 1.4;
}

.live-timeline-body p {
    margin: 0.2rem 0 0;
    color: #c9d1d9;
    font-size: 0.72rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.live-timeline-meta {
    margin-top: 0.22rem;
    color: #7f8a94;
    font-size: 0.62rem;
    letter-spacing: 0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-timeline-evidence {
    display: flex;
    flex-wrap: wrap;
    gap: 0.22rem;
    margin-top: 0.3rem;
}

.live-timeline-evidence span {
    max-width: 100%;
    padding: 0.1rem 0.36rem;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    color: #9aa4ad;
    background: rgba(255,255,255,0.025);
    font-size: 0.62rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-timeline-substeps {
    display: grid;
    gap: 0.18rem;
    margin-top: 0.3rem;
    padding-top: 0.28rem;
    border-top: 1px dashed rgba(255,255,255,0.06);
}

.live-timeline-substep {
    display: grid;
    grid-template-columns: 7px minmax(0, 1fr);
    gap: 0.32rem;
    align-items: center;
    color: #aeb6bf;
    font-size: 0.68rem;
    line-height: 1.3;
}

.live-timeline-substep span {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #6e7681;
}

.live-timeline-substep strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

/* ---- status colors ---- */

.live-timeline-step.status-done .live-timeline-marker span,
.live-timeline-substep.status-done span {
    background: #03C497;
    border-color: #03C497;
    color: #06231d;
}

.live-timeline-step.status-done .live-timeline-body {
    border-left-color: rgba(3,196,151,0.55);
}

.live-timeline-step.status-in-progress .live-timeline-marker span,
.live-timeline-substep.status-in-progress span {
    background: #58a6ff;
    border-color: #58a6ff;
    color: #071b2e;
    animation: live-timeline-pulse 1.6s ease-in-out infinite;
}

.live-timeline-step.status-blocked .live-timeline-marker span,
.live-timeline-step.status-failed .live-timeline-marker span,
.live-timeline-substep.status-blocked span,
.live-timeline-substep.status-failed span {
    background: #f0c674;
    border-color: #f0c674;
    color: #271b05;
}

.live-timeline-step.status-blocked .live-timeline-body,
.live-timeline-step.status-failed .live-timeline-body {
    border-left-color: rgba(240,198,116,0.55);
}

.live-timeline-step.status-skipped .live-timeline-marker span,
.live-timeline-substep.status-skipped span {
    background: #6e7681;
    border-color: #6e7681;
    color: #161b22;
}

.live-timeline-step.status-skipped .live-timeline-body { opacity: 0.7; }

@keyframes live-timeline-pulse {
    0%, 100% { box-shadow: 0 0 0 3px #333333, 0 0 0 5px rgba(88,166,255,0.0); }
    50%      { box-shadow: 0 0 0 3px #333333, 0 0 0 5px rgba(88,166,255,0.35); }
}

/* ---- responsive: when there isn't enough horizontal room for both
   Monitor and Timeline side by side, send the timeline to its own full row
   below the Monitor panel. ---- */
@media (max-width: 1080px) {
    .live-timeline-card {
        grid-column: 1 / -1;
    }
}

.live-status-events {
    grid-column: 1 / -1;
}

.live-event-list {
    max-height: 280px;
    overflow-y: auto;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.74rem;
    border-top: 1px solid rgba(255,255,255,0.04);
}

.live-event-row {
    display: grid;
    grid-template-columns: 70px 130px 1fr;
    gap: 0.6rem;
    align-items: baseline;
    padding: 0.3rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    color: #d0d7de;
}

.live-event-row .live-event-time { color: #6e7681; }
.live-event-row .live-event-type {
    color: #79c0ff;
    text-transform: lowercase;
    font-weight: 600;
}
.live-event-row .live-event-detail {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #c9d1d9;
}

.live-event-row.live-event-tool_call_end .live-event-detail,
.live-event-row.live-event-tool_call_start .live-event-detail { color: #b3e5b3; }
.live-event-row.live-event-system_event .live-event-detail { color: #f0c674; }
.live-event-row.live-event-executor_done .live-event-detail { color: #79c0ff; font-weight: 600; }
.live-event-row.live-event-file_change .live-event-detail { color: #ffa657; }

.live-tool-row,
.live-mini-row,
.live-root-row,
.live-file-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.35rem 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    font-size: 0.78rem;
}

.live-tool-row span,
.live-mini-row span,
.live-root-row span {
    color: #f0f0f0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-tool-row strong,
.live-mini-row strong,
.live-root-row strong {
    color: #32cda7;
    font-size: 0.72rem;
}

.live-tool-row small,
.live-mini-row small,
.live-root-row small {
    color: #8b949e;
    font-size: 0.7rem;
}

.live-process-row {
    padding: 0.45rem 0 0.45rem var(--process-depth, 0);
    border-top: 1px solid rgba(255,255,255,0.06);
    min-width: 0;
}

.live-process-top {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    align-items: baseline;
    margin-bottom: 0.2rem;
}

.live-process-top span {
    color: #f0f0f0;
    font-size: 0.78rem;
}

.live-process-top strong {
    color: #32cda7;
    font-size: 0.72rem;
}

.live-process-row code {
    display: block;
    color: #c9d1d9;
    font-size: 0.72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.live-process-row small {
    display: block;
    margin-top: 0.18rem;
    color: #8b949e;
    font-size: 0.68rem;
}

.live-active-tool {
    padding: 0.6rem;
    background: #242b2a;
    border: 1px solid rgba(3, 196, 151, 0.22);
    border-radius: 6px;
    margin-bottom: 0.55rem;
}

.live-active-tool strong { color: #32cda7; }
.live-active-tool p { margin: 0.25rem 0 0; }

.live-job-row {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 0.55rem 0 0.45rem;
}

.live-job-row strong { color: #f0f0f0; font-size: 0.82rem; }
.live-job-row span { color: #32cda7; font-size: 0.72rem; }
.live-job-row.done span { color: #8b949e; }
.live-job-row code,
.live-file-row code {
    color: #c9d1d9;
    font-size: 0.72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-job-tail {
    margin: 0.45rem 0 0;
    max-height: 6.5rem;
    overflow: auto;
    background: #242424;
    border: 1px solid #404040;
    border-radius: 6px;
    padding: 0.45rem;
    color: #d0d7de;
    font-size: 0.7rem;
    line-height: 1.35;
}

.live-file-row {
    grid-template-columns: auto minmax(0, 1fr);
}

.live-file-op {
    color: #32cda7;
    font-size: 0.68rem;
    text-transform: uppercase;
}

/* ==================== RUN VIEW ==================== */

.canvas-run-summary {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.run-summary-header {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: flex-start;
    background: linear-gradient(135deg, rgba(3, 196, 151, 0.08), rgba(13, 147, 115, 0.03));
    border: 1px solid rgba(3, 196, 151, 0.18);
    border-radius: 10px;
    padding: 0.9rem 1rem;
}

.run-summary-eyebrow {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #32cda7;
    margin-bottom: 0.25rem;
}

.run-summary-title {
    font-size: 1rem;
    font-weight: 700;
    color: #f5f5f5;
    margin: 0 0 0.25rem;
}

.run-summary-subtitle {
    font-size: 0.8rem;
    color: #b9c0c8;
    line-height: 1.45;
}

.run-summary-status {
    flex-shrink: 0;
}

.run-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
}

.run-stat-card {
    background: #333333;
    border: 1px solid #4a4a4a;
    border-radius: 8px;
    padding: 0.75rem;
}

.run-stat-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #999999;
    margin-bottom: 0.35rem;
}

.run-stat-value {
    font-size: 1rem;
    font-weight: 700;
    color: #f5f5f5;
    margin-bottom: 0.15rem;
}

.run-stat-meta {
    font-size: 0.72rem;
    color: #8b949e;
}

.run-progress-card,
.run-section {
    background: #333333;
    border: 1px solid #4a4a4a;
    border-radius: 10px;
    padding: 0.9rem 1rem;
}

.run-progress-top,
.run-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}

.run-progress-top h3,
.run-section-header h3 {
    margin: 0;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #999999;
}

.run-progress-percent {
    font-size: 1.1rem;
    font-weight: 700;
    color: #03c497;
}

.run-progress-copy {
    font-size: 0.82rem;
    color: #d0d7de;
    margin-bottom: 0.65rem;
}

.run-progress-bar {
    height: 10px;
    border-radius: 999px;
    background: #282828;
    overflow: hidden;
    border: 1px solid #3d3d3d;
}

.run-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #0d9373, #32cda7);
}

.run-milestone-list,
.run-insight-list,
.run-timeline-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.run-milestone {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.7rem;
    border-radius: 8px;
    background: #2b2b2b;
    border: 1px solid #3d3d3d;
}

.run-milestone.done {
    border-color: rgba(3, 196, 151, 0.35);
    background: rgba(3, 196, 151, 0.08);
}

.run-milestone-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.74rem;
    font-weight: 700;
    background: #3d3d3d;
    color: #999999;
    flex-shrink: 0;
}

.run-milestone.done .run-milestone-icon {
    background: #06503d;
    color: #32cda7;
}

.run-milestone-body {
    min-width: 0;
}

.run-milestone-title {
    font-size: 0.84rem;
    color: #f0f0f0;
    font-weight: 600;
}

.run-milestone-meta {
    font-size: 0.72rem;
    color: #8b949e;
    margin-top: 0.1rem;
}

.run-section-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.9rem;
}

.run-insight {
    padding: 0.7rem 0.8rem;
    border-radius: 8px;
    background: #2b2b2b;
    border: 1px solid #3d3d3d;
}

.run-insight-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #999999;
    margin-bottom: 0.3rem;
}

.run-insight-text {
    font-size: 0.81rem;
    line-height: 1.45;
    color: #e6edf3;
    white-space: pre-wrap;
    word-break: break-word;
}

.run-insight.bottleneck {
    border-color: rgba(210, 153, 34, 0.28);
    background: rgba(210, 153, 34, 0.08);
}

.run-insight.decision {
    border-color: rgba(56, 139, 253, 0.22);
    background: rgba(56, 139, 253, 0.08);
}

.run-timeline-item {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 0.7rem;
    align-items: start;
}

.run-timeline-time {
    font-size: 0.72rem;
    color: #8b949e;
    padding-top: 0.1rem;
}

.run-timeline-card {
    position: relative;
    padding: 0.7rem 0.8rem;
    border-radius: 8px;
    background: #2b2b2b;
    border: 1px solid #3d3d3d;
}

.run-timeline-card::before {
    content: "";
    position: absolute;
    left: -0.42rem;
    top: 0.9rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #03c497;
    box-shadow: 0 0 0 3px #1f1f1f;
}

.run-timeline-kind {
    display: inline-flex;
    align-items: center;
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #32cda7;
    margin-bottom: 0.25rem;
}

.run-timeline-title {
    font-size: 0.82rem;
    color: #f0f0f0;
    line-height: 1.4;
}

.run-empty {
    padding: 1.1rem;
    text-align: center;
    color: #8b949e;
    border: 1px dashed #4a4a4a;
    border-radius: 10px;
}

/* ==================== BACKGROUND JOBS ==================== */

.canvas-jobs { padding: 0.5rem 0.75rem; }
.canvas-jobs .canvas-section-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.canvas-jobs h3 { font-size: 0.72rem; color: #999999; text-transform: uppercase; margin: 0; }
.canvas-jobs-status { font-size: 0.7rem; color: #656565; }
.canvas-jobs-status.active { color: #03C497; }
.jobs-empty { color: #656565; font-size: 0.8rem; font-style: italic; padding: 0.25rem 0; }
.jobs-badge {
    font-size: 0.6rem; font-weight: 600; min-width: 14px; height: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 7px; padding: 0 4px; margin-left: 4px; vertical-align: middle;
}
.jobs-badge.running { background: #06503D; color: #03C497; }
.jobs-badge.done { background: #3d3d3d; color: #999999; }

.job-card {
    background: #333333; border: 1px solid #4a4a4a; border-radius: 6px;
    padding: 0.6rem 0.75rem; margin-bottom: 0.5rem;
    transition: border-color 0.2s;
}
.job-card.running { border-left: 3px solid #03C497; }
.job-card.dead { border-left: 3px solid #656565; opacity: 0.7; }
.job-card:hover { border-color: #03C497; }

.job-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 0.3rem;
}
.job-name { font-weight: 600; font-size: 0.85rem; color: #F5F5F5; }
.job-status { font-size: 0.7rem; display: flex; align-items: center; gap: 4px; }
.job-status.running { color: #03C497; }
.job-status.dead { color: #999999; }

.job-global-tag {
    font-size: 0.6rem; color: #d29922; background: rgba(210,153,34,0.15);
    border-radius: 3px; padding: 1px 5px; margin-left: 4px;
}
.job-meta { font-size: 0.7rem; color: #999999; margin-bottom: 0.3rem; }
.job-command {
    font-family: 'SFMono-Regular', Consolas, monospace; font-size: 0.72rem;
    color: #999999; background: #282828; border-radius: 3px;
    padding: 0.25rem 0.4rem; margin-bottom: 0.3rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.job-log-info { font-size: 0.68rem; color: #656565; margin-bottom: 0.3rem; }
.job-log-tail {
    font-family: 'SFMono-Regular', Consolas, monospace; font-size: 0.68rem;
    color: #F0F0F0; background: #282828; border: 1px solid #3d3d3d;
    border-radius: 4px; padding: 0.4rem 0.5rem; margin: 0;
    max-height: 6rem; overflow-y: auto; white-space: pre-wrap; word-break: break-all;
    line-height: 1.4;
}

.job-actions {
    display: flex; gap: 0.4rem; margin-top: 0.4rem; padding-top: 0.3rem;
    border-top: 1px solid #3d3d3d;
}
.job-logs-btn {
    background: #3d3d3d; color: #03C497; border: 1px solid #4a4a4a;
    border-radius: 4px; padding: 0.2rem 0.6rem; font-size: 0.7rem;
    cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.job-logs-btn:hover { background: #4a4a4a; border-color: #03C497; }

/* Pulse animations for running jobs */
.jobs-pulse {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: #03C497; animation: jobsPulse 1.5s ease-in-out infinite;
}
.jobs-pulse-sm {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: #03C497; animation: jobsPulse 1.5s ease-in-out infinite;
}
@keyframes jobsPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(63, 185, 80, 0.4); }
    50% { opacity: 0.7; box-shadow: 0 0 0 4px rgba(63, 185, 80, 0); }
}

/* Jobs page */
.jobs-view {
    display: flex; flex-direction: column; height: calc(100vh - 36px); height: calc(100dvh - 36px);
}
.jobs-view-list { flex: 1; overflow-y: auto; padding: 1rem; }
.jobs-view-status { font-size: 0.75rem; color: #999999; display: flex; align-items: center; gap: 6px; }
.jobs-view-status.active { color: #03C497; }
.jobs-hide-finished-label {
    font-size: 0.75rem; color: #999999; display: flex; align-items: center; gap: 5px;
    margin-left: auto; cursor: pointer; user-select: none;
}
.jobs-hide-finished-label input { cursor: pointer; accent-color: #03C497; }
.jobs-page-empty {
    text-align: center; padding: 3rem 1rem; color: #656565;
}
.jobs-page-empty-icon { font-size: 2.5rem; margin-bottom: 0.5rem; opacity: 0.4; }
.jobs-page-empty-hint { font-size: 0.75rem; margin-top: 0.3rem; color: #4a4a4a; }

/* Jobs table (matches Schedules table style) */
.jobs-table { width: 100%; border-collapse: collapse; }
.jobs-table th, .jobs-table td { padding: 0.5rem 0.75rem; text-align: left; border-bottom: 1px solid #3d3d3d; }
.jobs-table th { color: #999999; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; }
.jobs-table td { font-size: 0.8rem; }
.jobs-table-row.dead { opacity: 0.55; }
.jobs-table-name { color: #03C497; font-weight: 500; }
.jobs-table-cmd {
    background: #333333; padding: 0.15rem 0.4rem; border-radius: 3px;
    font-size: 0.72rem; color: #f0883e; display: inline-block;
    max-width: 350px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.jobs-table-status { display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem; }
.jobs-table-status.running { color: #03C497; }
.jobs-table-status.dead { color: #999999; }
.jobs-table-actions { display: flex; gap: 0.4rem; align-items: center; }
.job-view-logs-btn {
    background: none; border: 1px solid #4a4a4a; color: #999999;
    padding: 0.2rem 0.5rem; border-radius: 4px; cursor: pointer; font-size: 0.7rem;
}
.job-view-logs-btn:hover { border-color: #03C497; color: #03C497; }
.job-task-link {
    font-size: 0.7rem; color: #03C497; text-decoration: none; padding: 0.2rem 0.5rem;
    border: 1px solid #4a4a4a; border-radius: 4px;
}
.job-task-link:hover { text-decoration: none; border-color: #03C497; }
.jobs-table-tail-row td { padding: 0; border-bottom: 1px solid #3d3d3d; }
.jobs-table-tail-row.dead { opacity: 0.55; }
.jobs-table-tail {
    font-family: 'SFMono-Regular', Consolas, monospace; font-size: 0.68rem;
    color: #999999; background: #282828; padding: 0.4rem 0.75rem; margin: 0;
    max-height: 4.5rem; overflow-y: auto; white-space: pre-wrap; word-break: break-all;
    line-height: 1.4; border-left: 3px solid #3d3d3d;
}

/* ==================== MEMORY EXPLORER VIEW ==================== */

.memory-view {
    display: flex; flex-direction: column; height: calc(100vh - 36px); height: calc(100dvh - 36px);
}

/* Stats bar */
.memory-stats {
    padding: 0.4rem 1rem;
    border-bottom: 1px solid #4a4a4a;
    flex-shrink: 0;
    overflow-x: auto;
}

.memory-stats-grid {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.memory-stat-card {
    background: #333333;
    border: 1px solid #4a4a4a;
    border-radius: 6px;
    padding: 0.35rem 0.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
}

.memory-stat-card.total {
    background: #06503D;
    border-color: #06503D;
}

.memory-stat-card.edge {
    background: #1c1305;
    border-color: #3d2e0a;
}

.stat-number {
    font-size: 1.1rem;
    font-weight: 700;
    color: #03C497;
}

.memory-stat-card.total .stat-number { color: #32CDA7; }
.memory-stat-card.edge .stat-number { color: #d29922; }

.stat-label {
    font-size: 0.55rem;
    color: #999999;
    text-transform: uppercase;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

/* Search */
.memory-search-wrap {
    flex: 1;
    max-width: 300px;
}

.memory-search-input {
    width: 100%;
    padding: 0.3rem 0.6rem;
    background: #282828;
    border: 1px solid #4a4a4a;
    border-radius: 4px;
    color: #F0F0F0;
    font-size: 0.8rem;
}
.memory-search-input:focus {
    outline: none;
    border-color: #03C497;
}

/* Body layout: 3-column */
.memory-body {
    flex: 1;
    display: flex;
    overflow: hidden;
}

/* Sidebar: node type list */
.memory-sidebar {
    width: 180px;
    border-right: 1px solid #4a4a4a;
    overflow-y: auto;
    flex-shrink: 0;
    padding: 0.25rem 0;
}

.memory-type-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.35rem 0.75rem;
    background: none;
    border: none;
    color: #999999;
    font-size: 0.78rem;
    cursor: pointer;
    text-align: left;
    min-height: 32px;
}
.memory-type-btn:hover { background: #333333; color: #F0F0F0; }
.memory-type-btn.active { background: #06503D; color: #03C497; border-right: 2px solid #03C497; }

.type-icon { font-size: 0.85rem; width: 18px; text-align: center; flex-shrink: 0; }
.type-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.type-count { font-size: 0.7rem; color: #999999; margin-left: auto; }

/* Center: node list */
.memory-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 200px;
}

.memory-content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-bottom: 1px solid #3d3d3d;
    flex-shrink: 0;
}
.memory-content-header h3 { font-size: 0.8rem; color: #F0F0F0; margin: 0; }
.memory-content-count { font-size: 0.7rem; color: #999999; }

.memory-node-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.25rem 0;
}

.memory-node-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid #333333;
    min-height: 36px;
}
.memory-node-item:hover { background: #333333; }
.memory-node-item.active { background: #06503D; border-left: 2px solid #03C497; }

.node-name {
    font-size: 0.8rem;
    color: #F0F0F0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    margin-right: 0.5rem;
}

.node-label-badge {
    font-size: 0.55rem;
    color: #999999;
    background: #3d3d3d;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Right: node detail */
.memory-detail {
    width: 380px;
    border-left: 1px solid #4a4a4a;
    overflow-y: auto;
    flex-shrink: 0;
}

.memory-detail-content { padding: 0.5rem 0.75rem; }

.memory-detail-placeholder {
    color: #656565;
    font-size: 0.85rem;
    text-align: center;
    padding: 2rem 1rem;
}

.node-detail-title {
    font-size: 0.9rem;
    color: #03C497;
    margin-bottom: 0.5rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid #4a4a4a;
}

.node-props-section h4, .node-edges-section h4 {
    font-size: 0.7rem;
    color: #999999;
    text-transform: uppercase;
    margin: 0.6rem 0 0.3rem;
    letter-spacing: 0.04em;
}

.node-props-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}
.node-props-table td {
    padding: 0.25rem 0.4rem;
    border-bottom: 1px solid #333333;
    vertical-align: top;
}
.prop-key {
    color: #32CDA7;
    font-weight: 600;
    width: 90px;
    white-space: nowrap;
}
.prop-val {
    color: #F0F0F0;
    word-break: break-word;
    white-space: pre-wrap;
    font-family: monospace;
    font-size: 0.72rem;
}

.edge-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0;
    font-size: 0.78rem;
}
.edge-type {
    color: #d29922;
    font-weight: 600;
    font-size: 0.65rem;
    background: #2d1b00;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    white-space: nowrap;
}
.edge-arrow { color: #656565; }
.edge-target {
    color: #03C497;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.edge-target:hover { text-decoration: underline; }

/* Loading/empty states */
.memory-loading, .memory-empty {
    color: #656565;
    font-size: 0.8rem;
    font-style: italic;
    padding: 1rem;
    text-align: center;
}

/* Mode tabs (List / Graph) */
.memory-mode-tabs {
    display: flex;
    gap: 2px;
    background: #3d3d3d;
    border-radius: 6px;
    padding: 2px;
    margin: 0 0.75rem;
}
.memory-tab {
    padding: 0.25rem 0.8rem;
    background: none;
    border: none;
    color: #999999;
    font-size: 0.78rem;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s;
}
.memory-tab:hover { color: #F0F0F0; }
.memory-tab.active {
    background: #06503D;
    color: #03C497;
    font-weight: 600;
}

/* ===== Graph Mode Layout ===== */
.memory-graph-mode {
    flex: 1;
    display: flex;
    overflow: hidden;
    position: relative;
}

/* Left filter panel */
.graph-filter-panel {
    width: 190px;
    border-right: 1px solid #4a4a4a;
    overflow-y: auto;
    flex-shrink: 0;
    padding: 0.4rem 0;
    background: #282828;
}
.graph-filter-section {
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid #333333;
}
.graph-filter-section h4 {
    font-size: 0.65rem;
    color: #999999;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.35rem;
}
.graph-filter-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.graph-filter-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    color: #F0F0F0;
    cursor: pointer;
    padding: 0.15rem 0;
}
.graph-filter-item:hover { color: #ffffff; }
.graph-filter-item input[type="checkbox"] {
    width: 12px;
    height: 12px;
    accent-color: #03C497;
    flex-shrink: 0;
}
.gf-swatch {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}
.gf-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Layout controls */
.graph-controls {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.graph-control-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    color: #999999;
    cursor: pointer;
}
.graph-control-label span { white-space: nowrap; }
.graph-control-label input[type="checkbox"] {
    width: 12px;
    height: 12px;
    accent-color: #03C497;
}
.graph-slider {
    width: 100%;
    height: 4px;
    accent-color: #03C497;
    cursor: pointer;
}
.graph-action-btn {
    width: 100%;
    padding: 0.3rem 0.5rem;
    background: #3d3d3d;
    border: 1px solid #4a4a4a;
    border-radius: 4px;
    color: #999999;
    font-size: 0.72rem;
    cursor: pointer;
    margin-bottom: 0.25rem;
    transition: all 0.15s;
}
.graph-action-btn:hover { color: #F0F0F0; border-color: #03C497; }

/* Canvas area */
.graph-canvas-area {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: #282828;
}
.memory-graph-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* Tooltip */
.graph-tooltip {
    position: absolute;
    background: #3a3a3a;
    border: 1px solid #656565;
    border-radius: 8px;
    padding: 0.5rem 0.7rem;
    pointer-events: none;
    z-index: 60;
    max-width: 260px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.gt-header {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.2rem;
}
.gt-header strong {
    color: #ffffff;
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gt-icon { font-size: 0.9rem; }
.gt-label {
    font-size: 0.65rem;
    color: #999999;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.gt-meta {
    font-size: 0.7rem;
    color: #03C497;
    margin-top: 0.15rem;
}

/* Focus mode banner */
.graph-focus-banner {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: #06503D;
    border: 1px solid #06503D;
    border-radius: 20px;
    padding: 0.3rem 0.7rem 0.3rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 55;
    box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
#graph-focus-label {
    font-size: 0.75rem;
    color: #32CDA7;
    white-space: nowrap;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.graph-focus-exit-btn {
    padding: 0.15rem 0.5rem;
    background: #3d3d3d;
    border: 1px solid #4a4a4a;
    border-radius: 10px;
    color: #999999;
    font-size: 0.68rem;
    cursor: pointer;
    white-space: nowrap;
}
.graph-focus-exit-btn:hover { color: #F0F0F0; border-color: #03C497; }

/* Minimap */
.graph-minimap {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 140px;
    height: 100px;
    border: 1px solid #4a4a4a;
    border-radius: 6px;
    background: rgba(13,17,23,0.85);
    z-index: 55;
    pointer-events: none;
}

/* Right detail panel (graph mode) */
.graph-detail-panel {
    width: 320px;
    border-left: 1px solid #4a4a4a;
    overflow-y: auto;
    flex-shrink: 0;
    background: #282828;
}
.graph-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid #3d3d3d;
    position: sticky;
    top: 0;
    background: #282828;
    z-index: 2;
}
.graph-detail-header h4 {
    font-size: 0.85rem;
    color: #03C497;
    margin: 0;
}
.graph-detail-close {
    background: none;
    border: none;
    color: #999999;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0 0.25rem;
}
.graph-detail-close:hover { color: #f85149; }
.graph-detail-body {
    padding: 0.5rem 0.7rem;
}
.gd-name {
    font-size: 0.9rem;
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 0.4rem;
    word-break: break-word;
}
.gd-score {
    font-size: 0.72rem;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 0.4rem;
}
.gd-score-high { background: #06503D; color: #03C497; }
.gd-score-mid { background: #1c1305; color: #d29922; }
.gd-score-low { background: #2d0a0a; color: #f85149; }

.gd-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}
.gd-tag {
    font-size: 0.62rem;
    color: #32CDA7;
    background: #06503D;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    white-space: nowrap;
}

.gd-props {
    margin-bottom: 0.5rem;
}
.gd-prop {
    display: flex;
    flex-direction: column;
    padding: 0.2rem 0;
    border-bottom: 1px solid #333333;
}
.gd-prop-key {
    font-size: 0.65rem;
    color: #32CDA7;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.1rem;
}
.gd-prop-val {
    font-size: 0.72rem;
    color: #F0F0F0;
    word-break: break-word;
    white-space: pre-wrap;
    font-family: "SFMono-Regular", monospace;
    line-height: 1.4;
}

.gd-edges-section {
    margin-top: 0.5rem;
}
.gd-edges-section h5 {
    font-size: 0.65rem;
    color: #999999;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0.3rem 0 0.2rem;
}
.gd-edge {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0;
    font-size: 0.72rem;
    cursor: pointer;
    border-radius: 3px;
    padding: 0.2rem 0.3rem;
}
.gd-edge:hover { background: #333333; }
.gd-edge-type {
    font-weight: 600;
    font-size: 0.6rem;
    white-space: nowrap;
}
.gd-edge-arrow { color: #656565; font-size: 0.7rem; }
.gd-edge-name {
    color: #03C497;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gd-actions {
    margin-top: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.gd-action-btn {
    padding: 0.35rem 0.6rem;
    background: #3d3d3d;
    border: 1px solid #4a4a4a;
    border-radius: 4px;
    color: #999999;
    font-size: 0.72rem;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
}
.gd-action-btn:hover { color: #F0F0F0; border-color: #03C497; }
.gd-focus-btn:hover { background: #06503D; color: #03C497; }

/* (mobile-bottom-nav removed — unified into top-nav) */

/* ==================== AGENTS PAGE VIEW ==================== */

.agents-view {
    display: flex; flex-direction: column; height: calc(100vh - 36px); height: calc(100dvh - 36px);
}

.agents-list {
    flex: 1; overflow-y: auto; padding: 0.5rem 1rem;
    display: flex; flex-direction: column; gap: 0.25rem;
    min-height: 0; /* flex scroll fix */
}

.agents-item-wrap {
    border-radius: 6px; overflow: hidden;
}

.agents-list-item {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.6rem 0.8rem;
    background: #333333; border: 1px solid #3d3d3d; border-radius: 6px;
    cursor: default; transition: background 0.15s;
}

.agents-list-item.busy {
    background: #1c1500; border-color: #d29922;
    cursor: pointer;
}
.agents-list-item.busy:hover { background: #241d00; }

.agents-list-item.error {
    background: #1a0505; border-color: #f85149;
}

.agents-list-item.waiting_for_human {
    background: #1c1500; border-color: #d29922;
}

.agents-list-item.expanded {
    border-bottom-left-radius: 0; border-bottom-right-radius: 0;
    border-bottom: none;
}

.agents-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
    background: #4a4a4a;
}
.agents-list-item.idle .agents-dot,
.agents-list-item.online .agents-dot { background: #0D9373; }
.agents-list-item.busy .agents-dot { background: #d29922; animation: pulse-dot 1.5s ease-in-out infinite; }
.agents-list-item.error .agents-dot { background: #f85149; }
.agents-list-item.waiting_for_human .agents-dot { background: #d29922; animation: pulse-dot 1.5s ease-in-out infinite; }
.agents-list-item.offline .agents-dot { background: #4a4a4a; }
.agents-list-item.disabled .agents-dot { background: #4a4a4a; }

.agents-name {
    font-weight: 600; font-size: 0.82rem; color: #F0F0F0;
    min-width: 100px;
}
.agents-list-item.busy .agents-name { color: #e3b341; }
.agents-list-item.error .agents-name { color: #f85149; }
.agents-list-item.disabled .agents-name { color: #999999; }

.agents-status-text {
    font-size: 0.72rem; color: #999999;
    min-width: 80px;
}

.agents-task-text {
    flex: 1; font-size: 0.72rem; color: #999999;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.agents-view-btn {
    padding: 0.25rem 0.6rem;
    background: #3d3d3d; border: 1px solid #4a4a4a; border-radius: 4px;
    color: #03C497; font-size: 0.72rem; cursor: pointer;
    flex-shrink: 0; transition: background 0.15s;
}
.agents-view-btn:hover { background: #4a4a4a; }

.agents-live-panel {
    background: #282828; border: 1px solid #d29922; border-top: none;
    border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;
    max-height: 400px; overflow-y: auto;
}

.agents-live-messages {
    padding: 0.3rem 0.5rem;
    display: flex; flex-direction: column; gap: 0.15rem;
}

.agents-loading {
    padding: 1rem; text-align: center; color: #999999; font-size: 0.78rem;
}

/* Reuse canvas-live-msg styles inside agents panel */
.agents-live-messages .canvas-live-msg { font-size: 0.75rem; }

/* ==================== RESOURCES VIEW ==================== */

.resources-view {
    flex-direction: column;
    padding: 0 1rem 1rem;
    overflow-y: auto;
    max-height: calc(100vh - 50px);
}

.resources-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

.resources-refresh-btn {
    background: #3d3d3d;
    color: #03C497;
    border: 1px solid #4a4a4a;
    border-radius: 6px;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    cursor: pointer;
    min-height: 32px;
    transition: background 0.15s, border-color 0.15s;
}
.resources-refresh-btn:hover { background: #4a4a4a; border-color: #03C497; }
.resources-refresh-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.resources-timestamp {
    font-size: 0.75rem;
    color: #999999;
    white-space: nowrap;
}
.resources-timestamp.stale { color: #d29922; }

.resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.resources-loading {
    grid-column: 1 / -1;
    text-align: center;
    color: #999999;
    padding: 3rem 1rem;
    font-size: 0.9rem;
}

.resource-card {
    background: #333333;
    border: 1px solid #4a4a4a;
    border-radius: 8px;
    padding: 0.85rem 1rem;
    transition: border-color 0.2s;
}
.resource-card:hover { border-color: #656565; }

.resource-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
}

.res-status-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.res-status-dot.running { background: #03C497; box-shadow: 0 0 4px rgba(63, 185, 80, 0.5); }
.res-status-dot.stopped { background: #f85149; }

.resource-card-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: #F5F5F5;
    text-transform: capitalize;
}

.resource-card-uptime {
    font-size: 0.7rem;
    color: #999999;
    background: #3d3d3d;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
}

/* Resource bars */
.resource-bars { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.6rem; }
.resource-bar-group { display: flex; flex-direction: column; gap: 0.15rem; }

.resource-bar-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.7rem;
    color: #999999;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.resource-bar-value { font-variant-numeric: tabular-nums; }
.resource-bar-value.low { color: #03C497; }
.resource-bar-value.medium { color: #d29922; }
.resource-bar-value.high { color: #f85149; }

.resource-bar-track {
    height: 6px;
    background: #3d3d3d;
    border-radius: 3px;
    overflow: hidden;
}

.resource-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}
.resource-bar-fill.low { background: linear-gradient(90deg, #0D9373, #03C497); }
.resource-bar-fill.medium { background: linear-gradient(90deg, #9e6a03, #d29922); }
.resource-bar-fill.high { background: linear-gradient(90deg, #da3633, #f85149); }

/* Resource stats row */
.resource-stats {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.resource-stat {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 60px;
}

.resource-stat-label {
    font-size: 0.6rem;
    color: #656565;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.resource-stat-value {
    font-size: 0.75rem;
    color: #F0F0F0;
    font-variant-numeric: tabular-nums;
}

/* Process table */
.resource-procs {
    border-top: 1px solid #3d3d3d;
    padding-top: 0.5rem;
}

.resource-procs-header {
    font-size: 0.7rem;
    color: #999999;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.3rem;
    font-weight: 500;
}

.resource-procs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.72rem;
    font-family: 'SF Mono', 'Fira Code', monospace;
}

.resource-procs-table th {
    text-align: left;
    color: #656565;
    font-weight: 500;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.4rem 0.2rem 0;
    border-bottom: 1px solid #3d3d3d;
}

.resource-procs-table td {
    padding: 0.2rem 0.4rem 0.2rem 0;
    color: #F0F0F0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.resource-procs-table tbody tr:hover {
    background: #3a3a3a;
}

/* ==================== CONTAINER LOGS MODAL ==================== */

.resource-logs-btn {
    margin-left: auto;
    padding: 0.2rem 0.5rem;
    font-size: 0.7rem;
    background: #3d3d3d;
    color: #999999;
    border: 1px solid #4a4a4a;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.resource-logs-btn:hover {
    background: #4a4a4a;
    color: #F0F0F0;
}

.logs-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
}
.logs-modal-content {
    width: 90vw;
    max-width: 1100px;
    height: 80vh;
    background: #282828;
    border: 1px solid #4a4a4a;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.logs-modal-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #3d3d3d;
    flex-shrink: 0;
}
.logs-modal-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: #F0F0F0;
}
.logs-modal-controls {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-left: auto;
}
.logs-follow-label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    color: #999999;
    cursor: pointer;
    user-select: none;
}
.logs-follow-label input:checked + *,
.logs-follow-label:has(input:checked) {
    color: #03C497;
}
.logs-tail-select {
    background: #3d3d3d;
    color: #F0F0F0;
    border: 1px solid #4a4a4a;
    border-radius: 4px;
    padding: 0.2rem 0.4rem;
    font-size: 0.75rem;
}
.logs-refresh-btn {
    background: #3d3d3d;
    color: #999999;
    border: 1px solid #4a4a4a;
    border-radius: 4px;
    padding: 0.2rem 0.5rem;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.logs-refresh-btn:hover {
    background: #4a4a4a;
    color: #F0F0F0;
}
.logs-close-btn {
    background: none;
    border: none;
    color: #999999;
    font-size: 1.3rem;
    cursor: pointer;
    padding: 0 0.3rem;
    line-height: 1;
    transition: color 0.15s;
}
.logs-close-btn:hover {
    color: #f85149;
}
.logs-modal-body {
    flex: 1;
    overflow: auto;
    margin: 0;
    padding: 0.75rem 1rem;
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 0.75rem;
    line-height: 1.5;
    color: #F0F0F0;
    white-space: pre-wrap;
    word-break: break-all;
    background: #1a1a1a;
    border-radius: 0 0 8px 8px;
}

/* ==================== JOB LOGS MODAL ==================== */

.joblogs-modal-content {
    width: 95vw; max-width: 1400px; height: 90vh;
    background: #282828; border: 1px solid #4a4a4a; border-radius: 8px;
    display: flex; flex-direction: column; box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

/* Header — single compact row */
.joblogs-header {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.75rem; border-bottom: 1px solid #3d3d3d; flex-shrink: 0;
    min-height: 40px;
}
.joblogs-title {
    font-weight: 600; font-size: 0.85rem; color: #F0F0F0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0; flex-shrink: 1;
}
.joblogs-match-count { color: #656565; font-size: 0.65rem; white-space: nowrap; flex-shrink: 0; }
.joblogs-controls { display: flex; align-items: center; gap: 0.35rem; margin-left: auto; flex-shrink: 0; }
.joblogs-icon-btn {
    background: #3d3d3d; color: #999999; border: 1px solid #4a4a4a;
    border-radius: 4px; padding: 0.2rem 0.4rem; font-size: 0.85rem;
    cursor: pointer; line-height: 1; display: flex; align-items: center;
}
.joblogs-icon-btn:hover { background: #4a4a4a; color: #F0F0F0; }
.joblogs-icon-btn.active { color: #03C497; border-color: #03C497; }
.joblogs-close-btn {
    background: none; border: none; color: #999999; font-size: 1.2rem;
    cursor: pointer; padding: 0 0.25rem; line-height: 1;
}
.joblogs-close-btn:hover { color: #f85149; }
.joblogs-ctrl-select {
    background: #3d3d3d; color: #F0F0F0; border: 1px solid #4a4a4a;
    border-radius: 4px; padding: 0.15rem 0.3rem; font-size: 0.7rem; cursor: pointer;
}
.joblogs-follow-label {
    display: flex; align-items: center; gap: 0.2rem;
    font-size: 0.7rem; color: #999999; cursor: pointer; user-select: none;
}
.joblogs-follow-label:has(input:checked) { color: #03C497; }
.joblogs-follow-label span { display: none; }

/* Collapsible filter bar */
.joblogs-filters {
    padding: 0.35rem 0.75rem; border-bottom: 1px solid #333333; background: #282828; flex-shrink: 0;
}
.joblogs-filter-bar { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.joblogs-filter-select {
    background: #3d3d3d; color: #F0F0F0; border: 1px solid #4a4a4a;
    border-radius: 12px; padding: 0.2rem 0.5rem; font-size: 0.68rem; cursor: pointer;
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23656565'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 6px center; padding-right: 18px;
}
.joblogs-filter-select:focus { border-color: #03C497; outline: none; }
.joblogs-filter-select.active { border-color: #03C497; color: #03C497; background-color: rgba(88,166,255,0.1); }

/* Log body */
.joblogs-body { flex: 1; overflow: auto; background: #1a1a1a; }

/* Log entries — card list (default, works everywhere) */
.jl-list { padding: 0; margin: 0; list-style: none; }
.jl-entry {
    display: flex; align-items: baseline; gap: 0.25rem 0.4rem; flex-wrap: wrap;
    padding: 0.2rem 0.6rem; border-bottom: 1px solid #282828;
    font-family: 'SFMono-Regular', Consolas, monospace; font-size: 0.72rem;
    line-height: 1.4; min-height: 1.6em;
}
.jl-entry:hover { background: rgba(110,118,129,0.06); }
.jl-dot {
    width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
    margin-top: 0.35em; background: #03C497;
}
.jl-dot.DEBUG { background: #656565; }
.jl-dot.WARNING { background: #d29922; }
.jl-dot.ERROR { background: #f85149; }
.jl-dot.CRITICAL { background: #f85149; }
.jl-ts { color: #656565; white-space: nowrap; flex-shrink: 0; font-size: 0.65rem; }
.jl-msg { color: #F0F0F0; flex: 1; min-width: 40%; word-break: break-word; }
.jl-tag {
    flex-shrink: 0; font-size: 0.6rem; padding: 0 4px; border-radius: 3px;
    background: #3d3d3d; color: #999999; white-space: nowrap;
    max-width: 100px; overflow: hidden; text-overflow: ellipsis;
}
.jl-tag.step { color: #f0883e; }

/* Group headers */
.joblogs-group-header {
    padding: 0.35rem 0.6rem; background: #333333; border-bottom: 1px solid #3d3d3d;
    display: flex; align-items: center; gap: 0.4rem; cursor: pointer; user-select: none;
}
.joblogs-group-header:hover { background: #3a3a3a; }
.joblogs-group-name { font-weight: 600; font-size: 0.75rem; color: #F0F0F0; }
.joblogs-group-count {
    font-size: 0.6rem; color: #999999; background: #3d3d3d;
    padding: 0 5px; border-radius: 8px; min-width: 18px; text-align: center;
}
.joblogs-group-pin { color: #03C497; font-size: 0.55rem; flex-shrink: 0; transition: opacity 0.3s; }
.joblogs-group-arrow { color: #656565; font-size: 0.65rem; transition: transform 0.15s; }
.joblogs-group-arrow.collapsed { transform: rotate(-90deg); }
.joblogs-group-body.collapsed { display: none; }

/* Desktop: show site/step tags; on small screens they auto-hide */
@media (max-width: 600px) {
    .joblogs-modal-content { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; border: none; }
    .joblogs-header { padding: 0.4rem 0.5rem; }
    .joblogs-follow-label span { display: none; }
    .jl-tag.site { display: none; }
    .jl-tag { max-width: 40px; }
    .jl-entry { padding: 0.15rem 0.4rem; font-size: 0.68rem; }
}
@media (min-width: 601px) {
    .joblogs-follow-label span { display: inline; }
}

/* ==================== FITNESS VIEW ==================== */

.fitness-view {
    flex-direction: column;
    padding: 0 1rem 1rem;
    overflow-y: auto;
    max-height: calc(100vh - 50px);
    gap: 0.5rem;
}

.fitness-summary {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.65rem;
    margin-top: 0.5rem;
}

.fitness-card {
    background: #333333;
    border: 1px solid #4a4a4a;
    border-radius: 8px;
    padding: 0.85rem 1rem;
    text-align: center;
    transition: border-color 0.2s;
}
.fitness-card:hover { border-color: #656565; }

.fitness-card.card-good { border-left: 3px solid #03C497; }
.fitness-card.card-warn { border-left: 3px solid #d29922; }
.fitness-card.card-bad { border-left: 3px solid #f85149; }

.fitness-card-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: #F5F5F5;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.fitness-card-label {
    font-size: 0.75rem;
    color: #999999;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.25rem;
    font-weight: 500;
}

.fitness-card-sub {
    font-size: 0.7rem;
    color: #656565;
    margin-top: 0.2rem;
}

.fitness-card-wide {
    grid-column: 1 / -1;
    text-align: left;
}

.fitness-section {
    margin-top: 0.75rem;
}

.fitness-section h3 {
    font-size: 0.85rem;
    color: #F0F0F0;
    margin: 0 0 0.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid #3d3d3d;
    padding-bottom: 0.35rem;
}

.fitness-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.65rem;
}

.fitness-dimensions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 0.5rem;
}

.fitness-section-wide {
    grid-column: 1 / -1;
}

.fitness-trend {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: #333333;
    border: 1px solid #4a4a4a;
    border-radius: 8px;
    padding: 0.85rem 1rem;
}

.sparkline-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sparkline-label {
    font-size: 0.72rem;
    color: #999999;
    min-width: 80px;
    text-align: right;
    font-weight: 500;
}

.sparkline {
    flex-shrink: 0;
}

.fitness-no-data {
    color: #656565;
    font-size: 0.8rem;
    font-style: italic;
}

/* Deputy table */
.fitness-deputies {
    background: #333333;
    border: 1px solid #4a4a4a;
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
}

.deputy-header {
    display: grid;
    grid-template-columns: 90px 1fr 80px 50px 70px;
    gap: 0.5rem;
    font-size: 0.65rem;
    color: #656565;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid #3d3d3d;
    margin-bottom: 0.3rem;
    font-weight: 500;
}

.deputy-row {
    display: grid;
    grid-template-columns: 90px 1fr 80px 50px 70px;
    gap: 0.5rem;
    align-items: center;
    padding: 0.3rem 0;
    font-size: 0.8rem;
    color: #F0F0F0;
}

.deputy-name {
    font-weight: 600;
    color: #F5F5F5;
    font-size: 0.78rem;
}

.deputy-bar-bg {
    height: 6px;
    background: #3d3d3d;
    border-radius: 3px;
    overflow: hidden;
}

.deputy-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

.deputy-stat {
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: #999999;
}

/* Tool usage bars */
.fitness-tools {
    background: #333333;
    border: 1px solid #4a4a4a;
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.tool-row {
    display: grid;
    grid-template-columns: 140px 1fr 45px;
    gap: 0.5rem;
    align-items: center;
    padding: 0.15rem 0;
}

.tool-name {
    font-size: 0.72rem;
    color: #F0F0F0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tool-bar-bg {
    height: 5px;
    background: #3d3d3d;
    border-radius: 3px;
    overflow: hidden;
}

.tool-bar {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #0D9373, #03C497);
}

.tool-count {
    font-size: 0.7rem;
    color: #999999;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Reasoning health */
.fitness-reasoning-health {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.reasoning-health-cards {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}

.reasoning-health-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.reasoning-panel {
    background: #333333;
    border: 1px solid #4a4a4a;
    border-radius: 8px;
    padding: 0.75rem 0.85rem;
    min-width: 0;
}

.reasoning-panel-title {
    color: #F0F0F0;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 0.45rem;
}

.reasoning-gate-row,
.reasoning-signal,
.reasoning-tool-row {
    display: grid;
    gap: 0.5rem;
    align-items: center;
    min-height: 28px;
    border-top: 1px solid #3d3d3d;
    padding: 0.35rem 0;
}

.reasoning-gate-row {
    grid-template-columns: minmax(120px, 1fr) repeat(4, 58px);
}

.reasoning-signal {
    grid-template-columns: 58px 170px minmax(0, 1fr);
}

.reasoning-tool-row {
    grid-template-columns: 150px minmax(120px, 1fr) 45px 58px;
}

.reasoning-gate-name,
.reasoning-signal-name,
.reasoning-tool-name {
    color: #F0F0F0;
    font-size: 0.75rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reasoning-gate-state,
.reasoning-signal-severity,
.reasoning-signal-detail,
.reasoning-copy {
    color: #999999;
    font-size: 0.72rem;
}

.reasoning-gate-state {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.reasoning-gate-state.state-pass { color: #03C497; }
.reasoning-gate-state.state-fail { color: #d29922; }

.reasoning-signal-severity {
    text-transform: uppercase;
    font-weight: 600;
}

.reasoning-signal.signal-warn .reasoning-signal-severity { color: #d29922; }
.reasoning-signal.signal-bad .reasoning-signal-severity { color: #f85149; }
.reasoning-signal.signal-info .reasoning-signal-severity { color: #39d4cf; }

.reasoning-signal-detail {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reasoning-copy {
    line-height: 1.45;
}

.tool-detail,
.reasoning-detail-meta,
.reasoning-detail-text {
    color: #999999;
    font-size: 0.72rem;
}

.tool-detail {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.reasoning-detail-row {
    display: grid;
    grid-template-columns: 130px 95px minmax(0, 1fr);
    gap: 0.5rem;
    align-items: center;
    min-height: 28px;
    border-top: 1px solid #3d3d3d;
    padding: 0.35rem 0;
}

.reasoning-detail-main {
    color: #F0F0F0;
    font-size: 0.75rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reasoning-detail-meta,
.reasoning-detail-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Graph type chips */
.graph-type-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.25rem;
}

.graph-type-chip {
    font-size: 0.7rem;
    background: #3d3d3d;
    color: #999999;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    border: 1px solid #4a4a4a;
}

.graph-type-chip b {
    color: #F0F0F0;
    font-weight: 600;
}

/* Evolution Journal */
.fitness-journal {
    background: #333333;
    border: 1px solid #4a4a4a;
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    max-height: 400px;
    overflow-y: auto;
}

.journal-entry {
    display: grid;
    grid-template-columns: 90px 120px 1fr 70px 75px;
    gap: 0.5rem;
    align-items: center;
    padding: 0.35rem 0;
    border-bottom: 1px solid #3d3d3d;
    font-size: 0.75rem;
}
.journal-entry:last-child { border-bottom: none; }

.journal-dim {
    font-size: 0.65rem;
    color: #282828;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.journal-action {
    font-size: 0.7rem;
    color: #999999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.journal-desc {
    color: #F0F0F0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.journal-status {
    font-size: 0.65rem;
    color: #999999;
    text-transform: uppercase;
}

.journal-date {
    font-size: 0.65rem;
    color: #656565;
    text-align: right;
}

.journal-proposed .journal-status { color: #d29922; }
.journal-rolled-back .journal-status { color: #f85149; }
.journal-rolled-back { opacity: 0.6; }

/* ==================== RESPONSIVE: TABLET (≤768px) ==================== */

@media (max-width: 768px) {
    /* No bottom nav — top nav is always visible */

    main {
        height: calc(100vh - 30px);
        height: calc(100dvh - 30px);
    }

    /* All views: header only (30px), no strip */
    .canvas-view,
    #dashboard-view,
    #broadcasts-view,
    #agents-view,
    #memory-view,
    #resources-view,
    #fitness-view,
    #explorer-view,
    #portal-view {
        height: calc(100vh - 30px);
        height: calc(100dvh - 30px);
    }

    /* Resources responsive */
    .resources-grid { grid-template-columns: 1fr; }
    .resources-controls { gap: 0.4rem; }
    .resources-view { padding: 0 0.5rem 0.5rem; }

    /* Fitness responsive */
    .fitness-view { padding: 0 0.5rem 0.5rem; }
    .fitness-dimensions { grid-template-columns: 1fr; }
    .fitness-summary { grid-template-columns: repeat(2, 1fr); }
    .reasoning-health-grid { grid-template-columns: 1fr; }
    .reasoning-gate-row { grid-template-columns: minmax(100px, 1fr) repeat(4, 44px); }
    .reasoning-signal { grid-template-columns: 50px minmax(100px, 1fr); }
    .reasoning-signal-detail { grid-column: 1 / -1; white-space: normal; }
    .reasoning-tool-row { grid-template-columns: 110px 1fr 35px; }
    .deputy-header, .deputy-row { grid-template-columns: 70px 1fr 60px 40px 55px; font-size: 0.7rem; }
    .tool-row { grid-template-columns: 100px 1fr 35px; }
    .journal-entry { grid-template-columns: 70px 80px 1fr 50px; font-size: 0.7rem; }
    .journal-date { display: none; }

    /* Memory explorer responsive */
    .memory-body {
        flex-direction: column;
    }

    .memory-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #4a4a4a;
        max-height: 100px;
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0.25rem 0.5rem;
        gap: 0.25rem;
    }

    .memory-type-btn {
        min-width: fit-content;
        padding: 0.25rem 0.5rem;
        font-size: 0.7rem;
        border-radius: 4px;
        border: 1px solid #4a4a4a;
    }
    .memory-type-btn.active {
        border-right: 1px solid #03C497;
        border-color: #03C497;
    }

    .memory-detail {
        width: 100%;
        border-left: none;
        border-top: 1px solid #4a4a4a;
        max-height: 40vh;
    }

    .memory-stats { padding: 0.3rem 0.5rem; }
    .memory-stat-card { padding: 0.25rem 0.4rem; min-width: 50px; }
    .stat-number { font-size: 0.9rem; }
    .memory-search-wrap { max-width: 180px; }

    /* Header compact on mobile */
    header { padding: 0 0.15rem; min-height: 30px; height: 30px; }

    /* Hide text labels on mobile — icons only */
    .top-nav-label { display: none; }
    .top-nav,
    .top-nav-scroll { gap: 0; }
    .top-nav-item { padding: 0.15rem 0.22rem; }
    .top-nav-icon { width: 12px; height: 12px; }

    /* Show usage inline in header on mobile (no separate strip) */
    .header-sub-select { display: none !important; }
    .sub-icon-wrap { display: none !important; }
    .usage-display { display: flex !important; padding: 0.08rem 0.18rem; }
    .usage-icons { gap: 0.16rem; }
    .usage-icon { width: 19px; height: 19px; font-size: 0.55rem; }

    /* Compact header-right on mobile */
    .header-right { gap: 0.15rem; flex-shrink: 0; min-width: 0; }
    .screenshot-btn { width: 24px; height: 24px; min-width: 24px; min-height: 24px; border: none; }
    .screenshot-btn svg { width: 13px; height: 13px; }
    .user-menu-btn { font-size: 0.6rem; min-width: 24px; min-height: 24px; padding: 0; }

    /* Agent cards — 2-column grid */
    /* Agent strip stays compact on mobile */
    .agent-panel { padding: 0.3rem 0.75rem; }

    /* Task list */
    .task-panel { padding: 0.5rem 0.75rem; }
    .task-header { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
    .task-filters { flex-wrap: nowrap; overflow-x: auto; width: 100%; }
    .filter-btn { min-height: 28px; }

    /* Task table — hide low-priority columns; keep archive for swipe */
    .col-priority, .col-created { display: none; }
    .col-archive { display: none; }  /* Hidden on mobile — swipe replaces button */
    .task-table th, .task-table td { padding: 0.35rem 0.4rem; font-size: 0.75rem; }
    .task-table tr[data-task-id] { min-height: 44px; }

    .input-section { padding: 0.3rem 0.5rem; }

    /* Non-expanded msg-form: wrap so textarea gets full width */
    .input-section:not(.expanded) .msg-form {
        flex-wrap: wrap;
    }
    .input-section:not(.expanded) .msg-form textarea {
        flex: 1 1 100%;
        min-width: 0;
        order: -1;
    }
    .input-section:not(.expanded) .msg-form .attach-btn {
        order: 0;
    }
    .input-section:not(.expanded) .msg-form .runtime-select,
    .input-section:not(.expanded) .msg-form .mode-select {
        font-size: 0.66rem;
        min-height: 30px;
        padding: 0.2rem 1.2rem 0.2rem 0.3rem;
    }
    .input-section:not(.expanded) .msg-form .monitor-toggle {
        font-size: 0.66rem;
        min-height: 30px;
        padding: 0.2rem 0.4rem;
    }
    .input-section:not(.expanded) .msg-form .workspace-contract-toggle,
    .canvas-input:not(.expanded) .msg-form .workspace-contract-toggle {
        font-size: 0.7rem;
        min-height: 30px;
        padding: 0.3rem 0.55rem;
    }
    .input-section:not(.expanded) .msg-form button[type="submit"] {
        margin-left: auto;
        min-height: 30px;
        font-size: 0.76rem;
        padding: 0.3rem 0.8rem;
    }

    /* Question banner — stack vertically */
    .question-banner { padding: 0.4rem 0.6rem; }
    .question-banner-inner { flex-direction: column; gap: 0.35rem; }
    .question-banner-form { width: 100%; align-self: stretch; flex-wrap: wrap; }
    .question-banner-actions { width: 100%; }
    .question-banner-form .question-response-input {
        width: 100%;
        min-width: 0;
        flex: 0 0 100%;
        min-height: 34px;
    }

    .canvas-body { flex-direction: column; }

    .canvas-sidebar {
        width: 100%; border-right: none; border-bottom: 1px solid #4a4a4a;
        max-height: none; overflow-y: auto;
    }

    .canvas-artifacts-col {
        width: 100%; border-left: none; border-top: 1px solid #4a4a4a;
    }

    .canvas-header { padding: 0.15rem 0.4rem; gap: 0.25rem; flex-wrap: nowrap; }
    .canvas-back-btn { padding: 0.1rem 0.3rem; min-height: 22px; font-size: 0.7rem; }
    .canvas-title-wrap { flex: 1; min-width: 0; }
    .canvas-title { font-size: 0.75rem; -webkit-line-clamp: 1; line-height: 1.2; }
    .task-status-badge { font-size: 0.55rem; padding: 0.05rem 0.3rem; }
    .canvas-actions { gap: 0.2rem; }
    .canvas-action-btn { padding: 0.15rem 0.4rem; font-size: 0.65rem; min-height: 20px; }
    /* Hide Follow/Tool output labels — fold into tab bar */
    .canvas-follow, .canvas-tool-toggle, .canvas-header .log-count { display: none !important; }

    /* Slim tab bar */
    .canvas-tabs { padding: 0 0.3rem; }
    .canvas-tab { padding: 0.25rem 0.3rem; font-size: 0.68rem; min-height: 26px; }
    .live-status-grid { grid-template-columns: 1fr; }
    .live-status-header { flex-direction: column; }
    .live-timeline-top { flex-direction: column; align-items: flex-start; }
    .live-timeline-step-top { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
    .live-timeline-step-top h4 { white-space: normal; }
    .live-timeline-meta { white-space: normal; }
    .live-timeline-evidence span { white-space: normal; }

    .canvas-question { padding: 0.4rem 0.6rem; }
    .canvas-question-inner { flex-direction: column; gap: 0.3rem; }
    .canvas-question-form { width: 100%; flex-wrap: wrap; }
    .canvas-question-actions { width: 100%; }
    .canvas-question-form .question-response-input {
        width: 100%;
        min-width: 0;
        flex: 0 0 100%;
        min-height: 34px;
    }

    .canvas-input { padding: 0.25rem 0.5rem; }

    /* Non-expanded canvas input: wrap so textarea gets full width */
    .canvas-input:not(.expanded) .msg-form {
        flex-wrap: wrap;
    }
    .canvas-input:not(.expanded) .msg-form textarea {
        flex: 1 1 100%;
        min-width: 0;
        order: -1;
    }
    .canvas-input:not(.expanded) .msg-form .attach-btn {
        order: 0;
    }
    .canvas-input:not(.expanded) .msg-form .runtime-select,
    .canvas-input:not(.expanded) .msg-form .mode-select {
        font-size: 0.66rem;
        min-height: 30px;
        padding: 0.2rem 1.2rem 0.2rem 0.3rem;
    }
    .canvas-input:not(.expanded) .msg-form .monitor-toggle {
        font-size: 0.66rem;
        min-height: 30px;
        padding: 0.2rem 0.4rem;
    }
    .canvas-input:not(.expanded) .msg-form button[type="submit"] {
        margin-left: auto;
        min-height: 30px;
        font-size: 0.76rem;
        padding: 0.3rem 0.8rem;
    }
    .workspace-contract-summary-grid {
        grid-template-columns: 1fr;
        gap: 0.45rem;
    }
    .workspace-contract-builder-grid {
        grid-template-columns: 1fr;
        gap: 0.45rem;
    }
    .workspace-contract-editor {
        padding: 0.5rem;
        max-height: min(46vh, 26rem);
    }
    .workspace-contract-summary {
        padding: 0.5rem;
    }
    .workspace-contract-checklist-card {
        padding: 0.45rem;
    }
    .workspace-contract-picker-card {
        padding: 0.5rem;
    }
    .workspace-contract-picker-title,
    .workspace-contract-checklist-title,
    .workspace-contract-summary-title {
        letter-spacing: 0.06em;
    }
    .workspace-contract-picker-copy,
    .workspace-contract-summary-copy,
    .workspace-contract-checklist-meta,
    .workspace-scope-selected-copy {
        font-size: 0.62rem;
        line-height: 1.26;
    }
    .workspace-contract-checklist-name {
        font-size: 0.67rem;
        line-height: 1.22;
    }
    .workspace-scope-repo-title {
        font-size: 0.7rem;
        line-height: 1.22;
    }
    .workspace-scope-option-title {
        font-size: 0.66rem;
        line-height: 1.2;
    }
    .workspace-contract-checklist {
        gap: 0.3rem;
        max-height: min(18vh, 9rem);
    }
    .workspace-contract-chip {
        font-size: 0.58rem;
        padding: 0.1rem 0.3rem;
    }
    .workspace-scope-repo-card {
        padding: 0.4rem 0.45rem;
    }
    .workspace-scope-repo-head {
        gap: 0.4rem;
    }
    .workspace-scope-repo-ident {
        gap: 0.35rem;
        width: 100%;
        flex: 1 1 100%;
        max-width: 100%;
    }
    .workspace-scope-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.3rem;
        flex-basis: 100%;
    }
    .workspace-scope-repo-path,
    .workspace-contract-checklist-meta code {
        font-size: 0.56rem;
        padding: 0.06rem 0.26rem;
    }
    .workspace-scope-option {
        border-radius: 7px;
        padding: 0.38rem 0.44rem;
        gap: 0.32rem;
    }
    .workspace-scope-dot {
        width: 0.78rem;
        height: 0.78rem;
    }
    .workspace-scope-selected-copy {
        margin-top: 0.32rem;
    }
    .workspace-artifact-roots {
        margin-top: 0.38rem;
        padding-top: 0.38rem;
    }
    .workspace-artifact-root-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.28rem;
    }
    .workspace-artifact-root-option {
        padding: 0.3rem 0.38rem;
    }
    .workspace-artifact-root-label,
    .workspace-artifact-new-label,
    .workspace-artifact-new-root {
        font-size: 0.62rem;
    }
    .workspace-artifact-new-row {
        grid-template-columns: 1fr;
        gap: 0.22rem;
    }

    /* Canvas main takes full height when visible */
    .canvas-main { flex: 1; min-height: 300px; }

    /* View headers */
    .view-header { padding: 0.25rem 0.5rem; flex-wrap: wrap; }
    .view-header h2 {
        font-size: 0.78rem; width: 100%; order: -1;
        overflow: hidden; display: -webkit-box;
        -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    }

    /* Task detail panel — full screen */
    .task-detail-panel { width: 100vw; border-left: none; }
    .task-detail-header { padding: 0.6rem 0.75rem; }
    .task-detail-header h2 {
        font-size: 0.85rem; max-width: 85%;
        display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .task-detail-meta { padding: 0.6rem 0.75rem; grid-template-columns: 1fr 1fr; gap: 0.4rem 0.75rem; }
    .task-detail-log-header { padding: 0.4rem 0.75rem; }
    .task-detail-log { padding: 0.4rem 0.75rem; }

    /* Log steps compact */
    .log-step { gap: 0.4rem; font-size: 0.74rem; padding: 0.2rem 0.4rem 0.25rem 0.3rem; }
    .log-step-marker { width: 2px; }
    .log-step-meta { gap: 0.4rem; font-size: 0.6rem; }
    .log-step-label { font-size: 0.58rem; }
    .log-tool-detail { font-size: 0.62rem; max-height: 120px; }

    .task-result-box { margin: 0.4rem 0.75rem; font-size: 0.75rem; max-height: 150px; }

    /* Agents view — mobile responsive */
    .agents-list { padding: 0.5rem 0.5rem; }
    .agents-list-item {
        flex-wrap: wrap;
        gap: 0.3rem 0.5rem;
        padding: 0.5rem 0.6rem;
        min-height: 44px;
    }
    .agents-name { min-width: 70px; font-size: 0.78rem; }
    .agents-status-text { min-width: 50px; font-size: 0.68rem; }
    .agents-task-text {
        width: 100%; flex: none; order: 5;
        padding-left: 18px; /* align under name (dot 8px + gap) */
        font-size: 0.68rem;
    }
    .agents-view-btn { font-size: 0.68rem; padding: 0.2rem 0.5rem; min-height: 32px; }
    .agents-live-panel { max-height: 300px; }

    /* Broadcasts view */
    .broadcasts-messages { padding: 0.5rem 0.75rem; }

    /* Artifact viewer — fullscreen on mobile */
    .artifact-viewer-panel { width: calc(100vw - 24px); height: calc(100dvh - 24px); border-radius: 4px; }
    .artifact-viewer-header { flex-wrap: wrap; }
    .artifact-viewer-actions { order: 3; width: 100%; }
    .report-pdf-mode-layout { grid-template-columns: 1fr; }
    .report-section-panel { max-height: 34vh; }
    .artifact-close-btn .close-label { display: none; }
    .run-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .run-section-grid { grid-template-columns: 1fr; }
    .run-timeline-item { grid-template-columns: 78px minmax(0, 1fr); }
}

/* ==================== RESPONSIVE: PHONE (≤480px) ==================== */

@media (max-width: 480px) {
    /* Single column agents */
    /* agent strip stays horizontal on small screens */
    .task-detail-meta { grid-template-columns: 1fr; }

    /* Hide agent column on narrow screens */
    .col-agent { display: none; }

    .btn-logout { font-size: 0.7rem; padding: 0.15rem 0.35rem; }

    /* Tighter icons on very small screens */
    .top-nav-item { padding: 0.1rem 0.18rem; }
    .top-nav-icon { width: 11px; height: 11px; }

    /* Even tighter canvas header on phones */
    .canvas-header { padding: 0.1rem 0.3rem; gap: 0.2rem; }
    .canvas-title { font-size: 0.7rem; }
    .canvas-action-btn { padding: 0.1rem 0.3rem; font-size: 0.6rem; }
    .canvas-tab { font-size: 0.62rem; padding: 0.2rem 0.2rem; min-height: 24px; }

    /* Agents view — phone */
    .agents-list { padding: 0.4rem 0.35rem; }
    .agents-list-item { padding: 0.45rem 0.5rem; }
    .agents-name { min-width: 60px; }
    .agents-status-text { min-width: 40px; }
    .agents-task-text { padding-left: 14px; }

    /* Artifact viewer — full screen */
    .artifact-viewer-panel { width: calc(100vw - 12px); height: calc(100dvh - 12px); border-radius: 4px; }
    .artifact-viewer-header {
        padding: 0.5rem;
        padding-top: max(0.5rem, env(safe-area-inset-top, 0px));
        gap: 0.35rem;
    }
    .artifact-close-btn .close-label { display: none; }
    .artifact-close-btn { font-size: 1.2rem; min-height: 44px; min-width: 44px; padding: 0.25rem; }
    .artifact-back-btn { font-size: 1.2rem; min-height: 44px; min-width: 44px; padding: 0.25rem; }
    .artifact-viewer-header h2 { font-size: 0.85rem; }
    .artifact-viewer-actions { gap: 0.3rem; }
    .artifact-action-btn, .artifact-pdf-toggle { font-size: 0.66rem; min-height: 32px; padding: 0.2rem 0.4rem; }
    .report-section-panel { max-height: 38vh; }
    .run-summary-header { flex-direction: column; }
    .run-stat-grid { grid-template-columns: 1fr; }
    .run-timeline-item { grid-template-columns: 1fr; gap: 0.35rem; }
    .run-timeline-card::before { display: none; }
}

/* ==================== USAGE DISPLAY ==================== */

.usage-display {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    padding: 0.12rem 0.28rem;
    border-radius: 6px;
    background: #282828;
    border: 1px solid #3d3d3d;
    transition: border-color 0.15s, background 0.15s, opacity 0.15s;
    flex-shrink: 0;
}
.usage-display:hover { border-color: #4a4a4a; background: #2f2f2f; }
.usage-display:focus-visible {
    outline: 2px solid #0D9373;
    outline-offset: 2px;
}

.usage-icons {
    align-items: center;
    gap: 0.22rem;
}

.usage-icon {
    --usage-gauge-color: #777;
    --usage-gauge-rest: rgba(74, 74, 74, 0.82);
    --usage-gauge-fill: 0%;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-width: 0;
    height: 24px;
    padding: 0;
    color: #8a8a8a;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    transition: color 0.2s, opacity 0.2s;
}

.usage-icon-label {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border: 1px solid #4a4a4a;
    border-radius: 50%;
    background: #303030;
    transform: translateY(0.5px);
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.usage-icon-label::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: conic-gradient(
        var(--usage-gauge-color) 0 var(--usage-gauge-fill),
        var(--usage-gauge-rest) var(--usage-gauge-fill) 100%
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
    pointer-events: none;
    opacity: 0;
    transform: rotate(-90deg);
    transition: opacity 0.2s;
}

.usage-icon.usage-limit-5h .usage-icon-label::before,
.usage-icon.usage-limit-7d .usage-icon-label::before,
.usage-icon.usage-limit-extra .usage-icon-label::before,
.usage-icon.usage-limit-model .usage-icon-label::before {
    opacity: 1;
}

.usage-icon.good {
    --usage-gauge-color: #7EC8B0;
    color: #7EC8B0;
}

.usage-icon.good .usage-icon-label {
    border-color: rgba(13, 147, 115, 0.8);
    background: rgba(13, 147, 115, 0.12);
}

.usage-icon.warn {
    --usage-gauge-color: #e3b341;
    color: #e3b341;
}

.usage-icon.warn .usage-icon-label {
    border-color: rgba(210, 153, 34, 0.9);
    background: rgba(210, 153, 34, 0.14);
    box-shadow: 0 0 0 2px rgba(210, 153, 34, 0.08);
}

.usage-icon.critical {
    --usage-gauge-color: #ff807a;
    color: #ff807a;
}

.usage-icon.critical .usage-icon-label {
    border-color: rgba(248, 81, 73, 0.95);
    background: rgba(248, 81, 73, 0.14);
    box-shadow: 0 0 0 2px rgba(248, 81, 73, 0.1);
}

.usage-icon.unknown {
    --usage-gauge-color: #777;
    color: #777;
}

.usage-icon.unknown .usage-icon-label {
    border-color: #444;
    background: #2d2d2d;
}

.usage-icon.stale {
    opacity: 0.72;
}

.usage-icon.overage .usage-icon-label::after {
    content: "";
    position: absolute;
    right: 1px;
    top: 1px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #f85149;
}

.usage-icon-value {
    display: block;
    min-width: 1.35rem;
    text-align: right;
    color: #d0d0d0;
    font-size: 0.58rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.usage-hidden-value {
    display: none !important;
}

.usage-runtime-label {
    font-size: 0.6rem;
    font-weight: 800;
    color: #D4A574;
    flex-shrink: 0;
}
.usage-runtime-label.codex {
    color: #7AA2F7;
}
.usage-runtime-label.antigravity {
    color: #f9a8d4;
}

.usage-val {
    font-size: 0.6rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: color 0.3s;
}
/* 5H values — warm amber/gold */
.usage-val-5h { color: #E0C088; }
/* 7D values — cool teal */
.usage-val-7d { color: #7EC8B0; }
/* Overage — red */
.usage-val-ovr { color: #f85149; }

/* Utilization-based overrides */
.usage-val.warn { color: #d29922 !important; }
.usage-val.critical { color: #f85149 !important; }

.usage-sep {
    font-size: 0.5rem;
    color: #444;
    margin: 0 0.05rem;
}

/* Subscription icon button */
.sub-icon-wrap {
    position: relative;
    flex-shrink: 0;
}
.sub-icon-btn {
    background: #282828;
    border: 1px solid #3d3d3d;
    border-radius: 4px;
    color: #03C497;
    cursor: pointer;
    padding: 3px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, color 0.15s;
}
.sub-icon-btn:hover { border-color: #0D9373; color: #0D9373; }
.sub-icon-btn.switching { animation: sub-pulse 0.8s ease-in-out infinite; color: #d29922; border-color: #d29922; }
.sub-icon-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    z-index: 100;
}

.usage-reset {
    display: none;
}

/* Legacy bar styles kept for modal compatibility */
.usage-bar-wrap {
    width: 32px;
    height: 4px;
    background: #3d3d3d;
    border-radius: 3px;
    overflow: hidden;
}
.usage-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease, background 0.3s ease;
    background: #03C497;
}
.usage-bar.warn { background: #d29922; }
.usage-bar.critical { background: #f85149; }
.usage-bar.extra { background: #03C497; }
.usage-bar.codex { background: #7AA2F7; }
.usage-bar.codex.warn { background: #d29922; }
.usage-bar.codex.critical { background: #f85149; }
.usage-pct {
    font-size: 0.55rem;
    font-weight: 600;
    color: #F0F0F0;
    min-width: 22px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ==================== MOBILE USAGE STRIP ==================== */

/* Usage strip — mobile only (subscription select + compact usage bars) */
.mobile-usage-strip {
    display: none;
}

@media (max-width: 768px) {
    .mobile-usage-strip {
        display: none !important;
    }
}

.mobile-sub-select {
    appearance: none;
    -webkit-appearance: none;
    background: #282828 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23999999'/%3E%3C/svg%3E") no-repeat right 6px center;
    border: 1px solid #4a4a4a;
    border-radius: 4px;
    color: #03C497;
    font-size: 0.65rem;
    font-family: inherit;
    padding: 0.2rem 1.2rem 0.2rem 0.4rem;
    min-height: 26px;
    cursor: pointer;
    flex-shrink: 0;
    max-width: 120px;
    text-overflow: ellipsis;
}
.mobile-sub-select:focus { outline: none; border-color: #0D9373; }
.mobile-sub-select.switching { animation: sub-pulse 0.8s ease-in-out infinite; border-color: #d29922; color: #d29922; }

.mobile-usage-bars {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    cursor: pointer;
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
    transition: background 0.15s;
}
.mobile-usage-bars:active { background: #3d3d3d; }

.mobile-runtime-label {
    font-size: 0.55rem;
    font-weight: 800;
    color: #D4A574;
    min-width: 8px;
    text-align: center;
}
.mobile-runtime-label.codex { color: #7AA2F7; }
.mobile-runtime-label.antigravity { color: #f9a8d4; }

.mobile-usage-label {
    font-size: 0.6rem;
    font-weight: 700;
    color: #999999;
    text-transform: uppercase;
    min-width: 14px;
    text-align: right;
}

.mobile-bar-wrap {
    width: 40px;
    height: 5px;
    background: #3d3d3d;
    border-radius: 3px;
    overflow: hidden;
}

.mobile-usage-pct {
    font-size: 0.6rem;
    font-weight: 600;
    color: #F0F0F0;
    min-width: 20px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ==================== PAUSE BANNER & RESUME UX ==================== */

.canvas-pause-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    background: linear-gradient(135deg, #0a3d30 0%, #0a3d30 100%);
    border: 1px solid #0D9373;
    border-radius: 6px;
    margin-bottom: 0.4rem;
    animation: pauseBannerPulse 2s ease-in-out infinite;
}

.pause-banner-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.pause-banner-text {
    font-size: 0.75rem;
    color: #32CDA7;
    font-weight: 500;
}

.canvas-followup-sync {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.55rem 0.75rem;
    margin-bottom: 0.45rem;
    border: 1px solid #4a4a4a;
    border-radius: 6px;
    background: linear-gradient(180deg, #2c2c2c 0%, #282828 100%);
}

.canvas-followup-sync-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.canvas-followup-sync-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #9a9a9a;
}

.canvas-followup-sync-badge {
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    border: 1px solid #4a4a4a;
    color: #d0d0d0;
    background: #333333;
}

.canvas-followup-sync-badge.ok {
    color: #32CDA7;
    border-color: rgba(3, 196, 151, 0.35);
    background: rgba(3, 196, 151, 0.08);
}

.canvas-followup-sync-badge.diverged {
    color: #F6C85F;
    border-color: rgba(246, 200, 95, 0.4);
    background: rgba(246, 200, 95, 0.08);
}

.canvas-followup-sync-badge.ahead {
    color: #78B7FF;
    border-color: rgba(120, 183, 255, 0.4);
    background: rgba(120, 183, 255, 0.08);
}

.canvas-followup-sync-summary {
    font-size: 0.74rem;
    line-height: 1.45;
    color: #e4e4e4;
}

.canvas-followup-sync-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.canvas-followup-sync-option {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.5rem;
    border-radius: 5px;
    border: 1px solid #4a4a4a;
    background: #303030;
    font-size: 0.72rem;
    color: #f0f0f0;
}

.canvas-followup-sync-option input {
    margin: 0;
}

@keyframes pauseBannerPulse {
    0%, 100% { border-color: #0D9373; box-shadow: 0 0 0 0 rgba(3, 196, 151, 0); }
    50% { border-color: #03C497; box-shadow: 0 0 8px 0 rgba(3, 196, 151, 0.15); }
}

.canvas-input.paused {
    border-top-color: #03C497;
    background: #0a2e24;
}

.canvas-input.paused .msg-form textarea {
    border-color: #0D9373;
    background: #0a2e24;
}

.canvas-input.paused .msg-form textarea:focus {
    border-color: #03C497;
    box-shadow: 0 0 0 2px rgba(3, 196, 151, 0.2);
}

.canvas-input.paused .msg-form button[type="submit"] {
    background: #0D9373;
    color: #fff;
    font-weight: 700;
}

.canvas-input.paused .msg-form button[type="submit"]:hover {
    background: #03C497;
}

.canvas-input.archived {
    border-top-color: #636c76;
    background: #161b22;
}

.canvas-input.archived .msg-form textarea,
.canvas-input.archived .msg-form select,
.canvas-input.archived .msg-form button {
    opacity: 0.6;
    cursor: not-allowed;
}

.canvas-action-btn.resume {
    background: #0D9373;
    color: #fff;
    border: 1px solid #03C497;
    animation: resumeBtnGlow 2s ease-in-out infinite;
}
.canvas-action-btn.resume:hover {
    background: #03C497;
    border-color: #03C497;
}

@keyframes resumeBtnGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(35, 134, 54, 0); }
    50% { box-shadow: 0 0 6px 0 rgba(35, 134, 54, 0.4); }
}

/* ==================== USAGE MODAL ==================== */

.usage-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.usage-modal.hidden {
    display: none;
}

.usage-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
}

.usage-modal-panel {
    position: relative;
    width: 420px;
    max-width: 90vw;
    max-height: 80vh;
    background: #333333;
    border: 1px solid #4a4a4a;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    animation: usageModalIn 0.2s ease-out;
}

@keyframes usageModalIn {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.usage-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #4a4a4a;
    background: #282828;
}

.usage-modal-header h3 {
    margin: 0;
    font-size: 0.95rem;
    color: #F0F0F0;
}

.usage-modal-close {
    background: none;
    border: none;
    color: #999999;
    font-size: 1.3rem;
    cursor: pointer;
    padding: 0 0.3rem;
    line-height: 1;
}
.usage-modal-close:hover { color: #F0F0F0; }

.usage-modal-body {
    padding: 1rem;
    overflow-y: auto;
    max-height: calc(80vh - 50px);
}

.usage-loading {
    text-align: center;
    color: #999999;
    padding: 2rem;
}

.usage-section {
    margin-bottom: 1rem;
}

.usage-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    color: #999999;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid #3d3d3d;
}

/* Collapsible subscription section — collapsed by default */
.usage-section-collapsible.collapsed .usage-section-content {
    display: none;
}
.usage-section-collapsible.collapsed .usage-toggle-arrow {
    display: inline-block;
    transform: rotate(-90deg);
}
.usage-section-collapsible .usage-toggle-arrow {
    transition: transform 0.15s;
}
.usage-section-toggle:hover {
    color: #F0F0F0;
}

.usage-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.35rem 0;
    font-size: 0.8rem;
}

.usage-detail-label {
    color: #999999;
}

.usage-detail-value {
    color: #F0F0F0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.usage-detail-value.warn { color: #d29922; }
.usage-detail-value.critical { color: #f85149; }
.usage-detail-value.good { color: #03C497; }

.usage-big-bar {
    width: 100%;
    height: 10px;
    background: #3d3d3d;
    border-radius: 5px;
    overflow: hidden;
    margin: 0.4rem 0;
}

.usage-big-bar-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.5s ease, background 0.3s ease;
    background: #03C497;
}
.usage-big-bar-fill.warn { background: #d29922; }
.usage-big-bar-fill.critical { background: #f85149; }
.usage-big-bar-fill.extra { background: #03C497; }

.usage-plan-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    background: #0a3d30;
    color: #03C497;
    border: 1px solid #0D9373;
}

.usage-timestamp {
    text-align: center;
    font-size: 0.65rem;
    color: #656565;
    margin-top: 0.5rem;
}

/* ==================== CONFIRMATION MODAL ==================== */

.confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
}

.confirm-modal.hidden {
    display: none;
}

.confirm-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
}

.confirm-modal-panel {
    position: relative;
    width: 380px;
    max-width: 90vw;
    background: #333333;
    border: 1px solid #4a4a4a;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    animation: confirmModalIn 0.2s ease-out;
}

@keyframes confirmModalIn {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.confirm-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #4a4a4a;
    background: #282828;
}

.confirm-modal-header h3 {
    margin: 0;
    font-size: 0.95rem;
    color: #F0F0F0;
}

.confirm-modal-close {
    background: none;
    border: none;
    color: #999999;
    font-size: 1.3rem;
    cursor: pointer;
    padding: 0 0.3rem;
    line-height: 1;
}
.confirm-modal-close:hover { color: #F0F0F0; }

.confirm-modal-body {
    padding: 1rem 1rem 0.5rem;
}

.confirm-modal-body p {
    margin: 0 0 0.5rem;
    color: #F0F0F0;
    font-size: 0.9rem;
    line-height: 1.4;
}

.confirm-modal-warning {
    color: #d29922 !important;
    font-size: 0.8rem !important;
}

.confirm-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid #4a4a4a;
    background: #282828;
}

.confirm-btn {
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s;
}

.confirm-btn.cancel {
    background: #3d3d3d;
    color: #F0F0F0;
    border-color: #4a4a4a;
}
.confirm-btn.cancel:hover {
    background: #4a4a4a;
}

.confirm-btn.confirm {
    background: #0D9373;
    color: #fff;
    border-color: #0D9373;
}
.confirm-btn.confirm:hover {
    background: #03C497;
}

/* Keep compact limit icons visible on very small screens */
@media (max-width: 600px) {
    .usage-display { display: flex; }
    .usage-icon {
        min-width: 0;
        padding: 0;
    }
    .usage-icon-value {
        display: none;
    }
}

/* ==================== TASK EXPLORER ==================== */

.explorer-view {
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem;
}

/* Customer Portal */
.portal-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.portal-iframe {
    flex: 1;
    width: 100%;
    border: none;
}

.apps-index {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.75rem;
    padding: 0.9rem;
    overflow: auto;
}

.app-tile {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-height: 7rem;
    padding: 0.75rem;
    border: 1px solid #3d3d3d;
    border-radius: 8px;
    background: #242424;
    color: #F0F0F0;
    text-decoration: none;
}

.app-tile:hover {
    border-color: #0D9373;
    background: #2b2b2b;
}

.app-tile-title {
    font-size: 0.95rem;
    font-weight: 600;
}

.app-tile-description {
    color: #bdbdbd;
    font-size: 0.74rem;
    line-height: 1.35;
}

.app-frame-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.app-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #3d3d3d;
    background: #242424;
    flex-shrink: 0;
}

.app-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    color: #F0F0F0;
    font-size: 0.86rem;
    font-weight: 600;
}

.app-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.app-open {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.app-status {
    display: inline-flex;
    align-items: center;
    min-height: 1.25rem;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    border: 1px solid #4a4a4a;
    background: #303030;
    color: #bdbdbd;
    font-size: 0.7rem;
    font-weight: 500;
}

.app-status.ready {
    color: #03C497;
    border-color: #0D9373;
    background: #063d31;
}

.app-status.disabled,
.app-status.unavailable {
    color: #d29922;
    border-color: #6a4a12;
    background: #2d2000;
}

.app-status.checking {
    color: #999999;
}

.explorer-search-bar {
    display: flex;
    gap: 0.5rem;
}

.explorer-input {
    flex: 1;
    padding: 0.6rem 0.8rem;
    background: #282828;
    border: 1px solid #4a4a4a;
    border-radius: 6px;
    color: #F0F0F0;
    font-size: 0.9rem;
    font-family: inherit;
}

.explorer-input:focus {
    outline: none;
    border-color: #03C497;
}

.explorer-search-btn {
    padding: 0.6rem 1.2rem;
    background: #0D9373;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    font-family: inherit;
}

.explorer-search-btn:hover { background: #03C497; }

/* Explorer controls row */
.explorer-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.explorer-method-toggle {
    display: flex;
    background: #333333;
    border: 1px solid #4a4a4a;
    border-radius: 6px;
    overflow: hidden;
}
.explorer-method-toggle .method-btn {
    background: transparent;
    border: none;
    color: #999999;
    padding: 0.3rem 0.7rem;
    font-size: 0.75rem;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
    border-right: 1px solid #4a4a4a;
    white-space: nowrap;
}
.explorer-method-toggle .method-btn:last-child { border-right: none; }
.explorer-method-toggle .method-btn:hover { color: #F0F0F0; background: #3d3d3d; }
.explorer-method-toggle .method-btn.active {
    background: #0D9373;
    color: #fff;
    font-weight: 600;
}
/* Toggle switch */
.explorer-toggle-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: #999999;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.explorer-toggle-label input[type="checkbox"] { display: none; }
.toggle-switch {
    width: 30px;
    height: 16px;
    background: #4a4a4a;
    border-radius: 8px;
    position: relative;
    transition: background 0.2s;
    flex-shrink: 0;
}
.toggle-switch::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    background: #999999;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: all 0.2s;
}
.explorer-toggle-label input:checked + .toggle-switch {
    background: #0D9373;
}
.explorer-toggle-label input:checked + .toggle-switch::after {
    left: 16px;
    background: #fff;
}

.explorer-status {
    padding: 0.4rem 0.6rem;
    color: #999999;
    font-style: italic;
    font-size: 0.85rem;
}

.explorer-body {
    display: flex;
    gap: 0.75rem;
    min-height: 0;
    flex: 1;
}

.explorer-sidebar {
    width: 220px;
    flex-shrink: 0;
    background: #333333;
    border: 1px solid #4a4a4a;
    border-radius: 6px;
    padding: 0.6rem;
    overflow-y: auto;
}

.explorer-sidebar h3 {
    font-size: 0.8rem;
    color: #999999;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.explorer-sidebar ul { list-style: none; }

.explorer-recent-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.4rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    color: #F0F0F0;
}

.explorer-recent-item:hover { background: #3d3d3d; }

.explorer-recent-header { display: flex; align-items: center; gap: 0.3rem; }
.explorer-recent-icon { font-size: 0.75rem; color: #03C497; flex-shrink: 0; }
.explorer-recent-query { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.explorer-recent-time { color: #656565; font-size: 0.7rem; }
.explorer-recent-meta { font-size: 0.7rem; color: #999999; padding-left: 1.1rem; }
.explorer-recent-tags { display: flex; flex-wrap: wrap; gap: 0.2rem; padding-left: 1.1rem; margin-top: 0.15rem; }
.explorer-tag { font-size: 0.65rem; padding: 0.05rem 0.35rem; background: #3d3d3d; border: 1px solid #4a4a4a; border-radius: 8px; color: #32CDA7; }
.explorer-recent-empty { color: #999999; font-size: 0.8rem; padding: 0.5rem; }

.explorer-results {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
}

.explorer-results-close { display: none; }

.explorer-empty {
    color: #999999;
    text-align: center;
    padding: 3rem 1rem;
    font-size: 0.9rem;
}

.explorer-summary {
    background: #333333;
    border: 1px solid #4a4a4a;
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 0.75rem;
}

.explorer-summary-content {
    font-size: 0.85rem;
    line-height: 1.5;
    color: #F0F0F0;
}

.explorer-summary-content h2 { font-size: 1.1rem; color: #03C497; margin: 1rem 0 0.5rem; }
.explorer-summary-content h3 { font-size: 0.95rem; color: #03C497; margin: 0.8rem 0 0.4rem; }
.explorer-summary-content h4 { font-size: 0.9rem; color: #32CDA7; margin: 0.6rem 0 0.3rem; }
.explorer-summary-content ul { padding-left: 1.2rem; margin: 0.3rem 0; }
.explorer-summary-content li { margin-bottom: 0.2rem; }
.explorer-summary-content code { background: #282828; padding: 0.1rem 0.3rem; border-radius: 3px; font-size: 0.8rem; }
.explorer-summary-content strong { color: #F5F5F5; }

.explorer-tasks-section h3,
.explorer-artifacts-section h3 {
    font-size: 0.9rem;
    color: #999999;
    margin-bottom: 0.5rem;
}

.explorer-task-card {
    background: #333333;
    border: 1px solid #4a4a4a;
    border-radius: 6px;
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: border-color 0.15s;
}

.explorer-task-card:hover { border-color: #03C497; }

.explorer-task-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.3rem;
}

.explorer-task-id {
    font-family: monospace;
    font-size: 0.75rem;
    color: #999999;
}

.explorer-task-status {
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.explorer-task-status.status-completed { background: #0D9373; color: #fff; }
.explorer-task-status.status-failed { background: #da3633; color: #fff; }
.explorer-task-status.status-in_progress { background: #0D9373; color: #fff; }
.explorer-task-status.status-pending { background: #4a4a4a; color: #999999; }
.explorer-task-status.status-escalated { background: #d29922; color: #282828; }

.explorer-task-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #F0F0F0;
    margin-bottom: 0.15rem;
    line-height: 1.3;
}
.explorer-task-description {
    font-size: 0.78rem;
    color: #999999;
    margin-bottom: 0.2rem;
    line-height: 1.3;
}
.explorer-task-summary {
    font-size: 0.8rem;
    color: #999999;
    line-height: 1.4;
    border-left: 2px solid #4a4a4a;
    padding-left: 0.5rem;
    margin-top: 0.25rem;
}
.explorer-task-meta-inline {
    margin-left: auto;
    font-size: 0.7rem;
    color: #656565;
    white-space: nowrap;
}

.explorer-task-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: #999999;
}

.explorer-task-preview {
    margin-top: 0.3rem;
    padding: 0.4rem;
    background: #282828;
    border-radius: 4px;
    font-size: 0.75rem;
    color: #999999;
    max-height: 4rem;
    overflow: hidden;
    white-space: pre-wrap;
}

.explorer-artifact-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.explorer-artifact-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    background: #333333;
    border: 1px solid #4a4a4a;
    border-radius: 4px;
    font-size: 0.8rem;
}

.explorer-artifact-link {
    color: #03C497;
    text-decoration: none;
}

.explorer-artifact-link:hover { text-decoration: underline; }

.explorer-artifact-meta {
    color: #999999;
    font-size: 0.75rem;
}

@media (max-width: 768px) {
    .explorer-body { flex-direction: column; position: relative; }
    .explorer-sidebar {
        width: 100%;
        max-height: none;
        flex: 1 1 auto;
        min-height: 0;
    }
    .explorer-results {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        z-index: 200;
        background: #282828;
        overflow-y: auto;
        padding: 0.75rem;
        padding-top: 2.5rem;
    }
    .explorer-body.has-results .explorer-results { display: block; }
    .explorer-body.has-results .explorer-results-close {
        display: block;
        position: fixed;
        top: 0.5rem; right: 0.75rem;
        z-index: 201;
        background: #3d3d3d;
        color: #F0F0F0;
        border: 1px solid #4a4a4a;
        border-radius: 6px;
        padding: 0.3rem 0.8rem;
        font-size: 0.85rem;
        cursor: pointer;
        font-family: inherit;
    }
    .explorer-body.has-results .explorer-results-close:hover { background: #4a4a4a; }
}

/* Explorer: Instant search additions */
.explorer-timing {
    padding: 0.4rem 0.75rem;
    font-size: 0.75rem;
    color: #03C497;
    font-family: monospace;
}
.explorer-knowledge-section {
    padding: 0 0.75rem 0.75rem;
}
.explorer-knowledge-card {
    background: #333333;
    border: 1px solid #4a4a4a;
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.5rem;
    cursor: default;
}
.explorer-knowledge-card:hover { border-color: #03C497; }
.explorer-knowledge-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}
.explorer-knowledge-label {
    font-size: 0.65rem;
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    background: #0D937333;
    color: #03C497;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.explorer-knowledge-name {
    font-weight: 600;
    color: #F0F0F0;
    font-size: 0.9rem;
}
.explorer-knowledge-content {
    color: #999999;
    font-size: 0.8rem;
    line-height: 1.4;
    margin-top: 0.25rem;
}
.explorer-knowledge-tags {
    margin-top: 0.3rem;
}
.explorer-knowledge-tags .explorer-tag {
    font-size: 0.65rem;
    margin-right: 0.3rem;
}
.explorer-knowledge-score {
    font-size: 0.65rem;
    color: #03C497;
    margin-left: auto;
}
.explorer-ai-actions {
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.explorer-ai-btn {
    background: #3d3d3d;
    color: #F0F0F0;
    border: 1px solid #4a4a4a;
    border-radius: 6px;
    padding: 0.4rem 1rem;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.8rem;
    transition: all 0.15s;
}
.explorer-ai-btn:hover { background: #4a4a4a; border-color: #03C497; color: #03C497; }
.explorer-ai-status { font-size: 0.75rem; color: #999999; }
.explorer-log-snippet {
    font-size: 0.78rem;
    color: #999999;
    margin-top: 0.2rem;
    line-height: 1.35;
    white-space: pre-wrap;
    max-height: 4.5em;
    overflow: hidden;
}
/* Filesystem & Oracle card label colors */
.explorer-fs-label { background: #0D937333 !important; color: #03C497 !important; }
.explorer-oracle-label { background: #03C49733 !important; color: #32CDA7 !important; }
.explorer-oracle-card { border-left: 2px solid #03C497; }
.explorer-semantic-label { background: #f7841733 !important; color: #f0883e !important; }
.explorer-semantic-card { border-left: 2px solid #f0883e; }
.explorer-fs-card { border-left: 2px solid #03C497; }

.explorer-log-snippet mark {
    background: rgba(210, 153, 34, 0.3);
    color: #e3b341;
    border-radius: 2px;
    padding: 0 2px;
}

/* ==================== RESPONSIVE: SMALL PHONE (≤360px) ==================== */

@media (max-width: 360px) {
    header { padding: 0.4rem 0.5rem; }
    .agent-panel { padding: 0.25rem 0.5rem; }
    .task-panel { padding: 0.4rem 0.5rem; }
    .input-section { padding: 0.4rem 0.5rem; }
    .canvas-header { padding: 0.4rem 0.5rem; }
    .canvas-input { padding: 0.4rem 0.5rem; }
}

/* ==================== SCHEDULES VIEW ==================== */

.schedules-view { display: flex; flex-direction: column; height: 100%; }
.schedules-list { padding: 1rem; overflow-y: auto; flex: 1; }
.schedules-empty { color: #999999; text-align: center; padding: 3rem 1rem; font-size: 0.85rem; }
.schedules-table { width: 100%; border-collapse: collapse; }
.schedules-table th, .schedules-table td { padding: 0.5rem 0.75rem; text-align: left; border-bottom: 1px solid #3d3d3d; }
.schedules-table th { color: #999999; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; }
.schedules-table td { font-size: 0.8rem; }
.schedule-name-cell { color: #03C497; font-weight: 500; }
.schedules-table code { background: #333333; padding: 0.15rem 0.4rem; border-radius: 3px; font-size: 0.75rem; color: #f0883e; }
.schedule-actions { display: flex; gap: 0.4rem; }
.schedule-edit-btn, .schedule-delete-btn { background: none; border: 1px solid #4a4a4a; color: #999999; padding: 0.2rem 0.5rem; border-radius: 4px; cursor: pointer; font-size: 0.7rem; }
.schedule-edit-btn:hover { border-color: #03C497; color: #03C497; }
.schedule-delete-btn:hover { border-color: #f85149; color: #f85149; }

/* Toggle switch */
.schedule-toggle { position: relative; display: inline-block; width: 36px; height: 20px; }
.schedule-toggle input { opacity: 0; width: 0; height: 0; }
.schedule-slider { position: absolute; cursor: pointer; inset: 0; background: #4a4a4a; border-radius: 20px; transition: 0.2s; }
.schedule-slider::before { content: ""; position: absolute; height: 14px; width: 14px; left: 3px; bottom: 3px; background: #999999; border-radius: 50%; transition: 0.2s; }
.schedule-toggle input:checked + .schedule-slider { background: #0D9373; }
.schedule-toggle input:checked + .schedule-slider::before { transform: translateX(16px); background: #fff; }

/* Schedule form */
.schedule-form { padding: 1rem; background: #333333; border: 1px solid #4a4a4a; border-radius: 6px; margin: 0 1rem; }
.schedule-form-row { margin-bottom: 0.75rem; }
.schedule-form-row label { display: block; color: #999999; margin-bottom: 0.25rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.schedule-form-row input, .schedule-form-row textarea { width: 100%; padding: 0.5rem; background: #282828; border: 1px solid #4a4a4a; border-radius: 4px; color: #F0F0F0; font-family: inherit; font-size: 0.8rem; }
.schedule-form-row input:focus, .schedule-form-row textarea:focus { outline: none; border-color: #03C497; }
.schedule-cron-hint { display: block; color: #656565; font-size: 0.65rem; margin-top: 0.2rem; }
.schedule-form-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.btn-action { background: #0D9373; color: #fff; border: none; padding: 0.4rem 1rem; border-radius: 4px; cursor: pointer; font-size: 0.8rem; }
.btn-action:hover { background: #03C497; }
.btn-cancel { background: none; color: #999999; border: 1px solid #4a4a4a; padding: 0.4rem 1rem; border-radius: 4px; cursor: pointer; font-size: 0.8rem; }
.btn-cancel:hover { border-color: #999999; }

/* ==================== SCREENSHOT-TO-TASK ==================== */

/* Header button */
.screenshot-btn {
    background: transparent;
    border: 1px solid #4a4a4a;
    border-radius: 6px;
    color: #999999;
    width: 28px;
    height: 28px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
    flex-shrink: 0;
}
.screenshot-btn:hover {
    color: #F5F5F5;
    border-color: #03C497;
    background: rgba(88, 166, 255, 0.1);
    transform: scale(1.05);
}
.screenshot-btn:active {
    transform: scale(0.95);
}

/* Selection overlay */
.ss-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    cursor: crosshair;
}
.ss-overlay.hidden { display: none; }
.ss-overlay canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Hint pill */
.ss-hint {
    position: fixed;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(13, 17, 23, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #F5F5F5;
    padding: 8px 20px;
    border-radius: 100px;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    border: 1px solid rgba(88, 166, 255, 0.3);
    pointer-events: none;
    animation: ss-hint-in 0.3s ease;
    z-index: 9001;
}
@keyframes ss-hint-in {
    from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Compose modal */
.ss-modal {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: ss-fade-in 0.2s ease;
}
.ss-modal.hidden { display: none; }
@keyframes ss-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.ss-modal-card {
    background: #333333;
    border: 1px solid #4a4a4a;
    border-radius: 12px;
    width: 520px;
    max-width: 92vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(88, 166, 255, 0.08);
    animation: ss-card-in 0.25s ease;
    overflow: hidden;
}
@keyframes ss-card-in {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.ss-modal-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid #3d3d3d;
}
.ss-modal-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #F5F5F5;
}
.ss-page-badge {
    font-size: 0.65rem;
    color: #03C497;
    background: rgba(88, 166, 255, 0.1);
    padding: 2px 8px;
    border-radius: 100px;
    border: 1px solid rgba(88, 166, 255, 0.2);
}
.ss-modal-close {
    margin-left: auto;
    background: transparent;
    border: none;
    color: #999999;
    font-size: 1.1rem;
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.15s;
}
.ss-modal-close:hover {
    background: #3d3d3d;
    color: #F5F5F5;
}

/* Preview */
.ss-preview-wrap {
    padding: 12px 16px 8px;
    display: flex;
    justify-content: center;
    overflow: auto;
    max-height: 45vh;
}
.ss-preview-img {
    max-width: 100%;
    max-height: 40vh;
    border-radius: 8px;
    border: 1px solid #4a4a4a;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    object-fit: contain;
}

/* Form */
.ss-form {
    padding: 8px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ss-prompt {
    width: 100%;
    padding: 10px 12px;
    background: #282828;
    border: 1px solid #4a4a4a;
    border-radius: 8px;
    color: #F5F5F5;
    font-family: inherit;
    font-size: 0.82rem;
    resize: vertical;
    min-height: 44px;
    max-height: 120px;
    transition: border-color 0.2s;
    line-height: 1.5;
}
.ss-prompt:focus {
    outline: none;
    border-color: #03C497;
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15);
}
.ss-prompt::placeholder {
    color: #656565;
}
.ss-runtime-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.ss-runtime-label {
    color: #b8b8b8;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.ss-runtime-select {
    min-width: 120px;
}
.ss-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.ss-btn {
    padding: 7px 18px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ss-btn-ghost {
    background: transparent;
    border: 1px solid #4a4a4a;
    color: #999999;
}
.ss-btn-ghost:hover {
    border-color: #999999;
    color: #F0F0F0;
}
.ss-btn-primary {
    background: #0D9373;
    border: 1px solid #0D9373;
    color: #fff;
}
.ss-btn-primary:hover {
    background: #03C497;
    border-color: #03C497;
}
.ss-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==================== KANBAN BOARD ==================== */

.board-view { display: flex; flex-direction: column; height: 100%; }
.board-columns {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    overflow-x: auto;
    flex: 1;
    align-items: flex-start;
}
.board-column {
    background: #333333;
    border: 1px solid #4a4a4a;
    border-radius: 8px;
    min-width: 270px;
    max-width: 310px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 130px);
    transition: border-color 0.2s, background 0.2s, min-width 0.25s, max-width 0.25s, opacity 0.25s;
}
.board-column.board-empty-col {
    min-width: 56px;
    max-width: 56px;
    opacity: 0.55;
    overflow: hidden;
    cursor: default;
    position: relative;
    min-height: 120px;
}
.board-column.board-empty-col:hover {
    opacity: 0.75;
}
.board-column.board-empty-col .board-column-body { display: none; }
.board-column.board-empty-col .board-col-count { display: none; }
.board-column.board-empty-col .board-column-actions { display: none; }
.board-column.board-empty-col .board-column-header {
    flex-direction: column;
    padding: 0.5rem 0.25rem;
    align-items: center;
    border-bottom: none;
    gap: 0.4rem;
    flex: 1;
}
.board-column.board-empty-col .board-col-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
}
.board-column.board-empty-col .board-col-name {
    display: block;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-size: 0.58rem;
    font-weight: 500;
    color: #999999;
    white-space: nowrap;
    letter-spacing: 0.04em;
    line-height: 1;
    flex: 1;
    min-height: 0;
}
.board-column.drag-over {
    border-color: #03C497;
    background: #06503D;
}
.board-column-header {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid #4a4a4a;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}
.board-col-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.board-col-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: #F0F0F0;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.board-col-count {
    background: #3d3d3d;
    padding: 0.1rem 0.45rem;
    border-radius: 10px;
    font-size: 0.65rem;
    color: #999999;
    flex-shrink: 0;
}
.board-column-actions {
    display: flex;
    gap: 0.15rem;
    flex-shrink: 0;
}
.board-col-edit, .board-col-delete {
    background: none;
    border: none;
    color: #656565;
    cursor: pointer;
    font-size: 0.7rem;
    padding: 2px 4px;
    border-radius: 3px;
    transition: color 0.15s, background 0.15s;
}
.board-col-edit:hover { color: #03C497; background: #3a3a3a; }
.board-col-delete:hover { color: #f85149; background: #3a3a3a; }
.board-column-body {
    overflow-y: auto;
    padding: 0.4rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.board-column-body::-webkit-scrollbar { width: 4px; }
.board-column-body::-webkit-scrollbar-thumb { background: #4a4a4a; border-radius: 2px; }

.board-card {
    background: #282828;
    border: 1px solid #4a4a4a;
    border-radius: 6px;
    padding: 0.5rem 0.65rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
    user-select: none;
}
.board-card:hover {
    border-color: #03C497;
    background: #3a3a3a;
}
.board-card.dragging {
    opacity: 0.4;
    transform: rotate(2deg);
}
.board-card-title {
    font-size: 0.78rem;
    color: #F0F0F0;
    margin-bottom: 0.35rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.board-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    font-size: 0.65rem;
    color: #999999;
}
.board-card-status {
    display: inline-block;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    font-size: 0.62rem;
    font-weight: 600;
}
.board-card-status.completed { background: #06503D; color: #03C497; }
.board-card-status.in_progress { background: #2d1b00; color: #d29922; }
.board-card-status.pending { background: #3d3d3d; color: #999999; }
.board-card-status.failed { background: #300; color: #f85149; }
.board-card-status.paused { background: #0a3d30; color: #03C497; }
.board-card-status.awaiting_input { background: #2d2000; color: #d29922; }
.board-card-status.awaiting_approval { background: #2d2000; color: #d29922; }
.board-card-status.awaiting_subtask { background: #0d2030; color: #388bfd; }
.board-card-status.awaiting_jobs { background: #0d2030; color: #388bfd; }
.board-card-status.cancelled { background: #3d3d3d; color: #656565; }
.board-card-auto {
    font-size: 0.58rem;
    color: #656565;
    font-style: italic;
    margin-left: auto;
}
.board-card-date { color: #656565; }
.board-empty {
    color: #656565;
    font-size: 0.72rem;
    text-align: center;
    padding: 1.5rem 0.5rem;
    font-style: italic;
}
/* Inbox column has dashed border */
.board-column.board-inbox {
    border-style: dashed;
}
/* Board filters */
.board-filters {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
}
.board-filter-toggle {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: #999999;
    cursor: pointer;
    white-space: nowrap;
}
.board-filter-toggle input { accent-color: #03C497; cursor: pointer; }
.board-date-input {
    background: #282828;
    border: 1px solid #4a4a4a;
    border-radius: 4px;
    color: #F0F0F0;
    padding: 0.2rem 0.4rem;
    font-size: 0.72rem;
    font-family: inherit;
}
.board-date-input:focus { outline: none; border-color: #03C497; }
.board-filter-btn {
    background: none;
    border: 1px solid #4a4a4a;
    color: #999999;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.7rem;
}
.board-filter-btn:hover { border-color: #999999; color: #F0F0F0; }
.board-auto-btn { font-size: 0.75rem; padding: 0.3rem 0.7rem; }
.board-input-section { flex-shrink: 0; border-top: 1px solid #4a4a4a; }
.board-auto-btn:disabled { opacity: 0.5; cursor: wait; }
.board-auto-btn.running { background: #2d1b00; color: #d29922; }

@media (max-width: 768px) {
    .board-columns {
        padding: 0.5rem;
        gap: 0.5rem;
    }
    .board-column {
        min-width: 240px;
        max-width: 280px;
    }
}

/* ==================== CANVAS ASSISTANT SIDE PANEL ==================== */

.ca-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 33.33vw;
    min-width: 360px;
    background: #282828;
    border-left: 1px solid #4a4a4a;
    display: flex;
    flex-direction: column;
    z-index: 200;
    box-shadow: -4px 0 24px rgba(0,0,0,0.5);
    animation: slideIn 0.18s ease;
}
.ca-drawer.hidden { display: none; }

.ca-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid #4a4a4a;
    background: #333333;
    flex-shrink: 0;
}

.ca-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #F0F0F0;
}

.ca-close {
    background: none;
    border: none;
    color: #999999;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0 0.25rem;
    line-height: 1;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ca-close:hover { color: #F5F5F5; }

.ca-header-btn {
    background: none;
    border: 1px solid #4a4a4a;
    color: #999999;
    cursor: pointer;
    padding: 0.3rem 0.45rem;
    border-radius: 4px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ca-header-btn:first-of-type { margin-left: auto; }
.ca-header-btn:hover { color: #F5F5F5; border-color: #999999; }
.ca-header-btn.active { color: #0D9373; border-color: #0D9373; }

.ca-session-list {
    border-bottom: 1px solid #4a4a4a;
    background: #333333;
    max-height: 280px;
    overflow-y: auto;
    flex-shrink: 0;
}
.ca-session-list.hidden { display: none; }
.ca-session-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.8rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #999999;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid #3d3d3d;
    position: sticky;
    top: 0;
    background: #333333;
    z-index: 1;
}
.ca-session-list-close {
    background: none;
    border: none;
    color: #999999;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
.ca-session-list-close:hover { color: #F5F5F5; }
.ca-session-items { padding: 0.25rem 0; }
.ca-session-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.8rem;
    cursor: pointer;
    font-size: 0.78rem;
    color: #F0F0F0;
    border-left: 3px solid transparent;
    transition: background 0.12s;
}
.ca-session-item:hover { background: #3d3d3d; }
.ca-session-item.active {
    background: #1a2e28;
    border-left-color: #0D9373;
    color: #F5F5F5;
}
.ca-session-item-text {
    flex: 1;
    min-width: 0;
}
.ca-session-item-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}
.ca-session-item-preview {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.7rem;
    color: #999999;
    margin-top: 1px;
}
.ca-session-item-time {
    font-size: 0.68rem;
    color: #656565;
    white-space: nowrap;
    flex-shrink: 0;
}
.ca-session-item-delete {
    background: none;
    border: none;
    color: #656565;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0 0.15rem;
    opacity: 0;
    transition: opacity 0.12s;
}
.ca-session-item:hover .ca-session-item-delete { opacity: 1; }
.ca-session-item-delete:hover { color: #f85149; }
.ca-session-empty {
    color: #656565;
    font-size: 0.78rem;
    text-align: center;
    padding: 1.2rem 0.8rem;
}

.ca-context {
    padding: 0.4rem 1rem;
    border-bottom: 1px solid #3d3d3d;
    background: #333333;
    font-size: 0.75rem;
    color: #999999;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.ca-context-label { opacity: 0.7; }
.ca-context-page {
    color: #0D9373;
    font-weight: 500;
}

.ca-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ca-msg {
    font-size: 0.82rem;
    line-height: 1.55;
    color: #F0F0F0;
    max-width: 100%;
}
.ca-msg.user {
    align-self: flex-end;
    background: #1a2e28;
    border: 1px solid #0D9373;
    border-radius: 12px 12px 4px 12px;
    padding: 0.5rem 0.75rem;
    max-width: 85%;
}
.ca-msg.assistant {
    align-self: flex-start;
}
.ca-msg.assistant .ca-msg-content {
    background: #333333;
    border: 1px solid #4a4a4a;
    border-radius: 4px 12px 12px 12px;
    padding: 0.75rem;
}
.ca-msg.assistant .ca-msg-content h1,
.ca-msg.assistant .ca-msg-content h2,
.ca-msg.assistant .ca-msg-content h3 {
    color: #F5F5F5;
    margin: 0.6rem 0 0.3rem;
    font-size: 0.9rem;
}
.ca-msg.assistant .ca-msg-content h1:first-child,
.ca-msg.assistant .ca-msg-content h2:first-child,
.ca-msg.assistant .ca-msg-content h3:first-child { margin-top: 0; }
.ca-msg.assistant .ca-msg-content p { margin: 0.3rem 0; }
.ca-msg.assistant .ca-msg-content ul,
.ca-msg.assistant .ca-msg-content ol { margin: 0.3rem 0; padding-left: 1.2rem; }
.ca-msg.assistant .ca-msg-content code {
    background: #282828;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    font-size: 0.78rem;
    color: #F5F5F5;
}
.ca-msg.assistant .ca-msg-content pre {
    background: #282828;
    padding: 0.5rem;
    border-radius: 4px;
    overflow-x: auto;
    margin: 0.4rem 0;
}
.ca-msg.assistant .ca-msg-content pre code {
    padding: 0;
    background: none;
}
.ca-msg.assistant .ca-msg-content table {
    border-collapse: collapse;
    width: 100%;
    margin: 0.4rem 0;
    font-size: 0.78rem;
}
.ca-msg.assistant .ca-msg-content th,
.ca-msg.assistant .ca-msg-content td {
    border: 1px solid #4a4a4a;
    padding: 0.3rem 0.5rem;
    text-align: left;
}
.ca-msg.assistant .ca-msg-content th {
    background: #333333;
    font-weight: 600;
}
.ca-msg.assistant .ca-msg-content a { color: #03C497; }
.ca-msg.assistant .ca-msg-content blockquote {
    border-left: 3px solid #0D9373;
    padding-left: 0.6rem;
    margin: 0.4rem 0;
    color: #999999;
}
.ca-msg.thinking {
    color: #999999;
    font-size: 0.75rem;
    font-style: italic;
}
.ca-msg-empty {
    color: #656565;
    text-align: center;
    margin-top: 2rem;
    font-size: 0.85rem;
}

.ca-input-wrap {
    border-top: 1px solid #4a4a4a;
    padding: 0.5rem;
    background: #333333;
    flex-shrink: 0;
}
.ca-form {
    display: flex;
    gap: 0.4rem;
}
.ca-input {
    flex: 1;
    background: #282828;
    border: 1px solid #4a4a4a;
    border-radius: 6px;
    padding: 0.45rem 0.6rem;
    color: #F0F0F0;
    font-size: 0.82rem;
    font-family: inherit;
    resize: none;
    min-height: 36px;
    max-height: 120px;
}
.ca-input:focus {
    outline: none;
    border-color: #0D9373;
    box-shadow: 0 0 0 2px rgba(124,58,237,0.2);
}
.ca-send {
    background: #0D9373;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0 0.8rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    min-height: 36px;
}
.ca-send:hover { background: #06503D; }
.ca-send:disabled { opacity: 0.5; cursor: not-allowed; }

/* Tools toggle row */
.ca-tools-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    padding: 0 0.15rem 0.35rem;
}
.ca-toggle-label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: #999999;
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}
/* Mini toggle switch */
.ca-switch {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 16px;
    flex-shrink: 0;
}
.ca-switch input { opacity: 0; width: 0; height: 0; }
.ca-switch-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #4a4a4a;
    border-radius: 16px;
    transition: background 0.2s;
}
.ca-switch-slider::before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    left: 2px;
    bottom: 2px;
    background: #999999;
    border-radius: 50%;
    transition: transform 0.2s, background 0.2s;
}
.ca-switch input:checked + .ca-switch-slider {
    background: #0D9373;
}
.ca-switch input:checked + .ca-switch-slider::before {
    transform: translateX(14px);
    background: #fff;
}

@media (max-width: 768px) {
    .ca-drawer { width: 100vw; min-width: 0; border-left: none; }
}

/* ==================== LIVE STATUS — Run Mode detail (council / critic) ==================== */
.live-council-section {
    margin-top: 0.75rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.live-council-section h4 {
    margin: 0 0 0.45rem 0;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #c0c8d2;
}
.live-council-plan {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.4rem;
    align-items: baseline;
    padding: 0.3rem 0;
    font-size: 0.78rem;
}
.live-council-plan span { color: #f0f0f0; }
.live-council-plan strong { color: #79c0ff; font-size: 0.85rem; }
.live-council-plan small { color: #8b949e; font-size: 0.7rem; }

.live-council-tally {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.4rem 0 0.5rem;
}
.vote-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: lowercase;
    letter-spacing: 0.02em;
}
.vote-chip.vote-approve { background: rgba(13,147,115,0.25); color: #5bd6b0; }
.vote-chip.vote-revise  { background: rgba(230,168,23,0.25); color: #f0c674; }
.vote-chip.vote-reject  { background: rgba(192,57,43,0.25); color: #f08a7e; }
.vote-chip.vote-round   { background: rgba(121,192,255,0.15); color: #79c0ff; }

.live-council-votes {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.35rem;
}
.live-council-vote {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
    grid-template-areas: "reviewer status round" "reason reason reason";
    gap: 0.35rem 0.6rem;
    padding: 0.4rem 0.55rem;
    border-left: 3px solid #555;
    background: rgba(255,255,255,0.03);
    border-radius: 4px;
    align-items: center;
    font-size: 0.78rem;
}
.live-council-vote.vote-approve { border-left-color: #0D9373; }
.live-council-vote.vote-revise  { border-left-color: #e6a817; }
.live-council-vote.vote-reject  { border-left-color: #c0392b; }
.live-council-vote.vote-pending { border-left-color: #555; opacity: 0.85; }
.live-council-reviewer { grid-area: reviewer; color: #f0f0f0; font-weight: 600; }
.live-council-vote-label { grid-area: status; color: #c0c8d2; font-size: 0.72rem; letter-spacing: 0.05em; }
.live-council-vote.vote-approve .live-council-vote-label { color: #5bd6b0; }
.live-council-vote.vote-revise  .live-council-vote-label { color: #f0c674; }
.live-council-vote.vote-reject  .live-council-vote-label { color: #f08a7e; }
.live-council-round { grid-area: round; color: #8b949e; font-size: 0.7rem; }
.live-council-reason { grid-area: reason; color: #8b949e; font-size: 0.72rem; line-height: 1.35; }

.live-critic-list {
    display: grid;
    gap: 0.35rem;
}
.live-critic-row {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
    grid-template-areas: "runtime status meta" "body body body";
    gap: 0.3rem 0.6rem;
    padding: 0.4rem 0.55rem;
    border-left: 3px solid #555;
    background: rgba(255,255,255,0.03);
    border-radius: 4px;
    align-items: center;
    font-size: 0.78rem;
}
.live-critic-row.status-started   { border-left-color: #79c0ff; }
.live-critic-row.status-completed { border-left-color: #0D9373; }
.live-critic-row.status-failed    { border-left-color: #c0392b; }
.live-critic-runtime { grid-area: runtime; color: #f0f0f0; font-weight: 600; }
.live-critic-status  { grid-area: status; color: #c0c8d2; font-size: 0.72rem; letter-spacing: 0.05em; }
.live-critic-row.status-started   .live-critic-status { color: #79c0ff; }
.live-critic-row.status-completed .live-critic-status { color: #5bd6b0; }
.live-critic-row.status-failed    .live-critic-status { color: #f08a7e; }
.live-critic-meta    { grid-area: meta; color: #8b949e; font-size: 0.7rem; }
.live-critic-summary { grid-area: body; color: #c0c8d2; font-size: 0.72rem; line-height: 1.35; }
.live-critic-error   { grid-area: body; color: #f08a7e; font-size: 0.72rem; line-height: 1.35; }

/* ==================== DESKTOP: ≥769px ==================== */

/* ---- Terminal (claude-tty live screen) tab ---- */
#canvas-panel-tty {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}
.tty-toolbar {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--border-color, #2a2a2a);
    background: rgba(0,0,0,0.25);
    font-size: 0.78rem;
    color: #c0c8d2;
}
.tty-toolbar .tty-spacer { flex: 1 1 auto; }
.tty-inputbar {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    padding: 0.35rem 0.6rem;
    border-bottom: 1px solid var(--border-color, #2a2a2a);
    background: rgba(0,0,0,0.18);
    flex-wrap: wrap;
}
.tty-input {
    flex: 1 1 220px;
    min-width: 140px;
    max-width: 420px;
    height: 28px;
    box-sizing: border-box;
    background: #111;
    color: #e6edf3;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 0.25rem 0.45rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.74rem;
}
.tty-input:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.tty-input-status {
    min-width: 54px;
    color: #8b949e;
    font-size: 0.72rem;
}
.tty-input-status.error { color: #f85149; }
.tty-key-btn {
    min-width: 32px;
    padding-left: 0.45rem;
    padding-right: 0.45rem;
}
.tty-status {
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: #2a2a2a;
    color: #8b949e;
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.tty-status.live      { background: #0D9373; color: #fff; }
.tty-status.ended     { background: #555;    color: #ddd; }
.tty-status.paused    { background: #d18a16; color: #fff; }
.tty-status.error     { background: #c0392b; color: #fff; }
.tty-status.empty     { background: #333;    color: #888; }
.tty-geom, .tty-agent { color: #8b949e; font-size: 0.72rem; }
.tty-toggle { display: inline-flex; align-items: center; gap: 0.25rem; cursor: pointer; }
.tty-btn {
    background: #1f1f1f;
    color: #ddd;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 0.2rem 0.6rem;
    font-size: 0.72rem;
    cursor: pointer;
}
.tty-btn:hover { background: #2a2a2a; }
.tty-live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 0.3rem;
    border-radius: 50%;
    background: #555;
    vertical-align: middle;
}
.tty-live-dot.live { background: #0D9373; box-shadow: 0 0 6px #0D9373; animation: tty-pulse 1.6s infinite; }
@keyframes tty-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}
.tty-screen {
    flex: 1 1 auto;
    min-height: 320px;
    background: #000;
    padding: 4px;
    overflow: hidden;
}
.tty-screen .xterm,
.tty-screen .xterm-viewport,
.tty-screen .xterm-screen {
    height: 100% !important;
    width: 100% !important;
}
.tty-empty {
    padding: 1rem;
    color: #8b949e;
    font-style: italic;
}