/* ==========================================
           2. SPLIT INTEGRATED DASHBOARD SYSTEM
           ========================================== */
        .dashboard-container {
            width: 100%; max-width: 1400px; margin: 0 auto; padding: 60px 20px; box-sizing: border-box;
            display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; min-height: 85vh;
        }

        .visualizer-pane { position: relative; display: grid; grid-template-columns: 1fr 1.2fr 1fr; align-items: center; gap: 10px; height: 520px; }
        #particle-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }

        .column { display: flex; flex-direction: column; gap: 16px; z-index: 2; position: relative; }
        .column.left { align-items: flex-end; text-align: right; }
        .column.right { align-items: flex-start; text-align: left; }

        .data-pill {
            background: rgba(255, 255, 255, 0.01); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.05); padding: 10px 16px; border-radius: 10px;
            font-size: 0.8rem; font-weight: 500; color: var(--text-muted); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
            width: 100%; box-sizing: border-box;
        }

        .data-pill.impact-active {
            color: var(--text-main) !important; border-color: var(--color-accent) !important;
            background: rgba(168, 85, 247, 0.12) !important; box-shadow: 0 0 25px rgba(168, 85, 247, 0.35) !important;
            transform: scale(1.04) translateX(5px); transition: all 0.1s ease-out; 
        }

        .center-vault { display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; height: 100%; }
        .core-identity-box { position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 5; pointer-events: none; width: 140px; height: 140px; }
        .vault-branding { font-size: 0.9rem; font-weight: 900; color: #fff; text-align: center; }
        .vault-branding span { background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .processing-indicator { margin-top: 4px; font-size: 0.55rem; color: var(--color-primary); letter-spacing: 1px; font-weight: bold; opacity: 0.8; }

        .compliance-ring-svg { position: absolute; width: 220px; height: 220px; z-index: 1; pointer-events: none; animation: spinRing 45s linear infinite; }
        .compliance-ring-svg text { font-size: 8px; font-weight: 700; fill: rgba(56, 189, 248, 0.3); text-transform: uppercase; letter-spacing: 4px;}
        @keyframes spinRing { to { transform: rotate(360deg); } }

        .terminal-pane {
            height: 480px; width: 100%; background: rgba(15, 23, 42, 0.3); border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 16px; backdrop-filter: blur(20px); box-shadow: 0 30px 60px rgba(0,0,0,0.4);
            display: flex; flex-direction: column; overflow: hidden;
        }

        .chat-header { background: rgba(255, 255, 255, 0.02); padding: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
        .window-dot { width: 10px; height: 10px; border-radius: 50%; }
        .window-dot.red { background: #ef4444; }
        .window-dot.yellow { background: #eab308; }
        .window-dot.green { background: #22c55e; }
        .window-title { color: #475569; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-left: 4px;}

        .chat-body { padding: 20px; flex-grow: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; scroll-behavior: smooth; }
        .chat-body::-webkit-scrollbar { width: 6px; }
        .chat-body::-webkit-scrollbar-track { background: transparent; }
        .chat-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.05); border-radius: 10px; }

        .chat-message { display: flex; gap: 14px; width: 100%; animation: fadeInUp 0.4s ease-out both; }
        .avatar {
            width: 32px; height: 32px; border-radius: 50%; background: #334155;
            display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: bold; color: #fff; flex-shrink: 0;
        }
        .avatar.ai-av { background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); }

        .msg-content { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.04); padding: 12px 16px; border-radius: 0 14px 14px 14px; font-size: 0.85rem; line-height: 1.5; color: #cbd5e1; width: 100%; }
        .chat-message.user .msg-content { border-radius: 14px 0 14px 14px; background: rgba(56, 189, 248, 0.04); border-color: rgba(56, 189, 248, 0.08); }
        .highlight { color: var(--color-primary); font-weight: 600; }
        .pending-thinking { font-style: italic; color: var(--color-primary); display: inline-flex; align-items: center; gap: 6px; }