/* فريق® workspace design system — sharp petrol + mint (owner pick: palette B, type 2).
   Tokens first; every component below derives from them. Logical properties so RTL/LTR come
   from the document direction alone. */
@import url("/static/fonts/Changa.css");
@import url("/static/fonts/Almarai.css");
@import url("/static/fonts/Archivo-Black.css");

:root{
  color-scheme:light;
  --bg:#F4F0E6;            /* warm paper */
  --surface:#FAF8F2;       /* rail / panels */
  --raised:#FFFFFF;        /* cards */
  --soft:#E9F3E8;          /* user bubbles, quiet fills */
  --text:#10201B;          /* ink */
  --muted:#4F5E58;
  --border:#E3DBC8;        /* soft warm-grey hairline (regular surfaces) */
  --border-strong:#CFC5AA; /* a touch stronger: inputs, composer, dropdowns */
  --line-soft:rgba(16,32,27,.14);
  --acc:#8FE0AE;           /* warm mint (no blue cast): active states, primary buttons; ink text on it */
  --acc-ink:#10201B;
  --green:#0F6E56;         /* deep green: emphasis text, marks */
  --green-deep:#0F6E56;
  --green-soft:#D6EFDC;
  --amber:#F2C14E;
  --red:#C8382B;
  --red-soft:#F6D5CE;
  --media-owner-bg:#D6EFDC;   /* library badges: owner's own uploads vs. the team's */
  --media-owner-ink:#0F6E56;
  --media-team-bg:#EDE6F5;
  --media-team-ink:#5B3A9E;
  --radius:8px;            /* one small radius token, applied consistently */
  --bw:1px;                /* regular hairline */
  --shadow-sm:0 1px 3px rgba(16,32,27,.09),0 1px 2px rgba(16,32,27,.05); /* floating things only */
  --shadow:0 10px 30px rgba(16,32,27,.16);                              /* sheets / large overlays only */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px;
  --font-ar:"Almarai","Changa",Tahoma,sans-serif;
  --font-latin:"Almarai","IBM Plex Sans",Tahoma,sans-serif;
  --display-ar:"Changa","Almarai",sans-serif;
  --display-latin:"Archivo Black","Changa",sans-serif;
  --font:var(--font-ar);
  --display:var(--display-ar);
}
html[dir="ltr"]{--font:var(--font-latin);--display:var(--display-latin)}

/* ---------- dark palette: deep green-black ground, warm light text, same accent.
   Applied via prefers-color-scheme when no explicit choice was made, and via
   data-theme="dark"/"light" once the viewer picks (team-ui.js, fareeq.mode). ---------- */
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0F1A15; --surface:#152420; --raised:#1B2D27; --soft:#1E3A2E;
    --text:#EEEAE0; --muted:#9FB0A6;
    --border:#2C3F37; --border-strong:#3E564A; --line-soft:rgba(238,234,224,.14);
    --acc:#8FE0AE; --acc-ink:#0F1A15;
    --green:#7FE3AA; --green-deep:#1E4536; --green-soft:#1C3A2C;
    --amber:#4A3A16; --red:#E2695C; --red-soft:#402019;
    --media-owner-bg:#1C3A2C; --media-owner-ink:#7FE3AA;
    --media-team-bg:#2E2440; --media-team-ink:#C9B6EA;
    --shadow-sm:0 1px 3px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.3);
    --shadow:0 10px 30px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0F1A15; --surface:#152420; --raised:#1B2D27; --soft:#1E3A2E;
  --text:#EEEAE0; --muted:#9FB0A6;
  --border:#2C3F37; --border-strong:#3E564A; --line-soft:rgba(238,234,224,.14);
  --acc:#8FE0AE; --acc-ink:#0F1A15;
  --green:#7FE3AA; --green-deep:#1E4536; --green-soft:#1C3A2C;
  --amber:#4A3A16; --red:#E2695C; --red-soft:#402019;
  --media-owner-bg:#1C3A2C; --media-owner-ink:#7FE3AA;
  --media-team-bg:#2E2440; --media-team-ink:#C9B6EA;
  --shadow-sm:0 1px 3px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.3);
  --shadow:0 10px 30px rgba(0,0,0,.5);
}

