.assistant-panel {
    display: none;
    flex: 1 1 0%;
    min-height: 0;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: transparent;
    overflow-y: auto;
    flex-direction: column;
}

.lyrics_container.layout-assistant {
    /* Make assistant layout occupy the full content area like other layouts */
    display: flex;
    align-items: stretch;
    gap: 0;
}

/* hide other sibling panels when assistant layout is active */
.lyrics_container.layout-assistant textarea:not(.assistant-textarea),
.lyrics_container.layout-assistant .guide-panel,
.lyrics_container.layout-assistant .lyrics-output,
.lyrics_container.layout-assistant .tab-panel,
.lyrics_container.layout-assistant .rhythm-panel {
    display: none !important;
}

/* ensure the assistant-panel element becomes the sole visible, full-size panel */
.lyrics_container #assistant-panel {
    /* assistant panel hidden by default unless its parent container has the layout-assistant class */
    display: none;
}

.lyrics_container.layout-assistant #assistant-panel {
    display: flex !important;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
}

body.assistant-layout-active .header,
body.assistant-layout-active .layout-divider {
    display: none;
}

body.assistant-layout-active .main-content {
    gap: 0;
}

body.assistant-layout-active .app-layout {
    padding-top: 0;
}

body.assistant-layout-active .lyrics_container.layout-assistant {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 30px;
}

body.assistant-layout-active .lyrics_container.layout-assistant #assistant-panel {
    height: 100%;
}

body.assistant-layout-active .assistant-panel {
    padding-top: 0;
}

body.assistant-layout-active .assistant-toolbar {
    margin-top: 0;
}

.assistant-panel .song-assistant-dialog {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    margin: 0;
    /* Make assistant visually consistent with the app's theme by removing
       the white inner card and using a subtle transparent background */
    background: transparent;
    border-radius: 0;
    overflow: hidden;
}

.song-assistant-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--rgba-0-0-0-0_08);
}

.song-assistant-header h2 {
    margin: 0;
    font-size: 24px;
    letter-spacing: 0.4px;
}

.song-assistant-body {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.assistant-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 24px 16px;
    background: var(--theme-surface-1);
    border: none;
    border-radius: 16px;
    margin: 0 0 16px;
}

.assistant-toolbar-title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--theme-text);
}

.assistant-workspace {
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
    gap: 16px;
    min-height: 0;

    max-width: 100%;
}

.assistant-menu {
    flex: 0 0 220px;
    padding: 24px 16px;
    background: var(--theme-surface-1);
    border: 1px solid var(--theme-border-soft);
    border-radius: 16px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    --assistant-btn-background: var(--layout-btn-background, var(--rgba-255-255-255-0_25));
    --assistant-btn-border: var(--layout-btn-border, var(--rgba-255-255-255-0_45));
    --assistant-btn-color: var(--layout-btn-color, var(--theme-text));
    --assistant-btn-hover: var(--layout-btn-hover, var(--rgba-255-255-255-0_4));
    --assistant-btn-hover-border: var(--layout-btn-hover-border, var(--rgba-255-255-255-0_7));
    --assistant-btn-active-bg: var(--layout-btn-active-bg, var(--theme-gradient, var(--theme-accent)));
    --assistant-btn-active-color: var(--layout-btn-active-color, var(--theme-text));
    --assistant-btn-focus-outline: var(--layout-btn-focus-outline, var(--rgba-255-112-67-0_35));
}

.assistant-menu-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--assistant-btn-border);
    background: var(--assistant-btn-background);
    padding: 12px 16px;
    text-align: left;
    width: 100%;
    cursor: pointer;
    font-weight: 600;
    border-radius: 12px;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    color: var(--assistant-btn-color);
    font-size: 15px;
    line-height: 1.3;
}

.assistant-menu-btn-icon {
    flex: 0 0 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    color: currentColor;
}

.assistant-menu-btn-label {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    color: currentColor;
}

.assistant-menu-btn:hover,
.assistant-menu-btn:focus-visible {
    background: var(--assistant-btn-background);
    border-color: var(--assistant-btn-hover-border);
    color: var(--assistant-btn-color);
    transform: translateY(-1px);
}

.assistant-menu-btn:focus-visible {
    outline: 2px solid var(--assistant-btn-focus-outline);
    outline-offset: 2px;
}

.assistant-menu-btn.is-active,
.assistant-menu-btn[aria-current="true"],
.assistant-menu-btn.active {
    background: var(--assistant-btn-active-bg);
    color: var(--assistant-btn-active-color);
    border-color: transparent;
    transform: translateY(0);
}

