/* ==========================================
            FUTUREVERSE AI
              PHASE 1
           FOUNDATION CSS
========================================== */

/* ==========================
        GOOGLE RESET
========================== */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;

    background:#f4f7fc;

    color:#1e293b;

    overflow:hidden;

}

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

.ai-container{

    width:100%;

    height:100vh;

    display:flex;

    flex-direction:column;

    background:#f4f7fc;

}

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



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

.ai-main{

    flex:1;

    display:flex;

    overflow:hidden;

}






/* ==========================================
            PHASE 2
          HEADER DESIGN
========================================== */

/* Left */


.ai-logo{

    width:30px;

    height:30px;

    border-radius:8px;

    background:linear-gradient(135deg,#2563eb,#4f46e5);

    display:flex;

    justify-content:center;

    align-items:center;

    color:#ffffff;

    font-size:16px;

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

}

.header-title h1{

    font-size:16px;

    font-weight:700;

    color:#111827;

    line-height:1.2;

}

.header-title p{

    font-size:10px;

    color:#64748b;

    margin-top:3px;

}


/* Right */




/* Buttons */

.header-btn{

    display:flex;

    align-items:center;

    gap:8px;

    padding:12px 18px;

    border:none;

    border-radius:14px;

    background:#ffffff;

    border:1px solid #e5e7eb;

    color:#374151;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.header-btn:hover{

    background:#2563eb;

    color:#ffffff;

    border-color:#2563eb;

    transform:translateY(-2px);

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

}

.header-btn i{

    font-size:15px;

}







/* ==========================================
            PHASE 3
          LEFT SIDEBAR
========================================== */

.chat-sidebar{

    width:270px;

    background:#ffffff;

    border-right:1px solid #e5e7eb;

    padding:22px;

    overflow-y:auto;

}

/* Scrollbar */

.chat-sidebar::-webkit-scrollbar{

    width:6px;

}

.chat-sidebar::-webkit-scrollbar-thumb{

    background:#d1d5db;

    border-radius:20px;

}

.chat-sidebar::-webkit-scrollbar-thumb:hover{

    background:#94a3b8;

}


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

.chat-search{

    flex:1;
  

    display:flex;

    align-items:center;

    gap:8px;

    background:#f8fafc;

    border:1px solid #e5e7eb;

    border-radius:12px;

    padding:4px 10px;

    margin-top:8px;

    margin-bottom:12px;


}

.chat-search:focus-within{

    border-color:#2563eb;

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

}

.chat-search i{

    font-size:15px;

    color:#64748b;

}

.chat-search input{

    width:100%;

    height:26px;

    border:none;

    outline:none;

    background:transparent;

    font-size:12px;

    font-family:'Poppins',sans-serif;

}


/* ==========================
    SEARCH + MENU ROW
========================== */

.top-search-bar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

    margin-bottom:12px;

}

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

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

.menu-btn{

    width:30px;
    height:30px;

    border:none;
    outline:none;

    background:transparent;

    border-radius:10px;

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

    cursor:pointer;

    color:#111827;

    flex-shrink:0;

    margin-top:0;

    position:relative;

    z-index:1000;

    transition:
        background-color .22s ease,
        color .22s ease,
        box-shadow .22s ease;

}

.menu-btn svg{

    width:22px;
    height:22px;

}

.menu-btn:hover{

    background:#f3f4f6;

    box-shadow:0 4px 12px rgba(0,0,0,.08);

}

.menu-btn::after{

    content: attr(data-tooltip);

    position: absolute;

   left: 10px;
right: 0;
transform: translateY(8px);
    top: 115%;

    transform: translate(-50%,8px);

    background: #111827;
    color: #fff;

    font-size: 10px;
    font-weight: 500;

    padding: 4px 8px;

    border-radius: 6px;

    white-space: nowrap;

    width: max-content;     /* नया */
    max-width: none;        /* नया */

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition: opacity .18s ease,
                transform .18s ease;

    z-index: 9999;
}

.menu-btn:hover::after{

    opacity:1;

    visibility:visible;

    transform:translate(-50%,0);

}


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

.chat-sidebar{
    transition: width .30s ease;
}

.chat-sidebar.collapsed{
    width:78px;
}

.chat-sidebar.collapsed .sidebar-btn span,
.chat-sidebar.collapsed .chat-search,
.chat-sidebar.collapsed .recent-title,
.chat-sidebar.collapsed #chatHistory,
.chat-sidebar.collapsed .sidebar-divider{
    display:none;
}

.chat-sidebar.collapsed .sidebar-btn{
    justify-content:center;
    padding:12px;
}







/* ==========================
        CHAT GROUP
========================== */

.chat-group{

    margin-top:4px;

    margin-bottom:18px;

}

.chat-group h4{

    font-size:13px;

    font-weight:700;

    color:#94a3b8;

    text-transform:uppercase;

    letter-spacing:.8px;

    margin-bottom:15px;

}


/* ==========================
        CHAT ITEM
========================== */

.chat-history-item{

    padding:6px 8px;

    border-radius:15px;

    cursor:pointer;

    transition:.25s;

    margin-bottom:10px;

    display:flex;

    flex-direction:column;

    gap:4px;

}

.chat-history-item span{

    font-size:13px;

    font-weight:600;

    color:#111827;

}

.chat-history-item small{

    font-size:12px;

    color:#94a3b8;

}

.chat-history-item:hover{

    background:#f4f7ff;

    transform:translateX(4px);

}

.chat-history-item.active{

    background:#edf4ff;

    border:1px solid #dbeafe;

}





/* ==========================================
            PHASE 4
        CHAT CONTENT AREA
========================================== */

.chat-content{
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #f8fafc;

    min-width: 0;
    overflow: hidden;
}


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

.chat-header{

    height:78px;

    background:#ffffff;

    border-bottom:1px solid #e5e7eb;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:0 32px;

}

.chat-header h2{

    font-size:24px;

    font-weight:700;

    color:#111827;

}

.chat-header p{

    font-size:14px;

    color:#64748b;

    margin-top:3px;

}


