/* ============================================
   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;
}

/* === CHAT MESSAGES WRAPPER (SCROLLABLE) === */
.center-focused-container .chat-messages-wrapper {
    width: 100%;
    max-width: 800px; /* Comfortable reading width */
    flex: 1;
    overflow-y: scroll; /* Always scrollable to prevent layout shift */
    overflow-x: hidden;
    padding: 20px 20px 100px 20px;
    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 === */
.center-focused-container .chat-input-container {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    max-width: 760px; /* Slightly smaller than messages wrapper for margin */
    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;
    align-items: center;
    gap: 8px;
}

/* 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 12px 100px 12px;
    }

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

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