{# Takoma Voice — Floating Mic-Button + Modal (v1.13.0)
   Position: links neben dem orangenen "+"-Quick-Actions-FAB.
   Design: konsistent mit Takoma-Dark-Theme (--brand-blue, --brand-deep).
#}
<style>
  /* ====== Mic-FAB — links vom orangenen Plus-Button (halb so groß) ====== */
  .voice-fab {
    position: fixed;
    bottom: 38px;         /* vertikal zentriert zum 56px Plus-Button */
    right: 88px;          /* 24px Rand + 56px Plus + 8px Gap */
    width: 28px;          /* halb so groß wie Plus (56px) */
    height: 28px;
    border-radius: 9999px;
    background: linear-gradient(135deg, #356692 0%, #284e72 100%);
    color: #fafafa;
    border: none;
    box-shadow: 0 4px 12px rgba(53, 102, 146, 0.40);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    z-index: 9999;
    transition: transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 160ms;
    user-select: none;
    padding: 0;
    line-height: 1;
  }
  .voice-fab:hover {
    transform: translateY(-2px) scale(1.08);
    box-shadow: 0 6px 16px rgba(53, 102, 146, 0.65);
  }
  .voice-fab:active { transform: scale(0.92); }

  /* AKTIV-Modus: Button wird ~2× so groß + intensiv rot + starker Pulse. */
  .voice-fab.listening {
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    animation: voicePulse 1.0s ease-in-out infinite;
    transform: scale(1.9);
    font-size: 18px;
  }
  .voice-fab.listening:hover {
    transform: scale(2.0);
  }
  @keyframes voicePulse {
    0%, 100% {
      box-shadow: 0 4px 12px rgba(220, 38, 38, 0.70),
                  0 0 0 0 rgba(220, 38, 38, 0.55);
    }
    50% {
      box-shadow: 0 4px 12px rgba(220, 38, 38, 0.70),
                  0 0 0 18px rgba(220, 38, 38, 0);
    }
  }

  /* ===== Status-Label links vom Button — nur sichtbar wenn aktiv ===== */
  .voice-status-pill {
    position: fixed;
    bottom: 44px;
    right: 130px;
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    color: #fff;
    padding: 8px 14px 8px 28px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.45);
    z-index: 9998;
    opacity: 0;
    transform: translateX(20px);
    pointer-events: none;
    transition: opacity 200ms, transform 200ms;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
  }
  .voice-status-pill::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    animation: voiceDotPulse 1.0s ease-in-out infinite;
  }
  .voice-status-pill.visible {
    opacity: 1;
    transform: translateX(0);
  }
  @keyframes voiceDotPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
  }

  /* ===== Roter Bildschirm-Rand-Indikator (subtil aber unübersehbar) ===== */
  .voice-edge-indicator {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9997;
    box-shadow: inset 0 0 0 4px rgba(220, 38, 38, 0);
    transition: box-shadow 300ms ease-out;
  }
  .voice-edge-indicator.active {
    animation: voiceEdgePulse 1.4s ease-in-out infinite;
  }
  @keyframes voiceEdgePulse {
    0%, 100% { box-shadow: inset 0 0 0 3px rgba(220, 38, 38, 0.6); }
    50%      { box-shadow: inset 0 0 0 6px rgba(220, 38, 38, 0.9); }
  }

  /* Tablet-Mode: skaliert mit 64px Plus-Button → Mic bleibt halb (32px) */
  body.tablet-mode .voice-fab {
    width: 32px; height: 32px; right: 96px; bottom: 40px;
    font-size: 16px;
  }

  /* ====== Modal-Overlay (v1.16.1: permanent unsichtbar) ====== */
  /* Click auf den Mic-Button startet Aufnahme silent — kein Sichtfenster mehr.
     !important verhindert dass irgendein Legacy-JS-Aufruf das Fenster wieder
     öffnet (auch nicht via classList.add('open')). */
  .voice-modal,
  .voice-modal.open {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .voice-modal-body {
    background: linear-gradient(180deg, #1c1c1c 0%, #151515 100%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    padding: 28px 32px;
    width: min(560px, 92vw);
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
    color: #e5e5e5;
  }

  .voice-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #add5f4;                  /* --brand-blue-light */
    margin: 0 0 12px;
    font-weight: 600;
  }
  .voice-title::before {
    content: "🎤";
    font-size: 16px;
  }

  .voice-status {
    font-size: 20px;
    margin: 0 0 18px;
    color: #fafafa;
    min-height: 28px;
    font-weight: 500;
    line-height: 1.4;
  }

  .voice-wave {
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: end;
    height: 40px;
    margin: 10px 0 16px;
    opacity: 0.5;
    transition: opacity 200ms;
  }
  .voice-modal.listening .voice-wave { opacity: 1; }
  .voice-wave-bar {
    width: 4px;
    background: linear-gradient(180deg, #f2581b 0%, #d44610 100%);
    border-radius: 2px;
    height: 12px;
    transition: height 0.1s ease;
  }
  .voice-modal.listening .voice-wave-bar {
    animation: waveAnim 0.7s ease-in-out infinite;
  }
  .voice-wave-bar:nth-child(2) { animation-delay: 0.10s !important; }
  .voice-wave-bar:nth-child(3) { animation-delay: 0.20s !important; }
  .voice-wave-bar:nth-child(4) { animation-delay: 0.30s !important; }
  .voice-wave-bar:nth-child(5) { animation-delay: 0.40s !important; }
  @keyframes waveAnim {
    0%, 100% { height: 12px; }
    50%      { height: 36px; }
  }

  .voice-transcript {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(53, 102, 146, 0.35);
    border-left-width: 3px;
    border-left-color: #356692;
    padding: 14px 18px;
    border-radius: 10px;
    font-family: 'SF Mono', Menlo, monospace;
    font-size: 15px;
    color: #fafafa;
    min-height: 52px;
    margin-bottom: 16px;
    line-height: 1.5;
  }
  .voice-transcript.empty {
    color: rgba(255, 255, 255, 0.35);
    font-style: italic;
  }

  .voice-result {
    margin-top: 14px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    display: none;
    line-height: 1.5;
  }
  .voice-result.success {
    background: rgba(34, 197, 94, 0.12);
    color: #86efac;
    border-left: 3px solid #22c55e;
    display: block;
  }
  .voice-result.warn {
    background: rgba(242, 88, 27, 0.12);
    color: #fcc09c;
    border-left: 3px solid #f2581b;
    display: block;
  }
  .voice-result.error {
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
    border-left: 3px solid #ef4444;
    display: block;
  }

  .voice-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
  }
  .voice-btn {
    flex: 1;
    min-width: 110px;
    padding: 12px 18px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 160ms;
    text-align: center;
    user-select: none;
    color: #fafafa;
    letter-spacing: 0.02em;
  }
  .voice-btn-primary {
    background: linear-gradient(135deg, #356692 0%, #284e72 100%);
    box-shadow: 0 4px 12px rgba(53, 102, 146, 0.35);
  }
  .voice-btn-primary:hover {
    background: linear-gradient(135deg, #3e76a8 0%, #305a85 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(53, 102, 146, 0.50);
  }
  .voice-btn-confirm {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.35);
  }
  .voice-btn-confirm:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(22, 163, 74, 0.50);
  }
  .voice-btn-cancel {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    color: #d4d4d4;
  }
  .voice-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fafafa;
  }

  .voice-help-link {
    display: inline-block;
    margin-top: 16px;
    color: #add5f4;
    font-size: 13px;
    text-decoration: none;
    border-bottom: 1px dashed rgba(173, 213, 244, 0.4);
    padding-bottom: 1px;
  }
  .voice-help-link:hover { color: #c9e2f7; border-bottom-style: solid; }

  .voice-footer-meta {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  /* Mobile */
  @media (max-width: 640px) {
    .voice-fab { right: 80px; width: 50px; height: 50px; font-size: 22px; }
    .voice-modal-body { padding: 22px 18px; border-radius: 14px; }
    .voice-status { font-size: 17px; }
    .voice-actions { flex-direction: column; }
    .voice-btn { width: 100%; }
  }
</style>

<button class="voice-fab" id="voice-fab"
        title="Sprachsteuerung — Klick = Start/Stop (Alt+V)"
        aria-label="Sprachsteuerung aktivieren">
  🎤
</button>

<!-- Status-Pill — wird nur im Aktiv-Modus eingeblendet -->
<div class="voice-status-pill" id="voice-status-pill">Höre zu …</div>

<!-- Bildschirm-Rand-Indikator (unübersehbar wenn aktiv) -->
<div class="voice-edge-indicator" id="voice-edge-indicator"></div>

<div class="voice-modal" id="voice-modal" role="dialog" aria-modal="true" aria-labelledby="voice-status">
  <div class="voice-modal-body">
    <div class="voice-title">Takoma Voice</div>

    <div class="voice-status" id="voice-status">
      Drücke <strong>Sprechen</strong> oder halte den Mic-Knopf gedrückt.
    </div>

    <div class="voice-wave" id="voice-wave" aria-hidden="true">
      <div class="voice-wave-bar"></div>
      <div class="voice-wave-bar"></div>
      <div class="voice-wave-bar"></div>
      <div class="voice-wave-bar"></div>
      <div class="voice-wave-bar"></div>
    </div>

    <div class="voice-transcript empty" id="voice-transcript">
      …warte auf deinen Befehl
    </div>

    <div class="voice-result" id="voice-result"></div>

    <div class="voice-actions" id="voice-actions" style="display:none;">
      <button type="button" class="voice-btn voice-btn-confirm" id="voice-confirm-btn">
        ✓ Ausführen
      </button>
      <button type="button" class="voice-btn voice-btn-cancel" id="voice-cancel-btn">
        ✗ Abbrechen
      </button>
    </div>

    <div class="voice-actions" id="voice-actions-default">
      <button type="button" class="voice-btn voice-btn-primary" id="voice-record-btn">
        🎤 Sprechen
      </button>
      <button type="button" class="voice-btn voice-btn-cancel" id="voice-close-btn">
        Schließen
      </button>
    </div>

    <a class="voice-help-link" href="/voice/help">→ Alle Sprachbefehle anzeigen</a>

    <div class="voice-footer-meta">
      Takoma Voice · v1.13.0 · DSGVO-konform · Sprache bleibt auf dem Gerät
    </div>
  </div>
</div>

<script src="/static/voice.js"></script>