/* ============================================================================
   shared_bsf/static/css/chrome.css — PROPRIÉTAIRE UNIQUE du chrome réseau BSF
   Posé le 2026-09-17 (GO Walid) — audit : rapport AUDIT_CHROME_2026_09_17

   POURQUOI CE FICHIER
   Avant lui, les composants du chrome (.bsf-eco-*, .adm-rc-*) n'appartenaient à
   AUCUNE feuille : ils étaient stylés par des <style> inline dans les gabarits PHP,
   qui lisaient les jetons --s-card / --s-text / --s-muted. Or ces jetons appartiennent
   au SITE HÔTE et sont redéfinis par 4 feuilles concurrentes : la carte de navigation
   prenait donc 4 couleurs différentes selon le site (jusqu'au blanc sur bsf-tunisie).

   RÈGLE (R-102, et ce fichier en est l'application au chrome)
   Le chrome ne lit QUE ses invariants --s-nav-* (eux-mêmes dérivés de --bsf-shared-*,
   définis une seule fois dans tokens.css). JAMAIS --s-card / --s-text / --s-muted,
   qui varient d'un site à l'autre. Toute règle ajoutée ici doit respecter cela.

   CHARGEMENT : en DERNIER, après la feuille de chrome du site (social.css ou
   portal_social_shell.css), afin de gagner la cascade à spécificité égale.
   ============================================================================ */

/* ── Invariants du chrome ───────────────────────────────────────────────────
   Repli défensif : si aucune feuille hôte n'a défini --s-nav-*, le chrome garde
   malgré tout sa palette. Les valeurs sont celles de tokens.css (--bsf-shared-*). */
