/* ═══════════════════════════════════════════════════════════════
   Ddc Chat — feuille de style (Material 3, fidèle à l'app Android)
   ═══════════════════════════════════════════════════════════════ */

:root {
  --primary: #6750A4;
  --on-primary: #FFFFFF;
  --primary-container: #EADDFF;
  --on-primary-container: #21005D;
  --secondary-container: #E8DEF8;
  --tertiary-container: #FFD8E4;
  --surface: #FFFBFE;
  --surface-container: #F3EDF7;
  --surface-container-high: #ECE6F0;
  --on-surface: #1C1B1F;
  --on-surface-variant: #49454F;
  --outline-variant: #CAC4D0;
  --error: #B3261E;
  --inverse-surface: #322F35;
  --inverse-on-surface: #F5EFF7;
  --shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08);
  --radius: 28px;
}

html[data-theme="dark"] {
  --primary: #D0BCFF;
  --on-primary: #381E72;
  --primary-container: #4F378B;
  --on-primary-container: #EADDFF;
  --secondary-container: #4A4458;
  --tertiary-container: #633B48;
  --surface: #1C1B1F;
  --surface-container: #211F26;
  --surface-container-high: #2B2930;
  --on-surface: #E6E1E5;
  --on-surface-variant: #CAC4D0;
  --outline-variant: #49454F;
  --error: #F2B8B5;
  --inverse-surface: #E6E1E5;
  --inverse-on-surface: #322F35;
  --shadow: 0 1px 3px rgba(0,0,0,.4);
}

* { box-sizing: border-box; }

/* L'attribut hidden doit TOUJOURS gagner, même sur les éléments qui ont
   un display explicite (flex/grid). */
[hidden] { display: none !important; }

/* Navigation clavier visible partout */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--surface);
  color: var(--on-surface);
  font-family: "Google Sans", Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  overscroll-behavior: none;
}

/* Icônes SVG (Material Symbols) */
.ic { width: 20px; height: 20px; fill: currentColor; flex: 0 0 auto; }
.ic.caret { width: 18px; height: 18px; opacity: .7; }

/* ── Fond : vagues animées ────────────────────────────────────── */
.waves {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: min(42vh, 340px);
  z-index: 0; pointer-events: none; overflow: hidden;
}
.wave { position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; animation: drift linear infinite; }
.wave1 { animation-duration: 26s; }
.wave2 { animation-duration: 19s; animation-direction: reverse; }
.wave3 { animation-duration: 33s; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.w1-top { stop-color: var(--tertiary-container);  stop-opacity: 0; }
.w1-bot { stop-color: var(--tertiary-container);  stop-opacity: .35; }
.w2-top { stop-color: var(--secondary-container); stop-opacity: 0; }
.w2-bot { stop-color: var(--secondary-container); stop-opacity: .45; }
.w3-top { stop-color: var(--primary-container);   stop-opacity: 0; }
.w3-bot { stop-color: var(--primary-container);   stop-opacity: .60; }
@media (prefers-reduced-motion: reduce) { .wave { animation: none; } }

/* ── Écran de connexion ───────────────────────────────────────── */
.auth-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  background: var(--surface);
  padding: 24px; overflow-y: auto;
}
.auth-card { text-align: center; width: 100%; max-width: 400px; }
.auth-logo { font-size: 56px; line-height: 1; }
.auth-card h1 { margin: 12px 0 4px; font-size: 30px; font-weight: 700; }
.auth-sub { color: var(--on-surface-variant); font-size: 15px; margin: 0 0 20px; line-height: 1.5; }
.auth-form { text-align: left; }
.auth-form .field { margin-bottom: 12px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.btn-filled.wide { width: 100%; padding: 12px; margin-top: 2px; }
.auth-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 14px; color: var(--on-surface-variant); font-size: 13px;
}
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--outline-variant); }
.auth-links { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; margin-top: 10px; }
.btn-google {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 13px 24px; border-radius: 24px;
  border: 1px solid var(--outline-variant);
  background: var(--surface-container);
  color: var(--on-surface);
  font: inherit; font-weight: 600; font-size: 15px;
  cursor: pointer; transition: background .15s;
}
.btn-google:hover { background: var(--surface-container-high); }
.auth-note { color: var(--error); font-size: 14px; margin-top: 18px; line-height: 1.5; }
button:disabled { opacity: .5; cursor: default; }

