/* mio.land - OS Souverain */
/* Fonts are loaded globally from /os/fonts.css */

:root {
    --bg-primary: #0a0a0f;
    --bg-secondary: #12121a;
    --bg-tertiary: #1a1a25;
    --bg-glass: rgba(18, 18, 26, 0.85);
    --text-primary: #f0f0f5;
    --text-secondary: #8888a0;
    --accent-blue: #4a9eff;
    --accent-purple: #8b5cf6;
    --accent-gradient: linear-gradient(135deg, #4a9eff 0%, #8b5cf6 100%);
    --border-color: rgba(255, 255, 255, 0.08);
    --window-rim: rgba(255, 255, 255, 0.1);
    --shadow-glow: 0 0 40px rgba(74, 158, 255, 0.15);
    /* Hauteur utile de la barre (hors safe-area). --taskbar-height peut
       inclure le safe-area bas en mobile pour coller bureau + barre. */
    --taskbar-content-height: 56px;
    --taskbar-safe-bottom: 0px;
    --taskbar-height: 56px;
    
    /* Grille desktop - variables partagées */
    --desktop-icon-width: 100px;
    --desktop-icon-height: 110px;
    --desktop-grid-gap: 16px;
    --desktop-padding: 32px;
    --desktop-max-columns: 6;
    /* Colonnes calculées dynamiquement par JS */
    --desktop-grid-columns: repeat(var(--desktop-computed-columns, 6), var(--desktop-icon-width));
    --desktop-background: 
        radial-gradient(ellipse at 20% 20%, rgba(74, 158, 255, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(139, 92, 246, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(16, 185, 129, 0.06) 0%, transparent 70%),
        var(--bg-primary);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Jamais de carre bleu / gris de surlignage au touch (WebKit / Chrome mobile).
       Le feedback tactile passe par nos etats :active / .ux-btn-pressed. */
    -webkit-tap-highlight-color: transparent;
}

/* Page-scale interdit. manipulation AUTORISE le pinch — ne pas l’utiliser.
   Les canvas Carte (`touch-action: none`) gardent le pinch JS. */
html, body {
    touch-action: pan-x pan-y;
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    height: 100vh;
    overflow: hidden;
    user-select: none;
}

/* Background avec effet aurore boréale */
/* Fond « chrome » sous la barre système (iOS island / Android cutout).
   Par défaut = aurore du bureau. Quand une app est active, JS pose
   --boreal-chrome-bg depuis le fond de l'app (iframe / meta / postMessage). */
html.boreal-android,
html.boreal-android body,
html.boreal-ios,
html.boreal-ios body {
    background: var(--boreal-chrome-bg, var(--desktop-background)) !important;
}

html.boreal-ios body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--boreal-chrome-bg, var(--desktop-background));
    pointer-events: none;
}

/* App active (mobile) : la fenêtre remonte sous la barre iOS ; le padding-top
   safe-area est peint avec le fond de l'app (pas celui de la grille). */
body.mode-mobile.chrome-app-active .windows-container {
    top: 0;
}
body.mode-mobile.chrome-app-active .app-window {
    padding-top: var(--boreal-safe-top, env(safe-area-inset-top, 0px));
    box-sizing: border-box;
    background: var(--boreal-chrome-bg, #0a0a0f);
}
body.mode-mobile.chrome-app-active .app-window.window-chromeless {
    background: transparent;
}

.desktop {
    position: relative;
    width: 100%;
    height: calc(100vh - var(--taskbar-height));
    background: var(--desktop-background);
    padding: var(--desktop-padding);
    display: grid;
    grid-template-columns: var(--desktop-grid-columns);
    grid-auto-rows: var(--desktop-icon-height);
    gap: var(--desktop-grid-gap);
    /* Centrage horizontal et vertical */
    justify-content: center;
    align-content: center;
    /* Scroll vertical si nécessaire */
    overflow-y: auto;
    overflow-x: hidden;
    /* Caché par défaut, affiché une fois la grille calculée */
    opacity: 0;
    transition: opacity 0.15s ease;
}

/* Quand la grille déborde et nécessite un scroll, aligner en haut */
.desktop.has-scroll {
    align-content: start;
}

/* Affiché seulement quand la grille est calculée ET que le catalogue
   d'apps de l'utilisateur actif a été résolu (évite le flash « anonyme »
   puis le double rafraîchissement au démarrage). */
.desktop.grid-ready.apps-catalog-ready {
    opacity: 1;
}

/* Icônes d'applications */
.app-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    border-radius: 16px;
    cursor: pointer;
    transition: background 0.2s ease;
    text-decoration: none;
    color: var(--text-primary);
    background: transparent;
    border: none;
    font-family: inherit;
    perspective: 200px;
    -webkit-user-select: none;
    user-select: none;
}

.app-icon:hover {
    background: rgba(255, 255, 255, 0.06);
}

.app-icon:active .app-icon-image {
    transform: scale(0.92) rotateX(0deg) rotateY(0deg);
}

.app-icon-image {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    color: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease-out, box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    transform-style: preserve-3d;
    will-change: transform;
}

.app-icon:hover .app-icon-image {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
.app-icon-image > svg {
    width: 28px;
    height: 28px;
    color: #ffffff;
    transition: filter 0.3s ease, stroke 0.3s ease, fill 0.3s ease, stroke-width 0.3s ease;
}
.app-icon-image > svg[fill="none"],
.app-icon-image > svg.svg-stroke {
    stroke: white;
    stroke-width: 1.5;
    fill: none;
}
.app-icon-image > svg[fill="currentColor"],
.app-icon-image > svg[fill="currentColor"] *,
.app-icon-image > svg.svg-fill,
.app-icon-image > svg.svg-fill * {
    fill: white;
    stroke: none;
}

.app-icon:hover .app-icon-image > svg {
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.5));
}

.app-icon-label {
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    max-width: 90px;
    /* line-height + padding : laisse de la place aux jambages (p, g, y)
       sinon overflow:hidden les coupe de 1–2px sur mobile. */
    line-height: 1.4;
    padding-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

/* App Local en cours de téléchargement (Boutique → set-apps + sync).
   Contour aurore UX.borderProgress autour de .app-icon-image. */
.app-icon.app-syncing .app-icon-image {
    position: relative;
}
.app-icon.app-syncing .app-icon-image.ux-icon-border-progress,
.app-icon.app-activity .app-icon-image.ux-icon-border-progress {
    /* Laisse respirer le trait hors du carré */
    overflow: visible;
}
.app-icon.app-activity {
    overflow: visible;
}
.app-icon.app-activity .app-icon-image {
    position: relative;
}

/* Activité longue (ex. sync Paramètres) — anneau autour du bouton taskbar entier */
.taskbar-app.app-activity {
    overflow: visible;
}
.taskbar-app.app-activity.ux-icon-border-progress {
    overflow: visible;
}

/* Effet de mise en évidence au clavier */
.app-icon.keyboard-highlight {
    z-index: 100;
}

.app-icon.keyboard-highlight .app-icon-image {
    animation: keyboardHighlight 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 
        0 0 0 3px rgba(0, 0, 0, 0.8),
        0 0 25px rgba(255, 255, 255, 0.6),
        0 0 50px rgba(255, 255, 255, 0.3),
        0 8px 20px rgba(0, 0, 0, 0.4);
}

html:not([data-theme="light"]) .app-icon.keyboard-highlight .app-icon-image {
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--app-icon-color, #ffffff) 55%, transparent),
        0 0 28px color-mix(in srgb, var(--app-icon-color, #ffffff) 50%, transparent),
        0 8px 20px rgba(0, 0, 0, 0.45);
}

.app-icon.keyboard-highlight .app-icon-label {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

@keyframes keyboardHighlight {
    0% {
        transform: scale(1) translateY(0) rotate(0deg);
    }
    15% {
        transform: scale(1.15) translateY(-6px) rotate(-8deg);
    }
    30% {
        transform: scale(1.2) translateY(-8px) rotate(6deg);
    }
    45% {
        transform: scale(1.18) translateY(-7px) rotate(-5deg);
    }
    60% {
        transform: scale(1.15) translateY(-5px) rotate(4deg);
    }
    75% {
        transform: scale(1.1) translateY(-3px) rotate(-2deg);
    }
    90% {
        transform: scale(1.05) translateY(-1px) rotate(1deg);
    }
    100% {
        transform: scale(1) translateY(0) rotate(0deg);
    }
}

/* Badge sur les icônes d'apps */
.app-icon-image {
    position: relative;
}

.app-icon-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: #ef4444;
    color: white;
    font-size: 11px;
    font-weight: 600;
    border-radius: 10px;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.5);
    border: 2px solid var(--bg-primary);
    z-index: 10;
}

.app-icon-badge.visible {
    display: flex;
}

/* Badge BETA sur les icônes du bureau */
.app-icon-beta-badge {
    position: absolute;
    top: -2px;
    right: -6px;
    padding: 2px 5px;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #fcd34d;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.9), rgba(217, 119, 6, 0.9));
    border: 1px solid rgba(251, 191, 36, 0.6);
    border-radius: 3px;
    transform: rotate(15deg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    z-index: 5;
    pointer-events: none;
}

/* Barre des tâches style ChromeOS */
.taskbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--taskbar-height);
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 16px;
    gap: 8px;
    z-index: 9999;
    /* Pas de menu contextuel natif (Chrome long-press / clic droit) */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.taskbar button,
.taskbar .taskbar-app,
.taskbar .taskbar-desktop-btn,
.taskbar .notification-btn,
.taskbar .account-btn,
.taskbar .system-tray,
.taskbar .boreal-battery {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Multi-écran Boréal OS : la barre des tâches est recadrée sur l'écran
   principal. Les variables --os-primary-left / --os-primary-width sont posées
   par os/boreal-tray.js à partir de host_display_list. Sur un navigateur web
   standard ou un écran unique, la classe boreal-multiscreen n'est pas posée et
   la barre conserve sa pleine largeur. Les enfants (lanceur centré, tray à
   droite) suivent automatiquement la nouvelle boîte de la barre. */
body.boreal-multiscreen .taskbar {
    left: var(--os-primary-left, 0px);
    width: var(--os-primary-width, 100%);
    right: auto;
    /* L'écran principal peut être moins haut que le canevas (hauteurs
       différentes). On colle la barre au bas de l'écran principal, pas au bas
       du canevas, via le décalage vertical posé par os/boreal-tray.js. */
    bottom: var(--os-primary-bottom, 0px);
}

/* En multi-écran, le conteneur .desktop-pulse-clip est recadré sur l'écran
   principal : l'onde (positionnée en absolute à l'intérieur) reste centrée sur
   la barre des tâches, et overflow:hidden coupe les anneaux aux limites de
   l'écran principal (arc au lieu de cercle, rien ne déborde sur l'écran
   secondaire). */
body.boreal-multiscreen .desktop-pulse-clip {
    left: var(--os-primary-left, 0px);
    top: var(--os-primary-top, 0px);
    width: var(--os-primary-width, 100vw);
    height: var(--os-primary-height, 100vh);
    right: auto;
    bottom: auto;
}

/* Panneaux du tray (notifications, système, compte) ancrés au bord droit via
   right:Npx. Le viewport couvrant tous les écrans, ils dérivaient vers le bord
   du canevas (écran secondaire). On les réancre au bord droit de l'écran
   principal en ajoutant l'espace situé à droite de celui-ci, et au bas de
   l'écran principal via --os-primary-bottom. */
body.boreal-multiscreen .notification-panel,
body.boreal-multiscreen .system-panel,
body.boreal-multiscreen .os-sys-toast-stack {
    right: calc(100vw - var(--os-primary-left, 0px) - var(--os-primary-width, 100vw));
    bottom: calc(var(--taskbar-height) + var(--os-primary-bottom, 0px) - 1px);
}
body:not(.mode-mobile):not(.silo-locked).boreal-multiscreen .notification-panel {
    right: calc(100vw - var(--os-primary-left, 0px) - var(--os-primary-width, 100vw) + var(--os-popup-inset, 12px));
    bottom: calc(var(--taskbar-height) + var(--os-primary-bottom, 0px) + var(--os-popup-inset, 12px));
}
body.boreal-multiscreen .notification-panel {
    max-height: min(700px, calc((var(--os-primary-height, 100vh) - var(--taskbar-height, 56px)) * 0.875));
}
body.boreal-multiscreen .account-panel {
    right: calc(100vw - var(--os-primary-left, 0px) - var(--os-primary-width, 100vw) + 100px);
    bottom: calc(var(--taskbar-height) + var(--os-primary-bottom, 0px));
}

/* Panneau de connexion (auth) : même réancrage que les panneaux du tray
   (base : right:60px / bottom:taskbar dans .auth-panel). */
body.boreal-multiscreen .auth-panel {
    right: calc(100vw - var(--os-primary-left, 0px) - var(--os-primary-width, 100vw) + 60px);
    bottom: calc(var(--taskbar-height) + var(--os-primary-bottom, 0px));
}

/* Gestionnaire de tâches asynchrones (os/tasks.css) : même réancrage
   (base : right:8px / bottom:taskbar+8px). La hauteur max est bornée à
   l'écran principal et non au canevas complet. */
body.boreal-multiscreen .systasks-panel {
    right: calc(100vw - var(--os-primary-left, 0px) - var(--os-primary-width, 100vw) + 8px);
    bottom: calc(var(--taskbar-height, 56px) + 8px + var(--os-primary-bottom, 0px));
    max-height: calc(var(--os-primary-height, 100vh) - var(--taskbar-height, 56px) - 24px);
}

.taskbar-apps {
    /* Centrage absolu par rapport à l'écran, pas à l'espace disponible */
    /* Utilise left/right/margin au lieu de transform pour ne pas casser position:fixed des enfants */
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    overflow: visible;
    padding: 0 16px;
    /* Limiter la largeur pour ne pas chevaucher taskbar-end */
    max-width: calc(100% - 300px);
}

/* Bouton Show Desktop - Style identique aux apps de la taskbar */
.taskbar-desktop-btn {
    height: 44px;
    min-width: 44px;
    padding: 0 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    transition: background 0.15s ease, border-color 0.15s ease, var(--ux-hover-rim-transition, box-shadow 0.2s ease, filter 0.2s ease, transform 0.2s ease);
    position: relative;
    flex-shrink: 0;
}

.taskbar-desktop-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.taskbar-desktop-btn.desktop-visible {
    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);
}

.taskbar-desktop-btn.desktop-visible::after {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 4px;
    background: var(--accent-gradient);
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(74, 158, 255, 0.6);
}

.taskbar-desktop-btn.desktop-visible:hover {
    background: rgba(74, 158, 255, 0.24);
}

.taskbar-desktop-btn svg {
    width: 20px;
    height: 20px;
    stroke: var(--text-secondary);
    stroke-width: 1.5;
    fill: none;
    transition: stroke 0.15s ease;
}

.taskbar-desktop-btn:hover svg {
    stroke: var(--text-primary);
}

.taskbar-desktop-btn.desktop-visible svg {
    stroke: #ffffff;
    text-shadow: 0 0 8px rgba(74, 158, 255, 0.4);
}

/* Cinématique démarrage Desktop : attention sur le bouton grille avant ouverture */
.taskbar-desktop-btn.startup-apps-invite {
    animation: startupAppsInvitePulse 0.42s ease-in-out 1;
    z-index: 2;
}

@keyframes startupAppsInvitePulse {
    0% {
        background: rgba(255, 255, 255, 0.06);
        box-shadow: 0 0 0 0 rgba(74, 158, 255, 0);
        transform: scale(1);
    }
    35% {
        background: rgba(74, 158, 255, 0.28);
        box-shadow:
            0 0 0 6px rgba(74, 158, 255, 0.18),
            0 0 22px 4px rgba(74, 158, 255, 0.45);
        transform: scale(1.08);
    }
    70% {
        background: rgba(74, 158, 255, 0.2);
        box-shadow:
            0 0 0 3px rgba(74, 158, 255, 0.12),
            0 0 14px 2px rgba(74, 158, 255, 0.3);
        transform: scale(1.03);
    }
    100% {
        background: rgba(74, 158, 255, 0.16);
        box-shadow: 0 0 10px 1px rgba(74, 158, 255, 0.22);
        transform: scale(1);
    }
}

.taskbar-desktop-btn.startup-apps-invite svg {
    stroke: #ffffff;
}

/* Wrapper pour le bouton desktop et le popup */
.taskbar-desktop-wrapper {
    position: relative;
    flex-shrink: 0;
    /* Permettre au popup de déborder du conteneur */
    overflow: visible;
}

/* ========================================
   ANIMATION PULSE — silo verrouillé / auth
   Grands cercles multicolores sur le fond
   (plus utilisée pour l'invite démarrage Desktop :
   remplacée par la cinématique bouton grille)
   Positionné EN DESSOUS de la taskbar
   ======================================== */

/* Cadre de découpe des ondes : couvre l'écran principal (ou tout le viewport
   en mono-écran) et coupe les anneaux à ses limites pour qu'ils ne débordent
   jamais sur un écran secondaire (arc au lieu de cercle complet). */
.desktop-pulse-clip {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1; /* En dessous de la taskbar (z-index: 9999) */
}

/* Conteneur des anneaux de pulse - élément séparé, z-index bas */
.desktop-pulse-overlay {
    position: absolute; /* relatif au cadre .desktop-pulse-clip */
    /* Centré verticalement sur la taskbar */
    bottom: calc(var(--taskbar-height, 56px) / 2);
    left: 50%;
    transform: translate(-50%, 50%);
    width: 60px;
    height: 60px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s ease;
}

/* Afficher les anneaux quand l'animation est active */
.desktop-pulse-overlay.pulse-active {
    opacity: 1;
}

/* Anneaux individuels - fins, multicolores.
   Animation UNIQUEMENT sous .pulse-active (sinon CPU même à opacity:0).
   10 anneaux × 1 cycle = invitation de démarrage uniquement. */
.desktop-pulse-overlay .pulse-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1.5px solid;
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
    animation: none;
}

.desktop-pulse-overlay.pulse-active .pulse-ring {
    animation: pulseRingLarge 36s ease-out 1 forwards;
}

/* 10 couleurs — délai de 1.5s entre chaque (10 ondes successives) */
.desktop-pulse-overlay .pulse-ring:nth-child(1)  { border-color: hsla(210, 100%, 65%, 0.6); box-shadow: 0 0 12px hsla(210, 100%, 65%, 0.35); animation-delay: 0s; }
.desktop-pulse-overlay .pulse-ring:nth-child(2)  { border-color: hsla(225, 85%, 65%, 0.6); box-shadow: 0 0 12px hsla(225, 85%, 65%, 0.35); animation-delay: 1.5s; }
.desktop-pulse-overlay .pulse-ring:nth-child(3)  { border-color: hsla(245, 80%, 67%, 0.6); box-shadow: 0 0 12px hsla(245, 80%, 67%, 0.35); animation-delay: 3s; }
.desktop-pulse-overlay .pulse-ring:nth-child(4)  { border-color: hsla(265, 85%, 65%, 0.6); box-shadow: 0 0 12px hsla(265, 85%, 65%, 0.35); animation-delay: 4.5s; }
.desktop-pulse-overlay .pulse-ring:nth-child(5)  { border-color: hsla(280, 80%, 65%, 0.6); box-shadow: 0 0 12px hsla(280, 80%, 65%, 0.35); animation-delay: 6s; }
.desktop-pulse-overlay .pulse-ring:nth-child(6)  { border-color: hsla(295, 75%, 60%, 0.6); box-shadow: 0 0 12px hsla(295, 75%, 60%, 0.35); animation-delay: 7.5s; }
.desktop-pulse-overlay .pulse-ring:nth-child(7)  { border-color: hsla(315, 80%, 60%, 0.6); box-shadow: 0 0 12px hsla(315, 80%, 60%, 0.35); animation-delay: 9s; }
.desktop-pulse-overlay .pulse-ring:nth-child(8)  { border-color: hsla(335, 85%, 60%, 0.6); box-shadow: 0 0 12px hsla(335, 85%, 60%, 0.35); animation-delay: 10.5s; }
.desktop-pulse-overlay .pulse-ring:nth-child(9)  { border-color: hsla(350, 85%, 60%, 0.6); box-shadow: 0 0 12px hsla(350, 85%, 60%, 0.35); animation-delay: 12s; }
.desktop-pulse-overlay .pulse-ring:nth-child(10) { border-color: hsla(5, 85%, 62%, 0.6); box-shadow: 0 0 12px hsla(5, 85%, 62%, 0.35); animation-delay: 13.5s; }

/* Animation keyframes - grands cercles qui s'étendent */
@keyframes pulseRingLarge {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }
    17% {
        transform: translate(-50%, -50%) scale(12);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) scale(12);
        opacity: 0;
    }
}

