/*
 * After Effects 2020 / CEP 9 compatibility overrides.
 *
 * CEP 9 uses Chromium 61. That engine has CSS Grid gap, but it does not
 * implement flexbox gap or modern sizing functions such as min()/clamp().
 * main.js adds kzn-ae2020 only for the real AE 2020 host, so AE 2021+
 * and the browser keep the existing design unchanged.
 */

/* Keep the third-party sign-in card from shrinking to its contents. */
html.kzn-ae2020 .kzn-auth-card {
    width: 100%;
    max-width: 398px;
    box-sizing: border-box;
}

/* Fallbacks for vertical flex gaps in the authentication UI. */
html.kzn-ae2020 .kzn-auth-card > * + * {
    margin-top: 12px;
}

html.kzn-ae2020 .kzn-auth-actions > * + * {
    margin-top: 8px;
}

html.kzn-ae2020 .kzn-social-btn__icon {
    margin-right: 12px;
}

html.kzn-ae2020 .kzn-social-btn__content > * + * {
    margin-top: 2px;
}

html.kzn-ae2020 .kzn-social-btn__chevron {
    margin-left: auto;
}

/* Open Profile social chips use flex gap in modern engines. Chromium 61
   needs physical margins both between chips and inside each chip. */
html.kzn-ae2020 .kzn-profile-social-list > .kzn-profile-social-chip + .kzn-profile-social-chip {
    margin-left: 7px !important;
}

html.kzn-ae2020 .kzn-profile-social-chip > * + * {
    margin-left: 5px !important;
}

/* Restore icon/text spacing in the main navigation and tool tiles. */
html.kzn-ae2020 .tab > img {
    margin-right: 8px;
}

/* Chromium 61 needs the prefixed raster filter for the original Tools/Profile
   PNGs to follow Accent Text & Icons. */
html.kzn-ae2020 .tab.active > img {
    -webkit-filter: var(--kzn-tab-active-filter, none) !important;
    filter: var(--kzn-tab-active-filter, none) !important;
}

/* Chromium 61 can lose a custom-property filter during a tab repaint.
   This explicit state keeps the original PNG black when the selected
   Accent Text & Icons color is dark. */
html.kzn-ae2020.kzn-accent-fg-dark .tab.active > img {
    -webkit-filter: brightness(0) !important;
    filter: brightness(0) !important;
}

/* Notification rows: both rendering branches use these classes in v15. */
html.kzn-ae2020 #notificationCenterList .kzn-notif-row {
    padding: 8px 10px !important;
}

html.kzn-ae2020 #notificationCenterList .kzn-notif-row-avatar,
html.kzn-ae2020 #notificationCenterList .kzn-notif-row-avatar .kzn-avatar-framed,
html.kzn-ae2020 #notificationCenterList .kzn-notif-row-avatar img:not(.kzn-discord-frame-img) {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    flex: 0 0 30px !important;
}

html.kzn-ae2020 #notificationCenterList .kzn-notif-row-content {
    margin-left: 10px !important;
}

html.kzn-ae2020 #notificationCenterList .kzn-notif-count-badge,
html.kzn-ae2020 #notificationCenterList .kzn-chat-unread-count {
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    font-size: 10px !important;
    line-height: 18px !important;
}

/* Compact nickname onboarding without CSS inset/min() dependencies. */
html.kzn-ae2020 .kzn-nickname-setup-overlay {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    padding: 14px !important;
}

html.kzn-ae2020 .kzn-nickname-setup-card {
    width: calc(100% - 28px) !important;
    max-width: 330px !important;
}

html.kzn-ae2020 .tool-tile .tile-icon {
    margin-bottom: 6px;
}

/* Restore spacing in Contact, Discord and Support controls. */
html.kzn-ae2020 .text-icon-btn > img {
    margin-right: 8px;
}

html.kzn-ae2020 .bottom-right-controls > .icon-btn + .icon-btn {
    margin-left: 12px;
}

/* Main screen side controls: CEP 9 ignores both horizontal and vertical
   flex gaps. Keep the compact one-column panel layout visibly separated. */
html.kzn-ae2020 .top-right-icons > .icon-btn + .icon-btn {
    margin-top: 12px;
}

html.kzn-ae2020 .top-left-icons {
    flex-direction: column;
}

html.kzn-ae2020 .top-left-icons > * + * {
    margin-top: 12px;
}

html.kzn-ae2020 .premium-stack > .icon-btn + .icon-btn {
    margin-top: 10px;
}

/* Downloader header and welcome list use flex gaps in newer Chromium. */
html.kzn-ae2020 #vdPanel .vd-header-left > .vd-avatar {
    margin-right: 6px;
}

html.kzn-ae2020 #vdPanel .vd-header-right > .vd-header-btn + .vd-header-btn {
    margin-left: 1px;
}

