/*==================================================
AI LIFE ASSISTANT v3.0
Global Styles
Author: Samuel + OpenAI
==================================================*/

/* ---------- RESET ---------- */

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

/* ---------- ROOT COLORS ---------- */

:root{

    --bg:#0B0F1A;

    --card:#1D232D;

    --card2:#111827;

    --primary:#2563EB;

    --primaryHover:#1D4ED8;

    --success:#22C55E;

    --danger:#EF4444;

    --warning:#F59E0B;

    --text:#FFFFFF;

    --text2:#B5C0D0;

    --border:#2C3445;

    --radius:18px;

    --shadow:0 12px 25px rgba(0,0,0,.30);

}

/* ---------- BODY ---------- */

body{

    background:var(--bg);

    color:var(--text);

    font-family:Arial,Helvetica,sans-serif;

    line-height:1.6;

    padding:20px;

    padding-bottom:110px;

}

/* ---------- LINKS ---------- */

a{

    text-decoration:none;

    color:inherit;

}

/* ---------- CONTAINER ---------- */

.container{

    width:100%;

    max-width:900px;

    margin:auto;

}

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

.header{

    text-align:center;

    margin-bottom:30px;

}

.header h1{

    font-size:34px;

    font-weight:700;

}

.header p{

    color:var(--text2);

    margin-top:8px;

    font-size:17px;

}

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

.card{

    background:var(--card);

    border-radius:var(--radius);

    padding:22px;

    margin-bottom:20px;

    box-shadow:var(--shadow);

}

.card h2{

    margin-bottom:18px;

    font-size:24px;

}

.card h3{

    margin-bottom:12px;

    color:#60A5FA;

}

.card p{

    color:var(--text2);

}




/* ---------- BUTTON ---------- */

button{

    width:100%;

    border:none;

    border-radius:14px;

    padding:15px;

    background:var(--primary);

    color:white;

    font-size:17px;

    font-weight:bold;

    cursor:pointer;

    transition:.30s;

}

button:hover{

    background:var(--primaryHover);

    transform:translateY(-2px);

}

/* ---------- INPUT ---------- */

input,

textarea,

select{

    width:100%;

    padding:15px;

    margin-top:12px;

    margin-bottom:15px;

    border:none;

    border-radius:14px;

    font-size:16px;

    outline:none;

    background:white;

    color:#111827;

}
/*==================================================
TOP BAR
==================================================*/

.top-bar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}

.menu-btn{

    width:60px;

    height:60px;

    border:none;

    border-radius:18px;

    background:var(--card);

    color:white;

    font-size:30px;

    cursor:pointer;

}

/*==================================================
CLOCK
==================================================*/

.clock-section{

    text-align:center;

    margin-bottom:30px;

}

#todayDate{

    color:#60A5FA;

    font-size:18px;

    font-weight:bold;

}

#currentTime{

    font-size:48px;

    font-weight:bold;

    margin-top:8px;

}

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

.welcome{

    text-align:center;

    margin-bottom:35px;

}

.welcome h1{

    font-size:32px;

    margin-bottom:10px;

}

.welcome p{

    color:var(--text2);

    max-width:700px;

    margin:auto;

}

/*==================================================
SUMMARY GRID
==================================================*/

.summary{

    display:grid;

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

    gap:15px;

    margin:25px 0;

}

.summary .card{

    margin:0;

    text-align:center;

}

.summary h2{

    font-size:30px;

    color:#60A5FA;

}

/*==================================================
QUICK ACTIONS
==================================================*/

.grid{

    display:grid;

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

    gap:18px;

}

.box{

    background:var(--card2);

    border-radius:18px;

    padding:25px;

    text-align:center;

    color:white;

    font-size:18px;

    transition:.30s;

}

.box:hover{

    background:var(--primary);

    transform:translateY(-5px);

}

/*==================================================
BOTTOM NAVIGATION
==================================================*/

.navbar{

    position:fixed;

    left:0;

    bottom:0;

    width:100%;

    background:var(--card2);

    display:flex;

    justify-content:space-around;

    align-items:center;

    padding:12px 0;

    z-index:999;

    box-shadow:0 -5px 20px rgba(0,0,0,.35);

}

.navbar a{

    color:white;

    font-size:14px;

    text-align:center;

    transition:.30s;

}

.navbar a:hover{

    color:#60A5FA;

}

/*==================================================
SIDE MENU
==================================================*/

.side-menu{

    position:fixed;

    top:0;

    left:-300px;

    width:280px;

    height:100%;

    background:var(--card2);

    padding:25px;

    transition:.35s;

    z-index:3000;

    overflow-y:auto;

}
.side-menu.open{

    left:0;
}
.menu-btn{

    position:relative;

    z-index:5000;

}

