:root { --sd-accent:#0E7490; --sd-accent-soft:#E0F2F7; --sd-line:#D6DDE6; --sd-bg:#F3F5F8; --sd-fg:#182230; --sd-muted:#5C6B7A; --sd-ring:#DC2626; --sd-ring-soft:#FEE2E2; --sd-online:#15803D; --sd-warn:#B45309; --sd-warn-soft:#FEF3C7; --sd-hover:#EAEEF3; }
html, body { font-family: "Segoe UI", system-ui, Arial, sans-serif; background: var(--sd-bg); color: var(--sd-fg); height: 100%; }
h1:focus { outline: none; }
.centered-shell { min-height: 100vh; }
.login-card { width: min(400px, 94vw); border: 0; }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:17px; }
.brand .dot { width:10px; height:10px; border-radius:50%; background:var(--sd-online); }
.shell { display:grid; grid-template-columns:224px minmax(0,1fr); min-height:100vh; }
.side { background:#fff; border-right:1px solid var(--sd-line); display:flex; flex-direction:column; padding:14px 10px; gap:6px; position:sticky; top:0; height:100vh; }
.side .brand { padding:4px 10px 14px; }
.nav-item-link { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:6px; color:var(--sd-fg); text-decoration:none; }
.nav-item-link:hover { background:var(--sd-hover); }
.nav-item-link.active { background:var(--sd-accent-soft); color:var(--sd-accent); font-weight:600; }
.nav-section { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--sd-muted); padding:12px 12px 4px; }
.side .me { margin-top:auto; border-top:1px solid var(--sd-line); padding-top:12px; display:grid; gap:8px; }
.side .who { display:flex; align-items:center; gap:8px; }
.avatar { width:32px; height:32px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:600; font-size:12px; background:var(--sd-accent-soft); color:var(--sd-accent); flex:none; }
.main { min-width:0; display:flex; flex-direction:column; }
.content { padding:20px; flex:1; min-height:0; display:flex; flex-direction:column; }
.content > :not(.console) { flex:none; }
.toast-stack { position:fixed; right:16px; bottom:16px; z-index:1080; display:grid; gap:8px; width:min(360px, calc(100% - 32px)); }
.toast-item { background:#fff; border:1px solid var(--sd-line); border-left:4px solid var(--sd-accent); border-radius:8px; padding:10px 12px; box-shadow:0 8px 24px rgba(0,0,0,.18); display:flex; align-items:center; justify-content:space-between; font-size:14px; }
.toast-item.toast-error { border-left-color:var(--sd-ring); }
.toast-item.toast-success { border-left-color:var(--sd-online); }
.toast-item.toast-ring { border-left-color:var(--sd-ring); font-weight:600; }
.pill { display:inline-block; font-size:11px; font-weight:600; padding:1px 8px; border-radius:999px; line-height:1.5; white-space:nowrap; }
.pill-on { background:#DCFCE7; color:var(--sd-online); } .pill-off { background:var(--sd-bg); color:var(--sd-muted); border:1px solid var(--sd-line); } .pill-admin { background:var(--sd-accent-soft); color:var(--sd-accent); }
.pill-ringing { background:var(--sd-ring-soft); color:var(--sd-ring); } .pill-queued { background:var(--sd-warn-soft); color:var(--sd-warn); }
.chip { display:inline-block; font-size:11px; line-height:1.5; padding:0 7px; border-radius:999px; background:var(--sd-bg); border:1px solid var(--sd-line); color:var(--sd-muted); white-space:nowrap; }
.row-click { cursor:pointer; } .row-click:hover td { background:var(--sd-hover); }
#blazor-error-ui { display:none; position:fixed; bottom:0; left:0; right:0; background:#fff3cd; padding:.6rem 1.25rem; box-shadow:0 -1px 2px rgba(0,0,0,.2); z-index:1000; }
#blazor-error-ui .dismiss { cursor:pointer; position:absolute; right:.75rem; top:.5rem; }

/* ---- agent console ---- */
.console { flex:1; min-height:0; display:grid; grid-template-columns:300px minmax(0,1fr) 300px; margin:-20px; height:calc(100vh - 0px); }
.clist { border-right:1px solid var(--sd-line); background:#fff; overflow:auto; min-height:0; display:flex; flex-direction:column; }
.clist-top { padding:10px 14px; border-bottom:1px solid var(--sd-line); display:grid; gap:4px; }
.clist .grp { padding:12px 14px 4px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--sd-muted); display:flex; gap:6px; align-items:center; }
.clist .grp .cnt { font-family:Consolas, monospace; color:var(--sd-fg); }
.clist .none { padding:4px 14px 8px; font-size:12px; color:var(--sd-muted); }
.citem { display:grid; grid-template-columns:32px minmax(0,1fr); gap:10px; padding:10px 14px; text-align:left; width:100%; border:0; border-left:3px solid transparent; background:none; color:inherit; }
.citem:hover { background:var(--sd-hover); }
.citem.sel { background:var(--sd-accent-soft); border-left-color:var(--sd-accent); }
.citem.ringing { border-left-color:var(--sd-ring); }
.citem.ringing .avatar { animation:sdpulse 1.4s infinite; }
@keyframes sdpulse { 0% { box-shadow:0 0 0 0 var(--sd-ring); } 70% { box-shadow:0 0 0 10px transparent; } 100% { box-shadow:0 0 0 0 transparent; } }
.citem .body { display:grid; gap:2px; min-width:0; }
.citem .nm { font-weight:600; display:flex; justify-content:space-between; gap:8px; }
.citem .nm time { font-weight:400; font-size:11px; color:var(--sd-muted); font-family:Consolas, monospace; flex:none; }
.citem .ctx { display:flex; gap:4px; flex-wrap:wrap; }
.citem .pg { font-size:11px; color:var(--sd-accent); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.citem .snip { color:var(--sd-muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.citem.dim { opacity:.6; }
.conv { display:flex; flex-direction:column; min-height:0; min-width:0; background:var(--sd-bg); overflow:hidden; }
.conv .hd { flex:none; display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--sd-line); background:#fff; flex-wrap:wrap; }
.conv .hd .ttl { font-weight:600; } .conv .hd .ctx { display:flex; gap:4px; flex-wrap:wrap; }
.msgs { flex:1; min-height:0; overflow:auto; padding:16px; display:flex; flex-direction:column; gap:10px; }
.msg { max-width:min(78%,560px); display:grid; gap:3px; }
.msg.user { align-self:flex-start; } .msg.agent { align-self:flex-end; }
.msg .b { padding:9px 12px; border-radius:12px; background:#EEF1F5; overflow-wrap:anywhere; white-space:pre-wrap; }
.msg.user .b { border-bottom-left-radius:4px; } .msg.agent .b { background:#D9EEF3; border-bottom-right-radius:4px; }
.msg .t { font-size:11px; color:var(--sd-muted); font-family:Consolas, monospace; } .msg.agent .t { text-align:right; }
.msg.system { align-self:center; font-size:12px; color:var(--sd-muted); background:#fff; border:1px solid var(--sd-line); border-radius:999px; padding:3px 12px; max-width:100%; text-align:center; }
.msg .b a { color:var(--sd-accent); }
.shot { display:block; max-width:260px; max-height:260px; border:1px solid var(--sd-line); border-radius:8px; background:#fff; }
.file { display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--sd-line); border-radius:8px; background:#fff; text-decoration:none; color:inherit; }
.file .ic { width:30px; height:30px; border-radius:6px; background:var(--sd-accent-soft); color:var(--sd-accent); display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; font-family:Consolas, monospace; }
.composer { flex:none; border-top:1px solid var(--sd-line); background:#fff; padding:10px 16px; display:grid; gap:6px; }
.composer .in { display:flex; gap:8px; align-items:flex-end; } .composer textarea { min-height:42px; max-height:120px; }
.composer .hint { font-size:11px; color:var(--sd-muted); }
.acceptbox { flex:none; border-top:1px solid var(--sd-line); background:#fff; padding:18px; display:grid; gap:8px; justify-items:center; text-align:center; }
.acceptbox.ring { border-top:3px solid var(--sd-ring); } .acceptbox.queue { border-top:3px solid var(--sd-warn); }
.empty { margin:auto; text-align:center; color:var(--sd-muted); padding:40px 20px; max-width:36ch; }
.trailcard { align-self:stretch; background:#fff; border:1px solid var(--sd-line); border-left:3px solid var(--sd-accent); border-radius:8px; padding:8px 12px; font-size:12px; display:flex; gap:8px 12px; align-items:center; flex-wrap:wrap; }
.trailcard .lbl { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--sd-muted); white-space:nowrap; }
.trailcard .steps { display:flex; gap:6px; align-items:center; flex-wrap:wrap; min-width:0; }
.trailcard .steps .sep { color:var(--sd-muted); } .trailcard .steps .here { font-weight:600; color:var(--sd-accent); } .trailcard .steps .now { color:var(--sd-warn); font-weight:600; }
.trailcard .btn { margin-left:auto; }
.trail { list-style:none; margin:0; padding:0; display:grid; }
.trail li { display:grid; grid-template-columns:14px minmax(0,1fr); gap:8px; padding:0 0 10px; position:relative; }
.trail li::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--sd-line); border:2px solid #fff; box-shadow:0 0 0 1px var(--sd-line); margin-top:5px; z-index:1; }
.trail li::after { content:""; position:absolute; left:5px; top:16px; bottom:-2px; width:2px; background:var(--sd-line); }
.trail li:last-child::after { display:none; }
.trail li.here::before { background:var(--sd-accent); box-shadow:0 0 0 1px var(--sd-accent); }
.trail li.move::before { background:var(--sd-warn); box-shadow:0 0 0 1px var(--sd-warn); }
.trail .tt { font-weight:500; font-size:13px; } .trail .u { font-family:Consolas, monospace; font-size:11px; color:var(--sd-muted); overflow-wrap:anywhere; } .trail .tm { font-size:11px; color:var(--sd-muted); }
.info { border-left:1px solid var(--sd-line); background:#fff; overflow:auto; min-height:0; padding:16px; display:grid; gap:14px; align-content:start; }
.info h4 { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--sd-muted); margin-bottom:6px; }
.kv { display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 10px; font-size:13px; margin:0; } .kv dt { color:var(--sd-muted); } .kv dd { margin:0; overflow-wrap:anywhere; }
.note { border-bottom:1px solid var(--sd-line); padding:6px 0; }
@media (max-width: 1100px) {
  .console { grid-template-columns:280px minmax(0,1fr); }
  .info { display:none; }
  .info.show { display:grid; position:fixed; right:0; top:0; bottom:0; width:min(340px,100%); z-index:1045; box-shadow:-8px 0 24px rgba(0,0,0,.18); }
}
@media (max-width: 860px) {
  .shell { grid-template-columns:1fr; }
  .side { position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; border-right:0; border-bottom:1px solid var(--sd-line); }
  .side .nav { flex-direction:row !important; flex-wrap:wrap; }
  .side .me { margin-top:0; margin-left:auto; border-top:0; padding-top:0; display:flex; align-items:center; }
  .console { grid-template-columns:1fr; grid-template-rows:minmax(0,38%) minmax(0,1fr); height:auto; min-height:80vh; }
  .clist { border-right:0; border-bottom:1px solid var(--sd-line); }
}