html.kzn-ae2020 #vdPanel .vd-subtitle > * + * {
    margin-left: 6px;
}

html.kzn-ae2020 #vdPanel .vd-welcome-list > .vd-welcome-item + .vd-welcome-item {
    margin-top: 7px;
}

/* Telegram login: the compact redesign removes legacy margins and relies
   on flex gap. Recreate those gaps and avoid unsupported clamp(), which
   otherwise leaves the confirmation code oversized and wrapped. */
html.kzn-ae2020 #tgScreenCode > * + * {
    margin-top: 9px !important;
}

html.kzn-ae2020 #tgLoginCodeWrap {
    column-gap: 10px !important;
}

html.kzn-ae2020 #tgLoginCode {
    font-size: 20px !important;
}

html.kzn-ae2020 #btnOpenTgLoginBot > svg {
    margin-right: 8px;
}

html.kzn-ae2020 #tgTokenInput + #btnTgTokenLogin {
    margin-left: 8px;
}

/* Messenger header: leave a readable gap after Search, while Video Beta sits
   close to the avatar as in the current CEP layout. */
html.kzn-ae2020 .chat-search-wrap {
    flex: 0 1 250px !important;
    width: 250px !important;
    max-width: calc(100% - 156px) !important;
    margin-left: auto !important;
    margin-right: 8px !important;
}

html.kzn-ae2020 #btnVoiceMode {
    margin-right: 10px !important;
}

html.kzn-ae2020 #headerAvatarWrap {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Chromium 61 ignores flex gap in the message composer. */
html.kzn-ae2020 .chat-composer-shell > .laptop-menu-container {
    margin-right: 10px !important;
}

html.kzn-ae2020 .chat-composer-shell > .chat-composer-main + #btnMainVoice,
html.kzn-ae2020 .chat-composer-shell > .chat-composer-main + #btnMainSend,
html.kzn-ae2020 .chat-composer-shell > #btnMainVoice + #btnMainSend {
    margin-left: 10px !important;
}

/* Top message notification: solid card, explicit old-flex spacing and a
   single Accent Color surface for Reply. */
html.kzn-ae2020 #tgTopNotificationWrap {
    width: calc(100% - 20px) !important;
    max-width: 460px !important;
}

html.kzn-ae2020 #tgTopNotificationCard {
    background: #121216 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html.kzn-ae2020 .tg-top-notification-avatar {
    margin-right: 12px !important;
}

html.kzn-ae2020 #tgTopNotificationReplyInput + #tgTopNotificationReplySend {
    margin-left: 10px !important;
}

html.kzn-ae2020 #tgTopNotificationReplySend {
    background: var(--accent) !important;
    background-image: none !important;
    color: var(--accent-fg) !important;
    -webkit-text-fill-color: var(--accent-fg) !important;
}

/* Chromium 61 cannot render the animated SVG pulse frame reliably in this
   tiny header slot (it appears as a purple dot). Use a clean static ring. */
html.kzn-ae2020 #headerProfileAvatarWrap .kzn-avatar-frame-overlay--pulse {
    display: none !important;
}

html.kzn-ae2020 #headerProfileAvatarWrap.kzn-avatar-has-frame--pulse::before {
    content: "";
    position: absolute;
    top: -2px;
    right: -2px;
    bottom: -2px;
    left: -2px;
    border: 2px solid rgba(var(--accent-rgb), .9);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(var(--accent-rgb), .22);
    pointer-events: none;
    z-index: 4;
}

/*
 * Chromium 61 ignores the modern `inset` shorthand. Avatar decoration
 * containers therefore collapsed to a tiny purple pixel. Spell out every
 * edge so Discord decorations keep the same geometry as newer AE builds.
 */
html.kzn-ae2020 .kzn-avatar-frame-overlay {
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    bottom: -8px !important;
    left: -8px !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
}

/* Pulse needs different geometry for each avatar size. Chromium 61 ignores
   `inset`, so keep all four physical edges explicit and perfectly symmetric. */
html.kzn-ae2020 #mainAvatarRing.kzn-avatar-has-frame--pulse .kzn-main-pulse-frame-overlay,
html.kzn-ae2020 #mainAvatarRing.kzn-avatar-has-frame--pulse .kzn-avatar-frame-overlay--pulse {
    top: -26px !important;
    right: -26px !important;
    bottom: -26px !important;
    left: -26px !important;
}

html.kzn-ae2020 #amAvatarWrap {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    min-height: 80px !important;
    max-width: 80px !important;
    max-height: 80px !important;
}

html.kzn-ae2020 #amAvatarWrap .kzn-avatar-frame-overlay--pulse {
    top: -11px !important;
    right: -11px !important;
    bottom: -11px !important;
    left: -11px !important;
}

html.kzn-ae2020 #amAvatarWrap .kzn-avatar-frame-overlay--pulse svg {
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
}

