/* =====================================================
   LIFEMATE AI — COMPLETE STYLE
===================================================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


/* =====================================================
   THEMES
===================================================== */

:root {

    --bg: #050612;
    --sidebar: #080916;

    --panel: #0d1020;
    --panel-2: #14172a;
    --panel-3: #191d33;

    --text: #f8f8ff;
    --muted: #8d91aa;

    --border:
        rgba(255, 255, 255, .08);

    --purple: #765cff;
    --blue: #4f80ff;
    --pink: #cf45ed;
    --green: #20c997;

    --gradient:
        linear-gradient(
            135deg,
            #617cff,
            #7c59ff 48%,
            #c84fe8
        );

}


body.theme-deep {

    --bg: #010103;
    --sidebar: #040406;

    --panel: #09090d;
    --panel-2: #111116;
    --panel-3: #18181f;

}


body.theme-nebula {

    --bg: #080512;
    --sidebar: #0c0718;

    --panel: #130d24;
    --panel-2: #1b1232;
    --panel-3: #231642;

    --purple: #8f5cff;
    --blue: #526cff;
    --pink: #e04ee8;

}


/* =====================================================
   BASE
===================================================== */

html,
body {

    width: 100%;
    height: 100%;

}


body {

    font-family:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background:
        var(--bg);

    color:
        var(--text);

    overflow:
        hidden;

}


button,
textarea,
input,
select {

    font-family:
        inherit;

}


button {

    -webkit-tap-highlight-color:
        transparent;

}


::selection {

    background:
        rgba(118, 92, 255, .35);

}


/* =====================================================
   APP
===================================================== */

.app {

    width: 100%;
    height: 100vh;

    display:
        flex;

    background:

        radial-gradient(
            circle at 72% 15%,
            rgba(106, 75, 255, .08),
            transparent 38%
        ),

        var(--bg);

}


/* =====================================================
   SIDEBAR
===================================================== */

.sidebar {

    width: 300px;
    min-width: 300px;

    height: 100vh;

    padding:
        23px 20px 18px;

    display:
        flex;

    flex-direction:
        column;

    background:
        var(--sidebar);

    border-right:
        1px solid
        var(--border);

    position:
        relative;

    z-index:
        50;

}


.sidebar-top {

    min-height: 0;

    overflow-y:
        auto;

}


/* =====================================================
   LOGO
===================================================== */

.logo {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    padding:
        4px 8px 27px;

}


.logo-icon {

    width: 47px;
    height: 47px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        15px;

    background:
        var(--gradient);

    font-size:
        23px;

    box-shadow:
        0 0 30px
        rgba(115, 82, 255, .32);

}


.logo-text {

    font-size:
        21px;

    font-weight:
        750;

    letter-spacing:
        -.5px;

}


/* =====================================================
   NEW CHAT
===================================================== */

.new-chat {

    width: 100%;
    height: 54px;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    padding:
        0 17px;

    border:
        1px solid
        rgba(158, 99, 255, .38);

    border-radius:
        15px;

    background:

        linear-gradient(
            100deg,
            #5c70ff,
            #7742ff 50%,
            #8d28e9
        );

    color:
        white;

    font-size:
        14px;

    font-weight:
        650;

    cursor:
        pointer;

    box-shadow:
        0 8px 30px
        rgba(92, 75, 255, .2);

    transition:
        .2s ease;

}


.new-chat:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 13px 38px
        rgba(100, 66, 255, .31);

}


/* =====================================================
   NAV
===================================================== */

.sidebar-nav {

    margin-top:
        26px;

}


.section-title {

    margin-bottom:
        8px;

    padding:
        0 8px;

    color:
        #666b84;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        1.5px;

}


.nav-item {

    width: 100%;

    min-height:
        60px;

    margin-bottom:
        7px;

    padding:
        9px 13px;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    border:
        1px solid
        rgba(255,255,255,.065);

    border-radius:
        14px;

    background:
        rgba(255,255,255,.025);

    color:
        #a7abc0;

    cursor:
        pointer;

    text-align:
        left;

    transition:
        .2s ease;

}


.nav-item:hover {

    transform:
        translateX(3px);

    background:
        rgba(255,255,255,.06);

    color:
        white;

}


.nav-item.active {

    background:

        linear-gradient(
            110deg,
            rgba(70,109,255,.2),
            rgba(128,69,255,.18),
            rgba(208,70,255,.12)
        );

    border-color:
        rgba(129,91,255,.55);

    color:
        white;

}


.nav-item strong {

    display:
        block;

    font-size:
        13px;

    font-weight:
        650;

}


.nav-item small {

    display:
        block;

    margin-top:
        3px;

    color:
        #777c96;

    font-size:
        10px;

}


.nav-icon {

    width: 36px;
    height: 36px;

    flex:
        0 0 36px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        11px;

    background:
        rgba(255,255,255,.045);

}


.nav-item.active
.nav-icon {

    background:

        linear-gradient(
            135deg,
            rgba(70,123,255,.28),
            rgba(184,65,255,.25)
        );

}


.memory-nav-icon {

    background:

        linear-gradient(
            135deg,
            rgba(119, 88, 255, .19),
            rgba(205, 71, 236, .14)
        );

    color:
        #b59cff;

}


/* =====================================================
   ICONS
===================================================== */

button svg,
.nav-icon svg {

    width: 18px;
    height: 18px;

    stroke-width:
        1.9;

    pointer-events:
        none;

}


/* =====================================================
   HISTORY
===================================================== */

.chat-history {

    margin-top:
        24px;

}


.history-item {

    width: 100%;

    min-height:
        40px;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        8px 10px;

    border:
        none;

    border-radius:
        9px;

    background:
        transparent;

    color:
        #9599ae;

    text-align:
        left;

    cursor:
        pointer;

}


.history-item:hover,
.history-item.selected {

    background:
        rgba(255,255,255,.045);

    color:
        white;

}


.history-name {

    flex:
        1;

    overflow:
        hidden;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;

    font-size:
        12px;

}


.delete-chat {

    opacity:
        0;

    font-size:
        18px;

}


.history-item:hover
.delete-chat {

    opacity:
        1;

}


/* =====================================================
   PROFILE
===================================================== */

.sidebar-bottom {

    margin-top:
        auto;

    display:
        flex;

    flex-direction:
        column;

    gap:
        11px;

}


.profile {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    padding:
        13px;

    border:
        1px solid
        var(--border);

    border-radius:
        15px;

    background:
        rgba(255,255,255,.03);

}


.profile-avatar {

    width: 40px;
    height: 40px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:

        linear-gradient(
            135deg,
            #657cff,
            #b447e9
        );

    font-size:
        13px;

    font-weight:
        700;

}


.profile-details {

    flex:
        1;

}


.profile-name {

    font-size:
        13px;

    font-weight:
        650;

}


.profile-plan {

    margin-top:
        2px;

    color:
        var(--muted);

    font-size:
        10px;

}


.profile-chevron {

    width:
        16px;

}


.sidebar-controls {

    display:
        flex;

    justify-content:
        space-around;

}


/* =====================================================
   ICON BUTTON
===================================================== */

.icon-btn {

    width: 40px;
    height: 40px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        var(--border);

    border-radius:
        12px;

    background:
        rgba(255,255,255,.035);

    color:
        #a7abc0;

    cursor:
        pointer;

    transition:
        .2s ease;

}


.icon-btn:hover {

    transform:
        translateY(-2px);

    color:
        white;

    background:
        rgba(255,255,255,.07);

}


/* =====================================================
   MAIN
===================================================== */

.main {

    flex:
        1;

    min-width:
        0;

    height:
        100vh;

    display:
        flex;

    flex-direction:
        column;

    position:
        relative;

    overflow:
        hidden;

}


/* =====================================================
   HEADER
===================================================== */

.header {

    height:
        69px;

    padding:
        0 28px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    border-bottom:
        1px solid
        var(--border);

    background:
        rgba(5,6,18,.74);

    backdrop-filter:
        blur(22px);

    z-index:
        20;

}


.header-left,
.header-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

}


.header-title {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    font-size:
        14px;

    font-weight:
        650;

}


.header-title span {

    display:
        block;

    margin-top:
        2px;

    color:
        #777b92;

    font-size:
        9px;

    font-weight:
        500;

}


.header-ai-icon {

    width: 32px;
    height: 32px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        10px;

    background:

        linear-gradient(
            135deg,
            rgba(95,116,255,.25),
            rgba(190,66,237,.2)
        );

}


/* =====================================================
   CHAT AREA
===================================================== */

.chat-area {

    flex:
        1;

    overflow-y:
        auto;

    scroll-behavior:
        smooth;

}


/* =====================================================
   WELCOME
===================================================== */

.welcome {

    width:
        min(1120px, 100%);

    min-height:
        100%;

    margin:
        auto;

    padding:
        55px 35px 215px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    text-align:
        center;

}


.welcome-logo {

    width: 68px;
    height: 68px;

    margin-bottom:
        25px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        22px;

    background:
        var(--gradient);

    font-size:
        30px;

    box-shadow:
        0 0 55px
        rgba(116,77,255,.3);

}


.welcome h1 {

    font-size:
        38px;

    line-height:
        1.2;

    letter-spacing:
        -1.3px;

}


.welcome p {

    margin-top:
        11px;

    color:
        #9296ad;

    font-size:
        14px;

}


/* =====================================================
   MODE BUTTONS
===================================================== */

.mode-buttons {

    margin-top:
        37px;

    display:
        flex;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        10px;

}


.mode-button {

    height:
        44px;

    padding:
        0 16px;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    border:
        1px solid
        var(--border);

    border-radius:
        999px;

    background:
        rgba(255,255,255,.025);

    color:
        #cfd2e2;

    cursor:
        pointer;

}


.mode-button:hover {

    background:
        rgba(255,255,255,.06);

}


.mode-button.active {

    border-color:
        #845cff;

    background:
        rgba(116,82,255,.14);

    color:
        white;

}


/* =====================================================
   SUGGESTIONS
===================================================== */

.suggestions {

    width:
        100%;

    margin-top:
        34px;

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        13px;

}


.suggestion {

    min-height:
        185px;

    position:
        relative;

    padding:
        22px;

    border:
        1px solid
        var(--border);

    border-radius:
        20px;

    background:
        rgba(255,255,255,.025);

    color:
        white;

    text-align:
        left;

    cursor:
        pointer;

    transition:
        .25s ease;

}


.suggestion:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(126,96,255,.45);

    background:
        rgba(255,255,255,.045);

}


.suggestion-icon {

    width: 48px;
    height: 48px;

    margin-bottom:
        22px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

}


.purple-card-icon {

    background:

        linear-gradient(
            135deg,
            #6d5cff,
            #aa4ee6
        );

}


.blue-card-icon {

    background:

        linear-gradient(
            135deg,
            #246cff,
            #39a0ff
        );

}


.research-card-icon {

    background:

        linear-gradient(
            135deg,
            #7554ff,
            #d144e7
        );

}


.green-card-icon {

    background:

        linear-gradient(
            135deg,
            #08a67d,
            #20c999
        );

}


.image-card-icon {

    background:

        linear-gradient(
            135deg,
            #f19a36,
            #e14ea9
        );

}


.suggestion-title {

    font-size:
        15px;

    font-weight:
        700;

}


.suggestion-text {

    margin-top:
        8px;

    color:
        #9296aa;

    font-size:
        12px;

    line-height:
        1.55;

}


.card-arrow {

    position:
        absolute;

    right:
        17px;

    bottom:
        16px;

    color:
        #969aae;

}


