:root {
    /* 1. Structural Color Palette (:root) - Elevation-based Design */
    --bg-left-nav: #161618;
    --bg-mid-tree: #0C0C0D;
    --bg-main-chat: #000000;
    --text-primary: #EDEDED;
    --text-secondary: #888888;

    --bg-base: var(--bg-main-chat);
    --bg-panel: var(--bg-mid-tree);
    --bg-surface: #141414;
    --bg-hover: #1F1F1F;
    --border-subtle: none;
    --text-muted: #555555;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* Backward compatibility aliases */
    --primary-bg: var(--bg-main-chat);
    --secondary-bg: var(--bg-mid-tree);
    --tertiary-bg: var(--bg-surface);
    --surface-hover: var(--bg-hover);
    --text-color: var(--text-primary);
    --text-disabled: var(--text-muted);
    --text-tertiary: var(--text-muted);
    --accent-color: #FFFFFF;
    --accent-hover: #EDEDED;
}

* {
    box-sizing: border-box;
}

body {
    background-color: var(--bg-base);
    color: var(--text-primary);
    font-family: var(--font-family, 'Inter', sans-serif);
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

header {
    padding: 0.75rem 1rem;
    background-color: var(--secondary-bg);
    border-bottom: 2px solid var(--accent-color);
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

#mobile-toggle {
    display: block;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--accent-color);
    position: absolute;
    left: 0;
    padding: 0.5rem;
}

header h1 {
    margin: 0;
    font-size: 1.25rem;
    letter-spacing: -0.025em;
}

main {
    display: flex;
    flex: 1;
    overflow: hidden;
}

chat-interface {
    flex: 1;
    border-right: 1px solid var(--secondary-bg);
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

#messages {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-right: 0.5rem;
}

.message {
    max-width: 85%;
    min-width: 0;
    padding: 0.8rem 1rem;
    border-radius: 12px;
    line-height: 1.5;
    font-size: 0.95rem;
    overflow-wrap: anywhere;
}

.message-content {
    flex: 1;
    min-width: 0;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    font-size: 0.95rem;
    line-height: 1.5;
    word-wrap: break-word;
    /* Ensure single long words wrap */
    overflow-wrap: break-word;
    max-width: 100%;
    /* Keep normal prose inside the bubble while allowing nested scroll containers. */
    overflow-x: clip;
    word-break: break-word;
    overflow-wrap: anywhere;
    /* Prevent horizontal scroll on the outer bubble */
}

/* Ensure markdown content within bubble is constrained */
.message-content p,
.message-content pre,
.message-content table {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Markdown elements responsiveness and style */
.message-content pre {
    background-color: var(--secondary-bg);
    min-width: 0;
    max-width: 100%;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    box-sizing: border-box;
    padding: 0.75rem;
    border-radius: 6px;
    overflow-x: auto;
    margin: 0.5rem 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.message.user .message-content pre {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.message-content table {
    display: table;
    /* Reset to table to maintain internal structure */
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0;
    table-layout: fixed;
}

/* Tables need a container to scroll properly if wide */
/* Note: We will add wrapping logic to the JS component if needed */
.message-content .table-container {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    margin: 0.5rem 0;
    -webkit-overflow-scrolling: touch;
}

.message-content th,
.message-content td {
    border: 1px solid var(--secondary-bg);
    padding: 0.5rem;
    text-align: left;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.message-content blockquote {
    border-left: 4px solid var(--accent-color);
    margin: 0.5rem 0;
    padding-left: 1rem;
    color: var(--text-color);
    opacity: 0.8;
}

.message.agent {
    align-self: flex-start;
    background-color: var(--chat-bubble-agent);
    border-bottom-left-radius: 4px;
}

.message.user {
    align-self: flex-end;
    background-color: var(--chat-bubble-user);
    color: var(--text-color);
    border-bottom-right-radius: 4px;
    font-weight: 500;
}

.message.blocking_question {
    border: 2px solid var(--accent-color);
    box-shadow: 0 0 15px rgba(45, 212, 191, 0.3);
}

#chat-form {
    display: flex;
    gap: 0px;
    background: var(--secondary-bg);
    padding: 0px;
    border-radius: 2px;
}

#chat-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-color);
    padding: 0.6rem;
    outline: none;
}

#chat-form button {
    background: var(--accent-color);
    color: var(--primary-bg);
    border: none;
    padding: 0.6rem 1.5rem;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: opacity 0.2s;
}

#chat-form button:hover {
    opacity: 0.9;
}

tree-visualizer {
    width: 350px;
    padding: 0.5rem;
    overflow-y: auto;
    background-color: var(--primary-bg);
    border-right: 1px solid var(--secondary-bg);
    z-index: 100;
    transition: transform 0.3s ease-in-out;
}

@media (max-width: 768px) {
    
    .header-container {
        justify-content: space-between;
        padding: 0 0.5rem;
    }

    #mobile-toggle {
        display: block;
    }

    header h1 {
        font-size: 1rem;
        flex-grow: 1;
        text-align: center;
        padding: 0 0.5rem;
        white-space: normal;
        line-height: 1.2;
        word-wrap: break-word;
        overflow-wrap: break-word;
        min-width: 0;
        hyphens: auto;
    }

    user-profile {
        position: relative !important;
        right: auto !important;
        top: auto !important;
    }

     #sidebar-toggle:checked~main tree-visualizer {
        transform: translateX(-100%) !important;
        width: 0 !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: none !important;
        overflow: hidden;
    }
  
    tree-visualizer {
        position: fixed;
        flex: 0 0 50%;
        width: 80% !important;
        height: 90%;
        transform: none;
        box-shadow: none;
        padding-top: 0;
        border-bottom: 2px solid var(--accent-color);
        display: flex;
        flex-direction: column;
    }

    .sidebar-header {
        flex-shrink: 0;
        padding: 0.75rem 1rem !important;
        gap: 1rem;
    }

    #agent-tree-container {
        flex: 1;
        overflow-y: auto;
        position: relative;
        padding: 0.5rem;
        padding-bottom: 2rem;
        /* Fix bottom text cutoff */
    }

    chat-interface {
        border-right: none;
        padding: 0.25rem;
        width: 100%;
        min-width: 0;
        position: relative;
    }

    #sidebar-resizer {
        display: none;
    }
}

.agent-node-wrapper {
    margin-top: 0.25rem;
}

.agent-node {
    padding-top: 0.5rem;
    padding-bottom: 24px;
    padding-right: 0.6rem;
    background-color: var(--secondary-bg);
    border-radius: 4px;
    position: relative;
    font-size: 0.8rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--chat-bubble-agent);
    transition: transform 0.1s ease;
    margin-bottom: 0.25rem;
    min-height: max-content;
}

.agent-node:hover {
    transform: translateX(2px);
    border-color: var(--accent-color);
}

.toggle-icon {
    user-select: none;
    transition: transform 0.2s ease;
}


.children-container {
    border-left: 1px solid rgba(var(--accent-color-rgb), 0.2);
    margin-left: 20px;
}

/* Improved Connecting Lines */
.agent-node-wrapper[data-depth]:not([data-depth="0"])>.agent-node::before {
    content: "";
    position: absolute;
    left: 5px;
    top: -15px;
    width: 1px;
    height: calc(100% + 15px);
    border-left: 1px solid var(--accent-color);
    opacity: 0.4;
}

.agent-node-wrapper[data-depth]:not([data-depth="0"])>.agent-node::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 50%;
    width: 10px;
    height: 1px;
    border-top: 1px solid var(--accent-color);
    opacity: 0.4;
}

.node-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
}

.node-path {
    font-family: ui-monospace, monospace;
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--accent-color);
}

.node-status {
    font-size: 1.1rem;
}

.budget-container {
    height: 6px;
    background-color: var(--primary-bg);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.budget-bar {
    height: 100%;
    background-color: var(--accent-color);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.node-info {
    font-size: 0.7rem;
    color: #94a3b8;
}

.node-info div {
    margin-bottom: 0.1rem;
}

.current-step {
    margin-top: 0.2rem;
    font-style: italic;
    color: var(--text-color);
}

.current-plan {
    margin-top: 0.25rem;
    font-family: ui-monospace, monospace;
    background: rgba(0, 0, 0, 0.2);
    padding: 0.25rem;
    border-radius: 4px;
}

/* Login Page Styles */
.login-page {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100vh !important;
}

.login-container {
    text-align: center;
    padding: 3rem;
    background-color: var(--secondary-bg);
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(45, 212, 191, 0.1);
    max-width: 400px;
    width: 90%;
    animation: fadeIn 0.6s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-container h1 {
    font-size: 6rem;
    margin: 0;
    line-height: 1;
    background: linear-gradient(to bottom, var(--accent-color), #5eead4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 15px rgba(45, 212, 191, 0.3));
}

.subtitle {
    font-size: 1rem;
    color: var(--accent-color);
    letter-spacing: 0.5rem;
    text-transform: uppercase;
    margin: 0 0 3rem 0;
    opacity: 0.8;
}

.login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--accent-color);
    color: var(--primary-bg);
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    box-sizing: border-box;
    gap: 10px;
}

.login-btn:hover {
    background-color: var(--accent-hover);
    transform: scale(1.02);
    box-shadow: 0 0 20px rgba(45, 212, 191, 0.3);
}

.google-icon {
    width: 18px;
    height: 18px;
}

.plan-container {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dotted rgba(255, 255, 255, 0.1);
    font-size: 0.85rem;
}

.plan-step {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.step-status {
    font-size: 0.75rem;
}

.status-done {
    color: #4ade80;
}

.status-in_progress {
    color: #60a5fa;
}

.status-not_started {
    color: #94a3b8;
}

.status-blocked {
    color: #f87171;
}

.comment {
    font-style: italic;
    opacity: 0.7;
    margin-left: 20px;
    font-size: 0.75rem;
    margin-bottom: 4px;
}

.resizer {
    width: 4px;
    cursor: col-resize;
    background-color: var(--secondary-bg);
    transition: background-color 0.2s;
    flex-shrink: 0;
    position: relative;
}

.resizer::after {
    content: '...';
    position: absolute;
    top: 50%;
    left: 50%;
    color: var(--accent-color);
    font-size: 1rem;
    opacity: 0.3;
    pointer-events: none;
}

.resizer:hover::after {
    opacity: 0.8;
}

.resizer:hover {
    background-color: var(--accent-color);
}

#close-sidebar {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 1.25rem;
    cursor: pointer;
    z-index: 101;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.05);
}

#close-sidebar:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

@media (min-width: 769px) {
    #sidebar-toggle:checked~main tree-visualizer {
        transform: translateX(-100%) !important;
        width: 0 !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: none !important;
        overflow: hidden;
    }

    #sidebar-toggle:checked~main tree-visualizer+.resizer {
        display: none;
    }
}



/* Wide Desktop Optimization */
@media (min-width: 1200px) {
    tree-visualizer {
        width: 450px;
    }
}

@media (min-width: 1800px) {
    tree-visualizer {
        width: 600px !important;
    }

    .agent-node {
        padding: 0.8rem 1.2rem;
    }
}

/* --- Markdown Polishing --- */
.message-content blockquote {
    border-left: 4px solid var(--accent-color) !important;
    margin: 0.5rem 0;
    padding: 0.25rem 0.75rem;
    background-color: rgba(255, 255, 255, 0.05);
    font-style: italic;
}

.message-content ul,
.message-content ol {
    margin: 0.5rem 0;
    padding-left: 1.6rem;
}

.message-content li {
    margin-bottom: 0.3rem;
}

.message-content pre {
    margin: 0.75rem 0;
    border-radius: 6px;
    overflow-x: auto;
    /* Already styled by highlight.js theme, but ensure chat bubble constraints */
    max-width: 100%;
}

.message-content code {
    font-family: 'Fira Code', 'Courier New', monospace;
    font-size: 0.85em;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 0.15rem 0.3rem;
    border-radius: 4px;
}

.message-content pre code {
    background-color: transparent !important;
    display: block;
    max-width: 100%;
    min-width: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    padding: 0;
}

.message.blocking-question {
    border: 2px solid var(--accent-color);
    background-color: rgba(var(--accent-color-rgb), 0.1);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--accent-color-rgb), 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(var(--accent-color-rgb), 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--accent-color-rgb), 0);
    }
}

.agent-node.active {
    background-color: var(--secondary-bg);
    border-left: 4px solid var(--accent-color);
    border-bottom: 1px solid var(--accent-color);
    border-top: 1px solid var(--accent-color);
    box-shadow: -6px 2px 15px 0px #747474;
    border-bottom-right-radius: 0px;
}

/* Gen3 Tree Improvements */
.agent-node-wrapper {
    margin-top: 0.25rem;
}

.agent-node {
    padding-top: 0.5rem;
    padding-bottom: 24px;
    padding-right: 0.6rem;
    background-color: var(--secondary-bg);
    border-radius: 4px;
    position: relative;
    font-size: 0.8rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--chat-bubble-agent);
    transition: transform 0.1s ease;
    margin-bottom: 0.25rem;
    min-height: max-content;
}

.agent-node:hover {
    transform: translateX(2px);
    border-color: var(--accent-color);
}



.agent-node-wrapper.collapsed .budget-container,
.agent-node-wrapper.collapsed .node-details,
.agent-node-wrapper.collapsed .plan-container {
    display: none;
}

/* Improved Connecting Lines */
.agent-node-wrapper[data-depth]:not([data-depth="0"])>.agent-node::before {
    content: "";
    position: absolute;
    left: 5px;
    top: -15px;
    width: 1px;
    height: calc(100% + 15px);
    border-left: 1px solid var(--accent-color);
    opacity: 0.4;
}

.agent-node-wrapper[data-depth]:not([data-depth="0"])>.agent-node::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 50%;
    width: 10px;
    height: 1px;
    border-top: 1px solid var(--accent-color);
    opacity: 0.4;
}

/* --- System & Initialization Messages --- */
.message.system {
    align-self: center; /* Center it to distinguish from User/Agent left-right flow */
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(45, 212, 191, 0.4); /* Subtle accent border */
    color: var(--text-color);
    width: 95%; /* Make it stretch a bit wider as a banner */
    margin: 1rem 0;
    box-shadow: none;
}

.message.system .message-content {
    opacity: 0.85; /* Slight fade so it doesn't shout at you */
    font-size: 0.9rem;
}

.message.system hr {
    border: 0;
    height: 1px;
    background: rgba(45, 212, 191, 0.2);
    margin: 0.75rem 0;
}

/* --- Skippy's Tool Call Telemetry --- */
.message.tool-call-msg {
    background-color: transparent;
    border: none;
    padding: 0;
    width: 90%;
    margin: 0.5rem auto;
}

details.tool-details {
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

details.tool-details[open] {
    border-color: rgba(45, 212, 191, 0.4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

details.tool-details summary {
    padding: 0.6rem 1rem;
    background-color: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    font-size: 0.85rem;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
    outline: none;
}

details.tool-details summary:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.tool-step {
    color: var(--accent-color);
    font-family: ui-monospace, monospace;
    font-size: 0.75rem;
    margin-left: auto; /* Pushes the step ID to the right side */
}

.tool-body {
    padding: 1rem;
    background-color: var(--primary-bg);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.85rem;
}

.tool-section-title {
    font-weight: 600;
    color: var(--accent-color);
    margin-bottom: 0.4rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

pre.tool-args {
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 0.5rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    white-space: pre-wrap;
    word-break: break-all;
    font-size: 0.8em;
}

.tool-result {
    max-height: 300px;
    overflow-y: auto;
    background-color: rgba(0, 0, 0, 0.15);
    padding: 0.75rem;
    border-radius: 4px;
}

.image-artifacts {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.image-artifact {
    margin: 0;
    border: 1px solid color-mix(in srgb, var(--border-color) 58%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--secondary-bg) 72%, var(--primary-bg));
    overflow: hidden;
}

.image-artifact img {
    display: block;
    width: 100%;
    max-height: 28rem;
    object-fit: contain;
    background: rgba(0, 0, 0, 0.24);
}

.image-artifact figcaption {
    padding: 0.45rem 0.65rem;
    color: var(--muted-text);
    font-size: 0.78rem;
    word-break: break-word;
}

/* --- Skippy's Agent Decision Telemetry --- */
.decision-snippet {
    color: var(--text-color);
    opacity: 0.7;
    font-size: 0.8rem;
    font-style: italic;
    margin-left: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50%;
}

.decision-thoughts-full {
    background-color: rgba(0, 0, 0, 0.15);
    padding: 0.75rem;
    border-radius: 4px;
    border-left: 3px solid rgba(255, 255, 255, 0.2);
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--text-color);
}

/* Color Code the different Decision Types */
.decision-completetask details.decision-details[open] {
    border-color: rgba(74, 222, 128, 0.5); /* Green */
    box-shadow: 0 4px 12px rgba(74, 222, 128, 0.1);
}
.decision-manageswarm details.decision-details[open] {
    border-color: rgba(192, 132, 252, 0.5); /* Purple/Magenta */
    box-shadow: 0 4px 12px rgba(192, 132, 252, 0.1);
}
.decision-escalateblocker details.decision-details[open] {
    border-color: rgba(248, 113, 113, 0.5); /* Red */
    box-shadow: 0 4px 12px rgba(248, 113, 113, 0.1);
}
.decision-acknowledgeevent details.decision-details[open] {
    border-color: rgba(148, 163, 184, 0.5); /* Slate/Gray */
}

/* --- Skippy's Wakeup Call Telemetry --- */
details.wakeup-details[open] {
    border-color: rgba(250, 204, 21, 0.6); /* Golden/Yellow morning sun */
    box-shadow: 0 4px 12px rgba(250, 204, 21, 0.15);
}


/* --- Skippy's Neural Tap (Raw Model Thinking) --- */
details.thinking-details[open] {
    border-color: rgba(96, 165, 250, 0.4); /* Electric Blue */
    box-shadow: 0 4px 12px rgba(96, 165, 250, 0.1);
}

details.thinking-details summary {
    background-color: rgba(96, 165, 250, 0.05);
}

.thinking-msg .tool-result {
    border-left: 3px solid rgba(96, 165, 250, 0.4);
}

/* ==========================================================================
   🌟 SKIPPY'S PANOPTICON FILTER BAR
   ========================================================================== */

#skippy-filters {
    display: flex;
    gap: 12px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(45, 212, 191, 0.2);
    flex-wrap: wrap;
    align-items: center;
    flex-shrink: 0; /* Prevents it from crushing when chat gets full */
}

.panopticon-filter-summary {
    display: none;
}

.panopticon-filter-controls {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.filter-title {
    font-size: 0.75rem;
    color: var(--accent-color);
    font-weight: 700;
    margin-right: 8px;
    letter-spacing: 0.05em;
}

#skippy-filters label {
    font-size: 0.8rem;
    color: var(--text-color);
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0.7;
    transition: all 0.2s ease;
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid transparent;
}

#skippy-filters label:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
}

/* Highlight the label when the checkbox is checked */
#skippy-filters label:has(input:checked) {
    opacity: 1;
    border-color: rgba(45, 212, 191, 0.3);
}

