/* «شريط القوائم العائم» (public/tab-bar.js; owner msg dd97406b, pick bc9b60d2 «ابنِ حرفياً مثل واتساب»).
   The WhatsApp iOS floating tab bar, 1:1. Layout only: every colour and size is a --tbar-* token in theme-tokens.css.
   It sits at the bottom of the home column (.side): full width on a phone, the same capsule centred under the home column
   on a computer. Hidden in a chat (the column is hidden there on a phone) and while the keyboard is up (.kb). */
.side.has-tbar{position:relative}
.side.has-tbar .sscroll{padding-bottom:calc(var(--tbar-clear) + var(--sb))}
.tbar-wrap{position:absolute;inset-inline:0;bottom:max(var(--tbar-lift),calc(var(--sb) - var(--tbar-sb-tuck)));z-index:var(--tbar-z);
  display:flex;flex-direction:column;align-items:flex-end;gap:var(--tbar-chip-gap);padding:0 var(--tbar-side);pointer-events:none;
  transition:transform .24s cubic-bezier(.2,.8,.2,1),opacity .2s ease}
.tbar-wrap.kb{transform:translateY(calc(100% + var(--tbar-h)));opacity:0}
.tbar-wrap.kb .tbar,.tbar-wrap.kb .tbar-ask{pointer-events:none;visibility:hidden}
.tbar{pointer-events:auto;align-self:stretch;box-sizing:border-box;width:100%;max-width:var(--tbar-max);margin-inline:auto;min-height:var(--tbar-h);
  display:flex;align-items:stretch;justify-content:space-between;gap:1px;padding:var(--tbar-pad);border-radius:var(--radius-pill);
  background:var(--tbar-bg);border:.5px solid var(--tbar-border);box-shadow:var(--tbar-shadow);
  -webkit-backdrop-filter:var(--tbar-blur);backdrop-filter:var(--tbar-blur);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.tbar-tab{flex:1 1 0;min-width:var(--tbar-tab-min);min-height:var(--tbar-tab-h);display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--tbar-l-gap);padding:4px 0 3px;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--tbar-ink);
  font:inherit;font-size:var(--tbar-fs);font-weight:var(--fw-medium);line-height:1.15;cursor:pointer;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;transition:background-color .18s ease,color .18s ease,transform .12s ease}
.tbar-tab.on{background:var(--tbar-sel);color:var(--tbar-ink-on);font-weight:var(--fw-bold)}
.tbar-tab:active{transform:scale(.94)}
.tbar-tab:focus-visible,.tbar-ask:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.tbar-ic{position:relative;display:grid;place-items:center;width:var(--tbar-icon);height:var(--tbar-icon)}
.tbar-ic svg{width:100%;height:100%;display:block}
.tbar-tab.on .tbar-ic svg{stroke-width:2.05}
.tbar-l{max-width:100%;overflow:hidden;text-overflow:ellipsis}
/* the WhatsApp badge: green circle with a white number on the icon's top corner (top-left in Arabic, top-right in English) */
.tbar-n{position:absolute;top:-6px;box-sizing:border-box;min-width:var(--tbar-badge-s);height:var(--tbar-badge-s);padding:0 5px;
  border-radius:var(--radius-pill);background:var(--tbar-badge);color:var(--on-tbar-badge);box-shadow:0 0 0 2px var(--tbar-badge-ring);
  font-style:normal;font-size:var(--tbar-badge-fs);font-weight:var(--fw-bold);line-height:var(--tbar-badge-s);text-align:center;
  font-variant-numeric:tabular-nums;direction:ltr}
.tbar-wrap[dir=rtl] .tbar-n{left:-11px}.tbar-wrap[dir=ltr] .tbar-n{right:-11px} /* physical: the badge itself is LTR (digits, 99+) */
.tbar-n.stale{opacity:.55}
/* «أنت»: the account avatar at the far end */
.tbar-av{width:var(--tbar-av);height:var(--tbar-av);border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:var(--tbar-av-bg);color:var(--tbar-av-ink);font-size:var(--fs-sm);font-weight:var(--fw-bold);line-height:1}
.tbar-av img{width:100%;height:100%;object-fit:cover;display:block}
.tbar-tab.on .tbar-av{box-shadow:0 0 0 1.5px var(--tbar-ink-on)}
/* «اسأل أومنيس»: floating chip above the bar at the far end (like «اسأل Meta AI») */
.tbar-ask{pointer-events:auto;display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--tbar-chip-h);padding-inline:var(--space-3) var(--space-4);
  border:.5px solid var(--tbar-border);border-radius:var(--radius-pill);background:var(--tbar-chip-bg);color:var(--tbar-chip-ink);box-shadow:var(--tbar-shadow);
  -webkit-backdrop-filter:var(--tbar-blur);backdrop-filter:var(--tbar-blur);font:inherit;font-size:var(--fs-lg);cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:transform .12s ease}
.tbar-ask:active{transform:scale(.96)}
.tbar-ask b{font-weight:var(--fw-bold);white-space:nowrap}
.tbar-ask-ic{width:var(--tbar-chip-ic);height:var(--tbar-chip-ic);display:grid;place-items:center;flex:none}
.tbar-ask-ic > *{width:100%;height:100%}
.tbar-wrap.in .tbar,.tbar-wrap.in .tbar-ask{animation:tbar-in .32s cubic-bezier(.2,.8,.2,1)}
@keyframes tbar-in{from{transform:translateY(16px);opacity:0}}
/* no backdrop-filter, or «تقليل الشفافية» on: a solid bar (Apple's «Tinted» idea) so the labels always read */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.tbar,.tbar-ask{background:var(--tbar-solid)}}
@media (prefers-reduced-transparency:reduce){.tbar,.tbar-ask{background:var(--tbar-solid);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (prefers-reduced-motion:reduce){.tbar-wrap,.tbar-tab,.tbar-ask{transition:none}.tbar-wrap.in .tbar,.tbar-wrap.in .tbar-ask{animation:none}.tbar-tab:active,.tbar-ask:active{transform:none}}
@media (forced-colors:active){.tbar,.tbar-ask{border:1px solid CanvasText}.tbar-tab.on{outline:2px solid Highlight}}
/* computer: the home column is 300px — a little less side margin so «Approvals» / «الموافقات» never clip */
@media (min-width:761px){.tbar-wrap{padding:0 var(--space-2)}}
/* very narrow phones: keep the five tabs on one row */
@media (max-width:350px){.tbar-wrap{padding:0 var(--space-2)}.tbar-tab{min-width:0}}