/* Omnis design tokens: the ONE source of colours, radii, spacing, type, shadows and control sizes.
   Rules: docs/THEME-RULES.md. Raw colours (#hex, rgb(), hsl()) belong in this file only;
   every other stylesheet uses var(--token). scripts/check-theme.mjs enforces it (npm test). */
:root{
  /* surfaces and text */
  --chrome:#fcfcfc; --sidebar:#f5f5f5; --elevated:#ffffff; --elevated-h:#f1f1f1;
  --text:#1c1c1c; --text2:#1c1c1cad; --text3:#1c1c1c8f; --text4:#1c1c1c66; --on-primary:#fff; --on-brand:#fff;
  --hover:#1c1c1c0f; --active:#1c1c1c14; --stroke:#1c1c1c1f; --stroke3:#1c1c1c12;
  --bubble-agent:#1c1c1c0f; --accent:#1680f3;
  /* «المتصفح الداخلي» sheet (public/iab-sheet.css): gap above the sheet shows the app behind a light scrim */
  --iab-scrim:#00000059; --iab-gap:52px; --iab-z:70; --iab-shadow:0 -6px 30px #00000033;
  /* «صندوق واتساب» (public/wa-box.css). Floating button: WHITE with the green logo (owner msg 88d0da3b).
     --wa-*: the box mirrors the real WhatsApp app on iPhone (list, chat wallpaper, bubbles, context menu). */
  --wa:#25d366; --on-wa:#fff; --wa-fab-bg:#ffffff; --wa-fab-ink:#000000; --wa-fab-ring:#0000001a;
  --wa-surface:#ffffff; --wa-bar:#f6f6f6f2; --wa-sep:#3c3c4329; --wa-search:#7676801f; --wa-sub:#8e8e93;
  --wa-wall:#efeae2; --wa-in:#ffffff; --wa-out:#d9fdd3; --wa-meta:#667781; --wa-bshadow:0 1px .5px #0b141a21;
  --wa-day:#ffffffeb; --wa-day-ink:#54656f; --wa-avatar:#dfe5e7; --wa-avatar-ink:#ffffff; --wa-quote:#0000000d;
  --wa-menu:#ffffffeb; --wa-menu-sep:#3c3c4329; --wa-danger:#ff3b30; --wa-scrim:#0000004d; --wa-pill:#ffffff;
  --wa-tick:#53bdeb; --wa-tab-ink:#000000; --wa-tabbar:#ffffffd9; --wa-tab-shadow:0 2px 14px #0000001f;
  /* unread (owner msg ee769775): WhatsApp's green count / time, the darker preview, the filter chips */
  --wa-unread:#1daa61; --on-wa-unread:#ffffff; --wa-unread-text:#3b4a54; --wa-chip-on:#d9fdd3; --wa-chip-on-ink:#15603e;
  /* «شريط القوائم العائم» (public/tab-bar.js + tab-bar.css; owner msg dd97406b, pick bc9b60d2 «حرفياً مثل واتساب»): the WhatsApp iOS
     floating tab bar 1:1 — frosted white capsule, light grey capsule on the selected tab, WhatsApp-green badges, «اسأل أومنيس» chip.
     --tbar-solid: the bar with «تقليل الشفافية» on (or no backdrop-filter). Sizes: 44pt+ hit targets, safe-area aware. */
  --tbar-bg:#ffffffd9; --tbar-solid:#ffffff; --tbar-border:#0000000d; --tbar-shadow:0 2px 14px #0000001f,0 0 1px #00000024;
  --tbar-ink:#000000d9; --tbar-ink-on:#000000; --tbar-sel:#7676801f; --tbar-badge:#1daa61; --on-tbar-badge:#ffffff; --tbar-badge-ring:#ffffff;
  --tbar-chip-bg:#ffffffeb; --tbar-chip-ink:#000000; --tbar-av-bg:var(--brand-soft); --tbar-av-ink:var(--brand-strong);
  --tbar-blur:saturate(180%) blur(20px); --tbar-h:62px; --tbar-pad:5px; --tbar-side:14px; --tbar-max:560px; --tbar-lift:10px; --tbar-sb-tuck:14px;
  --tbar-tab-min:48px; --tbar-tab-h:52px; --tbar-icon:27px; --tbar-fs:10.5px; --tbar-l-gap:2px; --tbar-badge-s:19px; --tbar-badge-fs:11.5px;
  --tbar-av:27px; --tbar-chip-h:44px; --tbar-chip-gap:10px; --tbar-chip-ic:26px; --tbar-z:55;
  --tbar-clear:calc(var(--tbar-h) + var(--tbar-chip-h) + var(--tbar-chip-gap) + var(--tbar-lift) + var(--space-4));
  /* «صندوق البريد الاحترافي» (public/email-box.css): sender avatar tones (initials), the white «paper» an HTML email is drawn
     on in its original formatting (same in both modes, like Gmail), link / quote ink on that paper, the star, sizes */
  --mail-av-0:#0e9f98; --mail-av-1:#4263eb; --mail-av-2:#e8590c; --mail-av-3:#c2255c; --mail-av-4:#2b8a3e; --mail-av-5:#7048e8; --mail-av-6:#1971c2; --mail-av-7:#d9480f; --on-mail-av:#ffffff;
  --mail-paper:#ffffff; --mail-paper-ink:#1c1c1c; --mail-link:#1a73e8; --mail-quote:#cccccc; --mail-star:#f4b400; --mail-pane-w:400px; --mail-av-s:40px;
  /* «ترقية صندوق البريد ٢»: the small account avatar on the switcher chips, and each provider's own tone on the connect grid */
  --mail-av-xs:24px; --mail-prov-google:#1a73e8; --mail-prov-microsoft:#0078d4; --mail-prov-yahoo:#6001d2; --mail-prov-icloud:#3693f3;
  --mail-prov-aol:#31459b; --mail-prov-zoho:#e42527; --mail-prov-yandex:#fc3f1d; --mail-prov-gmx:#1c449b; --mail-prov-godaddy:#111111;
  --mail-prov-proton:#6d4aff; --mail-prov-sogo:#3a9a5b; --mail-prov-custom:#5f6b7a;
  /* brand: the official Omnis turquoise (same family as the face in public/omnis-face.js) */
  --brand:#0e9f98; --brand-bright:#2fd3c0; --brand-strong:#0b7f86; --brand-deep:#08363c; --brand-ink:#064f55;
  --brand-soft:#e3f8f1; --brand-tint:#e9fffb;
  /* the official Omnis logo turquoise: the wordmark «O» keeps it whatever face colours the app (study 6f3ef770) */
  --logo-o:#0e9f98; --logo-o-bright:#2fd3c0;
  /* «صندوق المفتاح» in WhatsApp settings: a light brand tint card (same look in both modes, as before) */
  --ws-secret-bg:color-mix(in srgb,var(--brand-bright) 10%,#ffffff); --ws-secret-border:var(--brand-bright); --ws-secret-ink:var(--brand-deep);
  /* status */
  --green:#10ab61; --success:#11845b; --success-bar:#1fbf86; --success-soft:#e3f8f1;
  --warning:#b26b00; --warning-bar:#f0a020; --warning-soft:#fff4e0;
  --danger:#e72e3b; --danger-ink:#a32020; --danger-bar:#e0444e; --danger-soft:#fdecec;
  /* per-bot colour (overridden at runtime from the bot's face) */
  --bot:#f93498; --on-bot:var(--on-primary); /* text on the bot/supervisor colour (auto-picked per face: .fc-N in styles-4.css) */
  /* live ink on the Majlis shared screen (public/majlis-ink.js): six marker colours that read on any screen, light or dark */
  --ink-0:#2fd3c0; --ink-1:#ff4d5e; --ink-2:#ffd23f; --ink-3:#4c9dff; --ink-4:#ffffff; --ink-5:#111111;
  /* «عرض مرفقات البطاقة داخلها (٢+٣)» (public/card-media.js + card-media.css): gallery, thumbnails, file rows, file chips and the
     «الصور من رسالة المشرف» note drawn INSIDE a card (chat and approvals box) */
  --att-radius:12px; --att-big-ratio:16/10; --att-big-max:300px; --att-th:52px; --att-th-gap:6px; --att-th-radius:10px; --att-row-one:140px;
  --att-bg:#eef0f0; --att-shimmer:linear-gradient(110deg,#eef0f0 30%,#f8f9f9 50%,#eef0f0 70%); --att-on:#1c1c1c; --att-ring:#1c1c1c1f;
  --att-pill-bg:#1c1c1cb3; --att-pill-ink:#ffffff; --att-more-bg:#1c1c1c8c; --att-more-ink:#ffffff;
  --att-file-bg:var(--elevated); --att-file-border:var(--stroke); --att-fi:36px; --att-fi-radius:9px; --att-fi-ink:#ffffff; --att-fi-fs:10px;
  --att-k-pdf:#e5484d; --att-k-sheet:#10ab61; --att-k-doc:#1680f3; --att-k-zip:#9d6937; --att-k-slide:#f76b15; --att-k-video:#7048e8; --att-k-other:#5a5a5a;
  --att-chip-h:28px; --att-note-bg:var(--hover); --att-note-ink:var(--text3); --att-err-ink:var(--text3);
  --att-cthumb:22px; --att-cthumb-radius:6px; --att-cthumb-ring:var(--elevated); --att-lb-z:61;
  /* controls */
  --switch-off:#e3e3e6; --switch-on:#34c759; --knob:#fff; --avatar-bg:#2b2b2b; --on-avatar:#fff;
  --control-h:44px; --control-h-sm:34px; --icon-btn:36px; --icon-btn-sm:28px; --row-h:52px; --face-size:32px;
  /* «وجوه المشرفين في الفقاعات وحالة العمل»: safe margin on the floating side buttons' side (button 32px pinned 12px from the
     edge, public/styles-4.css .tb-fab etc.), the receiver face beside the owner's bubble, and the stacked working faces */
  --fab-btn:32px; --fab-edge:12px; --fab-safe:calc(var(--fab-edge) + var(--fab-btn) + var(--space-2));
  --rcv-av:14px; --rcv-pin:11px; --fstack-f:26px; --fstack-f-lg:36px; --fstack-overlap:-9px; --fstack-ring:2px; --fstack-dot:8px;
  --fstack-bg:var(--elevated); --fstack-ring-c:var(--chrome); --fstack-more-bg:var(--elevated-h); --fstack-live:var(--green);
  /* «تصغير المكالمة لوجه أومنيس عائم» (public/voice-mini.js): the floating call face, its face, its ring and the PiP window */
  --vr-mini:64px; --vr-mini-face:44px; --vr-mini-z:59; --vr-mini-ring:3px; --vr-mini-mark:20px; --vr-pip-face:72px;
  --sup-av:28px; --sup-menu-w:220px; /* «قائمة المشرفين فوق زر الإرسال»: face size and menu width (public/composer.js) */
  /* «شات المشرف المفلتر + قائمة الإرسال» (public/sup-chat.js, sup-chat.css): supervisor card faces, desktop popover width,
     the filtered pane's top offset under the chat header, the hidden-messages divider line */
  --sc-av:44px; --sc-av-sm:28px; --sc-av-lg:64px; --sc-av-xs:16px; --sc-pop-w:340px; --sc-top:calc(58px + var(--st, 0px)); --sc-gap-line:var(--stroke);
  /* «عرض الصور في الشات (بشكل جروك بوت)» (public/chat-album.js + chat-album.css): the fanned deck of tilted cards, the letter
     badges of «لوحة القرار», and the full image viewer (white by day, near-black at night; the pictures are never cropped there) */
  --album-card-w:208px; --album-card-h:248px; --album-radius:20px; --album-tilt:4.2deg; --album-shift:14px; --album-spread:26px;
  --album-one-w:300px; --album-one-h:420px; --album-thumb:52px; --album-letter:26px; --album-pin:26px; --album-ratio:4/3;
  --album-card-bg:#ffffff; --album-card-border:#00000014; --album-card-shadow:0 1px 3px #0000000f,0 8px 22px #00000017;
  --album-shimmer:linear-gradient(110deg,#f1f1f2 30%,#fafafa 50%,#f1f1f2 70%); --album-fail-bg:#f7f7f8; --album-fail-border:#0000002e;
  --album-letter-bg:#111111; --album-letter-ink:#ffffff; --album-letter-ring:#ffffff; --album-chip-bg:#ffffffe8; --album-chip-ink:#111111;
  --album-chip-shadow:0 1px 4px #00000022; --album-on-ring:#111111;
  --album-view-bg:#ffffff; --album-view-ink:#141414; --album-view-sub:#888888; --album-view-dot:#d4d4d6; --album-view-dot-on:#141414;
  --album-view-pill:#ffffffee; --album-view-frame:#f4f4f5; --album-scrim:#00000066;
  --album-pin-bg:#111111; --album-pin-ink:#ffffff; --album-pin-ring:#ffffff;
  /* component tokens: every field, button and section reads ONLY these (docs/THEME-RULES.md 1a).
     Change a look here once and it changes everywhere, in light and dark. */
  --field-h:var(--control-h); --field-h-lg:calc(var(--control-h) + 6px); --field-pad-x:var(--space-3); --field-pad-y:var(--space-2);
  --field-radius:var(--radius-md); --field-bg:var(--elevated); --field-text:var(--text); --field-placeholder:var(--text4);
  --field-border:var(--stroke); --field-border-focus:var(--brand); --field-fs:var(--fs-input); --field-fs-lg:var(--fs-xl);
  --btn-h:var(--control-h); --btn-h-sm:var(--control-h-sm); --btn-pad-x:var(--space-5); --btn-pad-x-sm:var(--space-4); --btn-radius:var(--radius-pill);
  --btn-fs:var(--fs-lg); --btn-fs-sm:var(--fs-sm); --btn-bg:var(--text); --btn-text:var(--on-primary);
  --btn2-bg:var(--elevated); --btn2-bg-active:var(--elevated-h); --btn2-text:var(--text); --btn2-border:var(--stroke);
  --sec-bg:var(--elevated); --sec-border:var(--stroke3); --sec-radius:var(--radius-lg); --sec-pad:var(--space-4); --sec-gap:var(--space-3);
  /* «تلميع صندوق Git» (public/git-box.css; owner msg 9b9957a7): every card in the box floats on a soft shadow; the box's buttons
     (--btn-* inside .gb-pop) and the «الدفعة القادمة» control card take the ACTIVE supervisor's face colour (the --brand family,
     switched by html[data-face]); the 90% mix keeps white text >= 4.5:1 on every face (Mint included). Dark values below. */
  --gb-card-bg:var(--chrome); --gb-card-border:var(--stroke3); --gb-card-shadow:0 1px 2px #0000000f,0 6px 18px -8px #0000002e;
  --gb-btn-bg:color-mix(in srgb,var(--brand-strong) 90%,#000); --gb-btn-text:var(--on-brand); --gb-btn2-text:color-mix(in srgb,var(--brand-strong) 90%,#000);
  --gb-btn2-tint:var(--brand-soft); --gb-btn2-border:color-mix(in srgb,var(--gb-btn2-text) 32%,transparent); --gb-icon-ink:var(--gb-btn2-text);
  --gb-hero-bg:linear-gradient(135deg,color-mix(in srgb,var(--brand-strong) 90%,#000) 0%,color-mix(in srgb,var(--brand-strong) 66%,#000) 100%);
  --gb-hero-ink:#ffffff; --gb-hero-ink2:#ffffffd1; --gb-hero-glass:#ffffff24; --gb-hero-glass-line:#ffffff2e; --gb-hero-ring:#ffffff40;
  --gb-hero-shadow:0 10px 26px -12px color-mix(in srgb,var(--brand-strong) 70%,transparent); --gb-hero-due:#ffc657;
  /* type */
  --fs-xxs:11px; --fs-xs:12px; --fs-sm:13px; --fs:14px; --fs-lg:15px; --fs-xl:17px; --fs-input:16px;
  --fw-medium:500; --fw-bold:600;
  --lh:20px; --lh-lg:22px;
  /* «توحيد خط وحجم الفقاعات» (owner msg 4e0cc663, 2026-10-20): ONE type scale + ONE width for every chat bubble,
     taken from the bot text bubble: sent + received text, quotes, cards / forms / widgets, the approvals box, captions.
     --bubble-ink2 = labels and hints inside a bubble (readable --text2, never the faint --text3); --bubble-sub-* = the
     small in-bubble chips (quote strip, task ref, option hint, «تمت الإجابة», captions); timestamps keep --fs-xxs.
     --bubble-max-w = received bubbles + cards (the face column is already beside them), --bubble-max-w-sent = the
     owner's own bubbles, so a sent bubble keeps its WhatsApp gap on the other side. Phones widen (see @media below). */
  --bubble-fs:var(--fs-lg); --bubble-lh:var(--lh-lg); --bubble-fw:400; --bubble-fw-title:var(--fw-bold);
  --bubble-ink:var(--text); --bubble-ink2:var(--text2);
  --bubble-sub-fs:var(--fs); --bubble-sub-lh:var(--lh);
  --bubble-max-w:min(86%,620px); --bubble-max-w-sent:min(86%,620px); --bubble-row-gap:var(--space-1);
  /* radii (legacy names kept: --r-*) */
  --radius-xs:6px; --radius-sm:8px; --radius-md:12px; --radius-lg:14px; --radius-xl:18px; --radius-pill:999px;
  --r-bubble:18px; --r-item:10px; --r-lg:8px; --r-xl:12px;
  /* spacing */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  /* shadows */
  --shadow-pill:0 1px 2px rgba(0,0,0,.06),0 4px 14px rgba(0,0,0,.08);
  --shadow-card:0 1px 2px rgba(0,0,0,.04);
  --scrim:#0005; --shadow-pop:0 18px 50px #0004;
  /* «مجلس» app (public/majlis-app.css) and the floating + button (.btn.fab) */
  --fab-size:58px; --fab-bottom:84px; --shadow-fab:0 10px 24px -8px rgba(14,159,152,.55); --ma-glass:#fcfcfcd9; --ma-tabs-h:64px;
  /* «خلفية الدردشة» chat wallpaper (public/chat-wallpaper.js + chat-wallpaper.css). Faint by design: bubbles stay readable.
     --wp-tint/--wp-glow: how much of the supervisor's face colour (--bot) shows; --wp-pat-max caps the doodle strength. */
  --wp-tint:8%; --wp-glow:30%; --wp-pat-max:.16; --wp-pat-size:240px; --wp-veil:#fcfcfc; --wp-blur-max:24px;
  --wp-dawn:linear-gradient(165deg,#ffe8d2 0%,#fbd9dc 52%,#e6defa 100%);
  --wp-sea:linear-gradient(170deg,#dff7f3 0%,#d3ecf9 55%,#c9dcf6 100%);
  --wp-sand:linear-gradient(170deg,#f8efe0 0%,#f1e3cb 60%,#ead7b8 100%);
  --wp-night:linear-gradient(180deg,#e9f0fb 0%,#dde7f7 60%,#d2def3 100%);
  --wp-bubble:#ffffff; --wp-bubble-shadow:0 1px 1.5px rgba(0,0,0,.09); --wp-chip:#ffffffd9; --wp-chip-ink:#1c1c1cad;
  --wp-tile-ratio:1/1; --wp-prev-h:216px; --range-h:28px;
  /* «بطاقة العميل «ليلي فاخر»» (console client card, owner msg 67409549): a deep card in the supervisor's face colour,
     glass number boxes and a white action surface; environment edges; follows --brand, so it follows the face */
  --lux-a:color-mix(in srgb,var(--brand-strong) 78%,#04201d); --lux-b:color-mix(in srgb,var(--brand-deep) 86%,#020c0b);
  --lux-ink:#ffffff; --lux-ink2:#ffffffb8; --lux-glass:#ffffff14; --lux-glass-b:#ffffff26; --lux-act:#ffffff; --lux-act-ink:var(--brand-strong);
  --lux-shadow:0 18px 36px -18px #062b2fa6; --lux-track:#ffffff2e;
  --env-prod:var(--green); --env-stg:var(--brand); --env-dev:var(--warning-bar); --env-edge:3px;
    --info-w:320px; /* «!» info popover width (public/info-tip.js) */
  --shadow-knob:0 2px 4px rgba(0,0,0,.2);
  --focus-ring:0 0 0 3px rgba(14,159,152,.22);
  /* «المنسوخات جنب اللصق»: the app's edit bar in the iPhone edit-menu look (.selbar) + the copy history popover (.clip-pop) */
  --selbar-h:44px; --selbar-radius:12px; --selbar-pad-x:10px; --selbar-fs:14.5px; --selbar-blur:20px; --selbar-max-w:calc(100vw - 16px);
  --selbar-bg:#f7f7f8f2; --selbar-ink:var(--text); --selbar-sep:#3c3c4333; --selbar-press:#1c1c1c14; --selbar-chev:var(--text3);
  --selbar-key:var(--brand-strong); --selbar-on:color-mix(in srgb,var(--brand) 12%,transparent);
  --selbar-shadow:0 6px 24px #0000002e,0 0 0 .5px #00000014; --selbar-tail:7px;
  --selbar-badge-bg:var(--brand); --selbar-badge-ink:var(--on-brand); --selbar-badge-fs:11px;
  --clip-w:360px; --clip-max-h:330px; --clip-radius:16px; --clip-bg:#f7f7f8f7; --clip-sep:#3c3c4326; --clip-meta:var(--text3);
  --clip-hl:color-mix(in srgb,var(--brand) 10%,transparent); --clip-shadow:0 10px 34px #00000038,0 0 0 .5px #00000014;
  --clip-fs:14.5px; --clip-meta-fs:11.5px; --clip-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --clip-mono-fs:13px;
  --clip-key:var(--brand-strong); --clip-x:var(--text3); --clip-swipe-bg:var(--danger-soft);
  --st:env(safe-area-inset-top); --sb:env(safe-area-inset-bottom);
  font-family:XVF,"GB Arabic",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color-scheme:light;
  --msend-bg:linear-gradient(160deg,#ffffffd9,#e6f6ecd9); --msend-line:#25d36647; --msend-shadow:inset 0 1px 0 #ffffffb3,0 6px 18px -10px #105e3a40; --msend-sec-bg:linear-gradient(160deg,#ffffffd9,#eceff6d9); --msend-sec-line:#8a93a866; --msend-glass:#ffffffc7; --msend-go:linear-gradient(180deg,#2fd772,#1fb85b); --msend-on-go:#ffffff; --msend-go-shadow:0 6px 14px -8px #1fb85bb3; --msend-mask:repeating-linear-gradient(135deg,#ffffffcc 0 8px,#eef0f6e6 8px 16px);
}
/* dark (night) mode: html[data-theme=dark], set by /theme.js */
:root[data-theme=dark]{
  --chrome:#141414; --sidebar:#1b1b1b; --elevated:#232323; --elevated-h:#2d2d2d;
  --text:#ececec; --text2:#ecececad; --text3:#ececec8f; --text4:#ececec66; --on-primary:#141414;
  --hover:#ffffff10; --active:#ffffff17; --stroke:#ffffff22; --stroke3:#ffffff14;
  --bubble-agent:#ffffff12; --accent:#4c9dff;
  --iab-scrim:#00000080;
  --brand:#2fd3c0; --brand-strong:#1fb8a8; --brand-soft:#103a36; --brand-tint:#0f2f2c; --on-brand:#06201d;
  --success:#3ed39a; --success-soft:#103a2c; --warning:#e0a64a; --warning-soft:#3a2c10;
  --danger:#ff5a66; --danger-ink:#ff9aa1; --danger-soft:#3a1517;
  --switch-off:#3a3a3e; --avatar-bg:#3a3a3a;
  --wa-surface:#000000; --wa-bar:#1c1c1ef2; --wa-sep:#54545899; --wa-search:#7676803d; --wa-sub:#8e8e93;
  --wa-wall:#0b141a; --wa-in:#1f2c34; --wa-out:#005c4b; --wa-meta:#ffffff99; --wa-bshadow:0 1px .5px #00000066;
  --wa-day:#1f2c34; --wa-day-ink:#8696a0; --wa-avatar:#6a7175; --wa-avatar-ink:#cfd4d6; --wa-quote:#ffffff12;
  --wa-menu:#2c2c2ef0; --wa-menu-sep:#54545899; --wa-danger:#ff453a; --wa-scrim:#00000080; --wa-pill:#2c2c2e;
  --wa-tick:#53bdeb; --wa-tab-ink:#ffffff; --wa-tabbar:#1c1c1ed9; --wa-tab-shadow:0 2px 14px #00000080;
  --wa-unread:#21c063; --on-wa-unread:#0b141a; --wa-unread-text:#e9edef; --wa-chip-on:#103529; --wa-chip-on-ink:#d9fdd3;
  --tbar-bg:#1c1c1ed9; --tbar-solid:#1c1c1e; --tbar-border:#ffffff14; --tbar-shadow:0 2px 14px #00000080,0 0 1px #ffffff1f;
  --tbar-ink:#ffffffd9; --tbar-ink-on:#ffffff; --tbar-sel:#ffffff1f; --tbar-badge:#21c063; --on-tbar-badge:#0b141a; --tbar-badge-ring:#1c1c1e;
  --tbar-chip-bg:#2c2c2eeb; --tbar-chip-ink:#ffffff;
  --shadow-pill:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.35);
  --shadow-card:0 1px 2px rgba(0,0,0,.3);
  --gb-card-bg:var(--elevated-h); --gb-card-border:var(--stroke3); --gb-card-shadow:0 1px 2px #00000073,0 8px 22px -10px #000000b3;
  --gb-btn-bg:var(--brand); --gb-btn-text:var(--on-brand); --gb-btn2-text:var(--brand); --gb-btn2-tint:var(--brand-soft);
  --gb-hero-bg:linear-gradient(135deg,color-mix(in srgb,var(--brand-strong) 70%,#000) 0%,color-mix(in srgb,var(--brand-strong) 48%,#000) 100%);
  --gb-hero-shadow:0 10px 26px -12px #000000b3;
  --album-card-bg:#1b1b1b; --album-card-border:#ffffff14; --album-card-shadow:0 8px 22px #00000077;
  --album-shimmer:linear-gradient(110deg,#1e1e1e 30%,#2a2a2a 50%,#1e1e1e 70%); --album-fail-bg:#1b1b1b; --album-fail-border:#ffffff30;
  --album-letter-bg:#f2f2f2; --album-letter-ink:#111111; --album-letter-ring:#1b1b1b; --album-chip-bg:#1b1b1be8; --album-chip-ink:#eeeeee;
  --album-chip-shadow:0 1px 4px #00000066; --album-on-ring:#f2f2f2;
  --album-view-bg:#0d0d0d; --album-view-ink:#f2f2f2; --album-view-sub:#8a8a8a; --album-view-dot:#3a3a3c; --album-view-dot-on:#f2f2f2;
  --album-view-pill:#1e1e1eee; --album-view-frame:#161616; --album-scrim:#000000aa;
  --album-pin-bg:#f2f2f2; --album-pin-ink:#111111; --album-pin-ring:#0d0d0d;
  --focus-ring:0 0 0 3px rgba(47,211,192,.28);
  --shadow-fab:0 10px 26px -8px rgba(0,0,0,.6); --ma-glass:#141414d9;
  --wp-tint:10%; --wp-glow:26%; --wp-pat-max:.2; --wp-veil:#000000;
  --att-bg:#2a2a2a; --att-shimmer:linear-gradient(110deg,#262626 30%,#323232 50%,#262626 70%); --att-on:#ececec; --att-ring:#ffffff22;
  --att-pill-bg:#000000b3; --att-more-bg:#000000a6; --att-k-other:#7a7a7a; /* «عرض مرفقات البطاقة داخلها» at night */
  --wp-dawn:linear-gradient(165deg,#3a2a24 0%,#33232b 52%,#262238 100%);
  --wp-sea:linear-gradient(170deg,#0c2a2b 0%,#0d2232 55%,#0e1b30 100%);
  --wp-sand:linear-gradient(170deg,#2c261c 0%,#272117 60%,#211c14 100%);
  --wp-night:linear-gradient(180deg,#16213b 0%,#0f182c 60%,#0a1120 100%);
  --lux-a:color-mix(in srgb,var(--brand) 30%,#0c1716); --lux-b:#0d1312; --lux-act:#f2f2f2; --lux-act-ink:#0d1312;
  --lux-shadow:0 18px 36px -18px #000000d9; --lux-glass:#ffffff0f; --lux-glass-b:#ffffff1f;
  --wp-bubble:#262626; --wp-bubble-shadow:0 1px 1.5px rgba(0,0,0,.45); --wp-chip:#1f1f1fd9; --wp-chip-ink:#ecececad;
  --selbar-bg:#2c2c2ef2; --selbar-sep:#ffffff26; --selbar-press:#ffffff17; --selbar-key:var(--brand);
  --selbar-shadow:0 6px 24px #00000099,0 0 0 .5px #ffffff1a;
  --clip-bg:#2c2c2ef7; --clip-sep:#ffffff1a; --clip-shadow:0 10px 34px #000000aa,0 0 0 .5px #ffffff1a; --clip-key:var(--brand);
  color-scheme:dark;
  --msend-bg:linear-gradient(160deg,#1c2a22d9,#14201ad9); --msend-line:#25d36640; --msend-shadow:0 6px 18px -10px #00000099; --msend-sec-bg:linear-gradient(160deg,#20232bd9,#1a1d24d9); --msend-sec-line:#6b728066; --msend-glass:#ffffff12; --msend-go:linear-gradient(180deg,#2fd772,#1fb85b); --msend-on-go:#ffffff; --msend-go-shadow:0 6px 14px -8px #00000099; --msend-mask:repeating-linear-gradient(135deg,#ffffff10 0 8px,#ffffff06 8px 16px);
}
/* face-theme:start — GENERATED by scripts/gen-face-theme.mjs from public/faces.js; do not edit by hand.
   «لون التطبيق يتبع وجه المشرف»: --face-N = face N's bubble colour, --on-face-N = the text that reads on it (auto-picked),
   --face-N-t = that face as readable text on the page (supervisor name). html[data-face="N"] (public/face-theme.js) maps the
   whole --brand family (buttons, links, focus, glows, the wallpaper's glow/waves/mist) to face N, light and dark.
   No block for face:12: the official turquoise stays exactly as above. Status colours (--green/--danger/...) never change. */
:root{--face-0:#8a6f45; --on-face-0:#ffffff; --face-0-t:#8a6f45; --face-1:#283257; --on-face-1:#ffffff; --face-1-t:#283257; --face-2:#986d75; --on-face-2:#ffffff; --face-2-t:#92676f; --face-3:#56a687; --on-face-3:#141414; --face-3-t:#2f8164; --face-4:#997646; --on-face-4:#141414; --face-4-t:#8d6a3a; --face-5:#8b7cb3; --on-face-5:#141414; --face-5-t:#796aa0; --face-6:#4b4e55; --on-face-6:#ffffff; --face-6-t:#4b4e55; --face-7:#5a97c8; --on-face-7:#141414; --face-7-t:#3c79a8; --face-8:#b86f60; --on-face-8:#141414; --face-8-t:#a45d4f; --face-9:#5f7350; --on-face-9:#ffffff; --face-9-t:#5f7350; --face-10:#201d51; --on-face-10:#ffffff; --face-10-t:#201d51; --face-11:#4a4a5c; --on-face-11:#ffffff; --face-11-t:#4a4a5c; --face-12:#0e9f9a; --on-face-12:var(--on-primary); --face-12-t:#0e9f9a;}
:root[data-theme=dark]{--face-0-t:#967b50; --face-1-t:#7381ab; --face-2-t:#9e737b; --face-3-t:#56a687; --face-4-t:#9f7c4c; --face-5-t:#8b7cb3; --face-6-t:#7e8189; --face-7-t:#5a97c8; --face-8-t:#b86f60; --face-9-t:#708561; --face-10-t:#797cb9; --face-11-t:#7d7d91;}
:root[data-face="0"]{--brand:#8a6f45;--brand-bright:#d6b27c;--brand-strong:#6f552b;--brand-deep:#382e1e;--brand-ink:#51432c;--brand-soft:#f8f1e7;--brand-tint:#fff8ef;--on-brand:#ffffff;--focus-ring:0 0 0 3px #8a6f4538;--shadow-fab:0 10px 24px -8px #8a6f458c}
:root[data-face="0"][data-theme=dark]{--brand:#ba9d72;--brand-strong:#a2865b;--brand-soft:#3b3122;--brand-tint:#30281c;--on-brand:#382e1e;--focus-ring:0 0 0 3px #ba9d7247;--shadow-fab:0 10px 26px -8px #00000099}
:root[data-face="1"]{--brand:#283257;--brand-bright:#a5b6ed;--brand-strong:#131b3e;--brand-deep:#2a2f3f;--brand-ink:#3d445b;--brand-soft:#eef2fd;--brand-tint:#f7f9ff;--on-brand:#ffffff;--focus-ring:0 0 0 3px #28325738;--shadow-fab:0 10px 24px -8px #2832578c}
:root[data-face="1"][data-theme=dark]{--brand:#92a1cd;--brand-strong:#7b89b4;--brand-soft:#2d3241;--brand-tint:#252835;--on-brand:#2a2f3f;--focus-ring:0 0 0 3px #92a1cd47;--shadow-fab:0 10px 26px -8px #00000099}
:root[data-face="2"]{--brand:#986d75;--brand-bright:#dfa7b1;--brand-strong:#7c535b;--brand-deep:#3b2a2d;--brand-ink:#553e42;--brand-soft:#faeff1;--brand-tint:#fff7f8;--on-brand:#ffffff;--focus-ring:0 0 0 3px #986d7538;--shadow-fab:0 10px 24px -8px #986d758c}
:root[data-face="2"][data-theme=dark]{--brand:#c2949c;--brand-strong:#a97d85;--brand-soft:#3d2d30;--brand-tint:#322527;--on-brand:#3b2a2d;--focus-ring:0 0 0 3px #c2949c47;--shadow-fab:0 10px 26px -8px #00000099}
:root[data-face="3"]{--brand:#53a384;--brand-bright:#69cfa8;--brand-strong:#358769;--brand-deep:#19362b;--brand-ink:#254f3e;--brand-soft:#e6f7ef;--brand-tint:#edfef6;--on-brand:#ffffff;--focus-ring:0 0 0 3px #53a38438;--shadow-fab:0 10px 24px -8px #53a3848c}
:root[data-face="3"][data-theme=dark]{--brand:#5faf8f;--brand-strong:#469778;--brand-soft:#1d392e;--brand-tint:#182e25;--on-brand:#19362b;--focus-ring:0 0 0 3px #5faf8f47;--shadow-fab:0 10px 26px -8px #00000099}
:root[data-face="4"]{--brand:#997646;--brand-bright:#ddaf72;--brand-strong:#7d5c2c;--brand-deep:#3a2d1b;--brand-ink:#544128;--brand-soft:#faf1e6;--brand-tint:#fff8f0;--on-brand:#ffffff;--focus-ring:0 0 0 3px #99764638;--shadow-fab:0 10px 24px -8px #9976468c}
:root[data-face="4"][data-theme=dark]{--brand:#c09b6a;--brand-strong:#a78454;--brand-soft:#3d301f;--brand-tint:#31271a;--on-brand:#3a2d1b;--focus-ring:0 0 0 3px #c09b6a47;--shadow-fab:0 10px 26px -8px #00000099}
:root[data-face="5"]{--brand:#8b7cb3;--brand-bright:#beabf2;--brand-strong:#706196;--brand-deep:#312c40;--brand-ink:#48405d;--brand-soft:#f3f0fe;--brand-tint:#faf8ff;--on-brand:#ffffff;--focus-ring:0 0 0 3px #8b7cb338;--shadow-fab:0 10px 24px -8px #8b7cb38c}
:root[data-face="5"][data-theme=dark]{--brand:#a798d1;--brand-strong:#8f80b8;--brand-soft:#342f43;--brand-tint:#2a2636;--on-brand:#312c40;--focus-ring:0 0 0 3px #a798d147;--shadow-fab:0 10px 26px -8px #00000099}
:root[data-face="6"]{--brand:#4b4e55;--brand-bright:#b4b8c3;--brand-strong:#33363d;--brand-deep:#2e2f32;--brand-ink:#434549;--brand-soft:#f1f2f4;--brand-tint:#f8f9fb;--on-brand:#ffffff;--focus-ring:0 0 0 3px #4b4e5538;--shadow-fab:0 10px 24px -8px #4b4e558c}
:root[data-face="6"][data-theme=dark]{--brand:#9fa2ab;--brand-strong:#878b93;--brand-soft:#313235;--brand-tint:#28292b;--on-brand:#2e2f32;--focus-ring:0 0 0 3px #9fa2ab47;--shadow-fab:0 10px 26px -8px #00000099}
:root[data-face="7"]{--brand:#5a97c8;--brand-bright:#73c0fe;--brand-strong:#3e7bab;--brand-deep:#1c3244;--brand-ink:#284862;--brand-soft:#e8f4ff;--brand-tint:#f5faff;--on-brand:#ffffff;--focus-ring:0 0 0 3px #5a97c838;--shadow-fab:0 10px 24px -8px #5a97c88c}
:root[data-face="7"][data-theme=dark]{--brand:#68a6d8;--brand-strong:#518ebe;--brand-soft:#1f3546;--brand-tint:#1a2b39;--on-brand:#1c3244;--focus-ring:0 0 0 3px #68a6d847;--shadow-fab:0 10px 26px -8px #00000099}
:root[data-face="8"]{--brand:#b86f60;--brand-bright:#fa9c88;--brand-strong:#9b5446;--brand-deep:#422722;--brand-ink:#603931;--brand-soft:#ffeeea;--brand-tint:#fff7f6;--on-brand:#ffffff;--focus-ring:0 0 0 3px #b86f6038;--shadow-fab:0 10px 24px -8px #b86f608c}
:root[data-face="8"][data-theme=dark]{--brand:#db8f7f;--brand-strong:#c17768;--brand-soft:#452a25;--brand-tint:#38231e;--on-brand:#422722;--focus-ring:0 0 0 3px #db8f7f47;--shadow-fab:0 10px 26px -8px #00000099}
:root[data-face="9"]{--brand:#5f7350;--brand-bright:#a7c294;--brand-strong:#465937;--brand-deep:#2b3225;--brand-ink:#3e4936;--brand-soft:#eff4ec;--brand-tint:#f6fbf3;--on-brand:#ffffff;--focus-ring:0 0 0 3px #5f735038;--shadow-fab:0 10px 24px -8px #5f73508c}
:root[data-face="9"][data-theme=dark]{--brand:#92a782;--brand-strong:#7b906b;--brand-soft:#2e3528;--brand-tint:#252b21;--on-brand:#2b3225;--focus-ring:0 0 0 3px #92a78247;--shadow-fab:0 10px 26px -8px #00000099}
:root[data-face="10"]{--brand:#201d51;--brand-bright:#abb0fe;--brand-strong:#0e0537;--brand-deep:#2c2d44;--brand-ink:#404262;--brand-soft:#f0f1ff;--brand-tint:#f8f9ff;--on-brand:#ffffff;--focus-ring:0 0 0 3px #201d5138;--shadow-fab:0 10px 24px -8px #201d518c}
:root[data-face="10"][data-theme=dark]{--brand:#989cdb;--brand-strong:#8184c2;--brand-soft:#2f3046;--brand-tint:#262739;--on-brand:#2c2d44;--focus-ring:0 0 0 3px #989cdb47;--shadow-fab:0 10px 26px -8px #00000099}
:root[data-face="11"]{--brand:#4a4a5c;--brand-bright:#b5b6cf;--brand-strong:#323243;--brand-deep:#2f2f36;--brand-ink:#44444f;--brand-soft:#f2f2f7;--brand-tint:#f9f9fe;--on-brand:#ffffff;--focus-ring:0 0 0 3px #4a4a5c38;--shadow-fab:0 10px 24px -8px #4a4a5c8c}
:root[data-face="11"][data-theme=dark]{--brand:#a0a0b5;--brand-strong:#88899d;--brand-soft:#323239;--brand-tint:#28282e;--on-brand:#2f2f36;--focus-ring:0 0 0 3px #a0a0b547;--shadow-fab:0 10px 26px -8px #00000099}
/* face-theme:end */

/* «توحيد خط وحجم الفقاعات»: on a phone every bubble uses the whole row beside the face, like the bot text bubble the
   owner picked (cards were already this wide; text bubbles were 86%). Sent bubbles keep a small gap on the far side. */
@media (max-width:760px){
  :root{ --bubble-max-w:100%; --bubble-max-w-sent:88%; }
}