/* Omnis standard components. Each kind of element has ONE fixed style here, built only from
   theme-tokens.css. Other stylesheets must not restyle these classes (scripts/check-theme.mjs).
   Catalogue and rules: docs/THEME-RULES.md. Flexible one-off UI may opt out with a
   theme-exempt comment that states the reason.
   Every look below reads the component tokens (--field-*, --btn-*, --sec-*) from theme-tokens.css,
   so one change there restyles every field, button and section at once. */

/* the hidden attribute always wins, even over components that set display (.btn, grids) */
[hidden]{display:none!important}

/* ---------- Buttons ----------
   .btn            primary (dark, filled): the main action of a screen or card
   .btn.ghost      secondary (outlined surface): any other action
   .btn.danger     destructive (red text on a soft red surface): unlink, delete, sign out
   .btn.brand      brand action (turquoise): start a call, open Omnis
   .btn.sm         small action chip with a specific job (copy, retry, filter); same look, smaller
   .btn.block      full width
   .btn.tile       a choice tile in a grid (icon / mark on top, name, one hint line), e.g. the mail provider grid;
                   pressed = picked (aria-pressed=true)
   .btn.fab        floating round «+» button (brand), fixed at the bottom end: the ONE «new» action of a screen
   .icon-btn / .gbtn  round icon button (back, close, more)
   .icon-btn.sm    small round icon button next to the read-aloud buttons (e.g. «رد خاص») */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-width:0;height:var(--btn-h);padding:0 var(--btn-pad-x);border:1px solid transparent;border-radius:var(--btn-radius);background:var(--btn-bg);color:var(--btn-text);font:inherit;font-size:var(--btn-fs);font-weight:var(--fw-bold);line-height:1.2;white-space:nowrap;text-align:center;cursor:pointer;transition:background .15s,opacity .15s,transform .1s}
.btn:active{transform:scale(.98)}
.btn:disabled,.btn[aria-disabled=true]{opacity:.4;pointer-events:none}
.btn:focus-visible{outline:0;box-shadow:var(--focus-ring)}
.btn svg{width:18px;height:18px;flex:none}
.btn.ghost{background:var(--btn2-bg);color:var(--btn2-text);border-color:var(--btn2-border)}
.btn.ghost:active{background:var(--btn2-bg-active)}
.btn.danger{background:var(--danger-soft);color:var(--danger);border-color:transparent}
.btn.danger.solid{background:var(--danger);color:var(--on-brand)}
.btn.brand{background:var(--brand);color:var(--on-brand)}
.btn.sm{height:var(--btn-h-sm);padding:0 var(--btn-pad-x-sm);font-size:var(--btn-fs-sm)}
.btn.block{display:flex;width:100%}
.btn.tile{height:auto;min-height:84px;flex-direction:column;gap:var(--space-1);padding:var(--space-3) var(--space-2);border-radius:var(--radius-lg);white-space:normal;text-align:center;line-height:1.3}
.btn.tile small{font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--text3)}
.btn.tile[aria-pressed=true]{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-ink)}
:root[data-theme=dark] .btn.tile[aria-pressed=true]{color:var(--brand)}
.btn.fab{position:fixed;inset-inline-end:var(--space-5);bottom:calc(var(--fab-bottom) + var(--sb,0px));z-index:15;width:var(--fab-size);height:var(--fab-size);padding:0;border-radius:var(--radius-pill);background:var(--brand);color:var(--on-brand);box-shadow:var(--shadow-fab);transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.btn.fab svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;transition:transform .25s}
.btn.fab[aria-expanded=true] svg{transform:rotate(45deg)}
.icon-btn,.gbtn{width:var(--icon-btn);height:var(--icon-btn);border-radius:var(--radius-pill);display:grid;place-items:center;background:var(--elevated);border:.5px solid var(--stroke3);box-shadow:var(--shadow-pill);color:var(--text)}
.icon-btn:active,.gbtn:active{background:var(--elevated-h)}
.icon-btn svg,.gbtn svg{width:18px;height:18px}
.icon-btn.sm{width:var(--icon-btn-sm);height:var(--icon-btn-sm);padding:0;flex:none;color:var(--text2)}
.icon-btn.sm svg{width:14px;height:14px}
.icon-btn.done{color:var(--success)} /* brief «copied» feedback */

