/* ============================================================================
   MaSuite Shell — barre supérieure unifiée, injectée par-dessus Element.
   Design « clarté souveraine » : reprend les tokens du portail (périwinkle La
   Suite, polices système → souverain, zéro appel externe). Tout est scopé sous
   #msx-bar / .msx-* pour NE PAS polluer le CSS d'Element (Compound/MUI).
   Seule exception globale : on réserve la hauteur de la barre pour #matrixchat.
   ============================================================================ */

:root {
  --msx-h: 54px;                 /* hauteur de la barre */
  --msx-ink: #1b1b23;
  --msx-ink-soft: #5f6170;
  --msx-ink-faint: #8a8c99;
  --msx-line: #e7e8ef;
  --msx-line-strong: #d9dae3;
  --msx-primary: #5e5eda;
  --msx-primary-600: #4a4ac4;
  --msx-primary-tint: #eeeefb;
  --msx-surface: #ffffff;
  --msx-ring: 0 0 0 4px rgba(94, 94, 218, .18);
  --msx-shadow-pop: 0 8px 18px rgba(27,27,35,.06), 0 24px 60px rgba(27,27,35,.16);
  --msx-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --- Offset des SPA full-height (msx-fixed) : le conteneur racine (#matrixchat,
   #root…) est calé en position:fixed sous la barre directement par shell.js
   (inline !important), donc avec une hauteur DÉFINIE (= viewport − barre).
   Beaucoup d'apps codent en dur `height:100vh/100dvh` sur leur shell interne :
   cette unité ignore notre barre et déborde de 54px. On clampe donc les enfants
   directs de la racine à la hauteur réelle disponible → le 100dvh se réduit. */
html.msx-fixed #root > *,
html.msx-fixed #matrixchat > * {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  margin-top: 0 !important;
}
/* Mail (Vite + cunningham) code en dur height:100dvh sur son layout principal.
   #root étant déjà calé en position:fixed (hauteur définie = viewport − barre),
   on force ce layout à remplir #root au lieu de 100dvh. On NE touche PAS aux
   sous-panneaux (sinon scroll parasite) : seul le conteneur racine est visé. */
html.msx-fixed > body .c__main-layout {
  height: 100% !important;
  min-height: 0 !important;
}
/* Le header de rangée du Mail est `position:fixed; top:0` (cunningham
   .c__main-layout__header). Or `fixed` se cale sur le VIEWPORT, pas sur #root :
   un ancêtre position:fixed ne « contient » pas ses descendants fixed (seul un
   transform le ferait). Le header se retrouve donc épinglé DERRIÈRE notre barre,
   et la hauteur qu'il réserve (le margin-top du contenu, relatif à #root@54px)
   reste en BANDE VIDE sous #msx-bar. On le redescend juste sous la barre : la
   bande se remplit du header natif (recherche/réglages gardés fonctionnels),
   contigu au contenu → plus aucun décalage. */
html.msx-fixed .c__main-layout__header { top: var(--msx-h) !important; }
/* La zone scrollable code en dur height:calc(100dvh − header-height) : ce 100dvh
   ignore notre barre et rogne 54px en bas. On en retranche aussi la barre. */
html.msx-fixed .c__main-layout__content__center__children {
  height: calc(100dvh - var(--header-height) - var(--msx-h)) !important;
}
/* Le panneau gauche (liste des dossiers/boîtes) code en dur
   height:calc(100dvh − 52px) (= 100dvh − header) SANS retrancher notre barre :
   il fait donc 54px de trop, déborde de son conteneur et ajoute sa propre barre
   de scroll PAR-DESSUS celle de la liste interne (« deux scrollbars »). Même
   correctif symétrique que le centre : on retranche aussi --msx-h. */
html.msx-fixed .c__main-layout__content__left-panel {
  height: calc(100dvh - var(--header-height) - var(--msx-h)) !important;
}
/* …et l'élément interne `.c__left-panel` (qui porte le scroller `__content`)
   re-hardcode LA MÊME hauteur trop grande (calc(100dvh − 52px) avec header,
   100dvh sans). C'est lui qui débordait et produisait la 2ᵉ scrollbar par-dessus
   celle de `.c__left-panel__content`. On retranche la barre sur les deux cas. */
html.msx-fixed .c__left-panel.has-header {
  height: calc(100dvh - var(--header-height) - var(--msx-h)) !important;
}
html.msx-fixed .c__left-panel:not(.has-header),
html.msx-fixed .c__left-panel__mobile {
  height: calc(100dvh - var(--msx-h)) !important;
}
/* Overlays persistants d'Element (PiP appel, etc.), siblings de la racine. */
html.msx-fixed #mx_PersistedElement_container { top: var(--msx-h) !important; }

/* --- Dédoublonnage du header natif (design-system cunningham : Mail + apps
   La Suite). Notre barre fournit déjà marque + gaufre + utilisateur + logout.
   On masque le logo (souvent en version claire → invisible sur fond blanc, d'où
   l'effet « bande vide ») et le menu utilisateur. On GARDE menu, recherche et
   réglages — la rangée reste fonctionnelle. */
html.msx-on .c__header__left,
html.msx-on .c__header .user-menu__button {
  display: none !important;
}

/* --- Offset générique (apps Next.js & flux normal) : on décale tout le flux du
   document sous la barre. box-sizing pour ne pas dépasser de la hauteur. */
html.msx-generic body {
  padding-top: var(--msx-h) !important;
  box-sizing: border-box !important;
}

/* ============================ La barre ============================ */
#msx-bar {
  position: fixed; inset: 0 0 auto 0; z-index: 2147483000;
  height: var(--msx-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px 0 16px;
  font-family: var(--msx-font);
  color: var(--msx-ink);
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--msx-line);
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}
#msx-bar *, #msx-pop * { box-sizing: border-box; }

