/*
  File: SDAI_Layout.css
  Purpose: Two-column page layout rules for the Car Finder host and assistant panel.
  Architecture Role: Places the embedded app in the left region and the assistant panel in the right region.
  Expected Collaborators: SDAI.jsp, SDAI_CarFinderHost.jspf, and SDAI_AssistantPanel.jspf.
  Scaffold Status: Working layout for the vertical slice.
*/
.sdai-portal-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(300px, 0.9fr);
    gap: var(--sdai-space-5);
    max-width: 1440px;
    min-height: 100vh;
    padding: var(--sdai-space-5);
    margin: 0 auto;
}

.sdai-portal-shell__left,
.sdai-portal-shell__right {
    min-width: 0;
}

#SDAI_ChatAIPage.sdai-embedded-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    max-height: none;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

#SDAI_ChatAIPage .sdai-embedded-grid {
    display: flex;
    width: 100%;
    height: 100%;
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
    overflow: hidden;
}

#SDAI_ChatAIPage .sdai-embedded-grid__left,
#SDAI_ChatAIPage .sdai-embedded-grid__right {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

#SDAI_ChatAIPage .sdai-embedded-grid__left {
    flex: 1 1 0;
    width: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    height: 100%;
}

#SDAI_ChatAIPage .sdai-embedded-grid__right {
    flex: 0 0 var(--sdai-assistant-width, 30%);
    max-width: 70%;
    width: 100%;
}

#SDAI_ChatAIPage .sdai-embedded-grid__left::-webkit-scrollbar {
    display: none;
}

#SDAI_ChatAIPage .sdai-embedded-grid__resize-handle {
    position: relative;
    flex: 0 0 12px;
    min-width: 12px;
    cursor: col-resize;
    background: transparent;
}

#SDAI_ChatAIPage .sdai-embedded-grid__resize-handle::before {
    content: "";
    position: absolute;
    top: var(--sdai-space-4);
    bottom: var(--sdai-space-4);
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: rgba(15, 96, 114, 0.16);
}

#SDAI_ChatAIPage .sdai-embedded-grid__resize-handle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 48px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: rgba(15, 96, 114, 0.35);
}

#SDAI_ChatAIPage .sdai-embedded-grid__resize-handle:hover::before,
#SDAI_ChatAIPage .sdai-embedded-grid__resize-handle:hover::after,
#SDAI_ChatAIPage .sdai-embedded-grid--resizing .sdai-embedded-grid__resize-handle::before,
#SDAI_ChatAIPage .sdai-embedded-grid--resizing .sdai-embedded-grid__resize-handle::after {
    background: rgba(15, 96, 114, 0.55);
}

#SDAI_ChatAIPage .sdai-embedded-grid--resizing {
    user-select: none;
    cursor: col-resize;
}

@media (max-width: 960px) {
    .sdai-portal-shell {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    #SDAI_ChatAIPage .sdai-embedded-grid {
        flex-direction: column;
        overflow: hidden;
    }

    #SDAI_ChatAIPage .sdai-embedded-grid__resize-handle {
        display: none;
    }

    #SDAI_ChatAIPage .sdai-embedded-grid__right {
        flex: 0 0 auto;
        max-width: none;
    }
}