:root {
        --bg: #f7f9ff;
        --panel: rgba(255, 255, 255, .75);
        --panel-strong: rgba(255, 255, 255, .92);
        --stroke: rgba(22, 42, 75, .12);
        --stroke-2: rgba(22, 42, 75, .18);
        --text: #0b1630;
        --muted: rgba(11, 22, 48, .62);
        --brand: #2b64ff;
        --brand-2: #7c3aed;
        --shadow: 0 12px 30px rgba(13, 30, 64, .10);
        --radius: 18px;
    }

    * {
        box-sizing: border-box;
    }

    html,
    body {
        height: 100%;
    }

    body {
        margin: 0;
        font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
        color: var(--text);
        background:
            radial-gradient(900px 500px at 10% 10%, rgba(43, 100, 255, .18), transparent 60%),
            radial-gradient(800px 480px at 90% 15%, rgba(124, 58, 237, .14), transparent 60%),
            radial-gradient(700px 520px at 60% 90%, rgba(43, 100, 255, .10), transparent 60%),
            var(--bg);
        overflow-x: hidden;
    }

    /* --- Layout --- */
    .app {
        min-height: 100vh;
        display: flex;
    }

    /* Sidebar (desktop) */
    .sidebar {
        width: 25%;
        min-width: 260px;
        max-width: 360px;
        border-right: 1px solid var(--stroke);
        background: linear-gradient(180deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .55));
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        padding: 18px;
        position: relative;
    }

    .brand {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        border: 1px solid var(--stroke);
        background: var(--panel);
        border-radius: 16px;
        box-shadow: var(--shadow);
    }

    .brand .logo {
        width: 40px;
        height: 40px;
        border-radius: 14px;
        border: 1px solid var(--stroke);
        background:
            radial-gradient(16px 16px at 30% 30%, rgba(43, 100, 255, .35), transparent 60%),
            radial-gradient(18px 18px at 75% 65%, rgba(124, 58, 237, .25), transparent 62%),
            rgba(255, 255, 255, .8);
        display: grid;
        place-items: center;
    }

    .brand .title {
        line-height: 1.05;
    }

    .brand .title strong {
        display: block;
        font-size: 14px;
        letter-spacing: .3px;
    }

    .brand .title span {
        display: block;
        font-size: 12px;
        color: var(--muted);
    }

    .nav {
        margin-top: 16px;
        border: 1px solid var(--stroke);
        background: var(--panel);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        padding: 10px;
    }

    .nav a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 10px;
        border-radius: 14px;
        text-decoration: none;
        color: var(--text);
        border: 1px solid transparent;
    }

    .nav a:hover {
        background: rgba(43, 100, 255, .08);
        border-color: rgba(43, 100, 255, .16);
    }

    .nav svg {
        opacity: .85;
    }

    .sidebar .hint {
        margin-top: 14px;
        padding: 12px 12px;
        border-radius: var(--radius);
        border: 1px dashed var(--stroke-2);
        background: rgba(255, 255, 255, .55);
        color: var(--muted);
        font-size: 12px;
        line-height: 1.35;
    }

    /* Main (chat) */
    .main {
        flex: 1;
        padding: 18px;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 14px;
        border-radius: var(--radius);
        border: 1px solid var(--stroke);
        background: var(--panel-strong);
        box-shadow: var(--shadow);
    }

    .topbar .left {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .chip {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        border-radius: 999px;
        border: 1px solid var(--stroke);
        background: rgba(255, 255, 255, .7);
        color: var(--muted);
        font-size: 12px;
        white-space: nowrap;
    }

    .dot {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: linear-gradient(135deg, var(--brand), var(--brand-2));
        box-shadow: 0 0 0 3px rgba(43, 100, 255, .12);
    }

    .chat-card {
        flex: 1;
        min-height: 52vh;
        border-radius: var(--radius);
        border: 1px solid var(--stroke);
        background: var(--panel);
        box-shadow: var(--shadow);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .chat-header {
        padding: 14px 16px;
        border-bottom: 1px solid var(--stroke);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        background: rgba(255, 255, 255, .72);
    }

    .chat-header h1 {
        font-size: 14px;
        margin: 0;
        letter-spacing: .25px;
    }

    .chat-header p {
        margin: 2px 0 0;
        font-size: 12px;
        color: var(--muted);
    }

    .messages {
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        overflow: auto;
    }

    .msg.assistant {
        max-width: 100%;
        gap: 10px;
        align-items: flex-start;
    }

    .msg.user {
        max-width: 70%;
        gap: 10px;
        align-items: flex-start;
    }

    .avatar {
        width: 36px;
        height: 36px;
        border-radius: 14px;
        border: 1px solid var(--stroke);
        background: rgba(255, 255, 255, .85);
        display: grid;
        place-items: center;
        flex: 0 0 auto;
    }

    .bubble {
        border: 1px solid var(--stroke);
        background: rgba(255, 255, 255, .78);
        border-radius: 16px;
        padding: 12px 12px;
        box-shadow: 0 10px 22px rgba(13, 30, 64, .06);
        padding-bottom: 30px;
    }

    .bubble .meta {
        font-size: 11px;
        color: var(--muted);
        margin-bottom: 6px;
        display: flex;
        gap: 10px;
        align-items: center;
    }

    .bubble .text {
        font-size: 14px;
        line-height: 1.45;
    }

    .msg.user {
        margin-left: auto;
        /* ok */
        justify-content: flex-end;
        /* ok */
        flex-direction: row;
        /* important */
    }

    .msg.user .bubble {
        background: linear-gradient(135deg, rgba(43, 100, 255, .12), rgba(124, 58, 237, .10));
        border-color: rgba(43, 100, 255, .18);
    }

    /* Composer */
    .composer {
        border-radius: var(--radius);
        border: 1px solid var(--stroke);
        background: var(--panel-strong);
        box-shadow: var(--shadow);
        padding: 12px;
        display: flex;
        flex-direction: column;
        gap: 0px;
    }

    .input-row {
        display: flex;
        gap: 10px;
        align-items: stretch;
    }

    textarea {
        width: 100%;
        resize: none;
        min-height: 84px;
        padding: 12px 12px;
        border-radius: 16px;
        border: 1px solid var(--stroke);
        background: rgba(255, 255, 255, .85);
        color: var(--text);
        outline: none;
        font-size: 14px;
        line-height: 1.35;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4);
    }

    textarea:focus {
        border-color: rgba(43, 100, 255, .35);
        box-shadow: 0 0 0 4px rgba(43, 100, 255, .10);
    }

    .actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
        justify-content: space-between;
    }

    .btns {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 12px;
        border-radius: 999px;
        border: 1px solid var(--stroke);
        background: rgba(255, 255, 255, .75);
        color: var(--text);
        text-decoration: none;
        font-size: 13px;
        cursor: pointer;
        user-select: none;
    }

    .btn:hover {
        border-color: rgba(43, 100, 255, .22);
        background: rgba(43, 100, 255, .07);
    }

    .btn.primary {
        border-color: rgba(43, 100, 255, .30);
        background: linear-gradient(135deg, rgba(43, 100, 255, .16), rgba(124, 58, 237, .10));
    }

    /* --- Mobile "sandwich" menu (no JS) --- */
    .mobile-toggle {
        display: none;
        /* shown only on mobile */
    }

    /* Checkbox hack */
    #navToggle {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
    }

    .hamburger {
        display: none;
        width: 42px;
        height: 42px;
        border-radius: 14px;
        border: 1px solid var(--stroke);
        background: rgba(255, 255, 255, .82);
        box-shadow: var(--shadow);
        place-items: center;
        cursor: pointer;
        user-select: none;
    }

    .drawer {
        display: none;
    }

    @media (max-width: 920px) {
        .sidebar {
            min-width: 240px;
        }
    }

    @media (max-width: 820px) {
        .app {
            display: block;
        }

        .sidebar {
            display: none;
            /* hidden on phone */
        }

        /* topbar hamburger */
        .hamburger {
            display: grid;
        }

        /* drawer */
        .drawer {
            display: block;
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 50;
        }

        .drawer .backdrop {
            position: absolute;
            inset: 0;
            background: rgba(5, 10, 20, .20);
            opacity: 0;
            transition: opacity .2s ease;
        }

        .drawer .panel {
            position: absolute;
            top: 14px;
            left: 14px;
            width: min(86vw, 360px);
            max-height: calc(100vh - 28px);
            overflow: auto;
            padding: 14px;
            border-radius: 20px;
            border: 1px solid var(--stroke);
            background: rgba(255, 255, 255, .90);
            box-shadow: var(--shadow);
            transform: translateX(-10px);
            opacity: 0;
            transition: transform .2s ease, opacity .2s ease;
        }

        /* When checked: open drawer */
        #navToggle:checked~.drawer {
            pointer-events: auto;
        }

        #navToggle:checked~.drawer .backdrop {
            opacity: 1;
        }

        #navToggle:checked~.drawer .panel {
            transform: translateX(0);
            opacity: 1;
        }
    }

    /* Accessible helpers */
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }






    .main {
        flex: 1;
        display: flex;
        flex-direction: column;
        height: calc(100vh - 36px);
        /* ajuste si besoin */
    }

    .chat-card {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .messages {
        flex: 1;
        overflow-y: auto;
        padding-bottom: 140px;
        /* espace pour le composer */
    }

    .composer {
        position: sticky;
        bottom: 0;
        z-index: 20;

        background: var(--panel-strong);
        backdrop-filter: blur(12px);
        border-top: 1px solid var(--stroke);

        padding: 12px;
    }

    .btn-action {
        width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        gap: 7px;
        padding: 9px 6px;
        border-radius: 16px;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: .2px;
        color: #0b1630;
        background: linear-gradient(135deg, rgb(214 214 214 / 18%), rgb(141 141 141 / 18%), rgb(167 167 167 / 18%));
        border: 1px solid rgba(43, 100, 255, .35);
        box-shadow: 2 10px 26px rgba(13, 30, 64, .18), inset 0 0 0 1px rgba(255, 255, 255, .35);
        cursor: pointer;
        transition: all .25s ease;
        backdrop-filter: blur(10px);
        align-content: left;
    }

    .btn-action svg {
        opacity: .85;
    }

    .btn-action:hover {
        transform: translateY(-1px);
        background:
            linear-gradient(135deg, rgba(43, 100, 255, .28), rgba(124, 58, 237, .22)),
            rgba(255, 255, 255, .95);
        box-shadow:
            0 14px 34px rgba(13, 30, 64, .25),
            inset 0 0 0 1px rgba(255, 255, 255, .45);
    }

    .btn-action:active {
        transform: translateY(0);
        box-shadow:
            0 6px 18px rgba(13, 30, 64, .18),
            inset 0 0 0 1px rgba(255, 255, 255, .25);
    }

    .btn-action:focus-visible {
        outline: none;
        box-shadow:
            0 0 0 4px rgba(43, 100, 255, .35),
            0 12px 30px rgba(13, 30, 64, .22);
    }



    /* ===========================
   DROPDOWN OPTIONS (NO JS)
   =========================== */

    .dropdown-up {
        position: relative;
        outline: none;
    }

    /* cacher radios */
    .dropdown-up input[type="radio"] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    /* texte sélectionné sur le bouton */
    .option-btn .opt {
        display: none;
    }

    #opt-default:checked~.option-btn .opt-default {
        display: inline;
    }

    #opt-short:checked~.option-btn .opt-short {
        display: inline;
    }

    #opt-memory:checked~.option-btn .opt-memory {
        display: inline;
    }

    /* menu fermé par défaut */
    .dropdown-menu {
        position: absolute;
        bottom: calc(100% + 10px);
        left: 0;
        min-width: 220px;

        background: rgba(255, 255, 255, .95);
        border: 1px solid var(--stroke);
        border-radius: 14px;
        box-shadow: 0 14px 30px rgba(13, 30, 64, .25);
        padding: 6px;

        opacity: 0;
        transform: translateY(6px);
        pointer-events: none;
        transition: .2s ease;
        z-index: 50;
    }

    /* ✅ ouverture : quand on clique (focus) sur le bloc */
    .dropdown-up:focus-within .dropdown-menu {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    /* items */
    .dropdown-menu .item {
        display: block;
        padding: 10px 12px;
        border-radius: 10px;
        cursor: pointer;
        font-size: 13px;
    }

    .dropdown-menu .item:hover {
        background: rgba(43, 100, 255, .08);
    }


    /* cacher radios */
    .dropdown-up input[type="radio"] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    /* bouton : affiche le bon texte */
    .option-btn .opt {
        display: none;
    }

    #opt-default:checked~.option-btn .opt-default {
        display: inline;
    }

    #opt-image:checked~.option-btn .opt-image {
        display: inline-flex;
        gap: 8px;
        align-items: center;
    }

    #opt-url:checked~.option-btn .opt-url {
        display: inline-flex;
        gap: 8px;
        align-items: center;
    }

    #opt-pdf:checked~.option-btn .opt-pdf {
        display: inline-flex;
        gap: 8px;
        align-items: center;
    }

    #opt-short:checked~.option-btn .opt-short {
        display: inline-flex;
        gap: 8px;
        align-items: center;
    }

    #opt-memory:checked~.option-btn .opt-memory {
        display: inline-flex;
        gap: 8px;
        align-items: center;
    }

    /* ouverture menu */
    .dropdown-up:focus-within .dropdown-menu {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }


    .msg.mode-image .avatar {
        color: #7c3aed;
    }

    .msg.mode-pdf .avatar {
        color: #dc2626;
    }

    .msg.mode-url .avatar {
        color: #2563eb;
    }

    .msg.mode-short .avatar {
        color: #f59e0b;
    }

    .msg.mode-memory .avatar {
        color: #16a34a;
    }


    /* JOINDRE */
    .attachments {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 8px;
    }

    .attachments .chip {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 10px;
        border-radius: 999px;
        border: 1px solid var(--stroke);
        background: rgba(255, 255, 255, .75);
        font-size: 12px;
        color: var(--muted);
        overflow: hidden;
    }




    /* 1) Empêche les variations de largeur liées à la scrollbar */
    .messages {
        overflow-y: auto;
        /* ok */
        scrollbar-gutter: stable;
        /* réserve la place de la scrollbar */
    }

    /* Fallback si scrollbar-gutter pas supporté partout */
    .messages {
        overflow-y: scroll;
        /* scrollbar toujours présente => plus de "saut" */
    }

    /* 2) Important en flex: autorise le contenu à rétrécir sans pousser la mise en page */
    .msg,
    .msg .content,
    .bubble {
        min-width: 0;
    }

    /* 3) Les blocs code ne doivent jamais forcer un débordement horizontal */
    pre,
    code {
        max-width: 100%;
    }

    pre {
        overflow-x: auto;
    }

    /* 4) Stabilise la sidebar: évite le "25%" qui fait bouger le chat au resize */
    .sidebar {
        width: clamp(260px, 25vw, 360px);
        flex: 0 0 clamp(260px, 25vw, 360px);
    }

    /* 5) Stabilise les bulles (évite les recalculs contradictoires) */
    .msg.user {
        max-width: 100%;
        /* le conteneur prend la place */
    }

    .msg.user .bubble{
        max-width: min(720px, 85%);
        /* une limite stable + responsive */
    }


    .msg.assistant .bubble {
        max-width: 100%;
        /* une limite stable + responsive */
    }





        /* Le footer/composer reste "ancré" en bas */
        .composer {
            position: sticky;
            /* ou fixed si tu préfères */
            bottom: 0;
            z-index: 50;
            background: inherit;
            /* ou une couleur si besoin */
        }
    
        /* La rangée input */
        .input-row {
            display: flex;
            gap: 10px;
            align-items: flex-end;
            /* important: textarea pousse vers le haut */
        }
    
        /* ✅ textarea compact au départ */
        #message {
            width: 100%;
            resize: none;
            /* on gère nous-mêmes */
            overflow: hidden;
            /* évite scrollbar interne */
            line-height: 1.35;
            padding: 10px 12px;
    
            min-height: 40px;
            /* ~1 ligne */
            max-height: 170px;
            /* limite (ex: 5-6 lignes) */
    
            border-radius: 14px;
            box-sizing: border-box;
        }






