/* The landing trial intentionally inherits the production recorder UI verbatim.
   This file only makes that document fill the enclosing trial dialog. */
html,
body.landing-room-trial {
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
}

body.landing-room-trial .app--recorder {
    height: 100dvh;
    min-height: 0;
}

body.landing-room-trial .header {
    position: relative;
    z-index: 221;
}

body.landing-room-trial #btnSessionList {
    cursor: pointer;
}

body.landing-room-trial .landing-room-trial__disabled {
    cursor: default;
}

body.landing-room-trial #currentSessionTitle.landing-room-trial__disabled {
    pointer-events: none;
}

body.landing-room-trial #recorderSaveStatus,
body.landing-room-trial #viewerCount {
    display: none !important;
}

body.landing-room-trial #btnRecorderSessionTitleEdit[hidden],
body.landing-room-trial #btnRecorderSettings[hidden],
body.landing-room-trial #settingsPanel[hidden],
body.landing-room-trial #btnReset[hidden] {
    display: none !important;
}

body.landing-room-trial #btnRecord {
    border-color: #bdc7d5;
    background: #ffffff;
    color: #172033;
    box-shadow: none;
}

body.landing-room-trial #btnRecord:not(.is-recording):hover:not(:disabled) {
    border-color: #8fa0b5;
    background: #f5f7fa;
}

body.landing-room-trial #btnRecord.is-recording {
    border-color: #315ee8;
    background: #315ee8;
    color: #ffffff;
}

body.landing-room-trial #btnRecord.is-recording:hover:not(:disabled) {
    border-color: #284fc9;
    background: #284fc9;
    color: #ffffff;
}

body.landing-room-trial #btnRecord .btn__icon {
    width: 18px;
    height: 18px;
}

body.landing-room-trial #btnRecord .recorder-record-action__timer {
    color: inherit;
}

body.landing-room-trial .status-text {
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.landing-room-trial .landing-room-source {
    flex: 0 0 auto;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding-inline: 8px;
    border-radius: 8px;
    color: #526071;
    font-size: 0.72rem;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

body.landing-room-trial .landing-room-source::after {
    content: "↗";
    font-size: 0.82em;
    text-decoration: none;
}

body.landing-room-trial .landing-room-source:hover {
    background: #eef2f6;
    color: #263244;
}

body.landing-room-trial .landing-room-source[hidden] {
    display: none !important;
}

@media (max-width: 600px) {
    body.landing-room-trial .recorder-header__session-title {
        max-width: min(38vw, 145px);
    }

}

body.landing-room-trial .export-modal--landing-trial .export-page-layout,
body.landing-room-trial .export-modal--landing-trial .export-destination,
body.landing-room-trial .export-modal--landing-trial .notion-export-card,
body.landing-room-trial .export-modal--landing-trial .export-warning,
body.landing-room-trial .export-modal--landing-trial .export-template-selector,
body.landing-room-trial .export-modal--landing-trial .export-modal__actions {
    display: none !important;
}

body.landing-room-trial .export-modal--landing-trial .export-modal__dialog {
    width: min(440px, calc(100vw - 28px));
}

.landing-room-signup {
    position: fixed;
    z-index: 890;
    left: 50%;
    bottom: max(18px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
    width: min(430px, calc(100vw - 176px));
    min-height: 64px;
    padding: 8px 8px 8px 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.07),
        0 8px 24px rgba(15, 23, 42, 0.12),
        0 2px 6px rgba(15, 23, 42, 0.06);
    opacity: 0;
    transform: translate(-50%, 12px);
    pointer-events: none;
    transition-property: opacity, transform;
    transition-duration: 180ms;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

body.landing-room-trial .toast {
    z-index: 980;
    bottom: max(72px, calc(58px + env(safe-area-inset-bottom)));
    max-width: min(360px, calc(100vw - 104px));
    padding: 9px 13px;
    text-align: center;
}

body.landing-room-trial.landing-room-signup-visible .toast {
    bottom: max(100px, calc(82px + env(safe-area-inset-bottom)));
}

body.landing-room-trial #aiChatFabBadge {
    top: -6px;
    right: -8px;
    min-width: 30px;
    height: 19px;
    padding-inline: 5px;
    border: 1px solid #c7d2ee;
    border-radius: 999px;
    background: #eef3ff;
    color: #31558f;
    font-size: 0.62rem;
    font-weight: 800;
    box-shadow: 0 2px 6px rgba(30, 55, 95, 0.12);
}

.landing-room-signup[hidden] {
    display: none;
}

.landing-room-signup.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

body.landing-room-trial.landing-room-signup-visible #transcript {
    padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
}

body.landing-room-trial.landing-room-overlay-open .landing-room-signup,
body.landing-room-trial.landing-room-overlay-open #btnAiChatOpen,
body.landing-room-trial.landing-room-overlay-open #btnLiveChatOpen {
    opacity: 0 !important;
    pointer-events: none !important;
}

.landing-room-signup__link {
    display: grid;
    align-content: center;
    min-width: 0;
    min-height: 48px;
    color: #172033;
    text-decoration: none;
    transition-property: scale;
    transition-duration: 140ms;
    transition-timing-function: ease-out;
}

.landing-room-signup__link:active {
    scale: 0.96;
}

.landing-room-signup__link > strong,
.landing-room-signup__link > span {
    display: block;
}