.assistant-panels {
    flex: 1 1 auto;
    padding: 24px;
    margin: 0;
    overflow: auto;
    background: var(--rgba-255-255-255-0_24);
    border: 1px solid var(--theme-dictionary-synonym-border, var(--theme-border));
    border-radius: 16px;
    backdrop-filter: blur(4px);
    position: relative;
    min-height: 0;
}

.assistant-panels::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

.assistant-fragment {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--rgba-255-255-255-0_95);
    border: 1px solid var(--rgba-0-0-0-0_06);
    padding: 8px 14px 12px;
    border-radius: 12px;
    width: 100%;
    box-sizing: border-box;
}

.assistant-fragment:hover {
    transform: translateY(-1px);
}

/* subtle highlight when a new fragment appears */
.assistant-fragment.is-new {
    animation: assistant-fragment-pulse 600ms ease both;
}

@keyframes assistant-fragment-pulse {
}

.couplet-lexicals-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
}

.couplet-lexicals-list .is-muted {
    margin: 0;
    padding: 24px 16px;
    border-radius: 12px;
    background: var(--rgba-0-0-0-0_04);
    color: var(--rgba-0-0-0-0_55);
    text-align: center;
}

.couplet-stories-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
}

.couplet-stories-list .is-muted {
    margin: 0;
    padding: 24px 16px;
    border-radius: 12px;
    background: var(--rgba-0-0-0-0_04);
    color: var(--rgba-0-0-0-0_55);
    text-align: center;
}

.assistant-history-lexical {
    margin: 8px 0 12px;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.assistant-history-lexical .writing-lexical-block {
    width: 100%;
    box-sizing: border-box;
}

.assistant-lexical-editor {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#ideation-step-lexical .assistant-history-lexical[hidden] {
    display: none;
}

#ideation-step-lexical.is-history-active .assistant-history-lexical {
    display: block;
    margin-top: 12px;
}

#ideation-step-lexical.is-history-active .assistant-helper {
    display: none;
}

.assistant-story-card-body {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
}

.assistant-story-text {
    flex: 1 1 260px;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.assistant-story-text .assistant-textarea {
    width: 100%;
}

.assistant-story-lexical {
    flex: 1 1 240px;
    min-width: 220px;
    max-width: 100%;
    overflow: hidden;
}

.assistant-story-lexical .writing-lexical-block {
    width: 100%;
    box-sizing: border-box;
}

.assistant-story-lexical .writing-lexical-block + .writing-lexical-block {
    margin-top: 12px;
}

.writing-section-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.3px;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--theme-gradient);
    box-shadow: 0 6px 18px var(--rgba-94-96-206-0_28);
}

.writing-section-row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: stretch;
    width: 100%;
}

.writing-lyrics-wrapper,
.writing-story-wrapper {
    flex: 1 1 calc(50% - 12px);
    max-width: calc(50% - 12px);
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-self: stretch;
}

.writing-container[data-lyrics-width-applied] .writing-lyrics-wrapper {
    flex: 1 1 var(--writing-lyrics-max-width);
    max-width: var(--writing-lyrics-max-width);
}

.writing-container[data-lyrics-width-applied] .writing-story-wrapper {
    flex: 1 1 var(--writing-lyrics-max-width);
    max-width: var(--writing-lyrics-max-width);
}

.writing-container[data-lyrics-width-applied] .writing-lyrics {
    max-width: var(--writing-lyrics-max-width);
}

.writing-lyrics {
    min-height: 220px !important;
    flex: 1 1 auto;
    height: 100%;
    width: 100%;
    resize: vertical;
}

.writing-story-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--rgba-255-255-255-0_68);
    border: 1px solid var(--rgba-0-0-0-0_08);
    min-height: 220px;
    height: 100%;
    width: 100%;
}

.writing-story-content {
    white-space: pre-wrap;
    font-size: 14px;
    color: var(--theme-text);
    line-height: 1.5;
    flex: 1 1 auto;
    display: flex;
    align-items: flex-start;
}

.writing-story-content.is-empty {
    color: var(--rgba-0-0-0-0_45);
    font-style: italic;
}

.writing-notes-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.assistant-fragment-label {
    font-weight: 700;
    color: var(--theme-text);
}

.assistant-fragment-lexical .assistant-fragment-label {
    color: var(--theme-text);
}