#skippy-filters input[type="checkbox"] {
    cursor: pointer;
    accent-color: var(--accent-color); /* Matches your UI theme natively */
}

/* --- THE DISAPPEARING ACT (CSS Toggle Logic) --- */
#messages.hide-decisions .decision-msg { display: none !important; }
#messages.hide-tools .tool-call-msg { display: none !important; }
#messages.hide-thinking .thinking-msg { display: none !important; }
#messages.hide-wakeups .wakeup-msg { display: none !important; }
#messages.hide-init .message.agent_init { display: none !important; } /* Targets the init banner */

/* --- Skippy's Infrastructure Siren --- */
details.alert-details {
    background-color: rgba(239, 68, 68, 0.1);
}

details.alert-details[open] {
    border-color: rgba(239, 68, 68, 0.8); /* Strong Red */
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.25);
}

details.alert-details summary {
    background-color: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
}

#messages.hide-alerts .alert-msg { display: none !important; }


/* --- Skippy's Decision Formatting --- */
.decision-section { margin-top: 12px; font-size: 0.85rem; color: var(--text-color); }
.decision-section ul { margin: 4px 0 0 20px; padding: 0; }
.decision-section li { margin-bottom: 6px; }
.decision-box {
    padding: 8px 12px; 
    margin-top: 6px; 
    border-radius: 4px; 
    background: rgba(0, 0, 0, 0.2); 
    border-left: 3px solid;
}
.success-box { border-color: rgba(74, 222, 128, 0.6); }
.warning-box { border-color: rgba(250, 204, 21, 0.6); }
.error-box { border-color: rgba(248, 113, 113, 0.6); }

/* Projects / Tasks top-level navigation */
project-task-nav {
    flex: 1;
    min-width: 0;
    max-width: min(720px, calc(100vw - 14rem));
    display: flex;
    justify-content: center;
}

.project-task-nav__trigger,
.project-task-nav__panel-heading button,
.project-task-nav__row-actions button,
.project-task-nav__close {
    font: inherit;
}

.project-task-nav__trigger {
    min-height: 44px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.1rem;
    padding: 0.35rem 0.85rem;
    border: 1px solid rgba(45, 212, 191, 0.45);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.72);
    color: var(--text-color);
    cursor: pointer;
    text-align: left;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.project-task-nav__trigger:hover,
.project-task-nav__trigger:focus-visible {
    border-color: var(--accent-color);
    outline: 2px solid rgba(45, 212, 191, 0.35);
    outline-offset: 2px;
}

.project-task-nav__eyebrow {
    margin: 0;
    color: var(--accent-color);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.project-task-nav__crumb-line {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    max-width: 100%;
}

.project-task-nav__menu-glyph {
    display: none;
    flex: 0 0 auto;
    color: var(--accent-color);
    font-size: 1rem;
    line-height: 1;
}

.project-task-nav__crumb {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    max-width: 100%;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-task-nav__crumb strong {
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-task-nav__scrim {
    position: fixed;
    inset: 0;
    z-index: 1490;
    background: rgba(2, 6, 23, 0.58);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.project-task-nav__scrim.is-open {
    opacity: 1;
    pointer-events: auto;
}

.project-task-nav__drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1500;
    width: min(760px, 92vw);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: var(--bg-left-nav);
    border-right: 1px solid #222222;
    box-shadow: 22px 0 60px rgba(0, 0, 0, 0.42);
    transform: translateX(-105%);
    transition: transform 0.2s ease;
    overflow-y: auto;
}

.project-task-nav__drawer.is-open {
    transform: translateX(0);
}

.project-task-nav__drawer-header,
.project-task-nav__panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.project-task-nav__drawer-header h2,
.project-task-nav__panel-heading h3 {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.project-task-nav__drawer-header > div,
.project-task-nav__panel-heading {
    min-width: 0;
}

.project-task-nav__close,
.project-task-nav__panel-heading button,
.project-task-nav__row-actions button {
    min-height: 40px;
    border: 1px solid rgba(45, 212, 191, 0.35);
    border-radius: 8px;
    background: rgba(45, 212, 191, 0.11);
    color: var(--text-color);
    cursor: pointer;
}

.project-task-nav__close {
    min-width: 44px;
    font-size: 1.5rem;
}

.project-task-nav__panel-heading button,
.project-task-nav__row-actions button {
    padding: 0.4rem 0.65rem;
    font-size: 0.82rem;
    font-weight: 700;
}

.project-task-nav__close:hover,
.project-task-nav__panel-heading button:hover,
.project-task-nav__row-actions button:hover,
.project-task-nav__close:focus-visible,
.project-task-nav__panel-heading button:focus-visible,
.project-task-nav__row-actions button:focus-visible {
    border-color: var(--accent-color);
    outline: 2px solid rgba(45, 212, 191, 0.35);
    outline-offset: 2px;
}

.project-task-nav__icon-action {
    width: 2.25rem;
    min-width: 2.25rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(226, 232, 240, 0.78);
    opacity: 0.72;
}

.project-task-nav__item:not(:hover):not(:focus-within):not(.is-active) .project-task-nav__icon-action {
    opacity: 0.42;
}

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

.project-task-nav__row-actions button.danger {
    border-color: rgba(248, 113, 113, 0.38);
    background: rgba(127, 29, 29, 0.22);
    color: #fecaca;
}

.project-task-nav__columns {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 1rem;
}

.project-task-nav__panel {
    min-width: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.project-task-nav__list {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.project-task-nav__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: stretch;
    padding: 0.35rem;
    border-radius: 12px;
    border: 1px solid transparent;
    background: rgba(30, 41, 59, 0.42);
    transition: background 0.16s ease, border-color 0.16s ease;
}

.project-task-nav__item:hover,
.project-task-nav__item:focus-within {
    background: rgba(30, 41, 59, 0.68);
    border-color: rgba(148, 163, 184, 0.22);
}

.project-task-nav__item.is-active {
    border-color: color-mix(in srgb, var(--accent-color) 18%, transparent);
    box-shadow: none;
    background: color-mix(in srgb, var(--accent-color) 9%, var(--secondary-bg));
}

.project-task-nav__select {
    min-width: 0;
    min-height: 44px;
    padding: 0.45rem 0.55rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-color);
    cursor: pointer;
    text-align: left;
}

.project-task-nav__select:hover,
.project-task-nav__select:focus-visible {
    background: rgba(45, 212, 191, 0.12);
    outline: 2px solid rgba(45, 212, 191, 0.35);
    outline-offset: 2px;
}

.project-task-nav__select span,
.project-task-nav__select small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-task-nav__select span {
    font-weight: 800;
}

.project-task-nav__select small,
.project-task-nav__empty,
.project-task-nav__loading {
    color: #cbd5e1;
}

.project-task-nav__empty,
.project-task-nav__loading {
    padding: 0.75rem;
    border: 1px dashed rgba(148, 163, 184, 0.28);
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.36);
    line-height: 1.4;
}

.project-task-nav__row-actions {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}

.project-task-nav__error {
    margin: 0;
    padding: 0.65rem 0.85rem;
    border: 1px solid rgba(248, 113, 113, 0.5);
    border-radius: 10px;
    background: rgba(127, 29, 29, 0.35);
    color: #fecaca;
}

@media (max-width: 780px) {
    header {
        padding: 0.55rem 0.65rem;
    }

    .header-container {
        justify-content: flex-start;
        gap: 0.5rem;
        padding-right: 3.75rem;
    }

    .header-container h1 {
        flex: 0 0 auto;
        font-size: 1.3rem;
        padding: 0;
        text-align: left;
    }

    project-task-nav {
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
        justify-content: flex-start;
    }

    .project-task-nav__trigger {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        padding-inline: 0.65rem;
    }

    .project-task-nav__crumb {
        min-width: 0;
        max-width: 100%;
        font-size: 0.8rem;
    }

    .project-task-nav__eyebrow {
        font-size: 0.6rem;
    }

    .project-task-nav__drawer {
        top: auto;
        right: 0;
        left: 0;
        width: 100vw;
        max-width: 100vw;
        overflow-x: hidden;
        max-height: 88vh;
        border-right: 0;
        border-top: 1px solid rgba(45, 212, 191, 0.28);
        border-radius: 18px 18px 0 0;
        transform: translateY(105%);
    }

    .project-task-nav__drawer.is-open {
        transform: translateY(0);
    }

    .project-task-nav__drawer-header,
    .project-task-nav__panel-heading,
    .project-task-nav__select,
    .project-task-nav__crumb {
        min-width: 0;
    }

    .project-task-nav__drawer-header h2,
    .project-task-nav__panel-heading h3,
    .project-task-nav__select span,
    .project-task-nav__select small,
    .project-task-nav__crumb strong {
        overflow-wrap: anywhere;
    }

    .project-task-nav__columns {
        grid-template-columns: 1fr;
    }

    .project-task-nav__item {
        grid-template-columns: 1fr;
    }

    .project-task-nav__row-actions {
        justify-content: stretch;
    }

    .project-task-nav__row-actions button {
        flex: 1;
        width: auto;
    }

    .project-task-nav__icon-action {
        opacity: 0.9;
    }
}

@media (max-width: 768px) and (max-height: 480px) {
    main {
        overflow: hidden;
    }

    tree-visualizer {
        position: relative;
        flex: 0 0 min(42vw, 280px);
        width: min(42vw, 280px) !important;
        height: auto;
        min-width: 0;
        max-height: none;
        transform: none;
        border-bottom: 0;
    }

    chat-interface {
        min-width: 0;
    }
}

@media (max-width: 420px) {
    .project-task-nav__trigger {
        max-width: calc(100vw - 8.25rem);
    }

    .project-task-nav__crumb strong {
        max-width: 6.5rem;
    }
}

/* Projects / Tasks IA refactor: nested tree, settings pages, and mobile drill-down */
.project-task-nav__crumb-shell {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 0.35rem;
    min-width: 0;
    width: min(100%, 34rem);
}

.project-task-nav__crumb-shell::before {
    content: "";
    width: 2px;
    margin-block: 0.35rem;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--accent-color), rgba(var(--accent-color-rgb), 0));
    opacity: 0.62;
}

.project-task-nav__header-settings,
.project-task-nav__settings-action {
    border: 1px solid rgba(var(--accent-color-rgb), 0.28);
    border-radius: 999px;
    background: rgba(var(--accent-color-rgb), 0.08);
}

.project-task-nav__header-settings {
    min-height: 100%;
}

.project-task-nav__agent-context {
    display: block;
    max-width: 100%;
    color: rgba(226, 232, 240, 0.68);
    font-size: 0.72rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-task-nav__context-summary {
    min-width: 0;
    align-self: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.18rem;
    padding: 0.28rem 0.55rem;
    border-radius: 14px;
    background: color-mix(in srgb, var(--secondary-bg) 46%, transparent);
}

.project-task-nav__breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.28rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--text-color);
    font-size: 0.78rem;
    font-weight: 700;
}

.project-task-nav__breadcrumb li {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-task-nav__breadcrumb li:not(:last-child)::after {
    content: "/";
    margin-left: 0.28rem;
    color: rgba(226, 232, 240, 0.42);
    font-weight: 500;
}

.project-task-nav__context-meta {
    display: flex;
    gap: 0.45rem;
    min-width: 0;
    color: rgba(226, 232, 240, 0.64);
    font-size: 0.68rem;
}

.project-task-nav__context-meta span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-task-nav__tree-layout {
    min-width: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.project-task-nav__settings-view {
    min-width: 0;
    padding: 0.85rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.48);
}

.project-task-nav__panel-heading p,
.project-task-nav__settings-view p {
    margin: 0.2rem 0 0;
    color: rgba(226, 232, 240, 0.72);
    line-height: 1.45;
}

.project-task-nav__tree,
.project-task-nav__task-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.project-task-nav__tree {
    margin-top: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.project-task-nav__task-list {
    margin: 0.2rem 0 0.35rem 1.2rem;
    padding-left: 0.85rem;
    border-left: 1px solid rgba(var(--accent-color-rgb), 0.26);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.project-task-nav__tree-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.45rem;
    align-items: center;
}

.project-task-nav__project-node,
.project-task-nav__task-node,
.project-task-nav__add-task {
    display: block;
    padding: 0.25rem;
    border: 0;
    border-radius: 12px;
    background: transparent;
}

.project-task-nav__project-node:hover,
.project-task-nav__project-node:focus-within,
.project-task-nav__task-node:hover,
.project-task-nav__task-node:focus-within {
    background: rgba(30, 41, 59, 0.42);
}

.project-task-nav__project-node.is-active,
.project-task-nav__task-node.is-active {
    box-shadow: none;
    background: color-mix(in srgb, var(--accent-color) 8%, transparent);
}

.project-task-nav__add-inline,
.project-task-nav__back,
.project-task-nav__primary-action,
.project-task-nav__danger-action {
    min-height: 42px;
    border-radius: 10px;
    border: 1px solid rgba(var(--accent-color-rgb), 0.32);
    background: rgba(var(--accent-color-rgb), 0.1);
    color: var(--text-color);
    cursor: pointer;
    font: inherit;
    font-weight: 800;
}

.project-task-nav__add-inline {
    width: 100%;
    padding: 0.45rem 0.65rem;
    text-align: left;
    color: rgba(226, 232, 240, 0.82);
}

.project-task-nav__settings-view {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.project-task-nav__settings-view h3 {
    margin: 0;
    overflow-wrap: anywhere;
}

.project-task-nav__back {
    align-self: flex-start;
    padding: 0.45rem 0.75rem;
}

.project-task-nav__field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    color: rgba(226, 232, 240, 0.78);
    font-weight: 800;
}

.project-task-nav__field input {
    min-height: 46px;
    border: 1px solid rgba(var(--accent-color-rgb), 0.28);
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.62);
    color: var(--text-color);
    padding: 0.65rem 0.8rem;
    font: inherit;
}

.project-task-nav__settings-actions {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.project-task-nav__primary-action,
.project-task-nav__danger-action {
    padding: 0.55rem 0.9rem;
}

.project-task-nav__danger-action {
    border-color: rgba(248, 113, 113, 0.46);
    background: rgba(127, 29, 29, 0.24);
    color: #fecaca;
}

@media (max-width: 780px) {
    .project-task-nav__crumb-shell {
        grid-template-columns: minmax(0, 1fr) auto;
        width: 100%;
    }

    .project-task-nav__crumb-shell::before,
    .project-task-nav__context-summary {
        display: none;
    }

    .project-task-nav__drawer {
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: none;
        border-radius: 0;
        border-top: 0;
        border-right: 0;
        transform: translateX(-105%);
    }

    .project-task-nav__drawer.is-open {
        transform: translateX(0);
    }

    .project-task-nav__tree-layout,
    .project-task-nav__settings-view {
        min-height: calc(100vh - 7rem);
        border-radius: 14px;
    }

    .project-task-nav__task-list {
        margin-left: 0.35rem;
        padding-left: 0.65rem;
    }

    .project-task-nav__tree-row,
    .project-task-nav__settings-actions {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .project-task-nav__settings-actions > button {
        flex: 1 1 11rem;
    }
}

@media (max-width: 768px) and (max-height: 480px) {
    .project-task-nav__drawer {
        position: fixed;
        height: 100vh;
        max-height: none;
    }
}

/* Projects/Tasks IA consolidated visual model: desktop tree+settings, mobile drill-down. */
@media (min-width: 781px) {
    project-task-nav {
        position: relative;
    }

    .project-task-nav__scrim {
        display: none;
    }

    body.project-task-nav-drawer-active:not(.project-task-nav-settings-active) .project-task-nav__scrim {
        display: block;
        background: color-mix(in srgb, var(--primary-bg) 52%, transparent);
        backdrop-filter: blur(1px);
    }

    body.project-task-nav-drawer-active:not(.project-task-nav-settings-active) .project-task-nav__scrim.is-open {
        opacity: 1;
    }

    .project-task-nav__drawer {
        position: fixed;
        top: 4.85rem;
        left: 1rem;
        bottom: auto;
        width: min(72rem, calc(100vw - 2rem));
        max-height: calc(100vh - 5.85rem);
        padding: 1rem;
        gap: 0.85rem;
        border: 1px solid color-mix(in srgb, var(--accent-color) 24%, transparent);
        border-radius: 22px;
        background: linear-gradient(135deg, var(--secondary-bg), var(--primary-bg));
        box-shadow: 0 28px 70px color-mix(in srgb, var(--primary-bg) 78%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text-color) 5%, transparent);
        transform: translateY(-0.5rem) scale(0.985);
        transform-origin: top left;
        opacity: 0;
        pointer-events: none;
    }

    .project-task-nav__drawer.is-open {
        transform: translateY(0) scale(1);
        opacity: 1;
        pointer-events: auto;
    }

    .project-task-nav__drawer:not(:has(.project-task-nav__routed-settings-shell)) {
        width: min(31rem, calc(100vw - 2rem));
    }

    .project-task-nav__close {
        display: none;
    }

    .project-task-nav__drawer-header {
        padding: 0 0.25rem 0.55rem;
        border-bottom: 1px solid color-mix(in srgb, var(--accent-color) 16%, transparent);
    }
}

body.project-task-nav-settings-active tree-visualizer,
body.project-task-nav-settings-active tree-visualizer + .resizer {
    display: none !important;
}

body.project-task-nav-settings-active main {
    grid-template-columns: minmax(0, 1fr);
}

.project-task-nav__routed-settings-shell {
    display: grid;
    grid-template-columns: minmax(17rem, 0.86fr) minmax(20rem, 1.14fr);
    gap: 1rem;
    align-items: stretch;
    min-height: 0;
}

.project-task-nav__routed-settings-shell .project-task-nav__tree-layout,
.project-task-nav__routed-settings-shell .project-task-nav__settings-view {
    width: 100%;
    min-height: 100%;
}

.project-task-nav__routed-settings-shell .project-task-nav__tree-layout {
    position: relative;
}

.project-task-nav__routed-settings-shell .project-task-nav__tree-layout::after {
    content: "";
    position: absolute;
    top: 4.25rem;
    right: -0.55rem;
    bottom: 1rem;
    width: 1px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent-color) 55%, transparent), color-mix(in srgb, var(--accent-color) 8%, transparent));
    opacity: 0.7;
}