/* ==========================
        CHAT BODY
========================== */

.chat-messages{
    flex: 1;
    overflow-y: auto;

    padding: 24px 40px;

    display: flex;
    flex-direction: column;
    gap: 28px;

    min-height: 0;
}


/* Scrollbar */

.chat-messages::-webkit-scrollbar{

    width:8px;

}

.chat-messages::-webkit-scrollbar-thumb{

    background:#cbd5e1;

    border-radius:20px;

}


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

.message{

    display:flex;

    align-items:flex-start;

    gap:14px;

}


/* AI Avatar */

.message-avatar{

    width:32px;

    height:32px;

    border-radius:15px;

    background:linear-gradient(135deg,#2563eb,#4f46e5);

    display:flex;

    justify-content:center;

    align-items:center;

    color:#ffffff;

    font-size:16px;

    flex-shrink:0;

}


/* Message Body */

.message-body{

    display:flex;

    flex-direction:column;

    gap:6px;

}


/* Bubble */

.message-content{

    max-width:870px;

    background:#ffffff;

    padding:15px 20px;

    border-radius:20px;

    border:1px solid #e5e7eb;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.message-content h4{

    font-size:15px;

    font-weight:700;

    color:#111827;

    margin-bottom:10px;

}

.message-content p{

    font-size:14px;

    color:#374151;

    line-height:1.6;

}


/* Footer */

.message-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.message-footer span{

    font-size:12px;

    color:#94a3b8;

}


/* Action Buttons */

.message-actions{

    display:flex;

    gap:0px;

}

.message-actions button{

    width:28px;

    height:28px;

    border:none;

    border-radius:10px;

    background:#ffffff;

    color:#64748b;

    cursor:pointer;

    transition:.25s;

}




/* ==========================================
            PHASE 5
          CHAT INPUT
========================================== */

.chat-input-container{

   

    background:#ffffff;

    border-top:1px solid #e5e7eb;

    padding:14px 28px;

    flex-shrink: 0;

}

/* Input Box */

.chat-input{

    width:100%;

    min-height: 58px;

    max-width:980px;

    display:flex;

    align-items:center;

    gap:14px;

    background:#ffffff;

    border:1px solid #dbe3ef;

    border-radius:16px;

    padding:12px 16px;

    box-shadow:0 10px 30px rgba(0,0,0,.06);

    transition:.3s;

    position: relative;
overflow: visible;

}

.chat-input:focus-within{

    border-color:#2563eb;

    box-shadow:0 0 0 5px rgba(37,99,235,.12);

}



.chat-input > .attach-btn,
.chat-input > #userInput,
.chat-input > .voice-waveform,
.chat-input > .voice-btn,
.chat-input > .send-btn,
.chat-input > .stop-btn{

    position: relative;

    z-index: 2;

}

.chat-input:focus-within::before{
    animation: none;
    opacity: 0;
}








/* Text Field */

.chat-input input,
.chat-input textarea{

    flex:1;

    width:100%;

    min-width:0;

    border:none;

    outline:none;

    background:transparent;

    font-size:15px;

    font-family:'Poppins',sans-serif;

    color:#111827;

    line-height:1.5;

    resize:none;

    overflow-y:auto;

    max-height:140px;

}

.chat-input input::placeholder,
.chat-input textarea::placeholder{

    color:#94a3b8;

}





.message-content{

    overflow-wrap:anywhere;

    word-break:break-word;

    white-space:normal;

}



.message-content p{

    overflow-wrap:anywhere;

    word-break:break-word;

}






/* Common Buttons */


.voice-btn,
.send-btn{

    width:35px;

    height:35px;

    border:none;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    transition:.3s;

    font-size:15px;

}



/* Voice */

.voice-btn{

    background:#f3f4f6;

    color:#475569;

}

.voice-btn:hover{

    background:#2563eb;

    color:#ffffff;

}

/* Send */

.send-btn{

    background:linear-gradient(135deg,#2563eb,#4f46e5);

    color:#ffffff;

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

}

.send-btn:hover{

    transform:translateY(-2px) scale(1.05);

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

}








/* ==========================================
        PREMIUM TYPING
========================================== */

.typing{

    display:flex;

    gap:8px;

    align-items:center;

}

.typing span{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#2563eb;

    animation:typing .9s infinite;

}

.typing span:nth-child(2){

    animation-delay:.2s;

}

.typing span:nth-child(3){

    animation-delay:.4s;

}

@keyframes typing{

    0%{

        opacity:.3;

        transform:translateY(0);

    }

    50%{

        opacity:1;

        transform:translateY(-6px);

    }

    100%{

        opacity:.3;

        transform:translateY(0);

    }

}









.send-btn{
    background:#e5e7eb;
    color:#9ca3af;
    cursor:not-allowed;
    transition:.25s;
}

.send-btn.active{
    background:#2563eb;
    color:#fff;
    cursor:pointer;
}

























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

#newChatBtn{
    position:relative;
    overflow:hidden;
}

#newChatBtn i{
    transition:.28s;
}

#newChatBtn:hover{

    background:#ececec;

}

#newChatBtn:hover i{

    transform:rotate(-18deg) scale(1.08);

}

#newChatBtn:active{

    transform:scale(.98);

}












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

.sidebar-menu{

    display:flex;
    flex-direction:column;

    gap:1px;

    margin:2px 2px 10px;

}

.sidebar-btn{

    display:flex;
    align-items:center;

    width:100%;

    height:30px;

    padding:0 6px;

    gap:8px;

    border:none;

    border-radius:8px;

    background:transparent;

    cursor:pointer;

    transition:.2s;

    font-size:12px;

    font-weight:500;

    color:#3d3d3d;

}

.sidebar-btn i{

    width:15px;

    font-size:14px;

    text-align:center;

    flex-shrink:0;

}

.sidebar-btn span{

    position:relative;

    top:-2px;

    letter-spacing:.1px;

}

.sidebar-btn:hover{

    background:#f3f3f3;

}