.landing-room-signup__link strong {
    font-size: 0.85rem;
    line-height: 1.35;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.landing-room-signup__link > span {
    margin-top: 3px;
    color: #315ee8;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.3;
}

.landing-room-signup__close {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #718096;
    font: inherit;
    font-size: 1.2rem;
    cursor: pointer;
    transition-property: background-color, color, scale;
    transition-duration: 140ms;
    transition-timing-function: ease-out;
}

.landing-room-signup__close:hover {
    background: #f1f4f8;
    color: #263244;
}

.landing-room-signup__close:active {
    scale: 0.96;
}

.landing-room-signup__link:focus-visible,
.landing-room-signup__close:focus-visible {
    outline: 3px solid rgba(49, 94, 232, 0.32);
    outline-offset: 2px;
}

.landing-trial-guide {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: grid;
    place-items: center;
    padding: 18px;
}

.landing-trial-guide[hidden] {
    display: none;
}

.landing-trial-guide__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(15, 23, 42, 0.48);
    cursor: default;
}

.landing-trial-guide__dialog {
    position: relative;
    width: min(480px, 100%);
    max-height: min(720px, calc(100dvh - 36px));
    overflow: auto;
    border: 1px solid rgba(148, 163, 184, 0.32);
    border-radius: 22px;
    background: #fff;
    color: #172033;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.22);
}

.landing-trial-guide__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 22px 16px;
    border-bottom: 1px solid #e8edf4;
}

.landing-trial-guide__eyebrow {
    display: block;
    margin-bottom: 6px;
    color: #4761cf;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.landing-trial-guide__head h2 {
    margin: 0;
    font-size: 1.16rem;
    line-height: 1.35;
    letter-spacing: -0.035em;
}

.landing-trial-guide__close {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: #f3f6fa;
    color: #546176;
    font: inherit;
    cursor: pointer;
}

.landing-trial-guide__body {
    display: grid;
    gap: 14px;
    padding: 18px 22px 22px;
}

.landing-trial-guide__steps {
    display: grid;
    gap: 13px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.landing-trial-guide__steps li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    align-items: flex-start;
}

.landing-trial-guide__steps li > span {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #eef1ff;
    color: #4258bf;
    font-size: 0.75rem;
    font-weight: 800;
}

.landing-trial-guide__steps p,
.landing-trial-guide__example p,
.landing-trial-guide__note {
    margin: 0;
}

.landing-trial-guide__steps strong,
.landing-trial-guide__steps small,
.landing-trial-guide__example > span,
.landing-trial-guide__example > strong,
.landing-trial-guide__example > small {
    display: block;
}

.landing-trial-guide__steps strong {
    font-size: 0.9rem;
    line-height: 1.45;
}

.landing-trial-guide__steps small,
.landing-trial-guide__example small,
.landing-trial-guide__note {
    margin-top: 3px;
    color: #657188;
    font-size: 0.78rem;
    line-height: 1.55;
}

.landing-trial-guide__example {
    padding: 14px 15px;
    border: 1px solid #dde4ee;
    border-radius: 14px;
    background: #f8fafc;
}

.landing-trial-guide__example > span {
    margin-bottom: 7px;
    color: #667085;
    font-size: 0.68rem;
    font-weight: 800;
}

.landing-trial-guide__example > strong,
.landing-trial-guide__example p {
    font-size: 0.88rem;
    line-height: 1.5;
}

.landing-trial-guide__example code {
    display: block;
    margin-top: 8px;
    padding: 8px 10px;
    overflow-wrap: anywhere;
    border-radius: 8px;
    background: #edf1f7;
    color: #364152;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.73rem;
}

.landing-trial-guide__action {
    width: 100%;
    min-height: 48px;
    border: 1px solid #315ee8;
    border-radius: 13px;
    background: #315ee8;
    color: #fff;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
}

.landing-trial-guide__action:disabled {
    border-color: #d7deea;
    background: #e9edf4;
    color: #778397;
    cursor: default;
}

@media (max-width: 600px) {
    .landing-room-signup {
        left: max(12px, env(safe-area-inset-left));
        right: calc(76px + env(safe-area-inset-right));
        bottom: max(14px, env(safe-area-inset-bottom));
        width: auto;
        min-height: 66px;
        padding-left: 14px;
        border-radius: 18px;
        transform: translateY(12px);
    }

    .landing-room-signup.is-visible {
        transform: translateY(0);
    }

    body.landing-room-trial .toast {
        left: 50%;
        right: auto;
        bottom: max(70px, calc(58px + env(safe-area-inset-bottom)));
        width: max-content;
        max-width: calc(100vw - 104px);
        transform: translateX(-50%);
    }

    body.landing-room-trial.landing-room-signup-visible .toast {
        bottom: max(96px, calc(82px + env(safe-area-inset-bottom)));
    }

    body.landing-room-trial .status-text {
        display: none !important;
    }

    body.landing-room-trial .recorder-toolbar__top-actions {
        gap: 4px;
    }

    body.landing-room-trial .recorder-toolbar__top-actions .btn-text {
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        justify-content: center;
        padding: 0;
    }

    body.landing-room-trial .recorder-toolbar__top-actions .btn-text svg {
        flex: 0 0 auto;
        width: 16px;
        height: 16px;
    }

    .landing-trial-guide {
        align-items: end;
        padding: 10px;
    }

    .landing-trial-guide__dialog {
        width: 100%;
        max-height: calc(100dvh - 20px);
        border-radius: 20px;
    }

    .landing-trial-guide__head {
        padding: 18px 17px 14px;
    }

    .landing-trial-guide__body {
        gap: 12px;
        padding: 16px 17px 18px;
    }
}

@media (min-width: 900px) {
    body.landing-room-trial .app--recorder {
        max-width: none;
    }
}