/* kids.css :: mirror of the real app stylesheet (akciali-ai-kids static/kids.css,
   app 1.32.1). Do not edit here: re-copy it when the app moves,
   then strip any first name from its comments (the leak check fails otherwise). Everything the
   demo adds on top (tour banner, panel, demo pill) lives in style.css. */
  :root {
    --bg1: #6c5ce7; --bg2: #00cec9;
    --ink: #2d3436;
    --user: #6c5ce7; --user-ink: #ffffff;
    --bot: #ffffff; --bot-ink: #2d3436;
    --accent: #fd79a8;
    --panel: rgba(255,255,255,.85); --panel-ink: #2d3436;
    --font-fun: 'Comic Sans MS', 'Chalkboard SE', 'Comic Sans', ui-rounded, 'Segoe UI', sans-serif;
    --font-clean: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font: var(--font-fun);
    --r-msg: 20px; --r-ui: 14px; --col: 960px;
    --shadow-1: 0 1px 3px rgba(16,20,35,.10);
    --shadow-2: 0 8px 28px rgba(16,20,35,.16);
    --line: rgba(16,20,35,.06);
    /* iOS/Android safe areas (notch, home indicator) — needs viewport-fit=cover */
    --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
    --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
  /* Modele fin : PAS de viewport-fit=cover. Safari inset deja le viewport sous
     le notch et les barres ; le document defile de lui-meme et glisse sous les
     barres translucides. Fond UNI (une seule couleur) : la background-color de
     html peint aussi les zones sous les barres Safari -> pas de lisere.
     Home = bleu; chaque enfant = sa couleur, posee en JS (startChat). */
  html { min-height: 100%; background: var(--page-bg, #5cb3e8); }
  body {
    font-family: var(--font);
    background: transparent;
    color: var(--ink);
    overflow-x: hidden;
    min-height: 100vh;
    touch-action: manipulation;
    font-size: 16px; line-height: 1.5;
  }
  button { font-family: inherit; }

  /* fond uni par enfant (lu en JS -> documentElement + theme-color) */
  body[data-theme="unicorn"]   { --page-bg: #ffcdec; }
  body[data-theme="wednesday"] { --page-bg: #665b86; }
  body[data-theme="creative"]  { --page-bg: #8a72c4; }
  body[data-theme="kmystic"]   { --page-bg: #cbb8ea; }

  /* ---------- ambiances par enfant : couleurs et identite ---------- */
  body[data-theme="unicorn"] {
    --bg1: #ffd6f5; --bg2: #b3f0ff; --user: #e84393; --accent: #fd79a8;
    --hdr-ink: #5a4a63; --hdr-bg: rgba(255,255,255,.5); --hdr-line: rgba(90,74,99,.14); --hdr-shadow: none;
    --side-bg: rgba(255,255,255,.42); --foot-ink: rgba(74,64,84,.6);
  }
  body[data-theme="wednesday"] {
    --bg1: #544a6e; --bg2: #8d81ab; --user: #5f27cd; --accent: #b39ddb;
    --bot: #453c5e; --bot-ink: #f0ecf7; --panel: rgba(255,255,255,.14); --panel-ink: #f0ecf7;
    --line: rgba(255,255,255,.08); --sess-bg: #6b6187; --sess-ink: #f4f1fa;
  }
  body[data-theme="creative"] {
    --bg1: #5c4d9e; --bg2: #b79ce0; --user: #8d7bff; --accent: #ff6ec7;
    --bot: #57499b; --bot-ink: #f8f5ff; --panel: rgba(255,255,255,.18); --panel-ink: #f8f5ff;
    --line: rgba(255,255,255,.08); --sess-bg: #7a68b8; --sess-ink: #ffffff;
  }
  body[data-theme="kmystic"] {
    --bg1: #efe8f7; --bg2: #cdbfe8; --user: #8b6fd0; --accent: #8b6fd0; --ink: #3a3350;
    --hdr-ink: #453c66; --hdr-bg: rgba(255,255,255,.45); --hdr-line: rgba(69,60,102,.14); --hdr-shadow: none;
    --side-bg: rgba(255,255,255,.42); --foot-ink: rgba(58,51,80,.55);
  }

  /* ---------- gradient d'age : le theme reste, le ludique suit l'age ---------- */
  body[data-size="mini"] { font-size: 18px; }
  body[data-size="mini"] .msg { font-size: 1.1rem; border-radius: 24px; }
  body[data-size="mini"] .chip { font-size: 1rem; padding: 10px 16px; }
  body[data-tier="preteen"], body[data-tier="teen"] { --font: var(--font-clean); --r-msg: 16px; --r-ui: 12px; }
  body[data-tier="teen"] { font-size: 15.5px; }
  body[data-tier="teen"][data-theme="kmystic"] { --bg1: #efe8f7; --bg2: #d8ccef; }
  body[data-tier="teen"][data-theme="wednesday"] {
    --bg1: #3e3757; --bg2: #655d84; --bot: #3b3453; --bot-ink: #ece7f5;
    --panel: rgba(255,255,255,.10); --sess-bg: #514a6d;
  }
  /* l'identite typographique du theme gagne sur le tier */
  body[data-theme="wednesday"] { --font: Georgia, 'Times New Roman', serif; }

  /* ---------- decor flottant (tous les tiers ; densite/opacite par tier en JS) ---------- */
  #decor { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
  .dec { position: absolute; animation: decfloat var(--dur, 8s) ease-in-out var(--delay, 0s) infinite alternate; user-select: none; }
  @keyframes decfloat { from { transform: translateY(0) rotate(-7deg); } to { transform: translateY(-20px) rotate(7deg); } }
  .dec.hangul { font-weight: bold; color: rgba(74,65,118,.82); text-shadow: 0 1px 4px rgba(255,255,255,.35); font-family: var(--font-clean); }

  /* ---------- accueil (home) — modele fin, fond uni bleu ---------- */
  #picker { position: relative; z-index: 1; min-height: 100vh; max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; padding: 64px 16px 22px; }
  .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 16px; background: var(--page-bg, #5cb3e8); max-width: 900px; margin: 0 auto; }
  .logo { color: #fff; font-weight: 800; font-size: 1.2rem; text-shadow: 0 2px 8px rgba(0,0,0,.3); letter-spacing: .02em; }
  .logo .dot { color: #ffe27a; }
  #parentsBtn {
    margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.32);
    color: #fff; font-size: .85rem; font-weight: 600; padding: 9px 16px;
    border-radius: 999px; cursor: pointer; transition: background .2s;
  }
  #parentsBtn:hover { background: rgba(255,255,255,.3); }
  #parentsBtn svg { width: 16px; height: 16px; }

  .hero { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; margin-top: 46px; margin-bottom: 30px; }
  .hero .tagline { display: none; }
  .hero-ring {
    width: 92px; height: 92px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.14); border: 2px solid rgba(255,255,255,.5);
    box-shadow: 0 0 40px rgba(255,255,255,.35), inset 0 0 22px rgba(255,255,255,.16);
    animation: heropulse 3.2s ease-in-out infinite;
  }
  @keyframes heropulse { 0%,100% { box-shadow: 0 0 32px rgba(255,255,255,.3), inset 0 0 20px rgba(255,255,255,.14); } 50% { box-shadow: 0 0 55px rgba(255,255,255,.5), inset 0 0 28px rgba(255,255,255,.2); } }
  .hero-ring svg { width: 60px; height: 60px; animation: herofloat 4s ease-in-out infinite; }
  @keyframes herofloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
  .hero h1 { color: #fff; font-size: 1.4rem; text-shadow: 0 2px 10px rgba(0,0,0,.3); }

  #profileList { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; align-items: start; margin-bottom: auto; width: 100%; }
  @media (min-width: 560px) { #profileList { grid-template-columns: repeat(4, 1fr); } }
  .profile-btn {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 5px;
    background: #4a9fd8; border: 1px solid rgba(255,255,255,.30); border-radius: 18px;
    padding: 16px 12px 13px; color: #fff; cursor: pointer; overflow: hidden;
    transition: transform .15s, background .15s;
  }
  @media (hover: hover) { .profile-btn:hover { transform: translateY(-4px); background: #56a9df; } }
  .profile-btn:active { transform: scale(.97); }
  .profile-btn::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--pc, #fff); }
  .profile-btn svg { display: block; width: 56px; height: 56px; flex: 0 0 auto; filter: drop-shadow(0 4px 10px rgba(0,0,0,.25)); }
  .profile-btn .pname { font-size: 1.05rem; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,.3); }
  .profile-btn .page { font-size: .76rem; opacity: .85; }

  /* ---------- PIN ---------- */
  #pinScreen { position: relative; z-index: 1; flex: 1; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: calc(20px + var(--sat)) calc(20px + var(--sar)) calc(20px + var(--sab)) calc(20px + var(--sal)); }
  #pinScreen h1 { color: #fff; font-size: 1.6rem; text-shadow: 0 2px 8px rgba(0,0,0,.25); text-align: center; }
  .lockring {
    width: 88px; height: 88px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff;
    background: rgba(255,255,255,.16); border: 2px solid rgba(255,255,255,.45); box-shadow: 0 0 35px rgba(255,255,255,.35);
  }
  .lockring svg { width: 38px; height: 38px; }
  #pinInput { font-size: 2rem; letter-spacing: 14px; text-align: center; width: 240px; border: none; border-radius: 16px; padding: 14px; font-family: inherit; }
  #pinScreen button.ok { background: var(--accent); color: #fff; border: none; border-radius: 999px; font-size: 1.05rem; font-weight: bold; padding: 12px 32px; cursor: pointer; box-shadow: var(--shadow-1); }
  #pinErr { color: #fff; background: rgba(214,48,49,.85); padding: 8px 16px; border-radius: 12px; display: none; }
  .backlink { color: rgba(255,255,255,.8); background: none; border: none; cursor: pointer; padding: 10px 14px; min-height: 44px; }

  /* ---------- chat (modele fin : document-scroll, chrome fige) ---------- */
  #chat { display: none; position: relative; z-index: 1; min-height: 100vh; }
  #main { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }

  /* header fige mais TRANSPARENT : seuls les boutons flottent (comme fin), le
     reste laisse passer -> les messages glissent sous la barre d'URL Safari.
     pointer-events:none sur la barre, auto sur les boutons (le scroll passe au
     travers de la zone vide du header). */
  /* header fond opaque = couleur de l'enfant. Meme couleur unie que la page,
     donc invisible comme "barre", mais les messages disparaissent proprement
     dessous (ils restent sous les boutons/drapeaux) au lieu de chevaucher. */
  header { position: fixed; top: 0; left: 0; right: 0; z-index: 15; padding: 8px 12px 8px; color: var(--hdr-ink, #fff); background: var(--page-bg, #5cb3e8); }
  header #mascotHdr { margin-left: auto; }  /* mascotte a droite meme quand la langBar est masquee */
  .hwrap { display: flex; align-items: center; gap: 10px; width: 100%; max-width: var(--col); margin-inline: auto; }
  .htitle { flex: 1; min-width: 0; }
  .hbtn {
    display: flex; align-items: center; gap: 7px;
    background: var(--hdr-bg, rgba(255,255,255,.18)); border: 1px solid var(--hdr-line, rgba(255,255,255,.22));
    color: var(--hdr-ink, #fff); font-size: .85rem; font-weight: 600;
    padding: 8px 14px; border-radius: 999px; cursor: pointer; min-height: 40px; transition: background .15s;
  }
  .hbtn:hover { filter: brightness(1.06); }
  .hbtn svg { width: 18px; height: 18px; }
  .hbtn.icon { padding: 8px; width: 40px; justify-content: center; }
  #toggleSide { display: none; }

  #mascotHdr { display: block; width: 46px; height: 46px; flex-shrink: 0; perspective: 300px; cursor: pointer; }
  #mascotHdr svg { width: 46px; height: 46px; filter: drop-shadow(0 3px 8px rgba(0,0,0,.3)); }

  /* 10 animations mascotte */
  .anim1 { animation: m1 1.2s ease; } @keyframes m1 { 0%,100%{transform:translateY(0)} 30%{transform:translateY(-14px)} 55%{transform:translateY(0)} 75%{transform:translateY(-6px)} }
  .anim2 { animation: m2 1.4s ease-in-out; } @keyframes m2 { to{transform:rotate(360deg)} }
  .anim3 { animation: m3 1.2s ease; } @keyframes m3 { 0%,100%{transform:rotate(0)} 20%{transform:rotate(-16deg)} 40%{transform:rotate(13deg)} 60%{transform:rotate(-9deg)} 80%{transform:rotate(6deg)} }
  .anim4 { animation: m4 1.1s ease; } @keyframes m4 { 0%,100%{transform:scale(1)} 50%{transform:scale(1.3)} }
  .anim5 { animation: m5 .9s ease; } @keyframes m5 { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(3px)} }
  .anim6 { animation: m6 1.3s ease; } @keyframes m6 { 0%,100%{transform:translateY(0) scale(1,1)} 25%{transform:translateY(0) scale(1.15,.8)} 50%{transform:translateY(-18px) scale(.95,1.1)} 75%{transform:translateY(0) scale(1.08,.88)} }
  .anim7 { animation: m7 2.6s ease-in-out; } @keyframes m7 { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-10px) rotate(5deg)} }
  .anim8 { animation: m8 1.5s ease; } @keyframes m8 { 0%,100%{transform:rotate(0)} 30%,70%{transform:rotate(20deg)} }
  .anim9 { animation: m9 1.3s ease; } @keyframes m9 { 0%,100%{transform:scale(1)} 18%{transform:scale(1.22)} 35%{transform:scale(1)} 52%{transform:scale(1.28)} 75%{transform:scale(1)} }
  .anim10 { animation: m10 1.5s ease-in-out; } @keyframes m10 { to{transform:rotateY(360deg)} }

  /* langBar = rangee fixe/flottante dans le header (comme menu + mascotte),
     scroll horizontal si trop de langues. Sur mobile : drapeaux seuls. */
  #langBar { flex: 1; min-width: 0; display: flex; gap: 6px; justify-content: center; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 0; }
  #langBar::-webkit-scrollbar { display: none; }
  .langchip { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; white-space: nowrap; background: var(--hdr-bg, rgba(255,255,255,.2)); border: 2px solid transparent; color: var(--hdr-ink, #fff); font-size: .82rem; padding: 7px 13px; border-radius: 999px; cursor: pointer; min-height: 36px; }
  .langchip .lc-flag { font-size: 1rem; line-height: 1; }
  .langchip.active { border-color: var(--hdr-ink, #fff); font-weight: bold; }
  @media (max-width: 760px) { .langchip .lc-label { display: none; } .langchip { padding: 8px 11px; } }
  /* drapeaux integres dans la rangee du bas du composer (facon outils barre Claude) : desktop */
  .crow #langBar { flex: 0 1 auto; min-width: 0; justify-content: flex-start; margin-right: 6px; }
  .crow .langchip { min-height: 30px; padding: 4px 7px; }
  .crow .langchip .lc-label { display: none; }
  .crow .lc-flag { font-size: .95rem; }

  /* flex:1 + justify-end : peu de messages -> colles en bas au-dessus du composer
     (comme WhatsApp) ; beaucoup -> ca deborde vers le haut et le document defile. */
  #messages { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: calc(var(--hdrH, 66px) + 14px) 16px calc(var(--compH, 122px) + 12px); width: 100%; max-width: var(--col); margin-inline: auto; }
  .msg { max-width: 78%; padding: 11px 15px; border-radius: var(--r-msg); line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
  .msg.bot { background: var(--bot); color: var(--bot-ink); border-bottom-left-radius: 6px; align-self: flex-start; box-shadow: var(--shadow-1); border: 1px solid var(--line); }
  .msg.user { background: var(--user); color: var(--user-ink); border-bottom-right-radius: 6px; align-self: flex-end; box-shadow: var(--shadow-1); }
  .msg.bot a { color: var(--accent); font-weight: bold; word-break: break-all; }
  /* carte preview d'un lien autorise (remplace l'URL nue) — lit --panel/--panel-ink,
     donc contraste OK sur un theme sombre comme sur un theme clair */
  .msglink { color: var(--accent); font-weight: bold; word-break: break-all; }
  .linkcard { display: flex; gap: 10px; align-items: stretch; margin: 8px 0 2px; max-width: 420px;
    background: var(--panel, rgba(255,255,255,.85)); border: 1px solid var(--line, rgba(16,20,35,.1));
    border-radius: 14px; overflow: hidden; text-decoration: none; box-shadow: var(--shadow-1);
    color: var(--panel-ink, var(--ink)); font-weight: normal; word-break: normal; }
  .linkcard:hover { box-shadow: var(--shadow-2); }
  .linkcard.loading { min-height: 62px; opacity: .55; }
  .linkcard .lc-thumb { width: 92px; align-self: stretch; object-fit: cover; flex-shrink: 0; background: rgba(0,0,0,.06); }
  .linkcard .lc-body { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; min-width: 0; }
  .linkcard .lc-site { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; opacity: .6; }
  .linkcard .lc-title { font-weight: 700; font-size: .9rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .linkcard .lc-desc { font-size: .8rem; opacity: .75; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .msg img { max-width: min(100%, 420px); border-radius: 14px; display: block; margin: 4px 0 8px; }
  /* Image-generation placeholder: animated blur + progress % (reusable) */
  .imggen { position: relative; width: min(85vw, 420px); max-width: 100%; aspect-ratio: 1/1; border-radius: 14px; overflow: hidden; margin: 4px 0 8px; background: linear-gradient(135deg,#c3cfe2,#95a5c6); }
  .imggen::before { content:""; position:absolute; inset:0; background: linear-gradient(110deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 70%); filter: blur(8px); animation: imgshimmer 1.3s linear infinite; }
  @keyframes imgshimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
  .imggen .pct { position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.5rem; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.4); transition:opacity .4s; }
  .imggen .bar { position:absolute; left:0; bottom:0; z-index:2; height:6px; width:0; background:var(--accent,#cd6133); transition:width .5s ease-out, opacity .4s; }
  .imggen img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .5s; }
  .imggen.real::before { display:none; }
  .imggen.real img { opacity:1; }
  /* Lightbox (dessins et photos du fil en taille réelle + Enregistrer sous) */
  .msg img, .imggen.real img { cursor: zoom-in; }
  #lightbox { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 60px 12px 12px; background: rgba(12,10,20,.88); }
  #lightbox.on { display: flex; }
  #lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px; box-shadow: 0 8px 40px rgba(0,0,0,.5); cursor: default; }
  #lightbox .lb-bar { position: absolute; top: 0; left: 0; right: 0; height: 56px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 0 12px; }
  #lightbox .lb-save { color: #fff; background: var(--accent, #cd6133); text-decoration: none; font-weight: 700; padding: 9px 16px; border-radius: 999px; font-size: .95rem; }
  #lightbox .lb-close { color: #fff; background: rgba(255,255,255,.18); border: 0; font-size: 1.2rem; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; }
  body.lb-open { overflow: hidden; }
  /* Thinking toggle in the composer row (reusable) */
  .thinkbtn { display:inline-flex; align-items:center; gap:5px; border:1.5px solid var(--hdr-line, rgba(255,255,255,.32)); background:none; color:var(--hdr-ink,#fff); opacity:.72; border-radius:999px; padding:5px 10px; font-size:.8rem; font-weight:600; cursor:pointer; flex-shrink:0; transition:opacity .15s, background .15s, border-color .15s; }
  .thinkbtn svg { width:16px; height:16px; }
  .thinkbtn:hover { opacity:.95; }
  .thinkbtn.active { opacity:1; background:var(--accent); border-color:var(--accent); color:#fff; }
  @media (max-width:520px) { .thinkbtn .tlabel { display:none; } }
  .msg strong { font-weight: 700; }
  .msg code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .92em; background: rgba(127,127,127,.16); padding: 1px 5px; border-radius: 5px; }
  .msg pre { background: rgba(16,20,35,.82); color: #eef0f7; border-radius: 12px; padding: 12px 14px; margin: 8px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .msg pre code { background: none; padding: 0; font-size: .82em; line-height: 1.45; white-space: pre; color: inherit; }

  .speak { border: none; background: none; cursor: pointer; color: var(--bot-ink); opacity: .5; margin-left: 2px; padding: 8px; min-width: 36px; min-height: 36px; position: relative; vertical-align: middle; }
  .speak svg { width: 18px; height: 18px; display: inline-block; }
  .speak.loading, .speak.playing { opacity: 1; color: var(--accent); }
  .speak.loading svg { visibility: hidden; }
  .speak.loading::after { content: ""; position: absolute; left: 50%; top: 50%; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border: 2.5px solid var(--accent); border-top-color: transparent; border-radius: 50%; animation: speakspin .7s linear infinite; }
  .speak.playing { animation: speakpulse 1s ease-in-out infinite; }
  @keyframes speakspin { to { transform: rotate(360deg); } }
  @keyframes speakpulse { 50% { transform: scale(1.25); } }
  .typing { display: inline-flex; gap: 5px; padding: 6px 2px; }
  .typing span { width: 8px; height: 8px; border-radius: 50%; background: #b2bec3; animation: blink 1.2s infinite; }
  .typing span:nth-child(2) { animation-delay: .2s; } .typing span:nth-child(3) { animation-delay: .4s; }
  @keyframes blink { 0%,80%,100% { opacity: .25;} 40% { opacity: 1;} }

  #lockBanner { display: none; margin: 0 auto 10px; padding: 12px 16px; border-radius: var(--r-ui); background: var(--panel); color: var(--panel-ink); font-size: .9rem; text-align: center; width: calc(100% - 32px); max-width: var(--col); }
  #lockBanner button { margin-left: 10px; background: var(--accent); color: #fff; border: none; border-radius: 999px; padding: 8px 14px; font-weight: bold; cursor: pointer; }

  #chips { display: flex; gap: 8px; padding: 6px calc(16px + var(--sar)) 8px calc(16px + var(--sal)); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; width: 100%; max-width: var(--col); margin-inline: auto; }
  #chips::-webkit-scrollbar { display: none; }
  .chip { flex-shrink: 0; background: var(--panel); color: var(--panel-ink); border: 1px solid var(--line); border-radius: 999px; padding: 9px 15px; font-size: .84rem; cursor: pointer; min-height: 40px; }

  /* composer fige en bas. Fond = couleur de l'enfant (seamless barre Safari basse).
     Repositionne au-dessus du clavier iOS via visualViewport (JS). */
  form { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; width: 100%; max-width: calc(var(--col) + 80px); margin-inline: auto; padding: 8px 20px 14px; background: var(--page-bg, #5cb3e8); transition: bottom .12s ease; }
  /* saisie transparente : posee sur le fond uni (le form derriere = --page-bg
     opaque masque les messages), juste un contour -> plus de bloc colore. */
  .composer { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 4px; background: transparent; color: var(--hdr-ink, #fff); border-radius: 22px; padding: 12px 12px 8px; box-shadow: none; border: 1.5px solid var(--hdr-line, rgba(255,255,255,.32)); min-height: 96px; }
  .crow { display: flex; align-items: center; gap: 2px; margin-top: auto; }
  .cspace { flex: 1; }
  #input { width: 100%; border: none; background: none; padding: 2px 6px; font-family: inherit; font-size: 1rem; outline: none; color: var(--hdr-ink, #fff); resize: none; line-height: 1.45; max-height: 180px; overflow-y: auto; }
  #input::placeholder { color: var(--hdr-ink, #fff); opacity: .5; }
  .iconbtn { border: none; background: none; color: var(--hdr-ink, #fff); opacity: .7; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: opacity .15s, background .15s; }
  .iconbtn:hover { opacity: .9; background: rgba(127,127,127,.08); }
  .iconbtn svg { width: 21px; height: 21px; }
  .sendbtn { border: none; border-radius: 50%; width: 42px; height: 42px; color: #fff; background: var(--accent); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-1); flex-shrink: 0; }
  .sendbtn svg { width: 19px; height: 19px; margin-left: 2px; }
  #send:disabled { opacity: .5; cursor: default; }
  #mic { display: none; }
  #mic.listening { background: #d63031; color: #fff; opacity: 1; animation: blink 1s infinite; }
  /* disclaimer : integre au bas du composer fige (fin de #main, en flux, cache
     derriere le form sur mobile) -> on l'affiche seulement dans le landing #empty */
  footer { display: none; }

  #side { width: 260px; margin: 12px 0 12px 12px; padding: 12px; background: var(--side-bg, rgba(255,255,255,.16)); border-radius: 18px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; overscroll-behavior-y: contain; }
  #sideBackdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 19; }
  .side-head { display: flex; align-items: center; color: var(--hdr-ink, #fff); font-weight: bold; font-size: .92rem; padding: 2px 4px 6px; }
  .side-head button { margin-left: auto; display: flex; align-items: center; gap: 6px; background: var(--accent); border: none; color: #fff; font-weight: bold; font-size: .78rem; padding: 8px 13px; border-radius: 999px; cursor: pointer; min-height: 38px; }
  .side-head button svg { width: 14px; height: 14px; }
  #sessionList { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  /* une seule bulle par discussion : 1er message tronqué + ⋯ à droite DANS la bulle */
  .sessrow {
    position: relative; display: flex; align-items: center; gap: 2px; min-width: 0;
    background: var(--sess-bg, rgba(255,255,255,.92)); color: var(--sess-ink, #2d3436);
    border-radius: 12px;
  }
  .sessrow.active { outline: 2.5px solid var(--accent); }
  .sess-main {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px;
    background: none; border: none; color: inherit; cursor: pointer;
    padding: 10px 4px 10px 12px; text-align: left; font-size: .8rem; font-weight: bold;
  }
  .sess-main svg { width: 13px; height: 13px; flex-shrink: 0; opacity: .7; }
  .sess-main .tt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sess-menu {
    flex-shrink: 0; width: 34px; align-self: stretch; border: none; background: none;
    color: inherit; opacity: .55; cursor: pointer; display: flex; align-items: center; justify-content: center;
  }
  .sess-menu svg { width: 16px; height: 16px; }
  .sess-menu:hover { opacity: 1; }
  .sess-pin { flex-shrink: 0; width: 32px; align-self: stretch; border: none; background: none; color: var(--sess-ink, #2d3436); opacity: .5; cursor: pointer; display: flex; align-items: center; justify-content: center; padding-right: 6px; }
  .sess-pin svg { width: 15px; height: 15px; }
  .sess-pin:hover { opacity: 1; }
  .sess-pin.on { opacity: 1; color: var(--accent); }
  .sess-pin.shake { animation: pinshake .4s; }
  @keyframes pinshake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

  @media (max-width: 760px) {
    #side { display: none; position: fixed; left: 0; top: 0; bottom: 0; width: min(78vw, 300px); margin: 0; border-radius: 0 20px 20px 0; background: rgba(45,52,54,.96); z-index: 20;
            padding: calc(12px + var(--sat)) 12px calc(12px + var(--sab)) calc(12px + var(--sal)); }
    #side.open { display: flex; }
    #side .side-head, #side .side-top { color: #fff; }
    #sideBackdrop.show { display: block; }
    #toggleSide { display: inline-flex; }
    .msg { max-width: 88%; }
  }
  @media (max-width: 480px) {
    header { padding: calc(8px + var(--sat)) calc(12px + var(--sar)) 4px calc(12px + var(--sal)); }
    .hwrap { gap: 8px; }
    .hero h1 { font-size: 1.35rem; }
  }
  /* ---------- empty state (ChatGPT-style landing), scroll-down, header mascot ---------- */
  #mascotHdr { display: block; }
  body[data-size="mini"] #mascotHdr, body[data-size="mini"] #mascotHdr svg { width: 52px; height: 52px; }
  #main { position: relative; }
  #empty { display: none; flex-direction: column; align-items: center; justify-content: flex-start; gap: 16px; min-height: 100vh; padding: calc(var(--hdrH, 66px) + 22px) 20px calc(var(--compH, 122px) + 24px); width: 100%; max-width: var(--col); margin-inline: auto; }
  /* Une seule mascotte : on garde celle du header (mascotHdr, en haut à droite).
     La grosse mascotte centrée de la landing faisait doublon. */
  #emptyMascot { display: none; }
  #emptyMascot svg { width: 120px; height: 120px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.25)); }
  body[data-tier="junior"] #emptyMascot svg { width: 108px; height: 108px; }
  body[data-tier="preteen"] #emptyMascot svg { width: 92px; height: 92px; }
  body[data-tier="teen"] #emptyMascot svg { width: 80px; height: 80px; }
  #emptyTitle { color: var(--hdr-ink, #fff); font-size: 1.25rem; font-weight: 600; text-align: center; text-shadow: var(--hdr-shadow, 0 1px 4px rgba(0,0,0,.25)); max-width: 560px; line-height: 1.4; }
  body[data-tier="teen"] #emptyTitle { font-size: 1.1rem; font-weight: 500; }
  #empty #chips { flex-wrap: wrap; justify-content: center; overflow: visible; padding: 0; max-width: 620px; }
  #empty #chips .chip { flex-shrink: 1; max-width: 100%; white-space: normal; text-align: center; line-height: 1.3; }
  /* composer toujours fige en bas (meme en landing) : on ne surcharge plus son
     padding/hauteur ici, la regle globale form{} s'applique dans les deux etats. */
  .side-top { display: flex; align-items: center; gap: 10px; padding: 2px 4px 10px; color: var(--hdr-ink, #fff); }
  .side-top .title { font-size: 1.1rem; font-weight: bold; line-height: 1.2; }
  .side-top .subtitle { font-size: .75rem; opacity: .85; }
  #scrollDown { position: fixed; right: 16px; bottom: calc(var(--compH, 122px) + 10px); width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: var(--bot); color: var(--bot-ink); cursor: pointer; display: none; align-items: center; justify-content: center; box-shadow: var(--shadow-2); z-index: 14; }
  #scrollDown.show { display: flex; }
  #scrollDown svg { width: 20px; height: 20px; }
  .wait { opacity: .7; }
  .bstatus { opacity: .75; font-size: .9em; }
  .filecard { margin: 4px 0 8px; max-width: min(85vw, 420px); }
  .fc-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.06); text-decoration: none; color: inherit; }
  .fc-ic { flex: none; width: 40px; height: 48px; border-radius: 6px; background: var(--accent,#cd6133); color: #fff; font-weight: 800; font-size: .7rem; display: flex; align-items: center; justify-content: center; letter-spacing: .5px; }
  .fc-meta { display: flex; flex-direction: column; min-width: 0; }
  .fc-meta b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fc-meta i { opacity: .7; font-size: .85em; font-style: normal; }
  .fc-prev { display: block; width: 100%; margin-top: 8px; border: 0; border-radius: 10px; background: #fff; }
  iframe.fc-prev { height: 460px; }
  img.fc-prev { height: auto; }
  .retrybtn { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; background: var(--accent); color: #fff; border: none; border-radius: 999px; padding: 7px 14px; font-size: .82rem; font-weight: 600; cursor: pointer; }
  .retrybtn svg { width: 14px; height: 14px; }
  .bstatus:empty { display: none; }
  .bstatus:not(:empty) { padding-top: 6px; }
  .sessrow { position: relative; }
  .rowmenu { position: absolute; right: 0; top: calc(100% + 2px); z-index: 30; background: var(--bot); color: var(--bot-ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-2); display: flex; flex-direction: column; min-width: 150px; overflow: hidden; }
  .rowmenu button { display: flex; align-items: center; gap: 8px; background: none; border: none; color: inherit; padding: 10px 14px; font-size: .84rem; cursor: pointer; text-align: left; }
  .rowmenu button:hover { background: rgba(127,127,127,.12); }
  .rowmenu button svg { width: 15px; height: 15px; }

  /* ---------- desktop (sidebar inline) : aligner le chrome fixe sur #main ----------
     Le header/composer fixes sont pleine largeur ; a droite de la sidebar (272px)
     ils centrent leur contenu dans #main, aligne avec les messages. */
  @media (min-width: 761px) {
    #main { flex: 1; margin-left: 272px; }
    header, form { left: 272px; }
    form { max-width: var(--col); padding: 8px 16px 14px; }
    /* sidebar = panneau fixe/flottant : reste en place quand le document defile */
    #side { position: fixed; left: 12px; top: 12px; bottom: 12px; width: 260px; margin: 0; z-index: 16; }

    /* nouveau chat facon ChatGPT/Claude : bloc centre verticalement.
       greeting au-dessus, box de saisie au milieu (en flux, pas fixe),
       drapeaux en card attachee sous la box, suggestions en dessous.
       Le JS place le form + la langBar dans #empty (voir placeLangBar). */
    #empty { justify-content: center; gap: 14px; padding-top: calc(var(--hdrH, 66px) + 16px); padding-bottom: 28px; }
    #empty form { position: static; left: auto; right: auto; bottom: auto; width: 100%; max-width: var(--col); margin: 0 auto; padding: 0; background: transparent; }
    #empty #chips { margin-top: 2px; }

    /* scrollbar document plus jolie (fine, arrondie, discrète) */
    html { scrollbar-width: thin; scrollbar-color: rgba(150,150,170,.55) transparent; }
    ::-webkit-scrollbar { width: 11px; height: 11px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: rgba(150,150,170,.55); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
    ::-webkit-scrollbar-thumb:hover { background: rgba(150,150,170,.8); background-clip: padding-box; }
    /* mascotte plus grosse, en haut à droite */
    header #mascotHdr, header #mascotHdr svg { width: 68px; height: 68px; }
    /* ⋯ et pin révélés au survol de la discussion (façon Claude) ; un pin actif reste visible */
    .sess-menu, .sess-pin:not(.on) { opacity: 0; }
    .sessrow:hover .sess-menu, .sessrow.active .sess-menu { opacity: .55; }
    .sessrow:hover .sess-pin:not(.on) { opacity: .5; }
    .sess-menu:hover, .sess-pin:hover { opacity: 1; }
  }

  @media (prefers-reduced-motion: reduce) {
    .dec, .hero-ring, .hero-ring svg, #mascotHdr svg { animation: none !important; }
  }