html{background:var(--bg)}
body{margin:0;min-width:320px;min-height:100dvh;background:var(--bg);color:var(--text);font:15px/1.6 var(--font)}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:0;text-wrap:balance}
h1{font-size:clamp(1.15rem,2vw,1.5rem)}h2{font-size:clamp(1.45rem,2.6vw,1.9rem)}h3{font-size:1.05rem}
.eyebrow{color:var(--green);font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
button,input,textarea,select{font:inherit}

/* ---------- shell ---------- */
/* Only meaningful once workspace.css's own @media(max-width:850px) block has turned
   .app-shell back into a single block column -- grid-template-columns on a grid
   container that no longer exists is a silent no-op today, but leaving it unscoped
   is exactly the kind of stray desktop-only rule that quietly reactivates a wide
   sidebar column if a later change ever makes .app-shell a grid on phones again. */
@media(min-width:851px){
  .app-shell{grid-template-columns:232px minmax(0,1fr)}
}
.sidebar{padding:18px 14px;background:var(--surface);border-inline-end:var(--bw) solid var(--border);border-inline-start:0;backdrop-filter:none}
.brand{display:grid;gap:8px;padding:0 6px 18px;border-bottom:var(--bw) solid var(--border);margin-bottom:14px}
.brand-mark{display:block;width:40px;height:40px;border:0;background:transparent;border-radius:10px;box-shadow:none;object-fit:cover;flex:none}
.brand-line{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;font-size:.86rem;font-weight:700;line-height:1.45}
.brand-line b{font-family:var(--display);font-weight:800;font-size:1.3rem;color:var(--text)}
.brand-line sup{font-size:.55rem;vertical-align:top;font-weight:700}
.brand-line small{display:block;width:100%;font-size:.72rem;color:var(--muted);font-weight:400}
.side-nav{gap:4px}
.nav-item{gap:10px;min-height:42px;padding:8px 10px;border:var(--bw) solid transparent;border-radius:var(--radius);color:var(--text);font-weight:700;text-align:start;transition:background-color .12s ease,color .12s ease}
.nav-item:hover{background:var(--surface);border-color:transparent;color:var(--text)}
.nav-item.is-active{background:var(--acc);border-color:transparent;color:var(--acc-ink);box-shadow:none}
.nav-item svg{width:18px;height:18px}
.nav-badge{min-width:20px;height:20px;border-radius:var(--radius);background:var(--text);color:var(--bg);font-weight:800;font-size:.68rem;margin-inline-start:auto}
.nav-item.is-active .nav-badge{background:var(--text);color:var(--acc)}
.sidebar-foot{gap:6px}
.quiet-button,.text-button{min-height:40px;padding:6px 10px;color:var(--muted);text-align:start;font-weight:700}
.quiet-button:hover,.text-button:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.workspace{padding:22px clamp(16px,3.5vw,48px) 56px}
.topbar{min-height:56px;margin-bottom:26px;align-items:center}
.topbar h1{margin:0}
.top-actions{gap:8px}
.topbar-action:empty{display:none}
.account-button{display:flex;align-items:center;gap:8px;min-height:40px;padding:4px 8px;border:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--raised);color:var(--text);font-weight:700;box-shadow:none}
.account-avatar{display:grid;place-items:center;width:26px;height:26px;flex:none;border:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--acc);color:var(--acc-ink);font-family:var(--display);font-weight:800;font-size:.85rem}
.sidebar-foot .account-button{width:100%;justify-content:flex-start;box-shadow:none}

/* ---------- account sheet: unlike #more-sheet (mobile-only nav grid), this one works at
   every width -- a bottom sheet on phones, a small anchored panel near the topbar on desktop. ---------- */