/* Mini-grille popup au survol du bouton desktop */
.mini-grid-popup {
    position: fixed;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 
        0 -8px 32px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        var(--shadow-glow);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 10001;
    /* Dimensions calculées dynamiquement par JS.
       overflow hidden : clippe le scroll interne aux coins arrondis. */
    overflow: hidden;
    overflow-x: hidden;
    /* Flexbox pour centrer le scaler verticalement */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Background sur le popup pour couvrir toute la surface */
    background: var(--desktop-background);
    /* Animation 3D - effet page de livre qui s'ouvre depuis le fond de l'écran */
    transform-origin: bottom center;
    transform: perspective(1000px) rotateX(15deg) scale(0.95);
    transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Pas de fleche ::after : overflow-y:auto la faisait defiler dans la grille. */

/* Zone de transition invisible pour garder le popup ouvert pendant le déplacement de la souris */
.mini-grid-popup::before {
    content: '';
    position: absolute;
    bottom: -16px;
    left: -20px;
    right: -20px;
    height: 24px;
}

/* En mode Bureau, le popup s'affiche uniquement au clic (pas de hover) */
.mini-grid-popup.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: perspective(800px) rotateX(0deg) scale(1);
}

/* Force la fermeture immédiate du popup (override les règles hover) */
.mini-grid-popup.force-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Wrapper pour le scale. C'est aussi le conteneur de scroll
   (le popup parent clippe au radius). overflow-y:auto uniquement
   quand .is-scrollable : sinon une barre apparaît pour 1–2 px. */
.mini-grid-scaler {
    position: relative;
    min-height: 0;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
}

.mini-grid-popup.is-scrollable .mini-grid-scaler {
    overflow-y: auto;
}

/* Container interne - clone exact du desktop mis à l'échelle */
.mini-grid-container {
    /* Mêmes propriétés que .desktop (via variables CSS) - sans background (sur le popup) */
    padding: var(--desktop-padding);
    display: grid;
    grid-template-columns: var(--desktop-grid-columns);
    grid-auto-rows: var(--desktop-icon-height);
    gap: var(--desktop-grid-gap);
    /* Centrage horizontal, alignement en haut (le centrage vertical est géré par le popup) */
    justify-content: center;
    align-content: start;
    /* Dimensions définies par JS */
    /* transform: scale() appliqué par JS */
    transform-origin: top left;
    box-sizing: border-box;
    /* Position absolue pour que le scaler définisse les dimensions visuelles */
    position: absolute;
    top: 0;
    left: 0;
}

/* Badges dans la mini-grille : caches par defaut, visibles si actifs */
.mini-grid-container .app-icon-badge {
    display: none;
}
.mini-grid-container .app-icon-badge.visible {
    display: flex;
}

/* Scrollbar : zone 10 px (sans réduire la grille), rail gris arrondi,
   pastille grise arrondie, marges haut/bas hors des coins du popup.
   !important : os/scrollbar.css impose 10 px. Pas de barre horizontale. */
.mini-grid-popup .mini-grid-scaler::-webkit-scrollbar {
    width: 10px !important;
    height: 0 !important;
}

.mini-grid-popup .mini-grid-scaler::-webkit-scrollbar:horizontal {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.mini-grid-popup .mini-grid-scaler::-webkit-scrollbar-corner {
    background: transparent !important;
}

.mini-grid-popup .mini-grid-scaler::-webkit-scrollbar-track {
    background: transparent !important;
    border-radius: 999px !important;
    margin-top: 16px !important;
    margin-bottom: 16px !important;
}

.mini-grid-popup .mini-grid-scaler::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.14) !important;
    background-image: none !important;
    border: 2px solid transparent !important;
    background-clip: padding-box !important;
    border-radius: 999px !important;
}

.mini-grid-popup .mini-grid-scaler::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.20) !important;
    background-image: none !important;
}

.mini-grid-popup .mini-grid-scaler::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* La gouttière 10 px recouvre le padding droit : la grille d'icônes garde sa largeur. */
.mini-grid-popup.is-scrollable .mini-grid-container {
    width: calc(100% + 10px) !important;
    max-width: none !important;
}

.taskbar-app {
    height: 44px;
    min-width: 44px;
    padding: 0 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
    transition: background 0.15s ease, border-color 0.15s ease, var(--ux-hover-rim-transition, box-shadow 0.2s ease, filter 0.2s ease, transform 0.2s ease);
    position: relative;
}

.taskbar-app:hover {
    background: rgba(255, 255, 255, 0.1);
}

.taskbar-app.active:hover {
    background: rgba(74, 158, 255, 0.24);
    border-color: rgba(74, 158, 255, 0.5);
}

.taskbar-app.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);
}

.taskbar-app.active::after {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 4px;
    background: var(--accent-gradient);
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(74, 158, 255, 0.6);
}

.taskbar-app.active .taskbar-app-icon {
    box-shadow: 0 0 6px rgba(74, 158, 255, 0.5);
}

.taskbar-app.active .taskbar-app-title {
    color: #ffffff;
    text-shadow: 0 0 8px rgba(74, 158, 255, 0.4);
}

/* Barre de progression sur icône taskbar */
.taskbar-app-progress {
    position: absolute;
    bottom: 0;
    left: 4px;
    right: 4px;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0 0 8px 8px;
    overflow: hidden;
    display: none;
}

.taskbar-app.has-progress .taskbar-app-progress {
    display: block;
}

.taskbar-app-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--accent-gradient, linear-gradient(90deg, #4a9eff, #6366f1));
    border-radius: 0 0 8px 8px;
    transition: width 0.3s ease;
}

/* Indicateur de lecture média en cours */
.taskbar-app .media-playing-indicator {
    position: absolute;
    top: 6px;
    right: 6px;
    display: none;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    width: 14px;
    height: 12px;
}

.taskbar-app.media-playing .media-playing-indicator {
    display: flex;
}

.media-playing-indicator .bar {
    width: 3px;
    background: #22c55e;
    border-radius: 1px;
    animation: mediaPlayingBars 0.8s ease-in-out infinite;
}

.media-playing-indicator .bar:nth-child(1) {
    height: 40%;
    animation-delay: 0s;
}

.media-playing-indicator .bar:nth-child(2) {
    height: 80%;
    animation-delay: 0.15s;
}

.media-playing-indicator .bar:nth-child(3) {
    height: 60%;
    animation-delay: 0.3s;
}

@keyframes mediaPlayingBars {
    0%, 100% {
        transform: scaleY(0.4);
    }
    50% {
        transform: scaleY(1);
    }
}

/* Version icône desktop aussi */
.app-icon-image .media-playing-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    background: #22c55e;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-primary);
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.5);
}

.app-icon-image .media-playing-badge.visible {
    display: flex;
}

.app-icon-image .media-playing-badge::before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 0 4px 6px;
    border-color: transparent transparent transparent white;
    margin-left: 2px;
}

.taskbar-app-icon {
    position: relative;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}
.taskbar-app-icon > svg {
    width: 14px;
    height: 14px;
    color: #ffffff;
}
.taskbar-app-icon > svg[fill="none"],
.taskbar-app-icon > svg.svg-stroke {
    stroke: white;
    stroke-width: 1.5;
    fill: none;
}
.taskbar-app-icon > svg[fill="currentColor"],
.taskbar-app-icon > svg[fill="currentColor"] *,
.taskbar-app-icon > svg.svg-fill,
.taskbar-app-icon > svg.svg-fill * {
    fill: white;
    stroke: none;
}

.taskbar-app-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Icones seules par defaut (mobile, focus, etc.).
       Le libelle n'apparait qu'en mode Bureau et Productivite. */
    display: none;
}

/* Libelle a cote de l'icone : Bureau + Productivite uniquement */
body.mode-desktop .taskbar-app-title,
body.mode-productivity .taskbar-app-title {
    display: block;
}

.taskbar-end {
    display: flex;
    align-items: center;
    gap: 2px; /* Espacement compact, uniforme avec le sidebar */
}

.system-tray {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease, var(--ux-hover-rim-transition, box-shadow 0.2s ease, filter 0.2s ease, transform 0.2s ease);
}

.system-tray:hover {
    background: rgba(255, 255, 255, 0.08);
}

.system-tray.active {
    background: rgba(74, 158, 255, 0.15);
}

.system-tray.active svg {
    stroke: var(--accent, #4a9eff);
}

.system-tray svg {
    width: 18px;
    height: 18px;
    stroke: var(--text-secondary);
    stroke-width: 1.5;
    fill: none;
}

.clock {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

/* Fenêtres d'applications.
   top = safe-area tant que la grille est visible (fond home sous iOS).
   Quand body.chrome-app-active : top:0 (voir plus haut) pour peindre le
   fond de l'app active sous island / heure / batterie. */
.windows-container {
    position: fixed;
    top: var(--boreal-safe-top, env(safe-area-inset-top, 0px));
    left: 0;
    right: 0;
    bottom: var(--taskbar-height);
    pointer-events: none;
    z-index: 1000;
}

.app-window {
    position: absolute;
    background: #000;
    border-radius: 16px 16px 3px 3px;
    color-scheme: dark;
    /* Bordure transparente : reserve 1px sans dessiner. Le liseret visible
       est pose par ::after (au-dessus de l'iframe) : sinon Chromium recouvre
       le cote droit de la bordure du parent.
       --window-rim vit sur :root / [data-theme], jamais sur .app-window :
       le retirer ici au live-switch laisse ::after tomber sur currentColor
       (presque blanc) jusqu'au reload. */
    border: 1px solid transparent;
    box-shadow: 
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 4px 12px rgba(0, 0, 0, 0.4),
        0 8px 24px rgba(0, 0, 0, 0.3),
        0 16px 48px rgba(0, 0, 0, 0.25),
        var(--shadow-glow);
    overflow: hidden;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    min-width: 400px;
    min-height: 300px;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.app-window::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--window-rim, rgba(255, 255, 255, 0.1));
    border-radius: inherit;
    pointer-events: none;
    z-index: 40;
}

.app-window.maximized {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0;
}

.app-window.maximized::after,
.app-window.mobile-fullscreen::after,
.app-window.window-chromeless::after,
.app-window.is-morphing::after,
.app-window.minimizing-to-taskbar::after,
.app-window.restoring-from-taskbar::after {
    content: none;
}

/* Mobile fullscreen mode */
.app-window.mobile-fullscreen {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0;
    min-width: unset !important;
    min-height: unset !important;
    /* Pas de liseré : la fenêtre remplit l'écran (chrome in-app).
       border-color:transparent NE suffit PAS — la largeur 1px inset
       encore l'iframe et laisse une bande noire (fond #000) au-dessus
       de la taskbar sous zoom UI Android. */
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}

.app-window.mobile-fullscreen.focused,
.app-window.mobile-fullscreen.dragging,
.app-window.mobile-fullscreen.preview-highlight {
    box-shadow: none !important;
}

.app-window.mobile-fullscreen .resize-handle {
    display: none !important;
}

/* Mobile : clip le slide des sous-fenêtres (hors écran à droite). */
body.mode-mobile .windows-container,
body.is-mobile .windows-container {
    overflow: hidden;
}

/* Pendant le pivot d'une carte chromeless, le rectangle tourne hors de
   son cadre. Le clip mobile du conteneur couperait le haut et le bas. */
body.mode-mobile .windows-container:has(.window-chromeless.is-card-turning),
body.is-mobile .windows-container:has(.window-chromeless.is-card-turning) {
    overflow: visible;
}

/* Sous-fenêtre mobile : pas de pop scale (windowOpen). Le slide
   utilise `left` (pas transform) : windowOpen et translateZ(0) du
   .app-window écrasaient le translate, donc aucune animation
   d'ouverture n'était visible. */
.app-window.sub-window.mobile-fullscreen {
    animation: none;
}

.app-window.sub-window.mobile-fullscreen.sub-window-slide {
    transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.app-window.sub-window.mobile-fullscreen.sub-window-off {
    left: 100% !important;
    pointer-events: none;
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.45) !important;
}

.app-window.sub-window.mobile-fullscreen.sub-window-on {
    left: 0 !important;
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.45) !important;
}

.app-window.sub-window.mobile-fullscreen:not(.sub-window-slide):not(.sub-window-off) {
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .app-window.sub-window.mobile-fullscreen.sub-window-slide {
        transition: none;
    }
}

/* Après le slide seulement (parent déjà masqué) : fond opaque
   derrière le calque le temps que le contenu soit peint. */