/* ---------- Button rows ----------
   .btn-row  equal-width, equal-height buttons with one gap; follows the page direction (RTL-safe).
             Put the main action first in the markup: it lands on the start side (right in Arabic). */
.btn-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--space-2);align-items:stretch;width:100%}
.btn-row>.btn{width:100%;padding-inline:var(--space-3);overflow:hidden;text-overflow:ellipsis}
.btn-row.stack{grid-auto-flow:row}

/* ---------- Fields ----------
   .field        label + control + hint, stacked
   .input        text input / select / textarea (same height and border everywhere)
   .input.lg     large single value (phone number, code)
   One look for every text field in the app. Legacy markup is mapped onto it here (input.fi, .ws-in,
   and bare inputs inside sheets, cards, login and input rows) so no screen can drift; new markup uses .input. */
.field{display:flex;flex-direction:column;gap:var(--space-1)}
.field>label,.field-l{font-size:var(--fs-sm);color:var(--text2);font-weight:var(--fw-medium)}
.field>small,.field-hint{font-size:var(--fs-xs);color:var(--text3)}
.input,input.fi,select.fi,textarea.fi,.ws-in,
:where(.sheet,.card,.login,.row2,.pcv-bar) :where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=hidden],[type=submit],[type=button],[type=image]),select,textarea){width:100%;min-width:0;box-sizing:border-box;height:var(--field-h);padding:0 var(--field-pad-x);border:1px solid var(--field-border);border-radius:var(--field-radius);background:var(--field-bg);color:var(--field-text);font:inherit;font-size:var(--field-fs);outline:0;transition:border-color .15s,box-shadow .15s}
.input:focus,input.fi:focus,select.fi:focus,textarea.fi:focus,.ws-in:focus,
:where(.sheet,.card,.login,.row2,.pcv-bar) :where(input,select,textarea):focus{border-color:var(--field-border-focus);box-shadow:var(--focus-ring)}
.input::placeholder,.fi::placeholder,.ws-in::placeholder,:where(.sheet,.card,.login,.row2,.pcv-bar) :where(input,textarea)::placeholder{color:var(--field-placeholder)}
textarea.input,textarea.fi,textarea.ws-in,:where(.sheet,.card,.login,.row2,.pcv-bar) :where(textarea){height:auto;min-height:calc(var(--field-h) * 2);padding:var(--field-pad-y) var(--field-pad-x);line-height:1.5;resize:vertical}
select.input,select.fi{appearance:none;-webkit-appearance:none}
/* .input.rich: a rich-text editor (contenteditable), same look as a textarea, grows with the text (mail compose) */
.input.rich{height:auto;min-height:calc(var(--field-h) * 4);max-height:60vh;overflow-y:auto;padding:var(--field-pad-y) var(--field-pad-x);line-height:1.6;outline:0;overflow-wrap:anywhere;cursor:text}
.input.rich:empty::before{content:attr(data-ph);color:var(--field-placeholder)}
.input.rich blockquote{margin:var(--space-1) 0;padding-inline-start:var(--space-3);border-inline-start:2px solid var(--stroke);color:var(--text2)}
.input.rich a{color:var(--accent)}
/* search field: .field-search > svg + input.input.search (the magnifier sits inside the field, at the start) */
.field-search{position:relative;display:block}
.field-search>svg{position:absolute;inset-inline-start:var(--field-pad-x);top:50%;width:18px;height:18px;transform:translateY(-50%);fill:none;stroke:var(--field-placeholder);stroke-width:2;stroke-linecap:round;pointer-events:none}
.input.search{padding-inline-start:calc(var(--field-pad-x) * 2 + 18px)}
.input.search::-webkit-search-decoration{-webkit-appearance:none}
.input.lg{height:var(--field-h-lg);font-size:var(--field-fs-lg);letter-spacing:.02em}
.input.code{text-align:center;letter-spacing:.3em;font-variant-numeric:tabular-nums}
.input.code:placeholder-shown{letter-spacing:normal}
.sw{width:51px;height:31px;border-radius:var(--radius-pill);background:var(--switch-off);position:relative;flex:none;transition:background .2s}
.sw span{position:absolute;top:2px;inset-inline-start:2px;width:27px;height:27px;border-radius:50%;background:var(--knob);box-shadow:var(--shadow-knob);transition:transform .2s}
.sw.on{background:var(--switch-on)}.sw.on span{transform:translateX(-20px)}[dir=ltr] .sw.on span{transform:translateX(20px)}
.sw:disabled{opacity:.55;cursor:not-allowed} /* a locked switch (e.g. Mirsal «يرسل لحاله», always off) */

