/* Аудио и медиа: строка воспроизведения, голоса дикторов, всплывающие варианты.
   Часть v3/word.css; порядок частей важен — см. static/README.md. */
.audio-action-row {
    margin: 2px 0 0 auto;
    max-width: 100%;
}

.audio-player-container {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    max-width: 100%;
    flex-wrap: wrap;
}

.audio-action-row .audio-player-container {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.audio-action-row .icon-button.audio-speaker-trigger,
.audio-action-row .info-trigger {
    --button-icon-box-size: 32px;
    margin: 0;
    border-radius: var(--button-radius-unified);
}

.audio-button.icon-button {
    --button-chrome-bg: var(--audio-button-bg, var(--link-color));
    --button-chrome-bg-hover: color-mix(in srgb, var(--audio-button-bg, var(--link-color)) 84%, #000);
    --button-chrome-bg-active: color-mix(in srgb, var(--audio-button-bg, var(--link-color)) 74%, #000);
    --button-chrome-border: transparent;
    --button-chrome-border-hover: transparent;
    --button-chrome-color: var(--txt-on-accent);
    --button-chrome-color-hover: var(--txt-on-accent);
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    border-radius: var(--button-radius-unified);
    padding: 0;
    position: relative;
    --progress: 0%;
    --progress-color: var(--audio-button-bg, var(--link-color));
    background-repeat: no-repeat;
    background-position: center;
    background-size: 68%;
    background-image: url(/static/assets/ui/sound_2_2.png);
}

.audio-button::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: var(--radius-round);
    background: conic-gradient(var(--progress-color) var(--progress, 0%), transparent 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    opacity: 0;
    pointer-events: none;
}

.audio-button.is-playing::after {
    opacity: 1;
}

.male {
    --audio-button-bg: var(--audio-voice-male-bg);
    background-color: var(--audio-button-bg);
    --progress-color: var(--audio-button-bg);
}

.female {
    --audio-button-bg: var(--audio-voice-female-bg);
    background-color: var(--audio-button-bg);
    --progress-color: var(--audio-button-bg);
}

.child {
    --audio-button-bg: var(--audio-voice-child-bg);
    background-color: var(--audio-button-bg);
    --progress-color: var(--audio-button-bg);
}

[data-media-bar] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

[data-media-frame] {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    max-inline-size: clamp(156px, 19vw, 236px);
    border-radius: var(--surface-radius);
    border: 1px solid var(--theme-border-surface-item);
    background: var(--theme-surface-subsection);
    padding: 3px;
    aspect-ratio: 4 / 3;
    max-block-size: clamp(132px, 19vw, 188px);
    box-sizing: border-box;
    overflow: hidden;
    margin-inline-start: auto;
}

[data-media-frame].is-interactive {
    cursor: zoom-in;
}

[data-media-image] {
    width: auto;
    height: auto;
    display: block;
    min-inline-size: 0;
    min-block-size: 0;
    object-fit: contain;
    object-position: center;
    max-inline-size: 100%;
    max-block-size: 100%;
    border-radius: calc(var(--surface-radius) - 3px);
    margin: 0 auto;
}

[data-media-frame] .media-generated-badge {
    top: 8px;
    inset-inline-start: 8px;
}

[data-media-audio] {
    display: inline-flex;
    justify-content: flex-start;
    align-self: flex-start;
    position: relative;
}

[data-word-entry-media] [data-media-audio] {
    justify-content: flex-end;
    align-self: flex-end;
    margin-left: auto;
}

[data-media-audio] .audio-player-container {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

[data-media-audio].audio-action-row {
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    margin: 0;
    box-shadow: none;
}

[data-media-audio].audio-action-row .audio-action-row__lead {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    opacity: 0.58;
}

[data-media-audio].audio-action-row .audio-action-row__lead .action-icon__img {
    display: block;
    width: 100%;
    height: 100%;
    -webkit-filter: var(--icon-filter);
    filter: var(--icon-filter);
}

[data-media-audio].audio-action-row :is(.audio-button.icon-button, .audio-speaker-trigger) {
    --button-chrome-bg: var(--theme-surface-base);
    --button-chrome-bg-hover: var(--theme-surface-subtle);
    --button-chrome-bg-active: var(--theme-surface-subsection);
    --button-chrome-border: var(--theme-border-normal);
    --button-chrome-border-hover: var(--theme-border-focus);
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    border-radius: var(--radius-pill);
}

[data-media-audio].audio-action-row .audio-button.icon-button {
    --button-chrome-color: var(--theme-text-strong);
    --button-chrome-color-hover: var(--theme-text-strong);
    background-color: var(--theme-surface-base);
    background-image: none;
    position: relative;
}

[data-media-audio].audio-action-row .audio-button.icon-button::before {
    content: "";
    position: absolute;
    inset: 7px;
    background-color: var(--audio-button-bg, var(--theme-text-strong));
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

[data-media-audio].audio-action-row .audio-button.icon-button.male,
[data-media-audio].audio-action-row .audio-button.icon-button.male:is(:hover, :active, :focus-visible, [aria-pressed="true"]) {
    --audio-button-bg: var(--link-color);
    --progress-color: var(--audio-button-bg);
}

[data-media-audio].audio-action-row .audio-button.icon-button.male::before {
    -webkit-mask-image: url(/static/assets/icons/user-beard.svg);
    mask-image: url(/static/assets/icons/user-beard.svg);
}

[data-media-audio].audio-action-row .audio-button.icon-button.female,
[data-media-audio].audio-action-row .audio-button.icon-button.female:is(:hover, :active, :focus-visible, [aria-pressed="true"]) {
    --audio-button-bg: var(--audio-button-female-bg-dense);
    --progress-color: var(--audio-button-bg);
}

[data-media-audio].audio-action-row .audio-button.icon-button.female::before {
    -webkit-mask-image: url(/static/assets/icons/smiling-girl.svg);
    mask-image: url(/static/assets/icons/smiling-girl.svg);
}

[data-media-audio].audio-action-row .audio-button.icon-button.child,
[data-media-audio].audio-action-row .audio-button.icon-button.child:is(:hover, :active, :focus-visible, [aria-pressed="true"]) {
    --audio-button-bg: var(--audio-button-child-bg-dense);
    --progress-color: var(--audio-button-bg);
}

[data-media-audio].audio-action-row .audio-button.icon-button.child::before {
    -webkit-mask-image: url(/static/assets/icons/child-head.svg);
    mask-image: url(/static/assets/icons/child-head.svg);
}

.audio-variants-popover {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: min(320px, 90vw);
    max-width: min(420px, 92vw);
    background: var(--theme-surface-subsection);
    border: 1px solid var(--theme-border-normal);
    border-radius: var(--surface-radius-shell-mobile);
    padding: 14px;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    opacity: 0;
    pointer-events: none;
    z-index: var(--z-popover);
}

.audio-variants-popover[data-open="true"] {
    opacity: 1;
    pointer-events: auto;
}

[data-audio-variants-header] {
    align-items: center;
    gap: var(--control-gap-base);
    margin-bottom: 10px;
}

[data-audio-variants-title].text-heading {
    --text-title-size: 15px;
    --text-title-weight: var(--hierarchy-title-weight);
}

[data-audio-variants-list] {
    display: grid;
    gap: var(--control-gap-base);
}

[data-audio-variant].item-card {
    --item-card-gap: var(--control-gap-base);
    --item-card-padding: 10px 12px;
    --item-card-radius: var(--surface-radius);
    --item-card-bg: var(--theme-surface-base);
    --item-card-border: var(--word-page-card-border);
    align-items: center;
    justify-content: space-between;
}

[data-audio-variant-text] {
    min-width: 0;
}

[data-audio-variant-title].text-heading {
    --text-title-size: var(--font-size-sm);
    --text-title-weight: 400;
}

[data-audio-variant-meta].text-meta {
    --text-meta-size: var(--type-control-meta-size);
    --text-meta-color: var(--theme-text-muted);
    margin-top: 2px;
}

[data-audio-variant-actions].button-stack {
    gap: var(--control-gap-tight);
    flex-shrink: 0;
}

[data-audio-variant-actions] .app-button {
    --app-button-height: var(--button-height-sm);
    --app-button-padding-x: 10px;
    font-size: var(--type-control-meta-size);
    font-weight: 400;
}

[data-word-forms] {
    margin: 0;
    padding: 0;
}

[data-word-forms] .item-card--row {
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
}

@media (max-width: 640px) {
    [data-word-cluster] {
        gap: 8px;
    }

    [data-word-shared-group] {
        gap: 8px;
    }

    [data-word-shared-stack] {
        gap: 8px;
    }

    [data-word-cluster-stack] {
        gap: 8px;
        padding-inline-start: 10px;
    }

    [data-word-entry-shell].content-container {
        --surface-quiet-radius: var(--surface-radius-shell-mobile);
        --content-body-inset-x: clamp(12px, 3.6vw, 16px);
        --content-body-inset-y: clamp(12px, 3.2vw, 14px);
    }

    [data-word-entry-shell] > .content-body {
        gap: 8px;
    }

    [data-word-entry-hero] {
        gap: 8px;
    }

    [data-word-entry-shell] .title-row > .text-title {
        font-size: clamp(24px, 8vw, 30px);
    }

    [data-word-entry-head] {
        --layout-stack-gap: 7px;
    }

    [data-word-entry-media].item-card {
        max-width: none;
        width: 100%;
        box-sizing: border-box;
        --item-card-padding: 8px;
        --item-card-radius: var(--surface-radius-shell-mobile);
    }

    [data-word-entry-media] [data-media-frame] {
        border-radius: calc(var(--surface-radius-shell-mobile) - 2px);
        max-inline-size: min(100%, 232px);
        max-block-size: clamp(124px, 44vw, 176px);
        margin-inline-start: 0;
    }

    [data-word-entry-media] [data-media-bar] {
        gap: 8px;
    }

    [data-word-equivalent-row] {
        padding: 8px 0;
    }

    [data-word-actions],
    [data-word-section],
    [data-example-list].list-shell,
    .content-card--example {
        --item-card-radius: var(--surface-radius-shell-mobile);
    }

    [data-word-section] {
        --surface-quiet-radius: var(--surface-radius-shell-mobile);
    }
}