#account-sheet:not([hidden]){display:block;position:fixed;inset:0;z-index:40}
#account-sheet .account-sheet-backdrop{position:fixed;inset:0;z-index:40;display:block;width:100%;min-height:0;margin:0;padding:0;border:0;border-radius:var(--radius);background:rgba(16,32,27,.45)}
#account-sheet .account-sheet-panel{position:fixed;z-index:41;inset-inline:12px;bottom:12px;max-width:380px;margin-inline:auto;display:flex;flex-direction:column;gap:14px;padding:16px 14px calc(16px + env(safe-area-inset-bottom));border:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);max-height:82vh;overflow-y:auto}
@media(min-width:851px){
  #account-sheet .account-sheet-panel{inset-inline-start:auto;inset-inline-end:24px;top:64px;bottom:auto;width:300px;max-width:300px;max-height:calc(100vh - 90px)}
}
.account-sheet-fields{display:flex;flex-direction:column;gap:10px;padding-block:10px;border-block:var(--bw) solid var(--line-soft)}
.account-sheet-field{display:flex;flex-direction:column;gap:6px;font-size:.78rem;color:var(--muted);font-weight:700}
.account-sheet-field select{width:100%}
/* "+ new business" form under the workspace switcher (accounts-ui.js) */
.ws-create-form{gap:8px}
.ws-create-row{display:flex;flex-direction:column;gap:4px}
.ws-create-form input,.ws-create-form textarea,.ws-create-form select{width:100%}
.ws-create-form textarea{resize:vertical}
.ws-create-actions{display:flex;gap:8px;align-items:center}
.ws-create-actions button{flex:1}
.account-sheet-status{flex-direction:row;align-items:center;justify-content:space-between}
.account-sheet-actions{display:flex;flex-direction:column;gap:8px}
.account-sheet-actions .secondary-button{justify-content:flex-start}
.lang-select{min-height:38px;padding:4px 8px;border:var(--bw) solid var(--border);background:var(--raised);color:var(--text);font-weight:700}
.status-pill,.context-note,.status-chip{border:var(--bw) solid var(--border);border-radius:var(--radius);padding:4px 9px;color:var(--text);font-size:.74rem;font-weight:700;background:var(--raised)}
.status-pill i{border-radius:var(--radius);background:var(--acc);box-shadow:none;width:8px;height:8px;border:var(--bw) solid var(--border)}
.status-pill.offline i{background:var(--amber)}
.status-chip.is-connected{border-color:var(--border);background:var(--green-soft);color:var(--text)}
.global-status{border:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--amber);color:var(--text);font-weight:700}
.global-status[data-kind="error"]{background:var(--red-soft)}
.section-heading{margin-bottom:14px;align-items:flex-end}
.section-heading h2{position:relative;display:inline-block}
.section-heading h2::after{content:"";position:absolute;inset-inline:0;bottom:-4px;height:3px;background:var(--acc);z-index:-1;border-radius:var(--radius)}
.view{animation:none}
.notice{border:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--raised);color:var(--text);font-size:.85rem;box-shadow:none}
.notice svg{color:var(--green)}

/* ---------- buttons: exactly one filled/primary weight per view; everything else is
   quiet (outlined) or borderless. No offset "brutalist" shadows anywhere. ---------- */
.primary-button,.secondary-button,.send-button,.danger-button{min-height:42px;padding:8px 14px;border:var(--bw) solid var(--border);border-radius:var(--radius);font-weight:700;transition:background-color .12s ease,border-color .12s ease,opacity .12s ease;box-shadow:none}
.primary-button,.send-button{background:var(--acc);color:var(--acc-ink);border-color:transparent;font-weight:800}
.secondary-button{background:transparent;color:var(--text);border-color:var(--border-strong)}
.danger-button{background:transparent;color:var(--red);border-color:var(--red-soft)}
.primary-button:hover,.send-button:hover{filter:brightness(1.05)}
.secondary-button:hover{background:var(--surface);border-color:var(--text)}
.danger-button:hover{background:var(--red-soft)}
button:disabled{opacity:.5;box-shadow:none}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--green);outline-offset:2px}

/* borderless variants: quiet secondary actions never compete with the one primary button */
.text-button,.icon-button{border-color:transparent;background:transparent;box-shadow:none}
.icon-button:hover{background:var(--surface)}

