/* ============================================
   ARCHIE-TECH-NEXUS LLM — Design System v2
   Chat + Code Agent + OpenClaw
   ============================================ */

:root {
    --bg-primary: #0a0a0f;
    --bg-secondary: #111118;
    --bg-tertiary: #1a1a24;
    --bg-elevated: #1e1e2a;
    --bg-hover: #252533;
    --bg-active: #2a2a3a;
    --surface-glass: rgba(255,255,255,0.03);
    --surface-glass-hover: rgba(255,255,255,0.06);
    --surface-glass-border: rgba(255,255,255,0.08);
    --text-primary: #f0f0f5;
    --text-secondary: #9898aa;
    --text-tertiary: #6a6a7a;
    --text-accent: #a78bfa;
    --accent-primary: #6366f1;
    --accent-secondary: #a855f7;
    --accent-tertiary: #ec4899;
    --accent-success: #22c55e;
    --accent-warning: #f59e0b;
    --accent-danger: #ef4444;
    --accent-cyan: #06b6d4;
    --gradient-primary: linear-gradient(135deg, #6366f1, #a855f7);
    --gradient-secondary: linear-gradient(135deg, #a855f7, #ec4899);
    --gradient-hero: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
    --gradient-surface: linear-gradient(180deg, rgba(99,102,241,0.05), rgba(168,85,247,0.02));
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
    --shadow-glow: 0 0 20px rgba(99,102,241,0.15);
    --shadow-glow-lg: 0 0 40px rgba(99,102,241,0.2);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;
    --sidebar-width: 280px;
    --topbar-height: 56px;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    --transition-fast: 150ms cubic-bezier(0.4,0,0.2,1);
    --transition-base: 250ms cubic-bezier(0.4,0,0.2,1);
    --transition-slow: 400ms cubic-bezier(0.4,0,0.2,1);
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: var(--font-sans); background: var(--bg-primary); color: var(--text-primary); overflow: hidden; height: 100vh; width: 100vw; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* ============================================ Background ============================================ */
.bg-animation { position: fixed; top:0; left:0; width:100%; height:100%; z-index:0; pointer-events:none; overflow:hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.3; animation: float 20s infinite ease-in-out; }
.orb-1 { width:400px; height:400px; background:var(--accent-primary); top:-100px; left:-100px; }
.orb-2 { width:350px; height:350px; background:var(--accent-secondary); top:50%; right:-100px; animation-delay:-5s; animation-duration:25s; }
.orb-3 { width:300px; height:300px; background:var(--accent-tertiary); bottom:-100px; left:30%; animation-delay:-10s; animation-duration:22s; }
.orb-4 { width:250px; height:250px; background:#06b6d4; top:30%; left:50%; animation-delay:-7s; animation-duration:28s; opacity:0.15; }
@keyframes float { 0%,100%{transform:translate(0,0) scale(1)} 25%{transform:translate(50px,-50px) scale(1.1)} 50%{transform:translate(-30px,30px) scale(0.95)} 75%{transform:translate(20px,60px) scale(1.05)} }
.grid-overlay { position:absolute; top:0; left:0; width:100%; height:100%; background-image: linear-gradient(rgba(255,255,255,0.015) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,0.015) 1px,transparent 1px); background-size:60px 60px; }

/* ============================================ Layout ============================================ */
.app-container { display: flex; height: 100vh; width: 100vw; position: relative; z-index: 1; }

/* ============================================ Sidebar ============================================ */
.sidebar { width:var(--sidebar-width); min-width:var(--sidebar-width); height:100vh; background:rgba(17,17,24,0.9); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-right:1px solid var(--surface-glass-border); display:flex; flex-direction:column; transition:transform var(--transition-base),min-width var(--transition-base),width var(--transition-base); position:relative; z-index:20; }
.sidebar.collapsed { min-width:0; width:0; transform:translateX(-100%); }

.sidebar-header { padding:14px 16px 10px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--surface-glass-border); }
.logo-container { display:flex; align-items:center; gap:10px; }
.logo-icon svg { width:34px; height:34px; filter:drop-shadow(0 0 8px rgba(99,102,241,0.3)); }
.logo-text h1 { font-size:15px; font-weight:800; background:var(--gradient-hero); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; letter-spacing:1px; }
.logo-subtitle { font-size:8px; text-transform:uppercase; letter-spacing:2px; color:var(--text-tertiary); font-weight:600; }
.sidebar-toggle { background:none; border:none; color:var(--text-tertiary); cursor:pointer; padding:6px; border-radius:var(--radius-sm); transition:all var(--transition-fast); display:flex; align-items:center; }
.sidebar-toggle:hover { background:var(--bg-hover); color:var(--text-primary); }

/* Mode Switcher */
.mode-switcher { display:flex; padding:10px 12px; gap:4px; border-bottom:1px solid var(--surface-glass-border); }
.mode-btn { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 4px; border:none; background:var(--surface-glass); border-radius:var(--radius-sm); color:var(--text-tertiary); font-family:var(--font-sans); font-size:10px; font-weight:600; cursor:pointer; transition:all var(--transition-fast); letter-spacing:0.5px; }
.mode-btn:hover { background:var(--surface-glass-hover); color:var(--text-secondary); }
.mode-btn.active { background:rgba(99,102,241,0.15); color:var(--accent-primary); border:1px solid rgba(99,102,241,0.25); box-shadow:0 0 12px rgba(99,102,241,0.1); }

/* Sidebar Panels */
.sidebar-panel { flex:1; overflow-y:auto; padding:8px; }
.sidebar-panel.hidden { display:none; }
.sidebar-section-title { font-size:10px; text-transform:uppercase; letter-spacing:1.5px; color:var(--text-tertiary); padding:10px 8px 6px; font-weight:700; }

/* Existing chat sidebar styles */
.new-chat-btn { display:flex; align-items:center; gap:10px; width:100%; padding:11px 16px; background:var(--gradient-primary); border:none; border-radius:var(--radius-md); color:white; font-family:var(--font-sans); font-size:13px; font-weight:600; cursor:pointer; transition:all var(--transition-base); box-shadow:var(--shadow-glow); margin-bottom:8px; }
.new-chat-btn:hover { transform:translateY(-1px); box-shadow:var(--shadow-glow-lg); filter:brightness(1.1); }
.chat-history { flex:1; overflow-y:auto; }
.history-section-title { font-size:10px; text-transform:uppercase; letter-spacing:1.5px; color:var(--text-tertiary); padding:8px 8px 6px; font-weight:600; }
.history-item { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--radius-sm); cursor:pointer; transition:all var(--transition-fast); font-size:12px; color:var(--text-secondary); }
.history-item:hover { background:var(--surface-glass-hover); color:var(--text-primary); }
.history-item.active { background:var(--bg-active); color:var(--text-primary); }
.history-item .history-icon { width:14px; height:14px; opacity:0.5; flex-shrink:0; }
.history-item .history-text { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.history-item .history-delete { opacity:0; background:none; border:none; color:var(--text-tertiary); cursor:pointer; padding:2px; border-radius:4px; transition:all var(--transition-fast); display:flex; flex-shrink:0; }
.history-item:hover .history-delete { opacity:1; }
.history-item .history-delete:hover { color:var(--accent-danger); background:rgba(239,68,68,0.1); }

/* Code Sidebar */
.code-actions-sidebar { display:flex; flex-direction:column; gap:3px; }
.code-action-btn { display:flex; align-items:center; gap:10px; padding:9px 10px; border:none; background:var(--surface-glass); border-radius:var(--radius-sm); color:var(--text-secondary); font-family:var(--font-sans); font-size:12px; cursor:pointer; transition:all var(--transition-fast); text-align:left; }
.code-action-btn:hover { background:rgba(99,102,241,0.12); color:var(--text-primary); transform:translateX(2px); }
.code-action-btn.active { background:rgba(99,102,241,0.18); color:var(--accent-primary); border-left:2px solid var(--accent-primary); }
.ca-icon { font-size:14px; }

.code-template-btn { display:block; width:100%; padding:8px 10px; border:1px dashed var(--surface-glass-border); background:none; border-radius:var(--radius-sm); color:var(--text-tertiary); font-family:var(--font-sans); font-size:11px; cursor:pointer; transition:all var(--transition-fast); text-align:left; }
.code-template-btn:hover { border-color:rgba(99,102,241,0.3); color:var(--text-secondary); background:var(--surface-glass); }

/* OpenClaw Sidebar */
.oc-status-card { display:flex; align-items:center; gap:8px; padding:10px 12px; background:var(--surface-glass); border:1px solid var(--surface-glass-border); border-radius:var(--radius-md); margin:0 0 12px; font-size:12px; color:var(--text-secondary); font-weight:500; }
.oc-status-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.oc-status-dot.offline { background:var(--accent-danger); box-shadow:0 0 6px rgba(239,68,68,0.4); }
.oc-status-dot.online { background:var(--accent-success); box-shadow:0 0 6px rgba(34,197,94,0.5); animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }

.oc-nav-items { display:flex; flex-direction:column; gap:2px; }
.oc-nav-btn { display:flex; align-items:center; gap:8px; padding:9px 10px; border:none; background:none; border-radius:var(--radius-sm); color:var(--text-secondary); font-family:var(--font-sans); font-size:12px; cursor:pointer; transition:all var(--transition-fast); text-align:left; width:100%; }
.oc-nav-btn:hover { background:var(--surface-glass-hover); color:var(--text-primary); }
.oc-nav-btn.active { background:rgba(99,102,241,0.12); color:var(--accent-primary); }

/* Sidebar Footer */
.sidebar-footer { padding:10px 12px; border-top:1px solid var(--surface-glass-border); }
.stats-card { background:var(--surface-glass); border:1px solid var(--surface-glass-border); border-radius:var(--radius-md); padding:10px; }
.stats-row { display:flex; justify-content:space-between; align-items:center; padding:3px 0; font-size:11px; }
.stats-label { color:var(--text-tertiary); }
.stats-value { color:var(--text-secondary); font-weight:600; }
.free-badge { background:var(--gradient-primary); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; font-weight:800; letter-spacing:1px; }

/* ============================================ Main Content ============================================ */
.main-content { flex:1; display:flex; flex-direction:column; height:100vh; overflow:hidden; position:relative; }

/* Top Bar */
.top-bar { height:var(--topbar-height); min-height:var(--topbar-height); border-bottom:1px solid var(--surface-glass-border); display:flex; align-items:center; padding:0 14px; gap:10px; background:rgba(17,17,24,0.6); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); z-index:15; }
.menu-btn,.icon-btn { background:none; border:none; color:var(--text-secondary); cursor:pointer; padding:7px; border-radius:var(--radius-sm); transition:all var(--transition-fast); display:flex; align-items:center; justify-content:center; }
.menu-btn:hover,.icon-btn:hover { background:var(--bg-hover); color:var(--text-primary); }

.mode-title { display:flex; align-items:center; gap:6px; }
.mode-title-icon { font-size:16px; }
.mode-title-text { font-size:14px; font-weight:700; color:var(--text-primary); }

.model-selector-container { flex:1; display:flex; justify-content:center; }
.model-selector { display:flex; align-items:center; gap:8px; padding:7px 14px; background:var(--surface-glass); border:1px solid var(--surface-glass-border); border-radius:var(--radius-full); color:var(--text-primary); font-family:var(--font-sans); font-size:12px; font-weight:500; cursor:pointer; transition:all var(--transition-fast); }
.model-selector:hover { background:var(--surface-glass-hover); border-color:rgba(99,102,241,0.3); }
.model-indicator { width:7px; height:7px; border-radius:50%; background:var(--accent-success); box-shadow:0 0 6px rgba(34,197,94,0.5); animation:pulse 2s infinite; }
.top-bar-actions { display:flex; gap:2px; }

/* Model Dropdown */
.model-dropdown { position:absolute; top:var(--topbar-height); left:50%; transform:translateX(-50%); width:360px; max-height:460px; background:rgba(26,26,36,0.98); backdrop-filter:blur(20px); border:1px solid var(--surface-glass-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg),var(--shadow-glow); z-index:30; display:none; overflow:hidden; animation:dropdownIn var(--transition-base) ease-out; }
.model-dropdown.open { display:block; }
@keyframes dropdownIn { from{opacity:0;transform:translateX(-50%) translateY(-8px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }
.model-dropdown-header { padding:14px; border-bottom:1px solid var(--surface-glass-border); }
.model-dropdown-header h3 { font-size:13px; font-weight:700; margin-bottom:8px; }
.model-search { width:100%; padding:9px 12px; background:var(--bg-primary); border:1px solid var(--surface-glass-border); border-radius:var(--radius-sm); color:var(--text-primary); font-family:var(--font-sans); font-size:12px; outline:none; transition:border-color var(--transition-fast); }
.model-search:focus { border-color:var(--accent-primary); }
.model-search::placeholder { color:var(--text-tertiary); }
.model-list { max-height:340px; overflow-y:auto; padding:6px; }
.model-category { padding:8px 8px 4px; font-size:9px; text-transform:uppercase; letter-spacing:1.5px; color:var(--text-tertiary); font-weight:700; }
.model-option { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--radius-sm); cursor:pointer; transition:all var(--transition-fast); font-size:12px; color:var(--text-secondary); border:1px solid transparent; }
.model-option:hover { background:var(--surface-glass-hover); color:var(--text-primary); }
.model-option.selected { background:rgba(99,102,241,0.1); color:var(--accent-primary); border-color:rgba(99,102,241,0.2); }
.model-option .model-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.model-option .model-badge { margin-left:auto; font-size:8px; padding:2px 6px; border-radius:var(--radius-full); background:var(--surface-glass); color:var(--text-tertiary); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
.model-option .model-badge.popular { background:rgba(99,102,241,0.15); color:var(--accent-primary); }
.dot-claude{background:#d97706}.dot-gpt{background:#10b981}.dot-gemini{background:#3b82f6}.dot-deepseek{background:#8b5cf6}.dot-grok{background:#ef4444}.dot-llama{background:#06b6d4}.dot-mistral{background:#f59e0b}.dot-other{background:#6b7280}

/* Settings */
.settings-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); backdrop-filter:blur(4px); z-index:50; display:none; align-items:center; justify-content:center; }
.settings-overlay.open { display:flex; }
.settings-panel { width:460px; max-height:80vh; background:var(--bg-elevated); border:1px solid var(--surface-glass-border); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); overflow:hidden; animation:slideUp var(--transition-base) ease-out; }
@keyframes slideUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.settings-header { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--surface-glass-border); }
.settings-header h2 { font-size:17px; font-weight:700; background:var(--gradient-primary); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.close-settings { background:none; border:none; color:var(--text-tertiary); cursor:pointer; padding:6px; border-radius:var(--radius-sm); transition:all var(--transition-fast); display:flex; }
.close-settings:hover { color:var(--text-primary); background:var(--bg-hover); }
.settings-body { padding:22px; overflow-y:auto; max-height:calc(80vh - 70px); }
.setting-group { margin-bottom:22px; }
.setting-label { display:block; font-size:12px; font-weight:600; color:var(--text-secondary); margin-bottom:7px; }
.setting-textarea { width:100%; min-height:90px; padding:11px; background:var(--bg-primary); border:1px solid var(--surface-glass-border); border-radius:var(--radius-md); color:var(--text-primary); font-family:var(--font-sans); font-size:12px; line-height:1.5; resize:vertical; outline:none; transition:border-color var(--transition-fast); }
.setting-textarea:focus { border-color:var(--accent-primary); }
.setting-range { width:100%; height:6px; -webkit-appearance:none; appearance:none; background:var(--bg-primary); border-radius:3px; outline:none; }
.setting-range::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:var(--gradient-primary); cursor:pointer; box-shadow:var(--shadow-glow); }
.range-labels { display:flex; justify-content:space-between; margin-top:5px; font-size:10px; color:var(--text-tertiary); }
.setting-input { width:100%; padding:9px 12px; background:var(--bg-primary); border:1px solid var(--surface-glass-border); border-radius:var(--radius-sm); color:var(--text-primary); font-family:var(--font-sans); font-size:12px; outline:none; }
.setting-input:focus { border-color:var(--accent-primary); }

