/* Reading-first shell shared by viewer and recorder; role-only controls stay page specific. */

.viewer-page .header {
    position: relative;
}

.viewer-page .header__product-row {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.viewer-page .header__connection-state {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.viewer-page .header__connection-state .status-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
}

.viewer-page .header__session-title--viewer {
    text-wrap: balance;
}

.viewer-page #viewerModeBadge {
    display: none !important;
}

.viewer-tools-trigger,
.viewer-toolbar__mobile-head,
.viewer-tools-backdrop {
    display: none;
}

.viewer-feedback-lane {
    position: relative;
    z-index: var(--z-overlay);
    width: 100%;
}

.viewer-feedback-lane:has(.error-banner:not([hidden])) .history-banner:not([hidden]),
.viewer-feedback-lane:has(.error-banner:not([hidden])) .circuit-banner:not([hidden]),
.viewer-feedback-lane:not(:has(.error-banner:not([hidden]))):has(.circuit-banner:not([hidden])) .history-banner:not([hidden]) {
    display: none !important;
}

.reader-settings__spacing-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
}

.reader-settings__spacing-controls .reader-settings__option {
    min-width: 0;
}

.transcript[data-reader-spacing="compact"] .sentence__text,
.transcript[data-reader-spacing="compact"] > .interim .interim__text {
    line-height: 1.62 !important;
}

.transcript[data-reader-spacing="default"] .sentence__text,
.transcript[data-reader-spacing="default"] > .interim .interim__text {
    line-height: 1.78 !important;
}

.transcript[data-reader-spacing="relaxed"] .sentence__text,
.transcript[data-reader-spacing="relaxed"] > .interim .interim__text {
    line-height: 1.92 !important;
}

/* The viewer is reading-first: text selection must win over the legacy swipe hint. */
.viewer-page .transcript .sentence,
.viewer-page .transcript .sentence__text,
.viewer-page .transcript .interim__text {
    -webkit-user-select: text;
    user-select: text;
}

.viewer-page .transcript .sentence button,
.viewer-page .transcript .paragraph__label {
    -webkit-user-select: none;
    user-select: none;
}

/* A stationary long press belongs to sentence marks. Movement cancels the
   pending class immediately, so drag selection and scrolling remain native. */
.transcript .sentence.sentence--mark-press-pending,
.transcript .sentence.sentence--mark-press-pending .sentence__text,
.transcript.transcript--mark-overlay-active .sentence,
.transcript.transcript--mark-overlay-active .sentence__text,
.transcript.transcript--mark-overlay-active .paragraph__label {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.chat-panel__mode-tabs {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--color-surface-2) 82%, transparent);
}

.chat-panel__mode-tab {
    min-width: 76px;
    min-height: 44px;
    padding: 0 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--color-text-muted);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 650;
    cursor: pointer;
    transition-property: background-color, color, box-shadow, transform;
    transition-duration: 150ms;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.chat-panel__mode-tab--active {
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--color-border) 68%, transparent),
        0 1px 2px color-mix(in srgb, var(--color-shadow) 8%, transparent);
}

.chat-panel__mode-tab:active {
    transform: scale(0.96);
}

.viewer-page .chat-panel__btn svg,
.viewer-page .ask-context-area__title svg {
    width: 16px;
    height: 16px;
}

.viewer-page .ask-context-area__title {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.viewer-page .chat-fab__icon {
    width: 23px;
    height: 23px;
}

/* Keep the primary reading action out of newly revealed audio controls immediately. */
.viewer-page .chat-fab--ai {
    transition-property: background-color, transform, border-color, box-shadow;
    transition-duration: 160ms;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.viewer-page .chat-panel__messages:empty::before {
    content: "문장을 선택해 질문하거나 아래에 직접 입력하세요.";
    width: min(100%, 300px);
    margin: 0 auto;
    color: var(--color-text-muted);
    opacity: 1;
    text-wrap: pretty;
}

.viewer-page .chat-panel--live .chat-panel__messages:empty::before {
    content: "같은 강의를 듣는 사람들과 실시간으로 대화하세요.";
}

.viewer-page .transcript-selection-toolbar [data-selection-action="play"]:disabled {
    display: none;
}

.viewer-page .app.app--has-audio .transcript-selection-toolbar {
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 62px);
}

.viewer-page .app.app--has-audio .chat-fab--ai {
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 62px) !important;
}

