:root{--accent:#4F46E5;--accent-h:#4338CA;--a-light:#EEF2FF;--a-dim:#818CF8;--green:#10B981;--ease:cubic-bezier(.4,0,.2,1);}
[data-theme="light"]{--bg:#F9FAFB;--bg-2:#F3F4F6;--bg-3:#E5E7EB;--surface:#FFFFFF;--ink:#111827;--ink-2:#374151;--muted:#6B7280;--border:#E5E7EB;--shadow:0 4px 24px rgba(0,0,0,.07);--shadow-lg:0 16px 56px rgba(0,0,0,.13);}
[data-theme="dark"]{--bg:#09090B;--bg-2:#18181B;--bg-3:#27272A;--surface:#18181B;--ink:#FAFAFA;--ink-2:#A1A1AA;--muted:#71717A;--border:#27272A;--shadow:0 4px 24px rgba(0,0,0,.3);--shadow-lg:0 16px 56px rgba(0,0,0,.55);}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{background:var(--bg);color:var(--ink);font-family:'Inter', sans-serif;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
a{text-decoration:none;color:inherit;}
button{cursor:pointer;border:none;background:none;font-family:inherit;}
.container{width:100%;max-width:1080px;margin:0 auto;padding:0 48px;}
@media(max-width:768px){.container{padding:0 20px;}}

.tb{position:fixed;top:0;left:0;right:0;z-index:200;background:var(--ink);padding:10px 0;}
[data-theme="dark"] .tb{background:var(--bg-2);border-bottom:1px solid var(--border);}
.tb-i{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.tb-left{display:flex;align-items:center;gap:12px;}
.tb-mark{width:26px;height:26px;border-radius:5px;background:var(--accent);display:flex;align-items:center;justify-content:center;}
.tb-name{font-family:'Outfit', sans-serif;font-size:15px;color:#fff;}
[data-theme="dark"] .tb-name{color:var(--ink);}
.tb-name span{opacity:.5;}
.tb-sep{width:1px;height:16px;background:rgba(255,255,255,.2);}
[data-theme="dark"] .tb-sep{background:var(--border);}
.tb-label{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.4);}
[data-theme="dark"] .tb-label{color:var(--muted);}
.tb-badge{padding:3px 10px;background:rgba(16,185,129,.2);border-radius:100px;font-size:10px;font-weight:700;color:#34D399;letter-spacing:.08em;text-transform:uppercase;}
.tb-back{display:flex;align-items:center;gap:6px;padding:7px 13px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.7);border-radius:6px;font-size:12px;font-weight:600;transition:background .2s;}
[data-theme="dark"] .tb-back{background:var(--bg-3);color:var(--muted);}
.tb-back:hover{background:rgba(255,255,255,.2);color:#fff;}
.tb-back svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;}

/* LAYOUT */
.main-wrap{margin-top:50px;height:calc(100vh - 50px);display:grid;grid-template-columns:300px 1fr;}
@media(max-width:768px){.main-wrap{grid-template-columns:1fr;}}

/* SIDEBAR */
.chat-sidebar{background:var(--bg-2);border-right:1px solid var(--border);padding:24px 20px;display:flex;flex-direction:column;gap:16px;overflow-y:auto;}
@media(max-width:768px){.chat-sidebar{display:none;}}
.cs-title{font-family:'Outfit', sans-serif;font-size:18px;letter-spacing:-.3px;color:var(--ink);}
.cs-sub{font-size:12px;color:var(--muted);line-height:1.6;margin-top:4px;}
.cs-divider{height:1px;background:var(--border);margin:4px 0;}
.cs-label{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.cs-chips{display:flex;flex-direction:column;gap:4px;margin-top:6px;}
.cs-chip{padding:9px 13px;background:var(--surface);border:1px solid var(--border);border-radius:7px;font-size:12px;color:var(--ink-2);cursor:pointer;transition:all .15s;line-height:1.4;}
.cs-chip:hover{border-color:var(--accent);color:var(--accent);background:var(--a-light);}
[data-theme="dark"] .cs-chip:hover{background:rgba(79, 70, 229,.1);}
.cs-info{padding:12px 14px;background:rgba(79, 70, 229,.06);border-radius:8px;border-left:3px solid var(--accent);}
[data-theme="dark"] .cs-info{background:rgba(79, 70, 229,.1);}
.cs-info-t{font-size:11px;font-weight:700;color:var(--accent);margin-bottom:4px;}
.cs-info-d{font-size:11px;color:var(--muted);line-height:1.55;}

/* CHAT AREA */
.chat-area{display:flex;flex-direction:column;height:100%;background:var(--bg);}
.chat-header{padding:16px 24px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:14px;}
.ch-avatar{width:40px;height:40px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ch-avatar svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.ch-name{font-size:14px;font-weight:600;color:var(--ink);}
.ch-status{font-size:12px;color:var(--green);display:flex;align-items:center;gap:5px;}
.ch-dot{width:6px;height:6px;border-radius:50%;background:var(--green);}
.chat-msgs{flex:1;overflow-y:auto;padding:20px 24px;display:flex;flex-direction:column;gap:14px;}
@media(max-width:600px){.chat-msgs{padding:16px;}.chat-header{padding:12px 16px;}}
.msg{display:flex;gap:10px;max-width:85%;}
.msg.user{flex-direction:row-reverse;align-self:flex-end;}
.msg-av{width:30px;height:30px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;}
.bot-av{background:var(--accent);}
.bot-av svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;}
.user-av{background:var(--bg-3);color:var(--muted);}
.bubble{padding:12px 16px;border-radius:14px;font-size:13px;line-height:1.65;}
.bot-bubble{background:var(--surface);border:1px solid var(--border);color:var(--ink-2);border-radius:14px 14px 14px 2px;}
.user-bubble{background:var(--accent);color:#fff;border-radius:14px 14px 2px 14px;}
.msg-time{font-size:10px;color:var(--muted);margin-top:4px;text-align:right;}
.msg.user .msg-time{text-align:left;}
.typing-indicator{display:flex;gap:4px;padding:12px 16px;background:var(--surface);border:1px solid var(--border);border-radius:14px 14px 14px 2px;width:fit-content;}
.typing-dot{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:td .9s infinite;}
.typing-dot:nth-child(2){animation-delay:.15s;}
.typing-dot:nth-child(3){animation-delay:.3s;}
@keyframes td{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}
.chat-input-area{padding:16px 24px;background:var(--surface);border-top:1px solid var(--border);display:flex;gap:10px;}
@media(max-width:600px){.chat-input-area{padding:12px 16px;}}
.chat-input{flex:1;padding:11px 16px;background:var(--bg-2);border:1.5px solid var(--border);border-radius:10px;font-size:14px;font-family:'Inter', sans-serif;color:var(--ink);outline:none;transition:border-color .2s;}
.chat-input:focus{border-color:var(--accent);}
.chat-input::placeholder{color:var(--muted);}
.send-btn{width:42px;height:42px;border-radius:10px;background:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s,transform .15s;}
.send-btn:hover{background:var(--accent-h);transform:scale(1.05);}
.send-btn svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
/* --- GLOBAL DEMO UX OVERHAUL --- */
.tb {
  position: fixed !important;
  top: 16px !important; left: 50% !important; transform: translateX(-50%) !important;
  width: calc(100% - 32px) !important; max-width: 1000px !important;
  background: rgba(17,24,39,0.85) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 100px !important;
  padding: 12px 24px !important;
  box-shadow: 0 24px 48px rgba(0,0,0,0.3) !important;
  z-index: 9999 !important;
  transition: all 0.3s ease !important;
}
[data-theme="dark"] .tb {
  background: rgba(24,24,27,0.85) !important;
  border-color: rgba(255,255,255,0.05) !important;
}
.tb-left { gap: 16px !important; }
.tb-label { font-size: 13px !important; font-weight: 700 !important; color: #fff !important; }
.tb-badge { background: #10B981 !important; color: #fff !important; padding: 6px 14px !important; border-radius: 100px !important; font-size: 11px !important; font-weight: 700 !important; }
.tb-back {
  background: rgba(255,255,255,0.1) !important;
  border-radius: 100px !important;
  padding: 8px 18px !important;
  font-size: 13px !important; font-weight: 600 !important;
  color: #fff !important;
  transition: all 0.2s !important;
}
.tb-back:hover { background: #fff !important; color: #000 !important; transform: scale(1.05) !important; }
.main-wrap, .vp-wrap { margin-top: 80px !important; height: calc(100vh - 80px) !important; }
@media(max-width: 600px) {
  .tb { top: 12px !important; padding: 10px 16px !important; border-radius: 24px !important; width: calc(100% - 24px) !important; }
  .tb-label { display: none !important; }
}

/* CHATBOT UX OVERHAUL */
.chat-sidebar { background: var(--surface) !important; border-right: 1px solid var(--border) !important; padding: 32px 24px !important; }
.cs-title { font-size: 24px !important; font-weight: 700 !important; letter-spacing: -0.5px !important; }
.cs-chip { background: var(--bg) !important; border-radius: 100px !important; padding: 12px 16px !important; font-size: 13px !important; font-weight: 500 !important; border: 1px solid transparent !important; }
.cs-chip:hover { border-color: var(--accent) !important; background: var(--surface) !important; box-shadow: 0 4px 12px rgba(79,70,229,0.1) !important; transform: translateY(-2px) !important; }
.chat-header { padding: 20px 32px !important; background: rgba(255,255,255,0.8) !important; backdrop-filter: blur(10px) !important; border-bottom: 1px solid var(--border) !important; }
[data-theme="dark"] .chat-header { background: rgba(24,24,27,0.8) !important; }
.chat-msgs { padding: 32px !important; gap: 24px !important; }
.bubble { padding: 16px 20px !important; border-radius: 20px !important; font-size: 14px !important; box-shadow: 0 4px 16px rgba(0,0,0,0.03) !important; }
.bot-bubble { background: var(--surface) !important; border: 1px solid var(--border) !important; border-bottom-left-radius: 4px !important; }
.user-bubble { background: linear-gradient(135deg, var(--accent), var(--accent-h)) !important; border-bottom-right-radius: 4px !important; }
.chat-input-area { padding: 24px 32px !important; background: var(--surface) !important; border-top: 1px solid var(--border) !important; }
.chat-input { padding: 16px 24px !important; border-radius: 100px !important; background: var(--bg) !important; border: 1px solid var(--border) !important; font-size: 15px !important; }
.chat-input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 4px rgba(79,70,229,0.1) !important; }
.send-btn { width: 52px !important; height: 52px !important; border-radius: 50% !important; background: var(--accent) !important; }