/* ── Ossature ─────────────────────────────────────────────────── */
.app { position: relative; z-index: 1; display: flex; height: 100%; }

.sidebar {
  width: 264px; flex: 0 0 264px;
  background: var(--surface);
  border-right: 1px solid var(--outline-variant);
  display: flex; flex-direction: column;
  padding: 8px 0;
}
.side-head { font-size: 20px; font-weight: 700; padding: 16px 16px 12px; }
.btn-new { margin: 0 16px 12px; }
.btn-tonal {
  display: flex; align-items: center; gap: 10px;
  width: calc(100% - 32px);
  padding: 11px 18px; border: none; border-radius: 22px;
  background: var(--secondary-container); color: var(--on-surface);
  font: inherit; font-size: 14px; cursor: pointer; transition: box-shadow .15s;
}
.btn-tonal:hover { box-shadow: var(--shadow); }
.side-label { font-size: 13px; opacity: .6; padding: 8px 20px 4px; }
.chat-list { flex: 1; overflow-y: auto; padding: 0 8px; }

.chat-item {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 6px 8px 12px; margin-bottom: 2px;
  border-radius: 20px; cursor: pointer;
  font-size: 14px; color: var(--on-surface);
  transition: background .12s;
}
.chat-item:hover, .chat-item:focus-within { background: var(--surface-container); }
.chat-item.active { background: var(--secondary-container); font-weight: 600; }
.chat-item .t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-item .row-btn {
  opacity: 0; border: none; background: none; cursor: pointer;
  color: var(--on-surface-variant);
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; padding: 0;
}
.chat-item .row-btn .ic { width: 17px; height: 17px; }
.chat-item:hover .row-btn, .chat-item:focus-within .row-btn { opacity: .75; }
.chat-item .row-btn:hover { opacity: 1; background: var(--surface-container-high); }
.chat-item .row-btn.danger:hover { color: var(--error); }
.chat-empty { font-size: 13px; opacity: .55; padding: 10px 14px; }

