/* ==========================================================================
   EWE — interface de conversation
   Charte : magenta #E600BF, nuit #131D22, blanc #F5F5F5.
   Extatica pour les titres (auto-hebergee), Plus Jakarta Sans pour le texte.
   Parti pris sombre assume : la charte EWE est un systeme dark mode.
   ========================================================================== */

@font-face { font-family:"Extatica"; font-weight:400; font-style:normal; font-display:swap;
  src:url("/marque/fonts/Extatica-Regular.otf") format("opentype"); }
@font-face { font-family:"Extatica"; font-weight:600; font-style:normal; font-display:swap;
  src:url("/marque/fonts/Extatica-SemiBold.otf") format("opentype"); }
@font-face { font-family:"Extatica"; font-weight:700; font-style:normal; font-display:swap;
  src:url("/marque/fonts/Extatica-Bold.otf") format("opentype"); }

:root {
  --nuit:#131D22; --nuit-creux:#0E161A; --magenta:#E600BF; --rose:#FD82FF;
  --violet:#9082FF; --menthe:#82FFE4; --corail:#FF8284;
  --blanc:#F5F5F5; --brume:#8FA0AB; --brume-basse:#5C6B75;
  --trait:rgba(245,245,245,.10); --trait-fort:rgba(245,245,245,.20);
  --sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Extatica","Plus Jakarta Sans",system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --rayon:14px; --rail:268px;
}

* { box-sizing:border-box; }
html, body { height:100%; margin:0; }

body {
  background:var(--nuit); color:var(--blanc); font-family:var(--sans);
  font-size:15px; line-height:1.55; letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(58% 50% at 78% 96%, rgba(230,0,191,.18), transparent 72%),
    radial-gradient(42% 38% at 14% 104%, rgba(144,130,255,.12), transparent 72%);
  background-repeat:no-repeat; background-attachment:fixed;
}

