/**
 * GilGamez Admin Platform — Centralized AI & Communication Engine Stylesheet
 * 
 * Enterprise Level 4 Hybrid Brain Control Room UI/UX.
 * 5-Tier Responsive Architecture adhering strictly to Rule #1, Rule #6 & Rule #18.
 * Supports viewports from ultra-compact mobile (320px) up to 4K displays (1920px+).
 * 
 * Design Language: GilGamez Cyber-Glassmorphism (Dark Slate, Radiant Gold, Cyan & Emerald Accents).
 */

:root {
    --comm-gold: var(--theme-gold, var(--accent-gold, #ddaf31));
    --comm-gold-glow: var(--theme-gold-glow, rgba(221, 175, 49, 0.22));
    --comm-gold-border: var(--theme-gold-border, rgba(221, 175, 49, 0.38));
    --comm-gold-hover: var(--theme-gold-hover, #f1c44f);
    --comm-bg-base: var(--theme-bg-base, var(--bg-body, #0a0d14));
    --comm-bg-card: var(--theme-bg-card, var(--bg-surface, rgba(18, 24, 38, 0.88)));
    --comm-bg-surface: var(--theme-bg-surface, var(--bg-surface, rgba(14, 18, 28, 0.95)));
    --comm-bg-elevated: var(--theme-bg-elevated, var(--bg-card-hover, rgba(24, 32, 50, 0.9)));
    --comm-bg-input: var(--theme-input-bg, var(--bg-hover, rgba(11, 15, 25, 0.85)));
    --comm-border: var(--theme-border, var(--border, rgba(255, 255, 255, 0.08)));
    --comm-border-subtle: var(--theme-border-subtle, var(--border-subtle, rgba(255, 255, 255, 0.04)));
    --comm-border-strong: var(--theme-border-strong, var(--border-strong, rgba(255, 255, 255, 0.16)));
    --comm-text-primary: var(--theme-text-primary, var(--text-primary, #f8fafc));
    --comm-text-secondary: var(--theme-text-secondary, var(--text-secondary, #94a3b8));
    --comm-text-muted: var(--theme-text-muted, var(--text-muted, #64748b));
    --comm-success: var(--theme-success, #10b981);
    --comm-success-glow: rgba(16, 185, 129, 0.2);
    --comm-warning: var(--theme-warning, #f59e0b);
    --comm-warning-glow: rgba(245, 158, 11, 0.2);
    --comm-danger: var(--theme-danger, #ef4444);
    --comm-danger-glow: rgba(239, 68, 68, 0.2);
    --comm-accent: var(--theme-accent, var(--primary, #6366f1));
    --comm-accent-glow: var(--theme-accent-glow, rgba(99, 102, 241, 0.22));
    --comm-cyan: var(--theme-cyan, #0ea5e9);
    --comm-cyan-glow: rgba(14, 165, 233, 0.22);
    --comm-radius-sm: var(--theme-radius-sm, 6px);
    --comm-radius-md: var(--theme-radius-md, 10px);
    --comm-radius-lg: var(--theme-radius-lg, 14px);
    --comm-radius-xl: var(--theme-radius-xl, 18px);
    --comm-shadow-sm: var(--theme-shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.25));
    --comm-shadow-md: var(--theme-shadow-md, 0 8px 24px rgba(0, 0, 0, 0.35));
    --comm-shadow-lg: var(--theme-shadow-lg, 0 16px 40px rgba(0, 0, 0, 0.5));
    --comm-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   1. BASE CONTAINER & PAGE HEADER
   ============================================================ */
.comm-container {
    padding: 1.5rem 2rem 3rem;
    max-width: 1680px;
    margin: 0 auto;
    font-family: inherit;
    color: var(--comm-text-primary);
    box-sizing: border-box;
    width: 100%;
}

.comm-header {
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--comm-radius-lg, 12px);
    padding: 0.85rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.35);
    position: relative;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.comm-header:hover {
    border-color: rgba(255, 255, 255, 0.12);
}

.comm-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    flex-wrap: wrap;
}

.comm-title-group {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 240px;
}

.comm-title-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.comm-title-row h1 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: #ffffff;
    letter-spacing: -0.015em;
    line-height: 1.2;
}

.comm-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.6rem;
    border-radius: 9999px;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #fbbf24;
    white-space: nowrap;
}

.comm-title-group p {
    margin: 0;
    color: var(--comm-text-secondary, #94a3b8);
    font-size: 0.8rem;
    line-height: 1.4;
}

.comm-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.comm-header-actions .comm-btn {
    padding: 0.38rem 0.8rem;
    font-size: 0.78rem;
    height: 32px;
    font-weight: 600;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

/* Vitals Ribbon - Clean Single-Row Full-Width Status Strip */
.comm-vitals-strip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    width: 100%;
}

.comm-vitals-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.22rem 0.65rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 0.75rem;
    font-weight: 500;
    color: #94a3b8;
    backdrop-filter: blur(6px);
    white-space: nowrap;
    transition: all 0.15s ease;
}

.comm-vitals-pill:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
    color: #e2e8f0;
}

.comm-vitals-pill strong {
    color: var(--comm-text-primary, #ffffff);
}

.comm-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #64748b;
    display: inline-block;
    flex-shrink: 0;
}

.comm-pulse-green {
    background: var(--comm-success);
    box-shadow: 0 0 10px var(--comm-success);
    animation: commPulse 2s infinite ease-in-out;
}

.comm-pulse-blue {
    background: var(--comm-cyan);
    box-shadow: 0 0 10px var(--comm-cyan);
    animation: commPulse 2s infinite ease-in-out;
}

.comm-pulse-gold {
    background: var(--comm-gold);
    box-shadow: 0 0 10px var(--comm-gold);
    animation: commPulse 2s infinite ease-in-out;
}

@keyframes commPulse {
    0% { transform: scale(0.9); opacity: 0.75; }
    50% { transform: scale(1.25); opacity: 1; }
    100% { transform: scale(0.9); opacity: 0.75; }
}

/* ============================================================
   2. WORKSPACE TABS NAVIGATION
   ============================================================ */
.comm-tabs-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    padding: 0.35rem;
    background: rgba(16, 22, 34, 0.85);
    backdrop-filter: blur(10px);
    border: 1px solid var(--comm-border);
    border-radius: var(--comm-radius-lg);
    overflow-x: auto;
    scrollbar-width: none;
}

.comm-tabs-nav::-webkit-scrollbar {
    display: none;
}

.comm-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.25rem;
    border-radius: var(--comm-radius-md);
    background: transparent;
    border: 1px solid transparent;
    color: var(--comm-text-secondary);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--comm-transition);
}

.comm-tab-btn:hover {
    color: var(--comm-text-primary);
    background: rgba(255, 255, 255, 0.04);
}

.comm-tab-btn.active {
    background: linear-gradient(135deg, rgba(221, 175, 49, 0.16) 0%, rgba(99, 102, 241, 0.12) 100%);
    border-color: var(--comm-gold-border);
    color: var(--comm-gold);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.comm-tab-badge {
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    background: var(--comm-warning);
    color: #0f172a;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
}

/* Mobile Nav Bar */
.comm-mobile-nav-bar {
    display: none;
    background: var(--comm-bg-card);
    border: 1px solid var(--comm-border);
    border-radius: var(--comm-radius-lg);
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    align-items: center;
    gap: 0.75rem;
}

.comm-mobile-nav-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--comm-text-secondary);
}

.comm-mobile-nav-select-wrap {
    flex: 1;
}

.comm-mobile-tab-select {
    width: 100%;
    background: var(--comm-bg-input);
    border: 1px solid var(--comm-border);
    border-radius: var(--comm-radius-md);
    padding: 0.6rem 0.85rem;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    outline: none;
}

/* Panes */
.comm-pane {
    display: none;
    animation: commFadeIn 0.25s ease-out;
}

.comm-pane.active {
    display: block;
}

@keyframes commFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   3. WORKSPACE 1: COMMAND CENTER & VITALS (OVERVIEW)
   ============================================================ */

/* Presence Dock */
.comm-presence-dock {
    background: linear-gradient(135deg, rgba(20, 26, 42, 0.9) 0%, rgba(15, 20, 32, 0.95) 100%);
    backdrop-filter: blur(14px);
    border: 1px solid var(--comm-border);
    border-radius: var(--comm-radius-xl);
    padding: 1.75rem;
    margin-bottom: 2rem;
    box-shadow: var(--comm-shadow-md);
    position: relative;
}

.comm-presence-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--comm-border-subtle);
}

.comm-presence-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.comm-presence-subtitle {
    font-size: 0.82rem;
    color: var(--comm-text-secondary);
    margin-top: 0.25rem;
}

.comm-presence-pills {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.comm-presence-btn {
    padding: 0.55rem 1rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--comm-border);
    color: var(--comm-text-secondary);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--comm-transition);
}

.comm-presence-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--comm-text-primary);
    transform: translateY(-1px);
}

.comm-presence-btn.active[data-mode="available"] {
    background: rgba(16, 185, 129, 0.18);
    border-color: rgba(16, 185, 129, 0.5);
    color: #34d399;
    box-shadow: 0 0 16px var(--comm-success-glow);
}

.comm-presence-btn.active[data-mode="busy_focus"] {
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(245, 158, 11, 0.5);
    color: #fbbf24;
    box-shadow: 0 0 16px var(--comm-warning-glow);
}

.comm-presence-btn.active[data-mode="away_afk"] {
    background: rgba(249, 115, 22, 0.18);
    border-color: rgba(249, 115, 22, 0.5);
    color: #fb923c;
    box-shadow: 0 0 16px rgba(249, 115, 22, 0.2);
}

.comm-presence-btn.active[data-mode="offline_sleep"] {
    background: rgba(168, 85, 247, 0.18);
    border-color: rgba(168, 85, 247, 0.5);
    color: #c084fc;
    box-shadow: 0 0 16px rgba(168, 85, 247, 0.2);
}

.comm-presence-btn.active[data-mode="emergency_only"] {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.5);
    color: #f87171;
    box-shadow: 0 0 16px var(--comm-danger-glow);
}

.comm-presence-inputs-grid {
    display: grid;
    grid-template-columns: 2fr 2fr 1.2fr;
    gap: 1.25rem;
    align-items: flex-end;
}

/* Persona Cards Grid */
.comm-personas-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.comm-persona-card {
    background: var(--comm-bg-card);
    backdrop-filter: blur(10px);
    border: 1px solid var(--comm-border);
    border-radius: var(--comm-radius-lg);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    transition: var(--comm-transition);
    position: relative;
    overflow: hidden;
}

.comm-persona-card:hover {
    transform: translateY(-3px);
    border-color: var(--comm-border-strong);
    box-shadow: var(--comm-shadow-md);
}

.comm-persona-card.active {
    border-color: var(--comm-gold);
    background: linear-gradient(135deg, rgba(221, 175, 49, 0.08) 0%, rgba(18, 24, 38, 0.95) 100%);
    box-shadow: 0 0 24px var(--comm-gold-glow);
}

.comm-persona-card.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--comm-gold);
}

