/* 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);
    --shadow-glow: 0 0 40px rgba(74, 158, 255, 0.15);
    --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;
}

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

.desktop.grid-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;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease-out, box-shadow 0.2s 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;
    transition: filter 0.15s ease-out;
}
.app-icon-image svg[fill="none"] {
    stroke: white;
    stroke-width: 1.5;
    fill: none;
}
.app-icon-image svg[fill="currentColor"] {
    fill: white;
}

.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;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

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

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

/* 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 {
    right: calc(100vw - var(--os-primary-left, 0px) - var(--os-primary-width, 100vw) + 16px);
    bottom: calc(var(--taskbar-height) + 12px + var(--os-primary-bottom, 0px));
}
body.boreal-multiscreen .account-panel {
    right: calc(100vw - var(--os-primary-left, 0px) - var(--os-primary-width, 100vw) + 100px);
    bottom: calc(var(--taskbar-height) + 12px + var(--os-primary-bottom, 0px));
}

/* Panneau de connexion (auth) : même réancrage que les panneaux du tray
   (base : right:60px / bottom:taskbar+12px 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) + 12px + 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;
    transition: all 0.15s ease;
    position: relative;
    flex-shrink: 0;
}

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

.taskbar-desktop-btn:active {
    transform: scale(0.95);
}

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

/* 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 INVITE - Bureau vide
   Grands cercles multicolores sur le fond
   Positionné EN DESSOUS de la taskbar
   Animation économe en ressources (cycle 6s)
   ======================================== */

/* 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 */
.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;
    will-change: transform, opacity;
    animation: pulseRingLarge 36s ease-out infinite;
}

/* 24 couleurs réparties sur le spectre - délai de 1.5s entre chaque */
.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; }
.desktop-pulse-overlay .pulse-ring:nth-child(11) { border-color: hsla(20, 90%, 58%, 0.6); box-shadow: 0 0 12px hsla(20, 90%, 58%, 0.35); animation-delay: 15s; }
.desktop-pulse-overlay .pulse-ring:nth-child(12) { border-color: hsla(35, 95%, 55%, 0.6); box-shadow: 0 0 12px hsla(35, 95%, 55%, 0.35); animation-delay: 16.5s; }
.desktop-pulse-overlay .pulse-ring:nth-child(13) { border-color: hsla(45, 95%, 55%, 0.6); box-shadow: 0 0 12px hsla(45, 95%, 55%, 0.35); animation-delay: 18s; }
.desktop-pulse-overlay .pulse-ring:nth-child(14) { border-color: hsla(55, 85%, 55%, 0.6); box-shadow: 0 0 12px hsla(55, 85%, 55%, 0.35); animation-delay: 19.5s; }
.desktop-pulse-overlay .pulse-ring:nth-child(15) { border-color: hsla(75, 70%, 50%, 0.6); box-shadow: 0 0 12px hsla(75, 70%, 50%, 0.35); animation-delay: 21s; }
.desktop-pulse-overlay .pulse-ring:nth-child(16) { border-color: hsla(100, 65%, 50%, 0.6); box-shadow: 0 0 12px hsla(100, 65%, 50%, 0.35); animation-delay: 22.5s; }
.desktop-pulse-overlay .pulse-ring:nth-child(17) { border-color: hsla(130, 60%, 50%, 0.6); box-shadow: 0 0 12px hsla(130, 60%, 50%, 0.35); animation-delay: 24s; }
.desktop-pulse-overlay .pulse-ring:nth-child(18) { border-color: hsla(155, 70%, 45%, 0.6); box-shadow: 0 0 12px hsla(155, 70%, 45%, 0.35); animation-delay: 25.5s; }
.desktop-pulse-overlay .pulse-ring:nth-child(19) { border-color: hsla(170, 75%, 45%, 0.6); box-shadow: 0 0 12px hsla(170, 75%, 45%, 0.35); animation-delay: 27s; }
.desktop-pulse-overlay .pulse-ring:nth-child(20) { border-color: hsla(180, 70%, 48%, 0.6); box-shadow: 0 0 12px hsla(180, 70%, 48%, 0.35); animation-delay: 28.5s; }
.desktop-pulse-overlay .pulse-ring:nth-child(21) { border-color: hsla(190, 80%, 50%, 0.6); box-shadow: 0 0 12px hsla(190, 80%, 50%, 0.35); animation-delay: 30s; }
.desktop-pulse-overlay .pulse-ring:nth-child(22) { border-color: hsla(200, 85%, 55%, 0.6); box-shadow: 0 0 12px hsla(200, 85%, 55%, 0.35); animation-delay: 31.5s; }
.desktop-pulse-overlay .pulse-ring:nth-child(23) { border-color: hsla(195, 90%, 50%, 0.6); box-shadow: 0 0 12px hsla(195, 90%, 50%, 0.35); animation-delay: 33s; }
.desktop-pulse-overlay .pulse-ring:nth-child(24) { border-color: hsla(205, 95%, 60%, 0.6); box-shadow: 0 0 12px hsla(205, 95%, 60%, 0.35); animation-delay: 34.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;
    /* 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);
}

/* Flèche indicatrice */
.mini-grid-popup::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--bg-primary);
}

