/* ==========================================================================
   STYLES COMPLETS - CQFDogs v5.2
   ========================================================================== */

   :root {
    /* Palette de couleurs unifiée et moderne */
    --color-accent-main: #3b82f6; /* Blue 500 */
    --color-accent-main-hover: #2563eb; /* Blue 600 */
    --color-accent-asso: #10b981; /* Emerald 500 */
    --color-accent-firstaid: #ef4444; /* Red 500 */
    --color-accent-music: #84cc16; /* Lime 500 */
    
    /* Variable dynamique pour la couleur d'accentuation actuelle */
    --color-accent: var(--color-accent-main);
    --color-accent-hover: var(--color-accent-main-hover);

    /* Thème Clair */
    --color-bg-primary: #f8fafc; /* Slate 50 */
    --color-bg-secondary: #ffffff; /* White */
    --color-text-primary: #1e293b; /* Slate 800 */
    --color-text-secondary: #64748b; /* Slate 500 */
    --color-input-bg: #f1f5f9; /* Slate 100 */
    --color-border: #e2e8f0; /* Slate 200 */
    --color-bubble-bot: #f1f5f9; /* Slate 100 */
    --color-bubble-user: var(--color-accent-main);
}

html.dark {
    /* Thème Sombre */
    --color-bg-primary: #020617; /* Slate 950 */
    --color-bg-secondary: #0f172a; /* Slate 900 */
    --color-text-primary: #f1f5f9; /* Slate 100 */
    --color-text-secondary: #94a3b8; /* Slate 400 */
    --color-input-bg: #1e293b; /* Slate 800 */
    --color-border: #334155; /* Slate 700 */
    --color-bubble-bot: #1e293b; /* Slate 800 */
    --color-bubble-user: var(--color-accent-main);
}

/* ==========================================================================
   STYLES DE BASE ET LAYOUT
   ========================================================================== */

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#app-container > .w-full {
    background-color: var(--color-bg-secondary);
    border-color: var(--color-border);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

header {
    background-color: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border);
}

/* ==========================================================================
   STYLES DES COMPOSANTS DU CHAT
   ========================================================================== */

.user-message-content, .bot-message-content {
    border-radius: 1.25rem;
}

.user-message-content {
    background-color: var(--color-bubble-user);
    color: #ffffff;
}
.bot-message-content {
    background-color: var(--color-bubble-bot);
    color: var(--color-text-primary);
}
.bot-message-content a:not(.platform-button) { 
    color: var(--color-accent); 
    text-decoration: underline;
    font-weight: 500;
}
.bot-message-content a:hover {
    text-decoration: none;
}

#message-input {
    background-color: var(--color-input-bg);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    padding: 0.85rem 1rem;
    font-size: 1rem;
}
#message-input:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 25%, transparent);
    border-color: var(--color-accent);
}

#submit-button {
    background-color: var(--color-accent);
    border-radius: 1rem;
    transition: all 0.2s ease-in-out;
    transform: scale(1);
}
#submit-button:hover {
    background-color: var(--color-accent-hover);
    transform: scale(1.05);
}
#submit-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==========================================================================
   MODALES ET MENUS
   ========================================================================== */

.modal-backdrop {
    background-color: color-mix(in srgb, var(--color-bg-primary) 50%, transparent);
    backdrop-filter: blur(8px);
}