* {
    box-sizing: border-box;
}

textarea {
    max-width: 100%;
}


    /* Empêche le zoom iOS sur focus (si font-size >= 16px) */
    input,
    textarea,
    select {
        font-size: 16px !important;
    }

    /* Optionnel : pour éviter les scrollbars horizontales si quelque chose dépasse */
    html,
    body {
        overflow-x: hidden;
    }


        span#ai_utilise {
            z-index: 40;
            position: absolute;
            right: 70px;
            top: -16px;
            padding-left: 10px;
            border: 1px solid #333;
            border-radius: 25px;
            font-size: smaller;
            background: #FFF;
            padding-right: 10px;
            padding-top: 2px;
            padding-bottom: 2px;
        }



.paste-wrapper {
display: flex;
gap: 8px;
align-items: flex-end;
}

.paste-btn {
background: transparent;
border: 1px solid rgba(255, 255, 255, .25);
border-radius: 8px;
padding: 6px;
cursor: pointer;
color: #5b5b5b;
}

.paste-btn:hover {
background: rgba(255, 255, 255, .1);
color: #2ecc71;
}


div#delete_discussion {
background: #f74f4f;
color: #FFF;
}



.badge-count {
display: inline-flex;
align-items: center;
justify-content: center;

min-width: 22px;
height: 22px;
padding: 0 6px;

margin-left: 8px;

background: #e53935;
/* rouge */
color: #fff;
font-size: 12px;
font-weight: 600;

border-radius: 999px;
/* rond */
line-height: 1;

box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}