/* The overlay shares the textarea's geometry and never receives input. */
.composer-example {
    position: absolute;
    display: block;
    box-sizing: border-box;
    border-style: solid;
    border-color: transparent;
    overflow: hidden;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    pointer-events: none;
    user-select: none;
    opacity: 1;
    transition: opacity var(--motion-duration-ambient) var(--motion-ease-ambient);
}
.composer-example[hidden] { display: none; }
.composer-example.is-fading {
    opacity: 0;
    /* First soften the edges, then dissolve the remaining centre. */
    transition-duration: calc(var(--motion-duration-ambient) * .75);
    transition-delay: calc(var(--motion-duration-ambient) * .25);
}
.has-composer-example::placeholder { color: transparent !important; opacity: 0 !important; }
.composer-example__ink {
    display: -webkit-box;
    width: fit-content;
    max-width: 100%;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--composer-example-lines, 3);
    overflow: hidden;
    color: var(--text-muted);
    background: linear-gradient(105deg, var(--text-muted) 15%, var(--text-main) 38%, var(--text-muted) 58%, var(--text-subtle) 80%);
    background-size: 260% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: composer-example-shimmer var(--motion-duration-shimmer) var(--motion-ease-ambient) infinite alternate var(--pane-ambient-play-state, running);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 35%, #000 65%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 35%, #000 65%, transparent);
    -webkit-mask-size: 400% 100%;
    mask-size: 400% 100%;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transition: mask-size var(--motion-duration-ambient) var(--motion-ease-ambient),
                -webkit-mask-size var(--motion-duration-ambient) var(--motion-ease-ambient);
}
.composer-example.is-fading .composer-example__ink {
    -webkit-mask-size: 70% 100%;
    mask-size: 70% 100%;
}
.composer-example.is-paused .composer-example__ink { animation-play-state: paused; }
@keyframes composer-example-shimmer {
    from { background-position: 100% 50%; }
    to { background-position: 0% 50%; }
}
.music-editor-body:has(.lyrics-prompt-tools) > .composer-example {
    /* Match the field: start half a button-height above the action. */
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - var(--music-editor-action-inset) - var(--composer-control-size) * 1.5), transparent calc(100% - var(--music-editor-action-inset)));
    mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - var(--music-editor-action-inset) - var(--composer-control-size) * 1.5), transparent calc(100% - var(--music-editor-action-inset)));
    -webkit-mask-position: top;
    mask-position: top;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.music-editor-body:has(> textarea:focus) > .composer-example,
.music-editor-body:has(.lyrics-prompt-tools[data-open="true"]) > .composer-example {
    /* Reveal all lines when editing or configuring generation. */
    -webkit-mask-size: 100% 300%;
    mask-size: 100% 300%;
}
.lyrics-prompt-tools {
    position: relative; display: flex; flex-direction: column; justify-content: flex-end;
    min-width: 0; padding: var(--gap-xs);
    /* The size owner never clips the panel. Both views keep their natural size. */
    overflow: visible;
}
.lyrics-prompt-trigger, .lyrics-prompt-submit {
    display: grid; place-items: center;
    width: var(--composer-control-size); height: var(--composer-control-size); padding: 0;
    border: 0; border-radius: var(--radius-pill); corner-shape: var(--corner-shape-round);
}
.lyrics-prompt-trigger {
    flex-shrink: 0; align-self: center;
    opacity: 1; visibility: visible;
    transition: opacity var(--transition-fast), visibility 0s;
}
.lyrics-prompt-tools[data-open="true"] > .lyrics-prompt-trigger {
    position: absolute; bottom: var(--gap-xs);
    opacity: 0; visibility: hidden;
    transition: opacity var(--transition-fast), visibility 0s var(--motion-duration-fast);
}
.lyrics-prompt-panel {
    position: absolute; inset-inline: var(--gap-xs); bottom: var(--gap-xs);
    display: flex; flex-direction: column; gap: var(--gap-sm);
    flex-shrink: 0;
    min-width: 0; padding: var(--composer-inset);
    border: 0; border-radius: var(--radius-base); corner-shape: var(--corner-shape-surface);
    background: var(--surface-dim);
    opacity: 0; visibility: hidden; transform: scale(var(--motion-scale-surface));
    transform-origin: bottom center;
    transition: opacity var(--transition-fast), transform var(--transition-fast),
                visibility 0s var(--motion-duration-fast);
}
.lyrics-prompt-tools[data-open="true"] > .lyrics-prompt-panel {
    position: relative; inset: auto;
    opacity: 1; visibility: visible; transform: none;
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility 0s;
}
.lyrics-prompt-top, .lyrics-prompt-footer { display: flex; align-items: center; gap: var(--gap-xs); min-width: 0; }
.lyrics-prompt-suggestions {
    display: flex; flex: 1; gap: var(--gap-sm); min-width: 0; overflow-x: auto; scrollbar-width: none;
    padding-right: calc(var(--gap-sm) * 4);
    scroll-padding-right: calc(var(--gap-sm) * 4);
}
.lyrics-prompt-suggestions::-webkit-scrollbar { display: none; }
.lyrics-prompt-suggestion { flex: 0 0 auto; padding: var(--gap-xs) var(--gap-sm); white-space: nowrap; font-size: var(--text-xs); }
.lyrics-prompt-nav, .lyrics-prompt-close {
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 var(--artifact-control-size); width: var(--artifact-control-size); height: var(--artifact-control-size); padding: 0; border-radius: var(--radius-pill); corner-shape: var(--corner-shape-round);
}
.lyrics-prompt-footer { justify-content: space-between; }
.lyrics-prompt-input {
    display: block; width: 100%; min-height: var(--composer-control-size); max-height: 7rem;
    padding: 0;
    resize: none;
}
.lyrics-prompt-submit { flex: 0 0 var(--composer-control-size); }
.lyrics-prompt-submit:disabled { background-color: var(--surface-active); color: var(--text-subtle); }
.lyrics-prompt-trigger > *, .lyrics-prompt-submit > * { grid-area: 1 / 1; }
.lyrics-prompt-counter { color: var(--text-subtle); font-size: var(--text-2xs); }
@media (prefers-reduced-motion: reduce) {
    .lyrics-prompt-tools > .lyrics-prompt-trigger,
    .lyrics-prompt-tools > .lyrics-prompt-panel { transition: none; }
    .music-editor-body > textarea,
    .music-editor-body > .composer-example { transition: none; }
    .composer-example, .composer-example.is-fading { transition: none; }
    .composer-example__ink {
        animation: none; background: none; -webkit-text-fill-color: currentColor;
        transition: none; -webkit-mask-image: none; mask-image: none;
    }
}
@media (forced-colors: active) {
    .music-editor-body > textarea,
    .music-editor-body > .composer-example { -webkit-mask-image: none; mask-image: none; }
    .composer-example__ink { background: none; -webkit-text-fill-color: currentColor; color: GrayText; }
}