.voice-connection { position: relative; margin-top: 4px; font-size: 11px; }
.voice-connection-toggle { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 2px 0; color: var(--text-muted, #aaa); background: none; border: 0; cursor: pointer; font: inherit; text-align: left; }
.voice-connection-toggle:hover { color: var(--text-normal, #fff); }
.voice-connection-toggle:focus-visible { outline: 2px solid #7aa7ff; outline-offset: 3px; border-radius: 2px; }
.voice-connection-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #8e9297; }
.voice-connection[data-status="good"] .voice-connection-dot { background: #43b581; }
.voice-connection[data-status="fair"] .voice-connection-dot,
.voice-connection[data-status="connecting"] .voice-connection-dot,
.voice-connection[data-status="reconnecting"] .voice-connection-dot { background: #faa61a; }
.voice-connection[data-status="poor"] .voice-connection-dot { background: #f04747; }
.voice-connection[data-status="failed"] .voice-connection-dot { background: #f04747; }
.voice-connection-chevron { font-size: 14px; line-height: 9px; transition: transform .15s ease; }
.voice-connection-toggle[aria-expanded="true"] .voice-connection-chevron { transform: rotate(180deg); }
.voice-connection-details { position: absolute; z-index: 20; left: 0; bottom: calc(100% + 9px); box-sizing: border-box; width: 290px; max-width: calc(100vw - 24px); max-height: min(380px, calc(100vh - 24px)); overflow-y: auto; padding: 11px 13px; border: 1px solid var(--background-modifier-accent, #40444b); border-radius: 6px; background: var(--background-secondary, #2f3136); color: var(--text-normal, #eee); box-shadow: 0 6px 20px #0005; }
.voice-connection-details[hidden] { display: none; }
.voice-connection-heading { font-size: 12px; font-weight: 700; }
.voice-connection-explanation { margin: 5px 0 9px; font-size: 11px; line-height: 1.4; }
.voice-connection-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0; border-top: 1px solid var(--background-modifier-accent, #40444b); }
.voice-connection-row span:first-child { min-width: 0; }
.voice-connection-row span:last-child { flex: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.voice-connection-note { margin: 8px 0 0; color: var(--text-muted, #aaa); font-size: 10px; line-height: 1.45; }
@media (max-width: 340px) {
  .voice-connection-details { left: -8px; width: calc(100vw - 16px); padding: 9px 10px; }
}
