/* ============================================================
   Portail Legifrance — CSS principal
   Charte Cloud Temple dark · Zone lecture serif claire
   100% offline (pas de CDN, conforme SecNumCloud)
   ============================================================ */

/* ─── Reset ─── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

/* ─── Variables ─── */
:root {
    --bg:        #0f0f23;
    --surface:   #1a1a2e;
    --surface2:  #222240;
    --surface3:  #2a2a48;
    --accent:    #41a890;
    --accent-h:  #369b82;
    --accent-d:  rgba(65, 168, 144, 0.15);
    --text:      #e0e0e0;
    --text2:     #a0a0b8;
    --muted:     #666680;
    --danger:    #e74c3c;
    --warning:   #f39c12;
    --success:   #27ae60;
    --info:      #3498db;
    --border:    #2a2a48;
    --radius:    8px;
    --radius-l:  12px;

    /* Lecture serif claire */
    --paper:     #f8f6f0;
    --ink:       #1a1a1a;
    --ink-2:     #555;
    --rule:      #d4cfc4;
    --quote-bar: #41a890;
    --quote-bg:  rgba(65, 168, 144, 0.06);
    --serif:     "Source Serif Pro", "EB Garamond", Georgia, "Times New Roman", serif;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    overflow: hidden;
    font-size: 14px;
    line-height: 1.5;
}

/* ─── Layout ─── */
.app {
    display: grid;
    grid-template-rows: 52px 1fr;
    height: 100vh;
}

.header {
    background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
    /* Bordure d'accent (vert turquoise Cloud Temple) — signature visuelle
       du portail. */
    border-bottom: 2px solid var(--accent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.2rem;
}

.brand { display: flex; align-items: center; gap: .8rem; }

/* ─── Bouton burger (visible uniquement en mode mobile drawer) ─── */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    padding: 0;
    gap: 4px;
    transition: background .15s, border-color .15s;
}
.nav-toggle:hover { background: rgba(255, 255, 255, .08); }
.nav-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.nav-toggle-bar {
    display: block;
    width: 18px;
    height: 2px;
    background: rgba(255, 255, 255, .85);
    border-radius: 2px;
    transition: transform .2s, opacity .2s;
}
/* Animation "burger → croix" quand la sidebar est ouverte */
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
    opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.logo {
    height: 28px;
    width: auto;
    display: block;
    /* Le SVG du logo CT a un fond clair → on le neutralise pour le header dark */
    filter: brightness(0) invert(1) opacity(.92);
}
.brand-title {
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .92);
    letter-spacing: .01em;
}
/* Petit séparateur vertical discret entre le logo et le titre. Évite
   d'avoir un caractère ``|`` trop blanc qui « pète » à l'écran.
   Utilisé via <span class="brand-sep" aria-hidden="true">|</span>. */
.brand-sep {
    color: var(--muted);
    opacity: .55;
    font-weight: 300;
    margin-right: .15em;
    -webkit-user-select: none;
    user-select: none;
}

/* Indicateur d'état plateforme (bouton cliquable + point coloré + label) */
.header-status {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--text2);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .02em;
    /* Reset bouton (le .header-status est maintenant un <button>) */
    background: transparent;
    border: none;
    padding: .35rem .55rem;
    border-radius: var(--radius);
    cursor: pointer;
    font-family: inherit;
    transition: background .15s;
}
.header-status:hover { background: rgba(255, 255, 255, .06); }
.header-status:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.health-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 0 transparent;
    transition: background-color .25s, box-shadow .25s;
}
.health-dot--ok {
    background: var(--success);
    box-shadow: 0 0 8px rgba(39, 174, 96, .55);
    animation: health-pulse 2.4s ease-in-out infinite;
}
.health-dot--degraded {
    background: var(--warning);
    box-shadow: 0 0 8px rgba(243, 156, 18, .55);
    animation: health-pulse-warn 1.6s ease-in-out infinite;
}
.health-dot--ko {
    background: var(--danger);
    box-shadow: 0 0 8px rgba(231, 76, 60, .55);
    animation: health-pulse-danger 1.1s ease-in-out infinite;
}
.health-dot--unknown { background: var(--muted); }
.health-label--ok { color: var(--success); }
.health-label--degraded { color: var(--warning); }
.health-label--ko { color: var(--danger); }
@keyframes health-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(39, 174, 96, .55); }
    50%      { box-shadow: 0 0 14px rgba(39, 174, 96, .85); }
}
@keyframes health-pulse-warn {
    0%, 100% { box-shadow: 0 0 8px rgba(243, 156, 18, .55); }
    50%      { box-shadow: 0 0 14px rgba(243, 156, 18, .85); }
}
@keyframes health-pulse-danger {
    0%, 100% { box-shadow: 0 0 8px rgba(231, 76, 60, .55); }
    50%      { box-shadow: 0 0 14px rgba(231, 76, 60, .85); }
}

.layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    overflow: hidden;
}

.sidebar {
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: 1rem .8rem;
    display: flex;
    flex-direction: column;
}

.nav { display: flex; flex-direction: column; gap: .25rem; }

.nav-btn {
    background: transparent;
    border: none;
    color: var(--text2);
    text-align: left;
    padding: .6rem .8rem;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: .9rem;
    transition: background .15s, color .15s;
    display: flex;
    align-items: center;
    gap: .6rem;
}
.nav-btn:hover { background: var(--surface2); color: var(--text); }
.nav-btn.active {
    background: var(--accent-d);
    color: var(--accent);
    font-weight: 500;
}
.nav-icon { font-size: 1.05rem; }

.sidebar-footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}
.sidebar-link {
    color: var(--muted);
    text-decoration: none;
    font-size: .8rem;
    padding: .25rem .5rem;
}
.sidebar-link:hover { color: var(--accent); }

/* Variante bouton (pour ouvrir la modale "À propos") — garde l'apparence d'un lien */
.sidebar-link--btn {
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: center;
    font-family: inherit;
    width: 100%;
}
.sidebar-link--btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Petit tag de version, discret, centré sous le bouton "À propos" */
.sidebar-version {
    color: var(--muted);
    font-size: .68rem;
    letter-spacing: .04em;
    padding: .15rem .5rem;
    margin-top: .15rem;
    font-family: "SF Mono", Menlo, Monaco, Consolas, monospace;
    user-select: none;
    opacity: .7;
    text-align: center;
}


.content {
    overflow-y: auto;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* Scrollbars discrètes */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ============================================================
   Écran : Conversation
   ============================================================ */

.screen { display: none; flex: 1; flex-direction: column; min-height: 0; }
.screen.active { display: flex; }

#screen-chat {
    background: var(--bg);
    overflow: hidden;
    position: relative;
}

/* Welcome */
.welcome {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}

.welcome[hidden] { display: none; }

.welcome-title {
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--text);
    margin-bottom: .8rem;
}
.welcome-sub {
    color: var(--text2);
    max-width: 540px;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    max-width: 720px;
    justify-content: center;
}
.suggestion {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text2);
    padding: .55rem 1rem;
    border-radius: 999px;
    font-size: .85rem;
    cursor: pointer;
    transition: all .15s;
}
.suggestion:hover {
    background: var(--surface2);
    color: var(--accent);
    border-color: var(--accent);
}

/* Messages */
.messages {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}
.messages[hidden] { display: none; }

.msg { display: flex; flex-direction: column; gap: .4rem; max-width: 920px; }
.msg.user { align-self: flex-end; }
.msg.assistant { align-self: flex-start; width: 100%; }