.assistant-fragment-story .assistant-fragment-label {
    color: var(--theme-text);
}

.assistant-fragment textarea {
    min-height: 140px;
    background: var(--rgba-255-255-255-0_98);
    border: 1px solid var(--rgba-0-0-0-0_06);
    padding: 12px 14px;
    border-radius: 10px;
}

.assistant-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: transparent;
    border-radius: 12px;
    padding: 12px;
}

.assistant-lead {
    margin-bottom: 1rem;
    color: var(--rgba-0-0-0-0_75);
    line-height: 1.6;
}

.assistant-stepper {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0 18px;
    padding: 8px 12px;
    border-radius: 14px;
    background: var(--assistant-stepper-surface, transparent);
    flex-wrap: wrap;
    justify-content: center;
}

.assistant-stepper-node {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
    color: var(--assistant-step-default-text);
}

.assistant-stepper-node:focus-visible {
    outline: 2px solid var(--theme-focus);
    outline-offset: 2px;
}

.assistant-stepper-node.is-disabled {
    pointer-events: none;
    opacity: 0.5;
}

.assistant-stepper-bubble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--assistant-step-bubble-size, 36px);
    height: var(--assistant-step-bubble-size, 36px);
    border-radius: 50%;
    background: var(--assistant-step-default-bg);
    border: 1px solid var(--assistant-step-default-border);
    color: inherit;
    font-weight: 700;
    font-size: 16px;
    box-shadow: var(--assistant-step-default-shadow, none);
    transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, color 0.25s ease, border 0.25s ease;
}

.assistant-stepper-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: inherit;
    text-transform: uppercase;
}

.assistant-stepper-node[data-step="emotion"] .assistant-stepper-label,
.assistant-stepper-node[data-step="theme"] .assistant-stepper-label,
.assistant-stepper-node[data-step="promise"] .assistant-stepper-label {
    font-weight: 800;
}

.assistant-stepper-node.is-active {
    color: var(--assistant-step-active-text);
}

.assistant-stepper-node.is-active .assistant-stepper-bubble {
    background-image: var(--assistant-step-active-gradient);
    border-color: transparent;
    color: var(--assistant-step-active-text);
    box-shadow: var(--assistant-step-active-shadow);
}

.assistant-stepper-node.is-complete {
    color: var(--assistant-step-complete-text);
}

.assistant-stepper-node.is-complete .assistant-stepper-bubble {
    background: var(--assistant-step-complete-bg);
    border-color: var(--assistant-step-complete-border);
    color: var(--assistant-step-complete-text);
    box-shadow: var(--assistant-step-complete-shadow);
}

.assistant-stepper-node.is-pending {
    color: var(--assistant-step-default-text);
}

.assistant-stepper-node:not(.is-active):not(.is-complete):hover .assistant-stepper-bubble {
    transform: translateY(-2px);
    box-shadow: var(--assistant-step-hover-shadow);
}

.assistant-stepper-connector {
    flex: 1 1 32px;
    height: 2px;
    border-radius: 999px;
    background: var(--assistant-step-connector);
    transition: background 0.25s ease;
    pointer-events: none;
}

.assistant-stepper-connector.is-complete {
    background: var(--assistant-step-complete-border);
}

.assistant-stepper-connector.is-active:not(.is-complete) {
    background: var(--assistant-step-active-connector, var(--assistant-step-connector));
}