h1,h2,h3 { font-family:var(--display); letter-spacing:-.02em; font-weight:700; }
::selection { background:rgba(230,0,191,.32); color:#fff; }
button, input, textarea { font:inherit; color:inherit; }
button { cursor:pointer; border:0; background:none; }
svg { fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }

* { scrollbar-width:thin; scrollbar-color:rgba(230,0,191,.35) transparent; }
*::-webkit-scrollbar { width:10px; height:10px; }
*::-webkit-scrollbar-thumb {
  background:rgba(230,0,191,.35); border:3px solid transparent;
  background-clip:content-box; border-radius:999px;
}

/* --------------------------------------------------------------- connexion */

.connexion { min-height:100dvh; display:grid; place-items:center; padding:24px; }

.carte {
  width:min(100%,384px); display:flex; flex-direction:column; gap:8px;
  padding:34px 30px 30px; border-radius:20px;
  border:1px solid var(--trait);
  background:linear-gradient(180deg, rgba(245,245,245,.045), rgba(19,29,34,.6));
  box-shadow:0 30px 80px -40px rgba(0,0,0,.9);
}
.carte .logo { width:92px; height:auto; margin-bottom:4px; }
.accroche { margin:0 0 18px; color:var(--brume); font-size:14px; }
.carte label {
  font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--brume); margin-top:8px;
}
.carte input {
  padding:11px 13px; border-radius:11px; border:1px solid var(--trait);
  background:rgba(245,245,245,.05); outline:none;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.carte input:focus { border-color:var(--magenta); box-shadow:0 0 0 3px rgba(230,0,191,.18); }

.primaire {
  margin-top:20px; padding:12px 16px; border-radius:11px;
  background:var(--magenta); color:#0A1116; font-weight:700;
  transition:transform .16s cubic-bezier(.2,.9,.3,1.25), box-shadow .2s ease, filter .16s ease;
}
.primaire:hover { filter:brightness(1.08); box-shadow:0 10px 26px -12px rgba(230,0,191,.9); }
.primaire:active { transform:scale(.98); }
.primaire[disabled] { opacity:.55; cursor:default; transform:none; }

.erreur {
  margin:14px 0 0; padding:9px 12px; border-radius:10px;
  background:rgba(255,130,132,.12); border:1px solid rgba(255,130,132,.3);
  color:var(--corail); font-size:13.5px;
}

/* ------------------------------------------------------------------- appli */

.appli { display:flex; height:100dvh; overflow:hidden; }

.rail {
  width:var(--rail); flex:none; display:flex; flex-direction:column; gap:14px;
  padding:18px 14px 14px;
  background:linear-gradient(180deg, rgba(14,22,26,.92), rgba(14,22,26,.98));
  border-right:1px solid var(--trait);
}
.rail-tete { display:flex; align-items:center; justify-content:space-between; }
.logo-rail { width:74px; height:auto; }
.fermer { display:none; }

.nouveau {
  display:flex; align-items:center; gap:9px; padding:11px 13px;
  border-radius:12px; border:1px solid var(--trait);
  background:rgba(245,245,245,.04); font-weight:600; font-size:14px;
  transition:background .16s ease, border-color .16s ease, transform .16s ease;
}
.nouveau:hover { background:rgba(230,0,191,.14); border-color:rgba(230,0,191,.42); transform:translateY(-1px); }
.nouveau svg { width:17px; height:17px; }

.liste { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:3px; }

.item {
  display:flex; align-items:center; gap:8px; width:100%;
  padding:9px 11px; border-radius:10px; color:var(--brume);
  text-align:left; font-size:14px;
  transition:background .14s ease, color .14s ease;
}
.item:hover { background:rgba(245,245,245,.05); color:var(--blanc); }
.item[aria-current="true"] {
  background:linear-gradient(90deg, rgba(230,0,191,.2), rgba(230,0,191,.05));
  color:var(--blanc); box-shadow:inset 2px 0 0 0 var(--magenta);
}
.item-titre { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.suppr { opacity:0; flex:none; padding:2px; border-radius:6px; color:var(--brume-basse);
         transition:opacity .14s, color .14s; }
.item:hover .suppr, .suppr:focus-visible { opacity:1; }
.suppr:hover { color:var(--corail); }
.suppr svg { width:14px; height:14px; }

/* Attribution : le produit et qui l'a fait. Hermes est sous licence MIT,
   sans clause de marque — rien n'oblige a citer l'amont dans l'interface. */
.rail-pied {
  display:flex; align-items:flex-end; justify-content:space-between; gap:8px;
  padding-top:12px; border-top:1px solid var(--trait);
}
.credit { display:flex; flex-direction:column; min-width:0; line-height:1.3; }
.credit-produit { font-family:var(--display); font-weight:700; font-size:13px; color:var(--magenta); }
.credit-qui { font-size:11px; color:var(--brume-basse); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.discret { color:var(--brume-basse); font-size:12.5px; flex:none; transition:color .14s ease; }
.discret:hover { color:var(--rose); }

/* ---------------------------------------------------------- conversation */

.conversation { flex:1; min-width:0; display:flex; flex-direction:column; }
.fil { flex:1; min-height:0; overflow-y:auto; padding:30px 24px 8px; scroll-behavior:smooth; }

.accueil { max-width:720px; margin:14vh auto 0; text-align:center; }
.accueil img { width:52px; height:auto; margin-bottom:18px; }
.accueil h1 { margin:0 0 8px; font-size:30px; }
.accueil p { margin:0; color:var(--brume); }

.message { max-width:780px; margin:0 auto 22px; display:flex; gap:13px; }
.message.moi { flex-direction:row-reverse; }

.avatar {
  width:30px; height:30px; flex:none; border-radius:9px;
  display:grid; place-items:center;
  background:rgba(245,245,245,.06); border:1px solid var(--trait);
}
.avatar img { width:16px; height:auto; }
.message.moi .avatar {
  background:rgba(230,0,191,.16); border-color:rgba(230,0,191,.4);
  font-size:12px; font-weight:700;
}

.bulle { min-width:0; padding:11px 15px; border-radius:var(--rayon); }
.message.ewe .bulle { background:rgba(245,245,245,.045); border:1px solid var(--trait); border-top-left-radius:5px; }
.message.moi .bulle { background:rgba(230,0,191,.14); border:1px solid rgba(230,0,191,.32); border-top-right-radius:5px; }
.bulle p { margin:0 0 .7em; }
.bulle p:last-child { margin-bottom:0; }
.bulle code { font-family:var(--mono); font-size:.88em; background:rgba(0,0,0,.34); padding:1px 5px; border-radius:5px; }
.bulle pre {
  font-family:var(--mono); font-size:.86em; background:var(--nuit-creux);
  border:1px solid var(--trait); padding:12px 14px; border-radius:11px;
  overflow-x:auto; margin:.6em 0;
}
.bulle pre code { background:none; padding:0; }

.outil {
  display:inline-flex; align-items:center; gap:7px; margin:2px 6px 6px 0;
  padding:4px 10px; border-radius:999px;
  border:1px solid rgba(144,130,255,.32); background:rgba(144,130,255,.1);
  color:var(--violet); font-family:var(--mono); font-size:11.5px;
}
.outil .point { width:6px; height:6px; border-radius:50%; background:currentColor; animation:pulse 1.1s ease-in-out infinite; }
.outil.fini { border-color:rgba(130,255,228,.3); background:rgba(130,255,228,.09); color:var(--menthe); }
.outil.fini .point { animation:none; }
@keyframes pulse { 0%,100%{opacity:.35} 50%{opacity:1} }

.curseur {
  display:inline-block; width:7px; height:1.05em; background:var(--magenta);
  border-radius:1px; vertical-align:text-bottom; margin-left:2px;
  animation:clignote .9s steps(2,start) infinite;
}
@keyframes clignote { 0%,100%{opacity:1} 50%{opacity:0} }

/* ---------------------------------------------------------------- saisie */

.composeur { padding:10px 24px calc(16px + env(safe-area-inset-bottom,0px)); }
.champ {
  max-width:780px; margin:0 auto; display:flex; align-items:flex-end; gap:8px;
  padding:8px 8px 8px 15px; border-radius:18px;
  border:1px solid var(--trait-fort); background:rgba(14,22,26,.86);
  backdrop-filter:blur(8px);
  transition:border-color .16s ease, box-shadow .16s ease;
}
.champ:focus-within { border-color:rgba(230,0,191,.55); box-shadow:0 0 0 3px rgba(230,0,191,.14); }
.champ textarea {
  flex:1; min-width:0; max-height:200px; padding:7px 0;
  border:0; outline:none; resize:none; background:none; line-height:1.5;
}
.champ textarea::placeholder { color:var(--brume-basse); }

.envoyer {
  flex:none; width:36px; height:36px; border-radius:11px;
  display:grid; place-items:center; background:var(--magenta); color:#0A1116;
  transition:transform .16s cubic-bezier(.2,.9,.3,1.25), filter .16s ease;
}
.envoyer svg { width:18px; height:18px; stroke-width:2.2; }
.envoyer:hover { filter:brightness(1.1); transform:translateY(-1px); }
.envoyer[disabled] { opacity:.4; cursor:default; transform:none; }

.mention { max-width:780px; margin:8px auto 0; text-align:center; font-size:11.5px; color:var(--brume-basse); }

/* -------------------------------------------------------------- mobile */

.ouvrir, .voile { display:none; }

@media (max-width:860px) {
  .rail {
    position:fixed; inset:0 auto 0 0; z-index:30; transform:translateX(-100%);
    transition:transform .22s cubic-bezier(.23,1,.32,1);
    box-shadow:0 0 60px rgba(0,0,0,.6);
  }
  .rail[data-ouvert="1"] { transform:none; }
  .fermer { display:grid; place-items:center; width:34px; height:34px; border-radius:9px; color:var(--brume); }
  .fermer svg { width:17px; height:17px; }
  .ouvrir {
    display:grid; place-items:center; position:fixed; top:12px; left:12px; z-index:20;
    width:40px; height:40px; border-radius:11px;
    border:1px solid var(--trait); background:rgba(14,22,26,.9);
    color:var(--blanc); backdrop-filter:blur(6px);
  }
  .ouvrir svg { width:19px; height:19px; }
  .voile { display:block; position:fixed; inset:0; z-index:25; background:rgba(0,0,0,.5); }
  .voile[hidden] { display:none; }
  .fil { padding:64px 15px 8px; }
  .composeur { padding:8px 15px calc(14px + env(safe-area-inset-bottom,0px)); }
  .accueil { margin-top:18vh; }
  .accueil h1 { font-size:25px; }
  .item { padding:12px 11px; }   /* cible tactile confortable */
  .suppr { opacity:1; }
}

@media (prefers-reduced-motion:reduce) {
  * { animation-duration:.01ms !important; animation-iteration-count:1 !important;
      transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ------------------------------------------------------------- modele --- */

.entete {
  flex: none; display: flex; align-items: center; justify-content: flex-end;
  gap: 8px; padding: 10px 22px 0;
}
.entete .etiquette { font-size: 11.5px; color: var(--brume); letter-spacing: .02em; }
.modele {
  font: inherit; font-size: 12.5px; color: var(--blanc);
  padding: 5px 9px; border-radius: 9px;
  border: 1px solid var(--trait); background: rgba(245, 245, 245, .05);
  cursor: pointer; max-width: 260px;
  transition: border-color .16s ease;
}
.modele:hover { border-color: rgba(230, 0, 191, .45); }
.modele:focus-visible { outline: 2px solid rgba(230, 0, 191, .6); outline-offset: 1px; }
.modele option { background: #131D22; color: #F5F5F5; }

@media (max-width: 760px) {
  .entete { padding: 8px 14px 0; }
  .modele { max-width: 170px; }
}