/* DOGGS controls, grounded in Discord's public button component (25 Oct 2026).
 * Verified reference: 8px radius, 32/40px sizes, medium weight, 1px border,
 * color/fill states, disabled opacity .5. DOGGS colors remain intentional.
 * No pointer interception, document scroll locks or changes to media behavior.
 */
html:root:root:root {
 --doggs-control-radius:8px;--doggs-control-height:40px;--doggs-control-compact:32px;
 --doggs-control-duration:200ms;--doggs-control-text:var(--text-primary,#e3e7ee);
 --doggs-control-fill:var(--bg-elevated,#1b1e24);
 --doggs-control-hover:color-mix(in srgb,var(--text-primary,#e3e7ee) 7%,var(--bg-elevated,#1b1e24));
 --doggs-control-active:color-mix(in srgb,var(--text-primary,#e3e7ee) 13%,var(--bg-elevated,#1b1e24));
}
/* Specificity deliberately wins over old lazy-loaded button skins. */
html:root:root:root body :is(.btn,.voice-button,.text-btn,.private-answer,.private-decline) {
 box-sizing:border-box;border-radius:var(--doggs-control-radius)!important;border-width:1px;
 font-size:14px;font-weight:500;line-height:18px;letter-spacing:normal;
 min-height:var(--doggs-control-height);padding:7px 15px;gap:8px;
 box-shadow:none;text-shadow:none;max-width:100%;overflow-wrap:anywhere;
 transition:background-color var(--doggs-control-duration) ease,color var(--doggs-control-duration) ease,border-color var(--doggs-control-duration) ease;
}
html:root:root:root body :is(.btn-secondary,.voice-button:not(.primary):not(.danger):not(.is-on):not([data-icon-off=true])) {
 background:var(--doggs-control-fill);color:var(--doggs-control-text);border-color:var(--border-subtle,#ffffff1f);
}
html:root:root:root body :is(.btn-primary,.voice-button.primary,.private-answer) {
 background:var(--accent-fill,#30b8ff)!important;color:var(--on-accent,#04131e)!important;border-color:transparent;
}
html:root:root:root body :is(.btn-ghost,.text-btn) {background:transparent;border-color:transparent;color:var(--doggs-control-text)}
html:root:root:root body .btn-danger {background:transparent;border-color:var(--border-subtle,#ffffff1f);color:var(--status-error,#ef8e91)}
html:root:root:root body :is(.btn,.voice-button,.gbtn,.icon-btn,.t-btn,.text-btn,.nav-item,.voice-channel,.mini-play,.mini-next,.mini-prev,.play,.chip,.obs-tab,.private-answer,.private-decline):active:not(:disabled):not([aria-disabled=true]) {
 scale:1;transform:none;box-shadow:none;
}
@media(hover:hover) and (pointer:fine) {
 html:root:root:root body :is(.btn-secondary,.btn-ghost,.text-btn,.voice-button:not(.primary):not(.danger):not(.is-on):not([data-icon-off=true])):hover:not(:disabled):not([aria-disabled=true]) {background:var(--doggs-control-hover);border-color:var(--border-strong,#ffffff3d);color:var(--doggs-control-text)}
 html:root:root:root body :is(.btn-primary,.voice-button.primary,.private-answer):hover:not(:disabled):not([aria-disabled=true]) {background:var(--accent-fill-hover,#65ceff)!important;border-color:transparent}
 html:root:root:root body .btn-danger:hover:not(:disabled):not([aria-disabled=true]) {background:color-mix(in srgb,var(--status-error,#ef8e91) 15%,var(--bg-elevated,#1b1e24));border-color:var(--status-error,#ef8e91)}
}
html:root:root:root body :is(.btn-secondary,.btn-ghost,.text-btn,.voice-button:not(.primary):not(.danger):not(.is-on):not([data-icon-off=true])):active:not(:disabled):not([aria-disabled=true]) {background:var(--doggs-control-active);border-color:var(--border-strong,#ffffff3d)}
html:root:root:root body :is(.btn-primary,.voice-button.primary,.private-answer):active:not(:disabled):not([aria-disabled=true]) {background:color-mix(in srgb,var(--accent-fill,#30b8ff) 84%,black)!important;border-color:transparent}
html:root:root:root body :is(.btn,.voice-button,.private-answer,.private-decline):is(:disabled,[aria-disabled=true]):not([aria-busy=true]) {opacity:.5;cursor:not-allowed;box-shadow:none}
html:root:root:root body :is(.btn,.voice-button,.private-answer,.private-decline)[aria-busy=true] {opacity:.8;cursor:progress}
html:root:root:root body :is(.btn,.voice-button,.text-btn,.gbtn,.icon-btn,.private-answer,.private-decline):focus-visible {outline:2px solid var(--focus-ring,#65ceff);outline-offset:3px}
/* Keep circular media controls and their explicit mute/deafen state. */
html:root:root:root body :is(.btn-icon,.voice-header>.voice-button,.voice-chat-bubble,.voice-start-mic) {padding:9px;width:40px;min-width:40px;height:40px;flex:none}
html:root:root:root body .voice-control-buttons>.voice-button:not(.voice-ptt) {border-radius:50%!important;width:48px;min-width:48px;height:48px;padding:11px}
html:root:root:root body .voice-button[data-icon-off=true] {color:var(--status-error,#ef8e91);background:color-mix(in srgb,var(--status-error,#ef8e91) 12%,var(--bg-surface,#101216));border-color:transparent}
html:root:root:root body .voice-button.danger {background:#c93643;color:#f3e8e9;border-color:transparent}
html:root:root:root body .voice-button.danger:active:not(:disabled) {background:#a62d38}
html:root:root:root body .btn[data-size=compact] {min-height:32px;padding:3px 11px}
html:root:root:root body .voice-settings .vs-sound-switch:before {transition:background-color 200ms ease}
html:root:root:root body .voice-settings .vs-sound-switch:after {transition:transform 200ms ease;background:#e7e9ee}
@media(pointer:coarse),(max-width:760px) {
 html:root:root:root {--doggs-control-height:44px}
 html:root:root:root body :is(.btn-icon,.voice-header>.voice-button,.voice-chat-bubble,.voice-start-mic) {width:44px;min-width:44px;height:44px}
 html:root:root:root body .btn[data-size=compact] {min-height:44px}
}
@media(prefers-reduced-motion:reduce) {
 html:root:root:root body :is(.btn,.voice-button,.text-btn,.private-answer,.private-decline),
 html:root:root:root body .voice-settings .vs-sound-switch:before,
 html:root:root:root body .voice-settings .vs-sound-switch:after {transition:none!important}
}
@media(forced-colors:active) {
 html:root:root:root body :is(.btn,.voice-button) {forced-color-adjust:auto;border:1px solid ButtonText}
}