/* ---------------------------------------------------------------------------
   ELOTEC-Sprachassistent.

   Eigene Token, auf die Markenpalette gemappt: das Fenster ist dunkelblau wie
   der Footer, damit es sich auf der hellen Seite klar als eigene Flaeche liest.
   Akzent auf dunklem Grund ist das helle Blau (--accent-on-dark), nicht das
   kraeftige Blau der Seite: auf Dunkelblau haette das zu wenig Kontrast.

   Zustaende ueber [data-zustand] am Wurzelelement:
   bereit, aufnahme, denkt, spricht, beendet.
--------------------------------------------------------------------------- */

.assi{
  --tief:#0b1f33;
  --nacht:#102a43;
  --rauch:#17334f;
  --weiss:#ffffff;
  --nebel:rgba(255,255,255,.78);
  --nebel-schwach:rgba(255,255,255,.55);
  --licht:#93c5fd;
  --licht-weich:rgba(147,197,253,.14);
  --licht-stark:rgba(147,197,253,.52);
  --rand:1px solid rgba(255,255,255,.16);
  --takt:cubic-bezier(.22,.61,.36,1);
  /* Wird vom Skript gesetzt, solange das Cookie-Banner unten steht. */
  --assi-unten:0px;

  position:fixed;
  right:max(1rem, env(safe-area-inset-right));
  bottom:calc(max(1rem, env(safe-area-inset-bottom)) + var(--assi-unten));
  z-index:65;
  font-family:var(--font-body);
  transition:bottom .3s var(--takt);
}

/* display:flex weiter unten wuerde das hidden-Attribut sonst aushebeln. */
.assi [hidden]{display:none !important;}

/* --- Startknopf ------------------------------------------------ */

.assi__start{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  /* 44px, damit der Daumen ihn sicher trifft. */
  min-height:44px;
  padding:.75rem 1.1rem .75rem .9rem;
  border-radius:999px;
  border:1px solid var(--accent);
  background:var(--accent);
  color:#fff;
  font:600 .875rem/1 var(--font-body);
  letter-spacing:.01em;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(16,42,67,.35);
  transition:background .3s var(--takt), box-shadow .3s var(--takt), transform .3s var(--takt);
}
.assi__start:hover{
  background:var(--accent-hover);
  box-shadow:0 14px 38px rgba(16,42,67,.45);
}
.assi__start:active{transform:scale(.97);}
.assi[data-offen] .assi__start{
  opacity:0;
  pointer-events:none;
  transform:translateY(.5rem);
}

/* Kennzeichnung am Startknopf: vor dem Klick soll klar sein, was dahintersteckt. */
.assi__marke{
  padding:.15rem .45rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.55);
  font:600 .625rem/1 var(--font-body);
  letter-spacing:.12em;
  text-transform:uppercase;
}

.assi__welle{
  display:inline-flex;
  align-items:center;
  gap:2px;
  height:1.1rem;
}
.assi__welle i{
  width:3px;
  border-radius:2px;
  background:#fff;
  height:40%;
  animation:assi-welle 1.6s var(--takt) infinite;
}
.assi__welle i:nth-child(2){animation-delay:.2s;}
.assi__welle i:nth-child(3){animation-delay:.4s;}
.assi__welle i:nth-child(4){animation-delay:.6s;}
@keyframes assi-welle{
  0%,100%{height:35%;}
  50%{height:100%;}
}

/* --- Dialog ---------------------------------------------------- */

.assi__dialog{
  /* Das Fenster ist ein <section>. styles.css gibt jedem Abschnitt der Seite
     grosszuegigen Innenabstand (96px, am Handy 64px); ohne diese Ruecksetzung
     klafft oben im Fenster eine leere Flaeche. */
  padding:0;
  position:fixed;
  right:max(1rem, env(safe-area-inset-right));
  bottom:calc(max(1rem, env(safe-area-inset-bottom)) + var(--assi-unten));
  width:min(25.5rem, calc(100vw - 2rem));
  max-height:min(44rem, calc(100dvh - 2rem));
  display:flex;
  flex-direction:column;
  color:var(--weiss);
  background:var(--nacht);
  border:var(--rand);
  border-radius:1.25rem;
  box-shadow:0 30px 80px rgba(11,31,51,.55);
  overflow:hidden;
  animation:assi-auf .45s var(--takt);
}
@keyframes assi-auf{
  from{opacity:0;transform:translateY(1rem) scale(.98);}
  to{opacity:1;transform:none;}
}