.modal-panel {
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* ==========================================================================
   ANIMATIONS ET EFFETS
   ========================================================================== */
 
.smooth-appear {
    animation: smooth-appear-animation 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes smooth-appear-animation {
    from { opacity: 0; transform: translateY(20px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.typing-dot {
    width: 8px; height: 8px; background-color: currentColor; border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* ==========================================================================
   HEADER CONTEXTUEL
   ========================================================================== */

#main-header.fade-out {
    opacity: 0;
    pointer-events: none;
}

#contextual-header.fade-in {
    opacity: 1;
    pointer-events: auto;
}

/* ==========================================================================
   MODALE DE CONFIRMATION
   ========================================================================== */

#confirmation-modal .modal-button {
    transition: all 0.2s ease-in-out;
}
#confirmation-modal .modal-button:hover {
    transform: scale(1.05);
}

/* ==========================================================================
   NOUVELLE BARRE DE NAVIGATION (PRE-FOOTER)
   ========================================================================== */

#pre-footer-actions {
    position: relative; /* ESSENTIEL pour positionner la bulle */
    z-index: 10; 
}

.shortcut-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    color: var(--color-text-secondary);
    transition: all 0.2s ease-in-out;
}
.shortcut-button:hover {
    background-color: var(--color-input-bg);
    color: var(--color-text-primary);
    transform: scale(1.1);
}
.shortcut-button.active {
    background-color: var(--color-accent);
    color: white;
}
.shortcut-button i {
    font-size: 1.25rem;
}

/* ==========================================================================
   MODALE PREMIERS SECOURS (STYLES SPÉCIFIQUES)
   ========================================================================== */

#first-aid-modal .modal-panel {
    border-top: 4px solid var(--color-accent-firstaid);
}
#first-aid-chat-content .bot-message-content {
    background-color: #fee2e2; /* red-100 */
}
html.dark #first-aid-chat-content .bot-message-content {
    background-color: #450a0a; /* red-950 */
}
#first-aid-message-input-modal:focus {
    border-color: var(--color-accent-firstaid);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent-firstaid) 25%, transparent);
}

.first-aid-option-button {
    max-width: 120px; /* Limite la largeur maximale des boutons */
    margin-left: auto;
    margin-right: auto; /* Centre les boutons dans leur cellule de grille */
}


/* ==========================================================================
   MODALE ASSOCIATION (STYLES SPÉCIFIQUES)
   ========================================================================== */

#asso-modal .modal-panel {
    border-top: 4px solid var(--color-accent-asso);
}
#asso-modal .asso-nav-button {
    padding: 0.5rem 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease-in-out;
    white-space: nowrap; /* Empêche le texte de passer à la ligne */
}
#asso-modal .asso-nav-button:hover {
    color: var(--color-accent-asso);
    background-color: var(--color-input-bg);
}
#asso-modal .asso-nav-button.active {
    color: var(--color-accent-asso);
    border-bottom-color: var(--color-accent-asso);
}
#asso-content-display h2 {
    margin-top: 0;
}

/* ==========================================================================
   ANIMATION BOUTON MUSIQUE
   ========================================================================== */

.music-attention .fa-music {
    animation: attention-seeker 1.2s ease-in-out 3;
}

@keyframes attention-seeker {
  0%, 100% {
    transform: scale(1) rotate(0);
    color: var(--color-text-secondary);
  }
  20% {
    transform: scale(1.2) rotate(-10deg);
    color: var(--color-accent-main);
  }
  40% {
    transform: scale(1.2) rotate(10deg);
  }
  60% {
    transform: scale(1.2) rotate(-10deg);
    color: var(--color-accent-music);
  }
  80% {
    transform: scale(1.2) rotate(10deg);
    color: var(--color-accent-main);
  }
}

/* NOTES DE MUSIQUE VOLANTES */
.flying-note {
    position: fixed;
    font-size: 16px;
    color: var(--color-accent-music);
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    animation: fly-and-fade 1.5s ease-out forwards;
}

@keyframes fly-and-fade {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--end-x), var(--end-y)) scale(0.3);
        opacity: 0;
    }
}

/* ==========================================================================
   LECTEUR FINAL (NON FLOTTANT)
   ========================================================================== */

#music-slot-container {
    flex-shrink: 0;
}

