.ombox-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    --icon-button-size: 36px;
    width: var(--icon-button-size);
    height: var(--icon-button-size);
    min-width: var(--icon-button-size);
    flex: 0 0 auto;
    box-sizing: border-box;
    vertical-align: middle;
    touch-action: manipulation;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-md, 8px);
    color: var(--color-text-secondary, #64748b);
    background: transparent;
    font-size: var(--widget-font-size, 14px);
    line-height: 1;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.ombox-icon-button-compact {
    --icon-button-size: 32px;
}

.ombox-icon-button-primary {
    color: var(--color-primary, #0087f7);
    border-color: color-mix(in srgb, var(--color-primary, #0087f7) 24%, transparent);
    background: color-mix(in srgb, var(--color-primary, #0087f7) 8%, transparent);
}

.ombox-icon-button-muted {
    color: var(--color-text-muted, #94a3b8);
    border-color: var(--color-border, #d8dee8);
    background: var(--color-surface-muted, #f8fafc);
}

.ombox-icon-button:hover:not(:disabled),
.ombox-icon-button:focus-visible {
    color: var(--color-primary, #0087f7);
    border-color: var(--color-primary, #0087f7);
    outline: 0;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary, #0087f7) 12%, transparent);
}

.ombox-icon-button:disabled {
    cursor: not-allowed;
    opacity: .65;
}

.ombox-icon-button[aria-pressed="true"] {
    color: var(--color-primary, #0087f7);
    border-color: currentColor;
    background: color-mix(in srgb, var(--color-primary, #0087f7) 14%, transparent);
}

body.eye-protection .ombox-icon-button {
    --color-primary: #657a46;
    --color-text-secondary: #4a3c28;
    --color-text-muted: #6b5d4f;
    --color-border: #d9cbb8;
    --color-surface-muted: #f5f1e8;
}

@media (forced-colors: active) {
    .ombox-icon-button {
        border-color: ButtonText;
    }
}

/* Desktop surface. Explicit instance > Shell > viewport fallback. */
.ombox-icon-button[data-icon-button-surface="desktop"],
body:is(.device-desktop, .shell-variant-desktop, .shell-variant-desktop-guest) .ombox-icon-button[data-icon-button-surface="auto"] { --icon-button-size: 36px; }
@media (min-width: 1025px) {
    body:not(:is(.device-desktop, .shell-variant-desktop, .shell-variant-desktop-guest, .device-tablet, .shell-variant-tablet, .device-mobile, .shell-variant-mobile)) .ombox-icon-button[data-icon-button-surface="auto"] { --icon-button-size: 36px; }
}
 .ombox-icon-button-compact[data-icon-button-surface="desktop"],
body:is(.device-desktop, .shell-variant-desktop, .shell-variant-desktop-guest) .ombox-icon-button-compact[data-icon-button-surface="auto"] { --icon-button-size: 32px; }
@media (min-width: 1025px) { body:not(:is(.device-desktop, .shell-variant-desktop, .shell-variant-desktop-guest, .device-tablet, .shell-variant-tablet, .device-mobile, .shell-variant-mobile)) .ombox-icon-button-compact[data-icon-button-surface="auto"] { --icon-button-size: 32px; } }

/* Tablet surface. Explicit instance > Shell > viewport fallback. */
.ombox-icon-button[data-icon-button-surface="tablet"],
body:is(.device-tablet, .shell-variant-tablet) .ombox-icon-button[data-icon-button-surface="auto"] { --icon-button-size: 44px; }
@media (min-width: 641px) and (max-width: 1024px) {
    body:not(:is(.device-desktop, .shell-variant-desktop, .shell-variant-desktop-guest, .device-tablet, .shell-variant-tablet, .device-mobile, .shell-variant-mobile)) .ombox-icon-button[data-icon-button-surface="auto"] { --icon-button-size: 44px; }
}

/* Mobile surface. Explicit instance > Shell > viewport fallback. */
.ombox-icon-button[data-icon-button-surface="mobile"],
body:is(.device-mobile, .shell-variant-mobile) .ombox-icon-button[data-icon-button-surface="auto"] { --icon-button-size: 44px; }
@media (max-width: 640px) {
    body:not(:is(.device-desktop, .shell-variant-desktop, .shell-variant-desktop-guest, .device-tablet, .shell-variant-tablet, .device-mobile, .shell-variant-mobile)) .ombox-icon-button[data-icon-button-surface="auto"] { --icon-button-size: 44px; }
}