/*
 * CHAT desktop workspace layout.
 * Loaded last: this file owns the desktop composition only.
 *
 * Important: do not gate the dashboard by viewport height. On Windows display
 * scaling / browser zoom a 1700x860 physical screen can expose only ~600 CSS
 * pixels of height, which previously prevented this layout from ever applying.
 */

@media (min-width: 1050px) {
    body:has(#chatApp) .app-main {
        height: calc(100dvh - var(--header-h));
        min-height: 0;
        overflow: hidden;
    }

    #chatApp.chat-page {
        width: min(1600px, calc(100% - 32px));
        height: calc(100dvh - var(--header-h));
        min-height: 0;
        margin: 0 auto;
        padding: 12px 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr) clamp(320px, 25vw, 410px);
        grid-template-rows: auto auto auto minmax(0, 1fr);
        grid-template-areas:
            "masthead masthead"
            "conversation controls"
            "conversation privacy"
            "conversation filler";
        column-gap: 18px;
        row-gap: 12px;
        overflow: hidden;
    }

    #chatApp .chat-home-masthead {
        grid-area: masthead;
        margin: 0;
        flex: 0 0 auto;
    }

    /* Main chat: tall primary workspace. */
    #chatApp .conversation-shell {
        grid-area: conversation;
        align-self: stretch;
        min-width: 0;
        min-height: 0;
        height: 100%;
        margin: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    #chatApp .conversation-topline {
        flex: 0 0 auto;
        min-height: 52px;
        gap: 12px;
        padding: 8px 16px;
    }

    #chatApp .session-label {
        min-width: 0;
        flex: 1 1 auto;
    }

    #chatApp .session-label strong {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #chatApp .conversation-tools {
        flex: 0 0 auto;
        gap: 7px;
    }

    #chatApp .prediction-results-button {
        min-height: 34px;
        padding-inline: 9px;
    }

    #chatApp .chat-feed {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        padding: 24px clamp(18px, 3vw, 52px) 20px;
        scroll-padding-bottom: 20px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    #chatApp .empty-state {
        margin-top: clamp(12px, 3vh, 36px);
    }

    #chatApp .thinking-strip,
    #chatApp .thinking-strip:not([hidden]) {
        flex: 0 0 auto;
        margin: 0 clamp(18px, 3vw, 52px) 8px;
    }

    /* Neutralize the older viewport-fixed composer on desktop. */
    #chatApp .composer-wrap {
        position: static;
        inset: auto;
        left: auto;
        right: auto;
        bottom: auto;
        z-index: 4;
        width: auto;
        flex: 0 0 auto;
        padding: 0 12px 12px;
        transform: none;
        border-top: 0;
        background: linear-gradient(180deg, rgba(2,10,22,0), rgba(2,10,22,.96) 24%);
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        pointer-events: auto;
    }

    #chatApp .composer-wrap > * {
        pointer-events: auto;
    }

    #chatApp .selected-participants {
        position: static;
        inset: auto;
        min-height: 22px;
        max-height: 26px;
        margin: 0 5px 6px;
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
    }

    #chatApp .selected-participants:empty {
        display: none;
    }

    #chatApp .composer {
        min-height: 48px;
    }

    #chatApp .composer textarea {
        min-height: 40px;
        max-height: 120px;
    }

    /* Right rail: conversation controls beside the chat. */
    #chatApp .persona-toolbar {
        grid-area: controls;
        position: static;
        top: auto;
        align-self: start;
        min-width: 0;
        min-height: 0;
        padding: 14px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        border-radius: 18px;
        z-index: 30;
    }

    #chatApp .toolbar-primary {
        width: 100%;
        min-width: 0;
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 6px;
    }

    #chatApp .field-label {
        padding-left: 2px;
    }

    #chatApp .select-wrap-lg {
        width: 100%;
        min-width: 0;
    }

    #chatApp .toolbar-actions {
        min-width: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: 9px;
    }

    #chatApp .participant-picker {
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
    }

    #chatApp .participant-picker > .btn {
        width: 100%;
        min-height: 46px;
        justify-content: flex-start;
        padding-inline: 13px;
    }

    #chatApp .participant-picker > .btn .count-badge {
        margin-left: auto;
    }

    #chatApp .switch-control {
        min-width: 0;
        min-height: 66px;
        padding: 10px 11px;
        align-items: center;
        border: 1px solid rgba(93,177,255,.14);
        border-radius: 14px;
        background: linear-gradient(180deg, rgba(9,34,62,.68), rgba(5,20,38,.64));
    }

    #chatApp .switch-control:hover {
        border-color: rgba(24,216,255,.22);
        background: linear-gradient(180deg, rgba(11,43,77,.78), rgba(5,24,45,.72));
    }

    #chatApp .switch-copy {
        min-width: 0;
    }

    #chatApp .switch-copy strong,
    #chatApp .switch-copy small {
        white-space: normal;
    }

    #chatApp .round-control {
        grid-column: 1 / -1;
        min-height: 48px;
        padding: 7px 11px;
        justify-content: space-between;
        border: 1px solid rgba(93,177,255,.14);
        border-radius: 14px;
        background: rgba(5,20,38,.58);
    }

    #chatApp .round-control[hidden] {
        display: none;
    }

    #chatApp .round-control:not([hidden]) {
        display: flex;
    }

    #chatApp .round-control .select-compact {
        width: 82px;
    }

    #chatApp .popover {
        left: auto;
        right: 0;
        width: min(390px, calc(100vw - 48px));
        max-width: calc(100vw - 48px);
    }

    #chatApp .privacy-status {
        grid-area: privacy;
        align-self: start;
        min-width: 0;
        margin: 0;
        padding: 14px 15px;
        display: grid;
        grid-template-columns: 10px minmax(0, 1fr);
        column-gap: 9px;
        row-gap: 5px;
        border: 1px solid rgba(24,216,255,.11);
        border-radius: 16px;
        background: linear-gradient(180deg, rgba(7,28,52,.72), rgba(4,18,35,.68));
        box-shadow: 0 14px 34px rgba(0,5,20,.18);
    }

    #chatApp .privacy-status-dot {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
        width: 8px;
        height: 8px;
        border-radius: 999px;
    }

    #chatApp .privacy-status > strong {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        color: var(--text-soft);
        font-size: 12px;
    }

    #chatApp .privacy-status > span:last-child {
        grid-column: 1 / -1;
        color: var(--muted);
        font-size: 11px;
        line-height: 1.45;
    }
}