/* ---------- team chat ---------- */
.team-switcher{display:grid;grid-template-columns:minmax(0,260px);gap:10px;margin-bottom:14px}
.emp{display:flex;align-items:center;gap:10px;padding:8px 10px;border:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--raised);color:var(--text);text-align:start;cursor:pointer}
.emp.is-active{background:var(--acc);border-color:transparent;box-shadow:none}
.emp b{display:block;font-family:var(--display);font-weight:800;font-size:1rem;line-height:1.2}
.emp span{display:block;color:var(--muted);font-size:.72rem}
.emp.is-active span{color:var(--acc-ink);opacity:.8}
.ava{width:40px;height:40px;flex:none;border:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--bg);display:block}
.emp.is-active .ava{background:var(--raised)}
.chat-log{gap:12px;min-height:300px;max-height:56dvh;padding:6px 2px 18px;scrollbar-color:var(--line-soft) transparent}
.message{gap:10px;max-width:min(760px,94%)}
.message .avatar{width:34px;height:34px;border-radius:var(--radius);border:var(--bw) solid var(--border);background:var(--bg);color:transparent;font-size:0;padding:0;overflow:hidden}
.message .avatar .ava{width:100%;height:100%;border:0}
.message .bubble{display:grid;gap:4px;min-width:0}
.message .who{font-family:var(--display);font-weight:800;font-size:.8rem;color:var(--green)}
.message p{border:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--raised);color:var(--text)}
.message.user p{background:var(--soft);border-color:var(--border);border-radius:var(--radius)}
.message.pending p{color:var(--muted);border-style:dashed}
.onboarding-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.onboarding-actions .secondary-button{min-height:36px}
.composer{padding:8px;border:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--raised);box-shadow:var(--shadow-sm)}
.composer:focus-within{border-color:var(--green)}
.composer textarea{color:var(--text)}
.composer textarea::placeholder{color:var(--muted)}
#chat-form{grid-template-columns:auto minmax(0,1fr) auto;align-items:end}
#chat-media-attachments{grid-column:1/-1;display:flex;gap:7px;flex-wrap:wrap}
#chat-media-attachments:empty{display:none}
#chat-media-attachments .media-card{display:flex;align-items:center;gap:7px;max-width:190px;min-width:0;padding:4px 6px}
#chat-media-attachments .media-preview{width:36px;height:36px;aspect-ratio:auto;flex:none;border-radius:var(--radius);overflow:hidden}
#chat-media-attachments .media-card span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.73rem}
#chat-media-attachments .media-card button{min-height:30px;margin-inline-start:auto;padding:2px 5px}
#chat-media-picker{grid-column:1;white-space:nowrap}
#chat-question{grid-column:2;min-width:0}
#chat-form .send-button{grid-column:3}
#chat-media-picker:focus-visible,#chat-media-attachments button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.local-note{color:var(--muted)}

/* ---------- cards & lists ---------- */
.action-card,.inbox-item,.report-card,.account-card,.media-card,.draft-card,.product-card,.social-item,.ad-campaign-card,.whatsapp-template-card,.tiktok-video-card,.social-comment,.youtube-card,.catalog-editor,.video-maker,.social-content-browser,.ad-campaigns-panel,.whatsapp-template-panel,.telegram-publisher,.telegram-targets-card,.tiktok-workspace,.tiktok-console>section,.tiktok-boundaries,.ad-builder{border:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--raised);box-shadow:none}
.social-comment,.tiktok-video-card{border-width:var(--bw);background:var(--surface)}
.empty-state{margin:0;padding:32px 18px;border:var(--bw) dashed var(--border-strong);border-radius:var(--radius);color:var(--muted);background:transparent;text-align:center}

