:root{
  /* Thème Off-White */
  --bg: #f4f6f8; 
  --text: #0b1020; 
  --accent: #2563eb;

  --dot-size: clamp(90px, 16vw, 170px);
  --brow-gap: clamp(10px, 2.6vw, 22px);
  --brow-thickness: clamp(10px, 1.2vw, 16px);

  /* Variables pilotées par le JS */
  --tx: 0px; --ty: 0px; --rx: 0deg; --ry: 0deg;
  --shineX: 0px; --shineY: 0px;
  
  --shadow-oval: 0 26px 60px rgba(2,6,23,.08);

  --ang: 0deg;   /* halo input */
  --prog: 0%;    /* progression */

  /* Offsets */
  --stage-offset: -100px;
  --feed-offset:  -60px;
}

/* Reset */
*{box-sizing:border-box}
html,body{height:100%; overflow-x:hidden;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
}

/* --- 1. LIQUID BACKGROUND --- */
.ambient-glow {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  z-index: -1; pointer-events: none; overflow: hidden;
  background: #ffffff;
}
.blob {
  position: absolute; filter: blur(80px); opacity: 0.6;
  animation: floatBlob 20s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
}
.blob-1 { top: 20%; left: 30%; width: 50vw; height: 50vw; background: #c7d2fe; animation-delay: -5s; }
.blob-2 { top: 40%; right: 20%; width: 40vw; height: 40vw; background: #bae6fd; animation-delay: -12s; }
.blob-3 { bottom: 10%; left: 20%; width: 60vw; height: 40vw; background: #e9d5ff; animation-duration: 25s; }
@keyframes floatBlob {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(100px, 50px) scale(1.1); }
}

/* --- 2. DUST PARTICLES --- */
.dust-particle {
  position: absolute; background: #2563eb; border-radius: 50%;
  opacity: 0.3; pointer-events: none;
  animation: floatDust linear infinite;
}
@keyframes floatDust {
  from { transform: translateY(0) rotate(0deg); }
  to { transform: translateY(-100vh) rotate(360deg); }
}

/* --- 3. TOPBAR & MENU --- */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.85));
  backdrop-filter: blur(10px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,0.5);
}
.iconbtn{
  display:inline-grid; place-items:center; width:36px; height:36px; border-radius:10px;
  background:#0b1225; color:#fff; border:1px solid #0b1225;
  box-shadow:0 6px 16px rgba(2,6,23,.18); cursor:pointer; transition:transform .06s ease, filter .2s ease;
}
.iconbtn:hover{ filter:brightness(1.06) } .iconbtn:active{ transform:translateY(1px) }
.brand{ font-weight:800; letter-spacing:.2px; text-decoration:none; color:#0b1225 }
.brand.sm{ font-size:14px }
.topbar__spacer{ flex:1 }
.planetbtn{ background:#0b1225; }
.planetbtn:hover{ filter:brightness(1.06) }

.drawer{
  position: fixed; left: 12px; top: 64px; width: min(320px, 92vw); max-height: 72vh;
  overflow: auto; border-radius: 20px; background: #fff; border: 1px solid #eef2f7;
  box-shadow: 0 24px 60px rgba(2,6,23,.18), 0 6px 18px rgba(2,6,23,.08);
  transform-origin: 16px -8px; transform: translateY(-8px) scale(.96);
  opacity: 0; pointer-events: none; z-index: 50;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .18s ease;
  display:flex; flex-direction:column;
}
.drawer.open{ transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
.drawer__mask{ position:fixed; inset:0; background:rgba(2,6,23,.24); backdrop-filter: blur(1.5px); z-index:40; }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:12px 12px 8px; border-bottom:1px solid #eef2f7 }
.drawer__nav{ display:flex; flex-direction:column; padding:8px }
.navlink{ padding:10px 12px; border-radius:12px; color:#0b1225; text-decoration:none; }
.navlink:hover{ background:#f2f4fb }
.navlink.active{ background:#0b1225; color:#fff }

/* --- 4. SCÈNE ŒIL (LA CORRECTION EST ICI) --- */
#app{min-height:100dvh; display:grid; grid-template-rows:auto 1fr auto}

.stage{ 
  display:grid; place-items:center; padding:28px 16px 8px; 
  position: relative;
  --sy: var(--stage-offset);
}

/* CORRECTION : L'animation d'ouverture est sur .eyeWrap (le parent).
   Cela laisse #eyeGroup (l'enfant) libre pour le JS.
*/
.eyeWrap {
  perspective: 900px;
  transform-origin: center center;
  animation: wakeUpEye 2.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  will-change: transform;
}

/* L'ouverture de paupière (Scale) */
@keyframes wakeUpEye {
  0% { transform: scaleY(0.02) scaleX(0.8); filter: brightness(0); }
  40% { transform: scaleY(0.02) scaleX(0.8); filter: brightness(0); }
  60% { transform: scaleY(1.1) scaleX(0.95); filter: brightness(1); }
  100% { transform: scaleY(1) scaleX(1); filter: brightness(1); }
}

/* L'Enfant est LIBRE : Pas d'animation CSS, piloté par JS variables */
.eye{
  position:relative; display:grid; grid-template-rows:auto auto; justify-items:center; align-items:center;
  /* C'est ici que le JS injecte --tx, --ty */
  transform: translate(var(--tx),var(--ty)) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style:preserve-3d; 
  /* Transition douce pour le JS */
  transition: transform .12s ease; 
  will-change:transform;
}

.eye::after{
  content:""; position:absolute; width:calc(var(--dot-size)*3.2); height:calc(var(--dot-size)*1.5);
  top:calc(100% + 16px); border-radius:999px;
  background: radial-gradient(50% 55% at 50% 50%, rgba(15,23,42,.07), rgba(15,23,42,0));
  filter:blur(10px); pointer-events:none; box-shadow: var(--shadow-oval);
}
#brow{ width:calc(var(--dot-size)*1.25); height:calc(var(--dot-size)*.55); margin-bottom:calc(var(--brow-gap)*-1); overflow:visible; display:block; filter:drop-shadow(0 2px 0 rgba(0,0,0,.25)) }
#browPath{ fill:none; stroke:var(--text); stroke-linecap:round; stroke-width:var(--brow-thickness); opacity:1; transition:d .18s ease, opacity .18s ease, stroke-width .18s ease }
#dot{
  position:relative; width:var(--dot-size); height:var(--dot-size); border-radius:50%;
  background: radial-gradient(120% 120% at 35% 30%, #1a2236, #0b1221 55%, #070b14 100%);
  transform: scaleY(var(--sy,1)); transition: transform 110ms ease;
  box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 14px 32px rgba(2,6,23,.28);
}
#dot .shine{
  position:absolute; left:50%; top:50%; width:56%; height:56%; border-radius:50%;
  background: radial-gradient(60% 60% at 40% 40%, rgba(255,255,255,.62), rgba(255,255,255,0) 70%);
  filter: blur(2px); transform: translate(-50%,-50%) translate(var(--shineX),var(--shineY)) translateZ(18px);
  pointer-events:none;
}
.blink #dot{ --sy:.1 }

/* --- 5. FEED --- */
.feed{
  width:min(780px,92vw); margin: 0 auto; padding: 0 0 24px;
  display:flex; flex-direction:column; gap:10px;
  transform: translateY(var(--feed-offset));
}
.bubble{
  position:relative; max-width: 78%; padding: 12px 14px; border-radius: 22px;
  font-size: 15px; line-height: 1.3; box-shadow: 0 8px 20px rgba(2,6,23,.08);
  animation: pop .16s ease both;
}
@keyframes pop{ from{ transform: translateY(6px); opacity:0 } to{ transform: translateY(0); opacity:1 } }
.bubble.user{ align-self:flex-end; background: radial-gradient(120% 120% at 30% 30%, #131a2b, #0b1225 60%, #070b14); color:#fff; border-top-right-radius: 6px; }
.bubble.ai{ align-self:flex-start; background:#fff; border:1px solid #fff; color:#0b1020; border-top-left-radius: 6px; }
.bubble .meta{ display:block; margin-top:4px; opacity:.6; font-size:12px }

.actions{ position:absolute; top:-8px; right:8px; display:flex; gap:6px; opacity:0; transition: opacity .15s ease; }
.bubble:hover .actions{ opacity:1 }
.actions .iconbtn{ width:28px; height:28px; border-radius:8px; box-shadow:none; background:#fff; color:#0b1225; border:1px solid #e5e7eb; }
.actions .iconbtn:hover{ background:#0b1225; color:#fff }
.bubble.editing{ outline:2px dashed rgba(99,102,241,.35) }
.bubble textarea.editor{ width:100%; border:none; outline:none; resize:vertical; min-height:48px; font:inherit; background:transparent; color:inherit; }

.bubble.typing{ display:flex; gap:6px; align-items:center }
.bubble.typing span{ width:8px; height:8px; border-radius:50%; background:#c7cde1; animation:bounce 1.2s infinite ease-in-out }
.bubble.typing span:nth-child(2){ animation-delay:.15s } .bubble.typing span:nth-child(3){ animation-delay:.3s }
@keyframes bounce{ 0%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-4px)} }

/* --- 6. CHAT BAR PREMIUM --- */
#chat{
  position:sticky; bottom:0;
  display:grid; grid-template-columns:1fr auto; gap:12px;
  padding:18px; 
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0.9) 30%);
  backdrop-filter: blur(4px);
  z-index: 5;
  animation: slideUp .35s ease both;
}
@keyframes slideUp{ from{ transform: translateY(16px); opacity:0 } to{ transform: translateY(0); opacity:1 } }

.inputWrap{ position:relative; display:block; }
.inputWrap::before{
  content:""; position:absolute; inset:-2px; border-radius:999px; z-index:0;
  background: conic-gradient(from var(--ang), #c7d2fe 0%, #e9d5ff 25%, #bae6fd 50%, #c7d2fe 75%, #e9d5ff 100%);
  opacity:0; filter: blur(8px);
  transition: opacity .25s ease, filter .25s ease;
}
#chat.focused .inputWrap::before{ opacity:.9 }

#message{
  position:relative; z-index:1; width:100%;
  padding:16px 56px 16px 18px; border-radius:999px;
  border:1px solid transparent; background: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.02);
  outline:none; font-size:16px;
  transition: all .25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#message::placeholder{ color:#9aa3b2; transition: transform .2s ease, opacity .2s ease }
#message:focus::placeholder{ transform: translateY(-2px); opacity:.75 }
#message:focus{ 
  border-color: rgba(37, 99, 235, 0.3); 
  box-shadow: 0 8px 30px rgba(37, 99, 235, 0.12);
  transform: scale(1.01);
}

.typingDots{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  display:flex; gap:4px; opacity:0; pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
}
.typingDots span{ width:8px; height:8px; border-radius:50%; background:#a3aed0; animation:bounce 1.2s infinite ease-in-out }
.typingDots span:nth-child(2){ animation-delay:.15s } .typingDots span:nth-child(3){ animation-delay:.3s }
#chat.typing .typingDots{ opacity:1; transform:translateY(-50%) }

#send{
  position:relative; display:inline-grid; grid-auto-flow:column; align-items:center; gap:10px;
  padding:14px 18px; border-radius:999px; border:1px solid #0b1225;
  background: radial-gradient(120% 120% at 30% 30%, #131a2b, #0b1225 60%, #070b14);
  color:#fff; cursor:pointer; font-weight:600;
  transition: transform .06s ease, box-shadow .25s ease, filter .2s ease, background .2s ease;
  box-shadow: 0 10px 26px rgba(2,6,23,.28); overflow:hidden;
}
#send:hover{ filter:brightness(1.06) } #send:active{ transform: translateY(1px) }
#send .sendLabel{ position:relative; z-index:2 }
#send .plane{ position:relative; z-index:2; transform:translateX(0) rotate(0); transition:transform .25s cubic-bezier(.2,.7,.2,1) }
#send:hover .plane{ transform: translateX(2px) }
#chat.sent #send .plane{ animation: flyOut .6s ease forwards }
@keyframes flyOut{ 0%{ transform:translateX(0) rotate(0) } 45%{ transform:translateX(8px) translateY(-6px) rotate(18deg) } 100%{ transform:translateX(120%) translateY(-20px) rotate(28deg) } }
@keyframes sendPulse{ 0%{ box-shadow:0 0 0 0 rgba(37,99,235,0) } 35%{ box-shadow:0 0 0 14px rgba(37,99,235,.18) } 100%{ box-shadow:0 0 0 0 rgba(37,99,235,0) } }
#chat.sent #send{ animation: sendPulse .5s ease }

/* Accessibility */
@media (prefers-reduced-motion:reduce){
  .eyeWrap{animation:none}
  #browPath,#dot,#send,.plane{transition:none}
}

/* --- 7. SCROLLBAR GHOST --- */
html{ scrollbar-gutter: stable both-edges; }
html, body, .feed, .drawer{ scrollbar-width: none; }
*::-webkit-scrollbar{ width:0; height:0 }
:root{ --ghost-right: 12px; --ghost-h: 64vh; --ghost-w: 6px; --ghost-track: rgba(11,18,37,.06); --ghost-thumb: rgba(11,18,37,.82); }
body::before{ content:""; position: fixed; right: var(--ghost-right); top: calc((100vh - var(--ghost-h))/2); width: var(--ghost-w); height: var(--ghost-h); border-radius: 999px; background: var(--ghost-track); opacity: 0; pointer-events: none; }
body::after{ content:""; position: fixed; right: var(--ghost-right); top: calc((100vh - var(--ghost-h))/2); width: var(--ghost-w); height: var(--ghost-h); border-radius: 999px; background: var(--ghost-thumb); transform-origin: top center; transform: scaleY(0); box-shadow: 0 10px 22px rgba(2,6,23,.18); opacity: 0; pointer-events: none; }
@supports (animation-timeline: auto) or (scroll-timeline-name: none) {
  @scroll-timeline pageScroll { source: root; orientation: block; }
  body::after{ animation: growY 1s linear both, reveal 1s linear both; animation-timeline: pageScroll; animation-range: 0% 100%; }
  body::before{ animation: reveal 1s linear both; animation-timeline: pageScroll; animation-range: 0% 100%; }
  @keyframes growY { from { transform: scaleY(0) } to { transform: scaleY(1) } }
  @keyframes reveal { 0%{opacity:0} 5%{opacity:.45} 100%{opacity:.45} }
}
@media (max-width:480px){ :root{ --ghost-right: 6px; --ghost-w: 5px; --ghost-h: 58vh; } }