body.design-study {
    overflow: hidden;
    --input-text-color: #fffffe;
    --input-placeholder-color: #fffffe;
}



.design-study #builtin-overlay {
    z-index: 20;
}

#builtin-overlay[data-active-view="input"] ~ .shell-mode-access {
    display: inline;
}

.extract-design-view {
    min-height: 0;
}

.design-stage {
    display: grid;
    gap: 14px;
    min-height: 0;
    overflow: hidden;
}

.design-stage-block {
    display: grid;
    gap: 10px;
    transform-origin: top center;
    transition: opacity 320ms ease, transform 320ms ease, max-height 320ms ease, margin 320ms ease, padding 320ms ease;
}

.design-state-label {
    color: rgba(255, 255, 255, 0.48);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding-inline: var(--overlay-section-label-inline-offset, 4px);
}

.convert-surface {
    min-height: 0;
    height: var(--input-text-viewport-height);
    max-height: var(--input-text-viewport-max-height);
    padding: 14px var(--input-text-content-padding-inline, 16px) 30px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: #2c2a29;
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.3);
    transition: transform 320ms ease, opacity 320ms ease;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.status-section--inline {
    display: none;
    margin-bottom: 0;
}

.status-section--inline .status-message {
    margin-top: 0;
}

.status-section--inline .perf-indicator {
    display: none;
}

.convert-display {
    min-height: 0;
    height: 100%;
    max-height: 100%;
    color: var(--input-text-color);
    font-family: inherit;
    font-weight: 400;
    font-size: var(--input-text-font-size);
    line-height: 1.55;
    letter-spacing: 0.01em;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-y: auto;
}

.input-error {
    position: fixed;
    top: calc(var(--overlay-bottom-anchor) + var(--overlay-link-offset-below-shell, 3vh));
    left: 50%;
    transform: translateX(-50%);
    z-index: 19;
    display: none;
    width: fit-content;
    max-width: min(var(--overlay-width), 1800px);
    text-align: center;
    color: #000000;
    background: color-mix(in srgb, white 95%, var(--brand-gold, #FBBF24) 5%);
    border-radius: 8px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px;
    letter-spacing: 0.03em;
    padding: 6px 12px;
    pointer-events: none;
}

.input-error.is-visible {
    display: block;
}

.input-error.is-gone-thread {
    top: 8vh;
    max-width: min(72vw, 420px);
    width: min(72vw, 420px);
    padding: 0;
    background: transparent;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.input-error.is-gone-thread img {
    display: block;
    width: 100%;
    height: auto;
}

.clean-offset {
    display: none;
    min-height: 52px;
    padding: 0 26px;
    margin-left: 18px;
    align-self: start;
    border-radius: 12px;
    border: 1px solid rgba(251, 191, 36, 0.18);
    background: rgba(251, 191, 36, 0.12);
    color: var(--brand-gold);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    align-items: center;
    justify-content: center;
}

.state-convert {
    opacity: 0;
    transform: translateY(22px);
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    pointer-events: none;
    display: none;
}

#builtin-overlay[data-input-mode="text"] .state-convert,
#builtin-overlay[data-input-mode="url"] .state-convert {
    opacity: 1;
    transform: translateY(0);
    max-height: none;
    min-height: 0;
    overflow: visible;
    margin: 0;
    padding: 0;
    pointer-events: auto;
    display: grid;
}

#builtin-overlay[data-input-mode="url"] .clean-offset {
    display: none;
}

#builtin-overlay[data-input-mode="url"][data-url-return-phase="pending"] .status-section--inline {
    display: block;
}

#builtin-overlay[data-input-mode="url"][data-url-return-phase="pending"] .state-convert .convert-surface {
    display: none;
}