html.kzn-ae2020 .kzn-avatar-framed--pulse {
    box-sizing: border-box !important;
    overflow: visible !important;
}

html.kzn-ae2020 .kzn-avatar-framed--pulse > .kzn-avatar-frame-overlay--pulse {
    top: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    left: -2px !important;
}

html.kzn-ae2020 #chatSettingsModal .settings-avatar-button .kzn-avatar-frame-overlay--pulse {
    top: -12px !important;
    right: -12px !important;
    bottom: -12px !important;
    left: -12px !important;
}

html.kzn-ae2020 .kzn-avatar-framed--discord > .kzn-avatar-frame-overlay--discord {
    top: var(--kzn-discord-frame-inset, -7px) !important;
    right: var(--kzn-discord-frame-inset, -7px) !important;
    bottom: var(--kzn-discord-frame-inset, -7px) !important;
    left: var(--kzn-discord-frame-inset, -7px) !important;
}

html.kzn-ae2020 #headerProfileAvatarWrap .kzn-avatar-frame-overlay--discord {
    top: -7px !important;
    right: -7px !important;
    bottom: -7px !important;
    left: -7px !important;
}

html.kzn-ae2020 .kzn-avatar-frame-overlay--discord .kzn-discord-frame-img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    opacity: 1 !important;
}

/* The default (None) frame is also built with `inset`. In Chromium 61 its
   before/after layers collapsed into the purple spot seen over avatars. */
html.kzn-ae2020 .kzn-avatar-framed--none::before,
html.kzn-ae2020 .kzn-avatar-has-frame--none::before {
    top: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    left: -2px !important;
    width: auto !important;
    height: auto !important;
}

html.kzn-ae2020 .kzn-avatar-framed--none::after,
html.kzn-ae2020 .kzn-avatar-has-frame--none::after {
    top: -6px !important;
    right: -6px !important;
    bottom: -6px !important;
    left: -6px !important;
    width: auto !important;
    height: auto !important;
}

html.kzn-ae2020 #chatSettingsModal .settings-avatar-button.kzn-avatar-has-frame--none::before {
    top: -1px !important;
    right: -1px !important;
    bottom: -1px !important;
    left: -1px !important;
}

html.kzn-ae2020 #chatSettingsModal .settings-avatar-button.kzn-avatar-has-frame--none::after {
    top: -5px !important;
    right: -5px !important;
    bottom: -5px !important;
    left: -5px !important;
}

html.kzn-ae2020 #amAvatarWrap.kzn-avatar-has-frame--none::after {
    top: -7px !important;
    right: -7px !important;
    bottom: -7px !important;
    left: -7px !important;
}

/* Discord / Video Beta compact layout. */
html.kzn-ae2020.kzn-voice-layout-compact #voiceOverlay .tg-voice-overlay > .tg-voice-left + .tg-voice-channel-panel,
html.kzn-ae2020.kzn-voice-layout-compact #voiceOverlay .tg-voice-channel-panel + .tg-voice-split-handle,
html.kzn-ae2020.kzn-voice-layout-compact #voiceOverlay .tg-voice-split-handle + .tg-voice-stage {
    margin-top: 8px;
}

html.kzn-ae2020.kzn-voice-layout-compact #voiceOverlay .tg-voice-chat-icons + .tg-voice-left-actions {
    margin-left: 10px;
}

html.kzn-ae2020.kzn-voice-layout-compact #voiceOverlay .tg-voice-left-actions > button + button {
    margin-left: 8px;
}

html.kzn-ae2020.kzn-voice-layout-compact #voiceOverlay .tg-voice-channel-header + .tg-voice-channel-list {
    margin-top: 8px;
}

html.kzn-ae2020 #voiceOverlay .tg-voice-channel-header > div:first-child > div:last-child > button + button {
    margin-left: 8px;
}

html.kzn-ae2020 #voiceOverlay #tgVoiceMembersPill > svg {
    margin-right: 8px;
}

html.kzn-ae2020.kzn-voice-layout-compact #voiceOverlay .tg-voice-stage-head + .tg-voice-text-chat {
    margin-top: 14px;
}

html.kzn-ae2020.kzn-voice-layout-compact #voiceOverlay .tg-voice-text-messages + .tg-voice-gif-picker,
html.kzn-ae2020.kzn-voice-layout-compact #voiceOverlay .tg-voice-gif-picker + .tg-voice-text-input {
    margin-top: 10px;
}

html.kzn-ae2020 #voiceOverlay .tg-voice-text-input > * + * {
    margin-left: 10px;
}

/* ---------------------------------------------------------------------
   AE 2020 full component pass.
   These rules replace CSS features that Chromium 61 silently ignores:
   flex gap, inset, min()/clamp(), aspect-ratio and mask-only icons.
   ------------------------------------------------------------------ */