.assi__kopf{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  padding:1.15rem 1.15rem .85rem;
  border-bottom:var(--rand);
}
.assi__kicker{
  margin:0 0 .35rem;
  font:600 .68rem/1 var(--font-body);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--licht);
}
.assi__titel{
  font-family:var(--font-display);
  font-weight:400;
  font-size:1.6rem;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--weiss);
}

.assi__kopfknoepfe{
  display:flex;
  gap:.3rem;
  flex-shrink:0;
}
.assi__icon{
  width:2.4rem;
  height:2.4rem;
  display:inline-grid;
  place-items:center;
  border-radius:999px;
  border:1px solid transparent;
  background:transparent;
  color:var(--nebel);
  cursor:pointer;
  transition:color .3s var(--takt), border-color .3s var(--takt), background .3s var(--takt);
}
.assi__icon svg{width:1.1rem;height:1.1rem;}
.assi__icon:hover{color:var(--weiss);border-color:rgba(255,255,255,.22);}
.assi__icon[aria-pressed="true"]{color:var(--licht);}
.assi__icon[aria-pressed="true"] .assi__ton-aus{display:none;}
.assi__icon[aria-pressed="false"] .assi__ton-an{display:none;}
/* Freihaendig-Schalter: durchgestrichenes Mikrofon, solange es aus ist. */
.assi__icon[aria-pressed="true"] .assi__frei-aus{display:none;}
.assi__icon[aria-pressed="false"] .assi__frei-an{display:none;}
/* Ein dauerhaft offenes Mikrofon darf man nicht uebersehen: der Schalter
   traegt dann eine eigene Flaeche, nicht nur eine andere Farbe. */
.assi[data-frei="ja"] [data-assi-frei]{
  background:var(--licht-weich);
  border-color:var(--licht-stark);
  color:var(--licht);
}

/* --- Knoepfe im Fenster ---------------------------------------- */

.assi__knopf{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  min-height:44px;
  padding:.7rem 1.25rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.32);
  background:transparent;
  color:var(--weiss);
  font:500 .875rem/1.2 var(--font-body);
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  transition:background .25s var(--takt), color .25s var(--takt), border-color .25s var(--takt), transform .15s ease-out;
}
.assi__knopf:hover{border-color:var(--licht);background:var(--licht-weich);}
.assi__knopf:active{transform:scale(.97);}
.assi__knopf--voll{
  background:var(--weiss);
  border-color:var(--weiss);
  color:var(--nacht);
  font-weight:600;
}
.assi__knopf--voll:hover{background:var(--licht);border-color:var(--licht);color:var(--tief);}
.assi__knopf svg{width:1.05em;height:1.05em;flex:none;}

/* --- Sprachwahl ------------------------------------------------ */

.assi__sprachen{
  display:flex;
  gap:.3rem;
  padding:.65rem 1.15rem 0;
}
.assi__sprachen button{
  min-height:32px;
  padding:.3rem .7rem;
  border-radius:999px;
  border:var(--rand);
  background:transparent;
  color:var(--nebel);
  font:600 .7rem/1 var(--font-body);
  letter-spacing:.1em;
  cursor:pointer;
  transition:color .3s var(--takt), border-color .3s var(--takt), background .3s var(--takt);
}
.assi__sprachen button:hover{color:var(--weiss);}
.assi__sprachen button[aria-pressed="true"]{
  color:var(--nacht);
  background:var(--licht);
  border-color:var(--licht);
}

/* --- Schritte -------------------------------------------------- */

.assi__schritt{
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:1rem 1.15rem 1.15rem;
  gap:.85rem;
  scrollbar-width:thin;
}

.assi__hinweis{
  font-size:.93rem;
  line-height:1.55;
  color:var(--nebel);
  margin:0;
  text-wrap:pretty;
}
.assi__hinweis strong{color:var(--weiss);font-weight:600;}
.assi__hinweis a{color:var(--licht);border-bottom:1px solid currentColor;}

.assi__aktionen{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  padding-top:.15rem;
}

