:root{--bg:#f6f7fb;--card:#fff;--muted:#6b7280;--text:#0f172a;--brand:#3b82f6;--success:#10b981;--danger:#ef4444;--warning:#f59e0b;--border:#e5e7eb;--radius:14px;--radius-lg:18px;--shadow-sm:0 2px 8px #0f172a0a;--shadow-md:0 4px 16px #0f172a14;--shadow-lg:0 8px 24px #0f172a1f;--shadow-xl:0 12px 32px #0f172a29;--transition-fast:.15s cubic-bezier(.4,0,.2,1);--transition-base:.25s cubic-bezier(.4,0,.2,1);--transition-slow:.4s cubic-bezier(.4,0,.2,1)}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{scroll-behavior:smooth;height:100%}body{color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Inter,Arial,sans-serif;line-height:1.6}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--bg);border-radius:10px}::-webkit-scrollbar-thumb{background:var(--muted);border:2px solid var(--bg);transition:background var(--transition-base);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:var(--text)}*{scrollbar-width:thin;scrollbar-color:var(--muted)var(--bg)}.container{max-width:1120px;margin:0 auto;padding:0 20px}.row{align-items:center;gap:12px;display:flex}.grow{flex:1}.gap{gap:12px}.stack{gap:12px;display:grid}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:all var(--transition-base);padding:18px}.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.card-elevated{box-shadow:var(--shadow-md)}.card-elevated:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}.badge{color:#4338ca;transition:all var(--transition-base);background:#eef2ff;border:1px solid #c7d2fe;border-radius:999px;align-items:center;gap:6px;padding:4px 10px;font-size:12px;font-weight:600;display:inline-flex}.badge:hover{background:#e0e7ff;transform:scale(1.05)}.input{border:2px solid var(--border);width:100%;transition:all var(--transition-base);background:var(--card);border-radius:12px;padding:12px 14px;font-family:inherit;font-size:14px}.input:focus{border-color:var(--brand);outline:none;transform:translateY(-1px);box-shadow:0 0 0 4px #3b82f61a}.input:disabled{background:var(--bg);cursor:not-allowed;opacity:.6}.btn{border:1px solid var(--border);cursor:pointer;transition:all var(--transition-base);background:#f3f4f6;border-radius:12px;align-items:center;gap:8px;padding:10px 16px;font-family:inherit;font-size:14px;font-weight:500;display:inline-flex;position:relative;overflow:hidden}.btn:before{content:"";background:#ffffff4d;border-radius:50%;width:0;height:0;transition:width .6s,height .6s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.btn:active:before{width:300px;height:300px}.btn:hover{box-shadow:var(--shadow-sm);background:#e5e7eb;transform:translateY(-2px)}.btn:active{transform:translateY(0)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 4px 12px #3b82f64d}.btn.primary:hover{background:#2563eb;transform:translateY(-2px)scale(1.02);box-shadow:0 6px 16px #3b82f666}.btn.success{background:var(--success);border-color:var(--success);color:#fff;box-shadow:0 4px 12px #10b9814d}.btn.success:hover{background:#059669;box-shadow:0 6px 16px #10b98166}.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff;box-shadow:0 4px 12px #ef44444d}.btn.danger:hover{background:#dc2626;box-shadow:0 6px 16px #ef444466}.chat-list{gap:16px;max-height:65vh;padding:4px;display:grid;overflow:hidden auto}.bubble{border-radius:var(--radius-lg);max-width:92%;box-shadow:var(--shadow-sm);transition:all var(--transition-base);padding:14px 18px;animation:.4s cubic-bezier(.4,0,.2,1) messageSlideIn}.bubble.me{background:var(--brand);color:#fff;border-radius:18px 18px 4px;margin-left:auto;box-shadow:0 4px 12px #3b82f633}.bubble.you{background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow-sm);border-radius:18px 18px 18px 4px}.bubble.you:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.table{border-collapse:collapse;width:100%;min-width:640px;font-size:14px}.table th,.table td{border-bottom:1px solid var(--border);text-align:left;transition:background var(--transition-fast);padding:12px 14px}.table th{background:var(--bg);color:var(--text);z-index:10;font-weight:600;position:sticky;top:0}.table tbody tr{transition:all var(--transition-fast)}.table tbody tr:hover{background:var(--bg);transform:scale(1.01)}.code{white-space:pre-wrap;word-break:break-word;color:#e5e7eb;box-shadow:var(--shadow-md);transition:all var(--transition-base);background:#0b1220;border-radius:12px;padding:14px 16px;font-family:Fira Code,Monaco,Courier New,monospace;font-size:13px;line-height:1.6}.code:hover{box-shadow:var(--shadow-lg);transform:translateY(-1px)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes messageSlideIn{0%{opacity:0;transform:translateY(20px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes slideInRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.animate-fade-in{animation:.4s ease-out fadeIn}.animate-slide-in{animation:.4s ease-out fadeSlideIn}.animate-scale-in{animation:.3s ease-out scaleIn}.animate-float{animation:3s ease-in-out infinite float}.skeleton{background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb 50%,#f3f4f6 75%) 0 0/1000px 100%;border-radius:8px;animation:2s infinite shimmer}.loading-dots{gap:6px;display:inline-flex}.loading-dots span{background:var(--brand);border-radius:50%;width:8px;height:8px;animation:1.4s ease-in-out infinite bounce}.loading-dots span:nth-child(2){animation-delay:.2s}.loading-dots span:nth-child(3){animation-delay:.4s}@media (max-width:768px){.container{padding:0 16px}.card{padding:14px}.bubble{max-width:95%}.table{font-size:12px}.table th,.table td{padding:8px 10px}}@media (max-width:480px){.btn{padding:8px 12px;font-size:13px}.input{padding:10px 12px;font-size:14px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}:focus-visible{outline:2px solid var(--brand);outline-offset:2px}@media (prefers-contrast:high){.card,.btn{border-width:2px}}