/* AE Shop: `inset: 0` is unsupported in Chromium 61, which left the
   created overlay at zero size and made the button look unresponsive. */
html.kzn-ae2020 .ae-shop-overlay {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: auto !important;
    height: auto !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(0, 0, 0, .9) !important;
}

html.kzn-ae2020 .ae-shop-preview-lock {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: auto !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html.kzn-ae2020 .ae-shop-soon-card > * + * {
    margin-top: 6px !important;
}

html.kzn-ae2020 #btnShopOpen {
    position: relative;
    z-index: 2;
    pointer-events: auto;
}

/* Closed Captions: replace unsupported `inset` and flex-gap declarations. */
html.kzn-ae2020 #smPanel {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: auto !important;
    height: auto !important;
}

html.kzn-ae2020 #smPanel .sm-brand > * + * {
    margin-left: 10px !important;
}

html.kzn-ae2020 #smPanel .sm-source-actions > * + * {
    margin-left: 8px !important;
}

html.kzn-ae2020 #smPanel .sm-progress,
html.kzn-ae2020 #smPanel .sm-web-lock {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
}

/* Downloader settings: fixed Chromium-61 sizing and explicit flex spacing. */
html.kzn-ae2020 #vdPanel #vdSettingsOverlay {
    padding: 8px !important;
    background: rgba(0, 0, 0, .94) !important;
}

html.kzn-ae2020 #vdPanel #vdSettingsOverlay .ff-settings-card {
    width: calc(100% - 16px) !important;
    max-width: 306px !important;
    max-height: calc(100% - 18px) !important;
    padding: 13px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
    background: #111114 !important;
}

html.kzn-ae2020 #vdSettingsOverlay .ff-settings-title {
    margin-bottom: 12px !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
}

html.kzn-ae2020 #vdSettingsOverlay .ff-settings-row {
    column-gap: 10px !important;
}

html.kzn-ae2020 #vdSettingsOverlay .ff-settings-row-label > .ff-settings-status-dot {
    margin-right: 7px !important;
}

html.kzn-ae2020 #vdSettingsOverlay .ff-settings-row-actions > * + * {
    margin-left: 6px !important;
}

html.kzn-ae2020 #vdSettingsOverlay .ff-settings-row-hint {
    padding-left: 15px !important;
    padding-bottom: 9px !important;
    line-height: 1.35 !important;
}

html.kzn-ae2020 #vdSettingsOverlay .ff-settings-field--template .ff-settings-row {
    row-gap: 7px !important;
}

html.kzn-ae2020 #vdSettingsOverlay .ff-settings-actions > * + * {
    margin-left: 7px !important;
}

html.kzn-ae2020 #vdSettingsOverlay .ff-settings-actions button {
    height: 36px !important;
}

/* Auto Time Remap: old CEF cannot composite nested translucent cards and
   backdrop filters reliably. Use the same geometry with solid surfaces. */
html.kzn-ae2020 #aiPanel {
    background: #0c0a09 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html.kzn-ae2020 #aiPanel .ai-content {
    padding-left: 14px !important;
    padding-right: 14px !important;
}

html.kzn-ae2020 #aiPanel .ai-script-item {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}

html.kzn-ae2020 #scriptKznTrAi .ai-script-body {
    padding: 0 0 10px !important;
    border-top: 0 !important;
}

html.kzn-ae2020 #aiPanel .kzn-scene-hero,
html.kzn-ae2020 #aiPanel .kzn-scene-settings {
    background: #19191d !important;
}

html.kzn-ae2020 #aiPanel .kzn-scene-kicker > * + * {
    margin-left: 8px !important;
}

html.kzn-ae2020 #aiPanel .ai-brand > * + * {
    margin-left: 10px !important;
}

html.kzn-ae2020 #aiPanel .kzn-scene-clean-label > .kzn-scene-switch-ui {
    margin-left: 0 !important;
}

html.kzn-ae2020 #aiPanel .kzn-scene-switch-ui + span {
    margin-left: 9px !important;
}

html.kzn-ae2020 #aiPanel .kzn-scene-clean-row > .kzn-frame-input-wrap {
    margin-left: 10px !important;
}

html.kzn-ae2020 #aiPanel .kzn-frame-input-wrap > * + * {
    margin-left: 5px !important;
}

html.kzn-ae2020 #aiPanel .kzn-scene-actions > * + * {
    margin-top: 7px !important;
}

/* Anime Detect Frame uses flex gap in modern CEP. Chromium 61 ignores it,
   so every icon/text and neighboring button needs an explicit fallback. */
html.kzn-ae2020 #aiPanel .kzn-df-mode-switch > * + *,
html.kzn-ae2020 #aiPanel .kzn-addr-source-actions > * + *,
html.kzn-ae2020 #aiPanel .kzn-addr-actions > * + *,
html.kzn-ae2020 #aiPanel .kzn-addr-nav > * + *,
html.kzn-ae2020 #aiPanel .kzn-addr-pay-grid > * + * {
    margin-left: 7px !important;
}