.side-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-top: 1px solid var(--outline-variant);
}
.avatar {
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%;
  background: var(--primary-container); color: var(--on-primary-container);
  display: grid; place-items: center; font-weight: 700; font-size: 15px;
  background-size: cover; background-position: center;
}
.avatar.big { width: 52px; height: 52px; flex: 0 0 52px; font-size: 22px; }
.user-name { flex: 1; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Titre « Ddc AI Pro » en dégradé arc-en-ciel (comme Android) */
.pro-rainbow {
  background: linear-gradient(90deg, #E53935, #FDD835, #43A047, #1E88E5, #8E24AA);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; }

.topbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; flex: 0 0 auto; }
/* Spécificité .icon-btn.menu-btn : sans elle, le display:grid de .icon-btn
   (défini plus bas) l'emporte et le bouton ☰ apparaît aussi sur ordinateur. */
.icon-btn.menu-btn { display: none; }
.model-btn {
  margin: 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border: none; border-radius: 20px;
  background: transparent; color: var(--on-surface);
  font: inherit; font-size: 18px; font-weight: 700; cursor: pointer;
}
.model-btn:hover { background: var(--surface-container); }

.icon-btn {
  width: 40px; height: 40px; flex: 0 0 40px;
  border: none; border-radius: 50%; background: transparent;
  color: var(--on-surface-variant);
  cursor: pointer; display: grid; place-items: center;
  transition: background .12s, color .12s;
}
.icon-btn:hover { background: var(--surface-container); }
.icon-btn.active { color: var(--primary); background: var(--primary-container); }
.icon-btn:disabled { opacity: .35; cursor: default; }

.loading-bar { height: 4px; background: var(--surface-container-high); overflow: hidden; }
.loading-bar div { height: 100%; width: 40%; background: var(--primary); border-radius: 2px; animation: slide 1.1s ease-in-out infinite; }
@keyframes slide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }

/* ── Messages ─────────────────────────────────────────────────── */
.messages { flex: 1; overflow-y: auto; padding: 8px 16px 24px; scroll-behavior: smooth; }
.upgrade-pill {
  display: block; margin: 10px auto 0;
  border: none; border-radius: 24px;
  background: var(--secondary-container); color: var(--on-surface);
  font: inherit; font-size: 13px; padding: 9px 18px; cursor: pointer;
  transition: box-shadow .15s;
}
.upgrade-pill:hover { box-shadow: var(--shadow); }
.welcome { text-align: center; margin: 16vh auto 0; }
.welcome-logo { font-size: 64px; }
.welcome h2 { font-weight: 400; font-size: 26px; margin: 16px 0; }

.msg { max-width: 780px; margin: 0 auto 18px; display: flex; }
.msg.user { justify-content: flex-end; }
.msg-col { max-width: 100%; }
.msg.user .msg-col { max-width: 85%; }
.msg.model .msg-col { width: 100%; }
.msg .bubble {
  padding: 12px 18px; border-radius: 22px;
  line-height: 1.62; font-size: 15.5px;
  overflow-wrap: anywhere;
}
.msg.user .bubble {
  background: var(--primary-container); color: var(--on-primary-container);
  border-bottom-right-radius: 6px;
}
.msg.user .user-text { white-space: pre-wrap; }
.msg.model .bubble { background: transparent; padding-left: 0; padding-right: 0; width: 100%; }
.msg.model .bubble.pending::after {
  content: "▍"; animation: blink 1s steps(2) infinite; color: var(--primary);
}
@keyframes blink { 50% { opacity: 0; } }
.err-text { color: var(--error); }

.msg-actions { display: flex; align-items: center; gap: 2px; margin-top: 2px; }
.msg.user .msg-actions { justify-content: flex-end; }
.msg-actions button {
  border: none; background: none; cursor: pointer;
  color: var(--on-surface-variant);
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; opacity: .7;
  transition: background .12s, color .12s;
}
.msg-actions button .ic { width: 17px; height: 17px; }
.msg-actions button:hover { opacity: 1; background: var(--surface-container); }
.msg-actions button.speaking { color: var(--primary); opacity: 1; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.msg-cost { font-size: 11.5px; color: var(--on-surface-variant); opacity: .8; margin-left: 6px; }
.msg.user .msg-actions button { opacity: 0; }
.msg.user:hover .msg-actions button, .msg.user .msg-actions button:focus-visible { opacity: .7; }

.retry-row { max-width: 780px; margin: 0 auto 18px; display: flex; align-items: center; gap: 10px; }
.retry-row .err-text { font-size: 14px; }

.att-thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.att-thumbs img { width: 84px; height: 84px; object-fit: cover; border-radius: 12px; }
.att-thumbs .pdf { padding: 8px 12px; background: var(--surface-container-high); border-radius: 12px; font-size: 13px; }

/* Markdown */
.bubble h1, .bubble h2, .bubble h3 { margin: 18px 0 8px; line-height: 1.3; }
.bubble h1 { font-size: 1.4em; } .bubble h2 { font-size: 1.25em; } .bubble h3 { font-size: 1.1em; }
.bubble p { margin: 0 0 12px; }
.bubble p:last-child { margin-bottom: 0; }
.bubble ul, .bubble ol { margin: 0 0 12px; padding-left: 24px; }
.bubble li { margin-bottom: 5px; }
.bubble a { color: var(--primary); }
.bubble code.inline {
  background: var(--surface-container-high); padding: 2px 6px;
  border-radius: 6px; font-size: .89em;
  font-family: "Roboto Mono", ui-monospace, Consolas, monospace;
}
.bubble blockquote {
  margin: 0 0 12px; padding: 4px 0 4px 14px;
  border-left: 3px solid var(--primary-container); color: var(--on-surface-variant);
}
.bubble hr { border: none; border-top: 1px solid var(--outline-variant); margin: 16px 0; }
.bubble table { border-collapse: collapse; width: 100%; margin: 0 0 12px; font-size: .92em; display: block; overflow-x: auto; }
.bubble th, .bubble td { border: 1px solid var(--outline-variant); padding: 7px 11px; text-align: left; }
.bubble th { background: var(--surface-container); font-weight: 600; }

.code-block { margin: 0 0 14px; border-radius: 14px; overflow: hidden; background: var(--surface-container-high); }
.code-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px 6px 14px; font-size: 12px; color: var(--on-surface-variant);
  border-bottom: 1px solid var(--outline-variant);
}
.code-head button {
  border: none; background: none; cursor: pointer; font: inherit;
  color: var(--on-surface-variant); padding: 4px 10px; border-radius: 12px;
}
.code-head button:hover { background: var(--surface-container); color: var(--on-surface); }
.code-block pre { margin: 0; padding: 14px; overflow-x: auto; }
.code-block code {
  font-family: "Roboto Mono", ui-monospace, Consolas, monospace;
  font-size: 13.5px; line-height: 1.55; white-space: pre;
}

/* ── Zone de saisie ───────────────────────────────────────────── */
.composer-wrap { flex: 0 0 auto; padding: 0 16px 8px; }
.composer {
  max-width: 780px; margin: 0 auto;
  background: var(--surface-container);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius);
  padding: 6px;
  box-shadow: var(--shadow);
  transition: border-color .15s;
}
.composer:focus-within { border-color: var(--primary); }
.composer-row { display: flex; align-items: flex-end; gap: 2px; }
#prompt {
  flex: 1; border: none; background: none; resize: none;
  color: var(--on-surface); font: inherit; font-size: 15.5px;
  padding: 11px 8px; max-height: 168px; line-height: 1.5;
  outline: none;
}
#prompt::placeholder { color: var(--on-surface-variant); }
.send-btn {
  width: 40px; height: 40px; flex: 0 0 40px; margin: 2px;
  border: none; border-radius: 50%;
  background: var(--primary); color: var(--on-primary);
  cursor: pointer; display: grid; place-items: center;
  transition: filter .15s, opacity .15s;
}
.send-btn:hover { filter: brightness(1.08); }
.send-btn:disabled { opacity: .38; cursor: default; filter: none; }
.send-btn.stop { background: var(--error); opacity: 1; }