/* Reader shells: reserve space for mode-switch link below overlay */
html[data-shell-variant="desktop"]:has(#builtin-overlay[data-active-view="input"]),
html[data-shell-variant="mobile"]:has(#builtin-overlay[data-active-view="input"]) {
    --reader-input-link-reserve: calc(var(--overlay-link-offset-below-shell, 3vh) + 1.5em);
}

.state-pills {
    flex: 0 0 auto;
}

/* Expanded input layout — text/url modes (desktop, mobile) */
html[data-shell-variant="desktop"] .builtin-overlay[data-active-view="input"][data-input-mode="text"],
html[data-shell-variant="desktop"] .builtin-overlay[data-active-view="input"][data-input-mode="url"],
html[data-shell-variant="mobile"] .builtin-overlay[data-active-view="input"][data-input-mode="text"],
html[data-shell-variant="mobile"] .builtin-overlay[data-active-view="input"][data-input-mode="url"] {
    height: var(--reader-input-expanded-overlay-height);
    max-height: var(--reader-input-expanded-overlay-height);
    grid-template-rows: auto minmax(0, 1fr) auto;
}

html[data-shell-variant="desktop"] .builtin-overlay[data-active-view="input"][data-input-mode="text"] .overlay-content,
html[data-shell-variant="desktop"] .builtin-overlay[data-active-view="input"][data-input-mode="url"] .overlay-content,
html[data-shell-variant="mobile"] .builtin-overlay[data-active-view="input"][data-input-mode="text"] .overlay-content,
html[data-shell-variant="mobile"] .builtin-overlay[data-active-view="input"][data-input-mode="url"] .overlay-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

html[data-shell-variant="desktop"] .builtin-overlay[data-active-view="input"][data-input-mode="text"] .overlay-body,
html[data-shell-variant="desktop"] .builtin-overlay[data-active-view="input"][data-input-mode="url"] .overlay-body,
html[data-shell-variant="mobile"] .builtin-overlay[data-active-view="input"][data-input-mode="text"] .overlay-body,
html[data-shell-variant="mobile"] .builtin-overlay[data-active-view="input"][data-input-mode="url"] .overlay-body {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

html[data-shell-variant="desktop"] .builtin-overlay[data-active-view="input"][data-input-mode="text"] .overlay-main,
html[data-shell-variant="desktop"] .builtin-overlay[data-active-view="input"][data-input-mode="url"] .overlay-main,
html[data-shell-variant="mobile"] .builtin-overlay[data-active-view="input"][data-input-mode="text"] .overlay-main,
html[data-shell-variant="mobile"] .builtin-overlay[data-active-view="input"][data-input-mode="url"] .overlay-main,
html[data-shell-variant="desktop"] .builtin-overlay[data-active-view="input"][data-input-mode="text"] #inputView,
html[data-shell-variant="desktop"] .builtin-overlay[data-active-view="input"][data-input-mode="url"] #inputView,
html[data-shell-variant="mobile"] .builtin-overlay[data-active-view="input"][data-input-mode="text"] #inputView,
html[data-shell-variant="mobile"] .builtin-overlay[data-active-view="input"][data-input-mode="url"] #inputView,
html[data-shell-variant="desktop"] .builtin-overlay[data-active-view="input"][data-input-mode="text"] .view-panel.input-view,
html[data-shell-variant="desktop"] .builtin-overlay[data-active-view="input"][data-input-mode="url"] .view-panel.input-view,
html[data-shell-variant="mobile"] .builtin-overlay[data-active-view="input"][data-input-mode="text"] .view-panel.input-view,
html[data-shell-variant="mobile"] .builtin-overlay[data-active-view="input"][data-input-mode="url"] .view-panel.input-view {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

html[data-shell-variant="desktop"] .builtin-overlay[data-active-view="input"][data-input-mode="text"] .design-stage,
html[data-shell-variant="desktop"] .builtin-overlay[data-active-view="input"][data-input-mode="url"] .design-stage,
html[data-shell-variant="mobile"] .builtin-overlay[data-active-view="input"][data-input-mode="text"] .design-stage,
html[data-shell-variant="mobile"] .builtin-overlay[data-active-view="input"][data-input-mode="url"] .design-stage {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    gap: 14px;
    overflow: hidden;
}

html[data-shell-variant="desktop"] .design-stage > .state-pills,
html[data-shell-variant="mobile"] .design-stage > .state-pills {
    flex: 0 0 auto;
}

html[data-shell-variant="desktop"] #builtin-overlay[data-input-mode="text"] .state-convert,
html[data-shell-variant="desktop"] #builtin-overlay[data-input-mode="url"] .state-convert,
html[data-shell-variant="mobile"] #builtin-overlay[data-input-mode="text"] .state-convert,
html[data-shell-variant="mobile"] #builtin-overlay[data-input-mode="url"] .state-convert {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

html[data-shell-variant="desktop"] #builtin-overlay[data-input-mode="text"] .convert-surface,
html[data-shell-variant="desktop"] #builtin-overlay[data-input-mode="url"] .convert-surface,
html[data-shell-variant="mobile"] #builtin-overlay[data-input-mode="text"] .convert-surface,
html[data-shell-variant="mobile"] #builtin-overlay[data-input-mode="url"] .convert-surface {
    flex: 1 1 0;
    min-height: 0;
    height: unset;
    max-height: none;
    overflow: hidden;
}

html[data-shell-variant="desktop"] #builtin-overlay[data-input-mode="text"] .convert-surface #charCounter,
html[data-shell-variant="desktop"] #builtin-overlay[data-input-mode="url"] .convert-surface #charCounter,
html[data-shell-variant="mobile"] #builtin-overlay[data-input-mode="text"] .convert-surface #charCounter,
html[data-shell-variant="mobile"] #builtin-overlay[data-input-mode="url"] .convert-surface #charCounter {
    flex: 0 0 auto;
}

html[data-shell-variant="desktop"] #builtin-overlay[data-input-mode="text"] #inputView #textInput,
html[data-shell-variant="desktop"] #builtin-overlay[data-input-mode="url"] #inputView #textInput,
html[data-shell-variant="mobile"] #builtin-overlay[data-input-mode="text"] #inputView #textInput,
html[data-shell-variant="mobile"] #builtin-overlay[data-input-mode="url"] #inputView #textInput {
    flex: 1 1 0;
    min-height: 0;
    height: 0;
    max-height: none;
    overflow-y: auto;
    resize: none;
    field-sizing: fixed;
}