html.kzn-ae2020 #aiPanel .kzn-addr-source > * + *,
html.kzn-ae2020 #aiPanel .kzn-addr-model-button > * + *,
html.kzn-ae2020 #aiPanel .kzn-addr-nav-btn > * + *,
html.kzn-ae2020 #aiPanel .kzn-addr-job > * + *,
html.kzn-ae2020 #aiPanel .kzn-addr-subview-head > * + * {
    margin-left: 10px !important;
}

html.kzn-ae2020 #aiPanel .kzn-addr-option-row > * + * {
    margin-left: 8px !important;
}

html.kzn-ae2020 #aiPanel .kzn-addr-card-head > * + * {
    margin-left: 8px !important;
}

html.kzn-ae2020 #aiPanel .kzn-addr-model-option > strong + small,
html.kzn-ae2020 #aiPanel .kzn-addr-source-name + .kzn-addr-source-hint,
html.kzn-ae2020 #aiPanel .kzn-addr-job-name + .kzn-addr-job-state,
html.kzn-ae2020 #aiPanel .kzn-addr-nav-title + .kzn-addr-nav-meta,
html.kzn-ae2020 #aiPanel .kzn-addr-subview-title + .kzn-addr-subview-copy {
    margin-top: 3px !important;
}

/* Flex gap is not available in Chromium 61. Keep Auto-TR controls separated. */
html.kzn-ae2020 #aiPanel .pyn-segment > * + * {
    margin-left: 10px !important;
}

html.kzn-ae2020 #aiPanel .pyn-switch-ui + .pyn-switch-text {
    margin-left: 10px !important;
}

/* Downloader video: remove the inline-video baseline and unsupported inset
   geometry that produced a growing black strip while resizing the panel. */
html.kzn-ae2020 #vdPanel .vd-media-video-custom {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    vertical-align: top !important;
    object-position: 50% 50% !important;
}

html.kzn-ae2020 #vdPanel .vd-video-stage {
    height: auto !important;
    min-height: 0 !important;
    line-height: 0 !important;
}

html.kzn-ae2020 #vdPanel .vd-video-loading-overlay,
html.kzn-ae2020 #vdPanel .vd-video-compare-pane,
html.kzn-ae2020 #vdPanel .vd-media-video-compare {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
}

html.kzn-ae2020 #vdPanel .vd-custom-player:-webkit-full-screen .vd-video-stage {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html.kzn-ae2020 #vdPanel .vd-custom-player:-webkit-full-screen .vd-media-video-custom,
html.kzn-ae2020 #vdPanel .vd-custom-player:-webkit-full-screen .vd-media-video-compare {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: 50% 50% !important;
    display: block !important;
    margin: auto !important;
}

html.kzn-ae2020 #vdPanel .vd-video-controls > * + * {
    margin-left: 4px !important;
}

/* Find Music candidates and the persistent preview player. */
html.kzn-ae2020 #vdPanel .vd-track-list > * + * {
    margin-top: 6px !important;
}

html.kzn-ae2020 #vdPanel .vd-track > .vd-track-meta {
    margin-left: 9px !important;
}

html.kzn-ae2020 #vdPanel .vd-track-tags > * + *,
html.kzn-ae2020 #vdPanel .vd-pick-actions > * + * {
    margin-left: 5px !important;
}

html.kzn-ae2020 #vdPanel .vd-mini-player {
    max-width: calc(100% - 20px) !important;
    box-sizing: border-box !important;
    z-index: 90 !important;
}

html.kzn-ae2020 #vdPanel .vd-mini-player > * + * {
    margin-left: 8px !important;
}

html.kzn-ae2020 #vdPanel .vd-mp-scrub > * + *,
html.kzn-ae2020 #vdPanel .vd-mp-controls > * + *,
html.kzn-ae2020 #vdPanel .vd-mp-speed > * + * {
    margin-left: 6px !important;
}

html.kzn-ae2020 #vdPanel .vd-mp-pop {
    left: auto !important;
    right: 0 !important;
    width: 154px !important;
    box-sizing: border-box !important;
}

html.kzn-ae2020 #vdPanel .vd-mp-pop-row > * + * {
    margin-left: 8px !important;
}

html.kzn-ae2020 #vdPanel .vd-audio-disc-player {
    max-width: 100% !important;
}

html.kzn-ae2020 #vdPanel .vd-audio-disc-player > .vd-audio-content {
    margin-left: 7px !important;
}

html.kzn-ae2020 #vdPanel .vd-audio-top-row > * + *,
html.kzn-ae2020 #vdPanel .vd-audio-bottom-row > * + * {
    margin-left: 5px !important;
}