.comm-persona-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.comm-persona-icon {
    font-size: 2rem;
    line-height: 1;
}

.comm-persona-status-badge {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
}

.comm-persona-card.active .comm-persona-status-badge {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.4);
}

.comm-persona-card:not(.active) .comm-persona-status-badge {
    background: rgba(255, 255, 255, 0.05);
    color: var(--comm-text-muted);
    border: 1px solid var(--comm-border);
}

.comm-persona-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
}

.comm-persona-desc {
    font-size: 0.82rem;
    color: var(--comm-text-secondary);
    line-height: 1.45;
    margin: 0;
    min-height: 2.9rem;
}

.comm-persona-preview-box {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--comm-border-subtle);
    border-radius: var(--comm-radius-sm);
    padding: 0.65rem 0.85rem;
    font-size: 0.76rem;
    color: #cbd5e1;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    line-height: 1.4;
    max-height: 64px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* Top KPI Grid */
.comm-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.25rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.comm-kpi-card {
    background: var(--comm-bg-card);
    backdrop-filter: blur(10px);
    border: 1px solid var(--comm-border);
    border-radius: var(--comm-radius-lg);
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    transition: var(--comm-transition);
    min-width: 0;
}

.comm-kpi-card:hover {
    transform: translateY(-2px);
    border-color: var(--comm-gold-border);
    box-shadow: var(--comm-shadow-sm);
}

.comm-kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--comm-gold-glow);
    border: 1px solid var(--comm-gold-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.comm-kpi-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.comm-kpi-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
    letter-spacing: -0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comm-kpi-label {
    font-size: 0.8rem;
    color: var(--comm-text-secondary);
    margin-top: 0.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
   4. WORKSPACE 2: INTERACTIVE DIALOGUE STUDIO & CASCADE TRACE
   ============================================================ */
.comm-studio-layout {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 1.5rem;
    align-items: stretch;
    min-height: 640px;
}

/* Chat Simulator Window */
.comm-chat-window {
    background: var(--comm-bg-card);
    backdrop-filter: blur(12px);
    border: 1px solid var(--comm-border);
    border-radius: var(--comm-radius-xl);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--comm-shadow-md);
}

.comm-chat-window-header {
    background: rgba(14, 18, 30, 0.95);
    border-bottom: 1px solid var(--comm-border);
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.comm-chat-feed {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 520px;
    min-height: 400px;
    background: radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.04) 0%, transparent 70%);
}