.msg-role {
    font-size: .72rem;
    color: var(--muted);
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.msg.user .msg-body {
    background: var(--surface2);
    border-radius: var(--radius);
    padding: .7rem 1rem;
    color: var(--text);
}

.msg.assistant .msg-body {
    background: var(--surface);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 1rem 1.25rem;
}

/* Tool trace */
.tools {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-bottom: .6rem;
    padding-bottom: .6rem;
    border-bottom: 1px dashed var(--border);
}
.tool-line {
    font-family: "SF Mono", Menlo, Monaco, Consolas, monospace;
    font-size: .78rem;
    color: var(--text2);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .5rem;
    line-height: 1.4;
}
.tool-line.ok::before  { content: "✓"; color: var(--success); align-self: center; }
.tool-line.err::before { content: "✗"; color: var(--danger); align-self: center; }
.tool-line.run::before { content: "⚙"; color: var(--info); align-self: center; }
.tool-line .tname { color: var(--accent); }
.tool-line .targs {
    color: var(--muted);
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Résumé humain d'un tool (ex: "→ 3 résultats trouvés"). Affiché en gris
   discret après le ✓ vert pour rassurer un utilisateur non technique sans
   alourdir la timeline. */
.tool-summary {
    color: var(--muted);
    font-style: italic;
    font-size: .76rem;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Compteur "× N" affiché quand plusieurs appels d'outil consécutifs sont
   identiques (déduplication visuelle). */
.tool-multi {
    color: var(--accent);
    font-size: .72rem;
    font-weight: 600;
    background: var(--accent-d);
    padding: .05rem .35rem;
    border-radius: 999px;
    margin-left: .25rem;
}


/* Markdown body */
.md-body { color: var(--text); line-height: 1.7; }
.md-body h1, .md-body h2, .md-body h3 {
    font-weight: 600;
    margin: 1.2em 0 .5em;
    line-height: 1.3;
    border-left: 3px solid var(--accent);
    padding-left: .6em;
}
.md-body h1 { font-size: 1.4rem; }
.md-body h2 { font-size: 1.2rem; }
.md-body h3 { font-size: 1.05rem; }
.md-body p { margin: .6em 0; }
.md-body ul, .md-body ol { margin: .5em 0 .5em 1.5em; }
.md-body li { margin: .25em 0; }
.md-body strong { color: var(--accent); }
.md-body em { color: var(--text); }
.md-body blockquote {
    border-left: 3px solid var(--accent);
    background: var(--accent-d);
    padding: .6em 1em;
    margin: .8em 0;
    color: var(--text);
    font-style: italic;
}
.md-body code {
    background: #2a2a48;
    color: var(--accent);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: .85em;
    font-family: "SF Mono", Menlo, Monaco, Consolas, monospace;
}
.md-body pre {
    background: #1a1a2e;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .8em 1em;
    overflow-x: auto;
    margin: .8em 0;
}
.md-body pre code { background: transparent; color: var(--text); padding: 0; }
.md-body table {
    border-collapse: collapse;
    margin: .8em 0;
    font-size: .9em;
}
.md-body th, .md-body td {
    border: 1px solid var(--border);
    padding: .4em .8em;
    text-align: left;
}
.md-body th { background: var(--surface2); }
.md-body a { color: var(--accent); text-decoration: underline; }
.md-body a:hover { color: var(--accent-h); }
.md-body a.article-ref { cursor: pointer; border-bottom: 1px dashed var(--accent); text-decoration: none; }
.md-body a.article-ref:hover { background: rgba(65,168,144,.12); border-radius: 2px; }
.md-body hr { border: 0; border-top: 1px solid var(--border); margin: 1em 0; }

/* Composer */
.composer-wrap {
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 1rem 2rem 1.2rem;
}

.composer {
    max-width: 920px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius-l);
    padding: .55rem .55rem .55rem 1rem;
    transition: border-color .15s;
}
.composer:focus-within { border-color: var(--accent); }

.composer-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text);
    resize: none;
    font-family: inherit;
    font-size: .95rem;
    line-height: 1.45;
    max-height: 200px;
    outline: none;
    padding: .35rem 0;
}
.composer-input::placeholder { color: var(--muted); }

.composer-send {
    background: var(--accent);
    color: white;
    border: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, opacity .15s;
}
.composer-send:hover { background: var(--accent-h); }
.composer-send:disabled { opacity: .4; cursor: not-allowed; }

.composer-help {
    max-width: 920px;
    margin: .35rem auto 0;
    color: var(--muted);
    font-size: .72rem;
    text-align: right;
}
.composer-help kbd {
    background: var(--surface3);
    color: var(--text2);
    padding: 1px 6px;
    border-radius: 3px;
    border: 1px solid var(--border);
    font-family: "SF Mono", Menlo, Monaco, Consolas, monospace;
    font-size: .72rem;
}

/* Streaming caret */
.streaming::after {
    content: "▍";
    color: var(--accent);
    animation: blink 1s steps(1) infinite;
    margin-left: 2px;
}
@keyframes blink { 50% { opacity: 0; } }

