.dorian-ai-narrative{width:100%;min-width:0}
.dorian-ai-narrative-controls{margin:.85em 0 1em}
.dorian-ai-narrative-progress{margin:0 0 .9em}
.dorian-ai-narrative-step{opacity:.45;display:flex;gap:.55em;align-items:center;margin:.35em 0;transition:opacity .2s ease}
.dorian-ai-narrative-step.is-active,.dorian-ai-narrative-step.is-done{opacity:1}
.dorian-ai-narrative-step .dot{display:inline-block;width:1.1em;text-align:center}
.dorian-ai-narrative-step.is-done .dot{font-size:.95em}
.dorian-ai-narrative-status{margin:.65em 0}
.dorian-ai-narrative-text{line-height:1.6;margin-top:1.1em}
.dorian-ai-narrative-text h3{margin:1.15em 0 .65em;line-height:1.22}
.dorian-ai-narrative-text p{margin:.7em 0}
.dorian-ai-narrative-tech{display:none}
.dorian-ai-narrative.is-complete .dorian-ai-narrative-controls{display:none!important}
.dorian-ai-narrative.is-distributed .dorian-ai-narrative-text{display:none!important}

/*
 * Sanfte Welle nur auf der aktuell aktiven Fortschrittszeile.
 * Der eigentliche Narrative-Text bleibt bewusst vollständig unbewegt.
 */
.dorian-ai-narrative-step.is-active > span:last-child{
    background-image:linear-gradient(
        100deg,
        #566356 0%,
        #566356 34%,
        #aab4aa 44%,
        #f4f7f3 50%,
        #aab4aa 56%,
        #566356 66%,
        #566356 100%
    );
    background-size:240% 100%;
    background-position:100% 0;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
    animation:dorian-ai-narrative-wave 1.9s ease-in-out infinite;
}

@keyframes dorian-ai-narrative-wave{
    0%{background-position:115% 0}
    100%{background-position:-115% 0}
}

@media (prefers-reduced-motion: reduce){
    .dorian-ai-narrative-step.is-active > span:last-child{
        animation:none;
        background:none;
        -webkit-text-fill-color:currentColor;
        color:inherit;
    }
}


/* Pending result: keep the final two-column layout occupied without exposing
   partial API text. The skeleton is replaced in-place when the result is ready. */
.dpe-narrative-pending [data-dpe-narrative-section]{display:block!important}
.dorian-ai-skeleton{width:100%;padding:.15em 0 .45em}
.dorian-ai-skeleton-line{
    display:block;
    width:var(--dorian-skeleton-width,90%);
    height:.82em;
    margin:.66em 0;
    border-radius:999px;
    background:linear-gradient(100deg,rgba(86,99,86,.08) 20%,rgba(86,99,86,.17) 45%,rgba(86,99,86,.08) 70%);
    background-size:240% 100%;
    animation:dorian-ai-skeleton-wave 2.1s ease-in-out infinite;
    animation-delay:var(--dorian-skeleton-delay,0ms);
}
@keyframes dorian-ai-skeleton-wave{
    0%{background-position:110% 0}
    100%{background-position:-110% 0}
}
.dpe-narrative-ready [data-dpe-narrative-section] > *:not(.dorian-ai-skeleton){
    animation:dorian-ai-result-in .38s ease both;
}
@keyframes dorian-ai-result-in{
    from{opacity:0;transform:translateY(4px)}
    to{opacity:1;transform:none}
}
.dorian-ai-narrative.is-finalizing .dorian-ai-narrative-controls{
    opacity:.25;
    transition:opacity .22s ease;
}
.dorian-ai-narrative-error{margin:.7em 0;color:inherit}

@media (prefers-reduced-motion: reduce){
    .dorian-ai-skeleton-line{animation:none}
    .dpe-narrative-ready [data-dpe-narrative-section] > *:not(.dorian-ai-skeleton){animation:none}
}

/* Standard / Direkt view selector. The account decides whether Direkt exists;
   this selector only changes the currently displayed narrative variant. */
.dorian-ai-narrative-variant-switch{
    display:block;
    margin:.15rem 0 .7rem;
}
.dorian-ai-variant-select-label{display:block;max-width:100%}
.dorian-ai-variant-select{
    appearance:auto;
    min-width:180px;
    max-width:100%;
    min-height:38px;
    padding:8px 34px 8px 12px;
    border:1px solid #cfd5da;
    border-radius:8px;
    background:#fff;
    color:inherit;
    font:inherit;
    font-size:.92rem;
    line-height:1.2;
    cursor:pointer;
    box-sizing:border-box;
}
.dorian-ai-variant-select:hover,.dorian-ai-variant-select:focus{background:#f5f7f8;border-color:#aeb7bf}
.dorian-ai-variant-select:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.dorian-ai-variant-select:disabled{cursor:default;opacity:.55}
.dorian-ai-variant-note{
    margin:-.15rem 0 .9rem;
    max-width:48rem;
    font-size:.92em;
    line-height:1.45;
    opacity:.72;
}

/* Direkt conversation starters. They intentionally look like a useful tool,
   not like a technical prompt/code block. */
.dorian-ai-chat-prompt{
    position:relative;
    margin:1rem 0;
    padding:1rem 1rem .9rem;
    border:1px solid rgba(86,99,86,.18);
    border-radius:12px;
    background:rgba(86,99,86,.045);
}
.dorian-ai-chat-prompt-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.75rem;
    margin-bottom:.35rem;
}
.dorian-ai-chat-prompt p{margin:.35rem 0 .2rem!important}
.dorian-ai-copy-prompt{
    appearance:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:2.15rem;
    height:2.15rem;
    flex:0 0 2.15rem;
    border:1px solid rgba(86,99,86,.20);
    border-radius:9px;
    background:#fff;
    color:inherit;
    cursor:pointer;
    font:inherit;
    font-size:1.05rem;
    line-height:1;
    transition:transform .12s ease,background .15s ease;
}
.dorian-ai-copy-prompt:hover{transform:translateY(-1px)}
.dorian-ai-copy-prompt.is-copied{background:rgba(86,99,86,.09)}
.dorian-ai-copy-status{
    display:block;
    min-height:1em;
    margin-top:.25rem;
    font-size:.82em;
    opacity:.72;
}

@media (max-width:640px){
    .dorian-ai-narrative-variant-switch{width:100%}
    .dorian-ai-variant-select-label,.dorian-ai-variant-select{width:100%}
    .dorian-ai-variant-button{flex:1}
    .dorian-ai-chat-prompt{padding:.9rem}
}