/* ---------- Sections ----------
   .sec-card  a card that groups related content on a screen
   .sec-h     card header: title at the start, value/badge at the end */
.sec-card{display:flex;flex-direction:column;gap:var(--sec-gap);padding:var(--sec-pad);background:var(--sec-bg);border:.5px solid var(--sec-border);border-radius:var(--sec-radius);box-shadow:var(--shadow-card)}
.sec-h{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);min-height:24px}
.sec-h>b{font-size:var(--fs-lg);font-weight:var(--fw-bold)}
.sec-card small{color:var(--text3);font-size:var(--fs-xs);line-height:1.6}

/* ---------- Settings screens and list rows ----------
   .settings > .st-h (header with .icon-btn back) > .st-body
   .st-sec    section label above a group
   .st-grp    grouped list (rounded surface)
   .st-row    list row: optional icon <i>, text .acc-tx (b + small), trailing value/badge, chevron i.cv
   .st-row.danger  destructive row; .st-row.dis disabled
   .st-note   small note under a group */
.settings{position:fixed;inset:0;z-index:55;background:var(--chrome);display:flex;flex-direction:column;animation:fi .15s;padding-top:var(--st,env(safe-area-inset-top))}
.st-h{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:10px 14px}.st-h b{font-size:var(--fs-xl);font-weight:var(--fw-bold)}
.st-h>span:last-child:empty{width:var(--icon-btn)}
.st-body{flex:1;overflow:auto;padding:6px var(--space-4) calc(var(--space-6) + var(--sb,0px));max-width:560px;width:100%;margin:0 auto}
.st-sec{font-size:var(--fs-xs);color:var(--text3);padding:18px 14px 6px}
.st-grp{background:var(--sec-bg);border-radius:var(--sec-radius);border:.5px solid var(--sec-border);overflow:hidden}
.st-grp+.st-grp{margin-top:10px}
.st-row{display:flex;align-items:center;gap:var(--space-3);width:100%;min-height:var(--row-h);padding:10px 14px;text-align:start;color:var(--text);border-bottom:.5px solid var(--stroke3);font-size:var(--fs-lg)}
.st-row:last-child{border-bottom:0}.st-row:active{background:var(--hover)}.st-row b{font-weight:var(--fw-medium)}.st-row small{color:var(--text3);font-size:var(--fs-xs)}
.st-row>i{width:30px;height:30px;border-radius:var(--radius-sm);background:var(--hover);display:grid;place-items:center;flex:none}.st-row>i svg{width:18px;height:18px}
.st-row>i.cv{background:none;width:18px}.st-row>i.cv svg{width:16px;color:var(--text3)}
.st-row>i.brand{background:var(--brand-soft);color:var(--brand)}
.st-row .conn-ic{width:28px;height:28px;border-radius:var(--radius-sm);background:var(--elevated);display:grid;place-items:center;font-weight:700;flex:none}
.st-row.danger{color:var(--danger);justify-content:center}.st-row.danger>i{background:var(--danger-soft);color:var(--danger)}.st-row.danger .acc-tx{flex:none}
.st-row.dis{opacity:.5}
.st-note{font-size:var(--fs-xs);color:var(--text3);padding:8px 14px;line-height:1.6}
.st-theme{display:flex;gap:6px;padding:10px 14px}
.st-theme button{flex:1;height:var(--control-h-sm);border-radius:var(--r-item);background:var(--hover);font-size:var(--fs);color:var(--text2);display:flex;align-items:center;justify-content:center;gap:6px}
.st-theme button.on{background:var(--text);color:var(--chrome);font-weight:var(--fw-bold)}
.st-theme button svg{flex:none}

