/* ============================================================
   lumo.css — Grok Build-inspired Silicon Life Chat Interface
   Dark theme · Neon glow · Glassmorphism · Fluid animation
   ============================================================ */
:root {
  --bg-deep: #06060e; --bg-primary: #0a0a12; --bg-secondary: #0f0f1e;
  --bg-card: #1a1a2e; --bg-card-hover: #22223a;
  --bg-glass: rgba(26, 26, 46, 0.65); --bg-glass-border: rgba(42, 42, 74, 0.5);
  --bg-input: #12122a; --bg-input-focus: #181838;
  --border-color: #2a2a4a; --border-hover: #3a3a6a; --border-glow: rgba(0,212,255,0.3);
  --text-primary: #e0e0f0; --text-secondary: #8888aa; --text-muted: #55557a; --text-bright: #f0f0ff;
  --neon-cyan: #00d4ff; --neon-blue: #4a8aff; --neon-green: #2ecc71;
  --neon-purple: #9b59b6; --neon-yellow: #f1c40f; --neon-orange: #e67e22; --neon-red: #e74c3c; --neon-pink: #ff6b9d;
  --shadow-card: 0 4px 24px rgba(0,0,0,0.5); --shadow-elevated: 0 8px 40px rgba(0,0,0,0.6);
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px;
  --transition-fast: 0.15s ease; --transition-base: 0.25s ease; --transition-slow: 0.4s cubic-bezier(0.22,1,0.36,1);
  --font-sans: "Segoe UI",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --font-mono: "Cascadia Code","Fira Code","Cascadia Mono","Consolas","JetBrains Mono",monospace;
  --nav-height: 52px; --sidebar-width: 280px; --sidebar-collapsed-width: 48px;
}
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html,body { height:100%; background:var(--bg-primary); color:var(--text-primary); font-family:var(--font-sans); font-size:14px; line-height:1.6; overflow:hidden; -webkit-font-smoothing:antialiased; }
body::before { content:''; position:fixed; top:0; left:0; right:0; bottom:0; background-image:linear-gradient(rgba(0,212,255,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,255,0.025) 1px,transparent 1px); background-size:60px 60px; pointer-events:none; z-index:0; }
.ambient-orbs { position:fixed; top:0; left:0; right:0; bottom:0; pointer-events:none; z-index:0; overflow:hidden; }
.ambient-orbs .orb-particle { position:absolute; border-radius:50%; filter:blur(60px); opacity:0.15; animation:orb-float 20s ease-in-out infinite; }
.ambient-orbs .orb-particle:nth-child(1) { width:400px; height:400px; background:var(--neon-cyan); top:-10%; left:-5%; animation-delay:0s; animation-duration:25s; }
.ambient-orbs .orb-particle:nth-child(2) { width:300px; height:300px; background:var(--neon-purple); bottom:-8%; right:-5%; animation-delay:-5s; animation-duration:30s; }
.ambient-orbs .orb-particle:nth-child(3) { width:250px; height:250px; background:var(--neon-blue); top:40%; right:-3%; animation-delay:-10s; animation-duration:20s; }
.ambient-orbs .orb-particle:nth-child(4) { width:350px; height:350px; background:var(--neon-green); bottom:10%; left:-5%; animation-delay:-15s; animation-duration:28s; opacity:0.08; }
@keyframes orb-float { 0%,100%{transform:translate(0,0) scale(1)} 25%{transform:translate(80px,-60px) scale(1.1)} 50%{transform:translate(-40px,80px) scale(0.9)} 75%{transform:translate(60px,40px) scale(1.05)} }
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border-color); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--border-hover); }
#app { position:relative; z-index:1; height:100vh; display:flex; flex-direction:column; }

