/* Diktat-Taste im Chat-Eingabefeld. Nutzt die Seiten-Variablen (--green,
   --glass, --text...). Stil wie .phc-send (Chamfer, 48px), aber Icon-Button.
   Wird von diktat.js zwischen Textfeld und Senden-Button gesetzt. */
.phc-mic{
  flex:0 0 auto;width:48px;height:48px;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  color:rgb(var(--green));background:rgba(var(--green),0.06);
  border:1px solid rgba(var(--green),0.34);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  transition:box-shadow .15s,background .15s,color .15s,border-color .15s;
}
.phc-mic svg{width:22px;height:22px;display:block}
.phc-mic:hover{background:rgba(var(--green),0.14);box-shadow:0 0 18px rgba(var(--green),0.35)}
.phc-mic:disabled{cursor:not-allowed}

/* Aufnahme: rot, pulsierend, deutlich sichtbar */
.phc-mic.rec{
  color:#15181e;background:#bf616a;border-color:#bf616a;
  animation:phcmicpulse 1.3s ease-in-out infinite;
}
@keyframes phcmicpulse{
  0%,100%{box-shadow:0 0 0 0 rgba(191,97,106,0.55)}
  50%{box-shadow:0 0 0 7px rgba(191,97,106,0)}
}

/* Transkription laeuft: Icon ausblenden, Spinner zeigen */
.phc-mic.busy{color:rgb(var(--green));background:rgba(var(--green),0.06)}
.phc-mic.busy svg{display:none}
.phc-mic.busy::after{
  content:"";width:18px;height:18px;border-radius:50%;
  border:2px solid rgba(var(--green),0.25);border-top-color:rgb(var(--green));
  animation:phcmicspin .7s linear infinite;
}
@keyframes phcmicspin{to{transform:rotate(360deg)}}

/* dezente Fehlermeldung unter dem Eingabefeld */
.phc-mic-flash{
  font-family:var(--font-ui);font-size:13px;color:#d08770;
  padding:0 22px 12px;opacity:0;max-height:0;overflow:hidden;
  transition:opacity .2s;
}
.phc-mic-flash.show{opacity:1;max-height:60px}