.viewer-page #btnLiveChatOpen {
    display: none !important;
}

.viewer-page .scroll-to-bottom-btn {
    bottom: max(10px, env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    margin: 8px auto 2px;
    padding: 0 15px;
    border-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-surface) 94%, var(--color-accent));
    color: color-mix(in srgb, var(--color-accent) 86%, var(--color-text));
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--color-border) 28%, transparent),
        0 8px 24px color-mix(in srgb, var(--color-shadow) 18%, transparent);
    transform: translateY(8px) scale(0.98);
    transition-duration: 160ms;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.viewer-page .scroll-to-bottom-btn::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}

.viewer-page .scroll-to-bottom-btn.visible {
    transform: translateY(0) scale(1);
}

.viewer-page .scroll-to-bottom-btn:hover,
.viewer-page .scroll-to-bottom-btn:focus-visible {
    border-color: color-mix(in srgb, var(--color-accent) 54%, var(--color-border));
    background: color-mix(in srgb, var(--color-surface) 88%, var(--color-accent));
    color: var(--color-accent);
}

.viewer-page .scroll-to-bottom-btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.viewer-page .scroll-to-bottom-btn.visible:active {
    transform: translateY(0) scale(0.97);
}

.viewer-page .app.app--has-audio .scroll-to-bottom-btn,
.viewer-page.transcript-selection-open .scroll-to-bottom-btn {
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 62px);
}

.viewer-page.transcript-selection-open .app.app--has-audio .scroll-to-bottom-btn {
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 124px);
}

/*
 * The pending-content chip is a viewport affordance, not transcript content.
 * Keeping it sticky inside the transcript lets a sticky paragraph heading
 * paint over it when a short/condensed reading viewport is reshaped. Anchor
 * the same chip to the reading viewport instead; the existing page-specific
 * bottom offsets still keep it clear of audio, selection, and FAB controls.
 */
body:is(.viewer-page, .recorder-page) .scroll-to-bottom-btn {
    position: fixed;
    left: 50%;
    max-width: calc(100vw - 24px);
    min-height: 44px;
    margin: 0;
    background: var(--color-surface);
    transform: translate(-50%, 8px) scale(0.98);
    z-index: calc(var(--z-sticky, 10) + 2);
}

body:is(.viewer-page, .recorder-page) .scroll-to-bottom-btn.visible {
    transform: translate(-50%, 0) scale(1);
}

body:is(.viewer-page, .recorder-page) .scroll-to-bottom-btn.visible:active {
    transform: translate(-50%, 0) scale(0.97);
}

@media (max-width: 600px) {
    /* Keep the fixed chip above the mobile AI FAB even without an audio player. */
    body.viewer-page .scroll-to-bottom-btn {
        bottom: calc(max(10px, env(safe-area-inset-bottom)) + 62px);
    }

    /* Preserve the existing 62px step when audio/selection controls appear. */
    body.viewer-page .app.app--has-audio .scroll-to-bottom-btn {
        bottom: calc(max(10px, env(safe-area-inset-bottom)) + 124px);
    }

    body.viewer-page.transcript-selection-open .scroll-to-bottom-btn {
        bottom: calc(max(10px, env(safe-area-inset-bottom)) + 124px);
    }

    body.viewer-page.transcript-selection-open .app.app--has-audio .scroll-to-bottom-btn {
        bottom: calc(max(10px, env(safe-area-inset-bottom)) + 186px);
    }
}