.chat-nav { display:flex; align-items:center; gap:12px; height:var(--nav-height); padding:0 20px; background:var(--bg-secondary); border-bottom:1px solid var(--border-color); flex-shrink:0; backdrop-filter:blur(12px); position:relative; z-index:10; }
.chat-nav::after { content:''; position:absolute; bottom:-1px; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent 0%,var(--neon-cyan) 20%,var(--neon-blue) 50%,var(--neon-purple) 80%,transparent 100%); opacity:0.4; }
.chat-nav .logo { display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; }
.chat-nav .logo-icon { width:32px; height:32px; border-radius:var(--radius-md); background:linear-gradient(135deg,var(--neon-cyan),var(--neon-blue)); display:flex; align-items:center; justify-content:center; font-size:18px; color:#fff; box-shadow:0 0 20px rgba(0,212,255,0.3); animation:logo-glow 3s ease-in-out infinite; }
@keyframes logo-glow { 0%,100%{box-shadow:0 0 20px rgba(0,212,255,0.3)} 50%{box-shadow:0 0 35px rgba(0,212,255,0.6)} }
.chat-nav .logo-text { font-size:17px; font-weight:700; color:var(--text-bright); letter-spacing:0.5px; }
.chat-nav .logo-text span { color:var(--neon-cyan); }
.chat-nav .logo-badge { font-size:10px; font-weight:600; padding:2px 8px; border-radius:var(--radius-full); background:linear-gradient(135deg,rgba(0,212,255,0.15),rgba(74,138,255,0.15)); border:1px solid rgba(0,212,255,0.25); color:var(--neon-cyan); letter-spacing:0.3px; }
.chat-nav .nav-tabs { display:flex; gap:2px; margin-left:16px; }
.chat-nav .nav-tab { padding:6px 14px; border:none; background:transparent; color:var(--text-secondary); cursor:pointer; border-radius:var(--radius-md); font-size:13px; font-family:inherit; transition:var(--transition-base); position:relative; }
.chat-nav .nav-tab:hover { color:var(--text-primary); background:var(--bg-card); }
.chat-nav .nav-tab.active { color:var(--neon-cyan); background:rgba(0,212,255,0.08); text-shadow:0 0 10px rgba(0,212,255,0.3); }
.chat-nav .nav-tab.active::after { content:''; position:absolute; bottom:-1px; left:50%; transform:translateX(-50%); width:60%; height:2px; background:var(--neon-cyan); border-radius:1px; box-shadow:0 0 8px var(--neon-cyan); }
.chat-nav .nav-right { margin-left:auto; display:flex; align-items:center; gap:12px; }
.chat-nav .connection-indicator { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-muted); }
.chat-nav .connection-dot { width:8px; height:8px; border-radius:50%; transition:var(--transition-base); }
.chat-nav .connection-dot.online { background:var(--neon-green); box-shadow:0 0 8px var(--neon-green); }
.chat-nav .connection-dot.offline { background:var(--neon-red); box-shadow:0 0 8px var(--neon-red); }
.chat-nav .connection-dot.reconnecting { background:var(--neon-yellow); animation:pulse-dot 1s infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1;box-shadow:0 0 6px var(--neon-yellow)} 50%{opacity:0.3;box-shadow:0 0 12px var(--neon-yellow)} }

.chat-layout { flex:1; display:flex; overflow:hidden; min-height:0; }
.chat-panel { flex:1; display:flex; flex-direction:column; min-width:0; position:relative; }
.chat-messages { flex:1; overflow-y:auto; padding:20px 24px; scroll-behavior:smooth; }

