/* Metro West VA Inbox */
:root {
  --bg:#f5f7f3; --surface:#fff; --surface-2:#eef1ea; --surface-3:#e4e8dd;
  --border:#dde2d6; --border-strong:#c6cdbb;
  --fg:#181d18; --fg-2:#4a5348; --fg-muted:#78826f;
  --accent:#2d6a4a; --accent-soft:#dff0e5; --accent-fg:#fff;
  --ok:#3d8c5c; --ok-soft:#e0f0e5;
  --warn:#9a6a10; --warn-soft:#fbeed2;
  --crit:#b23127; --crit-soft:#fbe0dc;
  --esc:#6d4bb8; --esc-soft:#ece4fb;
  --bubble-in:#eef1ea; --bubble-out:#2d6a4a; --bubble-out-fg:#fff;
  --track:#e4e8dd;
  --font-ui:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#101310; --surface:#191d18; --surface-2:#222720; --surface-3:#2b3129;
    --border:#2c3229; --border-strong:#3d453a;
    --fg:#e9ede6; --fg-2:#b4bdaf; --fg-muted:#848d7e;
    --accent:#5fb387; --accent-soft:#1d3329; --accent-fg:#0d1610;
    --ok:#64bd8a; --ok-soft:#16301f; --warn:#d7a63f; --warn-soft:#332815;
    --crit:#e2695c; --crit-soft:#3a1c19; --esc:#a98ae6; --esc-soft:#251d38;
    --bubble-in:#242a22; --bubble-out:#2d6a4a; --bubble-out-fg:#f2f7f3;
    --track:#2b3129; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg:#101310; --surface:#191d18; --surface-2:#222720; --surface-3:#2b3129;
  --border:#2c3229; --border-strong:#3d453a;
  --fg:#e9ede6; --fg-2:#b4bdaf; --fg-muted:#848d7e;
  --accent:#5fb387; --accent-soft:#1d3329; --accent-fg:#0d1610;
  --ok:#64bd8a; --ok-soft:#16301f; --warn:#d7a63f; --warn-soft:#332815;
  --crit:#e2695c; --crit-soft:#3a1c19; --esc:#a98ae6; --esc-soft:#251d38;
  --bubble-in:#242a22; --bubble-out:#2d6a4a; --bubble-out-fg:#f2f7f3;
  --track:#2b3129; color-scheme: dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--font-ui);font-size:14px;
     line-height:1.45;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
img{max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* login */
.login-wrap{min-height:100%;display:grid;place-items:center;padding:24px 16px}
.login{width:100%;max-width:330px;background:var(--surface);border:1px solid var(--border);
       border-radius:12px;padding:26px 24px 24px}
.login h1{margin:0 0 3px;font-size:18px;letter-spacing:-.01em}
.login p.s{margin:0 0 20px;font-size:12.5px;color:var(--fg-muted)}
.login label{display:block;font-size:11.5px;font-weight:600;color:var(--fg-2);margin:0 0 5px}
.login input{width:100%;padding:9px 11px;font:inherit;font-size:14px;color:var(--fg);
             background:var(--bg);border:1px solid var(--border-strong);border-radius:8px;margin-bottom:14px}
.login button{width:100%;padding:10px;background:var(--accent);color:var(--accent-fg);
              border:0;border-radius:8px;font-size:14px;font-weight:600}
.err{color:var(--crit);font-size:12.5px;margin:0 0 12px;min-height:1.2em}

.app{height:100%;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 16px;
        background:var(--surface);border-bottom:1px solid var(--border)}
.brand b{font-size:15px;font-weight:700;letter-spacing:-.01em}
.views{display:flex;gap:2px;background:var(--surface-2);border-radius:8px;padding:2px}
.vbtn{background:none;border:0;padding:5px 13px;border-radius:6px;font-size:12.5px;
      font-weight:600;color:var(--fg-muted)}
.vbtn[aria-selected="true"]{background:var(--surface);color:var(--fg);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.spacer{margin-left:auto}
.who{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--fg-2);
     background:var(--surface-2);border:1px solid var(--border);padding:3px 9px 3px 4px;border-radius:99px}
.av{width:21px;height:21px;border-radius:50%;background:var(--accent);color:var(--accent-fg);
    display:grid;place-items:center;font-size:10px;font-weight:700;flex:none}
.av.boss{background:var(--esc);color:#fff}
.lo{background:none;border:0;color:var(--fg-muted);font-size:11.5px;padding:4px 6px}
.lo:hover{color:var(--crit)}

.main{flex:1;display:flex;min-height:0}
.rail{width:346px;flex:none;display:flex;flex-direction:column;min-height:0;
      background:var(--surface);border-right:1px solid var(--border)}
.tabs{display:flex;gap:2px;padding:8px 6px 0;border-bottom:1px solid var(--border)}
.tab{flex:1;background:none;border:0;padding:7px 3px 9px;font-size:11.5px;font-weight:600;
     color:var(--fg-muted);border-bottom:2px solid transparent;white-space:nowrap}
.tab[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--accent)}
.tab .n{font-family:var(--font-mono);font-size:10px;margin-left:3px;background:var(--surface-3);
        color:var(--fg-2);padding:1px 5px;border-radius:99px}
.tab[aria-selected="true"] .n{background:var(--accent-soft);color:var(--accent)}
.tab .n.hot{background:var(--crit-soft);color:var(--crit)}
.tab .n.esc{background:var(--esc-soft);color:var(--esc)}

.list{flex:1;overflow-y:auto;overscroll-behavior:contain}
.row{position:relative;display:grid;grid-template-columns:4px 1fr auto;gap:0 10px;align-items:start;
     width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--border);
     padding:11px 12px 11px 0}
.row:hover{background:var(--surface-2)}
.row[aria-current="true"]{background:var(--accent-soft)}
.stripe{align-self:stretch;border-radius:0 2px 2px 0;background:transparent}
.row.w-ok .stripe{background:var(--ok)}
.row.w-warn .stripe{background:var(--warn)}
.row.w-crit .stripe{background:var(--crit)}
.row.is-esc .stripe{background:var(--esc)}
.row-body{min-width:0}
.row-top{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.row-name{font-weight:600;font-size:13.5px}
.row-tag{font-size:9.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
         padding:1px 5px;border-radius:3px;white-space:nowrap;flex:none}
.t-lead{background:var(--accent-soft);color:var(--accent)}
.t-cust{background:var(--surface-3);color:var(--fg-2)}
.t-esc{background:var(--esc-soft);color:var(--esc)}
.row-msg{font-size:12.5px;color:var(--fg-2);margin-top:2px;display:-webkit-box;
         -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.row-ask{font-size:11.5px;color:var(--esc);margin-top:3px;font-style:italic;display:-webkit-box;
         -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.row-meta{display:flex;align-items:center;gap:6px;margin-top:5px;font-size:11px;color:var(--fg-muted)}
.row-meta .ph{font-family:var(--font-mono)}
.row-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;padding-right:12px}
.wait{font-family:var(--font-mono);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;
      padding:2px 6px;border-radius:4px;white-space:nowrap}
.w-ok .wait{background:var(--ok-soft);color:var(--ok)}
.w-warn .wait{background:var(--warn-soft);color:var(--warn)}
.w-crit .wait{background:var(--crit-soft);color:var(--crit)}
.wait.closed{background:var(--surface-3);color:var(--fg-muted)}
.claimbtn{border:1px solid var(--accent);background:var(--surface);color:var(--accent);
          border-radius:6px;padding:3px 11px;font-size:11.5px;font-weight:600;line-height:1.4;
          white-space:nowrap;opacity:.72;transition:opacity .12s,background .12s}
.row:hover .claimbtn,.row:focus-within .claimbtn{opacity:1}
.claimbtn:hover{background:var(--accent);color:var(--accent-fg)}
@media (hover:none){.claimbtn{opacity:1}}
.mine-chip{font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:99px;
           background:var(--accent-soft);color:var(--accent);white-space:nowrap}
.mine-chip.other{background:var(--surface-3);color:var(--fg-2)}
.empty{padding:44px 22px;text-align:center;color:var(--fg-muted);font-size:13px}
.empty b{display:block;color:var(--fg-2);font-size:14px;margin-bottom:4px}

.convo{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg)}
.chead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 16px;
       background:var(--surface);border-bottom:1px solid var(--border)}
.back{display:none;background:none;border:0;padding:4px 8px 4px 0;font-size:18px;line-height:1;color:var(--fg-2)}
.chead-id{margin-right:auto;min-width:0}
.chead-id h2{margin:0;font-size:15px;font-weight:700;letter-spacing:-.01em}
.chead-id p{margin:1px 0 0;font-size:11.5px;color:var(--fg-muted)}
.chead-id .ph{font-family:var(--font-mono)}
.acts{display:flex;gap:6px;flex-wrap:wrap}
.act{background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:6px 11px;
     font-size:12px;font-weight:600;color:var(--fg-2)}
.act:hover{border-color:var(--border-strong);color:var(--fg)}
.act.done{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.act.stop{color:var(--crit);border-color:var(--crit-soft);background:var(--crit-soft)}
.act.esc{color:var(--esc);background:var(--esc-soft);border-color:var(--esc-soft)}
.act:disabled{opacity:.45;cursor:not-allowed}
.escbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 16px;
        background:var(--esc-soft);border-bottom:1px solid var(--border);font-size:12.5px;color:var(--esc)}
.escbar b{font-weight:700}
.escbar .q{color:var(--fg-2);font-style:italic}
.svc{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:8px 16px;
     background:var(--surface-2);border-bottom:1px solid var(--border);font-size:11.5px;color:var(--fg-2)}
.chip{background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:2px 7px;font-size:11px}
.chip b{font-weight:600}

.stream{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px;display:flex;
        flex-direction:column;gap:10px}
.daysep{display:flex;align-items:center;gap:10px;color:var(--fg-muted);font-size:10.5px;
        text-transform:uppercase;letter-spacing:.08em;margin:4px 0}
.daysep::before,.daysep::after{content:"";flex:1;height:1px;background:var(--border)}
.msg{max-width:min(78%,520px);display:flex;flex-direction:column;gap:3px}
.msg.out{align-self:flex-end;align-items:flex-end}
.bub{padding:8px 12px;border-radius:14px;font-size:13.5px;white-space:pre-wrap;word-break:break-word}
.msg.in .bub{background:var(--bubble-in);color:var(--fg);border-bottom-left-radius:4px}
.msg.out .bub{background:var(--bubble-out);color:var(--bubble-out-fg);border-bottom-right-radius:4px}
.stamp{font-size:10.5px;color:var(--fg-muted);font-family:var(--font-mono);padding:0 4px}
.msg.sys{align-self:center;max-width:92%}
.msg.sys .bub{background:transparent;border:1px dashed var(--border-strong);color:var(--fg-muted);
              font-size:11.5px;border-radius:6px;text-align:center}
.msg.note{align-self:center;max-width:min(88%,560px)}
.msg.note .bub{background:var(--esc-soft);border:1px solid var(--esc);color:var(--fg);
               border-radius:9px;font-size:13px}
.notehd{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;letter-spacing:.06em;
        text-transform:uppercase;color:var(--esc);margin-bottom:4px}

.composer{border-top:1px solid var(--border);background:var(--surface);padding:9px 16px 12px}
.modes{display:flex;gap:2px;background:var(--surface-2);border-radius:7px;padding:2px;
       width:fit-content;margin-bottom:8px}
.mode{background:none;border:0;padding:4px 11px;border-radius:5px;font-size:11.5px;font-weight:600;color:var(--fg-muted)}
.mode[aria-selected="true"]{background:var(--surface);color:var(--fg);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.mode[data-mode="note"][aria-selected="true"],.mode[data-mode="ask"][aria-selected="true"]{color:var(--esc)}
.crow{display:flex;gap:8px;align-items:flex-end}
.crow textarea{flex:1;min-width:0;resize:none;font:inherit;font-size:13.5px;color:var(--fg);
               background:var(--bg);border:1px solid var(--border-strong);border-radius:10px;
               padding:9px 12px;max-height:140px}
.composer.noteing .crow textarea{background:var(--esc-soft);border-color:var(--esc)}
.send{background:var(--accent);color:var(--accent-fg);border:0;border-radius:10px;padding:10px 18px;
      font-size:13px;font-weight:600;flex:none}
.composer.noteing .send{background:var(--esc);color:#fff}
.send:disabled{opacity:.4;cursor:not-allowed}
.cmeta{display:flex;justify-content:space-between;gap:10px;margin-top:6px;font-size:10.5px;color:var(--fg-muted)}
.cmeta .seg{font-family:var(--font-mono)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;z-index:50;
       background:var(--fg);color:var(--bg);padding:9px 16px;border-radius:8px;font-size:13px;
       box-shadow:0 4px 20px rgba(0,0,0,.25);max-width:90vw}
.toast.bad{background:var(--crit);color:#fff}

.ov{flex:1;overflow-y:auto;padding-block:20px 40px;padding-inline:16px}
.ov-in{max-width:1000px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
.ov h3{margin:0 0 3px;font-size:13px;font-weight:700}
.ov .sub{margin:0 0 12px;font-size:11.5px;color:var(--fg-muted)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:10px}
.tile{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:13px 14px}
.tile .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--fg-muted)}
.tile .v{font-family:var(--font-mono);font-size:26px;font-weight:600;font-variant-numeric:tabular-nums;
         line-height:1.15;margin-top:4px}
.tile .f{font-size:11.5px;color:var(--fg-2);margin-top:2px}
.tile.crit .v{color:var(--crit)}
.tile.esc .v{color:var(--esc)}
.tile.ok .v{color:var(--ok)}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:15px 16px 17px}
.aging{display:flex;flex-direction:column;gap:7px}
.age-row{display:grid;grid-template-columns:150px 1fr auto;gap:10px;align-items:center;font-size:12.5px}
.age-row .lbl{color:var(--fg-2)}
.age-row .num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:12px}
.age-bar{height:16px;background:var(--track);border-radius:4px;overflow:hidden}
.age-bar>i{display:block;height:100%;border-radius:4px}
table.va{width:100%;border-collapse:collapse}
table.va th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;
            color:var(--fg-muted);font-weight:600;padding:0 8px 7px 0;border-bottom:1px solid var(--border)}
table.va th.num,table.va td.num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
table.va td{padding:9px 8px 9px 0;border-bottom:1px solid var(--border);font-size:13px;vertical-align:middle}
table.va tr:last-child td{border-bottom:0}
.person{display:flex;align-items:center;gap:8px}
.person .av{width:24px;height:24px;font-size:10.5px}
.person .nm{font-weight:600}

@media (max-width:760px){
  .rail{width:100%;border-right:0}
  .main.thread-open .rail{display:none}
  .main:not(.thread-open) .convo{display:none}
  .back{display:block}
  .msg{max-width:88%}
  .age-row{grid-template-columns:110px 1fr auto}
}