.project-task-nav__tree {
    gap: 0.25rem;
}

.project-task-nav__project-node,
.project-task-nav__task-node,
.project-task-nav__add-task {
    background: transparent;
    border: 0;
    padding: 0.08rem;
}

.project-task-nav__tree-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 0;
}

.project-task-nav__project-node > .project-task-nav__tree-row .project-task-nav__select {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.project-task-nav__project-node > .project-task-nav__tree-row .project-task-nav__select::before,
.project-task-nav__project-node[aria-expanded="true"] > .project-task-nav__tree-row .project-task-nav__select::before {
    content: none !important;
    display: none !important;
}

.project-task-nav__project-node > .project-task-nav__tree-row .project-task-nav__select span,
.project-task-nav__project-node > .project-task-nav__tree-row .project-task-nav__select small {
    grid-column: auto;
    min-width: 0;
}

.project-task-nav__settings-action {
    align-self: center;
    justify-self: end;
    width: 1.75rem;
    min-width: 1.75rem;
    min-height: 1.75rem;
    margin-right: 0;
    border-color: transparent;
    background: transparent;
    opacity: 0.58;
}

.project-task-nav__item.is-active .project-task-nav__settings-action,
.project-task-nav__settings-action:hover,
.project-task-nav__settings-action:focus-visible {
    border-color: color-mix(in srgb, var(--accent-color) 22%, transparent);
    background: color-mix(in srgb, var(--accent-color) 7%, transparent);
    opacity: 1;
}

.project-task-nav__settings-action.is-active,
.project-task-nav__header-settings.is-active {
    border-color: var(--accent-color) !important;
    background: color-mix(in srgb, var(--accent-color) 25%, transparent) !important;
    color: var(--accent-color) !important;
    opacity: 1 !important;
    box-shadow: 0 0 12px color-mix(in srgb, var(--accent-color) 40%, transparent) !important;
}

.project-task-nav__settings-view {
    border: 1px solid color-mix(in srgb, var(--accent-color) 24%, transparent);
    background: linear-gradient(180deg, var(--secondary-bg), var(--primary-bg));
}

.project-task-nav__settings-view > div p:not(.project-task-nav__eyebrow):not(.project-task-nav__settings-path) {
    margin: 0.35rem 0 0;
    max-width: 42rem;
    color: var(--text-color);
    opacity: 0.72;
    line-height: 1.5;
}

.project-task-nav__settings-path {
    margin: 0.1rem 0 0.2rem;
    color: var(--text-color);
    opacity: 0.68;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-task-nav__field input {
    border-color: color-mix(in srgb, var(--accent-color) 32%, transparent);
    background: color-mix(in srgb, var(--primary-bg) 86%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-color) 6%, transparent);
}

.project-task-nav__field input:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent-color) 50%, transparent);
    outline-offset: 2px;
    border-color: var(--accent-color);
}

.project-task-nav__primary-action,
.project-task-nav__danger-action,
.project-task-nav__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    text-decoration: none;
    box-shadow: 0 10px 26px color-mix(in srgb, var(--primary-bg) 48%, transparent);
}

.project-task-nav__primary-action {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent-color) 28%, var(--secondary-bg)), color-mix(in srgb, var(--accent-color) 13%, var(--primary-bg)));
    border-color: color-mix(in srgb, var(--accent-color) 58%, transparent);
    color: var(--text-color);
}

.project-task-nav__danger-action {
    background: color-mix(in srgb, var(--primary-bg) 88%, #7f1d1d);
    border-color: color-mix(in srgb, #f87171 48%, transparent);
    color: #fecaca;
}

@media (min-width: 781px) {
    .project-task-nav__drawer:has(.project-task-nav__routed-settings-shell) .project-task-nav__tree-layout,
    .project-task-nav__drawer:has(.project-task-nav__routed-settings-shell) .project-task-nav__settings-view {
        width: 100%;
        padding: 1rem;
        border-radius: 18px;
    }

    .project-task-nav__drawer:has(.project-task-nav__routed-settings-shell) .project-task-nav__settings-view {
        padding: 1.1rem;
    }
}

@media (max-width: 780px) {
    .project-task-nav__drawer:has(.project-task-nav__routed-settings-shell) {
        background: var(--primary-bg);
    }

    .project-task-nav__drawer:has(.project-task-nav__routed-settings-shell) .project-task-nav__drawer-header {
        position: relative;
        z-index: 1;
        padding: 0.35rem 0.25rem 0.75rem;
        background: var(--primary-bg);
        border-bottom: 1px solid color-mix(in srgb, var(--accent-color) 20%, transparent);
    }

    .project-task-nav__drawer:has(.project-task-nav__routed-settings-shell) .project-task-nav__routed-settings-shell {
        grid-template-columns: 1fr;
        gap: 0.85rem;
        min-height: calc(100vh - 7rem);
    }

    .project-task-nav__drawer:has(.project-task-nav__routed-settings-shell) .project-task-nav__tree-layout {
        display: none;
    }

    .project-task-nav__drawer:has(.project-task-nav__routed-settings-shell) .project-task-nav__tree-layout::after {
        display: none;
    }

    .project-task-nav__drawer:has(.project-task-nav__routed-settings-shell) .project-task-nav__settings-view {
        min-height: calc(100vh - 6.75rem);
        padding: 1rem;
        background: var(--secondary-bg);
        border-color: color-mix(in srgb, var(--accent-color) 28%, transparent);
    }

    .project-task-nav__drawer:has(.project-task-nav__routed-settings-shell) .project-task-nav__settings-actions {
        margin-top: auto;
    }
}

.project-task-nav__mobile-provenance {
    display: none;
}

@media (max-width: 780px) and (max-height: 480px) {
    .project-task-nav__drawer {
        max-height: 100vh;
        min-height: 100vh;
        border-radius: 0;
        background: var(--primary-bg);
    }

    .project-task-nav__tree-layout {
        width: min(100%, 30rem);
        margin-inline: auto;
    }

    .project-task-nav__project-node > .project-task-nav__tree-row .project-task-nav__select {
        grid-template-columns: 0.8rem minmax(0, 1fr);
    }

    .project-task-nav__select small {
        display: none;
    }

    .project-task-nav__drawer:has(.project-task-nav__routed-settings-shell) {
        align-items: center;
        padding: 0.55rem 0.75rem 0.7rem;
        gap: 0.45rem;
        background: var(--primary-bg);
    }

    .project-task-nav__drawer:has(.project-task-nav__routed-settings-shell) .project-task-nav__drawer-header {
        width: min(100%, 28rem);
        padding: 0 0.1rem 0.25rem;
        border-bottom: 0;
    }

    .project-task-nav__drawer:has(.project-task-nav__routed-settings-shell) .project-task-nav__drawer-header h2 {
        font-size: 1rem;
    }

    .project-task-nav__drawer:has(.project-task-nav__routed-settings-shell) .project-task-nav__routed-settings-shell {
        width: min(100%, 28rem);
        min-height: auto;
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.35rem;
        align-items: start;
        justify-items: stretch;
        margin: 0 auto;
    }

    .project-task-nav__drawer:has(.project-task-nav__routed-settings-shell) .project-task-nav__tree-layout {
        display: none;
        max-height: none;
        min-height: auto;
        overflow: visible;
        padding: 0.32rem 0.48rem;
        border: 1px solid color-mix(in srgb, var(--accent-color) 18%, transparent);
        border-radius: 13px;
        background: color-mix(in srgb, var(--secondary-bg) 88%, transparent);
    }

    .project-task-nav__drawer:has(.project-task-nav__routed-settings-shell) .project-task-nav__project-node:not(.is-active),
    .project-task-nav__drawer:has(.project-task-nav__routed-settings-shell) .project-task-nav__tree-layout .project-task-nav__panel-heading p,
    .project-task-nav__drawer:has(.project-task-nav__routed-settings-shell) .project-task-nav__tree-layout .project-task-nav__panel-heading button,
    .project-task-nav__drawer:has(.project-task-nav__routed-settings-shell) .project-task-nav__select small {
        display: none;
    }

    .project-task-nav__drawer:has(.project-task-nav__routed-settings-shell) .project-task-nav__settings-action {
        display: inline-flex;
        width: 1.45rem;
        min-width: 1.45rem;
        min-height: 1.45rem;
        font-size: 0.72rem;
        opacity: 0.82;
    }

    .project-task-nav__drawer:has(.project-task-nav__routed-settings-shell) .project-task-nav__tree-layout .project-task-nav__panel-heading {
        margin: 0;
    }

    .project-task-nav__drawer:has(.project-task-nav__routed-settings-shell) .project-task-nav__tree-layout .project-task-nav__panel-heading h3 {
        font-size: 0.72rem;
        opacity: 0.78;
    }

    .project-task-nav__drawer:has(.project-task-nav__routed-settings-shell) .project-task-nav__tree {
        gap: 0;
    }

    .project-task-nav__drawer:has(.project-task-nav__routed-settings-shell) .project-task-nav__tree-row,
    .project-task-nav__drawer:has(.project-task-nav__routed-settings-shell) .project-task-nav__select {
        min-height: 1.28rem;
        padding-block: 0;
    }

    .project-task-nav__drawer:has(.project-task-nav__routed-settings-shell) .project-task-nav__select {
        padding: 0.04rem 0.24rem;
        font-size: 0.72rem;
    }

    .project-task-nav__drawer:has(.project-task-nav__routed-settings-shell) .project-task-nav__task-list {
        margin: 0 0 0 1.05rem;
        padding-left: 0.38rem;
        gap: 0;
    }

    .project-task-nav__drawer:has(.project-task-nav__routed-settings-shell) .project-task-nav__add-inline {
        min-height: 1.24rem;
        padding: 0.02rem 0.3rem;
        font-size: 0.7rem;
    }

    .project-task-nav__drawer:has(.project-task-nav__routed-settings-shell) .project-task-nav__settings-view {
        width: min(100%, 30rem);
        justify-self: center;
        max-height: none;
        min-height: auto;
        overflow: visible;
        padding: 0.55rem 0.75rem;
        gap: 0.32rem;
        border-radius: 15px;
    }

    .project-task-nav__drawer:has(.project-task-nav__routed-settings-shell) .project-task-nav__mobile-provenance {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 0.32rem;
        padding: 0.42rem 0.55rem;
        border: 1px solid color-mix(in srgb, var(--accent-color) 18%, transparent);
        border-radius: 13px;
        background: color-mix(in srgb, var(--primary-bg) 72%, transparent);
    }

    .project-task-nav__drawer:has(.project-task-nav__routed-settings-shell) .project-task-nav__mobile-provenance .project-task-nav__eyebrow {
        grid-column: 1 / -1;
        margin: 0;
        font-size: 0.62rem;
    }

    .project-task-nav__drawer:has(.project-task-nav__routed-settings-shell) .project-task-nav__mobile-provenance strong,
    .project-task-nav__drawer:has(.project-task-nav__routed-settings-shell) .project-task-nav__mobile-provenance span:not(.project-task-nav__eyebrow) {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.72rem;
    }

    .project-task-nav__drawer:has(.project-task-nav__routed-settings-shell) .project-task-nav__mobile-provenance strong::after {
        content: " /";
        opacity: 0.55;
    }

    .project-task-nav__drawer:has(.project-task-nav__routed-settings-shell) .project-task-nav__mobile-provenance button {
        min-height: 30px;
        padding: 0.24rem 0.48rem;
        border: 1px solid color-mix(in srgb, var(--accent-color) 24%, transparent);
        border-radius: 999px;
        background: color-mix(in srgb, var(--secondary-bg) 88%, transparent);
        color: var(--text-color);
    }

    .project-task-nav__drawer:has(.project-task-nav__routed-settings-shell) .project-task-nav__settings-view h3 {
        font-size: 0.9rem;
    }

    .project-task-nav__drawer:has(.project-task-nav__routed-settings-shell) .project-task-nav__settings-view > div p:not(.project-task-nav__eyebrow):not(.project-task-nav__settings-path) {
        display: none;
    }

    .project-task-nav__drawer:has(.project-task-nav__routed-settings-shell) .project-task-nav__settings-path {
        display: block;
        font-size: 0.7rem;
        margin-block: 0;
    }

    .project-task-nav__drawer:has(.project-task-nav__routed-settings-shell) .project-task-nav__field {
        gap: 0.16rem;
        font-size: 0.78rem;
    }

    .project-task-nav__drawer:has(.project-task-nav__routed-settings-shell) .project-task-nav__field input {
        min-height: 32px;
        padding: 0.34rem 0.55rem;
    }

    .project-task-nav__drawer:has(.project-task-nav__routed-settings-shell) .project-task-nav__back,
    .project-task-nav__drawer:has(.project-task-nav__routed-settings-shell) .project-task-nav__primary-action,
    .project-task-nav__drawer:has(.project-task-nav__routed-settings-shell) .project-task-nav__danger-action {
        min-height: 32px;
        padding: 0.32rem 0.62rem;
    }

    .project-task-nav__drawer:has(.project-task-nav__routed-settings-shell) .project-task-nav__settings-actions {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
        margin-top: 0;
    }

    .project-task-nav__drawer:has(.project-task-nav__routed-settings-shell) .project-task-nav__primary-action {
        flex: 1 1 auto;
    }

    .project-task-nav__drawer:has(.project-task-nav__routed-settings-shell) .project-task-nav__danger-action {
        flex: 0 0 auto;
        background: color-mix(in srgb, var(--primary-bg) 78%, var(--error-color));
        box-shadow: 0 8px 18px color-mix(in srgb, var(--primary-bg) 38%, transparent);
        color: color-mix(in srgb, var(--text-color) 70%, var(--error-color));
        border-color: color-mix(in srgb, var(--error-color) 52%, transparent);
    }
}


/* --- Phase 2 Macro Layout & Primary Hierarchy --- */
.command-center-shell {
    display: grid;
    grid-template-columns: minmax(18rem, 0.82fr) minmax(0, 1.18fr);
    gap: 0;
    min-height: 0;
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--accent-color) 10%, transparent), transparent 24rem),
        var(--primary-bg);
}

.command-center-shell > .resizer {
    grid-column: 1 / 2;
    grid-row: 1;
    justify-self: end;
    z-index: 5;
}

.active-work-surface,
.message-detail-surface {
    min-width: 0;
    min-height: 0;
}

.active-work-surface {
    width: auto;
    max-width: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    background: color-mix(in srgb, var(--primary-bg) 82%, var(--secondary-bg));
    border-right: 1px solid color-mix(in srgb, var(--accent-color) 22%, var(--secondary-bg));
}

.sidebar-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    background: color-mix(in srgb, var(--primary-bg) 86%, var(--secondary-bg));
    border-bottom: 1px solid color-mix(in srgb, var(--accent-color) 18%, var(--secondary-bg));
}

.surface-eyebrow {
    margin: 0 0 0.28rem;
    color: var(--accent-color);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.active-work-summary h2,
.chat-context-panel h2 {
    margin: 0;
    color: var(--text-color);
    font-size: 1rem;
    line-height: 1.2;
}

.active-work-summary p,
.chat-context-panel p {
    margin: 0.35rem 0 0;
    color: color-mix(in srgb, var(--text-color) 72%, transparent);
    font-size: 0.8rem;
    line-height: 1.35;
}

.sidebar-header #close-sidebar {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--text-color) 14%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--secondary-bg) 72%, transparent);
    color: color-mix(in srgb, var(--text-color) 76%, transparent);
    cursor: pointer;
}

