:root{
    --bg:#0d1117; --panel:#111827; --warning:#F2816D; --border:#1f2937;
    --text:#e5e7eb; --muted:#9ca3af; --accent:#60a5fa; --code:#0b1220;
    /* Hauteurs “références” (ajustées pour mobile) */
    --header-h: 56px;
    --gap: 16px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
    margin:0; background:var(--bg); color:var(--text);
    font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    /* espace pour que le contenu ne passe pas sous le header fixe */
    padding-top: var(--header-h);
    /* safe areas iOS */
    padding-left:max(0px,env(safe-area-inset-left));
    padding-right:max(0px,env(safe-area-inset-right));
}

header{
    position:fixed; inset:0 auto auto 0; height:var(--header-h);
    display:flex; align-items:center; gap:12px;
    width: 100%;
    padding:0 14px; border-bottom:1px solid var(--border);
    background:linear-gradient(to bottom, rgba(13,17,23,.95), rgba(13,17,23,.85));
    backdrop-filter:blur(6px); z-index:3; flex-wrap:wrap;
}

/* Mise en page principale : une colonne qui remplit la hauteur visible */
main{
    max-width:1100px; margin:0 auto; padding:16px;
}
.shell{
    display:flex; flex-direction:column;
    /* 100vh – header – marges verticales du main (16 top + 16 bottom = 32) */
    min-height: calc(100vh - var(--header-h) - 32px);
    gap: var(--gap);
}

/* Zone de chat = la partie scrollable */
#chat{
flex:1 1 auto; min-height:0;
border:1px solid var(--border); border-radius:14px; background:var(--panel);
padding:16px; display:flex; flex-direction:column; gap:16px;
overflow: auto; /* important: scroll interne */
}

/* Avertissements */
.warning{
    border:1px solid var(--border); border-radius:14px; background:var(--warning);
    color:#000; padding:16px; display:flex; flex-direction:column; gap:10px; margin-bottom:10px;
}