.sidebar-btn.active{

    background:#f5f5f5;

    box-shadow:0 2px 6px rgba(0,0,0,.06);

}









.sidebar-divider{

    border-top:1px solid #e5e7eb;

    margin:5px 0 16px;

    opacity:.9;

}



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

.recent-title{

    font-size:12px;

    font-weight:700;

    color:#4b5563;

    letter-spacing:0;

    margin:-5px 0 12px;

    padding-left:4px;

    opacity:1;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}








.message-actions button{
    position: relative;
}

.message-actions button::after{

    content: attr(data-tooltip);

    position: absolute;

    top: 130%;          /* पहले bottom था */
    left: -30px;            /* center की जगह left */

    transform: translateY(5px);

    background: #202123;
    color: #fff;

    font-size: 10px;
    font-weight: 500;

    padding: 4px 7px;
    border-radius: 5px;

    white-space: nowrap;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    box-shadow: 0 8px 24px rgba(0,0,0,.18);

    transition: .18s ease;

    z-index: 999;
}

.message-actions button:hover::after{

    opacity: 1;
    visibility: visible;

    transform: translateY(0);

}

.message-actions button:hover{
    background: transparent;
    color: inherit;
}









.sidebar-btn svg{
    width:20px;
    height:20px;
    flex-shrink:0;
    stroke-width:1.8;
}
.sidebar-menu svg{
    width:20px;
    height:20px;
    color:#4b5563;
    flex-shrink:0;
}

.sidebar-menu a:hover svg{
    color:#111827;
}









.empty-history{

    font-size:13px;

    color:#94a3b8;

    text-align:center;

    margin-top:18px;

    font-style:italic;

}


#chatHistory{

    display: flex;

    flex-direction: column;

    gap: 2px;

    margin-top: 8px;

}

.history-item{

    display: block;
    width: 100%;

    padding: 6px 12px;   /* पहले 10px था */

    font-size: 12.8px;     /* पहले 14px था */

    font-weight: 500;

    color: #111827;      /* Black */

    border-radius: 8px;

    cursor: pointer;

    transition: .2s;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

.history-item:hover{

    background: #f3f4f6;

}



















.attach-btn{

    width:34px;
    height:34px;

    border:none;
    background:transparent;

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

    border-radius:50%;
    cursor:pointer;

    color:#6b7280;

    transition:.2s;

}

.attach-btn:hover{

    background:#f3f4f6;
    color:#111827;

}






















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

.welcome-message .message-content{

    position:relative;

    max-width:390px;
    min-width:300px;

    padding:12px 16px;

    background:#fff;

    border:1px solid #e5e7eb;

    border-radius:18px;

    box-shadow:0 6px 18px rgba(0,0,0,.05);

}

.welcome-message .message-content::after{

    content:"";

    position:absolute;

    bottom:-11px;

    right:60px;      /* Tail की position */

    width:20px;

    height:20px;

    background:#fff;

    transform:rotate(45deg);

    border-right:1px solid #e5e7eb;

    border-bottom:1px solid #e5e7eb;

}







.sidebar-header{

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

    padding:6px 20px 8px;

    border-bottom:none;
    margin-top: -20px;

}

.sidebar-header .ai-logo{
    width:32px;
    height:32px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.sidebar-header .header-title h1{
    font-size:18px;
    font-weight:700;
    margin:0;
}

/* ==========================
   Sidebar Header Animation
========================== */

.sidebar-header{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    padding:6px 0 8px;

    margin-top:-20px;

    transition:
        opacity .35s ease,
        transform .35s ease,
        max-height .35s ease,
        margin .35s ease,
        padding .35s ease;

    transform-origin:center center;

    max-height:80px;

    overflow:hidden;
}

.chat-sidebar.collapsed .sidebar-header{

    opacity:0;

    transform:
        translateX(-25px)
        scale(.85);

    max-height:0;

    padding-top:0;
    padding-bottom:0;

    margin-bottom:0;

    pointer-events:none;
}

.sidebar-header .ai-logo{

    transition:
        transform .35s ease,
        opacity .35s ease;
}

.chat-sidebar.collapsed .ai-logo{

    transform:rotate(-15deg) scale(.6);

    opacity:0;
}


.header-title{

    transition:
        opacity .3s ease,
        transform .3s ease;
}

.chat-sidebar.collapsed .header-title{

    opacity:0;

    transform:translateX(-15px);
}















.feedback-toast{

    position:fixed;

    bottom:30px;

    left:50%;

    transform:translateX(-50%);

    background:#111;

    color:#fff;

    padding:10px 16px;

    border-radius:25px;

    font-size:14px;

    animation:fadeUp .3s ease;

    z-index:9999;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translate(-50%,20px);

    }

    to{

        opacity:1;

        transform:translate(-50%,0);

    }

}






















/* ================================
       STOP GENERATING BUTTON
================================ */

.stop-btn {
    width: 35px;
    height: 35px;
    border: none;
    border-radius: 50%;
    background: #4f46e5;
    color: #ffffff;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: 0.2s ease;
}

.stop-btn:hover {
    transform: scale(1.05);
}

.stop-btn:active {
    transform: scale(0.95);
}

.stop-btn i {
    pointer-events: none;
}











/* ==========================================
        FUTUREVERSE VOICE WAVEFORM
========================================== */

.voice-waveform {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 3px;

    height: 32px;

    flex: 1;

    width: 100%;

    min-width: 0;

    padding: 0 10px;

    box-sizing: border-box;

    overflow: hidden;

    background: transparent;

}


/* ==========================================
        WAVE BARS
========================================== */

.voice-waveform div {

    width: 2px;

    min-width: 2px;

    height: 5px;

    flex-shrink: 0;

    border-radius: 999px;

    background: currentColor;

    transform-origin: center;

}


/* ==========================================
        WAVE ANIMATION
========================================== */

.voice-waveform.active div {

    animation:
        voiceWave 0.9s ease-in-out infinite;

}


/* ==========================================
        ANIMATION TIMING
========================================== */

.voice-waveform.active div:nth-child(1){
    animation-delay: 0s;
}

.voice-waveform.active div:nth-child(2){
    animation-delay: .08s;
}

.voice-waveform.active div:nth-child(3){
    animation-delay: .16s;
}

.voice-waveform.active div:nth-child(4){
    animation-delay: .24s;
}

.voice-waveform.active div:nth-child(5){
    animation-delay: .32s;
}

.voice-waveform.active div:nth-child(6){
    animation-delay: .40s;
}

.voice-waveform.active div:nth-child(7){
    animation-delay: .48s;
}

.voice-waveform.active div:nth-child(8){
    animation-delay: .56s;
}

.voice-waveform.active div:nth-child(9){
    animation-delay: .64s;
}

.voice-waveform.active div:nth-child(10){
    animation-delay: .72s;
}


/* ==========================================
        WAVE MOVEMENT
========================================== */

@keyframes voiceWave {

    0%,
    100% {

        height: 4px;

    }

    50% {

        height: 15px;

    }

}








/* ==========================================
        RECORDING MODE
========================================== */

.chat-input.recording-mode {

    display: flex;

    align-items: center;

}


/* Text input hide */

.chat-input.recording-mode #userInput {

    display: none;

}