.sidebar-header #close-sidebar:hover,
.sidebar-header #close-sidebar:focus-visible {
    color: var(--text-color);
    border-color: color-mix(in srgb, var(--accent-color) 34%, transparent);
    outline: none;
}

#agent-tree-container {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0.8rem 0.9rem 1.4rem;
}

.message-detail-surface {
    border-right: 0;
    padding: 0;
    background: color-mix(in srgb, var(--primary-bg) 92%, var(--secondary-bg));
}

.chat-context-panel {
    flex: 0 0 auto;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid color-mix(in srgb, var(--accent-color) 14%, var(--secondary-bg));
    background: color-mix(in srgb, var(--primary-bg) 88%, var(--secondary-bg));
}

#skippy-filters {
    flex: 0 0 auto;
    margin: 0;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
}

#messages {
    min-height: 0;
    margin: 0;
    padding: 1rem 1.15rem;
    scroll-padding-bottom: 6rem;
}

#chat-form {
    flex: 0 0 auto;
    margin: 0;
    border: 1px solid color-mix(in srgb, var(--accent-color) 16%, var(--secondary-bg));
    box-shadow: 0 -1rem 2rem color-mix(in srgb, var(--primary-bg) 72%, transparent);
}

.agent-node {
    background: color-mix(in srgb, var(--secondary-bg) 76%, transparent);
    border-color: color-mix(in srgb, var(--text-color) 10%, transparent);
    box-shadow: none;
}

.agent-node.active {
    border-color: color-mix(in srgb, var(--accent-color) 48%, transparent);
    background: color-mix(in srgb, var(--accent-color) 10%, var(--secondary-bg));
}

@media (max-width: 780px) {
    .command-center-shell {
        display: block;
        position: relative;
        overflow: hidden;
    }

    .active-work-surface {
        position: fixed;
        inset: 0;
        width: 100vw !important;
        height: 100vh;
        max-width: none;
        transform: translateX(0);
        border-right: 0;
        z-index: 100;
        box-shadow: 0 1.5rem 4rem color-mix(in srgb, var(--primary-bg) 74%, transparent);
    }

    #sidebar-toggle:checked ~ main .active-work-surface {
        transform: translateX(-105%) !important;
        width: 100vw !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: hidden;
    }

    .message-detail-surface {
        width: 100%;
        min-height: calc(100vh - 4.5rem);
    }

    .sidebar-header {
        padding: 0.9rem 1rem;
    }

    #agent-tree-container {
        padding: 0.75rem 1rem 5rem;
    }

    .chat-context-panel {
        padding: 0.5rem 0.65rem;
    }

    .chat-context-panel .surface-eyebrow,
    .chat-context-panel p {
        display: none;
    }

    .chat-context-panel h2 {
        margin: 0;
        font-size: 1rem;
    }

    #messages {
        padding: 0.45rem 0.45rem 0.75rem;
        gap: 0.55rem;
    }

    .message {
        width: 100%;
        max-width: 100%;
        padding: 0.55rem 0.55rem;
    }

    .message-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding: 0.5rem 0.5rem;
        overflow: visible;
    }

    #skippy-filters.panopticon-filter-disclosure {
        display: block;
        margin: 0.35rem 0.45rem 0;
        padding: 0;
        border: 0;
        background: transparent;
        position: relative;
        z-index: 20;
    }

    #skippy-filters .panopticon-filter-summary {
        display: inline-flex;
        list-style: none;
        touch-action: manipulation;
        align-items: center;
        gap: 0.45rem;
        min-height: 2.25rem;
        padding: 0 0.75rem;
        border: 1px solid color-mix(in srgb, var(--accent-color) 36%, var(--border-color));
        border-radius: 999px;
        background: color-mix(in srgb, var(--secondary-bg) 82%, var(--primary-bg));
        color: var(--text-color);
        cursor: pointer;
        box-shadow: 0 0.5rem 1.4rem color-mix(in srgb, var(--primary-bg) 48%, transparent);
    }

    #skippy-filters .panopticon-filter-summary::-webkit-details-marker {
        display: none;
    }

    #skippy-filters .panopticon-filter-hint {
        color: color-mix(in srgb, var(--text-color) 64%, transparent);
        font-size: 0.72rem;
        font-weight: 650;
    }

    #skippy-filters .panopticon-filter-controls {
        position: absolute;
        top: calc(100% + 0.35rem);
        left: 0;
        right: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.35rem;
        padding: 0.65rem;
        border: 1px solid color-mix(in srgb, var(--border-color) 62%, transparent);
        border-radius: 16px;
        background: color-mix(in srgb, var(--secondary-bg) 94%, var(--primary-bg));
        box-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--primary-bg) 72%, transparent);
    }

    #skippy-filters[open] .panopticon-filter-controls {
        display: grid;
        z-index: 21;
    }

    #skippy-filters:not([open]) .panopticon-filter-controls {
        display: none;
    }

    #skippy-filters .panopticon-filter-controls > .filter-title {
        grid-column: 1 / -1;
        margin: 0;
    }

    #skippy-filters label {
        justify-content: flex-start;
        padding: 0.45rem 0.5rem;
    }

    #chat-form {
        position: sticky;
        bottom: 0.5rem;
        margin: 0 0.75rem 0.75rem;
    }
}

@media (max-width: 780px) and (max-height: 480px) {
    .sidebar-header {
        padding: 0.65rem 0.85rem;
    }

    .active-work-summary p,
    .chat-context-panel p,
    .surface-eyebrow {
        display: none;
    }

    #agent-tree-container {
        padding-bottom: 3.5rem;
    }
}

/* --- Phase 5 Mobile Drill-down & Responsive Hierarchy --- */
#mobile-hierarchy-back,
#mobile-message-drilldown {
    display: none;
}

.mobile-drilldown-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

@media (max-width: 780px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body {
        height: 100dvh;
    }

    header {
        position: sticky;
        top: 0;
        z-index: 140;
    }

    .header-container {
        min-width: 0;
    }

    #mobile-toggle {
        flex: 0 0 auto;
        min-width: 2.5rem;
        min-height: 2.5rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .command-center-shell {
        min-height: calc(100dvh - 4.5rem);
        height: calc(100dvh - 4.5rem);
        overflow: hidden;
    }

    .active-work-surface,
    .message-detail-surface {
        position: fixed;
        top: 0px;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100vw !important;
        height: calc(100dvh - 4.5rem);
        max-width: 100vw;
        min-width: 0;
        overflow-x: hidden;
    }

    .active-work-surface {
        z-index: 105;
        transform: translateX(0);
        transition: transform 0.24s ease;
    }

    .message-detail-surface {
        z-index: 95;
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding: 0;
    }

    #sidebar-toggle:checked ~ main .active-work-surface {
        transform: translateX(-105%) !important;
        width: 100vw !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: hidden;
    }

    .mobile-drilldown-actions {
        flex: 0 0 auto;
    }

    #mobile-message-drilldown,
    #mobile-hierarchy-back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 2.35rem;
        border: 1px solid color-mix(in srgb, var(--accent-color) 32%, transparent);
        border-radius: 999px;
        background: color-mix(in srgb, var(--secondary-bg) 72%, transparent);
        color: var(--text-color);
        font: inherit;
        font-weight: 700;
        cursor: pointer;
    }

    #mobile-message-drilldown {
        padding: 0 0.85rem;
        color: var(--primary-bg);
        background: var(--accent-color);
        border-color: var(--accent-color);
    }

    #close-sidebar {
        position: static;
    }

    .chat-context-panel {
        position: sticky;
        top: 0;
        z-index: 2;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 0.9rem;
    }

    .chat-context-panel > div {
        min-width: 0;
    }

    #mobile-hierarchy-back {
        padding: 0 0.8rem;
        white-space: nowrap;
    }

    #agent-tree-container,
    #messages,
    #skippy-filters,
    .message-content,
    .message,
    .agent-node,
    .project-task-nav__drawer,
    .project-task-nav__tree-layout,
    .project-task-nav__settings-view {
        max-width: 100%;
        overflow-x: hidden;
    }

    #agent-tree-container {
        padding-bottom: 5.5rem;
    }

    .agent-node {
        width: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .node-header,
    .node-details,
    .telemetry-row,
    .plan-container,
    .message-content {
        min-width: 0;
    }

    .children-container {
        margin-left: 0.8rem;
        padding-left: 0.35rem;
    }

    .message-content pre,
    .message-content .table-container {
        max-width: 100%;
        overflow-x: auto;
    }

    .message-content .table-container table {
        width: 100%;
        min-width: 0;
        table-layout: fixed;
        font-size: 0.58rem;
    }

    .message-content th,
    .message-content td {
        min-width: 0;
        white-space: normal;
        padding: 0.18rem;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .message-content p,
    .message-content li,
    .message-content span,
    .message-content div:not(.table-container) {
        overflow-wrap: anywhere;
        word-break: break-all;
    }

    .message-content pre {
        overflow-x: auto;
    }

    .message-content pre,
    .message-content pre code {
        white-space: pre;
        word-break: normal;
        overflow-wrap: normal;
    }

    .project-task-nav__drawer {
        top: 0;
        height: 100dvh;
        min-height: 100dvh;
        max-height: none;
        transform: translateX(-105%);
        border-radius: 0;
        border-right: 0;
        border-top: 0;
    }

    .project-task-nav__drawer.is-open {
        transform: translateX(0);
    }

    .project-task-nav__drawer-header {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--primary-bg);
    }

    .project-task-nav__tree-layout,
    .project-task-nav__settings-view {
        min-height: calc(100dvh - 7rem);
        border-radius: 0;
    }

    .project-task-nav__settings-view {
        display: flex;
        flex-direction: column;
    }

    .project-task-nav__settings-actions {
        margin-top: auto;
        position: sticky;
        bottom: 0;
        padding-top: 0.65rem;
        background: linear-gradient(to top, var(--secondary-bg) 82%, transparent);
    }

    .project-task-nav__select,
    .project-task-nav__back,
    .project-task-nav__primary-action,
    .project-task-nav__danger-action,
    .project-task-nav__add-task,
    .project-task-nav__add-inline {
        min-height: 2.55rem;
    }
}

@media (max-width: 780px) and (max-height: 480px) {
    .active-work-surface,
    .message-detail-surface {
        top: 0px;
        height: calc(100dvh - 3.7rem);
    }

    .command-center-shell {
        height: calc(100dvh - 3.7rem);
        min-height: calc(100dvh - 3.7rem);
    }

    #mobile-message-drilldown,
    #mobile-hierarchy-back {
        min-height: 2rem;
    }

    .chat-context-panel {
        grid-template-columns: auto minmax(0, 1fr);
    }
}

/* ========================================================================== 
   Phase 6 component polish and accessibility pass
   Harmonizes existing Web Component surfaces without changing URL/state behavior.
   ========================================================================== */

:where(a, button, input, textarea, select, summary, [role="button"], [tabindex]):focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent-color) 72%, var(--text-color));
    outline-offset: 3px;
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent-color) 22%, transparent);
}

:where(button, input, textarea, select, summary) {
    font: inherit;
}

:where(button, summary, input[type="checkbox"], input[type="radio"]) {
    touch-action: manipulation;
}

:where(button, summary, .project-task-nav__select, .project-task-nav__settings-link, .agent-node) {
    -webkit-tap-highlight-color: transparent;
}

:where(button, .project-task-nav__select, .project-task-nav__settings-link, #mobile-message-drilldown, #mobile-hierarchy-back) {
    min-height: 2.75rem;
}

:where(input, textarea, select) {
    min-height: 2.75rem;
    border-color: color-mix(in srgb, var(--border-color) 72%, transparent);
    background: color-mix(in srgb, var(--secondary-bg) 68%, var(--primary-bg));
    color: var(--text-color);
}

::placeholder {
    color: color-mix(in srgb, var(--text-color) 54%, transparent);
}

.command-center-shell,
.active-work-surface,
.message-detail-surface,
.project-task-nav__drawer,
.project-task-nav__settings-view,
.chat-context-panel,
.sidebar-header {
    color: var(--text-color);
}

.surface-eyebrow,
.project-task-nav__label,
.project-task-nav__panel-heading span,
.filter-title {
    color: color-mix(in srgb, var(--accent-color) 78%, var(--text-color));
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.active-work-summary h2,
.chat-context-panel h2,
.project-task-nav__trigger-label,
.project-task-nav__settings-view h3,
.project-task-nav__panel-heading h3 {
    color: var(--text-color);
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.active-work-summary p,
.chat-context-panel p,
.project-task-nav__context-meta,
.project-task-nav__panel-heading p,
.project-task-nav__settings-view p,
.message .sender,
.current-step,
.telemetry-row,
.step-comment {
    color: color-mix(in srgb, var(--text-color) 70%, transparent);
    line-height: 1.5;
}

.sidebar-header,
.chat-context-panel,
.project-task-nav__trigger,
.project-task-nav__drawer,
.project-task-nav__settings-view {
    border-color: color-mix(in srgb, var(--border-color) 56%, transparent);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--secondary-bg) 72%, transparent),
        color-mix(in srgb, var(--primary-bg) 92%, transparent));
}

.project-task-nav__drawer,
.project-task-nav__settings-view,
.sidebar-header,
.chat-context-panel {
    box-shadow: 0 18px 45px color-mix(in srgb, var(--primary-bg) 62%, transparent);
}

#messages {
    gap: 0px;
    padding: 1rem clamp(0.85rem, 2vw, 1.35rem);
    scroll-padding: 1rem;
}

.message {
    gap: 0.55rem;
    margin: 0;
    max-width: min(100%, 72rem);
}

.message-content {
    border: 1px solid color-mix(in srgb, var(--border-color) 42%, transparent);
    border-radius: 16px;
    padding: 0.82rem 0.95rem;
    background: color-mix(in srgb, var(--secondary-bg) 58%, var(--primary-bg));
    box-shadow: 0 10px 28px color-mix(in srgb, var(--primary-bg) 42%, transparent);
    line-height: 1.55;
}

.message.system .message-content,
.message.assistant .message-content {
    border-color: color-mix(in srgb, var(--accent-color) 24%, var(--border-color));
}

.message.user .message-content {
    background: color-mix(in srgb, var(--accent-color) 18%, var(--secondary-bg));
    border-color: color-mix(in srgb, var(--accent-color) 34%, var(--border-color));
}

.message-content :where(p, ul, ol, pre, table) {
    margin-top: 0.65rem;
    margin-bottom: 0.65rem;
}

.message-content :where(p, ul, ol):first-child,
.message-content :where(pre, table):first-child {
    margin-top: 0;
}

.message-content :where(p, ul, ol):last-child,
.message-content :where(pre, table):last-child {
    margin-bottom: 0;
}

.message-content pre,
.message-content table {
    border-color: color-mix(in srgb, var(--border-color) 58%, transparent);
    border-radius: 12px;
}

#chat-form {
    border-top-color: color-mix(in srgb, var(--border-color) 58%, transparent);
    background: color-mix(in srgb, var(--secondary-bg) 78%, var(--primary-bg));
}

#chat-input,
#message-input {
    border-radius: 999px;
    padding-inline: 1rem;
}

#chat-form button,
.project-task-nav__settings-actions button,
.project-task-nav__create button,
#mobile-message-drilldown,
#mobile-hierarchy-back,
.sidebar-header #close-sidebar {
    border: 1px solid color-mix(in srgb, var(--accent-color) 32%, var(--border-color));
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-color) 16%, var(--secondary-bg));
    color: var(--text-color);
    font-weight: 750;
    letter-spacing: -0.01em;
    transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}

#chat-form button:hover,
.project-task-nav__settings-actions button:hover,
.project-task-nav__create button:hover,
#mobile-message-drilldown:hover,
#mobile-hierarchy-back:hover,
.sidebar-header #close-sidebar:hover {
    background: color-mix(in srgb, var(--accent-color) 24%, var(--secondary-bg));
    border-color: color-mix(in srgb, var(--accent-color) 58%, var(--border-color));
    transform: translateY(-1px);
}

.agent-node {
    min-height: 2.75rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid transparent;
    border-radius: 14px;
    background: transparent;
    transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.agent-node:hover {
    background: color-mix(in srgb, var(--secondary-bg) 58%, transparent);
    border-color: color-mix(in srgb, var(--border-color) 42%, transparent);
}

.agent-node.active,
.agent-node[aria-current="true"] {
    background: color-mix(in srgb, var(--accent-color) 16%, var(--secondary-bg));
    border-color: color-mix(in srgb, var(--accent-color) 45%, var(--border-color));
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent-color) 82%, var(--text-color));
}

.children-container,
.plan-steps {
    border-left-color: color-mix(in srgb, var(--border-color) 42%, transparent);
}

.agent-id,
.node-title,
.step-title {
    font-weight: 750;
    letter-spacing: -0.01em;
}

.status-badge,
.agent-status,
.step-status,
.budget-info,
.telemetry-chip,
.priority-tag,
.project-task-nav__context-view,
.project-task-nav__view-pill {
    border: 1px solid color-mix(in srgb, var(--border-color) 52%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--secondary-bg) 70%, transparent);
    color: color-mix(in srgb, var(--text-color) 86%, transparent);
    font-weight: 750;
    min-height: 1.65rem;
    padding: 0.18rem 0.5rem;
}

.blocking-question,
.message.blocking-question .message-content,
.status-blocked,
.step-status.blocked {
    border-color: color-mix(in srgb, var(--danger-color) 58%, var(--border-color));
    background: color-mix(in srgb, var(--danger-color) 14%, var(--secondary-bg));
    color: var(--text-color);
}