.comm-bubble {
    max-width: 82%;
    padding: 0.9rem 1.15rem;
    border-radius: 16px;
    font-size: 0.9rem;
    line-height: 1.5;
    word-break: break-word;
    position: relative;
    animation: commBubblePop 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes commBubblePop {
    from { opacity: 0; transform: scale(0.96) translateY(4px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.comm-bubble-user {
    align-self: flex-end;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: #ffffff;
    border-bottom-right-radius: 4px;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
}

.comm-bubble-bot {
    align-self: flex-start;
    background: rgba(26, 33, 50, 0.95);
    border: 1px solid var(--comm-border);
    color: #f1f5f9;
    border-bottom-left-radius: 4px;
    box-shadow: var(--comm-shadow-sm);
}

.comm-bubble-bot.tier-reflex {
    border-color: rgba(221, 175, 49, 0.35);
}

.comm-bubble-bot.tier-llm {
    border-color: rgba(14, 165, 233, 0.4);
}

.comm-bubble-sender {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--comm-text-secondary);
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.comm-bubble-user .comm-bubble-sender {
    color: rgba(255, 255, 255, 0.85);
    justify-content: flex-end;
}

.comm-bubble-content {
    color: inherit;
    line-height: 1.5;
}

.comm-bubble-meta {
    font-size: 0.7rem;
    color: var(--comm-text-muted);
    margin-top: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.comm-bubble-user .comm-bubble-meta {
    color: rgba(255, 255, 255, 0.7);
    justify-content: flex-end;
}

/* Quick Prompt Chips */
.comm-quick-chips-row {
    padding: 0.75rem 1rem;
    background: rgba(12, 16, 26, 0.85);
    border-top: 1px solid var(--comm-border);
    border-bottom: 1px solid var(--comm-border);
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.comm-quick-chips-row::-webkit-scrollbar {
    display: none;
}

.comm-test-chip {
    padding: 0.4rem 0.8rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--comm-border);
    color: var(--comm-text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--comm-transition);
}

.comm-test-chip:hover {
    background: var(--comm-gold-glow);
    border-color: var(--comm-gold-border);
    color: var(--comm-gold);
    transform: translateY(-1px);
}

/* Chat Input Bar */
.comm-chat-input-bar {
    padding: 1rem 1.25rem;
    background: rgba(14, 18, 30, 0.98);
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.comm-chat-input-bar input {
    flex: 1;
    background: var(--comm-bg-input);
    border: 1px solid var(--comm-border);
    border-radius: var(--comm-radius-md);
    padding: 0.75rem 1rem;
    color: #ffffff;
    font-size: 0.9rem;
    outline: none;
    transition: var(--comm-transition);
}

.comm-chat-input-bar input:focus {
    border-color: var(--comm-gold);
    box-shadow: 0 0 0 3px var(--comm-gold-glow);
}

/* Real-Time Cascade Inspector */
.comm-trace-panel {
    background: var(--comm-bg-card);
    backdrop-filter: blur(12px);
    border: 1px solid var(--comm-border);
    border-radius: var(--comm-radius-xl);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    box-shadow: var(--comm-shadow-md);
}

.comm-trace-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--comm-border);
    padding-bottom: 1rem;
}

.comm-trace-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.comm-tier-display {
    background: rgba(12, 16, 26, 0.75);
    border: 1px solid var(--comm-border);
    border-radius: var(--comm-radius-lg);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.comm-tier-tag-hero {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.comm-tier-tag-hero.tier-1 {
    color: #fde047;
    text-shadow: 0 0 16px rgba(221, 175, 49, 0.4);
}

.comm-tier-tag-hero.tier-2 {
    color: #38bdf8;
    text-shadow: 0 0 16px rgba(14, 165, 233, 0.4);
}

.comm-tier-tag-hero.tier-3 {
    color: #c084fc;
    text-shadow: 0 0 16px rgba(168, 85, 247, 0.4);
}

.comm-trace-metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.45rem 0.6rem;
    border-radius: var(--comm-radius-sm);
    background: rgba(255, 255, 255, 0.02);
    font-size: 0.82rem;
}

.comm-trace-metric-label {
    color: var(--comm-text-secondary);
}

.comm-trace-metric-value {
    color: #ffffff;
    font-weight: 700;
    font-family: ui-monospace, monospace;
}

/* ============================================================
   5. WORKSPACE 3: MATRIX & WORKSPACE 4: RADAR COMPONENTS
   ============================================================ */
.comm-card {
    background: var(--comm-bg-card);
    backdrop-filter: blur(12px);
    border: 1px solid var(--comm-border);
    border-radius: var(--comm-radius-lg);
    padding: 1.5rem;
    box-shadow: var(--comm-shadow-sm);
}

/* Filter Bars */
.comm-filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.comm-search-input {
    flex: 1;
    min-width: 240px;
    max-width: 420px;
    background: var(--comm-bg-input);
    border: 1px solid var(--comm-border);
    border-radius: var(--comm-radius-md);
    padding: 0.65rem 1rem;
    color: #ffffff;
    font-size: 0.88rem;
    outline: none;
    transition: var(--comm-transition);
}

.comm-search-input:focus {
    border-color: var(--comm-gold);
    box-shadow: 0 0 0 3px var(--comm-gold-glow);
}

.comm-filter-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.comm-select {
    background: var(--comm-bg-input);
    border: 1px solid var(--comm-border);
    border-radius: var(--comm-radius-md);
    padding: 0.65rem 1rem;
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
    outline: none;
    cursor: pointer;
    transition: var(--comm-transition);
}

.comm-select:focus {
    border-color: var(--comm-gold);
}

/* Data Tables */
.comm-table-wrap {
    background: var(--comm-bg-card);
    border: 1px solid var(--comm-border);
    border-radius: var(--comm-radius-lg);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: var(--comm-shadow-sm);
    width: 100%;
}

.comm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    text-align: left;
}

.comm-table th {
    background: rgba(14, 18, 30, 0.95);
    color: var(--comm-text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--comm-border);
}

.comm-table td {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--comm-border-subtle);
    color: var(--comm-text-primary);
    vertical-align: middle;
}

.comm-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

.comm-table tr:last-child td {
    border-bottom: none;
}

/* Form Controls */
.comm-form-group {
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.comm-form-group label,
.comm-input-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--comm-text-secondary);
}

.comm-input, .comm-textarea {
    width: 100%;
    background: var(--comm-bg-input);
    border: 1px solid var(--comm-border);
    border-radius: var(--comm-radius-md);
    padding: 0.75rem 1rem;
    color: #ffffff;
    font-size: 0.88rem;
    outline: none;
    box-sizing: border-box;
    transition: var(--comm-transition);
}

.comm-input:focus, .comm-textarea:focus {
    border-color: var(--comm-gold);
    box-shadow: 0 0 0 3px var(--comm-gold-glow);
}

.comm-textarea {
    resize: vertical;
    font-family: inherit;
    line-height: 1.5;
}

.comm-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

/* ============================================================
   6. SLANG RADAR: CANDIDATES GRID & BATCH DOCK
   ============================================================ */
.comm-grid-candidates {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.comm-candidate-card {
    background: var(--comm-bg-card);
    backdrop-filter: blur(10px);
    border: 1px solid var(--comm-border);
    border-radius: var(--comm-radius-lg);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    transition: var(--comm-transition);
    position: relative;
}

.comm-candidate-card:hover {
    transform: translateY(-2px);
    border-color: var(--comm-border-strong);
    box-shadow: var(--comm-shadow-sm);
}

.comm-candidate-card.selected {
    border-color: var(--comm-gold);
    background: linear-gradient(135deg, rgba(221, 175, 49, 0.08) 0%, rgba(18, 24, 38, 0.95) 100%);
}

.comm-candidate-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.comm-candidate-word {
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.01em;
}

.comm-candidate-check {
    width: 18px;
    height: 18px;
    accent-color: var(--comm-gold);
    cursor: pointer;
}

.comm-candidate-meta {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-size: 0.76rem;
    color: var(--comm-text-secondary);
    flex-wrap: wrap;
}

.comm-context-quote {
    background: rgba(0, 0, 0, 0.35);
    border-left: 3px solid var(--comm-gold);
    border-radius: 0 var(--comm-radius-sm) var(--comm-radius-sm) 0;
    padding: 0.6rem 0.85rem;
    font-size: 0.8rem;
    color: #cbd5e1;
    font-style: italic;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.comm-confidence-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 9999px;
    overflow: hidden;
}

.comm-confidence-fill {
    height: 100%;
    border-radius: 9999px;
    background: linear-gradient(90deg, var(--comm-warning) 0%, var(--comm-success) 100%);
    transition: width 0.4s ease;
}

.comm-candidate-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid var(--comm-border-subtle);
}

/* Floating Batch Dock */
.comm-batch-dock {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: rgba(14, 18, 30, 0.96);
    backdrop-filter: blur(16px);
    border: 1px solid var(--comm-gold-border);
    border-radius: 9999px;
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6), 0 0 20px var(--comm-gold-glow);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.comm-batch-dock.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.comm-batch-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

/* ============================================================
   7. POLYSEMY & WORD SENSE GRID
   ============================================================ */
.comm-polysemy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}

.comm-polysemy-card {
    background: var(--comm-bg-card);
    backdrop-filter: blur(10px);
    border: 1px solid var(--comm-border);
    border-radius: var(--comm-radius-lg);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.comm-polysemy-word {
    font-size: 1.2rem;
    font-weight: 800;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid var(--comm-border-subtle);
    padding-bottom: 0.65rem;
}

.comm-sense-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--comm-border-subtle);
    border-radius: var(--comm-radius-md);
    padding: 0.75rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.comm-sense-title {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--comm-gold);
}

.comm-sense-desc {
    font-size: 0.78rem;
    color: var(--comm-text-secondary);
    line-height: 1.4;
}

.comm-sense-exemplars {
    font-size: 0.72rem;
    color: var(--comm-cyan);
    font-family: ui-monospace, monospace;
}

/* ============================================================
   8. BUTTONS & BADGES
   ============================================================ */
.comm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    border-radius: var(--comm-radius-md);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    transition: var(--comm-transition);
    white-space: nowrap;
}

.comm-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.comm-btn-primary {
    background: linear-gradient(135deg, var(--comm-gold) 0%, #b88e1a 100%);
    color: #0f172a;
    box-shadow: 0 4px 14px var(--comm-gold-glow);
}

.comm-btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px var(--comm-gold-glow);
    background: linear-gradient(135deg, var(--comm-gold-hover) 0%, #c99c1d 100%);
}

.comm-btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--comm-border);
    color: var(--comm-text-primary);
}

.comm-btn-secondary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    transform: translateY(-1px);
}

.comm-btn-success {
    background: rgba(16, 185, 129, 0.18);
    border-color: rgba(16, 185, 129, 0.4);
    color: #34d399;
}

.comm-btn-success:hover:not(:disabled) {
    background: rgba(16, 185, 129, 0.28);
    box-shadow: 0 4px 14px var(--comm-success-glow);
    transform: translateY(-1px);
}

.comm-btn-danger {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.4);
    color: #f87171;
}

.comm-btn-danger:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.28);
    box-shadow: 0 4px 14px var(--comm-danger-glow);
    transform: translateY(-1px);
}

/* Badges */
.comm-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.74rem;
    font-weight: 700;
    border: 1px solid transparent;
}