html[data-shell-variant="desktop"] .builtin-overlay[data-active-view="input"][data-input-mode="input"] .design-stage,
html[data-shell-variant="mobile"] .builtin-overlay[data-active-view="input"][data-input-mode="input"] .design-stage {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    gap: 14px;
}

html[data-shell-variant="desktop"] .builtin-overlay[data-active-view="input"] .overlay-actions,
html[data-shell-variant="mobile"] .builtin-overlay[data-active-view="input"] .overlay-actions {
    flex: 0 0 auto;
}

/* Close lives after the card body (mobile full-width bar). Keep the desktop
   × in the card head without a second button. */
html[data-shell-variant="desktop"] .input-option-card--active {
    position: relative;
}

html[data-shell-variant="desktop"] .input-option-card-head {
    padding-right: 52px;
}

html[data-shell-variant="desktop"] .input-option-card-close {
    position: absolute;
    top: 10px;
    right: 14px;
}

.mobile-input-idle-hint {
    display: none;
}

/* Unified keyboard focus ring — brand gold across overlay shell controls */
.shell-mode-access:focus,
#builtin-overlay :is(
    a[href],
    input:not(.overlay-title-input),
    textarea,
    select,
    .progress-segment,
    [tabindex]:not([tabindex="-1"]):not(button)
):focus {
    outline: none;
}

.shell-mode-access:focus-visible,
#builtin-overlay :is(
    a[href],
    input:not(.overlay-title-input),
    textarea,
    select,
    .progress-segment,
    [tabindex]:not([tabindex="-1"]):not(button)
):focus-visible {
    outline: var(--overlay-focus-ring-width, 2px) solid var(--overlay-focus-ring-color, rgba(251, 191, 36, 0.9));
    outline-offset: var(--overlay-focus-ring-offset, 2px);
}

/* Inset focus ring on buttons — outward outlines get clipped by overflow:hidden
   ancestors (e.g. .design-stage, .overlay-actions) and by overflow:hidden on .generate-btn.
   Tab-order controls are buttons with tabindex=0; they must not also match the outer-ring
   [tabindex]:focus-visible rule above. */
#builtin-overlay button:focus,
#builtin-overlay button:focus-visible {
    outline: none;
    position: relative;
}

#builtin-overlay button:focus-visible::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 var(--overlay-focus-ring-width, 2px) var(--overlay-focus-ring-color, rgba(251, 191, 36, 0.9));
    pointer-events: none;
    z-index: 2;
}

#builtin-overlay .overlay-title-field:focus-within,
#builtin-overlay .overlay-title-input:focus,
#builtin-overlay .overlay-title-input:focus-visible,
#builtin-overlay .header-title-readout:focus,
#builtin-overlay .header-title-readout:focus-visible {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}

#inputView .convert-surface:focus-within {
    outline: none;
    box-shadow:
        0 14px 26px rgba(0, 0, 0, 0.3),
        inset 0 0 0 var(--overlay-focus-ring-width, 2px) var(--overlay-focus-ring-color, rgba(251, 191, 36, 0.9));
}

#inputView .convert-surface:focus-within #textInput:focus,
#inputView .convert-surface:focus-within #textInput:focus-visible {
    outline: none;
}