.material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        .glass-card {
            background: rgba(30, 41, 59, 0.8);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        .pulse-active {
            box-shadow: 0 0 0 0 rgba(78, 222, 163, 0.7);
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(78, 222, 163, 0.7); }
            70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(78, 222, 163, 0); }
            100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(78, 222, 163, 0); }
        }
        @keyframes pulse-ring {
            0% { transform: scale(.33); opacity: 1; }
            80%, 100% { opacity: 0; }
        }
        @keyframes pulse-dot {
            0% { transform: scale(.8); }
            50% { transform: scale(1); }
            100% { transform: scale(.8); }
        }
        .pulse-indicator {
            position: relative;
            width: 8px;
            height: 8px;
        }
        .pulse-dot-inner {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background-color: #4edea3;
            border-radius: 50%;
            animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -.4s infinite;
        }
        .pulse-ring-inner {
            position: absolute;
            top: -4px; left: -4px; width: 16px; height: 16px;
            border: 2px solid #4edea3;
            border-radius: 50%;
            animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
        }
        .shimmer-bg {
            background: linear-gradient(90deg, transparent, rgba(0, 219, 233, 0.05), transparent);
            background-size: 200% 100%;
            animation: shimmer 3s infinite linear;
        }
        @keyframes shimmer {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }
        .expandable-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out, opacity 0.2s ease-out;
            opacity: 0;
        }
        .expanded .expandable-content {
            max-height: 500px;
            opacity: 1;
            margin-top: 1rem;
        }
        .expanded .chevron-icon {
            transform: rotate(180deg);
        }
        body {
            background-color: #0d1515;
            color: #dce4e5;
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
        }

        /* Chat Transition Styles */
        .card-shrinking {
            transform: scale(0.9) translateY(20px);
            opacity: 0;
            pointer-events: none;
        }
        /* Persistent Factory Activity Panel Invariants */
        factory-activity-panel {
            display: block;
        }
        #factory-activity-section.card-shrinking,
        factory-activity-panel.card-shrinking,
        .persistent-activity-container.card-shrinking,
        .card-shrinking factory-activity-panel,
        .card-shrinking #factory-bottom-sheet {
            opacity: 1 !important;
            transform: none !important;
            pointer-events: auto !important;
        }
        /* Shared chat panel — one overlay reused by every agent */
        .chat-panel {
            position: fixed;
            top: 2.75rem; /* flush under the fixed header (h-touch-target) */
            left: 0;
            right: 0;
            bottom: calc(4rem + 124px); /* end just above the chat input area */
            z-index: 30; /* below carousel (z-40) and header (z-50) so the session chips stay visible */
            overflow-y: auto;
            background: rgba(13, 21, 21, 0.95);
            padding-top: 8rem; /* space for carousel; toggled inline by the carousel show/hide button */
            padding-bottom: 2rem;
            opacity: 0;
            transform: translateY(16px);
            pointer-events: none;
            transition: opacity 0.4s ease-out, transform 0.4s ease-out;
        }
        .chat-panel.chat-panel-open {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

        .header-transitioning .title-text {
            opacity: 0;
        }
        .header-transitioning .chat-title {
            opacity: 1;
            transform: translateY(0);
        }

        .shader-bg {
            position: fixed;
            inset: 0;
            z-index: -1;
            opacity: 0.15;
            pointer-events: none;
        }
        .custom-scrollbar::-webkit-scrollbar { width: 4px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #3b494b; border-radius: 2px; }
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        .pb-safe { padding-bottom: env(safe-area-inset-bottom, 0px); }

        /* ============================================================
           Mobile (<1024px): Compact vertical spacing & chat height optimization.
           ============================================================ */
        @media (max-width: 1023px) {
            #main-header {
                height: 2.75rem !important;
                padding-left: 0.75rem;
                padding-right: 0.75rem;
            }
            #main-content {
                padding-top: 3.75rem !important;
            }

            /* Agent Chips Carousel */
            #active-session-carousel {
                top: 2.75rem !important;
                padding-top: 0.25rem !important;
                padding-bottom: 0.25rem !important;
            }
            .session-chip {
                padding-top: 0.25rem !important;
                padding-bottom: 0.25rem !important;
                padding-left: 0.625rem !important;
                padding-right: 0.625rem !important;
            }

            /* Bottom Tab Navigation Bar */
            #main-nav {
                height: calc(3rem + env(safe-area-inset-bottom, 0px)) !important;
                padding-top: 0.25rem !important;
                padding-bottom: calc(0.25rem + env(safe-area-inset-bottom, 0px)) !important;
            }
            #main-nav .nav-btn {
                padding-top: 0.125rem !important;
                padding-bottom: 0.125rem !important;
            }
            #main-nav .material-symbols-outlined {
                font-size: 20px !important;
            }
            #main-nav .font-label-caps {
                font-size: 9px !important;
                margin-top: 0.125rem !important;
            }

            /* Chat Input Area & Quick Actions */
            #chat-input-area {
                bottom: calc(3rem + env(safe-area-inset-bottom, 0px)) !important;
            }
            #chat-input-area .quick-action-container {
                padding-top: 0.25rem !important;
                padding-bottom: 0.25rem !important;
                padding-left: 0.75rem !important;
                padding-right: 0.75rem !important;
            }
            #chat-input-area .quick-action {
                padding-top: 0.25rem !important;
                padding-bottom: 0.25rem !important;
                padding-left: 0.625rem !important;
                padding-right: 0.625rem !important;
                font-size: 10px !important;
            }
            #chat-input-area .input-bar-container {
                padding-top: 0.25rem !important;
                padding-bottom: 0.375rem !important;
                padding-left: 0.75rem !important;
                padding-right: 0.75rem !important;
            }
            #chat-input-area .input-box {
                padding-top: 0.125rem !important;
                padding-bottom: 0.125rem !important;
                padding-left: 0.5rem !important;
                padding-right: 0.375rem !important;
            }
            #chat-input {
                padding-top: 0.25rem !important;
                padding-bottom: 0.25rem !important;
                max-height: 5rem !important; /* 80px max height on mobile */
                font-size: 14px !important;
            }
            #chat-send {
                width: 2.25rem !important;
                height: 2.25rem !important;
            }

            /* Chat Panel Bounds & Padding */
            .chat-panel {
                top: 2.75rem !important;
                bottom: 7.25rem;
                padding-top: 5.5rem;
                padding-bottom: 0.75rem !important;
            }
        }

        /* ============================================================
           Desktop (>=1024px): persistent two-pane workspace.
           The mobile markup is re-laid into a grid and the mobile
           "chat mode" overlay toggles are neutralized so both panes
           are always visible. No DOM changes — layout only.
           ============================================================ */
        @media (min-width: 1024px) {
            body {
                display: grid;
                grid-template-columns: 380px minmax(0, 1fr);
                grid-template-rows: auto minmax(0, 1fr) auto;
                height: 100vh;
                overflow: hidden;
                padding-bottom: 0 !important;
            }

            /* Ensure the shader background covers the full viewport on the desktop grid layout. */
            .shader-bg,
            #shader-canvas-ANIMATION_14 {
                width: 100vw;
                height: 100vh;
            }

            /* --- Left sidebar --- */
            /* Navigation pinned to the top of the sidebar */
            #main-nav {
                position: static !important;
                grid-column: 1;
                grid-row: 1;
                width: auto !important;
                height: auto !important;
                z-index: auto !important;
                justify-content: flex-start;
                gap: 0.25rem;
                padding: 0.5rem 0.75rem;
                border-top: none !important;
                border-right: 1px solid rgba(255, 255, 255, 0.08);
                border-bottom: 1px solid rgba(255, 255, 255, 0.08);
                background: rgba(21, 29, 30, 0.7);
            }
            /* The agent roster: stats, search, expandable cards */
            #main-content {
                grid-column: 1;
                grid-row: 2 / 4;
                min-height: 0;
                overflow-y: auto;
                padding-top: 1rem !important;
                padding-bottom: 1.5rem;
                border-right: 1px solid rgba(255, 255, 255, 0.08);
                background: rgba(16, 23, 23, 0.55);
            }
            #main-content .sticky { top: 0 !important; }

            /* --- Right workspace --- */
            /* Header names the selected agent */
            #main-header {
                position: static !important;
                grid-column: 2;
                grid-row: 1;
                width: auto !important;
                height: auto !important;
                min-height: 3.5rem;
                z-index: auto !important;
            }
            #main-header > div:first-child .title-text { display: none !important; }
            #header-action-btn { display: none !important; }

            /* Workspace body holding chat panel and optional canvas side-panel */
            #workspace-body {
                grid-column: 2;
                grid-row: 2;
                display: flex;
                flex-direction: row;
                min-height: 0;
                height: 100%;
                width: 100%;
                overflow: hidden;
            }

            #chat-panel {
                position: relative !important;
                flex: 1 1 100%;
                inset: auto !important;
                height: 100% !important;
                min-height: 0;
                overflow-y: auto;
                opacity: 1 !important;
                transform: none !important;
                pointer-events: auto !important;
                padding-top: 1.5rem !important;
                padding-bottom: 1.5rem !important;
                transition: flex 0.3s ease;
            }

            #workspace-body.has-canvas #chat-panel {
                flex: 1 1 50%;
            }

            .canvas-panel {
                position: relative !important;
                inset: auto !important;
                flex: 1 1 50%;
                min-width: 0;
                height: 100%;
                overflow: hidden;
                border-top: none;
                transition: flex 0.3s ease;
            }
            #chat-thread { max-width: 60rem; width: 100%; margin-inline: auto; }

            /* Composer, aligned to the same measure */
            #chat-input-area {
                position: static !important;
                grid-column: 2;
                grid-row: 3;
                opacity: 1 !important;
                transform: none !important;
                pointer-events: auto !important;
            }
            #chat-input-area > div { max-width: 60rem; margin-inline: auto; }

            /* Mobile-only chrome is redundant here */
            #active-session-carousel,
            #fab,
            #back-btn { display: none !important; }

            /* Selecting an agent must not fade the sidebar roster */
            .card-shrinking {
                opacity: 1 !important;
                transform: none !important;
                pointer-events: auto !important;
            }

            /* Header always reads as the chat header for the chosen agent */
            .chat-title {
                position: static !important;
                left: auto !important;
                opacity: 1 !important;
                transform: none !important;
            }
        }

        /* ============================================================
           Canvas UI Side-Panel & Glassmorphism Styling
           ============================================================ */
        .workspace-body {
            display: contents;
        }

        .canvas-panel {
            background: rgba(13, 21, 21, 0.92);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-left: 1px solid rgba(255, 255, 255, 0.08);
            display: flex;
            flex-direction: column;
            z-index: 45;
            transition: all 0.3s ease-in-out;
        }

        @media (max-width: 1023px) {
            .canvas-panel {
                position: fixed;
                top: 2.75rem;
                left: 0;
                right: 0;
                bottom: calc(3rem + env(safe-area-inset-bottom, 0px));
                width: 100%;
                height: auto;
            }
        }

        .canvas-tab-bar-container {
            user-select: none;
        }

        .canvas-tab-bar::-webkit-scrollbar {
            height: 3px;
        }
        .canvas-tab-bar::-webkit-scrollbar-thumb {
            background: #3b494b;
            border-radius: 2px;
        }

        .canvas-tab-item {
            user-select: none;
            white-space: nowrap;
        }

        .canvas-tab-item.active {
            box-shadow: 0 0 10px rgba(0, 240, 255, 0.15);
        }

        .canvas-content-pane::-webkit-scrollbar {
            width: 4px;
        }
        .canvas-content-pane::-webkit-scrollbar-track {
            background: transparent;
        }
        .canvas-content-pane::-webkit-scrollbar-thumb {
            background: #3b494b;
            border-radius: 2px;
        }

        /* ============================================================
           Continuation Overlay & Roster Badge Styles
           ============================================================ */
        #continuation-panel {
            background: rgba(20, 27, 38, 0.95);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 180, 0, 0.35);
            box-shadow: 0 0 25px rgba(255, 180, 0, 0.15);
        }

        #btn-approve-continuation {
            background: linear-gradient(135deg, #00f0ff 0%, #00a8ff 100%);
            color: #0d1515;
            font-weight: 600;
        }

        #btn-approve-continuation:hover {
            box-shadow: 0 0 15px rgba(0, 240, 255, 0.4);
        }

        #btn-decline-continuation {
            background: rgba(255, 82, 82, 0.1);
            border: 1px solid rgba(255, 82, 82, 0.3);
            color: #ff5252;
        }

        #btn-decline-continuation:hover {
            background: rgba(255, 82, 82, 0.2);
            box-shadow: 0 0 12px rgba(255, 82, 82, 0.2);
        }

        .session-chip {
            position: relative;
        }

        .continuation-badge {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 10px;
            height: 10px;
            background-color: #ff3b30;
            border-radius: 50%;
            box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.7);
            animation: continuation-badge-pulse 1.5s infinite;
            z-index: 10;
        }

        @keyframes continuation-badge-pulse {
            0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.7); }
            70% { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(255, 59, 48, 0); }
            100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); }
        }

        .agent-card.awaiting-continuation {
            border-color: rgba(255, 59, 48, 0.6) !important;
            box-shadow: 0 0 15px rgba(255, 59, 48, 0.25) !important;
        }

        .session-chip.awaiting-continuation {
            border-color: rgba(255, 59, 48, 0.6) !important;
        }

        .mic-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 50%;
            border: 1px solid rgba(0, 240, 255, 0.3);
            background: rgba(0, 240, 255, 0.1);
            color: #00f0ff;
            cursor: pointer;
            transition: all 0.2s ease;
            flex-shrink: 0;
        }

        .mic-btn:hover {
            background: rgba(0, 240, 255, 0.2);
            border-color: #00f0ff;
        }

        .mic-btn.listening {
            background: rgba(255, 0, 127, 0.3);
            border-color: #ff007f;
            animation: pulse 1s infinite;
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }

        .mic-icon {
            font-size: 1.25rem;
        }

        /* Factory Worklog Drawer */
        factory-worklog-drawer {
            display: block;
        }

        .factory-worklog-drawer-container.card-shrinking,
        factory-worklog-drawer.card-shrinking,
        .card-shrinking factory-worklog-drawer {
            opacity: 1 !important;
            transform: none !important;
            pointer-events: auto !important;
        }

        .worklog-drawer-panel {
            box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
        }

        .worklog-reasoning {
            border-left: 3px solid #00f0ff;
            background: rgba(0, 240, 255, 0.04);
        }

        .worklog-tool-call {
            transition: border-color 0.2s ease;
        }

        .worklog-tool-call:hover {
            border-color: rgba(0, 240, 255, 0.4);
        }
        /* BUG-FACTORY-UI-001: count strip (Pending/Active/Done/Failed) + bucket hide */
        .factory-count-strip {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            padding: 0 1px 8px;
        }
        .factory-count-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 3px 10px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(30, 41, 59, 0.6);
            color: inherit;
            font-size: 11px;
            line-height: 1;
            cursor: default;
            transition: border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
        }
        .factory-count-chip__label {
            font-weight: 600;
            letter-spacing: 0.02em;
            opacity: 0.85;
        }
        .factory-count-chip__value {
            font-family: ui-monospace, monospace;
            font-weight: 700;
        }
        .factory-count-chip--pending { border-color: rgba(148, 163, 184, 0.35); }
        .factory-count-chip--active { border-color: rgba(78, 222, 163, 0.45); }
        .factory-count-chip--done { border-color: rgba(96, 165, 250, 0.45); }
        .factory-count-chip--failed { border-color: rgba(248, 113, 113, 0.45); }
        .factory-count-chip--done, .factory-count-chip--failed { cursor: pointer; }
        .factory-count-chip--done:hover, .factory-count-chip--failed:hover { background: rgba(255, 255, 255, 0.05); }
        .factory-count-chip--selected {
            background: rgba(96, 165, 250, 0.14);
            box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.5);
        }
        .factory-count-chip--failed.factory-count-chip--selected {
            background: rgba(248, 113, 113, 0.14);
            box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.5);
        }
        .factory-bucket-hidden { display: none !important; }

        /* BUG-FACTORY-UI-001: the "Orchestrate agents..." dashboard search input is
           non-functional (no handler is wired). Hide it from the live UI without
           touching index.html (that file is owned outside this job's file fence).
           Hiding the input alone would strand the sticky wrapper and its
           magnifier icon, so the .sticky parent carrying that input is
           hidden as well. */
        .sticky:has(input[aria-label="Search agents"]),
        input[aria-label="Search agents"] {
            display: none !important;
        }