* { box-sizing: border-box; }
:root {
  --bg: #070a12;
  --panel: #0d1220;
  --panel2: #12192a;
  --line: rgba(255,255,255,.09);
  --text: #f5f7ff;
  --muted: #8e98ad;
  --accent: #7c5cff;
  --accent2: #27d7ff;
}
body {
  margin: 0; min-height: 100vh; background: radial-gradient(circle at 65% 10%, #182342 0, transparent 35%), var(--bg);
  color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
}
.app { display: flex; min-height: 100vh; }
.sidebar { width: 280px; background: rgba(10,14,25,.88); border-right: 1px solid var(--line); padding: 24px 18px; display:flex; flex-direction:column; }
.brand { display:flex; gap:12px; align-items:center; margin: 0 8px 30px; }
.brand-orb { width:42px; height:42px; display:grid; place-items:center; border-radius:14px; background:linear-gradient(135deg,var(--accent),var(--accent2)); box-shadow:0 0 30px #6d5aff55; font-size:23px; }
.brand strong { display:block; letter-spacing:3px; font-size:16px; }
.brand span { display:block; color:var(--muted); font-size:9px; letter-spacing:2px; margin-top:4px; }
button { font:inherit; cursor:pointer; color:inherit; }
.new-chat { border:1px solid #6c5bff66; background:linear-gradient(135deg,#5d4ce0,#2e92b6); border-radius:12px; padding:13px; font-weight:700; margin-bottom:28px; }
.side-section label { color:#68738b; font-size:10px; letter-spacing:1.5px; padding:0 10px; }
.side-item { width:100%; border:0; background:transparent; padding:13px 10px; text-align:left; color:#b8c0d0; border-radius:10px; margin-top:5px; }
.side-item.active, .side-item:hover { background:var(--panel2); color:#fff; }
.security-card { margin-top:auto; background:linear-gradient(135deg,#101a2c,#111326); border:1px solid var(--line); border-radius:16px; padding:14px; display:grid; grid-template-columns:35px 1fr; gap:3px 9px; }
.shield { font-size:25px; grid-row:span 2; }
.security-card b { font-size:12px; }
.security-card p { margin:3px 0 8px; color:var(--muted); font-size:10px; }
.security-card button { grid-column:2; border:0; background:#1b2741; border-radius:8px; padding:7px; font-size:11px; }
.sidebar-bottom { color:#586278; font-size:10px; display:flex; justify-content:space-between; margin-top:18px; }
.main { flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar { height:70px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:flex-end; gap:15px; padding:0 30px; }
.status { color:#aeb8ca; font-size:12px; }
.dot { display:inline-block; width:7px; height:7px; background:#47e6a5; border-radius:50%; margin-right:6px; box-shadow:0 0 10px #47e6a5; }
.icon-btn, .round-btn { border:1px solid var(--line); background:var(--panel2); border-radius:12px; width:42px; height:42px; }
.chat { flex:1; overflow:auto; padding:40px 8%; }
.welcome { text-align:center; max-width:720px; margin:4vh auto 0; }
.robot-wrap { display:flex; justify-content:center; margin-bottom:22px; }
.robot { width:115px; height:115px; border-radius:35px; background:linear-gradient(145deg,#202b48,#111827); border:1px solid #7180c777; box-shadow:0 0 55px #5f55ff33, inset 0 0 25px #fff1; position:relative; animation:float 3s ease-in-out infinite; }
.antenna { position:absolute; width:4px; height:18px; background:#8792ff; left:55px; top:-17px; border-radius:5px; }
.antenna:after { content:""; position:absolute; width:9px; height:9px; background:#5ce5ff; border-radius:50%; left:-2px; top:-7px; box-shadow:0 0 15px #5ce5ff; }
.robot-face { position:absolute; left:20px; right:20px; top:36px; height:36px; border-radius:15px; background:#080c16; display:flex; align-items:center; justify-content:space-evenly; }
.eye { width:13px; height:13px; border-radius:50%; background:#68e7ff; box-shadow:0 0 14px #68e7ff; }
.robot-mouth { position:absolute; width:28px; height:7px; border-bottom:3px solid #9d8cff; left:43px; top:82px; border-radius:50%; }
@keyframes float { 50% { transform:translateY(-8px); } }
h1 { font-size:clamp(30px,5vw,58px); margin:0 0 10px; letter-spacing:-2px; }
h1 span { background:linear-gradient(90deg,#9c8cff,#50ddff); -webkit-background-clip:text; color:transparent; }
.welcome p { color:var(--muted); font-size:16px; }
.quick-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:28px; }
.quick-actions button { background:#111827; border:1px solid var(--line); border-radius:12px; padding:11px 15px; color:#c6cede; }
.quick-actions button:hover { border-color:#7165ff; transform:translateY(-1px); }
.message { max-width:800px; margin:0 auto 18px; display:flex; gap:12px; }
.message.user { justify-content:flex-end; }
.bubble { padding:13px 16px; border-radius:17px; line-height:1.55; white-space:pre-wrap; }
.message.assistant .bubble { background:#111827; border:1px solid var(--line); }
.message.user .bubble { background:linear-gradient(135deg,#5c4ad8,#317f9d); }
.avatar { width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:#1b2340; flex:0 0 auto; }
.composer { margin:0 auto 8px; width:min(850px,90%); display:flex; gap:10px; padding:9px; background:#101624; border:1px solid var(--line); border-radius:17px; }
.composer input { flex:1; min-width:0; border:0; outline:0; background:transparent; color:#fff; padding:0 8px; font-size:15px; }
.send-btn { border:0; width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg,#7661ff,#36bddd); font-size:20px; }
.disclaimer { text-align:center; color:#59647a; font-size:10px; margin:0 15px 13px; }
.typing { display:none; width:min(850px,90%); margin:0 auto 10px; color:#8f9bb1; font-size:12px; }
.typing.show { display:block; }
.typing span { display:inline-block; width:5px; height:5px; background:#8793ff; border-radius:50%; margin-right:3px; animation:blink 1s infinite; }
.typing span:nth-child(2){animation-delay:.15s}.typing span:nth-child(3){animation-delay:.3s}
@keyframes blink { 50% { opacity:.2; } }
dialog { border:0; border-radius:20px; background:#111827; color:#fff; padding:0; width:min(440px,90vw); box-shadow:0 25px 80px #0009; }
dialog::backdrop { background:#0009; backdrop-filter:blur(5px); }
.modal { padding:28px; position:relative; }
.modal h2 { margin-top:0; }
.modal label { display:block; font-size:12px; color:#a4afc2; margin:17px 0 7px; }
.modal input, .modal select { width:100%; padding:12px; border-radius:10px; border:1px solid var(--line); background:#080c15; color:#fff; }
.close { position:absolute; right:15px; top:12px; border:0; background:transparent; font-size:25px; color:#9da7ba; }
.save { margin-top:22px; width:100%; padding:12px; border:0; border-radius:10px; background:linear-gradient(135deg,#7661ff,#36bddd); font-weight:700; }
.security-result { background:#0b111e; border:1px solid var(--line); border-radius:15px; padding:18px; }
.check-icon { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:#163c37; color:#55e2a8; font-size:22px; }
.security-result p, .security-result li { color:#a8b2c3; font-size:13px; line-height:1.6; }
@media (max-width:750px) {
  .sidebar { display:none; }
  .topbar { padding:0 16px; }
  .chat { padding:28px 14px; }
  .quick-actions button { font-size:12px; }
}