/* ============================================================
   sysmenu.css - Popup systeme unifie a onglets + refonte taskbar/mobile
   Charge APRES style.css / ui-modes.css / responsive.css (overrides).
   ============================================================ */

/* ----- Backdrop verre fume (sous les panneaux taskbar) -----
   Couvre toute l'interface AU-DESSUS de la barre des taches.
   La taskbar reste libre pour basculer d'un popup a l'autre.
   Style aligne sur .ux-frost-bar (app UX > Verre fume).

   Important : opacity seule ne defloue PAS (Chrome garde le blur plein
   puis coupe). Il faut interpoler backdrop-filter blur(8px) ↔ blur(0px)
   (jamais "none" : ca ne s'anime pas).

   --os-bd-dur : courte a l'ouverture (.visible), plus longue a la fermeture
   (etat de base). Le JS applique/retire .visible au frame suivant (rAF)
   pour que la transition s'enregistre vraiment. */
.os-taskbar-panel-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: var(--taskbar-height, 56px);
    /* Au-dessus des fenetres (stacking ~1000) et du FAB agent (9999) ;
       sous les panneaux taskbar (notifications / sysmenu >= 100000).
       La taskbar reste cliquable car le backdrop s'arrete au-dessus d'elle. */
    z-index: 50000;
    --os-bd-dur: 0.6s; /* sortie */
    background: rgba(10, 10, 15, 0.55);
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity var(--os-bd-dur) ease,
        backdrop-filter var(--os-bd-dur) ease,
        -webkit-backdrop-filter var(--os-bd-dur) ease,
        visibility 0s linear var(--os-bd-dur);
}

.os-taskbar-panel-backdrop.visible {
    --os-bd-dur: 0.35s; /* entree */
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    /* visibility immediate a l'entree (pas de delai). */
    transition:
        opacity var(--os-bd-dur) ease,
        backdrop-filter var(--os-bd-dur) ease,
        -webkit-backdrop-filter var(--os-bd-dur) ease,
        visibility 0s linear 0s;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .os-taskbar-panel-backdrop {
        background: rgba(10, 10, 15, 0.88);
    }
}

@media (prefers-reduced-motion: reduce) {
    .os-taskbar-panel-backdrop,
    .os-taskbar-panel-backdrop.visible {
        transition: none;
    }
}

/* Multi-ecran Boréal : le backdrop couvre l'ecran principal (comme la taskbar). */
body.boreal-multiscreen .os-taskbar-panel-backdrop {
    top: var(--os-primary-top, 0px);
    left: var(--os-primary-left, 0px);
    right: auto;
    width: var(--os-primary-width, 100vw);
    bottom: auto;
    height: calc(var(--os-primary-height, 100vh) - var(--taskbar-height, 56px) - var(--os-primary-bottom, 0px));
}

/* ----- Clip d'animation des popups taskbar -----
   Zone plein ecran (transform = containing block pour les position:fixed).
   Masque sous le bord haut de la taskbar : un translateY(100%) part de
   cette ligne, pas du bas de l'ecran. pointer-events:none → taskbar cliquable. */
#os-taskbar-popup-clip {
    position: fixed;
    inset: 0;
    z-index: 100000;
    pointer-events: none;
    overflow: hidden;
    transform: translateZ(0);
    /* +4px sous le bord haut de la taskbar : evite un filet de verre fume
       entre le panneau et la barre (arrondis / bordure 1px). */
    -webkit-mask-image: linear-gradient(
        to bottom,
        #000 0%,
        #000 calc(100% - var(--taskbar-height, 56px) + 4px),
        transparent calc(100% - var(--taskbar-height, 56px) + 4px)
    );
    mask-image: linear-gradient(
        to bottom,
        #000 0%,
        #000 calc(100% - var(--taskbar-height, 56px) + 4px),
        transparent calc(100% - var(--taskbar-height, 56px) + 4px)
    );
}

#os-taskbar-popup-clip > * {
    pointer-events: auto;
}

body.mode-productivity #os-taskbar-popup-clip {
    /* Aligné sur bottom:60px des panneaux productivite (ui-modes.css). */
    -webkit-mask-image: linear-gradient(
        to bottom,
        #000 0%,
        #000 calc(100% - 60px + 4px),
        transparent calc(100% - 60px + 4px)
    );
    mask-image: linear-gradient(
        to bottom,
        #000 0%,
        #000 calc(100% - 60px + 4px),
        transparent calc(100% - 60px + 4px)
    );
}