/* ---------- shared loading skeleton: one shimmer, reused everywhere a view loads ---------- */
@keyframes skeleton-shimmer{to{background-position:-135% 0}}
.skeleton{position:relative;overflow:hidden;border:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--surface) linear-gradient(90deg,var(--surface) 0%,var(--raised) 40%,var(--surface) 80%);background-size:250% 100%;animation:skeleton-shimmer 1.3s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.skeleton{animation:none}}
.detail-grid div{border:var(--bw) solid var(--line-soft);border-radius:var(--radius);background:var(--surface)}
.detail-grid span{color:var(--muted)}
.card-header h3,.draft-card h4,.product-card h4,.ad-campaign-card h4,.whatsapp-template-card h4{font-family:var(--display)}
.action-summary,.inbox-item p,.report-card p,.social-item-copy,.social-comment>p,.product-card p{color:var(--text)}
.account-symbol{border:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text)}
.account-card input{accent-color:var(--green)}
.selection-bar{border:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--raised);box-shadow:var(--shadow)}
.video-form input,.video-form select,.reply-form textarea,.draft-form textarea,.draft-form select,.catalog-controls select,.catalog-form input,.catalog-form select,.catalog-form textarea,.social-content-controls select,.ad-campaign-controls select,.whatsapp-template-controls select,.whatsapp-template-form input,.whatsapp-template-form select,.whatsapp-template-form textarea,.telegram-publish-form textarea,.telegram-publish-form select,.telegram-publish-form input[type=datetime-local],.tiktok-publish-form input[type="url"],.tiktok-publish-form textarea,.tiktok-publish-form select,.ad-form input,.ad-form select,.delete-confirm input{border:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--raised);color:var(--text);outline-color:var(--green)}
.video-form label,.catalog-controls label,.catalog-form label,.social-content-controls label,.ad-campaign-controls label,.whatsapp-template-controls label,.whatsapp-template-form label,.telegram-publish-form>label,.tiktok-publish-form label,.draft-card p{color:var(--muted)}
.image-choice{border:var(--bw) solid var(--border);border-radius:var(--radius)}
.image-choice:has(input:checked){outline:3px solid var(--green)}
.media-preview,.product-image,.tiktok-video-preview{border-radius:var(--radius);background:var(--surface);color:var(--muted)}
.product-meta span,.social-item-tags span,.social-provider-link,.tiktok-video-metrics span,.tiktok-verified{border:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--raised);color:var(--text);font-weight:700}
.action-warning{border:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--amber);color:var(--text)}
.action-error{border:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--red-soft);color:var(--text)}
.action-history{background:var(--surface)}
.action-media{border:var(--bw) solid var(--line-soft);border-radius:var(--radius);background:var(--surface)}
.action-media-info img,.action-media-info video{border-radius:var(--radius);border:var(--bw) solid var(--border)}
.youtube-card .eyebrow,.tiktok-connection-copy .eyebrow,.ad-builder .eyebrow{color:var(--green)}
.youtube-card p,.tiktok-connection-copy p,.video-maker p,.ad-builder p,.tiktok-boundaries p,.catalog-form small,.media-card small,.report-card time,.social-item>header time,.social-comment time,.inbox-meta{color:var(--muted)}
.tiktok-mark{border:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--text);color:var(--bg);text-shadow:none;box-shadow:none}
.tiktok-stats div{border:var(--bw) solid var(--line-soft);border-radius:var(--radius);background:var(--surface)}
.tiktok-switches,.ad-categories,.telegram-target-picker{border:var(--bw) solid var(--border);border-radius:var(--radius)}
.tiktok-consent,.telegram-consent{border-radius:var(--radius);background:var(--soft);color:var(--text)!important}
.tiktok-switches label{color:var(--text)}
.tiktok-boundaries{background:var(--surface)}.tiktok-boundaries b{color:var(--text)}
.delete-confirm{border:var(--bw) solid var(--red);border-radius:var(--radius);background:var(--red-soft)}
.delete-confirm label{color:var(--text)}
.more-sheet button{border:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--raised);color:var(--text);font-weight:700}
.more-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-block-end:8px;border-block-end:var(--bw) solid var(--line-soft)}
.more-sheet-head b{font-family:var(--display);font-weight:800;font-size:1.05rem}
.more-sheet-list{display:flex;flex-direction:column;gap:4px}
.more-sheet-list button{display:flex;align-items:center;gap:10px;min-height:46px;padding:8px 10px;text-align:start}
.more-sheet-list button svg{width:18px;height:18px;flex:none}
.more-sheet-list .nav-badge{margin-inline-start:auto}
.skip-link{border-radius:var(--radius);background:var(--acc);color:var(--acc-ink);border:var(--bw) solid var(--border)}

/* ---------- inbox by platform ---------- */
.inbox-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.inbox-tabs button{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:5px 11px;border:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--raised);color:var(--text);font-weight:700;font-size:.82rem}
.inbox-tabs button svg{width:16px;height:16px;fill:currentColor;stroke:none}
.inbox-tabs button.is-active{background:var(--acc);color:var(--acc-ink);border-color:transparent;box-shadow:none}
.inbox-tabs button small{min-width:20px;padding:0 5px;background:var(--text);color:var(--bg);font-size:.68rem;text-align:center;font-variant-numeric:tabular-nums}
.inbox-tabs button.is-active small{color:var(--acc)}
.inbox-item[hidden]{display:none}
.inbox-item{padding:14px 16px;display:grid;gap:6px}
.inbox-meta b{display:inline-flex;align-items:center;gap:7px;font-family:var(--display);font-weight:800;color:var(--text)}
.inbox-meta b svg{width:16px;height:16px;fill:currentColor;stroke:none}
.pglyph{width:18px;height:18px;fill:currentColor;stroke:none}