.side-menu{

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

}

.side-menu h2{

    margin-top:40px;

    margin-bottom:25px;

    color:#60A5FA;

}

.menu-overlay{

    position:fixed;

    inset:0;

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

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:2500;

}

.menu-overlay.show{

    opacity:1;

    visibility:visible;

}
.side-menu a{

    display:block;

    padding:15px;

    border-radius:12px;

    margin-bottom:10px;

}

.side-menu a:hover{

    background:var(--primary);

}

.close-btn{

    position:absolute;

    right:20px;

    top:20px;

    font-size:28px;

    cursor:pointer;

}

/*==================================================
BACK BUTTON
==================================================*/

.backBtn{

    width:100%;

    margin-bottom:20px;

    background:var(--primary);

    color:white;

    border:none;

    border-radius:14px;

    padding:14px;

    font-size:17px;

    font-weight:bold;

}
/*==================================================
TASK INPUT
==================================================*/

#taskInput,
#searchTask{

    width:100%;

    height:60px;

    padding:0 20px;

    border:none;

    border-radius:15px;

    font-size:18px;

    background:#FFFFFF;

    color:#111827;

    outline:none;

    margin-bottom:15px;

}

#taskPriority{

    width:100%;

    height:55px;

    margin-bottom:15px;

    border:none;

    border-radius:15px;

    background:#FFFFFF;

    color:#111827;

    font-size:17px;

    padding:0 15px;

}

/*==================================================
TASK LIST
==================================================*/

#taskList{

    list-style:none;

    margin-top:10px;

    padding:0;

}

#taskList li{

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:#111827;

    border-radius:15px;

    padding:16px;

    margin-bottom:12px;

    transition:.25s;

}

#taskList li:hover{

    background:#1F2937;

}

.taskText{

    flex:1;

    cursor:pointer;

    font-size:17px;

    color:white;

}

.taskDone{

    text-decoration:line-through;

    opacity:.65;

}

.taskPriority{

    display:inline-block;

    margin-left:10px;

    padding:4px 10px;

    border-radius:20px;

    font-size:12px;

    font-weight:bold;

}

.priority-high{

    background:#EF4444;

    color:white;

}

.priority-medium{

    background:#F59E0B;

    color:white;

}

.priority-low{

    background:#22C55E;

    color:white;

}

/*==================================================
DELETE BUTTON
==================================================*/

.deleteBtn{

    width:auto;

    padding:8px 12px;

    border:none;

    border-radius:10px;

    background:#EF4444;

    color:white;

    cursor:pointer;

    font-size:16px;

}

.deleteBtn:hover{

    background:#DC2626;

}

/*==================================================
EMPTY TASK MESSAGE
==================================================*/

#emptyTasks{

    display:none;

    text-align:center;

    color:#9CA3AF;

    margin-top:15px;

    font-style:italic;

}

/*==================================================
PROGRESS BAR
==================================================*/

.progress-container{

    width:100%;

    height:18px;

    background:#2C3445;

    border-radius:30px;

    overflow:hidden;

    margin-top:15px;

}

.progress-bar{

    width:0%;

    height:100%;

    background:#22C55E;

    transition:width .5s ease;

}

#taskProgressText{

    margin-top:12px;

    text-align:center;

    color:#B5C0D0;

    font-weight:bold;

}

/*==================================================
SUMMARY BOXES
==================================================*/

.summaryBox{

    display:flex;

    justify-content:space-between;

    margin-top:10px;

}

.summaryItem{

    flex:1;

    text-align:center;

}

.summaryItem h3{

    color:#60A5FA;

    margin-bottom:8px;

}

.summaryItem p{

    font-size:24px;

    font-weight:bold;

}
/*==================================================
AI CARDS
==================================================*/

#dailyBriefing,
#notificationBox,
#nextEvent{

    text-align:left;

    line-height:1.7;

    color:var(--text2);

}

#dailyBriefing h2,
#notificationBox h3,
#nextEvent h3{

    color:#60A5FA;

}

/*==================================================
WEATHER CARD
==================================================*/

#weatherText{

    font-size:18px;

    color:#B5C0D0;

    line-height:1.7;

}

/*==================================================
AI GREETING
==================================================*/

#aiGreeting{

    font-size:26px;

    font-weight:bold;

    margin-bottom:15px;

    color:#60A5FA;

}

#aiRecommendation{

    margin-top:15px;

    font-size:18px;

    line-height:1.8;

    color:#B5C0D0;

}

/*==================================================
NOTES
==================================================*/

.note-card{

    background:#111827;

    border-radius:16px;

    padding:18px;

    margin-bottom:15px;

    text-align:left;

}

.note-card h3{

    margin-bottom:10px;

    color:#60A5FA;

}

