/* Styles pour le conteneur principal des widgets */
#widget-container {
    position: relative; /* Nécessaire pour le positionnement absolu des widgets */
    width: 100%;
    height: 100vh; /* Prend toute la hauteur de la vue */
    background-color: transparent; /* Le fond du body est déjà défini */
    overflow: hidden; /* Empêche le débordement initial */

    --grid-size: 20px; /* Taille de la grille */
    /* La grille est déplacée vers .grid-active */
}

/* Classe pour activer la grille visuelle */
#widget-container.grid-active {
    background-image: linear-gradient(to right, rgba(128, 128, 128, 0.2) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(128, 128, 128, 0.2) 1px, transparent 1px);
    background-size: var(--grid-size) var(--grid-size);
}

/* Style générique pour un widget */
.widget {
    position: absolute !important; /* !important pour tester si qqc surcharge */
    min-width: 200px; /* Largeur minimale */
    min-height: 100px; /* Hauteur minimale */
    background-color: var(--widget-background, var(--neutral-color-medium)); /* Utilise variable spécifique ou fallback neutre */
    border: var(--border-base, 1px solid var(--neutral-color-grey));
    border-radius: var(--border-radius-base, 4px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombre portée */
    color: var(--widget-text-color, var(--neutral-color-light));
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    /* Ajout pour positionner la poignée */
    position: relative; 
    /* Transition pour redimensionnement/déplacement fluide (peut être ajusté) */
    /* transition: transform 0.1s ease-out, width 0.1s ease-out, height 0.1s ease-out; */
}

/* Poignée de redimensionnement */
.widget::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 15px;
    height: 15px;
    background-color: rgba(255, 255, 255, 0.3); /* Semi-transparent pour la visibilité */
    border: 1px solid var(--widget-border-color, var(--neutral-color-grey));
    border-radius: 0 0 var(--border-radius-base, 4px) 0; /* Arrondi seulement le coin extérieur */
    cursor: nwse-resize; /* Curseur de redimensionnement diagonal */
    z-index: 5; /* Au-dessus du contenu mais sous le widget sélectionné */
}

/* Spécifique : forcer le widget burger à une taille carrée */
#widget-burger {
    width: 90px !important;
    height: 90px !important;
    min-width: 90px !important;
    min-height: 90px !important;
}

/* Cacher la poignée pour le widget burger */
#widget-burger::after {
    display: none;
}

/* Cacher aussi la barre de titre du widget burger */
#widget-burger .widget-titlebar {
    display: none;
}

/* Forcer le contenu du widget burger à ne pas avoir de padding et ne pas s'étirer */
#widget-burger .widget-content {
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 0;
}

/* Style spécifique pour le bouton burger */
#widget-burger .widget-content #burger-button {
    width: 90px;
    height: 90px;
    font-size: 2.4em; /* Agrandi proportionnellement */
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* Barre de titre du widget */
.widget-titlebar {
    background-color: var(--widget-titlebar-background, var(--neutral-color-dark));
    padding: 5px 10px;
    cursor: move; /* Curseur pour indiquer qu'on peut déplacer */
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: var(--border-base, 1px solid var(--neutral-color-grey));
    user-select: none; /* Empêche la sélection du texte pendant le drag */
}

.widget-title {
    font-weight: bold;
    font-size: 0.9em;
    flex-grow: 1;
    margin-right: 10px;
    /* Permet l'édition au clic (via contenteditable) */
    cursor: text;
}

.widget-controls button {
    background: none;
    border: none;
    color: var(--widget-text-color, var(--neutral-color-light));
    font-size: 1em;
    margin-left: 5px;
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
}

.widget-controls button:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Contenu du widget */
.widget-content {
    padding: 10px;
    flex-grow: 1; /* Prend l'espace restant */
    overflow-y: auto; /* Ajoute une barre de défilement si nécessaire */
    /* Styles spécifiques au contenu iront ici ou dans des classes dédiées */
}

/* Styles pour le widget réduit */
.widget.minimized .widget-content {
    display: none;
}

.widget.minimized {
    min-height: auto;
    height: auto !important; /* Force la hauteur à s'adapter à la barre de titre */
}

/* Style pour la sélection (ajouté par JS au clic) */
.widget.selected {
    outline: 2px solid dodgerblue; /* Ou une autre couleur définie par variable */
    outline-offset: 2px;
    z-index: 10; /* Mettre le widget sélectionné au-dessus */
    /* S'assurer que la poignée reste visible même avec l'outline */
    /* overflow: visible; /* Peut causer des problèmes, alternative: ajuster l'outline */
}