/* =====================================================
   MESSAGES
===================================================== */

#messages {

    width:
        min(900px, 100%);

    margin:
        auto;

    padding:
        35px 28px 230px;

}


.message {

    display:
        flex;

    gap:
        13px;

    margin-bottom:
        29px;

    font-size:
        14px;

    line-height:
        1.7;

}


.message.user {

    justify-content:
        flex-end;

}


.message.user
.message-body {

    max-width:
        75%;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-end;

}


.message.user
.message-content {

    max-width:
        100%;

    padding:
        13px 17px;

    border:
        1px solid
        rgba(124,91,255,.25);

    border-radius:
        18px 18px 5px 18px;

    background:

        linear-gradient(
            135deg,
            rgba(106,72,255,.22),
            rgba(155,57,224,.14)
        );

}


.message-avatar {

    width: 34px;
    height: 34px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        11px;

    background:
        var(--gradient);

}


.message-body {

    max-width:
        calc(100% - 48px);

    min-width:
        0;

}


.message-content {

    overflow-wrap:
        break-word;

}


.message-content pre {

    margin:
        15px 0;

    padding:
        17px;

    overflow-x:
        auto;

    border:
        1px solid
        var(--border);

    border-radius:
        13px;

    background:
        #030309;

    font-family:
        monospace;

    font-size:
        12px;

}


.message-content h1,
.message-content h2,
.message-content h3 {

    margin:
        18px 0 8px;

    line-height:
        1.3;

}


.message-content h1 {

    font-size:
        20px;

}


.message-content h2 {

    font-size:
        18px;

}


.message-content h3 {

    font-size:
        15px;

}


/* =====================================================
   MESSAGE ACTIONS
===================================================== */

.message-actions {

    margin-top:
        7px;

    display:
        flex;

    align-items:
        center;

    gap:
        4px;

    flex-wrap:
        wrap;

}


.message.user
.message-actions {

    justify-content:
        flex-end;

}


.message-action-btn {

    min-height:
        30px;

    padding:
        0 9px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    border:
        1px solid
        transparent;

    border-radius:
        8px;

    background:
        transparent;

    color:
        #747a93;

    font-size:
        10px;

    font-weight:
        550;

    cursor:
        pointer;

    transition:
        .16s ease;

}


.message-action-btn svg {

    width:
        13px;

    height:
        13px;

}


.message-action-btn:hover {

    color:
        white;

    background:
        rgba(255,255,255,.055);

    border-color:
        rgba(255,255,255,.07);

    transform:
        translateY(-1px);

}


.message.user
.message-action-btn {

    opacity:
        0;

}


.message.user:hover
.message-action-btn {

    opacity:
        1;

}


.regenerate-message-btn,
.retry-message-btn {

    color:
        #a99cff;

}


/* =====================================================
   MESSAGE EDIT
===================================================== */

.message-edit-box {

    width:
        min(650px, 70vw);

    padding:
        13px;

    border:
        1px solid
        rgba(125,91,255,.36);

    border-radius:
        16px;

    background:
        rgba(116,80,255,.10);

}


.message-edit-textarea {

    width:
        100%;

    min-height:
        90px;

    max-height:
        300px;

    padding:
        12px;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius:
        11px;

    outline:
        none;

    resize:
        vertical;

    background:
        rgba(7,8,18,.72);

    color:
        white;

    font-size:
        13px;

    line-height:
        1.55;

}


.message-edit-textarea:focus {

    border-color:
        rgba(124,91,255,.6);

}


.message-edit-actions {

    margin-top:
        9px;

    display:
        flex;

    justify-content:
        flex-end;

    gap:
        7px;

}


.message-edit-cancel,
.message-edit-save {

    min-height:
        36px;

    padding:
        0 12px;

    border-radius:
        9px;

    font-size:
        11px;

    font-weight:
        650;

    cursor:
        pointer;

}


.message-edit-cancel {

    border:
        1px solid
        var(--border);

    background:
        rgba(255,255,255,.035);

    color:
        #a3a7bb;

}


.message-edit-save {

    border:
        none;

    background:
        var(--gradient);

    color:
        white;

}


.message-error-box {

    border-left:
        2px solid
        rgba(255,95,120,.6);

    padding-left:
        12px;

}


/* =====================================================
   AI FORMATTING
===================================================== */

.ai-bullet,
.ai-numbered {

    display:
        flex;

    gap:
        10px;

    margin:
        5px 0;

}


.ai-bullet-dot,
.ai-number {

    color:
        #9480ff;

    font-weight:
        700;

}


.ai-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        4px;

    margin:
        3px 2px;

    padding:
        5px 9px;

    border:
        1px solid
        rgba(111,99,255,.25);

    border-radius:
        8px;

    background:
        rgba(104,82,255,.08);

    color:
        #aaa5ff;

    font-size:
        12px;

    text-decoration:
        none;

}


.ai-link:hover {

    color:
        white;

    background:
        rgba(115,91,255,.16);

}


/* =====================================================
   COMPOSER
===================================================== */

.composer-wrapper {

    position:
        absolute;

    left: 0;
    right: 0;
    bottom: 0;

    padding:
        20px 38px 18px;

    display:
        flex;

    justify-content:
        center;

    background:

        linear-gradient(
            transparent,
            var(--bg) 31%
        );

    pointer-events:
        none;

    z-index:
        30;

}


.composer-container {

    width:
        min(1050px, 100%);

}


.composer {

    width:
        100%;

    min-height:
        78px;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    padding:
        11px 12px;

    position:
        relative;

    border:
        1px solid
        transparent;

    border-radius:
        24px;

    background:

        linear-gradient(
            var(--panel),
            var(--panel)
        )
        padding-box,

        linear-gradient(
            100deg,
            #3978ff,
            #7c50ff,
            #cf45ed
        )
        border-box;

    box-shadow:
        0 15px 55px
        rgba(0,0,0,.43);

    pointer-events:
        auto;

}


.message-input {

    flex:
        1;

    min-height:
        45px;

    max-height:
        170px;

    padding:
        13px 11px;

    border:
        none;

    outline:
        none;

    resize:
        none;

    background:
        transparent;

    color:
        white;

    font-size:
        15px;

}


.message-input::placeholder {

    color:
        #686d87;

}


.composer-btn {

    width:
        48px;

    height:
        48px;

    flex:
        0 0 48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        var(--border);

    border-radius:
        14px;

    background:
        var(--panel-2);

    color:
        #a9adc3;

    cursor:
        pointer;

}


.composer-btn:hover:not(:disabled) {

    color:
        white;

    transform:
        translateY(-2px);

}


.composer-btn:disabled {

    opacity:
        .35;

}


.send-btn {

    width:
        52px;

    height:
        52px;

    flex:
        0 0 52px;

    border:
        none;

    color:
        white;

    background:
        var(--gradient);

    box-shadow:
        0 8px 25px
        rgba(105,74,255,.32);

}


.disclaimer {

    margin-top:
        9px;

    color:
        #656a81;

    font-size:
        10px;

    text-align:
        center;

    pointer-events:
        auto;

}


/* =====================================================
   FILE PREVIEW
===================================================== */

.file-preview {

    display:
        none;

    width:
        fit-content;

    max-width:
        430px;

    margin:
        0 0 10px 12px;

    padding:
        10px 11px;

    align-items:
        center;

    gap:
        11px;

    border:
        1px solid
        rgba(70,198,151,.25);

    border-radius:
        14px;

    background:
        var(--panel);

    pointer-events:
        auto;

}


.file-preview.show {

    display:
        flex;

}


.file-preview-icon {

    width:
        39px;

    height:
        39px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        11px;

    background:

        linear-gradient(
            135deg,
            #07966f,
            #22c994
        );

}


.file-preview-info {

    flex:
        1;

    min-width:
        0;

}


.file-preview-name {

    max-width:
        280px;

    overflow:
        hidden;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;

    font-size:
        12px;

    font-weight:
        650;

}


.file-preview-status {

    margin-top:
        3px;

    color:
        #7d8298;

    font-size:
        10px;

}


.file-preview-status.ready {

    color:
        #51d7a6;

}


.file-preview-status.uploading {

    color:
        #aaa0ff;

}


.file-preview-status.error {

    color:
        #ff738d;

}


.file-preview-remove {

    width:
        30px;

    height:
        30px;

    border:
        none;

    border-radius:
        8px;

    background:
        transparent;

    color:
        #73788f;

    cursor:
        pointer;

}


/* =====================================================
   DRAG
===================================================== */

.composer.drag-active::after {

    content:
        "Drop your PDF here";

    position:
        absolute;

    inset:
        5px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        18px;

    background:
        rgba(7,10,22,.97);

    color:
        #b7f7df;

    z-index:
        20;

}


/* =====================================================
   VOICE
===================================================== */

#voiceBtn.recording {

    color:
        #ff5d7a;

    border-color:
        rgba(255,93,122,.4);

}


/* =====================================================
   LOADING
===================================================== */

.loading-dots {

    height:
        30px;

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

}


.loading-dots span {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--purple);

    animation:
        loadingDots
        1.2s
        infinite ease-in-out;

}


.loading-dots span:nth-child(2) {

    animation-delay:
        .15s;

}


.loading-dots span:nth-child(3) {

    animation-delay:
        .3s;

}


@keyframes loadingDots {

    50% {

        transform:
            translateY(-5px);

        opacity:
            .5;

    }

}


/* =====================================================
   IMAGE RESULT
===================================================== */

.image-result {

    width:
        min(680px, 100%);

}


.image-result-header {

    margin-bottom:
        12px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}


.image-result-title {

    font-size:
        14px;

    font-weight:
        700;

}


.image-result-subtitle {

    margin-top:
        2px;

    color:
        #777c94;

    font-size:
        10px;

}


.image-ready-badge {

    padding:
        5px 9px;

    border-radius:
        999px;

    background:
        rgba(23,177,127,.08);

    color:
        #59dbae;

    font-size:
        10px;

}


.generated-image-wrapper {

    overflow:
        hidden;

    border-radius:
        20px;

    background:
        #080914;

}


.generated-image {

    width:
        100%;

    display:
        block;

}


.image-prompt-box {

    margin-top:
        12px;

    padding:
        11px 13px;

    display:
        flex;

    gap:
        9px;

    border:
        1px solid
        var(--border);

    border-radius:
        12px;

    background:
        rgba(255,255,255,.025);

}


.image-prompt-label {

    color:
        #8172ef;

    font-size:
        11px;

    font-weight:
        700;

}


.image-prompt-text {

    color:
        #9da1b8;

    font-size:
        11px;

}


.image-actions {

    margin-top:
        11px;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

}


.image-action-btn {

    height:
        38px;

    padding:
        0 12px;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    border:
        1px solid
        var(--border);

    border-radius:
        10px;

    background:
        rgba(255,255,255,.035);

    color:
        #a8adc2;

    cursor:
        pointer;

}


/* =====================================================
   SHARED MODAL OVERLAYS
===================================================== */

.settings-overlay,
.memory-overlay {

    position:
        fixed;

    inset:
        0;

    padding:
        25px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(0,0,0,.62);

    backdrop-filter:
        blur(14px);

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    z-index:
        500;

    transition:
        .2s ease;

}


.settings-overlay.show,
.memory-overlay.show {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

}


/* =====================================================
   SETTINGS MODAL
===================================================== */

