/* LAB Chat Admin UI v2 */
:root{
  --bg:#0b1220;
  --panel:#0f1b30;
  --text:#e7eefc;
  --muted:#9bb0d1;
  --accent:#3b82f6;
  --danger:#ef4444;
  --border:#223353;
  --shadow:0 18px 44px rgba(0,0,0,.45);
  --radius:12px;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Arial;background:var(--bg);color:var(--text)}
a{color:var(--accent);text-decoration:none}
.app{display:flex;min-height:100vh}
.sidebar{
  width:260px;max-width:88vw;
  background:linear-gradient(180deg,#071126 0%, #070e1d 100%);
  border-right:1px solid var(--border);
  padding:14px;
  position:sticky;top:0;height:100vh;
}
.sb-brand{font-weight:900;font-size:16px;letter-spacing:.4px;margin-bottom:14px}
.sb-brand a{color:var(--text)}
.sb-user{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:10px;margin-bottom:12px}
.sb-name{font-weight:700}
.sb-role{color:var(--muted);font-size:12px;margin-top:4px}
.sb-nav{display:flex;flex-direction:column;gap:8px}
.nav-item{padding:10px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02);color:var(--text)}
.nav-item:hover{background:rgba(255,255,255,.06)}
.nav-item.danger{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.07)}
.sb-foot{margin-top:16px;color:var(--muted);font-size:12px}

.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{
  height:56px;display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;border-bottom:1px solid var(--border);
  background:rgba(9,19,39,.9);backdrop-filter: blur(6px);
  position:sticky;top:0;z-index:30;
}
.top-title{font-weight:800}
.chip{padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.10);color:var(--muted);font-size:12px}
.content{max-width:1200px;margin:16px auto;padding:0 12px;width:100%}

.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:14px;box-shadow:0 10px 22px rgba(0,0,0,.25)}
h1{margin:0 0 8px;font-size:20px}
h2{margin:0 0 10px;font-size:16px}
label{display:block;margin:10px 0 6px;color:var(--muted);font-size:13px}
input,select,button{
  width:100%;padding:10px;border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background:#071126;color:var(--text);outline:none;
}
button{background:var(--accent);border:none;cursor:pointer;font-weight:800}
button.danger{background:var(--danger)}
button.secondary{background:transparent;border:1px solid rgba(255,255,255,.14)}
button.secondary:hover{background:rgba(255,255,255,.06)}
.table{width:100%;border-collapse:collapse}
.table th,.table td{text-align:left;padding:10px;border-bottom:1px solid rgba(255,255,255,.08);vertical-align:top}
.td-actions{white-space:nowrap}
.muted{color:var(--muted);font-size:12px}
.flash{background:rgba(59,130,246,.10);border:1px solid rgba(59,130,246,.25);padding:10px;border-radius:var(--radius);margin-bottom:12px}
.row{display:flex;gap:10px;align-items:flex-end}
.row-between{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.grow{flex:1}
.btnlink{display:inline-block;padding:8px 10px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(255,255,255,.03);color:var(--text)}
.btnlink:hover{background:rgba(255,255,255,.06)}
.badge{padding:4px 8px;border-radius:999px;font-size:12px;border:1px solid rgba(255,255,255,.12);color:var(--muted)}
.badge.ok{border-color:rgba(34,197,94,.35);color:#b8f7cf}
.badge.warn{border-color:rgba(245,158,11,.35);color:#ffe0b0}
.badge.muted{border-color:rgba(255,255,255,.08);color:var(--muted)}
.code{white-space:pre-wrap;overflow:auto;background:#071126;border:1px solid rgba(255,255,255,.10);padding:10px;border-radius:var(--radius)}
.grid-2{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-2wide{display:grid;gap:14px;grid-template-columns:2fr 1fr}
.filters .col{min-width:160px}
.filters .end{min-width:140px}

.chatbox{height:60vh;overflow:auto;border:1px solid rgba(255,255,255,.10);border-radius:var(--radius);padding:10px;background:#071126}
.msg{padding:10px;border-radius:var(--radius);margin:8px 0;border:1px solid rgba(255,255,255,.10)}
.msg .meta{font-size:11px;color:var(--muted);margin-bottom:6px}
.msg.visitor{background:#071a2f}
.msg.agent{background:#0a2b1f}
.msg.bot{background:#2a1b0b}
.sendbar{display:flex;gap:10px;margin-top:10px}
.sendbar input{flex:1}
.sendbar button{width:auto;padding:10px 14px}

.auth-wrap{min-height:calc(100vh - 56px);display:flex;align-items:center;justify-content:center;padding:24px}
.auth-card{width:420px;max-width:92vw;background:linear-gradient(180deg,rgba(15,27,48,.95),rgba(7,17,38,.95));border:1px solid rgba(255,255,255,.10);border-radius:16px;box-shadow:var(--shadow);padding:18px}
.auth-logo{font-weight:900;font-size:22px}
.auth-sub{color:var(--muted);margin-top:6px;font-size:13px}
.auth-form{margin-top:14px}
.auth-foot{margin-top:14px}

@media(max-width:980px){
  .grid-2{grid-template-columns:1fr}
  .grid-2wide{grid-template-columns:1fr}
}
@media(max-width:640px){
  .row{flex-direction:column;align-items:stretch}
  .filters .col{min-width:0}
  .chatbox{height:55vh}
}