html.kzn-ae2020 #vdPanel .vd-audio-volume-slider-wrap {
    left: auto !important;
    right: -5px !important;
    transform: translateY(6px) !important;
}

html.kzn-ae2020 #vdPanel .vd-audio-volume-wrap:hover .vd-audio-volume-slider-wrap,
html.kzn-ae2020 #vdPanel .vd-audio-volume-slider-wrap:hover {
    transform: translateY(0) !important;
}

/* Downloader video uses the same accent volume control as the audio player.
   Removing the native CEP 9 appearance avoids the oversized white slider. */
html.kzn-ae2020 #vdPanel .vd-video-volume-pop {
    left: auto !important;
    right: -5px !important;
    transform: translateY(6px) !important;
    background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
    border-color: rgba(var(--accent-fg-rgb, 252, 252, 252), .16) !important;
}

html.kzn-ae2020 #vdPanel .vd-video-volume-wrap:hover .vd-video-volume-pop,
html.kzn-ae2020 #vdPanel .vd-video-volume-wrap:focus-within .vd-video-volume-pop,
html.kzn-ae2020 #vdPanel .vd-video-volume-pop:hover {
    transform: translateY(0) !important;
}

html.kzn-ae2020 #vdPanel .vd-video-volume {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 88px !important;
    height: 28px !important;
    margin: 0 !important;
    background: transparent !important;
    transform: rotate(-90deg) !important;
    transform-origin: center !important;
}

html.kzn-ae2020 #vdPanel .vd-video-volume::-webkit-slider-runnable-track {
    height: 4px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg,
        rgba(var(--accent-fg-rgb, 252, 252, 252), .9) 0%,
        rgba(var(--accent-fg-rgb, 252, 252, 252), .9) var(--vd-vol-pct, 100%),
        rgba(var(--accent-fg-rgb, 252, 252, 252), .18) var(--vd-vol-pct, 100%),
        rgba(var(--accent-fg-rgb, 252, 252, 252), .18) 100%) !important;
}

html.kzn-ae2020 #vdPanel .vd-video-volume::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 12px !important;
    height: 12px !important;
    margin-top: -4px !important;
    border-radius: 50% !important;
    border: 1.5px solid rgba(var(--accent-fg-rgb, 252, 252, 252), .7) !important;
    background: var(--accent-fg) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3) !important;
}

/* Accent preset actions use mask icons in newer Chromium. Explicit geometry
   makes the same icons visible in CEP 9. */
html.kzn-ae2020 #appearancePresetList .stg-preset-card {
    grid-template-rows: auto 26px !important;
}

html.kzn-ae2020 #appearancePresetList .stg-preset-actions > * + * {
    margin-left: 6px !important;
}

html.kzn-ae2020 #appearancePresetList .stg-preset-btn::before {
    top: 6px !important;
    right: 6px !important;
    bottom: 6px !important;
    left: 6px !important;
}

/* Storage warnings must stay compact in a narrow panel. */
html.kzn-ae2020 [data-i18n="settings.storage"] {
    font-size: 10px !important;
    line-height: 1.2 !important;
}

html.kzn-ae2020 #storageGraceNotice,
html.kzn-ae2020 #kznCloudMediaGraceNotice {
    font-size: 9.5px !important;
    line-height: 1.35 !important;
}

html.kzn-ae2020 #kznCloudMediaGraceNotice > * + * {
    margin-left: 8px !important;
}

/* Voice recording: explicit sizes replace unsupported min()/clamp() and
   aspect-ratio, while a crisp fallback keeps controls and sent icons clear. */
html.kzn-ae2020 .chat-voice-panel {
    width: calc(100% - 16px) !important;
    max-width: 300px !important;
    filter: none !important;
    transform: translate(-50%, 8px) scale(.985) !important;
}

html.kzn-ae2020 .chat-voice-panel.active,
html.kzn-ae2020 .chat-voice-panel[aria-hidden="false"] {
    transform: translate(-50%, 0) scale(1) !important;
    filter: none !important;
}

html.kzn-ae2020.is-cep .chat-voice-panel-ai {
    --vp-s: 86px !important;
    --vp-p: 21px !important;
    width: 86px !important;
    height: 86px !important;
    min-height: 86px !important;
    padding: 21px !important;
    margin-top: -10px !important;
    margin-bottom: 8px !important;
    box-sizing: content-box !important;
}

html.kzn-ae2020.is-cep .chat-voice-ai-particles,
html.kzn-ae2020.is-cep .chat-voice-ai-rings {
    top: 4px !important;
    right: 4px !important;
    bottom: 4px !important;
    left: 4px !important;
}

html.kzn-ae2020.is-cep .chat-voice-ai-glass {
    top: 18px !important;
    right: 18px !important;
    bottom: 18px !important;
    left: 18px !important;
}

html.kzn-ae2020 .chat-voice-panel-subtitle {
    font-size: 11px !important;
}

