:root{
  --bg:#0f1012; --panel:#17181c; --panel2:#1e1f24; --line:#2a2c33;
  --txt:#ececf1; --muted:#9a9ba4; --accent:#10a37f; --accent2:#0e8a6c;
  --user:#2a2b32; --chip:#232429; --warn:#e0a33a;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:'Segoe UI',system-ui,Roboto,Arial,sans-serif;background:var(--bg);color:var(--txt)}
#app{display:flex;height:100vh;overflow:hidden}

/* loading screen */
#loading{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:0 32px;text-align:center}
#loading-msg{color:var(--muted);font-size:14px}
.load-bar{width:min(280px,70vw);height:6px;border-radius:4px;background:var(--panel2);overflow:hidden}
#load-fill{height:100%;width:5%;background:var(--accent);border-radius:4px;transition:width .4s}

/* sidebar */
#sidebar{width:270px;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:14px;flex:none}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--accent),#1fbf96);display:flex;align-items:center;justify-content:center;font-weight:800;color:#04120d}
.brand-txt{font-size:15px}
.badge{margin-left:8px;font-size:10px;padding:2px 6px;border-radius:8px;background:rgba(16,163,127,.15);color:var(--accent);vertical-align:middle}
#new-chat{width:100%;padding:10px;border:1px solid var(--line);background:var(--panel2);color:var(--txt);border-radius:9px;cursor:pointer;font-size:14px;margin-bottom:16px}
#new-chat:active{background:#26272d}
.side-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:4px 4px 8px}
#agent-list{flex:1;overflow:auto}
.agent{display:flex;gap:10px;align-items:flex-start;padding:9px 10px;border-radius:9px;cursor:pointer;margin-bottom:3px}
.agent:active{background:var(--panel2)}
.agent.active{background:rgba(16,163,127,.12);outline:1px solid rgba(16,163,127,.35)}
.agent .ic{font-size:17px;line-height:1.3}
.agent .nm{font-size:13.5px;font-weight:600}
.agent .bl{font-size:11px;color:var(--muted);margin-top:2px;line-height:1.35}
.side-foot{border-top:1px solid var(--line);padding-top:10px;margin-top:8px}
#catalog-stat{font-size:12px;color:var(--accent);margin-bottom:6px}
.muted{color:var(--muted)}
#scrim{display:none}

/* main */
#main{flex:1;display:flex;flex-direction:column;min-width:0}
#topbar{height:52px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:0 14px;font-weight:600;color:var(--muted);font-size:14px;flex:none}
#menu-btn{display:none;background:none;border:none;color:var(--txt);font-size:20px;cursor:pointer;padding:6px 8px}
#chat{flex:1;overflow:auto;padding:24px 0;-webkit-overflow-scrolling:touch}
#messages{max-width:820px;margin:0 auto;padding:0 16px}

/* welcome */
#welcome{max-width:720px;margin:5vh auto 0;text-align:center;padding:0 20px}
.hero-logo{width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg,var(--accent),#1fbf96);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:26px;color:#04120d;margin:0 auto 16px}
#welcome h1{font-size:24px;margin:0 0 6px}
#examples{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}
.example{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:13px 15px;text-align:left;cursor:pointer;font-size:13.5px;color:var(--txt)}
.example:active{background:var(--panel2);border-color:#3a3d45}

/* messages */
.msg{display:flex;gap:12px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.03)}
.msg .av{width:30px;height:30px;border-radius:7px;flex:none;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.msg.user .av{background:var(--user);color:#cfd0d6}
.msg.bot .av{background:linear-gradient(135deg,var(--accent),#1fbf96);color:#04120d}
.msg .body{flex:1;min-width:0;padding-top:3px;line-height:1.55;font-size:15px}
.msg .who{font-size:11px;color:var(--muted);margin-bottom:5px}
.tag{display:inline-block;font-size:10.5px;padding:2px 8px;border-radius:8px;background:var(--chip);color:var(--muted);margin-left:6px}
.tag.ag{background:rgba(16,163,127,.14);color:var(--accent)}
.note{font-size:12.5px;color:var(--warn);margin-top:8px}

/* table */
.tbl-wrap{overflow:auto;margin-top:12px;border:1px solid var(--line);border-radius:10px;max-width:100%}
table{border-collapse:collapse;width:100%;font-size:12.5px}
th,td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
th{background:var(--panel2);color:#c9cad2;font-weight:600;position:sticky;top:0}
tr:last-child td{border-bottom:none}
td{color:#d6d7dd}

/* sql toggle */
.sql-tog{margin-top:10px;font-size:12px;color:var(--muted);cursor:pointer;user-select:none}
pre.sql{margin:8px 0 0;background:#0b0c0e;border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:12px;color:#8fd4bd;overflow:auto;white-space:pre-wrap}
code{background:var(--chip);padding:1px 5px;border-radius:5px;font-size:.9em}
.suggestions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{background:var(--chip);border:1px solid var(--line);border-radius:16px;padding:6px 12px;font-size:12.5px;cursor:pointer;color:var(--txt)}

/* composer */
#composer{border-top:1px solid var(--line);padding:12px 14px calc(10px + env(safe-area-inset-bottom))}
.composer-box{max-width:820px;margin:0 auto;display:flex;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:8px 8px 8px 16px;align-items:flex-end}
.composer-box:focus-within{border-color:#3a4048}
#input{flex:1;background:transparent;border:none;outline:none;color:var(--txt);font-size:15px;resize:none;max-height:180px;padding:6px 0;font-family:inherit}
#send{width:38px;height:38px;border:none;border-radius:10px;background:var(--accent);color:#04120d;font-size:16px;cursor:pointer;flex:none}
#send:disabled{opacity:.4}
.disclaimer{max-width:820px;margin:8px auto 0;text-align:center;font-size:11px;color:var(--muted)}

/* mobile: sidebar becomes a slide-in drawer */
@media(max-width:820px){
  #menu-btn{display:block}
  #sidebar{position:fixed;left:0;top:0;bottom:0;z-index:30;transform:translateX(-104%);transition:transform .22s ease;box-shadow:8px 0 30px rgba(0,0,0,.5)}
  #sidebar.open{transform:translateX(0)}
  #scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .22s;z-index:20}
  #scrim.show{opacity:1;pointer-events:auto}
  #examples{grid-template-columns:1fr}
}