/* Waveform takes only the middle space */

.chat-input.recording-mode .voice-waveform {

    display: flex;

    flex: 1 1 auto;

    min-width: 0;

    height: 24px;

    align-items: center;

    justify-content: center;

    overflow: hidden;

}


/* Keep buttons fixed */

.chat-input.recording-mode .voice-btn,
.chat-input.recording-mode .send-btn {

    flex: 0 0 35px;

}

















/* ==========================================
        CHATGPT STYLE ATTACHMENT POPUP
        DESKTOP / PC
========================================== */

.attach-popup{

    position:absolute;

    left:0;

    bottom:70px;

    width:270px;

    padding:8px;

    background:#ffffff;

    border:1px solid #e5e7eb;

    border-radius:18px;

    box-shadow:
        0 12px 35px rgba(0,0,0,.14);

    display:none;

    flex-direction:column;

    gap:2px;

    z-index:9999;

    box-sizing:border-box;

}


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

.attach-option{

    width:100%;

    min-height:52px;

    display:flex;

    align-items:center;

    gap:14px;

    padding:10px 14px;

    border:none;

    border-radius:12px;

    background:transparent;

    color:#1f2937;

    font-family:inherit;

    font-size:15px;

    font-weight:500;

    text-align:left;

    cursor:pointer;

    transition:
        background .18s ease,
        color .18s ease;

}


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

.attach-option svg{

    width:21px;

    height:21px;

    flex-shrink:0;

    color:#4b5563;

}


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

.attach-option:hover{

    background:#f3f4f6;

}

.attach-option:hover svg{

    color:#111827;

}

/* ==========================================
                DARK MODE
========================================== */

body.dark-mode .attach-popup{

    background:#2f2f2f;

    border-color:#454545;

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

}


body.dark-mode .attach-option{

    color:#f3f4f6;

}


body.dark-mode .attach-option svg{

    color:#d1d5db;

}


body.dark-mode .attach-option:hover{

    background:#404040;

}


body.dark-mode .attach-option:hover svg{

    color:#ffffff;

}





/* ==========================================
        MOBILE CHATGPT STYLE POPUP
========================================== */

@media (max-width: 768px){

    .attach-popup{

        position:absolute;

        left:0;

        bottom:68px;

        width:min(250px, calc(100vw - 32px));

        padding:8px;

        background:#ffffff;

        border:1px solid #e5e7eb;

        border-radius:18px;

        box-shadow:
            0 12px 35px rgba(0,0,0,.16);

        display:none;

        flex-direction:column;

        gap:2px;

        box-sizing:border-box;

        z-index:99999;

    }


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

    .attach-option{

        width:100%;

        min-height:52px;

        padding:10px 14px;

        display:flex;

        align-items:center;

        gap:14px;

        border:none;

        border-radius:12px;

        background:transparent;

        color:#1f2937;

        font-family:inherit;

        font-size:15px;

        font-weight:500;

        text-align:left;

        -webkit-tap-highlight-color:transparent;

    }


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

    .attach-option svg{

        width:21px;

        height:21px;

        flex-shrink:0;

        color:#4b5563;

    }


    /* ==========================
                TAP
    ========================== */

    .attach-option:active{

        background:#f3f4f6;

    }


    /* ==========================
            DARK MODE
    ========================== */

    body.dark-mode .attach-popup{

        background:#2f2f2f;

        border-color:#454545;

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

    }


    body.dark-mode .attach-option{

        color:#f3f4f6;

    }


    body.dark-mode .attach-option svg{

        color:#d1d5db;

    }


    body.dark-mode .attach-option:active{

        background:#404040;

    }

}


































/* ==========================================
        MOBILE CHAT LAYOUT
========================================== */

@media (max-width: 768px) {

    /* पूरे AI page को mobile viewport में lock */

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }


    .ai-container {
        width: 100%;
        height: 100dvh;
        min-height: 100dvh;
        overflow: hidden;
    }


    .ai-main {
        position: relative;
        width: 100%;
        height: 100dvh;
        min-height: 100dvh;
        overflow: hidden;
    }


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

    .chat-content {
        width: 100%;
        height: 100%;
        min-width: 0;
        position: relative;
        overflow: hidden;
    }


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

    .chat-messages {
        width: 100%;
        min-width: 0;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;

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


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

    .chat-sidebar {
        position: fixed;

        top: 0;
        left: 0;

        width: min(82vw, 320px);
        height: 100dvh;

        z-index: 1000;

        transform: translate3d(0, 0, 0);

        transition:
            transform 0.25s cubic-bezier(.4, 0, .2, 1);

        will-change: transform;

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

        -webkit-overflow-scrolling: touch;
    }


    /* Sidebar CLOSED */

    .chat-sidebar.collapsed {
        transform: translate3d(-100%, 0, 0);
    }


    /* =================================
          MENU BUTTON
       Existing button only
    ================================= */

    #menuBtn {
        position: fixed;

        top: 14px;
        left: 14px;

        z-index: 1100;

        width: 42px;
        height: 42px;

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


    /* Search sidebar के अंदर रहेगा */

    .top-search-bar {
        width: 100%;
    }


    /* =================================
          INPUT AREA
    ================================= */

    .chat-input-container {
        width: 100%;
        max-width: 100%;
    }

    .chat-input {
        width: calc(100% - 20px);
        max-width: none;
        margin: 0 10px 10px;
    }

}
















