/* ============================================
   Dash Chat Application - Center-Focused Layout Styles
   Chat-first layout with analytics widget area on right
   Version: 1.0 - Center-focused architecture
   ============================================ */

/* === ROOT CONTAINER === */
.center-focused-container {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
    max-height: 100vh;
    background: var(--bg-main);
    font-family: var(--font-family);
}

/* Ensure AntdRow fills the container */
.center-focused-container .ant-row {
    width: 100%;
    flex: 1;
}

/* Ensure AntdCol with flex='auto' takes remaining space */
/* Use direct child selector to only target top-level columns, not nested widget columns */
.center-focused-container > .ant-row > .ant-col {
    display: flex;
    height: 100vh;
}

/* === RESIZE HANDLE STYLING === */
.custom-right-resize-handle {
    background: rgba(255, 255, 255, 0.1);
    transition: 0.3s background;
    width: 4px !important;
    right: -2px !important;
    cursor: col-resize;
}

.custom-right-resize-handle:hover,
.custom-right-resize-handle:active {
    background: #4b9cd3;
    transition: 0.3s background;
}

/* === CHAT MAIN AREA (CENTER/LEFT) === */
.chat-main-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bg-main);
    position: relative;
    height: 100vh;
    overflow: hidden;
    /* Reserve space at bottom for absolutely-positioned input */
    /* This ensures messages wrapper doesn't extend under the input */
    padding-bottom: 140px;
}

/* === CHAT MESSAGES WRAPPER (SCROLLABLE) === */
.center-focused-container .chat-messages-wrapper {
    width: 100%;
    max-width: 800px; /* Comfortable reading width */
    flex: 1;
    min-height: 0; /* Allow flex shrinking - critical for proper scroll boundaries */
    overflow-y: scroll; /* Always scrollable to prevent layout shift */
    overflow-x: hidden;
    padding: 20px; /* Uniform padding - no bottom hack needed since input is in flow */
    background: var(--bg-main);
    scrollbar-gutter: stable; /* Reserve space for scrollbar to prevent layout shift */
    -ms-overflow-style: none;  /* Hide scrollbar for IE and Edge */
    scrollbar-width: none;  /* Hide scrollbar for Firefox */
    position: relative;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.center-focused-container .chat-messages-wrapper::-webkit-scrollbar {
    display: none;
}

/* === CHAT MESSAGES CONTAINER (CONTENT) === */
.center-focused-container #chat-messages-container {
    min-height: auto; /* Controlled dynamically by scroll callback */
}

/* === CHAT INPUT CONTAINER === */
/* Absolutely positioned at bottom, but parent has padding-bottom to reserve space */
/* This prevents messages from scrolling underneath the input */
.center-focused-container .chat-input-container {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    max-width: 760px;
    z-index: 100;
    background: #2a2a2a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 14px 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-wrap: wrap; /* Allow dataset selector to wrap to new line */
    align-items: center;
    gap: 8px;
}

/* Textarea takes most of row, send button stays at end */
.center-focused-container .chat-input-container > #chat-input {
    flex: 1;
    min-width: 0; /* Allow shrinking */
}

/* Dataset selector row takes full width on its own line */
.center-focused-container .chat-input-container > .dataset-selector-row {
    flex-basis: 100%;
}

/* Textarea styling (AntdInput with mode='text-area') */
/* Target the component wrapper and ALL nested elements */
.center-focused-container #chat-input,
.center-focused-container #chat-input *,
.center-focused-container #chat-input .ant-input,
.center-focused-container #chat-input .ant-input-affix-wrapper,
.center-focused-container #chat-input .ant-input-textarea,
.center-focused-container #chat-input .ant-input-data-count,
.center-focused-container #chat-input .ant-input-show-count-suffix,
.center-focused-container #chat-input .ant-input-textarea-show-count,
.center-focused-container #chat-input > div {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.center-focused-container #chat-input {
    flex: 1;
    color: #e0e0e0 !important;
    font-size: 14px !important;
    resize: none !important;
    min-height: 24px !important;
    max-height: none !important;
}

.center-focused-container #chat-input .ant-input-affix-wrapper-focused,
.center-focused-container #chat-input .ant-input-affix-wrapper:focus,
.center-focused-container #chat-input .ant-input-affix-wrapper:hover,
.center-focused-container #chat-input .ant-input-textarea-affix-wrapper-focused,
.center-focused-container #chat-input .ant-input-textarea-affix-wrapper:focus,
.center-focused-container #chat-input .ant-input-textarea-affix-wrapper:hover {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Target the actual textarea element */
.center-focused-container #chat-input textarea {
    background: transparent !important;
    border: none !important;
    color: #e0e0e0 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    resize: none !important;
    padding: 4px 0 !important;
    margin: 0 !important;
}

.center-focused-container #chat-input textarea::placeholder {
    color: #9ca3af !important;
}