.project-task-nav__select,
.project-task-nav__settings-link {
    border-radius: 12px;
    transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.project-task-nav__select:hover,
.project-task-nav__settings-link:hover {
    transform: translateY(-1px);
}

.project-task-nav__select span,
.project-task-nav__context-current,
.project-task-nav__crumb-current {
    letter-spacing: -0.015em;
}

.project-task-nav__settings-view label,
.project-task-nav__create label {
    color: color-mix(in srgb, var(--text-color) 76%, transparent);
    font-weight: 700;
}

.project-task-nav__settings-view input,
.project-task-nav__create input {
    border-radius: 12px;
    padding-inline: 0.85rem;
}

@media (max-width: 780px) {
    #messages {
        padding: 0px;
    }

    .message-content {
        border-radius: 14px;
        padding: 0.75rem 0.82rem;
    }

    .agent-node,
    .project-task-nav__select,
    .project-task-nav__settings-link,
    #chat-form button,
    .project-task-nav__settings-actions button,
    .project-task-nav__create button {
        min-height: 2.9rem;
    }

    .project-task-nav__drawer,
    .active-work-surface,
    .message-detail-surface {
        scrollbar-gutter: stable;
    }
}

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


/* Phase 7 structural command-center refinements */
header {
    padding: 0.8rem clamp(0.85rem, 2vw, 1.35rem);
    background: linear-gradient(180deg, color-mix(in srgb, var(--secondary-bg) 94%, var(--primary-bg)), color-mix(in srgb, var(--secondary-bg) 72%, var(--primary-bg)));
    border-bottom: 1px solid color-mix(in srgb, var(--accent-color) 22%, transparent);
    box-shadow: 0 18px 42px color-mix(in srgb, var(--primary-bg) 34%, transparent);
    z-index: 80;
}

.header-container {
    display: grid;
    grid-template-columns: minmax(7rem, auto) minmax(0, 1fr) auto;
    align-items: center;
    justify-content: stretch;
    gap: clamp(0.7rem, 1.6vw, 1.4rem);
    width: min(100%, 1440px);
    margin: 0 auto;
    position: relative;
}

.header-brand-group,
.header-context-group,
.header-utility-group {
    min-width: 0;
    display: flex;
    align-items: center;
}

.header-brand-group {
    gap: 0.65rem;
}

.header-context-group {
    justify-content: center;
}

.header-utility-group {
    justify-content: flex-end;
    gap: 0.55rem;
}

#mobile-toggle {
    position: static;
    left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.35rem;
    min-height: 2.35rem;
    padding: 0;
    border-radius: 0.75rem;
    color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-color) 18%, transparent);
}

header h1 {
    flex: 0 0 auto;
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    font-weight: 800;
    letter-spacing: -0.045em;
    text-align: left;
    padding: 0;
    line-height: 1;
}

project-task-nav {
    width: 100%;
    max-width: min(760px, 100%);
    justify-content: center;
}

user-profile {
    position: static !important;
    right: auto !important;
    top: auto !important;
    z-index: 40;
}

.command-center-shell {
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--accent-color) 7%, transparent), transparent 32rem),
        var(--primary-bg);
}

.active-work-surface {
    flex: 0 0 clamp(22rem, 30vw, 30rem);
    width: clamp(22rem, 30vw, 30rem);
    background: linear-gradient(180deg, color-mix(in srgb, var(--secondary-bg) 60%, var(--primary-bg)), var(--primary-bg));
    border-right: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
    box-shadow: inset -1px 0 0 color-mix(in srgb, var(--accent-color) 10%, transparent);
}

.message-detail-surface,
chat-interface {
    background: color-mix(in srgb, var(--primary-bg) 96%, var(--secondary-bg));
    min-width: 0;
}

.login-page {
    min-height: 100vh !important;
    height: auto !important;
    padding: clamp(1rem, 4vw, 2.5rem);
    background:
        radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--accent-color) 13%, transparent), transparent 18rem),
        radial-gradient(circle at 15% 90%, color-mix(in srgb, var(--secondary-bg) 54%, transparent), transparent 24rem),
        var(--primary-bg);
}

.login-container {
    width: min(100%, 27rem);
    padding: clamp(2rem, 7vw, 3.2rem);
    background: linear-gradient(180deg, color-mix(in srgb, var(--secondary-bg) 92%, var(--primary-bg)), color-mix(in srgb, var(--primary-bg) 88%, var(--secondary-bg)));
    border: 1px solid color-mix(in srgb, var(--accent-color) 20%, transparent);
    box-shadow: 0 24px 80px color-mix(in srgb, var(--primary-bg) 62%, transparent);
}

.login-container h1 {
    font-size: clamp(4rem, 18vw, 5.6rem);
    background: linear-gradient(to bottom, var(--text-color), color-mix(in srgb, var(--accent-color) 78%, var(--text-color)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent-color) 16%, transparent));
}

.subtitle {
    margin: 0.55rem 0 2.35rem;
    color: color-mix(in srgb, var(--text-color) 76%, var(--accent-color));
    letter-spacing: clamp(0.16rem, 2.2vw, 0.34rem);
    opacity: 0.76;
}

.login-btn {
    min-height: 3.15rem;
    padding: 0.85rem 1.05rem;
    gap: 0.72rem;
    white-space: nowrap;
    color: var(--text-color);
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent-color) 24%, var(--secondary-bg)), color-mix(in srgb, var(--accent-color) 12%, var(--primary-bg)));
    border: 1px solid color-mix(in srgb, var(--accent-color) 34%, transparent);
    border-radius: 0.85rem;
    box-shadow: 0 14px 34px color-mix(in srgb, var(--primary-bg) 48%, transparent);
}

.login-btn:hover,
.login-btn:focus-visible {
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent-color) 32%, var(--secondary-bg)), color-mix(in srgb, var(--accent-color) 16%, var(--primary-bg)));
    box-shadow: 0 18px 40px color-mix(in srgb, var(--primary-bg) 42%, transparent);
    transform: translateY(-1px);
}

.google-icon {
    flex: 0 0 auto;
}

@media (max-width: 768px) {
    body {
        min-height: 100vh;
    }

    header {
        padding: 0.65rem 0.75rem;
    }

    .header-container {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "brand utility"
            "context context";
        gap: 0.62rem 0.75rem;
        padding: 0;
    }

    .header-brand-group {
        grid-area: brand;
        min-width: 0;
    }

    .header-context-group {
        grid-area: context;
        width: 100%;
        justify-content: stretch;
    }

    .header-utility-group {
        grid-area: utility;
        align-self: center;
    }

    #mobile-toggle {
        min-width: 2.25rem;
        min-height: 2.25rem;
        font-size: 1.12rem;
    }

    header h1 {
        flex: 0 1 auto;
        min-width: 0;
        font-size: 1.08rem;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    project-task-nav {
        max-width: none;
    }

    .project-task-nav__trigger {
        width: 100%;
        min-height: 3rem;
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 0.62rem 0.72rem;
    }

    main.command-center-shell {
        position: relative;
        min-height: 0;
    }

    tree-visualizer.active-work-surface,
    tree-visualizer {
        top: var(--phase7-mobile-header-offset, 7.35rem);
        left: 0;
        bottom: 0;
        width: min(100vw, 24rem) !important;
        height: calc(100vh - var(--phase7-mobile-header-offset, 7.35rem)) !important;
        max-height: calc(100vh - var(--phase7-mobile-header-offset, 7.35rem));
        padding: 0;
        border-right: 1px solid color-mix(in srgb, var(--accent-color) 22%, transparent);
        border-bottom: none;
        box-shadow: 18px 0 42px color-mix(in srgb, var(--primary-bg) 44%, transparent);
    }

    .sidebar-header {
        min-height: auto;
        align-items: flex-start;
        padding: 0.85rem !important;
        background: color-mix(in srgb, var(--secondary-bg) 86%, var(--primary-bg));
    }

    .sidebar-header h2,
    .tree-title,
    .active-work-title {
        min-width: 0;
        overflow-wrap: anywhere;
        line-height: 1.18;
    }

    #agent-tree-container {
        padding: 0.75rem;
    }

    chat-interface.message-detail-surface,
    chat-interface {
        padding: 0.7rem;
    }

    .login-page {
        align-items: center !important;
        padding: 1rem;
    }

    .login-container {
        padding: 2rem 1.2rem;
        border-radius: 1rem;
    }

    .login-btn {
        font-size: 0.95rem;
        min-height: 3rem;
    }
}

@media (max-width: 768px) and (orientation: landscape) {
    .header-container {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "brand context utility";
    }

    .header-context-group {
        min-width: 0;
    }

    tree-visualizer.active-work-surface,
    tree-visualizer {
        top: var(--phase7-mobile-landscape-header-offset, 4.45rem);
        height: calc(100vh - var(--phase7-mobile-landscape-header-offset, 4.45rem)) !important;
        max-height: calc(100vh - var(--phase7-mobile-landscape-header-offset, 4.45rem));
        width: min(58vw, 24rem) !important;
    }

    .login-page {
        align-items: flex-start !important;
        padding-block: 0.75rem;
    }

    .login-container {
        padding: 1.25rem 1.35rem;
        width: min(100%, 24rem);
    }

    .login-container h1 {
        font-size: 3.35rem;
    }

    .subtitle {
        margin-bottom: 1rem;
    }
}


/* --- Phase 2 Blueprint Macro Layout & Hierarchy Implementation ---
   Source of truth: docs/technical/frontend/ui_layout_blueprint.md Sections 3, 4, and 6.
   Scope: structural ownership, responsive topology, overflow containment, and z-index only. */
html,
body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
}

body {
    min-height: 100dvh;
}

.app-frame {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background-color: var(--primary-bg);
}

.global-header,
header.global-header {
    position: sticky;
    top: 0;
    grid-row: 1;
    width: 100%;
    flex: 0 0 auto;
    z-index: 180;
}

.command-center-shell,
main.command-center-shell {
    grid-row: 2;
    display: grid;
    grid-template-columns: minmax(20rem, clamp(22rem, 30vw, 30rem)) minmax(0.35rem, 0.35rem) minmax(24rem, 1fr);
    align-items: stretch;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.active-work-surface,
tree-visualizer.active-work-surface,
tree-visualizer {
    grid-column: 1;
    width: 100% !important;
    min-width: 0;
    height: 100%;
    max-height: none;
    position: relative;
    z-index: 20;
    overflow: auto;
    transform: none;
}

#sidebar-resizer.resizer,
.resizer {
    grid-column: 2;
    width: 0.35rem;
    min-width: 0.35rem;
    height: 100%;
    z-index: 30;
}

.message-detail-surface,
chat-interface.message-detail-surface,
chat-interface {
    grid-column: 3;
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border-right: 0;
    z-index: 10;
}

.shell-overlay-host {
    position: fixed;
    inset: 0;
    z-index: 420;
    pointer-events: none;
    overflow: visible;
}

#sidebar-toggle:checked ~ main.command-center-shell {
    grid-template-columns: minmax(0, 1fr);
}

#sidebar-toggle:checked ~ main.command-center-shell tree-visualizer.active-work-surface,
#sidebar-toggle:checked ~ main.command-center-shell tree-visualizer,
#sidebar-toggle:checked ~ main.command-center-shell #sidebar-resizer.resizer {
    display: none !important;
}

#sidebar-toggle:checked ~ main.command-center-shell chat-interface.message-detail-surface,
#sidebar-toggle:checked ~ main.command-center-shell chat-interface {
    grid-column: 1;
}

body.project-task-nav-settings-active main.command-center-shell,
body.project-task-nav-drawer-active main.command-center-shell {
    grid-template-columns: minmax(0, 1fr);
}

body.project-task-nav-settings-active chat-interface.message-detail-surface,
body.project-task-nav-drawer-active chat-interface.message-detail-surface,
body.project-task-nav-settings-active chat-interface,
body.project-task-nav-drawer-active chat-interface {
    grid-column: 1;
}

.project-task-nav__drawer {
    z-index: 260;
}

.project-task-nav__scrim {
    z-index: 250;
}

@media (min-width: 769px) {
    #mobile-toggle {
        display: inline-flex;
    }

    .command-center-shell,
    main.command-center-shell {
        grid-template-columns: minmax(20rem, clamp(22rem, 30vw, 30rem)) minmax(0.35rem, 0.35rem) minmax(24rem, 1fr);
    }
}

@media (min-width: 1200px) {
    .command-center-shell,
    main.command-center-shell {
        grid-template-columns: minmax(24rem, clamp(26rem, 32vw, 34rem)) minmax(0.35rem, 0.35rem) minmax(28rem, 1fr);
    }
}

@media (min-width: 1800px) {
    .command-center-shell,
    main.command-center-shell {
        grid-template-columns: minmax(30rem, 38rem) minmax(0.35rem, 0.35rem) minmax(34rem, 1fr);
    }
}

@media (max-width: 768px) {
    html,
    body,
    .app-frame {
        height: 100dvh;
        min-height: 100dvh;
        overflow: hidden;
    }

    .app-frame {
        grid-template-rows: auto minmax(0, 1fr);
    }

    .global-header,
    header.global-header {
        position: sticky;
        top: 0;
        z-index: 190;
    }

    .header-container {
        width: 100%;
        max-width: none;
    }

    .command-center-shell,
    main.command-center-shell {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 0;
        overflow: hidden;
        position: relative;
    }

    #sidebar-resizer.resizer,
    .resizer {
        display: none !important;
    }

    .message-detail-surface,
    chat-interface.message-detail-surface,
    chat-interface {
        display: flex;
        width: 100%;
        height: 100%;
        min-height: 0;
        padding: 0px;
        overflow: hidden;
        position: relative;
        z-index: 10;
    }

    .active-work-surface,
    tree-visualizer.active-work-surface,
    tree-visualizer {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        min-width: 0 !important;
        flex: none !important;
        padding: 0 !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        overflow: auto;
        z-index: 120;
        transform: translateX(0) !important;
        box-shadow: 1.25rem 0 3rem color-mix(in srgb, var(--primary-bg) 58%, transparent);
    }

    #sidebar-toggle:checked ~ main.command-center-shell tree-visualizer.active-work-surface,
    #sidebar-toggle:checked ~ main.command-center-shell tree-visualizer,
    #sidebar-toggle:checked ~ main.command-center-shell .active-work-surface {
        display: block !important;
        transform: translateX(-105%) !important;
        pointer-events: none;
        visibility: hidden;
    }

    #agent-tree-container,
    .active-work-surface #agent-tree-container {
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        padding-bottom: max(4rem, env(safe-area-inset-bottom));
    }

    .project-task-nav__drawer,
    body.project-task-nav-drawer-active .project-task-nav__drawer,
    body.project-task-nav-settings-active .project-task-nav__drawer {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: none !important;
        min-height: 100dvh;
        padding: max(0.85rem, env(safe-area-inset-top)) 0.85rem max(1rem, env(safe-area-inset-bottom));
        border-radius: 0 !important;
        border: 0 !important;
        overflow: auto;
        z-index: 270;
        transform: translateX(-105%);
    }

    .project-task-nav__drawer.is-open,
    body.project-task-nav-drawer-active .project-task-nav__drawer.is-open,
    body.project-task-nav-settings-active .project-task-nav__drawer.is-open {
        transform: translateX(0) !important;
        opacity: 1;
        pointer-events: auto;
    }

    .project-task-nav__scrim,
    .project-task-nav__scrim.is-open {
        position: fixed;
        inset: 0;
        z-index: 250;
    }

    .project-task-nav__tree-layout,
    .project-task-nav__settings-view,
    .project-task-nav__routed-settings-shell {
        width: 100%;
        min-height: calc(100dvh - 5rem) !important;
        max-width: 100%;
    }

    .project-task-nav__routed-settings-shell {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.85rem;
    }

    body.project-task-nav-drawer-active tree-visualizer.active-work-surface,
    body.project-task-nav-drawer-active tree-visualizer,
    body.project-task-nav-settings-active tree-visualizer.active-work-surface,
    body.project-task-nav-settings-active tree-visualizer {
        display: none !important;
    }

    #chat-form {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 768px) and (orientation: landscape) {
    .command-center-shell,
    main.command-center-shell {
        display: grid;
        grid-template-columns: minmax(15rem, 42vw) minmax(0, 1fr);
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .active-work-surface,
    tree-visualizer.active-work-surface,
    tree-visualizer {
        position: relative !important;
        inset: auto !important;
        grid-column: 1;
        width: 100% !important;
        height: 100% !important;
        transform: none !important;
        visibility: visible;
        pointer-events: auto;
        z-index: 20;
    }

    .message-detail-surface,
    chat-interface.message-detail-surface,
    chat-interface {
        grid-column: 2;
        height: 100%;
        z-index: 10;
    }

    #sidebar-toggle:checked ~ main.command-center-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    #sidebar-toggle:checked ~ main.command-center-shell tree-visualizer.active-work-surface,
    #sidebar-toggle:checked ~ main.command-center-shell tree-visualizer,
    #sidebar-toggle:checked ~ main.command-center-shell .active-work-surface {
        display: none !important;
    }

    #sidebar-toggle:checked ~ main.command-center-shell chat-interface.message-detail-surface,
    #sidebar-toggle:checked ~ main.command-center-shell chat-interface {
        grid-column: 1;
    }
}

/* Phase 2 toggle/breadcrumb correction: project/task nav owns the header anchor; ToT toggle belongs to task work. */
.header-brand-group project-task-nav {
    width: min(32rem, 42vw);
    max-width: 100%;
    justify-content: flex-start;
}

.header-context-group h1 {
    justify-self: center;
}

