/* core.css v2 — Redesign Modern Dark (2026-10-10) */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background:#070b12; color:#e8eef7; height:100vh; overflow:hidden; }
body { font-family: -apple-system, "Segoe UI", Roboto, "DejaVu Sans", Arial, sans-serif; display:flex; line-height:1.5; }
button { cursor:pointer; font-family:inherit; transition: all 0.2s; }
a { color:#fb923c; text-decoration:none; }
a:hover { text-decoration:underline; }
* { scrollbar-width: thin; scrollbar-color:#1c2530 #070b12; }
*::-webkit-scrollbar { width:6px; height:6px; }
*::-webkit-scrollbar-thumb { background:#1c2530; border-radius:4px; }

/* ── LOGIN PAGE ── */
body.login-wrap { align-items:center; justify-content:center; overflow:auto; }
#card { width:100%; max-width:380px; background:#0d121b; border:1px solid #1c2530; border-radius:20px; padding:32px 28px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.logo-row { display:flex; align-items:center; gap:14px; margin-bottom:24px; }
.logo-box { width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg,#fb923c,#f97316); display:flex; align-items:center; justify-content:center; }
#card input { width:100%; background:#0a0e14; border:1px solid #1f2a3a; border-radius:11px; padding:13px 15px; font-size:14.5px; color:#e8eef7; margin-bottom:12px; outline:none; }
#card input:focus { border-color:#3b82f6; }
#card button[type=submit] { width:100%; background:linear-gradient(135deg,#fb923c,#f97316); border:none; border-radius:11px; padding:13px; font-size:15px; font-weight:700; color:#fff; margin-top:4px; }
#card button[type=submit]:hover { transform:translateY(-1px); }
#msg, #s_msg { font-size:12.5px; color:#f87171; min-height:18px; margin:2px 0 8px; }
.font-bold { font-weight:700; } .text-xs { font-size:12px; } .text-slate-400 { color:#94a3b8; }
.hidden { display:none !important; }

#banner { position:fixed; top:0; left:0; right:0; z-index:99; padding:10px 24px; font-size:13px; font-weight:700; background:#7f1d1d; color:#fff; display:none; }

/* ── SIDEBAR ── */
aside { width:240px; background:#0d121b; border-right:1px solid #1c2530; display:flex; flex-direction:column; z-index:50; }
.brand { display:flex; align-items:center; gap:12px; padding:24px 20px; border-bottom:1px solid #182029; margin-bottom:8px; }
.brand .logo { width:38px; height:38px; border-radius:10px; background:linear-gradient(135deg,#fb923c,#f97316); display:flex; align-items:center; justify-content:center; font-weight:800; color:#0a0e14; }
.brand b { font-size:16px; }
.brand small { display:block; color:#64748b; font-size:11px; margin-top:-2px; }

aside nav { flex:1; padding:8px 12px; display:flex; flex-direction:column; gap:4px; }
.menu-item { display:flex; align-items:center; gap:12px; width:100%; padding:11px 12px; border-radius:10px; font-size:14.5px; border:none; background:transparent; color:#94a3b8; text-align:left; position:relative; }
.menu-item:hover { background:#131a24; color:#cbd5e1; }
.menu-active { background:#1a2332; color:#fff; font-weight:600; }
.menu-bar { position:absolute; left:-4px; top:50%; transform:translateY(-50%); height:20px; background:#f97316; border-radius:2px; display:none; }
.menu-active .menu-bar { display:block; }
.menu-label { flex:1; }
.menu-tag { font-size:10px; color:#475569; font-weight:400; }

.userbox { border-top:1px solid #182029; padding:12px 16px; display:flex; align-items:center; gap:10px; }
.userbox .ub-info { flex:1; min-width:0; display:flex; flex-direction:column; }
.userbox .ub-info b { font-size:13px; }
.userbox .ub-info small { font-size:10.5px; color:#5b6b82; display:flex; align-items:center; gap:5px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ub-dot { width:7px; height:7px; border-radius:50%; background:#22c55e; flex-shrink:0; }
.userbox .av { width:36px; height:36px; border-radius:50%; background:#2563eb; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; }
.userbox b { font-size:14px; display:block; }
.userbox small { color:#64748b; font-size:11px; display:block; }
.logout { margin-left:auto; font-size:11px; color:#f87171; border:none; background:transparent; padding:4px; }

/* ── MAIN ── */
main { flex:1; display:flex; flex-direction:column; background:#0a0e14; min-width:0; }
.view-container { flex:1; padding:14px 20px; overflow-y:auto; display:flex; flex-direction:column; }
.hidden { display:none !important; }

.head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid #141c28; }
.head h1 { font-size:15px; font-weight:700; color:#cbd5e1; letter-spacing:.2px; }
.head p { font-size:11.5px; color:#475569; margin-top:2px; }
.pill { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:#4ade80; }
.pill i { width:7px; height:7px; border-radius:50%; background:#22c55e; }
.head-actions { display:flex; align-items:center; gap:10px; }
/* (2026-10-12) tombol Clear Chat — hanya bersihkan tampilan (DOM) */
.btn-clear { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; color:#93a4bd; background:#131a24; border:1px solid #263143; border-radius:9px; padding:6px 11px; cursor:pointer; transition:all .15s; }
.btn-clear:hover { color:#f87171; border-color:#f87171; background:rgba(248,113,113,.08); }
.btn-clear:active { transform:translateY(1px); }

/* ── CHAT ── */
#view-chat { display:flex; flex-direction:column; height:100%; }
.chat-col { width:100%; max-width:100%; margin:0; display:flex; flex-direction:column; flex:1; min-height:0; }
#chatLog { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:14px; padding-right:6px; margin-bottom:12px; padding-top:4px; }
.msg { display:flex; flex-direction:column; max-width:70%; }
.msg-me { align-self:flex-end; }
.msg-bot { align-self:flex-start; width:100%; max-width:92%; }

/* ── THINKING DOTS (3 bulatan membulat naik-turun, hijau/oranye) ── */
.think { display:flex; align-items:center; gap:7px; padding:8px 2px; }
.t-dot { width:9px; height:9px; border-radius:50%; display:inline-block; animation:tpulse 1.1s infinite ease-in-out; }
.t-dot.d1 { background:#4ade80; }
.t-dot.d2 { background:#fb923c; animation-delay:.18s; }
.t-dot.d3 { background:#4ade80; animation-delay:.36s; }
@keyframes tpulse { 0%,80%,100% { transform:translateY(0); opacity:.3; } 40% { transform:translateY(-7px); opacity:1; } }
.t-lbl { font-size:12px; color:#7b8ba3; margin-left:4px; }

.who { font-size:11.5px; font-weight:700; margin-bottom:6px; display:flex; align-items:center; gap:8px; }
.msg-bot .who { color:#60a5fa; }
.who .time { font-weight:400; color:#475569; margin-left:auto; }

.bub { padding:14px 18px; border-radius:20px; font-size:14.5px; line-height:1.6; }
.msg-me .bub { background:linear-gradient(135deg,#fb923c,#f97316); color:#fff; border-bottom-right-radius:6px; }
.msg-bot .bub { background:#131a24; border:1px solid #1f2a3a; color:#dbe4f0; border-bottom-left-radius:6px; }

.card { background:#111827; border:1px solid #1f2a3a; border-radius:16px; padding:18px; }
.toolline { margin-top:10px; background:#0d1420; border:1px solid #1f2a3a; border-radius:10px; padding:8px 12px; font-size:12px; color:#93a4bd; font-family:monospace; line-height:1.5; }
.toolline b { color:#fb923c; font-family:inherit; }

.composer { border:1px solid #1f2a3a; background:#0e1520; border-radius:14px; padding:6px 8px; flex-shrink:0; }
.composer textarea { width:100%; background:transparent; border:none; color:#e8eef7; font-size:14px; resize:none; outline:none; padding:5px 8px; line-height:1.4; min-height:18px; max-height:96px; overflow-y:auto; display:block; }
.comp-bar { display:flex; align-items:center; gap:8px; margin-top:4px; padding:0 2px; }
.btn-icon { background:#111827; border:1px solid #1f2a3a; padding:8px 12px; border-radius:10px; font-size:12px; color:#93a4bd; display:flex; align-items:center; gap:8px; }
.btn-icon:hover { border-color:#334155; color:#cbd5e1; }
/* (RANC-VSA-VOICE-20261014) tombol BICARA nyala = merah berkedip pelan */
.btn-icon.on { border-color:#dc2626; color:#fca5a5; background:#2a1215; animation:vpulse 1.1s ease-in-out infinite; }
.btn-icon.on svg { stroke:#f87171; }
@keyframes vpulse { 0%,100% { box-shadow:0 0 0 0 rgba(220,38,38,.25); } 50% { box-shadow:0 0 0 5px rgba(220,38,38,.08); } }
select.ctx { background:#111827; color:#cbd5e1; border:1px solid #1f2a3a; border-radius:10px; font-size:12px; padding:8px 12px; outline:none; }

/* ══════════════════════════════════════════════════════════════
   (FIX-RESPONSIVE 2026-10-14) tampilan HP — sidebar jadi drawer
   off-canvas + tombol hamburger. Di desktop TIDAK BERUBAH.
   ══════════════════════════════════════════════════════════════ */
#btnNav { display:none; }
#navBackdrop { display:none; }

@media (max-width: 860px) {
  /* sidebar tersembunyi di kiri (drawer) */
  aside { position:fixed; top:0; left:-280px; width:272px; height:100vh; height:100dvh; z-index:200; transition:left .25s ease; box-shadow:8px 0 40px rgba(0,0,0,.6); }
  body.nav-open aside { left:0; }
  /* backdrop gelap saat drawer terbuka */
  body.nav-open #navBackdrop { display:block; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:150; }
  /* main jadi penuh */
  main { width:100%; }
  /* tombol hamburger floating kiri-atas (hanya di index.html — login.html file terpisah, tidak ada tombol ini) */
  #btnNav { display:flex; position:fixed; top:10px; left:10px; z-index:180; width:42px; height:42px; align-items:center; justify-content:center; border:1px solid #1f2a3a; border-radius:12px; background:rgba(10,14,20,.92); color:#93a4bd; backdrop-filter:blur(6px); box-shadow:0 4px 16px rgba(0,0,0,.4); }
  #btnNav:active { border-color:#334155; color:#cbd5e1; }
  /* beri ruang atas pada view agar tidak tertutup tombol hamburger */
  .view-container { padding-top:56px; }
  .head h1 { font-size:15px; }
  .pill { font-size:11px !important; padding:4px 9px !important; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* pesan chat lebih lebar agar nyaman dibaca di HP */
  .msg { max-width:86%; }
  .msg-bot { max-width:94%; }
  /* input composer: pastikan tidak meluber */
  #chatInput { font-size:16px; } /* 16px cegah zoom auto iOS saat fokus */
  .comp-bar { flex-wrap:wrap; }
  /* login: card penuh dengan padding aman */
  body.login-wrap { padding:16px; }
  #card { max-width:100%; padding:24px 18px; border-radius:16px; }
  .logo-row { gap:10px; margin-bottom:18px; }
  .logo-box { width:38px; height:38px; }
  #card input { font-size:16px; } /* cegah zoom iOS */
  #card button[type=submit] { font-size:14px; padding:12px; }
  /* tombol keluar di userbox tetap bisa ditekan (target cukup besar) */
  .userbox .logout { min-width:44px; }
  /* arsip/folder: list penuh lebar */
  .arsip-list { max-width:100%; }
}
@media (max-width: 480px) {
  .head h1 { font-size:14px; }
  .pill { display:none; } /* di layar sangat kecil sembunyikan pill, header lebih lega */
  .btn-clear span { display:none; } /* ikon saja */
}
.btn-send { margin-left:auto; width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg,#fb923c,#f97316); border:none; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(249,115,22,0.2); }
.btn-send:hover { transform: translateY(-1px); box-shadow:0 6px 16px rgba(249,115,22,0.3); }

.hints { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.q-hint { font-size:11.5px; color:#64748b; background:transparent; border:1px solid #1c2530; border-radius:999px; padding:6px 14px; cursor:pointer; }
.q-hint:hover { border-color:#334155; color:#94a3b8; }

/* ── TOOLS GRID ── */
.tools-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap:16px; }
.tool-card { background:#111827; border:1px solid #1f2a3a; border-radius:18px; padding:20px; transition:0.2s; }
.tool-card:hover { border-color:#2563eb; transform:translateY(-2px); }
.tool-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:16px; }
.tool-card b { font-size:16px; color:#fff; display:block; }
.tool-card p { font-size:12.5px; color:#64748b; margin-top:4px; }
.tool-card .run { margin-top:16px; font-size:12px; color:#3b82f6; font-weight:700; display:flex; align-items:center; gap:6px; }

/* ── ARSIP (Library + History) ── */
.tabs { display:flex; gap:10px; margin-bottom:20px; border-bottom:1px solid #1c2530; padding-bottom:1px; }
.tab { font-size:13px; font-weight:600; padding:10px 16px; border:none; background:transparent; color:#64748b; position:relative; }
.tab-on { color:#fb923c; }
.tab-on::after { content:""; position:absolute; bottom:-1px; left:0; right:0; height:2px; background:#fb923c; }
.arsip-list { display:flex; flex-direction:column; gap:10px; max-width:900px; }
.row { display:flex; align-items:center; gap:16px; background:#111827; border:1px solid #1f2a3a; border-radius:14px; padding:14px 18px; }
.file-icon { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; flex-shrink:0; }
.row-info { flex:1; min-width:0; }
.row-info b { font-size:14.5px; color:#fff; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row-info p { font-size:12px; color:#64748b; margin-top:2px; }
.status-pill { font-size:10.5px; font-weight:800; padding:4px 10px; border-radius:999px; text-transform:uppercase; letter-spacing:0.5px; }
.st-done { background:rgba(34,197,94,0.1); color:#4ade80; }
.st-error { background:rgba(239,68,68,0.1); color:#f87171; }
.btn-dl { font-size:12px; font-weight:700; color:#fff; background:linear-gradient(135deg,#fb923c,#f97316); padding:8px 16px; border-radius:10px; text-decoration:none; }

/* ── FOLDER SAYA (fix 2026-10-11: hiarki rapi, garis, ikon tipe) ── */
.tree { display:flex; flex-direction:column; gap:10px; }
.fm-bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:4px; }
.fm-btn { font-size:12.5px; font-weight:700; color:#e2e8f0; background:#1a2332; border:1px solid #263349; border-radius:9px; padding:7px 13px; cursor:pointer; }
.fm-btn:hover { background:#223047; }
.fm-hint { font-size:11px; color:#475569; }
.fm-tree { display:flex; flex-direction:column; gap:2px; }
.fold-row { display:flex; align-items:center; gap:8px; font-size:14px; padding:6px 10px; border-radius:9px; color:#cbd5e1; cursor:default; }
.fold-row:hover { background:#111827; }
.fold-row .fm-ic { width:19px; height:19px; flex-shrink:0; }
.fold-row .fm-indent { font-family:ui-monospace,monospace; font-size:12.5px; color:#334155; white-space:pre; letter-spacing:-1px; flex-shrink:0; }
.fold-row b { font-size:14px; }
.fold-row small { color:#64748b; font-size:11.5px; margin-left:auto; margin-right:6px; white-space:nowrap; }
.fold-row .fm-open { font-size:11.5px; font-weight:700; color:#fb923c; text-decoration:none; margin-left:8px; }
.fold-row .fm-open:hover { text-decoration:underline; }
.fm-dirname { cursor:pointer; }
.fm-caret { display:inline-block; width:12px; color:#64748b; font-size:11px; }
.fm-acts { display:flex; gap:4px; opacity:0; transition:opacity .15s; margin-left:6px; }
.fold-row:hover .fm-acts { opacity:1; }
.fm-x { font-size:11px; width:22px; height:22px; border-radius:6px; border:1px solid #263349; background:#141c2b; color:#94a3b8; cursor:pointer; line-height:1; }
.fm-x:hover { background:#1e293b; color:#e2e8f0; }
.fm-x-del:hover { background:#3f1d1d; color:#f87171; border-color:#5b2525; }

/* ── PANEL OTAK / SELF-IMPROVE (fix 2026-10-11b) ──
   RAPI RADIKAL: default TERLIPAT = 1 baris tipis (tak makan ruang sidebar).
   Klik baris → buka detail (analisis terakhir). */
.si-panel { padding:4px 10px 6px; border-top:1px solid #141c28; }
.si-panel .si-head { display:flex; align-items:center; gap:7px; font-size:11.5px; color:#94a3b8; padding:4px 4px; cursor:pointer; border-radius:7px; user-select:none; }
.si-panel .si-head:hover { background:#131a24; }
.si-panel .si-head b { color:#a78bfa; font-size:11px; letter-spacing:.5px; font-weight:800; }
.si-panel .si-on { font-size:10px; color:#4ade80; background:rgba(34,197,94,.1); padding:1px 6px; border-radius:999px; }
.si-panel .si-off { font-size:10px; color:#64748b; background:rgba(100,116,139,.08); padding:1px 6px; border-radius:999px; }
.si-panel .si-caret { margin-left:auto; color:#475569; font-size:10px; }
.si-panel .si-body { display:none; padding:4px 2px 2px; flex-direction:column; gap:4px; }
.si-panel.open .si-body { display:flex; }
.si-note { font-size:11px; color:#64748b; line-height:1.35; padding:3px 8px; background:#0d1420; border-radius:7px; border-left:2px solid #312e81; }
/* badge memori di baris ruang */
.space-mem { font-size:10px; color:#a78bfa; background:rgba(167,139,250,.1); padding:1px 6px; border-radius:999px; margin-left:6px; font-weight:700; }
/* chip memori di bawah balasan */
.st-mem { margin-top:10px; padding:8px 10px; background:rgba(167,139,250,.06); border:1px solid rgba(167,139,250,.18); border-radius:10px; }
.st-mem-label { font-size:11px; color:#a78bfa; font-weight:700; margin-bottom:5px; }
.st-mem-rows { display:flex; flex-wrap:wrap; gap:5px; }
.mem-chip { font-size:11px; color:#cbd5e1; background:#1e1b4b; border:1px solid #3730a3; padding:2px 8px; border-radius:999px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── FOOTER (Info Bar) ── */
footer { border-top:1px solid #141c28; padding:9px 20px; display:flex; align-items:center; gap:20px; background:#0c1119; }
.foot-info { font-size:13px; color:#94a3b8; display:flex; align-items:center; gap:12px; }
.foot-dot { width:8px; height:8px; border-radius:50%; }
.foot-stats { margin-left:auto; display:flex; gap:20px; text-align:right; }
.foot-stats div { font-size:12px; color:#64748b; }
.foot-stats b { color:#4ade80; display:block; font-size:13px; }

/* ── BRAIN PROGRESS ── */
.brain-bar-wrap { height:6px; background:#0d1420; border-radius:3px; overflow:hidden; margin:12px 0 4px; }
.brain-bar { height:100%; background:linear-gradient(to right, #3b82f6, #2563eb); border-radius:3px; transition:width 0.4s ease; }
.brain-pct { font-size:11px; font-weight:800; color:#60a5fa; text-align:right; }

/* ── UPLOAD PREVIEW ── */
#uploadPreview { display:none; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.pre-img { width:64px; height:64px; border-radius:8px; object-fit:cover; border:1px solid #2b3a4e; position:relative; }
.pre-img button, .pre-doc button { position:absolute; top:-6px; right:-6px; width:18px; height:18px; border-radius:50%; background:#ef4444; border:none; color:#fff; font-size:12px; display:flex; align-items:center; justify-content:center; }
.pre-doc { width:auto; min-width:150px; max-width:220px; height:64px; border-radius:8px; background:#131a24; border:1px solid #2b3a4e; display:flex; align-items:center; gap:10px; padding:8px 12px; }
.pre-doc-name { font-size:11.5px; color:#cbd5e1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ══ (RANC-20261011 r5) RUANG BELAJAR & KURSUS — sidebar ══ */
.space-zones { padding:8px 12px; display:flex; flex-direction:column; gap:10px; border-top:1px solid #182029; max-height:44%; overflow-y:auto; }
.space-zones::-webkit-scrollbar { width:5px; } .space-zones::-webkit-scrollbar-thumb { background:#232d3b; border-radius:4px; }
.zone-head { font-size:10px; letter-spacing:1.6px; color:#64748b; font-weight:800; padding:2px 4px 6px; }
.space-list { display:flex; flex-direction:column; gap:3px; }
.space-item { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:9px; font-size:13px; color:#94a3b8; cursor:pointer; border:1px solid transparent; }
.space-item:hover { background:#131a24; color:#cbd5e1; }
.space-active { background:rgba(251,146,60,.10); border-color:rgba(251,146,60,.35); color:#fdba74; }
.space-ic { font-size:14px; flex-shrink:0; }
.space-name { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; }
.space-del { opacity:0; font-size:10px; color:#f87171; border:none; background:transparent; cursor:pointer; padding:2px 4px; border-radius:6px; }
.space-item:hover .space-del { opacity:.8; }
.space-del:hover { background:rgba(248,113,113,.15); }
.space-new { margin-top:4px; width:100%; font-size:12px; font-weight:700; padding:7px; border-radius:9px; border:1px dashed #2b3a4e; background:transparent; color:#64748b; cursor:pointer; }
.space-new:hover { border-color:#fb923c; color:#fdba74; }
.space-empty { font-size:11.5px; color:#475569; padding:4px 6px; }
/* baris indikator ruang (di atas kolom ketik — tipis, TAMPILAN SAJA) */
.spacebar { padding:6px 8px; margin:0 0 6px; background:#0c1119; border:1px solid #1d2735; border-radius:10px; }
.sb-row { display:flex; align-items:center; gap:8px; }
.sb-ic { font-size:14px; }
.sb-note { font-size:11px; color:#475569; flex:1; }
.sb-exit { border:none; background:transparent; color:#475569; font-size:12px; cursor:pointer; padding:2px 7px; border-radius:7px; }
.sb-exit:hover { background:#1a2330; color:#f87171; }
.sb-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#232d3b; margin:0 2px; }
.sb-dot.sb-done { background:#22c55e; }
.sb-dot.sb-cur { background:#fb923c; box-shadow:0 0 6px rgba(251,146,60,.6); }
/* sambutan di atas riwayat ruang */
.space-welcome { display:flex; gap:12px; align-items:center; margin:14px 0; padding:12px 14px; background:#0c1119; border:1px solid #1d2735; border-radius:12px; }
.space-welcome b { font-size:15px; color:#fdba74; display:block; }
.space-welcome small { font-size:12px; color:#64748b; }
.sw-ic { width:40px; height:40px; border-radius:50%; background:rgba(251,146,60,.12); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
/* modal buat ruang */
.modal { position:fixed; inset:0; background:rgba(0,0,0,.66); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; z-index:99; padding:18px; }
.modal-card { width:100%; max-width:460px; background:#0e141d; border:1px solid #263143; border-radius:16px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.modal-head { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid #1d2735; font-size:15px; color:#fdba74; }
.modal-x { border:none; background:transparent; color:#64748b; font-size:14px; cursor:pointer; padding:4px 8px; border-radius:8px; }
.modal-x:hover { background:#1a2330; color:#f87171; }
.modal-body { padding:16px 18px; max-height:60vh; overflow-y:auto; }
.modal-foot { display:flex; justify-content:flex-end; gap:8px; padding:12px 18px; border-top:1px solid #1d2735; }
.btn-primary { border:none; border-radius:10px; padding:9px 18px; font-size:13px; font-weight:700; color:#fff; background:linear-gradient(135deg,#fb923c,#f97316); cursor:pointer; }
.btn-primary:disabled { opacity:.5; cursor:default; }
.btn-ghost { border:1px solid #2b3a4e; border-radius:10px; padding:9px 16px; font-size:13px; font-weight:700; color:#94a3b8; background:transparent; cursor:pointer; }
.btn-ghost:hover { border-color:#475569; }
.fld-label { display:block; font-size:11.5px; font-weight:700; letter-spacing:.4px; color:#94a3b8; margin:12px 0 6px; }
.fld { width:100%; box-sizing:border-box; background:#0a0e14; border:1px solid #263143; border-radius:10px; padding:10px 12px; font-size:14px; color:#dbe4f0; }
.fld:focus { outline:none; border-color:#fb923c; }
.sm-folders { display:flex; flex-direction:column; gap:6px; }
.sm-fold { display:flex; align-items:center; gap:9px; background:#0a0e14; border:1px solid #1d2735; border-radius:10px; padding:9px 12px; font-size:13.5px; cursor:pointer; color:#cbd5e1; }
.sm-fold:hover { border-color:#fb923c; }
.sm-fold input { accent-color:#fb923c; width:15px; height:15px; }
.sm-fold small { color:#64748b; font-size:11px; margin-left:auto; }
/* ══ (r5) Folder Saya — kelola penuh ══ */
.fm-bar { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.fm-btn { border:1px solid rgba(251,146,60,.4); background:rgba(251,146,60,.08); color:#fdba74; border-radius:10px; padding:8px 14px; font-size:12.5px; font-weight:700; cursor:pointer; }
.fm-btn:hover { background:rgba(251,146,60,.16); }
.fm-hint { font-size:11px; color:#475569; }
.fm-acts { margin-left:auto; display:flex; gap:4px; }
.fm-x { border:1px solid #232d3b; background:#0c1119; color:#64748b; border-radius:7px; font-size:11px; padding:3px 8px; cursor:pointer; }
.fm-x:hover { border-color:#475569; color:#cbd5e1; }
.fm-x-del:hover { border-color:#f87171; color:#f87171; }
/* KaTeX di chat */
.chat-text .katex-display { overflow-x:auto; overflow-y:hidden; padding:4px 0; }
.chat-text .katex { font-size:1.05em; }
/* code block di chat */
.chat-text pre { background:#0a0e14; border:1px solid #2b3a4e; border-radius:10px; padding:10px 12px; overflow-x:auto; font-size:12.5px; line-height:1.5; margin:8px 0; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; white-space:pre; }
.chat-text pre code { background:transparent; padding:0; }
.chat-text code { background:#131a24; border:1px solid #2b3a4e; border-radius:6px; padding:1px 5px; font-size:12.5px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }