:root {
        --transition-time: 1.2s;
        --radius: 25px;
        --bg-gradient: linear-gradient(135deg, #e0b0ff, #90e0ff, #ffb3b3);
        --white-glass: rgba(255, 255, 255, 0.5);
        --white-glass-strong: rgba(255, 255, 255, 0.75);
        --shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
        --blue: #007aff;
        --system-message-bg: rgba(200, 200, 210, 0.4);
        --system-message-text: #444;
        --animation-fast: 0.4s;
        --animation-cubic-bezier: cubic-bezier(0.4, 0, 0.2, 1);
    }

    html, body {
        margin: 0;
        height: 100%;
        background: var(--bg-gradient);
        font-family: -apple-system, BlinkMacSystemFont, sans-serif;
        display: flex;
        flex-direction: column;
        backdrop-filter: blur(25px);
        overflow: hidden;
    }

    .top-menu {
        position: fixed;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--white-glass);
        backdrop-filter: blur(20px);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        padding: 1.2rem 2rem;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 1rem;
        z-index: 20;
        transition: all 0.4s ease;
        flex-wrap: nowrap;
        width: auto;
        max-width: 90%;
    }

    .top-menu #settingsBtn {
        margin-left: auto; 
    }

    .top-menu.shrink {
        padding: 0.6rem 1.4rem;
        transform: translateX(-50%) scale(0.95);
        backdrop-filter: blur(35px);
        opacity: 0.92;
    }

    .top-menu .logo {
        font-weight: 700;
        font-size: 1.5rem;
    }

    .top-menu button {
        background-color: var(--blue);
        color: white;
        border: none;
        border-radius: var(--radius);
        padding: 0.6rem 1.1rem;
        font-size: 0.9rem;
        cursor: pointer;
        transition: background 0.4s ease, transform 0.2s ease, filter 0.2s ease;
        min-width: 100px;
        min-height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        white-space: nowrap;
    }

    .top-menu button:hover {
        filter: brightness(1.15);
    }

    .top-menu button:active {
        transform: scale(0.88);
    }
    .top-menu button.icon-button-top {
        background: var(--white-glass);
        color: #555;
        border: 1px solid rgba(0,0,0,0.1);
        padding: 0.6rem 0.8rem;
        font-size: 1.2rem;
        min-width: unset;
        min-height: unset;
        margin-left: 0.5rem;
    }
    .top-menu button.icon-button-top:hover {
        filter: brightness(0.9);
        color: var(--blue);
    }
    #graphicSettingsFixedBtn {
        position: fixed;
        bottom: 20px;
        right: 20px;
        background-color: var(--blue);
        color: white;
        border: none;
        border-radius: 50%;
        width: 55px;
        height: 55px;
        font-size: 1.8rem;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: var(--shadow);
        cursor: pointer;
        z-index: 50;
        transition: transform 0.2s ease, background-color 0.4s ease;
    }
    #graphicSettingsFixedBtn:hover {
        background-color: #0056b3;
        transform: rotate(20deg) scale(1.05);
    }
    #graphicSettingsFixedBtn:active {
        transform: scale(0.95);
    }


    .messages {
        flex: 1;
        overflow-y: auto;
        padding: 7.5rem 2rem 140px 2rem;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        scroll-behavior: smooth;
    }

    .message {
        max-width: 70%;
        padding: 1rem 1.2rem;
        border-radius: var(--radius);
        backdrop-filter: blur(12px);
        box-shadow: var(--shadow);
        font-size: 1.05rem;
        display: inline-block;
        width: fit-content;
        overflow-wrap: break-word;
        word-break: break-word;
        position: relative;
        transition: padding 0.35s var(--animation-cubic-bezier),
                    max-width 0.35s var(--animation-cubic-bezier),
                    background-color 0.25s ease;
    }

    .message.has-feedback-btn {
        padding-right: calc(1.2rem + 32px);
        padding-bottom: calc(1rem + 20px);
    }
    .message.pop-in-animated { 
        animation: popIn 1.2s ease forwards;
    }

    .message p:first-child { margin-top: 0; }
    .message p:last-child { margin-bottom: 0; }
    .message h1, .message h2, .message h3, .message h4, .message h5, .message h6 { margin-top: 1em; margin-bottom: 0.5em; font-weight: bold; }
    .message ul, .message ol { margin-top: 0.5em; margin-bottom: 0.5em; padding-left: 1.5em; }
    .message li { margin-bottom: 0.2em; }
    .message code { background-color: rgba(0, 0, 0, 0.08); padding: 0.2em 0.4em; border-radius: 4px; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 0.9em; }
    .message pre { background-color: rgba(0, 0, 0, 0.08); padding: 1em; border-radius: 8px; overflow-x: auto; }
    .message pre code { padding: 0; background: none; font-size: 1em; }
    .message a { color: var(--blue); text-decoration: underline; background: none; border: none; padding: 0; }
    .message blockquote { border-left: 4px solid var(--system-message-text); padding-left: 1em; margin-left: 0; color: var(--system-message-text); font-style: italic; }
    
    /* Styles pour les formules mathématiques avec KaTeX */
    .message .math-inline { 
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(240, 240, 255, 0.85));
        padding: 0.3em 0.6em; 
        border-radius: 8px; 
        display: inline-block;
        margin: 0 4px;
        vertical-align: middle;
        border: 1px solid rgba(150, 150, 200, 0.3);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .message .math-inline:hover {
        transform: scale(1.02);
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
    }
    .message .math-inline .katex { 
        font-size: 1.05em; 
    }
    .message .math-block { 
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(245, 245, 255, 0.9));
        padding: 1.2em 1.5em; 
        border-radius: 12px; 
        display: block;
        margin: 1em 0;
        overflow-x: auto;
        text-align: center;
        border: 2px solid rgba(150, 150, 200, 0.3);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .message .math-block:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }
    .message .math-block .katex { 
        font-size: 1.25em; 
    }
    .message .math-error {
        color: #cc4444;
        font-style: italic;
        border: 2px dashed #cc4444;
    }
    /* Amélioration du rendu KaTeX dans les messages bot */
    .message.bot .katex { 
        color: #1a1a2e; 
        font-weight: 500;
    }
    .message.user .math-inline,
    .message.user .math-block { 
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.15));
        border-color: rgba(255, 255, 255, 0.4);
    }
    .message.user .katex { 
        color: white; 
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    .user { align-self: flex-end; background-color: var(--blue);
    color: white; border-bottom-right-radius: 0; }
    .bot { 
        align-self: flex-start; 
        background-color: #f0f0f0; /* Assurez-vous que cette couleur est bien opaque */
        color: #333; 
        border-bottom-left-radius: 0; 
    }
    .bot.loading { 
        font-style: italic; 
        opacity: 0.7;
        display: flex;
        align-items: center;
        will-change: width, padding;
        transition: width 0.35s var(--animation-cubic-bezier),
                    padding 0.35s var(--animation-cubic-bezier);
    }
    /* Removed CSS animation for dots as per user request */

    .system { align-self: center; background-color: var(--system-message-bg); color: var(--system-message-text); font-style: italic; font-size: 0.9rem; padding: 0.6rem 1rem; max-width: 60%; text-align: center; border-radius: calc(var(--radius) / 2); }

    .terms-banner { text-align: left; font-style: normal; font-size: 0.95rem; background: rgba(255,255,255,0.85); color: #222; border: 1px solid rgba(0,0,0,0.05); box-shadow: var(--shadow); }
    .terms-banner__title { font-weight: 700; margin-bottom: 0.25rem; }
    .terms-banner__text { margin: 0.2rem 0 0.6rem; }
    .terms-banner__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
    .terms-banner__actions a { color: var(--blue); text-decoration: underline; font-weight: 600; background: none; border: none; padding: 0; }
    .terms-banner__actions a:hover { text-decoration: none; }
    .terms-banner__actions button.primary { padding: 0.55rem 1.2rem; }

    .system.unverified-email-message {
        background-color: rgba(255, 200, 0, 0.4);
        border: 1px solid rgba(255, 150, 0, 0.6);
        color: #664400;
        max-width: 75%;
    }
    .system.unverified-email-message a {
        color: var(--blue);
        text-decoration: underline;
        font-weight: bold;
        background: none;
        border: none;
        padding: 0;
    }

    input:disabled {
        background-color: rgba(255, 255, 255, 0.3);
        cursor: not-allowed;
    }
    body.no-animations .message.pop-in-animated { animation: none !important; }
    body.no-animations .bot.loading::after { animation: none !important; }


    @keyframes popIn { 0% { opacity: 0; transform: scale(0.92) translateY(20px); filter: blur(6px); } 100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); } }

    @keyframes fadeInOut { 
      0% { opacity: 0.6; } 
      50% { opacity: 1; } 
      100% { opacity: 0.6; } 
    }

    /* Smooth waiting animation - no flicker */
    @keyframes smoothFadeIn {
        0% { opacity: 0; transform: translateY(4px); }
        100% { opacity: 1; transform: translateY(0); }
    }

    @keyframes smoothFadeOut {
        0% { opacity: 1; transform: translateY(0); }
        100% { opacity: 0; transform: translateY(-4px); }
    }

    @keyframes slideUp {
        0% { opacity: 0; transform: translateY(10px); }
        100% { opacity: 1; transform: translateY(0); }
    }

    .message.bot.loading .loading-text {
        display: inline-block;
        animation: smoothFadeIn 0.5s ease-out forwards;
        transition: width 0.35s var(--animation-cubic-bezier);
    }

    .message.bot.loading .loading-text.fade-out {
        animation: smoothFadeOut 0.3s ease-in forwards;
    }

    .loading-progress-dot {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
        margin-left: 3px;
        animation: slideUp 0.4s ease-out;
    }

    .input-wrapper {
        position: fixed; left: 50%; display: flex; background: var(--white-glass); box-shadow: var(--shadow); backdrop-filter: blur(30px); border-radius: var(--radius); z-index: 10;
        transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1); transform-origin: center;
    }
    .input-wrapper.small { top: 50%; transform: translate(-50%, -50%) scale(1); width: 380px; padding: 0.7rem 1.2rem; }
    .input-wrapper.large { bottom: 24px; top: auto; transform: translateX(-50%) scale(1); width: calc(100% - 4rem); max-width: 600px; padding: 1rem 1.5rem; }

    input { flex: 1; border: none; background: transparent; font-size: 1.1rem; padding: 0.5rem 0.2rem; outline: none; color: #333; }
    
    button.image-upload-btn { 
        background-color: var(--blue); 
        color: white; 
        border: none;
        border-radius: var(--radius); 
        padding: 0.8rem 0.9rem; 
        margin-right: 0.5rem;
        font-size: 1.1rem; 
        cursor: pointer; 
        transition: background 0.4s ease, transform 0.25s ease, filter 0.25s ease; 
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }
    button.image-upload-btn:hover { filter: brightness(1.15); }
    button.image-upload-btn:active { transform: scale(0.85); }
    button.image-upload-btn:disabled { opacity: 0.7; cursor: not-allowed; filter: grayscale(50%); }
    
    button.send-btn { background-color: var(--blue); color: white; border: none;
    border-radius: var(--radius); padding: 0.8rem 1.4rem; margin-left: 1rem; font-size: 1.1rem; cursor: pointer; transition: background 0.4s ease, transform 0.25s ease, filter 0.25s ease, opacity 0.25s ease; }
    button.send-btn:hover { filter: brightness(1.15); }
    button.send-btn:active { transform: scale(0.85); }
    button.send-btn:disabled { opacity: 0.7; cursor: not-allowed; filter: grayscale(50%); }

    body { opacity: 0; animation: fadeInBody 1.2s ease forwards; }
    @keyframes fadeInBody { from { opacity: 0; } to { opacity: 1; } }

    .version-info { position: fixed; bottom: 5px; left: 50%; transform: translateX(-50%); font-size: 0.75rem; color: #666; z-index: 5; text-align: center; width: 100%; padding: 0.2rem 0; }

    .connexion-panel {
        position: fixed;
        top: 0; left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(15px);
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 1;
        pointer-events: all;
        transition: opacity 0.4s ease;
    }
    /* display:none obligatoire : sur Android, opacity:0 + pointer-events:none
       laisse les panneaux (backdrop-filter) empilés au-dessus et mangent les taps. */
    .connexion-panel.hidden {
        display: none !important;
        opacity: 0;
        pointer-events: none;
    }

    .connexion-content {
    background: var(--white-glass-strong);
    padding: 2.5rem 3rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    width: 95%;
    max-width: 400px;   /* élargi par rapport à 400px */
    max-height: 85vh;   /* ne dépasse jamais 85% de la hauteur de l'écran */
    overflow-y: auto;   /* active un scroll vertical si nécessaire */
    text-align: center;
    position: relative;
    transform: scale(1);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .connexion-panel.hidden .connexion-content {
        transform: scale(0.9);
    }

    .connexion-content h2 {
        margin-top: 0;
        margin-bottom: 2rem;
        color: #333;
    }
    .connexion-content input {
        width: 100%;
        padding: 0.8rem;
        margin-bottom: 1rem;
        border-radius: 12px;
        border: 1px solid rgba(0,0,0,0.1);
        background: rgba(255,255,255,0.7);
        box-sizing: border-box;
    }
    .connexion-content button.primary {
        width: 100%;
        background-color: var(--blue);
        color: white;
        border: none;
        padding: 0.9rem;
        border-radius: 12px;
        font-size: 1.1rem;
        cursor: pointer;
        transition: background 0.4s ease, transform 0.2s ease;
    }
    .connexion-content button.primary:hover {
        filter: brightness(1.15);
    }
    .connexion-content button.primary:active {
        transform: scale(0.95);
    }
    .checkbox-row { text-align: left; margin-top: 0.6rem; }
    .checkbox-label { display: flex; gap: 10px; align-items: flex-start; font-size: 0.95rem; line-height: 1.4; color: #333; }
    .checkbox-label input { margin-top: 0.2rem; }
    .checkbox-label a { color: var(--blue); text-decoration: underline; background: none; border: none; padding: 0; }
    .checkbox-label a:hover { text-decoration: none; }
    .close-btn {
        position: absolute;
        top: 15px;
        right: 15px;
        background: none;
        border: none;
        font-size: 1.5rem;
        color: #555;
        cursor: pointer;
        line-height: 1;
    }

    #connexionPanel .connexion-content form {
        display: none;
    }
    #connexionPanel .connexion-content[data-mode="login"] #loginForm {
        display: block;
    }
    #connexionPanel .connexion-content[data-mode="signup"] #signupForm {
        display: block;
    }

    .switch-form-link {
        display: block;
        margin-top: 1.5rem;
        font-size: 0.9em;
        color: var(--blue);
        cursor: pointer;
        text-decoration: underline;
        transition: color 0.3s ease;
        background: none;
        border: none;
        padding: 0;
    }
    .switch-form-link:hover {
        color: #0056b3;
    }

    .error-message {
        color: red;
        font-size: 0.85em;
        margin-top: 10px;
        margin-bottom: 5px;
        text-align: left;
    }

    .connexion-content textarea {
        width: 100%;
        padding: 0.8rem;
        margin-bottom: 1rem;
        border-radius: 12px;
        border: 1px solid rgba(0,0,0,0.1);
        background: rgba(255,255,255,0.7);
        box-sizing: border-box;
        resize: vertical;
        font-family: -apple-system, BlinkMacSystemFont, sans-serif;
        font-size: 1.1rem;
        color: #333;
    }

    .panel-body {
        text-align: left;
        padding: 1rem 0;
        color: #444;
        line-height: 1.5;
    }
    .panel-body p {
        margin-bottom: 1rem;
    }
    .panel-section {
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        padding: 1.5rem 0;
        margin-top: 1.5rem;
        text-align: left;
    }
    .panel-section:first-of-type {
        border-top: none;
        padding-top: 0;
        margin-top: 0;
    }
    .panel-section h3 {
        margin-top: 0;
        margin-bottom: 1rem;
        color: #444;
        text-align: center;
    }
    .panel-section p {
        margin-bottom: 1rem;
        font-size: 0.95rem;
        color: #555;
    }
    .panel-section input {
        margin-bottom: 0.75rem;
    }
    
    /* Style spécifique pour le modal d'image */
    #imageUploadModal .panel-section {
        border-top: none;
        padding: 0.75rem 0;
        margin: 0.75rem 0;
    }
    #imageUploadModal .panel-section button {
        width: 100%;
        margin: 0.5rem 0;
        padding: 0.85rem 1.2rem;
    }
    #settingsPanel .connexion-content button.primary {
        margin-bottom: 1rem;
    }

    button.danger-button {
        background-color: #dc3545;
    }
    button.danger-button:hover {
        filter: brightness(1.15);
    }
    .panel-section p button.primary {
        display: inline-block;
        width: auto;
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
        margin-left: 10px;
        vertical-align: middle;
    }
    .connexion-content .back-btn {
        background-color: #6c757d;
        margin-top: 1.5rem;
    }
    .connexion-content .back-btn:hover {
        filter: brightness(1.15);
    }
    input[type="range"] {
        -webkit-appearance: none;
        width: 100%;
        height: 8px;
        background: #d3d3d3;
        outline: none;
        opacity: 0.7;
        transition: opacity .2s;
        border-radius: 5px;
        margin-top: 10px;
        margin-bottom: 5px;
    }

    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--blue);
        cursor: pointer;
        border: 2px solid white;
        box-shadow: 0 0 5px rgba(0,0,0,0.2);
    }

    input[type="range"]::-moz-range-thumb {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--blue);
        cursor: pointer;
        border: 2px solid white;
        box-shadow: 0 0 5px rgba(0,0,0,0.2);
    }
    .level-labels-full-range {
        display: flex;
        justify-content: space-between;
        font-size: 0.7em;
        color: #666;
        margin-top: 0.2rem;
        padding: 0 5px;
        text-align: center;
    }
    .level-labels-full-range span {
        flex: 1;
        padding: 0 2px;
        min-width: 0;
    }

    /* Styles pour le menu mobile (hamburger) */
    #mobileMenuToggle {
        display: none;
    }

    #mobileMenuPanel {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 90;
        display: none;
        justify-content: flex-end;
        
        opacity: 0;
        pointer-events: none;
        background-color: rgba(0, 0, 0, 0.0);
        backdrop-filter: blur(0px);
        transition: opacity var(--animation-fast) ease, backdrop-filter var(--animation-fast) ease, background-color var(--animation-fast) ease;
    }

    #mobileMenuPanel.open {
        opacity: 1;
        pointer-events: all;
        background-color: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(10px);
    }
    
    .mobile-menu-content {
        background: var(--white-glass-strong);
        border-radius: var(--radius) 0 0 var(--radius);
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 80%;
        max-width: 280px;
        height: 100%;
        box-shadow: var(--shadow);
        box-sizing: border-box;
        
        transform: translateX(100%);
        transition: transform var(--animation-fast) var(--animation-cubic-bezier);
    }

    #mobileMenuPanel.open .mobile-menu-content {
        transform: translateX(0);
    }

    #mobileMenuPanel button {
        background-color: var(--blue);
        color: white;
        border: none;
        border-radius: 12px;
        padding: 1rem 1.2rem;
        font-size: 1rem;
        font-weight: 500;
        cursor: pointer;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        
        opacity: 0;
        transform: translateX(20px);
        transition: opacity 0.5s ease, transform 0.5s ease;
    }
    
    #mobileMenuPanel.open .mobile-menu-content button {
        opacity: 1;
        transform: translateX(0);
    }

    #mobileMenuPanel.open #mobileMenuToggle { transition-delay: 0.05s; }
    #mobileMenuPanel.open #mobileNewConversationBtn { transition-delay: 0.1s; }
    #mobileMenuPanel.open #mobileHistoryBtn { transition-delay: 0.15s; }
    #mobileMenuPanel.open #mobileConnexionBtn { transition-delay: 0.2s; }
    #mobileMenuPanel.open #mobileContactBtn { transition-delay: 0.25s; }
    #mobileMenuPanel.open #mobileSettingsBtn { transition-delay: 0.3s; }
    #mobileMenuPanel.open #mobileGraphicSettingsBtn { transition-delay: 0.35s; }


    #mobileMenuPanel .close-mobile-menu-btn {
        background: none;
        color: #555;
        font-size: 2rem;
        align-self: flex-end;
        margin: -10px -5px 10px 0;
        padding: 0;
        min-height: auto;
        min-width: auto;
        width: 40px;
        height: 40px;
        opacity: 0;
        transform: none;
        transition: opacity 0.3s ease;
    }

    #mobileMenuPanel.open .close-mobile-menu-btn {
        opacity: 1;
    }


    /* Aligné sur chat-brand (860px) pour que le menu hamburger fonctionne vraiment */
    @media (max-width: 860px) {
        .top-menu { top: 8px; padding: 0.4rem 0.5rem; gap: 0.5rem; width: calc(100% - 1.2rem); }
        .top-menu .logo{ font-size: 1.2rem; }
        
        .top-menu #newConversationBtn,
        .top-menu #historyBtn,
        .top-menu #connexionBtn,
        .top-menu #contactBtn,
        .top-menu #settingsBtn {
            display: none;
        }
        
        #mobileMenuToggle {
            display: flex;
            padding: 0.6rem 1.1rem;
            font-size: 0.9rem;
            min-width: 60px;
            min-height: 28px;
            justify-content: center;
            align-items: center;
            margin-left: auto;
        }
        
        #graphicSettingsFixedBtn {
            display: none;
        }
        
        #mobileMenuPanel {
            display: flex;
        }

        .messages { padding: 6rem 0.5rem 100px 0.5rem; }
        .message { font-size: 0.95rem; }
        .input-wrapper.large { width: calc(100% - 1rem); padding: 0.6rem 0.8rem; bottom: 8px; }
        input { font-size: 0.95rem; }
        button.send-btn { padding: 0.5rem 0.8rem; font-size: 0.95rem; }
        .connexion-content { padding: 2rem 1.5rem; }
    }
    /* === Améliorations spécifiques au panneau "Réglages de Miniprof" === */
    #graphicSettingsPanel .connexion-content {
    /* plus confortable que 400px */
    max-width: 400px;
    width: 95%;
    /* ne dépasse jamais l'écran et scrolle en interne si besoin */
    max-height: 85vh;
    overflow-y: auto;
    }
    /* ===== Release Notes (style affiche) ===== */