.comm-badge-casual { background: rgba(99, 102, 241, 0.15); color: #818cf8; border-color: rgba(99, 102, 241, 0.35); }
.comm-badge-assistant { background: rgba(221, 175, 49, 0.15); color: #fde047; border-color: rgba(221, 175, 49, 0.35); }
.comm-badge-transaction { background: rgba(16, 185, 129, 0.15); color: #34d399; border-color: rgba(16, 185, 129, 0.35); }
.comm-badge-community { background: rgba(14, 165, 233, 0.15); color: #38bdf8; border-color: rgba(14, 165, 233, 0.35); }
.comm-badge-security { background: rgba(239, 68, 68, 0.15); color: #f87171; border-color: rgba(239, 68, 68, 0.35); }
.comm-badge-tool { background: rgba(14, 165, 233, 0.18); color: #38bdf8; border-color: rgba(14, 165, 233, 0.4); font-family: ui-monospace, monospace; font-size: 0.74rem; }
.comm-badge-approved { background: rgba(16, 185, 129, 0.15); color: #34d399; border-color: rgba(16, 185, 129, 0.35); }
.comm-badge-pending { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border-color: rgba(245, 158, 11, 0.35); }
.comm-badge-rejected { background: rgba(239, 68, 68, 0.15); color: #f87171; border-color: rgba(239, 68, 68, 0.35); }

.comm-chips-wrap {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.comm-kw-chip {
    padding: 0.2rem 0.55rem;
    border-radius: var(--comm-radius-sm);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--comm-border);
    font-size: 0.74rem;
    color: #e2e8f0;
}

/* ============================================================
   9. MODALS & POPUPS
   ============================================================ */
.comm-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(5, 7, 12, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 1.25rem;
    box-sizing: border-box;
    animation: commBackdropFade 0.2s ease-out;
}

@keyframes commBackdropFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.comm-modal-box {
    background: linear-gradient(135deg, rgba(20, 26, 42, 0.98) 0%, rgba(14, 18, 30, 0.98) 100%);
    border: 1px solid var(--comm-gold-border);
    border-radius: var(--comm-radius-xl);
    width: 100%;
    max-width: 600px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), 0 0 24px var(--comm-gold-glow);
    overflow: hidden;
    animation: commModalSlide 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

.comm-modal-header {
    padding: 1.25rem 1.75rem;
    border-bottom: 1px solid var(--comm-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(14, 18, 30, 0.95);
}

.comm-modal-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.comm-btn-close {
    background: transparent;
    border: none;
    color: var(--comm-text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    transition: var(--comm-transition);
    padding: 0.25rem;
}

.comm-btn-close:hover {
    color: #ffffff;
    transform: scale(1.15);
}

.comm-modal-body {
    padding: 1.5rem 1.75rem;
    overflow-y: auto;
    flex: 1;
}

.comm-modal-footer {
    padding: 1.25rem 1.75rem;
    border-top: 1px solid var(--comm-border);
    background: rgba(14, 18, 30, 0.95);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* ============================================================
   9.5 SUBPANES, UTILITY CLASSES & REUSABLE PATTERNS (RULE #1)
   ============================================================ */
.comm-subpane {
    display: none;
    animation: commFadeIn 0.2s ease-out;
}

.comm-subpane.active {
    display: block;
}

.comm-btn-block {
    width: 100%;
    min-height: 42px;
}

.comm-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.comm-section-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

.comm-section-subtitle {
    font-size: 0.85rem;
    color: var(--comm-text-secondary);
    margin: 0.25rem 0 0 0;
}

.comm-mt-1 { margin-top: 0.25rem; }
.comm-mt-2 { margin-top: 0.5rem; }
.comm-mt-3 { margin-top: 0.75rem; }
.comm-mt-4 { margin-top: 1rem; }
.comm-mt-6 { margin-top: 1.5rem; }
.comm-mb-2 { margin-bottom: 0.5rem; }
.comm-mb-3 { margin-bottom: 0.75rem; }
.comm-mb-4 { margin-bottom: 1rem; }
.comm-mb-6 { margin-bottom: 1.5rem; }
.comm-ml-auto { margin-left: auto; }

.comm-text-warning { color: var(--comm-warning) !important; }
.comm-text-success { color: var(--comm-success) !important; }
.comm-text-danger { color: #f87171 !important; }
.comm-text-gold { color: var(--comm-gold) !important; }
.comm-text-secondary { color: var(--comm-text-secondary) !important; }
.comm-text-muted { color: var(--comm-text-muted) !important; }
.comm-text-cyan { color: #38bdf8 !important; }
.comm-text-right { text-align: right; }
.comm-text-center { text-align: center; }
.comm-nowrap { white-space: nowrap; }
.comm-flex-1 { flex: 1; }

.comm-hidden { display: none !important; }
.comm-grid-full { grid-column: 1 / -1; }

.comm-empty-state {
    text-align: center;
    padding: 2.5rem 1.5rem;
    color: var(--comm-text-secondary);
}

.comm-empty-state-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.comm-table-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--comm-text-secondary);
    font-size: 0.9rem;
}

.comm-table-error {
    text-align: center;
    padding: 2.5rem 1rem;
    color: #f87171;
    font-size: 0.9rem;
}

.comm-table-actions {
    text-align: right;
    white-space: nowrap;
}

.comm-table-actions .comm-btn {
    padding: 0.35rem 0.65rem;
    font-size: 0.8rem;
}

.comm-flex { display: flex; }
.comm-flex-center { display: flex; align-items: center; }
.comm-flex-center-gap { display: flex; align-items: center; gap: 0.6rem; }
.comm-flex-between { display: flex; justify-content: space-between; align-items: center; }
.comm-flex-end { display: flex; justify-content: flex-end; align-items: center; }
.comm-flex-col { display: flex; flex-direction: column; }
.comm-gap-1 { gap: 0.25rem; }
.comm-gap-2 { gap: 0.5rem; }
.comm-gap-3 { gap: 0.75rem; }
.comm-gap-4 { gap: 1rem; }

.comm-btn-sm { padding: 0.35rem 0.65rem; font-size: 0.78rem; }
.comm-btn-xs { padding: 0.2rem 0.45rem; font-size: 0.7rem; }
.comm-btn-card-activate { width: 100%; font-size: 0.8rem; padding: 0.4rem 0.75rem; }
.comm-btn-flex-approve { flex: 1; padding: 0.4rem; }

.comm-modal-sm { max-width: 480px; }
.comm-modal-md { max-width: 600px; }
.comm-modal-lg { max-width: 680px; }
.comm-modal-xl { max-width: 820px; }

.comm-input-readonly { opacity: 0.7; cursor: not-allowed; }
.comm-checkbox-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }

.comm-chat-title { color: #ffffff; font-size: 0.95rem; font-weight: 700; }
.comm-trace-tier-label { font-size: 0.75rem; color: var(--comm-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }
.comm-trace-tier-explanation { font-size: 0.8rem; color: var(--comm-text-secondary); }
.comm-trace-metrics-list { display: flex; flex-direction: column; gap: 0.35rem; }
.comm-trace-tokens-header { font-size: 0.75rem; color: var(--comm-text-secondary); text-transform: uppercase; margin-bottom: 0.4rem; font-weight: 600; }
.comm-token-weight { opacity: 0.6; font-size: 0.7rem; }

.comm-persona-editor-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; border-bottom: 1px solid var(--comm-border); padding-bottom: 1rem; }
.comm-persona-editor-title { font-size: 1.15rem; color: var(--comm-gold); margin: 0; font-weight: 700; }
.comm-persona-editor-subtitle { font-size: 0.85rem; color: var(--comm-text-secondary); margin: 0.25rem 0 0 0; }
.comm-persona-card-footer { margin-top: auto; padding-top: 0.5rem; }
.comm-form-actions { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.5rem; }

.comm-polysemy-header { margin-bottom: 1.25rem; }
.comm-polysemy-tester-card { background: rgba(20, 27, 45, 0.85); border: 1px solid var(--comm-gold-border); border-radius: var(--comm-radius-lg); padding: 1.25rem; margin-bottom: 1.5rem; }
.comm-polysemy-tester-label { display: block; font-size: 0.85rem; font-weight: 700; color: var(--comm-gold); margin-bottom: 0.5rem; }
.comm-polysemy-tester-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.comm-polysemy-test-result { margin-top: 0.75rem; font-size: 0.85rem; }
.comm-polysemy-success-box { padding: 0.75rem 1rem; background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.3); border-radius: var(--comm-radius-md); color: #34d399; }
.comm-polysemy-neutral-box { padding: 0.75rem 1rem; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--comm-border); border-radius: var(--comm-radius-md); color: var(--comm-text-secondary); }
.comm-polysemy-error-box { padding: 0.75rem 1rem; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); border-radius: var(--comm-radius-md); color: #f87171; }
.comm-senses-list { display: flex; flex-direction: column; gap: 0.6rem; }

.comm-badge-soft-standby { font-size: 0.65rem; padding: 0.1rem 0.35rem; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--comm-text-secondary); }
.comm-badge-soft-reflex { font-size: 0.65rem; padding: 0.1rem 0.4rem; background: rgba(221, 175, 49, 0.15); border: 1px solid var(--comm-gold-border); color: var(--comm-gold); }
.comm-badge-soft-disambiguation { font-size: 0.65rem; padding: 0.1rem 0.4rem; background: rgba(245, 158, 11, 0.18); border: 1px solid rgba(245, 158, 11, 0.4); color: #fbbf24; }
.comm-badge-soft-llm { font-size: 0.65rem; padding: 0.1rem 0.4rem; background: rgba(14, 165, 233, 0.18); border: 1px solid rgba(14, 165, 233, 0.4); color: #38bdf8; }
.comm-bubble-bot.tier-disambiguation { border-color: rgba(245, 158, 11, 0.45); }
.comm-badge-soft-gray { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--comm-text-secondary); }
.comm-badge-soft-gold { background: rgba(221, 175, 49, 0.15); border: 1px solid var(--comm-gold-border); color: var(--comm-gold); }
.comm-badge-soft-green { background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.35); color: #34d399; }
.comm-chip-gold { background: rgba(221, 175, 49, 0.15); border-color: var(--comm-gold-border); color: var(--comm-gold); }

.comm-thinking-bubble { color: var(--comm-text-secondary); font-style: italic; }
.comm-error-bubble { border-color: #ef4444; }
.comm-error-sender { color: #f87171; }

.comm-intent-title { font-weight: 700; color: var(--comm-gold); }
.comm-intent-code { font-size: 0.8rem; color: var(--comm-text-secondary); }
.comm-intent-label-row { font-size: 0.82rem; }
.comm-intent-label-sub { font-size: 0.82rem; color: var(--comm-text-secondary); }
.comm-keywords-preview { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comm-source-url-cell { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comm-source-link { color: #38bdf8; text-decoration: none; }
.comm-source-link:hover { text-decoration: underline; }
.comm-fact-excerpt-cell { max-width: 320px; font-size: 0.85rem; line-height: 1.4; }
.comm-confidence-labels { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--comm-text-secondary); margin-top: -0.3rem; }
.comm-confidence-value { color: var(--comm-gold); font-weight: 600; }
.comm-release-notes-cell { max-width: 300px; font-size: 0.85rem; }
.comm-confirm-msg { font-size: 0.95rem; color: #e2e8f0; line-height: 1.5; }
.comm-modal-desc { font-size: 0.9rem; color: var(--comm-text-secondary); margin-bottom: 1rem; line-height: 1.45; }

/* Base Mobile Card List (Hidden on desktop) */
.comm-mobile-card-list {
    display: none;
}

/* Secondary Navigation Bar (Dedicated View Switcher) */
.comm-subnav-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0.25rem 0 0.85rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid var(--comm-border-subtle);
    -webkit-overflow-scrolling: touch;
}

.comm-subnav-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.95rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--comm-text-secondary);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--comm-border);
    border-radius: var(--comm-radius-md);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--comm-transition);
}

.comm-subnav-pill:hover {
    color: var(--comm-text-primary);
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--comm-border-strong);
}

.comm-subnav-pill.active {
    color: var(--comm-gold);
    background: var(--comm-gold-glow);
    border-color: var(--comm-gold-border);
    box-shadow: 0 0 12px var(--comm-gold-glow);
}

/* Quick Navigation Grid (Command Center Hub) */
.comm-quick-nav-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-top: 2rem;
}

.comm-quick-nav-card {
    background: var(--comm-bg-card);
    border: 1px solid var(--comm-border);
    border-radius: var(--comm-radius-lg);
    padding: 1.5rem;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    cursor: pointer;
    transition: var(--comm-transition);
}

.comm-quick-nav-card:hover {
    border-color: var(--comm-gold-border);
    transform: translateY(-2px);
    box-shadow: var(--comm-shadow-md);
}

.comm-quick-nav-icon {
    font-size: 2.2rem;
    line-height: 1;
}

.comm-quick-nav-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--comm-text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.comm-quick-nav-arrow {
    color: var(--comm-gold);
    transition: transform 0.2s ease;
    font-size: 1.1rem;
}

.comm-quick-nav-card:hover .comm-quick-nav-arrow {
    transform: translateX(4px);
}

.comm-quick-nav-desc {
    font-size: 0.83rem;
    color: var(--comm-text-secondary);
    line-height: 1.45;
    margin: 0;
}

/* Telemetry Grid & Pipeline Distribution Cards */
.comm-telemetry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.comm-telemetry-tier-card {
    background: var(--comm-bg-card);
    border: 1px solid var(--comm-border);
    border-radius: var(--comm-radius-lg);
    padding: 1.5rem;
    box-shadow: var(--comm-shadow-sm);
    transition: var(--comm-transition);
}

.comm-telemetry-tier-card.tier-1 {
    border-left: 4px solid var(--comm-success);
}

.comm-telemetry-tier-card.tier-2 {
    border-left: 4px solid var(--comm-warning);
}

.comm-telemetry-tier-card.tier-3 {
    border-left: 4px solid var(--comm-accent);
}

.comm-telemetry-tier-title {
    margin: 0 0 0.5rem 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--comm-text-primary);
}

.comm-telemetry-tier-desc {
    font-size: 0.83rem;
    color: var(--comm-text-secondary);
    line-height: 1.45;
    margin: 0;
}

.comm-telemetry-progress-track {
    background: rgba(255, 255, 255, 0.06);
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    margin-top: 0.75rem;
}

.comm-telemetry-progress-bar {
    height: 100%;
    border-radius: 999px;
    transition: width 0.4s ease;
}

.comm-telemetry-progress-bar.bar-tier-1 {
    background: var(--comm-success);
}

.comm-telemetry-progress-bar.bar-tier-2 {
    background: var(--comm-warning);
}

.comm-telemetry-progress-bar.bar-tier-3 {
    background: var(--comm-accent);
}

.comm-polysemy-input-wrap {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.comm-polysemy-input {
    flex: 1;
    min-width: 260px;
}

/* ════════════════════════════════════════════════════════════════
   11. HIGH-TECH BENTO AI COCKPIT & CASCADE FLOW (Linear / Vercel Design)
   ════════════════════════════════════════════════════════════════ */
.comm-bento-cockpit {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.comm-bento-full {
    grid-column: 1 / -1;
}

.comm-bento-card {
    background: linear-gradient(145deg, rgba(22, 28, 45, 0.75) 0%, rgba(14, 18, 30, 0.85) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--comm-border);
    border-radius: var(--comm-radius-xl);
    padding: 1.75rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
    transition: var(--comm-transition);
}

.comm-bento-card:hover {
    border-color: rgba(255, 255, 255, 0.14);
}

.comm-bento-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--comm-border-subtle);
    gap: 1rem;
}

.comm-bento-card-title-group h3 {
    margin: 0 0 0.35rem 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.comm-bento-card-title-group p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--comm-text-secondary);
    line-height: 1.4;
}

.comm-bento-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: #a5b4fc;
    white-space: nowrap;
}

.comm-bento-tag.gold {
    background: var(--comm-gold-glow);
    border-color: var(--comm-gold-border);
    color: var(--comm-gold);
}

.comm-bento-tag.green {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.3);
    color: #34d399;
}

/* Persona Deck Switcher */
.comm-persona-deck {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.comm-persona-deck-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--comm-border);
    border-radius: var(--comm-radius-lg);
    padding: 1rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: left;
}

.comm-persona-deck-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.comm-persona-deck-card.active {
    background: linear-gradient(135deg, rgba(221, 175, 49, 0.12) 0%, rgba(99, 102, 241, 0.08) 100%);
    border-color: var(--comm-gold-border);
    box-shadow: 0 0 20px rgba(221, 175, 49, 0.18), inset 0 1px 0 rgba(221, 175, 49, 0.3);
}

.comm-persona-deck-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.comm-persona-deck-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.comm-persona-deck-badge {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--comm-text-secondary);
}

.comm-persona-deck-card.active .comm-persona-deck-badge {
    background: var(--comm-gold);
    color: #0b0f19;
}

.comm-persona-deck-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--comm-text-primary);
    margin: 0;
}

.comm-persona-deck-role {
    font-size: 0.72rem;
    color: var(--comm-text-muted);
    line-height: 1.3;
}

/* Persona Behavioral Gauges */
.comm-tone-gauges {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem 1.25rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--comm-border-subtle);
    border-radius: var(--comm-radius-lg);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.comm-tone-gauge-item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.comm-tone-gauge-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 0.75rem;
}