/* ============================================ View Containers ============================================ */
.view-container { flex:1; display:none; flex-direction:column; overflow:hidden; }
.view-container.active { display:flex; }

/* ============================================ CHAT VIEW ============================================ */
.chat-area { flex:1; overflow-y:auto; display:flex; flex-direction:column; }

.welcome-screen { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 20px; position:relative; }
.welcome-glow { position:absolute; width:300px; height:300px; background:radial-gradient(circle,rgba(99,102,241,0.15),transparent 70%); border-radius:50%; filter:blur(40px); animation:welcomePulse 4s infinite ease-in-out; }
@keyframes welcomePulse { 0%,100%{transform:scale(1);opacity:0.5} 50%{transform:scale(1.2);opacity:0.8} }
.welcome-logo svg { width:68px; height:68px; filter:drop-shadow(0 0 20px rgba(99,102,241,0.4)); margin-bottom:20px; animation:logoFloat 3s infinite ease-in-out; }
@keyframes logoFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.welcome-title { font-size:26px; font-weight:800; background:var(--gradient-hero); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:6px; text-align:center; }
.welcome-subtitle { color:var(--text-tertiary); font-size:14px; margin-bottom:36px; text-align:center; }
.quick-actions { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; max-width:500px; width:100%; }
.quick-action { display:flex; align-items:center; gap:10px; padding:14px; background:var(--surface-glass); border:1px solid var(--surface-glass-border); border-radius:var(--radius-md); color:var(--text-secondary); font-family:var(--font-sans); font-size:12px; cursor:pointer; transition:all var(--transition-base); text-align:left; }
.quick-action:hover { background:var(--surface-glass-hover); border-color:rgba(99,102,241,0.3); color:var(--text-primary); transform:translateY(-2px); box-shadow:var(--shadow-glow); }
.qa-icon { font-size:20px; flex-shrink:0; }
.qa-text { font-weight:500; }

