:root{
  --bg:#0b0f14; --panel:#121821; --text:#e7edf5; --muted:#94a3b8; --accent:#60a5fa; --good:#10b981; --warn:#f59e0b; --bad:#ef4444; --line:#1f2a37;
}
.light{
  --bg:#f6f8fb; --panel:#ffffff; --text:#0b0f14; --muted:#475569; --accent:#2563eb; --good:#059669; --warn:#b45309; --bad:#b91c1c; --line:#e5e7eb;
}

html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:14px/1.45 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
}

.app{ display:flex; flex-direction:column; height:100vh; }
.header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; background:var(--panel); border-bottom:1px solid var(--line);
}
.brand{font-weight:700; letter-spacing:.2px}
.hint{color:var(--muted); font-size:12px}

/* main should NOT be the scroll container */
.main{
  flex:1;
  padding:16px;
  overflow:hidden;      /* ✅ critical */
  min-height:0;         /* ✅ critical */
  display:flex;         /* ✅ helps children fill */
  flex-direction:column;
}

/* let the immediate child fill and manage its own scrolls */
.main > *{
  min-height:0;
}

.stage{
  flex: 1;
  display:grid; grid-template-columns: 1fr 1fr; gap:16px;
  height: calc(100vh - 110px);
  min-height:0;
}
@media (max-width:1100px){ .stage{ grid-template-columns:1fr; height:auto; } }