.settings-modal,
.memory-modal {

    width:
        min(700px, 100%);

    max-height:
        min(820px, 90vh);

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255,255,255,.1);

    border-radius:
        24px;

    background:

        linear-gradient(
            145deg,
            var(--panel-2),
            var(--panel)
        );

    box-shadow:

        0 35px 120px
        rgba(0,0,0,.7),

        0 0 80px
        rgba(105,67,255,.12);

    transform:
        translateY(15px)
        scale(.98);

    transition:
        .23s ease;

}


.settings-overlay.show
.settings-modal,

.memory-overlay.show
.memory-modal {

    transform:
        translateY(0)
        scale(1);

}


/* =====================================================
   SETTINGS HEADER
===================================================== */

.settings-header {

    padding:
        25px 27px 22px;

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    border-bottom:
        1px solid
        var(--border);

}


.settings-eyebrow,
.memory-eyebrow {

    margin-bottom:
        6px;

    color:
        #8174ed;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        1.7px;

}


.settings-header h2,
.memory-header h2 {

    font-size:
        24px;

    letter-spacing:
        -.7px;

}


.settings-header p,
.memory-header p {

    margin-top:
        5px;

    color:
        var(--muted);

    font-size:
        12px;

}


.settings-close,
.memory-close {

    width:
        40px;

    height:
        40px;

    flex:
        0 0 40px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        var(--border);

    border-radius:
        12px;

    background:
        rgba(255,255,255,.035);

    color:
        #9196ad;

    cursor:
        pointer;

}


/* =====================================================
   SETTINGS
===================================================== */

.settings-content {

    padding:
        22px 27px;

    overflow-y:
        auto;

}


.settings-row {

    min-height:
        75px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

    padding:
        13px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,.055);

}


.settings-row-info,
.settings-block-title {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

}


.settings-row-icon {

    width:
        38px;

    height:
        38px;

    flex:
        0 0 38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        11px;

    background:
        rgba(117,85,255,.1);

    color:
        #a296ff;

}


.settings-row-info strong,
.settings-block-title strong {

    display:
        block;

    font-size:
        13px;

}


.settings-row-info span,
.settings-block-title span {

    display:
        block;

    margin-top:
        4px;

    color:
        var(--muted);

    font-size:
        10px;

}


.settings-select,
.settings-input,
.settings-textarea {

    border:
        1px solid
        var(--border);

    outline:
        none;

    background:
        rgba(255,255,255,.035);

    color:
        var(--text);

}


.settings-select {

    width:
        185px;

    height:
        42px;

    padding:
        0 12px;

    border-radius:
        11px;

}


.settings-select-full {

    width:
        100%;

}


.settings-block {

    margin-top:
        20px;

    padding:
        18px;

    border:
        1px solid
        var(--border);

    border-radius:
        17px;

    background:
        rgba(255,255,255,.018);

}


.settings-block-title {

    margin-bottom:
        15px;

}


.custom-model-row {

    display:
        none;

    margin-top:
        14px;

}


.custom-model-row.show {

    display:
        block;

}


.custom-model-row label {

    display:
        block;

    margin-bottom:
        7px;

    color:
        #b7bbcd;

    font-size:
        11px;

}


.settings-input {

    width:
        100%;

    height:
        44px;

    padding:
        0 13px;

    border-radius:
        11px;

}


.settings-textarea {

    width:
        100%;

    min-height:
        125px;

    padding:
        13px;

    resize:
        vertical;

    border-radius:
        12px;

    line-height:
        1.55;

}


.instruction-counter {

    margin-top:
        6px;

    color:
        #6f7389;

    font-size:
        9px;

    text-align:
        right;

}


.settings-footer {

    padding:
        18px 27px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    border-top:
        1px solid
        var(--border);

}


.settings-status {

    color:
        #6f7389;

    font-size:
        10px;

}


.settings-status.saved {

    color:
        #50d6a7;

}


.settings-status.error {

    color:
        #ff738d;

}


.settings-footer-actions {

    display:
        flex;

    gap:
        9px;

}


.settings-secondary-btn,
.settings-save-btn {

    height:
        42px;

    padding:
        0 15px;

    border-radius:
        11px;

    font-size:
        11px;

    font-weight:
        650;

    cursor:
        pointer;

}


.settings-secondary-btn {

    border:
        1px solid
        var(--border);

    background:
        rgba(255,255,255,.035);

    color:
        #a7abc0;

}


.settings-save-btn {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    border:
        none;

    background:
        var(--gradient);

    color:
        white;

}


/* =====================================================
   MEMORY HEADER
===================================================== */

.memory-header {

    padding:
        25px 27px 22px;

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    border-bottom:
        1px solid
        var(--border);

}


.memory-heading {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

}


.memory-logo {

    width:
        48px;

    height:
        48px;

    flex:
        0 0 48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        15px;

    background:

        linear-gradient(
            135deg,
            rgba(93,105,255,.24),
            rgba(191,70,237,.19)
        );

    color:
        #b296ff;

    box-shadow:
        0 0 30px
        rgba(105,71,255,.12);

}


/* =====================================================
   MEMORY CONTENT
===================================================== */

.memory-content {

    padding:
        22px 27px;

    overflow-y:
        auto;

}


.memory-setting-card {

    min-height:
        72px;

    margin-bottom:
        10px;

    padding:
        15px 17px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    border:
        1px solid
        var(--border);

    border-radius:
        15px;

    background:
        rgba(255,255,255,.022);

}


.memory-setting-card strong {

    display:
        block;

    font-size:
        13px;

}


.memory-setting-card span {

    display:
        block;

    margin-top:
        4px;

    color:
        var(--muted);

    font-size:
        10px;

    line-height:
        1.45;

}


/* =====================================================
   SWITCH
===================================================== */

.switch {

    width:
        46px;

    height:
        26px;

    position:
        relative;

    flex:
        0 0 46px;

}


.switch input {

    opacity:
        0;

    width:
        0;

    height:
        0;

}


.switch-slider {

    position:
        absolute;

    inset:
        0;

    border:
        1px solid
        rgba(255,255,255,.1);

    border-radius:
        999px;

    background:
        #24283b;

    cursor:
        pointer;

    transition:
        .2s ease;

}


.switch-slider::before {

    content:
        "";

    position:
        absolute;

    width:
        20px;

    height:
        20px;

    left:
        2px;

    top:
        2px;

    border-radius:
        50%;

    background:
        #a8acbd;

    transition:
        .2s ease;

}


.switch input:checked +
.switch-slider {

    background:

        linear-gradient(
            135deg,
            #576fff,
            #8b50ff
        );

    border-color:
        rgba(129,95,255,.5);

}


.switch input:checked +
.switch-slider::before {

    transform:
        translateX(20px);

    background:
        white;

}


/* =====================================================
   ADD MEMORY
===================================================== */

.memory-add-card {

    margin-top:
        20px;

    padding:
        17px;

    border:
        1px solid
        var(--border);

    border-radius:
        16px;

    background:
        rgba(255,255,255,.018);

}


.memory-section-title {

    margin-bottom:
        11px;

    font-size:
        12px;

    font-weight:
        700;

}


.memory-add-row {

    display:
        flex;

    align-items:
        stretch;

    gap:
        9px;

}


.memory-input {

    flex:
        1;

    min-height:
        70px;

    padding:
        12px;

    border:
        1px solid
        var(--border);

    border-radius:
        12px;

    outline:
        none;

    resize:
        vertical;

    background:
        rgba(255,255,255,.025);

    color:
        white;

    font-size:
        12px;

    line-height:
        1.5;

}


.memory-input:focus {

    border-color:
        rgba(124,91,255,.6);

}


.memory-add-btn {

    width:
        88px;

    border:
        none;

    border-radius:
        12px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    background:
        var(--gradient);

    color:
        white;

    font-size:
        11px;

    font-weight:
        650;

    cursor:
        pointer;

}


.memory-input-counter {

    margin-top:
        6px;

    color:
        #676c82;

    font-size:
        9px;

    text-align:
        right;

}


/* =====================================================
   MEMORY LIST
===================================================== */

.memory-list-header {

    margin:
        24px 2px 11px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

}


.memory-list-header strong {

    display:
        block;

    font-size:
        13px;

}


.memory-list-header span {

    display:
        block;

    margin-top:
        3px;

    color:
        #74798f;

    font-size:
        9px;

}


.memory-clear-btn {

    padding:
        7px 10px;

    border:
        1px solid
        rgba(255,95,120,.15);

    border-radius:
        9px;

    background:
        rgba(255,95,120,.045);

    color:
        #df7589;

    font-size:
        10px;

    cursor:
        pointer;

}


.memory-clear-btn:hover {

    background:
        rgba(255,95,120,.1);

    color:
        #ff8da1;

}


.memory-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;

}


.memory-item {

    padding:
        13px 13px 13px 14px;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        11px;

    border:
        1px solid
        var(--border);

    border-radius:
        14px;

    background:
        rgba(255,255,255,.022);

}


.memory-item-icon {

    width:
        32px;

    height:
        32px;

    flex:
        0 0 32px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        10px;

    background:
        rgba(119,87,255,.1);

    color:
        #a88cff;

}


.memory-item-content {

    flex:
        1;

    min-width:
        0;

}


.memory-item-text {

    color:
        #d8daea;

    font-size:
        11px;

    line-height:
        1.55;

    overflow-wrap:
        anywhere;

}


.memory-item-meta {

    margin-top:
        5px;

    color:
        #62677d;

    font-size:
        8px;

    text-transform:
        uppercase;

    letter-spacing:
        .8px;

}


.memory-delete-btn {

    width:
        30px;

    height:
        30px;

    flex:
        0 0 30px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        none;

    border-radius:
        8px;

    background:
        transparent;

    color:
        #676c83;

    cursor:
        pointer;

}


.memory-delete-btn:hover {

    background:
        rgba(255,88,112,.08);

    color:
        #ff7189;

}


.memory-empty {

    padding:
        30px 20px;

    border:
        1px dashed
        rgba(255,255,255,.08);

    border-radius:
        15px;

    text-align:
        center;

    color:
        #72778d;

}


.memory-empty-icon {

    width:
        42px;

    height:
        42px;

    margin:
        0 auto 10px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        13px;

    background:
        rgba(118,85,255,.08);

    color:
        #8875db;

}


.memory-empty strong {

    display:
        block;

    color:
        #9da1b6;

    font-size:
        12px;

}


.memory-empty p {

    margin-top:
        5px;

    font-size:
        10px;

    line-height:
        1.5;

}


/* =====================================================
   MEMORY FOOTER
===================================================== */

.memory-footer {

    padding:
        15px 27px 18px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    border-top:
        1px solid
        var(--border);

    color:
        #686d82;

}


.memory-footer-icon {

    width:
        28px;

    height:
        28px;

    flex:
        0 0 28px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #6fc6a8;

}


.memory-footer p {

    font-size:
        9px;

    line-height:
        1.45;

}


/* =====================================================
   TOAST
===================================================== */

.toast-container {

    position:
        fixed;

    right:
        24px;

    bottom:
        24px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

    z-index:
        1000;

    pointer-events:
        none;

}


.toast {

    min-width:
        240px;

    max-width:
        360px;

    padding:
        12px 14px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius:
        13px;

    background:
        rgba(14,16,31,.95);

    backdrop-filter:
        blur(20px);

    color:
        #dfe1ee;

    font-size:
        11px;

    box-shadow:
        0 15px 45px
        rgba(0,0,0,.4);

    opacity:
        0;

    transform:
        translateY(10px);

    animation:
        toastIn .22s forwards;

}


.toast.success {

    border-color:
        rgba(50,210,157,.19);

}


.toast.success svg {

    color:
        #4bd9a5;

}


.toast.warning {

    border-color:
        rgba(255,176,65,.2);

}