/* ==========================================
        MOBILE CHAT COMPACT UI
========================================== */

@media (max-width: 768px){

    .message{
        max-width: 100%;
        margin-bottom: 14px;
    }

    .ai-message{
        gap: 8px;
        align-items: flex-start;
    }

    .message-avatar{
        width: 38px;
        height: 38px;
        min-width: 38px;
    }

    .message-avatar i{
        font-size: 17px;
    }

    .message-body{
        max-width: calc(100% - 48px);
        min-width: 0;
    }

    .message-content{
        max-width: 100%;
        padding: 14px 16px;
        border-radius: 18px;
    }

    .message-content h4{
        font-size: 17px;
        margin-bottom: 6px;
    }

    .message-content p,
.ai-text{
    font-size: 15px;
    line-height: 1.55;
}

    .message-footer{
        margin-top: 6px;
    }

}


@media (max-width: 768px){

    #userInput{
        flex: 1;
        min-width: 0;
        width: 100%;

        border: none;
        outline: none;

        resize: none;

        white-space: pre-wrap;
        overflow-wrap: anywhere;
        word-break: break-word;

        font-size: 16px;
        line-height: 1.45;

        background: transparent;
    }

    #userInput:focus{
        outline: none;
        box-shadow: none;
    }

}















/* ==========================================
        MOBILE SIDEBAR TOGGLE
========================================== */

.mobile-menu-btn {
    display: none;
}


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

@media (max-width: 768px) {

   .mobile-menu-btn {
    position: fixed;

    top: 14px;
    left: 12px;

    width: 30px;
    height: 30px;

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

    gap: 6px;

    padding: 0;

    border: none;
    border-radius: 12px;

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

    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.08);

    cursor: pointer;

    z-index: 1200;

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

    .mobile-menu-btn:active {
        transform: scale(0.94);
    }


    .mobile-menu-btn span {
        display: block;

        width: 14px;
        height: 2px;

        border-radius: 10px;

        background: #1f2937;

        transition:
            transform 0.2s ease,
            opacity 0.2s ease;
    }


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

    .chat-sidebar {
        position: fixed;

        top: 0;
        left: 0;

        width: min(82vw, 320px);
        height: 100dvh;

        z-index: 1100;

        transform: translate3d(-100%, 0, 0);

        transition:
            transform 0.25s cubic-bezier(.4, 0, .2, 1);

        will-change: transform;

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

        -webkit-overflow-scrolling: touch;
    }


    .chat-sidebar:not(.collapsed) {
        transform: translate3d(0, 0, 0);
    }


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

    .chat-content {
        width: 100%;
        min-width: 0;
    }

}












/* ==========================================
        MOBILE CHAT — COMPACT & SMOOTH
========================================== */

@media (max-width: 768px){

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

    .chat-content{
        width:100%;
        min-width:0;
    }


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

    .chat-messages{

        padding:
            52px
            14px
            105px
            14px;

        gap:22px;

        overflow-y:auto;

        -webkit-overflow-scrolling:touch;

        scroll-behavior:smooth;
    }


    /* ==========================
          MESSAGE ROW
    ========================== */

    .message{

        width:100%;

        gap:9px;

        align-items:flex-start;
    }


    /* ==========================
          AI ICON
    ========================== */

    .message-avatar{

        width:34px;
        height:34px;

        min-width:34px;

        border-radius:13px;

        font-size:15px;

        margin-top:4px;
    }


    /* ==========================
          MESSAGE BODY
    ========================== */

    .message-body{

        min-width:0;

        max-width:calc(100% - 43px);
    }


    /* ==========================
          ALL MESSAGE BOXES
    ========================== */

    .message-content{

        width:auto;

        max-width:100%;

        min-width:0;

        padding:10px 14px;

        border-radius:16px;

        box-shadow:
            0 5px 16px rgba(0,0,0,.045);

        overflow-wrap:anywhere;

        word-break:break-word;
    }


    /* ==========================
          AI TITLE
    ========================== */

    .message-content h4{

        font-size:15px;

        line-height:1.25;

        margin-bottom:6px;
    }


    /* ==========================
          MESSAGE TEXT
    ========================== */

    .message-content p{

        font-size:14px;

        line-height:1.5;

        margin:4px 0;

        overflow-wrap:anywhere;

        word-break:break-word;
    }


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

    .welcome-message .message-content{

        width:auto;

        max-width:calc(100vw - 72px);

        min-width:0;

        padding:10px 14px;

        border-radius:16px;
    }


    /* Welcome text */

    .welcome-message .message-content p{

        font-size:14px;

        line-height:1.5;

        margin:4px 0;
    }


    /* Welcome title */

    .welcome-message .message-content h4{

        font-size:15px;

        margin-bottom:5px;
    }


    /* Welcome tail */

    .welcome-message .message-content::after{

        width:15px;
        height:15px;

        bottom:-8px;

        right:35px;
    }


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

    .message-footer{

        width:100%;

        margin-top:2px;
    }


    .message-footer span{

        font-size:11px;
    }


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

    .message-actions{

        gap:2px;

        align-items:center;
    }


    .message-actions button{

        width:32px;
        height:32px;

        border-radius:10px;

        font-size:14px;
    }


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

    .chat-input-container{

        padding:
            10px
            12px
            calc(10px + env(safe-area-inset-bottom));

    }


    .chat-input{

        min-height:54px;

        max-width:none;

        padding:8px 10px;

        gap:7px;

        border-radius:16px;
    }


    /* ==========================
          TEXTAREA
    ========================== */

    .chat-input textarea{

        font-size:14px;

        line-height:1.45;

        min-height: 40px;

        max-height:180px;

        padding:0;

        margin:0;
    }


    /* ==========================
          INPUT BUTTONS
    ========================== */

    .attach-btn,
    .voice-btn,
    .send-btn,
    .stop-btn{

        width:34px;

        height:34px;

        min-width:34px;

        flex:0 0 34px;
    }


    .attach-btn svg{

        width:19px;
        height:19px;
    }


    .voice-btn,
    .send-btn,
    .stop-btn{

        font-size:14px;
    }

}





