/* ---------- Badges ----------
   .badge (.cnt is the legacy name): small pill for counts and states
   tones: .ok .warn .bad .brand */
.badge,.cnt{display:inline-flex;align-items:center;gap:var(--space-1);background:var(--hover);border-radius:var(--radius-pill);padding:2px 10px;font-size:var(--fs-sm);color:var(--text2);white-space:nowrap}
.badge.ok{background:var(--success-soft);color:var(--success)}
.badge.warn{background:var(--warning-soft);color:var(--warning)}
.badge.bad{background:var(--danger-soft);color:var(--danger)}
.badge.brand{background:var(--brand-soft);color:var(--brand)}
.badge svg{width:13px;height:13px;flex:none}.badge.xs{font-size:var(--fs-xxs);padding:1px 8px}

/* ---------- Omnis face (public/omnis-face.js -> omnisFace()) ---------- */
.o-face{display:inline-grid;place-items:center;width:var(--face-size);height:var(--face-size);flex:none;border-radius:50%;line-height:0}
.o-face svg{width:100%;height:100%;display:block;overflow:visible}

/* ---------- Omnis guide message: the face + a speech bubble (tones: .good .bad) ---------- */
.guide-msg{display:flex;gap:10px;align-items:flex-start}
.guide-msg>.o-face{--face-size:34px;margin-top:2px}
.guide-msg>p{margin:0;flex:1;min-width:0;padding:10px 14px;border-radius:var(--radius-lg);border-start-start-radius:var(--radius-xs);background:var(--elevated);border:.5px solid var(--stroke3);line-height:1.7;color:var(--text)}
.guide-msg.good>p{background:var(--brand-soft);border-color:transparent}
.guide-msg.bad>p{background:var(--danger-soft);border-color:transparent;color:var(--danger-ink)}

/* ---------- Meter (progress / health bar) tones: .ok .warn .bad ---------- */
.meter{height:8px;border-radius:var(--radius-pill);background:var(--stroke);overflow:hidden}
.meter>i{display:block;height:100%;border-radius:inherit;background:var(--brand)}
.meter>i.ok{background:var(--success-bar)}.meter>i.warn{background:var(--warning-bar)}.meter>i.bad{background:var(--danger-bar)}
/* .meter > i[data-pct]: the width comes from the data (set via the CSSOM after paint), grows in; .meter.lux sits on the deep «ليلي فاخر» card */
.meter>i[data-pct]{inline-size:0;transition:inline-size .5s ease}
.meter.lux{background:var(--lux-track)}.meter.lux>i.ok{background:var(--lux-ink)}
@media (prefers-reduced-motion:reduce){.meter>i[data-pct]{transition:none}}
.tone-ok{color:var(--success)}.tone-warn{color:var(--warning)}.tone-bad{color:var(--danger)}
.st-note.center{text-align:center}
.st-grp.gap-lg{margin-top:28px}
/* answered (locked) cards: their submit button reads as done, not pressable */
.card.locked .btn{background:color-mix(in srgb,var(--text) 22%,var(--elevated));border-color:transparent;color:var(--text2);box-shadow:none;cursor:default}

/* ---------- Info tip ----------
   .info-btn   small round «!» next to a setting title (public/info-tip.js)
   .info-pop   the popover it opens: what the setting does, its role, an example */