.toast.warning svg {

    color:
        #ffb64d;

}


@keyframes toastIn {

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


/* =====================================================
   FILE INPUT
===================================================== */

.file-input {

    display:
        none;

}


/* =====================================================
   SCROLLBAR
===================================================== */

* {

    scrollbar-width:
        thin;

    scrollbar-color:
        #30334c
        transparent;

}


::-webkit-scrollbar {

    width:
        6px;

}


::-webkit-scrollbar-thumb {

    background:
        #30334c;

    border-radius:
        10px;

}


/* =====================================================
   MOBILE
===================================================== */

.mobile-menu {

    display:
        none;

}


@media (
    max-width: 1100px
) {

    .suggestions {

        grid-template-columns:
            repeat(2, 1fr);

    }

}


@media (
    max-width: 800px
) {

    .sidebar {

        position:
            fixed;

        left:
            0;

        top:
            0;

        transform:
            translateX(-100%);

        transition:
            .25s ease;

    }


    .sidebar.open {

        transform:
            translateX(0);

    }


    .mobile-menu {

        display:
            flex;

    }


    .welcome {

        padding:
            35px 15px 200px;

    }


    .welcome h1 {

        font-size:
            29px;

    }


    #messages {

        padding:
            28px 15px 220px;

    }


    .composer-wrapper {

        padding:
            12px 10px 15px;

    }


    .settings-row {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            10px;

    }


    .settings-select {

        width:
            100%;

    }


    .settings-footer {

        align-items:
            stretch;

        flex-direction:
            column;

    }


    .message.user
    .message-body {

        max-width:
            88%;

    }


    .message.user
    .message-action-btn {

        opacity:
            1;

    }


    .message-edit-box {

        width:
            min(100%, 82vw);

    }

}


@media (
    max-width: 520px
) {

    .welcome h1 {

        font-size:
            25px;

    }


    .suggestions {

        grid-template-columns:
            1fr;

    }


    .suggestion {

        min-height:
            155px;

    }


    #paperclipBtn {

        display:
            none;

    }


    .settings-overlay,
    .memory-overlay {

        padding:
            10px;

    }


    .settings-modal,
    .memory-modal {

        max-height:
            95vh;

        border-radius:
            19px;

    }


    .settings-header,
    .settings-content,
    .settings-footer,
    .memory-header,
    .memory-content,
    .memory-footer {

        padding-left:
            17px;

        padding-right:
            17px;

    }


    .memory-add-row {

        flex-direction:
            column;

    }


    .memory-add-btn {

        width:
            100%;

        height:
            42px;

    }


    .memory-setting-card {

        gap:
            12px;

    }


    .toast-container {

        left:
            10px;

        right:
            10px;

        bottom:
            12px;

    }


    .toast {

        min-width:
            0;

        max-width:
            none;

        width:
            100%;

    }

}

/* ===== LIFEMATE MOBILE RESPONSIVE FIX V1 START ===== */

/* =====================================================
   LIFEMATE — MOBILE RESPONSIVE V1
   iPhone + Android
===================================================== */