.attachments { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 8px 4px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-container-high); border-radius: 14px;
  padding: 5px 8px 5px 5px; font-size: 13px; max-width: 210px;
}
.chip img { width: 32px; height: 32px; object-fit: cover; border-radius: 9px; }
.chip .ic { width: 18px; height: 18px; margin: 7px 0 7px 4px; color: var(--on-surface-variant); }
.chip .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip button {
  border: none; background: none; cursor: pointer;
  color: var(--on-surface-variant); padding: 2px; border-radius: 50%;
  display: grid; place-items: center;
}
.chip button .ic { width: 15px; height: 15px; margin: 0; }
.chip button:hover { color: var(--error); }

.cost-line { text-align: center; font-size: 11px; color: var(--primary); opacity: .85; padding-top: 6px; }
.disclaimer { text-align: center; font-size: 11px; opacity: .62; padding: 6px 8px 2px; }

/* ── Dialogues ────────────────────────────────────────────────── */
.sheet {
  border: none; border-radius: 26px; padding: 24px;
  background: var(--surface-container); color: var(--on-surface);
  max-width: 440px; width: calc(100% - 40px);
  box-shadow: 0 8px 28px rgba(0,0,0,.28);
  animation: dlgIn .18s ease;
}
.sheet::backdrop { background: rgba(0,0,0,.45); }
@keyframes dlgIn { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.sheet h3 { margin: 0 0 4px; font-size: 21px; }
.sheet-sub { margin: 0 0 18px; font-size: 13.5px; opacity: .75; line-height: 1.55; }
.sheet-sub a { color: var(--primary); }
.sheet-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sheet-bar h3 { margin: 0; }
.sheet-actions { display: flex; align-items: center; gap: 8px; margin-top: 22px; }
.spacer { flex: 1; }
.btn-text {
  border: none; background: none; color: var(--primary);
  font: inherit; font-weight: 600; font-size: 14px;
  padding: 10px 14px; border-radius: 20px; cursor: pointer;
}
.btn-text:hover { background: var(--surface-container-high); }
.btn-text.danger { color: var(--error); }
.btn-filled {
  border: none; background: var(--primary); color: var(--on-primary);
  font: inherit; font-weight: 600; font-size: 14px;
  padding: 10px 22px; border-radius: 20px; cursor: pointer;
}
.btn-filled.danger { background: var(--error); color: var(--surface); }

.settings-sheet { max-height: min(86vh, 720px); overflow-y: auto; }

.model-list { display: flex; flex-direction: column; gap: 2px; }
.model-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border-radius: 18px; cursor: pointer;
  background: none; border: none; text-align: left; width: 100%;
  color: var(--on-surface); font: inherit;
}
.model-row:hover { background: var(--surface-container-high); }
.model-row .m-ic { width: 30px; display: grid; place-items: center; }
.model-row .m-ic .ic { width: 24px; height: 24px; }
.model-row .col { flex: 1; }
.model-row .nm { font-size: 15.5px; }
.model-row.sel .nm { font-weight: 700; }
.model-row .ds { font-size: 12px; opacity: .7; margin-top: 2px; }
.model-row .ck { color: var(--primary); width: 22px; }
.model-row .ck .ic { width: 20px; height: 20px; }