/* Multi-ecran : clip = ecran principal ; les left/right canvas des panneaux
   deviennent relatifs a ce cadre → reancrer a droite (ou gauche productivite). */
body.boreal-multiscreen #os-taskbar-popup-clip {
    top: var(--os-primary-top, 0px);
    left: var(--os-primary-left, 0px);
    right: auto;
    bottom: auto;
    width: var(--os-primary-width, 100vw);
    height: var(--os-primary-height, 100vh);
    -webkit-mask-image: linear-gradient(
        to bottom,
        #000 0%,
        #000 calc(100% - var(--taskbar-height, 56px) - var(--os-primary-bottom, 0px) + 4px),
        transparent calc(100% - var(--taskbar-height, 56px) - var(--os-primary-bottom, 0px) + 4px)
    );
    mask-image: linear-gradient(
        to bottom,
        #000 0%,
        #000 calc(100% - var(--taskbar-height, 56px) - var(--os-primary-bottom, 0px) + 4px),
        transparent calc(100% - var(--taskbar-height, 56px) - var(--os-primary-bottom, 0px) + 4px)
    );
}

body.boreal-multiscreen #os-taskbar-popup-clip .notification-panel,
body.boreal-multiscreen #os-taskbar-popup-clip #sysmenu-panel,
body.boreal-multiscreen #os-taskbar-popup-clip .boreal-av-panel {
    right: 0;
    left: auto;
    bottom: calc(var(--taskbar-height, 56px) + var(--os-primary-bottom, 0px) - 1px);
}

body:not(.mode-mobile):not(.silo-locked).boreal-multiscreen #os-taskbar-popup-clip .notification-panel,
body:not(.mode-mobile):not(.silo-locked).boreal-multiscreen #os-taskbar-popup-clip #sysmenu-panel {
    right: var(--os-popup-inset, 12px);
    bottom: calc(var(--taskbar-height, 56px) + var(--os-primary-bottom, 0px) + var(--os-popup-inset, 12px));
}

body.boreal-multiscreen.mode-productivity #os-taskbar-popup-clip #sysmenu-panel,
body.boreal-multiscreen.mode-productivity #os-taskbar-popup-clip .notification-panel {
    right: auto;
    left: 0;
}

/* Basculement panneau → panneau : pas d'animation de glissement */
.sysmenu-panel.open.os-panel-instant,
.sysmenu-panel.os-panel-closing.os-panel-instant,
.notification-panel.open.os-panel-instant,
.notification-panel.os-panel-closing.os-panel-instant,
.boreal-av-panel.open.os-panel-instant,
.boreal-av-panel.os-panel-closing.os-panel-instant {
    animation: none !important;
}

/* ----- Popup unifie ----- */
.sysmenu-panel {
    position: fixed;
    /* -1px : colle sous la bordure haute de la taskbar (evite un filet). */
    bottom: calc(var(--taskbar-height, 56px) - 1px);
    right: 0;
    width: 360px;
    max-width: 100vw;
    /* Hauteur stable Compte / Systeme / Taches (evite le saut au changement d'onglet) */
    --sysmenu-height: min(520px, calc(100vh - var(--taskbar-height, 56px)));
    max-height: var(--sysmenu-height);
    background: var(--bg-secondary, #12121a);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-bottom: none;
    border-radius: 0;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    z-index: 100000;
    display: none;
    flex-direction: column;
    overflow: hidden;
    will-change: transform, opacity;
}

/* Desktop avec place : legere marge + coins hauts arrondis uniquement.
   Bas carre (pas de rayon bas) ; mobile / plein bord reste flush (ci-dessous). */
body:not(.mode-mobile):not(.silo-locked) .sysmenu-panel {
    --os-popup-inset: 12px;
    right: var(--os-popup-inset);
    bottom: calc(var(--taskbar-height, 56px) + var(--os-popup-inset));
    max-width: calc(100vw - (2 * var(--os-popup-inset)));
    --sysmenu-height: min(520px, calc(100vh - var(--taskbar-height, 56px) - (2 * var(--os-popup-inset))));
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: 12px 12px 0 0;
}

/* Coins : arrondis seulement du cote ou il y a une marge (pas contre le bord). */
body:not(.mode-mobile):not(.silo-locked) .sysmenu-panel.os-popup-edge-right {
    right: 0;
    border-top-right-radius: 0;
    border-right: none;
}
body:not(.mode-mobile):not(.silo-locked) .sysmenu-panel.os-popup-edge-left {
    left: 0;
    right: auto;
    border-top-left-radius: 0;
    border-left: none;
}
body:not(.mode-mobile):not(.silo-locked) .sysmenu-panel.os-popup-edge-right.os-popup-edge-left {
    border-radius: 0;
    border-bottom: none;
    bottom: calc(var(--taskbar-height, 56px) - 1px);
}

.sysmenu-panel.open,
.sysmenu-panel.os-panel-closing {
    display: flex;
    height: var(--sysmenu-height);
}

.sysmenu-panel.open:not(.os-panel-closing) {
    animation: osTaskbarSlideUp 0.28s cubic-bezier(0.2, 0, 0, 1) both;
}

.sysmenu-panel.os-panel-closing {
    animation: osTaskbarSlideDown 0.24s cubic-bezier(0.2, 0, 0, 1) both;
}

.sysmenu-tabs {
    display: flex;
    gap: 4px;
    padding: 8px;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    flex-shrink: 0;
}

.sysmenu-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 4px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-secondary, #a0aec0);
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.sysmenu-tab svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.8;
}

