/* CONTROL-IAI v3.1 Agentic — Dark IA-NET Theme */

:root {
  --bg: #0a0e14; --bg2: #111822; --bg3: #1a2232;
  --border: #1e2a3a; --text: #e0e6ed; --muted: #6b7d93;
  --accent: #3b82f6; --accent-h: #2563eb;
  --green: #22c55e; --red: #ef4444; --orange: #f59e0b; --purple: #a855f7;
  --user-bg: #1a2744; --asst-bg: #111822; --sys-bg: #1a1a2e;
  --r: 8px; --font: -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono: 'SF Mono','Fira Code','JetBrains Mono',monospace;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--font); background:var(--bg); color:var(--text); height:100vh; overflow:hidden; }

/* Login */
#login-screen { display:flex; align-items:center; justify-content:center; height:100vh; background:linear-gradient(135deg,#0a0e14,#111822,#0a1628); }
.login-box { text-align:center; padding:48px; background:var(--bg2); border:1px solid var(--border); border-radius:16px; min-width:380px; }
.login-box h1 { font-size:28px; font-weight:700; letter-spacing:2px; color:var(--accent); margin-bottom:4px; }
.subtitle { color:var(--muted); margin-bottom:32px; font-size:14px; }
.login-box input { display:block; width:100%; padding:12px 16px; margin-bottom:16px; background:var(--bg3); border:1px solid var(--border); border-radius:var(--r); color:var(--text); font-size:15px; outline:none; }
.login-box input:focus { border-color:var(--accent); }
.login-box button { width:100%; padding:12px; background:var(--accent); color:#fff; border:none; border-radius:var(--r); font-size:15px; font-weight:600; cursor:pointer; }
.login-box button:hover { background:var(--accent-h); }
.error { color:var(--red); margin-top:12px; font-size:14px; }

/* Layout */
#main-screen { display:flex; flex-direction:column; height:100vh; }
header { display:flex; justify-content:space-between; align-items:center; padding:10px 20px; background:var(--bg2); border-bottom:1px solid var(--border); flex-shrink:0; }
.header-left { display:flex; align-items:center; gap:12px; }
.header-left h1 { font-size:18px; font-weight:700; letter-spacing:1px; color:var(--accent); }
.version { font-size:11px; color:var(--muted); background:var(--bg3); padding:2px 8px; border-radius:4px; }
.header-right { display:flex; align-items:center; gap:8px; }
.badge { font-size:11px; color:var(--muted); padding:4px 10px; background:var(--bg3); border-radius:12px; margin-right:4px; }
.btn-icon { width:34px; height:34px; background:var(--bg3); border:1px solid var(--border); border-radius:var(--r); cursor:pointer; font-size:15px; display:flex; align-items:center; justify-content:center; }
.btn-icon:hover { border-color:var(--accent); }

/* Auto-approve toggle */
.auto-toggle { display:flex; align-items:center; gap:4px; cursor:pointer; font-size:11px; color:var(--muted); padding:4px 8px; background:var(--bg3); border:1px solid var(--border); border-radius:var(--r); }
.auto-toggle input { width:14px; height:14px; accent-color:var(--orange); }
.toggle-label { user-select:none; }

.layout { display:flex; flex:1; overflow:hidden; }

/* Chat */
.chat-container { flex:1; display:flex; flex-direction:column; min-width:0; }
#chat-messages { flex:1; overflow-y:auto; padding:16px 20px; }
.message { margin-bottom:14px; padding:12px 16px; border-radius:var(--r); max-width:88%; }
.message.user { background:var(--user-bg); margin-left:auto; border:1px solid #243656; }
.message.assistant { background:var(--asst-bg); border:1px solid var(--border); max-width:95%; }
.message.system { background:var(--sys-bg); border:1px solid #2a2a4a; max-width:100%; font-size:12px; padding:8px 12px; }
.message.approval { background:#1a1a10; border:1px solid var(--orange); max-width:100%; }

.msg-header { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:1px; margin-bottom:6px; display:flex; justify-content:space-between; }
.message.user .msg-header { color:var(--accent); }
.message.assistant .msg-header { color:var(--green); }
.msg-time { font-weight:400; color:var(--muted); font-size:10px; letter-spacing:0; text-transform:none; }
.msg-content { font-size:13px; line-height:1.6; word-break:break-word; }
.msg-content pre { background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:10px; margin:8px 0; overflow-x:auto; font-family:var(--mono); font-size:12px; line-height:1.5; }
.msg-content code { font-family:var(--mono); font-size:12px; background:var(--bg3); padding:1px 5px; border-radius:3px; }
.msg-content pre code { background:none; padding:0; }

/* Execution blocks */
.exec-block { background:#0a1a10; border:1px solid #1a3a2a; border-radius:6px; padding:10px; margin:8px 0; }
.exec-header { font-size:12px; margin-bottom:4px; color:var(--green); }
.exec-marker { background:var(--bg3); border-left:3px solid var(--purple); padding:8px 12px; margin:6px 0; border-radius:0 6px 6px 0; font-size:12px; }
.pending-block { background:#1a1a10; border-left:3px solid var(--orange); padding:8px 12px; margin:6px 0; border-radius:0 6px 6px 0; font-size:12px; color:var(--orange); }

/* Approval inline */
.approval-header { font-weight:600; color:var(--orange); margin-bottom:8px; font-size:13px; }
.approval-info { font-size:12px; margin-bottom:10px; }
.approval-actions { display:flex; gap:8px; }

/* Input */
.chat-input-area { padding:12px 20px; background:var(--bg2); border-top:1px solid var(--border); flex-shrink:0; }
.chat-input-area textarea { width:100%; padding:10px 14px; background:var(--bg3); border:1px solid var(--border); border-radius:var(--r); color:var(--text); font-family:var(--font); font-size:13px; resize:none; outline:none; }
.chat-input-area textarea:focus { border-color:var(--accent); }
.input-controls { display:flex; justify-content:space-between; align-items:center; margin-top:8px; }

#agent-status { display:flex; align-items:center; gap:8px; }
.agent-dot { width:8px; height:8px; background:var(--green); border-radius:50%; animation:pulse 1.2s infinite; }
#agent-status-text { font-size:12px; color:var(--green); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

#send-btn { padding:7px 20px; background:var(--accent); color:#fff; border:none; border-radius:var(--r); font-size:13px; font-weight:600; cursor:pointer; }
#send-btn:hover { background:var(--accent-h); }
#send-btn:disabled { opacity:.5; cursor:not-allowed; }

/* Side Panels */
.side-panel { width:380px; flex-shrink:0; display:flex; flex-direction:column; background:var(--bg2); border-left:1px solid var(--border); overflow-y:auto; padding:16px; }
.panel-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.panel-header h2 { font-size:15px; }
.btn-close { width:26px; height:26px; background:var(--bg3); border:1px solid var(--border); border-radius:4px; color:var(--muted); cursor:pointer; font-size:13px; }
.side-panel h3 { font-size:12px; color:var(--muted); margin:16px 0 8px; text-transform:uppercase; letter-spacing:1px; }
.side-panel input, .side-panel textarea { width:100%; padding:8px 10px; background:var(--bg3); border:1px solid var(--border); border-radius:var(--r); color:var(--text); font-size:12px; margin-bottom:8px; outline:none; font-family:var(--mono); }
.side-panel button { padding:6px 14px; background:var(--accent); color:#fff; border:none; border-radius:var(--r); font-size:12px; cursor:pointer; margin-bottom:8px; }
.btn-secondary { background:var(--bg3)!important; border:1px solid var(--border)!important; color:var(--text)!important; }

/* Task Cards */
.task-card { background:var(--bg3); border:1px solid var(--border); border-radius:var(--r); padding:10px; margin-bottom:8px; font-size:12px; }
.task-card.pending { border-color:var(--orange); }
.task-card.completed { border-color:var(--green); }
.task-card.rejected { border-color:var(--red); }
.task-header { display:flex; align-items:center; gap:6px; margin-bottom:4px; }
.task-status { margin-left:auto; font-size:10px; padding:2px 6px; border-radius:4px; text-transform:uppercase; font-weight:600; }
.task-card.completed .task-status { background:#0d3320; color:var(--green); }
.task-card.rejected .task-status { background:#3d1111; color:var(--red); }
.task-cmd { background:var(--bg)!important; padding:6px!important; border-radius:4px!important; font-family:var(--mono); font-size:11px; overflow-x:auto; margin:4px 0; border:none!important; }
.task-result { background:var(--bg)!important; padding:6px!important; font-family:var(--mono); font-size:10px; max-height:120px; overflow-y:auto; border:none!important; margin:0!important; border-radius:4px!important; }
.task-actions { display:flex; gap:6px; margin-top:6px; }
.btn-approve { background:var(--green)!important; color:#000!important; font-weight:600; flex:1; }
.btn-reject { background:transparent!important; border:1px solid var(--red)!important; color:var(--red)!important; flex:1; }
.btn-reject:hover { background:var(--red)!important; color:#fff!important; }

/* Search */
.search-result { background:var(--bg3); border:1px solid var(--border); border-radius:var(--r); padding:8px; margin-bottom:6px; font-size:12px; }
.search-type { font-size:9px; text-transform:uppercase; padding:1px 5px; border-radius:3px; background:var(--bg); color:var(--muted); }
.search-role { font-size:9px; text-transform:uppercase; color:var(--accent); }
.search-result p { margin-top:4px; color:var(--muted); line-height:1.4; }
.muted { color:var(--muted); font-size:12px; font-style:italic; }

::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }

@media (max-width:768px) {
  .side-panel { width:100%; position:fixed; top:48px; right:0; bottom:0; z-index:100; }
  .message { max-width:95%; }
  .badge { display:none; }
}