/* 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 - ses dimensions correspondent au contenu scalé */
.mini-grid-scaler {
    /* Dimensions définies par JS pour correspondre au container après scale */
    position: relative;
}

/* 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 du popup mini-grille */
.mini-grid-popup::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.mini-grid-popup::-webkit-scrollbar-track {
    background: var(--bg-secondary, #161b22);
}

.mini-grid-popup::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #4a9eff, #60a5fa);
    border: 2px solid var(--bg-secondary, #161b22);
    border-radius: 0;
}

.mini-grid-popup::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #60a5fa, #4a9eff);
}

.mini-grid-popup::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !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;
    transition: all 0.15s 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;
}

.taskbar-app-icon svg {
    width: 14px;
    height: 14px;
}
.taskbar-app-icon svg[fill="none"] {
    stroke: white;
    stroke-width: 1.5;
    fill: none;
}
.taskbar-app-icon svg[fill="currentColor"] {
    fill: white;
}

.taskbar-app-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.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;
    transition: background 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 */
.windows-container {
    position: fixed;
    top: 0;
    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;
    border: 1px solid rgba(255, 255, 255, 0.1);
    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.maximized {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0;
}

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

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

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

.window-title {
    flex: 1;
    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;
}

.window-title-icon svg {
    width: 12px;
    height: 12px;
}
.window-title-icon svg[fill="none"] {
    stroke: white;
    stroke-width: 1.5;
    fill: none;
}
.window-title-icon svg[fill="currentColor"] {
    fill: white;
}

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

.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;
    transition: all 0.15s 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;
}

/* Bouton capture - caché par défaut, affiché si extension disponible */
.window-btn.capture {
    display: none !important;
}

.window-btn.capture.visible {
    display: flex !important;
    background: rgba(74, 158, 255, 0.1);
}

.window-btn.capture:hover {
    background: rgba(74, 158, 255, 0.25);
}

.window-btn.capture svg {
    stroke: #4a9eff;
}

.window-btn.capture:hover svg {
    stroke: #6bb3ff;
}

.window-btn.capture.capturing {
    animation: pulse-capture 0.8s ease-in-out infinite;
}

.window-btn.capture.success {
    background: rgba(34, 197, 94, 0.25);
    animation: flash-success 0.3s ease-out;
}

.window-btn.capture.success svg {
    stroke: #22c55e;
}

.window-btn.capture.error {
    background: rgba(239, 68, 68, 0.25);
    animation: shake-error 0.4s ease-out;
}

.window-btn.capture.error svg {
    stroke: #ef4444;
}

@keyframes pulse-capture {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.9); opacity: 0.7; }
}

@keyframes flash-success {
    0% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

@keyframes shake-error {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-3px); }
    40%, 80% { transform: translateX(3px); }
}