.transcript-selection-toolbar {
    position: fixed;
    z-index: calc(var(--z-overlay) + 10);
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border-radius: 14px;
    background: var(--color-surface);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--color-border) 74%, transparent),
        0 10px 28px color-mix(in srgb, var(--color-shadow) 22%, transparent);
}

.transcript-selection-toolbar[hidden] {
    display: none !important;
}

.transcript-selection-toolbar button {
    min-width: 48px;
    min-height: 44px;
    padding: 0 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--color-text-muted);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 650;
    cursor: pointer;
    transition-property: background-color, color, transform;
    transition-duration: 150ms;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.transcript-selection-toolbar button:hover:not(:disabled),
.transcript-selection-toolbar button:focus-visible {
    background: var(--color-surface-2);
    color: var(--color-text);
}

.transcript-selection-toolbar button:active:not(:disabled) {
    transform: scale(0.96);
}

.transcript-selection-toolbar button:disabled {
    opacity: 0.38;
    cursor: default;
}

.viewer-page .viewer-tools-trigger:focus-visible,
.viewer-page .viewer-toolbar__mobile-close:focus-visible,
.viewer-page .chat-panel__mode-tab:focus-visible,
.viewer-page .transcript-selection-toolbar button:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

@media (min-width: 601px) {
    .viewer-page .app .viewer-toolbar {
        flex-wrap: wrap;
        min-height: 44px;
        padding: 2px 0;
        border-radius: 0;
        border-color: transparent;
        background: transparent;
        box-shadow: none;
    }

    body.viewer-page.is-onboarding-active .app .viewer-toolbar.viewer-toolbar--open {
        position: fixed;
        left: 50%;
        right: auto;
        bottom: max(24px, env(safe-area-inset-bottom));
        z-index: var(--z-overlay);
        width: min(760px, calc(100vw - 32px));
        padding: 10px 12px;
        border-radius: 16px;
        border-color: var(--color-border);
        background: var(--color-surface);
        transform: translateX(-50%);
    }

    .viewer-page .viewer-toolbar__raw {
        display: grid;
        flex: 1 0 100%;
        gap: 8px;
        width: 100%;
        min-width: 0;
        padding: 12px;
        border-radius: 12px;
        background: var(--color-surface-2);
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-border) 62%, transparent);
    }

    .viewer-page .viewer-toolbar__raw[hidden] {
        display: none !important;
    }

    .viewer-page #rawTranscriptToolContent {
        width: 100%;
        max-width: 100%;
        max-height: 280px;
        margin: 0;
        overflow: auto;
        overflow-wrap: anywhere;
        white-space: pre-wrap;
        color: var(--color-text-muted);
        font: inherit;
        font-size: 0.78rem;
        line-height: 1.65;
        text-wrap: pretty;
    }

    .viewer-page .app.app--has-audio .transcript-selection-toolbar {
        bottom: auto;
    }
}

