/* Sanad-Assistent — reiner Sprachbaustein.
   Nutzt die Tokens der Hauptseite, kein eigenes Farbsystem. */

.asst-huelle{
  position:fixed;z-index:90;
  inset-block-end:max(18px,env(safe-area-inset-bottom));
  inset-inline-end:max(18px,env(safe-area-inset-right));
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  max-width:calc(100vw - 36px);
}
html[dir="rtl"] .asst-huelle{align-items:flex-start}

.asst-leiste{display:flex;align-items:center;gap:8px}

/* ── Die Pille ───────────────────────────────────────────────── */
.asst-anstoss{
  position:relative;display:flex;align-items:center;gap:12px;
  background:var(--ink);color:#F3F6F4;
  border:1px solid rgba(230,235,233,.16);border-radius:99px;
  padding:6px 20px 6px 6px;cursor:pointer;font-family:inherit;
  font-size:14.5px;font-weight:600;letter-spacing:-.01em;
  box-shadow:0 18px 40px -18px rgba(12,30,43,.65);
  transition:transform .25s cubic-bezier(.2,.75,.2,1),box-shadow .25s,background .25s;
  touch-action:manipulation;
}
html[dir="rtl"] .asst-anstoss{padding:6px 6px 6px 20px}
.asst-anstoss:hover{transform:translateY(-2px);box-shadow:0 24px 48px -18px rgba(12,30,43,.75)}
.asst-anstoss:focus-visible{outline:2px solid var(--saffron);outline-offset:3px}
.asst-anstoss img{width:52px;height:52px;border-radius:99px;object-fit:cover;object-position:50% 22%;flex:none}
.asst-anstoss__text{white-space:nowrap}

/* Mikrofon-Plakette — zeigt ohne Worte, dass man reden kann */
.asst-anstoss__mik{
  position:absolute;inset-block-end:2px;inset-inline-start:42px;
  width:24px;height:24px;border-radius:99px;
  background:var(--saffron);color:#1A1206;
  display:grid;place-items:center;border:2px solid var(--ink);
}
html[dir="rtl"] .asst-anstoss__mik{inset-inline-start:auto;inset-inline-end:42px}
.asst-anstoss__mik svg{width:12px;height:12px;flex:none;max-width:12px;max-height:12px}
.asst-anstoss__mik::after{
  content:"";position:absolute;inset:-4px;border-radius:99px;
  border:2px solid var(--saffron);opacity:.55;
  animation:asstWelle 2.4s ease-out infinite;
}
@keyframes asstWelle{0%{transform:scale(.85);opacity:.55}70%,100%{transform:scale(1.5);opacity:0}}

/* ── Zustände ────────────────────────────────────────────────── */
.asst-huelle[data-zustand="verbindet"] .asst-anstoss__mik{animation:asstBlink 1.1s ease-in-out infinite}
@keyframes asstBlink{50%{opacity:.35}}

.asst-anstoss::before{
  content:"";position:absolute;inset-block-start:6px;inset-inline-start:6px;
  width:52px;height:52px;border-radius:99px;
  border:2px solid var(--saffron);opacity:0;transform:scale(.92);
  transition:opacity .3s,transform .3s;pointer-events:none;
}
.asst-huelle[data-zustand="hoert"] .asst-anstoss::before{
  opacity:1;transform:scale(1.06);animation:asstPuls 1.6s ease-in-out infinite;
}
@keyframes asstPuls{50%{transform:scale(1.14);opacity:.4}}

.asst-huelle[data-zustand="hoert"] .asst-anstoss,
.asst-huelle[data-zustand="spricht"] .asst-anstoss{background:var(--ink-2,#123244)}
.asst-huelle[data-zustand="hoert"] .asst-anstoss__mik::after,
.asst-huelle[data-zustand="spricht"] .asst-anstoss__mik::after{animation:none;opacity:0}

/* ── Antwortspur ─────────────────────────────────────────────── */
.asst-spur{
  max-width:min(340px,calc(100vw - 40px));
  background:var(--ink);color:var(--on-ink);
  border:1px solid rgba(230,235,233,.14);border-radius:12px 12px 2px 12px;
  padding:11px 15px;font-size:14.5px;line-height:1.5;
  box-shadow:0 20px 44px -24px rgba(12,30,43,.7);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  animation:asstRein .3s cubic-bezier(.2,.75,.2,1) both;
}
html[dir="rtl"] .asst-spur{border-radius:12px 12px 12px 2px}
.asst-spur[hidden]{display:none}
@keyframes asstRein{from{opacity:0;transform:translateY(8px)}}

/* ── WhatsApp, nur das Zeichen ───────────────────────────────── */
.asst-wa{
  flex:none;box-sizing:border-box;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:99px;color:#F3F6F4;text-decoration:none;
  background:var(--ink);border:1px solid rgba(230,235,233,.16);
  box-shadow:0 18px 40px -18px rgba(12,30,43,.65);
  transition:background .2s,transform .2s;touch-action:manipulation;
}
.asst-wa:hover{background:var(--ink-2,#123244);transform:translateY(-2px)}
.asst-wa svg{width:20px;height:20px;flex:none;max-width:20px;max-height:20px}
.asst-wa:focus-visible{outline:2px solid var(--saffron);outline-offset:3px}

@media (max-width:640px){
  .asst-huelle{inset-block-end:max(12px,env(safe-area-inset-bottom));inset-inline-end:12px;gap:8px}
  .asst-anstoss{font-size:13.5px;padding:5px 16px 5px 5px;gap:10px}
  html[dir="rtl"] .asst-anstoss{padding:5px 5px 5px 16px}
  .asst-anstoss img{width:44px;height:44px}
  .asst-anstoss::before{width:44px;height:44px;inset-block-start:5px;inset-inline-start:5px}
  .asst-anstoss__mik{width:20px;height:20px;inset-inline-start:34px}
  html[dir="rtl"] .asst-anstoss__mik{inset-inline-start:auto;inset-inline-end:34px}
  .asst-anstoss__mik svg{width:10px;height:10px;max-width:10px;max-height:10px}
  .asst-wa{width:38px;height:38px}
  .asst-wa svg{width:17px;height:17px;max-width:17px;max-height:17px}
  .asst-spur{font-size:13.5px;-webkit-line-clamp:2}
}

@media (prefers-reduced-motion:reduce){
  .asst-anstoss__mik::after,.asst-anstoss::before,.asst-spur{animation:none}
}