/* Flash de capture d'écran sur le contenu intérieur de la fenêtre */
.app-window.capture-flash .window-content::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    pointer-events: none;
    z-index: 9999;
    animation: windowCaptureFlash 0.3s ease-out forwards;
}

.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: 18px;
    overflow: visible;
}

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

.app-window.window-chromeless .window-content {
    background: transparent;
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
        0 16px 50px rgba(0, 0, 0, 0.55),
        0 4px 16px rgba(0, 0, 0, 0.45);
}

.app-window.window-chromeless .window-content iframe {
    background: transparent;
}

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

[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  -  Bandeaux d'information dockes a une fenetre OS
   ----------------------------------------------------------------------------
   Inseres dans .app-window (entre header et content, ou apres content) par
   os/infobar.js. La fenetre OS est agrandie en consequence si la place est
   disponible dans le viewport ; sinon .window-content (flex:1) se retrecit.
   La bar n'est JAMAIS superposee au contenu de l'app.
   ============================================================================ */
.os-infobar-stack {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    background: transparent;
    pointer-events: auto;
    z-index: 2;
}

.os-infobar-stack--bottom {
    flex-direction: column-reverse;
}

.os-infobar {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 0 14px;
    background: var(--bg-tertiary, #1a1a22);
    color: var(--text-primary, #f0f0f5);
    font-size: 13px;
    line-height: 1.4;
    border-left: 3px solid var(--ux-info, #3b82f6);
    box-sizing: border-box;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity .18s ease, max-height .22s ease, padding-top .22s ease, padding-bottom .22s ease;
    user-select: none;
}

.os-infobar-stack--top .os-infobar {
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.08));
}

.os-infobar-stack--bottom .os-infobar {
    border-top: 1px solid var(--border-color, rgba(255,255,255,0.08));
}

/* Etat transitoire pour mesurer la hauteur cible avant l'animation */
.os-infobar.os-infobar--measuring {
    opacity: 0;
    max-height: none;
    padding-top: 9px;
    padding-bottom: 9px;
    transition: none;
}

.os-infobar--visible {
    opacity: 1;
    max-height: 200px;
    padding-top: 9px;
    padding-bottom: 9px;
}

.os-infobar--leaving {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 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;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s ease, color .15s ease;
}
.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); }

@keyframes windowCaptureFlash {
    0% {
        opacity: 0.9;
    }
    40% {
        opacity: 0.5;
    }
    100% {
        opacity: 0;
    }
}

/* ==========================================
   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);
    animation: beta-pulse 2s ease-in-out infinite;
}

@keyframes beta-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

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

.window-content iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: #000;
}

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

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

/* 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 personnalisé */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary, #161b22);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.3));
    border: 2px solid var(--bg-secondary, #161b22);
    border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2));
}

::-webkit-scrollbar-corner {
    background: var(--bg-secondary, #161b22);
}

/* Supprimer TOUTES les flèches de scrollbar */
::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: none !important;
    background-color: transparent !important;
}

::-webkit-scrollbar-button:single-button {
    display: none !important;
    background: transparent !important;
}

::-webkit-scrollbar-button:single-button:vertical:decrement,
::-webkit-scrollbar-button:single-button:vertical:increment,
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment,
::-webkit-scrollbar-button:vertical:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment,
::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: none !important;
}

/* ===== Notifications ===== */
.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;
    transition: all 0.2s ease;
}

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

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

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

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

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

.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;
    bottom: calc(var(--taskbar-height) + 12px);
    right: 16px; /* Au-dessus de l'icône notification (à droite) */
    width: 380px;
    max-height: 500px;
    background: var(--bg-secondary);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: none;
    flex-direction: column;
    overflow: hidden;
    animation: panelOpen 0.2s ease-out;
}

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

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

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

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

.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: var(--text-secondary);
    stroke-width: 1;
    fill: none;
    opacity: 0.5;
    margin-bottom: 12px;
}