html.kzn-ae2020 .chat-voice-panel-actions {
    max-width: 248px !important;
}

html.kzn-ae2020 .chat-voice-panel-actions > * + * {
    margin-left: 10px !important;
}

html.kzn-ae2020 .chat-voice-panel-btn {
    height: 36px !important;
    padding-left: 13px !important;
    padding-right: 13px !important;
}

html.kzn-ae2020 .tg-voice {
    width: 100% !important;
    min-height: 34px !important;
    display: flex !important;
    align-items: center !important;
}

html.kzn-ae2020 .tg-voice > .tg-voice-main {
    margin-left: 8px !important;
}

html.kzn-ae2020 .tg-voice > .tg-voice-speed {
    margin-left: 7px !important;
}

html.kzn-ae2020 .tg-voice-play {
    position: relative !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    color: var(--accent-fg) !important;
}

html.kzn-ae2020 .tg-voice-play svg {
    display: none !important;
}

html.kzn-ae2020 .tg-voice-play .icon-play,
html.kzn-ae2020 .tg-voice-play .icon-pause {
    display: none !important;
}

/* Pure CSS play/pause glyphs do not depend on the old SVG paint pipeline. */
html.kzn-ae2020 .tg-voice-play::before {
    content: "";
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    transform: translate(-38%, -50%) !important;
    border-top: 6px solid transparent !important;
    border-bottom: 6px solid transparent !important;
    border-left: 9px solid var(--accent-fg) !important;
}

html.kzn-ae2020 .tg-voice.playing .tg-voice-play::before {
    content: "";
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 3px !important;
    height: 12px !important;
    margin: 0 !important;
    transform: translate(-4px, -50%) !important;
    border: 0 !important;
    background: var(--accent-fg) !important;
    box-shadow: 6px 0 0 var(--accent-fg) !important;
}

html.kzn-ae2020 .tg-voice-main {
    flex: 1 1 auto !important;
    min-width: 56px !important;
}

html.kzn-ae2020 .tg-voice-wave {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: 16px !important;
    min-height: 16px !important;
    overflow: hidden !important;
}

html.kzn-ae2020 .tg-voice-wave-layer {
    display: flex !important;
    align-items: flex-end !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 16px !important;
    padding: 2px !important;
    box-sizing: border-box !important;
    opacity: 1 !important;
}

html.kzn-ae2020 .tg-voice-wave-layer span {
    display: block !important;
    width: 2px !important;
    min-width: 2px !important;
    flex: 0 0 2px !important;
    opacity: 1 !important;
    background-color: rgba(255, 255, 255, 0.42) !important;
}

html.kzn-ae2020 .tg-voice-wave-layer span + span {
    margin-left: 2px !important;
}

html.kzn-ae2020 .message-bubble.outgoing .tg-voice-wave-progress span {
    background-color: #fff !important;
}

html.kzn-ae2020 .message-bubble.incoming .tg-voice-wave-progress span {
    background-color: var(--accent) !important;
}

/* Link File header and guide. Flex gap and min() were the reason the help
   badge disappeared against the close button in AE 2020. */
html.kzn-ae2020 .kzn-tm-card {
    width: calc(100% - 16px) !important;
    max-width: 292px !important;
    box-sizing: border-box !important;
}

html.kzn-ae2020 .kzn-torrent-header-actions {
    margin-left: auto !important;
}

html.kzn-ae2020 .kzn-torrent-header-actions > .kzn-tm-close {
    margin-left: 10px !important;
}

html.kzn-ae2020 .kzn-torrent-info-badge {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
    color: var(--accent-fg, #fff) !important;
    -webkit-text-fill-color: var(--accent-fg, #fff) !important;
    border-color: rgba(var(--accent-rgb), 0.48) !important;
}

html.kzn-ae2020 .kzn-torrent-tooltip {
    width: 252px !important;
    max-width: calc(100vw - 16px) !important;
    box-sizing: border-box !important;
}

html.kzn-ae2020 .kzn-tm-actions > * + * {
    margin-left: 8px !important;
}

/* Profile action labels are absolutely positioned with `inset: 0` in the
   modern stylesheet. Without explicit edges Chromium 61 placed their text
   outside the purple buttons. */
html.kzn-ae2020 .logout-container > * + * {
    margin-top: 8px !important;
}

html.kzn-ae2020 .profile-identity-head > * + * {
    margin-left: 10px !important;
}

html.kzn-ae2020 .nickname-input-group > * + * {
    margin-left: 8px !important;
}

html.kzn-ae2020 .profile-actions-row > * + * {
    margin-top: 6px !important;
}

html.kzn-ae2020 .profile-action-btn {
    position: relative !important;
    overflow: hidden !important;
}

html.kzn-ae2020 .profile-action-btn__label {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 36px !important;
    line-height: 40px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

html.kzn-ae2020 .profile-action-btn__icon {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 2 !important;
}

html.kzn-ae2020 .profile-action-btn__icon svg {
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
}

/* Account Management identity needs breathing room below its framed avatar. */
html.kzn-ae2020 #accountMgmtModal #amAvatarWrap {
    margin-bottom: 9px !important;
}

html.kzn-ae2020 #accountMgmtModal #amNickname {
    margin-top: 2px !important;
}

/* Account Management must be a solid screen in AE 2020; backdrop-filter is
   unsupported and otherwise reveals the profile page underneath. */
html.kzn-ae2020 #accountMgmtModal {
    background: #080706 !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Closed Captions: flex/grid gap fallbacks and a stable close glyph. */
html.kzn-ae2020 #smPanel .sm-brand > * + * {
    margin-left: 10px !important;
}