/* === Note de MÀJ (même rendu que le panneau Connexion) === */
    .connexion-content.like-login{
    max-width: 480px;              /* largeur comme Connexion */
    width: 95%;
    max-height: 85vh;              /* si trop de texte -> scroll interne */
    overflow-y: auto;
    padding: 24px 22px 18px;
    text-align: center;
    }
    .like-login .modal-title{
    margin: 2px 0 10px;
    font-size: 1.35rem;
    font-weight: 800;
    }
    .like-login .modal-body p{ color: #333; opacity: .9 }
    .like-login .modal-footnote{
    margin-top: 10px;
    font-size: .85rem;
    opacity: .6;
    }

    /* ===== FEEDBACK MODULE STYLES ===== */
    .rating-section {
        margin-bottom: 1.5rem;
    }

    .star-rating {
        display: flex;
        gap: 0.5rem;
        margin: 0.75rem 0;
    }

    .star-rating .star {
        background: none;
        border: none;
        font-size: 2.5rem;
        color: #ddd;
        cursor: pointer;
        transition: all 0.2s ease;
        padding: 0;
        line-height: 1;
    }

    .star-rating .star:hover,
    .star-rating .star.active {
        color: #ffc107;
        transform: scale(1.2);
    }

    .star-rating .star:active {
        transform: scale(0.95);
    }

    .checkbox-label {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        cursor: pointer;
        font-size: 0.95rem;
    }

    .checkbox-label input[type="checkbox"] {
        margin-top: 0.2rem;
        cursor: pointer;
        accent-color: var(--blue);
    }

    .checkbox-label span {
        line-height: 1.4;
    }

    /* Wrapper du contenu du message avec feedback button */
    .message-content-wrapper {
        display: block;
        width: 100%;
    }

    /* Contenu texte du message */
    .message-content {
        display: block;
    }

    /* Bouton de feedback sur les messages (coin bas droit) */
    .feedback-btn-inline {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(100, 150, 255, 0.2);
        border: 1px solid rgba(100, 150, 255, 0.4);
        border-radius: 50%;
        width: 28px;
        height: 28px;
        padding: 0;
        font-size: 0.85rem;
        cursor: pointer;
        transition: all 0.2s ease;
        position: absolute;
        right: 10px;
        bottom: 8px;
    }

    .feedback-btn-inline:hover {
        background: rgba(100, 150, 255, 0.4);
        transform: scale(1.15);
    }

    .feedback-btn-inline:active {
        transform: scale(0.9);
    }

    /* Indicateur de feedback déjà donné */
    .message.bot.has-feedback .feedback-btn-inline {
        background: rgba(76, 175, 80, 0.3);
        border-color: rgba(76, 175, 80, 0.5);
        color: #4caf50;
    }