/* 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: white;
    stroke-width: 1.5;
    fill: none;
}

.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 {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.os-dialog-close:hover {
    background: rgba(239, 68, 68, 0.2);
}

.os-dialog-close svg {
    width: 16px;
    height: 16px;
    stroke: var(--text-secondary);
    stroke-width: 2;
    fill: none;
}

.os-dialog-close:hover svg {
    stroke: #ef4444;
}

.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-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: calc(var(--taskbar-height) + 12px);
    right: 16px;
    width: 300px;
    background: var(--bg-secondary);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: none;
    flex-direction: column;
    overflow: hidden;
    animation: panelOpen 0.2s ease-out;
}

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

.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;
    transition: all 0.15s ease;
    text-align: left;
}

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

.system-panel-btn:active {
    transform: scale(0.98);
}

.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;
    transition: all 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) + 12px);
    right: 100px;
    width: 320px;
    max-height: 520px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    z-index: 10001;
    display: none;
    flex-direction: column;
    overflow: hidden;
    animation: panelOpen 0.2s ease-out;
}

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

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

.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-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

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

/* Section Comptes récents (switch rapide) */
.account-recent-section {
    padding: 0 12px 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;
    -webkit-user-select: none;
    user-select: none;
}

.account-recent-item:hover {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.3);
}

.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 0;
    border: none;
    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;
}

.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: 8px;
        left: 8px;
        width: auto;
        max-width: none;
        bottom: 60px;
    }
}

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

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

/* ========== TABLET (max-width: 768px) ========== */
@media (max-width: 768px) {
    /* Cacher la mini-grille popup sur tablettes et mobiles */
    .mini-grid-popup {
        display: none !important;
    }
    
    /* Desktop: grille adaptée pour tablette */
    .desktop {
        padding: 20px;
        grid-template-columns: repeat(auto-fill, 85px);
        grid-template-rows: repeat(auto-fill, 100px);
        gap: 12px;
    }
    
    /* Icônes légèrement plus petites */
    .app-icon-image {
        width: 50px;
        height: 50px;
        border-radius: 12px;
    }
    
    .app-icon-image svg {
        width: 24px;
        height: 24px;
    }
    
    .app-icon-label {
        font-size: 11px;
        max-width: 80px;
    }
    
    /* 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;
    }
    
    /* Bouton close plus grand et visible */
    .window-btn.close {
        width: 36px;
        height: 36px;
    }
    
    /* Taskbar adaptée */
    .taskbar {
        padding: 0 8px;
        height: 52px;
    }
    
    .taskbar-apps {
        gap: 2px;
        padding: 0 8px;
    }
    
    /* Bouton desktop plus petit */
    .taskbar-desktop-btn {
        height: 40px;
        min-width: 40px;
        padding: 0 10px;
    }
    
    .taskbar-desktop-btn svg {
        width: 18px;
        height: 18px;
    }
    
    /* Taskbar items: afficher uniquement l'icône */
    .taskbar-app {
        padding: 0 10px;
        height: 40px;
        min-width: 40px;
    }
    
    .taskbar-app-title {
        display: none;
    }
    
    /* System tray compact */
    .system-tray {
        padding: 6px 10px;
        gap: 6px;
    }
    
    /* Panel notifications responsive */
    .notification-panel {
        right: 8px;
        left: 8px;
        width: auto;
        max-width: none;
        bottom: 60px;
    }
    
    /* System panel responsive */
    .system-panel {
        right: 8px;
        left: 8px;
        width: auto;
        max-width: none;
        bottom: 60px;
    }
}