html.kzn-ae2020 #smPanel .sm-close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
}

html.kzn-ae2020 #smPanel .sm-close svg {
    display: block !important;
    width: 14px !important;
    height: 14px !important;
}

html.kzn-ae2020 #smPanel .sm-quota {
    display: flex !important;
    align-items: center !important;
}

html.kzn-ae2020 #smPanel .sm-quota > span {
    flex: 1 1 0 !important;
}

html.kzn-ae2020 #smPanel .sm-quota > span + span,
html.kzn-ae2020 #smPanel .sm-quota > em {
    margin-left: 9px !important;
}

html.kzn-ae2020 #smPanel .sm-quota > span > * + * {
    margin-left: 5px !important;
}

/* Chromium 61 drops flex `gap`, so horizontal icon/text groups need explicit
   sibling spacing. Keep vertical Account Management stacks untouched. */
html.kzn-ae2020 #accountMgmtModal [style*="display:flex"][style*="align-items:center"]:not([style*="flex-direction:column"]) > * + * {
    margin-left: 10px !important;
}

html.kzn-ae2020 .tg-group-sender-avatar-slot + .tg-group-sender-identity {
    margin-left: 8px !important;
}

/* `clamp()` is unsupported in CEP 9. The invalid declaration left the older
   margin-top:auto in force and pushed Display Name/actions to the bottom. */
html.kzn-ae2020 #profilePane .logout-container {
    margin-top: 12px !important;
    margin-bottom: auto !important;
    padding-bottom: 24px !important;
}

html.kzn-ae2020 #profilePane .nickname-box + .profile-actions-row {
    margin-top: 12px !important;
}

/* The cover layer still has to span the whole panel for the glass tint. Its
   bottom wallpaper fade is gone on purpose — the wallpaper stays visible down
   to the bottom edge, and only the soft foreground scrim (#kznBottomControlsFade
   from main.js) dims the lower tiles. Keep the pseudo suppressed here too, so a
   cached older style.css cannot bring the dark band back in CEP 9. */
html.kzn-ae2020 #panel-cover-layer {
    right: 0 !important;
    bottom: 0 !important;
}

html.kzn-ae2020 #panel-cover-layer::after,
html.kzn-ae2020 .panel::after,
html.kzn-ae2020 .content::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

/* FlowFrames dialogs: CEP 9 / Chromium 61 does not support flex gap. Give the
   rename and Last Updates forms explicit sibling spacing so inputs, preview
   and action buttons never touch each other. */
html.kzn-ae2020 .ff-input-modal > .ff-modal-title + .ff-modal-input {
    margin-top: 14px !important;
}

html.kzn-ae2020 .ff-input-modal > .ff-modal-input + .ff-modal-btn-row {
    margin-top: 14px !important;
}

html.kzn-ae2020 .ff-modal-btn-row > * + *,
html.kzn-ae2020 .ff-notify-actions > * + * {
    margin-left: 10px !important;
}

html.kzn-ae2020 .ff-notify-modal-body > * + * {
    margin-top: 14px !important;
}

html.kzn-ae2020 .ff-input-modal .ff-modal-input,
html.kzn-ae2020 .ff-notify-modal-body .ff-modal-input,
html.kzn-ae2020 .ff-input-modal .ff-modal-btn-primary,
html.kzn-ae2020 .ff-input-modal .ff-modal-btn-secondary,
html.kzn-ae2020 .ff-notify-actions .ff-modal-btn-primary,
html.kzn-ae2020 .ff-notify-actions .ff-modal-btn-secondary {
    min-height: 40px !important;
    box-sizing: border-box !important;
}

/* Flex gap is unavailable in Chromium 61. Restore the intended space between
   every Premium checkmark and its label without touching newer AE or web. */
html.kzn-ae2020 #kznPremiumCard .kzn-premium-benefit-check {
    flex: 0 0 auto !important;
    margin-right: 7px !important;
}

html.kzn-ae2020 #kznPremiumCard .kzn-premium-benefit-row > span {
    min-width: 0 !important;
}