.info-btn{display:inline-grid;place-items:center;width:18px;height:18px;margin-inline-start:6px;padding:0;border:1px solid var(--stroke);border-radius:var(--radius-pill);background:var(--elevated);color:var(--brand-strong);font:inherit;font-size:var(--fs-xxs);font-weight:var(--fw-bold);line-height:1;vertical-align:middle;cursor:pointer}
.info-btn:active{background:var(--brand-soft)}
.info-btn:focus-visible{outline:0;box-shadow:var(--focus-ring)}
.info-pop{position:fixed;z-index:9999;padding:var(--space-3) var(--space-4);border:.5px solid var(--stroke);border-radius:var(--radius-md);background:var(--elevated);color:var(--text);box-shadow:var(--shadow-pop);font-size:var(--fs-sm);line-height:1.6}
.info-pop-t{display:block;margin-bottom:var(--space-1);font-size:var(--fs);color:var(--brand-ink)}
:root[data-theme=dark] .info-pop-t{color:var(--brand)}
.info-pop p{margin:var(--space-1) 0 0}
.info-pop-k{font-weight:var(--fw-bold);color:var(--text2)}
.info-pop-ex{padding:var(--space-2);border-radius:var(--radius-sm);background:var(--brand-tint)}
.btn.sm[aria-pressed=true]{background:var(--brand-soft);color:var(--brand-ink);border-color:var(--brand)}
:root[data-theme=dark] .btn.sm[aria-pressed=true]{color:var(--brand)} /* --brand-ink is too dark on the dark --brand-soft */

/* passkey verify forms: phrase field hidden until 3 failed face captures */
.pk-off{display:none!important}
.pk-hint{display:block;opacity:.75;margin-top:4px}

/* ---------- Supervisor menu above the send button («قائمة المشرفين فوق زر الإرسال», public/composer.js) ----------
   .sup-menu      upward menu over the composer: one row per supervisor, the active one nearest the button;
                  .at-right / .at-left pin it to the send button's physical side (owner msg 164ad0c2)
   .sup-mi        row: face (.sup-mi-av) + name (.sup-mi-nm) only; .sup-mi.on = the active supervisor (preselected) */
.sup-menu{position:absolute;bottom:100%;inset-inline-end:var(--space-3);z-index:20;display:flex;flex-direction:column-reverse;gap:2px;min-width:var(--sup-menu-w);max-width:calc(100vw - var(--space-6));max-height:50vh;overflow:auto;padding:var(--space-1);background:var(--sec-bg);border:.5px solid var(--sec-border);border-radius:var(--sec-radius);box-shadow:var(--shadow-pop);animation:fi .15s}
.sup-menu.at-right{right:var(--space-3);left:auto}
.sup-menu.at-left{left:var(--space-3);right:auto}
.sup-mi{display:flex;align-items:center;gap:var(--space-3);width:100%;min-height:var(--row-h);padding:var(--space-2) var(--space-3);border:0;border-radius:var(--radius-md);background:none;color:var(--text);font:inherit;font-size:var(--fs-lg);text-align:start;cursor:pointer;touch-action:manipulation}
.sup-mi:active{background:var(--hover)}
.sup-mi:focus-visible{outline:0;box-shadow:var(--focus-ring)}
.sup-mi.on{background:var(--brand-soft)}
.sup-mi.on .sup-mi-nm{font-weight:var(--fw-bold)}
.sup-mi-av{display:grid;place-items:center;width:var(--sup-av);height:var(--sup-av);flex:none;border-radius:50%;overflow:hidden;line-height:0}
.sup-mi-av svg{width:100%;height:100%;display:block}
.sup-mi-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;unicode-bidi:plaintext}
.c-send[aria-haspopup]{touch-action:manipulation}

/* ---------- Stacked faces («وجوه المشرفين في الفقاعات وحالة العمل», public/sup-faces.js) ----------
   .face-stack    tappable group of whoever works now, the most important face on top; tap → «مين يشتغل الحين»
   .face-f        one face in a ring (.lg = the bigger face in the sheet); .face-more = «+N»; .face-ini = initials fallback
   .face-dot      live green dot (still under «تقليل الحركة») */
