@media (min-width:760px){.scs-kb{grid-auto-flow:row;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));overflow:visible;margin:0;padding:0}
  .hero .scs-tl,.hero .scs-tl.c4{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}}

/* Omnis wordmark — bold turquoise O with a soft glow; the rest is white on dark, ink on light */
.wm{font-weight:600;letter-spacing:.02em;line-height:1.1;color:var(--text)}
.wm-o{color:var(--logo-o);font-weight:800;text-shadow:0 0 10px rgba(47,211,192,.45),0 0 20px rgba(47,211,192,.22)}
html[data-theme=dark] .wm{color:#fff}
html[data-theme=dark] .wm-o{color:var(--logo-o-bright);text-shadow:0 0 10px rgba(47,211,192,.6),0 0 22px rgba(47,211,192,.32)}
.side-h .wm{font-size:20px}
.login h2.wm{font-size:28px}
.settings .st-note .wm{font-size:16px}

/* selection toolbar — Omnis frosted bar. Sits under the selection on touch so it
   doesn't cover the iOS callout or the native handles. */
.seltr{position:fixed;z-index:131;width:min(320px,calc(100vw - 16px));padding:10px 12px;border-radius:16px;background:var(--elevated);border:.5px solid var(--stroke);box-shadow:0 10px 30px rgba(0,0,0,.16)}
.seltr p{font-size:14px;line-height:1.45;margin:0 0 8px;white-space:pre-wrap}
.seltr button{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--text2)}
[data-theme=dark] .seltr{background:#232323}

/* Ask Omnis side panel. The composer inside is the same .comp as the main chat. */
.side-panel{position:fixed;z-index:80;right:12px;bottom:12px;width:min(400px,calc(100vw - 24px));height:min(640px,calc(100dvh - 24px));display:flex;flex-direction:column;background:var(--elevated);color:var(--text);border:.5px solid var(--stroke);border-radius:22px;box-shadow:0 18px 50px rgba(0,0,0,.2);overflow:visible}
.side-panel[hidden]{display:none}
.side-panel .side-h2{display:flex;align-items:center;gap:8px;padding:10px 10px 8px 12px;border-bottom:.5px solid var(--stroke3)}
.side-panel .side-h2 b{font-size:15px}
.side-panel .side-h2 .sp{flex:1}
.side-panel .side-mark{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#b9fff3,var(--brand-bright) 46%,#0b7f86);color:#06343a;font-weight:800;flex:none;overflow:hidden;font-size:14px;line-height:1}
.side-panel .side-mark:has(.av){background:none}
.side-panel .side-mark .av{width:28px;height:28px}
.side-panel .side-mark .av .dot{display:none}
.side-panel .side-mark .wm{font-size:14px;color:#06343a}
.side-panel .side-mark .wm-o{color:#06343a;text-shadow:none}
.side-log{flex:1;min-height:0;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
.side-q{border-radius:14px;padding:8px 10px;background:color-mix(in srgb,var(--brand) 12%,var(--elevated));border:.5px solid color-mix(in srgb,var(--brand) 35%,var(--stroke));font-size:13px}
.side-q b{display:block;font-size:11px;color:var(--brand);margin-bottom:2px}
.side-q span{white-space:pre-wrap}
.side-think{font-size:12px;color:var(--text3);padding:2px 4px}
.side-img{max-width:100%;border-radius:12px;margin-top:6px;display:block}
.side-file{font-size:12px;color:var(--text2);margin-top:4px}
.side-panel .comp{padding:6px 8px calc(8px + var(--sb))}
.side-panel .menu{bottom:58px;left:auto;inset-inline-start:8px}
.side-bubble{position:fixed;z-index:75;width:62px;height:62px;border-radius:50%;border:0;background:transparent;box-shadow:none;display:grid;place-items:center;touch-action:none;cursor:grab;padding:0}
.side-bubble[hidden]{display:none}
.side-bubble .side-face{width:62px;height:62px;display:grid;place-items:center;pointer-events:none}
.side-bubble .side-face .av{width:62px;height:62px}
.side-bubble .side-face svg{width:62px;height:62px;filter:drop-shadow(0 8px 16px rgba(0,0,0,.28))}
.side-bubble .av .dot{display:none}
.side-bubble .ub{position:absolute;top:2px;right:2px;width:12px;height:12px;border-radius:50%;background:#e5484d;border:2px solid #fff;display:none;z-index:1}
.side-bubble.unread .ub{display:block}
[data-theme=dark] .side-panel{background:#1c1c1c;box-shadow:0 18px 50px rgba(0,0,0,.55)}
[data-theme=dark] .side-bubble .ub{border-color:#1c1c1c}
@media (max-width:760px){
  .side-panel{left:0;right:0;bottom:0;width:100%;height:min(86dvh,720px);border-radius:22px 22px 0 0}
}

/* WhatsApp (admin): pairing code, chat toggles, thread */
.wa-code{font-family:ui-monospace,SFMono-Regular,monospace;font-size:28px;letter-spacing:3px;text-align:center;padding:16px 12px;border-radius:16px;background:var(--elevated);border:1px solid var(--stroke);margin:10px 0}
.wa-qr{display:block;width:min(220px,70vw);height:auto;margin:8px auto;border-radius:12px;background:#fff;padding:8px}
.wa-msgs{display:flex;flex-direction:column;gap:8px;padding:4px 0 12px;min-height:40vh}
.wa-msg{max-width:86%;padding:8px 12px;border-radius:16px;background:var(--bubble-agent);align-self:flex-start}
.wa-msg.out{align-self:flex-end;background:color-mix(in srgb,var(--accent) 16%,var(--elevated))}
.wa-msg b{display:block;font-size:12px;color:var(--accent);margin-bottom:2px}
.wa-msg p{white-space:pre-wrap;word-break:break-word}
.wa-msg small{display:block;color:var(--text3);font-size:11px;margin-top:4px}
.wa-media{display:inline-block;margin-top:4px;font-size:13px;color:var(--accent)}
.wa-compose{display:flex;gap:8px;align-items:flex-end;margin-top:8px}
.wa-compose textarea{flex:1;height:auto;padding:10px 14px;border-radius:16px}
.wap .st-row .sw{pointer-events:none}

/* read-aloud: round play button and remembered speed, on bubbles and the composer */
.spkbar{display:flex;align-items:center;gap:4px;width:max-content;align-self:flex-start}
.spkbar[hidden]{display:none!important}
.mwrap.user .spkbar{align-self:flex-end}
.spkbar.abs{position:absolute;inset-inline-end:6px;bottom:6px;z-index:2;margin:0}
.tr-out,.c-outwrap{position:relative}
.tr-out.has-spk textarea,.c-outwrap.has-spk textarea{padding-inline-end:92px}
.tr-out.rtl .spkbar.abs,.c-outwrap.rtl .spkbar.abs{inset-inline-end:auto;inset-inline-start:6px}
.tr-out.rtl.has-spk textarea,.c-outwrap.rtl.has-spk textarea{padding-inline-end:4px;padding-inline-start:92px}
.spk,.spkr{height:28px;border-radius:999px;display:grid;place-items:center;flex:none;background:var(--elevated);color:var(--text2);border:1px solid var(--stroke);box-shadow:var(--shadow-pill);padding:0}
.spk{width:28px}
.spk svg{width:12px;height:12px}
.spk.on{background:var(--bot);color:#fff;border-color:transparent}
.spkr{min-width:28px;padding:0 7px;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}
.spk:focus-visible,.spkr:focus-visible{outline:2px solid var(--bot);outline-offset:2px}
#spk-toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:80;max-width:min(420px,92vw);padding:10px 14px;border-radius:14px;background:var(--elevated,#fff);color:var(--text,#1b2b2d);border:1px solid var(--stroke);box-shadow:var(--shadow-pill);font-size:13px}
#spk-toast[hidden]{display:none!important}
/* Approvals box: floating round button above the mic + rounded floating window (not full screen). */
.ab-fab{position:absolute;bottom:calc(100% + 6px);right:12px;z-index:7;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:.5px solid var(--stroke);background:var(--elevated);color:var(--text3);box-shadow:var(--shadow-pill);cursor:pointer;padding:0}
.ab-fab[hidden]{display:none}
.ab-fab svg{width:18px;height:18px}
.ab-fab.on{color:var(--text);border-color:var(--stroke)}
.ab-fab .ab-n{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--danger);color:#fff;font-size:10px;font-style:normal;font-weight:600;display:grid;place-items:center;border:1.5px solid var(--chrome);font-variant-numeric:tabular-nums}
.ab-fab.pulse{animation:abp .9s ease 2}@keyframes abp{50%{transform:scale(1.15)}}
.side-panel .ab-fab{display:none}
.ab-ov{position:fixed;inset:0;z-index:60;background:#0004;display:flex;align-items:flex-end;justify-content:center;padding:12px 12px calc(84px + var(--sb,0px));animation:fi .15s}
.ab-pop{width:min(520px,100%);max-height:min(56vh,560px);display:flex;flex-direction:column;background:var(--elevated);color:var(--text);border-radius:22px;border:.5px solid var(--stroke);box-shadow:0 18px 50px #0004;overflow:hidden}
.ab-h{display:flex;align-items:center;gap:8px;padding:10px 10px 6px 12px;border-bottom:.5px solid var(--stroke3)}
.ab-tabs{flex:1;display:flex;gap:4px}
.ab-tabs button{height:30px;padding:0 12px;border-radius:999px;border:0;background:none;color:var(--text2);font:inherit;font-size:var(--fs-sm);cursor:pointer}
.ab-tabs button.on{background:var(--hover);color:var(--text);font-weight:600}
.ab-tabs i{font-style:normal;display:inline-grid;place-items:center;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--danger);color:#fff;font-size:10px;margin-inline-start:4px}
.ab-x{width:30px;height:30px;border-radius:50%;border:0;background:var(--hover);color:var(--text2);font-size:18px;line-height:1;cursor:pointer}
.ab-b{overflow:auto;padding:10px 12px 14px;-webkit-overflow-scrolling:touch}
.ab-ask{font-size:var(--bubble-fs);line-height:var(--bubble-lh);color:var(--bubble-ink);background:var(--bubble-agent);border-radius:14px;padding:8px 12px;margin-bottom:10px;max-height:28vh;overflow:auto}
.ab-item .card{margin:0;max-width:none;width:100%}
.ab-nav{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:8px;font-size:var(--fs-xs);color:var(--text3);font-variant-numeric:tabular-nums}
.ab-nav button{width:28px;height:28px;border-radius:50%;border:0;background:var(--hover);color:var(--text);font-size:16px;cursor:pointer}.ab-nav button:disabled{opacity:.35;cursor:default}
.ab-empty{padding:22px 8px;text-align:center;color:var(--text3);font-size:var(--fs-sm)}
.ab-list{display:flex;flex-direction:column}
.ab-row{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:start;padding:9px 6px;border:0;border-bottom:.5px solid var(--stroke3);background:none;color:var(--text);font:inherit;font-size:var(--fs-sm);cursor:pointer}
.ab-row:last-child{border-bottom:0}.ab-row small{font-size:var(--fs-xxs);color:var(--text3)}
.ab-row span{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-width:100%}
.ab-chip{display:inline-flex;align-items:center;gap:6px;margin-top:4px;padding:6px 12px;border-radius:999px;border:.5px solid var(--stroke);background:var(--elevated);color:var(--bubble-ink2);font:inherit;font-size:var(--bubble-sub-fs);cursor:pointer}
.ab-chip svg{width:16px;height:16px}
/* card owner routing: the sending supervisor's face + name on every card in the approvals box (same face as its chat bubbles) */
.ab-sup{display:flex;align-items:center;gap:6px;margin-bottom:6px;font-weight:inherit;max-width:100%}
.ab-av{width:22px;height:22px;flex:none;display:grid;place-items:center}
.ab-av svg{width:100%;height:100%}
.ab-nm{font-style:normal;font-size:11.5px;font-weight:300;line-height:1.2;color:var(--sup,var(--text2));opacity:.85}
.ab-to{font-style:normal;font-size:var(--fs-xxs);color:var(--text3)}
.ab-row .ab-sup{margin-bottom:2px}
.ab-tr{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;margin-top:10px}
/* «صندوق المهام» (task box) */
.tb-entry{display:flex;align-items:center;gap:10px;width:100%;margin-top:10px;padding:10px 12px;border-radius:16px;border:.5px solid var(--stroke);background:var(--elevated);color:var(--text);font:inherit;text-align:start;cursor:pointer}
.tb-entry svg{width:20px;height:20px;flex:none;color:var(--text2)}
.tb-entry span{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.tb-entry b{font-size:var(--fs-sm);font-weight:600}.tb-entry small{font-size:var(--fs-xxs);color:var(--text3)}
.tb-entry .cv{font-style:normal;color:var(--text3);font-size:18px}[dir=rtl] .tb-entry .cv{transform:scaleX(-1)}
.tb-ov{position:fixed;inset:0;z-index:61;background:var(--scrim);display:flex;align-items:flex-end;justify-content:center;padding:12px 12px calc(12px + var(--sb,0px));animation:fi .15s}
@media (min-width:700px){.tb-ov{align-items:center}}
.tb-pop{width:min(560px,100%);height:min(82vh,760px);display:flex;flex-direction:column;background:var(--elevated);color:var(--text);border-radius:22px;border:.5px solid var(--stroke);box-shadow:var(--shadow-pop);overflow:hidden}
.tb-h{display:flex;align-items:center;gap:8px;padding:12px 12px 4px 14px}
.tb-ttl{flex:1;display:flex;align-items:center;gap:8px}.tb-ttl svg{width:20px;height:20px;color:var(--text2)}.tb-ttl b{font-size:var(--fs-md,16px)}
.tb-x{width:30px;height:30px;border-radius:50%;border:0;background:var(--hover);color:var(--text2);font-size:18px;line-height:1;cursor:pointer}
.tb-tabs{display:flex;gap:4px;padding:6px 12px 8px;border-bottom:.5px solid var(--stroke3)}
.tb-tabs>[data-t]{flex:1}
.tb-tabs i{font-style:normal;font-variant-numeric:tabular-nums;opacity:.7;margin-inline-start:4px}
.tb-b{flex:1;overflow:auto;padding:10px 12px 16px;display:flex;flex-direction:column;gap:10px;-webkit-overflow-scrolling:touch}
.tb-empty{padding:28px 8px;text-align:center;color:var(--text3);font-size:var(--fs-sm)}
.tb-card{border:.5px solid var(--stroke);border-radius:16px;padding:10px 12px;background:var(--chrome,var(--elevated));display:flex;flex-direction:column;gap:8px}
.tb-top{display:flex;align-items:flex-start;gap:8px}.tb-top b{flex:1;font-size:var(--fs-sm);font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.tb-stage{flex:none;font-size:var(--fs-xxs);padding:3px 8px;border-radius:999px;background:var(--hover);color:var(--text2);white-space:nowrap}
.tb-stage.ok{background:var(--success-soft);color:var(--success)}
.tb-stage.warn{background:var(--warning-soft);color:var(--warning)}
.tb-stage.bad{background:var(--danger-soft);color:var(--danger)}
.tb-req{display:flex;flex-direction:column;gap:2px;text-align:start;border:0;border-radius:12px;padding:7px 10px;background:var(--bubble-agent,var(--hover));color:var(--text2);font:inherit;font-size:var(--fs-xs,13px);cursor:pointer}
.tb-req small{font-size:var(--fs-xxs);color:var(--text3)}
.tb-req span{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.tb-steps{list-style:none;margin:0;padding:0;display:flex;gap:2px}
.tb-steps li{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;color:var(--text3);text-align:center;line-height:1.2;position:relative}
.tb-steps li i{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--stroke);background:var(--elevated);z-index:1}
.tb-steps li:not(:last-child)::after{content:'';position:absolute;top:5px;inset-inline-start:calc(50% + 6px);width:calc(100% - 12px);height:1.5px;background:var(--stroke3)}
.tb-steps li.on{color:var(--text)}.tb-steps li.on i{background:var(--text);border-color:var(--text)}
.tb-meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:var(--fs-xxs);color:var(--text3)}
.tb-pr{color:var(--text2);font-weight:600;text-decoration:none}a.tb-pr{text-decoration:underline;text-underline-offset:2px}
.tb-next{font-size:var(--fs-xs,13px);color:var(--text2)}.tb-next small{color:var(--text3)}
.tb-more{align-self:flex-start;border:0;background:none;padding:0;color:var(--text3);font:inherit;font-size:var(--fs-xxs);cursor:pointer;text-decoration:underline}
.tb-prog{font-size:var(--fs-xxs);color:var(--text2);white-space:pre-wrap;overflow-wrap:anywhere;max-height:30vh;overflow:auto}
/* Connect WhatsApp (GOWA): built from the standard components (guide-msg, sec-card, sec-h, badge, meter,
   field/input, btn-row/btn). Only the screen-specific bits live here, and they use tokens only. */
.cw{display:flex;flex-direction:column;gap:var(--space-3);padding-bottom:40px}
.cw-steps{margin:0;padding-inline-start:20px;line-height:1.9}
.cw-code{font-family:ui-monospace,Menlo,monospace;font-size:22px;letter-spacing:3px;background:var(--brand-tint);border:2px dashed var(--brand-bright);border-radius:var(--radius-sm);padding:2px 10px;user-select:all}
.cw-qr img{width:220px;height:220px;align-self:center;background:var(--knob);border-radius:var(--radius-md)}
.cw-wait{opacity:.7}
.cw-rules{margin:0;padding-inline-start:18px;font-size:var(--fs-sm);color:var(--text2);line-height:1.8}

.card .fdet{margin:-2px 0 2px;display:grid;gap:var(--bubble-row-gap);font-size:var(--bubble-fs);line-height:var(--bubble-lh)}
.card .fdet div{display:flex;gap:8px;align-items:baseline}
.card .fdet dt{color:var(--bubble-ink2);flex:0 0 auto}.card .fdet dt::after{content:':'}
.card .fdet dd{margin:0;color:var(--bubble-ink);overflow-wrap:anywhere;unicode-bidi:plaintext}
.card .later{margin-top:2px}
.card .later-done{color:var(--text3)}
/* supervisor face + name on each bot reply (whichever supervisor sent it) */
.mwrap.bot.has-sup{padding-inline-start:34px}
.mwrap.bot.has-sup .sup-av{position:absolute;inset-inline-start:0;top:18px;width:28px;height:28px;display:grid;place-items:center;background:none;border:0;box-shadow:none} /* just the face: no circle, ring or backdrop */
.mwrap.bot.has-sup .sup-av svg{width:100%;height:100%}
.mwrap.bot.has-sup .sup-nm{font-size:11.5px;font-weight:300;line-height:1.2;color:var(--sup);opacity:.85;padding-inline:4px;letter-spacing:.1px}
/* «رد خاص»: reply button under each supervisor bubble (look comes from .btn.sm.ghost) + chip above the compose box */
/* «رد خاص»: round icon next to the read-aloud ▸ / speed buttons; look from .icon-btn.sm (layout only here) */
.m-acts{display:flex;align-items:center;gap:4px;width:max-content;align-self:flex-start}
.m-acts>.spkbar{align-self:auto}
.replying.prv{color:var(--text2)}
.replying.prv span{border-inline-start-color:var(--brand)}
.replying.norm span{border-inline-start-color:var(--stroke)}
.replying .prv-av{width:18px;height:18px;flex:none;display:grid;place-items:center;font-style:normal}
.replying .prv-av svg{width:100%;height:100%}
/* «رد عابر»: sits right next to «رد خاص» (look from .btn.sm.ghost), its chip, the quoted bubble inside «اسأل Omnis», and a short flash on the box */
.replying.trn{color:var(--text2)}
.replying.trn span{border-inline-start-color:var(--brand)}
.side-tq{max-width:100%;border-radius:12px;padding:6px 10px;border-inline-start:3px solid var(--brand);background:color-mix(in srgb,var(--brand) 8%,var(--elevated));font-size:12.5px;color:var(--text2)}
.side-tq b{display:block;font-size:11px;font-weight:600;color:var(--brand);margin-bottom:2px}
.side-tq span{white-space:pre-wrap;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.side-panel.tr-flash{animation:tr-flash 1.4s ease-out}
@keyframes tr-flash{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 55%,transparent)}100%{box-shadow:0 0 0 14px color-mix(in srgb,var(--brand) 0%,transparent)}}
@media (prefers-reduced-motion:reduce){.side-panel.tr-flash{animation:none}}
/* «فتح إعدادات المشرف» sheet: layout only; fields and buttons are the standard .input / .btn */
.vlt .vlt-f{display:grid;gap:var(--space-2);padding:var(--space-3) var(--space-4) var(--space-1)}
.vlt .vlt-e{padding:0 var(--space-4);color:var(--danger);font-size:var(--fs-sm)}
.vlt .vlt-a{padding:var(--space-1) var(--space-4) var(--space-2)}
.vlt .vlt-x{justify-content:center}
.vlt .vlt-d{display:grid;gap:var(--space-1);padding:var(--space-3) var(--space-4) 0}
/* Task button in the chat + «ملاحظة حول المهمة» (owner msg a5b900e3). Same look as the approvals button, right above it. */
.tb-fab{position:absolute;bottom:calc(100% + 6px);right:12px;z-index:7;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:.5px solid var(--stroke);background:var(--elevated);color:var(--text3);box-shadow:var(--shadow-pill);cursor:pointer;padding:0}
.tb-fab svg{width:18px;height:18px}
.comp:has(> .ab-fab:not([hidden])) .tb-fab{bottom:calc(100% + 46px)}
.tb-fab.on{color:var(--text)}
.tb-fab .tb-n{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--text);color:var(--on-primary);font-size:10px;font-style:normal;font-weight:600;display:grid;place-items:center;border:1.5px solid var(--chrome);font-variant-numeric:tabular-nums}
.side-panel .tb-fab{display:none}
/* «صندوق اسأل أومنيس الثابت» (owner msg 0556b3e0): the «اسأل Omnis» box, same shape, size and badge as .tb-fab, on top of
   the approvals / task / WhatsApp / email stack (each one present adds a 40px step), replacing the floating face for the owner */
.comp:has(> .ab-fab:not([hidden])){--as-ab:1}
.comp:has(> .tb-fab){--as-tb:1}
.comp:has(> .wb-fab){--as-wb:1}
.comp:has(> .eb-fab){--as-eb:1}
.as-fab{position:absolute;bottom:calc(100% + 6px + 40px * (var(--as-ab,0) + var(--as-tb,0) + var(--as-wb,0) + var(--as-eb,0)));right:12px;z-index:7;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:.5px solid var(--stroke);background:var(--sec-bg);color:var(--text3);box-shadow:var(--shadow-pill);cursor:pointer;padding:0}
.as-fab svg{width:18px;height:18px}
.as-fab.on{color:var(--text)}
.as-fab .as-n{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--btn-bg);color:var(--btn-text);font-size:10px;font-style:normal;font-weight:600;display:grid;place-items:center;border:1.5px solid var(--chrome);font-variant-numeric:tabular-nums}
.side-panel .as-fab{display:none}
.as-fab.pulse{animation:abp .9s ease 2}
/* the card Omnis may add under a side reply («أرسل المهمة للمشرف»), and the «انقل للمحادثة الرئيسية» confirm */
.side-task{display:flex;flex-direction:column;gap:6px;border-radius:14px;padding:10px 12px;background:var(--elevated);border:.5px solid var(--stroke);font-size:13px}
.side-task .sk-ttl{display:flex;align-items:center;gap:6px;color:var(--brand)}
.side-task .sk-ttl svg{width:16px;height:16px;flex:none}
.side-task .sk-ttl b{font-size:12px}
.side-task .sk-t{font-weight:600}
.side-task .sk-x{white-space:pre-wrap;color:var(--text2)}
.tb-ov.tb-in-chat{flex-direction:row;background:var(--scrim);align-items:flex-end;justify-content:center;padding:12px 12px calc(84px + var(--sb,0px))}
.tb-ov.tb-in-chat .tb-pop{height:auto;max-height:min(62vh,600px);width:min(520px,100%)}
.tb-note{align-self:flex-start;gap:0;width:34px;height:34px;min-width:34px;padding:0;justify-content:center;border-radius:50%}.tb-note svg{width:18px;height:18px;flex:none}
.tn-ov{position:fixed;inset:0;z-index:63;background:var(--scrim);display:flex;flex-direction:row;align-items:flex-end;justify-content:center;padding:12px 8px calc(10px + var(--sb,0px));animation:fi .15s}
.tn-pop{width:min(560px,100%);display:flex;flex-direction:column;background:var(--elevated);color:var(--text);border-radius:22px;border:.5px solid var(--stroke);box-shadow:var(--shadow-pop)}
.tn-h{display:flex;align-items:center;gap:8px;padding:12px 12px 4px 14px}
.tn-ttl{flex:1;display:flex;align-items:center;gap:8px}.tn-ttl svg{width:20px;height:20px;color:var(--text2)}.tn-ttl b{font-size:var(--fs-md,16px)}
.tn-task{margin:4px 12px 2px;padding:8px 10px;border-radius:14px;border:.5px solid var(--stroke);background:var(--chrome,var(--elevated));display:flex;flex-direction:column;gap:3px}
.tn-top{display:flex;align-items:flex-start;gap:8px}.tn-top b{flex:1;font-size:var(--fs-sm);font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.tn-task small{font-size:var(--fs-xxs);color:var(--text3);overflow-wrap:anywhere}
.tn-pop .comp{padding:6px 10px 12px}
.tn-pop .menu{left:auto;inset-inline-start:8px;bottom:58px}
.tn-ref{display:flex;align-items:center;gap:6px;margin-bottom:6px;padding:5px 9px;border-radius:10px;background:var(--hover);color:inherit;font-size:var(--bubble-sub-fs);line-height:var(--bubble-sub-lh);font-weight:600}
.tn-ref svg{width:14px;height:14px;flex:none}
/* «وجه المشرف المستلم» + «توجيه لمشرف» (owner request ae5d7f70): layout only, tokens only.
   «لون التطبيق يتبع وجه المشرف» (owner msg 256a9e3b): the owner's bubble has NO face; under it a very small face of the
   supervisor that took it + its name + send icon (.rcv-ln), the bubble itself in that supervisor's colour (.fc-N below). */
.rcv-ln{display:flex;justify-content:flex-end;max-width:var(--bubble-max-w-sent);margin-top:2px}
.rcv{display:inline-flex;align-items:center;gap:var(--space-1);max-width:100%;padding:0 var(--space-1);margin:0;border:0;border-radius:var(--radius-pill);background:none;color:var(--text3);font:inherit;font-size:var(--fs-xxs);line-height:var(--rcv-av);cursor:pointer;-webkit-tap-highlight-color:transparent}
.rcv:focus-visible{outline:0;box-shadow:var(--focus-ring)}
.rcv-av{width:var(--rcv-av);height:var(--rcv-av);flex:none;display:grid;place-items:center;line-height:0}
.rcv-av svg{width:100%;height:100%}
.rcv-nm{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:var(--fw-medium)}
.rcv-pin{flex:none;display:inline-flex;width:var(--rcv-pin);height:var(--rcv-pin);color:var(--brand)}.rcv-pin svg{width:100%;height:100%;display:block}
/* «لون التطبيق يتبع وجه المشرف»: a face's colour by class, never an inline style. --face-N / --on-face-N / --face-N-t are
   generated into theme-tokens.css (scripts/gen-face-theme.mjs). The chat and an owner bubble take it as --bot (+ readable
   --on-bot), a supervisor reply as --sup (its name, readable on the page in light and dark). */
.fc-0{--fc:var(--face-0);--on-fc:var(--on-face-0);--fc-t:var(--face-0-t)}.fc-1{--fc:var(--face-1);--on-fc:var(--on-face-1);--fc-t:var(--face-1-t)}
.fc-2{--fc:var(--face-2);--on-fc:var(--on-face-2);--fc-t:var(--face-2-t)}.fc-3{--fc:var(--face-3);--on-fc:var(--on-face-3);--fc-t:var(--face-3-t)}
.fc-4{--fc:var(--face-4);--on-fc:var(--on-face-4);--fc-t:var(--face-4-t)}.fc-5{--fc:var(--face-5);--on-fc:var(--on-face-5);--fc-t:var(--face-5-t)}
.fc-6{--fc:var(--face-6);--on-fc:var(--on-face-6);--fc-t:var(--face-6-t)}.fc-7{--fc:var(--face-7);--on-fc:var(--on-face-7);--fc-t:var(--face-7-t)}
.fc-8{--fc:var(--face-8);--on-fc:var(--on-face-8);--fc-t:var(--face-8-t)}.fc-9{--fc:var(--face-9);--on-fc:var(--on-face-9);--fc-t:var(--face-9-t)}
.fc-10{--fc:var(--face-10);--on-fc:var(--on-face-10);--fc-t:var(--face-10-t)}.fc-11{--fc:var(--face-11);--on-fc:var(--on-face-11);--fc-t:var(--face-11-t)}
.fc-12{--fc:var(--face-12);--on-fc:var(--on-face-12);--fc-t:var(--face-12-t)}
.chat.has-fc,.mwrap.user.has-fc{--bot:var(--fc);--on-bot:var(--on-fc)}
.mwrap.has-sup.has-fc{--sup:var(--fc-t)}
.sf-av{width:var(--sup-av);height:var(--sup-av);flex:none;display:grid;place-items:center;line-height:0}
.sf-av svg{width:100%;height:100%}
.sf-sheet .faces{margin-top:var(--space-1)}
/* the cross-fade when the app changes colour (View Transitions; skipped with reduced motion in public/face-theme.js) */
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}
.fwd-to{display:flex;align-items:center;gap:4px;max-width:80%;font-size:var(--fs-xxs);color:var(--text3)}
.fwd-to svg{width:12px;height:12px;flex:none}
.fwd-to .bad{font-style:normal;color:var(--danger)}
.fwd-pick .fwd-av{width:28px;height:28px;flex:none;display:grid;place-items:center;font-style:normal}
.fwd-pick .fwd-av svg{width:100%;height:100%}
.fwd-pick .fwd-x{justify-content:center;color:var(--text3)}
/* «مساحة عمل لشريك سحابيفاي» (public/workspace-partners.js): layout only; look from .sec-card / .btn / .badge / .input */
.wsp-clients{padding:0 0 var(--space-2)}
.wsp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--space-2)}
.wsp-card{width:100%;text-align:start;font:inherit;color:inherit;cursor:pointer}
.wsp-envs{display:grid;gap:var(--space-3)}
.wsp-acts{display:flex;flex-wrap:wrap;gap:var(--space-2)}
/* «تطبيق مجلس»: the «مجلس» app full screen inside Omnis (public/app.js openMajlisApp). Layout and motion only. */
.mjf{padding-bottom:var(--sb);animation:mjf-in .3s cubic-bezier(.2,.8,.2,1)}
.mjf.out{animation:mjf-out .22s ease forwards}
.mjf-frame{flex:1;width:100%;min-height:0;border:0;display:block;background:var(--chrome)}
@keyframes mjf-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes mjf-out{to{opacity:0;transform:translateY(24px)}}
@media (prefers-reduced-motion:reduce){.mjf,.mjf.out{animation:none}}

/* ---------- «وجوه المشرفين في الفقاعات وحالة العمل» (owner msg 08b25879, study d9b3afa8) — layout only, tokens only ----------
   1) fixed safe margin on the floating side buttons' side (help, mail, WhatsApp, tasks, approvals) for every chat item, so no
      bubble, card or image ever sits under them. The buttons are pinned to the PHYSICAL right in Arabic and English alike, so
      the margin is physical too; it only applies while at least one button is on screen. */
.chat:has(> .comp[data-composer=main] > :is(.ab-fab:not([hidden]),.tb-fab,.wb-fab,.eb-fab,.as-fab)) > .msgs{padding-right:var(--fab-safe)}
/* «أزرار الجنب تغطي الفقاعات» (owner msg 67d0bb24, IMG_2258): on a phone the side-button rail is always there in the chat, and the
   :has() rule above can miss it (iOS re-check after the buttons are added, the filtered supervisor pane). Reserve the same physical
   right margin without :has() on every chat list, main + «المحادثة مع …» pane. Physical right in Arabic and English, like the rail. */
@media (max-width:699px){main.chat .msgs{padding-right:var(--fab-safe)}}
/* 3) the working-status row in «المشرف»: stacked faces + the names, then the status text */
.typing.has-stack{align-items:flex-start}
.typing.has-stack > .face-stack{margin-top:2px}
.typing.has-stack > .col{flex:1;min-width:0;max-width:440px}
.typing.has-stack .lanes.n2,.typing.has-stack .lanes.n3,.typing.has-stack .lanes.num{width:100%}
.typing .wk-nm{font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start}
/* «مين يشتغل الحين» sheet */
.wk-sheet .wk-list{max-height:min(60vh,520px);overflow:auto;overscroll-behavior:contain}
.wk-row{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:.5px solid var(--stroke3)}
.wk-row:last-child{border-bottom:0}
.wk-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-1)}
.wk-nmrow{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.wk-nmrow b{font-size:var(--fs-lg);font-weight:var(--fw-medium);color:var(--text);unicode-bidi:plaintext}
.wk-now{font-size:var(--fs-sm);color:var(--text2);display:flex;flex-direction:column;gap:2px;overflow-wrap:anywhere}
.wk-tasks{display:flex;flex-direction:column;gap:2px}
.wk-task{display:flex;align-items:center;gap:var(--space-2);width:100%;min-width:0;padding:var(--space-1) var(--space-2);margin:0;border:0;border-radius:var(--radius-sm);background:var(--hover);color:var(--text2);font:inherit;font-size:var(--fs-sm);text-align:start}
.wk-task[data-goto]{cursor:pointer}
.wk-task[data-goto]:active{background:var(--active)}
.wk-tl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;unicode-bidi:plaintext}
.wk-pg{display:inline-flex;align-items:center;gap:var(--space-1);flex:none}
.wk-pg .prog{width:56px}
.wk-pg .prog i{background:var(--brand)}
.wk-pg small{font-size:var(--fs-xxs);color:var(--text3);font-variant-numeric:tabular-nums}
.wk-empty{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-6) var(--space-4);color:var(--text3);font-size:var(--fs-sm)}
.wk-empty span:first-child{font-size:var(--fs-xl);color:var(--green)}
.wk-foot{padding:var(--space-3) var(--space-4)}
.wk-w0{width:0%}.wk-w1{width:5%}.wk-w2{width:10%}.wk-w3{width:15%}.wk-w4{width:20%}.wk-w5{width:25%}.wk-w6{width:30%}.wk-w7{width:35%}.wk-w8{width:40%}.wk-w9{width:45%}.wk-w10{width:50%}.wk-w11{width:55%}.wk-w12{width:60%}.wk-w13{width:65%}.wk-w14{width:70%}.wk-w15{width:75%}.wk-w16{width:80%}.wk-w17{width:85%}.wk-w18{width:90%}.wk-w19{width:95%}.wk-w20{width:100%}
.wk-sheet[dir=ltr] .cf-t{direction:ltr}
/* «نبض كمبيوتر المشرف» card inside the live viewer */
.pcv .hb-box.hb-float{margin:6px 10px;padding:4px 10px;border-radius:12px;background:var(--surface);font-size:13px}
/* «اختصار صندوق البريد» (owner msg 2c0595cc): same pill as the tabs, pushed to the far end of the row */
.ab-tabs .ab-mail{margin-inline-start:auto;display:inline-flex;align-items:center;gap:4px;color:var(--text2)}
.ab-tabs .ab-mail svg{width:15px;height:15px}
.ab-tabs .ab-mail:hover{background:var(--hover);color:var(--text)}

/* manual task status (owner 69cf21f1): stage pill opens a light menu; local only */
.tb-stage-btn{border:0;font:inherit;font-size:var(--fs-xxs);cursor:pointer;display:inline-flex;align-items:center;gap:3px;transition:box-shadow .15s,transform .1s}
.tb-stage-btn svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.tb-stage-btn:hover{box-shadow:0 0 0 3px color-mix(in srgb,currentColor 12%,transparent)}.tb-stage-btn:active{transform:scale(.96)}
.tb-stage-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.tb-stage.mute{background:var(--hover);color:var(--text3);text-decoration:line-through}
.tb-stage.man::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.6}
.tb-acts{display:flex;flex-direction:column;gap:7px;padding:9px 10px;border-radius:14px;background:color-mix(in srgb,var(--elevated) 70%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:.5px solid var(--stroke);box-shadow:var(--shadow-card);animation:tbIn .16s ease-out}
.tb-acts small{color:var(--text3);font-size:var(--fs-xxs)}
.tb-acts>div{display:flex;flex-wrap:wrap;gap:6px}
.tb-act{border:.5px solid var(--stroke);background:var(--chrome,var(--elevated));color:var(--text);font:inherit;font-size:var(--fs-xs);padding:6px 12px;border-radius:999px;cursor:pointer}
.tb-act.ok{background:var(--success-soft);color:var(--success);border-color:transparent}
.tb-act.cx{background:var(--warning-soft);color:var(--warning);border-color:transparent}
.tb-act.dl{color:var(--danger)}.tb-act.rs{background:var(--hover)}
.tb-toast{position:sticky;bottom:8px;margin:6px 12px 10px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 14px;border-radius:14px;background:color-mix(in srgb,var(--elevated) 82%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:.5px solid var(--stroke);box-shadow:var(--shadow-pop);font-size:var(--fs-xs)}
.tb-undo{border:0;background:none;color:var(--accent,var(--success));font:inherit;font-weight:600;cursor:pointer}
@keyframes tbIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* «يصير الحين» (66760d3b): team line + live state under the plan; same tokens as the card */
.tb-team{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:var(--fs-xxs);color:var(--text3)}.tb-team b{font-weight:600;color:var(--text2)}
.tb-live{display:flex;flex-direction:column;gap:3px;border-radius:12px;padding:7px 10px;background:var(--hover);font-size:var(--fs-xxs);color:var(--text2)}
.tb-live-h{display:flex;align-items:center;gap:8px}.tb-live-h>small:first-child{color:var(--text3)}.tb-live-ago{margin-inline-start:auto;color:var(--text3)}
.tb-live .tb-stage{display:inline-flex;align-items:center;gap:5px}.tb-live .tb-stage i{width:6px;height:6px;border-radius:50%;background:currentColor}
.tb-live.ok .tb-stage i{animation:tbPulse 1.6s ease-in-out infinite}@keyframes tbPulse{50%{opacity:.35}}@media (prefers-reduced-motion:reduce){.tb-live.ok .tb-stage i{animation:none}}
.tb-live-t small{color:var(--text3)}.tb-live-t,.tb-live-r{overflow-wrap:anywhere}
.tb-live-c{color:var(--text3);font-variant-numeric:tabular-nums}.tb-live-c.low{color:var(--danger)}