body.viewer-page.is-onboarding-active .viewer-toolbar.onboarding-highlight,
body.viewer-page.is-onboarding-active .viewer-toolbar.viewer-toolbar--onboarding-preview {
    z-index: 9999;
    box-shadow:
        0 0 0 4px var(--color-accent, #4a9eff),
        0 0 20px rgba(74, 158, 255, 0.3);
}

body.viewer-page.is-onboarding-active .viewer-toolbar.viewer-toolbar--onboarding-preview {
    pointer-events: none;
}

body.viewer-page.is-onboarding-active .chat-panel.chat-panel--onboarding-preview {
    z-index: 9998;
}

@media (min-width: 921px) {
    .viewer-page .chat-fab--ai {
        right: max(16px, calc((100vw - 900px) / 2 + 16px));
    }
}

@media (hover: none), (pointer: coarse) {
    .viewer-page .transcript.transcript--viewer-editorial .sentence__mark-trigger {
        opacity: 0.4;
    }

    .viewer-page .chat-panel__btn,
    .viewer-page .chat-panel__minimize,
    .viewer-page .chat-panel__close,
    .viewer-page .btn--chat-send {
        width: 44px;
        min-width: 44px;
        height: 44px;
    }

    .viewer-page .chat-panel__input {
        min-height: 44px;
    }
}

@media (max-width: 600px) {
    .viewer-page .header {
        min-height: 58px;
        padding: max(9px, env(safe-area-inset-top)) 0 9px;
        gap: 6px;
    }

    .viewer-page .header__left--stacked {
        flex: 1 1 auto;
        min-width: 0;
        gap: 3px;
    }

    .viewer-page .header__left--stacked .header__title {
        color: var(--color-text-muted);
        font-size: 0.7rem;
        font-weight: 650;
        letter-spacing: -0.01em;
        line-height: 1;
    }

    .viewer-page .header__session-row {
        width: 100%;
    }

    .viewer-page .header__session-title--viewer {
        max-width: 100%;
        overflow: hidden;
        color: var(--color-text);
        font-size: 0.9rem;
        font-weight: 680;
        line-height: 1.2;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .viewer-page .header__session-edit-btn {
        position: relative;
        width: 22px;
        height: 22px;
        flex: 0 0 22px;
    }

    .viewer-page .header__session-edit-btn::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
    }

    .viewer-page .header__status {
        flex: 0 0 auto;
        gap: 4px;
    }

    .viewer-page .header__status > button {
        width: 44px;
        min-width: 44px;
        height: 44px;
    }

    .viewer-page #statusText {
        max-width: none;
        overflow: visible;
        font-size: 0;
        text-overflow: clip;
    }

    .viewer-page #statusText::after {
        content: attr(data-short-text);
        font-size: 0.68rem;
    }

    .viewer-tools-trigger {
        display: inline-flex;
    }

    .viewer-tools-backdrop {
        position: fixed;
        inset: 0;
        z-index: calc(var(--z-overlay) - 1);
        display: block;
        border: 0;
        background: rgba(10, 15, 24, 0.42);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    .viewer-tools-backdrop[hidden] {
        display: none !important;
    }

    .viewer-page .viewer-toolbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: var(--z-overlay);
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        min-height: 0;
        max-height: min(70vh, 520px);
        padding: 8px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
        overflow-y: auto;
        overscroll-behavior: contain;
        border: 0;
        border-radius: 20px 20px 0 0;
        background: var(--color-surface);
        box-shadow:
            0 0 0 1px color-mix(in srgb, var(--color-border) 72%, transparent),
            0 24px 64px color-mix(in srgb, var(--color-shadow) 28%, transparent);
        opacity: 0;
        visibility: hidden;
        transform: translateY(calc(100% + 20px));
        transition-property: opacity, transform, visibility;
        transition-duration: 180ms;
        transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
    }

    .viewer-page .viewer-toolbar.viewer-toolbar--open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .viewer-toolbar__mobile-head {
        display: flex;
        grid-column: 1 / -1;
        align-items: center;
        justify-content: space-between;
        min-height: 44px;
        min-width: 0;
        width: 100%;
        padding-left: 8px;
    }

    .viewer-toolbar__mobile-title {
        font-size: 0.86rem;
        font-weight: 700;
    }

    .viewer-toolbar__mobile-close {
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 12px;
        background: var(--color-surface-2);
        color: var(--color-text-muted);
        font: inherit;
        cursor: pointer;
    }

    .viewer-page .viewer-toolbar__stats:empty,
    .viewer-page .viewer-toolbar__stats:not(:has(> :not([hidden]))) {
        display: none;
    }

    .viewer-page .viewer-toolbar__actions {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        justify-self: stretch;
        min-width: 0;
        width: 100%;
    }

    .viewer-page .viewer-toolbar__raw {
        display: grid;
        grid-column: 1 / -1;
        gap: 8px;
        width: 100%;
        min-width: 0;
        padding: 12px;
        border-radius: 12px;
        background: var(--color-surface-2);
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-border) 62%, transparent);
    }

    .viewer-page .viewer-toolbar__raw[hidden] {
        display: none !important;
    }

    .viewer-toolbar__raw-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
    }

    .viewer-toolbar__raw-head strong {
        font-size: 0.82rem;
    }

    .viewer-toolbar__raw-head span {
        color: var(--color-text-dim);
        font-size: 0.68rem;
        font-variant-numeric: tabular-nums;
    }

    #rawTranscriptToolContent {
        max-height: min(34vh, 260px);
        margin: 0;
        overflow: auto;
        white-space: pre-wrap;
        color: var(--color-text-muted);
        font: inherit;
        font-size: 0.76rem;
        line-height: 1.65;
        text-wrap: pretty;
    }

    .viewer-page .viewer-toolbar__actions .btn-text {
        justify-content: flex-start;
        width: 100%;
        min-width: 0;
        min-height: 44px;
        padding: 0 12px;
        gap: 9px;
        border-radius: 12px;
        background: var(--color-surface-2);
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-border) 62%, transparent);
    }

    .viewer-page .viewer-toolbar__actions .btn-text span {
        display: inline;
    }

    .viewer-page .viewer-toolbar__divider {
        display: none;
    }

    .viewer-page .reference-status {
        grid-column: 1 / -1;
        max-width: 100%;
        padding: 2px 4px;
    }

    .viewer-page .reference-status:empty {
        display: none;
    }

    .viewer-page .btn--ref-clear {
        justify-self: end;
    }

    .viewer-tools-open {
        overflow: hidden;
    }

    .viewer-tools-open .chat-fab {
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
    }

    .viewer-page .chat-panel__header {
        gap: 6px;
        padding: max(6px, env(safe-area-inset-top)) 8px 6px;
    }

    .viewer-page .chat-panel {
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        max-width: 100vw !important;
        max-height: 100dvh !important;
        border: 0;
        border-radius: 0;
        transition: transform 220ms cubic-bezier(0.2, 0, 0, 1), height 120ms ease;
    }

    .viewer-page .chat-panel__resize-handle,
    .viewer-page .chat-panel__resize-handle-top {
        display: none;
    }

    .viewer-page .chat-panel__btn,
    .viewer-page .chat-panel__minimize,
    .viewer-page .chat-panel__close,
    .viewer-page .btn--chat-send {
        width: 44px;
        min-width: 44px;
        height: 44px;
    }

    .viewer-page .chat-panel__input {
        min-height: 44px;
    }

    .viewer-page .chat-panel__input-row {
        padding: 8px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    }

    .viewer-page .chat-panel__title {
        display: none;
    }

    .viewer-page .chat-panel__mode-tabs {
        min-width: 0;
        flex: 1;
    }

    .viewer-page .chat-panel__mode-tab {
        min-width: 0;
        flex: 1;
    }

    .viewer-page .chat-fab--ai {
        bottom: max(10px, env(safe-area-inset-bottom));
    }

    .viewer-page .transcript.transcript--editorial {
        padding-bottom: 88px;
    }

    .viewer-page .transcript.transcript--viewer-editorial > .interim {
        padding-bottom: 104px !important;
    }

    .transcript-selection-toolbar {
        left: 50%;
        top: auto;
        bottom: max(10px, env(safe-area-inset-bottom));
        width: min(calc(100vw - 20px), 360px);
        justify-content: stretch;
        transform: translateX(-50%);
    }

    .transcript-selection-toolbar button {
        min-width: 0;
        flex: 1;
    }

    .transcript-selection-open .chat-fab {
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    .viewer-page .viewer-toolbar,
    .viewer-page .scroll-to-bottom-btn,
    .chat-panel__mode-tab,
    .transcript-selection-toolbar button {
        transition-duration: 0.01ms;
    }
}