.sysmenu-tab:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary, #f0f0f5);
}

.sysmenu-tab.active {
    background: rgba(74, 158, 255, 0.14);
    color: var(--accent-blue, #4a9eff);
}

.sysmenu-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.sysmenu-pane {
    display: none;
}

.sysmenu-pane.active {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* ----- Neutralisation des panneaux re-parentes -----
   Les panneaux conservent leur logique (classe .open) mais perdent leur
   positionnement fixe : ils s'affichent a plat dans leur onglet. */
body.sysmenu-merged .sysmenu-pane > #account-panel,
body.sysmenu-merged .sysmenu-pane > #auth-panel,
body.sysmenu-merged .sysmenu-pane > #system-panel,
body.sysmenu-merged .sysmenu-pane > #systasks-panel {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    transform: none !important;
    animation: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: none !important;
}

body.sysmenu-merged .sysmenu-pane > #account-panel.open,
body.sysmenu-merged .sysmenu-pane > #auth-panel.open,
body.sysmenu-merged .sysmenu-pane > #system-panel.open,
body.sysmenu-merged .sysmenu-pane > #systasks-panel.open {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Connexion : titre (Boréal OS) en haut, zone formulaire centrée verticalement */
body.sysmenu-merged .sysmenu-pane > #auth-panel.open .auth-panel-header {
    flex-shrink: 0;
}

body.sysmenu-merged .sysmenu-pane > #auth-panel.open .auth-panel-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
}

/* Le bouton de fermeture interne des taches devient inutile (onglet) */
body.sysmenu-merged .sysmenu-pane .systasks-close {
    display: none !important;
}

/* ----- Taskbar : ne garder que Notifications + Persona en mode web -----
   Le WiFi / l'horloge (system-tray) et la batterie restent uniquement en
   Boreal OS (body.is-boreal, pose par os/boreal-tray.js). */
body:not(.is-boreal) .taskbar-end #system-tray {
    display: none !important;
}

/* Le bouton Taches de la barre des taches est remplace par l'onglet du popup */
#systasks-btn {
    display: none !important;
}

/* ----- Mode productivite : meme regle que la barre des taches -----
   La sidebar productivite (os/ui-modes.js) expose sa propre zone systeme :
   #sidebar-clock (icone reseau + horloge, classe .system-tray) et
   #sidebar-systasks-btn. On l'aligne sur la barre des taches : seules
   Notifications + Persona restent. L'horloge/reseau ne reste qu'en Boreal OS ;
   les options systeme sont accessibles via l'icone persona (#sidebar-account-btn
   -> popup unifie, onglet Systeme). */
body:not(.is-boreal) #sidebar-clock {
    display: none !important;
}

/* Les taches sont desormais un onglet du popup, pas un bouton autonome */
#sidebar-systasks-btn {
    display: none !important;
}

/* ----- Login standalone (domaine restreint / silo-locked) -----
   Le popup s'affiche centre plein ecran, onglet Connexion uniquement. */
body.silo-locked #sysmenu-panel {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: 380px;
    max-width: calc(100vw - 32px);
    height: auto;
    max-height: calc(100vh - 32px);
    animation: none;
}

body.silo-locked #sysmenu-panel .sysmenu-tabs {
    display: none;
}

body.silo-locked #sysmenu-panel .sysmenu-pane[data-pane="systeme"],
body.silo-locked #sysmenu-panel .sysmenu-pane[data-pane="taches"] {
    display: none !important;
}

/* ============================================================
   MODE MOBILE
   ============================================================ */