/* ==========================================
   MOBILE CHAT INPUT — CHATGPT STYLE
========================================== */

@media (max-width: 768px) {

    .chat-input-container {
        width: 100%;
        padding: 10px 12px
            calc(10px + env(safe-area-inset-bottom));
        box-sizing: border-box;
    }


    /* Main input box */

    .chat-input {
      width: 100%;
        max-width: none;

        min-height: 56px;

        margin: 0;

        padding: 6px 10px;

        display: flex;
        align-items: flex-end;

        gap: 6px;

        border-radius: 18px;

        box-sizing: border-box;

        overflow: visible;

        position: relative;
    }


    /* Text area */

    .chat-input textarea,
    #userInput {

        flex: 1 1 auto;

        width: 100%;
        min-width: 0;

        min-height: 40px;
        max-height: 180px;

        height: auto;

        margin: 0;

        padding: 7px 0 7px 0;

        border: none;
        outline: none;

        resize: none;

        background: transparent;

        font-size: 16px;
        line-height: 1.45;

        box-sizing: border-box;

        overflow-y: auto;

        align-self: flex-end;
    }


    /* Bottom-fixed buttons */

    .attach-btn,
    .voice-btn,
    .send-btn,
    .stop-btn {

        width: 36px;
        height: 36px;

        min-width: 36px;
        min-height: 36px;

        flex: 0 0 36px;

        align-self: flex-end;

        margin-bottom: 3px;

        display: flex;

        align-items: center;
        justify-content: center;
    }


    /* Keep attachment icon at bottom */

    .attach-btn {
        margin-bottom: 3px;
    }


    /* Voice */

    .voice-btn {
        margin-bottom: 3px;
    }


    /* Send */

    .send-btn {
        margin-bottom: 3px;
    }


    /* Stop */

    .stop-btn {
        margin-bottom: 3px;
    }

}
































/* ==========================================
      FUTUREVERSE AI — MESSAGE BUBBLE FIX
      FINAL UI OVERRIDE
========================================== */

/* Message row */

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


/* Message body */

.message-body {
    min-width: 0;
    max-width: 100%;
}


/* All message bubbles */

.message-content {
    width: fit-content;
    max-width: min(870px, 100%);
    min-width: 0;

    height: auto;

    padding: 12px 16px;

    box-sizing: border-box;

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

    white-space: normal;
}


/* Normal paragraph */