/* Lignes des Paramètres / menu Ajouter */
.set-label { font-size: 12.5px; font-weight: 700; color: var(--primary); letter-spacing: .02em; padding: 18px 6px 6px; }
.set-card { background: var(--surface); border-radius: 18px; overflow: hidden; }
.set-row {
  display: flex; align-items: center; gap: 16px;
  width: 100%; padding: 14px 16px;
  border: none; background: none; cursor: pointer;
  color: var(--on-surface); font: inherit; font-size: 15px; text-align: left;
}
.set-row + .set-row { border-top: 1px solid var(--outline-variant); }
.set-row:hover { background: var(--surface-container-high); }
.set-row .ic { color: var(--on-surface-variant); }
.set-row.danger, .set-row.danger .ic { color: var(--error); }
.set-note { padding: 12px 16px; font-size: 13px; opacity: .7; }

.profile-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border-radius: 18px; padding: 14px 16px;
  border: 2px solid transparent;
}
.profile-card.pro {
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
    conic-gradient(#E53935, #FDD835, #43A047, #1E88E5, #8E24AA, #E53935) border-box;
}
.profile-name { font-size: 16px; font-weight: 700; }
.profile-plan { font-size: 13px; opacity: .75; margin-top: 1px; }
.profile-dob { font-size: 12.5px; opacity: .6; margin-top: 1px; }

.dlg-input {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 15px;
  border: 1px solid var(--outline-variant); border-radius: 14px;
  background: var(--surface); color: var(--on-surface); resize: vertical;
}
.field { display: block; margin-bottom: 16px; }
.field span { display: block; font-size: 13px; opacity: .75; margin-bottom: 6px; }
.field input, .field select {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 15px;
  border: 1px solid var(--outline-variant); border-radius: 14px;
  background: var(--surface); color: var(--on-surface);
}
.hint { font-size: 12.5px; opacity: .7; margin: 8px 0 0; line-height: 1.5; }
.hint a { color: var(--primary); }
.info-body { font-size: 14px; line-height: 1.65; }
.info-body p { margin: 0 0 10px; }
.info-body strong { font-weight: 700; }

/* Pro / paiement */
.pro-hero { text-align: center; }
.pro-crown { font-size: 56px; line-height: 1.1; }
.pro-benefits { list-style: none; padding: 0; margin: 14px 0 0; }
.pro-benefits li { padding: 7px 4px; font-size: 15px; }
.pay-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.pay-logo { font-size: 34px; }
.pay-app { font-weight: 700; }
.pay-via { font-size: 12.5px; opacity: .65; }
.pay-line {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 2px; font-size: 14.5px;
  border-bottom: 1px solid var(--outline-variant);
}
.pay-line:last-of-type { border-bottom: none; }

.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
  background: var(--inverse-surface); color: var(--inverse-on-surface);
  padding: 13px 20px; border-radius: 12px; font-size: 14px;
  z-index: 100; max-width: 90vw; box-shadow: 0 4px 14px rgba(0,0,0,.3);
}

