/* MasiX Cockpit — ChatGPT-style */
:root{--bg:#020617;--bg2:#0f172a;--bg3:#111827;--border:#1e293b;--border2:#334155;--text:#e2e8f0;--text2:#94a3b8;--text3:#64748b;--accent:#06b6d4;--green:#34d399;--blue:#38bdf8;--red:#f87171;--gray:#78716c;--input-bg:#0f172a;--sidebar-w:280px}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);height:100dvh;display:flex;overflow:hidden}
/* Layout */
.sidebar{width:var(--sidebar-w);background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;transition:margin-left .2s}
.sidebar.collapsed{margin-left:calc(var(--sidebar-w) * -1)}
.main{flex:1;display:flex;flex-direction:column;min-width:0}
/* Sidebar header */
.sb-head{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.sb-head h1{font-size:15px;font-weight:700;letter-spacing:1.5px;color:var(--text2)}
.sb-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:8px;border:none;background:transparent;color:var(--text2);cursor:pointer;transition:all .15s}
.sb-btn:hover{background:var(--bg3);color:var(--text)}
.sb-btn svg{width:18px;height:18px}
/* New chat btn */
.new-btn{display:flex;align-items:center;gap:8px;margin:10px 12px;padding:10px 14px;border-radius:10px;border:1px dashed var(--border2);background:transparent;color:var(--text2);cursor:pointer;font-size:13px;transition:all .15s}
.new-btn:hover{border-color:var(--accent);color:var(--text)}
.new-btn svg{width:16px;height:16px}
/* Conversation list */
.conv-list{flex:1;overflow-y:auto;padding:4px 8px}
.conv{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;cursor:pointer;margin-bottom:2px;transition:background .1s;-webkit-tap-highlight-color:transparent}
.conv:hover{background:var(--bg3)}
.conv.active{background:var(--bg3)}
.conv-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.conv-icon.bot{background:#1e293b}
.conv-icon.session{background:#0c1a2e}
.conv-icon svg{width:18px;height:18px}
.conv-icon.bot svg{color:var(--accent)}
.conv-icon.session svg{color:var(--blue)}
.conv-body{flex:1;min-width:0}
.conv-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-meta{font-size:11px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.conv-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.dot-active{background:var(--green)}.dot-ready{background:var(--blue)}.dot-stopped{background:var(--gray)}.dot-crashed{background:var(--red)}.dot-idle{background:var(--gray)}
/* Chat header */
.chat-head{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-shrink:0;background:var(--bg)}
.chat-toggle{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:8px;border:none;background:transparent;color:var(--text2);cursor:pointer}
.chat-toggle:hover{background:var(--bg3);color:var(--text)}
.chat-toggle svg{width:18px;height:18px}
.chat-title{flex:1;min-width:0}
.chat-title h2{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-title span{font-size:11px;color:var(--text3)}
.chat-actions{display:flex;gap:4px}
/* Messages */
.messages{flex:1;overflow-y:auto;padding:20px 0;display:flex;flex-direction:column}
.msg-wrap{max-width:768px;width:100%;margin:0 auto;padding:0 24px}
.msg{padding:12px 0;line-height:1.65;font-size:14px;word-break:break-word}
.msg-user .msg-role{color:var(--text2);font-size:12px;font-weight:600;margin-bottom:6px}
.msg-assistant .msg-role{color:var(--accent);font-size:12px;font-weight:600;margin-bottom:6px}
.msg pre{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:12px;overflow-x:auto;font-size:13px;margin:8px 0;font-family:'SF Mono',SFMono-Regular,Consolas,monospace}
.msg code{font-family:'SF Mono',SFMono-Regular,Consolas,monospace;font-size:13px;background:var(--bg);padding:2px 6px;border-radius:4px}
.msg pre code{background:none;padding:0}
.msg p{margin:6px 0}
.msg ul,.msg ol{margin:6px 0;padding-left:20px}
.msg blockquote{border-left:3px solid var(--border2);padding-left:12px;color:var(--text3);margin:8px 0}
.msg a{color:var(--accent)}
.msg strong{color:#fff}
.msg table{border-collapse:collapse;margin:8px 0;width:100%}
.msg th,.msg td{border:1px solid var(--border);padding:6px 10px;font-size:13px}
.msg th{background:var(--bg2)}
.msg-empty{text-align:center;padding:80px 24px;color:var(--text3);font-size:14px}
.msg-empty svg{width:48px;height:48px;color:var(--border2);margin-bottom:16px}
/* Input bar */
.input-bar{padding:12px 24px 16px;flex-shrink:0}
.input-wrap{max-width:768px;margin:0 auto;display:flex;gap:8px;align-items:flex-end;background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:6px 6px 6px 14px}
.input-wrap textarea{flex:1;resize:none;min-height:24px;max-height:150px;padding:8px 0;border:none;background:transparent;color:var(--text);font-size:14px;font-family:inherit;line-height:1.5;outline:none}
.send-btn{width:36px;height:36px;border-radius:8px;border:none;background:var(--text2);color:var(--bg);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s}
.send-btn:hover{background:#fff}
.send-btn:disabled{opacity:.3;cursor:default}
.send-btn svg{width:18px;height:18px}
/* Responsive */
@media(max-width:768px){
  :root{--sidebar-w:280px}
  .sidebar{position:fixed;top:0;left:0;bottom:0;z-index:10;width:var(--sidebar-w)}
  .sidebar.collapsed{margin-left:calc(var(--sidebar-w) * -1)}
  .msg-wrap,.input-wrap{max-width:100%}
  .messages,.input-bar{padding-left:12px;padding-right:12px}
}