.windows-container.is-sub-covering {
    background: var(--bg-primary, #0a0a0f);
}

/* Clip seulement : l'iframe doit rester visibility:visible pour
   que le WebView exécute JS/fetch. Le calque opaque couvre le scroll. */
.app-window.sub-window-covered,
.app-window.sub-window-covered .window-content {
    overflow: hidden !important;
}

/* Calque spinner : enfant de la fenêtre qui slide (pas un frère
   du container). inset 0 = même boîte que le panneau, sans
   resync left/height. Le point du spin est figé en px au montage. */
.app-window > .window-sub-loader {
    position: absolute;
    inset: 0;
    z-index: 2147483000;
    overflow: hidden;
    background: var(--bg-primary, #0a0a0f);
    pointer-events: auto;
    touch-action: none;
}

.app-window > .window-sub-loader .ux-app-loader-spinner {
    position: absolute;
    width: 48px;
    height: 48px;
}

body.mode-mobile .app-window.mobile-fullscreen .window-content iframe {
    touch-action: pan-y;
}

.window-header {
    height: 44px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    padding: 0 12px;
    cursor: grab;
    flex-shrink: 0;
    /* Tactile : laisser les pointermove au drag de fenêtre au lieu du
       défilement natif du navigateur. */
    touch-action: none;
}

.window-header:active {
    cursor: grabbing;
}

/* Anti-clignotement en BUREAU ÉTENDU (Boréal/Wayland-Weston) — correctif racine.
   Sur plusieurs écrans, la surface unique du navigateur (ex. 7040×1440) chevauche
   plusieurs sorties. Weston recompose en GL par sortie avec un repaint PARTIEL
   (EGL_EXT_buffer_age) : tant que le navigateur PRÉSENTE une nouvelle image à chaque
   vsync (60 fps), la sortie qui ne reçoit AUCUN dégât frais — typiquement le grand
   écran, alors que les animations décoratives vivent côté écran principal — affiche
   par intermittence d'anciens buffers au scan-out → « flash régulier ». Mesuré sur
   1.67 : au repos, les anneaux du bureau + l'aurore de l'assistant maintenaient le
   navigateur à 60 fps en continu ; une fois ces boucles arrêtées, la présentation
   tombe à ~0 fps et le flash disparaît. Le correctif arrête donc d'animer EN BOUCLE
   les éléments purement décoratifs sur un bureau multi-écran (les transitions
   ponctuelles d'ouverture/fermeture, qui ne présentent que brièvement, restent
   intactes). Limité à `boreal-multiscreen` pour l'assistant flottant : les
   anneaux bureau et badges BÊTA sont désormais gérés globalement (anneaux =
   10× au démarrage seulement ; badges = statiques). */
body.boreal-multiscreen .desktop-pulse-overlay .pulse-ring,
body.boreal-multiscreen .app-assistant-fab,
body.boreal-multiscreen .app-assistant-fab::before,
body.boreal-multiscreen .app-assistant-fab-aurora,
body.boreal-multiscreen .app-assistant-fab-aurora::before,
body.boreal-multiscreen .app-assistant-fab-aurora::after {
    animation: none !important;
}

.window-title {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.window-title-icon {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
}
.window-title-icon svg {
    width: 12px;
    height: 12px;
    color: #ffffff;
}
.window-title-icon svg[fill="none"],
.window-title-icon svg.svg-stroke {
    stroke: white;
    stroke-width: 1.5;
    fill: none;
}
.window-title-icon svg[fill="currentColor"],
.window-title-icon svg[fill="currentColor"] *,
.window-title-icon svg.svg-fill,
.window-title-icon svg.svg-fill * {
    fill: white;
    stroke: none;
}

.window-title-text {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    /* Règle UX globale : un titre de fenêtre tient sur une seule ligne,
       tronqué avec ellipse quel que soit le titre fourni par l'app. */
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.window-title-seq-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #f43f5e;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.window-controls {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.window-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    /* Survol = liseret ; clic = presse (variables UX). */
    transition: background 0.15s ease, var(--ux-hover-rim-transition, box-shadow 0.2s ease, filter 0.2s ease, transform 0.2s ease);
}

.window-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

.window-btn.close:hover {
    background: #ef4444;
}

.window-btn svg {
    width: 14px;
    height: 14px;
    stroke: var(--text-secondary);
    stroke-width: 2;
    fill: none;
}

.window-btn:hover svg {
    stroke: white;
}

.window-content {
    position: relative;
}

/* ============================================================================
   FENETRE SANS CHROME (chromeless)
   ----------------------------------------------------------------------------
   Sous-fenetre qui masque entierement le titre/controles OS. L'app fournit
   ses propres boutons (fermer, etc.) dans le contenu iframe. La fenetre reste
   redimensionnable via les handles invisibles aux bords. Utilisee pour des
   experiences "carte" premium (ex: fiches-pedagogiques).
   ============================================================================ */
.app-window.window-chromeless {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 9px;
    overflow: visible;
    /* Le .app-window de base a transform:translateZ(0), overflow:hidden
       et backface-visibility:hidden. Ce trio aplatit le 3D des enfants
       et coupe tout ce qui sort du rectangle. Le pivot est sur
       .window-content (carte + ombre) ; la perspective reste ici. */
    transform: none;
    backface-visibility: visible;
    perspective: 2000px;
    perspective-origin: center center;
}

.app-window.window-chromeless .window-header {
    display: none !important;
}

.app-window.window-chromeless .window-content {
    background: transparent;
    border-radius: 9px;
    overflow: hidden;
    transform: rotateY(0deg);
    transform-origin: center center;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 16px 50px rgba(0, 0, 0, 0.55),
        0 4px 16px rgba(0, 0, 0, 0.45);
}

.app-window.window-chromeless.is-card-flipped .window-content {
    transform: rotateY(180deg);
}

.app-window.window-chromeless .window-content iframe {
    background: transparent;
    /* Scheme sombre force, y compris en theme OS clair. Un scheme clair
       (ou herite puis divergent du document) peint un canevas blanc opaque,
       visible autour de la carte pendant le pivot 3D. Doit rester aligne
       avec html/body de fiches-pedagogiques/window.css (color-scheme: dark). */
    color-scheme: dark;
}

.app-window.window-chromeless.focused .window-content {
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.65),
        0 6px 22px rgba(0, 0, 0, 0.5);
}

/* Annule l'anneau bleu de focus sur les fenetres chromeless : la carte
   est sa propre identite visuelle, on ne veut aucun "contour" OS autour. */
.app-window.window-chromeless,
.app-window.window-chromeless.focused {
    box-shadow: none !important;
    outline: none !important;
}
[data-theme="light"] .app-window.window-chromeless.focused {
    box-shadow: none !important;
}

.app-window.window-chromeless.is-card-turning .window-content,
.app-window.window-chromeless.is-card-turning .window-content iframe,
[data-theme="light"] .app-window.window-chromeless.is-card-turning .window-content,
[data-theme="light"] .app-window.window-chromeless.is-card-turning .window-content iframe {
    background: transparent !important;
}

[data-theme="light"] .app-window.window-chromeless .window-content {
    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.18),
        0 3px 12px rgba(0, 0, 0, 0.14);
}

/* ============================================================================
   OS INFO BAR  -  Toasts flottants ancres dans un coin d'une fenetre OS
   ----------------------------------------------------------------------------
   Rendus par os/infobar.js quand une app en iframe appelle UX.infoBar(...).
   Le stack est un OVERLAY en position absolute dans .app-window, ancre dans
   un coin (bottom-right par defaut). Les toasts ne sont JAMAIS pleine
   largeur et ne redimensionnent jamais la fenetre ni le contenu de l'app.
   Design aligne sur .ux-infobar de /ux/ux-components.css.
   ============================================================================ */
.os-infobar-stack {
    position: absolute;
    z-index: 60;
    display: flex;
    gap: 10px;
    max-width: min(420px, calc(100% - 32px));
    background: transparent;
    pointer-events: none;
}

.os-infobar-stack--bottom-right  { right: 16px; bottom: 16px; flex-direction: column-reverse; align-items: flex-end; }
.os-infobar-stack--bottom-left   { left: 16px;  bottom: 16px; flex-direction: column-reverse; align-items: flex-start; }
.os-infobar-stack--top-right     { right: 16px; top: 52px;    flex-direction: column;         align-items: flex-end; }
.os-infobar-stack--top-left      { left: 16px;  top: 52px;    flex-direction: column;         align-items: flex-start; }
.os-infobar-stack--bottom-center { left: 50%; transform: translateX(-50%); bottom: 16px; flex-direction: column-reverse; align-items: center; }
.os-infobar-stack--top-center    { left: 50%; transform: translateX(-50%); top: 52px;    flex-direction: column;         align-items: center; }

.os-infobar {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 420px;
    padding: 12px 14px;
    background: var(--bg-secondary, #161b22);
    color: var(--text-primary, #f0f0f5);
    font-size: 13px;
    line-height: 1.4;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    border-left: 3px solid var(--ux-info, #3b82f6);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
    pointer-events: auto;
    opacity: 0;
    transition: opacity .2s ease, transform .24s cubic-bezier(.16, 1, .3, 1);
    will-change: transform, opacity;
    user-select: none;
}

/* Sens d'entree selon le coin d'ancrage (glissement depuis le bord) */
.os-infobar-stack--bottom-right .os-infobar,
.os-infobar-stack--top-right .os-infobar    { transform: translateX(24px); }
.os-infobar-stack--bottom-left .os-infobar,
.os-infobar-stack--top-left .os-infobar     { transform: translateX(-24px); }
.os-infobar-stack--top-center .os-infobar   { transform: translateY(-24px); }
.os-infobar-stack--bottom-center .os-infobar{ transform: translateY(24px); }

.os-infobar--visible {
    opacity: 1;
    transform: translate(0, 0);
}

.os-infobar--leaving {
    opacity: 0;
}

.os-infobar__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--ux-info, #3b82f6);
}

.os-infobar__message {
    flex: 1;
    min-width: 0;
    word-wrap: break-word;
}

.os-infobar__actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.os-infobar__action {
    background: transparent;
    color: inherit;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.os-infobar__action:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.32);
}

.os-infobar__action--primary {
    background: var(--accent-purple, #8b5cf6);
    border-color: var(--accent-purple, #8b5cf6);
    color: #fff;
}
.os-infobar__action--primary:hover {
    background: #7c4ef0;
    border-color: #7c4ef0;
}

.os-infobar__action--danger {
    background: var(--ux-error, #ef4444);
    border-color: var(--ux-error, #ef4444);
    color: #fff;
}
.os-infobar__action--danger:hover {
    background: #dc2626;
    border-color: #dc2626;
}

.os-infobar__close {
    background: transparent;
    color: var(--text-secondary, #a0a0aa);
    border: none;
    /* Cible tactile >= 44px (mobile) ; l'icone reste visuelle petite. */
    width: 44px;
    height: 44px;
    margin: -10px -10px -10px 0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s ease, color .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.os-infobar__close svg {
    width: 14px;
    height: 14px;
}
.os-infobar__close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary, #f0f0f5);
}

.os-infobar--success { border-left-color: var(--ux-success, #10b981); }
.os-infobar--success .os-infobar__icon { color: var(--ux-success, #10b981); }
.os-infobar--error { border-left-color: var(--ux-error, #ef4444); }
.os-infobar--error .os-infobar__icon { color: var(--ux-error, #ef4444); }
.os-infobar--info { border-left-color: var(--ux-info, #3b82f6); }
.os-infobar--info .os-infobar__icon { color: var(--ux-info, #3b82f6); }
.os-infobar--warning { border-left-color: var(--ux-warning, #f59e0b); }
.os-infobar--warning .os-infobar__icon { color: var(--ux-warning, #f59e0b); }

/* ============================================================================
   TOASTS SYSTÈME DU BUREAU (Boréal OS)
   ----------------------------------------------------------------------------
   Remplacent l'API native Notification sous le kiosque Weston (qui affiche
   autrement une surface plein écran). Ancrés comme le panneau Notifications :
   bas-droite, juste au-dessus de la barre des tâches.
   ============================================================================ */
.os-sys-toast-stack {
    position: fixed;
    bottom: calc(var(--taskbar-height, 56px) + 12px);
    right: 16px;
    z-index: 10050;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 10px;
    max-width: min(380px, calc(100vw - 32px));
    pointer-events: none;
    background: transparent;
}

.os-sys-toast-stack .os-sys-toast {
    width: 100%;
    max-width: 380px;
    pointer-events: auto;
    transform: translateX(24px);
}

.os-sys-toast-stack .os-sys-toast.os-infobar--visible {
    transform: translate(0, 0);
}

.os-sys-toast__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.os-sys-toast__title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-primary, #f0f0f5);
    word-wrap: break-word;
}

.os-sys-toast__message {
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-secondary, #8888a0);
    word-wrap: break-word;
}

.os-sys-toast--clickable {
    cursor: pointer;
}

.os-sys-toast--clickable:hover {
    border-color: rgba(74, 158, 255, 0.35);
}

/* ==========================================
   BADGE BETA - Fenêtres et Taskbar
   ========================================== */

/* Badge BETA dans la barre de titre des fenêtres */
.window-beta-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #fcd34d;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.4), rgba(217, 119, 6, 0.4));
    border: 1px solid rgba(245, 158, 11, 0.5);
    border-radius: 12px;
    margin-right: 6px;
    backdrop-filter: blur(10px);
}

/* Badge BETA dans la taskbar */
.taskbar-beta-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    padding: 1px 4px;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #fcd34d;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.8), rgba(217, 119, 6, 0.8));
    border: 1px solid rgba(245, 158, 11, 0.6);
    border-radius: 3px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    z-index: 10;
    pointer-events: none;
}


/* Affichage des dimensions pendant le redimensionnement/déplacement */
.window-resize-dims {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) scale(0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    height: 24px;
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    color: #4a9eff;
    background: linear-gradient(135deg, rgba(74, 158, 255, 0.15) 0%, rgba(74, 158, 255, 0.05) 100%);
    border: 1px solid rgba(74, 158, 255, 0.3);
    border-radius: 6px;
    white-space: nowrap;
    letter-spacing: 0.5px;
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}

/* Animation d'entrée des dimensions */
.window-controls.resizing .window-resize-dims,
.window-controls.dragging .window-resize-dims {
    display: flex;
    opacity: 1;
    animation: dims-slide-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes dims-slide-in {
    0% {
        opacity: 0;
        transform: translateY(-50%) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
}

/* Cacher les boutons ET le badge BETA pendant le redimensionnement/déplacement avec animation */
.window-controls.resizing .window-btn,
.window-controls.resizing .window-beta-badge,
.window-controls.dragging .window-btn,
.window-controls.dragging .window-beta-badge {
    animation: btns-fade-out 0.25s ease forwards;
    pointer-events: none;
}

@keyframes btns-fade-out {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.7);
        width: 0;
        padding: 0;
        margin: 0;
        overflow: hidden;
    }
}

/* Animation de retour des boutons ET du badge BETA (seulement après avoir été en mode resizing/dragging) */
.window-controls.was-resizing .window-btn,
.window-controls.was-resizing .window-beta-badge,
.window-controls.was-dragging .window-btn,
.window-controls.was-dragging .window-beta-badge {
    animation: btns-fade-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes btns-fade-in {
    0% {
        opacity: 0;
        transform: scale(0.7);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Animation de sortie des dimensions */
.window-controls.was-resizing:not(.resizing) .window-resize-dims,
.window-controls.was-dragging:not(.dragging) .window-resize-dims {
    animation: dims-slide-out 0.2s ease forwards;
}

@keyframes dims-slide-out {
    0% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-50%) scale(0.8);
    }
}

.window-content {
    flex: 1;
    overflow: hidden;
    background: var(--bg-primary, #0a0a0f);
}

.window-content iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: var(--bg-primary, #0a0a0f);
    /* Aligne le canevas UA sur le theme OS. Un scheme clair herite puis
       divergent du document peint un liseret / canevas blanc autour de
       l'iframe (deja vu sur les fenetres chromeless). */
    color-scheme: dark;
}

/* ============================================================
   CALQUE COQUILLE (ouverture d'app)

   Rendu instantané pendant le chargement de l'iframe : fond de
   l'app, découpage en panneaux mémorisé, spin centré. Le chrome
   réel (titre, boutons, forme, dimensions) reste visible.
   Piloté par os/app-window-anim.js.
   ============================================================ */
.app-window.window-has-shell:not(.window-chromeless) {
    background: var(--window-shell-bg, var(--bg-primary, #0a0a0f));
}

.app-window.window-shell-active .window-content {
    position: relative;
}

.window-content > .window-shell {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--window-shell-bg, var(--bg-primary, #0a0a0f));
    opacity: 1;
    transition: opacity 0.24s ease;
    pointer-events: none;
}

.window-content > .window-shell.is-hiding {
    opacity: 0;
}

.window-shell .window-shell-side {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--window-shell-side-w, 0px);
    background: var(--window-shell-side-bg, rgba(255, 255, 255, 0.03));
}

.window-shell.window-shell-side-left .window-shell-side {
    left: 0;
    border-right: 1px solid var(--border-color);
}

.window-shell.window-shell-side-right .window-shell-side {
    right: 0;
    border-left: 1px solid var(--border-color);
}

.window-shell .ux-app-loader-spinner {
    position: relative;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
}

/* Overlay de capture de focus : bloque les clics iframe quand la fenêtre n'a pas le focus */
.window-focus-overlay {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 1;
    background: transparent;
    cursor: default;
}

.app-window:not(.focused) .window-focus-overlay {
    display: block;
}

/* Resize handles */
.resize-handle {
    position: absolute;
    z-index: 10;
    /* Tactile : le redimensionnement doit recevoir les pointermove. */
    touch-action: none;
}

.resize-handle.n { top: 0; left: 10px; right: 10px; height: 4px; cursor: n-resize; }
.resize-handle.s { bottom: 0; left: 10px; right: 10px; height: 4px; cursor: s-resize; }
.resize-handle.e { right: 0; top: 10px; bottom: 10px; width: 4px; cursor: e-resize; }
.resize-handle.w { left: 0; top: 10px; bottom: 10px; width: 4px; cursor: w-resize; }
.resize-handle.ne { top: 0; right: 0; width: 10px; height: 10px; cursor: ne-resize; }
.resize-handle.nw { top: 0; left: 0; width: 10px; height: 10px; cursor: nw-resize; }
.resize-handle.se { bottom: 0; right: 0; width: 10px; height: 10px; cursor: se-resize; }
.resize-handle.sw { bottom: 0; left: 0; width: 10px; height: 10px; cursor: sw-resize; }

/* Animations */
@keyframes windowOpen {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.app-window {
    animation: windowOpen 0.2s ease-out;
}

/* Morphing icône ↔ fenêtre */
.app-window.is-morphing,
.app-window.minimizing-to-taskbar,
.app-window.restoring-from-taskbar {
    pointer-events: none !important;
    z-index: 100000 !important;
    overflow: hidden;
    box-shadow: none !important;
    outline: none !important;
}

.app-window.is-morphing.focused,
.app-window.minimizing-to-taskbar.focused,
.app-window.restoring-from-taskbar.focused,
.app-window.is-morphing.dragging,
.app-window.minimizing-to-taskbar.dragging,
.app-window.restoring-from-taskbar.dragging {
    box-shadow: none !important;
}

.os-window-hero {
    position: fixed;
    z-index: 200000;
    box-sizing: border-box;
    overflow: hidden;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    will-change: left, top, width, height, border-radius, opacity, background-color;
}

.os-window-hero-glyph {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    transition: opacity 0.18s ease;
}

.os-window-hero-glyph.is-fading {
    opacity: 0;
}

.os-window-hero-glyph svg {
    width: 100%;
    height: 100%;
}

.os-window-hero-glyph svg[fill="none"] {
    stroke: #fff;
    stroke-width: 2;
    fill: none;
}

.os-window-hero-glyph svg[fill="currentColor"] {
    fill: #fff;
}

.os-window-hero-spin {
    position: absolute;
}

.os-morph-origin-hidden {
    opacity: 0 !important;
}

body.mode-productivity .os-window-hero {
    display: none !important;
}

@keyframes taskbarMinimizePulse {
    0% { transform: scale(1); }
    40% { transform: scale(1.18); }
    100% { transform: scale(1); }
}

.taskbar-app.taskbar-minimize-pulse {
    animation: taskbarMinimizePulse 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-reduced-motion: reduce) {
    .app-window.is-morphing,
    .app-window.minimizing-to-taskbar,
    .app-window.restoring-from-taskbar {
        transition: none !important;
    }
    .os-window-hero {
        transition: none !important;
    }
    .taskbar-app.taskbar-minimize-pulse {
        animation: none;
    }
}

/* Désactiver l'animation d'ouverture */
.app-window.no-open-animation {
    animation: none;
}

/* Croissance depuis le point d'interaction ; fermeture vers le centre
   (os/app-window-anim.js) — pas de keyframe : l'origine d'ouverture varie. */
.app-window.window-anim {
    pointer-events: none;
    will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
    .app-window.window-anim {
        transition: none !important;
    }
}

/* Fenêtre active (focus) - liseré bleu */
.app-window.focused {
    box-shadow: 
        0 0 0 2px rgba(74, 158, 255, 0.7),
        0 0 12px rgba(74, 158, 255, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 4px 12px rgba(0, 0, 0, 0.4),
        0 8px 24px rgba(0, 0, 0, 0.3),
        0 16px 48px rgba(0, 0, 0, 0.25);
}

/* Fenêtre en cours de déplacement - liseré épais bleu */
.app-window.dragging {
    box-shadow: 
        0 0 0 3px rgba(74, 158, 255, 0.9),
        0 0 20px rgba(74, 158, 255, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 8px 32px rgba(0, 0, 0, 0.5),
        0 16px 64px rgba(0, 0, 0, 0.4);
    transition: box-shadow 0.15s ease;
}

/* Fenêtre maximisée : aucun liseré de sélection (sinon il déborde sur l'écran voisin) */
.app-window.maximized,
.app-window.maximized.focused,
.app-window.maximized.dragging,
.app-window.maximized.preview-highlight {
    box-shadow: none;
}

/* Fenêtre en preview (hover dans menu multi-fenêtres) - 50% moins intense que focus */
.app-window.preview-highlight {
    box-shadow: 
        0 0 0 2px rgba(74, 158, 255, 0.35),
        0 0 8px rgba(74, 158, 255, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 4px 12px rgba(0, 0, 0, 0.4),
        0 8px 24px rgba(0, 0, 0, 0.3);
}

/* Logo mio.land */
.sys-logo {
    position: absolute;
    bottom: 80px;
    right: 32px;
    opacity: 0.15;
    pointer-events: none;
}

.sys-logo-text {
    font-size: 48px;
    font-weight: 700;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Scrollbar plateforme : /os/scrollbar.css (capsule, rail invisible).
   Ne pas redefinir ::-webkit-scrollbar ici. */

/* Android WebView : artwork MediaPlayer (play gris) tant qu'aucune frame —
   classe posée par os/theme-listener.js. opacity est ignoré par la
   SurfaceView native → visibility. */
html.boreal-android video.boreal-android-video-pending {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ===== Notifications ===== */
/* Android : shade système natif — panneau / cloche taskbar masqués. */
body.android-native-notifications #notification-btn,
body.android-native-notifications #notification-panel,
body.android-native-notifications #sidebar-notification-btn {
    display: none !important;
}

.notification-btn {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    /* currentColor → stroke SVG (fiable sur WebView Android, contrairement
       a stroke: var(--x) seul sans attribut presentation sur le <svg>). */
    color: var(--text-secondary, #8888a0);
    transition: background 0.2s ease, color 0.2s ease, var(--ux-hover-rim-transition, box-shadow 0.2s ease, filter 0.2s ease, transform 0.2s ease);
}

.notification-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary, #f0f0f5);
}

.notification-btn.active {
    background: rgba(74, 158, 255, 0.15);
    color: var(--accent, #4a9eff);
}

.notification-btn svg {
    width: 20px;
    height: 20px;
    /* 2px minimum : un trait a 1.5px disparait souvent sur Android
       (arrondi sous-pixel / densite ecran). */
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    flex-shrink: 0;
    overflow: visible;
    transition: stroke 0.2s ease, color 0.2s ease;
}

.notification-btn svg.svg-stroke,
.notification-btn svg[fill="none"] {
    stroke: currentColor;
    fill: none;
}

.notification-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #ef4444;
    color: white;
    font-size: 10px;
    font-weight: 600;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.2s ease;
}

.notification-badge.visible {
    opacity: 1;
    transform: scale(1);
}

/* Panel de notifications */
.notification-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: 380px;
    /* Desktop : +25 % vs plafond precedent (560 / 70 %). */
    max-height: min(700px, calc((100vh - var(--taskbar-height, 56px)) * 0.875));
    background: var(--bg-secondary);
    border-radius: 0;
    border: 1px solid var(--border-color);
    border-bottom: none;
    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 : meme logique de marge / coins que le sysmenu. */
body:not(.mode-mobile):not(.silo-locked) .notification-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)));
    max-height: min(700px, calc((100vh - var(--taskbar-height, 56px) - (2 * var(--os-popup-inset))) * 0.875));
    border-bottom: 1px solid var(--border-color);
    border-radius: 12px 12px 0 0;
}

body:not(.mode-mobile):not(.silo-locked) .notification-panel.os-popup-edge-right {
    right: 0;
    border-top-right-radius: 0;
    border-right: none;
}
body:not(.mode-mobile):not(.silo-locked) .notification-panel.os-popup-edge-left {
    left: 0;
    right: auto;
    border-top-left-radius: 0;
    border-left: none;
}
body:not(.mode-mobile):not(.silo-locked) .notification-panel.os-popup-edge-right.os-popup-edge-left {
    border-radius: 0;
    border-bottom: none;
    bottom: calc(var(--taskbar-height, 56px) - 1px);
}

.notification-panel.open,
.notification-panel.os-panel-closing {
    display: flex;
}

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

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

/* Defilement bas → haut. Le masque de #os-taskbar-popup-clip coupe tout
   sous le bord haut de la taskbar : le panneau glisse depuis cette ligne
   (et non depuis le bas de l'ecran). */
@keyframes osTaskbarSlideUp {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes osTaskbarSlideDown {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(100%);
    }
}

/* Alias : anciens appels / caches qui referencent encore le nom hinge. */
@keyframes osTaskbarHingeIn {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes panelOpen {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .notification-panel.open,
    .notification-panel.os-panel-closing,
    .system-panel.open,
    .account-panel.open,
    .auth-panel.open,
    .sysmenu-panel.open,
    .sysmenu-panel.os-panel-closing,
    .boreal-av-panel.open {
        animation: none !important;
    }
}

.notification-panel-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.notification-panel-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.notification-panel-actions {
    display: flex;
    gap: 8px;
}

.notification-action-btn {
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: none;
    color: var(--text-secondary);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    user-select: none;
}

.notification-action-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

/* Option notifications Chrome */
.notification-chrome-setting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: rgba(74, 158, 255, 0.05);
    border-bottom: 1px solid var(--border-color);
}

.notification-chrome-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.notification-chrome-icon {
    width: 20px;
    height: 20px;
    stroke: var(--accent-blue);
    stroke-width: 1.5;
    fill: none;
}

.notification-chrome-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.notification-chrome-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.notification-chrome-status {
    font-size: 11px;
    color: var(--text-secondary);
}

.notification-chrome-status.granted {
    color: #22c55e;
}

.notification-chrome-status.denied {
    color: #ef4444;
}

.notification-chrome-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.notification-chrome-toggle .toggle-label-off,
.notification-chrome-toggle .toggle-label-on {
    font-size: 11px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.notification-chrome-toggle .toggle-label-off {
    color: var(--text-secondary);
}

.notification-chrome-toggle .toggle-label-on {
    color: var(--text-secondary);
}

.notification-chrome-toggle .toggle-switch {
    width: 40px;
    height: 22px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.1);
    position: relative;
    transition: all 0.25s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.notification-chrome-toggle .toggle-knob {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--text-secondary);
    position: absolute;
    top: 2px;
    left: 2px;
    transition: all 0.25s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* État actif */
.notification-chrome-toggle[data-state="active"] .toggle-switch {
    background: rgba(34, 197, 94, 0.3);
    border-color: #22c55e;
}

.notification-chrome-toggle[data-state="active"] .toggle-knob {
    left: 20px;
    background: #22c55e;
}

.notification-chrome-toggle[data-state="active"] .toggle-label-on {
    color: #22c55e;
}

.notification-chrome-toggle[data-state="active"]:hover .toggle-switch {
    background: rgba(34, 197, 94, 0.4);
}

/* État inactif (granted mais désactivé par l'utilisateur) */
.notification-chrome-toggle[data-state="inactive"] .toggle-switch {
    background: rgba(255, 255, 255, 0.08);
}

.notification-chrome-toggle[data-state="inactive"] .toggle-knob {
    left: 2px;
    background: var(--text-secondary);
}

.notification-chrome-toggle[data-state="inactive"] .toggle-label-off {
    color: var(--text-primary);
}

.notification-chrome-toggle[data-state="inactive"]:hover .toggle-switch {
    background: rgba(255, 255, 255, 0.12);
}

/* État default - permission pas encore demandée */
.notification-chrome-toggle[data-state="default"] .toggle-switch {
    background: rgba(74, 158, 255, 0.2);
    border-color: var(--accent-blue);
    animation: pulse-blue 2s infinite;
}

.notification-chrome-toggle[data-state="default"] .toggle-knob {
    background: var(--accent-blue);
}

@keyframes pulse-blue {
    0%, 100% { box-shadow: 0 0 0 0 rgba(74, 158, 255, 0.4); }
    50% { box-shadow: 0 0 0 4px rgba(74, 158, 255, 0); }
}

/* État denied - bloqué par le navigateur */
.notification-chrome-toggle[data-state="denied"] .toggle-switch {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.5);
}

.notification-chrome-toggle[data-state="denied"] .toggle-knob {
    background: #ef4444;
}

.notification-chrome-toggle[data-state="denied"] .toggle-label-off {
    color: #ef4444;
}

.notification-chrome-toggle[data-state="denied"]:hover .toggle-switch {
    background: rgba(239, 68, 68, 0.25);
}

/* État unsupported */
.notification-chrome-toggle[data-state="unsupported"] {
    cursor: default;
    opacity: 0.5;
}

.notification-chrome-toggle[data-state="unsupported"] .toggle-switch {
    background: rgba(255, 255, 255, 0.05);
}

.notification-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.notification-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-secondary);
}

.notification-empty svg {
    width: 48px;
    height: 48px;
    stroke: currentColor;
    stroke-width: 1.5;
    fill: none;
    opacity: 0.5;
    margin-bottom: 12px;
    color: var(--text-secondary, #8888a0);
}

/* Item de notification */
.notification-item {
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    margin-bottom: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

.notification-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.notification-item.clickable {
    cursor: pointer;
}

.notification-item.clickable:hover {
    background: rgba(74, 158, 255, 0.1);
}

.notification-item.unread {
    background: rgba(74, 158, 255, 0.08);
    border-left: 3px solid var(--accent-blue);
}

.notification-item.unread:hover {
    background: rgba(74, 158, 255, 0.12);
}

.notification-item-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 6px;
}

.notification-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--accent-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notification-item-icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    color: #ffffff;
}

.notification-item-content {
    flex: 1;
    min-width: 0;
}

.notification-item-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.notification-item-message {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notification-item-time {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 6px;
}

.notification-item-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.notification-item:hover .notification-item-actions {
    opacity: 1;
}

.notification-item-btn {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.notification-item-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.notification-item-btn.delete:hover {
    background: rgba(239, 68, 68, 0.3);
}

.notification-item-btn svg {
    width: 14px;
    height: 14px;
    stroke: var(--text-secondary);
    stroke-width: 2;
    fill: none;
}

.notification-item-btn:hover svg {
    stroke: white;
}

/* ============================
   OS DIALOG SYSTEM
   ============================ */

/* Variables par défaut pour les dialogues (peuvent être surchargées par l'app) */
.os-dialog {
    --dialog-accent: #4a9eff;
    --dialog-accent-light: #6bb3ff;
    --dialog-accent-dark: #3584e4;
}

/* Overlay sur la fenêtre appelante uniquement */
.os-dialog-app-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 100;
    border-radius: inherit;
    pointer-events: all;
}

/* Fenêtre d'app avec dialogue actif */
.app-window.has-dialog {
    pointer-events: none;
}

.app-window.has-dialog .window-header {
    pointer-events: auto;
}

.app-window.has-dialog .window-content {
    opacity: 0.65;
}

/* Dialogue au niveau OS */
.os-dialog {
    position: fixed;
    min-width: 360px;
    max-width: 90vw;
    max-height: 80vh;
    background: var(--bg-secondary);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 
        0 30px 100px rgba(0, 0, 0, 0.8),
        0 15px 50px rgba(0, 0, 0, 0.6),
        0 5px 20px rgba(0, 0, 0, 0.4),
        0 0 1px rgba(255, 255, 255, 0.1);
    z-index: 5000;
    display: none;
    flex-direction: column;
    overflow: hidden;
    transform: translateZ(0);
}

.os-dialog.active {
    display: flex;
}

.os-dialog-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    cursor: grab;
    user-select: none;
}

.os-dialog-header:active {
    cursor: grabbing;
}

.os-dialog-title {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--dialog-accent-light);
}

.os-dialog-close {
    /*
     * Aligné sur .ux-dialog-close : croix seule au repos, carre au survol
     * avec marges egales 8px (haut / bas / droite), hit-zone maximale.
     */
    position: relative;
    align-self: stretch;
    width: 52px;
    min-width: 52px;
    height: auto;
    min-height: 0;
    padding: 0;
    margin: -12px -16px -12px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 0;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
    transition: none;
}

.os-dialog-close::before {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    bottom: 8px;
    aspect-ratio: 1 / 1;
    width: auto;
    height: auto;
    border-radius: 8px;
    background: transparent;
    pointer-events: none;
    transition: background 0.15s ease, var(--ux-hover-rim-transition, box-shadow 0.2s ease);
    z-index: 0;
}

@media (hover: hover) {
    .os-dialog-close:hover:not(:active):not(.ux-btn-pressed)::before {
        background: rgba(239, 68, 68, 0.2);
        box-shadow: var(--ux-hover-rim-shadow, 0 0 0 1px rgba(255, 255, 255, 0.5));
    }
}

.os-dialog-close:active::before,
.os-dialog-close.ux-btn-pressed::before {
    background: rgba(239, 68, 68, 0.28);
    box-shadow: var(--ux-btn-press-shadow, inset 0 2px 4px rgba(0, 0, 0, 0.35));
    filter: var(--ux-btn-press-filter, brightness(0.65));
}

.os-dialog-close svg {
    position: relative;
    z-index: 1;
    width: 16px;
    height: 16px;
    stroke: var(--text-secondary);
    stroke-width: 2;
    fill: none;
    pointer-events: none;
    transition: stroke 0.15s ease, transform 0.15s ease;
}

@media (hover: hover) {
    .os-dialog-close:hover svg {
        stroke: #ef4444;
    }
}

.os-dialog-close:active svg,
.os-dialog-close.ux-btn-pressed svg {
    stroke: #ef4444;
    transform: var(--ux-btn-press-offset, translate(1px, 1px));
}

.os-dialog-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    color: var(--text-primary);
}

.os-dialog-message {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 16px;
}

.os-dialog-form-group {
    margin-bottom: 16px;
}

.os-dialog-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.os-dialog-input {
    width: 100%;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
    transition: all 0.2s ease;
}

.os-dialog-input:focus {
    outline: none;
    border-color: var(--dialog-accent);
    background: color-mix(in srgb, var(--dialog-accent) 5%, transparent);
}

.os-dialog-input::placeholder {
    color: var(--text-secondary);
}

.os-dialog-select-list {
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
}

.os-dialog-select-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.15s ease;
    border-bottom: 1px solid var(--border-color);
}

.os-dialog-select-item:last-child {
    border-bottom: none;
}

.os-dialog-select-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.os-dialog-select-item.selected {
    background: color-mix(in srgb, var(--dialog-accent) 15%, transparent);
}

.os-dialog-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.os-dialog-select-item.selected .os-dialog-checkbox {
    background: var(--dialog-accent);
    border-color: var(--dialog-accent);
}

.os-dialog-checkbox svg {
    width: 12px;
    height: 12px;
    stroke: white;
    stroke-width: 3;
    fill: none;
    opacity: 0;
}

.os-dialog-select-item.selected .os-dialog-checkbox svg {
    opacity: 1;
}

.os-dialog-select-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--dialog-accent) 15%, var(--bg-tertiary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12px;
    color: var(--dialog-accent-light);
    flex-shrink: 0;
}

.os-dialog-select-info {
    flex: 1;
    min-width: 0;
}

.os-dialog-select-name {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.os-dialog-select-sub {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.os-dialog-empty {
    padding: 30px 20px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 14px;
}

.os-dialog-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 12px 20px 16px;
}

.os-dialog-footer:empty {
    display: none;
    padding: 0;
}

.os-dialog-btn {
    padding: 10px 20px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.os-dialog-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.os-dialog-btn.primary {
    background: linear-gradient(135deg, var(--dialog-accent), var(--dialog-accent-dark));
    border: none;
    color: white;
}

.os-dialog-btn.primary:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.os-dialog-btn.danger {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
}

.os-dialog-btn.danger:hover {
    background: rgba(239, 68, 68, 0.3);
}

/* Dialogues UX remontés au niveau OS depuis les iframes (sys_ux_dialog) */
.ux-dialog-overlay[data-ux-dialog-id] {
    z-index: 99998;
}

.os-no-credits-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: os-noc-fadein 0.2s ease;
}

@keyframes os-noc-fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ============================
   NETWORK STATUS ICON
   ============================ */

.system-tray .network-icon {
    transition: stroke 0.2s ease, filter 0.2s ease;
}

.system-tray .network-icon.ping-success {
    stroke: #22c55e !important;
    filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.6));
}

.system-tray .network-icon-offline {
    stroke: #ef4444 !important;
}

/* ============================
   INDICATEUR BATTERIE (tray)
   ============================ */

.boreal-battery {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-right: 6px;
    color: var(--text-secondary, #a0aec0);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    user-select: none;
}

.boreal-battery .boreal-battery-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
}

.boreal-battery .batt-body { stroke: currentColor; }
.boreal-battery .batt-level,
.boreal-battery .batt-cap { fill: currentColor; }

.boreal-battery-pct {
    font-weight: 600;
    font-size: 9px;
    margin-top: -2px;
}

/* En charge : teinte d'accent + éclair blanc déjà géré inline */
.boreal-battery.boreal-battery-charging {
    color: var(--accent, #4a9eff);
}

/* Batterie faible (et pas en charge) : rouge */
.boreal-battery.boreal-battery-low {
    color: #ef4444;
}

/* ============================
   SYSTEM PANEL (Refresh/Fullscreen)
   ============================ */

.system-panel {
    position: fixed;
    bottom: var(--taskbar-height, 56px);
    right: 16px;
    width: 300px;
    background: var(--bg-secondary);
    border-radius: 0;
    border: 1px solid var(--border-color);
    border-bottom: none;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: none;
    flex-direction: column;
    overflow: hidden;
    transform-origin: bottom center;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.system-panel.open {
    display: flex;
    animation: osTaskbarSlideUp 0.28s cubic-bezier(0.2, 0, 0, 1) both;
}

.system-panel-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.system-panel-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.system-panel-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: calc(100vh - var(--taskbar-height) - 120px);
    overflow-y: auto;
}

.system-panel-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: none;
    cursor: pointer;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    user-select: none;
    transition: background 0.15s ease, var(--ux-hover-rim-transition, box-shadow 0.2s ease, filter 0.2s ease, transform 0.2s ease);
    text-align: left;
}

.system-panel-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.system-panel-btn svg {
    width: 18px;
    height: 18px;
    stroke: var(--accent-blue);
    stroke-width: 1.5;
    fill: none;
    flex-shrink: 0;
}

.system-panel-footer {
    padding: 10px 16px;
    border-top: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.2);
}

.system-panel-status {
    display: flex;
    align-items: center;
    justify-content: center;
}

.connection-status {
    font-size: 11px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.connection-status::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
}

.connection-status.connected::before {
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}

.connection-status.connected {
    color: #22c55e;
}

.connection-status.disconnected {
    color: #ef4444;
}

.connection-status.disconnected::before {
    background: #ef4444;
}

/* ============================================================
   Indicateur de session controlee (app Controle)
   ============================================================ */

.system-tray-control-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.7);
    animation: sys-control-pulse 1.6s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes sys-control-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.85); }
}

.system-tray.has-control-session {
    box-shadow: inset 0 -2px 0 #ef4444;
}

.sys-control-row {
    margin-top: 10px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.10);
    border: 1px solid rgba(239, 68, 68, 0.28);
    font-size: 12px;
    color: #fecaca;
    cursor: pointer;
    user-select: none;
    transition: background 0.18s ease, border-color 0.18s ease;
}
.sys-control-row:hover {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.45);
}
.sys-control-row strong { color: #fff; font-weight: 600; }
.sys-control-row-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.7);
    flex-shrink: 0;
    animation: sys-control-pulse 1.6s ease-in-out infinite;
}
.sys-control-row-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sys-control-row-chevron {
    width: 14px; height: 14px;
    color: #fecaca;
    flex-shrink: 0;
}
[data-theme="light"] .sys-control-row {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.22);
    color: #991b1b;
}
[data-theme="light"] .sys-control-row strong { color: #7f1d1d; }
[data-theme="light"] .sys-control-row-chevron { color: #991b1b; }


/* System Panel - Options avec toggle */
.system-panel-separator {
    height: 1px;
    background: var(--border-color);
    margin: 6px 0;
}

.system-panel-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    transition: background 0.15s ease;
}

.system-panel-option:hover {
    background: rgba(255, 255, 255, 0.06);
}

.system-panel-option-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.system-panel-option-icon {
    width: 18px;
    height: 18px;
    stroke: var(--accent-blue);
    stroke-width: 1.5;
    fill: none;
    flex-shrink: 0;
}

.system-panel-option-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.system-panel-option-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.system-panel-option-status {
    font-size: 10px;
    color: var(--text-secondary);
}

.system-panel-option-status.active {
    color: #22c55e;
}

/* System Panel Toggle Switch */
.system-panel-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}

.system-panel-toggle .toggle-switch {
    width: 36px;
    height: 20px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    position: relative;
    transition: all 0.2s ease;
}

.system-panel-toggle .toggle-knob {
    position: absolute;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.system-panel-toggle .toggle-label-off,
.system-panel-toggle .toggle-label-on {
    display: none;
    transition: opacity 0.2s;
}

.system-panel-toggle[data-state="inactive"] .toggle-label-off {
    opacity: 1;
    color: var(--text-secondary);
}

.system-panel-toggle[data-state="active"] .toggle-label-on {
    opacity: 1;
    color: #22c55e;
}

.system-panel-toggle[data-state="active"] .toggle-switch {
    background: #22c55e;
}

.system-panel-toggle[data-state="active"] .toggle-knob {
    transform: translateX(16px);
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}

/* Voyant d'extension dans le header */
.extension-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: transparent;
}

.extension-indicator:hover {
    background: rgba(255, 255, 255, 0.1);
}

.extension-indicator .extension-icon {
    width: 16px;
    height: 16px;
    stroke-width: 1.5;
    fill: none;
}

.extension-indicator .extension-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid var(--bg-secondary);
}

/* État inactif (rouge) */
.extension-indicator.inactive .extension-icon {
    stroke: #ef4444;
}

.extension-indicator.inactive .extension-dot {
    background: #ef4444;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
}

/* État actif (vert) */
.extension-indicator.active .extension-icon {
    stroke: #22c55e;
}

.extension-indicator.active .extension-dot {
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
}

/* ============================
   ACCOUNT PANEL (Popup Identité)
   ============================ */

.account-btn {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    transition: background 0.2s ease, var(--ux-hover-rim-transition, box-shadow 0.2s ease, filter 0.2s ease, transform 0.2s ease);
}

.account-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

.account-btn.active {
    background: rgba(74, 158, 255, 0.15);
}

.account-btn.active svg {
    stroke: var(--accent, #4a9eff);
}

.account-btn svg {
    width: 20px;
    height: 20px;
    stroke: var(--text-secondary);
    stroke-width: 1.5;
    fill: none;
    transition: stroke 0.2s ease;
}

.account-btn:hover svg {
    stroke: var(--text-primary);
}

.account-badge {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 16px;
    height: 16px;
    background: #ef4444;
    color: white;
    font-size: 10px;
    font-weight: 600;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.account-panel {
    position: fixed;
    bottom: calc(var(--taskbar-height, 56px) + var(--boreal-ime-bottom, 0px));
    right: 100px;
    width: 320px;
    max-height: 520px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-bottom: none;
    border-radius: 0;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    z-index: 10001;
    display: none;
    flex-direction: column;
    overflow: hidden;
    transform-origin: bottom center;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.account-panel.open {
    display: flex;
    animation: osTaskbarSlideUp 0.28s cubic-bezier(0.2, 0, 0, 1) both;
}

.account-panel-header {
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Zones cliquables dans le panel compte */
.account-zone {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s ease;
    user-select: none;
}

.account-zone:hover {
    background: rgba(255, 255, 255, 0.08);
}

.account-zone:active {
    background: rgba(255, 255, 255, 0.12);
}

/* Zone profil utilisateur */
.account-zone-profile {
    /* Hérite de .account-zone */
}

/* Zone silo */
.account-zone-silo {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 10px;
    margin-top: 4px;
}

.silo-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(99, 102, 241, 0.2);
}

.silo-icon svg {
    width: 22px;
    height: 22px;
    stroke: #818cf8;
    fill: none;
}

.account-zone-silo span {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Zone entreprise */
.account-zone-entreprise {
    /* Même style que la zone profil, juste séparée visuellement */
}

/* Icône de l'entreprise (même taille que l'avatar utilisateur) */
.entreprise-icon {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--entreprise-color, #059669);
    transition: background 0.2s;
}

.entreprise-icon svg {
    width: 28px;
    height: 28px;
    stroke: white;
    fill: none;
}

.account-entreprise-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.account-zone-entreprise #account-panel-entreprise-name {
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 500;
}

.account-appellations {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
}

.account-appellation-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text-secondary, #a0aec0);
}

.account-appellation-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* L'avatar du panel compte utilise maintenant .user-avatar avec data-size="lg" */
/* Voir /ux/user-avatar.css pour les styles */

.account-panel-info {
    flex: 1;
    min-width: 0;
}

.account-panel-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-panel-email {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.account-panel-entreprise {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 11px;
    color: #0ea5e9;
    cursor: pointer;
    transition: opacity 0.15s;
}

.account-panel-entreprise:hover {
    opacity: 0.8;
}

.account-panel-entreprise svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.account-panel-entreprise span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-section {
    padding: 12px;
    overflow-y: auto;
}

body.sysmenu-merged .account-section {
    /* Un peu plus d'air sous Déconnexion quand le panneau flotte au-dessus de la taskbar. */
    padding: 12px 12px 16px;
}

.account-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

.account-anonymous-text {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    text-align: center;
    line-height: 1.5;
}

.account-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}

.account-action-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.account-action-btn svg {
    width: 18px;
    height: 18px;
    stroke: var(--accent-blue);
    stroke-width: 2;
    fill: none;
    flex-shrink: 0;
}

.account-action-btn.account-action-primary {
    background: #8b5cf6;
    border-color: transparent;
}

.account-action-btn.account-action-primary:hover {
    background: #9d6eff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.35);
}

.account-action-btn.account-action-primary svg {
    stroke: white;
}

.account-action-btn.account-action-danger {
    color: #ef4444;
}

.account-action-btn.account-action-danger svg {
    stroke: #ef4444;
}

.account-action-btn.account-action-danger:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
}

.account-qr-section {
    padding: 0 12px 8px;
}

/* Section Comptes récents (switch rapide) */
.account-recent-section {
    padding: 0 0 8px;
}

.account-recent-list.account-recent-list-visible {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}

.account-recent-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s, var(--ux-hover-rim-transition, box-shadow 0.2s ease);
    -webkit-user-select: none;
    user-select: none;
}

.account-recent-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #6b7280; /* Couleur par défaut grise, remplacée par style inline si couleur personnalisée */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}

.account-recent-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.account-recent-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-recent-email {
    font-size: 11px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-recent-remove {
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
    flex-shrink: 0;
}

.account-recent-item:hover .account-recent-remove {
    opacity: 0.6;
}

.account-recent-remove:hover {
    opacity: 1 !important;
    background: rgba(239, 68, 68, 0.2);
}

.account-recent-remove svg {
    width: 14px;
    height: 14px;
    stroke: #ef4444;
}

/* Zone credits dans le panel compte */
.account-credits-section {
    padding: 0 0 8px;
}

.account-credits-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: rgba(74, 158, 255, 0.06);
    border: 1px solid rgba(74, 158, 255, 0.12);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
    margin-bottom: 4px;
}

.account-credits-row:last-child {
    margin-bottom: 0;
}

.account-credits-row:hover {
    background: rgba(74, 158, 255, 0.12);
    border-color: rgba(74, 158, 255, 0.25);
}

.account-credits-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

.account-credits-label svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    stroke: var(--accent, #4a9eff);
}

.account-credits-value {
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.account-credits-value.credits-ok {
    color: #22c55e;
}

.account-credits-value.credits-low {
    color: #f59e0b;
}

.account-credits-value.credits-critical {
    color: #ef4444;
}

.account-credits-silo-row {
    background: rgba(99, 102, 241, 0.06);
    border-color: rgba(99, 102, 241, 0.12);
}

.account-credits-silo-row:hover {
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.25);
}

.account-credits-silo-row .account-credits-label svg {
    stroke: #818cf8;
}

/* Sous-menu comptes recents */
.account-recent-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 8px;
    background: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: inherit;
    user-select: none;
    transition: color 0.15s, var(--ux-hover-rim-transition, box-shadow 0.2s ease);
}

.account-recent-toggle:hover {
    color: var(--text-primary);
}

.account-recent-toggle > svg:first-child {
    width: 16px;
    height: 16px;
    color: #8b5cf6;
}

.account-recent-toggle > span:first-of-type {
    flex: 1;
    text-align: left;
}

.account-recent-count {
    font-size: 10px;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
    border-radius: 9px;
    padding: 0 5px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}

.account-recent-chevron {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
    color: var(--text-secondary);
}

.account-recent-toggle.expanded .account-recent-chevron {
    transform: rotate(180deg);
}

.account-recent-list {
    animation: accountSubMenuOpen 0.15s ease-out;
}

@keyframes accountSubMenuOpen {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.account-requests-section {
    margin-bottom: 8px;
    border-radius: 10px;
    background: rgba(74, 158, 255, 0.1);
    border: 1px solid rgba(74, 158, 255, 0.2);
    overflow: hidden;
}

.account-requests-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.account-requests-header svg {
    width: 18px;
    height: 18px;
    stroke: var(--accent-blue);
    stroke-width: 2;
    fill: none;
}

.account-requests-count {
    margin-left: auto;
    background: var(--accent-blue);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
}

.account-requests-list {
    max-height: 200px;
    overflow-y: auto;
}

.account-request-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.15s ease;
}

.account-request-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.account-request-visual {
    display: grid;
    grid-template-columns: repeat(3, 18px);
    gap: 2px;
}

.account-request-visual-cell {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.account-request-info {
    flex: 1;
    min-width: 0;
}

.account-request-app {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
}

.account-request-device {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-request-actions {
    display: flex;
    gap: 4px;
}

.account-request-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.account-request-btn svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.5;
    fill: none;
}

.account-request-btn.approve {
    background: #22c55e;
    color: white;
}

.account-request-btn.approve:hover {
    background: #16a34a;
}

.account-request-btn.approve svg {
    stroke: white;
}

.account-request-btn.deny {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.account-request-btn.deny:hover {
    background: #ef4444;
    color: white;
}

.account-request-btn.deny svg {
    stroke: currentColor;
}

/* Responsive account panel */
@media (max-width: 768px) {
    .account-panel {
        right: 0;
        left: 0;
        width: auto;
        max-width: none;
        bottom: var(--taskbar-height, 64px);
        border-radius: 0;
        border-bottom: none;
    }
}

/* ============================
   RESPONSIVE / MOBILE
   ============================ */

/* Variable pour le breakpoint mobile */
:root {
    --mobile-breakpoint: 760px;
}

/* Shell OS : annuler le zoom +10 % des apps (ux-components.css).
   La gestion des fenêtres / taskbar reste en pixels logiques.
   Les panneaux et dialogues OS sont grossis ci-dessous. */
html.os-mode-mobile {
    zoom: 1;
    --font-scale: 1.1;
}

body.mode-mobile {
    --font-scale: 1.1;
    /* Zoom des panneaux OS : toute largeur layout doit etre divisee par
       ce facteur (sinon depassement viewport, ex. Flip5 360 CSS px). */
    --os-panel-zoom: 1.1;
}

/* Chrome OS (panneaux, dialogues, titres) : typos / UI +10 % en mobile */
body.mode-mobile .notification-panel,
body.mode-mobile .system-panel,
body.mode-mobile .account-panel,
body.mode-mobile .systasks-panel,
body.mode-mobile .auth-panel,
body.mode-mobile .sysmenu-panel,
body.mode-mobile .boreal-av-panel,
body.mode-mobile .mini-grid-popup,
body.mode-mobile .ux-dialog-overlay,
body.mode-mobile .ux-select-dropdown-os,
body.mode-mobile .ux-context-menu,
body.mode-mobile .os-dialog,
body.mode-mobile .os-dialog-app-overlay,
body.mode-mobile .os-sys-toast-stack {
    zoom: var(--os-panel-zoom, 1.1);
}

body.mode-mobile .window-title-text {
    font-size: calc(13px * var(--font-scale, 1.1));
}

/* Zoom CSS multiplie aussi bottom → coller a la taskbar en divisant */
body.mode-mobile .notification-panel,
body.mode-mobile .system-panel,
body.mode-mobile .account-panel,
body.mode-mobile .auth-panel,
body.mode-mobile .boreal-av-panel,
body.mode-mobile .sysmenu-panel {
    bottom: calc(
        (var(--taskbar-height, 56px) + var(--boreal-ime-bottom, 0px))
        / var(--os-panel-zoom, 1.1)
    );
}

body.mode-mobile .app-icon-label {
    font-size: calc(12px * var(--font-scale, 1.1));
}

body.mode-mobile .window-title-seq-badge {
    font-size: calc(11px * var(--font-scale, 1.1));
}

/* ========== TABLET (max-width: 768px) ========== */
@media (max-width: 768px) {
    /* Synchroniser la hauteur de barre avant meme que body.mode-mobile
       soit pose par le JS (evite FOUC / bande noire au premier paint). */
    :root {
        --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));
    }

    /* Cacher la mini-grille popup sur tablettes et mobiles */
    .mini-grid-popup {
        display: none !important;
    }
    
    /* Desktop: grille adaptée pour tablette.
       En mode-mobile, sysmenu.css reprend la main (cellule plus large,
       gap serre, glyphes plus grands). */
    .desktop {
        padding: 20px;
        grid-template-columns: repeat(auto-fill, 85px);
        /* Pas de rangées fixes courtes : laisser grid-auto-rows /
           --desktop-icon-height (sinon titres tronqués en bas). */
        grid-template-rows: none;
        grid-auto-rows: var(--desktop-icon-height, 110px);
        gap: 12px;
    }
    
    /* Icônes légèrement plus petites (hors mode-mobile) */
    .app-icon-image {
        width: 50px;
        height: 50px;
        border-radius: 12px;
    }
    
    .app-icon-image > svg {
        width: 28px;
        height: 28px;
    }
    
    .app-icon-label {
        font-size: 11px;
        max-width: 80px;
        line-height: 1.4;
        padding-bottom: 2px;
    }
    
    /* Logo discret sur mobile */
    .sys-logo {
        display: none;
    }
    
    /* Fenêtres: forcer plein écran par défaut (sauf popups) */
    .app-window:not(.popup-window) {
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: 0 !important;
        min-width: unset !important;
        min-height: unset !important;
    }
    
    /* Cacher les poignées de resize sur mobile */
    .app-window .resize-handle {
        display: none !important;
    }
    
    /* Barre de fenêtre adaptée mobile */
    .window-header {
        height: 48px;
        padding: 0 8px;
    }
    
    /* Cacher les boutons minimize/maximize sur mobile */
    .window-btn.minimize,
    .window-btn.maximize {
        display: none;
    }
    
    /* Boutons de fenetre (close…) : cible tactile 36px */
    .window-btn {
        width: 36px;
        height: 36px;
    }
    
    /* Glyphe : ~55 % du bouton (14px/28px en desktop). Sans ca, le SVG
       reste a 14px dans un carre de 36px et parait minuscule. */
    .window-btn svg {
        width: 20px;
        height: 20px;
    }
    
    /* Taskbar : hauteur via --taskbar-height (posee par body.mode-mobile /
       safe-area). Ne plus hardcoder 52px — ca creait une bande noire entre
       le bureau (calcule avec 56px) et la barre reelle. */
    .taskbar {
        padding: 0 8px;
        height: var(--taskbar-height);
    }
    
    .taskbar-apps {
        gap: 4px;
        padding: 0 8px;
        /* Desktop reserve ~300px pour le tray ; trop serre en mobile et
           ecrase les boutons en rectangles verticaux. */
        max-width: calc(100% - 140px);
    }
    
    /* Bouton Apps : carre compact sous 768px (tous modes). */
    .taskbar-desktop-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        max-width: 44px;
        padding: 0;
        aspect-ratio: 1 / 1;
        flex: 0 0 44px;
        justify-content: center;
    }
    
    .taskbar-desktop-btn svg {
        width: 20px;
        height: 20px;
    }
    
    /* Les items d'apps ouvertes : en mode mobile le carre 44px + sans
       libelle est pose par body.mode-mobile (sysmenu.css). En Bureau /
       Productivite on garde icone + libelle meme sous 768px. */
    
    /* System tray compact */
    .system-tray {
        padding: 6px 10px;
        gap: 6px;
    }
    
    /* Panel notifications responsive */
    .notification-panel {
        right: 0;
        left: 0;
        width: auto;
        max-width: none;
        bottom: var(--taskbar-height, 64px);
        border-radius: 0;
        border-bottom: none;
    }
    
    /* System panel responsive */
    .system-panel {
        right: 0;
        left: 0;
        width: auto;
        max-width: none;
        bottom: var(--taskbar-height, 64px);
        border-radius: 0;
        border-bottom: none;
    }
}

/* ========== MOBILE (max-width: 480px) ========== */
@media (max-width: 480px) {
    /* Desktop: grille compacte — padding-top respecte le safe-area / Boréal.
       En mode-mobile, sysmenu.css override (zone texte pleine largeur). */
    .desktop {
        padding: 16px;
        padding-top: max(16px, var(--boreal-safe-top, env(safe-area-inset-top, 0px)));
        grid-template-columns: repeat(auto-fill, 75px);
        grid-template-rows: none;
        grid-auto-rows: var(--desktop-icon-height, 110px);
        gap: 8px;
    }
    
    /* Icônes encore plus compactes (hors mode-mobile) */
    .app-icon {
        padding: 8px 4px;
    }
    
    .app-icon-image {
        width: 46px;
        height: 46px;
        margin-bottom: 6px;
    }
    
    .app-icon-image > svg {
        width: 26px;
        height: 26px;
    }
    
    .app-icon-label {
        font-size: 10px;
        max-width: 70px;
        line-height: 1.4;
        padding-bottom: 2px;
    }
    
    /* Barre de titre encore plus compacte */
    .window-header {
        height: 44px;
    }
    
    .window-title-text {
        font-size: 12px;
        max-width: 150px;
    }
    
    /* Taskbar mobile : meme hauteur que --taskbar-height (plus haute qu'avant
       pour absorber le safe-area / eviter les bandes noires). */
    .taskbar {
        height: var(--taskbar-height);
        padding: 0 6px;
        padding-bottom: var(--taskbar-safe-bottom, 0px);
    }
    
    /* .taskbar-app carre : uniquement via body.mode-mobile (sysmenu.css),
       pour ne pas ecraser le libelle en Bureau/Productivite. */
    
    .taskbar-app-icon {
        width: 24px;
        height: 24px;
    }
    
    .taskbar-app-icon > svg {
        width: 14px;
        height: 14px;
    }
    
    /* Bouton desktop mobile : carre (plus de padding horizontal asymetrique) */
    .taskbar-desktop-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        max-width: 44px;
        padding: 0;
        aspect-ratio: 1 / 1;
        flex: 0 0 44px;
        justify-content: center;
    }
    
    .taskbar-desktop-btn svg {
        width: 20px;
        height: 20px;
    }
    
    /* Horloge compacte */
    .clock {
        font-size: 12px;
    }
    
    /* Notification badge */
    .notification-btn {
        width: 32px;
        height: 32px;
    }
    
    .notification-btn svg {
        width: 18px;
        height: 18px;
    }
}

/* ========== LANDSCAPE MOBILE ========== */
@media (max-width: 768px) and (orientation: landscape) {
    .desktop {
        grid-template-columns: repeat(auto-fill, 80px);
        grid-template-rows: repeat(auto-fill, 85px);
        padding: 12px 20px;
    }
    
    /* Taskbar latérale en landscape pourrait être une option future */
}

/* ========== TOUCH IMPROVEMENTS ========== */
@media (hover: none) and (pointer: coarse) {
    /* Supprimer les effets hover sur devices tactiles */
    .app-icon:hover {
        background: transparent;
        transform: none;
    }
    
    .app-icon:active {
        background: rgba(255, 255, 255, 0.1);
        transform: scale(0.95);
    }
    
    /* Taskbar : pas de flash hover sticky ; le feedback presse UX
       (.ux-btn-pressed) reste autorise. */
    .taskbar-app:hover:not(.ux-btn-pressed):not(.ux-btn-pressing),
    .taskbar-app:active:not(.ux-btn-pressed):not(.ux-btn-pressing),
    .taskbar-desktop-btn:hover:not(.ux-btn-pressed):not(.ux-btn-pressing),
    .taskbar-desktop-btn:active:not(.ux-btn-pressed):not(.ux-btn-pressing) {
        background: rgba(255, 255, 255, 0.06);
        border-color: transparent;
        box-shadow: none;
        transform: none;
        filter: none;
    }

    .taskbar-app.active:hover:not(.ux-btn-pressed),
    .taskbar-app.active:active:not(.ux-btn-pressed) {
        background: rgba(74, 158, 255, 0.18);
        border-color: rgba(74, 158, 255, 0.4);
    }

    .taskbar-desktop-btn.desktop-visible:hover:not(.ux-btn-pressed),
    .taskbar-desktop-btn.desktop-visible:active:not(.ux-btn-pressed) {
        background: rgba(74, 158, 255, 0.18);
        border-color: rgba(74, 158, 255, 0.4);
        transform: none;
    }

    .taskbar-app,
    .taskbar-desktop-btn,
    .taskbar .account-btn,
    .taskbar .notification-btn,
    .taskbar .system-tray {
        -webkit-tap-highlight-color: transparent;
    }

    /* Persona / tray : le :hover sticky apres fermeture du popup
       laissait un fond gris — revenir au transparent hors .active / presse. */
    .taskbar .account-btn:hover:not(.active):not(.ux-btn-pressed),
    .taskbar .account-btn:active:not(.active):not(.ux-btn-pressed),
    .taskbar .account-btn:focus:not(.active):not(.ux-btn-pressed),
    .taskbar .notification-btn:hover:not(.active):not(.ux-btn-pressed),
    .taskbar .notification-btn:active:not(.active):not(.ux-btn-pressed),
    .taskbar .system-tray:hover:not(.active):not(.ux-btn-pressed),
    .taskbar .system-tray:active:not(.active):not(.ux-btn-pressed) {
        background: transparent;
        box-shadow: none;
        filter: none;
        transform: none;
    }

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

    .taskbar .account-btn.active:hover,
    .taskbar .account-btn.active:active {
        background: rgba(74, 158, 255, 0.15);
    }
    
    /* Zones de touch plus grandes */
    .window-btn {
        min-width: 36px;
        min-height: 36px;
        width: 36px;
        height: 36px;
    }

    /* Glyphe proportionnel au bouton agrandi (sinon 14px dans 36px). */
    .window-btn svg {
        width: 20px;
        height: 20px;
    }
}

/* ========== SAFE AREA (iPhone Notch / Dynamic Island / home indicator) ========== */
/* --boreal-safe-* : posées par Boréal natif (Android immersif ; iOS via
   safeAreaInsets). Sans ces variables, repli sur env(safe-area-inset-*)
   (exige viewport-fit=cover). En mobile, --taskbar-height inclut deja le
   safe-area bas (voir sysmenu.css) pour coller bureau + barre. */
@supports (padding: max(0px)) {
    .taskbar {
        padding-left: max(8px, var(--boreal-safe-left, env(safe-area-inset-left)));
        padding-right: max(8px, var(--boreal-safe-right, env(safe-area-inset-right)));
    }
    
    .desktop {
        padding-top: max(20px, var(--boreal-safe-top, env(safe-area-inset-top)));
    }
}

/* ============================================
   MENU CONTEXTUEL DE LA TASKBAR
   ============================================ */

.taskbar-context-menu {
    animation: taskbarContextMenuFadeIn 0.15s ease;
}

.taskbar-context-menu .context-menu-item:first-child {
    border-radius: 6px 6px 0 0;
}

.taskbar-context-menu .context-menu-item:last-child {
    border-radius: 0 0 6px 6px;
}

.taskbar-context-menu .context-menu-item:only-child {
    border-radius: 6px;
}

@keyframes taskbarContextMenuFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(5px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ========================================
   POPUP WINDOWS
   ======================================== */

.app-window.popup-window {
    border-radius: 12px;
    min-width: unset;
    min-height: unset;
    background: #12121a;
    border: 1px solid rgba(139, 92, 246, 0.4);
    animation: popupFadeIn 0.18s ease-out;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.5),
        0 16px 64px rgba(139, 92, 246, 0.12);
    overflow: hidden;
    padding: 0;
    /* Transition pour forcer le repaint du layer GPU lors des redimensionnements */
    transition: width 0.1s ease-out, height 0.1s ease-out;
}

.app-window.popup-window .window-content {
    border-radius: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: #12121a;
    padding: 0;
    margin: 0;
}

.app-window.popup-window .window-content iframe {
    width: 100%;
    height: 100%;
    border: none;
    margin: 0;
    padding: 0;
    background: #12121a;
    display: block;
    border-radius: 0;
}

.app-window.popup-window .resize-handle {
    display: none !important;
}

@keyframes popupFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ========================================
   AUTH PANEL (Connexion intégrée)
   ======================================== */

.auth-panel {
    --ab-rgb: 139, 92, 246;
    --ab: #8b5cf6;
    --ab-light: #a78bfa;
    --ab-dark: #7c3aed;
    --ab-lighter: #c4b5fd;
    position: fixed;
    bottom: calc(var(--taskbar-height, 56px) + var(--boreal-ime-bottom, 0px));
    right: 60px;
    width: 320px;
    background: #12121a;
    border-radius: 0;
    border: 1px solid rgba(var(--ab-rgb), 0.4);
    border-bottom: none;
    box-shadow: 
        0 25px 80px rgba(0, 0, 0, 0.6),
        0 16px 64px rgba(var(--ab-rgb), 0.15);
    z-index: 10000;
    display: none;
    flex-direction: column;
    overflow: hidden;
    transform-origin: bottom center;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.auth-panel.open {
    display: flex;
    animation: osTaskbarSlideUp 0.28s cubic-bezier(0.2, 0, 0, 1) both;
}

/* Le dialogue de confirmation d'acces superadmin doit passer AU-DESSUS du
   panneau de connexion (.auth-panel a z-index: 10000), sinon il reste masque
   derriere la fenetre de connexion sur un silo protege. */
.ux-dialog-overlay.os-superadmin-confirm {
    z-index: 100002;
}

.auth-panel-header {
    padding: 16px 20px 12px;
    text-align: center;
}

.auth-panel-title {
    font-size: 22px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--ab-light), var(--ab));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.auth-panel-subtitle {
    display: block;
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.auth-panel-body {
    padding: 16px 20px 20px;
}

/* Auth Steps */
.auth-step {
    display: none;
}

.auth-step.active {
    display: block;
}

.auth-step-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text-primary);
    text-align: center;
}

.auth-step-desc {
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 16px;
    line-height: 1.4;
}

.auth-step-desc strong {
    color: var(--text-primary);
}

/* Auth Messages */
.auth-message {
    display: none;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 12px;
    text-align: center;
    overflow-wrap: break-word;
    border: 1px solid transparent;
    opacity: 0;
    transition:
        opacity 0.5s ease,
        background-color 0.5s ease,
        border-color 0.5s ease,
        color 0.5s ease;
}

.auth-message.error,
.auth-message.success {
    display: block;
    opacity: 1;
}

.auth-message.error {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.auth-message.success {
    background: rgba(16, 185, 129, 0.18);
    border-color: rgba(16, 185, 129, 0.4);
    color: #6ee7b7;
}

.auth-message.fading {
    opacity: 0;
}

/* Emplacement PIN toujours reserve : le bandeau s'affiche / s'efface
   en opacite, sans faire varier la hauteur du popup. */
#auth-msg-pin.auth-message {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 60px;
    margin-bottom: 12px;
    opacity: 0;
}

#auth-msg-pin.auth-message.error,
#auth-msg-pin.auth-message.success {
    opacity: 1;
}

#auth-msg-pin.auth-message.fading {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .auth-message {
        transition: none;
    }
}

/* Auth Form */
.auth-form-group {
    margin-bottom: 12px;
}

.auth-form-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--text-secondary);
}