@media (max-width: 768px) {
    /* Sans zoom : largeur plafonnee, ancree a droite (tablette / paysage). */
    #sysmenu-panel,
    .notification-panel {
        left: auto !important;
        right: 0 !important;
        width: min(400px, 100vw) !important;
        max-width: min(400px, 100vw) !important;
    }

    #sysmenu-panel {
        bottom: var(--taskbar-height, 56px);
        --sysmenu-height: min(520px, calc(100vh - var(--taskbar-height, 56px)));
        max-height: var(--sysmenu-height);
    }

    body.silo-locked #sysmenu-panel {
        left: 50% !important;
        right: auto !important;
        width: min(400px, calc(100vw - 24px)) !important;
        max-width: min(400px, calc(100vw - 24px)) !important;
    }
}

/* Mode mobile + zoom:1.1 — largeur LAYOUT = largeur visuelle / zoom.
   Si le plafond 400 px ne tient pas → pleine largeur ecran ; le contenu
   (width:100 % des panneaux re-parentes) s'adapte. */
body.mode-mobile #sysmenu-panel,
body.mode-mobile .notification-panel {
    --_pz: var(--os-panel-zoom, 1.1);
    left: auto !important;
    right: 0 !important;
    width: min(calc(400px / var(--_pz)), calc(100vw / var(--_pz))) !important;
    max-width: min(calc(400px / var(--_pz)), calc(100vw / var(--_pz))) !important;
    /* zoom multiplie aussi l'offset bottom → compenser pour coller a la taskbar */
    bottom: calc(var(--taskbar-height, 56px) / var(--_pz));
    --sysmenu-height: min(520px, calc(100vh / var(--_pz) - var(--taskbar-height, 56px) / var(--_pz)));
    max-height: var(--sysmenu-height);
    border-radius: 0;
    border-bottom: none;
}

body.mode-mobile.silo-locked #sysmenu-panel {
    --_pz: var(--os-panel-zoom, 1.1);
    left: 50% !important;
    right: auto !important;
    width: min(calc(380px / var(--_pz)), calc(100vw / var(--_pz))) !important;
    max-width: min(calc(380px / var(--_pz)), calc(100vw / var(--_pz))) !important;
    border-radius: 0;
}

