/* =========================================================
   IAKids — APP.CSS (CLEAN v1)
   - Base UI (header, buttons, inputs)
   - Chat layout (ChatGPT-like + kid gradients)
   IMPORTANT: Le wrap du chat doit être: .wrap.wrap--chat
========================================================= */

:root{
  --bg:#ffffff;
  --ink:#0f172a;
  --muted:#475569;
  --line:#e2e8f0;
  --soft:#f8fafc;
  --card:#ffffff;

  --brand:#2563eb;
  --brand2:#1d4ed8;
  --danger:#dc2626;

  --radius:18px;
  --shadow:0 12px 30px rgba(2,6,23,.08);
  --shadow2:0 6px 14px rgba(2,6,23,.06);

  --wrap:1100px;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;

  /* chat */
  --chat-line: rgba(15,23,42,.10);
  --chat-shadow: 0 18px 55px rgba(2,6,23,.10);
  --kid-1: #eef2ff;
  --kid-2: #fdf2f8;
  --user-1:#ecfeff;
  --user-2:#eff6ff;

  --topbar-h: 64px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:var(--sans);background:var(--bg);color:var(--ink);height:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}

/* =========================
   TOPBAR
========================= */
.topbar{
  position:sticky; top:0;
  z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  min-height:var(--topbar-h);
  padding:10px 0;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:900}
.brand__logo{
  display:inline-grid;place-items:center;
  width:36px;height:36px;border-radius:12px;
  background:var(--soft);border:1px solid var(--line)
}
.nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.nav a{padding:8px 10px;border-radius:12px}
.nav a:hover{background:var(--soft)}

/* =========================
   LAYOUT DEFAULT
========================= */
.main{padding:22px 0 40px}
.footer{border-top:1px solid var(--line);padding:22px 0;background:#fff}

/* =========================
   UI
========================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;border-radius:14px;
  background:var(--brand);color:#fff;font-weight:800;
  border:1px solid var(--brand2);cursor:pointer;
}
.btn:hover{background:var(--brand2)}
.btn--ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn--ghost:hover{background:var(--soft)}
.btn--danger{background:var(--danger);border-color:var(--danger)}
.btn--sm{padding:8px 10px;border-radius:12px;font-weight:800}

.muted{color:var(--muted)}
hr{border:0;border-top:1px solid var(--line);margin:14px 0}

input,select,textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;color:var(--ink);
}
textarea{min-height:110px;resize:vertical}

/* =========================================================
   CHAT PAGE (SCOPE STRICT)
   IMPORTANT: ne jamais cibler body.page-chat .wrap (car header utilise .wrap)
========================================================= */
body.page-chat .main{ padding:0 !important; }
body.page-chat .footer{ display:none; }
body.page-chat{ height:100dvh; overflow:hidden; }

/* Le wrap du contenu chat UNIQUEMENT */
body.page-chat .wrap--chat{
  height: calc(100dvh - var(--topbar-h));
  padding-top: 14px;
  padding-bottom: 14px;
}

/* App layout */
body.page-chat .chatappV2{
  height:100%;
  display:grid;
  grid-template-columns: 340px 1fr;
  gap:14px;
}
@media(max-width:900px){
  body.page-chat .chatappV2{ grid-template-columns: 1fr; }
}

/* Side / Main */
body.page-chat .chatSide,
body.page-chat .chatMain{
  height:100%;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--chat-line);
  border-radius:18px;
  box-shadow: var(--chat-shadow);
}

/* =========================
   SIDEBAR
========================= */
body.page-chat .chatSide{
  display:flex; flex-direction:column;
}
body.page-chat .sideTop{
  padding:14px;
  border-bottom:1px solid var(--chat-line);
  display:flex; flex-direction:column; gap:10px;
}
body.page-chat .sideRow{
  display:flex; justify-content:space-between; align-items:center;
}
body.page-chat .sideTitle{font-weight:1000}

body.page-chat .threadSearch{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
}
body.page-chat .threadList{
  flex:1;
  min-height:0;
  overflow:auto;
  padding:10px;
}
body.page-chat .threadItem{
  display:block;
  padding:10px 10px;
  border-radius:14px;
  border:1px solid transparent;
}
body.page-chat .threadItem:hover{
  border-color: rgba(99,102,241,.16);
  background: linear-gradient(135deg, rgba(99,102,241,.06), rgba(236,72,153,.05));
}
body.page-chat .threadItem.is-active{
  background: linear-gradient(135deg, var(--kid-1), var(--kid-2));
  border-color: rgba(99,102,241,.22);
}
body.page-chat .threadTopLine{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
body.page-chat .threadTitle{font-weight:900}
body.page-chat .threadMeta{font-size:12px;color:var(--muted);margin-top:2px}
body.page-chat .tag{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.04);
  white-space:nowrap;
}

