.stt-enabled {
  position: relative;
}

.stt-enabled span.interim {
        font-style: italic;
}

stt-mic {
 position: absolute;
 bottom: 10px;
 right: 5px;
}

.stt-enabled .status {

 position: absolute; 
bottom: 20px; 
left: 10px; 

}

      :root {
        --bg: #f8fafc;
        --card: #ffffff;
        --text: #1e293b;
        --muted: #64748b;
        --border: #e2e8f0;
        --primary: #6366f1;
      }
      @media (prefers-color-scheme: dark) {
        :root {
          --bg: #0f172a;
          --card: #1e293b;
          --text: #f1f5f9;
          --muted: #94a3b8;
          --border: #334155;
        }
      }

.transcript {
        background: var(--bg); border: 1px solid var(--border);
        border-radius: 8px; padding: 0.75rem 1rem;
        min-height: 48px; font-size: 0.9rem; margin-top: 0.75rem;
        white-space: pre-wrap;
}

.transcript .interim { color: var(--muted); font-style: italic; }

.status {
        display: flex; align-items: center; gap: 0.5rem;
        margin-top: 0.5rem; font-size: 0.8rem; color: var(--muted);
        z-index:1;
}

.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted);}

.dot.listening { background: #ef4444; animation: blink 1s infinite; }


@keyframes blink { 50% { opacity: 0.4; } }