.auth-form-input {
    width: 100%;
    padding: 12px 14px;
    background: rgba(var(--ab-rgb), 0.1);
    border: 1px solid rgba(var(--ab-rgb), 0.25);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    transition: all 0.2s ease;
}

.auth-waitlist-note {
    margin-top: 16px;
    text-align: left;
}

.auth-waitlist-note textarea.auth-form-input {
    min-height: 84px;
    margin-bottom: 10px;
    line-height: 1.45;
}

.auth-form-input:focus {
    outline: none;
    border-color: var(--ab);
    box-shadow: 0 0 0 3px rgba(var(--ab-rgb), 0.2);
}

.auth-form-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.6;
}

/* Remplissage automatique du navigateur (Chrome/Edge) : par defaut il force un
   fond clair (blanc/jaune) qui ignore la propriete background, ce qui rendait le
   champ blanc apres une saisie ou une suggestion. On garde le champ sur fond
   sombre via l'astuce du box-shadow interne, on force la couleur du texte, et la
   transition tres longue empeche le navigateur de re-appliquer son fond clair. */
.auth-form-input:-webkit-autofill,
.auth-form-input:-webkit-autofill:hover,
.auth-form-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-secondary, #12121a) inset;
    box-shadow: 0 0 0 1000px var(--bg-secondary, #12121a) inset;
    -webkit-text-fill-color: var(--text-primary);
    caret-color: var(--text-primary);
    transition: background-color 9999s ease-in-out 0s;
}