/* Erreurs */
.alert {
    border-radius: var(--radius);
    padding: .6em 1em;
    margin: .8em 0;
    border-left: 3px solid;
}
.alert.error  { border-color: var(--danger);  background: rgba(231, 76, 60, .08); color: var(--danger); }
.alert.info   { border-color: var(--info);    background: rgba(52, 152, 219, .08); color: var(--info); }

/* ============================================================
   Modale "À propos du portail"
   ============================================================ */

.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.modal[hidden] { display: none; }

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(2px);
}

.modal-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 3px solid var(--accent);
    border-radius: var(--radius-l);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
    max-width: 560px;
    width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    animation: modal-in .18s ease-out;
}
@keyframes modal-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem .8rem;
    border-bottom: 1px solid var(--border);
}
.modal-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: .01em;
}
.modal-close {
    background: transparent;
    border: none;
    color: var(--text2);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 .35rem;
    border-radius: 4px;
    transition: background .15s, color .15s;
}
.modal-close:hover { background: var(--surface2); color: var(--accent); }
.modal-close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.modal-body {
    padding: 1rem 1.25rem 1.25rem;
    overflow-y: auto;
    color: var(--text2);
    font-size: .9rem;
    line-height: 1.55;
}
.modal-body p { margin: 0 0 .8em; }
.modal-body p:last-child { margin-bottom: 0; }
.modal-loading { color: var(--muted); font-style: italic; }

/* Sections de la modale "À propos" */
.about-section {
    margin: 0 0 1rem;
    padding-bottom: .8rem;
    border-bottom: 1px dashed var(--border);
}
.about-section:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.about-section h3 {
    font-size: .85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--accent);
    margin-bottom: .4rem;
}
.about-list { list-style: none; padding: 0; margin: 0; }
.about-list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .25rem 0;
    font-size: .85rem;
}
.about-list .about-key { color: var(--muted); }
.about-list .about-val { color: var(--text); font-weight: 500; }
.about-list .about-val--ok { color: var(--success); }
.about-list .about-val--ko { color: var(--warning); }

/* Liste à puces "value-props" (démonstrateur · gratuit · SecNumCloud · zéro
   collecte) affichée juste après l'introduction de la modale À propos. */
.about-bullets {
    list-style: none;
    padding: 0;
    margin: .8em 0 1.2em;
    display: flex;
    flex-direction: column;
    gap: .35em;
}
.about-bullets li {
    color: var(--text2);
    font-size: .85rem;
    line-height: 1.45;
    padding: .35em .55em;
    background: rgba(65, 168, 144, 0.06);
    border-left: 2px solid var(--accent);
    border-radius: 4px;
}

/* ============================================================
   Chenillard "thinking" pendant l'attente
   ============================================================ */

.thinking {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--text2);
    font-size: .85rem;
    font-style: italic;
    padding: .35rem 0;
}
.thinking-label { color: var(--text2); }
.thinking-dots {
    display: inline-flex;
    gap: 4px;
}
.thinking-dots span {
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
    display: inline-block;
    animation: thinking-bounce 1.2s ease-in-out infinite;
}
.thinking-dots span:nth-child(2) { animation-delay: .15s; }
.thinking-dots span:nth-child(3) { animation-delay: .30s; }
/* Compteur de temps écoulé "12s" / "1m 23s" — discret à droite des dots
   pour rassurer pendant les longues attentes (style smartphone). */
.thinking-elapsed {
    margin-left: .5rem;
    color: var(--muted);
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    font-family: "SF Mono", Menlo, Monaco, Consolas, monospace;
}
.thinking-elapsed:empty { display: none; }
@keyframes thinking-bounce {
    0%, 80%, 100% { transform: scale(.6); opacity: .5; }
    40%           { transform: scale(1.0); opacity: 1; }
}