/* ========== MOBILE (max-width: 480px) ========== */
@media (max-width: 480px) {
    /* Desktop: grille compacte */
    .desktop {
        padding: 16px;
        grid-template-columns: repeat(auto-fill, 75px);
        grid-template-rows: repeat(auto-fill, 90px);
        gap: 8px;
    }
    
    /* Icônes encore plus compactes */
    .app-icon {
        padding: 8px 4px;
    }
    
    .app-icon-image {
        width: 46px;
        height: 46px;
        margin-bottom: 6px;
    }
    
    .app-icon-image svg {
        width: 22px;
        height: 22px;
    }
    
    .app-icon-label {
        font-size: 10px;
        max-width: 70px;
    }
    
    /* Barre de titre encore plus compacte */
    .window-header {
        height: 44px;
    }
    
    .window-title-text {
        font-size: 12px;
        max-width: 150px;
    }
    
    /* Taskbar mobile */
    .taskbar {
        height: 48px;
        padding: 0 6px;
    }
    
    .taskbar-app {
        height: 36px;
        min-width: 36px;
        padding: 0 8px;
    }
    
    .taskbar-app-icon {
        width: 22px;
        height: 22px;
    }
    
    .taskbar-app-icon svg {
        width: 12px;
        height: 12px;
    }
    
    /* Bouton desktop mobile */
    .taskbar-desktop-btn {
        height: 36px;
        min-width: 36px;
        padding: 0 8px;
    }
    
    .taskbar-desktop-btn svg {
        width: 16px;
        height: 16px;
    }
    
    /* 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-app:hover {
        background: rgba(255, 255, 255, 0.06);
    }
    
    .taskbar-app:active {
        background: rgba(255, 255, 255, 0.12);
    }
    
    /* Zones de touch plus grandes */
    .window-btn {
        min-width: 36px;
        min-height: 36px;
    }
}

/* ========== SAFE AREA (iPhone Notch, etc.) ========== */
@supports (padding: max(0px)) {
    .taskbar {
        padding-bottom: max(0px, env(safe-area-inset-bottom));
        padding-left: max(8px, env(safe-area-inset-left));
        padding-right: max(8px, env(safe-area-inset-right));
    }
    
    .desktop {
        padding-top: max(20px, env(safe-area-inset-top));
    }
}

/* ========== EXTENSION ASSISTANT MODAL ========== */
.extension-assistant-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.extension-assistant-modal.visible {
    opacity: 1;
}

.extension-assistant-modal .assistant-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.extension-assistant-modal .assistant-dialog {
    position: relative;
    background: linear-gradient(165deg, #1a1a25 0%, #12121a 100%);
    border: 1px solid rgba(74, 158, 255, 0.3);
    border-radius: 16px;
    max-width: 520px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 
        0 24px 48px rgba(0, 0, 0, 0.4),
        0 0 60px rgba(74, 158, 255, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.extension-assistant-modal.visible .assistant-dialog {
    transform: translateY(0);
}

.extension-assistant-modal .assistant-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 1;
}

.extension-assistant-modal .assistant-close svg {
    width: 18px;
    height: 18px;
    stroke: var(--text-secondary);
}

.extension-assistant-modal .assistant-close:hover {
    background: rgba(239, 68, 68, 0.2);
}

.extension-assistant-modal .assistant-close:hover svg {
    stroke: #ef4444;
}

.extension-assistant-modal .assistant-header {
    padding: 24px 24px 16px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.extension-assistant-modal .assistant-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.extension-assistant-modal .assistant-icon.info {
    background: linear-gradient(135deg, rgba(74, 158, 255, 0.2), rgba(74, 158, 255, 0.1));
    color: #4a9eff;
}

.extension-assistant-modal .assistant-icon.warning {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(251, 191, 36, 0.1));
    color: #fbbf24;
}

.extension-assistant-modal .assistant-icon.success {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.1));
    color: #22c55e;
}

.extension-assistant-modal .assistant-icon svg {
    width: 28px;
    height: 28px;
    stroke: currentColor;
}

.extension-assistant-modal .assistant-header h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.extension-assistant-modal .assistant-body {
    padding: 20px 24px 24px;
}

.extension-assistant-modal .assistant-body p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 16px;
}

.extension-assistant-modal .error-detail {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.85rem;
    color: #fca5a5;
    font-family: 'DM Mono', monospace;
}

.extension-assistant-modal .assistant-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 20px 0;
}