.note-card p{

    color:#D1D5DB;

}

/*==================================================
CALENDAR
==================================================*/

.calendar-grid{

    display:grid;

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

    gap:10px;

    margin-top:20px;

}

.day-name{

    text-align:center;

    font-weight:bold;

    color:#60A5FA;

}

.day{

    background:#111827;

    border-radius:12px;

    padding:15px 0;

    text-align:center;

    cursor:pointer;

    transition:.30s;

}

.day:hover{

    background:#2563EB;

    transform:scale(1.05);

}

.today{

    background:#2563EB;

    font-weight:bold;

}

.empty{

    background:transparent;

}

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

.profile-avatar{

    width:120px;

    height:120px;

    margin:20px auto;

    border-radius:50%;

    background:#2563EB;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:60px;

    color:white;

    box-shadow:0 10px 25px rgba(37,99,235,.35);

}

/*==================================================
XP / LEVEL / STREAK
==================================================*/

.stat-card{

    text-align:center;

}

.stat-card h2{

    font-size:34px;

    color:#60A5FA;

}

.stat-card p{

    margin-top:10px;

    color:#9CA3AF;

}

/*==================================================
ACHIEVEMENTS
==================================================*/

#achievementBadge{

    font-size:28px;

    color:#FBBF24;

    margin-bottom:10px;

}

#achievementText{

    color:#B5C0D0;

    line-height:1.7;

}

/*==================================================
PRODUCTIVITY
==================================================*/

#productivityScore{

    font-size:36px;

    color:#22C55E;

}

#progressText{

    margin-top:12px;

    color:#9CA3AF;

}

/*==================================================
LIGHT MODE
==================================================*/

.light-mode{

    background:#F3F4F6;

    color:#111827;

}

.light-mode .card{

    background:white;

    color:#111827;

}

.light-mode .navbar{

    background:white;

}

.light-mode .navbar a{

    color:#111827;

}

.light-mode .box{

    background:#E5E7EB;

    color:#111827;

}

.light-mode .side-menu{

    background:white;

}

.light-mode .day{

    background:#E5E7EB;

    color:#111827;

}

/*==================================================
POPUP
==================================================*/

.level-popup{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100%;

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

    display:flex;

    justify-content:center;

    align-items:center;

    visibility:hidden;

    opacity:0;

    transition:.35s;

    z-index:9999;

}

.level-popup.show{

    visibility:visible;

    opacity:1;

}

.popup-box{

    background:#1D232D;

    padding:35px;

    border-radius:20px;

    width:90%;

    max-width:360px;

    text-align:center;

    animation:popupScale .35s ease;

}

.popup-box h1{

    font-size:34px;

}

.popup-box h2{

    color:#60A5FA;

    margin-top:15px;

}

@keyframes popupScale{

    from{

        transform:scale(.6);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

/*==================================================
FADE ANIMATION
==================================================*/

.fade-in{

    animation:fadeIn .5s ease;

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
CARD HOVER
==================================================*/

.card:hover{

    transform:translateY(-5px);

    box-shadow:0 15px 30px rgba(0,0,0,.35);

}

/*==================================================
BUTTON EFFECT
==================================================*/

button:active{

    transform:scale(.97);

}

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

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#111827;

}

::-webkit-scrollbar-thumb{

    background:#2563EB;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#3B82F6;

}

/*==================================================
LINKS
==================================================*/

a{

    color:inherit;

}

a:hover{

    text-decoration:none;

}

/*==================================================
IMAGES
==================================================*/

img{

    max-width:100%;

    border-radius:15px;

}

/*==================================================
RESPONSIVE TABLET
==================================================*/

@media (max-width:900px){

.summary{

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

}

.grid{

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

}

}

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

@media (max-width:600px){

body{

padding:15px;

padding-bottom:110px;

}

.header h1{

font-size:26px;

}

.card{

padding:18px;

}

.summary{

grid-template-columns:1fr;

}

.grid{

grid-template-columns:1fr;

}

.quick-grid{

grid-template-columns:1fr;

}

.box{

font-size:17px;

}

button{

font-size:16px;

}

#currentTime{

font-size:36px;

}

.profile-avatar{

width:90px;

height:90px;

font-size:45px;

}

}
.notification-item{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    background:#111827;

    padding:18px;

    border-radius:16px;

    margin-bottom:15px;

}

.notification-content{

    flex:1;

}

.notification-content strong{

    font-size:24px;

}

.notification-content p{

    margin:8px 0;

    color:#B5C0D0;

}

.notification-content small{

    color:#9CA3AF;

}

.deleteBtn{

    width:70px;

    height:70px;

    margin-left:20px;

    border:none;

    border-radius:18px;

    background:#EF4444;

    color:white;

    font-size:30px;

    cursor:pointer;

}

.deleteBtn:hover{

    background:#DC2626;

}
#notificationList{

    list-style:none;

    padding:0;

    margin:0;

}