/* Messages */
.msg{ display:flex; gap:12px; max-width:100%; }
.meta{ font-size:11px; color:var(--muted); margin-bottom:6px; }
.bubble{
    width:100%; max-width:100%;
    border:1px solid var(--border); border-radius:14px;
    padding:12px 14px; background:#0e1a2a; border-color:#1a2a43;
    overflow-x:hidden; word-break:break-word; overflow-wrap:anywhere; hyphens:auto;
}
.user .bubble{ background:#0b1220; border-color:var(--border); }

/* Composer collé en bas de la page (dans .shell) */
#composer{
display:flex; gap:12px; align-items:flex-start;
position:sticky; bottom:0; /* reste visible si #chat scrolle */
background:linear-gradient(to top, rgba(13,17,23,.95), rgba(13,17,23,.85));
backdrop-filter:blur(3px);
padding:12px; border:1px solid var(--border); border-radius:12px;
}
#input{
min-height:56px; max-height:240px; width:100%;
background:#0b1220; color:var(--text); border:1px solid var(--border);
border-radius:10px; padding:12px; outline:none; resize:vertical;
}
#input:focus{ border-color:#263447; box-shadow:0 0 0 2px rgba(96,165,250,.15); }
.btn{ border:1px solid var(--border); background:#0b1220; color:var(--text);
    padding:10px 14px; border-radius:12px; cursor:pointer; user-select:none;
}
.btn:hover{ border-color:#2b3a4d; }
.btn.primary{ background:#0b2647; border-color:#14365c; }
.btn.danger{ background:#3b0b0b; border-color:#5c1414; }

/* Status pills */
.pill{ padding:4px 8px; border:1px solid var(--border); border-radius:999px; font-size:12px; color:var(--muted); margin-left:auto; }
.pill.waiting{ color:#f0e68c; border-color:#6b6000; }
.pill.waiting::after{ content:" "; display:inline-block; width:1ch; animation:dots 1.2s steps(4,end) infinite; }
@keyframes dots{ 0%{content:""} 25%{content:"."} 50%{content:".."} 75%{content:"..."} 100%{content:""} }

.md h1,.md h2,.md h3,.md h4{ margin:.8em 0 .35em; line-height:1.2; scroll-margin-top:72px; }
.md h1{ font-size:1.6rem } .md h2{ font-size:1.35rem } .md h3{ font-size:1.2rem } .md h4{ font-size:1.05rem }
.md p{ margin:.5em 0 }
.md hr{ border:none; border-top:1px solid #2a3446; margin:12px 0; }
.md code{ background:var(--code); padding:.15em .35em; border-radius:6px; }
.md pre{ background:var(--code); padding:10px 12px; border-radius:10px; overflow-x:auto; border:1px solid var(--border); white-space:pre-wrap; word-break:break-word; }
.md pre code{ background:none; padding:0; white-space:inherit; }
.md ul,.md ol{ margin:.4em 0 .6em 1.3em }
.md a{ color:var(--accent); text-decoration:none; } .md a:hover{ text-decoration:underline; }
.md table{ border-collapse:collapse; width:100%; margin:.6em 0; display:block; overflow-x:auto; }
.md th,.md td{ border:1px solid #223045; padding:8px 10px; text-align:left; vertical-align:top; white-space:nowrap; }
.md thead th{ background:#0f1a2c; }
.md tbody tr:nth-child(odd){ background:#0e1625; }
.md img,.md video,.md iframe{ max-width:100%; height:auto; display:block; }

/* Thinking box */
.thinking-box{
    font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
    font-size:0.85rem; color:#9ca3af;
    background:#0f1220; border-left:3px solid #495a76;
    padding:6px 10px; margin:2px 0 10px 0;
    max-height:140px; overflow-y:auto; white-space:pre-wrap;
}
.thinking-box::before{ content:"Thinking…"; display:block; font-weight:600; margin-bottom:4px; color:#cbd5e1; }
.thin-hr{ border:none; border-top:1px solid #2a3446; margin:10px 0 12px 0; }
.green{ color: #33d17a } .red{ color:#ff5d5d; }

/* Bouton scroll-down (au-dessus du composer) */
.scroll-down{
    position: fixed;
    right: max(20px, env(safe-area-inset-right));
    bottom: calc(80px + env(safe-area-inset-bottom));
    background:#0b1220; border:1px solid #2b3a4d; color:#e5e7eb;
    padding:10px 14px; border-radius:50%; cursor:pointer; display:none; z-index:10;
    box-shadow:0 2px 6px rgba(0,0,0,0.4);
}
.scroll-down:hover{ background:#14365c; }

/* ===== Responsive ===== */
@media (max-width:1024px){
    body{ font-size:15px }
    main{ padding:14px }
    #chat{ padding:14px; gap:14px }
    .bubble{ padding:12px }
}
@media (max-width:820px){
    header{ gap:8px; padding:0 10px; }
    main{ padding:12px }
    .shell{ gap:12px }
    #chat{ padding:12px; border-radius:12px; }
    .bubble{ border-radius:12px }
    .md h1{ font-size:1.45rem } .md h2{ font-size:1.25rem } .md h3{ font-size:1.1rem } .md h4{ font-size:1rem }
    #composer{ flex-direction:column; gap:10px; }
    #composer .btn{ width:100% }
    .md th,.md td{ padding:6px 8px }
}
@media (max-width:600px){
    :root{ --header-h: 52px; } /* header un peu plus compact */
    body{ font-size:15px; line-height:1.55 }
    header{ padding:0 10px }
    main{ padding:10px }
    .shell{ gap:10px }
    #chat{ padding:10px; gap:12px; min-height:unset; }
    .msg{ gap:10px } .bubble{ padding:10px 12px }
    #input{ min-height:70px; padding:12px }
    .md h1{ font-size:1.35rem } .md h2{ font-size:1.2rem } .md h3{ font-size:1.05rem } .md h4{ font-size:0.95rem }
    .md table{ -webkit-overflow-scrolling:touch }
}
@media (max-width:380px){
    .btn{ padding:10px 12px } header{ gap:6px }
    .pill{ display:none } /* économise de la place */
    .md h1{ font-size:1.25rem } .md h2{ font-size:1.1rem } .md h3{ font-size:1rem } .md h4{ font-size:0.95rem }
}
@media (prefers-reduced-motion:reduce){
    *{ transition:none!important; animation:none!important }
}

.progress {
    width: 100%;
    background: #1e1e1e;       /* dark background */
    border-radius: 6px;
    overflow: hidden;
    height: 20px;
    box-shadow: inset 0 0 4px rgba(0,0,0,0.6);
}

.progress-bar {
    height: 100%;
    width: 0%;
    text-align: center;
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    transition: width 0.4s ease;
}

.progress-bar.red    { background: #e74c3c; } /* 0–49% */
.progress-bar.yellow { background: #f1c40f; } /* 50–80% */
.progress-bar.green  { background: #2ecc71; } /* 81–100% */