/* Radd dashboard — RTL Arabic-first.
   Palette: ink teal on cool paper, saffron for "needs you", palm green for "handled".
   Type: Baloo Bhaijaan 2 (display) / IBM Plex Sans Arabic (body). */
:root{
  --paper:#F3F5F2; --ink:#123A34; --line:#D8DFD9;
  --palm:#1E7A5A; --saffron:#C97A11; --card:#FFFFFF; --mut:#5C6B64;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"IBM Plex Sans Arabic",system-ui,sans-serif;font-size:16px;line-height:1.7}
.top{display:flex;justify-content:space-between;align-items:center;
  padding:14px 28px;border-bottom:1px solid var(--line);background:var(--card)}
.brand{font-family:"Baloo Bhaijaan 2";font-weight:700;font-size:30px;
  color:var(--ink);text-decoration:none}
.brand .dot{color:var(--palm)}
nav a{margin-inline-start:22px;color:var(--mut);text-decoration:none;font-weight:500}
nav a:hover,nav a:focus-visible{color:var(--ink)}
main{max-width:860px;margin:0 auto;padding:28px 20px 80px}
h2{font-family:"Baloo Bhaijaan 2";font-weight:700;font-size:24px;margin:28px 0 12px}
.banner{background:#FFF4E2;border:1px solid #EAD3A8;color:#7A5410;
  padding:10px 16px;border-radius:10px;margin-bottom:20px;font-size:14px}
/* Stats */
.stats{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.hero-stat{background:var(--ink);color:#F3F5F2;border-color:var(--ink)}
.stat .num{font-family:"Baloo Bhaijaan 2";font-weight:700;font-size:44px;line-height:1.1}
.hero-stat .num{color:#9BD8BC}
.stat .lbl{font-size:14px;color:var(--mut)}
.hero-stat .lbl{color:#CDE7DA}
/* Conversation list — the status spine on the right edge is the state signal */
.convs{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.conv a{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:14px 18px;text-decoration:none;color:inherit;
  border-inline-start:6px solid var(--palm)}
.conv.esc a{border-inline-start-color:var(--saffron)}
.conv a:hover,.conv a:focus-visible{border-color:var(--ink);border-inline-start-width:6px}
.who{font-weight:700}
.last{grid-column:1;color:var(--mut);font-size:14px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.meta{grid-row:1 / span 2;grid-column:2}
.tag{font-size:12.5px;padding:4px 10px;border-radius:99px;background:#E8ECE9;color:var(--mut)}
.tag.ok{background:#E1F2E9;color:var(--palm)}
.tag.warn{background:#FBEAD2;color:var(--saffron);font-weight:700}
.empty{background:var(--card);border:1px dashed var(--line);border-radius:12px;
  padding:26px;text-align:center;color:var(--mut)}
/* Thread */
.conv-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.thread{display:flex;flex-direction:column;gap:12px;margin:20px 0}
.msg{max-width:75%}
.msg.customer{align-self:flex-start}
.msg.agent,.msg.human{align-self:flex-end}
.bubble{padding:10px 16px;border-radius:14px;background:var(--card);
  border:1px solid var(--line)}
.msg.agent .bubble{background:#E1F2E9;border-color:#BFE2CF}
.msg.human .bubble{background:var(--ink);color:#F3F5F2;border-color:var(--ink)}
.msg-meta{font-size:12px;color:var(--mut);margin-top:3px}
.voice{color:var(--mut);font-size:13px}
/* Forms */
.replybox{display:flex;gap:10px;position:sticky;bottom:16px}
.replybox input{flex:1}
input,textarea{width:100%;padding:11px 14px;border:1px solid var(--line);
  border-radius:10px;font:inherit;background:var(--card);color:var(--ink)}
input:focus-visible,textarea:focus-visible,.btn:focus-visible,nav a:focus-visible{
  outline:2px solid var(--palm);outline-offset:2px}
.settings{display:grid;gap:16px;max-width:620px}
.settings label{display:grid;gap:6px;font-weight:500}
.check{grid-auto-flow:column;justify-content:start;align-items:center}
.check input{width:auto}
.hint{color:var(--mut)}
.btn{background:var(--palm);color:#fff;border:none;border-radius:10px;
  padding:11px 22px;font:inherit;font-weight:700;cursor:pointer}
.btn:hover{background:#166148}
.btn-warn{background:var(--saffron)}
.btn-warn:hover{background:#A96409}
@media (max-width:640px){.stats{grid-template-columns:1fr}.msg{max-width:92%}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}