/*=========================
AI Typing Indicator
=========================*/

.typing{

    opacity:.7;

    font-style:italic;

    animation:blink 1s infinite;

}

@keyframes blink{

    0%{
        opacity:.3;
    }

    50%{
        opacity:1;
    }

    100%{
        opacity:.3;
    }

}
/*==============================
Chat Messages
==============================*/
.message{
    max-width:80%;
    padding:15px 18px;
    border-radius:20px;
    margin-bottom:18px;
    animation:fadeIn .25s ease;
    word-break:break-word;
}
.ai{
    background:#1F2937;
    color:white;
    margin-right:auto;
    border-bottom-left-radius:6px;
}
.user{
    background:#2563EB;
    color:white;
    margin-left:auto;
    border-bottom-right-radius:6px;
}
.messageText{
    line-height:1.7;
    font-size:16px;
}
.messageTime{
    margin-top:8px;
    font-size:12px;
    opacity:.65;
    text-align:right;
}

/*==============================
Modern Chat Input
==============================*/

.chatInputBar{

    display:flex;

    align-items:center;

    gap:10px;

    background:#111827;

    padding:12px;

    border-radius:22px;

    margin:20px;

}

.chatInputBar input{

    flex:1;

    border:none;

    background:transparent;

    color:white;

    font-size:17px;

    outline:none;

    padding:10px;

}

.chatInputBar input::placeholder{

    color:#9CA3AF;

}

.attachBtn,
.voiceBtn,
.sendBtn{

    width:46px;

    height:46px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    font-size:20px;

    display:flex;

    align-items:center;

    justify-content:center;

}

.attachBtn{

    background:#1F2937;

}

.voiceBtn{

    background:#1F2937;

}

.sendBtn{

    background:#2563EB;

}
/* ==========================================
   AI MESSAGE FORMATTING
========================================== */

.ai-table-wrapper {
    width: 100%;
    overflow-x: auto;
    margin: 12px 0;
}

.ai-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.ai-table th,
.ai-table td {
    padding: 10px;
    text-align: left;
    border: 1px solid rgba(255,255,255,0.15);
}

.ai-table th {
    font-weight: 700;
}

.ai-table ul {
    padding-left: 20px;
    margin: 10px 0;
}

.ai-table li {
    margin-bottom: 6px;
}

.ai-table h1,
.ai-table h2,
.ai-table h3 {
    margin-top: 15px;
    margin-bottom: 8px;
}
.message.ai ul,
.ai-message ul {
    padding-left: 20px;
    margin: 10px 0;
}

.message.ai li,
.ai-message li {
    margin-bottom: 6px;
}

.message.ai h1,
.message.ai h2,
.message.ai h3,
.ai-message h1,
.ai-message h2,
.ai-message h3 {
    margin-top: 14px;
    margin-bottom: 8px;
}
/* =====================================================
   AI RESPONSE FORMATTING
===================================================== */

.aiParagraph {
    line-height: 1.6;
    margin-bottom: 10px;
}


.aiHeading {
    font-weight: 700;
    font-size: 16px;
    margin-top: 12px;
    margin-bottom: 8px;
}


.aiList {
    padding-left: 22px;
    margin: 8px 0 12px;
}


.aiList li {
    margin-bottom: 6px;
    line-height: 1.5;
}


/* TABLE CONTAINER */

.aiTableWrapper {
    width: 100%;
    overflow-x: auto;
    margin: 12px 0;
    border-radius: 10px;
}


/* TABLE */

.aiTable {
    width: 100%;
    border-collapse: collapse;
    min-width: 400px;
}


.aiTable th,
.aiTable td {
    padding: 10px;
    text-align: left;
    vertical-align: top;
}


.aiTable th {
    font-weight: 700;
}
/* ==========================================
   AI RESPONSE TABLES
========================================== */

.aiTableWrapper {
    width: 100%;
    overflow-x: auto;
    margin: 18px 0;
}

.aiTable {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    border-spacing: 0;
}