:root {
  --bsf-chrome-bg:     var(--s-nav-bg,     var(--bsf-shared-bg, #1E3A5F));
  --bsf-chrome-border: var(--s-nav-border, transparent);
  --bsf-chrome-text:   var(--bsf-shared-text, #FFFFFF);
  --bsf-chrome-muted:  var(--s-nav-muted,  var(--bsf-shared-text-muted, rgba(255,255,255,.75)));
  --bsf-chrome-accent: var(--s-nav-accent, var(--bsf-shared-mandarine, #E8762F));
  --bsf-chrome-hover:  var(--s-nav-hover,  rgba(255,255,255,.08));
  --bsf-chrome-hr:     var(--s-nav-hr,     rgba(255,255,255,.12));
}

/* ── Colonne gauche : cartes de navigation (ex-inline ecosystem_sidenav.php) ── */
.bsf-eco-side { display: flex; flex-direction: column; gap: 10px; }

.bsf-eco-card {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; border-radius: 13px;
  background: var(--bsf-chrome-bg);
  border: 1px solid var(--bsf-chrome-border);
  color: var(--bsf-chrome-text);
  text-decoration: none;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.bsf-eco-card:hover { transform: translateX(2px); border-color: var(--bsf-chrome-accent); }
.bsf-eco-card.is-current {
  border-color: var(--bsf-chrome-accent);
  box-shadow: inset 3px 0 0 var(--bsf-chrome-accent);
}

/* RTL-FIX 2026-09-18 : en arabe, persan, ourdou le bord de DÉPART est à droite — la barre de la page courante
   et le glissement au survol doivent suivre la direction du document, sinon ils pointent hors du contenu. */
[dir="rtl"] .bsf-eco-card:hover { transform: translateX(-2px); }
[dir="rtl"] .bsf-eco-card.is-current { box-shadow: inset -3px 0 0 var(--bsf-chrome-accent); }

/* L'icône garde la couleur de marque de la destination (--eco-c, posée en inline
   par le gabarit) : c'est une identité de destination, pas une couleur d'hôte. */
.bsf-eco-icon {
  width: 38px; height: 38px; flex: none; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--eco-c, var(--bsf-chrome-accent)) 14%, transparent);
  color: var(--eco-c, var(--bsf-chrome-accent));
}
.bsf-eco-icon i, .bsf-eco-icon svg { width: 18px; height: 18px; }

.bsf-eco-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bsf-eco-text strong {
  font-size: 13.5px; font-weight: 700; line-height: 1.2;
  color: var(--bsf-chrome-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bsf-eco-text small {
  font-size: 11.5px; line-height: 1.3;
  color: var(--bsf-chrome-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Colonne droite : lignes des widgets (ex-inline widgets/right/*.php) ──────
   Le FOND de .bsf-card était déjà un invariant ; le TEXTE ne l'était pas : les noms
   lisaient --s-text et devenaient illisibles sur les hôtes à palette claire. */
.bsf-right-col .adm-rc-name,
.bsf-right-col .adm-rc-row { color: var(--bsf-chrome-text); }
.bsf-right-col .adm-rc-sub { color: var(--bsf-chrome-muted); }
.bsf-right-col .adm-rc-row + .adm-rc-row { border-top-color: var(--bsf-chrome-hr); }
.bsf-right-col .adm-rc-row:hover { background: var(--bsf-chrome-hover); }

/* ── Composants émis par le chrome mais absents de portal_social_shell.css ──── */
.bsf-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #fff; font-weight: 700;
  flex-shrink: 0; text-transform: uppercase; letter-spacing: .5px;
  user-select: none; cursor: default;
}
.bsf-right-col .bsf-widget h3,
.bsf-right-col .bsf-widget-title {
  font-size: 11px; font-weight: 700; margin-bottom: 14px;
  color: var(--bsf-chrome-accent);
  text-transform: uppercase; letter-spacing: .7px;
}
.bsf-right-col .adm-rc-card .bsf-widget-title { font-size: 13px; margin: 0 0 10px; }

@media (max-width: 767px) {
  .bsf-right-col .bsf-widget h3 { margin-bottom: 10px; }
}

/* Shared discovery row styles (one physical owner). */
.adm-rc-card .bsf-widget-title{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;margin:0 0 10px}.adm-rc-card .bsf-widget-title i{width:15px;height:15px;color:var(--s-accent)}.adm-rc-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--s-border);text-decoration:none;color:var(--s-text)}.adm-rc-row:first-of-type{border-top:0;padding-top:0}.adm-rc-row:hover .adm-rc-name{color:var(--s-accent)}.adm-rc-row .adm-rc-av,.adm-rc-row .adm-rc-av>*{width:34px!important;height:34px!important;flex:none;border-radius:9px}.adm-rc-name{font-weight:600;font-size:13px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.adm-rc-sub{color:var(--s-muted);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.adm-rc-more{display:inline-block;margin-top:9px;font-size:12.5px;font-weight:600;color:var(--s-accent);text-decoration:none}.adm-rc-more:hover{text-decoration:underline}

/* Shared shell: desktop navigation, mobile shortcuts and widgets have one owner.
   The marker is emitted only on participating sites. :has keeps the layout usable
   without JavaScript; excluded applications retain their existing chrome. */
:is(html.bsf-shared-chrome,html:has(#bsfSharedNav)) {
  --bsf-chrome-bg:var(--bsf-shared-bg,#1E3A5F);
  --bsf-chrome-text:var(--bsf-shared-text,#FFFFFF);
  --bsf-chrome-muted:var(--bsf-shared-text-muted,rgba(255,255,255,.75));
  --bsf-chrome-accent:var(--bsf-shared-mandarine,#E8762F);
  --bsf-chrome-menu-h:56px;
  --bsf-chrome-menu-min:56px;
  --bsf-chrome-bottom-h:calc(72px + env(safe-area-inset-bottom,0px));
  --bsf-chrome-top:var(--bsf-topbar-h,62px);
  --bsf-chrome-offset:calc(var(--bsf-chrome-top) + var(--bsf-chrome-menu-h));
  scroll-padding-top:calc(var(--bsf-chrome-offset) + 16px);
}
:is(html.bsf-shared-chrome,html:has(#bsfSharedNav)) body {
  --bsf-chrome-bg:var(--bsf-shared-bg,#1E3A5F);
  --bsf-chrome-text:var(--bsf-shared-text,#FFFFFF);
  --bsf-chrome-muted:var(--bsf-shared-text-muted,rgba(255,255,255,.75));
  --bsf-chrome-accent:var(--bsf-shared-mandarine,#E8762F);
  --bsf-chrome-border:transparent;
  --bsf-chrome-hover:rgba(255,255,255,.08);
  --bsf-chrome-hr:rgba(255,255,255,.12);
  padding-block-start:var(--bsf-chrome-offset)!important;
}
/* Responsive chrome is shared here; host styles do not size its controls. */
:is(html.bsf-shared-chrome,html:has(#bsfSharedNav)) #bsfTopbar{background:var(--bsf-chrome-bg)}
:is(html.bsf-shared-chrome,html:has(#bsfSharedNav)) #bsfTopbar .bsf-topbar-inner{width:100%;max-width:1600px;padding:6px max(8px,env(safe-area-inset-right,0px)) 6px max(8px,env(safe-area-inset-left,0px));gap:8px;min-height:60px;flex-wrap:wrap;justify-content:flex-end}
:is(html.bsf-shared-chrome,html:has(#bsfSharedNav)) #bsfTopbar .bsf-brand{flex:none;min-width:44px;min-height:44px;justify-content:center}
:is(html.bsf-shared-chrome,html:has(#bsfSharedNav)) #bsfTopbar :is(.bsf-btn,.bsf-icon-btn){min-width:44px;min-height:44px;height:auto;flex-shrink:0;padding:8px 12px;box-sizing:border-box;white-space:nowrap}
:is(html.bsf-shared-chrome,html:has(#bsfSharedNav)) #bsfTopbar .bsf-icon-btn{width:44px;padding:8px}
:is(html.bsf-shared-chrome,html:has(#bsfSharedNav)) #bsfTopbar .bsf-topbar-actions{gap:4px;align-items:center}
:is(html.bsf-shared-chrome,html:has(#bsfSharedNav)) #bsfTopbar .bsf-logo-ring{width:36px;height:36px}
:is(html.bsf-shared-chrome,html:has(#bsfSharedNav)) #bsfTopbar #bsfUserDrop .bsf-hide-mobile{max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(html.bsf-shared-chrome,html:has(#bsfSharedNav)) :is(#bsfTopbar .bsf-menu,[data-bsf-chrome-dropdown]){position:fixed!important;left:var(--bsf-dropdown-x,12px)!important;right:auto!important;top:var(--bsf-dropdown-y,calc(var(--bsf-chrome-top) + 8px))!important;width:var(--bsf-dropdown-width,280px)!important;max-width:calc(var(--bsf-chrome-vw,100vw) - 24px)!important;max-height:calc(var(--bsf-chrome-vh,100dvh) - (var(--bsf-dropdown-y,var(--bsf-chrome-top)) - var(--bsf-chrome-vtop,0px)) - 12px)!important;box-sizing:border-box;min-width:0;font-family:Inter,system-ui,sans-serif}
:is(html.bsf-shared-chrome,html:has(#bsfSharedNav)) :is(#bsfTopbar .bsf-menu-item,[data-bsf-chrome-dropdown] .bsf-menu-item){min-height:44px;min-width:0;white-space:normal;overflow-wrap:anywhere;box-sizing:border-box}
:is(html.bsf-shared-chrome,html:has(#bsfSharedNav)) :is(#bsfTopbar .bsf-notif-list,[data-bsf-chrome-dropdown] .bsf-notif-list){flex:1;min-height:0;max-height:none}
:is(html.bsf-shared-chrome,html:has(#bsfSharedNav)) [data-bsf-chrome-dropdown][data-bsf-portaled="1"].bsf-notif-menu{display:flex!important}
:is(html.bsf-shared-chrome,html:has(#bsfSharedNav)) #bsfAuthModal{top:var(--bsf-chrome-vtop,0px);left:var(--bsf-chrome-vleft,0px);right:auto;bottom:auto;width:var(--bsf-chrome-vw,100vw);height:var(--bsf-chrome-vh,100dvh);padding:12px;box-sizing:border-box}
:is(html.bsf-shared-chrome,html:has(#bsfSharedNav)) #bsfAuthModal .bsf-aw-card{box-sizing:border-box;min-width:0;max-width:100%;max-height:calc(var(--bsf-chrome-vh,100dvh) - 24px);grid-template-columns:minmax(0,340px) minmax(0,1fr);border-radius:20px}
:is(html.bsf-shared-chrome,html:has(#bsfSharedNav)) #bsfAuthModal .bsf-aw-form-panel{box-sizing:border-box;min-width:0;min-height:0;max-height:calc(var(--bsf-chrome-vh,100dvh) - 24px);padding-top:64px}
:is(html.bsf-shared-chrome,html:has(#bsfSharedNav)) #bsfAuthModal .bsf-aw-close{width:44px;height:44px}
:is(html.bsf-shared-chrome,html:has(#bsfSharedNav)) #bsfAuthModal .bsf-aw-input{min-height:44px;font-size:16px}
:is(html.bsf-shared-chrome,html:has(#bsfSharedNav)) #bsfAuthModal :is(.bsf-aw-tab,.bsf-aw-submit){min-height:44px}
:is(html.bsf-shared-chrome,html:has(#bsfSharedNav)) .bsf-dialog-close{min-width:44px;min-height:44px}
html.bsf-chrome-compact-auth #bsfAuthModal .bsf-aw-card{grid-template-columns:minmax(0,1fr);width:min(620px,100%)}
html.bsf-chrome-compact-auth #bsfAuthModal .bsf-aw-showcase{display:none}
@media(max-width:760px){:is(html.bsf-shared-chrome,html:has(#bsfSharedNav)) #bsfAuthModal .bsf-aw-card{grid-template-columns:minmax(0,1fr);width:min(620px,100%)}:is(html.bsf-shared-chrome,html:has(#bsfSharedNav)) #bsfAuthModal .bsf-aw-showcase{display:none}}
:is(html.bsf-shared-chrome,html:has(#bsfSharedNav)) #bsfCookieBanner{box-sizing:border-box;z-index:1020!important;max-height:calc(var(--bsf-chrome-vh,100dvh) - var(--bsf-chrome-bottom-h,0px) - 24px);overflow:auto;overscroll-behavior:contain}
:is(html.bsf-shared-chrome,html:has(#bsfSharedNav)) #bsfCookieBanner button{min-width:44px;min-height:44px;white-space:normal!important;overflow-wrap:anywhere}
:is(html.bsf-shared-chrome,html:has(#bsfSharedNav)) .bsfdlg-toast{width:max-content;max-width:calc(var(--bsf-chrome-vw,100vw) - 32px);box-sizing:border-box;bottom:calc(var(--bsf-chrome-bottom-h,0px) + var(--bsf-chrome-cookie-h,0px) + 16px)}
html:has(#bsfSharedNav):has(#bsfAuthModal.is-open) .bsfdlg-toast{z-index:2050}
@media(max-width:1199px){
  :is(html.bsf-shared-chrome,html:has(#bsfSharedNav)) #bsfTopbar .bsf-hide-mobile{display:none!important}
  :is(html.bsf-shared-chrome,html:has(#bsfSharedNav)) #bsfTopbar .bsf-topbar-inner{gap:4px}
  :is(html.bsf-shared-chrome,html:has(#bsfSharedNav)) #bsfTopbar :is(.bsf-btn,.bsf-icon-btn){padding:8px}
  :is(html.bsf-shared-chrome,html:has(#bsfSharedNav)) #bsfTopbar :is(.bsf-btn,.bsf-icon-btn) svg{width:20px;height:20px}
}
.bsf-chrome-subbar,.bsf-chrome-bottom,.bsf-chrome-dialog {
  box-sizing:border-box;font-family:Inter,system-ui,-apple-system,sans-serif;
  color:var(--bsf-chrome-text);background:var(--bsf-chrome-bg);
  line-height:1.4;font-size:14px;text-align:start;
}
.bsf-chrome-subbar *, .bsf-chrome-bottom *, .bsf-chrome-dialog *{box-sizing:border-box}
.bsf-chrome-subbar [hidden],.bsf-chrome-dialog [hidden]{display:none!important}
#bsfSharedNav.bsf-chrome-subbar {
  position:fixed;inset-inline:0;top:var(--bsf-chrome-top);height:auto;min-height:var(--bsf-chrome-menu-min);
  display:flex;align-items:center;gap:12px;padding:5px max(16px,calc((100vw - 1552px)/2));
  border-block-end:1px solid var(--bsf-chrome-hr);z-index:990;isolation:isolate;
}
.bsf-chrome-scroll{min-width:0;flex:1;display:flex;gap:4px;align-items:center;min-height:44px;align-self:stretch;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin;scrollbar-color:var(--bsf-chrome-muted) transparent}
.bsf-chrome-link{display:flex;align-items:center;gap:8px;min-width:0;color:var(--bsf-chrome-muted);text-decoration:none!important;border:1px solid transparent;border-radius:10px;background:transparent;font:inherit;cursor:pointer}
.bsf-chrome-link>i,.bsf-chrome-link>svg,.bsf-chrome-action>i,.bsf-chrome-action>svg,.bsf-chrome-close>i,.bsf-chrome-close>svg{width:19px;height:19px;flex:none}
.bsf-chrome-link strong{font-size:13px;font-weight:600;line-height:1.3;color:inherit}
.bsf-chrome-link-bar{flex:none;min-height:44px;padding:8px 10px;white-space:nowrap}
.bsf-chrome-link:hover,.bsf-chrome-action:hover{background:var(--bsf-chrome-hover);color:var(--bsf-chrome-text)}
.bsf-chrome-link.is-current{color:var(--bsf-chrome-accent);background:color-mix(in srgb,var(--bsf-chrome-accent) 10%,transparent);border-color:color-mix(in srgb,var(--bsf-chrome-accent) 36%,transparent)}
.bsf-chrome-actions{display:flex;align-items:center;gap:6px;flex:none;padding-inline-start:10px;border-inline-start:1px solid var(--bsf-chrome-hr)}
.bsf-chrome-action,.bsf-chrome-close{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;border:0;border-radius:10px;padding:8px 10px;font:inherit;font-size:13px;font-weight:600;color:var(--bsf-chrome-text);background:var(--bsf-chrome-hover);cursor:pointer;white-space:nowrap}
.bsf-chrome-close{width:44px;height:44px;padding:10px;flex:none}
/* Desktop keeps a single quiet row. The shared tools dialog retains the full
   catalog; the controller fits whole links after resize and font loading. */
@media(min-width:768px){
  #bsfSharedNav .bsf-chrome-scroll{overflow:hidden;scrollbar-width:none;gap:6px;padding-inline:3px}
  #bsfSharedNav .bsf-chrome-scroll::-webkit-scrollbar{display:none}
  #bsfSharedNav .bsf-chrome-link-bar{padding-inline:12px}
  #bsfSharedNav .bsf-chrome-actions [data-bsf-navigation-open]{border:1px solid color-mix(in srgb,var(--bsf-chrome-accent) 32%,transparent);background:color-mix(in srgb,var(--bsf-chrome-accent) 10%,transparent);color:var(--bsf-chrome-text)}
  #bsfSharedNav .bsf-chrome-actions [data-bsf-navigation-open]::after{content:"";width:6px;height:6px;margin-inline-start:5px;border-inline-end:1.5px solid currentColor;border-block-end:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
}
:is(.bsf-chrome-subbar,.bsf-chrome-bottom,.bsf-chrome-dialog) :focus-visible{outline:2px solid var(--bsf-chrome-accent);outline-offset:2px}
.bsf-chrome-bottom{display:none}
.bsf-chrome-dialog{--dialog-left:max(12px,env(safe-area-inset-left,0px));--dialog-right:max(12px,env(safe-area-inset-right,0px));--dialog-top:max(12px,env(safe-area-inset-top,0px));--dialog-bottom:max(12px,env(safe-area-inset-bottom,0px));position:fixed;inset:auto;left:calc(var(--bsf-chrome-vleft,0px) + (var(--bsf-chrome-vw,100vw) + var(--dialog-left) - var(--dialog-right))/2);top:calc(var(--bsf-chrome-vtop,0px) + (var(--bsf-chrome-vh,100dvh) + var(--dialog-top) - var(--dialog-bottom))/2);transform:translate(-50%,-50%);margin:0;width:min(760px,calc(var(--bsf-chrome-vw,100vw) - var(--dialog-left) - var(--dialog-right)));max-width:none;max-height:calc(var(--bsf-chrome-vh,100dvh) - var(--dialog-top) - var(--dialog-bottom));padding:0;border:1px solid var(--bsf-chrome-hr);border-radius:20px;box-shadow:0 24px 80px #0007;overflow:hidden}
.bsf-chrome-dialog::backdrop{background:rgba(4,13,27,.72)}
.bsf-chrome-dialog[open]{display:flex;flex-direction:column}
.bsf-chrome-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;border-block-end:1px solid var(--bsf-chrome-hr);flex:none}
.bsf-chrome-dialog-head>div{min-width:0;overflow-wrap:anywhere}
.bsf-chrome-dialog-head>div>span{display:block;color:var(--bsf-chrome-accent);font-size:11px;font-weight:700;letter-spacing:2px;margin-block-end:4px}
.bsf-chrome-dialog h2{font-size:22px;line-height:1.3;font-weight:700;color:var(--bsf-chrome-text);margin:0}
.bsf-chrome-dialog-body{min-height:0;overflow:auto;overscroll-behavior:contain;padding:20px 24px 24px}
.bsf-chrome-dialog-body>p{margin:0 0 18px;font-size:14px;color:var(--bsf-chrome-muted)}
.bsf-chrome-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.bsf-chrome-link-tile{align-items:flex-start;gap:12px;padding:16px;border-color:var(--bsf-chrome-hr);background:var(--bsf-chrome-hover);min-height:74px}
.bsf-chrome-link-tile>i,.bsf-chrome-link-tile>svg{width:22px;height:22px;margin-block-start:1px;color:var(--bsf-chrome-accent)}
.bsf-chrome-link-tile>span{min-width:0;display:flex;flex-direction:column;gap:4px}
.bsf-chrome-link-tile :is(strong,small){overflow-wrap:anywhere;white-space:normal}
.bsf-chrome-link-tile strong{font-size:14px;color:var(--bsf-chrome-text)}
.bsf-chrome-link-tile small{font-size:12px;color:var(--bsf-chrome-muted);line-height:1.45}
.bsf-chrome-widgets-shortcut{margin-block-start:18px;display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;color:var(--bsf-chrome-text);font:inherit;font-weight:600;border:1px solid var(--bsf-chrome-hr);background:var(--bsf-chrome-hover);border-radius:12px;cursor:pointer}
.bsf-chrome-widgets-shortcut svg,.bsf-chrome-widgets-shortcut i{width:20px;height:20px;flex:none}
.bsf-chrome-widgets-shortcut>:last-child{margin-inline-start:auto}
.bsf-chrome-context{margin-block-start:24px;padding-block-start:20px;border-block-start:1px solid var(--bsf-chrome-hr)}
.bsf-chrome-context h3{margin:0 0 12px;color:var(--bsf-chrome-text);font-size:15px}
.bsf-chrome-context .sidebar-nav{padding:0;overflow:visible}
.bsf-chrome-context .nav-section{margin:0 0 12px}
.bsf-chrome-context .nav-section-label{color:var(--bsf-chrome-muted);font-size:11px;margin:12px 0 6px;padding:0}
.bsf-chrome-context .nav-item{display:flex;align-items:center;gap:10px;min-height:44px;padding:10px 12px;color:var(--bsf-chrome-text);font-size:14px;border-radius:9px;text-decoration:none;overflow-wrap:anywhere}
.bsf-chrome-context .nav-item:hover,.bsf-chrome-context .nav-item.active{background:var(--bsf-chrome-hover);color:var(--bsf-chrome-accent)}
.bsf-chrome-context .nav-item svg,.bsf-chrome-context .nav-item i{width:18px;height:18px;flex:none}
.bsf-chrome-context .sidebar-user{padding:0 0 16px;background:none;border-color:var(--bsf-chrome-hr);color:var(--bsf-chrome-text)}
.bsf-chrome-context .sidebar-user-name{color:var(--bsf-chrome-text)}
.bsf-chrome-context .sidebar-user-role,.bsf-chrome-context .sidebar-completion-label{color:var(--bsf-chrome-muted)}
.bsf-chrome-widget-dialog{width:min(420px,calc(var(--bsf-chrome-vw,100vw) - var(--dialog-left) - var(--dialog-right)))}
.bsf-chrome-widget-dialog [data-bsf-shared-widgets]{display:block!important;position:static!important;width:100%;margin:0;grid-column:auto!important;order:0!important}
.bsf-chrome-widget-dialog .bsf-sticky-inner{position:static!important;max-height:none!important;overflow:visible!important}
.bsf-shared-widget{min-width:0;max-width:100%}
[data-bsf-shared-widgets]{font:13px/1.5 Inter,system-ui,sans-serif;--s-accent:var(--bsf-shared-mandarine);--s-text:var(--bsf-shared-text);--s-muted:var(--bsf-shared-text-muted);--s-border:rgba(255,255,255,.12)}
[data-bsf-shared-widgets] .bsf-sug-list{display:flex;flex-direction:column}
[data-bsf-shared-widgets] .bsf-sug-row{display:flex;align-items:center;gap:10px;padding:8px 0}
[data-bsf-shared-widgets] .bsf-sug-row+.bsf-sug-row{border-top:1px solid var(--bsf-chrome-hr)}
[data-bsf-shared-widgets] .bsf-sug-avatar-wrap{flex-shrink:0}
[data-bsf-shared-widgets] .bsf-sug-avatar{width:36px;height:36px;border-radius:50%;display:block;object-fit:cover}
[data-bsf-shared-widgets] .bsf-sug-avatar-init{background:var(--bsf-chrome-accent);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
[data-bsf-shared-widgets] .bsf-sug-info{flex:1;min-width:0}
[data-bsf-shared-widgets] .bsf-sug-name{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none}
[data-bsf-shared-widgets] .bsf-sbtn-ghost{background:none;border:1px solid var(--bsf-chrome-hr);border-radius:8px;padding:6px 9px;font:500 13px Inter,system-ui,sans-serif;cursor:pointer;color:var(--bsf-chrome-text);flex-shrink:0}
[data-bsf-shared-widgets] .bsf-sbtn-ghost:hover{background:var(--bsf-chrome-hover)}
[data-bsf-shared-widgets] .bsf-sug-more-link{display:block;margin-block-start:10px;font-size:12px;font-weight:600;color:var(--bsf-chrome-accent);text-align:end;text-decoration:none}
[data-bsf-shared-widgets] .bsf-video-wrap{border-radius:inherit;overflow:hidden;background:#000}
[data-bsf-shared-widgets] .bsf-widget-video{display:block;width:100%;height:auto;max-height:440px;object-fit:cover}
.bsf-shared-widget:empty{display:none}
#bsfSharedWidgets .bsf-shared-widget>.bsf-card{box-sizing:border-box;margin:0;padding:18px;border:1px solid var(--bsf-chrome-hr)!important;border-radius:16px;background:var(--bsf-chrome-bg)!important;color:var(--bsf-chrome-text)!important;box-shadow:none!important}
#bsfSharedWidgets .bsf-widget-title,#bsfSharedWidgets .bsf-widget h3{font-family:Inter,system-ui,sans-serif!important;font-size:13px!important;line-height:1.5;font-weight:700;margin:0 0 14px!important;letter-spacing:.5px;color:var(--bsf-chrome-accent)!important}
#bsfSharedWidgets .adm-rc-name,#bsfSharedWidgets .adm-rc-row,#bsfSharedWidgets .bsf-sug-name{color:var(--bsf-chrome-text);font-size:13px}
#bsfSharedWidgets .adm-rc-sub{color:var(--bsf-chrome-muted);font-size:12px}
#bsfSharedWidgets .adm-rc-more{color:var(--bsf-chrome-accent)}
.bsf-shared-widget .bsf-rc-video-card{padding:0;overflow:hidden}
.bsf-shared-widget-error{border:1px solid var(--bsf-chrome-hr);padding:18px;border-radius:16px;font-size:13px;color:var(--bsf-chrome-muted)}
:is(html.bsf-shared-chrome,html:has(#bsfSharedNav)) .bsf-social-layout{
  box-sizing:border-box!important;
  display:grid!important;grid-template-columns:minmax(0,1fr) 288px!important;gap:24px!important;
  width:100%!important;max-width:1600px!important;margin:0 auto!important;padding:24px!important;align-items:start!important;
}
:is(html.bsf-shared-chrome,html:has(#bsfSharedNav)) .bsf-social-layout>*{min-width:0;grid-column:auto!important}
:is(html.bsf-shared-chrome,html:has(#bsfSharedNav)) .bsf-left-col{display:none!important}
:is(html.bsf-shared-chrome,html:has(#bsfSharedNav)) .bsf-social-layout>.bsf-right-col{display:block;position:static;order:0!important;grid-column:auto!important}
/* Widgets follow the document; only their modal body owns a scroll container. */
:is(html.bsf-shared-chrome,html:has(#bsfSharedNav)) [data-bsf-shared-widgets]>.bsf-sticky-inner{display:flex;flex-direction:column;gap:16px;position:static;top:auto;max-height:none;overflow:visible;overscroll-behavior:auto}
:is(html.bsf-shared-chrome,html:has(#bsfSharedNav)) .bsf-mobile-nav,:is(html.bsf-shared-chrome,html:has(#bsfSharedNav)) .space-mobile-bottom{display:none!important}
:is(html.bsf-shared-chrome,html:has(#bsfSharedNav)) .prof-main{margin:0!important;padding:0!important;min-height:0;width:100%;max-width:none}
:is(html.bsf-shared-chrome,html:has(#bsfSharedNav)) .prof-main>.wrap{max-width:none;margin:0;padding:0}
:is(html.bsf-shared-chrome,html:has(#bsfSharedNav)) .prof-topbar{position:static!important;inset:auto!important;min-height:54px;height:auto;margin:0 auto;width:100%;max-width:1600px;padding:16px 24px;z-index:auto}
:is(html.bsf-shared-chrome,html:has(#bsfSharedNav)) .prof-footer{margin-inline-start:0!important}
.mhub-profile-context{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-block:20px}
.mhub-profile-context .mhub-side-card{margin:0}
:is(html.bsf-shared-chrome,html:has(#bsfSharedNav)) .mhub-layout .mhub-main{display:flex;flex-direction:column;gap:16px}
.bsf-chrome-content{min-width:0}
.bsf-chrome-content>.topbar{position:static;top:auto;z-index:auto}
.bsf-chrome-page-tools{margin-block:20px;border:1px solid var(--bsf-border-default);border-radius:14px;padding:14px 16px;min-width:0}
.bsf-chrome-page-tools>summary{cursor:pointer;font:600 14px/1.5 Inter,system-ui,sans-serif;color:var(--bsf-text-primary)}
.bsf-chrome-page-tools-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:16px;margin-block-start:16px;min-width:0}
.bsf-chrome-page-tools-body>*{min-width:0}
@media(max-width:1279px){
  :is(html.bsf-shared-chrome,html:has(#bsfSharedNav)) .bsf-social-layout{grid-template-columns:minmax(0,1fr)!important;padding:20px!important}
  html.bsf-chrome-hydrated .bsf-social-layout>[data-bsf-shared-widgets]{display:none!important}
}
@media(max-width:767px){
  :is(html.bsf-shared-chrome,html:has(#bsfSharedNav)) body{padding-block-end:calc(var(--bsf-chrome-bottom-h) + 16px)!important}
  :is(html.bsf-shared-chrome,html:has(#bsfSharedNav)) #bsfCookieBanner{bottom:calc(var(--bsf-chrome-bottom-h) + 8px)!important}
  #bsfSharedNav{padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px))}
  #bsfSharedNav .bsf-chrome-scroll{display:none}
  #bsfSharedNav .bsf-chrome-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:8px;padding:0;border:0}
  #bsfSharedNav .bsf-chrome-action{min-width:0;width:auto;padding:9px 8px;white-space:normal;overflow-wrap:anywhere}
  #bsfSharedNav .bsf-chrome-action>span{display:inline;min-width:0}
  .bsf-chrome-bottom{position:fixed;inset-inline:0;bottom:0;z-index:995;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px;min-height:72px;padding:7px max(6px,env(safe-area-inset-right,0px)) calc(7px + env(safe-area-inset-bottom,0px)) max(6px,env(safe-area-inset-left,0px));border-block-start:1px solid var(--bsf-chrome-hr);box-shadow:0 -5px 20px #0002}
  .bsf-chrome-link-bottom{display:grid;grid-template-rows:22px auto;align-content:start;justify-items:center;gap:5px;padding:5px 2px;min-height:56px;max-width:100%;text-align:center;border:0}
  .bsf-chrome-link-bottom>span{max-width:100%;min-width:0;white-space:normal;overflow-wrap:anywhere}
  .bsf-chrome-link-bottom strong{display:block;font-size:12px;font-weight:600;line-height:1.3}
  .bsf-chrome-link-bottom>svg,.bsf-chrome-link-bottom>i{width:21px;height:21px}
  .bsf-chrome-dialog{border-radius:18px}
  .bsf-chrome-dialog-head{padding:16px;gap:12px}
  .bsf-chrome-dialog h2{font-size:20px}
  .bsf-chrome-dialog-body{padding:16px;}
  .bsf-chrome-tiles{gap:8px}
  .bsf-chrome-link-tile{padding:12px;gap:9px;min-height:84px}
  .bsf-chrome-link-tile strong{font-size:13px}
  .bsf-chrome-link-tile small{font-size:11px}
  .bsf-chrome-link-tile>i,.bsf-chrome-link-tile>svg{width:19px;height:19px}
  :is(html.bsf-shared-chrome,html:has(#bsfSharedNav)) .bsf-social-layout{padding:16px!important;gap:16px!important}
  :is(html.bsf-shared-chrome,html:has(#bsfSharedNav)) .prof-topbar{padding:12px 16px}
}
@media(max-width:480px){.bsf-chrome-tiles{grid-template-columns:minmax(0,1fr)}.bsf-chrome-link-tile{min-height:72px}.bsf-chrome-widget-dialog .bsf-chrome-dialog-body{padding:14px}.bsf-chrome-widget-dialog #bsfSharedWidgets .bsf-shared-widget>.bsf-card{padding:15px}}
@media(max-width:767px) and (max-height:450px){#bsfSharedNav.bsf-chrome-subbar{display:none}}
@media(prefers-reduced-motion:reduce){.bsf-chrome-scroll{scroll-behavior:auto}}