.extension-assistant-modal .assistant-step {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.extension-assistant-modal .step-num {
    width: 28px;
    height: 28px;
    min-width: 28px;
    background: var(--accent-gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
    color: white;
}

.extension-assistant-modal .step-content {
    flex: 1;
}

.extension-assistant-modal .step-content strong {
    display: block;
    color: var(--text-primary);
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.extension-assistant-modal .step-hint {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 6px;
    margin-bottom: 0;
}

.extension-assistant-modal .btn-assistant-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--accent-gradient);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.extension-assistant-modal .btn-assistant-action svg {
    width: 16px;
    height: 16px;
}

.extension-assistant-modal .btn-assistant-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(74, 158, 255, 0.3);
}

.extension-assistant-modal .btn-assistant-action.secondary {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.extension-assistant-modal .btn-assistant-action.secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: none;
}

.extension-assistant-modal .assistant-alt {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.extension-assistant-modal .assistant-alt p {
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.extension-assistant-modal .assistant-alt ul {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
}

.extension-assistant-modal .assistant-alt li {
    position: relative;
    padding-left: 16px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 6px;
}

.extension-assistant-modal .assistant-alt li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--accent-blue);
}

.extension-assistant-modal .capture-preview {
    text-align: center;
    margin: 16px 0;
}

/* Scrollbar pour le modal */
.extension-assistant-modal .assistant-dialog::-webkit-scrollbar {
    width: 8px;
}

.extension-assistant-modal .assistant-dialog::-webkit-scrollbar-track {
    background: transparent;
}

.extension-assistant-modal .assistant-dialog::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0;
}

/* ============================================
   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) + 12px);
    right: 60px;
    width: 320px;
    background: #12121a;
    border-radius: 16px;
    border: 1px solid rgba(var(--ab-rgb), 0.4);
    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;
    animation: panelOpen 0.2s ease-out;
}

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

.auth-panel-header {
    padding: 16px 20px 12px;
    text-align: center;
    border-bottom: 1px solid rgba(var(--ab-rgb), 0.2);
}

.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;
    margin-bottom: 12px;
}

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

.auth-message.success {
    display: block;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #6ee7b7;
}

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

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

.auth-pin-input:focus {
    outline: none;
    border-color: var(--ab);
}

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

/* ============================================
   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 .app-window,
.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;
}

/* ============================================
   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 {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 6px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
}

.accent-swatch {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    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;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

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

.accent-swatch-check {
    width: 12px;
    height: 12px;
    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: #35384a;
    --bg-secondary: #2e3142;
    --bg-tertiary: #282b3c;
    --bg-glass: rgba(46, 49, 64, 0.85);
    --text-primary: #e0e2ec;
    --text-secondary: #9a9cb0;
    --accent-blue: #4a9eff;
    --accent-purple: #8b5cf6;
    --accent-gradient: linear-gradient(135deg, #4a9eff 0%, #8b5cf6 100%);
    --border-color: rgba(255, 255, 255, 0.10);
    --shadow-glow: 0 0 40px rgba(0, 0, 0, 0.08);
}

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

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

[data-theme="light"] .desktop {
    background: 
        radial-gradient(ellipse at 20% 20%, rgba(74, 158, 255, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(139, 92, 246, 0.06) 0%, transparent 50%),
        var(--bg-primary);
}

[data-theme="light"] .taskbar {
    background: rgba(46, 49, 64, 0.85);
    border-top: 1px solid var(--border);
}

[data-theme="light"] .taskbar-app {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .taskbar-app:hover {
    background: rgba(255, 255, 255, 0.10);
}

[data-theme="light"] .taskbar-app.active {
    background: rgba(43, 125, 233, 0.12);
    border-color: rgba(43, 125, 233, 0.35);
    box-shadow: 0 0 12px rgba(43, 125, 233, 0.15);
}

[data-theme="light"] .taskbar-app.active:hover {
    background: rgba(43, 125, 233, 0.18);
    border-color: rgba(43, 125, 233, 0.45);
}

[data-theme="light"] .taskbar-app-title {
    color: var(--text-primary);
}

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

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

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

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

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

[data-theme="light"] .app-window.dragging {
    box-shadow: 
        0 0 0 3px rgba(0, 0, 0, 0.7),
        0 0 20px rgba(0, 0, 0, 0.15),
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 16px 64px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .app-window.preview-highlight {
    box-shadow: 
        0 0 0 2px rgba(0, 0, 0, 0.3),
        0 0 8px rgba(0, 0, 0, 0.08),
        0 4px 12px rgba(0, 0, 0, 0.2),
        0 8px 24px rgba(0, 0, 0, 0.15);
}

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

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

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

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

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

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

[data-theme="light"] .system-tray:hover {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .system-tray.active {
    background: rgba(43, 125, 233, 0.1);
}

/* ---- 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"] .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-item:hover {
    background: #ede9fe;
    border-color: #c4b5fd;
}

[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 {
    text-shadow: none;
    color: var(--text-primary);
}

[data-theme="light"] .app-icon:hover {
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="light"] .notification-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .account-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

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

/* Scrollbar en mode clair */
[data-theme="light"] ::-webkit-scrollbar-track {
    background: var(--scrollbar-track, var(--bg-secondary));
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--scrollbar-thumb, rgba(255,255,255,0.15)), var(--scrollbar-thumb-hover, rgba(255,255,255,0.20)));
    border: 2px solid var(--scrollbar-track, var(--bg-secondary));
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--scrollbar-thumb-hover, rgba(255,255,255,0.25)), var(--scrollbar-thumb, rgba(255,255,255,0.15)));
}

