/* =========================================================
   Advanced Seamless Chat UI & Floating Search
   ========================================================= */

/* Main Container: No borders, full width */
.ssd-telegram-app-container {
    position: relative;
    width: 100%;
    height: calc(100vh - 120px);
    min-height: 500px;
    background: transparent;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #f8fafc;
    display: flex;
}

/* App Panes (List View and Thread View) */
.ssd-app-pane {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: transparent; 
    display: flex; flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Initial States */
#pane-chat-list { transform: translateX(0); z-index: 1; }
#pane-chat-thread {
    transform: translateX(100%); z-index: 2;
    background-image: url('data:image/svg+xml,%3Csvg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%231e293b" fill-opacity="0.3" fill-rule="evenodd"%3E%3Ccircle cx="3" cy="3" r="3"/%3E%3Ccircle cx="13" cy="13" r="3"/%3E%3C/g%3E%3C/svg%3E');
}

/* Active Chat State (Slide Animation) */
.ssd-telegram-app-container.chat-active #pane-chat-list { transform: translateX(-100%); }
.ssd-telegram-app-container.chat-active #pane-chat-thread { transform: translateX(0); }

/* Header */
.ssd-app-header {
    height: 70px; background: transparent; display: flex; align-items: center;
    padding: 0 10px; gap: 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
    position: relative; /* අනිවාර්යයි */
    z-index: 9999;      /* අනිවාර්යයි */
}

/* 🌟 ADVANCED: Search Wrapper ensuring Dropdown always floats on top */
.ssd-advanced-search-wrapper {
    position: relative;
    flex: 1;
    width: 100%;
}

.ssd-search-bar {
    position: relative;
    background: rgba(30, 41, 59, 0.9); 
    border-radius: 12px;
    display: flex; align-items: center; padding: 0 15px; height: 45px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 10;
}

.ssd-search-bar i { color: #64748b; font-size: 16px; }

#ssd-global-search {
    border: none; background: transparent; padding: 0 12px;
    width: 100%; height: 100%; color: #f8fafc; outline: none; font-size: 15px;
}
#ssd-global-search::placeholder { color: #94a3b8; }

/* 🌟 ADVANCED: Floating Dropdown Menu (Guaranteed to show on top) */
.ssd-floating-dropdown {
    position: absolute;
    top: 100%; 
    margin-top: 10px; /* Search bar එකට 10px පහළින් */
    left: 0;
    right: 0;
    width: 100%;
    background: #1e293b; /* පැහැදිලි තද නිල් පැහැයක් */
    border: 1px solid #334155;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.9);
    max-height: 400px;
    overflow-y: auto;
    display: none; /* JS වලින් පෙන්වයි */
    flex-direction: column;
    z-index: 999999 !important; /* වෙනත් කිසිම දේකට යට නොවේ */
}
.ssd-floating-dropdown::-webkit-scrollbar { width: 6px; }
.ssd-floating-dropdown::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }
.ssd-floating-dropdown .chat-list-item {
    border-bottom: 1px solid rgba(255,255,255,0.05);
    margin: 0; border-radius: 0; padding: 12px 15px; background: transparent;
}
.ssd-floating-dropdown .chat-list-item:hover { background: rgba(56, 189, 248, 0.1); }
.ssd-floating-dropdown .chat-list-item:last-child { border-bottom: none; }
.ssd-floating-dropdown .chat-list-avatar { width: 42px; height: 42px; }