.chat-context-panel {
    position: relative;
    padding-right: 4.75rem;
}

.chat-context-panel #mobile-toggle,
.chat-context-panel .chat-tot-toggle {
    pointer-events: auto;
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.65rem;
    min-height: 2.35rem;
    padding-inline: 0.7rem;
    border-radius: 999px;
    color: var(--accent-color);
    background: color-mix(in srgb, var(--secondary-bg) 82%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-color) 24%, transparent);
    box-shadow: 0 0.75rem 1.5rem color-mix(in srgb, var(--primary-bg) 36%, transparent);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
}

.chat-context-panel #mobile-toggle:hover,
.chat-context-panel #mobile-toggle:focus-visible {
    background: color-mix(in srgb, var(--accent-color) 14%, var(--secondary-bg));
    outline: 2px solid color-mix(in srgb, var(--accent-color) 42%, transparent);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .header-brand-group project-task-nav {
        width: 100%;
        max-width: none;
    }

    .chat-context-panel #mobile-toggle,
    .chat-context-panel .chat-tot-toggle {
        min-width: 2.5rem;
        min-height: 2.25rem;
        padding-inline: 0.62rem;
    }
}


/* Desktop Sidebar Lock & Settings Routing Refactor */
.app-frame {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: minmax(0, 1fr);
    height: 100vh;
    min-height: 0;
}

.global-header {
    grid-column: 1 / -1;
}

.project-task-sidebar {
    min-height: 0;
    overflow: hidden;
    background: var(--primary-bg);
    border-right: 1px solid color-mix(in srgb, var(--accent-color) 20%, transparent);
}

.project-task-sidebar project-task-nav {
    height: 100%;
    max-width: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.workspace-settings-outlet[hidden] {
    display: none !important;
}

.workspace-settings-outlet {
    min-width: 0;
    overflow-y: auto;
    padding: 1rem;
    background: var(--primary-bg);
}

body.workspace-settings-active .command-center-shell {
    grid-template-columns: minmax(0, 1fr);
}

body.workspace-settings-active .workspace-settings-outlet {
    display: block;
}

body.workspace-settings-active .workspace-settings-outlet [class*="badge"],
body.workspace-settings-active .workspace-settings-outlet .status-badge,
body.workspace-settings-active .workspace-settings-outlet .telemetry-chip,
body.workspace-settings-active .workspace-settings-outlet .project-task-nav__view-pill {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    position: static;
    z-index: auto;
    max-width: 100%;
    margin: 0 0 0.9rem;
}

body.workspace-settings-active .workspace-settings-outlet .project-task-nav__settings-view {
    position: relative;
    padding: 1.5rem;
    gap: 1rem;
}

body.workspace-settings-active .workspace-settings-outlet .project-task-nav__back {
    position: static;
    z-index: auto;
    align-self: flex-start;
    margin: 0 0 0.5rem;
}

body.workspace-settings-active tree-visualizer,
body.workspace-settings-active .command-center-shell > .resizer,
body.workspace-settings-active chat-interface {
    display: none !important;
}

.project-task-nav__settings-route-note {
    margin: 0 0 0.75rem;
    padding: 0.7rem 0.8rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--secondary-bg) 60%, transparent);
    color: color-mix(in srgb, var(--text-color) 82%, transparent);
}

@media (min-width: 769px) {
    .header-container {
        justify-content: space-between;
    }

    .command-center-shell {
        grid-column: 1;
        min-width: 0;
        min-height: 0;
    }

    .project-task-sidebar {
        grid-column: 1;
        grid-row: 2;
    }

    .project-task-nav__crumb-shell {
        padding: 1rem 1rem 0.65rem;
        align-items: flex-start;
    }

    .project-task-nav__trigger {
        width: 100%;
        min-height: auto;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        cursor: default;
    }

    .project-task-nav__trigger:hover,
    .project-task-nav__trigger:focus-visible {
        border-color: transparent;
        outline: none;
    }

    .project-task-nav__agent-context,
    .project-task-nav__scrim,
    .project-task-nav__drawer-header,
    .project-task-nav__close {
        display: none !important;
    }

    .project-task-nav__drawer,
    .project-task-nav__drawer.is-open {
        position: static;
        inset: auto;
        display: block;
        width: 100%;
        max-width: none;
        height: calc(100vh - 4.25rem);
        max-height: none;
        min-height: 0;
        padding: 0 1rem 1rem;
        transform: none;
        opacity: 1;
        pointer-events: auto;
        overflow-y: auto;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .project-task-nav__tree-layout {
        display: block;
    }

    .project-task-nav__columns,
    .project-task-nav__routed-settings-shell {
        display: block;
    }
}

@media (max-width: 768px) {
    .app-frame {
        display: flex;
        flex-direction: column;
        height: 100vh;
    }

    .project-task-sidebar {
        min-height: auto;
        overflow: visible;
        border-right: 0;
        border-bottom: 1px solid color-mix(in srgb, var(--accent-color) 18%, transparent);
    }

    .workspace-settings-outlet {
        min-height: calc(100vh - 9rem);
    }

    body.workspace-settings-active .project-task-nav__drawer,
    body.workspace-settings-active .project-task-nav__drawer.is-open,
    body.workspace-settings-active .project-task-nav__scrim,
    body.workspace-settings-active .project-task-nav__scrim.is-open {
        display: none !important;
    }

    body.workspace-settings-active .project-task-sidebar {
        position: static;
        z-index: auto;
        background: var(--primary-bg);
    }
}

@media (max-width: 768px) {
    .header-container {
        flex-wrap: wrap;
        align-items: center;
        padding-right: 0.75rem;
    }

    .project-task-sidebar project-task-nav {
        display: block;
        width: 100%;
    }

    .project-task-nav__crumb-shell {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.5rem;
        padding: 0.6rem 0.75rem;
    }

    .project-task-nav__trigger {
        min-height: 3rem;
        min-width: 0;
        padding: 0.3rem 0.45rem;
        border: 1px solid color-mix(in srgb, var(--accent-color) 24%, transparent);
        border-radius: 14px;
        background: color-mix(in srgb, var(--secondary-bg) 44%, transparent);
        box-shadow: none;
    }

    .project-task-nav__menu-glyph {
        display: inline-flex;
        flex: 0 0 auto;
    }

    .project-task-nav__context-summary,
    .project-task-nav__breadcrumb,
    .project-task-nav__context-meta {
        min-width: 0;
        overflow: hidden;
    }

    .project-task-nav__breadcrumb li,
    .project-task-nav__context-meta span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .project-task-nav__crumb-line {
        width: 100%;
    }

    .project-task-nav__crumb {
        flex: 1 1 auto;
        white-space: normal;
        line-height: 1.2;
    }

    .project-task-nav__crumb strong {
        max-width: none;
    }

    .project-task-nav__trigger:hover,
    .project-task-nav__trigger:focus-visible {
        border-color: transparent;
        outline: 2px solid color-mix(in srgb, var(--accent-color) 28%, transparent);
        outline-offset: 2px;
    }

    .project-task-nav__header-settings {
        align-self: center;
    }
}

@media (max-width: 768px) {
    body.workspace-settings-active .workspace-settings-outlet {
            box-sizing: border-box;
            width: 100%;
            max-width: 100%;
            padding: 1rem;
            overflow-x: hidden;
        }
    
        body.workspace-settings-active .project-task-nav__settings-view {
            box-sizing: border-box;
            width: min(100%, 34rem);
            max-width: 100%;
            margin: 0.25rem auto;
            gap: 0.85rem;
            overflow-wrap: anywhere;
        }

    body.workspace-settings-active .project-task-nav__settings-view h3 {
        font-size: 1.05rem;
        line-height: 1.25;
    }

    body.workspace-settings-active .project-task-nav__settings-path {
        display: none;
    }

    body.workspace-settings-active .project-task-nav__back {
        width: auto;
        max-width: 100%;
        white-space: nowrap;
    }

    body.workspace-settings-active .project-task-nav__field,
    body.workspace-settings-active .project-task-nav__field input,
    body.workspace-settings-active .project-task-nav__settings-actions,
    body.workspace-settings-active .project-task-nav__settings-actions button {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    body.workspace-settings-active .project-task-nav__settings-actions {
        flex-direction: column;
    }

    body.workspace-settings-active .workspace-settings-outlet [class*="badge"] {
            max-width: 100%;
            position: static;
            margin-bottom: 0.75rem;
        }
}

@media (max-width: 768px) {
    #messages,
    .message {
        box-sizing: border-box;
        min-width: 0;
        max-width: 100%;
        overflow-x: clip;
    }

    .message-content {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .message-content p,
    .message-content li,
    .message-content span,
    .message-content div:not(.table-container) {
        overflow-wrap: anywhere;
        word-break: break-all;
    }

    .message-content pre,
    .message-content pre code {
        max-width: 100%;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        word-break: break-all;
    }

    .message-content pre {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-gutter: stable;
    }

    .message-content .table-container {
        position: relative;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: visible;
        padding: 0.2rem 0;
        -webkit-overflow-scrolling: touch;
    }

    .message-content .table-container::before {
        content: "Mobile table view";
        display: block;
        margin-bottom: 0.32rem;
        color: color-mix(in srgb, var(--text-color) 64%, transparent);
        font-size: 0.66rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .message-content .table-container table,
    .message-content .table-container thead,
    .message-content .table-container tbody,
    .message-content .table-container tr,
    .message-content .table-container th,
    .message-content .table-container td {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .message-content .table-container table {
        border-collapse: separate;
        border-spacing: 0;
        table-layout: auto;
        font-size: 0.78rem;
    }

    .message-content .table-container thead {
        display: none;
    }

    .message-content .table-container tr {
        margin: 0.38rem 0;
        padding: 0.38rem;
        border: 1px solid color-mix(in srgb, var(--border-color) 58%, transparent);
        border-radius: 12px;
        background: color-mix(in srgb, var(--secondary-bg) 74%, var(--primary-bg));
    }

    .message-content .table-container th,
    .message-content .table-container td {
        border: 0;
        padding: 0.3rem 0.38rem;
        line-height: 1.35;
    }

    .message-content .table-container td {
        display: grid;
        grid-template-columns: minmax(3.2rem, 34%) minmax(0, 1fr);
        gap: 0.45rem;
        align-items: start;
    }

    .message-content .table-container td::before {
        content: attr(data-label);
        color: color-mix(in srgb, var(--text-color) 68%, transparent);
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .message-content .table-container td:not([data-label]) {
        display: block;
    }

    .message-content .table-container td:not([data-label])::before {
        content: none;
    }
}

@media (min-width: 769px) {
    .app-frame {
        grid-template-columns: minmax(21rem, 24rem) minmax(0, 1fr);
    }

    .project-task-nav__crumb {
        flex-wrap: wrap;
        white-space: normal;
        line-height: 1.25;
    }

    .project-task-nav__crumb strong {
        max-width: none;
    }

    .project-task-sidebar .project-task-nav__select span,
    .project-task-sidebar .project-task-nav__select small {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
}

@media (max-width: 768px) {
    body.workspace-settings-active main.command-center-shell {
        padding-top: 0.85rem;
    }

    body.workspace-settings-active .workspace-settings-outlet {
        border: 0;
        border-radius: 0;
        padding-top: 0.7rem;
    }

    body.workspace-settings-active .project-task-nav__settings-actions button,
    body.workspace-settings-active .project-task-nav__primary-action,
    body.workspace-settings-active .project-task-nav__danger-action {
        min-height: 2.75rem;
        max-height: 3rem;
        padding: 0.55rem 0.85rem;
        border-radius: 12px;
        line-height: 1.15;
    }

    .project-task-nav__trigger {
        min-height: 3.25rem;
        max-height: 3.25rem;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        overflow: hidden;
    }

    .project-task-nav__eyebrow {
        display: none;
    }

    .project-task-nav__crumb-line,
    .project-task-nav__crumb {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
    }

    .project-task-nav__crumb-line {
        display: flex;
        align-items: center;
    }

    .project-task-nav__menu-glyph,
    .project-task-nav__header-settings {
        flex: 0 0 auto;
    }

    .project-task-nav__crumb strong,
    .project-task-nav__crumb-task {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow-wrap: normal;
        word-break: normal;
    }

    .project-task-nav__crumb strong {
        flex: 0 1 44%;
        max-width: 44%;
    }

    .project-task-nav__crumb-task {
        flex: 1 1 0;
        max-width: 100%;
    }
}

@media (max-width: 420px) {
    .project-task-nav__crumb strong {
        max-width: 5.25rem;
    }

    .project-task-nav__crumb-task {
        max-width: 6.25rem;
    }
}

/* Space reclamation: header-owned project/task nav keeps drawer behavior without a sidebar panel. */
@media (min-width: 769px) {
    .header-brand-group .project-task-nav__trigger {
        width: 100%;
        min-height: 44px;
        padding: 0.35rem 0.85rem;
        border: 1px solid color-mix(in srgb, var(--accent-color) 32%, transparent);
        border-radius: 999px;
        background: color-mix(in srgb, var(--primary-bg) 72%, transparent);
        box-shadow: 0 8px 24px color-mix(in srgb, var(--primary-bg) 22%, transparent);
        cursor: pointer;
    }

    .header-brand-group .project-task-nav__trigger:hover,
    .header-brand-group .project-task-nav__trigger:focus-visible {
        border-color: color-mix(in srgb, var(--accent-color) 52%, transparent);
        outline: 2px solid color-mix(in srgb, var(--accent-color) 24%, transparent);
        outline-offset: 2px;
    }

    .header-brand-group .project-task-nav__scrim {
        display: block;
    }

    .header-brand-group .project-task-nav__drawer {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1500;
        width: min(760px, 92vw);
        height: auto;
        max-height: none;
        padding: 1rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        transform: translateX(-105%);
        opacity: 1;
        pointer-events: auto;
        overflow-y: auto;
        border-right: 1px solid color-mix(in srgb, var(--accent-color) 28%, transparent);
        border-radius: 0;
        background: linear-gradient(180deg, color-mix(in srgb, var(--secondary-bg) 98%, transparent) 0%, var(--primary-bg) 100%);
        box-shadow: 22px 0 60px color-mix(in srgb, var(--primary-bg) 72%, transparent);
    }

    .header-brand-group .project-task-nav__drawer.is-open {
        transform: translateX(0);
    }

    .header-brand-group .project-task-nav__drawer-header,
    .header-brand-group .project-task-nav__close {
        display: flex !important;
    }

    .header-brand-group .project-task-nav__tree-layout,
    .header-brand-group .project-task-nav__columns,
    .header-brand-group .project-task-nav__routed-settings-shell {
        display: grid;
    }
}

/* Space reclamation visual correction: keep mobile header compact and chat composer in normal flow. */
@media (max-width: 780px) {
    .header-context-group {
        display: none;
    }

    #messages {
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
        scroll-padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }

    #chat-form {
        position: relative;
        bottom: auto;
        z-index: 30;
        flex: 0 0 auto;
    }
}

/* Space reclamation settings routing: keep form actions clear of the header context control after scroll-into-view. */
body.workspace-settings-active .workspace-settings-outlet {
    scroll-padding-top: 6rem;
}

body.workspace-settings-active .workspace-settings-outlet :where(button, input, textarea, select) {
    scroll-margin-top: 6rem;
}

/* Settings routing: header context remains fully interactive so users can navigate anywhere at all times. */
body.workspace-settings-active .global-header {
    pointer-events: auto;
}

body.workspace-settings-active .global-header :where(button, a, input, summary, [role="button"], project-task-nav) {
    pointer-events: auto;
}


/* Consolidated workspace/settings route polish.
   Keep this tail-level block after legacy responsive rules so routed settings retain their
   final workspace sizing, tap targets, and retired-sidebar cascade semantics. */
body.workspace-settings-active main.command-center-shell {
    align-items: start;
    overflow-y: auto;
}

body.workspace-settings-active .workspace-settings-outlet {
    display: grid;
    justify-items: center;
    align-content: start;
    width: 100%;
    min-height: 0;
    padding: clamp(1rem, 3vw, 2.25rem);
}

body.workspace-settings-active .workspace-settings-outlet .project-task-nav__settings-view {
    width: min(100%, 48rem);
    max-width: 48rem;
    min-height: auto !important;
    margin: 0 auto;
    padding: clamp(1.15rem, 2.6vw, 2rem);
    gap: clamp(0.85rem, 1.8vw, 1.15rem);
}

body.workspace-settings-active .workspace-settings-outlet .project-task-nav__settings-actions {
    margin-top: 0;
    position: static;
    bottom: auto;
    padding-top: 0.25rem;
    background: transparent;
}

body.workspace-settings-active .workspace-settings-outlet .project-task-nav__field input {
    width: 100%;
}

@media (max-width: 768px) {
    body.workspace-settings-active .workspace-settings-outlet {
        min-height: 0;
        padding: 0.85rem 1rem 1.25rem;
    }

    body.workspace-settings-active .workspace-settings-outlet .project-task-nav__settings-view {
        width: 100%;
        min-height: auto !important;
        margin: 0;
    }

    body.workspace-settings-active .workspace-settings-outlet .project-task-nav__settings-actions {
        flex-direction: column;
    }

    body.workspace-settings-active .workspace-settings-outlet .project-task-nav__settings-actions button {
        max-height: none;
    }
}

body.workspace-settings-active main.command-center-shell > .workspace-settings-outlet {
    grid-column: 1 / -1;
    justify-self: stretch;
    place-items: start center;
    width: 100vw;
    max-width: 100%;
}

@media (max-width: 768px) {
    body.workspace-settings-active .workspace-settings-outlet .project-task-nav__settings-actions > button,
    body.workspace-settings-active .workspace-settings-outlet .project-task-nav__primary-action,
    body.workspace-settings-active .workspace-settings-outlet .project-task-nav__danger-action {
        flex: 0 0 auto !important;
        min-height: 2.75rem;
        height: auto;
        padding: 0.65rem 0.85rem;
    }
}

body.workspace-settings-active main.command-center-shell > .workspace-settings-outlet > .project-task-nav__settings-view {
    justify-self: center;
}

@media (max-width: 768px) {
    body.workspace-settings-active main.command-center-shell > .workspace-settings-outlet {
        width: 100%;
    }
}

body.workspace-settings-active .workspace-settings-outlet > .project-task-nav__settings-view {
    width: min(48rem, calc(100vw - 4rem));
}

@media (max-width: 768px) {
    body.workspace-settings-active .workspace-settings-outlet > .project-task-nav__settings-view {
        width: min(100%, calc(100vw - 2rem));
    }
}

.app-frame > main.command-center-shell {
    grid-column: 1 / -1;
}

/* PWA install and true browser push activation banners */
pwa-notification-manager {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 40;
    display: grid;
    gap: 0.5rem;
    width: min(24rem, calc(100vw - 2rem));
    max-height: min(45vh, 24rem);
    overflow-y: auto;
    pointer-events: none;
}

.pwa-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid color-mix(in srgb, var(--accent-color) 24%, transparent);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--secondary-bg) 94%, transparent);
    box-shadow: 0 18px 48px color-mix(in srgb, var(--primary-bg) 62%, transparent);
    color: var(--text-color);
    max-height: 11rem;
    overflow: auto;
    pointer-events: auto;
}

.pwa-banner[data-state="installed"],
.pwa-banner[data-state="unavailable"],
.pwa-banner[data-state="unconfigured"],
.pwa-banner[data-state="denied"] {
    border-color: color-mix(in srgb, var(--text-color) 14%, transparent);
}

.pwa-banner--compact {
    padding: 0.55rem 0.7rem;
    gap: 0.5rem;
    pointer-events: none;
}

.pwa-banner--compact .pwa-banner__actions,
.pwa-banner--compact .pwa-banner button {
    pointer-events: auto;
}

.pwa-banner__copy {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.pwa-banner__copy strong {
    font-size: 0.92rem;
    font-weight: 700;
}

.pwa-banner__copy span {
    font-size: 0.82rem;
    line-height: 1.35;
    opacity: 0.76;
}

.pwa-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.pwa-banner button {
    border: 1px solid color-mix(in srgb, var(--accent-color) 32%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-color) 18%, transparent);
    color: var(--text-color);
    cursor: pointer;
    font: inherit;
    font-size: 0.82rem;
    padding: 0.45rem 0.7rem;
}

.pwa-banner button:hover,
.pwa-banner button:focus-visible {
    background: color-mix(in srgb, var(--accent-color) 30%, transparent);
    outline: 2px solid color-mix(in srgb, var(--accent-color) 44%, transparent);
    outline-offset: 2px;
}

.pwa-banner__dismiss {
    background: color-mix(in srgb, var(--secondary-bg) 88%, var(--text-color) 12%);
    color: var(--text-color);
}

.pwa-foreground-notices {
    display: grid;
    gap: 0.5rem;
    pointer-events: none;
}

.pwa-foreground-notice {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem 0.9rem;
    border: 1px solid color-mix(in srgb, var(--accent-color) 28%, transparent);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--secondary-bg) 96%, transparent);
    box-shadow: 0 18px 48px color-mix(in srgb, var(--primary-bg) 58%, transparent);
    color: var(--text-color);
    pointer-events: auto;
}

