/* OEM client portal · light-first design pass matching the staff app language:
   hairline borders, one accent family, calm weights, soft depth, real motion.
   Dark mode is layered on top by portal.html's body.dark overrides. */
:root{
  --page:#f6f7fb; --ink:#101426; --muted:#5f6779; --faint:#98a0b3; --line:#e7eaf2; --line-2:#d9deea;
  --brand:#111827; --accent:#635bff; --accent-2:#8b5cf6; --accent-soft:rgba(99,91,255,.10);
  --blue:#635bff; --tan:#f8e3c2; --card:#fff;
  --radius:14px; --radius-sm:10px; --shadow:0 1px 2px rgba(16,20,38,.06);
  --hoverGlow:0 6px 18px rgba(16,20,38,.08);
  --ok:#178a50; --warn:#b25e09; --bad:#c2255c;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--page);color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration:none}
h1,h2,h3{letter-spacing:-.015em;margin:0;font-weight:700}

/* top bar */
.top{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.86);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .bar{max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:16px;padding:12px 20px}
.logo{font-weight:700;font-size:17px;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.logo .badge{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;padding:4px 8px;border-radius:9px;font-size:13px;font-weight:800}
.spacer{flex:1}
.who{color:var(--muted);font-size:13px}

.wrap{max-width:1120px;margin:26px auto;padding:0 20px}
.rowbetween{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* buttons · one accent, tactile press */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 14px;border:1px solid var(--line-2);
  border-radius:11px;color:var(--ink);font-weight:600;background:#fff;
  cursor:pointer;transition:background .13s ease,border-color .13s ease,transform .12s ease,box-shadow .14s ease;font-size:14px}
.btn:hover{background:#f3f5fb;border-color:#cdd4e4}
.btn:active{transform:scale(.97)}
.btn.cta{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 3px 10px rgba(99,91,255,.28)}
.btn.cta:hover{background:#574fe8;border-color:#574fe8;box-shadow:0 5px 16px rgba(99,91,255,.36)}
.btn.sm{padding:7px 11px;font-size:13px}
.btn.ghost{background:transparent;border-color:transparent}
.btn.ghost:hover{background:#eef1f8}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn.danger{color:var(--bad);border-color:#f0cddc;background:transparent}
.btn.danger:hover{background:#fdf1f6;border-color:#e8b7cd}

/* cards · hairline + whisper of depth, entrance motion */
.panel,.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;box-shadow:var(--shadow);animation:cardIn .28s cubic-bezier(.2,.85,.25,1) both}
@keyframes cardIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.grid{display:grid;gap:16px}
.grid.cards{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}

/* client card */
.client{display:flex;flex-direction:column;gap:8px;transition:box-shadow .16s,border-color .16s}
.client:hover{border-color:var(--line-2);box-shadow:var(--hoverGlow)}
.client .name{font-weight:600;font-size:16px}
.client .dom{color:var(--muted);font-size:13px;word-break:break-all}

/* chips · soft tints, calm weight */
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);padding:4px 10px;
  border-radius:999px;color:var(--muted);font-size:12px;background:#fff;font-weight:600}
.chip.active{color:var(--ok);border-color:#bfe3cb;background:#f2faf5}
.chip.onboarding{color:var(--warn);border-color:#f0dcbb;background:#fdf8ef}
.chip.paused{color:var(--muted)}
.chip.churned{color:var(--bad);border-color:#f0cddc;background:#fdf3f7}
.dot{width:8px;height:8px;border-radius:50%;background:currentColor}

/* forms */
label{display:block;font-weight:600;font-size:12.5px;margin:10px 0 5px;color:var(--muted)}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--line-2);border-radius:10px;
  font:inherit;background:#fff;color:var(--ink);transition:border-color .13s,box-shadow .13s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft)}
textarea{min-height:80px;resize:vertical}
.field2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:640px){.field2{grid-template-columns:1fr}}

/* modal · spring open over a blurred page */
.backdrop{position:fixed;inset:0;background:rgba(16,20,38,.32);backdrop-filter:blur(3px);display:none;align-items:center;
  justify-content:center;z-index:90;padding:16px}
.backdrop.open{display:flex}
.modal{width:min(560px,96vw);background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:0 24px 60px rgba(16,20,38,.22);overflow:hidden;animation:modalIn .22s cubic-bezier(.2,.9,.3,1.12)}
@keyframes modalIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.modal h3{padding:15px 18px;border-bottom:1px solid var(--line);font-size:15px}
.modal .body{padding:18px;max-height:70vh;overflow:auto}
.modal .foot{padding:14px 18px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end}

/* audit log */
.log{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:12px;white-space:pre-wrap;
  background:#101426;color:#d7e3ff;border-radius:12px;padding:12px;max-height:260px;overflow:auto}
.deploy-row{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.deploy-row:last-child{border-bottom:none}
.muted{color:var(--muted)}
.hint{color:var(--muted);font-size:12px;margin-top:6px}
.err{color:var(--bad);font-size:13px;margin-top:8px}
.center{min-height:70vh;display:grid;place-items:center}
.stack{display:flex;flex-direction:column;gap:2px}
.chip.staff{color:#4c46d6;border-color:#d5d2ff;background:#f4f3ff}
.chip.client{color:var(--warn);border-color:#f0dcbb;background:#fdf8ef}
.chip.owner,.chip.admin{color:#4c46d6;border-color:#d5d2ff;background:#f4f3ff}
.chip.member{color:var(--muted)}
.chip.disabled{color:var(--bad);border-color:#f0cddc}

/* messaging */
.mail{display:grid;grid-template-columns:280px 1fr;gap:16px;align-items:stretch}
@media(max-width:760px){.mail{grid-template-columns:1fr}.mail .convlist.hide-m{display:none}}
.convlist{max-height:72vh;overflow:auto}
.conv{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;cursor:pointer;border:1px solid transparent;transition:background .12s,border-color .12s}
.conv:hover{background:#f2f3fb}
.conv.on{background:var(--accent-soft);border-color:#d9d6ff}
.conv .nm{font-weight:600;font-size:14px}
.conv .sub{color:var(--muted);font-size:12px}
.conv .unread{margin-left:auto;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border-radius:999px;font-size:11px;padding:2px 7px;font-weight:800;box-shadow:0 2px 8px rgba(99,91,255,.35)}
.thread{display:flex;flex-direction:column;height:72vh}
.msgs{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:12px;padding:6px 4px}
.composer{flex:0 0 auto}
.msg{max-width:78%}
.msg.mine{align-self:flex-end;text-align:right}
.msg .meta{font-size:12px;margin-bottom:3px}
.msg .bubble{display:inline-block;background:#f2f4fa;border:1px solid var(--line);border-radius:15px;
  padding:9px 12px;font-size:14px;text-align:left;line-height:1.5;box-shadow:0 1px 2px rgba(16,20,38,.04)}
.msg.mine .bubble{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border-color:transparent;box-shadow:0 3px 10px rgba(99,91,255,.24)}
.composer{display:flex;gap:6px;align-items:flex-end;margin-top:12px;padding:6px 6px 6px 8px;
  background:#fff;border:1px solid var(--line-2);border-radius:18px;box-shadow:var(--shadow);transition:border-color .16s,box-shadow .16s}
.composer:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.composer #oemBody{flex:1;resize:none;min-height:26px;max-height:170px;border:0!important;background:transparent!important;box-shadow:none!important;padding:8px 4px;border-radius:0;outline:none}
.attach-btn{align-self:flex-end;border:0;background:transparent;border-radius:12px;width:38px;min-width:38px;height:38px;
  font-size:17px;cursor:pointer;color:var(--muted);transition:background .15s,color .15s,transform .1s}
.attach-btn:hover{background:#eef1f8;color:var(--ink)}.attach-btn:active{transform:scale(.9)}
.composer-send{align-self:flex-end;width:38px;min-width:38px;height:38px;border:0;border-radius:13px;cursor:pointer;
  background:linear-gradient(135deg,#635bff,#8b5cf6);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(99,91,255,.34);transition:transform .14s cubic-bezier(.2,.9,.3,1.4),box-shadow .14s,opacity .14s}
.composer-send:hover{box-shadow:0 6px 18px rgba(99,91,255,.5)}
.composer-send:active{transform:scale(.86)}
.composer-send:disabled{opacity:.45;box-shadow:none;cursor:default}
.composer-send.sending{animation:sendpulse .8s ease-in-out infinite}
@keyframes sendpulse{0%,100%{opacity:.55}50%{opacity:1}}
.msgs .msg{animation:msgIn .26s cubic-bezier(.2,.85,.25,1) both}
@keyframes msgIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.pending{display:flex;flex-wrap:wrap;gap:6px;padding:2px 0 8px}
.pend-chip .x{cursor:pointer;color:var(--bad);margin-left:2px}
.atts{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.msg.mine .atts{align-items:flex-end}
.att-img{max-width:min(300px,72vw);max-height:300px;border-radius:12px;border:1px solid var(--line);display:block}
.att-vid{max-width:min(340px,80vw);border-radius:12px;border:1px solid var(--line);background:#000;display:block}
.att-file{display:inline-flex;align-items:center;gap:8px;background:#f2f4fa;border:1px solid var(--line);
  border-radius:12px;padding:9px 12px;font-size:13px;font-weight:600;color:var(--ink);max-width:min(320px,80vw);transition:background .12s}
.att-file span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.att-file:hover{background:#eaedf8}
.mrow{display:flex;align-items:flex-start;gap:6px}
.msg.mine .mrow{flex-direction:row-reverse}
.bubble.deleted{background:transparent;border:1px dashed var(--line-2);color:var(--muted);box-shadow:none}
.edited{font-size:11px;color:var(--muted)}
.msg-actions{display:none;gap:2px}
.msg:hover .msg-actions,.msg.active .msg-actions{display:flex}
.msg-actions button{background:#fff;border:1px solid var(--line);border-radius:7px;color:var(--muted);cursor:pointer;font-size:12px;padding:3px 6px;transition:background .12s,color .12s}
.msg-actions button:hover{background:var(--accent-soft);color:var(--ink)}
.rbar{display:flex;gap:5px;flex-wrap:wrap;margin-top:4px}
.msg.mine .rbar{justify-content:flex-end}
.react-pill{background:#fff;border:1px solid var(--line);border-radius:999px;padding:1px 8px;font-size:12px;cursor:pointer;color:var(--ink);transition:border-color .12s,background .12s}
.react-pill.me{border-color:var(--accent);background:var(--accent-soft)}
.rpicker{position:absolute;display:none;background:#fff;border:1px solid var(--line);border-radius:10px;padding:4px;gap:2px;z-index:20;box-shadow:0 10px 30px rgba(16,20,38,.2)}
.rpicker.open{display:flex}
.rpicker button{background:none;border:none;font-size:18px;cursor:pointer;padding:3px 5px;border-radius:7px}
.rpicker button:hover{background:var(--accent-soft)}
.thread{position:relative}
.typing{min-height:16px;font-size:12px;color:var(--muted);font-style:italic;padding:2px 6px}

/* touch: actions appear only on the message you tapped */
@media (hover: none){
  .msg-actions button{padding:6px 10px;font-size:14px}
}

/* custom in-app context menu (dark, sits above the light UI) */
.ctxm{position:fixed;z-index:300;min-width:190px;background:#181b22;border:1px solid #333a47;border-radius:10px;
  padding:5px;box-shadow:0 16px 44px rgba(0,0,0,.35);display:none;font-size:13px}
.ctxm.open{display:block}
.ctxm button{display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;color:#e8eaf1;
  text-align:left;padding:8px 10px;border-radius:7px;cursor:pointer;font:inherit}
.ctxm button:hover:not([disabled]){background:#242833}
.ctxm button[disabled]{opacity:.35;cursor:default}
.ctxm .k{margin-left:auto;color:#6b7280;font-size:11px}
.ctxm hr{border:none;border-top:1px solid #2a2f3a;margin:4px 2px}

/* theater viewer for attachments (always dark, sits above the light UI) */
.vw{position:fixed;inset:0;background:rgba(5,6,9,.93);display:none;z-index:200;align-items:center;justify-content:center;padding:58px 60px 22px}
.vw.open{display:flex}
.vw-bar{position:absolute;top:0;left:0;right:0;height:48px;display:flex;align-items:center;gap:12px;padding:0 14px;
  color:#e8eaf1;background:rgba(0,0,0,.4);font-size:13px}
.vw-name{font-weight:700;max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vw-count{color:#9aa1b2}
.vw-sp{flex:1}
.vw-dl{color:#7aa2ff;font-weight:700;text-decoration:none}
.vw-x{background:none;border:none;color:#e8eaf1;font-size:18px;cursor:pointer;padding:4px 8px}
.vw-body{max-width:92vw;max-height:86vh;display:flex;align-items:center;justify-content:center}
.vw-body img{max-width:92vw;max-height:86vh;object-fit:contain;border-radius:8px;display:block}
.vw-body video{max-width:92vw;max-height:86vh;border-radius:8px;background:#000;display:block}
.vw-body iframe{width:92vw;height:86vh;border:none;border-radius:8px;background:#fff}
.vw-file{color:#e8eaf1;display:flex;flex-direction:column;gap:12px;align-items:center;font-size:15px}
.vw-dlbig{background:var(--accent);color:#fff;font-weight:800;padding:9px 18px;border-radius:10px;text-decoration:none}
.vw-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);color:#fff;font-size:26px;line-height:1;cursor:pointer;width:44px;height:66px;border-radius:10px}
.vw-nav:hover{background:rgba(255,255,255,.18)}
.vw-prev{left:10px}.vw-next{right:10px}
.att-img{cursor:zoom-in}
.att-file{cursor:pointer}
.att-vwrap{position:relative;display:inline-block}
.att-exp{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.6);border:none;color:#fff;border-radius:7px;cursor:pointer;padding:3px 8px;font-size:13px}
@media(max-width:700px){
  .vw{padding:52px 6px 10px}
  .vw-nav{width:36px;height:54px;font-size:22px}
  .vw-prev{left:2px}.vw-next{right:2px}
  .vw-body iframe{width:97vw;height:78vh}
  .vw-name{max-width:40vw}
}
.erow{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.backlink{font-size:13px;color:var(--muted)}

/* prospecting */
.chip.hot{color:#c2255c;border-color:#f0cddc;background:#fdf3f7}
.chip.warm{color:var(--warn);border-color:#f0dcbb;background:#fdf8ef}
.chip.cold{color:#4c46d6;border-color:#d5d2ff;background:#f4f3ff}
.chip.unqualified{color:var(--muted)}
.chip.obj-sales{color:var(--ok);border-color:#bfe3cb;background:#f2faf5}
.chip.obj-leads{color:#4c46d6;border-color:#d5d2ff;background:#f4f3ff}
.chip.obj-calls{color:#7048e8;border-color:#dcd0ff;background:#f7f4ff}
.chip.obj-traffic{color:var(--muted)}
.chip.obj-awareness{color:var(--warn);border-color:#f0dcbb}
.ptable{width:100%;border-collapse:collapse;font-size:14px}
.ptable th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--faint);font-weight:600;
  padding:12px 14px;border-bottom:1px solid var(--line-2);position:sticky;top:0;background:#fff}
.ptable td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.ptable tbody tr{cursor:pointer;transition:background .13s}
.ptable tbody tr:hover{background:#f2f3fb}
.ptable tbody tr:last-child td{border-bottom:none}
code{background:#eef0f9;border:1px solid var(--line);border-radius:6px;padding:1px 5px;font-size:12px}

/* responsive two-column blocks (client detail, etc.) */
.cols2{grid-template-columns:1fr 1fr}
@media(max-width:820px){.cols2{grid-template-columns:1fr}}

/* mobile */
@media(max-width:680px){
  .top .bar{flex-wrap:wrap;row-gap:10px;padding:10px 14px;gap:10px}
  .top .bar > nav{order:5;flex-basis:100%;margin-left:0 !important;flex-wrap:wrap}
  .top .who{display:none}
  .wrap{margin:18px auto;padding:0 14px}
  h1{font-size:25px}
  .modal .body{max-height:76vh}
  .ptable th,.ptable td{padding:9px 10px}
  .rowbetween{gap:10px}
}

/* right-clicked element highlight */
.ctx-target{outline:2px solid var(--accent);outline-offset:-2px;border-radius:6px}

/* discord-grade messaging (portal, light theme) */
.thread{position:relative}
.pinbar{display:flex;align-items:center;gap:8px;padding:6px 8px;border-bottom:1px solid var(--line);background:#fff}
.pinbar .pb-pins{background:none;border:1px solid var(--line-2);border-radius:8px;color:var(--muted);font-size:12px;font-weight:700;padding:3px 8px;cursor:pointer}
.pinbar .pb-pins:disabled{opacity:.5;cursor:default}
.pinbar .pb-online{font-size:12px;color:#1f9d63}
.pinbar .pb-sp{flex:1}
.pinbar .pb-q{width:150px;border:1px solid var(--line-2);border-radius:8px;font-size:12px;padding:5px 8px}
.mention{background:var(--accent-soft);color:#4c46d6;border-radius:4px;padding:0 3px;font-weight:700}
.mention.me{background:#fff1dc;color:#a06a12}
.mmenu{display:none;position:absolute;left:12px;bottom:64px;z-index:40;background:#fff;border:1px solid var(--line-2);border-radius:10px;overflow:hidden;box-shadow:0 12px 30px rgba(16,20,38,.18);min-width:180px}
.mmenu.open{display:block}
.mmenu button{display:block;width:100%;text-align:left;background:none;border:none;font:600 13px Inter,sans-serif;padding:7px 10px;cursor:pointer}
.mmenu button:hover,.mmenu button.on{background:var(--accent-soft)}
.replies{margin-top:4px;font-size:12px;font-weight:700;color:#4c46d6;cursor:pointer;width:fit-content;border:1px solid var(--line-2);border-radius:8px;padding:2px 8px}
.tpanel,.spanel{display:none;position:absolute;top:0;right:0;bottom:0;width:min(340px,90%);z-index:30;background:#fff;border-left:1px solid var(--line-2);box-shadow:-14px 0 30px rgba(16,20,38,.12);flex-direction:column;overflow:hidden}
.tpanel.open,.spanel.open{display:flex}
.tpanel .ph,.spanel .ph{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line);font-size:13px}
.tpanel .px,.spanel .px{background:none;border:none;color:var(--muted);font-size:14px;cursor:pointer}
.spanel .pb{overflow:auto;flex:1}
.prow{padding:9px 12px;border-bottom:1px solid var(--line);font-size:13px;cursor:pointer}
.prow:hover{background:#f2f3fb}
.tparent{border-bottom:1px solid var(--line);background:#f7f8fc;padding:6px 10px;max-height:120px;overflow:auto}
.tmsgs{flex:1;overflow:auto;padding:8px 10px}
.tmsg{margin-bottom:10px}
.tmsg .meta{font-size:11px;color:var(--muted);margin-bottom:2px}
.tmsg .bubble{background:#f2f4fa;border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-size:13px;width:fit-content;max-width:100%}
.tcomposer{display:flex;gap:8px;padding:8px;border-top:1px solid var(--line)}
.tcomposer textarea{flex:1;border:1px solid var(--line-2);border-radius:9px;font:500 13px Inter,sans-serif;padding:8px;resize:none}
.msg.flash{animation:oemflash 1.6s ease}
@keyframes oemflash{0%,60%{background:var(--accent-soft);border-radius:10px}100%{background:transparent}}

/* chat bottom-anchor + request cards (portal, light) */
.msgs > :first-child{margin-top:auto}
.reqcard{background:#f7f8fd;border:1px solid var(--line-2);border-left:3px solid var(--accent);border-radius:12px;padding:12px 14px;max-width:420px}
.reqcard.dim{opacity:.55}
.reqhead{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.reqhead .chip{margin-left:auto;font-size:10px}
.reqic{font-size:18px}
.reqcard label{font-size:11px;margin-top:8px;display:block;font-weight:700}
.reqcard input{width:100%;border:1px solid var(--line-2);border-radius:8px;padding:8px;font:500 13px Inter,sans-serif}
.reqnote{font-size:11px;color:var(--muted);margin:8px 0 0}
.reqrow{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);font-size:13px}
.reqrow:last-child{border-bottom:none}

/* secure-submit buttons + help (portal, light base) */
.rqbtn{display:block;width:100%;margin-top:12px;padding:11px 14px;border:none;border-radius:11px;cursor:pointer;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font:800 14px Inter,sans-serif;
  letter-spacing:.2px;box-shadow:0 6px 18px rgba(99,91,255,.25);transition:transform .12s,box-shadow .12s}
.rqbtn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(99,91,255,.35)}
.rqbtn:disabled{opacity:.6;transform:none;cursor:default}
.reqhelp{margin:8px 0 2px;font-size:12px;color:var(--muted)}
.reqhelp summary{cursor:pointer;font-weight:700;color:#4c46d6}
.reqhelp p{margin:6px 0 0;line-height:1.5}
.reqrow.tot{font-weight:800;border-top:2px solid var(--line-2)}
.reqnotes{background:#f7f8fd;border:1px solid var(--line);border-radius:9px;padding:8px 10px;font-size:12px;margin-top:8px;line-height:1.5}

/* tall cards must squeeze the scroll area, never push the composer off-screen */
.thread{min-height:0}
.msgs{min-height:0}

/* read receipts (staff portal view only) */
.seenbar{text-align:right;margin:2px 2px 0;font-size:11px;font-weight:700}
.seenbar .seen{color:#1f9d63}
.seenbar .delivered{color:#98a2b3}

/* motion respects the user */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}