.message-content p {
    margin: 0;

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


/* ==========================================
          USER MESSAGE
========================================== */

.user-message {
    justify-content: flex-end;
}


.user-message .message-body {
    align-items: flex-end;

   max-width: min(60%, 650px);
}

@media (min-width: 769px) {

    .user-message {
        padding-right: 90px;
        box-sizing: border-box;
    }

}

.user-message .message-content {
    width: fit-content;

    max-width: 100%;

    background: #2563eb;

    color: #ffffff;

    border: none;

    border-radius: 18px 18px 4px 18px;

    box-shadow: 0 6px 18px rgba(37,99,235,.12);
}


.user-message .message-content p {
    color: #ffffff;
}


/* User timestamp */

.user-message .message-footer {
    width: 100%;

    justify-content: flex-end;

    margin-top: 3px;
}


.user-message .message-footer span {
    font-size: 11px;

    color: #94a3b8;
}


/* ==========================================
          AI MESSAGE
========================================== */

.ai-message .message-body {
    max-width: min(870px, calc(100% - 46px));
}


.ai-message .message-content {
    width: fit-content;

    max-width: 100%;

    height: auto;
}


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

@media (max-width: 768px) {

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


    .message-body {
        min-width: 0;
        max-width: 100%;
    }


    .message-content {
        width: fit-content;

        max-width: 100%;

        min-width: 0;

        height: auto;

        padding: 10px 14px;

        border-radius: 16px;
    }


    /* User bubble */

    .user-message .message-body {
        max-width: 82%;

        align-items: flex-end;
    }


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

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


    /* AI bubble */

    .ai-message .message-body {
        max-width: calc(100% - 43px);
    }


    /* User timestamp */

    .user-message .message-footer {
        margin-top: 2px;
    }


    .user-message .message-footer span {
        font-size: 10px;
    }

}



/* ==========================================
      DESKTOP SIDEBAR COLLAPSE
      MOBILE — NO CHANGE
========================================== */

@media (min-width: 769px) {

    .chat-sidebar {
        width: 270px;

        flex-shrink: 0;

        transition:
            width .30s ease,
            padding .30s ease;
    }


    /* Sidebar collapsed */

    .chat-sidebar.collapsed {
        width: 78px;

        padding-left: 22px;
        padding-right: 22px;
    }


    /* Chat area automatically expands */

    .chat-content {
        flex: 1;
        min-width: 0;

        transition:
            width .30s ease;
    }

}








/* ==========================================
   MOBILE — MESSAGE ACTION BUTTONS
   EXTRA COMPACT
========================================== */

@media (max-width: 768px) {

    .message-actions {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .message-actions button {
        width: 27px;
        height: 27px;

        min-width: 27px;
        min-height: 27px;

        padding: 0;

        border-radius: 8px;

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

        font-size: 11px;
    }

}






/* ==========================================
   MOBILE — FEEDBACK TOAST
   ONE LINE + PREMIUM ANIMATION
========================================== */

@media (max-width: 768px) {

    .feedback-toast {

        white-space: nowrap;

        width: max-content;
        max-width: calc(100vw - 30px);

        padding: 9px 14px;

        border-radius: 18px;

        font-size: 13px;
        font-weight: 500;

        line-height: 1.2;

        bottom: 78px;

        left: 50%;

        transform: translateX(-50%);

        animation:
            feedbackToastIn .35s cubic-bezier(.22,1,.36,1);

    }

}


/* ==========================================
      FEEDBACK TOAST ANIMATION
========================================== */

@keyframes feedbackToastIn {

    0% {

        opacity: 0;

        transform:
            translate(-50%, 18px)
            scale(.88);

    }

    60% {

        opacity: 1;

        transform:
            translate(-50%, -3px)
            scale(1.03);

    }

    100% {

        opacity: 1;

        transform:
            translate(-50%, 0)
            scale(1);

    }

}




/* ==========================================
      ULTRA THIN SCROLLBAR
========================================== */

.chat-messages::-webkit-scrollbar {
    width: 3px;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: rgba(203, 213, 225, 0.35);
    border-radius: 20px;
}

.chat-messages::-webkit-scrollbar-track {
    background: transparent;
}


/* Mobile — almost invisible */

@media (max-width: 768px) {

    .chat-messages::-webkit-scrollbar {
        width: 2px;
    }

    .chat-messages::-webkit-scrollbar-thumb {
        background: rgba(203, 213, 225, 0.25);
    }

    .chat-messages::-webkit-scrollbar-track {
        background: transparent;
    }

}














/* ==========================================
      FUTUREVERSE AI — MARKDOWN ENGINE
      FINAL CHATGPT STYLE
========================================== */

.message-content .ai-text {

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Noto Sans Devanagari",
        "Noto Sans",
        Arial,
        sans-serif;

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

    color: #1f2937;

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


/* ==========================
        PARAGRAPHS
========================== */

.message-content .ai-text p {

    margin: 0 0 14px;

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

    color: #1f2937;
}

.message-content .ai-text p:last-child {

    margin-bottom: 0;
}


/* ==========================
        HEADINGS
========================== */

.message-content .ai-text h1,
.message-content .ai-text h2,
.message-content .ai-text h3,
.message-content .ai-text h4 {

    color: #111827;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Noto Sans Devanagari",
        "Noto Sans",
        Arial,
        sans-serif;

    font-weight: 700;

    line-height: 1.35;

    margin-top: 22px;
    margin-bottom: 10px;
}


/* First heading should not have huge top gap */

.message-content .ai-text > h1:first-child,
.message-content .ai-text > h2:first-child,
.message-content .ai-text > h3:first-child,
.message-content .ai-text > h4:first-child {

    margin-top: 2px;
}


/* H1 */

.message-content .ai-text h1 {

    font-size: 22px;

    letter-spacing: -0.2px;
}


/* H2 */

.message-content .ai-text h2 {

    font-size: 19px;

    letter-spacing: -0.1px;
}


/* H3 */

.message-content .ai-text h3 {

    font-size: 17px;
}


/* H4 */

.message-content .ai-text h4 {

    font-size: 16px;
}


/* ==========================
        BOLD TEXT
========================== */

.message-content .ai-text strong,
.message-content .ai-text b {

    font-weight: 700;

    color: #111827;
}


/* ==========================
        ITALIC
========================== */

.message-content .ai-text em,
.message-content .ai-text i {

    font-style: italic;
}


/* ==========================
        UNORDERED LIST
========================== */

.message-content .ai-text ul {

    margin: 8px 0 16px;

    padding-left: 24px;
}


/* ==========================
        ORDERED LIST
========================== */

.message-content .ai-text ol {

    margin: 8px 0 16px;

    padding-left: 24px;
}


/* ==========================
        LIST ITEMS
========================== */

.message-content .ai-text li {

    margin: 6px 0;

    padding-left: 3px;

    font-size: 15px;

    line-height: 1.6;

    color: #1f2937;
}


/* Nested lists */

.message-content .ai-text li ul,
.message-content .ai-text li ol {

    margin-top: 5px;
    margin-bottom: 5px;
}


/* ==========================
        INLINE CODE
========================== */

.message-content .ai-text code {

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    font-size: 13px;

    color: #111827;

    background: #f1f5f9;

    padding: 2px 6px;

    border-radius: 6px;

    border: 1px solid #e2e8f0;
}


/* ==========================
        CODE BLOCK
========================== */

.message-content .ai-text pre {

    margin: 16px 0;

    padding: 14px 16px;

    max-width: 100%;

    overflow-x: auto;

    background: #0f172a;

    color: #e2e8f0;

    border-radius: 12px;

    border: 1px solid #1e293b;

    box-sizing: border-box;

    font-size: 13px;

    line-height: 1.6;

    -webkit-overflow-scrolling: touch;
}


/* Code inside code block */

.message-content .ai-text pre code {

    padding: 0;

    border: none;

    background: transparent;

    color: inherit;

    font-size: inherit;

    border-radius: 0;
}


/* ==========================
        BLOCKQUOTE
========================== */

.message-content .ai-text blockquote {

    margin: 14px 0;

    padding: 8px 14px;

    border-left: 3px solid #2563eb;

    background: #f8fafc;

    color: #475569;

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


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

.message-content .ai-text a {

    color: #2563eb;

    text-decoration: none;

    overflow-wrap: anywhere;
}

.message-content .ai-text a:hover {

    text-decoration: underline;
}


/* ==========================
        HORIZONTAL LINE
========================== */

.message-content .ai-text hr {

    margin: 20px 0;

    border: 0;

    border-top: 1px solid #e5e7eb;
}


/* ==========================
        TABLE
========================== */

.message-content .ai-text table {

    width: 100%;

    max-width: 100%;

    margin: 16px 0;

    border-collapse: collapse;

    font-size: 14px;

    overflow-x: auto;

    display: block;
}


.message-content .ai-text th,
.message-content .ai-text td {

    padding: 8px 10px;

    border: 1px solid #e5e7eb;

    text-align: left;

    white-space: nowrap;
}


.message-content .ai-text th {

    font-weight: 700;

    background: #f8fafc;

    color: #111827;
}


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

@media (max-width: 768px) {

    .message-content .ai-text {

        font-size: 15px;

        line-height: 1.6;
    }


    .message-content .ai-text p {

        font-size: 15px;

        line-height: 1.6;

        margin-bottom: 13px;
    }


    .message-content .ai-text h1 {

        font-size: 20px;

        margin-top: 19px;
        margin-bottom: 9px;
    }


    .message-content .ai-text h2 {

        font-size: 18px;

        margin-top: 18px;
        margin-bottom: 8px;
    }


    .message-content .ai-text h3 {

        font-size: 16px;

        margin-top: 16px;
        margin-bottom: 7px;
    }


    .message-content .ai-text h4 {

        font-size: 15px;
    }


    .message-content .ai-text ul,
    .message-content .ai-text ol {

        padding-left: 21px;

        margin-top: 7px;

        margin-bottom: 14px;
    }


    .message-content .ai-text li {

        font-size: 15px;

        margin: 5px 0;

        line-height: 1.55;
    }


    .message-content .ai-text pre {

        padding: 11px 12px;

        margin: 13px 0;

        font-size: 12px;

        border-radius: 10px;
    }


    .message-content .ai-text code {

        font-size: 12px;

        padding: 2px 5px;
    }


    .message-content .ai-text blockquote {

        margin: 12px 0;

        padding: 7px 11px;

        font-size: 14px;
    }


    .message-content .ai-text table {

        font-size: 12px;
    }

}






































/* ==========================================
   FUTUREVERSE AI
   MOBILE KEYBOARD STABLE LAYOUT
========================================== */

@media (max-width: 768px) {

    html,
    body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    .ai-container {
        width: 100%;
        height: 100dvh;
        min-height: 0;
        max-height: 100dvh;
        overflow: hidden;
    }

    .ai-main {
        width: 100%;
        height: 100%;
        min-height: 0;
        flex: 1 1 auto;
        overflow: hidden;
    }

    .chat-content {
        width: 100%;
        height: 100%;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .chat-messages {
        width: 100%;
        flex: 1 1 auto;

        height: auto;
        min-height: 0;

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

        padding:
            52px
            14px
            105px
            14px;

        box-sizing: border-box;

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

    .chat-input-container {
        position: relative;

        width: 100%;
        flex: 0 0 auto;

        box-sizing: border-box;

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

    .chat-input {
        width: 100%;
        max-width: none;
        margin: 0;

        box-sizing: border-box;
    }
}












/* ==========================================
   FUTUREVERSE — FINAL PHOTO PREVIEW
========================================== */

.attachment-preview {
    display: none;

    position: absolute;
    top: 8px;
    left: 10px;
    right: 10px;

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

    padding: 0 4px;

    gap: 8px;

    flex-wrap: nowrap;

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

    box-sizing: border-box;

    scrollbar-width: none;

    z-index: 20;
}

.attachment-preview::-webkit-scrollbar {
    display: none;
}

.attachment-preview.active {
    display: flex;
}


/* ==========================================
   CHAT BOX — HEIGHT ONLY WHEN PHOTOS EXIST
========================================== */

.chat-input:has(.attachment-preview.active) {
    padding-top: 72px;
}


/* ==========================================
   PHOTO
========================================== */

.attachment-item,
.attachment-preview-item {
    position: relative;

    flex: 0 0 58px;

    width: 58px;
    min-width: 58px;
    max-width: 58px;

    height: 58px;

    box-sizing: border-box;
}


.attachment-item img,
.attachment-preview-item img,
.attachment-image img {
    display: block;

    width: 58px;
    height: 58px;

    min-width: 58px;
    max-width: 58px;

    object-fit: cover;

    border-radius: 10px;

    box-sizing: border-box;
}


/* ==========================================
   REMOVE BUTTON
========================================== */

.attachment-remove {
    position: absolute;

    top: -4px;
    right: -4px;

    width: 18px;
    height: 18px;

    padding: 0;

    border: none;
    border-radius: 50%;

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

    background: #343434;
    color: #fff;

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

    z-index: 30;

    cursor: pointer;
}


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

@media (max-width: 768px) {

    .attachment-preview {
        top: 7px;
        left: 8px;
        right: 8px;

        padding: 0 3px;

        gap: 7px;

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

        flex-wrap: nowrap;
    }


    .chat-input:has(.attachment-preview.active) {
        padding-top: 68px;
    }


    .attachment-item,
    .attachment-preview-item {
        flex: 0 0 58px;

        width: 58px;
        min-width: 58px;
        max-width: 58px;

        height: 58px;
    }


    .attachment-item img,
    .attachment-preview-item img,
    .attachment-image img {
        width: 58px;
        height: 58px;

        min-width: 58px;
        max-width: 58px;

        object-fit: cover;

        border-radius: 10px;
    }


    .attachment-remove {
        width: 18px;
        height: 18px;

        top: -4px;
        right: -4px;

        font-size: 11px;
    }
}





/* ==========================================
   FUTUREVERSE — SENT ATTACHMENTS
   CHATGPT STYLE GALLERY
========================================== */

.sent-attachments {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;

    width: 100%;
    max-width: 540px;

    margin: 0 0 8px 0;
    padding: 0;

    box-sizing: border-box;
}

.sent-attachment {
    position: relative;

    width: 100%;
    aspect-ratio: 1 / 1;

    overflow: hidden;
    border-radius: 10px;

    min-width: 0;
    padding: 0;
    margin: 0;

    box-sizing: border-box;
}

.sent-attachment img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 10px;
}


/* ==========================================
   MOBILE — CHATGPT STYLE
========================================== */

@media (max-width: 768px) {

    .sent-attachments {
        grid-template-columns: repeat(2, 1fr);

        gap: 5px;

        width: 100%;
        max-width: 360px;

        margin-bottom: 8px;
    }

    .sent-attachment {
        aspect-ratio: 1 / 1;
        border-radius: 10px;
    }

    .sent-attachment img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
    }

}