/* --- Marque : l'app où l'on se trouve (mark MaSuite + nom de l'app) --- */
.msx-brand {
  display: inline-flex; align-items: center; gap: 11px;
  text-decoration: none; color: inherit;
  padding: 5px 8px 5px 4px; border-radius: 10px;
  transition: background .16s;
}
.msx-brand:hover { background: var(--msx-primary-tint); }
.msx-brand:focus-visible { outline: none; box-shadow: var(--msx-ring); }
.msx-brand__mark { display: grid; place-items: center; flex: 0 0 auto; }
.msx-brand__txt { display: flex; flex-direction: column; line-height: 1.05; }
.msx-brand__eyebrow {
  font-size: .64rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--msx-ink-faint);
}
.msx-brand__app { font-size: 1.04rem; font-weight: 600; letter-spacing: -.015em; }

/* --- Bloc droit --- */
.msx-right { display: flex; align-items: center; gap: 6px; }
.msx-sep { width: 1px; height: 26px; background: var(--msx-line-strong); margin: 0 6px; }

.msx-iconbtn {
  position: relative;
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid transparent; border-radius: 11px; background: transparent;
  color: var(--msx-ink-soft); cursor: pointer;
  transition: background .16s, color .16s;
}
.msx-iconbtn:hover { background: var(--msx-primary-tint); color: var(--msx-primary-600); }
.msx-iconbtn:focus-visible { outline: none; box-shadow: var(--msx-ring); }
.msx-iconbtn[aria-expanded="true"] { background: var(--msx-primary-tint); color: var(--msx-primary-600); }

.msx-user { display: flex; align-items: center; gap: 9px; padding: 0 4px 0 2px; max-width: 230px; }
.msx-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; color: #fff; font-weight: 600; font-size: .8rem;
  letter-spacing: .02em;
  background: linear-gradient(135deg, #7b7bec, #4a4ac4);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}
.msx-user__meta { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.msx-user__name { font-weight: 600; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msx-user__mail { color: var(--msx-ink-faint); font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.msx-logout {
  font: inherit; font-weight: 600; font-size: .85rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--msx-line-strong); border-radius: 11px;
  padding: 8px 13px; line-height: 1; background: var(--msx-surface); color: var(--msx-ink-soft);
  transition: color .16s, border-color .16s, background .16s;
}
.msx-logout:hover { color: #c0344c; border-color: #f0b9c4; background: #fff6f8; }
.msx-logout:focus-visible { outline: none; box-shadow: var(--msx-ring); }
.msx-logout svg { width: 16px; height: 16px; }

/* ============================ Gaufre (popover) ============================ */
.msx-pop-wrap { position: relative; }
#msx-pop {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: 312px; padding: 14px;
  background: var(--msx-surface); border: 1px solid var(--msx-line);
  border-radius: 18px; box-shadow: var(--msx-shadow-pop);
  font-family: var(--msx-font);
  transform-origin: top right;
  animation: msx-pop-in .16s cubic-bezier(.2,.7,.2,1) both;
}
#msx-pop[hidden] { display: none; }
.msx-pop__title {
  font-size: .7rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--msx-ink-faint); margin: 2px 4px 12px;
}
.msx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.msx-app {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  text-decoration: none; color: var(--msx-ink);
  padding: 12px 6px 11px; border-radius: 13px; border: 1px solid transparent;
  transition: background .14s, border-color .14s, transform .14s;
}
.msx-app:hover { background: #fafaff; border-color: var(--msx-line); transform: translateY(-2px); }
.msx-app:focus-visible { outline: none; box-shadow: var(--msx-ring); }
.msx-app__icon {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}
.msx-app__icon svg { width: 21px; height: 21px; }
.msx-app__name { font-size: .76rem; font-weight: 600; letter-spacing: -.01em; }
.msx-app--current { background: var(--msx-primary-tint); border-color: rgba(94,94,218,.18); }
.msx-app--current .msx-app__name { color: var(--msx-primary-600); }

@keyframes msx-pop-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #msx-pop { animation: none; } }

/* ============================ Responsive ============================ */
@media (max-width: 600px) {
  .msx-user__meta, .msx-logout span { display: none; }
  .msx-logout { padding: 9px; }
  #msx-pop { width: min(312px, calc(100vw - 20px)); }
}

/* ============================================================================
   Recolorisation douce d'Element vers le périwinkle MaSuite (best-effort).
   Element s'appuie sur les tokens Compound (--cpd-color-*). On retape les
   accents d'action en primaire La Suite. Réversible, sans toucher au build.
   ============================================================================ */
html.msx-on {
  --cpd-color-bg-action-primary-rest: #5e5eda;
  --cpd-color-bg-action-primary-hovered: #4a4ac4;
  --cpd-color-bg-action-primary-pressed: #4a4ac4;
  --cpd-color-text-action-accent: #4a4ac4;
  --cpd-color-text-primary: #1b1b23;
  --cpd-color-border-interactive-primary: #5e5eda;
}