/* ========================================
   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; }
body.silo-locked .desktop-pulse-overlay .pulse-ring:nth-child(11) { animation-delay: 16.5s; }
body.silo-locked .desktop-pulse-overlay .pulse-ring:nth-child(12) { animation-delay: 18s; }
body.silo-locked .desktop-pulse-overlay .pulse-ring:nth-child(13) { animation-delay: 19.5s; }
body.silo-locked .desktop-pulse-overlay .pulse-ring:nth-child(14) { animation-delay: 21s; }
body.silo-locked .desktop-pulse-overlay .pulse-ring:nth-child(15) { animation-delay: 22.5s; }
body.silo-locked .desktop-pulse-overlay .pulse-ring:nth-child(16) { animation-delay: 24s; }
body.silo-locked .desktop-pulse-overlay .pulse-ring:nth-child(17) { animation-delay: 25.5s; }
body.silo-locked .desktop-pulse-overlay .pulse-ring:nth-child(18) { animation-delay: 27s; }
body.silo-locked .desktop-pulse-overlay .pulse-ring:nth-child(19) { animation-delay: 28.5s; }
body.silo-locked .desktop-pulse-overlay .pulse-ring:nth-child(20) { animation-delay: 30s; }
body.silo-locked .desktop-pulse-overlay .pulse-ring:nth-child(21) { animation-delay: 31.5s; }
body.silo-locked .desktop-pulse-overlay .pulse-ring:nth-child(22) { animation-delay: 33s; }
body.silo-locked .desktop-pulse-overlay .pulse-ring:nth-child(23) { animation-delay: 34.5s; }
body.silo-locked .desktop-pulse-overlay .pulse-ring:nth-child(24) { animation-delay: 36s; }

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

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

[data-theme="light"] .auth-form-input {
    background: rgba(124, 58, 237, 0.06);
    border-color: rgba(124, 58, 237, 0.2);
    color: var(--text-primary);
}

/* 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:active,
.boreal-sys-icon.click-feedback { transform: scale(0.95); background: var(--accent); border-color: var(--accent); }
.boreal-sys-icon.click-feedback .boreal-sys-icon-img svg,
.boreal-sys-icon.click-feedback .boreal-sys-icon-label { color: #fff; stroke: #fff; }
.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-btn:active { transform: scale(0.97); }
.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; }

/* ---- Overlay alimentation ---- */
.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-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.boreal-power-overlay-text { font-size: 15px; font-weight: 500; color: #fff; letter-spacing: 0.02em; }
.boreal-power-spinner {
    width: 44px; height: 44px;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: borealSpin 0.8s linear infinite;
}