.pwa-foreground-notice__copy {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.pwa-foreground-notice__copy strong {
    font-size: 0.9rem;
    font-weight: 700;
}

.pwa-foreground-notice__copy span {
    font-size: 0.8rem;
    line-height: 1.35;
    opacity: 0.78;
}

@media (max-width: 640px) {
    pwa-notification-manager {
        right: 0.75rem;
        bottom: calc(env(safe-area-inset-bottom, 0rem) + 0.75rem);
        width: min(22rem, calc(100vw - 1.5rem));
        max-height: 30vh;
    }

    .pwa-banner {
        align-items: stretch;
        flex-direction: column;
        padding: 0.65rem 0.75rem;
        max-height: 8.5rem;
    }

    .pwa-banner--compact {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .pwa-banner--compact .pwa-banner__actions {
        justify-content: flex-end;
    }

    .pwa-banner__actions,
    .pwa-banner button {
        width: 100%;
    }

    .pwa-banner--compact .pwa-banner__actions,
    .pwa-banner--compact .pwa-banner button {
        width: auto;
    }
}

/* Notification settings controls */
.project-task-nav__notification-panel {
    display: grid;
    gap: 0.75rem;
    padding: 0.9rem;
    border: 1px solid color-mix(in srgb, var(--text-color) 12%, transparent);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--secondary-bg) 94%, transparent);
}

.project-task-nav__notification-panel h4 {
    margin: 0;
    font-size: 1rem;
}

.project-task-nav__notification-panel p {
    margin: 0;
    opacity: 0.78;
}

.project-task-nav__notification-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.55rem 0;
}

.project-task-nav__notification-row span {
    display: grid;
    gap: 0.2rem;
}

.project-task-nav__notification-row small,
.project-task-nav__settings-hint {
    font-size: 0.82rem;
    line-height: 1.35;
    opacity: 0.72;
}

.project-task-nav__notification-row select {
    max-width: 13rem;
    border: 1px solid color-mix(in srgb, var(--text-color) 16%, transparent);
    border-radius: 0.7rem;
    background: var(--primary-bg);
    color: var(--text-color);
    padding: 0.45rem 0.55rem;
}

.project-task-nav__test-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.project-task-nav__test-actions button,
.project-task-nav__notification-status {
    border-radius: 999px;
}

.project-task-nav__notification-status {
    margin: 0;
    padding: 0.55rem 0.75rem;
    background: color-mix(in srgb, var(--accent-color) 14%, transparent);
    color: var(--text-color);
    font-size: 0.88rem;
}

@media (max-width: 640px) {
    .project-task-nav__notification-row {
        grid-template-columns: 1fr;
    }

    .project-task-nav__notification-row select,
    .project-task-nav__test-actions button {
        width: 100%;
        max-width: none;
    }
}


.project-task-nav__device-prompt {
    margin: 0.85rem 0;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent-color) 12%, var(--secondary-bg));
    color: var(--text-color);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-color) 28%, transparent);
}

.project-task-nav__device-prompt strong {
    display: block;
    margin-bottom: 0.25rem;
}