.messages-container { flex:1; padding:20px 0; display:none; }
.messages-container.active { display:block; }
.message { padding:0 20px; margin-bottom:4px; animation:messageIn var(--transition-base) ease-out; }
@keyframes messageIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.message-inner { max-width:780px; margin:0 auto; display:flex; gap:14px; padding:16px 0; }
.message.user .message-inner { flex-direction:row-reverse; }
.message-avatar { width:30px; height:30px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:13px; font-weight:700; }
.message.assistant .message-avatar { background:var(--gradient-primary); color:white; box-shadow:var(--shadow-glow); }
.message.user .message-avatar { background:var(--bg-active); color:var(--text-accent); }
.message-content { flex:1; min-width:0; }
.message.user .message-content { text-align:right; }
.message-header { display:flex; align-items:center; gap:6px; margin-bottom:4px; }
.message.user .message-header { justify-content:flex-end; }
.message-author { font-size:12px; font-weight:600; }
.message-time { font-size:10px; color:var(--text-tertiary); }
.message-body { font-size:13px; line-height:1.7; color:var(--text-primary); }
.message.user .message-body { background:rgba(99,102,241,0.1); border:1px solid rgba(99,102,241,0.15); border-radius:var(--radius-lg) var(--radius-sm) var(--radius-lg) var(--radius-lg); padding:12px 16px; display:inline-block; text-align:left; }
.message.assistant .message-body { padding:4px 0; }

