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

/* ----- Popup unifie ----- */
.sysmenu-panel {
    position: fixed;
    bottom: calc(var(--taskbar-height, 56px) + 12px);
    right: 16px;
    width: 360px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - var(--taskbar-height, 56px) - 32px);
    background: var(--bg-secondary, #12121a);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    z-index: 100000;
    display: none;
    flex-direction: column;
    overflow: hidden;
    animation: sysmenuIn 0.16s ease-out;
}

.sysmenu-panel.open {
    display: flex;
}

@keyframes sysmenuIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.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: block;
}

/* ----- 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;
}

/* 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);
    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) {
    /* Panneaux ancres a droite avec une largeur plafonnee : ne jamais occuper
       toute la largeur quand l'ecran est large (tablette, paysage). */
    #sysmenu-panel,
    .notification-panel {
        left: auto !important;
        right: 8px !important;
        width: min(400px, calc(100vw - 16px)) !important;
        max-width: min(400px, calc(100vw - 16px)) !important;
    }

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

    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;
    }
}

/* Grille d'apps : icones reellement carrees + alignement a gauche.
   (Sur iPhone, les pistes flexibles rendaient les tuiles rectangulaires.) */
body.mode-mobile .desktop {
    justify-content: start;
    align-content: start;
    justify-items: start;
    grid-template-columns: repeat(auto-fill, var(--desktop-icon-width, 100px));
    padding: 20px 16px;
}

body.mode-mobile .app-icon {
    width: var(--desktop-icon-width, 100px);
    align-items: center;
}

/* 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;
}

/* ----- 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). */
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-height, 56px) - 40px) / 2) !important;
    width: 40px !important;
    height: 40px !important;
    z-index: 100001 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
    cursor: pointer;
    touch-action: manipulation;
}

/* 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: 64px;
    top: 12px;
    bottom: 12px;
    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) */
body.mode-mobile .taskbar-apps {
    left: 12px;
    right: auto;
    margin: 0;
    justify-content: flex-start;
}

/* 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: 60px;
}

/* 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: 16px;
    bottom: 60px;
}

/* ============================================================
   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:16px)
   ou, en mode productivite, au bord gauche (left:16px). 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) + 16px);
    bottom: calc(var(--taskbar-height, 56px) + 12px + 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. */
    max-height: calc(var(--os-primary-height, 100vh) - var(--taskbar-height, 56px) - 32px);
}

/* 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: calc(var(--os-primary-left, 0px) + 16px);
    bottom: calc(60px + 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%);
}