.center-focused-container #chat-input textarea:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Built-in clear button styling (from allowClear=True) */
.center-focused-container #chat-input .ant-input-clear-icon {
    color: rgba(255, 255, 255, 0.45) !important;
}

.center-focused-container #chat-input .ant-input-clear-icon:hover {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Send button - circular blue design with up arrow (ChatGPT-style) */
.center-focused-container .input-send-btn {
    background: #4b9cd3 !important;
    border: none !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0;
}

.center-focused-container .input-send-btn:hover:not(:disabled) {
    background: #5aaad8 !important;
    transform: scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(75, 156, 211, 0.4) !important;
}

.center-focused-container .input-send-btn:disabled {
    background: #2a2a2a !important;
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

.center-focused-container .input-send-btn .anticon {
    font-size: 16px !important;
}

/* === ANALYTICS WIDGET AREA (RIGHT) === */
.analytics-widget-area {
    flex: 1; /* Takes remaining space, extends to right edge */
    background: rgba(255, 255, 255, 0.02);
    padding: 20px;
    display: flex;
    flex-direction: column;
    overflow-x: visible; /* Allow box-shadow to extend beyond bounds */
    overflow-y: auto;   /* Allow vertical scrolling for many widgets */
}

/* === ANALYTICS EMPTY STATE PLACEHOLDER === */
.analytics-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    gap: 8px;
}

/* === PERSISTENT ELEMENTS POSITIONING === */
/* Permanent elements (typing, streaming) are INSIDE #chat-messages-container */
/* They appear at their natural position after the message list */
.center-focused-container #typing-indicator-display {
    margin-top: 12px;
}

.center-focused-container #sse-streaming-display {
    margin-top: 12px;
}

/* === RESPONSIVE DESIGN === */
@media (max-width: 1024px) {
    /* Hide analytics widget on tablet/mobile */
    .analytics-widget-area {
        display: none;
    }

    /* Chat goes full-width */
    .chat-main-area {
        max-width: 100%;
    }

    /* Maintain max-width for readability */
    .center-focused-container .chat-messages-wrapper {
        max-width: 800px;
    }

    .center-focused-container .chat-input-container {
        max-width: 800px;
    }
}

@media (max-width: 768px) {
    /* Adjust padding on mobile */
    .center-focused-container .chat-messages-wrapper {
        padding: 12px;
    }

    /* Reduce max-width on very small screens */
    .center-focused-container .chat-messages-wrapper,
    .center-focused-container .chat-input-container {
        max-width: 100%;
    }

    /* Adjust parent padding for smaller input */
    .chat-main-area {
        padding-bottom: 120px;
    }
}

/* === THEME CONSISTENCY === */
/* Ensure dark theme colors are consistent */
.center-focused-container {
    background: var(--bg-main);
    color: var(--text-primary);
}

/* === DATASET SELECTOR === */
/* Row containing '+' button and selected dataset pills */
.dataset-selector-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    width: 100%;
}

/* '+' button styling */
.dataset-add-btn {
    color: rgba(255, 255, 255, 0.6) !important;
    background: transparent !important;
    border: 1px dashed rgba(255, 255, 255, 0.2) !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.dataset-add-btn:hover {
    color: #4b9cd3 !important;
    border-color: #4b9cd3 !important;
    background: rgba(75, 156, 211, 0.1) !important;
}

/* Pills container */
.dataset-pills-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
}

/* Individual pill styling */
.dataset-pill {
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(75, 156, 211, 0.15) !important;
    border: 1px solid rgba(75, 156, 211, 0.3) !important;
    border-radius: 16px !important;
    padding: 4px 8px 4px 10px !important;
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    cursor: default !important;
    transition: all 0.2s ease !important;
    gap: 2px !important;
}

.dataset-pill:hover {
    background: rgba(75, 156, 211, 0.25) !important;
    border-color: rgba(75, 156, 211, 0.5) !important;
}

/* Hide close icon by default, show on hover */
.dataset-pill .anticon-close {
    opacity: 0;
    transition: opacity 0.2s ease;
    margin-left: 2px !important;
    font-size: 10px !important;
    cursor: pointer !important;
}

.dataset-pill:hover .anticon-close {
    opacity: 1;
}

/* Dataset dropdown menu styling (dark theme) */
/* Ensure dropdown appears above the chat input container */
.ant-dropdown {
    z-index: 1050 !important;
}

/* Modern minimal dropdown styling */
.ant-dropdown-menu {
    background: #1f1f1f !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
    padding: 4px !important;
    min-width: 160px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

/* Slim menu items */
.ant-dropdown-menu-item {
    padding: 6px 12px !important;
    margin: 0 !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    transition: background 0.15s ease !important;
}

/* Subtle hover */
.ant-dropdown-menu-item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

/* Selected state */
.ant-dropdown-menu-item-selected {
    background: rgba(75, 156, 211, 0.12) !important;
}

/* Checkbox styling in dropdown */
.ant-dropdown-menu-item .ant-checkbox-wrapper {
    color: rgba(255, 255, 255, 0.85) !important;
}