.aiTable th,
.aiTable td {
    padding: 12px 14px;
    text-align: left;
    vertical-align: top;
    word-break: normal;
    overflow-wrap: break-word;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

.aiTable th {
    font-weight: 700;
    white-space: nowrap;
}

.aiTable td:first-child,
.aiTable th:first-child {
    min-width: 120px;
}

.aiTable td:last-child,
.aiTable th:last-child {
    min-width: 260px;
}
/*==============================
Attachment Menu
==============================*/

.attachmentMenu{

    display:none;

    flex-direction:column;

    gap:12px;

    background:#1F2937;

    margin:0 20px 20px;

    padding:18px;

    border-radius:18px;

}

.attachmentMenu.show{

    display:flex;

}

.attachmentMenu button{

    width:100%;

    background:#111827;

    border:none;

    color:white;

    padding:15px;

    border-radius:14px;

    font-size:17px;

}
.chatImage{

    max-width:220px;

    border-radius:16px;

    display:block;

}

.message img{

    margin-bottom:10px;

}
/*==============================
Chat Files
==============================*/

.chatFile{

    display:flex;

    align-items:center;

    gap:15px;

    background:#111827;

    padding:14px;

    border-radius:14px;

}

.fileIcon{

    font-size:34px;

}

.fileInfo{

    flex:1;

}

.fileName{

    font-weight:bold;

    color:white;

    word-break:break-word;

}

.fileSize{

    color:#9CA3AF;

    font-size:14px;

    margin-top:4px;

}
.chatComposer{

    position:sticky;

    bottom:15px;

    display:flex;

    align-items:center;

    gap:12px;

    background:#161B22;

    border:1px solid #2C3445;

    border-radius:40px;

    padding:10px 14px;

}

.chatComposer input{

    flex:1;

    background:transparent;

    border:none;

    color:white;

    font-size:18px;

    outline:none;

}

.chatComposer input::placeholder{

    color:#7E8A9A;

}

.composerIcon{

    width:48px;

    height:48px;

    border-radius:50%;

    border:none;

    background:#232B36;

    color:white;

    font-size:24px;

    cursor:pointer;

}

.sendButton{

    width:54px;

    height:54px;

    border:none;

    border-radius:50%;

    background:#2563EB;

    color:white;

    font-size:24px;

    cursor:pointer;

}
#userInput{
    min-height:48px;
    max-height:140px;
    resize:none;
    overflow-y:auto;
}
.message{

    animation:messagePop .25s ease;

}