/* ---------- mobile ---------- */
@media(max-width:850px){
  .workspace{padding:16px 16px calc(96px + env(safe-area-inset-bottom))}
  .mobile-nav{inset-inline:0;bottom:0;padding:4px 4px calc(4px + env(safe-area-inset-bottom));border:0;border-top:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:none;backdrop-filter:none}
  .mobile-nav .nav-item{min-height:50px;border:0;box-shadow:none;font-size:.66rem;font-weight:800;color:var(--muted)}
  .mobile-nav .nav-item.is-active{background:var(--acc);color:var(--acc-ink);border-inline:var(--bw) solid var(--border)}
  .mobile-nav .nav-badge{background:var(--text);color:var(--bg)}
  .mobile-nav .nav-dot{width:9px;height:9px;min-width:0;padding:0;font-size:0;line-height:0;border-radius:50%;background:var(--red-soft);border:var(--bw) solid var(--border)}
  /* never wrap to a second row: below 360px every label goes icon-only, kept accessible via aria-label */
  @media(max-width:360px){.mobile-nav .nav-item span{display:none}}

  /* ---------- "المزيد" drawer: slide-in panel + backdrop (id-scoped so it always
     overrides the older single-sheet rules from workspace.css regardless of source order) ---------- */
  #more-sheet:not([hidden]){display:block;position:static;inset:auto;padding:0;border:0;border-radius:var(--radius);background:transparent;box-shadow:none}
  #more-sheet .more-sheet-backdrop{position:fixed;inset:0;z-index:30;display:block;width:100%;min-height:0;margin:0;padding:0;border:0;border-radius:var(--radius);background:rgba(16,32,27,.45)}
  #more-sheet .more-sheet-panel{position:fixed;z-index:31;inset-block:0;inset-inline-start:0;width:min(80vw,300px);max-width:300px;display:flex;flex-direction:column;gap:14px;padding:16px 14px calc(16px + env(safe-area-inset-bottom));border:0;border-inline-end:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);overflow-y:auto;animation:more-sheet-in .16s ease both}
  @keyframes more-sheet-in{from{transform:translateX(-100%)}to{transform:translateX(0)}}
  @keyframes more-sheet-in-rtl{from{transform:translateX(100%)}to{transform:translateX(0)}}
  html[dir="rtl"] #more-sheet .more-sheet-panel{inset-inline-start:auto;inset-inline-end:0;animation-name:more-sheet-in-rtl}
  #more-sheet .more-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-block-end:8px;border-block-end:var(--bw) solid var(--line-soft)}
  #more-sheet .more-sheet-head b{font-family:var(--display);font-weight:800;font-size:1.05rem}
  #more-sheet .more-sheet-list{display:flex;flex-direction:column;gap:4px}
  #more-sheet .more-sheet-list button{display:flex;align-items:center;gap:10px;min-height:46px;padding:8px 10px;border:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--raised);color:var(--text);font-weight:700;text-align:start}
  #more-sheet .more-sheet-list button svg{width:18px;height:18px;flex:none}
  #more-sheet .more-sheet-list .nav-badge{margin-inline-start:auto}
  #more-sheet .more-sheet-settings{display:flex;flex-direction:column;gap:10px;padding-block:10px;border-block:var(--bw) solid var(--line-soft)}
  #more-sheet .more-sheet-field{display:flex;flex-direction:column;gap:6px;font-size:.78rem;color:var(--muted);font-weight:700}
  #more-sheet .more-sheet-field .lang-select{width:100%}
  #more-sheet #logout-drawer{border:var(--bw) solid var(--border);text-align:center}
  .team-switcher{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
  .team-switcher::-webkit-scrollbar{display:none}
  .emp{flex:none;padding:5px 9px 5px 6px;gap:7px}
  .emp span{display:none}
  .ava{width:24px;height:24px;border-width:var(--bw)}
  .emp b{font-size:.9rem}
  .chat-log{max-height:none;min-height:240px}
  .selection-bar{bottom:76px}
  .media-select-bar{bottom:76px}
  #chat-media-picker{width:44px;padding:0;font-size:0}
  #chat-media-picker::before{content:"＋";font-size:1.4rem;line-height:1}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---------- hover: a calm border-color shift, never a shadow lift ---------- */
@media(hover:hover){
  .action-card:hover,.inbox-item:hover,.report-card:hover,.account-card:hover,.media-card:hover,.draft-card:hover,.product-card:hover,.social-item:hover,.ad-campaign-card:hover,.whatsapp-template-card:hover,.tiktok-video-card:hover,.youtube-card:hover,.emp:hover{border-color:var(--border-strong);transition:border-color .12s ease}
  .media-preview img:hover,.product-image img:hover,.image-choice:hover{transform:scale(1.02);transition:transform .12s ease}
}