:root {
            --primary: #3b82f6;
            --primary-hover: #2563eb;
            --primary-light: #dbeafe;
            --bg: #ffffff;
            --bg-secondary: #f8f9fa;
            --border: #dee2e6;
            --text: #333;
            --text-muted: #888;
            --success: #22c55e;
            --warning: #fbbf24;
            --danger: #ef4444;
        }

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

        /* Lucide icons - consistent sizing */
        [data-lucide] {
            width: 1em;
            height: 1em;
            stroke-width: 2;
            vertical-align: middle;
        }

        .lucide-icon {
            width: 1em;
            height: 1em;
            stroke-width: 2;
            vertical-align: middle;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
            background: var(--bg);
            color: var(--text);
            height: 100vh;
            height: 100dvh; /* Dynamic viewport height for mobile */
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .header {
            background: #c8d5e3;
            padding: 0.75rem 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--border);
            z-index: 10;
        }

        .header h1 {
            font-size: 1.25rem;
            color: var(--primary);
        }

        .header-title-link {
            cursor: pointer;
        }

        .header-title-link:hover {
            opacity: 0.8;
        }

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


        /* Info Modal - Academic Style with Helvetica */
        .info-modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.4);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }

        .info-modal-overlay.active {
            display: flex;
        }

        .info-modal {
            background: #ffffff;
            border: 1px solid #e0e0e0;
            max-width: 800px;
            max-height: 90vh;
            width: 94%;
            display: flex;
            flex-direction: column;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        }

        .info-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.25rem 1.75rem;
            border-bottom: 1px solid #e0e0e0;
            background: #fafafa;
        }

        .info-modal-header h2 {
            margin: 0;
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            font-size: 1.25rem;
            color: #1a1a1a;
            font-weight: 500;
            letter-spacing: -0.3px;
        }

        .info-modal-close {
            background: transparent;
            border: none;
            font-size: 1.5rem;
            color: #888;
            cursor: pointer;
            padding: 0.25rem 0.5rem;
            line-height: 1;
            transition: color 0.15s;
        }

        .info-modal-close:hover {
            color: #333;
        }

        .info-modal-content {
            padding: 1.75rem 2rem;
            overflow-y: auto;
            color: #333;
            line-height: 1.65;
            font-size: 0.9rem;
            background: #ffffff;
        }

        .info-section {
            margin-bottom: 2rem;
        }

        .info-section:last-child {
            margin-bottom: 0;
        }

        .info-section h3 {
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            color: #1a1a1a;
            font-size: 1.05rem;
            font-weight: 600;
            margin: 0 0 1rem 0;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid #e0e0e0;
        }

        .info-section h4 {
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            color: #333;
            font-size: 0.95rem;
            font-weight: 600;
            margin: 1.5rem 0 0.5rem 0;
        }

        .info-section h4:first-of-type {
            margin-top: 1rem;
        }

        .info-section p {
            margin: 0 0 0.9rem 0;
            color: #444;
            text-align: justify;
            hyphens: auto;
        }

        .info-section ul {
            margin: 0.75rem 0;
            padding-left: 1.5rem;
        }

        .info-section li {
            margin-bottom: 0.4rem;
            color: #444;
        }

        .info-section li strong {
            color: #1a1a1a;
            font-weight: 600;
        }

        .info-overview {
            background: #f7f8fa;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 1.5rem 1.75rem;
        }

        .info-overview h3 {
            border-bottom: none;
            padding-bottom: 0;
            font-size: 1.15rem;
            margin-bottom: 0.75rem;
        }

        .info-overview ol {
            margin: 0.75rem 0;
            padding-left: 1.5rem;
        }

        .info-overview ol li {
            margin-bottom: 0.4rem;
            color: #444;
        }

        /* Thesis statement - conservative */
        .thesis-statement {
            margin: 1.25rem 0;
            padding: 1.25rem 1.5rem;
            background: #f8f8f8;
            border: 1px solid #e0e0e0;
            border-left: 3px solid #333;
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            font-size: 0.95rem;
            font-style: italic;
            line-height: 1.6;
            color: #1a1a1a;
        }

        /* Definition block */
        .definition-block {
            margin: 1rem 0;
            padding: 1rem 1.25rem;
            background: #fafafa;
            border: 1px solid #e0e0e0;
        }

        .definition-block p {
            margin: 0 0 0.5rem 0;
            font-size: 0.88rem;
        }

        .definition-block p:last-child {
            margin-bottom: 0;
        }

        /* Comparison table - conservative */
        .comparison-table {
            width: 100%;
            margin: 1rem 0;
            border-collapse: collapse;
            font-size: 0.85rem;
        }

        .comparison-table td {
            padding: 0.6rem 0.8rem;
            border: 1px solid #e0e0e0;
            vertical-align: top;
        }

        .comparison-table td:first-child {
            width: 45%;
            font-weight: 500;
            background: #fafafa;
            color: #333;
        }

        .comparison-table td:last-child {
            color: #555;
        }

        /* Equations */
        .equation {
            text-align: center;
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            font-style: italic;
            color: #333;
            margin: 1rem 0;
            padding: 0.75rem;
            background: #fafafa;
            border: 1px solid #e8e8e8;
        }

        /* References section */
        .references-section {
            background: #fafafa;
            padding: 1.25rem 1.5rem;
            margin-top: 2rem;
            border: 1px solid #e0e0e0;
        }

        .references-section h3 {
            border-bottom: none;
            padding-bottom: 0;
            margin-bottom: 0.75rem;
        }

        .references {
            font-size: 0.8rem;
            line-height: 1.6;
        }

        .references p {
            margin: 0 0 0.5rem 0;
            padding-left: 1.5rem;
            text-indent: -1.5rem;
            text-align: left;
            color: #555;
        }

        .references a {
            color: #666;
            text-decoration: none;
            font-size: 0.75rem;
        }

        .references a:hover {
            color: #333;
            text-decoration: underline;
        }

        .references em {
            font-style: italic;
        }

        /* Footer */
        .info-footer {
            text-align: center;
            padding-top: 1.5rem;
            margin-top: 1rem;
            border-top: 1px solid #e0e0e0;
        }

        .info-footer p {
            text-align: center;
            color: #888;
            font-size: 0.8rem;
            margin: 0;
        }

        /* Legacy styles kept for compatibility but updated to Helvetica */
        .pivot-table {
            margin: 1rem 0;
            border: 1px solid #e0e0e0;
            overflow: hidden;
            background: #fff;
        }

        .pivot-header {
            background: #333;
            color: #fff;
            padding: 0.6rem 1rem;
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            font-weight: 500;
            font-size: 0.85rem;
            text-align: center;
        }

        .pivot-row {
            display: flex;
            border-bottom: 1px solid #e8e8e8;
            padding: 0.6rem 1rem;
        }

        .pivot-row:last-child {
            border-bottom: none;
        }

        .pivot-factor {
            min-width: 150px;
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            font-weight: 500;
            font-size: 0.85rem;
        }

        .pivot-result {
            flex: 1;
            font-size: 0.85rem;
            color: #555;
            padding-left: 1rem;
            border-left: 1px solid #e8e8e8;
        }

        .pivot-problem {
            background: #fafafa;
        }

        .pivot-problem .pivot-factor {
            color: #666;
        }

        .pivot-solution {
            background: #f5f5f5;
        }

        .pivot-solution .pivot-factor {
            color: #333;
        }

        .pivot-solution .pivot-result {
            color: #333;
            font-weight: 500;
        }

        .comparison-list {
            display: flex;
            flex-wrap: wrap;
            gap: 0.4rem 1rem;
            padding-left: 0;
            list-style: none;
            margin: 0.75rem 0;
        }

        .comparison-list li {
            margin: 0;
            padding: 0.2rem 0.6rem;
            background: #f5f5f5;
            border: 1px solid #e0e0e0;
            font-size: 0.8rem;
            color: #666;
        }

        .comparison-list li::before {
            content: none;
        }

        .insight-box {
            margin: 1rem 0;
            background: #fff;
            border: 1px solid #e0e0e0;
            overflow: hidden;
        }

        .insight-comparison {
            display: flex;
            flex-direction: column;
        }

        .insight-item {
            display: flex;
            flex-direction: column;
            padding: 0.75rem 1rem;
            border-bottom: 1px solid #e8e8e8;
            background: #fafafa;
        }

        .insight-item.insight-problem {
            background: #f5f5f5;
        }

        .insight-label {
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            font-weight: 500;
            font-size: 0.85rem;
            color: #333;
            margin-bottom: 0.25rem;
        }

        .insight-item.insight-problem .insight-label {
            color: #555;
        }

        .insight-meaning {
            font-size: 0.85rem;
            color: #555;
            line-height: 1.5;
        }

        .insight-conclusion {
            padding: 0.75rem 1rem;
            background: #333;
            color: #fff;
            text-align: center;
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            font-size: 0.9rem;
        }

        .insight-statement {
            margin: 1rem 0;
            padding: 1rem 1.25rem;
            background: #fafafa;
            border: 1px solid #e0e0e0;
            border-left: 3px solid #666;
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            font-size: 0.9rem;
            font-style: italic;
            line-height: 1.5;
            color: #333;
        }

        .info-contribution {
            margin: 1rem 0;
            padding: 0.75rem 1rem;
            background: #fafafa;
            border-left: 2px solid #888;
        }

        .info-contribution h4 {
            margin: 0 0 0.4rem 0;
            color: #333;
            font-style: normal;
        }

        .info-contribution p {
            margin: 0;
        }

        .info-specs {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0.75rem;
            margin-top: 1rem;
        }

        .info-spec {
            background: #fafafa;
            padding: 0.75rem 1rem;
            border: 1px solid #e0e0e0;
        }

        .spec-label {
            display: block;
            font-size: 0.7rem;
            color: #888;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 0.35rem;
            font-weight: 600;
        }

        .spec-value {
            display: block;
            color: #1a1a1a;
            font-size: 0.9rem;
        }

        .info-metrics, .info-params {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .info-metric, .info-param {
            background: #fff;
            padding: 1rem 1.25rem;
            border: 1px solid #ddd;
            border-left: 3px solid #2563eb;
        }

        .metric-name, .param-name {
            display: block;
            font-family: 'Georgia', 'Times New Roman', serif;
            color: #1a1a1a;
            font-weight: 600;
            font-size: 0.95rem;
            margin-bottom: 0.35rem;
        }

        .metric-desc, .param-desc {
            display: block;
            color: #555;
            font-size: 0.9rem;
            line-height: 1.5;
        }

        .info-tags {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            margin: 1.25rem 0;
        }

        .info-tag {
            display: flex;
            align-items: baseline;
            gap: 1rem;
            padding: 0.75rem 1rem;
            background: #fff;
            border: 1px solid #ddd;
        }

        .info-tag .tag-name {
            min-width: 140px;
            font-family: 'Georgia', 'Times New Roman', serif;
            font-weight: 600;
            font-size: 0.9rem;
        }

        .info-tag .tag-desc {
            color: #555;
            font-size: 0.9rem;
            flex: 1;
        }

        .info-tag.tag-stable .tag-name { color: #16a34a; }
        .info-tag.tag-brief-detour .tag-name { color: #65a30d; }
        .info-tag.tag-strained .tag-name { color: #ca8a04; }
        .info-tag.tag-fragmented .tag-name { color: #ea580c; }
        .info-tag.tag-runaway .tag-name { color: #dc2626; }

        .info-legend {
            display: flex;
            flex-direction: column;
            gap: 0.6rem;
            margin: 1.25rem 0;
            padding: 1rem;
            background: #fff;
            border: 1px solid #ddd;
        }

        .info-legend-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            font-size: 0.9rem;
            color: #333;
        }

        .info-legend-item strong {
            color: #1a1a1a;
        }

        .legend-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            flex-shrink: 0;
            border: 1px solid rgba(0,0,0,0.1);
        }

        .legend-line {
            width: 24px;
            height: 4px;
            border-radius: 2px;
            flex-shrink: 0;
        }

        .info-architecture {
            background: #f5f5f0;
            padding: 1.25rem;
            border: 1px solid #ddd;
            font-family: 'SF Mono', Monaco, 'Courier New', monospace;
            font-size: 0.8rem;
            color: #2c3e50;
            overflow-x: auto;
            line-height: 1.6;
            margin: 0;
            white-space: pre;
        }

        .info-footer {
            text-align: center;
            padding-top: 1.5rem;
            margin-top: 0.5rem;
            border-top: 1px solid #ccc;
        }

        .info-footer p {
            color: #666;
            font-size: 0.85rem;
            font-style: italic;
            margin: 0;
        }

        @media (max-width: 600px) {
            .info-modal-content {
                padding: 1.5rem;
            }

            .info-specs {
                grid-template-columns: 1fr;
            }

            .info-tag {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.25rem;
            }

            .info-tag .tag-name {
                min-width: auto;
            }

            .info-modal-header h2 {
                font-size: 1.25rem;
            }
        }

        .status {
            font-size: 0.8rem;
            color: #666;
            cursor: pointer;
            transition: opacity 0.2s;
        }
        .status:hover {
            opacity: 0.7;
        }

        .status.ready {
            color: var(--success);
        }

        .status.loading {
            color: var(--primary);
            animation: statusPulse 2s ease-in-out infinite;
        }

        .status.error {
            color: var(--danger);
        }

        @keyframes statusPulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.4; }
        }

        .model-picker-dropdown {
            position: fixed;
            z-index: 10000;
            background: var(--bg-primary, #fff);
            border: 1px solid var(--border, #e5e7eb);
            border-radius: 8px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.15);
            min-width: 220px;
            padding: 4px;
            animation: pickerFadeIn 0.15s ease-out;
        }
        @keyframes pickerFadeIn {
            from { opacity: 0; transform: translateY(-4px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .model-picker-item {
            display: flex;
            flex-direction: column;
            padding: 8px 12px;
            border-radius: 6px;
            cursor: pointer;
            transition: background 0.15s;
        }
        .model-picker-item:hover {
            background: var(--bg-secondary, #f3f4f6);
        }
        .model-picker-item.active {
            background: rgba(99, 102, 241, 0.08);
        }
        .model-picker-item.active .model-picker-name {
            color: var(--primary, #6366f1);
            font-weight: 600;
        }
        .model-picker-name {
            font-size: 0.8rem;
            color: var(--text-primary, #1f2937);
        }
        .model-picker-meta {
            font-size: 0.65rem;
            color: var(--text-secondary, #6b7280);
            margin-top: 1px;
        }

        .info-bar-group {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            justify-content: flex-end;
        }

        .info-bar {
            width: 75px;
            height: 6px;
            background: #e9ecef;
            border-radius: 3px;
            overflow: hidden;
        }

        .info-bar-fill {
            height: 100%;
            background: #4ade80;
            transition: width 0.3s, background 0.3s;
        }

        .info-bar-fill.warning { background: var(--warning); }
        .info-bar-fill.danger { background: var(--danger); }

        .model-info {
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
            padding: 0.5rem 0.75rem;
            font-size: 0.7rem;
            color: var(--text-muted);
            border-bottom: 1px solid var(--border);
            background: var(--bg-secondary);
        }

        .model-info > span {
            display: flex;
            align-items: center;
            gap: 0.35rem;
        }

        .model-info .info-bar-group {
            margin-left: auto;
        }

        /* Main three-column layout */
        .main-container {
            flex: 1;
            display: flex;
            overflow: hidden;
        }

        /* Left Sidebar - Conversations */
        .left-sidebar {
            width: 260px;
            background: var(--bg-secondary);
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .left-sidebar-header {
            padding: 0.75rem;
            border-bottom: 1px solid var(--border);
        }

        .new-chat-btn {
            width: 100%;
            padding: 0.625rem 1rem;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 0.375rem;
            font-size: 0.875rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        .new-chat-btn:hover {
            background: var(--primary-hover);
        }

        .conversation-search {
            padding: 0.5rem;
            display: flex;
            gap: 0.35rem;
            border-bottom: 1px solid var(--border);
        }

        .conversation-search input {
            flex: 1;
            padding: 0.4rem 0.6rem;
            border: 1px solid var(--border);
            border-radius: 0.25rem;
            font-size: 0.7rem;
            outline: none;
            min-width: 0;
        }

        .conversation-search input:focus {
            border-color: var(--primary);
        }

        .conversation-search select {
            padding: 0.4rem;
            border: 1px solid var(--border);
            border-radius: 0.25rem;
            font-size: 0.65rem;
            background: white;
            cursor: pointer;
            outline: none;
        }

        .conversation-search select:focus {
            border-color: var(--primary);
        }

        .conversation-list {
            flex: 2;
            overflow-y: auto;
            padding: 0.5rem;
        }

        .conversation-item {
            padding: 0.75rem;
            border-radius: 0.375rem;
            cursor: pointer;
            margin-bottom: 0.25rem;
            transition: background 0.2s;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }

        .conversation-item:hover {
            background: #e9ecef;
        }

        .conversation-item.active {
            background: var(--primary);
            color: white;
        }

        .conversation-item.active:hover {
            background: var(--primary-hover);
        }

        .conversation-title {
            font-size: 0.75rem;
            font-weight: 500;
            line-height: 1.3;
            word-wrap: break-word;
        }

        .conversation-meta {
            font-size: 0.7rem;
            opacity: 0.7;
            margin-top: 0.25rem;
        }

        .conversation-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.25rem;
            margin-top: 0.375rem;
        }

        .conversation-tag {
            font-size: 0.6rem;
            padding: 0.125rem 0.375rem;
            background: var(--primary-light);
            color: var(--primary);
            border-radius: 0.25rem;
            white-space: nowrap;
        }

        .conversation-item.active .conversation-tag {
            background: rgba(255,255,255,0.2);
            color: white;
        }

        .conversation-delete {
            opacity: 0;
            background: none;
            border: none;
            color: inherit;
            cursor: pointer;
            padding: 0.25rem;
            font-size: 1rem;
            line-height: 1;
        }

        .conversation-item:hover .conversation-delete {
            opacity: 0.5;
        }

        .conversation-delete:hover {
            opacity: 1 !important;
        }

        /* Session Memories Section */
        .session-memories {
            flex: 1;
            min-height: 150px;
            border-top: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .session-memories-header {
            padding: 0.5rem 0.75rem;
            background: var(--bg);
            border-bottom: 1px solid var(--border);
            font-size: 0.7rem;
            text-transform: uppercase;
            color: var(--text-muted);
            letter-spacing: 0.05em;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .session-memories-list {
            flex: 1;
            overflow-y: auto;
            padding: 0.5rem;
        }

        .session-memory-item {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            gap: 0.5rem;
            padding: 0.5rem;
            margin-bottom: 0.375rem;
            background: var(--bg);
            border-left: 3px solid var(--primary);
            border-radius: 0 0.25rem 0.25rem 0;
            font-size: 0.75rem;
            line-height: 1.4;
        }

        .session-memory-item.memory-fresh {
            border-left-color: #4caf50;
        }

        .session-memory-item.memory-recent {
            border-left-color: #ff9800;
        }

        .session-memory-item.memory-old {
            border-left-color: var(--text-muted);
            opacity: 0.75;
        }

        .session-memory-item .memory-text {
            flex: 1;
        }

        .session-memory-item .memory-time {
            flex-shrink: 0;
            font-size: 0.65rem;
            color: var(--text-muted);
        }

        .session-memory-item:last-child {
            margin-bottom: 0;
        }

        .no-session-memories {
            padding: 1rem;
            text-align: center;
            color: var(--text-muted);
            font-size: 0.75rem;
        }

        .session-tags {
            padding: 0.5rem;
            border-bottom: 1px solid var(--border);
        }

        .session-tags-label, .session-memories-label {
            font-size: 0.65rem;
            text-transform: uppercase;
            color: var(--text-muted);
            letter-spacing: 0.05em;
            margin-bottom: 0.375rem;
            padding: 0 0.5rem;
        }

        .session-memories-label {
            padding-top: 0.5rem;
        }

        .session-tags-list {
            display: flex;
            flex-wrap: wrap;
            gap: 0.25rem;
            min-height: 1.5rem;
        }

        .session-tag {
            font-size: 0.7rem;
            padding: 0.2rem 0.5rem;
            background: var(--primary-light);
            color: var(--primary);
            border-radius: 0.25rem;
        }

        .no-tags {
            font-size: 0.7rem;
            color: var(--text-muted);
            font-style: italic;
        }

        /* Hallucination risk highlighting */
        .token-low-risk { }
        .token-medium-risk {
            background-color: rgba(251, 191, 36, 0.2);
            border-radius: 2px;
        }
        .token-high-risk {
            background-color: rgba(239, 68, 68, 0.2);
            border-radius: 2px;
        }

        /* Confidence summary badge */
        .confidence-summary {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: 0.75rem;
            padding: 0.5rem 0.75rem;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 0.5rem;
            font-size: 0.75rem;
            color: var(--text-muted);
        }

        .confidence-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            padding: 0.125rem 0.5rem;
            border-radius: 0.25rem;
            font-weight: 500;
        }

        .confidence-badge.high {
            background: #dcfce7;
            color: #166534;
        }

        .confidence-badge.medium {
            background: #fef3c7;
            color: #92400e;
        }

        .confidence-badge.low {
            background: #fee2e2;
            color: #991b1b;
        }

        .risk-indicator {
            font-size: 0.65rem;
            padding: 0.125rem 0.375rem;
            border-radius: 0.25rem;
            margin-left: 0.25rem;
        }

        .risk-indicator.high-risk {
            background: #fee2e2;
            color: #991b1b;
        }

        .risk-indicator.medium-risk {
            background: #fef3c7;
            color: #92400e;
        }

        /* 3D Embedding Visualization */
        /* Timeline visualization in chat area */
        .timeline-viz {
            border-top: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            background: var(--bg);
            margin-top: 0.5rem;
        }

        .timeline-viz-header {
            padding: 0.35rem 0.75rem;
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border);
            font-size: 0.65rem;
            text-transform: uppercase;
            color: var(--text-muted);
            letter-spacing: 0.05em;
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .timeline-viz-header .qualitative-tag {
            flex: 1;
            text-transform: none;
        }

        .timeline-viz-header .qualitative-tag .tag-label {
            font-size: 0.7rem;
        }

        .timeline-viz-header .qualitative-tag .tag-rationale {
            display: none;
        }

        .timeline-toggle-btn {
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 4px;
            color: var(--text-muted);
            cursor: pointer;
            padding: 0.25rem 0.5rem;
            font-size: 0.8rem;
            transition: transform 0.2s, background 0.2s;
            margin-left: auto;
        }

        .timeline-toggle-btn:hover {
            color: var(--text);
            background: var(--bg-secondary);
        }

        .timeline-toggle-btn.collapsed {
            transform: rotate(-90deg);
        }

        .timeline-viz-body.hidden {
            display: none;
        }

        .timeline-viz-body {
            padding: 0.5rem;
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            gap: 0.75rem;
        }

        /* 3D viewer in right sidebar */

        .sidebar-3d-viz h3 .viz-stats-3d {
            flex: 1;
            font-size: 0.6rem;
            font-weight: normal;
            text-transform: none;
            text-align: right;
        }

        .sidebar-section h3 .viz-expand-btn {
            margin-left: auto;
        }

        #embedding3DCanvas {
            border-radius: 0.375rem;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            cursor: grab;
        }

        #embedding3DCanvas:active {
            cursor: grabbing;
        }

        #threeJsContainer {
            width: 100% !important;
            margin: 0 !important;
            aspect-ratio: 1 / 1;
            background: #0d1117;
            overflow: hidden;
            border-radius: 4px;
            box-sizing: border-box;
        }

        #threeJsContainer canvas {
            display: block;
            width: 100% !important;
            height: 100% !important;
        }

        .timeline-d3-container {
            flex: 1;
            height: 100px;
            background: #0d1117;
            border-radius: 4px;
            overflow: hidden;
        }

        .timeline-d3-container svg {
            display: block;
        }

        .timeline-d3-container .grid line {
            stroke: rgba(255, 255, 255, 0.1);
            stroke-dasharray: 2, 2;
        }

        .timeline-d3-container .threshold-line {
            stroke: #888888;
            stroke-dasharray: 4, 3;
            stroke-width: 1;
        }

        .timeline-d3-container .basin-line {
            fill: none;
            stroke: #E6E6E6;
            stroke-width: 1.5;
        }

        .timeline-d3-container .support-line {
            fill: none;
            stroke: #4DA3FF;
            stroke-width: 1;
        }

        .timeline-d3-container .state-band {
            opacity: 0.35;
        }

        .timeline-d3-container .excursion-marker {
            stroke-dasharray: 2, 2;
            stroke-width: 1;
        }

        .timeline-d3-container .axis text {
            fill: #666;
            font-size: 8px;
        }

        .timeline-d3-container .axis line,
        .timeline-d3-container .axis path {
            stroke: #444;
        }

        .timeline-tooltip {
            position: absolute;
            background: rgba(0, 0, 0, 0.9);
            color: #fff;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 11px;
            pointer-events: none;
            z-index: 1002;
            max-width: 200px;
            line-height: 1.4;
        }

        .viz-legend-3d {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
            font-size: 0.7rem;
            color: #b0b8c4;
            min-width: 70px;
        }

        .viz-legend-3d-item {
            display: flex;
            align-items: center;
            gap: 0.2rem;
            cursor: help;
        }

        .viz-legend-3d-item:hover span {
            color: #e6edf3;
        }

        .viz-legend-3d-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
        }

        .viz-legend-3d-dot.low { background: #22c55e; }
        .viz-legend-3d-dot.medium { background: #fbbf24; }
        .viz-legend-3d-dot.high { background: #ef4444; }

        .viz-tooltip-3d {
            position: fixed;
            background: rgba(0, 0, 0, 0.85);
            color: white;
            padding: 0.375rem 0.5rem;
            border-radius: 0.25rem;
            font-size: 0.65rem;
            pointer-events: none;
            z-index: 1001;
            max-width: 150px;
            display: none;
            line-height: 1.3;
        }

        .viz-expand-btn {
            background: transparent;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 0.25rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 3px;
            transition: color 0.2s, background 0.2s;
            z-index: 10;
            position: relative;
        }

        .viz-expand-btn:hover {
            color: var(--text-primary);
            background: var(--bg-tertiary);
        }

        .viz-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.85);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 2000;
        }

        .viz-modal-overlay.active {
            display: flex;
        }

        .viz-modal {
            background: var(--bg-primary);
            border-radius: 8px;
            border: 1px solid var(--border);
            max-width: 90vw;
            max-height: 90vh;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
        }

        .viz-modal-header {
            padding: 0.75rem 1rem;
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--text-muted);
        }

        .viz-modal-close {
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-size: 1.5rem;
            cursor: pointer;
            padding: 0 0.5rem;
            line-height: 1;
            z-index: 10;
            position: relative;
        }

        .viz-modal-close:hover {
            color: var(--text-primary);
        }

        .viz-modal-body {
            padding: 1rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.75rem;
            background: #0d1117;
        }

        .viz-modal-stats {
            font-size: 0.8rem;
            color: var(--text-muted);
        }

        .viz-modal-tag {
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
            flex-wrap: wrap;
        }

        .viz-modal-tag .tag-label {
            display: inline-block;
            padding: 0.15rem 0.5rem;
            border-radius: 3px;
            font-size: 0.75rem;
            font-weight: 600;
        }

        /* Brighter tag colors for modal */
        .viz-modal-tag .tag-stable { color: #5ef08e; background: rgba(94, 240, 142, 0.15); }
        .viz-modal-tag .tag-brief-detour { color: #c4f54a; background: rgba(196, 245, 74, 0.15); }
        .viz-modal-tag .tag-strained { color: #ffd04a; background: rgba(255, 208, 74, 0.15); }
        .viz-modal-tag .tag-fragmented { color: #ffaa5c; background: rgba(255, 170, 92, 0.15); }
        .viz-modal-tag .tag-runaway { color: #ff8888; background: rgba(255, 136, 136, 0.15); }
        .viz-modal-tag .tag-unknown { color: #c0c8d0; background: rgba(192, 200, 208, 0.15); }

        .viz-modal-tag .tag-rationale {
            display: inline;
            font-size: 0.7rem;
            color: #e6edf3;
        }

        .viz-modal-tag .tag-rationale .metric {
            color: #58a6ff;
            cursor: help;
            border-bottom: 1px dotted #58a6ff;
            padding-bottom: 1px;
            transition: color 0.15s;
        }

        .viz-modal-tag .tag-rationale .metric:hover {
            color: #79c0ff;
        }

        .viz-modal-tag .tag-rationale .metric-value {
            color: #7ee787;
            font-weight: 500;
        }

        .viz-modal-tag .tag-rationale .metric-subtype {
            color: #d2a8ff;
            cursor: help;
            border-bottom: 1px dotted #d2a8ff;
        }

        .viz-modal-tag .tag-rationale .metric-recovery {
            color: #ffa657;
            cursor: help;
            border-bottom: 1px dotted #ffa657;
        }

        .viz-projection-toggles {
            display: flex;
            gap: 4px;
            justify-content: center;
            margin: 6px 0;
        }
        .proj-toggle {
            padding: 2px 10px;
            border: 1px solid rgba(255,255,255,0.2);
            background: transparent;
            color: rgba(255,255,255,0.5);
            border-radius: 3px;
            cursor: pointer;
            font-size: 0.7rem;
            font-family: inherit;
            transition: all 0.15s;
        }
        .proj-toggle.active {
            background: rgba(59,130,246,0.25);
            border-color: #3b82f6;
            color: #fff;
        }
        .proj-toggle:hover {
            border-color: rgba(255,255,255,0.4);
        }

        .viz-modal-hover-text {
            padding: 0.4rem 1rem;
            background: #161b22;
            border-radius: 4px;
            color: #8b949e;
            font-family: 'SF Mono', Monaco, monospace;
            font-size: 0.7rem;
            height: 1.8em;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            text-align: left;
            width: 800px;
            margin-top: 0.5rem;
        }

        .viz-modal-legend {
            display: flex;
            gap: 1rem;
            color: #b0b8c4;
            width: 800px;
            justify-content: center;
            margin-top: 0.4rem;
        }

        .viz-modal-legend .viz-legend-3d-item span {
            font-size: 0.75rem;
            color: #b0b8c4;
            transition: color 0.15s;
        }

        .viz-modal-legend .viz-legend-3d-item:hover span {
            color: #e6edf3;
        }

        .viz-stats-3d {
            font-size: 0.7rem;
            color: var(--text-muted);
            text-align: left;
        }

        .qualitative-tag {
            text-align: left;
        }

        .qualitative-tag .tag-label {
            display: inline-block;
            padding: 0.1rem 0;
            font-size: 0.7rem;
            font-weight: 600;
            background: transparent;
        }

        .qualitative-tag .tag-stable { color: #4ade80; }
        .qualitative-tag .tag-brief-detour { color: #a3e635; }
        .qualitative-tag .tag-strained { color: #fbbf24; }
        .qualitative-tag .tag-fragmented { color: #fb923c; }
        .qualitative-tag .tag-runaway { color: #f87171; }
        .qualitative-tag .tag-unknown { color: #9ca3af; }

        .qualitative-tag .recovery-recovered { border: none; }
        .qualitative-tag .recovery-unrecovered { border: none; }

        .qualitative-tag .tag-rationale {
            font-size: 0.6rem;
            color: var(--text-muted);
            display: block;
            line-height: 1.3;
            margin-top: 0.1rem;
        }

        .no-viz-data {
            padding: 1rem;
            text-align: center;
            color: var(--text-muted);
            font-size: 0.7rem;
            font-style: italic;
        }

        /* Chat Area */
        .chat-area {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-width: 0;
        }

        .chat-container {
            flex: 1;
            overflow-y: auto;
            overflow-anchor: none;
            padding: 0.5rem 2rem 3rem 2rem;
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
        }

        .message {
            position: relative;
            max-width: 85%;
            padding: calc(0.5rem + 10px) calc(0.85rem + 10px);
            border-radius: 0.75rem;
            line-height: 1.45;
            word-wrap: break-word;
            margin-bottom: 0.2rem;
            border: 1px solid var(--border);
        }

        .message.user {
            background: var(--primary);
            color: white;
            align-self: flex-end;
            border-bottom-right-radius: 0.25rem;
            border-left: 1px solid var(--primary);
            position: relative;
        }

        .user-msg-controls {
            display: none;
            gap: 0.25rem;
            margin-top: 0.5rem;
            padding-top: 0.5rem;
            border-top: 1px solid rgba(255, 255, 255, 0.2);
        }

        .user-msg-controls button {
            background: rgba(255, 255, 255, 0.15);
            border: none;
            padding: 0.25rem 0.5rem;
            border-radius: 0.25rem;
            cursor: pointer;
            font-size: 0.75rem;
            transition: background 0.2s;
        }

        .user-msg-controls button:hover {
            background: rgba(255, 255, 255, 0.25);
        }

        .message.assistant {
            background: var(--bg-secondary);
            align-self: flex-start;
            border-bottom-left-radius: 0.25rem;
            border: 1px solid var(--border);
            border-left: 1px solid #6366f1;
            margin-bottom: 30px;
        }

        .message.assistant.streaming {
            border-color: var(--primary);
            border-left-color: var(--primary);
        }

        .message.assistant.trajectory-active {
            border-left: 2px solid #a78bfa;
        }

        /* Loading animation */
        .loading-indicator {
            display: inline-flex;
            align-items: center;
            gap: 0.15rem;
            padding: 0.25rem 0;
        }

        .loading-indicator .dot {
            width: 6px;
            height: 6px;
            background: var(--primary);
            border-radius: 50%;
            animation: pulse 1.4s ease-in-out infinite;
        }

        .loading-indicator .dot:nth-child(2) { animation-delay: 0.2s; }
        .loading-indicator .dot:nth-child(3) { animation-delay: 0.4s; }

        @keyframes pulse {
            0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
            40% { opacity: 1; transform: scale(1); }
        }

        /* EI Badge styles */
        .message-ei-badge {
            display: inline-block;
            font-size: 0.65rem;
            padding: 0.15rem 0.4rem;
            border-radius: 0.2rem;
            font-weight: 500;
        }

        .message-ei-badge.ei-low { background: #dcfce7; color: #166534; }
        .message-ei-badge.ei-mild { background: #fef9c3; color: #854d0e; }
        .message-ei-badge.ei-extended { background: #fed7aa; color: #9a3412; }
        .message-ei-badge.ei-runaway { background: #fecaca; color: #991b1b; }

        /* Trajectory thumbnail styles */
        .trajectory-thumbnail {
            display: inline-block;
            width: 100px;
            height: 24px;
            border: 1px solid var(--border);
            border-radius: 0.25rem;
            background: #0a0a12;
            cursor: pointer;
            vertical-align: middle;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .trajectory-thumbnail:hover {
            transform: scale(1.05);
            box-shadow: 0 2px 6px rgba(0,0,0,0.3);
        }

        .message-header {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            margin-bottom: 0.15rem;
            flex-wrap: wrap;
        }

        /* Trajectory modal */
        .trajectory-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.85);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }

        .trajectory-modal.active {
            display: flex;
        }

        .trajectory-modal-content {
            position: relative;
            background: #0a0a12;
            border-radius: 0.5rem;
            padding: 1rem;
            max-width: 90vw;
            max-height: 90vh;
        }

        .trajectory-modal-close {
            position: absolute;
            top: 0.5rem;
            right: 0.5rem;
            background: none;
            border: none;
            color: #888;
            font-size: 1.5rem;
            cursor: pointer;
            z-index: 10;
        }

        .trajectory-modal-close:hover {
            color: #fff;
        }

        .trajectory-modal canvas {
            display: block;
        }

        /* Thinking section styles */
        .thinking-section {
            margin-bottom: 0.3rem;
        }

        .thinking-wrapper {
            display: flex;
            align-items: flex-start;
            gap: 0.25rem;
            margin-top: 0.15rem;
        }

        .thinking-collapse {
            cursor: pointer;
            color: #9ca3af;
            font-size: 0.6rem;
            user-select: none;
            transition: color 0.2s;
            padding: 0.35rem 0.1rem;
            flex-shrink: 0;
        }

        .thinking-collapse:hover {
            color: #6b7280;
        }

        .thinking-content {
            flex: 1;
            min-width: 0;
            padding: 0.3rem 0.5rem;
            background: #f8f9fa;
            border-left: 3px solid #d0d7de;
            border-radius: 0 0.375rem 0.375rem 0;
            font-size: 0.85rem;
            color: #57606a;
            white-space: pre-wrap;
            line-height: 1.35;
            font-style: italic;
            max-height: 300px;
            overflow-y: auto;
        }


        .thinking-buttons {
            display: flex;
            gap: 0.5rem;
            margin-top: 0.25rem;
            align-items: center;
            padding: 4px 10px;
        }

        .thinking-buttons:empty {
            display: none;
        }

        .message-buttons {
            display: flex;
            gap: 0.4rem;
            margin-bottom: 0.1rem;
            align-items: center;
        }

        .persona-label {
            font-size: 0.65rem;
            color: #8b5cf6;
            white-space: nowrap;
            font-style: italic;
        }

        .model-label {
            font-size: 0.65rem;
            color: #6b7280;
            margin-left: auto;
            font-style: italic;
            white-space: nowrap;
        }

        .segment-delete-btn {
            font-size: 0.85rem;
            color: #9ca3af;
            cursor: pointer;
            padding: 0 0.3rem;
            opacity: 0;
            transition: opacity 0.15s;
            line-height: 1;
        }
        .message-buttons:hover .segment-delete-btn,
        .thinking-buttons:hover .segment-delete-btn { opacity: 0.5; }
        .segment-delete-btn:hover { opacity: 1 !important; color: #ef4444; }

        .trajectory-color-toggle {
            display: inline-flex;
            align-items: center;
            padding: 0.2rem 0.35rem;
            background: transparent;
            border: none;
            border-radius: 0.25rem;
            cursor: pointer;
            font-size: 0.8rem;
            color: #9ca3af;
            transition: all 0.2s;
        }

        .trajectory-color-toggle:hover {
            color: #6366f1;
        }

        .trajectory-color-toggle.active {
            color: #6366f1;
        }

        /* Qualitative tag colors in message buttons */
        .tag-label {
            font-size: 0.7rem;
            margin-right: 0.5rem;
            font-weight: 500;
        }

        .tag-anchored { color: #6b7280; }
        .tag-minor { color: #4caf50; }
        .tag-strain { color: #ff9800; }
        .tag-fragmented { color: #fb923c; }
        .tag-runaway { color: #ef4444; }

        /* Failure mode badges (thinking-buttons + timeline header) */
        .attractor-count {
            font-size: 0.6rem;
            font-weight: 500;
            color: #93c5fd;
            background: rgba(59,130,246,0.12);
            padding: 0.1rem 0.35rem;
            border-radius: 3px;
            margin-left: 0.3rem;
            white-space: nowrap;
            vertical-align: middle;
        }

        .failure-mode {
            font-size: 0.6rem;
            font-weight: 500;
            padding: 0.1rem 0.35rem;
            border-radius: 3px;
            margin-left: 0.3rem;
            white-space: nowrap;
            vertical-align: middle;
        }
        .fm-extrapolation-mild { color: #9ca3af; background: rgba(156, 163, 175, 0.12); }
        .fm-extrapolation { color: #f59e0b; background: rgba(245, 158, 11, 0.12); }
        .fm-extrapolation-deep { color: #ef4444; background: rgba(239, 68, 68, 0.12); }
        .fm-borderline { color: #f97316; background: rgba(249, 115, 22, 0.12); }
        .fm-hallucination-low { color: #c084fc; background: rgba(192, 132, 252, 0.15); }
        .fm-hallucination-mod { color: #a855f7; background: rgba(168, 85, 247, 0.18); }
        .fm-hallucination-high { color: #e879f9; background: rgba(232, 121, 249, 0.22); }

        /* Real-time thinking style during streaming */
        .thinking-stream {
            font-style: italic;
            color: #57606a;
            display: block;
            padding: 0.5rem 0.75rem;
            margin-bottom: 0.25rem;
            background: #f8f9fa;
            border-left: 3px solid #d0d7de;
            border-radius: 0 0.375rem 0.375rem 0;
            white-space: pre-wrap;
        }

        .streaming-tail {
            white-space: pre-wrap;
            line-height: 1.6;
        }

        .answer-section {
            margin-top: 0.2rem;
        }

        /* Markdown content styles */
        .md-content {
            white-space: normal;
            line-height: 1.6;
        }

        .md-content code {
            background: #f0f4f8;
            padding: 0.15em 0.4em;
            border-radius: 4px;
            font-family: 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
            font-size: 0.9em;
            color: #d63384;
        }

        .md-content pre {
            background: #1e1e1e;
            color: #d4d4d4;
            padding: 1rem;
            border-radius: 8px;
            overflow-x: auto;
            margin: 0.75rem 0;
        }

        .md-content pre code {
            background: none;
            padding: 0;
            color: inherit;
            font-size: 0.85em;
        }

        /* KaTeX math styles */
        .katex-display {
            margin: 1em 0;
            overflow-x: auto;
            overflow-y: hidden;
        }
        .katex {
            font-size: 1.1em;
        }
        .message .katex-display > .katex {
            text-align: left;
        }

        .md-content strong {
            font-weight: 600;
            color: #1a1a1a;
        }

        .md-content em {
            font-style: italic;
        }

        .md-content h2, .md-content h3, .md-content h4 {
            margin: 1rem 0 0.5rem 0;
            font-weight: 600;
            color: #1a1a1a;
        }

        .md-content h2 { font-size: 1.3em; }
        .md-content h3 { font-size: 1.15em; }
        .md-content h4 { font-size: 1.05em; }

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

        .md-content li {
            margin: 0.25rem 0;
        }

        .input-container {
            padding: 1rem 2rem;
            background: var(--bg-secondary);
            border-top: 1px solid var(--border);
        }

        .input-wrapper {
            display: flex;
            gap: 0.75rem;
            align-items: flex-end;
        }

        /* Microphone button */
        .mic-btn {
            padding: 0.75rem;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 0.5rem;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 48px;
            min-height: 48px;
        }

        .mic-btn:hover {
            border-color: var(--primary);
            background: var(--primary-light);
        }

        .mic-btn.recording {
            background: #fee2e2;
            border-color: var(--danger);
            animation: pulse-recording 1s ease-in-out infinite;
        }

        .mic-btn.transcribing {
            background: #fef3c7;
            border-color: var(--warning);
        }

        .mic-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-secondary, #6b7280);
        }

        .mic-icon svg {
            width: 20px;
            height: 20px;
        }

        .mic-btn.voice-active .mic-icon {
            color: #fff;
        }

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

        /* Voice mode — toggle on */
        .mic-btn.voice-active {
            background: var(--primary);
            border-color: var(--primary);
            color: #fff;
        }

        .mic-btn.voice-active:hover {
            background: #2563eb;
            border-color: #2563eb;
        }

        .mic-btn.voice-active.transcribing {
            background: #fbbf24;
            border-color: #f59e0b;
            animation: pulse-recording 1s ease-in-out infinite;
        }

        /* Waveform canvas */
        .voice-waveform {
            flex: 1;
            height: 44px;
            border-radius: 0.5rem;
            background: #0d1117;
            border: 1px solid var(--border);
        }

        /* Status text overlay */
        .voice-status {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            color: rgba(255, 255, 255, 0.5);
            font-size: 0.8rem;
            pointer-events: none;
            white-space: nowrap;
        }

        /* Input wrapper in voice mode */
        .input-wrapper.voice-mode {
            position: relative;
        }

        #messageInput {
            flex: 1;
            padding: 0.875rem 1rem;
            border: 1px solid var(--border);
            border-radius: 0.5rem;
            background: var(--bg);
            color: var(--text);
            font-size: 1rem;
            font-family: inherit;
            outline: none;
            transition: border-color 0.2s;
            resize: none;
            min-height: 2.75rem;
            max-height: 200px;
            overflow-y: auto;
            line-height: 1.4;
        }

        #messageInput:focus {
            border-color: var(--primary);
        }

        #messageInput:disabled {
            opacity: 0.5;
        }

        .hint {
            font-size: 0.7rem;
            color: var(--text-muted);
            margin-top: 0.375rem;
            text-align: center;
        }

        button {
            padding: 0.875rem 1.5rem;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 0.5rem;
            font-size: 1rem;
            cursor: pointer;
            transition: background 0.2s;
        }

        button:hover:not(:disabled) {
            background: var(--primary-hover);
        }

        button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .stop-btn {
            background: var(--danger);
            padding: 0.875rem 1rem;
        }

        .stop-btn:hover:not(:disabled) {
            background: #dc2626;
        }

        /* Right Sidebar - Parameters */
        .right-sidebar {
            width: 280px;
            background: var(--bg-secondary);
            border-left: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        /* Tabs */
        .sidebar-tabs {
            display: flex;
            border-bottom: 1px solid var(--border);
        }

        .sidebar-tab {
            flex: 1;
            padding: 0.75rem 0.5rem;
            background: none;
            border: none;
            border-bottom: 2px solid transparent;
            color: var(--text-muted);
            font-size: 0.75rem;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .sidebar-tab svg {
            width: 16px;
            height: 16px;
        }

        .sidebar-tab:hover {
            color: var(--text);
            background: #e9ecef;
            border-radius: 0.375rem;
        }

        .sidebar-tab.active {
            color: var(--primary);
            border-bottom-color: var(--primary);
        }

        .tab-content {
            position: absolute;
            visibility: hidden;
            pointer-events: none;
            flex: 1;
            overflow-y: auto;
            width: 100%;
            height: 0;
        }

        .tab-content.active {
            position: static;
            visibility: visible;
            pointer-events: auto;
            display: flex;
            flex-direction: column;
            flex: 1;
            min-height: 0;
        }

        #tab-model {
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        #tab-model .sidebar-section.sidebar-3d-viz {
            margin-top: auto;
            background: var(--bg);
            border-top: 1px solid var(--border);
            border-bottom: none;
        }

        .sidebar-section {
            padding: 1rem;
            border-bottom: 1px solid var(--border);
        }

        .sidebar-section:last-child {
            border-bottom: none;
        }

        .sidebar-section h3 {
            font-size: 0.7rem;
            text-transform: uppercase;
            color: var(--text-muted);
            margin-bottom: 0.75rem;
            letter-spacing: 0.05em;
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }

        /* Toggle Switch */
        .tts-toggle-row {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.5rem;
        }

        .tts-label {
            font-size: 0.75rem;
            color: var(--text);
        }

        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 36px;
            height: 20px;
        }

        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: var(--border);
            transition: 0.3s;
            border-radius: 20px;
        }

        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 14px;
            width: 14px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: 0.3s;
            border-radius: 50%;
        }

        .toggle-switch input:checked + .toggle-slider {
            background-color: var(--primary);
        }

        .toggle-switch input:checked + .toggle-slider:before {
            transform: translateX(16px);
        }

        .tts-options {
            margin-top: 0.5rem;
            padding-top: 0.5rem;
            border-top: 1px solid var(--border);
        }

        .tts-options select {
            width: 100%;
            padding: 0.4rem;
            font-size: 0.75rem;
            border: 1px solid var(--border);
            border-radius: 0.25rem;
            background: var(--bg);
            color: var(--text);
        }

        .param-group {
            margin-bottom: 0.875rem;
        }

        .param-group:last-child {
            margin-bottom: 0;
        }

        .param-label {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.8rem;
            color: #555;
            margin-bottom: 0.375rem;
        }

        .param-value {
            font-weight: 500;
            color: var(--primary);
        }

        .checkbox-label {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.8rem;
            color: #555;
            cursor: pointer;
        }

        .checkbox-label input[type="checkbox"] {
            width: 16px;
            height: 16px;
            accent-color: var(--primary);
        }

        .right-sidebar input[type="range"] {
            width: 100%;
            height: 6px;
            -webkit-appearance: none;
            background: var(--border);
            border-radius: 3px;
            outline: none;
        }

        .right-sidebar input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 14px;
            height: 14px;
            background: var(--primary);
            border-radius: 50%;
            cursor: pointer;
        }

        .right-sidebar input[type="number"],
        .right-sidebar select {
            width: 100%;
            padding: 0.5rem;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 0.375rem;
            color: var(--text);
            font-size: 0.8rem;
        }

        .right-sidebar select {
            cursor: pointer;
        }

        .right-sidebar textarea {
            width: 100%;
            padding: 0.5rem;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 0.375rem;
            color: var(--text);
            font-size: 0.8rem;
            font-family: inherit;
            resize: vertical;
            min-height: 70px;
        }

        .template-btn, .persona-btn {
            width: 100%;
            padding: 0.5rem;
            margin-bottom: 0.375rem;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 0.375rem;
            color: #555;
            font-size: 0.75rem;
            cursor: pointer;
            text-align: left;
            transition: all 0.2s;
        }

        .template-btn:hover {
            border-color: var(--primary);
            color: var(--primary);
        }

        .persona-btn:hover {
            border-color: var(--primary);
            background: var(--bg) !important;
        }

        .template-btn:last-child, .persona-btn:last-child {
            margin-bottom: 0;
        }

        .persona-btn.active {
            border-color: var(--primary);
            background: var(--bg);
            color: var(--primary);
        }

        .persona-btn.active:hover {
            background: var(--bg) !important;
        }

        .persona-btn .persona-icon {
            margin-right: 0.5rem;
            cursor: pointer;
        }

        .persona-btn {
            position: relative;
            display: flex;
            align-items: center;
        }

        .persona-btn .persona-name {
            cursor: pointer;
            flex: 1;
            padding: 2px 4px;
            border-radius: 3px;
            transition: background 0.15s, color 0.15s;
        }

        .persona-btn .persona-name:hover {
            background: var(--primary-light, rgba(59,130,246,0.12));
            color: var(--primary);
        }

        .persona-btn.active .persona-name {
            color: var(--primary);
        }

        .persona-btn .persona-edit {
            position: absolute;
            right: 6px;
            top: 50%;
            transform: translateY(-50%);
            opacity: 0;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 3px;
            padding: 2px 5px;
            font-size: 0.7rem;
            cursor: pointer;
            transition: opacity 0.2s;
            color: var(--muted);
        }

        .persona-btn:hover .persona-edit {
            opacity: 1;
        }

        .persona-btn .persona-edit:hover {
            background: var(--primary-light);
            border-color: var(--primary);
            color: var(--primary);
        }

        /* Persona container with scrolling */
        .persona-container {
            max-height: 215px;
            overflow-y: auto;
            padding-right: 4px;
        }

        .persona-container::-webkit-scrollbar {
            width: 5px;
        }

        .persona-container::-webkit-scrollbar-track {
            background: var(--bg);
            border-radius: 3px;
        }

        .persona-container::-webkit-scrollbar-thumb {
            background: var(--border);
            border-radius: 3px;
        }

        .persona-container::-webkit-scrollbar-thumb:hover {
            background: var(--muted);
        }

        .persona-add-btn {
            margin-left: auto;
            background: none;
            border: none;
            color: var(--primary);
            cursor: pointer;
            padding: 2px 6px;
            font-size: 1.1rem;
            line-height: 1;
            border-radius: 4px;
            transition: background 0.2s;
        }

        .persona-add-btn:hover {
            background: var(--primary-light);
        }

        /* Interaction mode selector */
        .interaction-mode-selector {
            display: flex;
            gap: 4px;
            margin-top: 0.75rem;
            padding: 3px;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 6px;
        }

        .mode-btn {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            padding: 6px 8px;
            border: none;
            background: transparent;
            color: var(--muted);
            font-size: 0.75rem;
            cursor: pointer;
            border-radius: 4px;
            transition: all 0.2s;
        }

        .mode-btn span {
            font-size: 0.85rem;
        }

        .mode-btn:hover:not(:disabled) {
            background: var(--card-bg);
            color: var(--text);
        }

        .mode-btn.active {
            background: var(--primary);
            color: white;
        }

        .mode-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* Persona modal */
        .persona-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1001;
        }

        .persona-modal {
            background: #ffffff;
            border: 1px solid #e0e0e0;
            border-radius: 12px;
            padding: 0;
            width: 90%;
            max-width: 600px;
            max-height: 85vh;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
        }

        .persona-modal-header {
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid #e8e8e8;
            background: #f8f9fa;
        }

        .persona-modal-header h3 {
            margin: 0;
            color: #1a1a2e;
            font-size: 1.1rem;
            font-weight: 600;
        }

        .persona-modal-body {
            padding: 1.5rem;
            overflow-y: auto;
            max-height: calc(85vh - 140px);
            background: #ffffff;
        }

        .persona-modal-field {
            margin-bottom: 1.25rem;
        }

        .persona-modal-field:last-child {
            margin-bottom: 0;
        }

        .persona-modal-field label {
            display: block;
            margin-bottom: 0.5rem;
            color: #666680;
            font-size: 0.8rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .persona-modal-field input,
        .persona-modal-field textarea,
        .persona-modal-field select {
            width: 100%;
            padding: 0.75rem 1rem;
            border: 1px solid #d0d0d8;
            border-radius: 8px;
            background: #ffffff;
            color: #1a1a2e;
            font-size: 0.95rem;
            transition: border-color 0.2s, box-shadow 0.2s;
            box-sizing: border-box;
        }

        .persona-modal-field input:focus,
        .persona-modal-field textarea:focus,
        .persona-modal-field select:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
        }

        .persona-modal-field textarea {
            min-height: 200px;
            resize: vertical;
            font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
            font-size: 0.85rem;
            line-height: 1.5;
        }

        .persona-modal-row {
            display: flex;
            gap: 1rem;
        }

        .persona-modal-row .persona-modal-field {
            flex: 1;
        }

        .persona-llm-row {
            display: flex;
            gap: 8px;
            align-items: center;
        }

        .persona-llm-row select {
            flex: 1;
            min-width: 0;
            width: auto;
        }

        .persona-llm-layer {
            flex-shrink: 0;
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--primary, #6366f1);
            background: rgba(99, 102, 241, 0.1);
            border: 1px solid rgba(99, 102, 241, 0.2);
            padding: 6px 12px;
            border-radius: 6px;
            white-space: nowrap;
            transition: all 0.2s;
            user-select: none;
        }
        .persona-llm-layer:empty { display: none; }
        .persona-llm-layer.clickable {
            cursor: pointer;
        }
        .persona-llm-layer.clickable:hover {
            background: rgba(99, 102, 241, 0.18);
            border-color: var(--primary, #6366f1);
        }

        .persona-model-info {
            font-weight: 600;
            color: var(--primary, #6366f1);
            margin-left: 0.5rem;
        }

        .template-hint {
            display: block;
            margin-top: 4px;
            color: var(--text-secondary, #6b7280);
            font-size: 0.7rem;
        }
        .template-hint code {
            background: rgba(99, 102, 241, 0.1);
            padding: 1px 4px;
            border-radius: 3px;
            font-size: 0.7rem;
        }

        #personaTemplateInput {
            font-family: monospace;
            font-size: 0.8rem;
        }

        .icon-picker {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            padding: 0.5rem;
            background: #f8f9fa;
            border: 1px solid #d0d0d8;
            border-radius: 8px;
        }

        .icon-option {
            width: 38px;
            height: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid transparent;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
            background: #ffffff;
            color: #4b5563;
        }

        .icon-option svg {
            width: 20px;
            height: 20px;
        }

        .icon-option:hover {
            border-color: #c0c0c8;
            background: #f0f0f4;
        }

        .icon-option.selected {
            border-color: var(--primary);
            background: rgba(99, 102, 241, 0.1);
        }

        .persona-modal-footer {
            padding: 1rem 1.5rem;
            border-top: 1px solid #e8e8e8;
            background: #f8f9fa;
            display: flex;
            gap: 0.75rem;
            justify-content: flex-end;
        }

        .persona-modal-footer button {
            padding: 0.6rem 1.25rem;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.9rem;
            font-weight: 500;
            transition: all 0.2s;
        }

        .btn-cancel {
            background: #ffffff;
            border: 1px solid #d0d0d8;
            color: #666680;
        }

        .btn-cancel:hover {
            background: #f0f0f4;
            color: #1a1a2e;
        }

        .btn-save {
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            border: none;
            color: white;
        }

        .btn-save:hover {
            background: linear-gradient(135deg, #5558e3, #7c4fe6);
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
        }

        .btn-delete {
            background: #ffffff;
            border: 1px solid #ef4444;
            color: #ef4444;
            margin-right: auto;
        }

        .btn-delete:hover {
            background: #ef4444;
            color: white;
        }

        .btn-duplicate {
            background: #ffffff;
            border: 1px solid #10b981;
            color: #10b981;
        }

        .btn-duplicate:hover {
            background: #10b981;
            color: white;
        }

        /* Memory mode radio buttons */
        .memory-mode-group {
            display: flex;
            gap: 6px;
            margin-bottom: 12px;
        }

        .memory-mode-option {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 8px 4px;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .memory-mode-option:hover {
            border-color: var(--primary);
        }

        .memory-mode-option input[type="radio"] {
            display: none;
        }

        .memory-mode-option input[type="radio"]:checked + .memory-mode-label {
            color: var(--primary);
        }

        .memory-mode-option:has(input:checked) {
            border-color: var(--primary);
            background: var(--primary-light);
        }

        .memory-mode-label {
            font-size: 0.8rem;
            font-weight: 500;
            color: var(--text);
        }

        .memory-mode-desc {
            font-size: 0.65rem;
            color: var(--muted);
            margin-top: 2px;
        }

        /* LLM selector */
        .llm-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.5rem;
            margin-bottom: 0.375rem;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 0.375rem;
            cursor: pointer;
            transition: all 0.2s;
        }

        .llm-item:hover {
            border-color: var(--primary);
        }

        .llm-item.active {
            border-color: var(--primary);
            background: var(--primary-light);
        }

        .llm-item .llm-name {
            font-size: 0.8rem;
            font-weight: 500;
        }

        .llm-item .llm-provider {
            font-size: 0.7rem;
            color: var(--text-muted);
        }

        .llm-item .llm-status {
            font-size: 0.65rem;
            padding: 0.125rem 0.375rem;
            border-radius: 0.25rem;
            background: #e9ecef;
        }

        .llm-item .llm-status.loaded {
            background: #dcfce7;
            color: #166534;
        }

        /* Memory list */
        .memory-item {
            padding: 0.625rem;
            margin-bottom: 0.5rem;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 0.375rem;
            font-size: 0.8rem;
        }

        .memory-item .memory-text {
            margin-bottom: 0.375rem;
        }

        .memory-item .memory-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.7rem;
            color: var(--text-muted);
        }

        .memory-item .memory-delete {
            background: none;
            border: none;
            color: var(--danger);
            cursor: pointer;
            font-size: 0.7rem;
            padding: 0.125rem 0.375rem;
        }

        .memory-item .memory-delete:hover {
            text-decoration: underline;
        }

        /* Memory recency indicators */
        .memory-fresh {
            border-left: 3px solid #4caf50;
        }

        .memory-recent {
            border-left: 3px solid #ff9800;
        }

        .memory-old {
            border-left: 3px solid transparent;
            opacity: 0.75;
        }

        .memory-time {
            font-size: 0.7rem;
            color: var(--text-muted);
        }

        .no-memories {
            text-align: center;
            padding: 1.5rem;
            color: var(--text-muted);
            font-size: 0.8rem;
        }

        .welcome {
            text-align: center;
            padding: 3rem;
            color: #666;
        }

        .welcome h2 {
            color: var(--primary);
            margin-bottom: 1rem;
        }

        code {
            background: #f1f3f4;
            padding: 0.125rem 0.375rem;
            border-radius: 0.25rem;
            font-family: 'SF Mono', Monaco, monospace;
        }

        pre {
            background: #f1f3f4;
            padding: 1rem;
            border-radius: 0.5rem;
            overflow-x: auto;
            margin: 0.5rem 0;
        }

        pre code {
            background: none;
            padding: 0;
        }

        .no-conversations {
            text-align: center;
            padding: 2rem 1rem;
            color: var(--text-muted);
            font-size: 0.875rem;
        }

        .refresh-btn {
            padding: 0.375rem 0.75rem;
            font-size: 0.75rem;
            background: var(--bg);
            border: 1px solid var(--border);
            color: var(--text);
        }

        .refresh-btn:hover {
            border-color: var(--primary);
            color: var(--primary);
            background: var(--bg);
        }

        /* User ID input */
        .user-id-section {
            display: flex;
            gap: 0.5rem;
            align-items: center;
            margin-bottom: 0.75rem;
        }

        .user-id-section input {
            flex: 1;
        }

        /* Mobile responsive */
        @media (max-width: 1024px) {
            .left-sidebar {
                width: 220px;
            }
            .right-sidebar {
                width: 240px;
            }
        }

        /* Mobile Menu Buttons */
        .mobile-menu-btn {
            display: none;
            background: transparent;
            border: none;
            font-size: 1.5rem;
            color: var(--primary);
            cursor: pointer;
            padding: 0.25rem 0.5rem;
            line-height: 1;
        }

        .mobile-menu-btn:hover {
            opacity: 0.8;
        }

        /* Hide sidebar close buttons on desktop */
        .sidebar-close-btn {
            display: none;
        }

        /* Mobile overlay */
        .sidebar-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 99;
        }

        .sidebar-overlay.active {
            display: block;
        }

        @media (max-width: 768px) {
            /* Show mobile menu buttons */
            .mobile-menu-btn {
                display: block;
            }

            /* Header adjustments */
            .header {
                padding: 0.5rem 0.75rem;
            }

            .header h1 {
                font-size: 1.1rem;
            }

            .header-left {
                display: flex;
                align-items: center;
                gap: 0.5rem;
            }

            .header-right {
                display: flex;
                align-items: center;
                gap: 0.25rem;
            }

            /* Left sidebar - slide from left */
            .left-sidebar {
                position: fixed;
                top: 0;
                left: 0;
                height: 100vh;
                width: 85%;
                max-width: 320px;
                z-index: 100;
                transform: translateX(-100%);
                transition: transform 0.3s ease;
                box-shadow: 2px 0 10px rgba(0,0,0,0.2);
            }

            .left-sidebar.open {
                transform: translateX(0);
            }

            /* Right sidebar - slide from right */
            .right-sidebar {
                position: fixed;
                top: 0;
                right: 0;
                height: 100vh;
                width: 85%;
                max-width: 320px;
                z-index: 100;
                transform: translateX(100%);
                transition: transform 0.3s ease;
                box-shadow: -2px 0 10px rgba(0,0,0,0.2);
            }

            .right-sidebar.open {
                transform: translateX(0);
            }

            /* Mobile close buttons for sidebars */
            .sidebar-close-btn {
                display: block;
                position: absolute;
                top: 0.5rem;
                right: 0.5rem;
                background: var(--bg);
                border: 1px solid var(--border);
                border-radius: 50%;
                font-size: 1.25rem;
                color: var(--text-muted);
                cursor: pointer;
                z-index: 101;
                padding: 0.25rem 0.5rem;
                width: 36px;
                height: 36px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .sidebar-close-btn:hover {
                background: var(--bg-secondary);
                color: var(--text);
            }

            .left-sidebar .sidebar-close-btn {
                right: 0.5rem;
            }

            .right-sidebar .sidebar-close-btn {
                left: 0.5rem;
                right: auto;
            }

            /* Adjust sidebar headers for close button */
            .left-sidebar-header {
                padding-top: 2.5rem;
            }

            .right-sidebar .model-info {
                padding-top: 2.5rem;
            }

            /* Chat area adjustments */
            .chat-container {
                padding: 0.75rem 1rem 2rem 1rem;
            }

            .message {
                max-width: 95%;
                padding: 0.75rem 1rem;
                font-size: 0.95rem;
            }

            /* Input area adjustments */
            .input-container {
                padding: 0.75rem 1rem;
            }

            .input-wrapper {
                gap: 0.5rem;
            }

            #messageInput {
                padding: 0.75rem;
                font-size: 16px; /* Prevent iOS zoom */
                min-height: 44px; /* Touch-friendly */
            }

            .input-wrapper button {
                padding: 0.75rem 1rem;
                min-width: 60px;
                min-height: 44px; /* Touch-friendly */
            }

            .mic-btn {
                min-width: 44px;
                min-height: 44px;
                padding: 0.5rem;
            }

            .hint {
                display: none; /* Hide on mobile */
            }

            /* Timeline visualization - collapse by default */
            .timeline-viz {
                display: none; /* Hide complex viz on mobile */
            }

            /* Info modal adjustments */
            .info-modal {
                width: 95%;
                max-height: 85vh;
            }

            .info-modal-content {
                padding: 1rem;
            }

            /* Conversation list adjustments */
            .conversation-item {
                padding: 1rem;
            }

            .conversation-title {
                font-size: 0.85rem;
            }

            /* Persona buttons */
            .persona-btn {
                padding: 0.75rem;
                font-size: 0.85rem;
            }

            /* Template buttons */
            .template-btn {
                padding: 0.75rem;
            }

            /* Model info bar */
            .model-info {
                padding: 0.5rem 0.75rem;
                font-size: 0.65rem;
            }

            /* Session memories section */
            .session-memories {
                min-height: 120px;
            }

            /* Welcome message */
            .welcome {
                padding: 2rem 1rem;
            }

            .welcome h2 {
                font-size: 1.25rem;
            }

            /* Trajectory modal adjustments */
            .viz-modal-hover-row {
                width: 100%;
                flex-direction: column;
            }

            .viz-modal {
                width: 95%;
            }

            /* Thinking section */
            .thinking-content {
                max-height: 200px;
                font-size: 0.8rem;
            }

            /* Code blocks */
            .md-content pre {
                padding: 0.75rem;
                font-size: 0.8rem;
            }
        }

        /* Small mobile (iPhone SE, etc.) */
        @media (max-width: 375px) {
            .header h1 {
                font-size: 1rem;
            }

            .message {
                max-width: 98%;
                padding: 0.625rem 0.75rem;
                font-size: 0.9rem;
            }

            .input-wrapper button {
                padding: 0.625rem 0.75rem;
                font-size: 0.9rem;
            }
        }

        /* Landscape mobile */
        @media (max-width: 768px) and (orientation: landscape) {
            .left-sidebar,
            .right-sidebar {
                max-width: 280px;
            }
        }

        /* Safe area insets for notched phones */
        @supports (padding: max(0px)) {
            @media (max-width: 768px) {
                .header {
                    padding-top: max(0.5rem, env(safe-area-inset-top));
                    padding-left: max(0.75rem, env(safe-area-inset-left));
                    padding-right: max(0.75rem, env(safe-area-inset-right));
                }

                .input-container {
                    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
                    padding-left: max(1rem, env(safe-area-inset-left));
                    padding-right: max(1rem, env(safe-area-inset-right));
                }

                .left-sidebar {
                    padding-left: max(0px, env(safe-area-inset-left));
                }

                .right-sidebar {
                    padding-right: max(0px, env(safe-area-inset-right));
                }
            }
        }

        /* Token instability coloring with tooltips */
        .token-colored {
            display: inline;
            border-radius: 2px;
            padding: 0 1px;
            margin: 0;
            line-height: inherit;
            cursor: help;  /* Indicates tooltip on hover */
        }
        .token-colored:hover {
            filter: brightness(0.95);
        }

        /* Token coloring toggle button */
        .coloring-toggle {
            position: absolute;
            top: 4px;
            right: 4px;
            font-size: 0.7rem;
            padding: 2px 6px;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 4px;
            cursor: pointer;
            opacity: 0.7;
            transition: opacity 0.2s;
        }

        .coloring-toggle:hover {
            opacity: 1;
        }

        .coloring-toggle.active {
            background: var(--primary-light);
            border-color: var(--primary);
        }

        .message.assistant {
            position: relative;
        }

        /* ── Markdown Tables ────────────────────────────────────── */
        .md-content table {
            border-collapse: collapse;
            width: 100%;
            margin: 0.5rem 0;
            font-size: 0.85rem;
        }

        .md-content th,
        .md-content td {
            border: 1px solid var(--border-color, #333);
            padding: 0.4rem 0.6rem;
            text-align: left;
            vertical-align: top;
        }

        .md-content th {
            background: rgba(255, 255, 255, 0.05);
            font-weight: 600;
        }

        .md-content tr:nth-child(even) td {
            background: rgba(255, 255, 255, 0.02);
        }

        /* ── Latent Verse Section ─────────────────────────────── */


        .section-collapse {
            cursor: pointer;
            font-size: 0.6rem;
            color: var(--text-muted);
            user-select: none;
            width: 12px;
            flex-shrink: 0;
        }

        .section-collapse:hover {
            color: var(--text-primary);
        }

        .lv-count {
            flex: 1;
            font-size: 0.6rem;
            text-align: right;
            color: var(--text-muted);
            font-weight: normal;
            text-transform: none;
        }

        #latentVerseContainer {
            width: 100%;
            aspect-ratio: 1 / 1;
            background: #0d1117;
            border-radius: 4px;
            overflow: hidden;
        }

        #latentVerseContainer canvas {
            display: block;
            width: 100% !important;
            height: 100% !important;
        }

        #latentVerseLabels {
            font-size: 0.65rem;
            color: var(--text-muted);
            padding: 4px 0;
            max-height: 80px;
            overflow-y: auto;
        }

        /* Centroid selection checkbox on user messages */
        .centroid-checkbox {
            position: absolute;
            left: -24px;
            top: 50%;
            transform: translateY(-50%);
            width: 16px;
            height: 16px;
            cursor: pointer;
            accent-color: #6b7280;
            opacity: 0.5;
        }

        .centroid-checkbox:checked {
            opacity: 1;
            accent-color: #3b82f6;
        }

        .message.user {
            position: relative;
        }

        /* Mindmap section */
        .mindmap-section {
            margin-top: 0.5rem;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            background: #fafbfc;
            overflow: hidden;
        }

        .mindmap-svg {
            display: block;
            width: 100%;
            min-height: 400px;
        }

        .mindmap-section text {
            font-size: 16px !important;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
        }

        .mindmap-toggle {
            cursor: pointer;
            font-size: 0.85rem;
            user-select: none;
            opacity: 0.5;
            transition: opacity 0.2s;
            padding: 2px 4px;
            border-radius: 4px;
        }

        .mindmap-toggle:hover { opacity: 1; }
        .mindmap-toggle.active {
            opacity: 1;
            background: rgba(59, 130, 246, 0.1);
        }

        /* Mindmap button row - prevents content overlay */
        .mindmap-button-row {
            display: flex;
            justify-content: flex-end;
            padding: 4px 0;
            margin-top: 8px;
        }

        .mindmap-generate {
            cursor: pointer;
            font-size: 0.85rem;
            user-select: none;
            opacity: 0.4;
            transition: opacity 0.2s;
            padding: 4px 6px;
            border-radius: 4px;
            display: inline-flex;
            align-items: center;
            gap: 1px;
            background: rgba(255, 255, 255, 0.9);
            border: 1px solid #e5e7eb;
        }

        .mindmap-generate:hover { opacity: 1; }
        .mindmap-generate .icon { font-size: 0.9rem; }
        .mindmap-generate .plus {
            font-size: 0.7rem;
            font-weight: bold;
            color: #22c55e;
        }
        .mindmap-generate .dots {
            font-size: 0.7rem;
            color: #9ca3af;
        }
        .mindmap-generate.loading {
            opacity: 0.7;
            cursor: wait;
        }

        /* Pulsing ring while mindmap is generating */
        .mindmap-generate.generating,
        .mindmap-generate.ready {
            position: relative;
        }
        .mindmap-generate.generating::after,
        .mindmap-generate.ready::after {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: 6px;
            border: 1px solid var(--primary);
            pointer-events: none;
        }
        .mindmap-generate.generating::after {
            animation: mindmap-pulse 1.5s ease-in-out infinite;
        }
        .mindmap-generate.ready::after {
            opacity: 0.6;
        }
        @keyframes mindmap-pulse {
            0%, 100% { opacity: 0; }
            50% { opacity: 1; }
        }

        /* Simple View Toggle */
        .simple-view-btn {
            background: transparent;
            border: none;
            color: var(--primary);
            cursor: pointer;
            padding: 0.25rem 0.5rem;
            line-height: 1;
            display: block;
            opacity: 0.6;
            transition: opacity 0.2s;
        }
        .simple-view-btn:hover { opacity: 1; }
        .simple-view-btn svg { width: 18px; height: 18px; }

        body.simple-view .right-sidebar { display: none; }
        body.simple-view .timeline-viz { display: none; }
        body.simple-view .thinking-buttons { display: none; }
        body.simple-view .message-buttons { display: none; }
        body.simple-view .message-ei-badge { display: none; }
        body.simple-view .trajectory-thumbnail { display: none; }
        body.simple-view .coloring-toggle { display: none; }
        body.simple-view .segment-delete-btn { display: none; }
        body.simple-view .session-memories { display: none; }

        @media (max-width: 768px) {
            .simple-view-btn { display: none; }
        }

        /* Confirmation Modal */
        .confirm-modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10000;
        }
        .confirm-modal {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 1.5rem;
            max-width: 360px;
            text-align: center;
        }
        .confirm-modal p {
            margin-bottom: 1rem;
            color: var(--text-primary);
            font-size: 0.9rem;
            line-height: 1.5;
        }
        .confirm-modal-actions {
            display: flex;
            gap: 0.75rem;
            justify-content: center;
        }
        .confirm-modal-actions button {
            padding: 0.4rem 1.2rem;
            border-radius: 6px;
            border: 1px solid var(--border);
            cursor: pointer;
            font-size: 0.85rem;
        }
        .confirm-btn-cancel {
            background: var(--bg-primary);
            color: var(--text-primary);
        }
        .confirm-btn-delete {
            background: #ef4444;
            color: white;
            border-color: #ef4444;
        }
        .confirm-btn-delete:hover { background: #dc2626; }

        /* Clarification question UI */
        .clarify-section {
            margin-top: 1rem;
            padding: 1rem;
            background: linear-gradient(135deg, #f8fafc, #f1f5f9);
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            border-left: 4px solid var(--primary, #3b82f6);
        }

        .clarify-question {
            font-size: 1rem;
            font-weight: 600;
            color: #1e293b;
            margin: 0 0 0.75rem 0;
        }

        .clarify-options {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .clarify-option {
            padding: 0.625rem 1rem;
            background: white;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            text-align: left;
            cursor: pointer;
            font-size: 0.9rem;
            transition: all 0.15s ease;
        }

        .clarify-option:hover:not(.disabled) {
            border-color: var(--primary, #3b82f6);
            background: #f8fafc;
        }

        .clarify-option.selected {
            border-color: var(--primary, #3b82f6);
            background: rgba(59, 130, 246, 0.1);
            font-weight: 500;
        }

        .clarify-option.disabled {
            opacity: 0.5;
            cursor: default;
        }

        .clarify-other-btn {
            color: #64748b;
            font-style: italic;
        }

        .clarify-custom {
            margin-top: 0.75rem;
            display: flex;
            gap: 0.5rem;
        }

        .clarify-input {
            flex: 1;
            padding: 0.5rem 0.75rem;
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            font-size: 0.9rem;
        }

        .clarify-input:focus {
            outline: none;
            border-color: var(--primary, #3b82f6);
        }

        .clarify-submit {
            padding: 0.5rem 1rem;
            background: var(--primary, #3b82f6);
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.9rem;
        }

        .clarify-submit:hover {
            opacity: 0.9;
        }

/* ============== Layer Analysis ============== */

.status-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.la-trigger-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #666;
    cursor: pointer;
    padding: 2px 5px;
    margin-left: auto;
    transition: color 0.2s;
}

.la-trigger-icon:hover {
    color: #999;
}

.la-trigger-icon svg {
    width: 13px;
    height: 13px;
}

.la-modal {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    border: none;
    display: flex;
    flex-direction: column;
}

.la-body.viz-modal-body {
    display: flex;
    flex-direction: column;
    align-items: stretch !important;
    gap: 0;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 0;
}

/* Structured flex layout inside the modal body */
.la-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Top section: probe prompt, response */
.la-top-section {
    flex-shrink: 0;
    overflow-y: auto;
    max-height: 20vh;
    padding: 6px 16px;
    background: #161b22;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Probe prompt wrapper */
.la-prompt-wrap {
    margin-bottom: 8px;
}

.la-prompt-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.la-prompt-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: #8b949e;
    cursor: pointer;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 4px;
    flex-shrink: 0;
}
.la-prompt-toggle:hover { color: #c9d1d9; }
.la-prompt-toggle svg { width: 14px; height: 14px; }

.la-prompt-chips {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    align-items: center;
}

.la-prompt-chip {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: opacity 0.15s;
    white-space: nowrap;
}
.la-prompt-chip:hover { opacity: 0.8; }

/* Response wrapper */
.la-response-wrap {
    margin-bottom: 6px;
}

.la-response-wrap .la-response-body {
    max-height: 120px;
}

/* Summary wrapper — between top section and chart, always visible */
.la-summary-wrap {
    flex-shrink: 0;
    padding: 4px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Chart section: shares available space with bottom section */
.la-layout > .la-chart-wrapper {
    flex: 1 0 250px;
    overflow: hidden;
}

.la-layout > .la-chart-wrapper .la-chart-container {
    height: 100% !important;
}

/* Bottom section: weights (sticky) + table (scrollable) */
.la-bottom-section {
    flex: 1 0 180px;
    display: flex;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.la-weights-panel {
    flex-shrink: 0;
    width: 220px;
    overflow-y: auto;
    padding: 8px 12px;
    border-right: 1px solid rgba(255,255,255,0.06);
}

.la-table-panel {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: 8px 12px;
}

.la-chart-container {
    width: 100% !important;
    min-width: 0;
    height: 100%;
    min-height: 300px;
    background: #0d1117;
    border-radius: 0;
    box-sizing: border-box;
}

.la-stats {
    font-size: 0.85rem;
    color: var(--text-secondary, #8b949e);
    padding: 8px 16px;
}

.la-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.la-selected {
    font-weight: 600;
    color: #fbbf24;
    font-size: 0.95rem;
}

.la-score {
    color: var(--text-primary, #e6edf3);
    font-weight: 500;
}

.la-detail {
    color: var(--text-secondary, #8b949e);
    font-size: 0.8rem;
}

.la-gen-params {
    color: var(--text-tertiary, #6e7681);
    font-size: 0.72rem;
    margin-left: auto;
    font-style: italic;
}

.la-rerun-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    margin-left: 8px;
    background: transparent;
    color: var(--text-secondary, #8b949e);
    border: 1px solid #444c56;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}

.la-rerun-btn:hover {
    border-color: var(--primary, #3b82f6);
    color: var(--text-primary, #e6edf3);
}

.la-rerun-btn svg {
    width: 12px;
    height: 12px;
}

/* Collapsible probe prompt */
.la-prompt-details {
    margin-bottom: 8px;
}

.la-prompt-summary {
    cursor: pointer;
    font-size: 0.75rem;
    color: #8b949e;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 0;
    user-select: none;
}

.la-prompt-summary:hover {
    color: #c9d1d9;
}

.la-probe-prompt {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 6px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    line-height: 1.44;
}

.la-prompt-seg {
    padding-left: 8px;
    font-size: 0.738rem;
}

.la-prompt-label {
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 4px;
}

.la-prompt-text {
    color: #b1bac4;
}

/* Generated response display */
.la-response-section {
    margin-bottom: 10px;
}

.la-response-header {
    font-size: 0.75rem;
    color: #8b949e;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.la-response-body {
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    line-height: 1.7;
    font-size: 0.85rem;
    max-height: 200px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.la-muted {
    color: #8b949e;
    font-style: italic;
}

.la-word {
    cursor: pointer;
    padding: 1px 2px;
    border-radius: 2px;
    transition: background 0.12s, color 0.12s;
}

.la-word:hover,
.la-word.la-word-active {
    background: rgba(255, 255, 255, 0.35);
    color: #ffffff;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}

.la-loading {
    color: var(--text-secondary, #8b949e);
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.la-error {
    color: #ef4444;
}

.la-prompt-seg-clickable:hover {
    background: rgba(255,255,255,0.04);
    border-radius: 4px;
}

.la-word-flash {
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
    transition: background 1.5s ease-out;
}

/* Progress display with probe segments */
.la-progress-segments {
    margin-top: 16px;
    text-align: left;
}
.la-progress-desc {
    color: var(--text-secondary, #8b949e);
    font-size: 0.82rem;
    margin-bottom: 10px;
}
.la-progress-seg {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.la-progress-seg:last-child { border-bottom: none; }
.la-progress-seg-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 5px;
}
.la-progress-seg-label {
    font-weight: 600;
    font-size: 0.82rem;
    min-width: 70px;
    flex-shrink: 0;
}
.la-progress-seg-text {
    color: var(--text-primary, #e6edf3);
    font-size: 0.82rem;
    opacity: 0.8;
}

/* Model name in header */
.la-model-name {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-secondary, #8b949e);
    background: rgba(255,255,255,0.06);
    padding: 2px 10px;
    border-radius: 10px;
    margin-left: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}
.la-model-name:empty { display: none; }

/* Header actions (settings + close) */
.la-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.la-settings-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-secondary, #8b949e);
    cursor: pointer;
    border-radius: 6px;
    padding: 4px 8px;
    display: flex;
    align-items: center;
    transition: all 0.15s;
}
.la-settings-btn:hover { color: var(--text-primary, #e6edf3); border-color: rgba(255,255,255,0.2); }
.la-settings-btn.active { color: #3b82f6; border-color: #3b82f6; }
.la-settings-btn svg { width: 16px; height: 16px; }

/* Segment editor panel */
.la-editor-panel {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    max-height: 50vh;
    overflow-y: auto;
}
.la-editor-header {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary, #e6edf3);
    margin-bottom: 4px;
}
.la-editor-desc {
    color: var(--text-secondary, #8b949e);
    font-size: 0.78rem;
    margin-bottom: 12px;
    line-height: 1.4;
}
.la-editor-segments {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.la-editor-seg {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px;
    border-radius: 6px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
}
.la-editor-seg-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 8px;
}
.la-editor-label {
    width: 90px;
    flex-shrink: 0;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    padding: 4px 8px;
    color: var(--text-primary, #e6edf3);
    font-size: 0.82rem;
    font-weight: 600;
}
.la-editor-text {
    flex: 1;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    padding: 4px 8px;
    color: var(--text-primary, #e6edf3);
    font-size: 0.82rem;
    resize: vertical;
    min-height: 36px;
    font-family: inherit;
}
.la-editor-label:focus, .la-editor-text:focus {
    outline: none;
    border-color: #3b82f6;
}
.la-editor-remove {
    background: none;
    border: none;
    color: var(--text-secondary, #8b949e);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    flex-shrink: 0;
    margin-top: 2px;
}
.la-editor-remove:hover:not(:disabled) { color: #ef4444; }
.la-editor-remove:disabled { opacity: 0.3; cursor: not-allowed; }
.la-editor-remove svg { width: 14px; height: 14px; }
.la-editor-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    align-items: center;
}
.la-editor-add, .la-editor-reset, .la-editor-save {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: var(--text-secondary, #8b949e);
    transition: all 0.15s;
}
.la-editor-add:hover, .la-editor-reset:hover { color: var(--text-primary, #e6edf3); border-color: rgba(255,255,255,0.2); }
.la-editor-add:disabled { opacity: 0.3; cursor: not-allowed; }
.la-editor-add svg, .la-editor-reset svg, .la-editor-save svg { width: 14px; height: 14px; }
.la-editor-save {
    margin-left: auto;
    background: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
}
.la-editor-save:hover { background: #2563eb; }

/* Chart wrapper with toggle button */
.la-chart-wrapper {
    position: relative;
    width: 100% !important;
}

.la-chart-toggles {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    display: flex;
    gap: 4px;
}

.la-chart-toggle {
    background: rgba(30, 37, 46, 0.85);
    color: #8b949e;
    border: 1px solid #444c56;
    border-radius: 4px;
    padding: 3px 10px;
    font-size: 0.72rem;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.15s;
}

.la-chart-toggle:hover {
    color: #e6edf3;
    border-color: #6e7681;
}

.la-chart-toggle.active {
    background: rgba(59, 130, 246, 0.25);
    color: #3b82f6;
    border-color: #3b82f6;
}

/* Layer-Local Jaggedness Chart */
.la-jag-chart-wrap {
    flex-shrink: 0;
    margin: 0;
    padding: 4px 16px 4px;
    border-top: 1px solid rgba(255,255,255,0.06);
    background: #0d1117;
}
.la-jag-header {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.la-chart-info {
    margin-left: auto;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-style: italic;
    color: rgba(255,255,255,0.35);
    cursor: help;
    flex-shrink: 0;
}
.la-chart-info:hover {
    border-color: rgba(255,255,255,0.5);
    color: rgba(255,255,255,0.7);
}
#laHmmInfoBtn { cursor: pointer; }
.la-hmm-params {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 8px;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-size: 10px;
    color: rgba(255,255,255,0.5);
}
.la-hmm-param-desc {
    flex: 1;
    font-size: 9px;
    color: rgba(255,255,255,0.35);
    line-height: 1.3;
}
.la-hmm-param-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: monospace;
    font-size: 10px;
    white-space: nowrap;
    color: rgba(255,255,255,0.5);
}
.la-hmm-param-input {
    width: 58px;
    padding: 2px 4px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 3px;
    color: #e0e0e0;
    font-family: monospace;
    font-size: 10px;
    text-align: right;
}
.la-hmm-param-input:focus {
    outline: none;
    border-color: rgba(59,130,246,0.5);
}
.la-toggle-switch {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    margin-left: 8px;
    flex-shrink: 0;
}
.la-toggle-label {
    font-size: 9px;
    font-family: monospace;
    color: rgba(255,255,255,0.35);
}
.la-toggle-switch input { display: none; }
.la-toggle-slider {
    width: 26px;
    height: 14px;
    border-radius: 7px;
    background: rgba(255,255,255,0.15);
    position: relative;
    transition: background 0.2s;
}
.la-toggle-slider::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.6);
    top: 2px;
    left: 2px;
    transition: transform 0.2s;
}
.la-toggle-switch input:checked + .la-toggle-slider {
    background: rgba(59,130,246,0.4);
}
.la-toggle-switch input:checked + .la-toggle-slider::after {
    transform: translateX(12px);
}
/* Geometry classification badges */
.la-geo-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    cursor: pointer;
    background: rgba(255,255,255,0.06);
    margin: 0 3px;
    position: relative;
}
.la-geo-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.la-geo-badge:hover { background: rgba(255,255,255,0.12); }
.la-geo-tooltip {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: #1e1e2e;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 10px;
    line-height: 1.5;
    white-space: pre;
    z-index: 100;
    min-width: 200px;
    color: rgba(255,255,255,0.7);
}
.la-geo-badge:hover .la-geo-tooltip { display: block; }
.la-jag-legend {
    display: flex;
    gap: 10px;
    font-size: 10px;
    flex-wrap: wrap;
}
.la-jag-legend-item {
    display: flex;
    align-items: center;
    gap: 3px;
}
.la-jag-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.la-jag-canvas {
    width: 100%;
    height: 100px;
    display: block;
    background: #0d1117;
    border-radius: 4px;
}
.la-cusum-canvas {
    width: 100%;
    height: 140px;
    display: block;
    background: #0d1117;
    border-radius: 4px;
}

/* Side-by-side: weights + metrics table */
.la-controls-row {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.la-controls-left {
    flex: 0 0 280px;
    min-width: 250px;
}

.la-controls-right {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
}

.la-table-scroll {
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 4px;
}

/* Weight editor */
.la-weight-editor {
    padding: 8px 0;
    border-bottom: 1px solid var(--border, #333);
    margin-bottom: 8px;
}

.la-weight-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.la-weight-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary, #e6edf3);
}

.la-preset-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.la-preset-select {
    padding: 2px 6px;
    background: #1c2128;
    color: #e6edf3;
    border: 1px solid #444c56;
    border-radius: 4px;
    font-size: 0.75rem;
    max-width: 120px;
}

.la-preset-select option {
    background: #1c2128;
    color: #e6edf3;
}

.la-preset-name {
    width: 90px;
    padding: 2px 6px;
    background: #1c2128;
    color: #e6edf3;
    border: 1px solid #444c56;
    border-radius: 4px;
    font-size: 0.75rem;
}

.la-preset-name::placeholder {
    color: #6e7681;
    opacity: 1;
}

.la-preset-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    background: none;
    border: 1px solid var(--border, #333);
    border-radius: 4px;
    color: var(--text-secondary, #8b949e);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.la-preset-btn:hover {
    color: var(--primary, #3b82f6);
    border-color: var(--primary, #3b82f6);
}

.la-preset-del:hover {
    color: #ef4444;
    border-color: #ef4444;
}

.la-preset-btn svg {
    width: 12px;
    height: 12px;
}

.la-weight-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
}

.la-weight-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.la-weight-label {
    font-size: 0.75rem;
    color: var(--text-secondary, #8b949e);
    min-width: 62px;
    cursor: help;
}

.la-weight-slider {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    outline: none;
}

.la-weight-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: currentColor;
    cursor: pointer;
}

.la-weight-pct {
    font-size: 0.7rem;
    color: var(--text-secondary, #8b949e);
    min-width: 28px;
    text-align: right;
    font-family: monospace;
}

/* Layer metrics table */
.la-metrics-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
}

.la-metrics-table thead th {
    padding: 4px 8px;
    text-align: right;
    font-weight: 600;
    color: var(--text-secondary, #8b949e);
    border-bottom: 1px solid var(--border, #333);
    white-space: nowrap;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    position: sticky;
    top: 0;
    background: #1c2128;
    z-index: 1;
}

.la-metrics-table thead th:first-child {
    text-align: left;
}

.la-metrics-table tbody tr {
    cursor: pointer;
    transition: background 0.12s;
}

.la-metrics-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.04);
}

.la-metrics-table tbody tr.la-row-selected {
    background: rgba(251, 191, 36, 0.15);
    border-left: 3px solid #fbbf24;
}

.la-metrics-table tbody tr.la-row-selected td {
    color: #fbbf24;
    font-weight: 600;
}

.la-metrics-table tbody tr.la-row-active {
    background: rgba(59, 130, 246, 0.08);
}

.la-metrics-table td {
    padding: 2px 6px;
    text-align: right;
    color: var(--text-secondary, #8b949e);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    font-size: 0.72rem;
}

.la-metrics-table td:first-child {
    text-align: left;
    color: var(--text-primary, #e6edf3);
    font-weight: 500;
}

.la-metrics-table td.la-cell-best {
    color: #fbbf24;
    font-weight: 600;
}

.la-metrics-table .la-score-bar {
    display: inline-block;
    height: 6px;
    border-radius: 3px;
    vertical-align: middle;
    margin-right: 4px;
    background: linear-gradient(90deg, #3b82f6, #a855f7);
}

/* Actions */
.la-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border, #333);
}

.la-accept-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #fbbf24;
    color: #000;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s;
}

.la-accept-btn:hover {
    opacity: 0.85;
}

.la-accept-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.la-accept-btn svg {
    width: 14px;
    height: 14px;
}

.la-override {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--text-secondary, #8b949e);
}

.la-override-input {
    width: 48px;
    padding: 4px 6px;
    background: #1c2128;
    color: #e6edf3;
    border: 1px solid #444c56;
    border-radius: 4px;
    font-size: 0.8rem;
    text-align: center;
}

.la-override-btn {
    padding: 4px 10px;
    background: #1c2128;
    color: #e6edf3;
    border: 1px solid #444c56;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: border-color 0.2s;
}

.la-override-btn:hover {
    border-color: var(--primary, #3b82f6);
}

/* ========== Library Tab ========== */

.library-sidebar-actions {
    margin-bottom: 0.75rem;
}

.library-upload-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: opacity 0.2s;
}

.library-upload-btn:hover {
    opacity: 0.85;
}

.library-upload-btn svg {
    width: 14px;
    height: 14px;
}

.library-sidebar-section h4 {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 0.75rem 0 0.5rem;
}

.library-empty {
    font-size: 0.75rem;
    color: var(--text-muted);
    padding: 0.5rem 0;
}

.library-active-item {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
}

.library-active-name {
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.25rem;
}

.library-progress-bar {
    width: 100%;
    height: 3px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 0.25rem;
}

.library-progress-fill {
    height: 100%;
    background: var(--primary);
    transition: width 0.3s ease;
    border-radius: 2px;
}

.library-active-stage {
    font-size: 0.65rem;
    color: var(--text-muted);
}

.library-completed-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
    font-size: 0.75rem;
}

.library-doc-cover-sm {
    width: 20px;
    height: 28px;
    object-fit: cover;
    border-radius: 2px;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.library-doc-icon svg {
    width: 14px;
    height: 14px;
    color: var(--text-muted);
}

.library-doc-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.library-doc-meta {
    font-size: 0.65rem;
    color: var(--text-muted);
}

.library-open-modal-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem;
    margin-top: 0.75rem;
    background: none;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.library-open-modal-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.library-open-modal-btn svg {
    width: 14px;
    height: 14px;
}

/* ========== Library Modal ========== */

.library-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.library-modal-overlay.active {
    display: flex;
}

.library-modal {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    max-width: 900px;
    max-height: 90vh;
    width: 94%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.library-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.75rem;
    border-bottom: 1px solid #e0e0e0;
    background: #fafafa;
}

.library-modal-header h2 {
    margin: 0;
    font-size: 1.25rem;
    color: #1a1a1a;
    font-weight: 500;
}

.library-modal-close {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: #888;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    line-height: 1;
    transition: color 0.15s;
}

.library-modal-close:hover {
    color: #333;
}

.library-modal-content {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.library-upload-zone {
    border: 2px dashed var(--border);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 1.5rem;
}

.library-upload-zone:hover,
.library-upload-zone.drag-over {
    border-color: var(--primary);
    background: rgba(59, 130, 246, 0.04);
}

.library-upload-zone svg {
    width: 32px;
    height: 32px;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.library-upload-zone p {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}

.library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

/* Library source attribution in chat messages */
.library-sources {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}

.library-source-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    background: rgba(168, 85, 247, 0.08);
    border: 1px solid rgba(168, 85, 247, 0.2);
}

.library-source-cover {
    width: 28px;
    height: 40px;
    object-fit: cover;
    border-radius: 0.2rem;
    border: 1px solid var(--border);
}

.library-source-name {
    font-size: 0.75rem;
    color: var(--text-muted);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.library-card {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
    transition: all 0.2s;
}

.library-card:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.library-card.processing {
    border-color: #fbbf24;
}

.library-card.error {
    border-color: #ef4444;
}

.library-card-cover {
    width: 100%;
    object-fit: contain;
    border-radius: 4px;
    margin-bottom: 0.75rem;
    border: 1px solid var(--border);
}

.library-card-icon {
    margin-bottom: 0.75rem;
}

.library-card-icon svg {
    width: 32px;
    height: 32px;
    color: var(--text-muted);
}

.library-card.error .library-card-icon svg {
    color: #ef4444;
}

.library-card-name {
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
    word-break: break-word;
}

.library-card-meta {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.library-card-progress {
    margin-top: 0.5rem;
}

.library-card-stage {
    font-size: 0.65rem;
    color: var(--text-muted);
}

.library-card-error {
    font-size: 0.7rem;
    color: #ef4444;
    margin-top: 0.25rem;
}

.library-card-delete {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 0.2s, color 0.2s;
    padding: 0.25rem;
}

.library-card:hover .library-card-delete {
    opacity: 1;
}

.library-card-delete:hover {
    color: #ef4444;
}

.library-card-delete svg {
    width: 14px;
    height: 14px;
}

.library-empty-modal {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Error items in sidebar */
.library-error-item {
    border-bottom-color: var(--danger);
}

.library-error-msg {
    font-size: 0.65rem;
    color: var(--danger);
    margin-top: 0.15rem;
}

/* Transient error toast */
.library-error-toast {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    color: #991b1b;
    animation: library-toast-fade 8s ease-in-out;
}

@keyframes library-toast-fade {
    0%, 80% { opacity: 1; }
    100% { opacity: 0; }
}