/* Contenu plus serre quand le panneau occupe toute la largeur (petit ecran). */
@media (max-width: 480px) {
    body.mode-mobile .sysmenu-tabs {
        padding: 6px;
        gap: 2px;
    }

    body.mode-mobile .sysmenu-tab {
        padding: 6px 2px;
        font-size: 10px;
        gap: 2px;
    }

    body.mode-mobile .sysmenu-tab svg {
        width: 16px;
        height: 16px;
    }

    body.mode-mobile .auth-panel-header {
        padding: 12px 14px 8px;
    }

    body.mode-mobile .auth-panel-title {
        font-size: 18px;
    }

    body.mode-mobile .auth-panel-body {
        padding: 12px 14px 16px;
    }

    body.mode-mobile .account-panel-header,
    body.mode-mobile .system-panel-header,
    body.mode-mobile .system-panel-body,
    body.mode-mobile .notification-panel-header {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* Grille d'apps : icones reellement carrees.
   Alignement centre (grid-full-row) : le surplus de largeur devient des
   marges G/D. Largeur cellule + gap plafonnes par updateDesktopGrid pour
   eviter un ecartement excessif ; le carre colore reste 56px. */
body.mode-mobile .desktop {
    justify-content: center;
    align-content: start;
    justify-items: center;
    --desktop-icon-width: 110px;
    --desktop-grid-gap: 10px;
    grid-template-columns: repeat(var(--desktop-computed-columns, 3), var(--desktop-icon-width));
    gap: var(--desktop-grid-gap);
    /* Rangées assez hautes pour icone 56px + label (jambages) — les media
       queries 90/100px ecrasaient le bas des titres. */
    --desktop-icon-height: 116px;
    grid-template-rows: none;
    grid-auto-rows: var(--desktop-icon-height);
    /* Ne pas utiliser le shorthand padding : il ecrasait le safe-area haut
       (Dynamic Island / barre d'etat iOS). Repli env() si --boreal-safe-* absentes. */
    padding-top: max(20px, var(--boreal-safe-top, env(safe-area-inset-top, 0px)));
    padding-bottom: 20px;
    padding-left: max(12px, var(--boreal-safe-left, env(safe-area-inset-left, 0px)));
    padding-right: max(12px, var(--boreal-safe-right, env(safe-area-inset-right, 0px)));
}

body.mode-mobile .desktop.grid-full-row {
    justify-content: center;
}

body.mode-mobile .app-icon {
    width: var(--desktop-icon-width, 106px);
    align-items: center;
    overflow: visible;
    /* Marge interne : le fond de selection (:active / highlight) ne colle
       plus au texte. Grille et gap inchanges (box-sizing: border-box). */
    padding: 8px 6px;
    border: 1px solid transparent;
    box-sizing: border-box;
}

body.mode-mobile .app-icon:active,
body.mode-mobile .app-icon.keyboard-highlight {
    border-color: rgba(255, 255, 255, 0.14);
}

body.mode-mobile .app-icon-label {
    line-height: 1.4;
    padding-bottom: 2px;
    /* Plein largeur de la zone utile (padding .app-icon = marge vs selection).
       Les media queries plafonnaient a 70–80px → titres inutiles tronques. */
    max-width: none;
    width: 100%;
    box-sizing: border-box;
}

/* La tuile d'icone reste un carre parfait quelle que soit la largeur dispo */
body.mode-mobile .app-icon-image,
body.mode-mobile .mini-grid-container .app-icon-image {
    width: 56px !important;
    height: 56px !important;
    aspect-ratio: 1 / 1 !important;
    flex: 0 0 auto !important;
}

/* Glyphes ~60 % du carre (les media 480/768 laissaient 22–24px dans 56px).
   Sélecteur `>` : ne pas cibler le SVG du contour aurore (.ux-border-progress). */
body.mode-mobile .app-icon-image > svg,
body.mode-mobile .mini-grid-container .app-icon-image > svg {
    width: 34px !important;
    height: 34px !important;
}

/* ----- Taskbar mobile : plus haute + icones carrees -----
   Causes des bandes noires / icones rectangle :
   1. Media queries fixaient height:48/52px alors que --taskbar-height
      restait a 56px → le bureau laissait un filet noir au-dessus de la barre.
   2. .taskbar-apps avait max-width: calc(100% - 300px) → ~75px sur un
      telephone, ce qui ecrasait horizontalement les boutons (portrait).
   3. padding horizontal + min-width egal a height → forme non carree.
   On augmente la barre (64px utiles), on synchronise --taskbar-height
   (inclut le safe-area bas), et on force des boutons 44×44. */
body.mode-mobile {
    --taskbar-content-height: 64px;
    --taskbar-safe-bottom: max(0px, var(--boreal-safe-bottom, env(safe-area-inset-bottom, 0px)));
    --taskbar-height: calc(var(--taskbar-content-height) + var(--taskbar-safe-bottom));
}

body.mode-mobile .taskbar {
    height: var(--taskbar-height);
    padding-bottom: var(--taskbar-safe-bottom);
    padding-left: max(12px, var(--boreal-safe-left, env(safe-area-inset-left, 0px)));
    padding-right: max(12px, var(--boreal-safe-right, env(safe-area-inset-right, 0px)));
    /* L'icone peut sortir vers le bas pendant le swipe-to-close. */
    overflow: visible;
}

body.mode-mobile .taskbar-apps {
    overflow: visible;
}

body.mode-mobile .taskbar-app,
body.mode-mobile .taskbar-desktop-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    padding: 0 !important;
    aspect-ratio: 1 / 1;
    flex: 0 0 44px !important;
    justify-content: center;
    gap: 0;
    box-sizing: border-box;
    /* Pas de flash bleu au tap (surlignage WebKit + hover/active collants). */
    -webkit-tap-highlight-color: transparent;
    /* Pas de menu contextuel natif Chrome au long-press. */
    -webkit-touch-callout: none;
    outline: none;
}

/* touch-action: none sur les apps : le swipe vertical (fermer) est gere
   en JS (Pointer Events : touch + souris). Le bouton bureau garde
   manipulation (pas de swipe-to-close). */
body.mode-mobile .taskbar-app {
    touch-action: none;
    cursor: grab;
    user-select: none;
}
body.mode-mobile .taskbar-app.is-swiping-close {
    cursor: grabbing;
}
body.mode-mobile .taskbar-desktop-btn {
    touch-action: manipulation;
}

/* Mobile : jamais de libelle a cote des icones (meme sur grand ecran /
   mode force). Renforce le display:none par defaut de .taskbar-app-title. */
body.mode-mobile .taskbar-app-title {
    display: none !important;
}

/* Swipe-to-close : l'icone suit le doigt hors de la barre (vers le bas). */
body.mode-mobile .taskbar-app.is-swiping-close,
body.mode-mobile .taskbar-app.is-dismissing {
    z-index: 10002;
    will-change: transform, opacity;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
body.mode-mobile .taskbar-app.is-dismissing {
    pointer-events: none;
}

/* Neutraliser le feedback presse/hover sur mobile : le carre bleu
   (hover sticky + :active + tap-highlight) apparait un instant avant
   l'action reelle. L'etat stable .active / .desktop-visible est conserve. */
body.mode-mobile .taskbar-app:hover,
body.mode-mobile .taskbar-app:active,
body.mode-mobile .taskbar-desktop-btn:hover,
body.mode-mobile .taskbar-desktop-btn:active {
    background: rgba(255, 255, 255, 0.06);
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

body.mode-mobile .taskbar-app.active:hover,
body.mode-mobile .taskbar-app.active:active {
    background: rgba(74, 158, 255, 0.18);
    border-color: rgba(74, 158, 255, 0.4);
    box-shadow:
        0 0 12px rgba(74, 158, 255, 0.25),
        inset 0 0 8px rgba(74, 158, 255, 0.1);
    transform: none;
}

body.mode-mobile .taskbar-desktop-btn.desktop-visible:hover,
body.mode-mobile .taskbar-desktop-btn.desktop-visible:active {
    background: rgba(74, 158, 255, 0.18);
    border-color: rgba(74, 158, 255, 0.4);
    box-shadow:
        0 0 12px rgba(74, 158, 255, 0.25),
        inset 0 0 8px rgba(74, 158, 255, 0.1);
    transform: none;
}

body.mode-mobile .taskbar-end button,
body.mode-mobile .taskbar .account-btn,
body.mode-mobile .taskbar .notification-btn,
body.mode-mobile .taskbar .system-tray {
    -webkit-tap-highlight-color: transparent;
    outline: none;
    touch-action: manipulation;
}

/* Persona / tray : apres fermeture du popup, le :hover sticky mobile
   laissait un fond gris. Hors .active → fond transparent (noir de la barre). */
body.mode-mobile .taskbar .account-btn:hover:not(.active),
body.mode-mobile .taskbar .account-btn:active:not(.active),
body.mode-mobile .taskbar .account-btn:focus:not(.active),
body.mode-mobile .taskbar .notification-btn:hover:not(.active),
body.mode-mobile .taskbar .notification-btn:active:not(.active),
body.mode-mobile .taskbar .system-tray:hover:not(.active),
body.mode-mobile .taskbar .system-tray:active:not(.active) {
    background: transparent;
    box-shadow: none;
}

body.mode-mobile .taskbar .account-btn:hover:not(.active) svg,
body.mode-mobile .taskbar .account-btn:active:not(.active) svg {
    stroke: var(--text-secondary);
}

body.mode-mobile .taskbar .account-btn.active:hover,
body.mode-mobile .taskbar .account-btn.active:active {
    background: rgba(74, 158, 255, 0.15);
}

body.mode-mobile .taskbar .notification-btn {
    width: 44px;
    height: 44px;
    color: var(--text-secondary, #a0a0b8);
}

body.mode-mobile .taskbar .notification-btn svg {
    width: 22px;
    height: 22px;
    stroke-width: 2;
}

body.mode-mobile .taskbar .notification-btn.active {
    color: var(--accent, #4a9eff);
}

body.mode-mobile .taskbar-app-icon {
    width: 24px;
    height: 24px;
}

body.mode-mobile .taskbar-app-icon > svg {
    width: 14px;
    height: 14px;
}

/* ----- Agent incruste dans la barre des taches (non flottant) -----
   En mode mobile l'agent est ancre a DROITE, dans un logement encastre dessine
   sur la barre elle-meme (voir .taskbar::after / ::before ci-dessous).
   Taille 46px = meme diametre que le FAB desktop / docke, pour une
   lisibilite et une cible tactile comparables.
   Positionne dans la zone utile (hors safe-area bas). */
body.mode-mobile .app-assistant-fab,
body.mode-mobile .app-assistant-fab.app-assistant-movable {
    left: auto !important;
    right: 12px !important;
    top: auto !important;
    bottom: calc(var(--taskbar-safe-bottom, 0px) + (var(--taskbar-content-height, 64px) - 46px) / 2) !important;
    width: 46px !important;
    height: 46px !important;
    z-index: 100001 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
    cursor: pointer;
    touch-action: manipulation;
}

/* Glyphe : meme taille qu'en desktop (28px). Specifique + !important pour
   gagner contre toute regle taskbar/button svg plus generale. */
body.mode-mobile .app-assistant-fab > svg,
body.mode-mobile .app-assistant-fab .app-assistant-fab-icon {
    width: 28px !important;
    height: 28px !important;
    fill: #fff !important;
}

/* Artefact visuel : separateur vertical entre la zone agent et le reste de la
   barre (epure, sans forme parasite derriere l'agent rond). */
body.mode-mobile .taskbar::before {
    content: '';
    position: absolute;
    right: 70px;
    top: 10px;
    bottom: calc(10px + var(--taskbar-safe-bottom, 0px));
    width: 1px;
    background: var(--border-color, rgba(255, 255, 255, 0.08));
    pointer-events: none;
    z-index: 0;
}

/* Bouton Applications (+ apps ouvertes) aligne a GAUCHE (et non centre).
   max-width: none — critique pour ne plus ecraser les icones. */
body.mode-mobile .taskbar-apps {
    left: 12px;
    right: auto;
    margin: 0;
    justify-content: flex-start;
    max-width: none;
}

/* Reserver l'espace de l'agent (a droite) : on decale le cluster
   Notifications/Persona vers la gauche pour qu'il ne soit pas masque. */
body.mode-mobile .taskbar-end {
    margin-right: 66px;
}

/* Le panneau de l'agent : ancre a droite (sous l'agent), largeur plafonnee */
body.mode-mobile .app-assistant-panel.open,
body.mode-mobile .app-assistant-panel.app-assistant-movable.open {
    left: auto !important;
    right: 8px !important;
    top: auto !important;
    bottom: calc(var(--taskbar-height, 56px) + 8px) !important;
    width: min(400px, calc(100vw - 16px)) !important;
    max-width: min(400px, calc(100vw - 16px)) !important;
    height: min(70vh, 620px) !important;
    max-height: calc(100vh - var(--taskbar-height, 56px) - 24px) !important;
}

/* ----- Agent mobile : panneau d'historique en OVERLAY interne -----
   Probleme : le comportement "overlay" de l'historique n'existait qu'en
   @media (max-width: 640px). Or le mode mobile de l'OS peut etre actif
   jusqu'a 768px : entre 641 et 768px, l'historique reprenait le comportement
   desktop (excroissance a right:100%) et s'etalait HORS du panneau, a gauche.
   On force ici l'overlay interne des que body.mode-mobile est actif : le
   panneau d'historique glisse depuis la gauche AU-DESSUS du chat, dans le
   meme emplacement que le panneau (clippe par overflow:hidden), et seule la
   fleche de bascule reste visible au bord. */
body.mode-mobile .app-assistant-panel {
    overflow: hidden !important;
}

body.mode-mobile .app-assistant-history {
    position: absolute !important;
    right: auto !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: min(280px, 80%) !important;
    max-width: 280px !important;
    transform: translateX(-100%);
    z-index: 5 !important;
}

body.mode-mobile .app-assistant-panel.history-open .app-assistant-history {
    transform: translateX(0) !important;
}

body.mode-mobile .app-assistant-history-tab {
    left: auto !important;
    right: -22px !important;
    border-radius: 0 8px 8px 0 !important;
    border-left: none !important;
    border-right: 1px solid rgba(var(--app-assistant-accent-rgb, 139, 92, 246), 0.22) !important;
}

body.mode-mobile .app-assistant-history-inner {
    border-radius: 0 12px 12px 0 !important;
    border-left: 1px solid rgba(var(--app-assistant-accent-rgb, 139, 92, 246), 0.22) !important;
    border-right: none !important;
    box-shadow:
        10px 18px 46px rgba(0, 0, 0, 0.42),
        inset 8px 0 14px -6px rgba(0, 0, 0, 0.55) !important;
}

/* ----- Etat FERME : pas d'ombre portee de l'historique -----
   Quand l'historique est ferme, son conteneur interne est cache derriere le
   panneau principal, MAIS son ombre portee (offset horizontal + flou) bave a
   cote du panneau et cree un faux liseré de "sidebar" qui semble masquer le
   bord (la ligne) de l'agent. On ne montre cette ombre que lorsque
   l'historique est reellement ouvert. Vaut pour desktop ET mobile (la
   specificite de :not(.history-open) > body.mode-mobile, donc l'ombre mobile
   ci-dessus ne s'applique plus qu'a l'etat ouvert). */
.app-assistant-panel:not(.history-open) .app-assistant-history-inner {
    box-shadow: none !important;
}

/* ============================================================
   MODE PRODUCTIVITE : positionner le popup pres de la sidebar
   ============================================================ */
body.mode-productivity #sysmenu-panel {
    right: auto;
    left: 0;
    bottom: var(--taskbar-height, 56px);
}

body:not(.mode-mobile):not(.silo-locked).mode-productivity #sysmenu-panel {
    left: var(--os-popup-inset, 12px);
    right: auto;
    bottom: calc(var(--taskbar-height, 56px) + var(--os-popup-inset, 12px));
    border-radius: 12px 12px 0 0;
}

body:not(.mode-mobile):not(.silo-locked).mode-productivity #sysmenu-panel.os-popup-edge-left {
    left: 0;
    border-top-left-radius: 0;
    border-left: none;
}

/* Login standalone (admin.mio.land, silos verrouilles) : le centrage
   silo-locked doit primer sur l'ancrage productivite (bas-gauche). Sans
   cette regle plus specifique, left/bottom productivite ecrasent le
   centrage et le formulaire de connexion sort de l'ecran. */
body.silo-locked.mode-productivity #sysmenu-panel {
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: 380px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    animation: none;
}

/* ============================================================
   MULTI-ECRAN BOREAL OS : recadrer le popup unifie sur l'ecran principal
   ------------------------------------------------------------
   En multi-ecran, Chrome est etire sur l'union de tous les ecrans (un seul
   grand canevas). Le popup #sysmenu-panel (onglets Compte / Systeme / Taches,
   = « Options systeme ») est position:fixed et ancre au bord droit (right:0)
   ou, en mode productivite, au bord gauche (left:0). Sans recadrage, ses
   left/right sont relatifs au CANEVAS entier : le popup derive sur l'ecran
   SECONDAIRE, alors que la barre des taches (et le popup Notifications) sont
   recadres sur l'ecran principal. On le reancre sur l'ecran principal via les
   variables --os-primary-* posees par os/boreal-tray.js a partir de la
   disposition reelle du compositeur — exactement comme .notification-panel /
   .system-panel / .account-panel dans os/style.css.

   Mono-ecran (ou navigateur web standard) : la classe boreal-multiscreen n'est
   PAS posee, ces regles ne s'appliquent pas et le positionnement de base est
   conserve. En multi-ecran seul le mode desktop est actif (cf. os/ui-modes.js,
   applyMultiScreenPolicy) ; on couvre tout de meme le mode productivite par
   robustesse, et le mode mobile herite de la regle generique ci-dessous (sa
   media-query <=768px ne se declenche pas sur un canevas multi-ecran large). */
body.boreal-multiscreen #sysmenu-panel {
    left: auto;
    right: calc(100vw - var(--os-primary-left, 0px) - var(--os-primary-width, 100vw));
    bottom: calc(var(--taskbar-height, 56px) + var(--os-primary-bottom, 0px));
    /* Bornee a la hauteur de l'ecran principal (et non du canevas) pour ne pas
       deborder au-dessus de cet ecran quand les hauteurs different. */
    --sysmenu-height: min(520px, calc(var(--os-primary-height, 100vh) - var(--taskbar-height, 56px)));
    max-height: var(--sysmenu-height);
}