/* Medium desktop / Windows scaled displays. */
@media (min-width: 1050px) and (max-width: 1399px) {
    #chatApp.chat-page {
        grid-template-columns: minmax(0, 1fr) 320px;
        column-gap: 14px;
    }

    #chatApp .persona-toolbar {
        padding: 12px;
    }

    #chatApp .toolbar-actions {
        grid-template-columns: 1fr;
    }

    #chatApp .participant-picker,
    #chatApp .round-control {
        grid-column: auto;
    }

    #chatApp .switch-control {
        min-height: 54px;
    }

    #chatApp .call-estimate {
        display: none;
    }
}

/* Short desktop viewport: compact the masthead rather than disabling layout. */
@media (min-width: 1050px) and (max-height: 700px) {
    #chatApp.chat-page {
        padding-block: 8px;
        row-gap: 8px;
    }

    #chatApp .chat-home-masthead {
        min-height: 96px;
        padding-block: 6px;
    }

    #chatApp .chat-home-masthead-visual {
        height: 84px;
    }

    #chatApp .chat-home-masthead .chatbot-robot--hero {
        --robot-scale: .44;
    }

    #chatApp .chat-home-masthead-copy {
        gap: 16px;
    }

    #chatApp .chat-home-masthead-text span {
        line-height: 1.35;
    }

    #chatApp .conversation-topline {
        min-height: 46px;
        padding-block: 6px;
    }

    #chatApp .chat-feed {
        padding-top: 16px;
        padding-bottom: 14px;
    }

    #chatApp .persona-toolbar {
        gap: 8px;
        padding: 10px;
    }

    #chatApp .participant-picker > .btn {
        min-height: 40px;
    }

    #chatApp .switch-control {
        min-height: 48px;
        padding-block: 7px;
    }

    #chatApp .round-control {
        min-height: 42px;
    }

    #chatApp .privacy-status {
        padding: 10px 12px;
    }

    #chatApp .composer-wrap {
        padding: 0 10px 10px;
    }

    #chatApp .composer {
        min-height: 44px;
    }

    #chatApp .composer textarea {
        min-height: 38px;
    }
}