.assistant-steps {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.assistant-step {
    display: none;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    margin-bottom: 6px;
    padding-top: 4px;
}

.assistant-step.is-visible {
    display: block;
    opacity: 1;
    transform: none;
}

.assistant-step.is-complete .assistant-label {
    color: var(--assistant-step-complete-text, var(--assistant-step-default-text));
}

.assistant-step.is-active {
    display: block;
    opacity: 1;
    transform: none;
}

.assistant-step[aria-hidden="false"] {
    display: block;
}

.assistant-step {
    --assistant-step-animation-duration: 1.3s;
}

.assistant-step.is-entering {
    animation: intention-step-fade var(--assistant-step-animation-duration, 1.3s) ease forwards;
}

@keyframes intention-step-fade {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.assistant-tip {
    margin: 0.5rem 0 1rem;
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--theme-accent, #ff7043);
    background: var(--rgba-0-0-0-0_04);
    color: var(--rgba-0-0-0-0_7);
    font-size: 0.95rem;
}

.assistant-rhyme-guide {
    margin: 1rem 0 1.25rem;
    padding: 0.75rem 1rem;
    background: var(--rgba-0-0-0-0_03);
    border-radius: 10px;
}

.assistant-rhyme-guide ul {
    margin: 0.5rem 0 0 1.2rem;
    padding: 0;
    list-style: disc;
}

.assistant-rhyme-guide li {
    margin-bottom: 0.35rem;
}

.writing-rhyme-summary {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    background: var(--rgba-0-0-0-0_04);
    font-weight: 600;
    color: var(--theme-text);
}

.assistant-note {
    margin-top: 1rem;
    font-style: italic;
    color: var(--rgba-0-0-0-0_75);
}

/* hide panels via the hidden attribute (clean, accessible) */
.assistant-panels > .assistant-panel[hidden] {
    display: none !important;
}

/* visible panel should fill the panels area */
.assistant-panels > .assistant-panel:not([hidden]) {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.song-assistant-progress {
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 16px;
    margin: 0;
    border-radius: 16px;
    background: var(--rgba-0-0-0-0_04);
    gap: 10px;
    position: sticky;
    top: 0;
    max-height: calc(100vh - 220px);
    overflow-y: auto;
}

.progress-step {
    display: block;
}

.progress-step-btn {
    width: 100%;
    border: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    text-align: left;
    background: var(--rgba-255-255-255-0_8);
    color: var(--rgba-0-0-0-0_75);
    letter-spacing: 0.4px;
}

.progress-step-btn:hover,
.progress-step-btn:focus-visible {
    background: var(--rgba-255-255-255-0_98);
    color: var(--theme-text);
    outline: none;
    transform: translateX(2px);
}

.progress-step-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--rgba-255-112-67-0_18);
    color: var(--theme-text);
    font-size: 13px;
    font-weight: 700;
}

.progress-step-label {
    flex: 1 1 auto;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.6px;
}

.progress-step.is-active .progress-step-btn {
    background: var(--theme-gradient);
    color: var(--theme-text);
}

.progress-step.is-active .progress-step-index {
    background: var(--theme-surface-1);
    color: var(--theme-text);
}

.progress-step.is-complete .progress-step-btn {
    background: var(--rgba-76-175-80-0_16);
    color: var(--theme-text);
}

.progress-step.is-complete .progress-step-index {
    background: var(--theme-surface-1);
    color: var(--theme-text);
}

.song-assistant-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1 1 auto;
    min-width: 0;
}

/* Make the story step expand so the textarea fills available space */
.song-assistant-step[data-step="2"] {
    display: flex;
    flex-direction: column;
    min-height: 0; /* allow children to shrink properly */
    flex: 1 1 auto;
}

.song-assistant-step[data-step="2"] .assistant-textarea {
    flex: 1 1 auto;
    min-height: 0; /* ensure it can shrink/grow with container */
    height: auto; /* override rows hint */
}

.song-assistant-step h3 {
    margin-top: 0;
    letter-spacing: 0.3px;
}

.song-assistant-step p {
    margin-bottom: 12px;
    color: var(--rgba-0-0-0-0_65);
    font-size: 14px;
}

.assistant-label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 12px;
    color: var(--theme-text, #111111);
}

.assistant-label.is-filled {
    color: var(--assistant-step-complete-text, var(--assistant-step-default-text));
}

.assistant-helper {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--rgba-0-0-0-0_6);
    background: var(--assistant-helper-bg, var(--rgba-94-96-206-0_08));
    border: 1px solid var(--assistant-helper-border, var(--rgba-94-96-206-0_18));
    border-radius: 10px;
    padding: 10px 14px;
    box-shadow: var(--assistant-helper-shadow, none);
    white-space: pre-line;
}

.assistant-helper.is-hidden {
    display: none;
}

.assistant-rhyme-guide.is-hidden {
    display: none;
}

.assistant-step.is-filled .assistant-label {
    color: var(--assistant-step-complete-text, var(--assistant-step-default-text));
}

.assistant-input,
.assistant-textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border-radius: 10px;
    border: 1px solid var(--rgba-0-0-0-0_12);
    padding: 10px 14px;
    font-size: 16px;
    background: var(--rgba-255-255-255-0_95);
}

.assistant-input.is-invalid,
.assistant-textarea.is-invalid {
    border-color: var(--rgba-229-57-53-0_85);
}

.assistant-textarea {
    line-height: 1.5;
    resize: vertical;
    min-height: calc(2 * 1.5em + 20px);
    max-height: min(45vh, 520px);
    overflow: auto;
}

