/* ============================================================
   512 Hosting Help Desk — SupportPal-inspired clean UI
   ============================================================ */
:root {
  --brand: #2f6fed;
  --brand-dark: #2559c9;
  --brand-soft: #eaf1fe;
  --ink: #1f2733;
  --body: #46536b;
  --muted: #8a94a6;
  --line: #e7ebf1;
  --bg: #f4f6fa;
  --card: #ffffff;
  --green: #22c55e;
  --amber: #f59e0b;
  --red: #ef4444;
  --sidebar: #ffffff;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: 13.5px; color: var(--body); background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3 { color: var(--ink); }

/* ---------------- Login ---------------- */
.login-body {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(1200px 600px at 50% -10%, #33436b 0%, #1b2540 55%, #141b30 100%);
}
.login-card { width: 380px; background: #fff; border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.4); overflow: hidden; }
.login-head { padding: 30px 28px 22px; text-align: center; }
.login-logo { font-size: 26px; font-weight: 800; color: var(--ink); letter-spacing: -.5px; }
.login-logo span { color: var(--brand); }
.login-sub { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.login-form { padding: 6px 28px 26px; }
.login-form label { display: block; font-weight: 600; color: var(--ink); margin-bottom: 6px; font-size: 12.5px; }
.login-form input {
  width: 100%; padding: 11px 12px; margin-bottom: 16px; font-size: 13.5px;
  border: 1px solid var(--line); border-radius: 8px; background: #fbfcfe;
}
.login-form input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.login-hint { text-align: center; font-size: 11.5px; color: var(--muted); margin: 6px 0 0; }
.login-foot { text-align: center; font-size: 11px; color: #b6becb; padding: 0 0 20px; }

/* ---------------- App shell ---------------- */
.app { display: grid; grid-template-columns: 244px 1fr; min-height: 100vh; }

.sidebar {
  background: var(--sidebar); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sb-brand { padding: 18px 20px 16px; font-size: 20px; font-weight: 800; letter-spacing: -.5px; color: var(--ink); border-bottom: 1px solid var(--line); }
.sb-brand span { color: var(--brand); }
.sb-brand .tag { display: block; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-top: 3px; }

.sb-nav { padding: 12px 12px; }
.sb-nav a {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px; margin-bottom: 3px;
  border-radius: 8px; color: var(--body); font-weight: 500; font-size: 13.5px;
}
.sb-nav a:hover { background: #f2f5fa; text-decoration: none; }
.sb-nav a.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.sb-nav a .ico { width: 18px; text-align: center; font-size: 15px; }
.sb-nav a .pill { margin-left: auto; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; border-radius: 10px; padding: 1px 7px; }

.sb-section { padding: 6px 20px; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-top: 8px; }
.agents { padding: 4px 12px 18px; }
.agent { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; }
.agent:hover { background: #f7f9fc; }
.agent .av { position: relative; width: 30px; height: 30px; flex: none; }
.agent .av .circle { width: 30px; height: 30px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.agent .dot { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #fff; }
.dot.online { background: var(--green); }
.dot.away { background: var(--amber); }
.dot.on-call { background: var(--brand); }
.dot.offline { background: #c4ccd8; }
.agent .info { line-height: 1.25; min-width: 0; }
.agent .info .n { font-weight: 600; color: var(--ink); font-size: 12.5px; }
.agent .info .n .youtag { font-size: 9.5px; background: var(--brand); color:#fff; padding: 0 5px; border-radius: 6px; margin-left: 5px; vertical-align: middle; }
.agent .info .r { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent .status-txt { margin-left: auto; font-size: 10.5px; text-transform: capitalize; color: var(--muted); }

/* ---------------- Main ---------------- */
.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  height: 58px; background: #fff; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 16px; padding: 0 24px; position: sticky; top: 0; z-index: 10;
}
.topbar .search { flex: 1; max-width: 460px; }
.topbar .search input {
  width: 100%; padding: 9px 12px 9px 34px; border: 1px solid var(--line); border-radius: 8px; background: #f7f9fc url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a94a6' stroke-width='2'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3'/></svg>") no-repeat 10px center; font-size: 13px;
}
.topbar .search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); background-color:#fff; }
.topbar .spacer { flex: 1; }
.topbar .me { display: flex; align-items: center; gap: 10px; }
.topbar .me .av { width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.topbar .me .txt { line-height: 1.2; }
.topbar .me .txt .n { font-weight: 600; color: var(--ink); font-size: 12.5px; }
.topbar .me .txt .r { font-size: 11px; color: var(--muted); }
.topbar .logout { color: var(--muted); font-size: 12.5px; margin-left: 6px; }

.content { padding: 24px; flex: 1; }
.page-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.page-head h1 { font-size: 21px; margin: 0; font-weight: 700; letter-spacing: -.3px; }
.page-head .sub { color: var(--muted); font-size: 13px; }
.page-head .spacer { flex: 1; }
.crumbs { font-size: 12.5px; color: var(--muted); margin-bottom: 12px; }

/* ---------------- Cards / stats ---------------- */
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 20px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.stat .top { display: flex; align-items: center; justify-content: space-between; }
.stat .lbl { color: var(--muted); font-size: 12px; font-weight: 600; }
.stat .num { font-size: 28px; font-weight: 800; color: var(--ink); margin-top: 6px; letter-spacing: -1px; }
.stat .ic { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; }
.ic.red { background: var(--red); } .ic.amber { background: var(--amber); } .ic.green { background: var(--green); } .ic.blue { background: var(--brand); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.card-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.card-head h2 { font-size: 15px; margin: 0; }
.card-head .spacer { flex: 1; }
.filters { display: flex; gap: 8px; }
.filters select { border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font-size: 12.5px; background: #fff; color: var(--body); }

/* ---------------- Ticket table ---------------- */
table.tickets { width: 100%; border-collapse: collapse; }
table.tickets th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); padding: 12px 18px; border-bottom: 1px solid var(--line); font-weight: 700; }
table.tickets td { padding: 13px 18px; border-bottom: 1px solid #f0f3f7; vertical-align: middle; }
table.tickets tbody tr:last-child td { border-bottom: none; }
table.tickets tbody tr { cursor: pointer; }
table.tickets tbody tr:hover { background: #f8fafd; }
.tid { font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 12px; color: var(--muted); }
.subj { font-weight: 600; color: var(--ink); }
.subj .meta2 { display: block; font-weight: 400; color: var(--muted); font-size: 11.5px; margin-top: 3px; }
.cli .n { font-weight: 600; color: var(--ink); }
.cli .c { font-size: 11.5px; color: var(--muted); }

.badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; }
.b-dept { background: #eef1f6; color: #5b667b; }
.pri { font-weight: 700; font-size: 12px; }
.pri::before { content: "●"; margin-right: 5px; font-size: 10px; }
.pri-High { color: var(--red); } .pri-Medium { color: var(--amber); } .pri-Low { color: var(--green); }
.chan { font-size: 11.5px; color: var(--muted); }

/* SLA timer chip */
.sla { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12.5px; font-variant-numeric: tabular-nums; padding: 4px 10px; border-radius: 20px; }
.sla::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sla.green { color: #12813f; background: #e7f8ee; }
.sla.amber { color: #9a6400; background: #fef3d9; }
.sla.red { color: #b42318; background: #fde8e6; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100%{ opacity:1 } 50%{ opacity:.55 } }

/* ---------------- Ticket detail ---------------- */
.tk-head { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 16px; }
.tk-head .row1 { display: flex; align-items: flex-start; gap: 14px; }
.tk-head h1 { font-size: 18px; margin: 0 0 6px; }
.tk-head .metaline { display: flex; flex-wrap: wrap; gap: 18px; font-size: 12.5px; color: var(--muted); }
.tk-head .metaline b { color: var(--ink); }
.tk-head .slabox { margin-left: auto; text-align: right; flex: none; }
.tk-head .slabox .lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }

.tk-layout { display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: start; }
@media (max-width: 980px){ .tk-layout{ grid-template-columns: 1fr; } .stats{ grid-template-columns: repeat(2,1fr);} }

.msg { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 14px; overflow: hidden; }
.msg.client { border-left: 3px solid var(--amber); }
.msg-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: #fbfcfe; }
.msg-head .av { width: 32px; height: 32px; border-radius: 50%; background: var(--muted); color: #fff; font-weight: 700; font-size: 11px; display: flex; align-items: center; justify-content: center; flex: none; }
.msg-head .who { font-weight: 700; color: var(--ink); }
.msg-head .em { color: var(--muted); font-size: 11.5px; }
.msg-head .spacer { flex: 1; }
.msg-head .when { color: var(--muted); font-size: 11.5px; }
.msg-body { padding: 16px; white-space: pre-wrap; line-height: 1.65; font-size: 13.5px; color: var(--body); }

/* reply composer */
.composer { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; }
.composer h3 { margin: 0 0 12px; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.composer textarea { width: 100%; min-height: 150px; border: 1px solid var(--line); border-radius: 8px; padding: 12px; font-family: inherit; font-size: 13.5px; resize: vertical; line-height: 1.6; }
.composer textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.composer-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.composer-tools select { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; background: #fff; }
.composer-actions { display: flex; gap: 8px; margin-top: 12px; }

/* sidebar cards on detail */
.side { display: flex; flex-direction: column; gap: 16px; }
.side .card { padding: 0; }
.side h3 { margin: 0; font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); padding: 13px 16px; border-bottom: 1px solid var(--line); }
.side .kv { display: flex; justify-content: space-between; align-items: center; padding: 11px 16px; border-bottom: 1px solid #f0f3f7; font-size: 12.5px; }
.side .kv:last-child { border-bottom: none; }
.side .kv .k { color: var(--muted); }
.side .kv .v { font-weight: 600; color: var(--ink); }
.side .acts { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }

/* ---------------- Buttons ---------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; cursor: pointer; font-size: 13px; font-weight: 600; padding: 9px 15px; border-radius: 8px; background: var(--brand); color: #fff; }
.btn:hover { background: var(--brand-dark); text-decoration: none; }
.btn-block { width: 100%; }
.btn-sm { padding: 7px 12px; font-size: 12px; }
.btn-ghost { background: #fff; color: var(--body); border-color: var(--line); }
.btn-ghost:hover { background: #f5f7fb; }
.btn-soft { background: var(--brand-soft); color: var(--brand); }
.btn-soft:hover { background: #dbe7fd; }

/* ---------------- KB ---------------- */
.kb-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
@media (max-width: 820px){ .kb-grid{ grid-template-columns: 1fr; } }
.kb-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; cursor: pointer; }
.kb-card:hover { border-color: #cdd8ea; box-shadow: 0 4px 14px rgba(16,24,40,.08); }
.kb-card .cat { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--brand); }
.kb-card h3 { margin: 8px 0 8px; font-size: 15px; }
.kb-card p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.6; }
.kb-card .foot { margin-top: 12px; font-size: 11.5px; color: var(--muted); display: flex; gap: 14px; }
.kb-article { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px 30px; max-width: 780px; }
.kb-article .cat { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--brand); }
.kb-article h1 { font-size: 23px; margin: 8px 0 6px; }
.kb-article .meta { color: var(--muted); font-size: 12px; margin-bottom: 18px; }
.kb-article .body { white-space: pre-wrap; line-height: 1.75; font-size: 14px; color: var(--body); }

/* ---------------- Saved replies ---------------- */
.reply-list { display: flex; flex-direction: column; gap: 12px; }
.reply-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; }
.reply-item .rh { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.reply-item .rh h3 { margin: 0; font-size: 14px; }
.reply-item .rh .spacer { flex: 1; }
.reply-item pre { white-space: pre-wrap; margin: 0; font-family: inherit; font-size: 12.5px; line-height: 1.6; color: var(--body); background: #f8fafc; border: 1px solid #eef2f7; border-radius: 8px; padding: 12px; }

/* ---------------- DNS checker ---------------- */
.dns-form { display: flex; gap: 10px; margin-bottom: 18px; max-width: 620px; }
.dns-form input { flex: 1; padding: 11px 13px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
.dns-form input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.dns-result { margin-top: 6px; }
.dns-summary { display: flex; gap: 22px; align-items: center; background: #eef7f0; border: 1px solid #cdeed6; color: #12813f; border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px; font-size: 13px; font-weight: 600; }
.dns-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.dns-table th { text-align: left; font-size: 11px; text-transform: uppercase; color: var(--muted); padding: 11px 16px; border-bottom: 1px solid var(--line); background: #fafbfd; }
.dns-table td { padding: 11px 16px; border-bottom: 1px solid #f0f3f7; font-size: 13px; }
.dns-table td.type { font-weight: 700; color: var(--brand); font-family: "SF Mono", ui-monospace, monospace; }
.dns-table td.val { font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 12.5px; color: var(--ink); }
.dns-table tr:last-child td { border-bottom: none; }

/* ---------------- toast ---------------- */
.toast-wrap { position: fixed; bottom: 22px; right: 22px; z-index: 100; display: flex; flex-direction: column; gap: 8px; }
.toast { background: #1f2733; color: #fff; padding: 11px 16px; border-radius: 9px; font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.25); display: flex; align-items: center; gap: 9px; animation: slidein .2s ease; }
.toast .tick { color: var(--green); font-weight: 800; }
@keyframes slidein { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

.empty { padding: 46px; text-align: center; color: var(--muted); }
.footer { text-align: center; color: var(--muted); font-size: 11.5px; margin: 24px 0 8px; }

/* ============================================================
   v3 additions — priority groups, assignees, CEO, modal
   ============================================================ */

/* CEO / YOU tags */
.ceotag { font-size: 9.5px; background: #7c4dff; color:#fff; padding: 0 5px; border-radius: 6px; margin-left: 5px; vertical-align: middle; font-weight: 700; letter-spacing:.3px; }

/* priority group header rows */
tr.grouprow td { background: #f3f6fb; border-bottom: 1px solid var(--line); padding: 9px 18px; }
tr.grouprow .grpcount { display:inline-block; background:#e2e8f2; color:#5b667b; border-radius:10px; padding:1px 9px; font-size:11px; font-weight:700; margin-left:9px; vertical-align:middle; }
tr.grouprow .pri { font-size:12.5px; }
tr.grouprow.ans td { background:#f4faf6; }
tr.grouprow .grp-ans { color:#12813f; font-weight:700; font-size:12.5px; }
tr.row-ans { opacity:.62; }
tr.row-ans .subj { text-decoration: line-through; text-decoration-color:#c7cfda; }

/* assignee chip */
.assignee { display:inline-flex; align-items:center; gap:8px; min-width:0; }
.assignee .av2 { width:26px; height:26px; flex:none; border-radius:50%; color:#fff; font-size:10.5px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.assignee .an { font-weight:600; color:var(--ink); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.assign-current { padding:14px 16px 4px; }

/* status badges */
.b-wait { background:#fef3d9; color:#9a6400; }
.b-ans { background:#e7f8ee; color:#12813f; }

/* frozen SLA chip: keep colour, no pulse */
.sla.static { animation: none !important; }
.slanote { font-size:10.5px; color:var(--red); font-weight:600; margin-top:5px; }

/* danger button */
.btn-danger { background: var(--red); }
.btn-danger:hover { background:#d33a2f; }

/* ---------------- modal ---------------- */
.modal-overlay { position:fixed; inset:0; background:rgba(23,30,42,.55); backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; z-index:200; padding:20px; animation:fadein .15s ease; }
@keyframes fadein { from{opacity:0} to{opacity:1} }
.modal { background:#fff; width:440px; max-width:100%; border-radius:14px; box-shadow:0 24px 70px rgba(0,0,0,.35); overflow:hidden; animation:pop .16s ease; }
@keyframes pop { from{ transform:translateY(10px) scale(.98); opacity:0 } to{ transform:none; opacity:1 } }
.modal-head { padding:18px 22px; font-size:16px; font-weight:700; color:var(--ink); border-bottom:1px solid var(--line); }
.modal-body { padding:18px 22px; }
.modal-body .mtxt { margin:0 0 12px; line-height:1.6; color:var(--body); font-size:13.5px; }
.modal-body .mtxt:last-child { margin-bottom:0; }
.modal-select { width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:9px; font-size:13.5px; background:#fbfcfe; }
.modal-select:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
.modal-check { margin:6px 0 0; padding-left:20px; color:var(--body); font-size:13px; line-height:1.9; }
.modal-check li { margin:0; }
.modal-foot { padding:14px 22px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:10px; background:#fafbfd; }

/* ============================================================
   v4 additions — phone floor, live tickets, dashboard strip
   ============================================================ */

/* NEW ticket badge */
.newtag { display:inline-block; margin-left:8px; font-size:9.5px; font-weight:800; letter-spacing:.4px; color:#fff; background:var(--brand); padding:1px 6px; border-radius:6px; vertical-align:middle; animation:pulse 1.6s ease-in-out infinite; }

/* dashboard phone strip */
.phone-strip { display:flex; align-items:center; gap:26px; background:linear-gradient(100deg,#1f2a44,#2e3f66); color:#fff; border-radius:var(--radius); padding:16px 22px; margin-bottom:20px; cursor:pointer; box-shadow:var(--shadow); }
.phone-strip:hover { filter:brightness(1.06); }
.phone-strip .ps-title { font-weight:700; font-size:15px; display:flex; align-items:center; gap:9px; }
.phone-strip .ps-live { font-size:10px; font-weight:800; letter-spacing:.5px; background:#22c55e; color:#06331a; padding:2px 7px; border-radius:20px; }
.phone-strip .ps-metric { display:flex; flex-direction:column; line-height:1.15; }
.phone-strip .ps-num { font-size:22px; font-weight:800; letter-spacing:-.5px; }
.phone-strip .ps-lbl { font-size:11px; color:#b9c4dd; }

/* queue heat colours */
.q-cool { color:#22c55e !important; }
.q-warm { color:#f59e0b !important; }
.q-hot  { color:#ef4444 !important; }
.phone-strip .q-cool, .phone-strip .q-warm, .phone-strip .q-hot { }

/* phone floor list */
.pa-list { display:grid; grid-template-columns:repeat(2,1fr); }
@media (max-width:820px){ .pa-list{ grid-template-columns:1fr; } }
.pa { display:flex; align-items:center; gap:12px; padding:13px 18px; border-bottom:1px solid #f0f3f7; }
.pa:nth-child(odd){ border-right:1px solid #f0f3f7; }
.pa .av { position:relative; width:34px; height:34px; flex:none; }
.pa .av .circle { width:34px; height:34px; border-radius:50%; color:#fff; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.pa .dot { position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; border-radius:50%; border:2px solid #fff; }
.pa .info { min-width:0; flex:1; }
.pa .info .n { font-weight:600; color:var(--ink); font-size:13px; }
.pa .info .r { font-size:11.5px; color:var(--muted); }
.pa-status { font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; white-space:nowrap; }
.s-on-call { background:#eaf1fe; color:#2559c9; }
.s-available { background:#e7f8ee; color:#12813f; }
.s-wrap-up { background:#fef3d9; color:#9a6400; }
.s-break { background:#eef1f6; color:#7a8794; }

/* ============================================================
   v5 additions — SVG icons + unassigned / claim
   ============================================================ */
.sb-nav a .ico { display:inline-flex; width:18px; height:18px; align-items:center; justify-content:center; }
.sb-nav a .ico svg { width:18px; height:18px; }
.stat .ic svg { width:18px; height:18px; stroke:#fff; }
.phone-strip .ps-title svg { width:18px; height:18px; vertical-align:-3px; }

/* unassigned assignee chip */
.assignee.unassigned .an { color:var(--muted); font-style:italic; font-weight:600; }
.av2.unav { background:#fff !important; color:var(--muted) !important; border:1.5px dashed #c4ccd8; }

/* ============================================================
   v6 additions — staff replies, in-progress, KB filters
   ============================================================ */

/* staff (agent) messages in a thread */
.msg.staff { border-left:3px solid var(--brand); }
.msg.staff .msg-head { background:#eef5fe; }
.msg-head .tag-staff { font-size:9.5px; background:var(--brand); color:#fff; padding:1px 6px; border-radius:8px; margin-left:7px; vertical-align:middle; font-weight:700; letter-spacing:.3px; }

/* reply status chips */
.sla.blue { color:#2559c9; background:#eaf1fe; }
.b-prog { background:#eaf1fe; color:#2559c9; }

/* "X is handling this" hint in list rows */
.working { color:var(--brand); font-weight:600; }

/* agents online count badge */
.sb-count { background:#e2e8f2; color:#5b667b; border-radius:10px; padding:0 7px; font-size:10px; font-weight:700; margin-left:4px; }

/* knowledge base search + category filter */
.kb-toolbar { margin-bottom:14px; }
.kb-search { width:100%; max-width:520px; padding:11px 13px; border:1px solid var(--line); border-radius:9px; font-size:14px; background:#fff; }
.kb-search:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
.kb-cats { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.kb-chip { cursor:pointer; border:1px solid var(--line); background:#fff; color:var(--body); border-radius:20px; padding:6px 13px; font-size:12.5px; font-weight:600; }
.kb-chip:hover { border-color:#cdd8ea; }
.kb-chip.active { background:var(--brand); color:#fff; border-color:var(--brand); }
.kb-chip span { opacity:.7; margin-left:3px; }

/* ============================================================
   v7 additions — login lock banner / override PIN
   ============================================================ */
.lock-banner { background:#fdecea; border:1px solid #f6c9c4; color:#a03229; border-radius:9px; padding:12px 14px; margin-bottom:16px; font-size:12.5px; line-height:1.55; }
.lock-banner .lock-title { font-weight:800; font-size:13.5px; margin-bottom:4px; }
.login-error { background:#fdecea; border:1px solid #f6c9c4; color:#b42318; border-radius:8px; padding:10px 12px; margin-bottom:14px; font-size:12.5px; font-weight:600; }