/* Styles pour les messages du chat Twitch (widget CODEC) */
#widget-codec .widget-content div {
    margin-bottom: 4px;
}
#widget-codec .widget-content .time {
    font-size: 0.75em;
    color: var(--neutral-color-light);
    margin-right: 6px;
    opacity: 0.8;
}
#widget-codec .widget-content .status {
    font-size: 0.75em;
    color: #f1c40f; /* Couleur pour le statut MOD */
    margin-left: 4px;
}

.widget-grid-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 50;
    border-radius: inherit;
    mix-blend-mode: lighten;
    opacity: 1;
}

/* Grilles fines et créatives pour overlay */
.widget-grid-overlay.grid-fine-lines {
    background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.08) 1px, transparent 18px),
                      repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 18px) !important;
    background-size: 20px 20px !important;
    background-repeat: repeat !important;
    background-blend-mode: lighten;
}
.widget-grid-overlay.grid-dots {
    background-image: radial-gradient(circle, rgba(255,255,255,0.10) 1.5px, transparent 3px) !important;
    background-size: 18px 18px !important;
    background-repeat: repeat !important;
    background-blend-mode: lighten;
}
.widget-grid-overlay.grid-cross {
    background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.07) 1px, transparent 16px),
                      repeating-linear-gradient(-45deg, rgba(255,255,255,0.07) 1px, transparent 16px) !important;
    background-size: 22px 22px !important;
    background-repeat: repeat !important;
    background-blend-mode: lighten;
}
.widget-grid-overlay.grid-waves {
    background-image: repeating-radial-gradient(circle at 0 50%, rgba(255,255,255,0.06) 1px, transparent 8px) !important;
    background-size: 40px 20px !important;
    background-repeat: repeat !important;
    background-blend-mode: lighten;
}
.widget-grid-overlay.grid-hex {
    background-image: url('data:image/svg+xml;utf8,<svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg"><polygon points="12,2 22,7 22,17 12,22 2,17 2,7" stroke="white" stroke-width="0.7" fill="none" opacity="0.08"/></svg>') !important;
    background-size: 24px 20px !important;
    background-repeat: repeat !important;
    background-blend-mode: lighten;
}
.widget-grid-overlay.grid-mesh {
    background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.06) 1px, transparent 12px),
                      repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 12px) !important;
    background-size: 14px 14px !important;
    background-repeat: repeat !important;
    background-blend-mode: lighten;
}
.widget-grid-overlay.grid-circles {
    background-image: repeating-radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 10px) !important;
    background-size: 28px 28px !important;
    background-repeat: repeat !important;
    background-blend-mode: lighten;
}
.widget-grid-overlay.grid-diagonal {
    background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.09) 1px, transparent 14px) !important;
    background-size: 16px 16px !important;
    background-repeat: repeat !important;
    background-blend-mode: lighten;
}
.widget-grid-overlay.grid-pixels {
    background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.06) 1px, transparent 8px),
                      repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 8px) !important;
    background-size: 10px 10px !important;
    background-repeat: repeat !important;
    background-blend-mode: lighten;
}
.widget-grid-overlay.grid-rings {
    background-image: repeating-radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 12px) !important;
    background-size: 32px 32px !important;
    background-repeat: repeat !important;
    background-blend-mode: lighten;
}

/* === Styles spécifiques au thème Metal Gear Solid 1 pour Widgets === */

/* Widget CODEC MGS1 */
body.theme-mgs1 #widget-codec .widget-content {
    background-color: var(--mgs-near-black, #0F1210);
    border: 2px solid var(--mgs-codec-blue-darker, #3A6F8F);
    box-shadow: inset 0 0 15px rgba(var(--mgs-codec-blue-rgb, 96, 160, 192), 0.4), /* Lueur interne bleue */
                inset 0 0 25px rgba(var(--mgs-codec-blue-rgb, 96, 160, 192), 0.3); /* Lueur interne plus diffuse */
    padding: 12px;
    font-family: var(--codec-font, monospace);
    color: var(--mgs-codec-text, #9DD8FF);
    border-radius: 0 0 0 0; /* S'assurer que le rayon du widget ne l'affecte pas si différent */
    overflow-y: auto; /* Garder le scroll */
    /* Effet de scanline spécifique au contenu du codec */
    background-image: var(--scanline-overlay-weak);
}

/* Messages dans le CODEC MGS1 */
body.theme-mgs1 #widget-codec .widget-content div {
    margin-bottom: 5px;
    line-height: 1.4;
    /* Retirer tout fond ou bordure par défaut sur les messages eux-mêmes */
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
}

body.theme-mgs1 #widget-codec .widget-content .time {
    font-size: 0.8em; /* Un peu plus lisible */
    color: var(--mgs-light-green-desat, #88A290);
    opacity: 0.75;
    margin-right: 8px;
}

body.theme-mgs1 #widget-codec .widget-content strong {
    /* La couleur est gérée par TMI, on ajoute juste la lueur */
    text-shadow: 0 0 4px currentColor, 0 0 6px currentColor; /* Lueur basée sur la couleur du pseudo */
    font-weight: normal; /* La police codec est souvent déjà assez "bold" */
}