.face-stack{position:relative;display:inline-flex;align-items:center;flex:none;padding:0;margin:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;border-radius:var(--radius-pill);-webkit-tap-highlight-color:transparent}
.face-stack:focus-visible{outline:0;box-shadow:var(--focus-ring)}
.face-f{position:relative;display:grid;place-items:center;width:var(--fstack-f);height:var(--fstack-f);flex:none;border-radius:50%;background:var(--fstack-bg);box-shadow:0 0 0 var(--fstack-ring) var(--fstack-ring-c);line-height:0;overflow:hidden}
.face-f svg{width:88%;height:88%;display:block}
.face-f + .face-f{margin-inline-start:var(--fstack-overlap)}
.face-f:nth-child(1){z-index:4}.face-f:nth-child(2){z-index:3}.face-f:nth-child(3){z-index:2}.face-f:nth-child(4){z-index:1}
.face-f + .face-more{margin-inline-start:calc(var(--fstack-overlap) / 3)}
.face-f.lg{width:var(--fstack-f-lg);height:var(--fstack-f-lg)}
.face-more{font-size:var(--fs-xxs);font-weight:var(--fw-bold);line-height:1;color:var(--text2);background:var(--fstack-more-bg)}
.face-ini{font-size:var(--fs-xs);font-weight:var(--fw-bold);line-height:1;color:var(--text)}
.face-dot{position:absolute;bottom:-1px;inset-inline-start:calc(var(--fstack-f) - var(--fstack-dot));z-index:5;width:var(--fstack-dot);height:var(--fstack-dot);border-radius:50%;background:var(--fstack-live);border:1.5px solid var(--fstack-ring-c);animation:dotPulse 1.4s ease-out infinite}
@media (prefers-reduced-motion:reduce){.face-dot{animation:none}}

/* ---------- Wallpaper picker («خلفية الدردشة», public/chat-wallpaper.js) ----------
   .wp-grid       picker tiles (square): 3 per row on a phone, 6 per row from 520px
   .wp-tile       one choice: a live thumbnail .wp-host + its name; .wp-tile.on = the chosen one (aria-pressed)
   .wp-prev       live preview frame of a small chat over the chosen wallpaper
   .wp-cap        small caption above a group of tiles
   .range         slider (dim, pattern strength, photo blur)
   .st-row.col    settings row stacked: title line above a control (slider) */