body:not(.mode-mobile):not(.silo-locked).boreal-multiscreen #sysmenu-panel {
    right: calc(100vw - var(--os-primary-left, 0px) - var(--os-primary-width, 100vw) + var(--os-popup-inset, 12px));
    bottom: calc(var(--taskbar-height, 56px) + var(--os-primary-bottom, 0px) + var(--os-popup-inset, 12px));
    --sysmenu-height: min(520px, calc(var(--os-primary-height, 100vh) - var(--taskbar-height, 56px) - (2 * var(--os-popup-inset, 12px))));
}

/* Mode productivite : le popup s'ancre pres de la sidebar, donc au bord GAUCHE
   de l'ecran principal (et non du canevas). Specificite (1,2,1) > la regle
   generique multi-ecran et > body.mode-productivity #sysmenu-panel. */
body.boreal-multiscreen.mode-productivity #sysmenu-panel {
    right: auto;
    left: var(--os-primary-left, 0px);
    bottom: calc(var(--taskbar-height, 56px) + var(--os-primary-bottom, 0px));
}

/* Login standalone (silo-locked) centre : recentrer sur l'ecran principal,
   pas sur le milieu du canevas (qui tomberait a cheval sur deux ecrans). */
body.boreal-multiscreen.silo-locked #sysmenu-panel {
    left: calc(var(--os-primary-left, 0px) + var(--os-primary-width, 100vw) / 2);
    top: calc(var(--os-primary-top, 0px) + var(--os-primary-height, 100vh) / 2);
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
}