@layer pages {
/* Redesigned online chat widget page.
   Page-only layout rules that compose avatar_banner, chat_bubble, chat_input,
   and powered_by. Component internals stay in components/. */

.psw-chat {
    box-sizing: border-box;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 744px;
    height: 100vh;
    min-height: 100vh;
    margin: 0 auto;
    overflow: hidden;
    background: var(--color-white);
    color: var(--color-content-high);
    font-family: var(--font-sans);
}

@supports (height: 100dvh) {
    .psw-chat {
        height: 100dvh;
        min-height: 100dvh;
    }
}

.psw-chat__header {
    flex: 0 0 auto;
}

.psw-chat__window {
    box-sizing: border-box;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    background: var(--color-white);
}

.psw-chat__body {
    box-sizing: border-box;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    background: var(--color-white);
}

.psw-chat__messages {
    box-sizing: border-box;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--space-6);
    min-height: 0;
    padding: 0 var(--space-4) var(--space-6);
    overflow-y: auto;
}

.psw-chat__composer {
    flex: 0 0 auto;
    border-top: var(--border-width-sm) solid var(--color-gray-200);
}

/* The embedded panel is a fixed 460px tall, so the composer keeps the design's
   56px bar — a single 24px line inside its 16px padding, send button centred on
   it — and the transcript keeps the rest. Its divider is drawn rather than laid
   out, so the two hairlines don't come out of the transcript's height. */
.psw-chat--modal .psw-chat__composer {
    border-top: 0;
}

.psw-chat--modal .psw-chat-input {
    --psw-chat-input-button-size: 40px;

    min-height: calc(var(--space-4) + var(--space-6) + var(--space-4));
    /* on the bar itself, not the composer — its own background would cover it */
    box-shadow: inset 0 var(--border-width-sm) 0 var(--color-gray-200);
}

.psw-chat--modal .psw-chat-input__textarea {
    min-height: var(--space-6);
    padding-top: 0;
    padding-bottom: 0;
}

.psw-chat--modal .psw-chat-input__send {
    top: var(--space-2);
}

.psw-chat__footer {
    flex: 0 0 auto;
    padding: var(--space-3) var(--space-4);
    background: var(--color-white);
}

.psw-chat__footer-desktop {
    display: none;
}

.psw-chat-bubble--error {
    align-items: center;
}

.psw-chat-bubble--error .psw-chat-bubble__content {
    background: var(--color-bg-negative);
    color: var(--color-content-inverse);
}

.psw-chat-bubble--error .psw-chat-bubble__timestamp {
    justify-content: center;
}

@media (max-width: 639px) {
    .psw-chat__messages > .psw-chat-bubble:first-child {
        margin-top: var(--space-4);
    }
}

@media (max-width: 380px) {
    .psw-chat--modal .psw-avatar-banner--top-left {
        padding-left: var(--space-4);
    }

    .psw-chat--modal .psw-chat__footer {
        box-shadow: inset 0 var(--border-width-sm) 0 var(--color-gray-200);
    }
}

@media (min-width: 640px) {
    .psw-chat {
        padding-bottom: var(--space-8);
        background: transparent;
    }

    .psw-chat::before {
        content: "";
        position: fixed;
        z-index: -1;
        inset: 0;
        background: var(--color-bg-subtle);
    }

    .psw-chat__window {
        padding: var(--space-8);
    }

    .psw-chat__body {
        padding: 0;
        border: var(--border-width-sm) solid var(--color-gray-200);
        border-radius: var(--radius-lg);
    }

    .psw-chat__messages {
        padding: var(--space-6);
    }

    .psw-chat__composer .psw-chat-input {
        padding-left: var(--space-6);
    }

    .psw-chat__footer {
        margin-top: var(--space-8);
        padding: 0;
        background: transparent;
    }

    .psw-chat__footer-mobile {
        display: none;
    }

    .psw-chat__footer-desktop {
        display: block;
    }
}
}