.wp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2);padding:0 14px var(--space-3)}
@media (min-width:520px){.wp-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
.wp-tile{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-1);min-width:0;padding:0;border:0;background:none;color:var(--text2);font:inherit;font-size:var(--fs-xs);line-height:1.3;text-align:center;cursor:pointer;touch-action:manipulation}
.wp-tile>.wp-host{position:relative;display:grid;place-items:center;aspect-ratio:var(--wp-tile-ratio);border-radius:var(--radius-md);overflow:hidden;isolation:isolate;border:1px solid var(--stroke);background:var(--chrome);color:var(--text3);transition:box-shadow .15s,border-color .15s}
.wp-tile>.wp-host svg{width:22px;height:22px;position:relative;z-index:1}
.wp-tile.on{color:var(--text);font-weight:var(--fw-bold)}
.wp-tile.on>.wp-host{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand)}
.wp-tile:focus-visible{outline:0}.wp-tile:focus-visible>.wp-host{box-shadow:var(--focus-ring)}
.wp-tile:disabled{opacity:.5;cursor:progress}
.wp-tile>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wp-cap{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-3) 14px var(--space-2);font-size:var(--fs-xs);color:var(--text3)}
.wp-prev{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;height:var(--wp-prev-h);margin:var(--space-3) 14px 0;padding:var(--space-3);border-radius:var(--radius-lg);overflow:hidden;isolation:isolate;border:.5px solid var(--stroke3);background:var(--chrome)}
.range{display:block;width:100%;height:var(--range-h);margin:0;accent-color:var(--brand);cursor:pointer;touch-action:pan-y}
.range:focus-visible{outline:0;box-shadow:var(--focus-ring);border-radius:var(--radius-pill)}
.wp-tile>.wp-host{--wp-pat-size:120px}
.wp-tile>.wp-host>.wp-l{animation:none}
.wp-tile>.wp-host>.wp-l.fx{filter:blur(10px)}
.wp-prev>.wp-l{z-index:0}
.wp-prev .mwrap,.wp-prev .day{position:relative;z-index:1}
.wp-prev .m{max-width:80%;font-size:var(--fs);line-height:var(--lh)}
.wp-prev .day{align-self:center;font-size:var(--fs-xxs)}
.st-row.col{flex-direction:column;align-items:stretch;gap:var(--space-1)}
.st-row.col>.acc-tx{display:flex;flex-direction:row;flex:none;align-items:center;justify-content:space-between;gap:var(--space-2)}
/* ---------- «المنسوخات جنب اللصق»: the app's edit bar (public/side.js) in the iPhone edit-menu look ----------
   .selbar            floating bar: text labels, thin dividers, a tail pointing at the text (.below = tail on top)
   .selbar .k         accent item («المنسوخات», «اسأل Omnis»); .on = its popover is open; .sb-n = how many copies
   .selbar .sb-ch     ›/‹ pages to the extra actions
   .clip-pop          «آخر المنسوخات» popover: rows (.clip-it > .clip-go + .clip-x), .hl newest, .busy while pasting,
                      .sw while swiped (--clip-dx), .clip-empty, .clip-foot. Tokens: --selbar-* / --clip-* in theme-tokens.css */