/* ── Bannière « Télécharger l'app Android » ───────────────────── */
.bandeau-app {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display: flex; align-items: flex-start; gap: 4px;
  background: var(--surface-container-high);
  border: 1px solid var(--outline-variant);
  border-radius: 20px; padding: 14px;
  box-shadow: 0 6px 22px rgba(0,0,0,.25);
  max-width: 340px;
  animation: dlgIn .25s ease;
}
.bandeau-corps { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bandeau-qr {
  background: #fff; border-radius: 12px; padding: 6px;
  display: grid; place-items: center; flex: 0 0 auto;
}
.bandeau-qr img { display: block; }
.bandeau-texte { display: flex; flex-direction: column; gap: 3px; min-width: 140px; flex: 1; }
.bandeau-texte strong { font-size: 14.5px; }
.bandeau-texte span { font-size: 12.5px; opacity: .75; line-height: 1.45; }
.bandeau-btn { text-decoration: none; text-align: center; }
.bandeau-app .icon-btn { width: 32px; height: 32px; flex: 0 0 32px; }
.bandeau-app .icon-btn .ic { width: 16px; height: 16px; }

@media (max-width: 719px) {
  .bandeau-app { left: 10px; right: 10px; bottom: auto; top: 10px; max-width: none; }
}


.scrim { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.42); z-index: 8; }

/* ── Mobile : le panneau devient un tiroir ────────────────────── */
@media (max-width: 719px) {
  .icon-btn.menu-btn { display: grid; }
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 9;
    transform: translateX(-100%); transition: transform .25s ease;
    box-shadow: 2px 0 16px rgba(0,0,0,.2);
  }
  .app.drawer-open .sidebar { transform: none; }
  .app.drawer-open .scrim { display: block; }
  .messages { padding: 8px 10px 20px; }
  .composer-wrap { padding: 0 10px 6px; }
  .welcome { margin-top: 10vh; }
  .chat-item .row-btn { opacity: .55; }   /* pas de survol sur mobile */
  .msg.user .msg-actions button { opacity: .5; }
}

/* ── Export PDF (impression) ──────────────────────────────────── */
@media print {
  /* Ramène les variables au thème clair même si le thème sombre est actif,
     sinon blocs de code / tableaux impriment du noir sur fond sombre. */
  :root, html[data-theme="dark"] {
    --primary: #333;
    --primary-container: #eee;
    --on-primary-container: #000;
    --surface: #fff;
    --surface-container: #f2f2f2;
    --surface-container-high: #eee;
    --on-surface: #000;
    --on-surface-variant: #444;
    --outline-variant: #ccc;
  }
  .waves, .sidebar, .topbar, .loading-bar, .composer-wrap, .scrim,
  .msg-actions, .upgrade-pill, .toast, .retry-row, .bandeau-app { display: none !important; }
  .app { display: block; }
  .messages { overflow: visible; padding: 0; }
  .msg { max-width: none; page-break-inside: avoid; }
  body, html { background: #fff; color: #000; }
  .msg.user .bubble { background: #eee; color: #000; }
}