.auth-form-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-secondary, #12121a) inset, 0 0 0 3px rgba(var(--ab-rgb), 0.2);
    box-shadow: 0 0 0 1000px var(--bg-secondary, #12121a) inset, 0 0 0 3px rgba(var(--ab-rgb), 0.2);
    -webkit-text-fill-color: var(--text-primary);
    caret-color: var(--text-primary);
    transition: background-color 9999s ease-in-out 0s;
}

/* Auth Buttons */
.auth-btn {
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    user-select: none;
}

.auth-btn-primary {
    background: linear-gradient(135deg, var(--ab), var(--ab-dark));
    color: white;
}

.auth-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(var(--ab-rgb), 0.35);
}

.auth-btn-primary:disabled {
    opacity: 0.6;
    cursor: default;
    transform: none;
    box-shadow: none;
}

/* Saved Accounts */
.auth-saved-accounts {
    margin-bottom: 12px;
}

.auth-saved-accounts:empty {
    display: none;
}

.auth-account-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(var(--ab-rgb), 0.12);
    border: 1px solid rgba(var(--ab-rgb), 0.3);
    border-radius: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.auth-account-item:hover {
    background: rgba(var(--ab-rgb), 0.22);
    border-color: var(--ab-light);
    transform: translateX(2px);
}

