/* ===========================================================================
   TRIAGE — the theme.

   An AI product for a government office has a specific problem: it must not
   look like an AI product. The chrome that signals "model" to a technology
   buyer - the gradient, the sparkle, the chat bubble - signals "toy" to a
   Collector, and worse, it signals "this thing decides things".

   So the surface here is deliberately a reading desk. Warm sand paper, a deep
   plum ink, generous measure, a text face with real weight for anything the
   machine has written. The one place colour is allowed to shout is the
   highlight over the words that drove a decision, because that is the whole
   argument: you can see WHY.

   Two structural rules:
   - The citizen's own words are always on screen, in their own script, in a
     larger size than anything the machine produced. The complaint outranks
     the analysis.
   - Every machine output sits inside a card that names its confidence and
     carries the evidence. Nothing appears as a bare assertion.
   =========================================================================== */
:root{
  --paper:#F6F2EC;
  --card:#FFFDFA;
  --card-2:#F0EAE1;
  --ink:#231A1C;
  --ink-2:#4E4247;
  --mut:#726569;
  --line:#E2D8CD;
  --line-2:#C9BCAE;
  --plum:#6B2240;
  --plum-2:#8E3457;
  --plum-soft:#F6E9EE;
  --gold:#8A6516;
  --gold-soft:#FAF0DA;
  --grn:#1F6046;
  --grn-soft:#E7F1EC;
  --red:#A32B22;
  --red-soft:#FAEBE9;
  --hi:#FFE9A8;                 /* the highlight over evidence */
  --ui:var(--f-text);
  --txt:var(--f-serif);
  --mono:var(--f-data);
  --odia:var(--f-odia);
}
*{box-sizing:border-box}
body{
  margin:0;min-height:100vh;color:var(--ink);
  font:15px/1.6 var(--ui);-webkit-font-smoothing:antialiased;
  /* GROUND: sand paper under a reading lamp. A plum wash from the top left
     over a fine two-axis grain at ~2% - it is the tooth of the paper, and it
     is what stops a warm off-white looking like an unpainted div. */
  background:
    radial-gradient(58% 40% at 10% 0%,rgba(107,34,64,.05),transparent 60%),
    repeating-linear-gradient(0deg,rgba(35,26,28,.018) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(35,26,28,.014) 0 1px,transparent 1px 3px),
    var(--paper);
}
button,input,select,textarea{font:inherit;color:inherit}
.wrap{max-width:1380px;margin:0 auto;padding:24px 26px 56px}

