/* ===================================================== */
/* LEXI² — FINAL UI OVERRIDES                            */
/* ===================================================== */

/* General layout */
html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.app {
    display: flex;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.main {
    flex: 1 1 auto;
    min-width: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f7f9fc !important;
}

/* Sidebar */
.sidebar {
    width: 270px !important;
    min-width: 270px !important;
    max-width: 270px !important;
    background: linear-gradient(180deg, #08101d 0%, #0b1220 100%) !important;
    color: #d8e8ff !important;
    border-right: 1px solid rgba(130,170,255,.12);
}

.brand-name {
    color: #f2f7ff !important;
    font-weight: 800 !important;
}

.brand-small {
    color: #9fc4ff !important;
}

.sidebar-title {
    color: #8fb7f0 !important;
}

.conversation {
    color: #d9eaff !important;
}

.conversation:hover,
.conversation.active {
    background: rgba(140,170,220,.14) !important;
    color: #ffffff !important;
}

.new-chat {
    color: #eff6ff !important;
    border: 1px solid rgba(150,190,255,.22) !important;
    background: transparent !important;
}

.new-chat:hover {
    background: rgba(140,170,220,.10) !important;
}

.sidebar-item {
    color: #cfe3ff !important;
}

.sidebar-item:hover {
    background: rgba(140,170,220,.10) !important;
}

.user-name {
    color: #f2f7ff !important;
}

.user-plan {
    color: #9fc4ff !important;
}

.avatar {
    background: #3b82f6 !important;
    color: #ffffff !important;
}

/* Sidebar logo */
.brand-mark.brand-logo {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    padding: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.brand-mark.brand-logo img,
.lexi2-logo-image {
    width: 52px !important;
    height: 52px !important;
    object-fit: contain !important;
    display: block !important;
    border-radius: 14px !important;
}

/* Top bar */
.topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e7edf5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 64px !important;
    flex-shrink: 0 !important;
}

.top-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
}

.model-select {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 60 !important;

    min-width: 360px !important;
    max-width: 540px !important;

    padding: 10px 14px !important;
    border: 1px solid #d8e2f0 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    outline: none !important;
    cursor: pointer !important;
    appearance: auto !important;
    -webkit-appearance: menulist !important;
    -moz-appearance: menulist !important;
}

.model-select:hover {
    border-color: #9ec5ff !important;
}

.mode-switch {
    background: #eef3f9 !important;
}

/* Chat area */
.chat-container {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #f7f9fc !important;
}

.welcome {
    background: transparent !important;
}

.welcome-logo.welcome-logo-image {
    width: 86px !important;
    height: 86px !important;
    margin: 0 auto 20px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    background: transparent !important;
}

.welcome-logo.welcome-logo-image img {
    width: 86px !important;
    height: 86px !important;
    object-fit: contain !important;
    display: block !important;
    border-radius: 20px !important;
}

/* Composer */
.composer-section {
    background: linear-gradient(transparent, #f7f9fc 20%) !important;
    flex-shrink: 0 !important;
}

.composer {
    background: #ffffff !important;
    border: 1px solid #d8e2f0 !important;
}

.mode-indicator,
.footer-note {
    color: #7d8da4 !important;
}

/* Send button with actual Lexi² logo */
.send-button {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: transparent !important;
    overflow: hidden !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-shadow: 0 6px 18px rgba(39, 85, 200, .18) !important;
}

.send-button:hover {
    transform: scale(1.04) !important;
}

.send-button img.send-logo,
.send-button img {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
    display: block !important;
    object-fit: contain !important;
    border-radius: 16px !important;
    background: transparent !important;
}

/* Ensure messages area looks normal */
.messages {
    width: min(820px, calc(100% - 30px)) !important;
    padding: 30px 0 160px !important;
}

/* Mobile */
@media(max-width: 760px) {
    .model-select {
        min-width: 220px !important;
        max-width: 260px !important;
        font-size: 14px !important;
    }
}


/* ============================================================
   STOP GENERATION BUTTON
   ============================================================ */

.send-button.stop-mode {
    background:
        #111318 !important;

    cursor:
        pointer !important;

    border-radius:
        50% !important;
}


.stop-square {
    display:
        block;

    width:
        15px;

    height:
        15px;

    border-radius:
        3px;

    background:
        #ffffff;
}


/* ============================================================
   EDIT QUESTION BUTTON
   ============================================================ */

.user-message {
    position:
        relative;

    align-items:
        flex-start;
}


.edit-question-button {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

    margin:
        6px 8px 0 0;

    padding:
        5px 9px;

    border:
        1px solid #dbe3ee;

    border-radius:
        8px;

    background:
        #ffffff;

    color:
        #64748b;

    font-size:
        12px;

    cursor:
        pointer;

    opacity:
        0;

    transition:
        opacity .15s ease,
        background .15s ease,
        border-color .15s ease;
}


.user-message:hover
.edit-question-button {

    opacity:
        1;

}


.edit-question-button:hover {

    background:
        #eef5ff;

    border-color:
        #a9c8f5;

    color:
        #2563eb;

}


@media(max-width:760px) {

    .edit-question-button {

        opacity:
            1;

    }

}



/* ============================================================
   LEXI² — SCANNABLE AI RESPONSES
   ============================================================ */

.answer-text {
    line-height: 1.7;
    color: #1f2937;
}

.answer-text p {
    margin: 0 0 14px;
}

.answer-text h2 {
    margin: 24px 0 10px;
    font-size: 22px;
    line-height: 1.3;
    color: #111827;
}

.answer-text h3 {
    margin: 22px 0 9px;
    font-size: 18px;
    line-height: 1.35;
    color: #111827;
}

.answer-text h4 {
    margin: 18px 0 8px;
    font-size: 16px;
    line-height: 1.35;
    color: #111827;
}

.answer-text ul,
.answer-text ol {
    margin: 8px 0 16px 24px;
    padding: 0;
}

.answer-text li {
    margin: 6px 0;
    padding-left: 3px;
}

.answer-text strong {
    font-weight: 750;
    color: #111827;
}

.lexi2-space {
    height: 5px;
}



/* ============================================================
   LEXI² — CLEAN READABLE ANSWER DESIGN
   ============================================================ */

.ai-message .answer-text {

    font-size:
        16px;

    line-height:
        1.72;

    color:
        #263244;

    max-width:
        850px;

}


/* Section headings */

.lexi2-response-heading {

    margin-top:
        24px;

    margin-bottom:
        10px;

    font-size:
        18px;

    line-height:
        1.35;

    font-weight:
        750;

    color:
        #111827;

}


/*
First heading should not have excessive top spacing
*/

.answer-text
.lexi2-response-heading:first-child {

    margin-top:
        0;

}


/* Paragraphs */

.lexi2-response-paragraph {

    margin:
        0 0 14px 0;

    line-height:
        1.72;

}


/* Bold labels */

.lexi2-response-paragraph strong,
.lexi2-readable-list strong {

    font-weight:
        750;

    color:
        #111827;

}


/* Paragraph separation */

.lexi2-paragraph-gap {

    height:
        5px;

}


/* Bullet and numbered lists */

.lexi2-readable-list {

    margin:
        7px 0 18px 22px;

    padding:
        0;

}


.lexi2-readable-list li {

    margin:
        7px 0;

    padding-left:
        4px;

    line-height:
        1.65;

}


/* Give AI answers breathing room */

.ai-message {

    margin-bottom:
        30px;

}


.ai-message .message-content {

    padding-right:
        20px;

}


/* Model information stays subtle */

.model-meta {

    margin-top:
        18px;

    padding-top:
        9px;

    border-top:
        1px solid #edf0f5;

    font-size:
        11px;

    color:
        #94a0b1;

}



/* ============================================================
   LEXI² — BOLD HEADERS AND SUBHEADERS
   ============================================================ */

.lexi2-response-heading {

    font-weight:
        800 !important;

    color:
        #111827 !important;

}


/* First-level prominent headings */

.answer-text .lexi2-response-heading {

    font-weight:
        800 !important;

}


/* Any native heading elements used by the renderer */

.answer-text h1,
.answer-text h2,
.answer-text h3,
.answer-text h4,
.answer-text h5,
.answer-text h6 {

    font-weight:
        800 !important;

    color:
        #111827 !important;

}


/* Important label-style subheadings */

.answer-text strong {

    font-weight:
        800 !important;

    color:
        #111827 !important;

}


/* Slightly stronger visual hierarchy */

.answer-text h2,
.answer-text h3,
.lexi2-response-heading {

    letter-spacing:
        -0.01em;

}



/* ============================================================
   LEXI² — BOLD HEADERS AND SUBHEADERS
   ============================================================ */

.lexi2-response-heading {

    font-weight:
        800 !important;

    color:
        #111827 !important;

}


/* First-level prominent headings */

.answer-text .lexi2-response-heading {

    font-weight:
        800 !important;

}


/* Any native heading elements used by the renderer */

.answer-text h1,
.answer-text h2,
.answer-text h3,
.answer-text h4,
.answer-text h5,
.answer-text h6 {

    font-weight:
        800 !important;

    color:
        #111827 !important;

}


/* Important label-style subheadings */

.answer-text strong {

    font-weight:
        800 !important;

    color:
        #111827 !important;

}


/* Slightly stronger visual hierarchy */

.answer-text h2,
.answer-text h3,
.lexi2-response-heading {

    letter-spacing:
        -0.01em;

}



/* ============================================================
   LEXI² — BOLD HEADERS AND SUBHEADERS
   ============================================================ */

.lexi2-response-heading {

    font-weight:
        800 !important;

    color:
        #111827 !important;

}


/* First-level prominent headings */

.answer-text .lexi2-response-heading {

    font-weight:
        800 !important;

}


/* Any native heading elements used by the renderer */

.answer-text h1,
.answer-text h2,
.answer-text h3,
.answer-text h4,
.answer-text h5,
.answer-text h6 {

    font-weight:
        800 !important;

    color:
        #111827 !important;

}


/* Important label-style subheadings */

.answer-text strong {

    font-weight:
        800 !important;

    color:
        #111827 !important;

}


/* Slightly stronger visual hierarchy */

.answer-text h2,
.answer-text h3,
.lexi2-response-heading {

    letter-spacing:
        -0.01em;

}