@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap');

/* ============ Theme Variables ============ */
:root{
  --bg:#ffffff;
  --bg2:#f8f9fb;
  --bg3:#f3f4f6;
  --bg4:#eef0f4;
  --bdr:#e5e7eb;
  --bdr2:#d1d5db;
  --txt:#111827;
  --txt2:#4b5563;
  --txt3:#9ca3af;
  --ac:#2563eb;
  --ac2:#3b82f6;
  --ac3:#dbeafe;
  --purple:#8b5cf6;
  --pink:#ec4899;
  --orange:#f97316;
  --green:#10b981;
  --red:#ef4444;
  --shadow:0 1px 3px rgba(0,0,0,0.06);
  --shadow2:0 4px 20px rgba(0,0,0,0.06);
  --shadow3:0 8px 30px rgba(0,0,0,0.10);
  --radius-sm:10px;
  --radius:14px;
  --radius-lg:18px;
}

[data-theme="dark"]{
  --bg:#0b0f19;
  --bg2:#111827;
  --bg3:#1f2937;
  --bg4:#182033;
  --bdr:#1f2937;
  --bdr2:#374151;
  --txt:#f3f4f6;
  --txt2:#d1d5db;
  --txt3:#6b7280;
  --ac:#3b82f6;
  --ac2:#60a5fa;
  --ac3:rgba(59,130,246,0.15);
  --shadow:0 1px 3px rgba(0,0,0,0.3);
  --shadow2:0 4px 20px rgba(0,0,0,0.35);
  --shadow3:0 8px 30px rgba(0,0,0,0.45);
}

*{font-family:'Inter','Noto Sans SC',system-ui,-apple-system,sans-serif;box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg2);color:var(--txt);overflow:hidden}
#root{height:100vh}

::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bdr);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--bdr2)}

/* ============ Components ============ */
.glass{background:var(--bg);border:1px solid var(--bdr);border-radius:var(--radius);box-shadow:var(--shadow2);transition:all .2s}
.glass2{background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--radius-sm)}

.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;font-size:13px;font-weight:500;border:1px solid var(--bdr);background:var(--bg);cursor:pointer;transition:all .2s;white-space:nowrap;color:var(--txt2)}
.pill:hover{border-color:var(--bdr2);box-shadow:var(--shadow);color:var(--txt)}
.pill.active{background:var(--txt);color:#fff;border-color:var(--txt)}

.tag{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:500;background:var(--bg3);color:var(--txt2);border:1px solid var(--bdr)}

.btn-primary{background:var(--txt);color:#fff;border:none;border-radius:var(--radius-sm);padding:10px 20px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}
.btn-primary:hover{transform:translateY(-1px);box-shadow:var(--shadow3)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

.btn-secondary{background:var(--bg);color:var(--txt);border:1px solid var(--bdr);border-radius:var(--radius-sm);padding:10px 20px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}
.btn-secondary:hover{border-color:var(--bdr2);background:var(--bg2)}

.btn-ghost{background:transparent;color:var(--txt2);border:none;border-radius:10px;padding:8px 12px;font-size:13px;cursor:pointer;transition:all .2s}
.btn-ghost:hover{color:var(--txt);background:var(--bg3)}

.input{background:var(--bg);border:1px solid var(--bdr);border-radius:var(--radius-sm);padding:12px 14px;font-size:14px;outline:none;transition:all .2s;width:100%;color:var(--txt)}
.input:focus{border-color:var(--ac);box-shadow:0 0 0 3px rgba(37,99,235,0.1)}
.input::placeholder{color:var(--txt3)}
[data-theme="dark"] .input:focus{box-shadow:0 0 0 3px rgba(59,130,246,0.15)}

.card{background:var(--bg);border:1px solid var(--bdr);border-radius:var(--radius);padding:20px;transition:all .25s;cursor:pointer}
.card:hover{border-color:var(--bdr2);box-shadow:var(--shadow2);transform:translateY(-2px)}

.sidebar-item{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--radius-sm);cursor:pointer;transition:all .2s;color:var(--txt3);border:1px solid transparent;margin-bottom:6px;font-size:18px}
.sidebar-item:hover{color:var(--txt);background:var(--bg3)}
.sidebar-item.active{color:var(--ac);background:var(--ac3);border-color:rgba(37,99,235,0.15)}

/* ============ Animation ============ */
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}
@keyframes toastSlide{from{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(0)}}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(37,99,235,0.2)}50%{box-shadow:0 0 0 8px rgba(37,99,235,0)}}
@keyframes bounce{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}

.fade-in{animation:fadeIn .35s ease}
.slide-in{animation:slideIn .35s ease}

