/* Single-window chat UI (stage 8b, design document Part 12). */

/* Anchor the height chain to the document root so the chat fills the viewport. */
html:has(body.chat-page) {
    height: 100%;
}

.chat-page {
    height: 100%;
    /* --app-height is kept in sync with the visual viewport by chat.js so the open
       mobile keyboard never hides the composer or the last message. */
    --app-height: 100dvh;
    margin: 0;
    min-height: 0;
    background: var(--color-web-pale-blue);
    overflow: hidden;
}

.chat-page .feedback-shell {
    height: var(--app-height, 100dvh);
    max-width: 820px;
    padding: 0;
    display: flex;
    min-height: 0;
}

.chat-page main {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    padding: 0 !important;
}

.chat-page .footer {
    display: none;
}

.chat {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: var(--color-white);
    box-shadow: 0 0 40px rgba(37, 45, 66, 0.08);
}

.chat__header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-palest-blue);
    background: var(--color-white);
}

.chat__logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.chat__title {
    font-weight: 600;
    color: var(--color-deep-blue);
}

.chat__stream {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    scroll-behavior: smooth;
}

.chat__bubble {
    max-width: 82%;
    padding: 0.6rem 0.85rem;
    border-radius: 1.1rem;
    line-height: 1.4;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.chat__bubble p {
    margin: 0;
}

.chat__bubble--bot {
    align-self: flex-start;
    background: var(--color-palest-blue);
    color: var(--color-deep-blue);
    border-bottom-left-radius: 0.3rem;
}

.chat__bubble--user {
    align-self: flex-end;
    background: var(--color-accessible-blue);
    color: var(--color-white);
    border-bottom-right-radius: 0.3rem;
}

.chat__bubble--pending {
    opacity: 0.65;
}

.chat__intro-text {
    margin-bottom: 0.6rem;
}

.chat__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.chat__chip-group-label {
    flex-basis: 100%;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-deep-blue);
    opacity: 0.55;
    margin-top: 0.3rem;
}