.auth-account-item:last-child {
    margin-bottom: 0;
}

.auth-account-avatar {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--ab), var(--ab-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}

.auth-account-info {
    flex: 1;
    min-width: 0;
}

.auth-account-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.auth-account-email {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.auth-account-hint {
    font-size: 10px;
    color: var(--text-secondary);
    margin-top: 1px;
}

.auth-account-remove {
    color: var(--text-secondary);
    font-size: 16px;
    padding: 4px 6px;
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.2s;
    flex-shrink: 0;
}

.auth-account-remove:hover {
    color: #ef4444;
    opacity: 1;
}

/* Auth Links */
.auth-other-link,
.auth-back-link {
    text-align: center;
    margin-top: 14px;
    font-size: 12px;
}

.auth-other-link a,
.auth-back-link a {
    color: var(--ab-light);
    text-decoration: none;
    transition: color 0.2s;
}

.auth-other-link a:hover,
.auth-back-link a:hover {
    color: var(--ab-lighter);
}

.auth-link-sep {
    color: var(--text-secondary);
    margin: 0 6px;
}

/* Verification Options */
.auth-verification-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

.auth-verification-option {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    background: rgba(var(--ab-rgb), 0.08);
    border: 1px solid rgba(var(--ab-rgb), 0.25);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    width: 100%;
    font-family: inherit;
    color: var(--text-primary);
}

.auth-verification-option:hover {
    border-color: var(--ab);
    background: rgba(var(--ab-rgb), 0.18);
}

.auth-opt-icon {
    width: 24px;
    height: 24px;
    margin-right: 12px;
    flex-shrink: 0;
    stroke: var(--ab-light);
    stroke-width: 1.5;
    fill: none;
}

.auth-opt-content {
    flex: 1;
    min-width: 0;
}

.auth-opt-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.auth-opt-desc {
    font-size: 11px;
    color: var(--text-secondary);
}

.auth-opt-badge {
    background: linear-gradient(135deg, var(--ab), var(--ab-dark));
    color: white;
    font-size: 9px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 8px;
    white-space: nowrap;
}

/* Visual Key */
.auth-visual-key-container {
    text-align: center;
    padding: 12px 0;
}

.auth-visual-key-grid {
    display: inline-grid;
    grid-template-columns: repeat(3, 40px);
    gap: 4px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    border: 2px solid rgba(var(--ab-rgb), 0.3);
}

.auth-visual-cell {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.auth-visual-code {
    font-family: monospace;
    font-size: 16px;
    color: var(--text-secondary);
    letter-spacing: 3px;
    margin-top: 10px;
}

/* Waiting Animation */
.auth-waiting-dots {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin: 16px 0;
}

.auth-dot {
    width: 10px;
    height: 10px;
    background: var(--ab);
    border-radius: 50%;
    animation: authDotBounce 1.4s infinite;
}

.auth-dot:nth-child(2) { animation-delay: 0.2s; }
.auth-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes authDotBounce {
    0%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-8px); }
}

.auth-hint {
    background: rgba(var(--ab-rgb), 0.12);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.4;
    text-align: center;
}

/* PIN Inputs */
.auth-pin-inputs {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 16px;
}

.auth-pin-input {
    width: 40px;
    height: 48px;
    text-align: center;
    font-size: 22px;
    font-weight: 600;
    background: rgba(var(--ab-rgb), 0.1);
    border: 2px solid rgba(var(--ab-rgb), 0.3);
    border-radius: 10px;
    color: var(--text-primary);
    font-family: 'Courier New', monospace;
    caret-color: var(--ab);
}

.auth-pin-input:focus {
    outline: none;
    border-color: var(--ab);
    box-shadow: 0 0 0 3px rgba(var(--ab-rgb), 0.22);
}

.auth-pin-input:disabled {
    cursor: default;
    opacity: 0.85;
}

/* Auth Spinner */
.auth-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: authSpin 0.8s linear infinite;
}

@keyframes authSpin {
    to { transform: rotate(360deg); }
}

/* ============================================
   SELECTEUR DE THEME (Sombre / Clair)
   ============================================ */

.system-panel-theme-selector {
    padding: 8px 0;
}

.theme-selector-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 6px 8px;
}

.theme-selector-options {
    display: flex;
    gap: 4px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 3px;
}

.theme-selector-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.theme-selector-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.theme-selector-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
}