/* Message d'erreur affiché à droite d'une tool-line en échec */
.tool-error-msg {
    color: var(--danger);
    font-style: italic;
    font-size: .76rem;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Bouton "Détails" dépliable pour le payload brut d'une erreur tool */
.tool-error-details {
    flex-basis: 100%;       /* passe à la ligne sous la tool-line */
    margin-left: 1.5em;     /* alignement avec le texte au-dessus */
    margin-top: .15rem;
    font-family: inherit;
    font-style: normal;
}
.tool-error-details summary {
    cursor: pointer;
    color: var(--muted);
    font-size: .72rem;
    user-select: none;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: .25em;
    padding: .15rem .35rem;
    border-radius: 4px;
    transition: background .12s, color .12s;
}
.tool-error-details summary::-webkit-details-marker { display: none; }
.tool-error-details summary::before {
    content: "▸";
    font-size: .7em;
    transition: transform .12s;
}
.tool-error-details[open] > summary::before {
    transform: rotate(90deg);
}
.tool-error-details summary:hover {
    background: var(--surface2);
    color: var(--text2);
}
.tool-error-raw {
    margin-top: .35rem;
    background: rgba(231, 76, 60, .07);
    border: 1px solid rgba(231, 76, 60, .25);
    border-radius: 4px;
    padding: .5rem .65rem;
    color: var(--danger);
    font-family: "SF Mono", Menlo, Monaco, Consolas, monospace;
    font-size: .72rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    max-height: 240px;
    overflow-y: auto;
}


/* ============================================================
   Popover (utilisé par l'indicateur de santé)
   ============================================================ */

.popover {
    position: fixed;
    top: 60px; /* sous le header (52px) + 8px de marge */
    right: 1rem;
    z-index: 1100;
    width: 340px;
    max-width: calc(100vw - 2rem);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .55);
    animation: modal-in .18s ease-out;
}
.popover[hidden] { display: none; }

/* Variante "santé" : bordure haute selon l'état (couleur dynamique via JS
   appliquée sur ``.health-dot--xxx`` ; ici on garde une bordure neutre). */
.popover--health {
    border-top: 3px solid var(--accent);
}

.popover-arrow {
    position: absolute;
    top: -7px;
    right: 24px;
    width: 12px;
    height: 12px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
    transform: rotate(45deg);
}

.popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .65rem .9rem .55rem;
    border-bottom: 1px solid var(--border);
}
.popover-title-bar {
    font-size: .82rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: .03em;
    text-transform: uppercase;
}
.popover-close {
    background: transparent;
    border: none;
    color: var(--text2);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 .25rem;
    border-radius: 4px;
}
.popover-close:hover { background: var(--surface2); color: var(--accent); }

.popover-body {
    padding: .8rem .9rem 1rem;
    color: var(--text2);
    font-size: .85rem;
    line-height: 1.5;
}
.popover-loading { color: var(--muted); font-style: italic; }

.popover-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: .35rem;
}
.popover-desc {
    margin-bottom: .7rem;
    color: var(--text2);
}
.popover-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px dashed var(--border);
    padding-top: .5rem;
}
.popover-list li {
    display: flex;
    justify-content: space-between;
    gap: .8rem;
    padding: .2rem 0;
    font-size: .82rem;
}
.popover-key { color: var(--muted); }
.popover-val { color: var(--text); font-weight: 500; }
.popover-val--ok { color: var(--success); }
.popover-val--ko { color: var(--warning); }

/* =============================================================================
   Sidebar drawer (mobile)
   --------------------------------------------------------------------------
   Backdrop semi-transparent visible uniquement quand la sidebar est ouverte
   en mode drawer (≤900px). Désactivé sur desktop.
   ========================================================================== */
.sidebar-backdrop {
    /* Caché par défaut sur desktop — la sidebar fait partie du layout grid. */
    display: none;
}
.sidebar-backdrop[hidden] { display: none; }

/* Responsive (≤900px) — la sidebar devient un drawer rétractable. */
@media (max-width: 900px) {
    /* La sidebar disparaît du flux grid (1 seule colonne pour le contenu). */
    .layout { grid-template-columns: 1fr; }

    /* Drawer : positionnée en fixed, hors écran à gauche par défaut.
       Ouverture via .sidebar.is-open (toggle JS). */
    .sidebar {
        display: flex;            /* on rétablit l'affichage (était "none") */
        position: fixed;
        top: 52px;                /* sous le header */
        left: 0;
        bottom: 0;
        width: 260px;
        max-width: 80vw;
        z-index: 1050;
        transform: translateX(-100%);
        transition: transform .22s ease-out;
        box-shadow: 6px 0 20px rgba(0, 0, 0, .35);
    }
    .sidebar.is-open {
        transform: translateX(0);
    }

    /* Backdrop semi-transparent quand le drawer est ouvert. */
    .sidebar-backdrop {
        display: block;
        position: fixed;
        top: 52px;                /* ne couvre pas le header */
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, .55);
        backdrop-filter: blur(2px);
        z-index: 1040;
        animation: modal-in .15s ease-out;
    }
    .sidebar-backdrop[hidden] { display: none; }

    /* Le bouton burger devient visible uniquement sur mobile. */
    .nav-toggle {
        display: inline-flex;
    }

    /* En mobile on planque le titre long pour ne garder que le logo
       (le burger occupe déjà de la place côté gauche). */
    .brand-title { display: none; }

    .messages { padding: 1rem; }
    .composer-wrap { padding: .8rem 1rem 1rem; }
    .modal-card { max-height: 90vh; }
    .popover {
        top: 56px;
        right: .5rem;
        left: .5rem;
        width: auto;
    }
    .popover-arrow { display: none; }
}

