/* ===== SOZLAMALAR MODAL ===== */
.settings-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    animation: fadeIn 0.2s;
    backdrop-filter: blur(3px);
}
.settings-modal-overlay.active { display: flex; }

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.settings-modal {
    background: #ffffff;
    width: 90%;
    max-width: 340px;
    border-radius: 22px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

@keyframes slideUp {
    from { transform: translateY(40px) scale(0.95); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}

.settings-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px 14px;
    border-bottom: 1px solid #f0f0f0;
}
.settings-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 8px;
}
.settings-close-btn {
    background: #f0f2f5;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    color: #4b5563;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
}
.settings-close-btn:hover {
    background: #e5e7eb;
    transform: rotate(90deg);
}

.settings-modal-body { padding: 12px 16px 20px; }

.settings-group { margin-bottom: 18px; }
.settings-group:last-child { margin-bottom: 0; }

.settings-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.pill-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pill-btn {
    flex: 1;
    min-width: 90px;
    padding: 11px 14px;
    background: #f0f2f5;
    border: 2px solid transparent;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #4b5563;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: inherit;
}
.pill-btn:hover { background: #e5e7eb; }
.pill-btn.active {
    background: #dbeafe;
    border-color: #3b82f6;
    color: #1e40af;
}

/* ===== DARK MODE ===== */
[data-theme="dark"] body,
body.dark-mode {
    background: #111827 !important;
    color: #f3f4f6;
}

[data-theme="dark"] .main-container,
body.dark-mode .main-container {
    background: #1f2937 !important;
}

[data-theme="dark"] .header,
body.dark-mode .header {
    background: #1f2937 !important;
    border-bottom-color: #374151 !important;
}

[data-theme="dark"] .header-title,
[data-theme="dark"] .chat-name,
[data-theme="dark"] .chat-username,
body.dark-mode .header-title,
body.dark-mode .chat-name,
body.dark-mode .chat-username {
    color: #f9fafb !important;
}

[data-theme="dark"] .chat-item,
body.dark-mode .chat-item {
    background: #1f2937;
    border-bottom-color: #374151;
    color: #f3f4f6;
}
[data-theme="dark"] .chat-item:hover,
body.dark-mode .chat-item:hover {
    background: #374151;
}

[data-theme="dark"] .search-input,
[data-theme="dark"] .message-input,
body.dark-mode .search-input,
body.dark-mode .message-input {
    background: #374151 !important;
    color: #f9fafb !important;
}

[data-theme="dark"] .chat-main,
body.dark-mode .chat-main {
    background: #0f172a !important;
}

[data-theme="dark"] .message.received,
body.dark-mode .message.received {
    background: #374151 !important;
    color: #f3f4f6 !important;
}

[data-theme="dark"] .message.sent,
body.dark-mode .message.sent {
    background: #065f46 !important;
    color: #ecfdf5 !important;
}

[data-theme="dark"] .chat-input-box,
body.dark-mode .chat-input-box {
    background: #1f2937 !important;
    border-top-color: #374151 !important;
}

[data-theme="dark"] .icon-btn,
body.dark-mode .icon-btn {
    background: #374151 !important;
    color: #d1d5db !important;
}
[data-theme="dark"] .icon-btn:hover,
body.dark-mode .icon-btn:hover {
    background: #4b5563 !important;
}

[data-theme="dark"] .settings-modal,
body.dark-mode .settings-modal {
    background: #1f2937;
}
[data-theme="dark"] .settings-modal-header,
body.dark-mode .settings-modal-header {
    border-bottom-color: #374151;
}
[data-theme="dark"] .settings-modal-header h3,
body.dark-mode .settings-modal-header h3 {
    color: #f9fafb;
}
[data-theme="dark"] .settings-close-btn,
body.dark-mode .settings-close-btn {
    background: #374151;
    color: #d1d5db;
}
[data-theme="dark"] .settings-group-title,
body.dark-mode .settings-group-title {
    color: #9ca3af;
}
[data-theme="dark"] .pill-btn,
body.dark-mode .pill-btn {
    background: #374151;
    color: #d1d5db;
}
[data-theme="dark"] .pill-btn.active,
body.dark-mode .pill-btn.active {
    background: #1e40af;
    border-color: #3b82f6;
    color: white;
}
/* ============================================================ */
/* ===== UNIVERSAL DARK MODE — HAR QANDAY SAHIFA UCHUN ===== */
/* ============================================================ */

html[data-theme="dark"],
html[data-theme="dark"] body {
    background: #0f172a !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] body *:not(svg):not(path):not(img) {
    border-color: #334155 !important;
}

/* Barcha konteynerlar uchun */
html[data-theme="dark"] div:not([class*="avatar"]):not([class*="icon"]),
html[data-theme="dark"] section,
html[data-theme="dark"] article,
html[data-theme="dark"] header,
html[data-theme="dark"] main,
html[data-theme="dark"] aside,
html[data-theme="dark"] nav,
html[data-theme="dark"] footer {
    background-color: transparent;
    color: #f1f5f9 !important;
}

/* Oq fon bo'lgan asosiy konteynerlar */
html[data-theme="dark"] .container,
html[data-theme="dark"] .wrapper,
html[data-theme="dark"] .card,
html[data-theme="dark"] .box,
html[data-theme="dark"] .profile-card,
html[data-theme="dark"] .profile-container,
html[data-theme="dark"] .profile-header,
html[data-theme="dark"] .profile-body,
html[data-theme="dark"] .main-container,
html[data-theme="dark"] .content,
html[data-theme="dark"] .modal-box,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .modal-body,
html[data-theme="dark"] .modal-header {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}

/* Sarlavhalar va matnlar */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] p,
html[data-theme="dark"] span:not([class*="icon"]):not([class*="price"]) {
    color: #f1f5f9 !important;
}

/* Kichik yozuvlar */
html[data-theme="dark"] small,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .subtitle,
html[data-theme="dark"] .desc {
    color: #94a3b8 !important;
}

/* Tugmalar */
html[data-theme="dark"] button:not(.settings-close-btn):not(.icon-btn):not(.pill-btn):not([class*="close"]),
html[data-theme="dark"] .btn {
    background: #1e40af !important;
    color: white !important;
}

/* Inputlar */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
    border-color: #475569 !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #94a3b8 !important;
}

/* Chegara chiziqlar */
html[data-theme="dark"] hr,
html[data-theme="dark"] .divider,
html[data-theme="dark"] .border,
html[data-theme="dark"] [style*="border"] {
    border-color: #334155 !important;
}