/* Drawer overlay */
body.page-chat .drawerOverlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.35);
  z-index:9998;
}

/* Mobile Drawer */
body.page-chat .burger{display:none}
body.page-chat .drawerClose{display:none}
@media(max-width:900px){
  body.page-chat .chatSide{
    position:fixed; top:0; left:0;
    height:100dvh;
    width: 88%;
    max-width:360px;
    z-index:9999;
    transform:translateX(-110%);
    transition:transform .22s ease;
    border-radius:0;
  }
  body.page-chat .chatSide.is-open{ transform:translateX(0); }
  body.page-chat .burger{display:inline-flex}
  body.page-chat .drawerClose{display:inline-flex}
}

/* =========================
   MAIN CHAT
========================= */
body.page-chat .chatMain{
  display:flex; flex-direction:column;
  min-height:0;
}
body.page-chat .chatTop{
  flex:0 0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--chat-line);
}
body.page-chat .chatTop__left{display:flex;align-items:center;gap:10px}
body.page-chat .chatTitle{font-weight:1000}
body.page-chat .chatSub{font-size:13px}
body.page-chat .childMini{
  width:auto; max-width:240px;
  padding:8px 10px;
  border-radius:14px;
}

/* Chat log */
body.page-chat .chatlog--full{
  flex:1;
  min-height:0;
  overflow:auto;
  padding:14px;
  background:
    radial-gradient(900px 400px at 10% 0%, rgba(99,102,241,.08), transparent 60%),
    radial-gradient(900px 400px at 90% 0%, rgba(236,72,153,.07), transparent 60%),
    linear-gradient(180deg, #ffffff, #f7f8fc);
}

/* Empty state */
body.page-chat .emptyChat{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}
body.page-chat .emptyCard{
  max-width:520px;
  width:100%;
  background: linear-gradient(135deg, var(--kid-1), var(--kid-2));
  border:1px solid rgba(99,102,241,.18);
  border-radius:18px;
  padding:16px;
}
body.page-chat .emptyTitle{font-weight:1000;font-size:18px;margin-bottom:6px}
body.page-chat .emptyHints{margin-top:12px;display:grid;gap:8px}
body.page-chat .hint{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
  color:var(--muted);
}

/* Bubbles */
body.page-chat .msg{margin:10px 0;display:flex;gap:10px}
body.page-chat .msg__bubble{
  max-width:92%;
  padding:14px 14px;
  border-radius:18px;
  border:1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 25px rgba(2,6,23,.06);
  line-height:1.45;
  white-space:pre-wrap;
}
body.page-chat .msg--assistant .msg__bubble{
  background: linear-gradient(135deg, var(--kid-1), var(--kid-2));
  border-color: rgba(99,102,241,.18);
}
body.page-chat .msg--user{justify-content:flex-end}
body.page-chat .msg--user .msg__bubble{
  background: linear-gradient(135deg, var(--user-1), var(--user-2));
  border-color: rgba(14,116,144,.14);
}

/* typing */
body.page-chat .typing{
  display:inline-flex; align-items:center; gap:8px;
  color: rgba(15,23,42,.65);
  font-weight:800;
}
body.page-chat .dots{display:inline-flex;gap:4px}
body.page-chat .dots span{
  width:6px;height:6px;border-radius:999px;
  background: rgba(15,23,42,.35);
  animation: bop 1.1s infinite;
}
body.page-chat .dots span:nth-child(2){ animation-delay:.15s }
body.page-chat .dots span:nth-child(3){ animation-delay:.3s }
@keyframes bop{
  0%,80%,100%{ transform: translateY(0); opacity:.6 }
  40%{ transform: translateY(-4px); opacity:1 }
}

/* Attach chips (just above composer) */
body.page-chat .attachBar{
  position: sticky;
  bottom: 74px;
  z-index: 30;
  padding: 10px 12px;
  background: linear-gradient(to top, rgba(255,255,255,.94), rgba(255,255,255,0));
}
body.page-chat .fileChip{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  border-radius:999px;
  padding:8px 10px;
  margin-right:8px;
  margin-bottom:8px;
  font-size:13px;
}
body.page-chat .fileChip button{
  border:0;background:transparent;cursor:pointer;
  font-size:16px;opacity:.6;
}
body.page-chat .fileChip button:hover{opacity:1}

/* =========================
   COMPOSER (ChatGPT clone + kid)
========================= */
body.page-chat .composer2{
  position: sticky;
  bottom: 0;
  z-index: 40;
  padding: 12px 14px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--chat-line);
}

body.page-chat .composerBar{
  display:flex;
  align-items:flex-end;
  gap:10px;
}