/* Recorder/viewer parity layer. This file loads last on both live-reading pages. */
body:is(.viewer-page, .recorder-page) .header__product-row {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

body:is(.viewer-page, .recorder-page) .header__connection-state {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

body:is(.viewer-page, .recorder-page) .header__connection-state .status-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
}

body:is(.viewer-page, .recorder-page) .header__status > button,
body:is(.viewer-page, .recorder-page) .chat-panel button {
    border-radius: 11px;
}

body:is(.viewer-page, .recorder-page) .chat-panel__btn svg,
body:is(.viewer-page, .recorder-page) .ask-context-area__title svg {
    width: 16px;
    height: 16px;
}

body:is(.viewer-page, .recorder-page) .ask-context-area__title {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

body:is(.viewer-page, .recorder-page) .chat-fab__icon {
    width: 23px;
    height: 23px;
}

body:is(.viewer-page, .recorder-page) .chat-fab--ai {
    transition-property: background-color, transform, border-color, box-shadow;
    transition-duration: 160ms;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

body:is(.viewer-page, .recorder-page) .chat-panel__messages:empty::before {
    content: "문장을 선택해 질문하거나 아래에 직접 입력하세요.";
    width: min(100%, 300px);
    margin: 0 auto;
    color: var(--color-text-muted);
    opacity: 1;
    text-wrap: pretty;
}

body:is(.viewer-page, .recorder-page) .chat-panel--live .chat-panel__messages:empty::before {
    content: "같은 강의를 듣는 사람들과 실시간으로 대화하세요.";
}

body:is(.viewer-page, .recorder-page) #btnLiveChatOpen {
    display: none !important;
}

@media (min-width: 921px) {
    body:is(.viewer-page, .recorder-page) .chat-fab--ai {
        right: max(16px, calc((100vw - 900px) / 2 + 16px));
    }
}

@media (hover: none), (pointer: coarse) {
    body:is(.viewer-page, .recorder-page) .chat-panel__btn,
    body:is(.viewer-page, .recorder-page) .chat-panel__minimize,
    body:is(.viewer-page, .recorder-page) .chat-panel__close,
    body:is(.viewer-page, .recorder-page) .btn--chat-send {
        width: 44px;
        min-width: 44px;
        height: 44px;
    }

    body:is(.viewer-page, .recorder-page) .chat-panel__input {
        min-height: 44px;
    }
}

@media (max-width: 600px) {
    .recorder-page .recorder-header__status {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: nowrap;
        gap: 4px;
    }

    .recorder-page .recorder-header__status > button {
        width: 44px;
        min-width: 44px;
        height: 44px;
    }

    .recorder-page .header__connection-state #statusText {
        max-width: 80px;
        overflow: hidden;
        font-size: 0.68rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body:is(.viewer-page, .recorder-page) .chat-panel__header {
        gap: 6px;
        padding: max(6px, env(safe-area-inset-top)) 8px 6px;
    }

    body:is(.viewer-page, .recorder-page) .chat-panel {
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        max-width: 100vw !important;
        max-height: 100dvh !important;
        border: 0;
        border-radius: 0;
        transition: transform 220ms cubic-bezier(0.2, 0, 0, 1), height 120ms ease;
    }

    body:is(.viewer-page, .recorder-page) .chat-panel__resize-handle,
    body:is(.viewer-page, .recorder-page) .chat-panel__resize-handle-top {
        display: none;
    }

    body:is(.viewer-page, .recorder-page) .chat-panel__input-row {
        padding: 8px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    }

    body:is(.viewer-page, .recorder-page) .chat-panel__title {
        display: none;
    }

    body:is(.viewer-page, .recorder-page) .chat-panel__mode-tabs {
        min-width: 0;
        flex: 1;
    }

    body:is(.viewer-page, .recorder-page) .chat-panel__mode-tab {
        min-width: 0;
        flex: 1;
    }

    body:is(.viewer-page, .recorder-page) .chat-fab--ai {
        bottom: max(10px, env(safe-area-inset-bottom));
    }

    .recorder-page .transcript.transcript--editorial {
        padding-bottom: 88px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body:is(.viewer-page, .recorder-page) .chat-panel,
    body:is(.viewer-page, .recorder-page) .chat-fab--ai {
        transition-duration: 0.01ms;
    }
}