.structure-builder {
    display: grid;
    grid-template-columns: minmax(0, 220px) 1fr;
    gap: 20px;
}

.structure-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border-radius: 12px;
    background: var(--rgba-0-0-0-0_05);
}

.structure-option {
    border: none;
    border-radius: 8px;
    padding: 10px 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    cursor: pointer;
    background: var(--rgba-255-255-255-0_9);
}

.structure-option:hover {
    transform: translateY(-2px);
    background: var(--rgba-255-255-255-1);
}

.structure-sequence {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--rgba-0-0-0-0_03);
    padding: 16px;
    border-radius: 12px;
}

.structure-sequence h4 {
    margin: 0;
    letter-spacing: 0.4px;
}

.structure-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.structure-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--rgba-255-112-67-0_18);
    font-weight: 600;
    letter-spacing: 0.4px;
}
.structure-item.dragging {
    opacity: 0.5;
    transform: scale(0.98);
}
.structure-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    height: 42px;
    border-radius: 999px;
    border: 2px dashed var(--rgba-255-112-67-0_45);
    background: var(--rgba-255-112-67-0_12);
    margin-bottom: 8px;
}

.structure-item button {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    color: var(--rgba-0-0-0-0_6);
}

.structure-empty {
    margin: 0;
    font-size: 14px;
    color: var(--rgba-0-0-0-0_55);
}

.structure-empty.is-warning {
    color: var(--theme-text);
    font-weight: 600;
}

.structure-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.writing-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.history-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.history-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    border-radius: 14px;
    background: var(--rgba-255-255-255-0_24);
    border: 1px solid var(--rgba-255-255-255-0_45);
    backdrop-filter: blur(4px);
}

.writing-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    border-radius: 14px;
    background: var(--rgba-255-255-255-0_24);
    border: 1px solid var(--rgba-255-255-255-0_45);
    backdrop-filter: blur(4px);
}

.writing-lexical-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--rgba-255-255-255-0_68);
    border: 1px solid var(--rgba-0-0-0-0_08);
}

.writing-lexical-title,
.writing-lyrics-label,
.writing-story-label,
.writing-ideas-label,
.history-label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 12px;
    color: var(--rgba-0-0-0-0_65);
}

.writing-lexical-content {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.writing-lexical-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--theme-dictionary-pill-bg, var(--rgba-255-112-67-0_16));
    color: var(--theme-dictionary-pill-text, var(--theme-text));
    border: 1px solid var(--theme-dictionary-pill-border, var(--rgba-0-0-0-0_08));
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.2px;
}

.writing-lexical-pill[role="button"] {
    cursor: pointer;
}

.writing-lexical-pill[role="button"]:hover,
.writing-lexical-pill[role="button"]:focus-visible {
    background: var(--theme-dictionary-pill-hover-bg, var(--rgba-255-112-67-0_28));
    color: var(--theme-dictionary-pill-text, var(--theme-text));
    transform: translateY(-1px);
    outline: none;
}

.writing-lexical-pill.is-empty {
    background: var(--rgba-0-0-0-0_06);
    color: var(--rgba-0-0-0-0_45);
    font-weight: 500;
}

.writing-ideas {
    min-height: 96px !important;
}

.history-section-row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: stretch;
    width: 100%;
}

.history-column {
    flex: 1 1 calc(50% - 12px);
    max-width: calc(50% - 12px);
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.history-textarea {
    min-height: 150px !important;
    flex: 1 1 auto;
}

@media (max-width: 900px) {
    .writing-section-row {
        flex-direction: column;
    }

    .writing-lyrics-wrapper,
    .writing-story-wrapper {
        min-width: 0;
        width: 100%;
    }

    .history-section-row {
        flex-direction: column;
    }

    .history-column {
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }
}

.assistant-btn {
    border: none;
    border-radius: 10px;
    padding: 10px 16px;
    font-weight: 600;
    width: 220px;
    flex: 0 0 220px;
    background: var(--rgba-255-112-67-0_16);
    color: var(--theme-text);
}

.assistant-btn:hover {
    transform: translateY(-1px);
    background: var(--rgba-255-112-67-0_27);
}

.assistant-btn-primary {
    background: var(--theme-gradient);
    color: var(--theme-text);
}

.assistant-btn-primary:hover {
    background: var(--theme-gradient);
}

.assistant-btn-secondary {
    background: var(--rgba-0-0-0-0_08);
    color: var(--theme-text);
}

.assistant-btn-secondary:hover {
    background: var(--rgba-0-0-0-0_12);
}

.song-assistant-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 24px 20px;
    border-top: 1px solid var(--rgba-0-0-0-0_08);
    background: var(--rgba-255-255-255-0_9);
}

