/* ============================================================
   Inbox Triage & Route — RMAI desk
   Built on RMAI Design System tokens
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Epilogue:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --rmai-purple:#A77ACD; --rmai-orange:#F26541; --rmai-green:#22C55E;
  --rmai-bg:#FAFAFA; --rmai-white:#FFFFFF; --rmai-stone:#EDEBE8; --rmai-lavender:#F0EBF4;
  --rmai-fg-1:#1A1B25; --rmai-fg-2:#555555; --rmai-fg-mut:#8D8D92;
  --rmai-border:#E8E8EB;
  --rmai-font-sans:'Epilogue',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --rmai-font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --rmai-ease:cubic-bezier(0.4,0,0.2,1);
  /* urgency (brief override: success/warning/danger) */
  --u-high:#EF4444; --u-med:#F59E0B; --u-low:#22C55E;
  --u-high-bg:#FEECEC; --u-med-bg:#FEF6E7; --u-low-bg:#EAF8EF;
}

* { box-sizing:border-box; }
html, body { height:100%; }
body {
  margin:0;
  font-family:var(--rmai-font-sans);
  font-size:15px; line-height:1.45;
  color:var(--rmai-fg-1);
  background:var(--rmai-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
button { font-family:inherit; cursor:pointer; }
::selection { background:rgba(167,122,205,0.22); }

.eyebrow {
  font-size:10px; font-weight:700; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--rmai-fg-mut);
}
.mono { font-family:var(--rmai-font-mono); }

/* ---------- App frame ---------- */
.app { display:flex; flex-direction:column; height:100vh; min-height:0; }

/* ---------- Header (dark) ---------- */
.hdr {
  background:var(--rmai-fg-1); color:#fff;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 24px; height:60px; flex:0 0 auto;
  border-bottom:1px solid #2A2B36;
}
.hdr-left { display:flex; align-items:center; gap:18px; }
.wordmark { line-height:1.05; letter-spacing:-0.02em; }
.wordmark .l1 { font-weight:800; font-size:17px; color:#fff; }
.wordmark .l2 { font-weight:500; font-size:17px; color:var(--rmai-purple); }
.hdr-sep { width:1px; height:30px; background:#2A2B36; }
.hdr-deskname { font-size:14px; font-weight:600; color:#fff; }
.hdr-deskname .sub { display:block; font-size:11px; font-weight:400; color:#9A9AA2; letter-spacing:0.01em; }
.hdr-right { display:flex; align-items:center; gap:16px; }
.live {
  display:inline-flex; align-items:center; gap:7px;
  font-size:12px; color:#C9C9CF;
  border:1px solid #34353F; border-radius:999px; padding:5px 11px;
}
.live .dot { width:7px; height:7px; border-radius:50%; background:var(--rmai-green);
  box-shadow:0 0 0 3px rgba(34,197,94,0.18); }
.hdr-meta { font-size:11px; color:#76767E; letter-spacing:0.02em; }

/* ---------- Buttons ---------- */
.btn {
  font-weight:600; font-size:13px; padding:9px 15px; border-radius:6px;
  border:1px solid transparent; line-height:1.2; transition:background var(--rmai-dur,160ms) var(--rmai-ease), border-color 160ms var(--rmai-ease), color 160ms var(--rmai-ease);
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
}
.btn--cta { background:var(--rmai-orange); color:#fff; }
.btn--cta:hover { background:#DA5939; }
.btn--cta:active { background:#C84F30; transform:translateY(1px); }
.btn--primary { background:var(--rmai-fg-1); color:#fff; }
.btn--primary:hover { background:#33343E; }
.btn--secondary { background:#fff; color:var(--rmai-fg-1); border-color:var(--rmai-border); }
.btn--secondary:hover { background:var(--rmai-bg); border-color:var(--rmai-fg-1); }
.btn--ghost { background:transparent; color:var(--rmai-purple); padding:9px 10px; }
.btn--ghost:hover { color:var(--rmai-fg-1); }
.btn--danger { background:#fff; color:var(--u-high); border-color:#F3C0C0; }
.btn--danger:hover { background:var(--u-high); color:#fff; border-color:var(--u-high); }
.btn--dark-ghost { background:transparent; color:#C9C9CF; border-color:#34353F; }
.btn--dark-ghost:hover { background:#22232D; color:#fff; }
.btn[disabled] { opacity:0.4; pointer-events:none; }
.btn svg { width:15px; height:15px; }
:focus-visible { outline:2px solid var(--rmai-purple); outline-offset:2px; }

/* ---------- 3-column desk ---------- */
.desk { display:grid; grid-template-columns:33% 37% 30%; flex:1 1 auto; min-height:0; }
.col { display:flex; flex-direction:column; min-height:0; border-right:1px solid var(--rmai-border); background:var(--rmai-white); }
.col:last-child { border-right:0; }
.col-hd {
  flex:0 0 auto; padding:13px 18px 12px; border-bottom:1px solid var(--rmai-border);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--rmai-white);
}
.col-hd .ttl { display:flex; align-items:baseline; gap:9px; }
.col-hd .ttl h2 { margin:0; font-size:14px; font-weight:700; letter-spacing:-0.01em; }
.col-hd .count { font-size:11px; color:var(--rmai-fg-mut); font-family:var(--rmai-font-mono); }
.col-body { flex:1 1 auto; overflow-y:auto; min-height:0; }
.col-body::-webkit-scrollbar { width:9px; }
.col-body::-webkit-scrollbar-thumb { background:#E0DEDB; border-radius:999px; border:2px solid var(--rmai-white); }

/* ---------- Queue ---------- */
.q-toolbar {
  display:flex; align-items:center; gap:6px; padding:9px 14px;
  border-bottom:1px solid var(--rmai-border); background:var(--rmai-bg);
  flex:0 0 auto;
}
.q-sort { font-size:11px; color:var(--rmai-fg-mut); display:flex; align-items:center; gap:6px; }
.q-chip {
  font-size:11px; font-weight:600; color:var(--rmai-fg-2);
  padding:3px 9px; border-radius:999px; border:1px solid var(--rmai-border); background:#fff;
}
.q-chip .n { color:var(--rmai-fg-mut); font-family:var(--rmai-font-mono); }

.q-list { list-style:none; margin:0; padding:0; }
.q-row {
  position:relative; display:grid; grid-template-columns:4px 1fr auto; gap:0;
  padding:0; border-bottom:1px solid var(--rmai-border); cursor:pointer;
  background:#fff; transition:background 120ms var(--rmai-ease);
}
.q-row:hover { background:var(--rmai-bg); }
.q-row.sel { background:var(--rmai-lavender); }
.q-row.sel .q-stripe { width:4px; }
.q-stripe { width:4px; }
.q-row[data-u="high"] .q-stripe { background:var(--u-high); }
.q-row[data-u="medium"] .q-stripe { background:var(--u-med); }
.q-row[data-u="low"] .q-stripe { background:var(--u-low); }
.q-main { padding:9px 12px 10px 11px; min-width:0; }
.q-line1 { display:flex; align-items:center; gap:7px; margin-bottom:2px; }
.q-name { font-size:13px; font-weight:600; color:var(--rmai-fg-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.q-time { margin-left:auto; font-size:10px; color:var(--rmai-fg-mut); font-family:var(--rmai-font-mono); white-space:nowrap; flex:0 0 auto; }
.q-prev { font-size:12px; color:var(--rmai-fg-2); line-height:1.35; margin:0 0 7px;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.q-line3 { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.q-side { display:flex; flex-direction:column; align-items:flex-end; justify-content:center; padding:9px 12px 9px 0; gap:6px; }

.tag {
  font-size:10px; font-weight:600; padding:2px 8px; border-radius:999px;
  background:var(--rmai-lavender); color:var(--rmai-purple); letter-spacing:0.01em; white-space:nowrap;
}
.route {
  font-family:var(--rmai-font-mono); font-size:10px; color:var(--rmai-fg-mut);
  display:inline-flex; align-items:center; gap:3px; white-space:nowrap;
}
.route .arr { color:var(--rmai-purple); }

.upill {
  font-size:9.5px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase;
  padding:3px 8px; border-radius:999px; display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
}
.upill .d { width:6px; height:6px; border-radius:50%; }
.upill[data-u="high"] { background:var(--u-high-bg); color:#C42B2B; }
.upill[data-u="high"] .d { background:var(--u-high); }
.upill[data-u="medium"] { background:var(--u-med-bg); color:#B26A05; }
.upill[data-u="medium"] .d { background:var(--u-med); }
.upill[data-u="low"] { background:var(--u-low-bg); color:#1E874A; }
.upill[data-u="low"] .d { background:var(--u-low); }
.q-esc { font-size:9.5px; font-weight:700; color:var(--u-high); display:inline-flex; align-items:center; gap:3px; letter-spacing:0.02em; }

/* arrival flash for re-sort */
@keyframes rowflash { 0%{background:#FFF4E0;} 100%{background:#fff;} }
.q-row.flash { animation:rowflash 1600ms var(--rmai-ease); }
.q-row.flash.sel { animation:none; }
@keyframes slidein { from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:translateY(0);} }
.q-row.appear { animation:slidein 320ms var(--rmai-ease) both; }

/* ---------- Center: message ---------- */
.empty { display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:100%; color:var(--rmai-fg-mut); gap:10px; padding:40px; text-align:center; }
.empty svg { width:30px; height:30px; stroke:var(--rmai-border); }
.empty .t { font-size:14px; font-weight:600; color:var(--rmai-fg-2); }
.empty .s { font-size:12.5px; max-width:240px; line-height:1.5; }

.msg-wrap { padding:18px 20px 28px; }
.msg-from { display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; }
.avatar { width:38px; height:38px; border-radius:999px; background:var(--rmai-lavender);
  color:var(--rmai-purple); font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.msg-id .nm { font-size:15px; font-weight:700; }
.msg-id .em { font-size:12px; color:var(--rmai-fg-mut); font-family:var(--rmai-font-mono); }
.msg-meta { margin-left:auto; text-align:right; font-size:11px; color:var(--rmai-fg-mut); }
.msg-meta .ch { display:inline-flex; align-items:center; gap:5px; }
.msg-subject { font-size:16px; font-weight:600; margin:2px 0 10px; letter-spacing:-0.01em; }
.msg-body { font-size:14px; line-height:1.6; color:var(--rmai-fg-1); white-space:pre-wrap;
  background:var(--rmai-bg); border:1px solid var(--rmai-border); border-radius:10px; padding:15px 16px; }

.sec-label { display:flex; align-items:center; gap:9px; margin:22px 0 12px; }
.sec-label .ln { flex:1 1 auto; height:1px; background:var(--rmai-border); }

/* classification card */
.cls { border:1px solid var(--rmai-border); border-radius:10px; overflow:hidden; }
.cls-row { display:flex; align-items:flex-start; gap:12px; padding:12px 15px; border-bottom:1px solid var(--rmai-border); }
.cls-row:last-child { border-bottom:0; }
.cls-k { width:96px; flex:0 0 auto; font-size:10px; font-weight:700; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--rmai-fg-mut); padding-top:2px; }
.cls-v { flex:1 1 auto; min-width:0; font-size:14px; }
.cls-intent { font-weight:700; font-size:15px; }
.conf {
  display:inline-flex; align-items:center; gap:8px; margin-top:7px;
}
.conf-bar { width:120px; height:5px; border-radius:999px; background:var(--rmai-border); overflow:hidden; }
.conf-bar i { display:block; height:100%; background:var(--rmai-purple); border-radius:999px; transition:width 600ms var(--rmai-ease); }
.conf-n { font-family:var(--rmai-font-mono); font-size:12px; color:var(--rmai-fg-2); }
.cls-why { color:var(--rmai-fg-2); line-height:1.5; font-size:13.5px; }
.cls-route { font-family:var(--rmai-font-mono); font-size:13px; display:inline-flex; align-items:center; gap:7px; }
.cls-route .arr { color:var(--rmai-purple); }
.cls-route b { font-weight:500; color:var(--rmai-fg-1); }

.esc-flag { display:flex; gap:10px; align-items:flex-start; background:var(--u-high-bg);
  border:1px solid #F3C0C0; border-radius:8px; padding:11px 13px; margin-top:14px; }
.esc-flag svg { width:17px; height:17px; stroke:var(--u-high); flex:0 0 auto; margin-top:1px; }
.esc-flag .et { font-size:13px; color:#9A2A2A; line-height:1.45; }
.esc-flag .et b { color:#7F1D1D; }

/* shimmer (processing) */
.shim-card { border:1px solid var(--rmai-border); border-radius:10px; padding:15px; }
.shim { background:linear-gradient(90deg,#EEE 25%,#F6F6F6 50%,#EEE 75%); background-size:400% 100%;
  animation:shimmer 1400ms infinite linear; border-radius:6px; }
@keyframes shimmer { from{background-position:100% 0;} to{background-position:-100% 0;} }
.shim-line { height:11px; margin-bottom:10px; }
.proc-note { display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--rmai-fg-2); margin-bottom:14px; }
.proc-note .spin { width:14px; height:14px; border:2px solid var(--rmai-border); border-top-color:var(--rmai-purple);
  border-radius:50%; animation:spin 700ms linear infinite; }
@keyframes spin { to{transform:rotate(360deg);} }

/* ---------- Right: draft ---------- */
.draft-wrap { display:flex; flex-direction:column; height:100%; min-height:0; }
.draft-scroll { flex:1 1 auto; overflow-y:auto; padding:18px 20px; min-height:0; }
.draft-scroll::-webkit-scrollbar { width:9px; }
.draft-scroll::-webkit-scrollbar-thumb { background:#E0DEDB; border-radius:999px; border:2px solid var(--rmai-white); }

.draft-meta { display:flex; align-items:center; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.draft-meta .who { font-size:12px; color:var(--rmai-fg-mut); }
.draft-meta .who b { color:var(--rmai-fg-1); font-weight:600; }
.badge-status { font-size:10px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.badge-status.ready { background:var(--u-low-bg); color:#1E874A; }
.badge-status.ready .d { width:6px; height:6px; border-radius:50%; background:var(--rmai-green); }
.badge-status.hold { background:var(--u-high-bg); color:#C42B2B; }

.draft-box { border:1px solid var(--rmai-border); border-radius:10px; background:#fff; }
.draft-text { padding:16px 16px 14px; font-size:14px; line-height:1.62; color:var(--rmai-fg-1);
  white-space:pre-wrap; min-height:120px; }
.draft-text.editing { outline:none; background:#FEFDFB; box-shadow:inset 0 0 0 2px var(--rmai-lavender); border-radius:10px; }
.cursor { display:inline-block; width:7px; height:16px; background:var(--rmai-purple); margin-left:1px;
  vertical-align:-2px; animation:blink 900ms steps(2) infinite; }
@keyframes blink { 50%{opacity:0;} }
.cite { display:flex; align-items:center; gap:8px; padding:10px 16px; border-top:1px solid var(--rmai-border);
  background:var(--rmai-bg); border-radius:0 0 10px 10px; }
.cite .ic { width:14px; height:14px; stroke:var(--rmai-fg-mut); flex:0 0 auto; }
.cite .lbl { font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--rmai-fg-mut); }
.cite .src { font-family:var(--rmai-font-mono); font-size:12px; color:var(--rmai-fg-1);
  background:var(--rmai-stone); padding:2px 8px; border-radius:4px; }

.ground-note { font-size:11.5px; color:var(--rmai-fg-mut); line-height:1.5; margin-top:14px;
  display:flex; gap:7px; }
.ground-note svg { width:14px; height:14px; stroke:var(--rmai-fg-mut); flex:0 0 auto; margin-top:1px; }

/* escalation panel (right, replaces draft) */
.esc-panel { border:1px solid #F3C0C0; border-radius:10px; overflow:hidden; }
.esc-head { background:var(--u-high); color:#fff; padding:12px 15px; display:flex; align-items:center; gap:9px; }
.esc-head svg { width:18px; height:18px; flex:0 0 auto; }
.esc-head .h { font-size:13.5px; font-weight:700; letter-spacing:0.01em; line-height:1.25; }
.esc-body { padding:15px 16px; }
.esc-body .reason { font-size:14px; line-height:1.55; color:var(--rmai-fg-1); margin:0 0 12px; }
.esc-body .reason b { color:#7F1D1D; }
.esc-rule { background:#FEF6E7; border:1px solid #F6E0B0; border-radius:8px; padding:11px 13px;
  font-size:12.5px; color:#7A5A12; line-height:1.5; display:flex; gap:8px; }
.esc-rule svg { width:15px; height:15px; stroke:#B26A05; flex:0 0 auto; margin-top:1px; }
.no-draft { font-size:12.5px; color:var(--rmai-fg-2); margin-top:13px; line-height:1.5; }

/* action bar */
.actions { flex:0 0 auto; border-top:1px solid var(--rmai-border); padding:14px 16px; background:var(--rmai-white);
  display:flex; flex-direction:column; gap:9px; }
.actions-row { display:flex; gap:9px; }
.actions-row .btn { flex:1 1 auto; justify-content:center; }
.actions-sub { display:flex; gap:9px; }
.actions-sub .btn { flex:1 1 auto; justify-content:center; }
.safety { font-size:10.5px; color:var(--rmai-fg-mut); text-align:center; letter-spacing:0.02em;
  display:flex; align-items:center; justify-content:center; gap:6px; }
.safety svg { width:12px; height:12px; stroke:var(--rmai-fg-mut); }

/* reassign menu */
.reassign { position:relative; }
.menu { position:absolute; bottom:calc(100% + 8px); left:0; right:0; background:#fff;
  border:1px solid var(--rmai-border); border-radius:10px; box-shadow:0 2px 16px rgba(26,27,37,0.10);
  overflow:hidden; z-index:30; }
.menu .mh { font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--rmai-fg-mut); padding:10px 14px 6px; }
.menu button { display:flex; width:100%; align-items:center; gap:9px; background:none; border:0;
  padding:9px 14px; font-size:13px; color:var(--rmai-fg-1); text-align:left; }
.menu button:hover { background:var(--rmai-lavender); }
.menu button.cur { color:var(--rmai-purple); font-weight:600; }
.menu .rt { margin-left:auto; font-family:var(--rmai-font-mono); font-size:10px; color:var(--rmai-fg-mut); }

/* ---------- Toast ---------- */
.toast-wrap { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:100;
  display:flex; flex-direction:column; gap:9px; align-items:center; }
.toast { display:flex; align-items:center; gap:11px; background:var(--rmai-fg-1); color:#fff;
  padding:12px 17px; border-radius:10px; box-shadow:0 4px 20px rgba(26,27,37,0.22);
  font-size:13.5px; animation:toastin 240ms var(--rmai-ease) both; max-width:440px; }
.toast.out { animation:toastout 200ms var(--rmai-ease) both; }
.toast .tick { width:22px; height:22px; border-radius:50%; background:var(--rmai-green);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.toast .tick svg { width:13px; height:13px; stroke:#fff; }
.toast b { font-weight:600; }
.toast .sub { color:#A8A8B0; font-size:12px; }
@keyframes toastin { from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }
@keyframes toastout { to{opacity:0; transform:translateY(14px);} }

/* ---------- Intro banner ---------- */
.intro { background:var(--rmai-lavender); border-bottom:1px solid #E1D6EC; padding:9px 24px;
  display:flex; align-items:center; gap:12px; font-size:12.5px; color:#5A3E76; flex:0 0 auto; }
.intro b { color:#43295C; font-weight:700; }
.intro .x { margin-left:auto; background:none; border:0; color:#8A6BA8; font-size:18px; line-height:1; padding:2px 6px; border-radius:6px; }
.intro .x:hover { background:#E1D6EC; color:#43295C; }
.intro .e { font-family:var(--rmai-font-mono); font-size:11px; background:#fff; border:1px solid #E1D6EC; padding:1px 7px; border-radius:4px; color:#7A5A96; }

@media (max-width:1180px){
  .desk { grid-template-columns:36% 38% 26%; }
}