#minimized-player-view {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    position: relative;
    transition: transform 0.2s ease;
    border: 2px solid var(--color-border);
}
#minimized-player-view:hover {
    transform: scale(1.1);
}
#minimized-player-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#minimized-player-view .icon-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    opacity: 1; /* L'icône est TOUJOURS visible */
    transition: opacity 0.2s ease;
}

#expanded-player-view {
    position: absolute;
    z-index: 50;
    bottom: 180px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px; /* On réduit la largeur */
    max-width: calc(100% - 2rem);
    padding: 1.5rem 1rem; /* On ajuste le padding */
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- NOUVEL EFFET "ON AIR" : CONTOUR LUMINEUX --- */

@keyframes flash-border {
    0%, 100% { 
        border-color: var(--color-border); 
    }
    25% { 
        border-color: var(--color-accent-music);
        box-shadow: 0 0 8px var(--color-accent-music);
    }
    50% { 
        border-color: var(--color-border); 
    }
    75% { 
        border-color: var(--color-accent-music);
        box-shadow: 0 0 8px var(--color-accent-music);
    }
}

#minimized-player-view.on-air {
    animation: flash-border 2.5s linear infinite;
}

/* --- ÉGALISEUR 5 BARRES "ON AIR" --- */

#mini-player-visualizer {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 16px; /* Hauteur contenue */
    opacity: 0;
    transition: opacity 0.3s ease;
}

#minimized-player-view.on-air #mini-player-visualizer {
    opacity: 1;
}

.visualizer-bar {
    width: 3px;
    height: 100%;
    background-color: white;
    border-radius: 2px;
    transform-origin: bottom;
}

@keyframes equalize {
    0% { transform: scaleY(0.1); }
    50% { transform: scaleY(1); }
    100% { transform: scaleY(0.1); }
}

/* Animation irrégulière pour un effet plus réaliste */
#minimized-player-view.on-air .visualizer-bar:nth-child(1) {
    animation: equalize 1.1s ease-in-out infinite 0.2s;
}

#minimized-player-view.on-air .visualizer-bar:nth-child(2) {
    animation: equalize 0.9s ease-in-out infinite 0s;
}

#minimized-player-view.on-air .visualizer-bar:nth-child(3) {
    animation: equalize 1.2s ease-in-out infinite 0.3s;
}

#minimized-player-view.on-air .visualizer-bar:nth-child(4) {
    animation: equalize 1s ease-in-out infinite 0.5s;
}

#minimized-player-view.on-air .visualizer-bar:nth-child(5) {
    animation: equalize 1.3s ease-in-out infinite 0.1s;
}

/* ==========================================================================
   MENU CONTEXTUEL DES MESSAGES
   ========================================================================== */

.context-menu-button {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-align: left;
    transition: background-color 0.2s ease;
}

.context-menu-button:hover {
    background-color: var(--color-input-bg);
}

.context-menu-button i {
    text-align: center;
}

/* ==========================================================================
   MODALE MUSIQUE (STYLES SPÉCIFIQUES)
   ========================================================================== */

   #music-modal .modal-panel {
    border-top: 4px solid var(--color-accent-music);
}
#music-modal .music-nav-button {
    padding: 0.5rem 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease-in-out;
    white-space: nowrap;
}
#music-modal .music-nav-button:hover {
    color: var(--color-accent-music);
    background-color: var(--color-input-bg);
}
#music-modal .music-nav-button.active {
    color: var(--color-accent-music);
    border-bottom-color: var(--color-accent-music);
}

/* --- STYLE POUR LE ZOOM DE LA POCHETTE --- */
#cover-zoom-modal {
    display: flex; /* Reste flex pour le centrage */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
}
#cover-zoom-modal:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
}

/* Réduction de la hauteur du header principal */
header {
    padding-top: 0.5rem;    /* Réduit l'espacement haut */
    padding-bottom: 0.5rem; /* Réduit l'espacement bas */
}
header .slogan {
    margin-top: 0.125rem; /* Réduit l'espace entre le logo et le slogan */
}