/* =============================================================================
   Panneau "Références citées" — lazy-loading sous chaque réponse assistant
   --------------------------------------------------------------------------
   Contraintes UX (cf. retours v0.4.0) :
   - Le panneau ne doit PAS prendre toute la largeur de l'écran (le fil
     conversationnel est borné à 920px, le panneau s'aligne dessus).
   - Au-delà de quelques refs, on bascule en GRILLE 2 colonnes pour ne pas
     produire un long mur vertical.
   - Hauteur max bornée + scroll interne : 9 refs = panneau scrollable,
     pas un débordement qui pousse le composer hors-écran.
   ========================================================================== */
/* Le panneau est désormais un <details> natif : replié par défaut, déplié
   sur clic du <summary>. Au repos il n'occupe qu'une seule ligne ("📚 N
   références citées") — gain visuel énorme quand l'agent cite 20+ refs. */
.refs-panel {
    margin: 1rem 0 .25rem;
    max-width: 100%;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
}

/* Le summary du <details> = la barre repliée toujours visible. */
.refs-summary {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
    color: var(--text2);
    padding: .55rem .9rem;
    cursor: pointer;
    list-style: none;
    border-radius: 10px;
    -webkit-user-select: none;
    user-select: none;
    transition: background .15s;
}
.refs-summary::-webkit-details-marker { display: none; }
.refs-summary:hover { background: rgba(255, 255, 255, .03); }
.refs-summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* Quand le panneau est ouvert, on borne la hauteur du conteneur de la
   liste (pas du panneau entier — sinon le summary scrolle aussi). */
.refs-panel[open] > .refs-list {
    max-height: 360px;
    overflow-y: auto;
    padding: .25rem .9rem .75rem;
}
.refs-panel[open] > .refs-summary {
    border-bottom: 1px dashed var(--border);
    border-radius: 10px 10px 0 0;
}

.refs-icon { font-size: 1.05rem; }
.refs-title { font-weight: 600; color: var(--text); }
.refs-count {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    font-size: .78rem;
    background: var(--surface2);
    padding: .05rem .45rem;
    border-radius: 999px;
    min-width: 1.6em;
    text-align: center;
}
/* Chevron de l'état déplié/replié, à l'extrême droite du summary */
.refs-toggle {
    margin-left: auto;
    color: var(--muted);
    font-size: .9rem;
    flex-shrink: 0;
    transition: transform .15s ease;
}
.refs-panel[open] > .refs-summary .refs-toggle {
    transform: rotate(180deg);
}
/* Grille fluide : au-delà de ≈600px de large, on passe en 2 colonnes.
   En dessous, on retombe en colonne unique (responsive auto). */