/* ============ Toast ============ */
.toast-container{position:fixed;top:16px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:8px}
.toast{animation:toastSlide .3s ease;background:var(--bg);border:1px solid var(--bdr);border-radius:var(--radius);padding:12px 16px;box-shadow:var(--shadow3);display:flex;align-items:center;gap:10px;min-width:260px;color:var(--txt)}

/* ============ Modal ============ */
.modal-overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,0.4);backdrop-filter:blur(6px)}
.modal-content{background:var(--bg);border-radius:var(--radius-lg);box-shadow:var(--shadow3);max-height:90vh;overflow:auto;width:100%;border:1px solid var(--bdr)}

/* ============ Dropdown ============ */
.dropdown{position:absolute;right:0;top:120%;background:var(--bg);border:1px solid var(--bdr);border-radius:var(--radius);box-shadow:var(--shadow3);min-width:220px;padding:8px;z-index:40;animation:fadeIn .2s ease}

/* ============ Progress ============ */
.progress{height:6px;border-radius:3px;background:var(--bg3);overflow:hidden}
.progress>div{height:100%;border-radius:3px;transition:width .5s ease}

/* ============ Model Option ============ */
.model-opt{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;cursor:pointer;transition:all .15s;font-size:14px;color:var(--txt)}
.model-opt:hover{background:var(--bg2)}
.model-opt.sel{background:var(--ac3)}

/* ============ Chat ============ */
.chat-user{background:var(--txt);color:#fff;border-radius:18px;border-bottom-right-radius:4px;padding:12px 16px;max-width:75%;font-size:14px;line-height:1.6}
.chat-ai{background:var(--bg2);color:var(--txt);border-radius:18px;border-bottom-left-radius:4px;padding:12px 16px;max-width:75%;font-size:14px;line-height:1.6;border:1px solid var(--bdr)}
.typing{display:flex;gap:4px;align-items:center;padding:12px 16px}
.typing span{width:7px;height:7px;border-radius:50%;background:var(--txt3);animation:bounce 1.4s infinite ease-in-out both}
.typing span:nth-child(1){animation-delay:-0.32s}
.typing span:nth-child(2){animation-delay:-0.16s}

/* ============ Table ============ */
table{border-collapse:collapse}
table th,table td{color:var(--txt)}
table thead tr{border-bottom:1px solid var(--bdr)}
table tbody tr{border-bottom:1px solid var(--bdr)}

/* ============ Theme Toggle ============ */
.theme-toggle{position:relative;width:44px;height:24px;border-radius:999px;background:var(--bg3);border:1px solid var(--bdr);cursor:pointer;transition:all .2s;display:flex;align-items:center;padding:2px}
.theme-toggle::after{content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:var(--txt);transition:transform .25s cubic-bezier(.4,0,.2,1);left:2px}
[data-theme="dark"] .theme-toggle::after{transform:translateX(20px)}
.theme-toggle i{position:absolute;font-size:9px;z-index:1;pointer-events:none;color:var(--txt3)}
.theme-toggle .fa-sun{left:6px}
.theme-toggle .fa-moon{right:6px}

/* ============ Misc ============ */
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.line-clamp-1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}

.empty-state{text-align:center;padding:60px 20px;color:var(--txt3)}
.empty-state i{font-size:48px;margin-bottom:16px;display:block;color:var(--bdr2)}

/* Scroll area subtle polish */
.h-full.overflow-y-auto,.flex-1.overflow-y-auto{scrollbar-width:thin;scrollbar-color:var(--bdr) transparent}

/* ============ Dark mode Tailwind overrides ============ */
[data-theme="dark"] .text-gray-400{color:var(--txt3)!important}
[data-theme="dark"] .text-gray-500{color:var(--txt2)!important}
[data-theme="dark"] .text-gray-600{color:var(--txt2)!important}
[data-theme="dark"] .text-gray-700{color:var(--txt)!important}
[data-theme="dark"] .text-gray-800{color:var(--txt)!important}
[data-theme="dark"] .bg-gray-50{background:var(--bg2)!important}
[data-theme="dark"] .bg-gray-100{background:var(--bg3)!important}
[data-theme="dark"] .bg-gray-200{background:var(--bg4)!important}
[data-theme="dark"] .border-gray-100{border-color:var(--bdr)!important}
[data-theme="dark"] .border-gray-200{border-color:var(--bdr2)!important}
[data-theme="dark"] .hover\:bg-gray-50:hover{background:var(--bg3)!important}
[data-theme="dark"] .hover\:border-gray-300:hover{border-color:var(--bdr2)!important}
[data-theme="dark"] .hover\:text-gray-600:hover{color:var(--txt)!important}
[data-theme="dark"] .focus\:border-gray-200:focus{border-color:var(--bdr2)!important}