.comm-tone-gauge-label {
    color: var(--comm-text-secondary);
    font-weight: 600;
}

.comm-tone-gauge-val {
    font-family: ui-monospace, monospace;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--comm-text-primary);
}

.comm-tone-gauge-track {
    height: 5px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 9999px;
    overflow: hidden;
}

.comm-tone-gauge-fill {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.3s ease;
}

.comm-tone-gauge-fill.cyan { background: linear-gradient(90deg, #0ea5e9, #38bdf8); }
.comm-tone-gauge-fill.gold { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.comm-tone-gauge-fill.green { background: linear-gradient(90deg, #10b981, #34d399); }
.comm-tone-gauge-fill.purple { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }

/* Code-Styled Template Studio */
.comm-code-studio {
    background: #090c14;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--comm-radius-lg);
    overflow: hidden;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
}

.comm-code-studio-bar {
    background: rgba(255, 255, 255, 0.03);
    padding: 0.65rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.comm-window-dots {
    display: flex;
    align-items: center;
    gap: 6px;
}

.comm-window-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.comm-window-dot.red { background: #ff5f56; }
.comm-window-dot.yellow { background: #ffbd2e; }
.comm-window-dot.green { background: #27c93f; }

.comm-code-studio-title {
    font-size: 0.75rem;
    font-family: ui-monospace, monospace;
    color: var(--comm-text-muted);
}

.comm-code-lang-tabs {
    display: flex;
    gap: 0.35rem;
}

.comm-code-lang-pill {
    padding: 0.2rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 4px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--comm-text-secondary);
    cursor: pointer;
    transition: var(--comm-transition);
}

.comm-code-lang-pill.active {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.comm-code-content {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.comm-macro-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    color: var(--comm-text-muted);
}

.comm-macro-pill {
    font-family: ui-monospace, monospace;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    background: rgba(14, 165, 233, 0.12);
    border: 1px solid rgba(14, 165, 233, 0.25);
    color: #38bdf8;
    cursor: pointer;
    transition: var(--comm-transition);
}

.comm-macro-pill:hover {
    background: rgba(14, 165, 233, 0.25);
    border-color: rgba(14, 165, 233, 0.5);
    color: #ffffff;
}

.comm-code-editor-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    color: #e2e8f0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.82rem;
    line-height: 1.6;
    padding: 0.75rem;
    box-sizing: border-box;
    resize: vertical;
    transition: var(--comm-transition);
}

.comm-code-editor-input:focus {
    outline: none;
    border-color: var(--comm-gold);
    box-shadow: 0 0 0 2px var(--comm-gold-glow);
    background: rgba(0, 0, 0, 0.4);
}

/* Radar-Style Presence HUD */
.comm-presence-radar-deck {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.comm-presence-status-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem;
    border-radius: var(--comm-radius-lg);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--comm-border-subtle);
}

.comm-radar-beacon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.12);
    border: 2px solid #10b981;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    position: relative;
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.3);
    flex-shrink: 0;
}

.comm-radar-beacon::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid rgba(16, 185, 129, 0.35);
    animation: radarPulse 2.4s infinite cubic-bezier(0.2, 0.8, 0.4, 1);
}

@keyframes radarPulse {
    0% { transform: scale(0.9); opacity: 1; }
    100% { transform: scale(1.6); opacity: 0; }
}

.comm-presence-status-info {
    flex: 1;
}

.comm-presence-status-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 0.25rem 0;
}

.comm-presence-status-sub {
    font-size: 0.8rem;
    color: var(--comm-text-secondary);
    margin: 0;
}

.comm-presence-segmented-modes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.comm-presence-mode-pill {
    padding: 0.65rem 0.5rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--comm-border);
    color: var(--comm-text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: var(--comm-transition);
}

.comm-presence-mode-pill:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.comm-presence-mode-pill.active {
    background: var(--comm-gold-glow);
    border-color: var(--comm-gold-border);
    color: var(--comm-gold);
    box-shadow: 0 0 14px var(--comm-gold-glow);
}

.comm-auto-reply-preview {
    background: rgba(14, 165, 233, 0.05);
    border: 1px dashed rgba(14, 165, 233, 0.3);
    border-radius: var(--comm-radius-md);
    padding: 0.85rem 1rem;
    font-size: 0.8rem;
    line-height: 1.45;
    color: #cbd5e1;
    position: relative;
}

.comm-auto-reply-preview-label {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #38bdf8;
    margin-bottom: 0.35rem;
}

/* Visual Neural Cascade Flow Graph */
.comm-flow-diagram {
    background: linear-gradient(135deg, rgba(14, 18, 32, 0.9) 0%, rgba(9, 12, 22, 0.95) 100%);
    border: 1px solid var(--comm-border);
    border-radius: var(--comm-radius-xl);
    padding: 1.75rem;
    margin-bottom: 2rem;
    box-shadow: var(--comm-shadow-md);
}

.comm-flow-nodes-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: relative;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.comm-flow-stage {
    flex: 1;
    min-width: 220px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--comm-border);
    border-radius: var(--comm-radius-lg);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
    transition: var(--comm-transition);
}

.comm-flow-stage:hover {
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.comm-flow-stage.tier-1 { border-left: 4px solid var(--comm-success); }
.comm-flow-stage.tier-2 { border-left: 4px solid var(--comm-warning); }
.comm-flow-stage.tier-3 { border-left: 4px solid var(--comm-accent); }

.comm-flow-stage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.comm-flow-stage-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--comm-text-primary);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.comm-flow-stage-metric {
    font-family: ui-monospace, monospace;
    font-size: 0.72rem;
    font-weight: 700;
}

.comm-flow-stage-desc {
    font-size: 0.75rem;
    color: var(--comm-text-secondary);
    line-height: 1.4;
    margin: 0;
}

.comm-flow-arrow {
    font-size: 1.25rem;
    color: var(--comm-text-muted);
    flex-shrink: 0;
}

/* High-Density Bento Command Tiles (Launchpad) */
.comm-command-tiles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-top: 1rem;
}