.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px;
  display:flex; flex-direction:column;
  min-height:0;
}
.panel > h3{ margin:4px 0 8px 0 }
.panelhead{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.sp{flex:1}

.scroll{ min-height:0; flex:1; overflow:auto; }

label{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;}
.input, textarea, .code{
  width:100%;
  box-sizing:border-box;
  background:transparent; border:1px solid var(--line);
  border-radius:10px; color:var(--text); padding:10px 12px;
  font:14px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
input.input{ height:42px }

input[disabled] { opacity: 0.6; cursor: not-allowed; }

.textarea-lg{
  min-height:47vh;
  max-height:80vh;
  resize:vertical; display:block;
}

.krow{
  display:grid; grid-template-columns: 260px 1fr; gap:10px; align-items:center;
}
@media (max-width:800px){ .krow{ grid-template-columns:1fr; } }

.field{display:flex; flex-direction:column; gap:8px; margin-bottom:10px}

.btn{
  border:1px solid var(--line); background:transparent; color:var(--text);
  padding:8px 12px; border-radius:10px; cursor:pointer
}
.btn:hover{border-color:var(--accent)}
.btn.primary{ background:var(--accent); color:#fff; border-color:var(--accent)}
.btn.good{ background:var(--good); color:#fff; border-color:var(--good)}
.btn.warn{ background:var(--warn); color:#fff; border-color:var(--warn)}
.btn.bad{  background:var(--bad);  color:#fff; border-color:var(--bad)}
.bar{display:flex; align-items:center; gap:8px}

.table{border:1px solid var(--line); border-radius:10px; overflow:hidden}
.table table{width:100%; border-collapse:collapse; font:12px ui-monospace,monospace}
.table th,.table td{border-bottom:1px solid var(--line); padding:8px 10px; text-align:left; vertical-align:top}

body.no-scroll{ overflow:hidden }

.overlay{
  position:fixed; inset:0; z-index:90;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  background:rgba(13,16,22,0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.max{
  width: min(1100px, 96vw);
  height: min(92vh, 1000px);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  display:flex; flex-direction:column;
  overflow:hidden;
}

.max .panelhead{ padding:14px 16px; border-bottom:1px solid var(--line); }
.max .content{ flex:1; min-height:0; overflow:auto; padding:16px; }
.max .textarea-lg{
  min-height: calc(92vh - 240px);
  max-height: calc(92vh - 180px);
}

.ok{color:var(--good)} .danger{color:var(--bad)}
.tag{ display:inline-block; padding:2px 8px; border-radius:999px; border:1px solid var(--line); color:var(--muted); font-size:12px }

* { scrollbar-width: thin; scrollbar-color: var(--line) var(--panel); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--panel); border-radius: 8px; }
::-webkit-scrollbar-thumb { background-color: var(--line); border-radius: 8px; border: 2px solid var(--panel); transition: background-color 0.2s; }
::-webkit-scrollbar-thumb:hover { background-color: var(--accent); }
::-webkit-scrollbar-corner { background: var(--panel); }

#btnTalk { border-color: var(--good); }
#btnHang { border-color: var(--bad); }

.vu-wrap { display:inline-flex; align-items:center; gap:8px; margin-left:12px; }
.vu-bar { width:140px; height:6px; border-radius:4px; background:var(--line); overflow:hidden; }
.vu-fill { height:100%; width:2%; background:var(--good); transition:width .06s linear; }
.lat-badge { font-size:12px; padding:2px 8px; border:1px solid var(--line); border-radius:999px; color:var(--muted); }

.modal-veil {
  position:fixed; inset:0; background:rgba(10,12,16,.45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center; z-index:120;
}
.modal {
  width:min(900px,96vw); height:min(82vh,900px);
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  display:flex; flex-direction:column; overflow:hidden;
}
.modal .head { display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--line); }
.modal .body { flex:1; overflow:auto; padding:12px 14px; }
.modal .foot { padding:10px 14px; border-top:1px solid var(--line); text-align:right; }
.msg { margin:6px 0; display:block; }
.msg.me { text-align:right; }
.msg .bubble {
  display:inline-block; padding:8px 10px; border-radius:12px;
  background:var(--line); color:var(--text);
  max-width: 85%;
}
.msg.me .bubble { background:rgba(96,165,250,.25); }
.streaming { border-right:2px solid var(--accent); animation: blink 1.2s steps(1,end) infinite; }
@keyframes blink { 50% { border-color: transparent; } }

.clients-table {
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.clients-table th, .clients-table td {
  border-bottom:1px solid var(--line);
  padding:6px 8px;
  text-align:left;
}
.clients-table tr:hover {
  background:rgba(148,163,184,0.08);
  cursor:pointer;
}

/* ========================= */
/* ✅ NEW: Login modal styles */
/* ========================= */
.login-veil{
  position:fixed;
  inset:0;
  z-index:200; /* above everything */
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(10,12,16,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.login-card{
  width:min(520px, 96vw);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  box-shadow: 0 20px 80px rgba(0,0,0,.35);
}
.login-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
}
.login-title{
  font-weight:800;
  letter-spacing:.2px;
  font-size:16px;
}
.login-body{
  padding:16px;
}
.login-note{
  margin-top:14px;
  padding:10px 12px;
  border:1px dashed var(--line);
  border-radius:12px;
}

/* ================================ */
/* ✅ NEW: User dropdown styles      */
/* ================================ */
.userdd{ position:relative; }
.userdd .caret{ margin-left:6px; opacity:.7; }
.userdd .menu{
  position:absolute;
  right:0;
  top: calc(100% + 8px);
  width: 260px;
  background: var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  box-shadow: 0 16px 50px rgba(0,0,0,.35);
  z-index: 80;
}
.userdd .menuitem{
  width:100%;
  text-align:left;
  background:transparent;
  border:0;
  color:var(--text);
  padding:10px 12px;
  cursor:pointer;
  font: 14px/1.35 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
}
.userdd .menuitem:hover{ background: rgba(148,163,184,0.10); }
.userdd .menuitem.danger{ color:#fff; background: var(--bad); }
.userdd .menuitem.danger:hover{ filter: brightness(1.05); }
.userdd .menuline{ height:1px; background: var(--line); }

/* Optional: make header look disabled when not logged in */
.header.blocked{
  opacity: .55;
  pointer-events: none;
  filter: saturate(.75);
}
.tag-live { border-color: rgba(34,197,94,.35); color: var(--good); }
.tag-warn { border-color: rgba(245,158,11,.35); color: var(--warn); }