.selbar{position:fixed;z-index:130;max-width:var(--selbar-max-w);border-radius:var(--selbar-radius);background:var(--selbar-bg);backdrop-filter:blur(var(--selbar-blur));-webkit-backdrop-filter:blur(var(--selbar-blur));box-shadow:var(--selbar-shadow);color:var(--selbar-ink);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;animation:sb-in .14s ease-out}
.selbar::after{content:"";position:absolute;bottom:calc(var(--selbar-tail) * -1);left:var(--sb-tail,50%);width:calc(var(--selbar-tail) * 2);height:calc(var(--selbar-tail) * 2);margin-left:calc(var(--selbar-tail) * -1);transform:rotate(45deg);background:var(--selbar-bg);z-index:-1;border-radius:2px}
.selbar.below::after{bottom:auto;top:calc(var(--selbar-tail) * -1)}
.selbar .sb-row{display:flex;align-items:stretch;height:var(--selbar-h);border-radius:inherit;overflow-x:auto;scrollbar-width:none;background:var(--selbar-bg)}
.selbar .sb-row::-webkit-scrollbar{display:none}
.selbar button{display:inline-flex;align-items:center;justify-content:center;gap:5px;flex:none;height:var(--selbar-h);min-width:44px;margin:0;padding:0 var(--selbar-pad-x);border:0;border-inline-start:.5px solid var(--selbar-sep);border-radius:0;background:none;color:inherit;font:inherit;font-size:var(--selbar-fs);line-height:1;white-space:nowrap;cursor:pointer;touch-action:manipulation}
.selbar button:first-child{border-inline-start:0}
.selbar button:active,.selbar button:hover{background:var(--selbar-press)}
.selbar button:focus-visible{outline:0;box-shadow:inset var(--focus-ring)}
.selbar button.k{color:var(--selbar-key);font-weight:var(--fw-bold)}
.selbar button.on{background:var(--selbar-on)}
.selbar .sb-ch{min-width:38px;padding:0 var(--space-2);color:var(--selbar-chev)}
.selbar .sb-ch svg{width:17px;height:17px}
.selbar .sb-n{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--radius-pill);background:var(--selbar-badge-bg);color:var(--selbar-badge-ink);font-size:var(--selbar-badge-fs);font-style:normal;font-weight:700;line-height:1}
@keyframes sb-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.clip-pop{position:fixed;z-index:131;display:flex;flex-direction:column;width:min(var(--clip-w),calc(100vw - 24px));max-height:min(var(--clip-max-h),var(--clip-room,70vh));border-radius:var(--clip-radius);background:var(--clip-bg);backdrop-filter:blur(var(--selbar-blur));-webkit-backdrop-filter:blur(var(--selbar-blur));box-shadow:var(--clip-shadow);color:var(--selbar-ink);overflow:hidden;animation:sb-in .16s ease-out;-webkit-user-select:none;user-select:none}
.clip-pop .clip-h{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);flex:none;padding:10px 14px 6px;color:var(--clip-meta);font-size:var(--fs-sm);font-weight:var(--fw-bold)}
.clip-pop .clip-a{margin:0;padding:2px 0;border:0;background:none;color:var(--clip-key);font:inherit;font-weight:var(--fw-bold);cursor:pointer}
.clip-pop .clip-list{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.clip-pop .clip-it{position:relative;display:flex;align-items:stretch;border-top:.5px solid var(--clip-sep);transform:translateX(var(--clip-dx,0));transition:transform .18s ease;touch-action:pan-y}
.clip-pop .clip-it.sw{transition:none;background:var(--clip-swipe-bg)}
.clip-pop .clip-it.hl{background:var(--clip-hl)}
.clip-pop .clip-go{display:flex;align-items:center;gap:10px;flex:1;min-width:0;margin:0;padding:11px 14px;padding-inline-end:4px;border:0;border-radius:0;background:none;color:inherit;font:inherit;font-size:var(--clip-fs);text-align:start;cursor:pointer}
.clip-pop .clip-go:hover,.clip-pop .clip-go:active{background:var(--selbar-press)}
.clip-pop .clip-go:focus-visible{outline:0;box-shadow:inset var(--focus-ring)}
.clip-pop .clip-t{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.clip-pop .clip-t.mono{font-family:var(--clip-mono);font-size:var(--clip-mono-fs);direction:ltr;text-align:left;unicode-bidi:plaintext}
.clip-pop .clip-m{flex:none;color:var(--clip-meta);font-size:var(--clip-meta-fs);white-space:nowrap}
.clip-pop .clip-it.busy{opacity:.6}
.clip-pop .clip-x{flex:none;width:40px;margin:0;padding:0;border:0;border-radius:0;background:none;color:var(--clip-x);font-size:18px;line-height:1;cursor:pointer}
.clip-pop .clip-x:hover{color:var(--danger)}
.clip-pop .clip-x:focus-visible{outline:0;box-shadow:inset var(--focus-ring)}
.clip-pop .clip-empty{display:flex;flex-direction:column;gap:4px;padding:14px 14px 16px;border-top:.5px solid var(--clip-sep);font-size:var(--fs);line-height:1.5}
.clip-pop .clip-empty span{color:var(--clip-meta);font-size:var(--fs-sm)}
.clip-pop .clip-foot{flex:none;padding:8px 14px 11px;border-top:.5px solid var(--clip-sep);color:var(--clip-meta);font-size:var(--clip-meta-fs);line-height:1.5}
@media (prefers-reduced-motion:reduce){.selbar,.clip-pop{animation:none}.clip-pop .clip-it{transition:none}}
/* sync pill (local-cache.js): synced / syncing / offline */
.sync-pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:600;white-space:nowrap;line-height:1.6}
.sync-pill i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.sync-pill.s-synced{background:var(--success-soft);color:var(--success)}
.sync-pill.s-syncing{background:var(--brand-soft);color:var(--brand-strong)}
.sync-pill.s-syncing i{animation:syncp 1s ease-in-out infinite}
.sync-pill.s-offline{background:var(--elevated-h);color:var(--text2)}
@keyframes syncp{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.sync-pill.s-syncing i{animation:none}}

/* «الرد السريع» quick replies under a fast answer — Omnis tokens only */
.qr-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.qr-row .qr-b { border-radius: 999px; }