.song-assistant-navigation {
    display: inline-flex;
    gap: 12px;
    align-items: center;
}

.song-assistant-review {
    margin-top: 18px;
    padding: 16px;
    border-radius: 12px;
    background: var(--rgba-0-0-0-0_03);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.song-assistant-review dl {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 18px;
}

.song-assistant-review dt {
    font-weight: 700;
    letter-spacing: 0.4px;
}

.song-assistant-review dd {
    margin: 0;
    color: var(--rgba-0-0-0-0_75);
}

.assistant-btn:disabled,
.assistant-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.song-assistant-dialog,
.song-assistant-body {
    scrollbar-width: thin;
    scrollbar-color: var(--theme-accent, #5e60ce) var(--theme-surface-2, rgba(0, 0, 0, 0.05));
}

.song-assistant-dialog::-webkit-scrollbar,
.song-assistant-body::-webkit-scrollbar {
    width: 10px;
    background: var(--theme-surface-2, rgba(0, 0, 0, 0.05));
}

.song-assistant-dialog::-webkit-scrollbar-track,
.song-assistant-body::-webkit-scrollbar-track {
    background: var(--theme-surface-2, rgba(0, 0, 0, 0.05));
}

.song-assistant-dialog::-webkit-scrollbar-thumb,
.song-assistant-body::-webkit-scrollbar-thumb {
    background: var(--theme-accent, rgba(0, 0, 0, 0.18));
    border-radius: 999px;
}

.song-assistant-dialog::-webkit-scrollbar-thumb:hover,
.song-assistant-body::-webkit-scrollbar-thumb:hover {
    background: var(--theme-accent-strong, var(--theme-accent, rgba(0, 0, 0, 0.3)));
}

@media (max-width: 880px) {
    .assistant-panel {
        padding: 12px;
    }

    .assistant-panel .song-assistant-dialog {
        width: 100%;
    }

    .assistant-workspace {
        flex-direction: column;
        gap: 12px;
    }

    .assistant-menu {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        padding: 16px;
        max-height: none;
    }

    .assistant-menu-btn {
        flex: 1 1 calc(50% - 8px);
    }

    .structure-builder {
        grid-template-columns: 1fr;
    }

    .structure-options {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
}

.lyrics_container.layout-guide .lyrics-input-wrapper,
.lyrics_container.layout-chords .lyrics-input-wrapper,
.lyrics_container.layout-rhythm .lyrics-input-wrapper,
.lyrics_container.layout-tab .lyrics-input-wrapper,
.lyrics_container.layout-assistant .lyrics-input-wrapper {
    display: none;
}

/* Global textarea: neutral, full-width by default. Specific components override with
   more precise classes (e.g. .assistant-textarea). */
textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 120px;
    padding: 12px 14px;
    font-size: 15px;
    line-height: 1.4;
    border: 1px solid var(--rgba-0-0-0-0_08);
    border-radius: 10px;
    resize: vertical;
    background: var(--rgba-255-255-255-0_92);
    color: var(--theme-text);
    box-sizing: border-box;
}

/* Override global textarea rules for assistant-specific textareas so they remain
   visible and look polished inside assistant panels. */
.assistant-textarea {
    flex: 1 1 auto !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 140px !important;
    display: block !important;
    box-sizing: border-box !important;
    background: var(--rgba-255-255-255-0_98) !important;
    color: var(--theme-text) !important;
    border: 1px solid var(--rgba-0-0-0-0_06) !important;
    padding: 14px 16px !important;
    border-radius: 12px !important;
}

#song-assistant-lexical-input {
    flex: 0 0 auto !important;
    height: calc(2 * 1.5em + 12px) !important;
    min-height: calc(2 * 1.5em + 12px) !important;
}

textarea.writing-lyrics {
    white-space: pre-wrap !important;
    word-break: break-word;
    min-height: 220px !important;
}

.assistant-textarea::placeholder {
    color: var(--rgba-0-0-0-0_45) !important;
}

.assistant-textarea:focus {
    outline: none !important;
    border-color: var(--rgba-33-150-243-0_9) !important;
}

#panel-history .assistant-textarea:first-of-type {
    flex: 1 1 auto;
    min-height: 220px !important;
}