.message-body h1,.message-body h2,.message-body h3,.message-body h4 { margin-top:14px; margin-bottom:6px; font-weight:700; }
.message-body h1{font-size:18px} .message-body h2{font-size:16px} .message-body h3{font-size:14px}
.message-body p { margin-bottom:10px; }
.message-body p:last-child { margin-bottom:0; }
.message-body ul,.message-body ol { margin-bottom:10px; padding-left:18px; }
.message-body li { margin-bottom:3px; }
.message-body strong { font-weight:600; }
.message-body em { color:var(--text-accent); }
.message-body code { font-family:var(--font-mono); font-size:11px; background:rgba(99,102,241,0.1); padding:2px 5px; border-radius:4px; color:#c4b5fd; }
.message-body pre { margin:10px 0; border-radius:var(--radius-md); overflow:hidden; background:#1a1b26; border:1px solid var(--surface-glass-border); position:relative; }
.message-body pre code { display:block; padding:14px; background:none; color:#a9b1d6; font-size:12px; line-height:1.5; overflow-x:auto; }
.code-header { display:flex; justify-content:space-between; align-items:center; padding:6px 14px; background:rgba(255,255,255,0.03); border-bottom:1px solid var(--surface-glass-border); font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); }
.copy-code-btn { background:none; border:none; color:var(--text-tertiary); cursor:pointer; font-family:var(--font-sans); font-size:10px; padding:2px 6px; border-radius:4px; transition:all var(--transition-fast); }
.copy-code-btn:hover { background:var(--bg-hover); color:var(--text-primary); }
.message-body blockquote { border-left:3px solid var(--accent-primary); padding-left:12px; margin:10px 0; color:var(--text-secondary); font-style:italic; }
.message-body table { width:100%; border-collapse:collapse; margin:10px 0; font-size:12px; }
.message-body th,.message-body td { padding:7px 10px; border:1px solid var(--surface-glass-border); text-align:left; }
.message-body th { background:var(--surface-glass); font-weight:600; }
.message-body a { color:var(--accent-primary); text-decoration:none; }
.message-body a:hover { text-decoration:underline; }

.message-actions { display:flex; gap:4px; margin-top:6px; opacity:0; transition:opacity var(--transition-fast); }
.message:hover .message-actions { opacity:1; }
.message.user .message-actions { justify-content:flex-end; }
.msg-action-btn { background:none; border:none; color:var(--text-tertiary); cursor:pointer; padding:3px 6px; border-radius:4px; font-family:var(--font-sans); font-size:10px; display:flex; align-items:center; gap:3px; transition:all var(--transition-fast); }
.msg-action-btn:hover { background:var(--bg-hover); color:var(--text-primary); }

.typing-indicator { display:flex; gap:4px; padding:8px 0; }
.typing-dot { width:7px; height:7px; border-radius:50%; background:var(--accent-primary); animation:typingBounce 1.4s infinite; }
.typing-dot:nth-child(2){animation-delay:0.2s} .typing-dot:nth-child(3){animation-delay:0.4s}
@keyframes typingBounce { 0%,60%,100%{transform:translateY(0);opacity:0.3} 30%{transform:translateY(-8px);opacity:1} }

/* Input Area */
.input-area { padding:0 20px 16px; position:relative; }
.input-wrapper { max-width:780px; margin:0 auto; }
.input-container { display:flex; align-items:flex-end; background:var(--bg-tertiary); border:1px solid var(--surface-glass-border); border-radius:var(--radius-lg); padding:6px 6px 6px 16px; transition:border-color var(--transition-fast),box-shadow var(--transition-fast); }
.input-container:focus-within { border-color:rgba(99,102,241,0.4); box-shadow:var(--shadow-glow); }
.chat-input { flex:1; background:none; border:none; color:var(--text-primary); font-family:var(--font-sans); font-size:13px; line-height:1.5; padding:7px 0; resize:none; outline:none; max-height:180px; min-height:22px; }
.chat-input::placeholder { color:var(--text-tertiary); }
.input-actions { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.char-count { font-size:10px; color:var(--text-tertiary); font-family:var(--font-mono); }
.send-btn { width:34px; height:34px; border-radius:var(--radius-sm); background:var(--gradient-primary); border:none; color:white; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all var(--transition-fast); box-shadow:var(--shadow-glow); }
.send-btn:hover:not(:disabled) { filter:brightness(1.15); transform:scale(1.05); }
.send-btn:disabled { opacity:0.3; cursor:not-allowed; box-shadow:none; }
.stop-btn { width:34px; height:34px; border-radius:var(--radius-sm); background:var(--accent-danger); border:none; color:white; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all var(--transition-fast); animation:pulseStop 1.5s infinite; }
@keyframes pulseStop { 0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0.4)} 50%{box-shadow:0 0 0 6px rgba(239,68,68,0)} }
.hidden { display:none !important; }
.input-footer { text-align:center; padding-top:6px; font-size:10px; color:var(--text-tertiary); }

/* ============================================ CODE AGENT VIEW ============================================ */
.code-agent-layout { flex:1; display:flex; flex-direction:column; overflow:hidden; }

.code-toolbar { height:42px; min-height:42px; display:flex; align-items:center; justify-content:space-between; padding:0 12px; background:rgba(17,17,24,0.5); border-bottom:1px solid var(--surface-glass-border); gap:8px; }
.code-toolbar-left,.code-toolbar-right { display:flex; align-items:center; gap:6px; }
.code-toolbar-divider { width:1px; height:20px; background:var(--surface-glass-border); }
.code-lang-select { padding:5px 8px; background:var(--bg-primary); border:1px solid var(--surface-glass-border); border-radius:var(--radius-sm); color:var(--text-primary); font-family:var(--font-sans); font-size:11px; outline:none; cursor:pointer; }
.code-lang-select:focus { border-color:var(--accent-primary); }
.code-toolbar-btn { display:flex; align-items:center; gap:5px; padding:5px 10px; background:var(--surface-glass); border:1px solid var(--surface-glass-border); border-radius:var(--radius-sm); color:var(--text-secondary); font-family:var(--font-sans); font-size:11px; cursor:pointer; transition:all var(--transition-fast); }
.code-toolbar-btn:hover { background:var(--surface-glass-hover); color:var(--text-primary); border-color:rgba(99,102,241,0.3); }
#codeRunAction { background:rgba(99,102,241,0.15); color:var(--accent-primary); border-color:rgba(99,102,241,0.25); }
#codeRunAction:hover { background:rgba(99,102,241,0.25); }

.code-split-pane { flex:1; display:flex; overflow:hidden; }
.code-editor-panel { flex:1; display:flex; flex-direction:column; min-width:0; }
.code-output-panel { width:45%; min-width:200px; display:flex; flex-direction:column; border-left:1px solid var(--surface-glass-border); }

.panel-header { height:32px; min-height:32px; display:flex; align-items:center; justify-content:space-between; padding:0 10px; background:rgba(17,17,24,0.4); border-bottom:1px solid var(--surface-glass-border); }
.panel-tab { display:flex; align-items:center; gap:5px; font-size:11px; font-weight:600; color:var(--text-secondary); }
.panel-tab.active { color:var(--text-primary); }
.panel-actions { display:flex; gap:2px; }
.panel-action-btn { background:none; border:none; color:var(--text-tertiary); cursor:pointer; padding:3px; border-radius:4px; transition:all var(--transition-fast); display:flex; }
.panel-action-btn:hover { background:var(--bg-hover); color:var(--text-primary); }

.monaco-container { flex:1; }

.code-output-content { flex:1; overflow-y:auto; padding:16px; font-size:13px; line-height:1.7; color:var(--text-primary); }
.code-output-content h1,.code-output-content h2,.code-output-content h3 { margin-top:14px; margin-bottom:6px; font-weight:700; }
.code-output-content h1{font-size:18px} .code-output-content h2{font-size:16px} .code-output-content h3{font-size:14px}
.code-output-content p { margin-bottom:10px; }
.code-output-content pre { margin:10px 0; border-radius:var(--radius-md); overflow:hidden; background:#1a1b26; border:1px solid var(--surface-glass-border); }
.code-output-content pre code { display:block; padding:14px; background:none; color:#a9b1d6; font-size:12px; line-height:1.5; overflow-x:auto; font-family:var(--font-mono); }
.code-output-content code { font-family:var(--font-mono); font-size:11px; background:rgba(99,102,241,0.1); padding:2px 5px; border-radius:4px; color:#c4b5fd; }
.code-output-content ul,.code-output-content ol { margin-bottom:10px; padding-left:18px; }
.code-output-content li { margin-bottom:3px; }
.code-output-content strong { font-weight:600; }
.code-output-content blockquote { border-left:3px solid var(--accent-primary); padding-left:12px; margin:10px 0; color:var(--text-secondary); }

.code-output-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; text-align:center; color:var(--text-tertiary); }
.cop-icon { font-size:48px; margin-bottom:16px; }
.code-output-placeholder h3 { font-size:16px; font-weight:700; color:var(--text-secondary); margin-bottom:6px; }
.code-output-placeholder p { font-size:12px; max-width:280px; line-height:1.5; margin-bottom:16px; }
.cop-features { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.cop-features span { font-size:10px; padding:4px 10px; background:var(--surface-glass); border:1px solid var(--surface-glass-border); border-radius:var(--radius-full); }

.resize-handle { width:4px; cursor:col-resize; background:transparent; transition:background var(--transition-fast); position:relative; }
.resize-handle:hover,.resize-handle.active { background:var(--accent-primary); }

.code-status-bar { height:24px; min-height:24px; display:flex; align-items:center; padding:0 12px; background:rgba(99,102,241,0.08); border-top:1px solid var(--surface-glass-border); font-size:10px; color:var(--text-tertiary); gap:4px; }
.status-divider { color:rgba(255,255,255,0.1); }
.code-status-right { margin-left:auto; }
.status-action-badge { padding:1px 8px; border-radius:var(--radius-full); background:rgba(34,197,94,0.15); color:var(--accent-success); font-weight:600; }
.status-action-badge.processing { background:rgba(99,102,241,0.15); color:var(--accent-primary); animation:pulse 1.5s infinite; }

/* ============================================ OPENCLAW VIEW ============================================ */
.oc-view { display:none; flex:1; flex-direction:column; overflow:hidden; }
.oc-view.active { display:flex; }
.oc-content-scroll { flex:1; overflow-y:auto; padding:24px; }

.oc-hero { text-align:center; margin-bottom:28px; position:relative; }
.oc-hero-glow { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:200px; height:200px; background:radial-gradient(circle,rgba(239,68,68,0.1),transparent 70%); border-radius:50%; filter:blur(40px); }
.oc-hero-icon { font-size:56px; margin-bottom:12px; filter:drop-shadow(0 0 20px rgba(239,68,68,0.3)); }
.oc-hero-title { font-size:24px; font-weight:800; background:linear-gradient(135deg,#ef4444,#f59e0b,#ec4899); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:8px; }
.oc-hero-subtitle { color:var(--text-tertiary); font-size:13px; max-width:500px; margin:0 auto; line-height:1.6; }

.oc-card { background:var(--surface-glass); border:1px solid var(--surface-glass-border); border-radius:var(--radius-lg); padding:22px; margin-bottom:20px; }
.oc-card-title { font-size:15px; font-weight:700; color:var(--text-primary); margin-bottom:16px; }

.oc-form-row { margin-bottom:14px; }
.oc-form-label { display:block; font-size:11px; font-weight:600; color:var(--text-secondary); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.5px; }
.oc-input-group { display:flex; gap:8px; }
.oc-input { flex:1; padding:9px 12px; background:var(--bg-primary); border:1px solid var(--surface-glass-border); border-radius:var(--radius-sm); color:var(--text-primary); font-family:var(--font-mono); font-size:12px; outline:none; }
.oc-input:focus { border-color:var(--accent-primary); }
.oc-connect-btn { padding:9px 18px; background:var(--gradient-primary); border:none; border-radius:var(--radius-sm); color:white; font-family:var(--font-sans); font-size:12px; font-weight:600; cursor:pointer; transition:all var(--transition-fast); white-space:nowrap; }
.oc-connect-btn:hover { filter:brightness(1.1); }

/* Steps */
.oc-steps { display:flex; flex-direction:column; gap:20px; }
.oc-step { display:flex; gap:14px; }
.oc-step-number { width:28px; height:28px; border-radius:50%; background:var(--gradient-primary); color:white; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; flex-shrink:0; }
.oc-step-content { flex:1; }
.oc-step-content h4 { font-size:13px; font-weight:700; color:var(--text-primary); margin-bottom:8px; }
.oc-step-note { font-size:11px; color:var(--text-tertiary); margin-top:6px; line-height:1.5; }
.oc-step-note code { font-family:var(--font-mono); background:rgba(99,102,241,0.1); padding:1px 4px; border-radius:3px; color:#c4b5fd; font-size:10px; }
.oc-step-note strong { color:var(--text-secondary); }

.oc-code-block { background:var(--bg-primary); border:1px solid var(--surface-glass-border); border-radius:var(--radius-sm); overflow:hidden; }
.oc-code-block .oc-code-header { display:flex; justify-content:space-between; align-items:center; padding:4px 10px; background:rgba(255,255,255,0.02); border-bottom:1px solid var(--surface-glass-border); font-size:9px; color:var(--text-tertiary); }
.oc-code-block code { display:block; padding:10px 12px; font-family:var(--font-mono); font-size:12px; color:#c4b5fd; background:none; }

/* Capabilities Grid */
.oc-capabilities-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.oc-capability { padding:16px; background:var(--bg-primary); border:1px solid var(--surface-glass-border); border-radius:var(--radius-md); text-align:center; transition:all var(--transition-fast); }
.oc-capability:hover { border-color:rgba(99,102,241,0.3); transform:translateY(-2px); box-shadow:var(--shadow-glow); }
.oc-cap-icon { font-size:26px; display:block; margin-bottom:8px; }
.oc-capability h4 { font-size:12px; font-weight:700; color:var(--text-primary); margin-bottom:4px; }
.oc-capability p { font-size:10px; color:var(--text-tertiary); line-height:1.4; }

/* Dashboard */
.oc-dashboard-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
.oc-dash-card { display:flex; align-items:center; gap:12px; padding:16px; background:var(--surface-glass); border:1px solid var(--surface-glass-border); border-radius:var(--radius-md); }
.oc-dash-icon { font-size:24px; }
.oc-dash-label { display:block; font-size:10px; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:0.5px; }
.oc-dash-value { display:block; font-size:14px; font-weight:700; color:var(--text-primary); margin-top:2px; }

.oc-channels-list,.oc-activity-log { min-height:60px; }
.oc-empty-state { text-align:center; padding:20px; color:var(--text-tertiary); font-size:12px; }

/* Agent Chat */
.oc-agent-chat { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.oc-agent-messages { flex:1; overflow-y:auto; padding:20px; }
.oc-agent-welcome { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; text-align:center; }
.oc-agent-welcome-icon { font-size:56px; margin-bottom:16px; }
.oc-agent-welcome h3 { font-size:18px; font-weight:700; color:var(--text-primary); margin-bottom:8px; }
.oc-agent-welcome p { font-size:13px; color:var(--text-tertiary); max-width:400px; line-height:1.5; margin-bottom:8px; }
.oc-agent-note { font-size:11px; color:var(--accent-warning); }

.oc-agent-input-area { padding:0 20px 16px; }
.oc-agent-input-container { max-width:700px; margin:0 auto; display:flex; align-items:flex-end; background:var(--bg-tertiary); border:1px solid var(--surface-glass-border); border-radius:var(--radius-lg); padding:6px 6px 6px 16px; transition:border-color var(--transition-fast),box-shadow var(--transition-fast); }
.oc-agent-input-container:focus-within { border-color:rgba(99,102,241,0.4); box-shadow:var(--shadow-glow); }
.oc-agent-input { flex:1; background:none; border:none; color:var(--text-primary); font-family:var(--font-sans); font-size:13px; line-height:1.5; padding:7px 0; resize:none; outline:none; max-height:120px; }
.oc-agent-input::placeholder { color:var(--text-tertiary); }

/* OC Message Styling */
.oc-msg { padding:0 20px; margin-bottom:4px; animation:messageIn var(--transition-base) ease-out; }
.oc-msg-inner { max-width:700px; margin:0 auto; display:flex; gap:12px; padding:14px 0; }
.oc-msg.user .oc-msg-inner { flex-direction:row-reverse; }
.oc-msg-avatar { width:28px; height:28px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:12px; font-weight:700; }
.oc-msg.assistant .oc-msg-avatar { background:linear-gradient(135deg,#ef4444,#f59e0b); color:white; }
.oc-msg.user .oc-msg-avatar { background:var(--bg-active); color:var(--text-accent); }
.oc-msg-body { flex:1; font-size:13px; line-height:1.7; color:var(--text-primary); }
.oc-msg.user .oc-msg-body { text-align:right; }
.oc-msg.user .oc-msg-body p { background:rgba(99,102,241,0.1); border:1px solid rgba(99,102,241,0.15); border-radius:var(--radius-lg) var(--radius-sm) var(--radius-lg) var(--radius-lg); padding:10px 14px; display:inline-block; text-align:left; }

/* Tools Grid */
.oc-tools-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.oc-tool-card { padding:18px; background:var(--bg-primary); border:1px solid var(--surface-glass-border); border-radius:var(--radius-md); transition:all var(--transition-fast); position:relative; }
.oc-tool-card:hover { border-color:rgba(99,102,241,0.3); transform:translateY(-2px); box-shadow:var(--shadow-glow); }
.oc-tool-icon { font-size:28px; margin-bottom:10px; }
.oc-tool-card h4 { font-size:13px; font-weight:700; color:var(--text-primary); margin-bottom:4px; }
.oc-tool-card p { font-size:10px; color:var(--text-tertiary); line-height:1.4; }
.oc-tool-badge { position:absolute; top:12px; right:12px; font-size:8px; padding:2px 6px; border-radius:var(--radius-full); background:rgba(99,102,241,0.12); color:var(--accent-primary); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }

/* Error */
.error-message { background:rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.2); border-radius:var(--radius-md); padding:10px 14px; color:#fca5a5; font-size:12px; display:flex; align-items:center; gap:6px; }

/* ============================================ Responsive ============================================ */
@media (max-width:1024px) {
    .oc-capabilities-grid,.oc-tools-grid { grid-template-columns:repeat(2,1fr); }
    .oc-dashboard-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
    .sidebar { position:fixed; left:0; top:0; z-index:100; box-shadow:var(--shadow-lg); }
    .sidebar.collapsed { transform:translateX(-100%); }
    .quick-actions { grid-template-columns:1fr; }
    .model-dropdown { width:calc(100% - 32px); left:16px; transform:none; }
    .welcome-title { font-size:20px; }
    .settings-panel { width:calc(100% - 32px); }
    .code-split-pane { flex-direction:column; }
    .code-output-panel { width:100%; border-left:none; border-top:1px solid var(--surface-glass-border); }
    .resize-handle { width:100%; height:4px; cursor:row-resize; }
    .oc-capabilities-grid,.oc-tools-grid { grid-template-columns:1fr; }
    .oc-dashboard-grid { grid-template-columns:1fr; }
}