.assi__details{
  border-top:var(--rand);
  padding-top:.8rem;
  font-size:.82rem;
  color:var(--nebel-schwach);
}
.assi__details summary{
  cursor:pointer;
  min-height:32px;
  display:flex;
  align-items:center;
  color:var(--nebel-schwach);
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.assi__details summary:hover{color:var(--weiss);}
.assi__recht{
  margin-top:.8rem;
  max-height:14rem;
  overflow-y:auto;
  padding-right:.5rem;
  line-height:1.55;
}
.assi__recht p{margin-bottom:.7em;}
.assi__recht strong{color:rgba(255,255,255,.88);font-weight:600;}
.assi__recht a{color:var(--licht);}

/* --- Gespraech ------------------------------------------------- */

.assi__zustand{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin:0;
  font:600 .68rem/1 var(--font-body);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--nebel-schwach);
}
.assi__punkt{
  width:.5rem;
  height:.5rem;
  border-radius:999px;
  background:var(--nebel-schwach);
  flex-shrink:0;
}
.assi[data-zustand="aufnahme"] .assi__punkt,
.assi[data-zustand="spricht"] .assi__punkt{background:var(--licht);}
.assi[data-zustand="aufnahme"] .assi__punkt{animation:assi-puls 1.2s ease-in-out infinite;}
.assi[data-zustand="denkt"] .assi__punkt{background:var(--weiss);opacity:.6;}
.assi[data-zustand="aufnahme"] .assi__zustand,
.assi[data-zustand="spricht"] .assi__zustand{color:var(--weiss);}

.assi__verlauf{
  flex:1 1 auto;
  min-height:9rem;
  max-height:22rem;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  display:flex;
  flex-direction:column;
  gap:.55rem;
  padding-right:.25rem;
  scrollbar-width:thin;
  overscroll-behavior:contain;
}

.assi__blase{
  max-width:88%;
  padding:.65rem .9rem;
  border-radius:1rem;
  font-size:.94rem;
  line-height:1.5;
  overflow-wrap:anywhere;
  animation:assi-blase .35s var(--takt);
}
@keyframes assi-blase{
  from{opacity:0;transform:translateY(.4rem);}
  to{opacity:1;transform:none;}
}
.assi__blase--ki{
  align-self:flex-start;
  background:var(--rauch);
  border:var(--rand);
  border-bottom-left-radius:.3rem;
}
.assi__blase--ich{
  align-self:flex-end;
  background:var(--licht-weich);
  border:1px solid var(--licht-stark);
  border-bottom-right-radius:.3rem;
}
.assi__blase--wartet{
  color:var(--nebel-schwach);
  animation:assi-puls 1.2s ease-in-out infinite;
}
@keyframes assi-puls{
  0%,100%{opacity:.55;}
  50%{opacity:1;}
}

.assi__status{
  margin:0;
  min-height:2.6em;
  text-align:center;
  font-size:.82rem;
  line-height:1.4;
  color:var(--nebel-schwach);
  text-wrap:balance;
}

.assi__steuer{
  display:grid;
  place-items:center;
  padding-block:.15rem;
}
.assi__mikro{
  --pegel:0;
  position:relative;
  width:4.4rem;
  height:4.4rem;
  display:grid;
  place-items:center;
  border-radius:999px;
  border:1px solid var(--licht);
  background:radial-gradient(circle at 50% 40%, var(--licht-weich), transparent 70%) var(--tief);
  color:var(--weiss);
  cursor:pointer;
  box-shadow:0 0 calc(16px + var(--pegel) * 64px) var(--licht-stark);
  transition:background .35s var(--takt), color .35s var(--takt), box-shadow .12s linear, transform .3s var(--takt);
}
.assi__mikro:hover{transform:scale(1.04);}
.assi__mikro svg{width:1.7rem;height:1.7rem;}
.assi__stop-ikon{display:none;}
.assi[data-zustand="aufnahme"] .assi__mikro{background:var(--licht);color:var(--tief);}
.assi[data-zustand="aufnahme"] .assi__mikro::before{
  content:"";
  position:absolute;
  inset:-.35rem;
  border-radius:inherit;
  border:1px solid var(--licht);
  animation:assi-ring 1.6s ease-out infinite;
}
@keyframes assi-ring{
  from{transform:scale(.9);opacity:.9;}
  to{transform:scale(1.35);opacity:0;}
}
.assi[data-zustand="spricht"] .assi__mikro-ikon{display:none;}
.assi[data-zustand="spricht"] .assi__stop-ikon{display:block;}
.assi[data-zustand="spricht"] .assi__mikro{animation:assi-atmen 2.2s ease-in-out infinite;}
@keyframes assi-atmen{
  0%,100%{box-shadow:0 0 16px var(--licht-weich);}
  50%{box-shadow:0 0 48px var(--licht-stark);}
}
.assi__denkt{
  position:absolute;
  inset:-3px;
  border-radius:inherit;
  border:2px solid transparent;
  border-top-color:var(--licht);
  opacity:0;
}
.assi[data-zustand="denkt"] .assi__mikro{color:var(--nebel-schwach);cursor:progress;}
.assi[data-zustand="denkt"] .assi__denkt{opacity:1;animation:assi-drehen .9s linear infinite;}
@keyframes assi-drehen{to{transform:rotate(360deg);}}