.theme-selector-btn.active {
    background: rgba(74, 158, 255, 0.15);
    color: var(--accent-blue, #4a9eff);
    font-weight: 600;
}

.theme-selector-btn.click-feedback {
    transform: scale(0.95);
}

.theme-selector-note {
    margin: 8px 6px 0;
    font-size: 11px;
    line-height: 1.4;
    color: var(--text-secondary);
}

/* ============================================
   SELECTEUR DE LANGUE (menu deroulant UX)
   ============================================ */

.system-panel-lang-selector {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

.lang-selector-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 2px;
    white-space: nowrap;
    flex-shrink: 0;
}

.system-panel-lang-selector .ux-select-wrap {
    flex: 1;
    min-width: 0;
}

.system-panel-lang-selector .ux-select-trigger {
    padding: 7px 32px 7px 12px;
    font-size: 13px;
}

/* ============================================
   TRANSITION FLUIDE CHANGEMENT D'ACCENT
   ============================================ */

.accent-transitioning body,
.accent-transitioning .desktop,
.accent-transitioning .taskbar,
.accent-transitioning .system-panel,
.accent-transitioning .system-panel-body,
.accent-transitioning .system-panel-btn,
.accent-transitioning .window-header,
.accent-transitioning .window-content,
.accent-transitioning .notification-panel,
.accent-transitioning .sidebar-dock {
    transition: background-color 0.4s ease, background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

/* Pas de transition box-shadow sur .app-window : les listes d'ombres
   clair / sombre n'ont pas le meme nombre de couches, Chromium interpolait
   vers un anneau blanc qui restait jusqu'au reload. */
.accent-transitioning .app-window {
    transition: background-color 0.4s ease, background 0.4s ease, border-color 0.4s ease;
}

/* ============================================
   SELECTEUR DE COULEUR D'ACCENT
   ============================================ */

.system-panel-accent-selector {
    padding: 8px 0;
}

.accent-selector-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 6px 8px;
}

.accent-selector-grid {
    /* 7 colonnes → 20 pastilles sur 3 lignes ; jamais de scroll horizontal */
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-auto-rows: 20px;
    align-items: center;
    justify-items: center;
    column-gap: 5px;
    row-gap: 10px;
    padding: 8px 6px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: calc(3 * 20px + 2 * 10px + 16px);
    -webkit-overflow-scrolling: touch;
}

.accent-swatch {
    position: relative;
    box-sizing: border-box;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    margin: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    background: linear-gradient(135deg, var(--swatch-color), var(--swatch-secondary));
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    user-select: none;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: center;
    justify-self: center;
}

.accent-swatch:hover {
    transform: scale(1.12);
    box-shadow: 0 0 6px var(--swatch-color);
}

.accent-swatch.active {
    border-color: var(--text-primary);
    box-shadow: 0 0 0 1px var(--bg-secondary), 0 0 8px var(--swatch-color);
}

.accent-swatch-check {
    width: 9px;
    height: 9px;
    color: #fff;
    opacity: 0;
    transition: opacity 0.15s ease;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.accent-swatch.active .accent-swatch-check {
    opacity: 1;
}

/* ---- Theme clair: selecteur d'accent ---- */

[data-theme="light"] .accent-selector-label {
    color: #374151;
}

[data-theme="light"] .accent-selector-grid {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
}

[data-theme="light"] .accent-swatch.active {
    border-color: #111827;
    box-shadow: 0 0 0 2px #ffffff, 0 0 10px var(--swatch-color);
}

[data-theme="light"] .accent-swatch-check {
    color: #fff;
}

/* ============================================
   THEME CLAIR - Variables OS
   ============================================ */

[data-theme="light"] {
    --bg-primary: #f7f7f4;
    --bg-secondary: #ecece8;
    --bg-tertiary: #e4e4df;
    /* Chrome bureau / barre : plus clair que le mode nuit, teinté par l'accent
       (valeurs bleu par défaut ; SysAccentColor les remplace pour les autres pastilles). */
    --desktop-chrome: #3c5073;
    --bg-glass: rgba(51, 71, 104, 0.90);
    --bg-hover: rgba(0, 0, 0, 0.04);
    --bg-active: rgba(0, 0, 0, 0.07);
    --bg-card: rgba(255, 255, 255, 0.92);
    --text-primary: #1a1a22;
    --text-secondary: #5c5c6e;
    --text-muted: #8a8a9a;
    --border: rgba(0, 0, 0, 0.12);
    --border-color: rgba(0, 0, 0, 0.12);
    --window-rim: rgba(0, 0, 0, 0.12);
    --border-hover: rgba(0, 0, 0, 0.20);
    --shadow-glow: 0 0 40px rgba(74, 158, 255, 0.22);
    --ux-scrollbar-thumb: rgba(0, 0, 0, 0.22);
    --ux-scrollbar-thumb-hover: rgba(0, 0, 0, 0.34);
    --desktop-background:
        radial-gradient(ellipse at 20% 20%, rgba(74, 158, 255, 0.32) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(139, 92, 246, 0.26) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(74, 158, 255, 0.12) 0%, transparent 70%),
        var(--desktop-chrome);
}

/* ============================================
   THEME CLAIR - Overrides OS
   ============================================ */

[data-theme="light"] body {
    background: var(--desktop-background);
    color: var(--text-primary);
}

[data-theme="light"] .desktop {
    background: var(--desktop-background);
    --text-primary: #f0f0f5;
    --text-secondary: #c8c8d8;
}

[data-theme="light"] .taskbar {
    --text-primary: #f0f0f5;
    --text-secondary: #c8c8d8;
    --border-color: rgba(255, 255, 255, 0.10);
    background: var(--bg-glass);
    border-top: 1px solid var(--border-color);
}

[data-theme="light"] .mini-grid-popup {
    background: #ffffff;
    --text-primary: #1a1a22;
    --text-secondary: #5c5c6e;
    border-color: rgba(0, 0, 0, 0.10);
    box-shadow:
        0 -8px 32px rgba(0, 0, 0, 0.22),
        0 0 0 1px rgba(0, 0, 0, 0.04) inset;
}

[data-theme="light"] .mini-grid-popup .app-icon-label {
    color: #1a1a22;
    text-shadow: none;
}

[data-theme="light"] .mini-grid-popup .app-icon:hover {
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .mini-grid-popup .mini-grid-scaler::-webkit-scrollbar-track {
    background: transparent !important;
}

[data-theme="light"] .mini-grid-popup .mini-grid-scaler::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.21) !important;
    background-image: none !important;
    border: 2px solid transparent !important;
    background-clip: padding-box !important;
    border-radius: 999px !important;
}

[data-theme="light"] .mini-grid-popup .mini-grid-scaler::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.32) !important;
    background-image: none !important;
}

[data-theme="light"] .window-header {
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}

[data-theme="light"] .app-window {
    background: var(--bg-primary);
    color-scheme: light;
    border: 1px solid transparent;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.12),
        0 8px 24px rgba(0, 0, 0, 0.10);
}

[data-theme="light"] .app-window::after {
    border-color: var(--window-rim, rgba(0, 0, 0, 0.12));
}

[data-theme="light"] .app-window.focused {
    box-shadow:
        0 0 0 2px rgba(0, 0, 0, 0.18),
        0 4px 12px rgba(0, 0, 0, 0.12),
        0 8px 24px rgba(0, 0, 0, 0.10);
}

[data-theme="light"] .app-window.dragging {
    box-shadow:
        0 0 0 3px rgba(0, 0, 0, 0.22),
        0 8px 32px rgba(0, 0, 0, 0.16),
        0 16px 64px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .app-window.preview-highlight {
    box-shadow:
        0 0 0 2px rgba(0, 0, 0, 0.16),
        0 4px 12px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .window-content {
    background: var(--bg-primary);
}

[data-theme="light"] .window-content iframe {
    background: var(--bg-primary);
    color-scheme: light;
}

[data-theme="light"] .window-btn {
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .window-btn:hover {
    background: rgba(0, 0, 0, 0.10);
}

[data-theme="light"] .window-btn svg {
    stroke: var(--text-secondary);
}

[data-theme="light"] .window-btn:hover svg {
    stroke: var(--text-primary);
}


/* ---- Panneau Notifications ---- */

[data-theme="light"] .notification-panel {
    background: #ffffff;
    border: 1px solid #d1d5db;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 2px 10px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .notification-panel-header {
    border-bottom: 1px solid #e5e7eb;
}

[data-theme="light"] .notification-panel-title {
    color: #111827;
}

[data-theme="light"] .notification-action-btn {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}

[data-theme="light"] .notification-action-btn:hover {
    background: #e5e7eb;
    color: #111827;
}

[data-theme="light"] .notification-chrome-setting {
    background: #eff6ff;
    border-bottom: 1px solid #e5e7eb;
}

[data-theme="light"] .notification-chrome-label {
    color: #111827;
}

[data-theme="light"] .notification-chrome-status {
    color: #4b5563;
}

[data-theme="light"] .notification-chrome-toggle .toggle-switch {
    background: #d1d5db;
    border-color: #9ca3af;
}

[data-theme="light"] .notification-chrome-toggle .toggle-knob {
    background: #ffffff;
}

[data-theme="light"] .notification-chrome-toggle[data-state="inactive"] .toggle-switch {
    background: #d1d5db;
}

[data-theme="light"] .notification-chrome-toggle[data-state="inactive"] .toggle-knob {
    background: #ffffff;
}

[data-theme="light"] .notification-chrome-toggle[data-state="inactive"] .toggle-label-off {
    color: #374151;
}

[data-theme="light"] .notification-chrome-toggle[data-state="active"] .toggle-switch {
    background: #22c55e;
    border-color: #16a34a;
}

[data-theme="light"] .notification-chrome-toggle[data-state="active"] .toggle-label-on {
    color: #16a34a;
}

[data-theme="light"] .notification-empty {
    color: #6b7280;
}

[data-theme="light"] .notification-empty svg {
    stroke: #9ca3af;
    opacity: 0.7;
}

[data-theme="light"] .notification-item {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
}

[data-theme="light"] .notification-item:hover {
    background: #f3f4f6;
}

[data-theme="light"] .notification-item.unread {
    background: #eff6ff;
    border-left: 3px solid #3b82f6;
    border-color: #bfdbfe;
}

[data-theme="light"] .notification-item.unread:hover {
    background: #dbeafe;
}

[data-theme="light"] .notification-item.clickable:hover {
    background: #eff6ff;
}

[data-theme="light"] .notification-item-title {
    color: #111827;
}

[data-theme="light"] .notification-item-message {
    color: #4b5563;
}

[data-theme="light"] .notification-item-time {
    color: #6b7280;
}

[data-theme="light"] .notification-item-btn {
    background: #e5e7eb;
}

[data-theme="light"] .notification-item-btn:hover {
    background: #d1d5db;
}

[data-theme="light"] .notification-item-btn.delete:hover {
    background: #fee2e2;
}

[data-theme="light"] .notification-item-btn svg {
    stroke: #374151;
}

[data-theme="light"] .notification-item-btn:hover svg {
    stroke: #111827;
}

[data-theme="light"] .notification-item-btn.delete:hover svg {
    stroke: #dc2626;
}

/* ---- Panneau Options systeme ---- */

[data-theme="light"] .system-panel {
    background: #ffffff;
    border: 1px solid #d1d5db;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 2px 10px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .system-panel-header {
    border-bottom: 1px solid #e5e7eb;
}

[data-theme="light"] .system-panel-title {
    color: #111827;
}

[data-theme="light"] .system-panel-btn {
    background: #f9fafb;
    color: #111827;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}

[data-theme="light"] .system-panel-btn:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

[data-theme="light"] .system-panel-btn svg {
    stroke: #2563eb;
}

[data-theme="light"] .system-panel-separator {
    background: #e5e7eb;
}

[data-theme="light"] .system-panel-footer {
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}

[data-theme="light"] .system-panel-option {
    color: #111827;
}

[data-theme="light"] .system-panel-option:hover {
    background: #f3f4f6;
}

[data-theme="light"] .system-panel-option-label {
    color: #111827;
}

[data-theme="light"] .system-panel-option-status {
    color: #4b5563;
}

[data-theme="light"] .system-panel-toggle .toggle-switch {
    background: #d1d5db;
}

[data-theme="light"] .system-panel-toggle .toggle-knob {
    background: #ffffff;
}

[data-theme="light"] .system-panel-toggle[data-state="inactive"] .toggle-label-off {
    color: #374151;
}

[data-theme="light"] .system-panel-toggle[data-state="active"] .toggle-label-on {
    color: #16a34a;
}

[data-theme="light"] .extension-indicator .extension-dot {
    border-color: #ffffff;
}

[data-theme="light"] .extension-indicator:hover {
    background: #f3f4f6;
}

[data-theme="light"] .extension-indicator.active .extension-icon {
    stroke: #16a34a;
}

[data-theme="light"] .extension-indicator.active .extension-dot {
    background: #16a34a;
    box-shadow: 0 0 4px rgba(22, 163, 74, 0.5);
}

[data-theme="light"] .extension-indicator.inactive .extension-icon {
    stroke: #dc2626;
}

[data-theme="light"] .extension-indicator.inactive .extension-dot {
    background: #dc2626;
    box-shadow: 0 0 4px rgba(220, 38, 38, 0.5);
}

[data-theme="light"] .theme-selector-label {
    color: #374151;
}

[data-theme="light"] .theme-selector-options {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
}

[data-theme="light"] .theme-selector-btn {
    color: #4b5563;
}

[data-theme="light"] .theme-selector-btn:hover {
    color: #111827;
    background: #e5e7eb;
}

[data-theme="light"] .theme-selector-btn.active {
    background: #dbeafe;
    color: #2563eb;
}

[data-theme="light"] .theme-selector-note {
    color: #6b7280;
}

[data-theme="light"] .lang-selector-label {
    color: #374151;
}

/* ---- Panneau Compte ---- */

[data-theme="light"] .account-panel {
    background: #ffffff;
    border: 1px solid #d1d5db;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 2px 10px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .account-panel-header {
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}

[data-theme="light"] .account-panel-name {
    color: #111827;
}

[data-theme="light"] .account-panel-email {
    color: #4b5563;
}

[data-theme="light"] .account-zone:hover {
    background: #f3f4f6;
}

[data-theme="light"] .account-zone:active {
    background: #e5e7eb;
}

[data-theme="light"] .account-zone-silo {
    border-top-color: #e5e7eb;
}

[data-theme="light"] .account-zone-silo span {
    color: #4b5563;
}

[data-theme="light"] .silo-icon {
    background: #eef2ff;
}

[data-theme="light"] .silo-icon svg {
    stroke: #6366f1;
}

[data-theme="light"] .account-zone-entreprise #account-panel-entreprise-name {
    color: #111827;
}

[data-theme="light"] .account-appellation-item {
    color: #4b5563;
}

[data-theme="light"] .account-credits-section {
    padding: 0 0 8px;
}

[data-theme="light"] .account-credits-row {
    background: #eff6ff;
    border-color: #bfdbfe;
}

[data-theme="light"] .account-credits-row:hover {
    background: #dbeafe;
    border-color: #93c5fd;
}

[data-theme="light"] .account-credits-label {
    color: #374151;
}

[data-theme="light"] .account-credits-silo-row {
    background: #eef2ff;
    border-color: #c7d2fe;
}

[data-theme="light"] .account-credits-silo-row:hover {
    background: #e0e7ff;
    border-color: #a5b4fc;
}

[data-theme="light"] .account-recent-toggle {
    color: #374151;
}

[data-theme="light"] .account-recent-toggle:hover {
    color: #111827;
}

[data-theme="light"] .account-recent-count {
    background: #eef2ff;
    color: #6366f1;
}

[data-theme="light"] .account-recent-item {
    background: #f5f3ff;
    border-color: #ddd6fe;
}

[data-theme="light"] .account-recent-name {
    color: #111827;
}

[data-theme="light"] .account-recent-email {
    color: #4b5563;
}

[data-theme="light"] .account-action-btn {
    background: #f9fafb;
    border: 1px solid #d1d5db;
    color: #111827;
}

[data-theme="light"] .account-action-btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

[data-theme="light"] .account-action-btn.account-action-danger {
    color: #dc2626;
    background: #fef2f2;
    border-color: #fecaca;
}

[data-theme="light"] .account-action-btn.account-action-danger:hover {
    background: #fee2e2;
    border-color: #fca5a5;
}

[data-theme="light"] .account-anonymous-text {
    color: #4b5563;
}

[data-theme="light"] .app-icon-label {
    color: #f0f0f5;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

/* Theme selector et Mode selector en mode clair :
   voir les overrides dans le bloc "Panneau Options systeme" et ui-modes.css */

/* ========================================
   Mode verrouillé (silo restreint / admin)
   ======================================== */

body.silo-locked .taskbar {
    display: none !important;
}

body.silo-locked .productivity-sidebar {
    display: none !important;
}

body.silo-locked .auth-panel {
    bottom: auto !important;
    right: auto !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 360px;
    background: rgba(18, 18, 26, 0.6);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border: 1px solid rgba(var(--ab-rgb), 0.25);
    animation: authLockAppear 0.4s ease-out;
}

body.silo-locked .desktop-pulse-overlay {
    bottom: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 0;
}

body.silo-locked .desktop-pulse-overlay .pulse-ring:nth-child(1)  { animation-delay: 1.5s; }
body.silo-locked .desktop-pulse-overlay .pulse-ring:nth-child(2)  { animation-delay: 3s; }
body.silo-locked .desktop-pulse-overlay .pulse-ring:nth-child(3)  { animation-delay: 4.5s; }
body.silo-locked .desktop-pulse-overlay .pulse-ring:nth-child(4)  { animation-delay: 6s; }
body.silo-locked .desktop-pulse-overlay .pulse-ring:nth-child(5)  { animation-delay: 7.5s; }
body.silo-locked .desktop-pulse-overlay .pulse-ring:nth-child(6)  { animation-delay: 9s; }
body.silo-locked .desktop-pulse-overlay .pulse-ring:nth-child(7)  { animation-delay: 10.5s; }
body.silo-locked .desktop-pulse-overlay .pulse-ring:nth-child(8)  { animation-delay: 12s; }
body.silo-locked .desktop-pulse-overlay .pulse-ring:nth-child(9)  { animation-delay: 13.5s; }
body.silo-locked .desktop-pulse-overlay .pulse-ring:nth-child(10) { animation-delay: 15s; }

@keyframes authLockAppear {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.access-block-overlay {
    position: fixed;
    inset: 0;
    z-index: 100020;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(8, 8, 14, 0.72);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
.access-block-overlay.is-open,
body.access-blocked .access-block-overlay {
    display: flex;
}
body.access-blocked .desktop,
body.access-blocked .taskbar,
body.access-blocked .auth-panel,
body.access-blocked .productivity-sidebar {
    pointer-events: none;
}
.access-block-card {
    width: 100%;
    max-width: 420px;
    background: #12121a;
    border: 1px solid rgba(220, 38, 38, 0.35);
    border-radius: 16px;
    padding: 32px 28px 28px;
    text-align: center;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}
.access-block-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 16px;
    background: rgba(220, 38, 38, 0.16);
    color: #ef4444;
    display: flex;
    align-items: center;
    justify-content: center;
}
.access-block-title {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}
.access-block-lead,
.access-block-reason,
.access-block-status {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.5;
    color: #d0d0e0;
}
.access-block-reason {
    color: #f1c4c4;
}
.access-block-overlay .access-block-form {
    display: none;
    margin-top: 16px;
    text-align: left;
}
.access-block-overlay.contact-open .access-block-form {
    display: block;
}
.access-block-overlay.contact-open #access-block-contact-toggle {
    display: none;
}
.access-block-label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    color: #d0d0e0;
}
.access-block-overlay textarea {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 12px;
}
.access-block-overlay .ux-btn {
    width: 100%;
    justify-content: center;
}
[data-theme="light"] .access-block-card {
    background: var(--bg-secondary);
    border-color: rgba(220, 38, 38, 0.3);
}
[data-theme="light"] .access-block-title {
    color: var(--text-primary);
}
[data-theme="light"] .access-block-lead,
[data-theme="light"] .access-block-status,
[data-theme="light"] .access-block-label {
    color: var(--text-secondary);
}

/* Auth panel en mode clair */
[data-theme="light"] .auth-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
}

[data-theme="light"] .auth-panel-title {
    background: linear-gradient(135deg, #6d28d9, #5b21b6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="light"] .auth-step-title {
    color: #111827;
}

[data-theme="light"] .auth-step-desc {
    color: #4b5563;
}

[data-theme="light"] .auth-step-desc strong {
    color: #111827;
}

[data-theme="light"] .auth-form-label {
    color: #4b5563;
}

[data-theme="light"] .auth-form-input {
    background: #ffffff;
    border-color: #c4b5fd;
    color: #111827;
}

[data-theme="light"] .auth-form-input::placeholder {
    color: #6b7280;
    opacity: 1;
}

[data-theme="light"] .auth-message.error {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #991b1b;
}

[data-theme="light"] .auth-message.success {
    background: #d1fae5;
    border-color: #34d399;
    color: #065f46;
}

[data-theme="light"] .auth-pin-input {
    background: #ffffff;
    border-color: #a78bfa;
    color: #111827;
}

[data-theme="light"] .auth-pin-input:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
}

[data-theme="light"] .auth-pin-input:disabled {
    background: #f5f3ff;
    border-color: #ddd6fe;
    color: #6b7280;
    opacity: 1;
}

[data-theme="light"] .auth-other-link a,
[data-theme="light"] .auth-back-link a {
    color: #6d28d9;
}

[data-theme="light"] .auth-other-link a:hover,
[data-theme="light"] .auth-back-link a:hover {
    color: #5b21b6;
}

[data-theme="light"] .auth-link-sep {
    color: #9ca3af;
}

[data-theme="light"] .auth-verification-option {
    background: #ffffff;
    border-color: #ddd6fe;
    color: #111827;
}

[data-theme="light"] .auth-verification-option:hover {
    background: #f5f3ff;
    border-color: #8b5cf6;
}

[data-theme="light"] .auth-opt-desc {
    color: #4b5563;
}

[data-theme="light"] .auth-hint {
    background: #f5f3ff;
    color: #4b5563;
}

/* OS dialog en mode clair */
[data-theme="light"] .os-dialog {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
}

[data-theme="light"] .os-dialog-header {
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border);
}

[data-theme="light"] .os-dialog-input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    color: var(--text-primary);
}

