/* =========================================================
   KAYOTTE — Futuristic Hologram UI (pure CSS)
   - Palette néon, glassmorphism, scanlines, 3D tilt
   - Animations légères (GPU: transform/opacity)
   - Respecte prefers-reduced-motion
   ========================================================= */

/* Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

/* Variables */
:root{
  --bg:#0b0f14;           /* fond principal */
  --fg:#e5e7eb;           /* texte principal */
  --muted:#98a2b3;        /* texte secondaire */
  --brand:#00e6ff;        /* cyan néon */
  --brand-2:#9D4EDD;      /* violet électrique */
  --accent:#FFC107;       /* jaune accent */
  --card:#111827;         /* fond cartes */
  --border:rgba(255,255,255,.06);
  --ring:#00ffff55;       /* halo néon */
  --radius:14px;
  --shadow:0 6px 20px rgba(0,0,0,.35);
  --speed:280ms;
}

/* Reset de base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--fg);
  background: radial-gradient(1200px 600px at 10% -10%, #0f2130 0%, #0b0f14 60%) fixed,
              radial-gradient(1200px 600px at 110% 10%, #0e1120 0%, #0b0f14 60%) fixed,
              var(--bg);
  overflow-y:overlay;
}

/* Fond: grille 3D + particules (légers) */
body::before,
body::after{
  content:"";
  position:fixed; inset:0; pointer-events:none;
}
body::before{
  background:
    repeating-linear-gradient(transparent 0 29px, rgba(0,255,255,.05) 30px 31px),
    repeating-linear-gradient(90deg, transparent 0 29px, rgba(157,78,221,.05) 30px 31px);
  transform: perspective(900px) rotateX(55deg) translateY(-30%);
  transform-origin:top;
  filter: drop-shadow(0 0 10px rgba(0,255,255,.1));
  opacity:.35;
}
@keyframes particlesFloat{
  from{transform:translateY(0)}
  to{transform:translateY(-40px)}
}
body::after{
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(0,246,255,.7) 40%, transparent 45%) ,
    radial-gradient(2px 2px at 65% 60%, rgba(157,78,221,.6) 40%, transparent 45%),
    radial-gradient(2px 2px at 80% 20%, rgba(0,246,255,.55) 40%, transparent 45%),
    radial-gradient(1px 1px at 45% 75%, rgba(255,255,255,.35) 40%, transparent 45%);
  opacity:.35;
  animation:particlesFloat 12s linear infinite alternate;
}

/* Conteneur principal */
.container{max-width:1000px; margin:0 auto; padding:20px; perspective:1000px}