.comm-command-tile {
    background: linear-gradient(145deg, rgba(22, 28, 45, 0.65) 0%, rgba(14, 18, 30, 0.85) 100%);
    border: 1px solid var(--comm-border);
    border-radius: var(--comm-radius-lg);
    padding: 1.35rem;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.comm-command-tile:hover {
    border-color: var(--comm-gold-border);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px var(--comm-gold-glow);
}

.comm-command-tile-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.comm-command-tile-icon {
    font-size: 1.75rem;
    line-height: 1;
}

.comm-command-tile-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--comm-text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.comm-command-tile-title {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--comm-text-primary);
    margin: 0 0 0.35rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.comm-command-tile-desc {
    font-size: 0.78rem;
    color: var(--comm-text-secondary);
    line-height: 1.4;
    margin: 0;
}

/* ==============================================================================
   9. AI & LLM GATEWAY DEDICATED VIEW STYLES
   ============================================================================== */
.comm-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.comm-settings-card {
    background: var(--comm-bg-card);
    backdrop-filter: blur(14px);
    border: 1px solid var(--comm-border);
    border-radius: var(--comm-radius-lg);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: relative;
    overflow: hidden;
}

.comm-settings-card.comm-card-accent {
    border-color: rgba(6, 182, 212, 0.35);
    box-shadow: 0 4px 24px -6px rgba(6, 182, 212, 0.12);
}

.comm-settings-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--comm-border);
    padding-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.comm-settings-card-title {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--comm-text-primary);
    white-space: nowrap;
}

.comm-settings-card-title svg {
    color: var(--comm-cyan);
}

.comm-toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--comm-border);
    border-radius: var(--comm-radius-md);
    gap: 1rem;
}

.comm-toggle-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.comm-toggle-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--comm-text-primary);
}

.comm-toggle-desc {
    font-size: 0.78rem;
    color: var(--comm-text-secondary);
    line-height: 1.4;
}

.comm-toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
}

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

.comm-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.15);
    transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 34px;
    border: 1px solid var(--comm-border);
}

.comm-toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #ffffff;
    transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
}

