/* ── Page shell + two-column grid ─────────────────────────── */

/* Set up a definite-height chain so .chat-panel can use max-height:100%
   to cap itself at the available viewport space. The panel still sizes
   to its content when chat is short — max-height only kicks in when
   content would otherwise exceed the viewport. */
.ui-page-content:has(> .sse-chat-page) {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.sse-chat-page {
    max-width: 1800px;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.chat-grid {
    display: grid;
    /* Figma split: chat 835px / right 756px ≈ 1.1 : 1 */
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 1fr);
    /* Row 1 = title (auto), row 2 = panels (fills remaining height). */
    grid-template-rows: auto 1fr;
    gap: var(--app-gap-lg, 16px);
    flex: 1 1 auto;
    min-height: 0;
    align-items: start;
}

.chat-center {
    display: flex;
    flex-direction: column;
    gap: var(--app-gap-md, 10px);
    min-width: 0;
    min-height: 0;
    /* Take full row-2 height so .chat-panel's max-height:100% can use it. */
    align-self: stretch;
}

/* Grey panel that wraps the turns + composer; sits below the "Chat" title.
   Hardcoded #f9f9f9 (not --app-bg-secondary, which menu.css darkens to
   #f0f0f0) to match the Select Documents modal's grey.
   max-height:100% caps the panel at .chat-center's height so its bottom
   never falls below the viewport — the sticky .chat-dock then always
   sits at the panel's actual bottom edge with no content below it.
   The panel still sizes to its content when chat is short. */
.chat-panel {
    background: #f9f9f9;
    border-radius: var(--app-radius-lg, 12px);
    /* No padding-bottom — the .chat-dock provides the bottom inset so
       it sits flush with the panel's bottom edge. With padding-bottom,
       content would scroll through the gap below the dock's bbox. */
    padding: 20px 20px 0;
    display: flex;
    flex-direction: column;
    gap: var(--app-gap-md, 10px);
    max-height: 100%;
    overflow-y: auto;
}

.chat-rightcol {
    display: flex;
    flex-direction: column;
    gap: var(--app-gap-md, 10px);
    min-width: 0;
}

/* Filter & Source Documents are panel-style: grey backdrop, content sits
   directly on grey (no inner white card chrome). Grey matches .chat-panel
   and the Select Documents modal — see the note on .chat-panel above. */
.chat-rightcol > .filter-card,
.chat-rightcol > .source-docs-card {
    background: #f9f9f9;
    border-color: transparent;
}

.sse-chat-page .chat-rightcol > .filter-card > .chat-card__summary,
.sse-chat-page .chat-rightcol > .source-docs-card > .chat-card__summary {
    background: transparent;
}

.sse-chat-page .chat-rightcol > details.filter-card[open] > .chat-card__summary {
    border-bottom-color: transparent;
}

@media (max-width: 1399px) {
    .chat-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── Chat panel header ────────────────────────────────────── */

.chat-panel-header {
    /* Span both grid columns so the chat panel and right-column cards
       start on the same row and align at the top. */
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 4px 8px;
}

.chat-panel-header__title {
    margin: 0;
    /* font-size/line-height/weight inherited from .inquiry-page h1
       so the heading matches the standard admin page-title size. */
    color: var(--app-text-primary, rgba(17, 24, 39, 0.87));
}

/* ── Turn stack (chat history) ────────────────────────────── */

.chat-turns {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.chat-turn {
    display: flex;
    flex-direction: column;
    gap: var(--app-gap-md, 10px);
}

.chat-turn__blurb {
    align-self: flex-end;
    max-width: 70%;
    padding: 8px 14px;
    background: var(--app-bg-tertiary, #4a4a4a);
    color: var(--app-text-white, #f5f5f5);
    border-radius: var(--app-radius-sm, 6px);
    font-size: 13px;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-turn__attachment {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    opacity: 0.85;
}

/* ── Card primitive (View Trace, Reply, Sources, Usage Stats,
       Filter, Source Documents all use this) ────────────────── */

.chat-card {
    background: var(--app-bg-primary, #fff);
    border: 1px solid var(--app-stroke-primary, hsla(0, 0%, 40%, 0.15));
    border-radius: var(--app-radius-md, 8px);
    overflow: hidden;
}

/* Neutralize the legacy `.dlg-page details { margin-top: 12px }` rule
   (css/dialogue.css, meant for old "Advanced toggle" widgets) — it leaks
   onto chat cards (all <details>) and pushes the right column's Filter
   card 12px below the left chat panel. Chat cards space themselves via
   the flex `gap` of their container. */
.sse-chat-page details.chat-card {
    margin-top: 0;
}

.sse-chat-page .chat-card__summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    list-style: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--app-text-primary, rgba(17, 24, 39, 0.87));
    background: var(--app-bg-primary, #fff);
}

.sse-chat-page details.chat-card[open] > .chat-card__summary {
    border-bottom: 1px solid var(--app-stroke-primary, hsla(0, 0%, 40%, 0.15));
}

.sse-chat-page .chat-card__summary--static {
    cursor: default;
}

.sse-chat-page .chat-card__summary::-webkit-details-marker {
    display: none;
}

.sse-chat-page .chat-card__summary::marker {
    display: none;
}

/* Chevron — uses ▶ rotated to ▼ when open */
details.chat-card > .chat-card__summary::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 6px;
    border-color: transparent transparent transparent var(--app-icon-primary, rgba(17, 24, 39, 0.57));
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

details.chat-card[open] > .chat-card__summary::before {
    transform: rotate(90deg);
}

.chat-card__title {
    font-weight: 600;
}

.chat-card__meta {
    margin-left: auto;
    font-size: 13px;
    font-weight: 400;
    color: var(--app-text-secondary, #878787);
    font-style: normal;
}

.chat-card__meta:empty {
    display: none;
}

.chat-card__body {
    padding: 12px 14px 14px;
}

/* Reply card body is a <pre> — strip default margins, allow wrap */
pre.chat-card__body {
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: var(--app-font-primary, "Geist", sans-serif);
    font-size: 14px;
    line-height: 1.5;
}

/* ── View Trace body internals (kept from old design) ─────── */

.sse-view-trace .inquiry-tree:empty {
    display: none;
}

.sse-chat-status {
    /* Status now lives in the summary meta; hide the legacy div. */
    display: none;
}

.sse-stream-box {
    border: 1px solid var(--app-stroke-primary, hsla(0, 0%, 40%, 0.15));
    border-radius: var(--app-radius-sm, 6px);
    overflow: hidden;
    margin-top: 10px;
}

.sse-stream-box-label {
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--app-text-secondary, #878787);
    background: var(--app-bg-secondary, #f9f9f9);
    border-bottom: 1px solid var(--app-stroke-primary, hsla(0, 0%, 40%, 0.15));
}

.sse-stream-box-content {
    margin: 0;
    padding: 10px;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: 13px;
    line-height: 1.5;
}

.sse-thinking-box {
    border-color: #c9b3f0;
}

.sse-thinking-box .sse-stream-box-label {
    background: #f0eaf9;
    border-color: #c9b3f0;
    color: #6b4ea0;
}

.sse-thinking-box .sse-stream-box-content {
    color: #555;
    font-style: italic;
}

/* ── Sources card (rendered by JS) ────────────────────────── */

details.sse-stream-box.sse-sources,
details.sse-stream-box.sse-usage-stats {
    /* Override the inner-box look — these are top-level cards now */
    background: var(--app-bg-primary, #fff);
    border: 1px solid var(--app-stroke-primary, hsla(0, 0%, 40%, 0.15));
    border-radius: var(--app-radius-md, 8px);
    overflow: hidden;
    margin: 0;
}

details.sse-stream-box.sse-sources > summary.sse-stream-box-label,
details.sse-stream-box.sse-usage-stats > summary.sse-stream-box-label {
    cursor: pointer;
    user-select: none;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--app-text-primary, rgba(17, 24, 39, 0.87));
    background: var(--app-bg-primary, #fff);
    border-bottom: 1px solid var(--app-stroke-primary, hsla(0, 0%, 40%, 0.15));
    display: flex;
    align-items: center;
    gap: 8px;
}

details.sse-stream-box.sse-sources > summary.sse-stream-box-label::-webkit-details-marker,
details.sse-stream-box.sse-usage-stats > summary.sse-stream-box-label::-webkit-details-marker {
    display: none;
}

details.sse-stream-box.sse-sources > summary.sse-stream-box-label::before,
details.sse-stream-box.sse-usage-stats > summary.sse-stream-box-label::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 6px;
    border-color: transparent transparent transparent var(--app-icon-primary, rgba(17, 24, 39, 0.57));
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

details.sse-stream-box.sse-sources[open] > summary.sse-stream-box-label::before,
details.sse-stream-box.sse-usage-stats[open] > summary.sse-stream-box-label::before {
    transform: rotate(90deg);
}

details.sse-stream-box.sse-sources:not([open]) > summary.sse-stream-box-label,
details.sse-stream-box.sse-usage-stats:not([open]) > summary.sse-stream-box-label {
    border-bottom: none;
}

.sse-sources__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 14px 14px;
}

.sse-source-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--app-stroke-primary, hsla(0, 0%, 40%, 0.15));
    border-radius: var(--app-radius-sm, 6px);
    text-decoration: none;
    color: inherit;
    transition: background-color 0.1s ease;
}

.sse-source-card__thumb {
    width: 48px;
    height: 62px;
    flex-shrink: 0;
    border-radius: 4px;
    /* Literal grey: a thumbnail placeholder, kept slightly darker than the
       card so the box is visible before the image loads. */
    background: #f0f0f0;
    overflow: hidden;
}

.sse-source-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sse-source-card__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sse-source-card__title {
    font-weight: 600;
    font-size: 13px;
    line-height: 18px;
    color: var(--app-text-primary, rgba(17, 24, 39, 0.87));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

a.sse-source-card__title {
    color: var(--app-brand-color, #141b9b);
    text-decoration: none;
}

a.sse-source-card__title:hover {
    text-decoration: underline;
}

.sse-source-card__id {
    font-size: 11px;
    color: var(--app-text-secondary, #888);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sse-source-card__brief {
    font-size: 12px;
    line-height: 16px;
    color: #555;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 2px;
}

/* ── Usage Stats card body ────────────────────────────────── */

.sse-usage-stats__content {
    white-space: normal;
    padding: 10px 14px 14px;
}

.sse-usage-stats .chat-stat {
    font-size: 13px;
    line-height: 1.6;
}

.sse-usage-stats .chat-stat-label {
    color: var(--app-text-secondary, #878787);
    font-weight: 500;
}

/* ── Feedback bar ─────────────────────────────────────────── */

.sse-feedback {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 14px;
}

.sse-chat-page .sse-feedback__btn {
    background: none;
    border: 1px solid var(--app-stroke-primary, hsla(0, 0%, 40%, 0.15));
    border-radius: var(--app-radius-sm, 6px);
    padding: 4px 10px;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    line-height: 1;
    filter: grayscale(1);
}

.sse-chat-page .sse-feedback__btn:hover {
    background: var(--app-bg-hover, #f5f5f5);
    filter: grayscale(0);
}

.sse-chat-page .sse-feedback__btn.selected {
    border-color: var(--app-brand-color, #141b9b);
    background: rgba(20, 27, 155, 0.08);
    filter: grayscale(0);
}

.sse-chat-page .sse-feedback__btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* ── Feedback modal ───────────────────────────────────────── */

.sse-feedback-modal {
    width: 460px;
}

.sse-feedback-modal__prompt {
    margin: 0;
}

.sse-feedback-modal__row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.sse-feedback-modal__comment {
    flex: 1;
    min-height: 110px;
    resize: vertical;
    font-family: inherit;
}

.sse-feedback-modal__thumbs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.sse-feedback-modal__thumb {
    background: var(--app-bg-primary, #fff);
    border: 1px solid var(--app-stroke-primary, hsla(0, 0%, 40%, 0.15));
    border-radius: var(--app-radius-sm, 6px);
    padding: 6px 10px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    filter: grayscale(1);
}

.sse-feedback-modal__thumb:hover {
    background: var(--app-bg-hover, #f5f5f5);
    filter: grayscale(0);
}

.sse-feedback-modal__thumb.selected {
    background: var(--app-bg-selected, rgba(20, 27, 155, 0.11));
    border-color: var(--app-brand-color, #141b9b);
    filter: grayscale(0);
}

.sse-feedback__status {
    font-size: 13px;
    color: #16a34a;
    flex-shrink: 0;
}

/* ── Composer (Ask anything…) ─────────────────────────────── */

/* Sticky grey dock that wraps the composer; extends past the
   .chat-panel padding so content scrolls fully behind the input.
   Sticks to the bottom of .chat-panel's scrollport (the panel is
   capped at viewport height and scrolls internally), so the dock
   always sits at the panel's actual bottom edge — no content can
   appear below it during scroll. */
.sse-chat-page .chat-dock {
    position: sticky;
    /* -1px overshoots the scrollport edge so subpixel rounding can't
       leave a sliver of content visible below the dock. */
    bottom: -1px;
    z-index: 5;
    background: #f9f9f9;
    /* Extend horizontally past .chat-panel's side padding. No bottom
       negative margin needed since .chat-panel has no padding-bottom. */
    margin: 0 -20px 0;
    padding: 6px 20px 20px;
    border-bottom-left-radius: var(--app-radius-lg, 12px);
    border-bottom-right-radius: var(--app-radius-lg, 12px);
}

.sse-chat-page .chat-ask {
    background: var(--app-bg-primary, #fff);
    border: 1px solid var(--app-stroke-primary, hsla(0, 0%, 40%, 0.15));
    border-radius: var(--app-radius-md, 8px);
    padding: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.sse-chat-page .chat-ask form {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* + button (plus-menu trigger) ──────────────────────────── */

/* Attachment chip — sits above the ask row until the message is sent. */

.sse-chat-page .chat-ask__attachment[hidden] {
    display: none;
}

.sse-chat-page .chat-ask__attachment {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 6px 4px;
    font-size: 13px;
    color: var(--app-text-secondary, rgba(17, 24, 39, 0.65));
}

.sse-chat-page .chat-ask__attachment-name {
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sse-chat-page .chat-ask__attachment-name::before {
    content: "\1F4CE  ";
}

.sse-chat-page .chat-ask__attachment-remove {
    border: none;
    background: transparent;
    color: inherit;
    font-size: 16px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
    border-radius: var(--app-radius-sm, 6px);
}

.sse-chat-page .chat-ask__attachment-remove:hover {
    background: var(--app-bg-hover, #f5f5f5);
}

.chat-ask__plus-wrap {
    position: relative;
    flex-shrink: 0;
}

.sse-chat-page .chat-ask__plus {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--app-stroke-primary, hsla(0, 0%, 40%, 0.15));
    border-radius: var(--app-radius-sm, 6px);
    background: var(--app-bg-primary, #fff);
    color: var(--app-text-primary, rgba(17, 24, 39, 0.87));
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.sse-chat-page .chat-ask__plus:hover {
    background: var(--app-bg-hover, #f5f5f5);
    border-color: var(--app-stroke-primary, hsla(0, 0%, 40%, 0.25));
}

/* Popover menu — anchored above the + button, left-aligned with it.
   position:fixed (coordinates set by the script on open) so it escapes
   .chat-panel's overflow clipping. */

.chat-ask__plus-menu {
    position: fixed;
    z-index: 1000;
    min-width: 160px;
    background: var(--app-bg-primary, #fff);
    border: 1px solid var(--app-stroke-primary, hsla(0, 0%, 40%, 0.15));
    border-radius: var(--app-radius-sm, 6px);
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.08),
        0 3px 6px -4px rgba(0, 0, 0, 0.12),
        0 9px 28px 8px rgba(0, 0, 0, 0.05);
    padding: 6px;
}

.sse-chat-page .chat-ask__plus-menu-item {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: none;
    background: transparent;
    color: var(--app-text-primary, rgba(17, 24, 39, 0.87));
    font-size: 14px;
    font-family: inherit;
    border-radius: var(--app-radius-sm, 6px);
    cursor: pointer;
    text-align: left;
    transition: background-color 0.15s ease;
}

.sse-chat-page .chat-ask__plus-menu-item:hover {
    background: var(--app-bg-hover, #f5f5f5);
}

.chat-ask__plus-menu-icon {
    flex-shrink: 0;
    color: var(--app-icon-primary, rgba(17, 24, 39, 0.57));
}

.sse-chat-page input[type=text].chat-ask__input {
    flex: 1;
    box-sizing: border-box;
    max-width: none;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: var(--app-radius-sm, 6px);
    background: var(--app-bg-primary, #fff);
    color: var(--app-text-primary, rgba(17, 24, 39, 0.87));
    font-size: 14px;
    line-height: 22px;
    font-family: inherit;
}

.sse-chat-page .chat-ask__input::placeholder {
    color: var(--app-text-placeholder, rgba(17, 24, 39, 0.35));
}

.sse-chat-page .chat-ask__input:focus {
    outline: none;
    border-color: var(--app-brand-color, #141b9b);
}

.sse-chat-page .chat-ask__send {
    background: var(--app-brand-color, #141b9b);
    color: var(--app-text-white, #fff);
    border: none;
    border-radius: var(--app-radius-sm, 6px);
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease;
    font-family: inherit;
}

.sse-chat-page .chat-ask__send:hover {
    background: #1a23c4;
    border-color: transparent;
}

.sse-chat-page .chat-ask__send:disabled {
    opacity: 0.5;
    cursor: default;
}

/* ── Right column: Filter card ────────────────────────────── */

.filter-card__body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* .filter-section, __legend and __check live in filter-section.css, shared
 * with the Search Config page's "Test Retrieval" panel. Only the page-scoped
 * sizing below is specific to this page. */

.sse-chat-page input[type=text].filter-section__input {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid var(--app-stroke-primary, hsla(0, 0%, 40%, 0.15));
    border-radius: var(--app-radius-sm, 6px);
    font-size: 13px;
    font-family: inherit;
    background: var(--app-bg-primary, #fff);
    color: var(--app-text-primary, rgba(17, 24, 39, 0.87));
}

.sse-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sse-filter-chips:empty {
    display: none;
}

/* ── Right column: Source Documents card ──────────────────── */

.source-docs-card .chat-card__summary {
    padding: 10px 14px;
    font-weight: 600;
}

.source-docs-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 18px 14px;
    text-align: center;
}

.sse-selected-docs {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-start;
}

.sse-selected-docs:empty {
    display: none;
}

/* Empty-state is hidden when there ARE selected docs */
.sse-selected-docs:not(:empty) ~ .source-docs-empty {
    display: none;
}

.source-docs-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 0;
    color: var(--app-text-secondary, #878787);
}

.source-docs-empty__icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--app-bg-secondary, #f9f9f9);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--app-icon-primary, rgba(17, 24, 39, 0.57));
}

.source-docs-empty__label {
    font-size: 13px;
}

.sse-chat-page .source-docs-btn {
    background: var(--app-action-primary, #212121);
    color: var(--app-text-white, #fff);
    border: 1px solid var(--app-action-primary, #212121);
    border-radius: var(--app-radius-sm, 6px);
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    font-family: inherit;
}

.sse-chat-page .source-docs-btn:hover {
    background: var(--app-action-hover, #141b9b);
    border-color: var(--app-action-hover, #141b9b);
}