:root { --fond: #0b0c13; --surface: #161927; --surface2: #20243a; --texte: #eceefa; --doux: #9aa0b8; --cyan: #7cf0ff; --violet: #8f7dff; --rose: #ff7cd8; color-scheme: dark; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font: 17px/1.45 -apple-system, system-ui, sans-serif; background: var(--fond); color: var(--texte); -webkit-text-size-adjust: 100%; }
button { font: inherit; color: inherit; border: 0; cursor: pointer; }
[hidden] { display: none !important; }

.connexion { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 2rem 1.5rem; text-align: center; }
.logo { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 0 40px #8f7dff55; }
.connexion h1 { margin: 0; font-size: 1.8rem; background: linear-gradient(90deg, var(--cyan), var(--violet), var(--rose)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.connexion section { display: flex; flex-direction: column; gap: .8rem; width: min(22rem, 100%); }
.principal { padding: .9rem; border-radius: 14px; background: linear-gradient(90deg, #5aa9ff, var(--violet)); color: #fff; font-weight: 600; }
.lien { background: none; color: var(--doux); text-decoration: underline; }
#code { font: 600 1.4rem ui-monospace, monospace; letter-spacing: .15em; text-align: center; padding: .7rem; border-radius: 12px; border: 1px solid var(--surface2); background: var(--surface); color: var(--texte); text-transform: uppercase; }
#etat-connexion { color: var(--doux); min-height: 1.5em; }

.app { height: 100%; display: flex; flex-direction: column; }
header { display: flex; align-items: center; gap: .5rem; padding: calc(env(safe-area-inset-top) + .4rem) .6rem .4rem; background: #0e101acc; backdrop-filter: blur(12px); border-bottom: 1px solid var(--surface2); }
nav { flex: 1; display: flex; gap: .4rem; }
[role=tab] { flex: 1; padding: .55rem .4rem; border-radius: 12px; background: var(--surface); color: var(--doux); display: flex; align-items: center; justify-content: center; gap: .45rem; }
[role=tab][aria-selected=true] { background: var(--surface2); color: var(--texte); }
.point { width: .55rem; height: .55rem; border-radius: 50%; background: #555a70; }
.point.actif { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.discret { background: none; color: var(--doux); padding: .4rem .6rem; font-size: 1.2rem; }
.bandeau { margin: 0; padding: .5rem .9rem; background: #2a2340; color: #d9d0ff; font-size: .9rem; }
#appariement:not([hidden]) { display: flex; flex-direction: column; gap: .5rem; }
.empreinte { font: 600 1.15rem/1.4 ui-monospace, Menlo, monospace; letter-spacing: .05em; color: #fff; }

.fil { flex: 1; overflow-y: auto; padding: .8rem .7rem; display: flex; flex-direction: column; gap: .55rem; overscroll-behavior: contain; }
.bulle { max-width: 85%; padding: .55rem .8rem .35rem; border-radius: 18px; white-space: pre-wrap; overflow-wrap: anywhere; }
.bulle p { margin: 0; }
.bulle footer { display: flex; gap: .5rem; justify-content: flex-end; font-size: .72rem; color: #ffffffa0; margin-top: .15rem; }
.moi { align-self: flex-end; background: linear-gradient(135deg, #4b62d8, #7a5be0); border-bottom-right-radius: 6px; }
.elle { align-self: flex-start; background: var(--surface); border-bottom-left-radius: 6px; }
.attente, .local { opacity: .75; }
.etiquette { color: var(--cyan); }
.b-confier { margin-top: .4rem; padding: .35rem .7rem; border-radius: 10px; background: #ffffff22; font-size: .85rem; }
.carte { align-self: stretch; background: var(--surface); border: 1px solid var(--violet); border-radius: 14px; padding: .7rem .85rem; }
.carte h3 { margin: 0 0 .3rem; font-size: .95rem; }
.carte p { margin: .2rem 0; color: var(--doux); }
.carte pre { margin: .3rem 0; padding: .5rem; background: var(--fond); border-radius: 8px; font-size: .8rem; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 10rem; overflow: auto; }
.note { align-self: center; color: var(--doux); font-size: .8rem; margin: 0; }

#saisie { display: flex; gap: .5rem; align-items: flex-end; padding: .5rem .6rem calc(env(safe-area-inset-bottom) + .5rem); background: #0e101a; border-top: 1px solid var(--surface2); }
#texte { flex: 1; resize: none; font: inherit; padding: .6rem .8rem; border-radius: 18px; border: 1px solid var(--surface2); background: var(--surface); color: var(--texte); max-height: 160px; }
#b-envoyer { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: linear-gradient(135deg, var(--cyan), var(--violet)); color: #0b0c13; font-weight: 700; font-size: 1.2rem; }
.carte .choix { display: flex; gap: .5rem; margin-top: .5rem; }
.carte .choix button { flex: 1; padding: .6rem; border-radius: 10px; }
.b-oui { background: linear-gradient(90deg, #5aa9ff, var(--violet)); color: #fff; font-weight: 600; }
.b-non { background: var(--surface2); }
.carte button:disabled { opacity: .5; }
.carte.autorise { border-color: var(--cyan); }
.carte.refuse { border-color: #555a70; opacity: .8; }
/* « Yliria réfléchit… » : bulle Aurore (couleurs de l'icône). Liseré dégradé qui tourne, texte balayé de lumière,
   trois points qui sautillent. Tout en CSS ; immobile si l'iPhone demande de réduire les animations. */
.reflechit { align-self: flex-start; margin: 0; display: inline-flex; align-items: center; gap: .55rem; padding: .5rem .85rem;
  border: 1.5px solid transparent; border-radius: 18px; border-bottom-left-radius: 6px; font-size: .85rem;
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(90deg, var(--cyan), var(--violet), var(--rose), var(--violet), var(--cyan)) 0 0 / 300% 100% border-box;
  animation: aurore 4s linear infinite, halo 2.4s ease-in-out infinite, entree .35s ease-out; }
.reflechit .texte { font-style: italic; color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(100deg, var(--doux) 30%, #fff 50%, var(--doux) 70%); background-size: 250% 100%;
  animation: lumiere 2.2s linear infinite; }
.reflechit .points { display: inline-flex; gap: .28rem; }
.reflechit .points i { width: .42rem; height: .42rem; border-radius: 50%; animation: saut 1.2s ease-in-out infinite; }
.reflechit .points i:nth-child(1) { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.reflechit .points i:nth-child(2) { background: var(--violet); box-shadow: 0 0 8px var(--violet); animation-delay: .15s; }
.reflechit .points i:nth-child(3) { background: var(--rose); box-shadow: 0 0 8px var(--rose); animation-delay: .3s; }
@keyframes aurore { to { background-position: 0 0, 300% 0; } }
@keyframes halo { 0%, 100% { box-shadow: 0 0 0 #8f7dff00; } 50% { box-shadow: 0 0 18px #8f7dff55; } }
@keyframes lumiere { from { background-position: 125% 0; } to { background-position: -125% 0; } }
@keyframes saut { 0%, 60%, 100% { transform: translateY(0); opacity: .55; } 30% { transform: translateY(-.32rem); opacity: 1; } }
@keyframes entree { from { opacity: 0; transform: translateY(.4rem) scale(.96); } }
@media (prefers-reduced-motion: reduce) { .reflechit, .reflechit .texte, .reflechit .points i { animation: none; } .reflechit .texte { color: var(--doux); } }
/* Images : dans les bulles (toucher pour agrandir), aperçu avant envoi, bouton 📷 */
.bulle img { display: block; max-width: 100%; max-height: 40vh; border-radius: 12px; margin: .1rem 0 .3rem; object-fit: cover; cursor: zoom-in; }
.bulle img.grande { max-height: none; cursor: zoom-out; }
.image-perdue { color: var(--doux); font-style: italic; }
#b-image { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--surface); font-size: 1.15rem; }
#apercu-image:not([hidden]) { display: flex; align-items: flex-start; gap: .4rem; padding: .5rem .6rem 0; background: #0e101a; border-top: 1px solid var(--surface2); }
#apercu-image img { max-height: 90px; max-width: 70%; border-radius: 10px; }
#b-retirer-image { background: var(--surface2); border-radius: 50%; width: 1.8rem; height: 1.8rem; font-size: .9rem; }