input:checked + .comm-toggle-slider {
    background-color: var(--comm-cyan);
    border-color: var(--comm-cyan);
    box-shadow: 0 0 12px rgba(6, 182, 212, 0.4);
}

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

.comm-slider-group {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.comm-slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.comm-slider-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--comm-text-secondary);
}

.comm-slider-value {
    font-family: ui-monospace, monospace;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--comm-cyan);
    background: rgba(6, 182, 212, 0.12);
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: 6px;
    padding: 0.15rem 0.5rem;
}

.comm-range-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.12);
    outline: none;
    cursor: pointer;
    transition: background 0.2s;
}

.comm-range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--comm-cyan);
    cursor: pointer;
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.5);
    border: 2px solid #ffffff;
}

.comm-range-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--comm-cyan);
    cursor: pointer;
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.5);
    border: 2px solid #ffffff;
}

.comm-input-with-action {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.comm-input-with-action input {
    width: 100%;
    padding-right: 2.75rem;
}

.comm-input-action-btn {
    position: absolute;
    right: 0.5rem;
    background: transparent;
    border: none;
    color: var(--comm-text-muted);
    cursor: pointer;
    padding: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: color 0.2s, background-color 0.2s;
}

.comm-input-action-btn:hover {
    color: var(--comm-text-primary);
    background-color: rgba(255, 255, 255, 0.08);
}

.comm-probe-result {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--comm-radius-md);
    font-size: 0.82rem;
    line-height: 1.4;
}

.comm-probe-result.success {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #10b981;
}

.comm-probe-result.error {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.comm-probe-result.testing {
    background: rgba(6, 182, 212, 0.12);
    border: 1px solid rgba(6, 182, 212, 0.3);
    color: var(--comm-cyan);
}

.comm-settings-actions-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--comm-bg-card);
    backdrop-filter: blur(14px);
    border: 1px solid var(--comm-border);
    border-radius: var(--comm-radius-lg);
    position: sticky;
    bottom: 1rem;
    z-index: 30;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.comm-btn-macro-chip {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--comm-border);
    border-radius: 4px;
    color: var(--comm-cyan);
    font-family: ui-monospace, monospace;
    font-size: 0.72rem;
    padding: 0.15rem 0.45rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.comm-btn-macro-chip:hover {
    background: rgba(6, 182, 212, 0.15);
    border-color: var(--comm-cyan);
}

/* ============================================================
   MULTI-PROVIDER LLM GATEWAY COMMAND CENTER
   ============================================================ */
.comm-command-cockpit-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(20, 27, 45, 0.95), rgba(15, 23, 42, 0.98));
    border: 1px solid var(--comm-gold-border);
    border-radius: var(--comm-radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    margin-bottom: 1.5rem;
}

.comm-cockpit-stat-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.comm-cockpit-stat-icon {
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.comm-cockpit-stat-content {
    display: flex;
    flex-direction: column;
}

.comm-cockpit-stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--comm-text-muted);
}

.comm-cockpit-stat-val {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--comm-text-primary);
}

.comm-provider-rail {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.75rem;
}

.comm-provider-card {
    background: var(--comm-bg-card);
    border: 1px solid var(--comm-border);
    border-radius: var(--comm-radius-md);
    padding: 0.9rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
    user-select: none;
}

.comm-provider-card:hover {
    border-color: var(--comm-border-strong);
    background: rgba(255, 255, 255, 0.04);
    transform: translateY(-2px);
}

.comm-provider-card.selected {
    border-color: var(--comm-cyan);
    background: rgba(6, 182, 212, 0.06);
    box-shadow: 0 0 16px rgba(6, 182, 212, 0.2);
}

.comm-provider-card.is-active-primary {
    border-color: rgba(16, 185, 129, 0.6);
}

.comm-provider-card.is-active-primary.selected {
    border-color: #10b981;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
}

.comm-provider-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.comm-provider-card-identity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.comm-provider-card-icon {
    font-size: 1.25rem;
}

.comm-provider-card-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: #ffffff;
}

.comm-provider-card-protocol {
    font-size: 0.7rem;
    color: var(--comm-text-muted);
    font-family: ui-monospace, monospace;
}

.comm-provider-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.25rem;
}

.comm-provider-status-badge {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
}

.comm-provider-status-badge.primary {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.5);
    color: #34d399;
}

.comm-provider-status-badge.failover {
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.5);
    color: #60a5fa;
}

.comm-provider-status-badge.configured {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #cbd5e1;
}

.comm-provider-status-badge.unconfigured {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #f87171;
}

.comm-failover-flow-box {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--comm-border);
    border-radius: var(--comm-radius-md);
    padding: 0.85rem;
    margin-top: 0.75rem;
    font-size: 0.78rem;
    line-height: 1.5;
}

.comm-failover-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.comm-failover-step:last-child {
    margin-bottom: 0;
}

.comm-failover-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
}

.comm-failover-step-num.primary {
    background: #10b981;
    color: #000000;
}

.comm-failover-step-num.failover {
    background: #3b82f6;
    color: #ffffff;
}

.comm-failover-step-num.offline {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.comm-workstation-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.15rem 1.5rem;
    background: var(--comm-bg-card);
    border: 1px solid var(--comm-border);
    border-radius: var(--comm-radius-lg);
    margin-bottom: 1.25rem;
}

.comm-workstation-title-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.comm-workstation-icon {
    font-size: 1.8rem;
}

.comm-workstation-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.comm-routing-role-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    border-radius: var(--comm-radius-md);
    margin-bottom: 1rem;
    border: 1px solid var(--comm-border);
    background: rgba(255, 255, 255, 0.02);
}

.comm-routing-role-banner.is-primary {
    background: rgba(234, 179, 8, 0.08);
    border-color: rgba(234, 179, 8, 0.35);
}

.comm-routing-role-banner.is-failover {
    background: rgba(96, 165, 250, 0.08);
    border-color: rgba(96, 165, 250, 0.35);
}

.comm-routing-role-banner.is-standby {
    background: rgba(148, 163, 184, 0.05);
    border-color: rgba(148, 163, 184, 0.2);
}

.comm-role-banner-icon {
    font-size: 1.4rem;
    line-height: 1;
    margin-top: 0.1rem;
}

.comm-role-banner-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--comm-text-primary);
    margin-bottom: 0.2rem;
}

.comm-routing-role-banner.is-primary .comm-role-banner-title {
    color: var(--comm-gold);
}

.comm-routing-role-banner.is-failover .comm-role-banner-title {
    color: #60a5fa;
}

.comm-role-banner-desc {
    font-size: 0.76rem;
    color: var(--comm-text-secondary);
    line-height: 1.4;
}

.comm-input-readonly-badge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.85rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--comm-border);
    border-radius: var(--comm-radius-md);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--comm-text-primary);
}

.comm-tag-current-view {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    background: rgba(6, 182, 212, 0.2);
    border: 1px solid rgba(6, 182, 212, 0.4);
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--comm-cyan);
    margin-left: 0.5rem;
    vertical-align: middle;
}

.comm-cascade-hint {
    margin-top: 0.75rem;
    padding: 0.65rem 0.85rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed var(--comm-border);
    border-radius: var(--comm-radius-md);
    font-size: 0.75rem;
    color: var(--comm-text-secondary);
    line-height: 1.45;
}