@keyframes messagePop{

    from{

        opacity:0;
        transform:translateY(10px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}
/*=========================================
ChatGPT Typing Animation
=========================================*/

.typingBubble{

    display:flex;

    align-items:center;

    gap:6px;

    padding:6px 4px;

}

.typingBubble span{

    width:8px;

    height:8px;

    background:#9CA3AF;

    border-radius:50%;

    animation:typingBounce 1s infinite;

}

.typingBubble span:nth-child(2){

    animation-delay:.2s;

}

.typingBubble span:nth-child(3){

    animation-delay:.4s;

}

@keyframes typingBounce{

    0%,80%,100%{

        transform:translateY(0);

        opacity:.4;

    }

    40%{

        transform:translateY(-6px);

        opacity:1;

    }

}
.message{
    animation: messageAppear .25s ease;
}

@keyframes messageAppear{

    from{
        opacity:0;
        transform:translateY(12px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}
/* ==========================================
   CHAT COMPOSER FIX
   ========================================== */

.chatComposer {
    position: fixed;
    left: 15px;
    right: 15px;
    bottom: 75px;

    z-index: 5000;

    display: flex;
    align-items: center;
    gap: 10px;

    background: #161B22;
    border: 1px solid #2C3445;
    border-radius: 40px;

    padding: 8px 10px;

    box-shadow: 0 8px 25px rgba(0,0,0,.35);
}

.chatComposer textarea {
    flex: 1;

    width: auto;
    margin: 0;

    min-height: 48px;
    max-height: 140px;

    padding: 12px;

    border: none;
    outline: none;

    resize: none;

    background: transparent;
    color: white;

    font-size: 16px;
}

.chatComposer textarea::placeholder {
    color: #7E8A9A;
}

.composerIcon {
    flex: 0 0 48px;

    width: 48px;
    height: 48px;

    padding: 0;
    margin: 0;

    border: none;
    border-radius: 50%;

    background: #232B36;
    color: white;

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

    cursor: pointer;

    position: relative;
    z-index: 5001;
}

.sendButton {
    flex: 0 0 54px;

    width: 54px;
    height: 54px;

    padding: 0;
    margin: 0;

    border: none;
    border-radius: 50%;

    background: #2563EB;
    color: white;

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

    cursor: pointer;

    position: relative;
    z-index: 5002;

    pointer-events: auto;
    touch-action: manipulation;
}

.sendButton:hover {
    background: #1D4ED8;
}

.sendButton:active {
    transform: scale(.94);
}

.sendButton:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* Keep chat above the page content */
.chatPage {
    padding-bottom: 160px;
}

/* Bottom navigation stays below composer */
.navbar {
    z-index: 4000;
}
/* ==========================================
   ATTACHMENT MENU FIX
========================================== */

.attachmentMenu {
    position: fixed !important;

    bottom: 95px !important;

    left: 20px !important;

    z-index: 9999 !important;

    display: none;

    flex-direction: column;

    gap: 10px;

    padding: 12px;

    border-radius: 16px;
}


.attachmentMenu.show {
    display: flex !important;
}


.attachmentMenu.attachmentMenu {
    position: fixed;
    bottom: 100px;
    left: 20px;
    z-index: 9999;
}
    
/* Hide bottom navigation on chat page */

.chatPage ~ .navbar {
    display: none !important;
}
/* ==========================================
   ATTACHMENT PREVIEW
========================================== */

.attachmentPreview {
    position: fixed;

    left: 20px;
    right: 20px;

    bottom: 100px;

    display: none;

    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 10px 14px;

    background: #1d232d;

    border: 1px solid #303a4a;

    border-radius: 14px;

    z-index: 9000;

    box-sizing: border-box;
}


.attachmentPreview.show {
    display: flex;
}


.attachmentPreviewContent {
    display: flex;

    align-items: center;

    gap: 12px;

    flex: 1;

    min-width: 0;
}


.attachmentPreviewContent img {
    width: 55px;

    height: 55px;

    object-fit: cover;

    border-radius: 10px;
}


.attachmentPreviewText {
    display: flex;

    flex-direction: column;

    gap: 4px;

    overflow: hidden;
}


.attachmentPreviewName {
    font-size: 14px;

    color: white;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.attachmentPreviewType {
    font-size: 12px;

    color: #9ca3af;
}


.removeAttachmentBtn {
    width: 38px;

    height: 38px;

    border: none;

    border-radius: 50%;

    background: #2b3442;

    color: white;

    font-size: 18px;

    cursor: pointer;

    flex-shrink: 0;
}
/* ==========================================
   CHAT ATTACHMENTS
========================================== */

.chatAttachmentImage {
    display: block;

    width: 100%;

    max-width: 260px;

    max-height: 300px;

    object-fit: cover;

    border-radius: 12px;

    margin-bottom: 8px;
}


.chatAttachmentName {
    font-size: 14px;

    color: inherit;

    word-break: break-word;
}


.chatFileAttachment {
    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 220px;

    padding: 12px;

    border-radius: 12px;

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


.chatFileIcon {
    font-size: 32px;

    flex-shrink: 0;
}


.chatFileInfo {
    min-width: 0;

    flex: 1;
}


.chatAttachmentType {
    margin-top: 4px;

    font-size: 12px;

    opacity: 0.7;

    word-break: break-word;
}
/* ==========================================
   ATTACHMENT PREVIEW
========================================== */

.attachmentPreview {
    display: none;
    align-items: center;
    gap: 10px;

    position: fixed;

    left: 12px;
    right: 12px;
    bottom: 70px;

    padding: 10px;

    z-index: 1000;

    border-radius: 14px;

    background: #1a1a1a;
}


.attachmentPreview.show {
    display: flex !important;
}


.attachmentPreviewContent {
    display: flex;
    align-items: center;
    gap: 10px;

    flex: 1;

    min-width: 0;
}


.attachmentPreviewContent img {
    width: 70px;
    height: 70px;

    object-fit: cover;

    border-radius: 10px;

    display: block;
}


.attachmentPreviewText {
    flex: 1;

    min-width: 0;
}


.attachmentPreviewName {
    font-size: 14px;

    word-break: break-word;
}


.attachmentPreviewType {
    font-size: 12px;

    opacity: 0.7;

    margin-top: 4px;
}


.removeAttachmentBtn {
    flex-shrink: 0;
}

/* ==========================================
   AI MARKDOWN MESSAGE FORMATTING
========================================== */

.message.ai .messageText h1,
.message.ai .messageText h2,
.message.ai .messageText h3 {
    margin-top: 14px;
    margin-bottom: 8px;
    line-height: 1.3;
}

.message.ai .messageText h1 {
    font-size: 22px;
}

.message.ai .messageText h2 {
    font-size: 19px;
}

.message.ai .messageText h3 {
    font-size: 16px;
}

.message.ai .messageText p {
    margin: 8px 0;
}

.message.ai .messageText ul,
.message.ai .messageText ol {
    margin: 8px 0;
    padding-left: 22px;
}

.message.ai .messageText li {
    margin: 6px 0;
    line-height: 1.5;
}

.message.ai .messageText strong {
    font-weight: 700;
}

.message.ai .messageText em {
    font-style: italic;
}


/* ==========================================
   SIMPLE TABLE DISPLAY
========================================== */

.markdownTable {
    margin: 12px 0;
    border-radius: 10px;
    overflow: hidden;
}

.markdownTableHeader {
    font-weight: bold;
    padding: 8px;
}

.markdownTableRow {
    padding: 8px;
    border-top: 1px solid rgba(255,255,255,0.1);
}
/* ==========================================
   AI MESSAGE FORMATTING
========================================== */

.message.ai .messageText {
    line-height: 1.6;
}


/* HEADINGS */

.aiHeading {
    font-size: 16px;
    font-weight: 700;
    margin-top: 14px;
    margin-bottom: 7px;
}

.aiHeading:first-child {
    margin-top: 0;
}


/* PARAGRAPHS */

.aiParagraph {
    margin-bottom: 10px;
}

.aiParagraph:last-child {
    margin-bottom: 0;
}


/* LISTS */

.aiList {
    margin: 8px 0 12px 0;
    padding-left: 22px;
}

.aiList li {
    margin-bottom: 6px;
    padding-left: 2px;
}
/* =====================================================
   PHASE 9A — MESSAGE ACTIONS
===================================================== */

.messageActions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    padding-top: 2px;
}

.messageActionButton {
    border: none;
    background: transparent;
    color: #9CA3AF;
    font-size: 12px;
    padding: 5px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.1s ease;
}

.messageActionButton:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #FFFFFF;
}

.messageActionButton:active {
    transform: scale(0.97);
}

.messageActionButton:disabled {
    opacity: 0.6;
    cursor: default;
}
/* =====================================================
   PHASE 9B — SIDE MENU
===================================================== */

.chatHeader {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
}


/* =====================================================
   MENU BUTTON
===================================================== */

.menuButton {

    width: 42px;
    height: 42px;

    border: none;
    border-radius: 10px;

    background: #1D232D;
    color: #FFFFFF;

    font-size: 22px;

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

    cursor: pointer;

    flex-shrink: 0;

    transition:
        background 0.2s ease,
        transform 0.15s ease;
}

.menuButton:hover {
    background: #2A313D;
}

.menuButton:active {
    transform: scale(0.95);
}


/* =====================================================
   SIDE MENU OVERLAY
===================================================== */

.sideMenuOverlay {

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, 0.55);

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;

    z-index: 9998;
}


/* =====================================================
   SIDE MENU
===================================================== */

.sideMenu {

    position: fixed;

    top: 0;
    left: 0;

    width: min(86vw, 340px);
    height: 100vh;

    background: #111827;

    border-right: 1px solid rgba(255, 255, 255, 0.08);

    display: flex;
    flex-direction: column;

    transform: translateX(-100%);

    transition:
        transform 0.25s ease;

    z-index: 9999;

    box-shadow:
        8px 0 30px rgba(0, 0, 0, 0.35);

    overflow: hidden;
}


/* =====================================================
   OPEN STATE
===================================================== */

.sideMenu.open {

    transform: translateX(0);

}

.sideMenuOverlay.open {

    opacity: 1;

    visibility: visible;

}


/* =====================================================
   SIDE MENU HEADER
===================================================== */

.sideMenuHeader {

    min-height: 70px;

    padding: 14px 16px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.08);
}


.sideMenuTitle {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #FFFFFF;

    font-size: 15px;
}


.sideMenuTitle span {

    font-size: 24px;

}


.sideMenuTitle strong {

    font-weight: 600;

}


.closeMenuButton {

    width: 38px;
    height: 38px;

    border: none;

    border-radius: 9px;

    background: transparent;

    color: #9CA3AF;

    font-size: 18px;

    cursor: pointer;

}


.closeMenuButton:hover {

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

    color: #FFFFFF;

}


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

.newChatButton {

    margin: 16px;

    min-height: 48px;

    border: 1px solid rgba(212, 175, 55, 0.45);

    border-radius: 10px;

    background: rgba(212, 175, 55, 0.10);

    color: #FFFFFF;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.15s ease;
}


.newChatButton:hover {

    background: rgba(212, 175, 55, 0.18);

}


.newChatButton:active {

    transform: scale(0.98);

}


.newChatButton span:first-child {

    font-size: 21px;

}


/* =====================================================
   SEARCH
===================================================== */

.conversationSearch {

    margin:
        0 16px 16px;

    height: 44px;

    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        0 12px;

    background: #0B0F1A;

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

    border-radius: 9px;

}


.conversationSearch > span {

    font-size: 14px;

    opacity: 0.75;

}


.conversationSearch input {

    flex: 1;

    min-width: 0;

    border: none;

    outline: none;

    background: transparent;

    color: #FFFFFF;

    font-size: 14px;

}


.conversationSearch input::placeholder {

    color: #6B7280;

}


/* =====================================================
   CONVERSATION SECTION
===================================================== */

.conversationSection {

    flex: 1;

    min-height: 0;

    display: flex;

    flex-direction: column;

}


.conversationSectionTitle {

    padding:
        0 16px 10px;

    color: #9CA3AF;

    font-size: 12px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}


.conversationList {

    flex: 1;

    overflow-y: auto;

    padding:
        0 10px 20px;
}


/* =====================================================
   EMPTY STATE
===================================================== */

.emptyConversations {

    padding:
        30px 15px;

    text-align: center;

    color: #6B7280;

    font-size: 13px;

    line-height: 1.5;

}


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

.sideMenuFooter {

    padding: 12px 16px;

    border-top:
        1px solid rgba(255, 255, 255, 0.08);
}


.sideMenuFooterButton {

    width: 100%;

    min-height: 42px;

    border: none;

    border-radius: 8px;

    background: transparent;

    color: #9CA3AF;

    text-align: left;

    padding:
        0 10px;

    font-size: 13px;

    cursor: pointer;

}


.sideMenuFooterButton:hover {

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

    color: #FFFFFF;

}


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

@media (max-width: 600px) {

    .sideMenu {

        width: 88vw;

    }

}
/* =====================================================
   CONVERSATION ITEMS
===================================================== */

.conversationItem {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
    border-radius: 9px;
}

.conversationItem:hover {
    background: rgba(255, 255, 255, 0.05);
}

.conversationOpenButton {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    color: #E5E7EB;
    display: flex;
    align-items: center;
    gap: 9px;
    text-align: left;
    padding: 11px 8px;
    border-radius: 9px;
    cursor: pointer;
}

.conversationOpenButton:hover {
    color: #FFFFFF;
}

.conversationIcon {
    flex-shrink: 0;
    font-size: 15px;
}

.conversationTitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.conversationDeleteButton {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: #6B7280;
    border-radius: 7px;
    font-size: 18px;
    cursor: pointer;
}

.conversationDeleteButton:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
}

/* =====================================================
   CONVERSATION GROUPS
===================================================== */

.conversationGroup {
    margin-bottom: 18px;
}

.conversationGroupTitle {
    padding: 8px 10px 6px;
    color: #9CA3AF;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}


/* =====================================================
   ACTIVE CONVERSATION
===================================================== */

.conversationItem.active {
    background: rgba(255, 255, 255, 0.08);
}

.conversationItem.active
.conversationOpenButton {
    color: #FFFFFF;
}
/* =====================================================
   CONVERSATION OPTIONS MENU
===================================================== */

.conversationItem {
    position: relative;
}


.conversationOptionsMenu {
    position: absolute;
    right: 42px;
    top: 38px;

    width: 150px;

    background: #1D232D;

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

    border-radius: 10px;

    padding: 5px;

    z-index: 10050;

    box-shadow:
        0 12px 30px
        rgba(0, 0, 0, 0.45);
}


.conversationOptionButton {
    width: 100%;

    display: flex;

    align-items: center;

    gap: 9px;

    border: none;

    background: transparent;

    color: #E5E7EB;

    padding: 11px;

    border-radius: 7px;

    font-size: 13px;

    text-align: left;

    cursor: pointer;
}


.conversationOptionButton:hover {
    background:
        rgba(
            255,
            255,
            255,
            0.08
        );
}


.conversationOptionButton:active {
    background:
        rgba(
            255,
            255,
            255,
            0.12
        );
}


.conversationOptionButton.deleteOption {
    color: #FCA5A5;
}


.conversationOptionButton.deleteOption:hover {
    background:
        rgba(
            239,
            68,
            68,
            0.12
        );
}
/* =====================================================
   CONVERSATION IMAGE INDICATOR
===================================================== */

.conversationTitleWrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
}


.conversationTitle {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.conversationImageBadge {
    flex-shrink: 0;

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

    padding: 4px 6px;

    border-radius: 6px;

    background: rgba(212, 175, 55, 0.14);

    border: 1px solid rgba(212, 175, 55, 0.28);

    color: #D4AF37;

    font-weight: 600;

    letter-spacing: 0.2px;
}


.conversationIcon {
    flex-shrink: 0;

    width: 24px;
    min-width: 24px;

    text-align: center;

    font-size: 16px;
}
/* =====================================================
   PINNED CONVERSATION
===================================================== */

.pinConversationButton {
    color: #D4AF37;
}

.pinConversationButton:hover {
    background: rgba(212, 175, 55, 0.12);
}
/* =====================================================
   PINNED CONVERSATIONS
===================================================== */

.conversationGroupTitle {
    font-weight: 700;
    letter-spacing: 0.5px;
}

.conversationGroup:first-child
.conversationGroupTitle {
    color: #D4AF37;
}
/*==================================================
THE END
==================================================*/