:root {
  --bg:#11151a; --surface:#171c23; --surface2:#1d232c; --border:#272e38;
  --ember:#e0983f; --good:#4fae6f; --bad:#d1495b; --text:#e4e8ee; --muted:#8b95a3; --muted2:#5c6675;
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; font-size:14px; }
a { color: inherit; }
button { font-family: inherit; }

/* ---- Login ---- */
.auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.auth-card { width:100%; max-width:360px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:28px 26px; display:flex; flex-direction:column; gap:14px; }
.auth-logo { display:flex; align-items:center; gap:8px; font-weight:600; font-size:15px; margin-bottom:6px; }
.auth-logo .dot { width:8px; height:8px; border-radius:50%; background:var(--ember); display:inline-block; }
.auth-card label { display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:var(--muted); }
.auth-card input { padding:10px 12px; background:var(--bg); border:1px solid var(--border); border-radius:6px; color:var(--text); font-size:14px; }
.auth-card input:focus { outline:none; border-color:var(--ember); }
.btn { padding:10px 16px; border-radius:6px; border:1px solid var(--border); background:var(--surface2); color:var(--text); font-size:13.5px; font-weight:500; cursor:pointer; }
.btn.primary { border-color:var(--ember); background:var(--ember); color:#1a1206; }
.btn.full { width:100%; }
.form-error { color:var(--bad); font-size:12.5px; margin:0; }

/* ---- App shell ---- */
.app-shell { display:flex; min-height:100vh; }
.sidebar { flex:0 0 220px; background:var(--surface); border-right:1px solid var(--border); padding:20px 14px; display:flex; flex-direction:column; min-width:220px; }
.brand { display:flex; align-items:center; gap:7px; padding:0 8px 22px; font-weight:600; font-size:15px; }
.brand .dot { width:8px; height:8px; border-radius:50%; background:var(--ember); }
.nav-section { padding:8px 10px 6px; font-size:11px; color:var(--muted2); text-transform:uppercase; letter-spacing:.04em; }
.nav-btn { display:block; width:100%; text-align:left; padding:9px 10px; border-radius:6px; color:var(--muted); font-size:13.5px; font-weight:500; margin-bottom:2px; border:1px solid transparent; background:none; cursor:pointer; }
.nav-btn:hover { background:var(--surface2); }
.nav-btn.active { background:var(--surface2); border-color:var(--border); color:var(--text); }
.sidebar-bottom { margin-top:auto; padding-top:10px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:8px; }
.nav-link { display:block; padding:6px 8px; border-radius:6px; font-size:12.5px; color:var(--muted); text-decoration:none; }
.nav-link.as-btn { background:none; border:none; text-align:left; cursor:pointer; font-size:12.5px; }
.me-email { padding:0 8px; font-size:11.5px; color:var(--muted2); word-break:break-all; }

.main { flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar { display:flex; align-items:center; gap:10px; padding:16px 28px; border-bottom:1px solid var(--border); }
.topbar h1 { font-size:16px; font-weight:600; margin:0; }
.count-pill { padding:3px 9px; border-radius:999px; border:1px solid var(--border); background:var(--surface2); font-size:12px; color:var(--muted); }
.content { padding:20px 28px; overflow-y:auto; }

.ticket-list { display:flex; flex-direction:column; gap:10px; }
.ticket-row { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:14px 16px; display:flex; align-items:center; gap:14px; cursor:pointer; }
.ticket-row:hover { border-color:#3a4350; }
.t-code { font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted2); flex:0 0 90px; }
.t-main { flex:1; min-width:0; }
.t-user { font-weight:600; font-size:14px; }
.t-sub { color:var(--muted); font-size:12.5px; margin-top:2px; }
.t-time { color:var(--muted2); font-size:11.5px; flex:0 0 140px; text-align:right; }
.badge { display:inline-block; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:500; border:1px solid var(--border); }
.badge.open { color:var(--ember); border-color:#7a5a30; }
.badge.claimed { color:#6fa8e0; border-color:#2f4e68; }
.badge.closed { color:var(--good); border-color:#2d5a3c; }
.badge.spam { color:var(--bad); border-color:#6b2730; }
.empty-state { color:var(--muted2); font-size:13.5px; padding:30px 0; text-align:center; }

/* ---- Modal ---- */
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; padding:20px; z-index:10; }
.modal-backdrop[hidden] { display:none; }
.auth-wrap[hidden], .app-shell[hidden] { display:none; }
.modal { width:100%; max-width:480px; max-height:85vh; overflow-y:auto; background:var(--surface); border:1px solid var(--border); border-radius:10px; }
.modal-head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); }
.modal-head h2 { font-size:15px; margin:0; }
.icon-btn { background:none; border:none; color:var(--muted); font-size:20px; cursor:pointer; line-height:1; }
.modal-body { padding:18px 20px; display:flex; flex-direction:column; gap:12px; }
.field-row { display:flex; flex-direction:column; gap:3px; }
.field-row .k { font-size:11.5px; color:var(--muted2); }
.field-row .v { font-size:13.5px; }
.status-row { display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.status-row button { padding:7px 12px; border-radius:6px; border:1px solid var(--border); background:var(--surface2); color:var(--text); font-size:12.5px; cursor:pointer; }
.status-row button.active { border-color:var(--ember); background:var(--ember); color:#1a1206; }
textarea.staff-notes { width:100%; min-height:70px; background:var(--bg); border:1px solid var(--border); border-radius:6px; color:var(--text); font-size:13px; padding:9px 11px; font-family:inherit; resize:vertical; }

/* ---- Live chat (nav badge + admin panel) ---- */
.chat-badge { display:inline-flex; align-items:center; justify-content:center; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:var(--bad); color:#fff; font-size:10.5px; font-weight:700; margin-left:4px; }
.chat-badge[hidden] { display:none; }
#tickets-view[hidden], #chat-view[hidden] { display:none; }
.chat-admin { display:flex; gap:16px; height:calc(100vh - 110px); }
.chat-admin-sessions { flex:0 0 260px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; }
.chat-session-row { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:10px 12px; cursor:pointer; }
.chat-session-row:hover { border-color:#3a4350; }
.chat-session-row.active { border-color:var(--ember); }
.chat-session-row .cs-top { display:flex; justify-content:space-between; align-items:center; gap:6px; font-size:12.5px; }
.chat-session-row .cs-id { font-family:'IBM Plex Mono',monospace; color:var(--muted2); }
.chat-session-row .cs-last { color:var(--muted); font-size:12px; margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-session-row .cs-status { font-size:10.5px; color:var(--muted2); text-transform:uppercase; }
.chat-admin-convo { flex:1; min-width:0; background:var(--surface); border:1px solid var(--border); border-radius:8px; display:flex; flex-direction:column; overflow:hidden; }
.chat-admin-convo-head { padding:12px 16px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; font-size:13.5px; font-weight:500; }
.chat-admin-messages { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; }
.chat-bubble-msg { max-width:70%; padding:9px 12px; border-radius:10px; font-size:13.5px; line-height:1.4; }
.chat-bubble-msg.visitor { align-self:flex-start; background:var(--surface2); border:1px solid var(--border); border-bottom-left-radius:3px; }
.chat-bubble-msg.admin { align-self:flex-end; background:var(--ember); color:#1a1206; border-bottom-right-radius:3px; }
.chat-bubble-msg .cm-meta { display:block; font-size:10.5px; color:var(--muted2); margin-top:3px; }
.chat-bubble-msg.admin .cm-meta { color:rgba(26,18,6,.65); }
.chat-admin-form { border-top:1px solid var(--border); padding:10px; display:flex; gap:8px; }
.chat-admin-form input { flex:1; background:var(--bg); border:1px solid var(--border); border-radius:6px; color:var(--text); padding:9px 11px; font-size:13.5px; }
.chat-admin-empty { color:var(--muted2); font-size:13px; margin:auto; }