/* +, micro = ronds comme ChatGPT */
body.page-chat .cBtn{
  width:44px;height:44px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition: transform .08s ease, box-shadow .12s ease;
}
body.page-chat .cBtn:hover{ box-shadow:0 10px 24px rgba(2,6,23,.10); transform: translateY(-1px); }
body.page-chat .cBtn:active{ transform: translateY(0); box-shadow:none; }
body.page-chat .cIco{ font-size:18px; line-height:1; }

/* pill */
body.page-chat .composerPill{
  flex:1;
  display:flex;
  align-items:flex-end;
  gap:8px;
  padding:10px 10px;
  border:1px solid rgba(15,23,42,.14);
  border-radius:22px;
  background:#fff;
  box-shadow:0 10px 30px rgba(2,6,23,.06);
}

body.page-chat .composerInput{
  flex:1;
  border:0 !important;
  outline:none;
  background:transparent;
  padding:10px 6px !important;
  min-height:44px;
  max-height:140px;
  resize:none;
  overflow:auto;
  font-size:15px;
  line-height:1.25;
}

/* mic active */
body.page-chat .cBtn--mic.is-rec{
  border-color: rgba(220,38,38,.35);
  box-shadow: 0 0 0 6px rgba(220,38,38,.12);
}

/* send = flèche ronde */
body.page-chat .sendRound{
  width:44px;height:44px;
  border-radius:999px;
  border:1px solid var(--brand2);
  background: var(--brand);
  color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition: transform .08s ease, box-shadow .12s ease, background .12s ease;
}
body.page-chat .sendRound:hover{
  background: var(--brand2);
  box-shadow:0 10px 24px rgba(2,6,23,.12);
  transform: translateY(-1px);
}
body.page-chat .sendRound:active{ transform: translateY(0); box-shadow:none; }
body.page-chat .sendIco{ font-size:16px; transform: translateX(1px); }

@media(max-width:680px){
  body.page-chat .wrap--chat{ padding-top:10px; padding-bottom:10px; }
  body.page-chat .composer2{ padding:10px; }
  body.page-chat .cBtn,
  body.page-chat .sendRound{ width:40px; height:40px; }
  body.page-chat .composerPill{ border-radius:20px; }
}

/* =========================================================
   IAKids — CHAT (CLEAN STABLE)  ✅ À COLLER TOUT EN BAS
========================================================= */

/* Topbar: hauteur stable (évite header "géant") */
.topbar{ position:sticky; top:0; z-index:50; }
.topbar__inner{ height:64px; padding:0; }
@media(max-width:900px){
  .topbar__inner{ height:60px; }
}

/* Page chat = fullscreen sous topbar */
body.page-chat .main{ padding:0 !important; }
body.page-chat .footer{ display:none; }

html,body{ height:100%; }
body.page-chat{ height:100dvh; overflow:hidden; }

/* wrap prend le reste sous la topbar */
body.page-chat .wrap{
  max-width: var(--wrap);
  height: calc(100dvh - 64px);
}
@media(max-width:900px){
  body.page-chat .wrap{ height: calc(100dvh - 60px); }
}

/* Layout chat */
body.page-chat .chatappV2{
  height:100%;
  display:grid;
  grid-template-columns: 340px 1fr;
  gap:14px;
  padding: 14px 0;
}
@media(max-width:900px){
  body.page-chat .chatappV2{ grid-template-columns: 1fr; padding: 10px 0; }
}

/* Side/Main cards */
body.page-chat .chatSide,
body.page-chat .chatMain{
  height:100%;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  box-shadow: 0 18px 55px rgba(2,6,23,.10);
}