/* Buttons */
.ssd-new-chat-btn, .header-action-btn, .ssd-back-btn, .chat-action-btn { background: transparent; border: none; color: #38bdf8; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
.ssd-new-chat-btn { background: #38bdf8; color: #0f172a; width: 45px; height: 45px; border-radius: 12px; flex-shrink: 0; }
.ssd-new-chat-btn:hover { background: #0ea5e9; transform: scale(1.05); }

/* Filters */
.ssd-chat-filters { display: flex; padding: 15px 10px; gap: 12px; background: transparent; position: relative; z-index: 5; }
.chat-filter-btn { background: rgba(30, 41, 59, 0.6); color: #94a3b8; border: 1px solid rgba(255, 255, 255, 0.05); padding: 8px 18px; border-radius: 20px; cursor: pointer; font-size: 14px; font-weight: 600; transition: 0.2s; }
.chat-filter-btn:hover { background: rgba(30, 41, 59, 0.9); color: #f8fafc; }
.chat-filter-btn.active { background: #0ea5e9; color: white; border-color: #0ea5e9; }

/* Scrollable Lists (Behind dropdown) */
.ssd-list-scrollable { flex: 1; overflow-y: auto; padding: 0 10px; position: relative; z-index: 1; }
.ssd-list-scrollable::-webkit-scrollbar { width: 6px; }
.ssd-list-scrollable::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 10px; }
.chat-list-item { display: flex; padding: 15px; cursor: pointer; border-bottom: 1px solid rgba(255, 255, 255, 0.03); border-radius: 12px; margin-bottom: 5px; transition: background 0.2s; }
.chat-list-item:hover { background: rgba(255, 255, 255, 0.05); }
.chat-list-item.active { background: rgba(56, 189, 248, 0.1); border-color: rgba(56, 189, 248, 0.3); }
.chat-list-avatar { width: 55px; height: 55px; border-radius: 50%; margin-right: 15px; object-fit: cover; background: #1e293b; }
.chat-list-info { flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.chat-list-name { font-weight: 600; font-size: 16px; margin: 0 0 5px 0; color: #f8fafc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-list-preview { font-size: 14px; color: #94a3b8; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Chat Thread Area */
.chat-header-info { display: flex; align-items: center; flex: 1; cursor: pointer; }
#chat-header-img { width: 45px; height: 45px; border-radius: 50%; margin-right: 15px; object-fit: cover; }
#chat-header-name { margin: 0; font-size: 17px; font-weight: 600; color: #f8fafc; }
.chat-status-text { font-size: 13px; color: #38bdf8; display: block; margin-top: 2px; }
#ssd-back-to-list { margin-right: 10px; display: flex !important; }

/* Messages Area */
.ssd-chat-messages-area { flex: 1; padding: 20px 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 15px; }
.ssd-chat-messages-area::-webkit-scrollbar { width: 6px; }
.ssd-chat-messages-area::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 10px; }

.chat-message { max-width: 85%; display: flex; flex-direction: column; }
.chat-message.sent { align-self: flex-end; }
.chat-message.received { align-self: flex-start; }
.msg-content-wrapper { padding: 12px 16px; border-radius: 18px; font-size: 15px; line-height: 1.5; position: relative; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.chat-message.sent .msg-content-wrapper { background: #2b5278; color: #e2e8f0; border-bottom-right-radius: 4px; }
.chat-message.received .msg-content-wrapper { background: rgba(30, 41, 59, 0.8); color: #e2e8f0; border-bottom-left-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.05); }
.msg-meta { font-size: 11px; color: #64748b; margin-top: 5px; display: flex; justify-content: flex-end; align-items: center; gap: 5px; }
.chat-message.sent .msg-meta { color: #38bdf8; }

/* Footer Input */
.ssd-chat-footer { background: transparent; padding: 15px 10px; display: flex; align-items: center; gap: 12px; border-top: 1px solid rgba(255, 255, 255, 0.05); }
#ssd-chat-input { flex: 1; background: rgba(30, 41, 59, 0.6); border: 1px solid rgba(255, 255, 255, 0.05); padding: 14px 20px; border-radius: 24px; color: #f8fafc; outline: none; font-size: 15px; transition: 0.2s; }
#ssd-chat-input:focus { background: rgba(30, 41, 59, 0.9); }
#ssd-chat-input::placeholder { color: #64748b; }
.chat-action-btn { width: 45px; height: 45px; border-radius: 50%; color: #94a3b8; background: rgba(30, 41, 59, 0.4); }
.chat-action-btn:hover { color: #38bdf8; background: rgba(30, 41, 59, 0.8); }
.chat-action-btn.send-btn { color: #38bdf8; background: rgba(56, 189, 248, 0.1); }

/* Modal */
.ssd-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; z-index: 9999999; }
.dark-modal { background: #0f172a; width: 350px; border-radius: 16px; color: #f8fafc; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5); }
.dark-modal .ssd-modal-header { padding: 20px; border-bottom: 1px solid rgba(255,255,255,0.05); display: flex; justify-content: space-between; align-items: center; }
.dark-modal .ssd-modal-header h3 { margin: 0; font-size: 18px; color: #f8fafc; }
.dark-modal .close-modal-btn { background: transparent; border: none; color: #94a3b8; font-size: 18px; cursor: pointer; }
.dark-modal .ssd-modal-body { padding: 25px 20px; display: flex; flex-direction: column; gap: 15px; }
.dark-modal .ssd-modal-action-btn { background: rgba(30, 41, 59, 0.6); border: 1px solid rgba(255,255,255,0.05); padding: 15px; border-radius: 12px; color: #f8fafc; font-size: 15px; cursor: pointer; display: flex; align-items: center; gap: 15px; transition: 0.2s; }
.dark-modal .ssd-modal-action-btn i { color: #38bdf8; font-size: 18px; }
.dark-modal .ssd-modal-action-btn:hover { background: rgba(30, 41, 59, 0.9); transform: translateY(-2px); }