:root {
    --glass-bg: rgba(33, 37, 41, 0.75);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-blur: blur(16px);
}

html, body {
    width: 100%;
    overflow-x: hidden;
    background-color: #1e2227;
    background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px);
    background-size: 20px 20px;
    color: #e9ecef;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        radial-gradient(circle at 15% 50%, rgba(60, 40, 150, 0.15), transparent 30%),
        radial-gradient(circle at 85% 30%, rgba(0, 120, 255, 0.1), transparent 35%);
    z-index: -1;
    pointer-events: none;
}

/* --- UTILITAIRES --- */
.fs-7 {
    font-size: 0.85rem;
}

.cursor-pointer {
    cursor: pointer;
}

/* --- SCROLLBAR PERSONNALISÉE --- */
.custom-scrollbar {
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0; /* Force le défilement dans un conteneur Flexbox */
}

.custom-scrollbar::-webkit-scrollbar {
    width: 8px; /* Légèrement plus large pour faciliter la préhension */
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* Scrollbar horizontale (bande d'historique) */
.custom-scrollbar-x::-webkit-scrollbar {
    height: 8px;
}
.custom-scrollbar-x::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}
.custom-scrollbar-x::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 10px;
}
.custom-scrollbar-x::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* --- LAYOUT PLEIN ÉCRAN (aucun défilement de page) --- */
.app-shell {
    height: 100vh;
    height: 100dvh; /* tient compte de la barre d'adresse mobile */
    overflow: hidden;
}
.app-body {
    min-height: 0; /* autorise les enfants flex à rétrécir */
}
.image-region {
    min-height: 0;
}
.history-region {
    min-height: 0;
}