.chat__chip {
    border: 1px solid var(--color-accessible-blue);
    background: var(--color-white);
    color: var(--color-accessible-blue);
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.chat__chip:hover,
.chat__chip:focus-visible {
    background: var(--color-accessible-blue);
    color: var(--color-white);
}

.chat__chip[aria-pressed="true"] {
    background: var(--color-deep-blue);
    border-color: var(--color-deep-blue);
    color: var(--color-white);
}

/* Image attachments in a bot bubble (receiver for stage 5 media). */
.chat__image {
    margin-top: 0.5rem;
}

.chat__image img,
.chat__image video {
    max-width: 100%;
    border-radius: 0.6rem;
    display: block;
}

.chat__image-caption {
    margin: 0.3rem 0 0;
    font-size: 0.8rem;
    opacity: 0.75;
}

/* Per-answer rating (the only rating control; no emoji reactions). */
.chat__votes {
    align-self: flex-start;
    display: flex;
    gap: 0.35rem;
    margin: -0.2rem 0 0.2rem 0.2rem;
}

.chat__vote {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0.2rem 0.35rem;
    border-radius: 0.5rem;
    opacity: 0.55;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.chat__vote:hover {
    opacity: 1;
    background: var(--color-web-pale-blue);
}

.chat__vote.is-active {
    opacity: 1;
    background: var(--color-palest-blue);
}

.chat__comment {
    align-self: flex-start;
    display: flex;
    gap: 0.35rem;
    margin: 0 0 0.3rem 0.2rem;
    max-width: 82%;
    width: 320px;
}

.chat__comment input {
    flex: 1 1 auto;
    border: 1px solid var(--color-palest-blue);
    border-radius: 0.6rem;
    padding: 0.3rem 0.55rem;
    font-size: 0.85rem;
}

.chat__comment button {
    border: none;
    background: var(--color-accessible-blue);
    color: var(--color-white);
    border-radius: 0.6rem;
    padding: 0 0.6rem;
    font-size: 0.8rem;
    cursor: pointer;
}

.chat__note {
    align-self: center;
    color: var(--color-deep-blue);
    opacity: 0.7;
    font-size: 0.85rem;
    text-align: center;
}

.chat__actions {
    flex: 0 0 auto;
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    padding: 0.4rem 1rem 0;
}

.chat__action {
    border: none;
    background: transparent;
    color: var(--color-accessible-blue);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    border-radius: 0.5rem;
}

.chat__action:hover {
    text-decoration: underline;
}

/* Pending image attachment preview, shown above the composer until the message is sent. */
.chat__attachment {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    border-top: 1px solid var(--color-palest-blue);
    background: var(--color-web-pale-blue);
    font-size: 0.85rem;
    color: var(--color-deep-blue);
}

.chat__attachment img {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 0.4rem;
}

.chat__attachment-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat__attachment-remove {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: var(--color-deep-blue);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.15rem 0.4rem;
    border-radius: 0.4rem;
}

.chat__attachment-remove:hover {
    background: var(--color-palest-blue);
}

.chat__composer {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 0.4rem;
    padding: 0.6rem 0.75rem;
    border-top: 1px solid var(--color-palest-blue);
    background: var(--color-white);
}

.chat__icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: var(--color-deep-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.chat__icon svg {
    width: 22px;
    height: 22px;
}

/* Paperclip and microphone are present but reserved for future versions. */
.chat__icon:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.chat__input {
    flex: 1 1 auto;
    resize: none;
    border: 1px solid var(--color-palest-blue);
    border-radius: 1.2rem;
    padding: 0.55rem 0.9rem;
    font-size: 1rem;
    line-height: 1.35;
    max-height: 9rem; /* ~5 lines, then the textarea scrolls internally */
    overflow-y: auto;
}

.chat__input:focus {
    outline: none;
    border-color: var(--color-accessible-blue);
    box-shadow: 0 0 0 0.15rem rgba(36, 122, 197, 0.18);
}

.chat__send {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--color-accessible-blue);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.chat__send svg {
    width: 20px;
    height: 20px;
}

.chat__send:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

@media (max-width: 860px) {
    .chat-page .feedback-shell {
        max-width: 100%;
    }

    .chat {
        box-shadow: none;
    }
}

/* Composer must never overflow a narrow viewport. A flex item defaults to
   min-width:auto and won't shrink below its content, which pushed the mic and
   send buttons off-screen on phones. Let the textarea shrink instead. */
.chat__composer {
    max-width: 100%;
}

.chat__input {
    min-width: 0;
}

/* Shared brand header (_BrandBlock) and the intro question block both span the full
   stream width (the stream's padding is the side margin) and never overflow. */
.chat__brand,
.chat__intro {
    align-self: stretch;
    max-width: 100%;
}

.chat__brand {
    margin-bottom: 0.3rem;
    min-width: 0;
}

.chat-page .admin-shell-brand {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    overflow: hidden;
}

.chat-page .admin-shell-brand__title,
.chat-page .admin-shell-brand__credit {
    overflow-wrap: anywhere;
}

/* Subject chosen from the intro block, pinned in the compact top bar. It is a button:
   tapping it ends the current chat and reopens the topic chooser. */
.chat__subject-chip {
    margin-left: auto;
    border: 1px solid var(--color-accessible-blue);
    background: var(--color-palest-blue);
    color: var(--color-accessible-blue);
    border-radius: 999px;
    padding: 0.2rem 0.75rem;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.chat__subject-chip:hover,
.chat__subject-chip:focus-visible {
    background: var(--color-accessible-blue);
    color: var(--color-white);
}

.chat__header .chat__title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* "Assistant is typing" indicator while a request is in flight. */
.chat__typing {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.85rem 0.95rem;
}

.chat__typing-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-deep-blue);
    opacity: 0.3;
    animation: chat-typing 1s infinite ease-in-out;
}

.chat__typing-dot:nth-child(2) {
    animation-delay: 0.15s;
}

.chat__typing-dot:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes chat-typing {
    0%, 100% { opacity: 0.25; transform: translateY(0); }
    50% { opacity: 0.9; transform: translateY(-3px); }
}

/* Start-new-chat button offered after a conversation ends. */
.chat__restart {
    align-self: center;
    border: 1px solid var(--color-accessible-blue);
    background: var(--color-white);
    color: var(--color-accessible-blue);
    border-radius: 999px;
    padding: 0.45rem 1.1rem;
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.chat__restart:hover,
.chat__restart:focus-visible {
    background: var(--color-accessible-blue);
    color: var(--color-white);
}

/* Inline "Talk to a person" link under a not-found answer. */
.chat__escalate-cta {
    align-self: flex-start;
    margin: -0.2rem 0 0.2rem 0.2rem;
    border: none;
    background: transparent;
    color: var(--color-accessible-blue);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 0.5rem;
}

.chat__escalate-cta:hover {
    text-decoration: underline;
}

/* Escalation contact card: email is required before a person is involved. */
.chat__escalate {
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    background: var(--color-palest-blue);
    border-radius: 1.1rem;
    border-bottom-left-radius: 0.3rem;
    padding: 0.8rem 0.95rem;
    width: min(82%, 340px);
}

.chat__escalate-title {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-deep-blue);
}

.chat__escalate input {
    border: 1px solid rgba(36, 122, 197, 0.35);
    background: var(--color-white);
    border-radius: 0.6rem;
    padding: 0.45rem 0.6rem;
    font: inherit;
    font-size: 0.9rem;
}

.chat__escalate input:focus {
    outline: none;
    border-color: var(--color-accessible-blue);
}

.chat__escalate-error {
    margin: 0;
    color: #b3261e;
    font-size: 0.8rem;
}

.chat__escalate-actions {
    display: flex;
    gap: 0.4rem;
}

.chat__escalate-send {
    border: none;
    background: var(--color-accessible-blue);
    color: var(--color-white);
    border-radius: 0.6rem;
    padding: 0.4rem 0.8rem;
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.chat__escalate-send:disabled {
    opacity: 0.5;
    cursor: wait;
}

.chat__escalate-cancel {
    border: none;
    background: transparent;
    color: var(--color-deep-blue);
    opacity: 0.7;
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

/* Votes go inert once the session is closed. */
.chat__vote:disabled {
    opacity: 0.25;
    cursor: default;
    background: transparent;
}

/* Tighten the composer on small phones so the send button stays comfortably
   inside the screen. */
@media (max-width: 430px) {
    .chat__composer {
        gap: 0.3rem;
        padding: 0.5rem 0.55rem;
    }

    .chat__icon {
        width: 34px;
        height: 34px;
    }

    .chat__send {
        width: 40px;
        height: 40px;
    }
}