.project-task-nav__device-prompt p {
    margin: 0;
    color: color-mix(in srgb, var(--text-color) 78%, transparent);
}
/* JSON Tree Viewer */
.json-tree-viewer {
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}
.json-tree-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(0, 0, 0, 0.2);
}
.json-tree-tab {
    padding: 0.4rem 0.8rem;
    background: none;
    border: none;
    color: var(--muted-text, #94a3b8);
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 500;
    transition: color 0.2s, background-color 0.2s;
    border-bottom: 2px solid transparent;
}
.json-tree-tab:hover {
    color: var(--text-color, #f1f5f9);
    background-color: rgba(255, 255, 255, 0.05);
}
.json-tree-tab.active {
    color: var(--accent-color, #2dd4bf);
    border-bottom-color: var(--accent-color, #2dd4bf);
}
.json-tree-content {
    padding: 0.5rem;
}
.json-tree-view {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.8em;
    line-height: 1.5;
}
.json-raw-view {
    display: none;
}
.json-raw-view pre {
    margin: 0;
    padding: 0.5rem;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    overflow-x: auto;
    max-height: 400px;
    overflow-y: auto;
}
.json-node {
    padding: 1px 0;
}
.json-node-header {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: default;
}
.json-node-header:hover {
    background-color: rgba(255, 255, 255, 0.03);
    border-radius: 3px;
}
.json-toggle {
    cursor: pointer;
    user-select: none;
    font-size: 0.7em;
    width: 16px;
    text-align: center;
    color: var(--muted-text, #94a3b8);
    flex-shrink: 0;
}
.json-toggle:hover {
    color: var(--accent-color, #2dd4bf);
}
.json-node-key {
    color: var(--accent-color, #2dd4bf);
    margin-right: 4px;
}
.json-type-indicator {
    color: var(--muted-text, #64748b);
    font-size: 0.85em;
    margin-left: auto;
}
.json-node-value {
    word-break: break-word;
}
.json-type-string {
    color: #22c55e;
}
.json-type-number {
    color: #3b82f6;
}
.json-type-boolean {
    color: #a855f7;
}
.json-type-null {
    color: #6b7280;
    font-style: italic;
}
.json-markdown-value {
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.15);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    max-width: 100%;
}
.json-markdown-value p {
    margin: 0.25rem 0;
}
.json-markdown-value code {
    background-color: rgba(0, 0, 0, 0.3);
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-size: 0.9em;
}
.json-markdown-value pre {
    background-color: rgba(0, 0, 0, 0.3);
    padding: 0.5rem;
    border-radius: 4px;
    overflow-x: auto;
    margin: 0.25rem 0;
}
.json-children {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    margin-left: 8px;
    padding-left: 4px;
}
.json-more, .json-depth-limit {
    color: var(--muted-text, #64748b);
    font-style: italic;
    font-size: 0.85em;
    padding: 2px 0;
}

/* ==========================================================================
   ELEVATION-BASED SAAS DESIGN SYSTEM OVERRIDES (Border-Less Layout)
   ========================================================================== */

/* 1. Global Header */
header.global-header {
    padding: 0 1.25rem !important;
    height: 44px !important;
    background: var(--bg-left-nav) !important;
    border-bottom: 1px solid #222222 !important;
    backdrop-filter: none !important;
    z-index: var(--z-header, 100);
}

.header-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-context-group h1 {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    color: var(--text-primary) !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
    margin: 0 !important;
}

/* 2. App Shell Layout & 3-Column Elevation Architecture (Zero Gaps) */
main.command-center-shell {
    height: calc(100vh - 44px);
    overflow: hidden;
    position: relative;
    display: flex;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--bg-main-chat) !important;
    box-sizing: border-box;
}

/* Panel 1: Left Sidebar Container (Workspace Projects - #161618) */
.header-brand-group .project-task-nav__drawer,
#project-task-nav-drawer,
.project-task-nav__drawer {
    background: var(--bg-left-nav) !important;
    border: none !important;
    border-right: 1px solid #222222 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box;
    overflow: hidden;
}

@media (min-width: 769px) {
    .header-brand-group {
        display: flex !important;
        align-items: center !important;
        height: 44px !important;
        min-width: 240px !important;
    }

    header.global-header {
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* Sliding Left Sidebar Drawer Panel (below 44px top navbar) */
    .header-brand-group .project-task-nav__drawer,
    #project-task-nav-drawer,
    .project-task-nav__drawer {
        position: fixed !important;
        top: 44px !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 260px !important;
        max-width: 260px !important;
        height: calc(100vh - 44px) !important;
        z-index: 1500 !important;
        background: var(--bg-left-nav, #161618) !important;
        border-right: 1px solid #222222 !important;
        border-radius: 0 !important;
        padding: 0.75rem !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
        transform: translateX(-105%);
        transition: transform 0.2s ease !important;
        box-shadow: 12px 0 32px rgba(0, 0, 0, 0.35) !important;
    }

    .project-task-nav__drawer.is-open {
        transform: translateX(0) !important;
    }

    body.project-task-nav-drawer-active main.command-center-shell {
        margin-left: 260px !important;
        width: calc(100% - 260px) !important;
    }

    body:not(.project-task-nav-drawer-active) main.command-center-shell {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

.header-brand-group .project-task-nav__drawer-header {
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 0.85rem !important;
    border-bottom: 1px solid #222222 !important;
    background: var(--bg-left-nav) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    white-space: nowrap !important;
}

.header-brand-group .project-task-nav__drawer-content {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 0.5rem 0 !important;
    background: var(--bg-left-nav) !important;
}

/* Panel 2: Middle Execution Tree Container (#0C0C0D) */
tree-visualizer,
tree-visualizer.active-work-surface {
    background: var(--bg-mid-tree) !important;
    border: none !important;
    border-right: 1px solid #222222 !important;
    border-radius: 0 !important;
    display: flex;
    flex-direction: column;
    width: 300px;
    height: 100%;
    overflow: hidden;
    z-index: 50;
    box-sizing: border-box;
    box-shadow: none !important;
    transition: transform 0.2s ease, width 0.2s ease;
}

.sidebar-header {
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: var(--bg-mid-tree) !important;
    border-bottom: 1px solid #222222 !important;
}

.sidebar-header-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    font-size: 0.8rem;
    color: var(--text-primary);
}

#agent-tree-container {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 0.5rem !important;
    background: var(--bg-mid-tree) !important;
}

/* 4. Execution Tree Cleanup (Middle Panel) */
.tree-node-wrapper,
.agent-node,
.agent-node-wrapper,
.agent-node-wrapper[data-depth="0"] > .agent-node,
.agent-node-wrapper[data-depth="0"] {
    background: transparent !important;
    border: none !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: 0.2rem !important;
}

.agent-node.active {
    background: rgba(255, 255, 255, 0.04) !important;
    border: none !important;
    border-radius: 4px !important;
}

.agent-node-wrapper[data-depth="0"] .agent-id-container {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
}

.agent-id-container {
    color: var(--text-primary) !important;
    font-size: 0.825rem !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
}

.node-details {
    line-height: 1.6 !important;
    color: var(--text-secondary) !important;
}

.node-details .budget-info,
.node-details .current-step,
.node-details .telemetry-info {
    color: var(--text-secondary) !important;
    font-size: 0.75rem !important;
    line-height: 1.6 !important;
}

/* Budget Progress Bar: Thin 2px line without encasing border box */
.budget-container {
    height: 2px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: none !important;
    border-radius: 1px !important;
    margin: 4px 0 !important;
}

.budget-bar {
    height: 100% !important;
    background: var(--text-secondary) !important;
    border: none !important;
    border-radius: 1px !important;
}

/* Sidebar Resizer */
#sidebar-resizer {
    width: 4px !important;
    margin: 0 -2px !important;
    background: transparent !important;
    cursor: col-resize !important;
    transition: background 0.15s !important;
    z-index: var(--z-resizer, 200);
}

#sidebar-resizer:hover, #sidebar-resizer:active {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* Panel 3: Right Main Chat Area (Pure OLED Black - #000000) */
chat-interface,
chat-interface.message-detail-surface {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0 !important;
    background: var(--bg-main-chat) !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: hidden;
    min-width: 0;
    box-sizing: border-box;
    box-shadow: none !important;
}

/* 5. Top Bar Visual Blending & Layout Controls */
.chat-context-panel {
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: var(--bg-main-chat) !important;
    border-bottom: 1px solid #222222 !important;
}

.chat-context-left {
    display: flex !important;
    align-items: center !important;
    gap: 0.65rem !important;
}

.active-agent-badge,
.chat-tot-toggle,
.btn-surface-action {
    background: rgba(255, 255, 255, 0.05) !important;
    border: none !important;
    color: var(--text-secondary) !important;
    border-radius: var(--radius-md) !important;
    font-size: 0.75rem !important;
    padding: 0.25rem 0.5rem !important;
}

.active-agent-badge {
    color: var(--text-primary) !important;
}

.chat-tot-toggle:hover,
.btn-surface-action:hover {
    color: var(--text-primary) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: none !important;
}

/* Standardized Close (x) Buttons */
.project-task-nav__close,
#close-sidebar,
.btn-close-surface {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: var(--text-secondary) !important;
    font-size: 1.1rem !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: color 0.15s ease !important;
    border-radius: 0 !important;
    line-height: 1 !important;
}

.project-task-nav__close:hover,
#close-sidebar:hover,
.btn-close-surface:hover,
.project-task-nav__close:focus-visible,
#close-sidebar:focus-visible,
.btn-close-surface:focus-visible {
    color: #FFFFFF !important;
    background: transparent !important;
    border: none !important;
}

/* Subtle Small + Icon Button next to Workspace Projects Header */
/* Header Title Group & Heading Fix (single row, no wrapping) */
/* Integrated Header Component of Left Navigation Sidebar */
.header-brand-group .project-task-nav__drawer-header,
.project-task-nav__drawer-header {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 0.75rem !important;
    border-bottom: 1px solid #222222 !important;
    background: var(--bg-left-nav, #161618) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}

.project-task-nav__header-selector {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    cursor: pointer !important;
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    outline: none !important;
    box-shadow: none !important;
}

.project-task-nav__selector-eyebrow {
    font-size: 0.68rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #8E8E93 !important;
    display: block !important;
    margin-bottom: 3px !important;
    line-height: 1 !important;
}

.project-task-nav__selector-main {
    display: flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    width: 100% !important;
    min-width: 0 !important;
}

.project-task-nav__folder-icon {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
    color: #8E8E93 !important;
    transition: color 0.15s ease !important;
}

.project-task-nav__selector-text {
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #FFFFFF !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
}

.project-task-nav__project-title {
    color: #FFFFFF !important;
    font-weight: 600 !important;
}

.project-task-nav__sep {
    color: #8E8E93 !important;
    font-weight: 400 !important;
    margin: 0 0.1rem !important;
}

.project-task-nav__task-title {
    color: #A1A1AA !important;
    font-weight: 400 !important;
}

.project-task-nav__chevron-icon {
    width: 10px !important;
    height: 10px !important;
    flex-shrink: 0 !important;
    color: #8E8E93 !important;
    transition: transform 0.2s ease, color 0.15s ease !important;
}

.project-task-nav__chevron-icon.is-open {
    transform: rotate(180deg) !important;
}

.project-task-nav__header-selector:hover .project-task-nav__folder-icon,
.project-task-nav__header-selector:hover .project-task-nav__chevron-icon {
    color: #FFFFFF !important;
}

.project-task-nav__header-selector:hover .project-task-nav__task-title {
    color: #E4E4E7 !important;
}

.project-task-nav__header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    flex-shrink: 0 !important;
}

.project-task-nav__action-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #8E8E93 !important;
    font-size: 0.95rem !important;
    line-height: 1 !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    border-radius: 4px !important;
    transition: color 0.15s ease, background-color 0.15s ease !important;
    padding: 0 !important;
    margin: 0 !important;
}

.project-task-nav__action-btn:hover,
.project-task-nav__action-btn:focus-visible {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.project-task-nav__close {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #8E8E93 !important;
    font-size: 0.95rem !important;
    line-height: 1 !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    border-radius: 4px !important;
    transition: color 0.15s ease, background-color 0.15s ease !important;
    padding: 0 !important;
    margin: 0 !important;
}

.project-task-nav__close:hover,
.project-task-nav__close:focus-visible {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

/* ------------------------------------------------------------- */
/* Workspace Projects Sidebar - Flat, Borderless File-Tree UI     */
/* ------------------------------------------------------------- */

/* Suppress all legacy pseudo-element arrows (ensures ONLY ONE ARROW) */
.project-task-nav__select::before,
.project-task-nav__project-node *::before,
.project-task-nav__tree-row *::before,
.project-task-nav__project-node > .project-task-nav__tree-row .project-task-nav__select::before,
.project-task-nav__project-node[aria-expanded="true"] > .project-task-nav__tree-row .project-task-nav__select::before {
    content: none !important;
    display: none !important;
}

/* 2. Completely Remove Nested Borders, Pills & Boxes */
.project-task-nav__tree-layout,
.project-task-nav__tree,
.project-task-nav__task-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.project-task-nav__tree {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

.project-task-nav__task-list {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

.project-task-nav__item,
.project-task-nav__project-node,
.project-task-nav__task-node,
.project-task-nav__add-task,
.tot_concept_9 {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    width: 100% !important;
}

.project-task-nav__tree-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* 4. List Layout & Alignment */
.project-task-nav__select {
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    width: 100% !important;
    min-height: 28px !important;
    padding: 0.35rem 0.75rem !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--text-secondary, #94a3b8) !important;
    cursor: pointer !important;
    text-align: left !important;
    outline: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    transition: color 0.15s ease !important;
}

/* Indent Child Task Items to align under parent label text (0.75rem + 10px chevron + 0.4rem gap = 1.75rem) */
.project-task-nav__task-node .project-task-nav__select,
.tot_concept_9 .project-task-nav__select {
    padding-left: 1.75rem !important;
}

.project-task-nav__chevron {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 10px !important;
    height: 10px !important;
    flex-shrink: 0 !important;
    color: var(--text-secondary, #94a3b8) !important;
    transition: transform 0.15s ease, color 0.15s ease !important;
}

.project-task-nav__chevron.is-expanded {
    transform: rotate(90deg) !important;
}

.project-task-nav__label {
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 0.8125rem !important;
    font-weight: 400 !important;
    color: var(--text-secondary, #94a3b8) !important;
    transition: color 0.15s ease, font-weight 0.15s ease !important;
}

/* Unselected Hover Effect (Interactive text color change without background boxes) */
.project-task-nav__item:not(.is-active):hover > .project-task-nav__tree-row .project-task-nav__select .project-task-nav__label,
.project-task-nav__item:not(.is-active):hover > .project-task-nav__tree-row .project-task-nav__select .project-task-nav__chevron,
.project-task-nav__select:hover .project-task-nav__label,
.project-task-nav__select:hover .project-task-nav__chevron {
    color: var(--text-primary, #F1F5F9) !important;
}

.project-task-nav__item:not(.is-active):hover,
.project-task-nav__item:not(.is-active):hover > .project-task-nav__tree-row,
.project-task-nav__select:hover {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 3. Flat Active States */

/* Active Child Task: Flat background #1F1F1F, full width, no borders, text #FFFFFF */
.project-task-nav__task-node.is-active,
.tot_concept_9.is-active {
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    background: #1F1F1F !important;
    width: 100% !important;
}

.project-task-nav__task-node.is-active .project-task-nav__select,
.tot_concept_9.is-active .project-task-nav__select {
    background: #1F1F1F !important;
    border: none !important;
    border-radius: 0 !important;
}

.project-task-nav__task-node.is-active .project-task-nav__label,
.tot_concept_9.is-active .project-task-nav__label {
    color: #FFFFFF !important;
    font-weight: 500 !important;
}

/* Active Parent Context: MUST NOT have a background color highlight. Indicate active context purely through typography (bold white) */
.project-task-nav__project-node.is-parent-active,
.project-task-nav__project-node.is-parent-active > .project-task-nav__tree-row,
.project-task-nav__project-node.is-parent-active > .project-task-nav__tree-row .project-task-nav__select {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.project-task-nav__project-node.is-parent-active > .project-task-nav__tree-row .project-task-nav__label,
.project-task-nav__project-node.is-parent-active > .project-task-nav__tree-row .project-task-nav__chevron {
    font-weight: 600 !important;
    color: #FFFFFF !important;
}

/* Active Parent Project when selected directly without child task */
.project-task-nav__project-node.is-active:not(.is-parent-active),
.project-task-nav__project-node.is-active:not(.is-parent-active) > .project-task-nav__tree-row,
.project-task-nav__project-node.is-active:not(.is-parent-active) > .project-task-nav__tree-row .project-task-nav__select {
    background: #1F1F1F !important;
    border: none !important;
    border-radius: 0 !important;
}

.project-task-nav__project-node.is-active:not(.is-parent-active) .project-task-nav__label,
.project-task-nav__project-node.is-active:not(.is-parent-active) .project-task-nav__chevron {
    font-weight: 600 !important;
    color: #FFFFFF !important;
}

/* Inline Add Task Button */
.project-task-nav__add-inline {
    display: block !important;
    width: 100% !important;
    min-height: 26px !important;
    padding: 0.3rem 0.75rem 0.3rem 1.75rem !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--text-secondary, #94a3b8) !important;
    font-size: 0.78rem !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    text-align: left !important;
    transition: color 0.15s ease !important;
}

.project-task-nav__add-inline:hover {
    color: var(--text-primary, #F1F5F9) !important;
    background: transparent !important;
}

/* Settings button icon */
.project-task-nav__settings-action {
    background: transparent !important;
    border: none !important;
    color: var(--text-secondary, #94a3b8) !important;
    font-size: 0.8rem !important;
    padding: 0.2rem 0.4rem !important;
    margin-right: 0.4rem !important;
    cursor: pointer !important;
    opacity: 0.5 !important;
    transition: opacity 0.15s ease, color 0.15s ease !important;
}

.project-task-nav__settings-action:hover,
.project-task-nav__settings-action.is-active {
    opacity: 1 !important;
    color: #FFFFFF !important;
    background: transparent !important;
    border: none !important;
}

/* De-emphasized Inline Filters */
.panopticon-filter-bar {
    display: flex !important;
    align-items: center !important;
    gap: 0.65rem !important;
    padding: 0.35rem 1.25rem !important;
    background: var(--bg-main-chat) !important;
    border-bottom: 1px solid #222222 !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    font-size: 12px !important;
}

.filter-bar-title {
    font-size: 12px !important;
    color: var(--text-secondary) !important;
    opacity: 0.7 !important;
    font-weight: 500 !important;
}

.filter-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 12px !important;
    padding: 2px 6px !important;
    background: transparent !important;
    border: none !important;
    color: var(--text-secondary) !important;
    opacity: 0.6 !important;
    cursor: pointer !important;
    transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease !important;
    border-radius: 4px !important;
}

.filter-chip input[type="checkbox"] {
    display: none !important;
}

.filter-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

.filter-dot-decisions { background-color: #3b82f6 !important; }
.filter-dot-tools { background-color: #f59e0b !important; }
.filter-dot-thinking { background-color: #8b5cf6 !important; }
.filter-dot-wakeups { background-color: #06b6d4 !important; }
.filter-dot-init { background-color: #10b981 !important; }
.filter-dot-alerts { background-color: #ef4444 !important; }

.filter-chip:hover,
.filter-chip:focus-within {
    opacity: 1 !important;
    color: var(--text-primary) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

.filter-chip:has(input:checked),
.filter-chip.active {
    opacity: 1 !important;
    color: var(--text-primary) !important;
    background: transparent !important;
}

.filter-chip:has(input:checked):hover,
.filter-chip.active:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

.filter-chip:not(:has(input:checked)):not(.active) {
    opacity: 0.35 !important;
    color: var(--text-muted) !important;
}

/* 3. STRIP All Nested & Double Borders (Right Panel Messages & Logs) */
.messages-outer-container,
#messages-container,
#messages {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 24px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--bg-main-chat) !important;
}

#messages {
    max-width: 70ch !important;
    width: 100% !important;
    margin: 0 auto !important;
    gap: 1.25rem !important;
}

/* Eliminate borders and bounding boxes from nested elements */
.message,
.message.agent,
.message.user,
.message.blocking_question,
.message.system,
.message.tool-call-msg,
.message-content,
details.tool-details,
.decision-details,
.decision-box,
.success-box,
.warning-box,
.error-box,
.json-tree-viewer,
.json-tree-tabs,
.json-markdown-value,
.tool-body,
pre,
code,
table,
th,
td,
blockquote {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Text sits directly on --bg-main-chat background with structural padding */
.message,
.message.agent,
.message-content {
    align-self: flex-start !important;
    background: transparent !important;
    padding: 0 24px !important;
    color: var(--text-primary) !important;
    max-width: 70ch !important;
    line-height: 1.6 !important;
    font-size: 0.9rem !important;
}

.message.user {
    align-self: flex-end !important;
    background: transparent !important;
    padding: 0 24px !important;
    color: var(--text-primary) !important;
    font-weight: 500 !important;
}

/* Event Logs, Details & Code blocks sitting directly on background */
details.tool-details,
.decision-details,
.json-tree-viewer,
.tool-body,
.decision-box {
    background: transparent !important;
    padding: 4px 0 !important;
}

details.tool-details summary,
.json-tree-tabs {
    background: transparent !important;
    padding: 4px 0 !important;
}

details.tool-details summary:hover {
    background: rgba(255, 255, 255, 0.03) !important;
}

pre,
code {
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: var(--radius-md) !important;
}

/* Target paragraph & list elements inside message blocks */
.message-content p,
.message-content li,
.message-content ul,
.message-content ol,
.message p,
.message li,
.message ul,
.message ol {
    line-height: 1.6 !important;
    color: var(--text-primary) !important;
    margin-bottom: 12px !important;
}

.message-content li:last-child,
.message-content p:last-child,
.message li:last-child,
.message p:last-child {
    margin-bottom: 0 !important;
}

/* 5. Bottom Input ("Send instructions..." with subtle #1A1A1A background, NO harsh borders) */
#chat-form {
    padding: 0.75rem 1.25rem !important;
    background: var(--bg-main-chat) !important;
    border-top: none !important;
    position: relative !important;
    z-index: 60 !important;
}

.chat-input-wrapper {
    max-width: 70ch !important;
    width: 100% !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    background: #1A1A1A !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    padding: 0.5rem 0.75rem !important;
    transition: background 0.15s ease !important;
    box-shadow: none !important;
}

.chat-input-wrapper:focus-within {
    background: #222222 !important;
    border: none !important;
}

#chat-input {
    flex: 1 !important;
    background: transparent !important;
    border: none !important;
    color: var(--text-primary) !important;
    font-size: 0.875rem !important;
    font-family: inherit !important;
    line-height: 1.5 !important;
    resize: none !important;
    outline: none !important;
    max-height: 140px !important;
}

#chat-input::placeholder {
    color: var(--text-secondary) !important;
}

.btn-send-message {
    background: var(--text-primary) !important;
    color: var(--bg-main-chat) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    padding: 0.4rem 0.85rem !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    transition: opacity 0.15s ease !important;
}

.btn-send-message:hover {
    transform: none !important;
    opacity: 0.9 !important;
}

/* Collapsed Tree Surface Behavior */
#sidebar-toggle:checked ~ main tree-visualizer {
    display: none !important;
}

#sidebar-toggle:checked ~ main #sidebar-resizer {
    display: none !important;
}

#sidebar-toggle:checked ~ main chat-interface {
    width: 100% !important;
}

/* Header Brand & Project/Task Navigation Overrides */
.header-brand-group .project-task-nav__crumb-shell {
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    position: relative !important;
    z-index: 10 !important;
}

.header-brand-group .project-task-nav__trigger {
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 0.65rem !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    font-size: 0.8rem !important;
    color: var(--text-primary) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.header-brand-group .project-task-nav__trigger:hover,
.header-brand-group .project-task-nav__trigger.is-active {
    background: rgba(255, 255, 255, 0.1) !important;
    border: none !important;
    color: var(--text-primary) !important;
}

.header-brand-group .project-task-nav__close {
    background: rgba(255, 255, 255, 0.05) !important;
    border: none !important;
    color: var(--text-secondary) !important;
    border-radius: var(--radius-md) !important;
    width: 22px !important;
    height: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.75rem !important;
    cursor: pointer !important;
}

.header-brand-group .project-task-nav__close:hover {
    color: var(--text-primary) !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Overlays & Notifications */
pwa-notification-manager {
    position: fixed !important;
    right: 24px !important;
    bottom: 24px !important;
    z-index: 1200 !important;
    pointer-events: none !important;
}

.pwa-banner,
.pwa-foreground-notice {
    background: #161618 !important;
    border: 1px solid #222222 !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
    color: var(--text-primary) !important;
    pointer-events: auto !important;
}

.pwa-banner button {
    background: rgba(255, 255, 255, 0.08) !important;
    border: none !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-md) !important;
}

.pwa-banner button:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* Workspace Settings Outlet */
.workspace-settings-outlet {
    flex: 1;
    overflow-y: auto;
    padding: 2rem 1rem;
    max-width: 70ch;
    margin: 0 auto;
    background: var(--bg-main-chat);
    color: var(--text-primary);
}

body.workspace-settings-active header.global-header {
    pointer-events: auto !important;
}

/* Mobile Breakpoints (<768px) */
@media (max-width: 768px) {
    header.global-header {
        padding: 0 0.5rem !important;
    }

    #sidebar-toggle:checked ~ main tree-visualizer {
        display: none !important;
    }

    #sidebar-toggle:not(:checked) ~ main tree-visualizer {
        display: flex !important;
        position: absolute;
        inset: 0;
        width: 100% !important;
        z-index: 150;
        background: var(--bg-mid-tree);
    }

    #sidebar-toggle:not(:checked) ~ main chat-interface {
        display: none !important;
    }

    #sidebar-toggle:checked ~ main chat-interface {
        display: flex !important;
        width: 100% !important;
        flex: 1 1 auto;
    }

    .panopticon-filter-bar {
        padding: 0.35rem 0.5rem !important;
    }

    #messages {
        padding: 16px 0 !important;
        max-width: 100% !important;
    }

    pwa-notification-manager {
        right: 0.5rem !important;
        bottom: 24px !important;
        width: calc(100vw - 1rem) !important;
    }

    .header-brand-group .project-task-nav__scrim {
        left: 0 !important;
        width: 100vw !important;
        z-index: 1999 !important;
    }

    .header-brand-group .project-task-nav__drawer {
        width: 100vw !important;
        max-width: 100vw !important;
        z-index: 2000 !important;
    }

    .desktop-tree-toggle {
        display: none !important;
    }

    #mobile-toggle,
    .chat-tot-toggle {
        display: none !important;
    }

    #mobile-hierarchy-back,
    #mobile-message-drilldown,
    .mobile-nav-link {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        outline: none !important;
        padding: 0 !important;
        color: var(--text-secondary) !important;
        font-size: 0.85rem !important;
        font-weight: 500 !important;
        cursor: pointer !important;
        transition: color 0.15s ease !important;
        text-decoration: none !important;
        min-height: auto !important;
        min-width: auto !important;
    }

    #mobile-hierarchy-back:hover,
    #mobile-message-drilldown:hover,
    .mobile-nav-link:hover,
    #mobile-hierarchy-back:active,
    #mobile-message-drilldown:active,
    .mobile-nav-link:active {
        color: var(--text-primary) !important;
        background: transparent !important;
        border: none !important;
    }

    .sidebar-header #close-sidebar {
        display: none !important;
    }
}

/* Global & Desktop Toggle Styles */
#mobile-toggle,
.chat-tot-toggle {
    display: none !important;
}

@media (min-width: 769px) {
    .desktop-tree-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
        padding: 0 !important;
        margin-right: 0.5rem !important;
        color: var(--text-secondary) !important;
        cursor: pointer !important;
        transition: color 0.15s ease !important;
        width: 24px !important;
        height: 24px !important;
    }

    .desktop-tree-toggle:hover,
    .desktop-tree-toggle:focus-visible {
        color: var(--text-primary) !important;
        background: transparent !important;
        border: none !important;
        outline: none !important;
    }

    .desktop-tree-toggle svg {
        width: 18px;
        height: 18px;
        stroke: currentColor;
    }

    #mobile-hierarchy-back,
    #mobile-message-drilldown,
    .mobile-nav-link {
        display: none !important;
    }
}