.comm-badge-soft-amber {
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.comm-badge-soft-green {
    background: rgba(16, 185, 129, 0.12);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

/* ============================================================
   10. RESPONSIVE DESIGN (5 TIERS — RULE #6)
   ============================================================ */

/* Tier 1: 4K / Ultra-wide Displays (1920px+) */
@media (min-width: 1920px) {
    .comm-container {
        max-width: 1800px;
        padding: 2rem 3rem 4rem;
    }
    .comm-personas-grid {
        gap: 1.75rem;
    }
    .comm-kpi-grid {
        gap: 1.75rem;
    }
}

/* Tier 2: Desktop / Laptop (1280px - 1919px) */
@media (max-width: 1440px) {
    .comm-personas-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .comm-studio-layout {
        grid-template-columns: 1.15fr 1fr;
    }
}

/* Tier 3: Tablet / Medium (769px - 1279px) */
@media (max-width: 1200px) {
    .comm-personas-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .comm-studio-layout {
        grid-template-columns: 1fr;
    }
    .comm-kpi-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .comm-quick-nav-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .comm-bento-cockpit {
        grid-template-columns: 1fr;
    }
    .comm-persona-deck {
        grid-template-columns: repeat(2, 1fr);
    }
    .comm-command-tiles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tier 4: Mobile Landscape / Small Tablet (481px - 768px) */
@media (max-width: 768px) {
    .comm-container {
        padding: 1rem;
    }
    .comm-header {
        padding: 0.85rem 1rem;
        gap: 0.6rem;
    }
    .comm-header-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.65rem;
    }
    .comm-header-actions {
        width: 100%;
        display: flex;
        gap: 0.5rem;
    }
    .comm-header-actions .comm-btn {
        flex: 1;
        justify-content: center;
    }
    .comm-vitals-strip {
        gap: 0.4rem;
        padding-top: 0.5rem;
    }
    .comm-vitals-pill {
        flex: 1 1 calc(50% - 0.4rem);
        font-size: 0.72rem;
        padding: 0.22rem 0.5rem;
    }
    .comm-mobile-nav-bar {
        display: flex;
    }
    .comm-tabs-nav {
        display: none;
    }
    .comm-bento-cockpit {
        grid-template-columns: 1fr;
    }
    .comm-settings-grid {
        grid-template-columns: 1fr;
    }
    .comm-persona-deck {
        grid-template-columns: 1fr;
    }
    .comm-tone-gauges {
        grid-template-columns: 1fr;
    }
    .comm-presence-segmented-modes {
        grid-template-columns: repeat(2, 1fr);
    }
    .comm-command-tiles-grid {
        grid-template-columns: 1fr;
    }
    .comm-flow-nodes-row {
        flex-direction: column;
        align-items: stretch;
    }
    .comm-flow-arrow {
        transform: rotate(90deg);
        align-self: center;
    }
    .comm-presence-inputs-grid {
        grid-template-columns: 1fr;
    }
    .comm-personas-grid {
        grid-template-columns: 1fr;
    }
    .comm-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .comm-form-grid {
        grid-template-columns: 1fr;
    }
    .comm-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .comm-search-input {
        max-width: 100%;
    }
    .comm-filter-actions {
        width: 100%;
    }
    .comm-filter-actions .comm-select,
    .comm-filter-actions .comm-btn {
        flex: 1;
    }
    /* Mobile Tables replaced by Cards */
    .comm-table-wrap {
        display: none;
    }
    .comm-mobile-card-list {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .comm-mobile-card {
        background: var(--comm-bg-card);
        border: 1px solid var(--comm-border);
        border-radius: var(--comm-radius-lg);
        padding: 1.25rem;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }
    .comm-mobile-card-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .comm-mobile-card-title {
        font-size: 1rem;
        font-weight: 800;
        color: #ffffff;
    }
    .comm-mobile-card-subtitle {
        font-size: 0.8rem;
        color: var(--comm-text-secondary);
        font-family: ui-monospace, monospace;
    }
    .comm-batch-dock {
        width: calc(100% - 2rem);
        flex-direction: column;
        border-radius: var(--comm-radius-xl);
        padding: 1rem;
        gap: 0.75rem;
    }
    .comm-batch-actions {
        width: 100%;
    }
    .comm-batch-actions .comm-btn {
        flex: 1;
    }
    .comm-quick-nav-grid {
        grid-template-columns: 1fr;
    }
}

/* Tier 5: Mobile Portrait (320px - 480px) */
@media (max-width: 480px) {
    .comm-container {
        padding: 0.75rem;
    }
    .comm-title-row h1 {
        font-size: 1.15rem;
    }
    .comm-vitals-pill {
        flex: 1 1 100%;
    }
    .comm-bento-card {
        padding: 1.15rem;
    }
    .comm-presence-segmented-modes {
        grid-template-columns: 1fr;
    }
    .comm-presence-dock {
        padding: 1.25rem;
    }
    .comm-presence-pills {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .comm-kpi-grid {
        grid-template-columns: 1fr;
    }
    .comm-grid-candidates,
    .comm-polysemy-grid {
        grid-template-columns: 1fr;
    }
    .comm-chat-input-bar {
        padding: 0.75rem;
        flex-direction: column;
    }
    .comm-chat-input-bar input,
    .comm-chat-input-bar .comm-btn {
        width: 100%;
    }
    .comm-batch-dock {
        width: calc(100% - 1.5rem);
        padding: 0.75rem 1rem;
    }
    .comm-batch-actions {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .comm-batch-actions .comm-btn {
        flex: 1 1 auto;
        min-width: 85px;
    }
}

/* ============================================================
   14. MODULAR TOOL ENGINE & REGISTRY
   ============================================================ */
.comm-tools-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.comm-tool-card {
    background: var(--comm-bg-card);
    border: 1px solid var(--comm-border);
    border-radius: var(--comm-radius-lg);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: var(--comm-transition);
    position: relative;
    overflow: hidden;
}

.comm-tool-card:hover {
    border-color: var(--comm-gold-border);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

.comm-tool-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.comm-tool-card-title-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.comm-tool-card-icon {
    font-size: 1.8rem;
    line-height: 1;
}

.comm-tool-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    font-family: var(--comm-font-mono, monospace);
}

.comm-tool-desc {
    font-size: 0.88rem;
    color: var(--comm-text-secondary);
    line-height: 1.5;
}

.comm-tool-meta-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.8rem;
}

.comm-tool-macros-box {
    background: rgba(14, 18, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--comm-radius-md);
    padding: 0.75rem 1rem;
}

.comm-tool-macros-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--comm-text-muted);
    letter-spacing: 0.05em;
    margin-bottom: 0.4rem;
}

.comm-tool-macros-chips {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.comm-tool-macro-badge {
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.35);
    color: #a5b4fc;
    font-family: var(--comm-font-mono, monospace);
    font-size: 0.78rem;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
}

.comm-tool-runner-card {
    background: var(--comm-bg-card);
    border: 1px solid var(--comm-border);
    border-radius: var(--comm-radius-lg);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.comm-tool-runner-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 1.5rem;
}

.comm-tool-result-panel {
    background: rgba(10, 14, 24, 0.95);
    border: 1px solid var(--comm-border);
    border-radius: var(--comm-radius-md);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-height: 280px;
}

.comm-tool-result-hud-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 0.65rem;
}

.comm-tool-primary-value {
    background: rgba(221, 175, 49, 0.1);
    border: 1px solid rgba(221, 175, 49, 0.25);
    border-radius: var(--comm-radius-sm);
    padding: 0.65rem 0.85rem;
    font-family: var(--comm-font-mono, monospace);
    font-size: 0.88rem;
    color: var(--comm-gold);
    word-break: break-word;
}

.comm-tool-interpolation-preview {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: var(--comm-radius-sm);
    padding: 0.65rem 0.85rem;
    font-size: 0.85rem;
    color: #6ee7b7;
    white-space: pre-wrap;
    line-height: 1.4;
}

.comm-tool-json-pre {
    background: #090d16;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--comm-radius-sm);
    padding: 0.75rem;
    font-family: var(--comm-font-mono, monospace);
    font-size: 0.78rem;
    color: #94a3b8;
    max-height: 220px;
    overflow-y: auto;
    margin: 0;
}

/* Studio Cascade Tools Bar */
.comm-studio-tools-bar {
    background: rgba(14, 18, 30, 0.95);
    border-top: 1px solid var(--comm-border);
    border-bottom: 1px solid var(--comm-border);
    padding: 0.6rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.comm-studio-tools-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--comm-text-secondary);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.comm-studio-tools-toggles {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.comm-tool-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #e2e8f0;
    cursor: pointer;
}

.comm-tool-toggle-label input[type="checkbox"] {
    accent-color: var(--comm-gold);
    cursor: pointer;
}

.comm-studio-tool-select-group {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.comm-select-sm {
    background: var(--comm-bg-input);
    border: 1px solid var(--comm-border);
    border-radius: var(--comm-radius-sm);
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    color: #ffffff;
}

/* Cascade Trace Tool Engine Section */
.comm-trace-tools-card {
    background: rgba(221, 175, 49, 0.05);
    border: 1px solid rgba(221, 175, 49, 0.2);
    border-radius: var(--comm-radius-md);
    padding: 0.85rem;
    margin-top: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.comm-trace-tools-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--comm-gold);
}

.comm-trace-tool-item {
    background: rgba(14, 18, 30, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--comm-radius-sm);
    padding: 0.5rem 0.75rem;
    font-size: 0.78rem;
}

@media (max-width: 992px) {
    .comm-tools-grid {
        grid-template-columns: 1fr;
    }
    .comm-tool-runner-grid {
        grid-template-columns: 1fr;
    }
}