.refs-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    /* 2 colonnes fixes : compact et lisible. Sur mobile (<700px) on
       repasse en 1 colonne via le media query plus bas. */
    grid-template-columns: 1fr 1fr;
    gap: .45rem;
}
.ref-item {
    /* On laisse <details> gérer son propre padding pour que le summary
       reste cliquable sur toute la largeur. */
    padding: 0;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.18);
    border-left: 3px solid var(--accent, #41a890);
    min-width: 0;
}
.ref-item.ref-decision { border-left-color: #c084fc; }
.ref-item.ref-text     { border-left-color: #60a5fa; }

/* L'élément <details> intérieur — c'est lui qui porte la zone cliquable. */
.ref-details {
    /* Reset des styles natifs de <details> sur Chrome/Safari. */
    border: none;
    background: transparent;
}
.ref-details > summary {
    /* Cache le triangle natif et notre rendu propre. */
    list-style: none;
    cursor: pointer;
    padding: .45rem .6rem;
    /* Empêche la sélection de texte au double-clic sur summary. */
    -webkit-user-select: none;
    user-select: none;
}
.ref-details > summary::-webkit-details-marker { display: none; }
.ref-details > summary:focus-visible {
    outline: 2px solid var(--accent, #41a890);
    outline-offset: -2px;
    border-radius: 4px;
}
.ref-details[open] > summary {
    /* Sépare visuellement le summary du contenu déplié. */
    border-bottom: 1px dashed var(--border);
}
.ref-head {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    /* Le titre peut s'enrouler proprement maintenant qu'on a 2 colonnes
       larges et un mode déplié — pas d'ellipse forcée. */
    flex-wrap: wrap;
    font-size: .85rem;
    line-height: 1.35;
}
.ref-kind {
    text-transform: uppercase;
    font-size: .66rem;
    letter-spacing: .05em;
    color: var(--muted);
    padding: .05rem .3rem;
    border: 1px solid var(--border);
    border-radius: 3px;
    flex-shrink: 0;
}
/* Petit indicateur ▸/▾ ajouté côté JS pour annoncer l'état déplié/replié. */
.ref-toggle {
    margin-left: auto;
    color: var(--muted);
    font-size: .78rem;
    flex-shrink: 0;
    transition: transform .15s ease;
}
.ref-details[open] > summary .ref-toggle {
    transform: rotate(90deg);
}
.ref-head a, .ref-head span:not(.ref-kind):not(.ref-toggle) {
    color: var(--text);
    text-decoration: none;
    min-width: 0;
    /* En mode plié, on tronque ; en mode déplié, on autorise le wrap.
       Le wrap est activé via .ref-details[open] (cf. plus bas). */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.ref-details[open] .ref-head a,
.ref-details[open] .ref-head span:not(.ref-kind):not(.ref-toggle) {
    /* En mode déplié, autoriser plusieurs lignes pour les titres longs. */
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}
.ref-head a {
    border-bottom: 1px dashed var(--accent, #41a890);
}
.ref-head a:hover { color: var(--accent, #41a890); }
.ref-code { color: var(--muted); font-size: .82rem; }
/* Le contenu déplié : sous-titre (ID) + extrait court. */
.ref-body {
    padding: .4rem .6rem .55rem;
}
.ref-snippet {
    margin: 0;
    color: var(--text2);
    font-size: .78rem;
    line-height: 1.45;
}
.refs-more {
    margin: .55rem auto 0;
    display: block;
    padding: .35rem .8rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--text2);
    cursor: pointer;
    font-size: .8rem;
    transition: background-color .15s ease, color .15s ease;
}
.refs-more:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
}
.refs-more:disabled { opacity: .5; cursor: progress; }

/* Sous-titre d'une référence : ID Legifrance brut affiché en monospace
   discret quand il n'apparaît pas déjà dans le titre principal. */
.ref-subtitle {
    display: block;
    margin-top: .1rem;
    font-family: "SF Mono", Menlo, Monaco, Consolas, monospace;
    font-size: .68rem;
    color: var(--muted);
    letter-spacing: .02em;
    /* Coupe propre si l'ID + autre chose dépasse. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Mobile : panneau pleine largeur, grille 1 colonne (déjà naturel
   avec le minmax 260px), hauteur réduite. */
@media (max-width: 700px) {
    .refs-panel { max-height: 280px; padding: .6rem .7rem; }
    .refs-list { grid-template-columns: 1fr; }
}

/* =============================================================================
   Barre d'actions du chat — Reset + Export Markdown / HTML
   Bandeau discret au-dessus du composer (cf. index.html : .composer-actions).
   ========================================================================== */

.composer-actions {
    max-width: 920px;
    margin: 0 auto .6rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    /* Aligné à droite (proche du bouton "Envoyer") pour suggérer
       qu'il s'agit d'actions secondaires sur le fil courant. */
    justify-content: flex-end;
}

.composer-action {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text2);
    font-family: inherit;
    font-size: .78rem;
    padding: .35rem .7rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, opacity .15s;
}
.composer-action:hover:not(:disabled) {
    background: var(--surface2);
    color: var(--accent);
    border-color: var(--accent);
}
.composer-action:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.composer-action:disabled {
    opacity: .35;
    cursor: not-allowed;
}
.composer-action-caret {
    font-size: .65rem;
    margin-left: .15rem;
    color: var(--muted);
}

/* Conteneur du dropdown Export — positionné en relatif pour ancrer le menu */
.composer-action-menu {
    position: relative;
}

.composer-action-dropdown {
    position: absolute;
    bottom: calc(100% + .35rem);
    right: 0;
    min-width: 200px;
    list-style: none;
    margin: 0;
    padding: .35rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
    z-index: 50;
    animation: modal-in .15s ease-out;
}
.composer-action-dropdown[hidden] { display: none; }

.composer-action-item {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: var(--text);
    font-family: inherit;
    font-size: .85rem;
    padding: .5rem .65rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background .12s, color .12s;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.composer-action-item:hover {
    background: var(--surface2);
    color: var(--accent);
}
.composer-action-hint {
    color: var(--muted);
    font-size: .72rem;
    font-family: "SF Mono", Menlo, Monaco, Consolas, monospace;
}

@media (max-width: 900px) {
    .composer-actions { justify-content: stretch; }
    .composer-action { flex: 1; justify-content: center; }
}


/* ─────────────────────────────────────────────────────────────────
   Disclaimer modal — affichée à la 1ère visite uniquement
   (acceptation persistée dans localStorage avec clé versionnée).

   On réutilise la base ``.modal`` existante (positionnement, backdrop,
   card centrée, animation modal-in) et on apporte une variante visuelle
   "accent" pour bien marquer qu'il s'agit d'un message légal/sécuritaire
   avant l'utilisation. Pas de croix de fermeture : seul le bouton
   d'acceptation permet de continuer.
   ───────────────────────────────────────────────────────────────── */

.modal-card--disclaimer {
    /* Plus large qu'une modale classique : les puces respirent mieux. */
    max-width: 560px;
    /* Liseré accent qui rappelle l'identité Cloud Temple sans être
       intrusif. La box-shadow est plus marquée pour signaler une
       interaction bloquante (ce n'est pas un simple popover). */
    border-top: 4px solid var(--accent);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
}

.modal-header--disclaimer {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.1rem 1.25rem .25rem;
    /* On retire la bordure basse héritée — le bandeau ne fait pas barre
       de titre, c'est juste un en-tête visuel. */
    border-bottom: none;
}

.disclaimer-badge {
    /* Badge ⚖️ rond avec halo accent — donne une vraie "attaque visuelle"
       en haut à gauche. Évite le banal "icône inline" sans poids. */
    width: 2.4rem;
    height: 2.4rem;
    flex: 0 0 2.4rem;
    border-radius: 50%;
    background: rgba(65, 168, 144, .15);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    line-height: 1;
}

.modal-body--disclaimer {
    padding: .5rem 1.25rem 1rem;
}

.disclaimer-lead {
    font-size: 1rem;
    line-height: 1.5;
    margin: 0 0 1rem;
    color: var(--text);
}

.disclaimer-points {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.disclaimer-points li {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .65rem .8rem;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: .9rem;
    line-height: 1.45;
    color: var(--text);
}

.disclaimer-icon {
    flex: 0 0 1.4rem;
    font-size: 1.05rem;
    line-height: 1.45;
}

.disclaimer-accept-line {
    font-size: .85rem;
    color: var(--muted);
    margin: 0;
    text-align: center;
    font-style: italic;
}

.modal-footer--disclaimer {
    /* Footer avec un seul bouton plein-largeur : friction minimale,
       cible facile au tactile, message clair. Pas de bouton "Refuser"
       — pour refuser, on ferme l'onglet. */
    padding: .25rem 1.25rem 1.25rem;
    display: flex;
}

.disclaimer-accept-btn {
    flex: 1;
    padding: .75rem 1rem;
    font-size: .95rem;
    font-weight: 600;
}

@media (max-width: 600px) {
    .modal-card--disclaimer {
        /* Sur petit écran, on prend toute la largeur pour ne pas
           sentir la modale "flotter" au milieu. */
        margin: 1rem;
    }
    .disclaimer-points li { font-size: .85rem; }
    .disclaimer-lead { font-size: .95rem; }
}