:root {
  --fond: #05080d;
  --texte: #dfeaf2;
  --pale: #7d93a3;
  --lueur: #78ffe2;
  --bulle-moi: #12202b;
  --bulle-lui: #0b1419;
  --bord: #1d2e3a;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--fond); color: var(--texte); font: 17px/1.45 -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; }
main { max-width: 640px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; padding: max(12px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); }
header { display: flex; align-items: center; justify-content: space-between; }
h1 { font-size: 20px; letter-spacing: .3em; text-transform: uppercase; color: var(--lueur); font-weight: 500; margin: 4px 0; }
h2 { font-size: 16px; color: var(--lueur); font-weight: 500; }
button { font: inherit; color: inherit; cursor: pointer; }
.discret { background: none; border: 0; color: var(--pale); padding: 8px; }
.secondaire { background: var(--bulle-moi); border: 1px solid var(--bord); border-radius: 999px; padding: 10px 16px; color: var(--texte); }
#fil { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 12px 0; }
.bulle { max-width: 88%; padding: 10px 14px; border-radius: 16px; white-space: pre-wrap; overflow-wrap: anywhere; }
.bulle.moi { align-self: flex-end; background: var(--bulle-moi); }
.bulle.lui { align-self: flex-start; background: var(--bulle-lui); border: 1px solid var(--bord); }
.bulle.rappel { align-self: center; border: 1px solid var(--lueur); background: transparent; }
.bulle img { display: block; max-width: 100%; border-radius: 10px; margin-bottom: 6px; }
#etat { text-align: center; color: var(--pale); min-height: 1.5em; margin: 8px 0; }
#commandes { display: flex; align-items: center; justify-content: space-around; gap: 12px; margin: 8px 0 14px; }
#sphere { width: 132px; height: 132px; border-radius: 50%; border: 0; padding: 0; background: radial-gradient(circle at 50% 45%, #c9fff4 0, var(--lueur) 18%, #1c6b63 52%, #071a1a 72%); box-shadow: 0 0 40px #78ffe244; transition: transform .2s, box-shadow .2s; }
#sphere span { display: block; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle, transparent 55%, #78ffe222 70%, transparent 72%); }
body.ecoute #sphere { transform: scale(calc(1 + var(--niveau, 0) * .18)); box-shadow: 0 0 calc(50px + var(--niveau, 0) * 60px) #78ffe299; transition: transform .08s; }
body.reflechit #sphere { animation: tourne 1.6s linear infinite; filter: hue-rotate(40deg); }
body.parle #sphere { animation: pulse .5s ease-in-out infinite alternate; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes tourne { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.bascule { display: flex; align-items: center; gap: 6px; }
#ecrit { display: flex; gap: 8px; }
#texte { flex: 1; min-width: 0; background: var(--bulle-lui); border: 1px solid var(--bord); border-radius: 999px; color: var(--texte); padding: 10px 16px; font: inherit; }
dialog { background: #0b1419; color: var(--texte); border: 1px solid var(--bord); border-radius: 16px; max-width: min(560px, calc(100% - 32px)); }
dialog::backdrop { background: #000a; }
dialog ul { padding-left: 18px; }
.aide { color: var(--pale); font-size: 15px; }
@media (prefers-reduced-motion: reduce) { #sphere { animation: none !important; } }
dialog ol { padding-left: 20px; line-height: 1.45; }
dialog ol li { margin-bottom: 6px; }
.qr { display: block; width: min(260px, 70vw); margin: 8px auto 12px; background: #fff; border-radius: 12px; padding: 8px; }
.lien-bouton { display: inline-block; margin: 4px 0 12px; background: var(--bulle-moi); border: 1px solid var(--bord); border-radius: 999px; padding: 10px 16px; color: var(--texte); text-decoration: none; }
#telephone form { margin-top: 12px; }
.appli-mac header { padding-top: 22px; }