/* Header */
.header{display:flex; align-items:center; gap:12px; margin:8px 0 18px}
.logo{
  width:44px; height:44px; border-radius:50%;
  background: conic-gradient(from 0deg, var(--brand), #0dbbff, var(--brand-2), var(--brand));
  box-shadow: 0 0 0 2px #0c1320, 0 0 20px rgba(0,255,255,.35) inset, 0 0 14px rgba(157,78,221,.35);
  position:relative;
  animation:spinSlow 14s linear infinite;
}
@keyframes spinSlow{to{transform:rotate(360deg)}}

.title{font-weight:700; font-size:1.15rem; letter-spacing:.2px}
.badge{
  display:inline-block; margin-left:8px; padding:3px 8px;
  border-radius:999px; font-weight:700; font-size:.72rem;
  background:linear-gradient(90deg, var(--accent), #ffd65c);
  color:#111; box-shadow:0 0 0 2px rgba(255,255,255,.06);
}

/* Cartes (glassmorphism) */
.card{
  background: linear-gradient(180deg, rgba(17,24,39,.7), rgba(17,24,39,.55));
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
  transform-style:preserve-3d;
}
.card::before{
  /* lueur d'arête holographique */
  content:"";
  position:absolute; inset:-2px;
  border-radius:inherit;
  background: linear-gradient(135deg, rgba(0,255,255,.18), transparent 40%, rgba(157,78,221,.18));
  filter: blur(8px);
  pointer-events:none;
  opacity:.5;
}

/* Scanlines subtiles sur les cartes de chat */
.card.chat::after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(transparent 0 2px, rgba(255,255,255,.03) 3px 3px);
  mix-blend-mode:screen; opacity:.35;
}

/* Texte & Inputs */
label{display:block; font-size:.95rem; margin-bottom:6px; color:var(--muted)}
input[type=text]{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid #233044; outline:none;
  background:#0f141d; color:#fff;
  transition: box-shadow var(--speed), border-color var(--speed), transform var(--speed);
}
input[type=text]:focus{
  border-color:#2ad1ff; box-shadow:0 0 0 3px rgba(0,224,255,.15);
  transform: translateZ(0) scale(1.01);
}

/* Boutons */
button{
  background: linear-gradient(90deg, #0bc6ff, #5b8aff 60%, #9D4EDD);
  border:none; color:#fff; padding:10px 14px; border-radius:12px;
  font-weight:600; cursor:pointer; letter-spacing:.2px;
  box-shadow: 0 6px 18px rgba(0, 198, 255, .25), inset 0 0 10px rgba(255,255,255,.08);
  transition: transform var(--speed), filter var(--speed), box-shadow var(--speed);
}
button:hover{ filter:brightness(1.05); transform:translateY(-1px) }
button:active{ transform:translateY(0) scale(.99) }

/* Zone de chat */
.chat{display:flex; flex-direction:column; height:68vh; gap:12px}
.stream{
  flex:1; overflow:auto; padding:10px;
  background:#0f141d; border-radius:12px; border:1px solid #1e293b;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
  transform: translateZ(0);
}

/* Scrollbar (WebKit/Chromium) */
.stream::-webkit-scrollbar{height:10px; width:10px}
.stream::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#20344a,#1b2737); border-radius:9px}
.stream::-webkit-scrollbar-track{background:#0b1220}

.msg{
  max-width:72%; padding:10px 12px; margin:6px 0;
  border-radius:12px; line-height:1.38; word-wrap:break-word; white-space:pre-wrap;
  animation: pop-in .28s cubic-bezier(.22,1,.36,1);
  will-change:transform,opacity;
  position:relative;
}
.msg.v{
  background:#1f2937; align-self:flex-start; border-top-left-radius:6px;
  border:1px solid rgba(255,255,255,.04);
}
.msg.y{
  background:linear-gradient(180deg, #103322, #17412a);
  align-self:flex-end; border-top-right-radius:6px;
  border:1px solid rgba(0,255,200,.15);
  box-shadow: 0 0 0 1px rgba(0,255,200,.05) inset, 0 0 16px rgba(0,255,200,.08);
}

/* Lueur néon éphémère à l'arrivée */
.msg::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,255,255,.12), transparent 60%);
  opacity:0; animation:glow-flash .18s ease-out .08s 1;
}
@keyframes glow-flash{from{opacity:.75} to{opacity:0}}

.meta{font-size:.75rem; color:var(--muted); margin-top:2px}

.row{display:flex; gap:8px; margin-top:8px}
.row input{flex:1}

/* Apparition / suppression */
@keyframes pop-in{
  0%{opacity:0; transform:translateY(8px) scale(.985) rotateX(3deg)}
  60%{opacity:1;}
  100%{opacity:1; transform:translateY(0) scale(1) rotateX(0)}
}
@keyframes vanish{
  to{opacity:0; transform:translateY(-8px) scale(.98)}
}
.msg.is-deleting{animation:vanish .26s ease forwards}

/* Typing indicator (3 points) */
.typing{display:inline-flex; gap:4px; align-items:center}
.dot{
  width:6px; height:6px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #bff, #0cf);
  animation: blink 1.2s infinite ease-in-out;
}
.dot:nth-child(2){animation-delay:.15s}
.dot:nth-child(3){animation-delay:.3s}
@keyframes blink{50%{transform:translateY(-2px); filter:brightness(1.4)}}

/* Holo tilt (appliqué aux cartes de chat) */
.card.chat{
  transform: rotateX(.5deg);
}
.card.chat:hover{
  transform: rotateX(0deg) translateZ(0);
}

/* Badges d’état (ex: En ligne) */
.status{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px; font-size:.76rem;
  background:rgba(0,255,200,.08); border:1px solid rgba(0,255,200,.22);
  box-shadow: inset 0 0 10px rgba(0,255,200,.08);
}
.status .dot{
  width:8px; height:8px; border-radius:50%;
  background: radial-gradient(circle at 50% 50%, #7fffd4, #11ffaa 70%);
  box-shadow: 0 0 10px #11ffaa80, 0 0 20px #11ffaa40;
  animation:breath 1.6s ease-in-out infinite;
}
@keyframes breath{
  50%{transform:scale(1.2); filter:brightness(1.25)}
}

/* Mini-ruban “KAYOTTE” (utilisable si besoin) */
.ribbon{
  display:inline-block; padding:6px 10px;
  background:linear-gradient(90deg, rgba(0,255,255,.2), rgba(157,78,221,.2));
  border:1px solid rgba(255,255,255,.06); border-radius:8px;
  text-transform:uppercase; letter-spacing:.12em; font-weight:700; font-size:.7rem;
}

/* Icônes néon (si <img> SVG/PNG) */
.icon{
  width:20px; height:20px; filter: drop-shadow(0 0 6px rgba(0,255,255,.35));
}

/* Images/fichiers dans les messages */
.msg .file{
  display:flex; align-items:center; gap:10px;
  padding:8px; border-radius:10px; background:rgba(255,255,255,.03);
  border:1px dashed rgba(255,255,255,.08);
}
.msg .file .thumb{
  width:44px; height:44px; border-radius:8px; overflow:hidden; flex:none;
  background:#0e1522; display:grid; place-items:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.msg .file .name{font-size:.9rem}
.msg .file .meta{font-size:.72rem}

/* Barre d’info (texte de bienvenue) */
.notice{
  font-size:.88rem; color:var(--muted);
  background:linear-gradient(90deg, rgba(0,255,255,.07), rgba(157,78,221,.07));
  border:1px solid rgba(255,255,255,.06);
  padding:10px 12px; border-radius:10px;
}

/* Effet “holo-scan” lors de l’apparition */
.msg.holo{
  position:relative; overflow:hidden;
}
.msg.holo::before{
  content:""; position:absolute; left:-120%; top:0; height:100%; width:120%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  transform:skewX(-20deg);
  animation:scan .8s ease-out 1;
}
@keyframes scan{
  0%{left:-120%} 100%{left:120%}
}

/* Inputs + boutons groupés */
.form-inline{display:flex; gap:10px}
.form-inline .btn-icon{
  display:grid; place-items:center; padding:10px; width:44px; border-radius:12px;
}

/* Meta liens */
a{color:#6ecbff; text-decoration:none}
a:hover{text-decoration:underline}

/* Réactivité */
@media (max-width:900px){
  .chat{height:72vh}
  .msg{max-width:86%}
}
@media (max-width:520px){
  .title{font-size:1rem}
  .container{padding:14px}
  .chat{height:74vh}
}

/* Accessibilité: réduire les animations si demandé */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  body::after, .logo{animation:none}
}

/* Utilitaires */
.hidden{display:none !important}
.center{display:grid; place-items:center}
.mt-8{margin-top:8px}
.mt-12{margin-top:12px}
.mt-16{margin-top:16px}