body.theme-mgs1 #widget-codec .widget-content .status {
    font-size: 0.8em;
    color: var(--mgs-caution-orange, #D08040); /* Statut en orange pour contraster */
    text-shadow: 0 0 3px var(--mgs-caution-orange, #D08040);
    margin-left: 5px;
    font-weight: bold;
}

/* Optionnel: Animation de "typing" ou de rafraîchissement pour le codec */
@keyframes codecScan {
    0% { background-position: 0 0; }
    100% { background-position: 0 10px; } /* Défilement vertical des scanlines */
}

body.theme-mgs1 #widget-codec .widget-content {
    /* Appliquer une animation de scanline un peu plus visible ou différente */
    /* background-image: repeating-linear-gradient(
        transparent,
        transparent 1px,
        rgba(var(--mgs-codec-blue-rgb,96,160,192), 0.07) 2px, 
        rgba(var(--mgs-codec-blue-rgb,96,160,192), 0.07) 3px
    ); 
    animation: codecScan 0.5s linear infinite; */
}

/* Pour s'assurer que les variables RGB sont disponibles pour les ombres ici aussi */
/* Si elles ne sont pas globales, les redéfinir ou s'assurer qu'elles sont héritées */
/* body.theme-mgs1 {
    --mgs-codec-blue-rgb: 96, 160, 192; 
} */

/* Widget Top Streamer Content Styles */
.top-streamer-widget-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    height: 100%;
    padding: 8px; /* Retour au padding initial pour un peu plus d'air */
    gap: 5px; 
    background-color: var(--widget-content-background, transparent);
    color: var(--widget-text-color, inherit);
    overflow: hidden;
}

.top-streamer-info {
    display: flex;
    align-items: center; 
    gap: 10px; /* Espace image-texte */
    min-height: 0;
    overflow: hidden;
}

.top-streamer-img {
    width: 46px; /* +2px (était 44px) */
    height: 46px;
    border-radius: 50% !important;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--widget-border-color, rgba(255,255,255,0.2));
}

.top-streamer-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    min-width: 0;
    overflow: hidden;
}

.top-streamer-link {
    color: inherit;
    text-decoration: none;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4; /* Ajusté */
}
.top-streamer-link:hover {
    text-decoration: underline;
}

.top-streamer-pseudo {
    font-weight: bold;
    font-size: 1.05em; /* +0.05em (était 1em) */
    color: inherit;
}

.top-streamer-url-text {
    font-size: 0.8em; /* +0.05em (était 0.75em) */
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    line-height: 1.3; 
    margin-top: 2px; 
}

.top-streamer-bio {
    font-size: 0.85em; /* +0.05em (était 0.8em) */
    opacity: 0.8;
    line-height: 1.3; 
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
    display: block; 
    margin-top: 3px; 
    color: var(--widget-secondary-text-color, var(--widget-text-color));
}

.top-streamer-nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px; 
    flex-shrink: 0;
}

.top-streamer-nav button {
    background: var(--widget-button-background, rgba(0,0,0,0.2));
    border: 1px solid var(--widget-button-border-color, rgba(255,255,255,0.2));
    color: var(--widget-button-text-color, inherit);
    padding: 3px 8px; 
    border-radius: var(--border-radius-base);
    cursor: pointer;
    font-size: 1em; /* Retour taille normale (était 0.95em) */
    line-height: 1;
}

.top-streamer-nav button:hover {
    background: var(--widget-button-hover-background, rgba(0,0,0,0.4));
    border-color: var(--widget-button-hover-border-color, var(--accent-color));
}

/* Animation Fade-in pour le carrousel */
.top-streamer-info.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Fin Widget Top Streamer Content Styles */