/* Sidebar scroll */
body.page-chat .chatSide{ display:flex; flex-direction:column; }
body.page-chat .sideTop{
  flex:0 0 auto;
  padding:14px;
  border-bottom:1px solid rgba(15,23,42,.10);
}
body.page-chat .threadList{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding:10px;
}
body.page-chat .threadItem{
  display:block;
  padding:10px 10px;
  border-radius:14px;
  border:1px solid transparent;
}
body.page-chat .threadItem:hover{
  border-color: rgba(99,102,241,.16);
  background: linear-gradient(135deg, rgba(99,102,241,.06), rgba(236,72,153,.05));
}
body.page-chat .threadItem.is-active{
  background:linear-gradient(135deg,#eef2ff,#fdf2f8);
  border-color: rgba(99,102,241,.22);
}

/* Main */
body.page-chat .chatMain{ display:flex; flex-direction:column; min-height:0; }
body.page-chat .chatTop{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid rgba(15,23,42,.10);
}

/* Chatlog scroll ONLY */
body.page-chat .chatlog--full{
  flex:1 1 auto;
  min-height:0;
  height:auto !important;
  overflow:auto;
  padding:14px;
  background:
    radial-gradient(900px 400px at 10% 0%, rgba(99,102,241,.08), transparent 60%),
    radial-gradient(900px 400px at 90% 0%, rgba(236,72,153,.07), transparent 60%),
    linear-gradient(180deg, #ffffff, #f7f8fc);
}

/* Bubbles */
body.page-chat .msg{ display:flex; gap:10px; margin:10px 0; }
body.page-chat .msg__bubble{
  max-width:92%;
  padding:14px 14px;
  border-radius:18px;
  line-height:1.45;
  white-space:pre-wrap;
  box-shadow: 0 10px 25px rgba(2,6,23,.06);
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
}
body.page-chat .msg--assistant .msg__bubble{
  background: linear-gradient(135deg, #eef2ff, #fdf2f8);
  border-color: rgba(99,102,241,.18);
}
body.page-chat .msg--user{ justify-content:flex-end; }
body.page-chat .msg--user .msg__bubble{
  background: linear-gradient(135deg, #ecfeff, #eff6ff);
  border-color: rgba(14,116,144,.14);
}

/* Images in assistant bubble */
body.page-chat .msg__imgs{
  margin-top:10px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:8px;
}
@media(min-width:900px){
  body.page-chat .msg__imgs{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
body.page-chat .msg__imgs img{
  width:100%;
  height:auto;
  display:block;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.10);
}

/* Attach bar (chips) */
body.page-chat .attachBar{
  position: sticky;
  bottom: 78px;
  z-index: 30;
  padding: 10px 12px;
  background: linear-gradient(to top, rgba(255,255,255,.94), rgba(255,255,255,0));
}
body.page-chat .fileChip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  border-radius:999px;
  padding:8px 10px;
  font-size:13px;
}
body.page-chat .fileChip button{ border:0; background:transparent; cursor:pointer; opacity:.6; }
body.page-chat .fileChip button:hover{ opacity:1; }

/* Composer */
body.page-chat .composer2{
  flex:0 0 auto;
  position: sticky;
  bottom: 0;
  z-index: 40;
  padding: 12px 14px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-top:1px solid rgba(15,23,42,.10);
}

/* Bar clone ChatGPT */
body.page-chat .composerBar{
  display:flex;
  align-items:flex-end;
  gap:10px;
}

/* small round buttons */
body.page-chat .cBtn{
  width:44px;height:44px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: transform .08s ease, box-shadow .12s ease;
}
body.page-chat .cBtn:hover{ box-shadow: 0 10px 24px rgba(2,6,23,.10); transform: translateY(-1px); }
body.page-chat .cBtn:active{ transform: translateY(0); box-shadow:none; }
body.page-chat .cIco{ font-size:18px; line-height:1; }

/* pill input */
body.page-chat .composerPill{
  flex:1;
  display:flex;
  align-items:flex-end;
  gap:8px;
  padding:10px 10px;
  border:1px solid rgba(15,23,42,.14);
  border-radius: 22px;
  background:#fff;
  box-shadow: 0 10px 30px rgba(2,6,23,.06);
}
body.page-chat .composerInput{
  flex:1;
  border:0 !important;
  outline:none;
  background:transparent;
  padding: 10px 6px !important;
  min-height: 44px;
  max-height: 140px;
  resize:none;
  overflow:auto;
  font-size:15px;
  line-height:1.25;
}

/* mic in pill */
body.page-chat .cBtn--mic{ width:42px; height:42px; }
body.page-chat .cBtn--mic.is-rec{
  border-color: rgba(220,38,38,.35);
  box-shadow: 0 0 0 6px rgba(220,38,38,.12);
}

/* send arrow round */
body.page-chat .sendRound{
  width:44px;height:44px;
  border-radius:999px;
  border:1px solid var(--brand2);
  background: var(--brand);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: transform .08s ease, box-shadow .12s ease, background .12s ease;
}
body.page-chat .sendRound:hover{ background:var(--brand2); box-shadow: 0 10px 24px rgba(2,6,23,.12); transform: translateY(-1px); }
body.page-chat .sendRound:active{ transform: translateY(0); box-shadow:none; }
body.page-chat .sendIco{ font-size:16px; transform: translateX(1px); }

/* Mobile sizes */
@media(max-width:680px){
  body.page-chat .cBtn, body.page-chat .sendRound{ width:40px; height:40px; }
  body.page-chat .composer2{ padding:10px; }
  body.page-chat .composerPill{ border-radius:20px; }
}

/* Chat wrapper: on veut du plein écran propre */
.wrap--chat{
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 16px;
}