/* ------------------------------------------------------------------- head */
.hd{display:flex;align-items:flex-end;gap:22px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:1px solid var(--line-2)}
.hd h1{margin:0;font:600 26px/1.15 var(--txt);letter-spacing:-.015em}
.hd .sub{margin:5px 0 0;font-size:13.5px;color:var(--mut);max-width:60ch}
.hd .acts{margin-left:auto;display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.bt{
  height:38px;padding:0 16px;border:1px solid var(--line-2);border-radius:20px;
  background:var(--card);cursor:pointer;font-size:13.5px;font-weight:600;
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:.14s;
}
.bt:hover:not(:disabled){border-color:var(--plum);color:var(--plum)}
.bt:disabled{opacity:.45;cursor:default}
.bt.pri{background:var(--plum);border-color:var(--plum);color:#fff}
.bt.pri:hover:not(:disabled){background:var(--plum-2);color:#fff}
.bt svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* ------------------------------------------------------------------ split */
.cols{display:grid;grid-template-columns:400px 1fr;gap:26px;margin-top:22px;
  align-items:start}
.cols>*{min-width:0}

/* ------------------------------------------------------------- the inbox */
.inbox{background:var(--card);border:1px solid var(--line);border-radius:12px;
  overflow:hidden}
.inbox h2{margin:0;padding:13px 16px;font:600 12px var(--ui);letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut);border-bottom:1px solid var(--line);
  display:flex;gap:9px;align-items:center}
.inbox h2 .n{margin-left:auto;font-family:var(--mono);letter-spacing:0;font-size:12px}
.msg{
  width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);
  padding:13px 16px;cursor:pointer;display:block;transition:.12s;
}
.msg:last-child{border-bottom:0}
.msg:hover{background:var(--card-2)}
.msg.on{background:var(--plum-soft);box-shadow:inset 3px 0 0 var(--plum)}
.msg .mh{display:flex;gap:8px;align-items:baseline;margin-bottom:5px}
.msg .mh b{font-size:13.5px;font-weight:650}
.msg .mh .via{font-size:11.5px;color:var(--mut);margin-left:auto;white-space:nowrap}
.msg .body{font-size:13.5px;color:var(--ink-2);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.msg .body.od{font-family:var(--odia);font-size:14.5px}
.msg .chips{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap}
.chip{
  font:650 10.5px var(--ui);letter-spacing:.04em;padding:2px 7px;border-radius:10px;
  border:1px solid;white-space:nowrap;
}
.c-new{background:var(--card-2);border-color:var(--line-2);color:var(--ink-2)}
.c-done{background:var(--grn-soft);border-color:#B9D6C8;color:var(--grn)}
.c-dup{background:var(--gold-soft);border-color:#E2CC94;color:var(--gold)}
.c-urg{background:var(--red-soft);border-color:#E7B9B4;color:var(--red)}
.c-plum{background:var(--plum-soft);border-color:#E0BCCA;color:var(--plum)}

/* -------------------------------------------------------------- the panel */
.panel{display:grid;gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;
  overflow:hidden}
.card>h3{
  margin:0;padding:12px 18px;font:600 11.5px var(--ui);letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:10px;
}
.card>h3 .conf{margin-left:auto;display:flex;align-items:center;gap:8px;
  letter-spacing:0;text-transform:none;font-size:12px}
.card>h3 .conf b{font-family:var(--mono);font-weight:700;font-size:12.5px}
.meter{width:56px;height:4px;background:var(--line);border-radius:2px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--grn)}
.meter.low i{background:var(--gold)}
.card .in{padding:16px 18px}

/* the citizen's own words, bigger than anything the machine wrote */
.said{font:400 19px/1.62 var(--txt);color:var(--ink);margin:0}
.said.od{font-family:var(--odia);font-size:20px;line-height:1.75}
.said mark{background:var(--hi);padding:1px 2px;border-radius:2px;
  box-shadow:0 1px 0 #E3C468}
.saidmeta{margin:12px 0 0;font-size:12.5px;color:var(--mut);
  display:flex;flex-wrap:wrap;gap:6px 14px}
.saidmeta b{color:var(--ink-2);font-weight:600}
.trans{
  margin:14px 0 0;padding:12px 14px;background:var(--card-2);border-radius:8px;
  font-size:14px;color:var(--ink-2);line-height:1.6;
}
.trans .lb{display:block;font:650 10.5px var(--ui);letter-spacing:.13em;
  text-transform:uppercase;color:var(--mut);margin-bottom:5px}

/* what the machine concluded */
.out{display:grid;gap:13px}
.row{display:grid;grid-template-columns:132px 1fr;gap:13px;align-items:start}
.row .k{font-size:12.5px;color:var(--mut);padding-top:2px}
.row .v{font-size:15px;font-weight:600}
.row .v .why{display:block;font-size:12.5px;color:var(--mut);font-weight:400;
  margin-top:4px;line-height:1.5}
.row .v .why em{font-style:normal;background:var(--hi);padding:0 3px;border-radius:2px}

/* the duplicate evidence */
.dup{border:1px solid var(--line);border-radius:9px;padding:12px 14px;
  background:var(--card-2);margin-top:4px}
.dup .dh{display:flex;gap:9px;align-items:baseline;margin-bottom:5px}
.dup .dh b{font-size:13.5px}
.dup .dh .sc{margin-left:auto;font:700 12px var(--mono);color:var(--gold)}
.dup p{margin:0;font-size:13px;color:var(--ink-2);line-height:1.5}
.dup p.od{font-family:var(--odia)}

/* the drafted reply */
.draft{
  font:400 15.5px/1.7 var(--txt);color:var(--ink);white-space:pre-wrap;
  border-left:2px solid var(--plum);padding:2px 0 2px 15px;margin:0;
}
.draft.od{font-family:var(--odia);font-size:16px;line-height:1.85}
.caret{display:inline-block;width:2px;height:1em;background:var(--plum);
  vertical-align:-2px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.acts2{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--line)}
.acts2 .bt{flex:1;justify-content:center}

.guard{
  display:flex;gap:11px;padding:13px 15px;border-radius:9px;
  background:var(--gold-soft);border:1px solid #E6D2A4;margin:0;
}
.guard svg{width:19px;height:19px;flex:none;stroke:var(--gold);fill:none;
  stroke-width:2;margin-top:1px}
.guard b{display:block;font-size:13.5px;margin-bottom:3px;color:var(--gold)}
.guard span{font-size:13px;line-height:1.55;color:var(--ink-2);display:block}

.empty{padding:40px 22px;text-align:center;color:var(--mut);font-size:14px;
  line-height:1.6}

.note{margin:20px 0 0;padding:14px 17px;background:var(--card);
  border:1px solid var(--line);border-radius:10px;font-size:12.5px;line-height:1.65;
  color:var(--ink-2)}
.note b{color:var(--ink)}
.note.odia{border-left:3px solid var(--red)}

@media(max-width:1000px){.cols{grid-template-columns:1fr}}
@media(max-width:600px){
  .wrap{padding:18px 14px 44px}
  .row{grid-template-columns:1fr;gap:3px}
  .row .k{font-weight:600}
  .hd .acts{margin-left:0;width:100%}
}
@media(prefers-reduced-motion:reduce){.caret{animation:none}}

/* ------------------------------------------------------- touch, on a phone */
@media(max-width:620px) and (pointer:coarse){
  .bt{min-height:44px}
  .msg{min-height:56px}
}