@media (max-width: 800px) {

    html,
    body {
        width: 100%;
        height: 100%;
        min-height: 100%;
        overflow: hidden;
        overscroll-behavior: none;
        -webkit-text-size-adjust: 100%;
    }

    body {
        position: fixed;
        inset: 0;
    }

    .app {
        width: 100%;
        height: 100vh;
        height: 100dvh;
        min-height: 100vh;
        min-height: 100dvh;
        overflow: hidden;
    }

    .main {
        width: 100%;
        height: 100vh;
        height: 100dvh;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
    }

    /* -----------------------------
       SIDEBAR
    ----------------------------- */

    .sidebar {
        width: min(86vw, 320px);
        min-width: 0;

        height: 100vh;
        height: 100dvh;
        max-height: 100dvh;

        padding:
            calc(15px + env(safe-area-inset-top, 0px))
            14px
            calc(14px + env(safe-area-inset-bottom, 0px));

        position: fixed;
        top: 0;
        left: 0;

        overflow: hidden;

        transform: translateX(-105%);

        box-shadow:
            20px 0 70px
            rgba(0, 0, 0, .58);

        z-index: 1000;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar-top {
        flex: 1;
        min-height: 0;

        overflow-x: hidden;
        overflow-y: auto;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .sidebar-bottom {
        flex-shrink: 0;
    }

    .logo {
        padding:
            4px
            6px
            18px;
    }

    .logo-icon {
        width: 42px;
        height: 42px;

        border-radius: 13px;

        font-size: 20px;
    }

    .logo-text {
        font-size: 19px;
    }

    .new-chat {
        height: 50px;
    }

    .sidebar-nav {
        margin-top: 18px;
    }

    .nav-item {
        min-height: 54px;

        margin-bottom: 5px;

        padding:
            7px
            10px;
    }

    .nav-icon {
        width: 34px;
        height: 34px;

        flex:
            0 0 34px;
    }

    .chat-history {
        margin-top: 18px;
    }

    /* -----------------------------
       HEADER
    ----------------------------- */

    .header {
        width: 100%;

        height: auto;
        min-height:
            calc(
                60px +
                env(safe-area-inset-top, 0px)
            );

        padding:
            calc(
                7px +
                env(safe-area-inset-top, 0px)
            )
            11px
            7px;

        flex:
            0 0 auto;

        gap: 8px;
    }

    .header-left {
        min-width: 0;
        flex: 1;
    }

    .header-title {
        min-width: 0;

        gap: 8px;

        font-size: 13px;
    }

    .header-title > div:last-child {
        min-width: 0;
    }

    .header-title span {
        overflow: hidden;

        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .header-ai-icon {
        width: 30px;
        height: 30px;

        flex:
            0 0 30px;

        border-radius: 9px;
    }

    .header-actions {
        flex-shrink: 0;

        gap: 5px;
    }

    .header .icon-btn {
        width: 38px;
        height: 38px;

        flex:
            0 0 38px;
    }

    .mobile-menu {
        display: flex;
    }

    /* -----------------------------
       CHAT SCROLL AREA
    ----------------------------- */

    .chat-area {
        min-height: 0;

        overflow-x: hidden;
        overflow-y: auto;

        -webkit-overflow-scrolling: touch;

        overscroll-behavior-y: contain;
    }

    /* -----------------------------
       WELCOME
    ----------------------------- */

    .welcome {
        width: 100%;

        min-height: 100%;

        margin: 0;

        padding:
            30px
            14px
            calc(
                155px +
                env(safe-area-inset-bottom, 0px)
            );

        justify-content: flex-start;

        overflow-x: hidden;
    }

    .welcome-logo {
        width: 58px;
        height: 58px;

        margin-bottom: 19px;

        border-radius: 18px;

        font-size: 25px;
    }

    .welcome h1 {
        max-width: 100%;

        font-size:
            clamp(
                25px,
                7vw,
                30px
            );

        line-height: 1.22;

        letter-spacing: -.8px;

        overflow-wrap: anywhere;
    }

    .welcome p {
        max-width: 92%;

        margin-top: 9px;

        font-size: 13px;

        line-height: 1.45;
    }

    /* -----------------------------
       MODE BUTTONS
    ----------------------------- */

    .mode-buttons {
        width: 100%;

        margin-top: 24px;

        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 8px;
    }

    .mode-button {
        width: 100%;
        min-width: 0;

        height: 42px;

        padding:
            0
            9px;

        justify-content: center;

        gap: 6px;

        font-size: 12px;

        white-space: nowrap;
    }

    .mode-button svg {
        width: 16px;
        height: 16px;

        flex-shrink: 0;
    }

    /* -----------------------------
       SUGGESTIONS
    ----------------------------- */

    .suggestions {
        width: 100%;

        margin-top: 22px;

        grid-template-columns: 1fr;

        gap: 9px;
    }

    .suggestion {
        width: 100%;

        min-height: 120px;

        padding: 16px;

        border-radius: 16px;
    }

    .suggestion-icon {
        width: 40px;
        height: 40px;

        margin-bottom: 12px;
    }

    .suggestion-title {
        padding-right: 30px;

        font-size: 14px;
    }

    .suggestion-text {
        padding-right: 28px;

        margin-top: 5px;

        font-size: 11px;

        line-height: 1.45;
    }

    .card-arrow {
        right: 14px;
        bottom: 13px;
    }

    /* -----------------------------
       MESSAGES
    ----------------------------- */

    #messages {
        width: 100%;

        padding:
            19px
            12px
            calc(
                155px +
                env(safe-area-inset-bottom, 0px)
            );

        overflow-x: hidden;
    }

    .message {
        width: 100%;

        gap: 8px;

        margin-bottom: 21px;

        font-size: 14px;

        line-height: 1.55;
    }

    .message-avatar {
        width: 30px;
        height: 30px;

        flex:
            0 0 30px;

        border-radius: 10px;
    }

    .message-body {
        max-width:
            calc(100% - 38px);

        min-width: 0;
    }

    .message.user
    .message-body {
        max-width: 88%;
    }

    .message.user
    .message-content {
        padding:
            11px
            14px;

        border-radius:
            16px
            16px
            5px
            16px;
    }

    .message-content {
        max-width: 100%;

        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .message-content img,
    .message-content video,
    .message-content iframe {
        max-width: 100%;
        height: auto;
    }

    .message-content pre {
        width: 100%;
        max-width: 100%;

        margin:
            12px
            0;

        padding: 12px;

        overflow-x: auto;

        font-size: 11px;

        -webkit-overflow-scrolling: touch;
    }

    .message-content code {
        max-width: 100%;
    }

    .message-actions {
        gap: 2px;
    }

    .message-action-btn {
        min-height: 32px;

        padding:
            0
            7px;
    }

    .message.user
    .message-action-btn {
        opacity: 1;
    }

    /* -----------------------------
       MESSAGE EDIT
    ----------------------------- */

    .message-edit-box {
        width: 100%;
        max-width: 100%;

        padding: 10px;
    }

    .message-edit-textarea {
        min-height: 90px;

        font-size: 16px;
    }

    .message-edit-actions {
        width: 100%;
    }

    /* -----------------------------
       COMPOSER
    ----------------------------- */

    .composer-wrapper {
        width: 100%;

        left: 0;
        right: 0;
        bottom: 0;

        padding:
            8px
            8px
            calc(
                8px +
                env(safe-area-inset-bottom, 0px)
            );

        background:
            linear-gradient(
                transparent 0%,
                rgba(5, 6, 18, .88) 18%,
                var(--bg) 42%
            );

        z-index: 80;
    }

    .composer-container {
        width: 100%;
        min-width: 0;
    }

    .file-preview {
        width: auto;

        max-width: 100%;

        margin:
            0
            0
            7px;

        padding:
            8px
            9px;
    }

    .file-preview-info {
        min-width: 0;
    }

    .file-preview-name {
        max-width:
            calc(100vw - 125px);
    }

    .composer {
        width: 100%;

        min-height: 58px;

        padding: 7px;

        gap: 4px;

        align-items: flex-end;

        border-radius: 19px;
    }

    .message-input {
        width: 100%;
        min-width: 0;

        min-height: 42px;
        max-height: 120px;

        padding:
            10px
            6px;

        /* 16px prevents Safari auto zoom */
        font-size: 16px;

        line-height: 1.35;
    }

    .composer-btn {
        width: 42px;
        height: 42px;

        flex:
            0 0 42px;

        border-radius: 12px;
    }

    .send-btn {
        width: 44px;
        height: 44px;

        flex:
            0 0 44px;
    }

    .composer-btn svg,
    .send-btn svg {
        width: 18px;
        height: 18px;
    }

    .disclaimer {
        margin-top: 5px;

        padding:
            0
            8px;

        font-size: 9px;

        line-height: 1.35;
    }

    /* -----------------------------
       SETTINGS + MEMORY
    ----------------------------- */

    .settings-overlay,
    .memory-overlay {
        padding:
            calc(
                10px +
                env(safe-area-inset-top, 0px)
            )
            8px
            calc(
                8px +
                env(safe-area-inset-bottom, 0px)
            );

        align-items: flex-end;
    }

    .settings-modal,
    .memory-modal {
        width: 100%;

        max-height:
            calc(
                100dvh -
                env(safe-area-inset-top, 0px) -
                12px
            );

        border-radius:
            21px
            21px
            12px
            12px;
    }

    .settings-header,
    .memory-header {
        padding:
            18px
            16px
            15px;
    }

    .settings-header h2,
    .memory-header h2 {
        font-size: 21px;
    }

    .settings-content,
    .memory-content {
        padding:
            15px
            16px;

        -webkit-overflow-scrolling: touch;
    }

    .settings-row {
        width: 100%;

        min-height: 0;

        padding:
            13px
            0;

        align-items: stretch;

        flex-direction: column;

        gap: 9px;
    }

    .settings-row-info {
        width: 100%;
    }

    .settings-select,
    .settings-input,
    .settings-textarea {
        width: 100%;

        min-width: 0;

        font-size: 16px;
    }

    .settings-block {
        padding: 14px;
    }

    .settings-footer {
        padding:
            13px
            16px
            calc(
                13px +
                env(safe-area-inset-bottom, 0px)
            );

        align-items: stretch;

        flex-direction: column;

        gap: 10px;
    }

    .settings-footer-actions {
        width: 100%;

        display: flex;
    }

    .settings-secondary-btn,
    .settings-save-btn {
        flex: 1;

        min-width: 0;
    }

    .memory-setting-card {
        width: 100%;

        padding:
            13px
            14px;

        gap: 10px;
    }

    .memory-add-row {
        flex-direction: column;
    }

    .memory-input {
        width: 100%;

        font-size: 16px;
    }

    .memory-add-btn {
        width: 100%;
        height: 44px;
    }

    /* -----------------------------
       GENERATED IMAGES
    ----------------------------- */

    .image-result {
        width: 100%;
        max-width: 100%;
    }

    .image-result-header {
        align-items: flex-start;

        gap: 8px;
    }

    .generated-image-wrapper {
        width: 100%;

        border-radius: 15px;
    }

    .generated-image {
        width: 100%;
        height: auto;
    }

    .image-prompt-box {
        flex-direction: column;
    }

    .image-actions {
        width: 100%;
    }

    .image-action-btn {
        min-height: 42px;
    }

    /* -----------------------------
       TOAST
    ----------------------------- */

    .toast-container {
        left: 8px;
        right: 8px;

        bottom:
            calc(
                100px +
                env(safe-area-inset-bottom, 0px)
            );

        width: auto;
    }

    .toast {
        width: 100%;

        min-width: 0;
        max-width: none;
    }

}


/* =====================================================
   SMALL PHONES
===================================================== */

@media (max-width: 520px) {

    .header {
        padding-left: 8px;
        padding-right: 8px;
    }

    .header-title {
        font-size: 12px;
    }

    .header-actions {
        gap: 3px;
    }

    .header .icon-btn {
        width: 36px;
        height: 36px;

        flex:
            0 0 36px;
    }

    .welcome {
        padding:
            23px
            11px
            calc(
                145px +
                env(safe-area-inset-bottom, 0px)
            );
    }

    .welcome-logo {
        width: 52px;
        height: 52px;

        margin-bottom: 16px;

        border-radius: 16px;

        font-size: 23px;
    }

    .welcome h1 {
        font-size:
            clamp(
                23px,
                7vw,
                26px
            );
    }

    .welcome p {
        font-size: 12px;
    }

    .mode-buttons {
        margin-top: 20px;

        gap: 7px;
    }

    .mode-button {
        height: 40px;

        padding:
            0
            7px;

        font-size: 11px;
    }

    .suggestions {
        margin-top: 18px;
    }

    .suggestion {
        min-height: 112px;

        padding: 14px;
    }

    .suggestion-icon {
        width: 37px;
        height: 37px;

        margin-bottom: 10px;
    }

    #messages {
        padding:
            16px
            10px
            calc(
                145px +
                env(safe-area-inset-bottom, 0px)
            );
    }

    .message {
        gap: 7px;
    }

    .message.user
    .message-body {
        max-width: 92%;
    }

    .composer-wrapper {
        padding:
            7px
            6px
            calc(
                7px +
                env(safe-area-inset-bottom, 0px)
            );
    }

    .composer {
        min-height: 56px;

        padding: 6px;

        gap: 3px;

        border-radius: 17px;
    }

    .composer-btn {
        width: 40px;
        height: 40px;

        flex:
            0 0 40px;
    }

    .send-btn {
        width: 42px;
        height: 42px;

        flex:
            0 0 42px;
    }

    #paperclipBtn {
        display: none;
    }

    .settings-overlay,
    .memory-overlay {
        padding:
            env(safe-area-inset-top, 0px)
            0
            0;
    }

    .settings-modal,
    .memory-modal {
        max-height:
            calc(
                100dvh -
                env(safe-area-inset-top, 0px)
            );

        border-radius:
            20px
            20px
            0
            0;
    }

}


/* =====================================================
   VERY SMALL PHONES
===================================================== */

@media (max-width: 370px) {

    .header-ai-icon {
        display: none;
    }

    .header-title {
        gap: 4px;
    }

    .mode-button {
        font-size: 10px;
    }

    .composer-btn {
        width: 38px;
        height: 38px;

        flex:
            0 0 38px;
    }

    .send-btn {
        width: 40px;
        height: 40px;

        flex:
            0 0 40px;
    }

    .message-input {
        padding-left: 4px;
        padding-right: 4px;
    }

}

/* ===== LIFEMATE MOBILE RESPONSIVE FIX V1 END ===== */

/* ===== LIFEMATE LEGAL LINKS START ===== */

.legal-links {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 4px 0 12px;
    padding: 0 12px;
    font-size: 11px;
    line-height: 1;
    color: rgba(180, 191, 211, 0.42);
    user-select: none;
}

.legal-links a {
    color: rgba(190, 202, 224, 0.62);
    text-decoration: none;
    transition:
        color 0.18s ease,
        opacity 0.18s ease;
}

.legal-links a:hover {
    color: rgba(225, 233, 248, 0.95);
}

.legal-links a:focus-visible {
    outline: 2px solid rgba(130, 165, 255, 0.7);
    outline-offset: 4px;
    border-radius: 4px;
}

.legal-links span {
    opacity: 0.45;
}

@media (max-width: 800px) {
    .legal-links {
        margin-bottom: 10px;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}

/* ===== LIFEMATE LEGAL LINKS END ===== */


/* ===== LIFEMATE PREMIUM V2 START ===== */

/* -------------------------------------------------------
   DESIGN TOKENS
------------------------------------------------------- */

:root {
    --lm-bg:
        #050914;

    --lm-bg-soft:
        #070c17;

    --lm-sidebar:
        rgba(7, 12, 23, 0.96);

    --lm-panel:
        rgba(13, 20, 36, 0.82);

    --lm-panel-solid:
        #0d1424;

    --lm-panel-hover:
        #111a2e;

    --lm-panel-active:
        #151d31;

    --lm-border:
        rgba(148, 163, 184, 0.14);

    --lm-border-strong:
        rgba(139, 92, 246, 0.42);

    --lm-text:
        #f8fafc;

    --lm-text-soft:
        #d4dbea;

    --lm-muted:
        #8995aa;

    --lm-muted-2:
        #64748b;

    --lm-blue:
        #5f82ff;

    --lm-purple:
        #9465ff;

    --lm-purple-2:
        #7c4dff;

    --lm-green:
        #21d884;

    --lm-cyan:
        #22d3ee;

    --lm-orange:
        #ff7b4a;

    --lm-yellow:
        #f7c948;

    --lm-shadow:
        0 24px 70px rgba(0, 0, 0, 0.34);

    --lm-radius-xl:
        24px;

    --lm-radius-lg:
        18px;

    --lm-radius-md:
        14px;
}


body.theme-light {
    --lm-bg:
        #eef2fb;

    --lm-bg-soft:
        #f5f7fc;

    --lm-sidebar:
        rgba(248, 250, 255, 0.96);

    --lm-panel:
        rgba(255, 255, 255, 0.82);

    --lm-panel-solid:
        #ffffff;

    --lm-panel-hover:
        #f1f4fb;

    --lm-panel-active:
        #e9edfa;

    --lm-border:
        rgba(71, 85, 105, 0.14);

    --lm-border-strong:
        rgba(99, 102, 241, 0.34);

    --lm-text:
        #0f172a;

    --lm-text-soft:
        #334155;

    --lm-muted:
        #64748b;

    --lm-muted-2:
        #94a3b8;

    --lm-shadow:
        0 24px 70px rgba(15, 23, 42, 0.11);
}


/* -------------------------------------------------------
   GLOBAL
------------------------------------------------------- */

html {
    height:
        100%;

    background:
        var(--lm-bg);
}


body {
    margin:
        0;

    width:
        100%;

    height:
        100%;

    overflow:
        hidden;

    color:
        var(--lm-text);

    background:
        radial-gradient(
            circle at 58% 15%,
            rgba(79, 70, 229, 0.13),
            transparent 32%
        ),
        radial-gradient(
            circle at 92% 30%,
            rgba(37, 99, 235, 0.07),
            transparent 28%
        ),
        var(--lm-bg);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    -webkit-font-smoothing:
        antialiased;
}


button,
textarea,
input,
select {
    font:
        inherit;
}


button {
    -webkit-tap-highlight-color:
        transparent;
}


::selection {
    background:
        rgba(124, 92, 255, 0.32);
}


/* -------------------------------------------------------
   APP SHELL
------------------------------------------------------- */

.app {
    display:
        grid;

    grid-template-columns:
        286px minmax(0, 1fr);

    width:
        100%;

    height:
        100dvh;

    overflow:
        hidden;

    background:
        transparent;
}


/* -------------------------------------------------------
   SIDEBAR
------------------------------------------------------- */

.sidebar {
    position:
        relative;

    z-index:
        40;

    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

    height:
        100dvh;

    overflow:
        hidden;

    border-right:
        1px solid var(--lm-border);

    background:
        linear-gradient(
            180deg,
            rgba(8, 14, 27, 0.985),
            rgba(5, 10, 20, 0.985)
        );

    box-shadow:
        18px 0 55px rgba(0, 0, 0, 0.1);
}


body.theme-light .sidebar {
    background:
        var(--lm-sidebar);
}


.sidebar-top {
    display:
        flex;

    flex-direction:
        column;

    min-height:
        0;

    flex:
        1;

    padding:
        24px 16px 8px;

    overflow:
        hidden;
}


.logo {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    min-height:
        50px;

    padding:
        0 10px;

    margin-bottom:
        22px;
}


.logo-mark {
    position:
        relative;

    display:
        grid;

    place-items:
        center;

    width:
        40px;

    height:
        40px;

    flex:
        0 0 40px;

    border:
        1px solid rgba(139, 92, 246, 0.28);

    border-radius:
        12px;

    background:
        linear-gradient(
            145deg,
            rgba(91, 68, 255, 0.16),
            rgba(139, 92, 246, 0.1)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 8px 30px rgba(76, 29, 149, 0.12);
}


.logo-l {
    font-size:
        28px;

    line-height:
        1;

    font-weight:
        900;

    letter-spacing:
        -4px;

    transform:
        translateX(-2px);

    background:
        linear-gradient(
            145deg,
            #6d7cff,
            #c05cff
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;
}


.logo-spark {
    position:
        absolute;

    top:
        3px;

    right:
        4px;

    color:
        #b477ff;

    font-size:
        11px;
}


.logo-copy {
    min-width:
        0;
}


.logo-text {
    color:
        var(--lm-text);

    font-size:
        17px;

    font-weight:
        800;

    letter-spacing:
        -0.35px;
}


.logo-subtitle {
    margin-top:
        2px;

    color:
        var(--lm-muted-2);

    font-size:
        10px;

    font-weight:
        500;

    letter-spacing:
        0.02em;
}


.new-chat {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    width:
        100%;

    min-height:
        48px;

    padding:
        8px 10px;

    margin-bottom:
        18px;

    color:
        #c5c8ff;

    border:
        1px solid rgba(109, 94, 252, 0.68);

    border-radius:
        13px;

    background:
        linear-gradient(
            90deg,
            rgba(74, 58, 180, 0.11),
            rgba(105, 74, 220, 0.05)
        );

    cursor:
        pointer;

    transition:
        160ms ease;
}


.new-chat:hover {
    border-color:
        rgba(139, 112, 255, 0.95);

    background:
        rgba(89, 70, 206, 0.14);

    transform:
        translateY(-1px);
}


.new-chat-icon {
    display:
        grid;

    place-items:
        center;

    width:
        27px;

    height:
        27px;

    border-radius:
        8px;

    color:
        #7f8cff;

    background:
        rgba(91, 91, 255, 0.1);
}


.new-chat svg {
    width:
        17px;

    height:
        17px;
}


.new-chat > span:nth-child(2) {
    font-size:
        13px;

    font-weight:
        700;
}


.new-chat kbd {
    margin-left:
        auto;

    padding:
        3px 6px;

    color:
        var(--lm-muted);

    border:
        1px solid var(--lm-border);

    border-radius:
        6px;

    background:
        rgba(255, 255, 255, 0.025);

    font-size:
        10px;

    font-family:
        inherit;
}


.sidebar-nav {
    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;
}


.section-title {
    padding:
        6px 12px 7px;

    color:
        var(--lm-muted-2);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;
}


.nav-item {
    position:
        relative;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    width:
        100%;

    min-height:
        40px;

    padding:
        7px 10px;

    color:
        var(--lm-muted);

    text-align:
        left;

    border:
        1px solid transparent;

    border-radius:
        10px;

    background:
        transparent;

    cursor:
        pointer;

    transition:
        color 150ms ease,
        border-color 150ms ease,
        background 150ms ease;
}


.nav-item:hover {
    color:
        var(--lm-text-soft);

    background:
        rgba(148, 163, 184, 0.055);
}


.nav-item.active {
    color:
        var(--lm-text);

    border-color:
        rgba(148, 163, 184, 0.07);

    background:
        linear-gradient(
            90deg,
            rgba(129, 140, 248, 0.11),
            rgba(129, 140, 248, 0.035)
        );

    box-shadow:
        inset 3px 0 0 rgba(124, 108, 255, 0.9);
}


.nav-icon {
    display:
        grid;

    place-items:
        center;

    width:
        25px;

    height:
        25px;

    flex:
        0 0 25px;

    color:
        currentColor;
}


.nav-icon svg {
    width:
        17px;

    height:
        17px;

    stroke-width:
        1.8;
}


.nav-label {
    min-width:
        0;
}


.nav-label strong,
.nav-item strong {
    display:
        block;

    overflow:
        hidden;

    color:
        inherit;

    font-size:
        12.5px;

    font-weight:
        600;

    line-height:
        1.2;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.nav-item small {
    display:
        none;
}


/* -------------------------------------------------------
   CHAT HISTORY
------------------------------------------------------- */

.chat-history {
    min-height:
        0;

    flex:
        1;

    overflow-y:
        auto;

    margin-top:
        12px;

    padding:
        0 2px 20px;

    scrollbar-width:
        thin;

    scrollbar-color:
        rgba(148, 163, 184, 0.14)
        transparent;
}


.lifemate-history-tools {
    margin-top:
        12px !important;

    padding:
        10px 2px 4px !important;

    border-top:
        1px solid var(--lm-border) !important;
}


.lifemate-history-tabs {
    gap:
        4px !important;
}


.lifemate-history-tab {
    min-height:
        30px !important;

    border-radius:
        8px !important;

    color:
        var(--lm-muted) !important;

    background:
        transparent !important;
}


.lifemate-history-tab.active {
    color:
        var(--lm-text-soft) !important;

    background:
        rgba(148, 163, 184, 0.07) !important;
}


.lifemate-history-search {
    min-height:
        35px !important;

    margin-top:
        7px !important;

    border:
        1px solid var(--lm-border) !important;

    border-radius:
        9px !important;

    background:
        rgba(255, 255, 255, 0.025) !important;
}


.lifemate-history-search input {
    color:
        var(--lm-text-soft) !important;

    background:
        transparent !important;

    font-size:
        11px !important;
}


.lifemate-history-section-title {
    color:
        var(--lm-muted-2) !important;

    font-size:
        9px !important;

    letter-spacing:
        0.05em;
}


.lifemate-history-row {
    border:
        1px solid transparent !important;

    border-radius:
        9px !important;

    background:
        transparent !important;
}


.lifemate-history-row:hover {
    border-color:
        var(--lm-border) !important;

    background:
        rgba(148, 163, 184, 0.045) !important;
}


.lifemate-history-row.selected {
    border-color:
        rgba(124, 108, 255, 0.15) !important;

    background:
        rgba(124, 108, 255, 0.07) !important;
}


/* -------------------------------------------------------
   SIDEBAR BOTTOM
------------------------------------------------------- */

.sidebar-bottom {
    padding:
        10px 15px 14px;

    border-top:
        1px solid var(--lm-border);

    background:
        rgba(6, 11, 21, 0.94);
}


body.theme-light .sidebar-bottom {
    background:
        rgba(248, 250, 255, 0.94);
}


.profile {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    min-height:
        60px;

    padding:
        9px 10px;

    border:
        1px solid var(--lm-border);

    border-radius:
        13px;

    background:
        rgba(148, 163, 184, 0.045);

    cursor:
        pointer;

    transition:
        150ms ease;
}


.profile:hover {
    border-color:
        rgba(148, 163, 184, 0.25);

    background:
        rgba(148, 163, 184, 0.075);
}


.profile-avatar {
    display:
        grid;

    place-items:
        center;

    width:
        36px;

    height:
        36px;

    flex:
        0 0 36px;

    overflow:
        hidden;

    color:
        white;

    border:
        1px solid rgba(255, 255, 255, 0.14);

    border-radius:
        50%;

    background:
        linear-gradient(
            145deg,
            #675cff,
            #9a4dff
        );

    font-size:
        12px;

    font-weight:
        800;
}


.profile-avatar img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.profile-details {
    min-width:
        0;

    flex:
        1;
}


.profile-name {
    overflow:
        hidden;

    color:
        var(--lm-text);

    font-size:
        12px;

    font-weight:
        700;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.profile-plan {
    margin-top:
        2px;

    color:
        var(--lm-muted);

    font-size:
        10px;
}


.profile-chevron {
    width:
        15px;

    color:
        var(--lm-muted-2);
}


.sidebar-controls {
    display:
        none;
}


.legal-links {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    margin-top:
        9px;

    color:
        var(--lm-muted-2);

    font-size:
        9px;
}


.legal-links a {
    color:
        inherit;

    text-decoration:
        none;
}


.legal-links a:hover {
    color:
        var(--lm-text-soft);
}


/* -------------------------------------------------------
   MAIN
------------------------------------------------------- */

.main {
    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

    height:
        100dvh;

    overflow:
        hidden;

    background:
        radial-gradient(
            circle at 50% 16%,
            rgba(73, 70, 229, 0.11),
            transparent 35%
        );
}


/* -------------------------------------------------------
   HEADER
------------------------------------------------------- */

.header {
    position:
        relative;

    z-index:
        30;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    min-height:
        70px;

    padding:
        0 28px;

    border-bottom:
        1px solid rgba(148, 163, 184, 0.045);

    background:
        linear-gradient(
            180deg,
            rgba(5, 9, 20, 0.93),
            rgba(5, 9, 20, 0.55),
            transparent
        );

    backdrop-filter:
        blur(12px);
}


body.theme-light .header {
    background:
        rgba(238, 242, 251, 0.84);
}


.header-left,
.header-actions {
    display:
        flex;

    align-items:
        center;
}


.header-left {
    gap:
        10px;
}


.header-actions {
    gap:
        8px;
}


.header-title {
    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    color:
        var(--lm-muted);
}


.header-ai-icon {
    display:
        grid;

    place-items:
        center;

    width:
        26px;

    height:
        26px;

    color:
        #a18cff;

    border:
        1px solid rgba(139, 92, 246, 0.18);

    border-radius:
        8px;

    background:
        rgba(139, 92, 246, 0.07);

    font-size:
        11px;
}


.header-copy {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;
}


.header-copy strong {
    color:
        var(--lm-text-soft);

    font-size:
        12px;

    font-weight:
        650;
}


.header-copy span {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        21px;

    padding:
        0 7px;

    color:
        var(--lm-muted);

    border:
        1px solid var(--lm-border);

    border-radius:
        999px;

    font-size:
        9px;
}


.icon-btn,
.header-search-btn {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        38px;

    height:
        38px;

    color:
        var(--lm-muted);

    border:
        1px solid var(--lm-border);

    border-radius:
        11px;

    background:
        rgba(148, 163, 184, 0.025);

    cursor:
        pointer;

    transition:
        150ms ease;
}


.icon-btn:hover,
.header-search-btn:hover {
    color:
        var(--lm-text);

    border-color:
        rgba(148, 163, 184, 0.24);

    background:
        rgba(148, 163, 184, 0.07);
}


.icon-btn svg {
    width:
        17px;

    height:
        17px;
}


.header-search-btn {
    gap:
        7px;

    min-width:
        auto;

    padding:
        0 12px;

    font-size:
        11px;

    font-weight:
        600;
}


.header-search-btn svg {
    width:
        15px;

    height:
        15px;
}


.header-account-btn {
    color:
        white;

    border-color:
        rgba(139, 92, 246, 0.28);

    border-radius:
        50%;

    background:
        linear-gradient(
            145deg,
            #6577ff,
            #974dff
        );
}


.mobile-menu {
    display:
        none;
}


/* -------------------------------------------------------
   CHAT AREA
------------------------------------------------------- */

.chat-area {
    position:
        relative;

    min-height:
        0;

    flex:
        1;

    overflow-y:
        auto;

    overflow-x:
        hidden;

    scroll-behavior:
        smooth;

    scrollbar-width:
        thin;

    scrollbar-color:
        rgba(148, 163, 184, 0.16)
        transparent;
}


.welcome {
    width:
        min(1060px, 100%);

    margin:
        0 auto;

    padding:
        67px 36px 170px;

    text-align:
        center;
}


.hero-kicker {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    margin-bottom:
        14px;

    color:
        var(--lm-muted);

    font-size:
        10px;

    font-weight:
        650;

    letter-spacing:
        0.04em;
}


.hero-status-dot {
    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        #47df9b;

    box-shadow:
        0 0 14px rgba(71, 223, 155, 0.64);
}


.welcome h1 {
    margin:
        0;

    color:
        var(--lm-text);

    font-size:
        clamp(33px, 3.2vw, 48px);

    font-weight:
        760;

    line-height:
        1.15;

    letter-spacing:
        -0.045em;
}


.welcome h1::first-line {
    background:
        linear-gradient(
            90deg,
            #60a5fa 5%,
            #8585ff 50%,
            #bb63ff 100%
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;
}


.welcome > p {
    margin:
        14px 0 0;

    color:
        var(--lm-muted);

    font-size:
        14px;

    line-height:
        1.55;
}


.mode-buttons {
    display:
        none;
}


/* -------------------------------------------------------
   FEATURE CARDS
------------------------------------------------------- */

.suggestions {
    display:
        grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap:
        10px;

    width:
        100%;

    margin-top:
        190px;

    text-align:
        left;
}


.suggestion,
.vision-suggestion {
    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    min-height:
        154px;

    padding:
        17px;

    overflow:
        hidden;

    color:
        var(--lm-text);

    border:
        1px solid var(--lm-border);

    border-radius:
        16px;

    background:
        linear-gradient(
            145deg,
            rgba(17, 25, 43, 0.9),
            rgba(9, 15, 28, 0.94)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.025);

    cursor:
        pointer;

    transition:
        transform 160ms ease,
        border-color 160ms ease,
        background 160ms ease,
        box-shadow 160ms ease;
}


body.theme-light .suggestion,
body.theme-light .vision-suggestion {
    background:
        rgba(255, 255, 255, 0.82);
}


.suggestion:hover,
.vision-suggestion:hover {
    z-index:
        2;

    transform:
        translateY(-3px);

    border-color:
        rgba(139, 92, 246, 0.34);

    background:
        linear-gradient(
            145deg,
            rgba(20, 29, 50, 0.98),
            rgba(11, 17, 32, 0.98)
        );

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.2);
}


body.theme-light .suggestion:hover,
body.theme-light .vision-suggestion:hover {
    background:
        #ffffff;
}


.suggestion-icon {
    display:
        grid;

    place-items:
        center;

    width:
        37px;

    height:
        37px;

    margin-bottom:
        14px;

    border:
        1px solid currentColor;

    border-radius:
        10px;

    background:
        rgba(255, 255, 255, 0.025);
}


.suggestion-icon svg {
    width:
        18px;

    height:
        18px;

    stroke-width:
        1.8;
}


.feature-chat .suggestion-icon {
    color:
        #5d8cff;
}


.feature-search .suggestion-icon {
    color:
        #26d77d;
}


.feature-research .suggestion-icon {
    color:
        #a265ff;
}


.feature-files .suggestion-icon {
    color:
        #efb526;
}


.feature-images .suggestion-icon {
    color:
        #ff7245;
}


.feature-vision .suggestion-icon {
    color:
        #22d3ee;
}


.feature-writing .suggestion-icon {
    color:
        #c084fc;
}


.feature-study .suggestion-icon {
    color:
        #60a5fa;
}


.feature-planner .suggestion-icon {
    color:
        #34d399;
}


.suggestion-title {
    color:
        var(--lm-text);

    font-size:
        13px;

    font-weight:
        700;

    letter-spacing:
        -0.01em;
}


.suggestion-text {
    margin-top:
        6px;

    color:
        var(--lm-muted);

    font-size:
        10.5px;

    line-height:
        1.45;
}


.file-formats {
    margin-top:
        auto;

    padding-top:
        10px;

    color:
        var(--lm-muted-2);

    font-size:
        8px;

    letter-spacing:
        0.02em;
}


.vision-new-badge {
    position:
        absolute;

    top:
        12px;

    right:
        12px;

    padding:
        3px 6px;

    color:
        #67e8f9;

    border:
        1px solid rgba(34, 211, 238, 0.25);

    border-radius:
        999px;

    background:
        rgba(34, 211, 238, 0.07);

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        0.08em;
}


.card-arrow {
    display:
        none;
}


/* -------------------------------------------------------
   COMPOSER
------------------------------------------------------- */

.composer-wrapper {
    position:
        relative;

    z-index:
        25;

    flex:
        0 0 auto;

    padding:
        10px 28px 17px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(5, 9, 20, 0.8) 22%,
            rgba(5, 9, 20, 0.97)
        );
}


body.theme-light .composer-wrapper {
    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(238, 242, 251, 0.9) 28%,
            rgba(238, 242, 251, 0.98)
        );
}


.composer-container {
    width:
        min(880px, 100%);

    margin:
        0 auto;
}


.composer {
    display:
        flex;

    flex-direction:
        column;

    min-height:
        122px;

    padding:
        15px 15px 12px;

    border:
        1px solid rgba(148, 163, 184, 0.19);

    border-radius:
        23px;

    background:
        linear-gradient(
            145deg,
            rgba(23, 31, 50, 0.96),
            rgba(16, 23, 39, 0.97)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 24px 65px rgba(0, 0, 0, 0.26);

    backdrop-filter:
        blur(24px);

    transition:
        border-color 150ms ease,
        box-shadow 150ms ease;
}


body.theme-light .composer {
    background:
        rgba(255, 255, 255, 0.92);
}


.composer:focus-within {
    border-color:
        rgba(123, 106, 255, 0.44);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 24px 75px rgba(0, 0, 0, 0.29),
        0 0 0 3px rgba(107, 83, 255, 0.045);
}


.message-input {
    width:
        100%;

    min-height:
        57px;

    max-height:
        170px;

    margin:
        0;

    padding:
        2px 4px 8px;

    resize:
        none;

    color:
        var(--lm-text);

    border:
        0;

    outline:
        0;

    background:
        transparent;

    font-size:
        13px;

    line-height:
        1.55;
}


.message-input::placeholder {
    color:
        #8791a6;
}


.composer-bottom-row {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    margin-top:
        auto;
}


.composer-left-actions,
.composer-right-actions {
    display:
        flex;

    align-items:
        center;

    gap:
        7px;
}


.composer-btn {
    display:
        inline-grid;

    place-items:
        center;

    width:
        34px;

    height:
        34px;

    flex:
        0 0 34px;

    padding:
        0;

    color:
        var(--lm-muted);

    border:
        1px solid rgba(148, 163, 184, 0.1);

    border-radius:
        10px;

    background:
        rgba(148, 163, 184, 0.035);

    cursor:
        pointer;

    transition:
        150ms ease;
}


.composer-btn:hover {
    color:
        var(--lm-text);

    border-color:
        rgba(148, 163, 184, 0.24);

    background:
        rgba(148, 163, 184, 0.08);
}


.composer-btn svg {
    width:
        16px;

    height:
        16px;
}


.composer-mode-pill {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    min-height:
        34px;

    padding:
        0 11px;

    color:
        var(--lm-text-soft);

    border:
        1px solid rgba(148, 163, 184, 0.12);

    border-radius:
        10px;

    background:
        rgba(148, 163, 184, 0.035);

    cursor:
        pointer;

    font-size:
        10px;

    font-weight:
        600;

    transition:
        150ms ease;
}


.composer-mode-pill:hover {
    border-color:
        rgba(96, 165, 250, 0.3);

    background:
        rgba(96, 165, 250, 0.065);
}


.composer-mode-pill svg {
    width:
        14px;

    height:
        14px;

    color:
        #7ba8ff;
}


.send-btn {
    color:
        white;

    border-color:
        rgba(129, 113, 255, 0.45);

    border-radius:
        11px;

    background:
        linear-gradient(
            145deg,
            #6a72ff,
            #8556ff
        );

    box-shadow:
        0 7px 20px rgba(96, 72, 255, 0.25);
}


.send-btn:hover {
    color:
        white;

    border-color:
        rgba(167, 139, 250, 0.75);

    background:
        linear-gradient(
            145deg,
            #7781ff,
            #9565ff
        );

    transform:
        translateY(-1px);
}


.composer-paperclip {
    display:
        none;
}


.disclaimer {
    padding-top:
        7px;

    color:
        var(--lm-muted-2);

    text-align:
        center;

    font-size:
        8.5px;
}


/* -------------------------------------------------------
   INITIAL HOME COMPOSER POSITION
------------------------------------------------------- */

@media (min-width: 901px) {

    .main:has(
        #welcome:not([style*="display: none"])
    ) .composer-wrapper {
        position:
            absolute;

        top:
            286px;

        left:
            0;

        right:
            0;

        z-index:
            20;

        padding-left:
            48px;

        padding-right:
            48px;

        background:
            transparent;
    }

}


/* -------------------------------------------------------
   FILE / VISION PREVIEW
------------------------------------------------------- */

.file-preview,
.vision-preview {
    margin-bottom:
        8px;

    border:
        1px solid var(--lm-border) !important;

    border-radius:
        13px !important;

    background:
        rgba(15, 23, 42, 0.96) !important;

    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.2);
}


body.theme-light .file-preview,
body.theme-light .vision-preview {
    background:
        rgba(255, 255, 255, 0.98) !important;
}


/* -------------------------------------------------------
   MESSAGES
------------------------------------------------------- */

#messages {
    width:
        min(860px, calc(100% - 48px));

    margin:
        0 auto;

    padding:
        34px 0 52px;
}


.message {
    width:
        100%;

    margin:
        0 0 24px;
}


.message.user {
    display:
        flex;

    justify-content:
        flex-end;
}


.message.user .message-content {
    max-width:
        min(74%, 680px);

    padding:
        11px 15px;

    color:
        #f8fafc;

    border:
        1px solid rgba(139, 92, 246, 0.19);

    border-radius:
        17px 17px 5px 17px;

    background:
        linear-gradient(
            145deg,
            rgba(72, 53, 165, 0.92),
            rgba(82, 51, 151, 0.82)
        );

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.12);
}


.message.assistant {
    display:
        grid;

    grid-template-columns:
        31px minmax(0, 1fr);

    gap:
        12px;

    align-items:
        flex-start;
}


.message-avatar {
    display:
        grid;

    place-items:
        center;

    width:
        30px;

    height:
        30px;

    color:
        white;

    border:
        1px solid rgba(139, 92, 246, 0.26);

    border-radius:
        9px;

    background:
        linear-gradient(
            145deg,
            #5c5cff,
            #914dff
        );

    font-size:
        11px;
}


.message-body {
    min-width:
        0;
}


.message.assistant .message-content {
    color:
        var(--lm-text-soft);

    font-size:
        13px;

    line-height:
        1.72;
}


.message.assistant .message-content pre {
    overflow-x:
        auto;

    border:
        1px solid var(--lm-border);

    border-radius:
        12px;

    background:
        #060b14;
}


.message-actions {
    display:
        flex;

    gap:
        5px;

    margin-top:
        8px;
}


.message-actions button {
    color:
        var(--lm-muted);

    border:
        0;

    background:
        transparent;

    cursor:
        pointer;

    font-size:
        10px;
}


.message-actions button:hover {
    color:
        var(--lm-text);
}


/* -------------------------------------------------------
   SETTINGS + MEMORY PREMIUM TREATMENT
------------------------------------------------------- */

.settings-overlay,
.memory-overlay {
    backdrop-filter:
        blur(15px) !important;

    background:
        rgba(2, 6, 15, 0.73) !important;
}


.settings-modal,
.memory-modal {
    color:
        var(--lm-text) !important;

    border:
        1px solid var(--lm-border) !important;

    border-radius:
        22px !important;

    background:
        linear-gradient(
            145deg,
            rgba(17, 25, 43, 0.99),
            rgba(8, 14, 27, 0.99)
        ) !important;

    box-shadow:
        0 32px 90px rgba(0, 0, 0, 0.46) !important;
}


/* -------------------------------------------------------
   RENAME / DYNAMIC MODALS
------------------------------------------------------- */

.lifemate-rename-modal {
    border:
        1px solid var(--lm-border) !important;

    border-radius:
        20px !important;

    background:
        var(--lm-panel-solid) !important;

    box-shadow:
        var(--lm-shadow) !important;
}


/* -------------------------------------------------------
   TOAST
------------------------------------------------------- */

.toast {
    color:
        var(--lm-text) !important;

    border:
        1px solid var(--lm-border) !important;

    border-radius:
        12px !important;

    background:
        rgba(13, 20, 36, 0.96) !important;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.3) !important;

    backdrop-filter:
        blur(16px);
}


/* -------------------------------------------------------
   RESPONSIVE
------------------------------------------------------- */

@media (max-width: 1180px) {

    .suggestions {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .welcome {
        width:
            min(880px, 100%);
    }

}


@media (max-width: 900px) {

    body {
        overflow:
            hidden;
    }


    .app {
        display:
            block;

        height:
            100dvh;
    }


    .sidebar {
        position:
            fixed;

        top:
            0;

        bottom:
            0;

        left:
            0;

        width:
            min(290px, 88vw);

        transform:
            translateX(-104%);

        transition:
            transform 180ms ease;

        box-shadow:
            24px 0 70px rgba(0, 0, 0, 0.46);
    }


    .sidebar.open {
        transform:
            translateX(0);
    }


    .main {
        width:
            100%;

        height:
            100dvh;
    }


    .mobile-menu {
        display:
            inline-flex;
    }


    .header {
        min-height:
            62px;

        padding:
            0 14px;
    }


    .header-search-btn span {
        display:
            none;
    }


    .header-search-btn {
        width:
            38px;

        padding:
            0;
    }


    .header-copy strong {
        display:
            none;
    }


    .welcome {
        padding:
            48px 18px 42px;
    }


    .welcome h1 {
        font-size:
            clamp(30px, 8vw, 42px);
    }


    .suggestions {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        margin-top:
            42px;
    }


    .composer-wrapper {
        position:
            relative;

        top:
            auto;

        left:
            auto;

        right:
            auto;

        padding:
            9px 12px calc(
                12px +
                env(safe-area-inset-bottom, 0px)
            );
    }


    .composer {
        min-height:
            108px;

        border-radius:
            19px;
    }


    #messages {
        width:
            calc(100% - 30px);

        padding:
            24px 0 36px;
    }

}


@media (max-width: 560px) {

    .header {
        min-height:
            58px;
    }


    .header-title {
        gap:
            5px;
    }


    .header-ai-icon {
        width:
            28px;

        height:
            28px;
    }


    .header-actions {
        gap:
            5px;
    }


    .header-actions .icon-btn,
    .header-search-btn {
        min-width:
            35px;

        width:
            35px;

        height:
            35px;
    }


    .welcome {
        padding:
            38px 14px 34px;
    }


    .hero-kicker {
        margin-bottom:
            12px;

        font-size:
            9px;
    }


    .welcome h1 {
        font-size:
            30px;

        line-height:
            1.13;
    }


    .welcome > p {
        font-size:
            12px;
    }


    .suggestions {
        grid-template-columns:
            1fr 1fr;

        gap:
            8px;

        margin-top:
            32px;
    }


    .suggestion,
    .vision-suggestion {
        min-height:
            135px;

        padding:
            14px;

        border-radius:
            14px;
    }


    .suggestion-icon {
        width:
            33px;

        height:
            33px;

        margin-bottom:
            11px;
    }


    .suggestion-title {
        font-size:
            12px;
    }


    .suggestion-text {
        font-size:
            9.5px;
    }


    .file-formats {
        display:
            none;
    }


    .composer-container {
        width:
            100%;
    }


    .composer {
        min-height:
            102px;

        padding:
            13px 12px 10px;
    }


    .message-input {
        min-height:
            52px;

        font-size:
            16px;
    }


    .composer-mode-pill span {
        display:
            none;
    }


    .composer-mode-pill {
        width:
            34px;

        padding:
            0;

        justify-content:
            center;
    }


    .composer-paperclip {
        display:
            none;
    }


    .message.user .message-content {
        max-width:
            86%;
    }


    .disclaimer {
        font-size:
            7.5px;
    }

}


/* -------------------------------------------------------
   SAFE AREAS
------------------------------------------------------- */

@supports (
    padding:
        max(0px)
) {

    .sidebar-bottom {
        padding-bottom:
            max(
                14px,
                env(safe-area-inset-bottom)
            );
    }

}


/* ===== LIFEMATE PREMIUM V2 END ===== */


/* ===== LIFEMATE FINAL HOME LAYOUT START ===== */

/*
   EMPTY HOME SCREEN

   Order:
   1. Greeting
   2. Composer
   3. Feature cards

   We use #messages:empty so the layout does not depend
   on an inline style added by JavaScript.
*/

@media (min-width: 901px) {

    /* --------------------------------------------------
       SHOW WELCOME WHEN CONVERSATION IS EMPTY
    -------------------------------------------------- */

    .main:has(#messages:empty) #welcome {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        width: min(1060px, 100%) !important;

        margin:
            0 auto !important;

        padding:
            64px 36px 150px !important;

        text-align:
            center !important;
    }


    /* --------------------------------------------------
       GREETING
    -------------------------------------------------- */

    .main:has(#messages:empty) #welcome .hero-kicker {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;

        margin-bottom:
            18px !important;
    }


    .main:has(#messages:empty) #welcome h1 {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        max-width:
            850px !important;

        margin:
            0 auto !important;

        color:
            var(--lm-text) !important;

        background:
            none !important;

        -webkit-background-clip:
            border-box !important;

        background-clip:
            border-box !important;

        -webkit-text-fill-color:
            var(--lm-text) !important;

        font-size:
            clamp(38px, 3.5vw, 52px) !important;

        font-weight:
            760 !important;

        line-height:
            1.12 !important;

        letter-spacing:
            -0.048em !important;
    }


    .main:has(#messages:empty) #welcome h1::first-line {
        color:
            var(--lm-text) !important;

        background:
            none !important;

        -webkit-background-clip:
            border-box !important;

        background-clip:
            border-box !important;

        -webkit-text-fill-color:
            var(--lm-text) !important;
    }


    .main:has(#messages:empty) #welcome > p {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        max-width:
            620px !important;

        margin:
            15px auto 0 !important;

        color:
            var(--lm-muted) !important;

        font-size:
            14px !important;
    }


    /* --------------------------------------------------
       COMPOSER — BETWEEN GREETING AND CARDS
    -------------------------------------------------- */

    .main:has(#messages:empty) .composer-wrapper {
        position:
            absolute !important;

        top:
            292px !important;

        left:
            0 !important;

        right:
            0 !important;

        bottom:
            auto !important;

        z-index:
            20 !important;

        padding:
            0 48px !important;

        background:
            transparent !important;

        pointer-events:
            none;
    }


    .main:has(#messages:empty) .composer-container {
        width:
            min(880px, 100%) !important;

        margin:
            0 auto !important;

        pointer-events:
            auto;
    }


    .main:has(#messages:empty) .composer {
        min-height:
            126px !important;
    }


    /* --------------------------------------------------
       CARDS — ALWAYS BELOW COMPOSER
    -------------------------------------------------- */

    .main:has(#messages:empty) #welcome .suggestions {
        position:
            relative !important;

        z-index:
            5 !important;

        margin-top:
            246px !important;
    }


    /* --------------------------------------------------
       NORMAL CHAT MODE
    -------------------------------------------------- */

    .main:has(#messages:not(:empty)) .composer-wrapper {
        position:
            relative !important;

        top:
            auto !important;

        left:
            auto !important;

        right:
            auto !important;

        bottom:
            auto !important;

        padding:
            10px 28px 17px !important;

        pointer-events:
            auto;
    }

}


/* -------------------------------------------------------
   MOBILE / TABLET
------------------------------------------------------- */

@media (max-width: 900px) {

    .main:has(#messages:empty) #welcome {
        display:
            block !important;

        visibility:
            visible !important;

        opacity:
            1 !important;
    }


    .main:has(#messages:empty) #welcome h1 {
        display:
            block !important;

        visibility:
            visible !important;

        opacity:
            1 !important;

        color:
            var(--lm-text) !important;

        background:
            none !important;

        -webkit-text-fill-color:
            var(--lm-text) !important;
    }


    .main:has(#messages:empty) #welcome h1::first-line {
        color:
            var(--lm-text) !important;

        background:
            none !important;

        -webkit-text-fill-color:
            var(--lm-text) !important;
    }


    .main:has(#messages:empty) .composer-wrapper {
        position:
            relative !important;

        top:
            auto !important;

        left:
            auto !important;

        right:
            auto !important;

        bottom:
            auto !important;

        pointer-events:
            auto;
    }


    .main:has(#messages:empty) #welcome .suggestions {
        margin-top:
            38px !important;
    }

}


/* ===== LIFEMATE FINAL HOME LAYOUT END ===== */


/* ===== LIFEMATE SIDEBAR FINAL ORDER START ===== */

.sidebar-top {
    overflow: hidden !important;
}

/* 1 — Logo */

.sidebar-top > .logo {
    order: 1;
    flex: 0 0 auto;
}

/* 2 — New Chat */

.sidebar-top > .new-chat {
    order: 2;
    flex: 0 0 auto;
}

/* 3 — Workspace tools */

.sidebar-top > .sidebar-nav {
    order: 3;

    flex: 0 1 auto !important;

    max-height: 310px;

    margin-top: 0;
    padding-right: 2px;
    padding-bottom: 10px;

    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* 4 — Chats / Archive / Search */

.sidebar-top > .lifemate-history-tools {
    order: 4;

    flex: 0 0 auto !important;

    margin-top: 8px !important;
    padding-top: 12px !important;

    border-top: 1px solid var(--lm-border) !important;
}

/* 5 — Previous chats */

.sidebar-top > .chat-history {
    order: 5;

    flex: 1 1 auto !important;

    min-height: 80px !important;
    max-height: none !important;

    margin-top: 5px !important;
    padding-bottom: 12px !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Small clean scrollbars */

.sidebar-nav,
.chat-history {
    scrollbar-width: thin;
    scrollbar-color:
        rgba(148, 163, 184, 0.16)
        transparent;
}

.sidebar-nav::-webkit-scrollbar,
.chat-history::-webkit-scrollbar {
    width: 4px;
}

.sidebar-nav::-webkit-scrollbar-thumb,
.chat-history::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.16);
    border-radius: 999px;
}

/* ===== LIFEMATE SIDEBAR FINAL ORDER END ===== */


/* ===== WORKSPACE MORE TOOLS INDICATOR ===== */

.sidebar-nav {
    position: relative;
}

/* subtle indicator that more tools are below */
.sidebar-nav::after {
    content: "⌄";

    position: sticky;
    bottom: 0;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    width: 100%;
    height: 24px;

    margin-top: -8px;

    color: rgba(148, 163, 184, 0.55);

    font-size: 15px;
    line-height: 1;

    background:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(6, 11, 21, 0.88) 62%,
            rgba(6, 11, 21, 1) 100%
        );

    border-bottom:
        1px solid rgba(148, 163, 184, 0.12);

    pointer-events: none;
}

/* ===== END WORKSPACE MORE TOOLS INDICATOR ===== */