/* Load after existing chat styles. Uses frozen-source tokens, not invented theme colors. */
.chat-compose:has(> .chat-voice) { flex-wrap: wrap; }
.chat-compose > .chat-voice {
    flex: 0 0 100%;
    min-inline-size: 0;
    max-inline-size: 100%;
    box-sizing: border-box;
    display: grid;
    gap: 8px;
    padding-block: 8px 2px;
    border-block-start: 1px solid var(--border-color);
    background: var(--surface-raised);
    color: var(--text);
    text-align: start;
}
.chat-voice .chat-voice-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-inline-size: 0; }
.chat-compose .chat-voice button,
.chat-voice-player a {
    box-sizing: border-box;
    min-inline-size: 44px;
    min-block-size: 44px;
    max-inline-size: 100%;
    block-size: auto;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-secondary);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
    cursor: pointer;
    touch-action: manipulation;
}
.chat-compose .chat-voice [data-voice-send] { border-color: var(--btn-bg-primary); }
.chat-compose .chat-voice button:disabled { cursor: wait; opacity: .65; }
.chat-compose .chat-voice button:focus-visible,
.chat-voice-player a:focus-visible,
.chat-voice audio:focus-visible,
.chat-voice-player audio:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.chat-voice [data-voice-status] { color: var(--text-secondary); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.chat-voice [data-voice-elapsed] { justify-self: start; font-variant-numeric: tabular-nums; font-size: 14px; color: var(--text); }
.chat-voice [data-voice-preview],
.chat-voice-player { display: grid; gap: 6px; min-inline-size: 0; max-inline-size: 100%; }
.chat-voice audio,
.chat-voice-player audio { display: block; inline-size: 100%; min-inline-size: 0; max-inline-size: 100%; block-size: 44px; }
.chat-voice-player { inline-size: min(300px, 100%); }
.chat-voice-player a { justify-self: start; display: inline-flex; align-items: center; text-decoration: underline; font-size: 12px; }
.chat-compose .chat-voice [hidden] { display: none !important; }
@media (max-width: 400px) {
    .chat-compose .chat-voice-actions > button { flex: 1 1 120px; }
}
@media (forced-colors: active) {
    .chat-compose .chat-voice button, .chat-voice-player a { border: 1px solid ButtonText; }
}