@media (max-width: 1024px) {
    .topbar {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 18px;
        padding: 16px 24px;
    }

    .topbar-left {
        width: 100%;
        justify-content: center;
    }

    .topbar-center {
        width: 100%;
    }

    .topbar-actions {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .topbar-actions-buttons {
        flex: 1 1 auto;
        flex-wrap: wrap;
        justify-content: center;
    }

    .topbar-selectors {
        width: 100%;
    }

    .topbar-meta {
        width: 100%;
        align-items: stretch;
        gap: 18px;
    }

    .topbar-right {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 16px;
        margin-left: 0;
    }

    .topbar-account {
        width: 100%;
        max-width: 360px;
    }

    .header {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

    .assistant-story-card-body {
        flex-direction: column;
    }

    .assistant-story-text,
    .assistant-story-lexical {
        min-width: 0;
        width: 100%;
    }

    .writing-section-row {
        flex-direction: column;
    }

    .writing-lyrics-wrapper,
    .writing-story-wrapper {
        min-width: 0;
        width: 100%;
    }

    .header-top {
        gap: 16px;
    }

    .header-top-controls {
        width: 100%;
        justify-content: center;
    }

    .header-top-controls .header-quick-controls {
        justify-content: center;
    }

    .header-top-controls .header-rhythm {
        margin-left: 0;
        justify-content: center;
    }

    .header-bottom {
        flex-direction: column;
        align-items: stretch;
    }

    .header-rhythm {
        margin-left: 0;
        justify-content: center;
    }

    .header-left,
    .header-center,
    .header-right {
        width: 100%;
    }

    .header-center {
        order: 2;
    }

    .header-right {
        justify-content: center;
    }

    .header-right-blocks {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
    }

    .control-stack {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .control-panel {
        width: 100%;
    }

    .instrument-stack {
        align-items: stretch;
    }

    .instrument-toggle {
        flex-direction: row;
        justify-content: center;
        gap: 12px;
    }

    .instrument-btn {
        flex: 1 1 auto;
        min-width: 0;
    }

    .layout-toggle {
        width: 100%;
    }

    .lyrics_container {
        gap: 16px;
    }

    .rhythm-panel {
        gap: 16px;
    }

    .rhythm-saved {
        border-right: none;
        border-bottom: 1px solid var(--rgba-0-0-0-0_1);
        padding-right: 0;
        padding-bottom: 16px;
    }

    .rhythm-generator {
        padding-left: 0;
    }

}

@media (max-width: 768px) {
    .account-settings {
        flex-direction: column;
        padding: 0 16px 32px;
        gap: 20px;
    }

    .account-settings-sidebar {
        background: var(--rgba-255-255-255-0_9);
        border-radius: 16px;
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
        padding: 16px;
    }

    .account-settings-group-label {
        width: 100%;
        text-align: center;
    }

    .account-settings-nav {
        flex-direction: row;
        flex-wrap: wrap;
        flex: 1 1 100%;
    }

    .account-settings-nav-button {
        flex: 1 1 140px;
        justify-content: center;
    }

    .account-settings-separator {
        width: 100%;
    }

    .account-details-row {
        grid-template-columns: 1fr;
    }

    .topbar {
        padding: 14px 20px;
        gap: 16px;
    }

    .topbar-left {
        justify-content: center;
    }

    .topbar-actions {
        position: relative;
        flex-direction: row;
        align-items: center;
    }

    .topbar-actions-buttons {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        min-width: 220px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 12px;
        border-radius: 16px;
        border: 1px solid var(--theme-border-soft);
        background: var(--theme-surface-2);
        box-shadow: var(--theme-shadow, none);
        z-index: 20;
    }

    .topbar-actions.is-open .topbar-actions-buttons {
        display: flex;
    }

    .topbar-actions .export-buttons {
        flex-direction: column;
        width: 100%;
    }

    .topbar-actions-buttons .icon-btn,
    .topbar-actions-buttons .export-btn {
        width: 100%;
        justify-content: center;
    }

    .topbar-actions-toggle {
        display: inline-flex;
        order: 2;
    }

    .topbar-selectors {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .sidebar-rail-toggle {
        width: 100%;
        justify-content: center;
    }

    .topbar-meta {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .topbar-right {
        align-items: stretch;
    }

    .topbar-account {
        width: 100%;
    }

    .header {
        gap: 1px;
    }

    .header-top-controls {
        width: 100%;
        justify-content: center;
    }

    .header-top-controls .header-quick-controls {
        justify-content: center;
    }

    .header-bottom {
        align-items: stretch;
        gap: 18px;
    }

    .header-rhythm {
        margin-left: 0;
        justify-content: center;
        width: 100%;
    }

    .assistant-story-card-body {
        flex-direction: column;
    }

    .assistant-story-text,
    .assistant-story-lexical {
        min-width: 0;
        width: 100%;
    }

    .title-author {
        width: 100%;
        max-width: none;
    }

    .title-input {
        font-size: 22px;
    }

    .header-center {
        order: 1;
    }

    .rhythm-primary-display {
        justify-content: center;
        text-align: center;
    }

    .layout-toggle {
        justify-content: center;
        width: 100%;
    }

    .layout-btn {
        flex: 1 1 48px;
    }

    .header-right-blocks {
        gap: 14px;
    }

    .instrument-stack {
        align-items: stretch;
    }

    .instrument-toggle {
        flex-direction: row;
        gap: 12px;
    }

    .instrument-btn {
        flex: 1 1 48px;
        min-width: 0;
        flex-direction: row;
        gap: 8px;
    }

    .instrument-icon {
        font-size: 18px;
    }

    .instrument-label {
        font-size: 12px;
    }

    .control-stack {
        align-items: stretch;
    }

    .control-panel {
        width: 100%;
    }

    .lyrics_container {
        flex-direction: column;
    }

    .rhythm-panel {
        flex-direction: column;
    }

    .rhythm-random-list {
        grid-template-columns: 1fr;
    }

    .rhythm-legend ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-left: 0;
    }

    .rhythm-legend li {
        font-size: 13px;
    }

    .guide-panel {
        order: 3;
    }

    .lyrics-output,
    #tab-panel,
    #guide-panel,
    #lyrics-input {
        width: 100%;
    }

    .lyrics_container.layout-lyrics #lyrics-input {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .tab-toolbar {
        flex-wrap: wrap;
    }

    .sidebar {
        padding: 12px;
    }
}

html.theme-claire .lyrics_container,
html.theme-claire .assistant-panel,
html.theme-claire .song-assistant-dialog,
html.theme-claire #guide-panel,
html.theme-claire #tab-panel,
html.theme-claire #rhythm-panel {
    background: var(--claire-surface);
    color: var(--claire-text);
}

html.theme-claire .assistant-menu {
    background: var(--claire-surface-soft);
    border-color: var(--claire-border-soft);
    border-right-color: transparent;
    --assistant-btn-background: var(--claire-surface-strong);
    --assistant-btn-border: var(--claire-border-soft);
    --assistant-btn-color: var(--claire-text-muted);
    --assistant-btn-hover: linear-gradient(135deg, var(--rgba-94-96-206-0_12), var(--rgba-100-223-223-0_16));
    --assistant-btn-hover-border: var(--rgba-94-96-206-0_32);
    --assistant-btn-active-bg: var(--theme-gradient, linear-gradient(135deg, var(--rgba-94-96-206-0_92), var(--rgba-100-223-223-0_85)));
    --assistant-btn-active-color: var(--theme-text-inverse);
    --assistant-btn-focus-outline: var(--rgba-94-96-206-0_35);
}

html.theme-sombre .lyrics_container,
html.theme-sombre .assistant-panel,
html.theme-sombre .song-assistant-dialog,
html.theme-sombre #guide-panel,
html.theme-sombre #tab-panel,
html.theme-sombre #rhythm-panel {
    background: var(--modern-surface-1);
    border-color: var(--modern-border);
    color: var(--modern-text);
}

html.theme-sombre .assistant-menu {
    background: var(--modern-surface-1);
    border-color: var(--modern-border-soft);
    border-right-color: transparent;
    --assistant-btn-background: var(--modern-surface-1);
    --assistant-btn-border: var(--modern-border);
    --assistant-btn-color: var(--modern-text-muted);
    --assistant-btn-hover: var(--modern-surface-2);
    --assistant-btn-hover-border: var(--modern-border);
    --assistant-btn-active-bg: var(--theme-gradient, linear-gradient(135deg, var(--modern-accent), var(--modern-accent-strong)));
    --assistant-btn-active-color: var(--modern-text-inverse);
    --assistant-btn-focus-outline: var(--modern-focus);
}

html.theme-sombre .assistant-menu {
    --assistant-btn-color: var(--modern-menu-inactive);
}