.chat-welcome { text-align:center; padding:60px 20px 30px; opacity:0; animation:fade-in 0.8s ease 0.3s forwards; }
@keyframes fade-in { to{opacity:1} }
.chat-welcome .welcome-icon { font-size:56px; margin-bottom:16px; display:block; filter:drop-shadow(0 0 30px rgba(0,212,255,0.3)); }
.chat-welcome .welcome-title { font-size:24px; font-weight:700; color:var(--text-bright); margin-bottom:10px; }
.chat-welcome .welcome-title .highlight { background:linear-gradient(135deg,var(--neon-cyan),var(--neon-blue)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.chat-welcome .welcome-sub { font-size:14px; color:var(--text-secondary); max-width:480px; margin:0 auto; line-height:1.7; }
.chat-welcome .welcome-hints { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:20px; }
.chat-welcome .welcome-hint { padding:6px 14px; border-radius:var(--radius-full); background:var(--bg-glass); border:1px solid var(--bg-glass-border); color:var(--text-muted); font-size:12px; cursor:pointer; transition:var(--transition-base); }
.chat-welcome .welcome-hint:hover { border-color:var(--neon-cyan); color:var(--neon-cyan); background:rgba(0,212,255,0.08); }

.message { margin-bottom:20px; max-width:85%; display:flex; flex-direction:column; opacity:0; animation:message-in 0.35s ease forwards; }
@keyframes message-in { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
.message.user { align-self:flex-end; align-items:flex-end; }
.message.lumo { align-self:flex-start; align-items:flex-start; }
.message .msg-row { display:flex; align-items:flex-end; gap:8px; width:100%; }
.message.user .msg-row { flex-direction:row-reverse; }
.message .avatar { width:30px; height:30px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
.message.user .avatar { background:linear-gradient(135deg,var(--neon-blue),var(--neon-purple)); color:#fff; }
.message.lumo .avatar { background:linear-gradient(135deg,var(--neon-cyan),var(--neon-green)); color:#fff; box-shadow:0 0 16px rgba(0,212,255,0.25); }
.message .content { padding:12px 16px; border-radius:var(--radius-lg); line-height:1.65; font-size:14px; word-break:break-word; position:relative; }
.message.user .content { background:linear-gradient(135deg,rgba(74,138,255,0.18),rgba(155,89,182,0.12)); border:1px solid rgba(74,138,255,0.25); color:var(--text-bright); border-bottom-right-radius:var(--radius-sm); }
.message.lumo .content { background:var(--bg-glass); backdrop-filter:blur(16px); border:1px solid var(--bg-glass-border); color:var(--text-primary); border-bottom-left-radius:var(--radius-sm); }
.message.lumo .content::before { content:''; position:absolute; top:-1px; left:-1px; right:-1px; height:1px; background:linear-gradient(90deg,var(--neon-cyan),transparent 70%); border-radius:var(--radius-lg) var(--radius-lg) 0 0; opacity:0.5; }
.message .content p { margin-bottom:8px; }
.message .content p:last-child { margin-bottom:0; }
.message .content pre { background:var(--bg-deep); border:1px solid var(--border-color); border-radius:var(--radius-md); padding:14px 16px; overflow-x:auto; margin:10px 0; font-size:13px; font-family:var(--font-mono); position:relative; }
.message .content pre::before { content:'</>'; position:absolute; top:8px; right:12px; font-size:10px; color:var(--text-muted); font-family:var(--font-sans); letter-spacing:0.5px; opacity:0.6; }
.message .content code { font-family:var(--font-mono); font-size:13px; }
.message .content :not(pre)>code { background:rgba(0,212,255,0.1); color:var(--neon-cyan); padding:2px 7px; border-radius:var(--radius-sm); font-size:13px; border:1px solid rgba(0,212,255,0.15); }
.message .content ul,.message .content ol { padding-left:20px; margin:6px 0; }
.message .content li { margin-bottom:4px; }
.message .content blockquote { border-left:3px solid var(--neon-cyan); padding-left:14px; color:var(--text-secondary); margin:8px 0; background:rgba(0,212,255,0.03); border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.message .content table { border-collapse:collapse; width:100%; margin:8px 0; font-size:13px; }
.message .content th,.message .content td { border:1px solid var(--border-color); padding:8px 12px; text-align:left; }
.message .content th { background:var(--bg-card); color:var(--neon-cyan); font-weight:600; }
.message .content a { color:var(--neon-cyan); text-decoration:none; border-bottom:1px solid transparent; transition:var(--transition-fast); }
.message .content a:hover { border-bottom-color:var(--neon-cyan); text-shadow:0 0 8px rgba(0,212,255,0.3); }
.message .content hr { border:none; height:1px; background:linear-gradient(90deg,transparent,var(--border-color),transparent); margin:12px 0; }
.message .timestamp { font-size:11px; color:var(--text-muted); margin-top:4px; padding:0 6px; font-family:var(--font-mono); }
.message.streaming .content::after { content:'▊'; display:inline-block; color:var(--neon-cyan); animation:cursor-blink 0.8s step-end infinite; margin-left:2px; }
@keyframes cursor-blink { 50%{opacity:0} }

.input-area { display:flex; gap:10px; padding:14px 20px 18px; border-top:1px solid var(--border-color); background:var(--bg-secondary); align-items:flex-end; position:relative; }
.input-area::before { content:''; position:absolute; top:-1px; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent 0%,var(--neon-cyan) 30%,var(--neon-blue) 70%,transparent 100%); opacity:0.2; }
.input-area .input-wrapper { flex:1; display:flex; align-items:flex-end; gap:8px; background:var(--bg-input); border:1px solid var(--border-color); border-radius:var(--radius-lg); padding:4px; transition:var(--transition-base); }
.input-area .input-wrapper:focus-within { border-color:var(--neon-cyan); box-shadow:0 0 0 1px rgba(0,212,255,0.12),0 0 24px rgba(0,212,255,0.04); background:var(--bg-input-focus); }
.input-area textarea { flex:1; background:transparent; color:var(--text-primary); border:none; padding:8px 10px; font-family:inherit; font-size:14px; resize:none; min-height:24px; max-height:150px; outline:none; line-height:1.5; }
.input-area textarea::placeholder { color:var(--text-muted); }
.input-wrapper .input-actions { display:flex; gap:4px; align-items:center; padding:4px; flex-shrink:0; }
.input-wrapper .input-action-btn { width:32px; height:32px; border-radius:var(--radius-md); border:none; background:transparent; color:var(--text-muted); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:16px; transition:var(--transition-fast); }
.input-wrapper .input-action-btn:hover { color:var(--text-secondary); background:rgba(255,255,255,0.05); }
#send-btn { height:38px; padding:0 22px; border:none; border-radius:var(--radius-md); background:linear-gradient(135deg,var(--neon-cyan),var(--neon-blue)); color:#fff; font-size:14px; font-weight:600; cursor:pointer; white-space:nowrap; transition:var(--transition-base); position:relative; overflow:hidden; font-family:inherit; flex-shrink:0; }
#send-btn::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent); transition:left 0.5s; }
#send-btn:hover::before { left:100%; }
#send-btn:hover { box-shadow:0 0 24px rgba(0,212,255,0.35); transform:translateY(-1px); }
#send-btn:active { transform:translateY(0); }
#send-btn:disabled { opacity:0.4; cursor:not-allowed; box-shadow:none; transform:none; }

.typing-indicator { display:none; align-items:center; gap:10px; padding:4px 8px; margin-bottom:12px; margin-left:42px; align-self:flex-start; }
.typing-indicator.visible { display:flex; animation:message-in 0.3s ease forwards; }
.typing-indicator .typing-dots { display:flex; gap:5px; align-items:center; }
.typing-indicator .typing-dot { width:6px; height:6px; border-radius:50%; background:var(--neon-cyan); opacity:0.4; animation:typing-bounce 1.4s ease-in-out infinite; }
.typing-indicator .typing-dot:nth-child(2) { animation-delay:0.2s; }
.typing-indicator .typing-dot:nth-child(3) { animation-delay:0.4s; }
@keyframes typing-bounce { 0%,80%,100%{transform:translateY(0);opacity:0.4} 40%{transform:translateY(-6px);opacity:1} }
.typing-indicator .typing-label { font-size:12px; color:var(--text-muted); }

.status-sidebar { width:var(--sidebar-width); flex-shrink:0; background:var(--bg-secondary); border-left:1px solid var(--border-color); display:flex; flex-direction:column; overflow:hidden; transition:width var(--transition-slow); position:relative; }
.status-sidebar.collapsed { width:var(--sidebar-collapsed-width); }
.status-sidebar .sidebar-header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--border-color); flex-shrink:0; min-height:48px; }
.status-sidebar .sidebar-header .sidebar-title { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.8px; white-space:nowrap; overflow:hidden; }
.status-sidebar .sidebar-header .sidebar-toggle { width:28px; height:28px; border-radius:var(--radius-sm); border:1px solid var(--border-color); background:transparent; color:var(--text-muted); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:12px; transition:var(--transition-fast); flex-shrink:0; }
.status-sidebar .sidebar-header .sidebar-toggle:hover { color:var(--text-primary); border-color:var(--border-hover); }
.status-sidebar .sidebar-body { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px; }
.status-sidebar.collapsed .sidebar-header .sidebar-title,.status-sidebar.collapsed .sidebar-body { display:none; }
.status-sidebar.collapsed .sidebar-header { justify-content:center; padding:12px 8px; }

.lumo-status-orb { display:flex; flex-direction:column; align-items:center; padding:20px 16px 14px; border-bottom:1px solid var(--border-color); gap:10px; }
.lumo-status-orb .orb-container { position:relative; width:72px; height:72px; display:flex; align-items:center; justify-content:center; }
.lumo-status-orb .orb-ring { position:absolute; inset:0; border-radius:50%; border:2px solid transparent; animation:orb-ring-spin 4s linear infinite; }
.lumo-status-orb .orb-ring:nth-child(1) { border-top-color:var(--neon-cyan); border-right-color:var(--neon-cyan); opacity:0.6; }
.lumo-status-orb .orb-ring:nth-child(2) { inset:6px; border-bottom-color:var(--neon-blue); border-left-color:var(--neon-blue); opacity:0.4; animation-duration:6s; animation-direction:reverse; }
.lumo-status-orb .orb-ring:nth-child(3) { inset:12px; border-top-color:var(--neon-purple); border-right-color:var(--neon-purple); opacity:0.3; animation-duration:8s; }
@keyframes orb-ring-spin { to{transform:rotate(360deg)} }
#status-orb { width:36px; height:36px; border-radius:50%; position:relative; z-index:1; transition:all 0.6s ease; }
#status-orb.idle { background:var(--neon-cyan); box-shadow:0 0 20px rgba(0,212,255,0.5),0 0 60px rgba(0,212,255,0.15); animation:orb-idle 3s ease-in-out infinite; }
#status-orb.thinking { background:linear-gradient(135deg,var(--neon-green),var(--neon-cyan)); box-shadow:0 0 25px rgba(46,204,113,0.5),0 0 60px rgba(0,212,255,0.2); animation:orb-think 1s ease-in-out infinite; }
#status-orb.error { background:var(--neon-red); box-shadow:0 0 25px rgba(231,76,60,0.5),0 0 60px rgba(231,76,60,0.15); animation:orb-error 0.8s ease-in-out infinite; }
@keyframes orb-idle { 0%,100%{transform:scale(1);opacity:0.8} 50%{transform:scale(1.08);opacity:1} }
@keyframes orb-think { 0%,100%{transform:scale(1);opacity:0.9} 25%{transform:scale(1.1);opacity:1} 50%{transform:scale(0.95);opacity:0.7} 75%{transform:scale(1.05);opacity:1} }
@keyframes orb-error { 0%,100%{transform:scale(1);opacity:0.8} 50%{transform:scale(0.9);opacity:1} }
.lumo-status-orb .orb-label { font-size:13px; color:var(--text-secondary); font-weight:500; }
.lumo-status-orb .orb-sub { font-size:11px; color:var(--text-muted); }

.status-card { background:var(--bg-glass); backdrop-filter:blur(8px); border:1px solid var(--bg-glass-border); border-radius:var(--radius-md); padding:12px 14px; transition:var(--transition-base); cursor:default; }
.status-card:hover { border-color:var(--border-hover); background:var(--bg-card-hover); transform:translateX(2px); }
.status-card .card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.status-card .label { font-size:11px; color:var(--text-muted); text-transform:uppercase; font-weight:600; letter-spacing:0.6px; display:flex; align-items:center; gap:6px; }
.status-card .label .icon { font-size:14px; width:18px; text-align:center; }
.status-card .value { font-size:20px; font-weight:700; color:var(--text-bright); font-family:var(--font-mono); transition:var(--transition-base); }
.status-card .value.glow-cyan { color:var(--neon-cyan); text-shadow:0 0 10px rgba(0,212,255,0.3); }
.status-card .value.glow-green { color:var(--neon-green); text-shadow:0 0 10px rgba(46,204,113,0.3); }
.status-card .value.glow-blue { color:var(--neon-blue); text-shadow:0 0 10px rgba(74,138,255,0.3); }
.status-card .value.glow-purple { color:var(--neon-purple); text-shadow:0 0 10px rgba(155,89,182,0.3); }
.status-card .value.glow-red { color:var(--neon-red); text-shadow:0 0 10px rgba(231,76,60,0.3); }
.status-card .sub { font-size:11px; color:var(--text-muted); margin-top:4px; font-family:var(--font-mono); }
.energy-bar { width:100%; height:4px; background:var(--bg-deep); border-radius:2px; margin-top:8px; overflow:hidden; position:relative; }
.energy-bar .energy-fill { height:100%; border-radius:2px; transition:width 0.6s ease,background 0.6s ease; position:relative; }
.energy-bar .energy-fill::after { content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.25),transparent); animation:energy-shimmer 2s ease-in-out infinite; }
@keyframes energy-shimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
.energy-bar .energy-fill.high { background:linear-gradient(90deg,var(--neon-green),var(--neon-cyan)); }
.energy-bar .energy-fill.medium { background:linear-gradient(90deg,var(--neon-yellow),var(--neon-orange)); }
.energy-bar .energy-fill.low { background:linear-gradient(90deg,var(--neon-red),var(--neon-orange)); }
.kg-mini-list { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.kg-mini-tag { font-size:10px; padding:2px 8px; border-radius:var(--radius-full); background:rgba(0,212,255,0.08); border:1px solid rgba(0,212,255,0.15); color:var(--neon-cyan); font-family:var(--font-mono); }
.session-info { padding:10px 14px; font-size:11px; color:var(--text-muted); border-top:1px solid var(--border-color); font-family:var(--font-mono); word-break:break-all; line-height:1.5; flex-shrink:0; }

.toast-container { position:fixed; top:60px; right:20px; z-index:999; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toast { padding:10px 16px; border-radius:var(--radius-md); background:var(--bg-glass); backdrop-filter:blur(16px); border:1px solid var(--bg-glass-border); color:var(--text-primary); font-size:13px; box-shadow:var(--shadow-card); animation:toast-in 0.3s ease forwards; pointer-events:auto; max-width:320px; }
.toast.toast-error { border-color:var(--neon-red); }
.toast.toast-success { border-color:var(--neon-green); }
.toast.toast-info { border-color:var(--neon-cyan); }
@keyframes toast-in { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} }
.toast.toast-out { animation:toast-out 0.3s ease forwards; }
@keyframes toast-out { to{opacity:0;transform:translateX(30px)} }

@media (max-width:1024px) { .status-sidebar{width:220px} .message{max-width:90%} }
@media (max-width:767px) {
  .chat-layout{flex-direction:column}
  .status-sidebar{width:100%!important;max-height:200px;border-left:none;border-top:1px solid var(--border-color)}
  .status-sidebar.collapsed{max-height:48px;overflow:hidden}
  .status-sidebar .sidebar-body{flex-direction:row;flex-wrap:wrap;gap:6px;padding:8px}
  .status-sidebar .status-card{flex:1;min-width:100px;padding:10px}
  .status-sidebar .status-card .value{font-size:16px}
  .lumo-status-orb{display:none}
  .chat-messages{padding:12px 14px}
  .message{max-width:95%}
  .message .content{padding:10px 12px;font-size:13px}
  .input-area{padding:10px 12px 14px}
  .chat-nav .nav-tabs{display:none}
  .chat-nav .logo-badge{display:none}
}
@media (max-width:480px) {
  .chat-nav{padding:0 12px;gap:8px}
  .chat-nav .logo-text{font-size:15px}
  .chat-messages{padding:8px 10px}
  .input-area{padding:8px 10px 12px;gap:6px}
  #send-btn{padding:0 14px;font-size:13px}
}
.hljs { background:var(--bg-deep)!important; border-radius:var(--radius-md); }