/* Styles spécifiques pour le widget RADAR */
.radar-widget-content {
    position: relative; /* Pour positionner l'info en absolu */
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 0; /* Pas de padding pour que le canvas remplisse */
    display: flex; /* Pour centrer le canvas si besoin, mais width/height 100% devrait suffire */
    align-items: center;
    justify-content: center;
    background-color: var(--widget-content-background, transparent); /* Respecte le fond du thème */
}

#radar-canvas {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain; /* S'assure qu'il respecte le ratio si on force un aspect-ratio via JS plus tard */
}

#radar-info {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    /* Styles modifiés pour le chiffre */
    font-family: var(--font-family-display, 'Orbitron', sans-serif);
    font-size: 2.2em; /* Taille augmentée pour le chiffre seul */
    font-weight: bold;
    color: var(--accent-color, #007bff); /* Couleur d'accentuation */
    pointer-events: none;
    z-index: 10;
    /* text-shadow: 1px 1px 2px rgba(0,0,0,0.9); */ /* Supprimé, remplacé par une lueur sur le span */
    line-height: 1; /* Assurer un bon centrage vertical */
}

#viewer-count-display {
    font-weight: bold; /* Hérite de #radar-info, mais on peut le réaffirmer ou l'ajuster */
    /* La couleur est héritée de #radar-info */
    /* Ajout d'une lueur pour correspondre au style radar */
    text-shadow: 0 0 7px rgba(var(--accent-color-rgb, 0, 123, 255), 0.7),
                 0 0 12px rgba(var(--accent-color-rgb, 0, 123, 255), 0.5);
}

/* Nouveaux styles pour l'animation du radar */
.radar-animation-container {
    width: 90px; /* Diamètre du radar */
    height: 90px;
    position: relative; /* Contexte de positionnement pour scan et ondes */
    border-radius: 50%;
    /* Modifié pour utiliser l'accent color et préparer l'animation de pulsation */
    border: 1px solid rgba(var(--accent-color-rgb, 0, 123, 255), 0.4);
    animation: radarPulseAnimation 2.5s ease-in-out infinite alternate;
    /* Centré par le flex du parent .radar-widget-content */
}

.radar-scan {
    width: 50%; /* Demi-diamètre pour la ligne de scan */
    height: 3px; /* Épaisseur augmentée */
    /* Gradient modifié pour une tête plus marquée */
    background: linear-gradient(to right, transparent 0%, rgba(var(--accent-color-rgb, 0, 123, 255), 0.2) 20%, rgba(var(--accent-color-rgb, 0, 123, 255), 0.9) 90%, var(--accent-color, #007bff) 100%);
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: 0% 50%; /* Rotation depuis le centre gauche de la ligne */
    animation: radarScanAnimation 4s linear infinite;
    border-radius: 3px; /* Pour adoucir les bords */
}

.radar-wave {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 10%; /* Taille initiale de l'onde */
    height: 10%;
    border-radius: 50%;
    /* Bordure plus épaisse et opacité ajustée */
    border: 2px solid rgba(var(--accent-color-rgb, 0, 123, 255), 0.5);
    opacity: 0.5; /* Opacité de départ pour la nouvelle bordure */
    animation: radarWaveAnimation 3s ease-out infinite;
}

.radar-wave.radar-wave-2 {
    animation-delay: 1s;
}

.radar-wave.radar-wave-3 {
    animation-delay: 2s;
}

@keyframes radarScanAnimation {
    from {
        transform: translateY(-50%) rotate(0deg); /* translateY pour centrer verticalement la ligne */
    }
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

@keyframes radarWaveAnimation {
    0% {
        width: 10%;
        height: 10%;
        opacity: 0.5; /* Correspond à l'opacité initiale */
    }
    100% {
        width: 100%;
        height: 100%;
        opacity: 0;
    }
}

/* Nouvelle animation pour la pulsation du conteneur */
@keyframes radarPulseAnimation {
    from {
        box-shadow: 0 0 5px rgba(var(--accent-color-rgb, 0, 123, 255), 0.2);
        border-color: rgba(var(--accent-color-rgb, 0, 123, 255), 0.3);
    }
    to {
        box-shadow: 0 0 15px rgba(var(--accent-color-rgb, 0, 123, 255), 0.5);
        border-color: rgba(var(--accent-color-rgb, 0, 123, 255), 0.6);
    }
}

/* Styles spécifiques pour le widget Top Streamer */
/* ... (styles du Top Streamer) ... */