[data-theme="light"] .os-dialog-btn {
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

[data-theme="light"] .os-dialog-btn:hover {
    background: rgba(255, 255, 255, 0.10);
}

[data-theme="light"] .os-dialog-footer {
    background: transparent;
}

/* ============================================
   MODE FOCUS - App en plein écran, OS invisible
   F8 pour basculer entre focus et mode normal
   ============================================ */

body.mode-focus #desktop,
body.mode-focus .taskbar,
body.mode-focus .productivity-sidebar,
body.mode-focus .sidebar-open-btn,
body.mode-focus #desktop-pulse-overlay {
    display: none !important;
}

body.mode-focus .windows-container {
    position: fixed;
    inset: 0;
    z-index: 1;
}

body.mode-focus .app-window.focus-target {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    min-width: unset !important;
    min-height: unset !important;
    z-index: 1 !important;
    animation: none !important;
}

body.mode-focus .app-window.focus-target .window-header {
    display: none !important;
}

body.mode-focus .app-window.focus-target .resize-handle {
    display: none !important;
}

body.mode-focus .app-window:not(.focus-target):not(.sub-window) {
    z-index: 100 !important;
}

body.mode-focus .app-window.sub-window:not(.focused) {
    z-index: 100;
}

body.mode-focus .app-window.focused:not(.focus-target) {
    z-index: 10000 !important;
}

body.mode-focus .auth-panel {
    bottom: auto !important;
    right: auto !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 360px;
}

/* ============================================================
   BORÉAL OS - Contrôles système premium (barre du bas)
   Activés uniquement quand body.is-boreal (daemon natif détecté).
   ============================================================ */

.system-tray .network-icon-eth { stroke: var(--text-secondary); fill: none; }
.system-tray.active .network-icon-eth { stroke: var(--accent); }

.boreal-system-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border-color);
}

.boreal-sys-grouptitle {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    padding: 2px 4px 4px;
}

/* Rangée de 3 raccourcis icône (Réseau / Son / Affichage) ouvrant Paramètres. */
.boreal-sys-iconrow {
    display: flex;
    gap: 8px;
    margin-bottom: 4px;
}
.boreal-sys-icon {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 6px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-secondary, rgba(255,255,255,0.04));
    color: var(--text-primary);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .08s ease;
}
.boreal-sys-icon:hover { background: rgba(255,255,255,0.08); border-color: var(--accent); }
.boreal-sys-icon-img { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; }
.boreal-sys-icon-img svg {
    width: 24px; height: 24px;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
}
.boreal-sys-icon-label { font-size: 11px; font-weight: 600; text-align: center; line-height: 1.1; }

.boreal-sys-btn {
    align-items: center;
}
.boreal-sys-btn .boreal-sys-btn-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}
.boreal-sys-btn-label { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.boreal-sys-btn-sub {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.boreal-chevron { width: 16px !important; height: 16px !important; stroke: var(--text-secondary) !important; opacity: 0.7; }

/* Boutons alimentation : Redémarrer / Éteindre côte à côte */
.boreal-power-row { display: flex; gap: 6px; margin-top: 2px; }
.boreal-power-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    cursor: pointer;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.15s ease;
}
.boreal-power-btn svg { width: 20px; height: 20px; stroke: var(--accent); stroke-width: 1.6; fill: none; }
.boreal-power-btn:hover { background: rgba(255, 255, 255, 0.1); }
.boreal-power-danger svg { stroke: #ef4444; }
.boreal-power-danger:hover { background: rgba(239, 68, 68, 0.14); border-color: rgba(239, 68, 68, 0.4); }

.boreal-sys-btn.click-feedback { background: var(--accent) !important; }
.boreal-sys-btn.click-feedback .boreal-sys-btn-label,
.boreal-sys-btn.click-feedback .boreal-sys-btn-sub,
.boreal-sys-btn.click-feedback .boreal-chevron { color: #fff; stroke: #fff !important; }
.boreal-sys-btn.click-feedback svg { stroke: #fff; }

/* ---- Sous-panneau (Réseau / Son) qui glisse par-dessus le panneau ---- */
.boreal-subpanel {
    position: absolute;
    inset: 0;
    background: var(--bg-secondary);
    display: flex;
    flex-direction: column;
    transform: translateX(102%);
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 5;
    border-radius: 16px;
    overflow: hidden;
}
.boreal-subpanel.open { transform: translateX(0); }

.boreal-subpanel-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.boreal-subpanel-back {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    border-radius: 8px;
    border: none;
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
}
.boreal-subpanel-back svg { width: 18px; height: 18px; stroke: var(--text-primary); stroke-width: 2; fill: none; }
.boreal-subpanel-back:hover { background: rgba(255, 255, 255, 0.12); }
.boreal-subpanel-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.boreal-subpanel-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
}

.boreal-net-hint { font-size: 12px; color: var(--text-secondary); text-align: center; padding: 14px 8px; }

/* Connexion courante */
.boreal-net-current {
    display: flex; align-items: center; gap: 12px;
    padding: 12px;
    border-radius: 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}
.boreal-net-current.is-online { border-color: rgba(34, 197, 94, 0.35); }
.boreal-net-current-ico svg { width: 24px; height: 24px; stroke: var(--accent); stroke-width: 1.6; fill: none; }
.boreal-net-current.is-offline .boreal-net-current-ico svg { stroke: #ef4444; }
.boreal-net-current-txt { min-width: 0; }
.boreal-net-current-label { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.boreal-net-current-detail { font-size: 11px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.boreal-net-wifihead {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-secondary);
    padding: 4px 2px 0;
}
.boreal-net-scan {
    display: flex; align-items: center; gap: 5px;
    padding: 5px 10px;
    border-radius: 8px;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    font-size: 11px; font-weight: 600; font-family: inherit;
    cursor: pointer;
}
.boreal-net-scan:hover { background: rgba(255, 255, 255, 0.12); }
.boreal-net-scan svg { width: 14px; height: 14px; stroke: var(--accent); stroke-width: 2; fill: none; }
.boreal-net-scan.spinning svg { animation: borealSpin 0.9s linear infinite; }
@keyframes borealSpin { to { transform: rotate(360deg); } }

.boreal-net-list { display: flex; flex-direction: column; gap: 2px; }

.boreal-wifi-row {
    display: flex; flex-direction: column;
    padding: 10px 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.12s ease;
}
.boreal-wifi-row:hover { background: rgba(255, 255, 255, 0.06); }
.boreal-wifi-row.connecting { opacity: 0.6; pointer-events: none; }
.boreal-wifi-main { display: flex; align-items: center; gap: 10px; }
.boreal-wifi-name { flex: 1; font-size: 13px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boreal-wifi-lock { width: 14px; height: 14px; stroke: var(--text-secondary); stroke-width: 1.6; fill: none; }
.boreal-wifi-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; }
.boreal-wifi-bars i { width: 3px; border-radius: 1px; background: var(--text-secondary); opacity: 0.3; }
.boreal-wifi-bars i:nth-child(1) { height: 5px; }
.boreal-wifi-bars i:nth-child(2) { height: 8px; }
.boreal-wifi-bars i:nth-child(3) { height: 11px; }
.boreal-wifi-bars i:nth-child(4) { height: 14px; }
.boreal-wifi-bars i.on { background: var(--accent); opacity: 1; }

.boreal-wifi-form { display: flex; gap: 6px; margin-top: 8px; }
.boreal-wifi-pass {
    flex: 1;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 13px; font-family: inherit;
}
.boreal-wifi-pass:focus { outline: none; border-color: var(--accent); }
.boreal-wifi-go {
    padding: 8px 14px;
    border-radius: 8px;
    border: none;
    background: var(--accent);
    color: #fff;
    font-size: 12px; font-weight: 600; font-family: inherit;
    cursor: pointer;
}
.boreal-wifi-go:hover { background: var(--accent-hover); }

/* ---- Son : volume + sorties ---- */
.boreal-vol-row { display: flex; align-items: center; gap: 10px; padding: 4px 2px; }
.boreal-vol-mute {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex-shrink: 0;
    border-radius: 8px; border: none;
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
}
.boreal-vol-mute svg { width: 18px; height: 18px; stroke: var(--accent); stroke-width: 1.6; fill: none; }
.boreal-vol-mute.muted svg { stroke: #ef4444; }
.boreal-vol-mute:hover { background: rgba(255, 255, 255, 0.12); }
.boreal-vol-slider {
    flex: 1;
    -webkit-appearance: none; appearance: none;
    height: 6px; border-radius: 3px;
    background: var(--bg-tertiary);
    cursor: pointer;
}
.boreal-vol-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.2);
    cursor: pointer;
}
.boreal-vol-slider::-moz-range-thumb {
    width: 16px; height: 16px; border-radius: 50%; border: none;
    background: var(--accent); cursor: pointer;
}
.boreal-vol-val { font-size: 12px; font-weight: 600; color: var(--text-secondary); min-width: 36px; text-align: right; }

.boreal-audio-outhead {
    font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-secondary); padding: 6px 2px 2px;
}
.boreal-audio-list { display: flex; flex-direction: column; gap: 2px; }
.boreal-audio-out {
    display: flex; align-items: center; gap: 10px;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.12s ease;
}
.boreal-audio-out:hover { background: rgba(255, 255, 255, 0.06); }
.boreal-audio-out svg { width: 18px; height: 18px; stroke: var(--text-secondary); stroke-width: 1.6; fill: none; flex-shrink: 0; }
.boreal-audio-out span { flex: 1; font-size: 13px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boreal-audio-check { opacity: 0; stroke: var(--accent) !important; stroke-width: 2.4 !important; }
.boreal-audio-out.active svg:first-child { stroke: var(--accent); }
.boreal-audio-out.active .boreal-audio-check { opacity: 1; }
.boreal-audio-out.active { background: rgba(74, 158, 255, 0.1); }

.boreal-audio-test {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 6px;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    font-size: 12px; font-weight: 600; font-family: inherit;
    cursor: pointer;
}
.boreal-audio-test:hover { background: rgba(255, 255, 255, 0.1); }
.boreal-audio-test svg { width: 16px; height: 16px; stroke: var(--accent); stroke-width: 1.6; fill: none; }

/* ---- Icône Audio tray + panneau rapide (Boréal OS only) ---- */
.boreal-av-btn {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    flex-shrink: 0;
}
body.is-boreal .boreal-av-btn { display: flex; }
.boreal-av-btn:hover { background: rgba(255, 255, 255, 0.08); }
.boreal-av-btn.active { background: rgba(74, 158, 255, 0.15); }
.boreal-av-btn svg,
.boreal-av-btn-icon {
    width: 20px;
    height: 20px;
    stroke: var(--text-secondary);
    stroke-width: 1.8;
    fill: none;
}
.boreal-av-btn:hover svg,
.boreal-av-btn.active svg { stroke: var(--text-primary); }
.boreal-av-btn.is-muted svg { stroke: #ef4444; }

.boreal-av-panel {
    position: fixed;
    z-index: 120000;
    max-height: min(72vh, 640px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: rgba(22, 22, 28, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: none;
    border-radius: 0;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    transform-origin: bottom center;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    pointer-events: none;
}
.boreal-av-panel.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    animation: osTaskbarSlideUp 0.28s cubic-bezier(0.2, 0, 0, 1) both;
}

/* Bords écran : pas de border sur le côté qui touche le viewport ;
   coins hauts arrondis uniquement s'il reste une marge de ce côté. */
.sysmenu-panel.os-popup-edge-left,
.notification-panel.os-popup-edge-left,
.system-panel.os-popup-edge-left,
.account-panel.os-popup-edge-left,
.auth-panel.os-popup-edge-left,
.boreal-av-panel.os-popup-edge-left {
    border-left: none;
    border-top-left-radius: 0;
}
.sysmenu-panel.os-popup-edge-right,
.notification-panel.os-popup-edge-right,
.system-panel.os-popup-edge-right,
.account-panel.os-popup-edge-right,
.auth-panel.os-popup-edge-right,
.boreal-av-panel.os-popup-edge-right {
    border-right: none;
    border-top-right-radius: 0;
}
.sysmenu-panel.os-popup-edge-top,
.notification-panel.os-popup-edge-top,
.system-panel.os-popup-edge-top,
.account-panel.os-popup-edge-top,
.auth-panel.os-popup-edge-top,
.boreal-av-panel.os-popup-edge-top {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.boreal-av-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}
.boreal-av-panel-title {
    font-size: 13px;
    font-weight: 650;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}
.boreal-av-panel-close {
    width: 28px; height: 28px;
    border: none; border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 18px; line-height: 1;
    cursor: pointer;
}
.boreal-av-panel-close:hover { background: rgba(255,255,255,0.1); color: var(--text-primary); }
.boreal-av-panel-body {
    padding: 10px 12px 14px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.boreal-av-section { display: flex; flex-direction: column; gap: 8px; }
.boreal-av-section-title {
    font-size: 11px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    padding: 0 2px;
}
.boreal-av-hint, .boreal-av-empty {
    font-size: 12px;
    color: var(--text-secondary);
    padding: 8px 4px;
}
.boreal-av-devlist { display: flex; flex-direction: column; gap: 2px; }
.boreal-av-dev {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    font: inherit;
}
.boreal-av-dev:hover { background: rgba(255, 255, 255, 0.06); }
.boreal-av-dev.active { background: rgba(74, 158, 255, 0.12); }
.boreal-av-dev-name {
    flex: 1;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.boreal-av-check {
    width: 16px; height: 16px;
    stroke: var(--accent);
    stroke-width: 2.4;
    fill: none;
    opacity: 0;
    flex-shrink: 0;
}
.boreal-av-dev.active .boreal-av-check { opacity: 1; }

.boreal-av-meter {
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}
.boreal-av-meter-fill {
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, #22c55e, #84cc16);
    transition: width 0.08s linear;
}

.boreal-av-cam-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
    background: #0a0a0e;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.boreal-av-cam-preview video,
.boreal-av-cam-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.boreal-av-cam-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--text-secondary);
    padding: 12px;
    text-align: center;
}

.boreal-av-more {
    margin-top: 2px;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}
.boreal-av-more:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

.boreal-av-osd {
    position: fixed;
    left: 50%;
    bottom: 72px;
    transform: translateX(-50%) translateY(8px);
    z-index: 130000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.boreal-av-osd.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.boreal-av-osd-inner {
    min-width: 160px;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(18, 18, 24, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 28px rgba(0,0,0,0.4);
    backdrop-filter: blur(12px);
}
.boreal-av-osd-label {
    font-size: 13px;
    font-weight: 650;
    color: #fff;
    text-align: center;
    margin-bottom: 8px;
}
.boreal-av-osd-bar {
    height: 5px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    overflow: hidden;
}
.boreal-av-osd-fill {
    height: 100%;
    background: var(--accent, #4a9eff);
    border-radius: inherit;
}

/* ---- Overlay alimentation (spinner = UX loader aurore) ---- */
.boreal-power-overlay {
    position: fixed; inset: 0;
    background: rgba(8, 8, 12, 0.85);
    backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    z-index: 2000000;
    opacity: 0; visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.boreal-power-overlay.open { opacity: 1; visibility: visible; }
.boreal-power-overlay .ux-app-loader-message {
    color: #fff;
    letter-spacing: 0.02em;
}

/* ---- Multi-écran Boréal OS : Recadrage de la bannière de mise à jour système/application ---- */
body.boreal-multiscreen #version-update-banner {
    top: var(--os-primary-top, 0px) !important;
    left: var(--os-primary-left, 0px) !important;
    width: var(--os-primary-width, 100vw) !important;
    right: auto !important;
}

/* Dialogues / overlays centrés : en multi-écran, inset:0 couvre tout le canevas
   (ex. 7040×1440) → le dialogue tombe à cheval entre deux écrans et peut être
   partiellement hors de l'écran principal (inaccessible). On les recadre sur
   l'écran principal, comme la barre des tâches et les panneaux tray. */
body.boreal-multiscreen .ux-dialog-overlay,
body.boreal-multiscreen .os-no-credits-overlay,
body.boreal-multiscreen .boreal-power-overlay {
    inset: auto;
    top: var(--os-primary-top, 0px);
    left: var(--os-primary-left, 0px);
    width: var(--os-primary-width, 100vw);
    height: var(--os-primary-height, 100vh);
    right: auto;
    bottom: auto;
}
body.boreal-multiscreen .ux-dialog {
    max-width: min(480px, calc(var(--os-primary-width, 100vw) - 32px));
    min-width: min(360px, calc(var(--os-primary-width, 100vw) - 32px));
    max-height: min(88vh, calc(var(--os-primary-height, 100vh) * 0.88));
}