.assi__schreiben{
  display:flex;
  gap:.4rem;
  align-items:center;
  border:var(--rand);
  border-radius:999px;
  padding:.25rem .25rem .25rem 1rem;
  background:rgba(255,255,255,.06);
  transition:border-color .3s var(--takt);
}
.assi__schreiben:focus-within{border-color:var(--licht-stark);}
.assi__schreiben input{
  flex:1 1 auto;
  min-width:0;
  border:0;
  background:transparent;
  color:var(--weiss);
  /* 16px, sonst zoomt iOS beim Fokus ins Feld und schiebt das Fenster aus dem Bild. */
  font:400 1rem/1.4 var(--font-body);
  outline:none;
}
.assi__schreiben input::placeholder{color:var(--nebel-schwach);}

.assi__beenden{
  align-self:center;
  min-height:38px;
  padding:.45rem 1.1rem;
  border-radius:999px;
  border:var(--rand);
  background:transparent;
  color:var(--nebel-schwach);
  font:500 .8rem/1 var(--font-body);
  cursor:pointer;
  transition:color .3s var(--takt), border-color .3s var(--takt);
}
.assi__beenden:hover{color:var(--weiss);border-color:rgba(255,255,255,.3);}

.assi__fuss{
  margin:0;
  font-size:.74rem;
  line-height:1.4;
  color:var(--nebel-schwach);
  text-align:center;
}
.assi__fuss a{color:var(--licht);}
.assi__fuss a:hover{color:var(--weiss);}

/* --- Kontaktkarte: alles Weitere macht Roland ------------------- */

.assi__karte{
  align-self:stretch;
  padding:.9rem 1rem 1rem;
  border-radius:.9rem;
  border:1px solid var(--licht-stark);
  background:var(--rauch);
  animation:assi-blase .35s var(--takt);
}
.assi__kartentitel{
  margin:0;
  font-size:.8rem;
  line-height:1.45;
  color:var(--licht);
  text-wrap:pretty;
}
.assi__kartenname{
  margin:.35rem 0 0;
  font-family:var(--font-display);
  font-weight:400;
  font-size:1.35rem;
  line-height:1.1;
  color:var(--weiss);
}
.assi__kartengrund{
  margin:.25rem 0 0;
  font-size:.78rem;
  color:var(--nebel-schwach);
}
.assi__kartenknoepfe{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top:.85rem;
}
.assi__kartenknoepfe .assi__knopf{flex:1 1 11rem;}

/* --- Mobil: Schublade von unten --------------------------------- */

@media (max-width:40rem){
  .assi{
    right:0;
    left:0;
    bottom:calc(env(safe-area-inset-bottom) + var(--assi-unten));
    display:flex;
    justify-content:flex-end;
    padding:0 .75rem .75rem;
    pointer-events:none;
  }
  .assi > *{pointer-events:auto;}
  .assi__start{
    padding:.7rem .95rem .7rem .8rem;
    font-size:.82rem;
  }
  .assi__dialog{
    right:0;
    left:0;
    bottom:0;
    width:100%;
    max-height:90dvh;
    border-radius:1.25rem 1.25rem 0 0;
    border-bottom:0;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .assi__kopf,.assi__sprachen,.assi__schritt{padding-inline:1rem;}
  .assi__verlauf{max-height:min(46dvh,20rem);}
  .assi__aktionen .assi__knopf{flex:1 1 9rem;}
  .assi__kartenknoepfe .assi__knopf{flex:1 1 100%;}
}

/* Sehr schmale Geraete: der Startknopf traegt nur noch das Nötigste. */
@media (max-width:22rem){
  .assi__starttext{font-size:.78rem;}
  .assi__marke{display:none;}
}

/* --- Nutzerpraeferenzen ---------------------------------------- */

@media (prefers-reduced-motion:reduce){
  .assi,.assi__dialog,.assi__blase,.assi__karte{animation:none;transition:none;}
  .assi__welle i,
  .assi__punkt,
  .assi__blase--wartet,
  .assi[data-zustand="aufnahme"] .assi__mikro::before,
  .assi[data-zustand="spricht"] .assi__mikro,
  .assi[data-zustand="denkt"] .assi__denkt{animation:none;}
  .assi__mikro:hover,.assi__start:active,.assi__knopf:active{transform:none;}
}

@media (prefers-contrast:more){
  .assi{--nebel:rgba(255,255,255,.95);--nebel-schwach:rgba(255,255,255,.85);--rand:1px solid rgba(255,255,255,.5);}
  .assi__knopf{border-color:rgba(255,255,255,.7);}
}