/* Hello Heidi · Mikrofon-Knopf im Chat. Nutzt die Neolight-Tokens der Seite (--bg, --accent, --muted, --out-s, --in). */
:is(.ug-comp, #conv .composer) .hh-mic {
  position: relative; flex: 0 0 auto; width: 44px; height: 44px; margin-left: auto; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--bg, #F7F6F4); color: var(--accent, #9E3A49);
  box-shadow: var(--out-s, 2px 2px 6px #E3DFDA, -2px -2px 6px #FFFFFF);
  transition: transform .2s cubic-bezier(.3,1.4,.5,1), box-shadow .3s, background-color .3s, color .3s;
  -webkit-tap-highlight-color: transparent;
}
:is(.ug-comp, #conv .composer) .hh-mic + .send { margin-left: 0 !important; }
:is(.ug-comp, #conv .composer) .hh-mic-zeit:not([hidden]) + .hh-mic { margin-left: 0; }
:is(.ug-comp, #conv .composer) .hh-mic:hover:not(:disabled) { transform: scale(1.06); }
:is(.ug-comp, #conv .composer) .hh-mic:active:not(:disabled) { transform: scale(.92); box-shadow: var(--in, inset 1.5px 1.5px 3.5px #E3DFDA, inset -1.5px -1.5px 3.5px #FFFFFF); }
:is(.ug-comp, #conv .composer) .hh-mic:focus-visible { outline: 2px solid var(--accent, #9E3A49); outline-offset: 3px; }
:is(.ug-comp, #conv .composer) .hh-mic-ico { position: relative; z-index: 1; display: grid; place-items: center; }

/* Ring, der mit der Lautstärke atmet */
:is(.ug-comp, #conv .composer) .hh-mic-ring {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0;
  background: color-mix(in srgb, var(--accent, #9E3A49) 22%, transparent);
  transform: scale(calc(1 + var(--hh-pegel, 0) * .55)); transition: transform .1s linear, opacity .2s;
}

/* verbindet */
:is(.ug-comp, #conv .composer)[data-mic="verbinde"] .hh-mic, :is(.ug-comp, #conv .composer)[data-mic="beendet"] .hh-mic { cursor: progress; }
:is(.ug-comp, #conv .composer)[data-mic="verbinde"] .hh-mic-ico { animation: hh-mic-warte 1s ease-in-out infinite; }

/* hört zu */
:is(.ug-comp, #conv .composer)[data-mic="hoert"] .hh-mic {
  background: var(--accent, #9E3A49); color: #fff;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--accent, #9E3A49) 30%, transparent);
}
:is(.ug-comp, #conv .composer)[data-mic="hoert"] .hh-mic-ring { opacity: 1; }
:is(.ug-comp, #conv .composer)[data-mic="hoert"] .hh-mic::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%; pointer-events: none;
  border: 1.5px solid color-mix(in srgb, var(--accent, #9E3A49) 45%, transparent);
  animation: hh-mic-puls 1.6s ease-out infinite;
}
:is(.ug-comp, #conv .composer)[data-mic="hoert"] textarea::placeholder { color: var(--accent, #9E3A49); opacity: .75; }

:is(.ug-comp, #conv .composer) .hh-mic-zeit {
  margin-left: auto; font: 600 14px/1 var(--sans, system-ui), sans-serif; font-variant-numeric: tabular-nums;
  color: var(--accent, #9E3A49); display: inline-flex; align-items: center; gap: 6px;
}
:is(.ug-comp, #conv .composer) .hh-mic-zeit[hidden] { display: none; }
:is(.ug-comp, #conv .composer) .hh-mic-zeit::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent, #9E3A49);
  animation: hh-mic-blink 1s steps(2, start) infinite;
}

:is(.ug-comp, #conv .composer) .hh-mic-hinweis {
  margin: 8px 4px 0; font: 13px/1.4 var(--sans, system-ui), sans-serif; color: var(--muted, #6A625D);
  animation: menuIn .16s ease-out;
}
:is(.ug-comp, #conv .composer) .hh-mic-hinweis[hidden] { display: none; }

@keyframes hh-mic-puls { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }
@keyframes hh-mic-warte { 50% { opacity: .35; } }
@keyframes hh-mic-blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  :is(.ug-comp, #conv .composer) .hh-mic::after, :is(.ug-comp, #conv .composer) .hh-mic-ico, :is(.ug-comp, #conv .composer) .hh-mic-zeit::before { animation: none !important; }
  :is(.ug-comp, #conv .composer) .hh-mic-ring { transition: none; }
}

/* Chatfenster (#conv .composer, A-20261020-03): Knopf und Uhr in der Zeile neben "Senden", Hinweis darunter ueber die ganze Breite */
#conv .composer .hh-mic { flex: 0 0 44px; align-self: flex-end; margin: 0 0 3px; }
#conv .composer .hh-mic-zeit { flex: none; align-self: center; margin: 0; }
#conv .composer .hh-mic-hinweis { flex: 1 1 100%; order: 10; margin: 2px 4px 0; }