/* --- АДАПТАЦИЯ ПОД ПРИЛОЖЕНИЕ (Статичный экран) --- */
html, body { overflow: hidden; height: 100vh; height: 100dvh; position: fixed; width: 100%; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.15) transparent; }

body {
    margin: 0; padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: linear-gradient(135deg, #1e1e24, #4a4e69, #22223b);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    display: flex; justify-content: center; align-items: center;
    color: #ffffff; transition: background 0.5s ease;
    --my-msg-bg: linear-gradient(135deg, #a9d6e5, #4a4e69);
    --theme-accent: #a9d6e5; /* Акцентный цвет по умолчанию */
}

@keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

.glass-container { width: 100%; height: 100%; display: flex; padding: 20px; box-sizing: border-box; }
.glass-panel { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.1); padding: 40px; width: 100%; max-width: 380px; text-align: center; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3); margin: auto; }
.logo { width: 120px; border-radius: 20px; margin-bottom: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }

input { width: 100%; padding: 14px; margin: 10px 0; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px; background: rgba(255, 255, 255, 0.1); color: #fff; outline: none; box-sizing: border-box; font-size: 16px; }
input::placeholder { color: rgba(255, 255, 255, 0.6); }
input:focus { border-color: rgba(255, 255, 255, 0.5); }
button { width: 100%; padding: 14px; margin-top: 15px; border: none; border-radius: 12px; background: rgba(255, 255, 255, 0.2); color: #fff; font-weight: bold; font-size: 16px; cursor: pointer; transition: 0.3s; }
button:hover { background: rgba(255, 255, 255, 0.3); }
a { color: #a9d6e5; text-decoration: none; font-weight: bold; }

/* --- ИНТЕРФЕЙС МЕССЕНДЖЕРА --- */
.chat-full-screen { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; display: flex; background: transparent; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 10; }
.sidebar { width: 320px; background: rgba(0, 0, 0, 0.2); border-right: 1px solid rgba(255, 255, 255, 0.1); display: flex; flex-direction: column; box-shadow: 5px 0 25px rgba(0,0,0,0.1); }
.my-profile { padding: 15px 20px; background: rgba(0, 0, 0, 0.3); display: flex; align-items: center; gap: 12px; }
.my-profile h3 { margin: 0; flex-grow: 1; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-actions { display: flex; gap: 6px; }
.icon-btn { width: 38px; height: 38px; margin: 0; padding: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.08); display: flex; justify-content: center; align-items: center; }
.icon-btn i { font-size: 20px; }
.icon-btn:hover { background: rgba(255, 255, 255, 0.2); }
.avatar { width: 45px; height: 45px; background: linear-gradient(135deg, #a9d6e5, #4a4e69); border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 22px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); flex-shrink: 0; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.my-profile label .avatar { transition: 0.3s; }
.my-profile label:hover .avatar { opacity: 0.7; transform: scale(1.05); }

.search-container { max-height: 0; overflow: hidden; opacity: 0; transition: 0.4s ease; padding: 0 15px; background: rgba(0, 0, 0, 0.1); }
.search-container.open { max-height: 80px; opacity: 1; padding: 12px 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.search-box { display: flex; gap: 10px; }
.search-box input { margin: 0; padding: 10px 15px; border-radius: 20px; font-size: 14px; }
.search-box button { margin: 0; width: 75px; border-radius: 20px; padding: 8px; font-size: 13px; }
.user-card { display: flex; align-items: center; gap: 15px; padding: 10px 15px; background: rgba(255, 255, 255, 0.05); border-radius: 15px; cursor: pointer; transition: 0.2s; margin-bottom: 10px; }
.user-card:hover { background: rgba(255, 255, 255, 0.1); }
.user-card h4 { margin: 0; font-size: 16px; }

.unread-badge {
    background: #e63946;
    color: white;
    border-radius: 50%;
    padding: 0 6px;
    min-width: 20px;
    height: 20px;
    font-size: 11px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}

.chat-window { flex-grow: 1; display: flex; flex-direction: column; background: rgba(0, 0, 0, 0.4); }
.chat-header { padding: 15px 25px; background: rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.05); display: flex; align-items: center; gap: 15px; }
.profile-info { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 5px 10px; border-radius: 12px; transition: 0.2s; min-width: 0; flex: 1; }
.profile-info:hover { background: rgba(255, 255, 255, 0.1); }
.profile-info-text { display: flex; flex-direction: column; min-width: 0;}
.profile-info-text h3 { margin: 0; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-text { font-size: 13px; margin: 3px 0 0 0; color: rgba(255,255,255,0.6); }
.status-online { color: #52b788; font-weight: 500; }

.typing-indicator { padding: 0 25px 15px; display: flex; gap: 5px; align-items: center; }
.typing-indicator .dot { width: 6px; height: 6px; background: rgba(255,255,255,0.6); border-radius: 50%; animation: bounce 1.4s infinite ease-in-out both; }
.typing-indicator .dot:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator .dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }

.back-btn { display: none; background: transparent; border: none; color: white; font-size: 24px; cursor: pointer; padding: 0; margin: 0; width: auto; }
.back-btn:hover { background: transparent; color: #a9d6e5; }

.messages-container { flex-grow: 1; padding: 25px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.input-area { padding: 15px 25px; background: rgba(0, 0, 0, 0.2); border-top: 1px solid rgba(255, 255, 255, 0.05); display: flex; gap: 15px; align-items: center; }
.input-area input { margin: 0; flex-grow: 1; padding: 16px 20px; border-radius: 25px; font-size: 16px; }
.attach-btn, .send-btn { margin: 0; width: 55px; height: 55px; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: 0.2s; }
.attach-btn { background: rgba(255, 255, 255, 0.1); color: #fff; }
.attach-btn:hover { background: rgba(255, 255, 255, 0.2); }
.attach-btn i { font-size: 26px; }
.send-btn { background: var(--my-msg-bg); box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
.send-btn i { font-size: 24px; }

.message { max-width: 70%; padding: 12px 18px; border-radius: 18px; font-size: 15px; line-height: 1.4; word-wrap: break-word; animation: fadeIn 0.3s ease; display: flex; flex-direction: column; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.message img { max-width: 100%; border-radius: 12px; display: block; box-shadow: 0 2px 10px rgba(0,0,0,0.2); }
.my-message { align-self: flex-end; background: var(--my-msg-bg); color: #fff; border-bottom-right-radius: 4px; }
.their-message { align-self: flex-start; background: rgba(255, 255, 255, 0.1); color: #fff; border-bottom-left-radius: 4px; }

.forwarded-label { font-size: 11px; color: rgba(255,255,255,0.6); margin-bottom: 6px; display: flex; align-items: center; gap: 4px; }
.edited-tag { font-size: 11px; opacity: 0.6; margin-left: 6px; font-style: italic; }

.modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px); z-index: 100; display: flex; justify-content: center; align-items: center; animation: fadeIn 0.2s ease; }
.modal-content { max-width: 320px; }
.modal-content h2 { display: flex; align-items: center; justify-content: center; gap: 8px; }
.theme-grid { display: flex; flex-direction: column; gap: 8px; }
.theme-btn { margin: 0; padding: 10px 15px; font-size: 14px; text-align: left; background: rgba(255, 255, 255, 0.08); border-radius: 10px; display: flex; align-items: center; gap: 8px; cursor: pointer; color: white; transition: 0.2s; border: none; }
.theme-btn i { font-size: 18px; }
.theme-btn:hover { background: rgba(255, 255, 255, 0.2); }
.custom-theme-label { display: flex; background: linear-gradient(135deg, #4a4e69, #22223b); font-weight: bold; }
.custom-theme-label:hover { background: linear-gradient(135deg, #5c6182, #2b2b4a); }
.modal-divider { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); margin: 20px 0; }
.logout-btn-modal { margin-top: 0; background: rgba(255, 60, 60, 0.3); color: #ff8888; display: flex; align-items: center; justify-content: center; gap: 8px; }
.logout-btn-modal i { font-size: 20px; }
.logout-btn-modal:hover { background: rgba(255, 60, 60, 0.5); color: #fff; }
.close-btn { background: transparent; border: 1px solid rgba(255, 255, 255, 0.2); margin-top: 10px; }

@media (max-width: 768px) {
    /* Continuous full-page gradient animation + backdrop blur is expensive on mobile GPUs. */
    body { animation: none; background-size: 100% 100%; }
    :root { --mobile-safe-top: env(safe-area-inset-top, 0px); --mobile-safe-bottom: env(safe-area-inset-bottom, 0px); }
    html, body { width: 100%; height: 100%; height: 100dvh; min-height: 100dvh; overflow: hidden; position: fixed; inset: 0; }
    body { display: block; }
    .glass-container { width: 100%; height: 100%; height: 100dvh; padding: 0; display: block; }
    #auth-screen.glass-panel { width: 100%; max-width: none; min-height: 100%; box-sizing: border-box; padding: 32px 24px calc(32px + var(--mobile-safe-bottom)); display: flex; flex-direction: column; justify-content: center; background: rgba(18, 19, 24, .72); border: 0; border-radius: 0; box-shadow: none; }
    #auth-screen .logo { width: 104px; align-self: center; }
    #auth-screen input, #auth-screen button { min-height: 52px; font-size: 16px; }
    .chat-full-screen { position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh; overflow: hidden; background: transparent; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
    .sidebar { width: 100%; height: 100%; height: 100dvh; position: absolute; inset: 0; z-index: 1; background: rgba(10, 10, 15, .88); border: 0; box-shadow: none; transform: translateX(0); transition: transform 280ms cubic-bezier(.22, .61, .36, 1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
    .chat-full-screen.mobile-chat-open .sidebar { transform: translateX(-100%); }
    .chat-window { width: 100%; height: 100%; height: 100dvh; position: absolute; inset: 0; z-index: 2; transform: translateX(100%); background: rgba(10, 10, 15, .90); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform 280ms cubic-bezier(.22, .61, .36, 1); }
    .chat-full-screen.mobile-chat-open .chat-window { transform: translateX(0); }
    .my-profile { min-height: 64px; box-sizing: border-box; padding: calc(10px + var(--mobile-safe-top)) 14px 10px; background: rgba(0, 0, 0, .28); border-bottom: 1px solid rgba(255,255,255,.08); gap: 10px; }
    .my-profile h3 { font-size: 16px; }
    .header-actions { gap: 4px; }
    .icon-btn { width: 42px; height: 42px; background: rgba(255,255,255,.08); }
    .avatar { width: 42px; height: 42px; font-size: 19px; }
    .search-container { padding-left: 12px; padding-right: 12px; background: rgba(0,0,0,.22); }
    .search-container.open { max-height: 76px; padding: 10px 12px; }
    .search-box { gap: 8px; }
    .search-box input { min-height: 44px; }
    .search-box button { width: 64px; min-height: 44px; }
    #search-results { padding: 8px 10px 0; }
    .user-card { margin-bottom: 6px; padding: 12px 10px; border-radius: 12px; background: rgba(255,255,255,.055); }
    #recent-chats-list { padding: 8px !important; background: transparent; }
    .chat-header { min-height: 64px; box-sizing: border-box; padding: calc(8px + var(--mobile-safe-top)) 10px 8px; background: rgba(0,0,0,.30); border-bottom: 1px solid rgba(255,255,255,.08); gap: 4px; flex-shrink: 0; }
    .back-btn { display: flex; width: 42px; height: 42px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 50%; }
    .back-btn i { font-size: 24px; }
    .profile-info { min-width: 0; flex: 1; padding: 5px 6px; gap: 10px; }
    .profile-info .avatar { width: 40px !important; height: 40px !important; flex-shrink: 0; }
    .profile-info-text { min-width: 0; }
    .profile-info-text h3 { max-width: 100%; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .status-text { font-size: 12px; }
    .messages-container { padding: 12px 12px 10px; gap: 7px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
    .message { max-width: min(82%, 360px); padding: 10px 14px; border-radius: 17px; font-size: 15px; line-height: 1.38; }
    .message img { max-width: min(72vw, 320px); }
    .typing-indicator { padding: 0 16px 7px; }
    .input-area { flex-shrink: 0; padding: 8px 10px calc(8px + var(--mobile-safe-bottom)); gap: 7px; background: rgba(0,0,0,.30); border-top: 1px solid rgba(255,255,255,.08); }
    .input-area input { min-width: 0; min-height: 46px; padding: 12px 15px; border-radius: 23px; font-size: 16px; margin: 0; }
    .attach-btn, .send-btn { width: 46px; height: 46px; flex: 0 0 46px; }
    .attach-btn i { font-size: 22px; }
    .send-btn i { font-size: 21px; }
    .modal-overlay { align-items: flex-end; padding: 0; background: rgba(0,0,0,.58); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
    .modal-content, .modal-overlay .glass-panel { width: 100%; max-width: none; max-height: 90dvh; overflow-y: auto; box-sizing: border-box; padding: 24px 18px calc(18px + var(--mobile-safe-bottom)); border-radius: 24px 24px 0 0; background: rgba(27,28,34,.90); border: 1px solid rgba(255,255,255,.10); border-bottom: 0; box-shadow: 0 -12px 40px rgba(0,0,0,.35); animation: mobileSheetIn .25s ease; }
    .theme-grid { gap: 7px; }
    .theme-btn, .logout-btn-modal, .close-btn { min-height: 48px; }
    @keyframes mobileSheetIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
}

@media (max-width: 380px) {
    .my-profile { padding-left: 10px; padding-right: 10px; }
    .header-actions .icon-btn { width: 38px; height: 38px; }
    .message { max-width: 86%; }
    .input-area { padding-left: 7px; padding-right: 7px; }
    .attach-btn, .send-btn { width: 44px; height: 44px; flex-basis: 44px; }
}

.message-reply { font-size: 13px; background: rgba(0, 0, 0, 0.2); padding: 8px 12px; border-radius: 8px; margin-bottom: 8px; border-left: 4px solid #a9d6e5; opacity: 0.85; }
.my-message .message-reply { border-left-color: #fff; background: rgba(255, 255, 255, 0.2); color: #fff; }

.voice-message-container { display: flex; align-items: center; gap: 12px; padding: 4px; min-width: 160px; max-width: 220px; }
.voice-play-btn { width: 44px; height: 44px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.15); color: inherit; border: none; display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; flex-shrink: 0; transition: background-color 0.2s; }
.voice-play-btn:hover { background-color: rgba(255, 255, 255, 0.25); }
.voice-wave-info { display: flex; flex-direction: column; justify-content: center; flex-grow: 1; }
.voice-waves { display: flex; align-items: center; gap: 3px; height: 24px; }
.voice-wave-bar { width: 3px; background-color: currentColor; opacity: 0.4; border-radius: 2px; transition: height 0.1s ease; }
.voice-waves.playing .voice-wave-bar { opacity: 1; animation: wave-animation 1s infinite alternate; }
.voice-duration { font-size: 11px; color: inherit; opacity: 0.6; margin-top: 4px; }
@keyframes wave-animation { 0% { transform: scaleY(0.5); } 100% { transform: scaleY(1.2); } }
.recording { animation: pulseRecord 1.2s infinite; background: #ff4757 !important; color: white !important; }
@keyframes pulseRecord { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.7); } 70% { transform: scale(1.15); box-shadow: 0 0 0 12px rgba(255, 71, 87, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 71, 87, 0); } }

.message-wrapper { position: relative; display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.my-message-wrapper { flex-direction: row-reverse; }

.message-actions { display: flex; align-items: center; gap: 4px; opacity: 0; visibility: hidden; transition: opacity 0.2s ease; }
.message-wrapper:hover .message-actions { opacity: 1; visibility: visible; }
.action-btn { width: 28px; height: 28px; border-radius: 50%; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(4px); color: #ccc; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px; transition: all 0.2s ease; }
.action-btn:hover { background: rgba(255, 255, 255, 0.2); color: #fff; transform: scale(1.1); }
.action-btn.delete-btn:hover { background: rgba(255, 77, 77, 0.6); color: #fff; }

.message-footer { display: flex; align-items: center; justify-content: flex-end; gap: 4px; font-size: 11px; color: rgba(255, 255, 255, 0.6); margin-top: 4px; user-select: none; }
.message-status { font-size: 14px; display: inline-flex; align-items: center; color: rgba(255, 255, 255, 0.5); transition: color 0.2s ease; }
.message-status.read { color: #a9d6e5; }
.avatar-wrapper { position: relative; display: inline-block; flex-shrink: 0; }
.online-badge { position: absolute; bottom: 0px; right: 0px; width: 12px; height: 12px; background-color: #2ec4b6; border: 2px solid #1e1e24; border-radius: 50%; display: none; z-index: 2; }
.online-badge.active { display: block; }

#scroll-bottom-btn { position: absolute; bottom: 80px; right: 20px; width: 44px; height: 44px; background-color: rgba(0, 0, 0, 0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); z-index: 1000; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); }
#scroll-bottom-btn.visible { opacity: 1; visibility: visible; transform: translateY(0); }
#scroll-bottom-btn:hover { background-color: rgba(0, 0, 0, 0.65); transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.3); }

.modal-small { max-width: 320px; width: 90%; text-align: center; }
.modal-actions-column { display: flex; flex-direction: column; gap: 10px; }
.btn-danger { background: #e63946; color: white; border: none; padding: 10px; border-radius: 8px; cursor: pointer; font-weight: 600; }
.btn-danger-outline { background: transparent; color: #e63946; border: 1px solid #e63946; padding: 10px; border-radius: 8px; cursor: pointer; font-weight: 600; }
.btn-secondary { background: rgba(255,255,255,0.1); color: #ccc; border: none; padding: 10px; border-radius: 8px; cursor: pointer; font-weight: 600; transition: 0.2s;}
.btn-secondary:hover { background: rgba(255,255,255,0.2); color: #fff;}

.settings-modal-panel { max-width: 380px; width: 90%; }
.avatar-click-area { cursor: pointer; transition: transform 0.2s ease, opacity 0.2s ease; }
.avatar-click-area:hover { transform: scale(1.05); opacity: 0.85; }
.my-profile-info { flex-grow: 1; min-width: 0; cursor: pointer; }
.sub-name { display: block; font-size: 12px; color: #a9d6e5; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.settings-tabs { display: flex; gap: 8px; background: rgba(0, 0, 0, 0.25); padding: 5px; border-radius: 12px; margin-bottom: 20px; }
.tab-btn { flex: 1; margin-top: 0; padding: 10px; font-size: 14px; background: transparent; color: rgba(255, 255, 255, 0.6); border-radius: 8px; border: none; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; transition: all 0.2s ease; }
.tab-btn:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.tab-btn.active { background: rgba(255, 255, 255, 0.18); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.tab-content { display: none; }
.tab-content.active { display: block; }

.profile-avatar-edit { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 20px; }
.avatar-large { width: 90px; height: 90px; font-size: 38px; }
.change-avatar-btn { background: rgba(255, 255, 255, 0.12); padding: 8px 16px; border-radius: 20px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background 0.2s; }
.change-avatar-btn:hover { background: rgba(255, 255, 255, 0.22); }
.form-group { text-align: left; margin-bottom: 12px; }
.form-group label { display: block; font-size: 12px; color: rgba(255, 255, 255, 0.7); margin-bottom: 4px; font-weight: 600; }
.form-group input { margin: 0; }
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; }
.save-profile-btn { background: var(--my-msg-bg, linear-gradient(135deg, #a9d6e5, #4a4e69)); margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; }

.crop-modal-content { max-width: 360px; width: 90%; }
.crop-container { width: 100%; height: 260px; background: #000; border-radius: 12px; overflow: hidden; margin: 15px 0; }
.crop-container img { max-width: 100%; }
.crop-controls { display: flex; justify-content: center; gap: 12px; margin-bottom: 15px; }
.crop-actions { display: flex; gap: 10px; }
.crop-actions button { flex: 1; margin-top: 0; }
.cropper-view-box, .cropper-face { border-radius: 50%; }

/* --- ФОТОГАЛЕРЕЯ И КОЛЛАЖИ --- */
.message-images-grid {
    display: grid;
    gap: 4px;
    margin-top: 5px;
    width: 100%;
}
.message-images-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s, filter 0.2s;
    box-shadow: none !important;
}
.message-images-grid img:hover {
    filter: brightness(0.8);
    transform: scale(1.02);
}

.grid-1 { grid-template-columns: 1fr; }
.grid-2 { grid-template-columns: 1fr 1fr; grid-template-rows: 200px; }
.grid-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 200px 200px; }
.grid-3 img:first-child { grid-column: 1 / 2; grid-row: 1 / 3; }
.grid-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 150px 150px; }
.grid-5 { grid-template-columns: 1fr 1fr; grid-template-rows: 150px 150px 150px; }
.grid-5 img:nth-child(1) { grid-column: 1 / 3; }
.message-images-grid img.single-img { max-height: 400px; object-fit: contain; border-radius: 12px; }

@media (max-width: 768px) {
    .grid-2 { grid-template-rows: 140px; }
    .grid-3 { grid-template-rows: 140px 140px; }
    .grid-4 { grid-template-rows: 100px 100px; }
    .grid-5 { grid-template-rows: 100px 100px 100px; }
}

.message-images-grid {
    max-width: 100%;
    overflow: hidden;
    border-radius: 12px;
}
.message-images-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- ПРЕВЬЮ ПЕРЕД ОТПРАВКОЙ --- */
.preview-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 8px;
}
.preview-item {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.2);
    background: #000;
}
.preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.preview-item .remove-preview {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e63946;
    color: white;
    border: none;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.preview-item .upload-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    background: #a9d6e5;
    width: 0%;
    transition: width 0.2s;
    z-index: 2;
    border-radius: 0 0 0 10px;
}
.preview-item .loading-spinner {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 24px; height: 24px;
    border: 3px solid rgba(255,255,255,0.1);
    border-top-color: #a9d6e5;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { 100% { transform: translate(-50%, -50%) rotate(360deg); } }

@media (max-width: 768px) {
    .preview-item { width: 50px; height: 50px; }
}

/* --- ГАЛЕРЕЯ --- */
#gallery-modal button {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    line-height: normal !important;
}
#gallery-modal i.ph, #gallery-modal i {
    margin: 0 auto !important;
    display: block !important;
    line-height: 1 !important;
}
#gallery-prev-btn, #gallery-next-btn {
    font-size: 32px !important;
    font-weight: bold !important;
    padding: 0 !important;
    line-height: 1 !important;
}

/* --- DRAG AND DROP --- */
#drop-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: white;
    font-family: inherit;
}
#drop-overlay.visible { display: flex; }

.drop-content {
    text-align: center;
    padding: 40px;
    border: 3px dashed rgba(255,255,255,0.3);
    border-radius: 30px;
    background: rgba(255,255,255,0.05);
    animation: pulse-border 1.5s infinite alternate;
}
@keyframes pulse-border {
    0% { border-color: rgba(255,255,255,0.2); transform: scale(0.98); }
    100% { border-color: rgba(169, 214, 229, 0.8); transform: scale(1.02); }
}
.drop-content i { font-size: 64px; color: #a9d6e5; margin-bottom: 15px; display: block; }
.drop-content h2 { margin: 10px 0; font-size: 24px; }
.drop-content p { color: rgba(255,255,255,0.7); font-size: 14px; margin: 4px 0; }
.drop-content .highlight { color: #a9d6e5; font-weight: bold; }

/* --- СКЕЛЕТОНЫ --- */
#skeleton-placeholder {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px;
}
.skeleton-message {
    background: rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    height: 55px;
    animation: skeleton-pulse 1.5s infinite ease-in-out;
}
.skeleton-message.my-skeleton { align-self: flex-end; width: 70%; }
.skeleton-message.their-skeleton { align-self: flex-start; width: 50%; }
@keyframes skeleton-pulse {
    0% { opacity: 0.4; }
    50% { opacity: 0.9; }
    100% { opacity: 0.4; }
}

/* --- КЛАСС ДЛЯ ИКОНКИ ИЗБРАННОГО (Подстраивается под тему) --- */
.saved-messages-icon {
    color: var(--theme-accent, #a9d6e5);
}

/* ==========================================================
   KODKOD — ФИНАЛЬНЫЕ ФИКСЫ СВЕТЛОЙ ТЕМЫ И ГАЛЕРЕИ
   Только визуальные исправления. Firestore/JS не затрагиваются.
   ========================================================== */

/* Полноэкранная галерея: фото всегда внутри окна */
#gallery-modal { overflow: hidden !important; }
#gallery-modal > div {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}
#gallery-current-image-wrapper {
    position: absolute !important;
    inset: 70px 0 110px 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    flex: none !important;
    box-sizing: border-box !important;
    padding: 12px 20px !important;
    overflow: hidden !important;
}
#gallery-current-image {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    flex: 0 1 auto !important;
}

/* Мобильная галерея: safe-area */
@media (max-width: 768px) {
    #gallery-modal > div {
        height: 100dvh !important;
        max-height: 100dvh !important;
    }
    #gallery-current-image-wrapper {
        top: calc(70px + env(safe-area-inset-top, 0px)) !important;
        bottom: calc(105px + env(safe-area-inset-bottom, 0px)) !important;
        padding: 8px 12px !important;
    }
    #gallery-current-image {
        max-width: 100% !important;
        max-height: 100% !important;
    }
}
/* KODKOD 0.6.2 — полностью переработанные настройки */
.settings-modal-panel{max-width:820px!important;width:min(94vw,820px)!important;padding:0!important;overflow:hidden!important;text-align:left;background:rgba(17,18,24,.94);border:1px solid rgba(255,255,255,.10)}
.settings-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:24px 26px 18px;border-bottom:1px solid rgba(255,255,255,.07)}
.settings-eyebrow{font-size:10px;letter-spacing:.18em;opacity:.45;font-weight:800;margin-bottom:4px}.settings-header h2{margin:0!important;justify-content:flex-start!important;font-size:23px}.settings-subtitle{margin:6px 0 0;font-size:12px;color:rgba(255,255,255,.52)}
.settings-close-icon{width:40px!important;height:40px;min-width:40px;padding:0!important;border-radius:12px!important;background:rgba(255,255,255,.06)!important;display:flex;align-items:center;justify-content:center;margin:0!important}.settings-close-icon i{font-size:20px}
.settings-layout{display:grid;grid-template-columns:190px minmax(0,1fr);min-height:440px}.settings-tabs{margin:0!important;padding:14px 10px!important;border-radius:0!important;background:rgba(0,0,0,.16);display:flex;flex-direction:column;gap:5px;border-right:1px solid rgba(255,255,255,.06)}
.settings-tabs .tab-btn{flex:none;width:100%;min-height:48px;margin:0;padding:10px 12px;justify-content:flex-start;gap:11px;border-radius:11px;color:rgba(255,255,255,.56);text-align:left}.settings-tabs .tab-btn i{font-size:20px}.settings-tabs .tab-btn small{margin-left:auto;width:20px;height:20px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:10px;opacity:.35;background:rgba(255,255,255,.06)}
.settings-tabs .tab-btn.active{background:linear-gradient(135deg,rgba(169,214,229,.16),rgba(169,214,229,.05));color:#fff;box-shadow:none;border:1px solid rgba(169,214,229,.12)}.settings-tabs .tab-btn.active small{opacity:.9;color:var(--theme-accent)}
.settings-body{min-width:0;padding:24px 26px;max-height:58vh;overflow:auto}.settings-section-title{display:flex;gap:12px;align-items:flex-start;margin-bottom:20px}.settings-section-title>i{font-size:23px;color:var(--theme-accent);margin-top:2px}.settings-section-title h3{margin:0 0 4px;font-size:17px}.settings-section-title p{margin:0;font-size:12px;line-height:1.45;color:rgba(255,255,255,.5);font-weight:400}
.profile-avatar-edit{margin-bottom:22px}.avatar-large{width:100px;height:100px;font-size:40px;border:3px solid rgba(255,255,255,.10)}.profile-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-group-full{grid-column:1/-1}
.form-group textarea{width:100%;min-height:92px;resize:vertical;box-sizing:border-box;padding:13px 14px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.055);color:#fff;outline:none;font:inherit;line-height:1.4}.form-group textarea:focus{border-color:rgba(169,214,229,.5)}.field-hint{display:block;margin-top:5px;color:rgba(255,255,255,.36);font-size:11px}#username-availability{display:block;min-height:16px;margin-top:5px;font-size:11px}
.settings-primary-action,.settings-secondary-action{min-height:46px}.settings-danger-card{margin-top:22px;padding:14px;border-radius:14px;border:1px solid rgba(255,82,82,.16);background:rgba(255,82,82,.045);display:flex;align-items:center;justify-content:space-between;gap:14px}.settings-danger-card div{display:flex;flex-direction:column;gap:3px}.settings-danger-card strong{font-size:13px;color:#ff9a9a}.settings-danger-card span{font-size:11px;color:rgba(255,255,255,.42)}.settings-danger-card button{width:auto;margin:0;padding:9px 12px;border:1px solid rgba(255,82,82,.22);border-radius:10px;background:rgba(255,82,82,.08);color:#ff8b8b;font-size:12px;display:flex;align-items:center;gap:7px}
.theme-grid{display:grid!important;grid-template-columns:1fr 1fr;gap:10px!important}.theme-grid .theme-btn{min-height:58px;border:1px solid rgba(255,255,255,.07)}.settings-info-card{display:flex;gap:9px;align-items:center;margin:15px 0 10px;padding:11px 13px;border-radius:11px;background:rgba(255,255,255,.035);color:rgba(255,255,255,.48);font-size:11px}.settings-info-card i{color:var(--theme-accent);font-size:17px}.settings-secondary-action{background:rgba(255,255,255,.07)!important}
.language-option{display:flex;align-items:center;justify-content:space-between;padding:15px;margin-bottom:9px;border-radius:13px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);cursor:pointer;font-weight:600}.language-option:hover{background:rgba(255,255,255,.07)}.language-option>span{display:flex;align-items:center;gap:12px}.language-flag{font-size:22px}.language-option input{width:18px;height:18px;margin:0;accent-color:var(--theme-accent)}.language-select{display:none}
.settings-footer{display:flex;gap:10px;padding:16px 26px 20px;border-top:1px solid rgba(255,255,255,.07)}.settings-footer button{margin:0}.settings-footer .logout-btn-modal{flex:1}.settings-footer .close-btn{width:140px}.profile-modal-bio{max-width:420px;margin:12px auto 0;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.045);color:rgba(255,255,255,.78);font-size:13px;line-height:1.5;text-align:left;white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:768px){.settings-modal-panel{width:100%!important;max-height:94dvh!important;border-radius:24px 24px 0 0!important}.settings-header{padding:18px 18px 14px}.settings-layout{display:block;min-height:0}.settings-tabs{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid rgba(255,255,255,.06);padding:8px!important}.settings-tabs .tab-btn{min-width:110px;justify-content:center}.settings-tabs .tab-btn small{display:none}.settings-body{max-height:57dvh;padding:20px 18px}.profile-form-grid{grid-template-columns:1fr;gap:11px}.form-group-full{grid-column:auto}.theme-grid{grid-template-columns:1fr 1fr!important}.settings-footer{padding:12px 18px calc(14px + var(--mobile-safe-bottom,0px))}.settings-footer .close-btn{width:110px}.settings-danger-card{align-items:stretch;flex-direction:column}.settings-danger-card button{width:100%;justify-content:center}}
@media(max-width:420px){.theme-grid{grid-template-columns:1fr!important}.settings-header h2{font-size:20px}}
/* KODKOD 0.6.2 — search result panel follows the search bar */
#search-results {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .28s ease, opacity .22s ease, padding .28s ease, margin .28s ease;
    margin: 0;
    padding: 0;
}
#search-results.search-results-visible {
    max-height: 180px;
    opacity: 1;
    padding: 8px 10px 0;
    overflow-y: auto;
}
#search-results.search-results-visible .user-card { animation: searchResultIn .18s ease both; }
@keyframes searchResultIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Desktop: custom theme is a full-width, perfectly aligned settings action */
@media (min-width: 769px) {
    .theme-grid .custom-theme-label {
        width: 100%;
        min-width: 0;
        min-height: 58px;
        box-sizing: border-box;
        margin: 0;
        padding: 14px 16px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        grid-column: 1 / -1;
        text-align: left;
    }
    .theme-grid .custom-theme-label i { flex: 0 0 auto; }
    .theme-grid .custom-theme-label span { flex: 1 1 auto; min-width: 0; }
}

@media (max-width: 768px) {
    #search-results.search-results-visible {
        max-height: 160px;
        padding: 8px 10px 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}


/* ==========================================================
   KODKOD — точечный перенос понравившихся элементов из 0.8
   Основа полностью сохранена из старого style.css.
   ========================================================== */

/* Новые пузыри сообщений */
.messages-container {
    padding: 22px 28px 18px !important;
    gap: 6px !important;
}
.message-wrapper { margin-bottom: 2px !important; }
.message {
    max-width: min(68%, 620px) !important;
    padding: 10px 13px !important;
    border-radius: 13px !important;
    border: 1px solid rgba(255,255,255,.085);
    box-shadow: none !important;
}
.my-message {
    border-bottom-right-radius: 4px !important;
}
.their-message {
    border-bottom-left-radius: 4px !important;
}
.message-reply {
    border-left: 3px solid var(--theme-accent, #a9d6e5) !important;
}

/* Новая нижняя панель чата */
.input-area {
    padding: 11px 18px 14px !important;
    gap: 7px !important;
}
.input-area input {
    min-height: 46px;
    padding: 11px 15px !important;
    border-radius: 11px !important;
    font-size: 14px !important;
}
.attach-btn, .send-btn {
    width: 42px !important;
    height: 42px !important;
    border-radius: 10px !important;
    flex: 0 0 42px;
}

/* Избранное — цвет берётся из текущей темы */
.saved-messages-icon {
    color: var(--theme-accent, #a9d6e5) !important;
}

/* Микрофон: мерцание акцентным цветом текущей темы, не красным */
#mic-btn.recording,
.recording {
    background: var(--theme-accent, #a9d6e5) !important;
    color: #fff !important;
    animation: kodkodAccentRecord 1.2s infinite;
}
@keyframes kodkodAccentRecord {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--theme-accent, #a9d6e5) 65%, transparent);
    }
    70% {
        transform: scale(1.08);
        box-shadow: 0 0 0 11px color-mix(in srgb, var(--theme-accent, #a9d6e5) 0%, transparent);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--theme-accent, #a9d6e5) 0%, transparent);
    }
}

@media (max-width: 768px) {
    .messages-container {
        padding: 12px 11px 9px !important;
    }
    .message {
        max-width: min(84%, 360px) !important;
        padding: 9px 12px !important;
    }
    .input-area {
        padding: 8px 9px calc(8px + var(--mobile-safe-bottom, 0px)) !important;
    }
    .attach-btn, .send-btn {
        width: 44px !important;
        height: 44px !important;
        flex-basis: 44px;
    }
    .input-area input { min-height: 44px; }
}


/* KODKOD 0.9.1 — chat bubble + light chat menu fixes */

/* Пузыри — геометрия и плотность как в 0.8, без лишней яркости */
.messages-container {
    padding: 25px !important;
    gap: 10px !important;
}
.message-wrapper { margin-bottom: 0 !important; }
.message {
    max-width: 70% !important;
    padding: 12px 18px !important;
    border-radius: 18px !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
}
.my-message {
    background: var(--my-msg-bg) !important;
    color: #fff !important;
    border-bottom-right-radius: 4px !important;
}
.their-message {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #fff !important;
    border-bottom-left-radius: 4px !important;
}

@media (max-width: 768px) {
    .messages-container {
        padding: 12px 12px 10px !important;
        gap: 7px !important;
    }
    .message {
        max-width: min(82%, 360px) !important;
        padding: 10px 14px !important;
    }
}

/* KODKOD 1.1 — пузыри: форма/прозрачность 0.8 + цвета по темам */
.message {
    max-width: 70% !important;
    padding: 12px 18px !important;
    border-radius: 18px !important;
    border: 0 !important;
    box-shadow: none !important;
}
.my-message {
    border-bottom-right-radius: 4px !important;
}
.their-message {
    border-bottom-left-radius: 4px !important;
}


/* KODKOD 1.2 — точное восстановление формы и прозрачности пузырей из 0.8 */
.message {
    max-width: min(68%, 620px) !important;
    padding: 10px 13px !important;
    border-radius: 13px !important;
    border: 1px solid var(--line) !important;
    box-shadow: none !important;
}
.my-message {
    border-bottom-right-radius: 4px !important;
}
.their-message {
    border-bottom-left-radius: 4px !important;
}

/* KODKOD 1.3 — точное восстановление пузырей из визуального слоя 0.8.
   Никаких прозрачных/нулевых фонов: цвета 0.8 возвращены явно. */
.message {
    max-width: min(68%, 620px) !important;
    padding: 10px 13px !important;
    border-radius: 13px !important;
    border: 1px solid var(--line) !important;
    box-shadow: none !important;
}
.my-message {
    background: var(--mine) !important;
    color: #fff !important;
    border-color: rgba(154,140,255,.16) !important;
    border-bottom-right-radius: 4px !important;
}
.their-message {
    background: var(--theirs) !important;
    color: #fff !important;
    border-bottom-left-radius: 4px !important;
}

/* ==========================================================
   KODKOD — CHAT BUBBLES / CLEAN v3
   Простые пузыри без теней, рамок, свечения и хвостов.
   ========================================================== */

:root {
    --chat-mine: #30333b;
    --chat-theirs: #1c1e24;
    --chat-text: #ffffff;
}

/* Базовая форма */
.messages-container {
    gap: 7px !important;
}

.message {
    max-width: min(68%, 620px) !important;
    padding: 10px 14px !important;
    border: none !important;
    outline: none !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    transition: none !important;
}

/* Полностью отключаем псевдоэлементы старых дизайнов */
.message::before,
.message::after,
.my-message::before,
.my-message::after,
.their-message::before,
.their-message::after {
    display: none !important;
    content: none !important;
}

/* Мои */
.my-message {
    background: var(--chat-mine) !important;
    color: var(--chat-text) !important;
    border: none !important;
    outline: none !important;
    border-radius: 16px !important;
    border-bottom-right-radius: 5px !important;
    box-shadow: none !important;
}

/* Собеседник */
.their-message {
    background: var(--chat-theirs) !important;
    color: var(--chat-text) !important;
    border: none !important;
    outline: none !important;
    border-radius: 16px !important;
    border-bottom-left-radius: 5px !important;
    box-shadow: none !important;
}

/* Никаких hover-эффектов */
.message-wrapper:hover .message {
    transform: none !important;
    box-shadow: none !important;
}

/* Метаданные сообщения — спокойно и незаметно */
.message-footer {
    margin-top: 5px !important;
    color: rgba(255,255,255,.48) !important;
}

.message-status {
    color: rgba(255,255,255,.42) !important;
}

.message-status.read {
    color: rgba(255,255,255,.58) !important;
}

/* Ответ — обычная тонкая строка, не отдельная карточка */
.message-reply {
    margin: -1px 0 7px !important;
    padding: 4px 9px !important;
    border-left: 2px solid currentColor !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Фото внутри сообщения */
.message img {
    box-shadow: none !important;
    border-radius: 10px !important;
}

/* Мобильные */
@media (max-width: 768px) {
    .messages-container {
        padding: 13px 12px 10px !important;
        gap: 6px !important;
    }

    .message {
        max-width: min(84%, 370px) !important;
        padding: 9px 13px !important;
        border-radius: 15px !important;
    }

    .my-message {
        border-bottom-right-radius: 5px !important;
    }

    .their-message {
        border-bottom-left-radius: 5px !important;
    }
}

@media (max-width: 380px) {
    .message {
        max-width: 88% !important;
        padding: 9px 12px !important;
    }
}
@media (max-width: 768px) {
  .kodkod-call-action {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
  }
  .kodkod-call-action i {
    font-size: 20px !important;
  }
}
/* style.css */
.system-message {
  text-align: center;
  color: rgba(255,255,255,0.6);
  font-size: 13px;
  padding: 6px 14px;
  background: rgba(255,255,255,0.06);
  border-radius: 20px;
  align-self: center;
  max-width: 80%;
  margin: 6px auto;
}
@media (max-width: 768px) {
  .kodkod-call-action {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
  }
  .kodkod-call-action i {
    font-size: 20px !important;
  }
}

/* --- FIX: кнопка звонка в шапке чата выровнена с кнопкой «⋮» --- */
.chat-header #kodkod-call-actions {
    height: 38px !important;
    min-height: 38px !important;
    display: flex;
    align-items: center;
    align-self: center;
    margin-top: 0 !important;
    box-sizing: border-box;
}
.chat-header #kodkod-call-actions .kodkod-call-action {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Ссылки в сообщениях */
.message a {
    color: #a9d6e5 !important;
    text-decoration: underline !important;
    word-break: break-all;
}


/* ==========================================================================
   KODKOD — DESIGN SYSTEM v4
   Единый слой тем. Каждая тема = набор переменных на body.theme-*.
   Компоненты ниже читают только переменные, поэтому добавить новую тему =
   добавить один блок из ~15 строк. Клиентский CSS: Firestore не затрагивается.
   ========================================================================== */

/* ---------- 0. Токены по умолчанию (= тема Standard) ---------- */
body {
    --bg: #0f1014;
    --bg-image: none;
    --surface: #17181e;            /* панели, модалки */
    --surface-2: #15161b;          /* сайдбар, шапка, поле ввода */
    --surface-3: #1c1e24;          /* инпуты, чужие пузыри */
    --chat-bg: #101115;
    --border: rgba(255, 255, 255, .08);
    --text: #ffffff;
    --text-dim: rgba(255, 255, 255, .62);
    --text-faint: rgba(255, 255, 255, .42);
    --hover: rgba(255, 255, 255, .06);
    --hover-strong: rgba(255, 255, 255, .11);
    --accent: #a9d6e5;
    --accent-2: #4a4e69;
    --accent-ink: #0f1014;         /* текст поверх акцентной заливки */
    --bubble-mine: #30333b;
    --bubble-theirs: #1c1e24;
    --bubble-text: #ffffff;
    --link: #a9d6e5;
    --danger: #ff6b6b;
    --ok: #52b788;
    --shadow: 0 8px 32px rgba(0, 0, 0, .35);
    --glass-blur: 0px;
    --modal-scrim: rgba(0, 0, 0, .72);
    --scroll-thumb: rgba(255, 255, 255, .16);
    color-scheme: dark;
}
/* Совместимость со старым CSS: старые переменные следуют за токенами темы. */
body[class*="theme-"] {
    --theme-accent: var(--accent);
    --my-msg-bg: var(--bubble-mine);
    --chat-mine: var(--bubble-mine);
    --chat-theirs: var(--bubble-theirs);
    --chat-text: var(--bubble-text);
}

/* ---------- 1. Темы ---------- */
body.theme-standard { /* значения по умолчанию выше */ }

body.theme-light {
    --bg: #eef1f6;
    --surface: #ffffff;
    --surface-2: #f7f8fb;
    --surface-3: #eceff4;
    --chat-bg: #e9edf3;
    --border: rgba(20, 24, 40, .10);
    --text: #14161c;
    --text-dim: rgba(20, 22, 30, .64);
    --text-faint: rgba(20, 22, 30, .42);
    --hover: rgba(20, 24, 40, .05);
    --hover-strong: rgba(20, 24, 40, .10);
    --accent: #2f5fe0;
    --accent-2: #6f97ff;
    --accent-ink: #ffffff;
    --bubble-mine: #2f5fe0;
    --bubble-theirs: #ffffff;
    --bubble-text: #14161c;
    --link: #2a55d4;
    --danger: #d93a3a;
    --ok: #1f9d63;
    --shadow: 0 8px 28px rgba(30, 40, 80, .12);
    --modal-scrim: rgba(230, 234, 242, .72);
    --scroll-thumb: rgba(20, 24, 40, .22);
    color-scheme: light;
}
body.theme-light .my-message,
body.theme-light .my-message .message-footer,
body.theme-light .my-message .message-status,
body.theme-light .my-message .edited-tag { --bubble-text: #ffffff; }

body.theme-nebula {
    --bg: #080018;
    --bg-image:
        radial-gradient(ellipse at 20% 50%, rgba(150, 0, 255, .38) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 20%, rgba(0, 220, 255, .18) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 90%, rgba(255, 190, 0, .09) 0%, transparent 45%);
    --surface: rgba(24, 12, 44, .78);
    --surface-2: rgba(18, 8, 36, .66);
    --surface-3: rgba(255, 255, 255, .08);
    --chat-bg: rgba(10, 4, 24, .45);
    --accent: #b86bff;
    --accent-2: #ff3ea5;
    --bubble-mine: linear-gradient(135deg, #7d2cff, #c02bd6);
    --bubble-theirs: rgba(46, 30, 72, .86);
    --link: #d2a8ff;
    --glass-blur: 14px;
}

body.theme-neon-sunset {
    --bg: #0f0a18;
    --bg-image:
        radial-gradient(circle at 30% 85%, rgba(255, 0, 127, .55) 0%, transparent 42%),
        radial-gradient(circle at 85% 15%, rgba(255, 94, 0, .48) 0%, transparent 42%);
    --surface: rgba(34, 14, 28, .80);
    --surface-2: rgba(28, 10, 24, .68);
    --surface-3: rgba(255, 255, 255, .08);
    --chat-bg: rgba(16, 6, 16, .42);
    --accent: #ff4d94;
    --accent-2: #ff7a29;
    --bubble-mine: linear-gradient(135deg, #c8175f, #c24a14);
    --bubble-theirs: rgba(66, 34, 44, .88);
    --link: #ffb37a;
    --glass-blur: 14px;
}

body.theme-blossom {
    --bg: #120b14;
    --bg-image:
        radial-gradient(circle at 72% 28%, rgba(200, 40, 110, .48) 0%, transparent 42%),
        radial-gradient(circle at 28% 72%, rgba(110, 60, 150, .46) 0%, transparent 42%);
    --surface: rgba(36, 18, 34, .80);
    --surface-2: rgba(30, 14, 30, .68);
    --surface-3: rgba(255, 255, 255, .08);
    --chat-bg: rgba(18, 8, 18, .42);
    --accent: #ff86b8;
    --accent-2: #ff758c;
    --bubble-mine: linear-gradient(135deg, #ff7eb3, #ff6f8f);
    --bubble-theirs: rgba(70, 38, 58, .88);
    --bubble-text: #fff8fb;
    --link: #ffc2dc;
    --glass-blur: 14px;
}
body.theme-blossom .my-message { --bubble-text: #3a0f24; }

body.theme-neon-glow {
    --bg: #03030d;
    --bg-image:
        radial-gradient(circle at 50% 50%, rgba(0, 229, 255, .30) 0%, transparent 34%),
        radial-gradient(circle at 100% 100%, rgba(255, 0, 255, .38) 0%, transparent 36%);
    --surface: rgba(8, 10, 28, .82);
    --surface-2: rgba(6, 8, 22, .70);
    --surface-3: rgba(255, 255, 255, .07);
    --chat-bg: rgba(2, 3, 12, .48);
    --border: rgba(0, 229, 255, .20);
    --accent: #19e6ff;
    --accent-2: #ff2dff;
    --accent-ink: #001217;
    --bubble-mine: linear-gradient(135deg, #087896, #6c1bbd);
    --bubble-theirs: rgba(16, 26, 44, .90);
    --link: #7af3ff;
    --glass-blur: 14px;
}
body.theme-neon-glow .my-message { --bubble-text: #ffffff; }

/* --- Новые темы --- */
body.theme-midnight {
    --bg: #070b16;
    --bg-image:
        radial-gradient(ellipse at 15% 0%, rgba(60, 90, 220, .30) 0%, transparent 50%),
        radial-gradient(ellipse at 100% 100%, rgba(30, 60, 160, .26) 0%, transparent 50%);
    --surface: #0d1324;
    --surface-2: #0a1020;
    --surface-3: #141c34;
    --chat-bg: #080d1a;
    --border: rgba(120, 150, 255, .12);
    --accent: #6c8cff;
    --accent-2: #3a4fd6;
    --bubble-mine: linear-gradient(135deg, #4661e6, #3547c4);
    --bubble-theirs: #141c34;
    --link: #9db4ff;
}

body.theme-forest {
    --bg: #07120e;
    --bg-image:
        radial-gradient(ellipse at 10% 10%, rgba(40, 160, 100, .26) 0%, transparent 50%),
        radial-gradient(ellipse at 95% 95%, rgba(20, 110, 80, .24) 0%, transparent 50%);
    --surface: #0d1c16;
    --surface-2: #0a1712;
    --surface-3: #142a21;
    --chat-bg: #08150f;
    --border: rgba(120, 220, 170, .12);
    --accent: #4fd69a;
    --accent-2: #1f8f66;
    --accent-ink: #04140d;
    --bubble-mine: linear-gradient(135deg, #148058, #0f6444);
    --bubble-theirs: #142a21;
    --link: #8ff0c2;
}

body.theme-ocean {
    --bg: #04121c;
    --bg-image:
        radial-gradient(ellipse at 20% 0%, rgba(0, 170, 220, .30) 0%, transparent 50%),
        radial-gradient(ellipse at 90% 100%, rgba(0, 90, 170, .30) 0%, transparent 50%);
    --surface: #0a1f2e;
    --surface-2: #081a27;
    --surface-3: #10303f;
    --chat-bg: #051622;
    --border: rgba(110, 200, 240, .13);
    --accent: #3cc8f0;
    --accent-2: #1479b8;
    --accent-ink: #03141d;
    --bubble-mine: linear-gradient(135deg, #0d74a6, #0e5288);
    --bubble-theirs: #10303f;
    --link: #8fdcf7;
}

body.theme-sakura-milk {
    --bg: #fdf1f4;
    --bg-image:
        radial-gradient(circle at 12% 8%, rgba(255, 176, 200, .55) 0%, transparent 42%),
        radial-gradient(circle at 92% 92%, rgba(255, 214, 190, .55) 0%, transparent 42%);
    --surface: #ffffff;
    --surface-2: #fff8fa;
    --surface-3: #fbe7ed;
    --chat-bg: #fdf3f6;
    --border: rgba(160, 60, 90, .13);
    --text: #3a1f2a;
    --text-dim: rgba(58, 31, 42, .66);
    --text-faint: rgba(58, 31, 42, .44);
    --hover: rgba(160, 60, 90, .06);
    --hover-strong: rgba(160, 60, 90, .12);
    --accent: #e0537f;
    --accent-2: #ff9ab8;
    --accent-ink: #ffffff;
    --bubble-mine: linear-gradient(135deg, #cc3663, #b82c59);
    --bubble-theirs: #ffffff;
    --bubble-text: #3a1f2a;
    --link: #c2386a;
    --danger: #d13a52;
    --ok: #2a9d6a;
    --shadow: 0 8px 28px rgba(200, 80, 120, .14);
    --modal-scrim: rgba(253, 236, 242, .74);
    --scroll-thumb: rgba(160, 60, 90, .25);
    color-scheme: light;
}
body.theme-sakura-milk .my-message { --bubble-text: #ffffff; }

body.theme-amoled {
    --bg: #000000;
    --bg-image: none;
    --surface: #0a0a0a;
    --surface-2: #050505;
    --surface-3: #121212;
    --chat-bg: #000000;
    --border: rgba(255, 255, 255, .09);
    --accent: #ffffff;
    --accent-2: #8a8a8a;
    --accent-ink: #000000;
    --bubble-mine: #1f1f1f;
    --bubble-theirs: #101010;
    --link: #c9d8ff;
}

body.theme-gold {
    --bg: #0e0c07;
    --bg-image:
        radial-gradient(ellipse at 15% 5%, rgba(220, 170, 50, .22) 0%, transparent 50%),
        radial-gradient(ellipse at 95% 95%, rgba(160, 110, 20, .22) 0%, transparent 50%);
    --surface: #17130a;
    --surface-2: #120f08;
    --surface-3: #211b0e;
    --chat-bg: #0f0c07;
    --border: rgba(230, 190, 90, .16);
    --accent: #e8bb52;
    --accent-2: #b98a1e;
    --accent-ink: #1a1304;
    --bubble-mine: linear-gradient(135deg, #d9a93a, #a97a17);
    --bubble-theirs: #211b0e;
    --link: #f2cf80;
}
body.theme-gold .my-message { --bubble-text: #1a1304; }
body.theme-forest .my-message, body.theme-ocean .my-message { --bubble-text: #ffffff; }

body.theme-custom {
    --bg: #111;
    --surface: rgba(18, 18, 24, .72);
    --surface-2: rgba(14, 14, 20, .58);
    --surface-3: rgba(255, 255, 255, .10);
    --chat-bg: rgba(0, 0, 0, .28);
    --accent: #a9d6e5;
    --bubble-mine: rgba(60, 64, 78, .82);
    --bubble-theirs: rgba(24, 26, 34, .74);
    --glass-blur: 16px;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    animation: none !important;
}

/* ---------- 2. Фон ---------- */
body[class*="theme-"] {
    background-color: var(--bg);
    background-image: var(--bg-image);
    background-size: auto;
    animation: none;
    color: var(--text);
}
body.theme-custom { background-color: #111; }

/* ---------- 3. Поверхности ---------- */
body[class*="theme-"] .glass-panel,
body[class*="theme-"] .modal-overlay .glass-panel {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
    box-shadow: var(--shadow);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
}
body[class*="theme-"] .chat-full-screen { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
body[class*="theme-"] .sidebar,
body[class*="theme-"] .my-profile,
body[class*="theme-"] .chat-header,
body[class*="theme-"] .input-area {
    background: var(--surface-2);
    border-color: var(--border);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
}
body[class*="theme-"] .chat-window { background: var(--chat-bg); }
body[class*="theme-"] .search-container { background: transparent; }
body[class*="theme-"] .modal-overlay { background: var(--modal-scrim); }

/* Текст */
body[class*="theme-"] h1, body[class*="theme-"] h2, body[class*="theme-"] h3, body[class*="theme-"] h4,
body[class*="theme-"] .settings-modal-panel, body[class*="theme-"] .settings-modal-panel p,
body[class*="theme-"] .form-group label { color: var(--text); }
body[class*="theme-"] .settings-subtitle,
body[class*="theme-"] .settings-section-title p,
body[class*="theme-"] .field-hint,
body[class*="theme-"] .status-text,
body[class*="theme-"] .chat-card-handle { color: var(--text-dim); }
body[class*="theme-"] .status-online { color: var(--ok); }
body[class*="theme-"] .sub-name,
body[class*="theme-"] .chat-card-handle--accent { color: var(--accent); opacity: 1; }
body[class*="theme-"] a { color: var(--link); }

/* Инпуты */
body[class*="theme-"] input,
body[class*="theme-"] textarea {
    background: var(--surface-3);
    border-color: var(--border);
    color: var(--text);
}
body[class*="theme-"] input::placeholder,
body[class*="theme-"] textarea::placeholder { color: var(--text-faint); }
body[class*="theme-"] input:focus,
body[class*="theme-"] textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Кнопки */
body[class*="theme-"] button { color: var(--text); background: var(--hover-strong); box-shadow: none; }
body[class*="theme-"] button:hover { background: color-mix(in srgb, var(--text) 16%, transparent); }
body[class*="theme-"] .icon-btn,
body[class*="theme-"] .attach-btn { background: var(--hover-strong); color: var(--text); }
body[class*="theme-"] .icon-btn:hover,
body[class*="theme-"] .attach-btn:hover { background: color-mix(in srgb, var(--text) 18%, transparent); }
body[class*="theme-"] .send-btn,
body[class*="theme-"] .save-profile-btn {
    background: var(--bubble-mine);
    color: var(--accent-ink);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 30%, transparent);
}
body[class*="theme-"] .send-btn i { color: inherit; }
body.theme-light .send-btn, body.theme-sakura-milk .send-btn,
body.theme-nebula .send-btn, body.theme-neon-sunset .send-btn,
body.theme-blossom .send-btn, body.theme-neon-glow .send-btn,
body.theme-midnight .send-btn { color: #fff; }
body[class*="theme-"] .send-btn:hover { filter: brightness(1.08); background: var(--bubble-mine); }
body[class*="theme-"] .logout-btn-modal { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
body[class*="theme-"] .btn-danger { background: var(--danger); color: #fff; }
body[class*="theme-"] .back-btn { background: transparent; color: var(--text); }

/* Карточки чатов */
body[class*="theme-"] .user-card { background: transparent; }
body[class*="theme-"] .user-card:hover { background: var(--hover); }
body[class*="theme-"] .avatar { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink); }
body.theme-light .avatar, body.theme-sakura-milk .avatar { color: #fff; }
body[class*="theme-"] .online-badge { border-color: var(--surface-2); }
body[class*="theme-"] .unread-badge { background: var(--accent); color: var(--accent-ink); }
body[class*="theme-"] .saved-messages-icon { color: var(--accent); }
.chat-card-name { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-card-handle { font-size: 11px; }
.search-empty { text-align: center; color: var(--text-dim); margin: 10px 0; }
.search-empty i { font-size: 18px; margin-right: 5px; vertical-align: -3px; }

/* ---------- 4. Пузыри ---------- */
body[class*="theme-"] .my-message  { background: var(--bubble-mine) !important;   color: var(--bubble-text) !important; }
body[class*="theme-"] .their-message { background: var(--bubble-theirs) !important; color: var(--bubble-text) !important; }
body.theme-light .their-message,
body.theme-sakura-milk .their-message { box-shadow: 0 1px 2px rgba(20, 24, 40, .08) !important; }
body.theme-light .their-message { color: #14161c !important; }
body.theme-sakura-milk .their-message { color: #3a1f2a !important; }
body[class*="theme-"] .message-footer,
body[class*="theme-"] .message-status,
body[class*="theme-"] .edited-tag { color: color-mix(in srgb, currentColor 62%, transparent) !important; }
body[class*="theme-"] .message-status.read { color: var(--ok) !important; }
body.theme-light .my-message .message-status.read,
body.theme-sakura-milk .my-message .message-status.read,
body.theme-nebula .my-message .message-status.read,
body.theme-neon-sunset .my-message .message-status.read,
body.theme-blossom .my-message .message-status.read,
body.theme-neon-glow .my-message .message-status.read,
body.theme-midnight .my-message .message-status.read { color: #fff !important; }
body[class*="theme-"] .message a,
.msg-link { color: var(--link) !important; text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
body[class*="theme-"] .my-message a { color: inherit !important; }
body[class*="theme-"] .system-message { background: var(--hover); color: var(--text-dim); }
body[class*="theme-"] .forwarded-label { color: var(--text-dim) !important; }
body[class*="theme-"] .message-reply { border-left-color: currentColor !important; }

/* Плавное появление только новых сообщений */
.message { animation: kkMsgIn .22s cubic-bezier(.2, .8, .2, 1) both !important; }
@keyframes kkMsgIn { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }

/* Изображения: плейсхолдер и плавная подгрузка */
.message-images-grid img { background: var(--hover-strong); opacity: 0; transition: opacity .25s ease; }
.message-images-grid img.is-loaded, .message-images-grid img[src^="http"] { opacity: 1; }

/* ---------- 5. Панель ответа/редактирования, скролл, драг-н-дроп ---------- */
body[class*="theme-"] #reply-preview,
body[class*="theme-"] #edit-preview { background: var(--surface-2) !important; border-top-color: var(--border) !important; }
body[class*="theme-"] #reply-preview { color: var(--accent) !important; }
body[class*="theme-"] #reply-preview button, body[class*="theme-"] #edit-preview button { background: transparent !important; color: var(--text-dim) !important; }
body[class*="theme-"] .typing-indicator .dot { background: var(--text-dim) !important; }
body[class*="theme-"] #scroll-bottom-btn { background: var(--surface); color: var(--text); border-color: var(--border); }
body[class*="theme-"] #drop-overlay { background: var(--modal-scrim); color: var(--text); }
body[class*="theme-"] #drop-overlay .drop-content i,
body[class*="theme-"] #drop-overlay .drop-content .highlight { color: var(--accent); }
body[class*="theme-"] ::-webkit-scrollbar-thumb { background: var(--scroll-thumb); }
body[class*="theme-"] * { scrollbar-color: var(--scroll-thumb) transparent; }
body[class*="theme-"] .voice-play-btn { background: color-mix(in srgb, currentColor 16%, transparent) !important; color: inherit !important; }
body[class*="theme-"] .action-btn { background: var(--surface); color: var(--text-dim); border: 1px solid var(--border); }
body[class*="theme-"] .action-btn:hover { background: var(--hover-strong); color: var(--text); }
body[class*="theme-"] #chat-header-menu { background: var(--surface) !important; border-color: var(--border) !important; }
body[class*="theme-"] #chat-header-menu button { color: var(--text) !important; background: transparent !important; }
body[class*="theme-"] #chat-header-menu button:hover { background: var(--hover) !important; }
body[class*="theme-"] input[type="date"] { color-scheme: inherit; }

/* ---------- 6. Настройки ---------- */
body[class*="theme-"] .settings-modal-panel { background: var(--surface); }
body[class*="theme-"] .settings-tabs { background: var(--hover); border-right-color: var(--border); }
body[class*="theme-"] .settings-tabs .tab-btn { color: var(--text-dim); background: transparent !important; border: 1px solid transparent; }
body[class*="theme-"] .settings-tabs .tab-btn.active {
    color: var(--text);
    background: color-mix(in srgb, var(--accent) 16%, transparent) !important;
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
body[class*="theme-"] .settings-header, body[class*="theme-"] .settings-footer { border-color: var(--border); }
body[class*="theme-"] .settings-info-card,
body[class*="theme-"] .settings-secondary-action { background: var(--hover) !important; color: var(--text-dim); border: 1px solid var(--border); }
body[class*="theme-"] .settings-close-icon { background: var(--hover-strong) !important; color: var(--text); }
body[class*="theme-"] .close-btn, body[class*="theme-"] .btn-secondary { background: var(--hover-strong) !important; color: var(--text) !important; }

/* ---------- 7. Выбор темы: карточки с превью ---------- */
.theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.theme-btn[data-theme] {
    position: relative; flex-direction: column; align-items: stretch !important; gap: 8px !important;
    padding: 8px !important; min-height: 0 !important; text-align: left;
    background: var(--hover) !important; border: 1.5px solid var(--border) !important;
    border-radius: 14px !important; overflow: hidden; transition: transform .15s ease, border-color .15s ease;
}
.theme-btn[data-theme]:hover { transform: translateY(-1px); }
.theme-btn[data-theme].active { border-color: var(--accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent); }
.theme-btn[data-theme].active::after {
    content: "\2713"; position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%;
    background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.theme-btn[data-theme] > i { display: none; }
.theme-btn[data-theme] > span { font-size: 13px; font-weight: 600; padding: 0 4px 2px; color: var(--text); }
.theme-preview {
    height: 58px; border-radius: 9px; padding: 8px; display: flex; flex-direction: column; justify-content: center; gap: 5px;
    background-color: var(--pv-bg); background-image: var(--pv-img, none); border: 1px solid rgba(128, 128, 128, .18);
}
.theme-preview i { display: block; height: 11px; border-radius: 8px; font-size: 0; }
.theme-preview i:nth-child(1) { width: 62%; background: var(--pv-theirs); align-self: flex-start; }
.theme-preview i:nth-child(2) { width: 48%; background: var(--pv-mine); align-self: flex-end; }

/* ---------- 7b. Остатки: модалка профиля, кнопки, запись, авторизация ---------- */
/* В HTML эти узлы имеют inline-цвета, поэтому перебиваем их токенами через !important. */
body[class*="theme-"] #profile-modal-display-name { color: var(--text) !important; }
body[class*="theme-"] #profile-modal-username { color: var(--accent) !important; }
body[class*="theme-"] #profile-modal-birthdate { color: var(--text-dim) !important; }
body[class*="theme-"] .profile-modal-bio { background: var(--hover); color: var(--text); border-radius: 12px; }
body[class*="theme-"] #delete-modal p,
body[class*="theme-"] #forward-modal h3, body[class*="theme-"] #delete-modal h3 { color: var(--text) !important; }
body[class*="theme-"] #delete-modal p { color: var(--text-dim) !important; }
body[class*="theme-"] .modal-divider { border-top-color: var(--border); }
body[class*="theme-"] #auth-screen.glass-panel { background: var(--surface); }
body[class*="theme-"] .avatar-click-area:hover { opacity: .85; }
body[class*="theme-"] .language-option { background: var(--hover); border-color: var(--border); }
body[class*="theme-"] .custom-theme-label {
    background: linear-gradient(135deg, var(--hover-strong), var(--hover)); color: var(--text);
    border: 1px dashed var(--border); font-weight: 700;
}
body[class*="theme-"] .action-btn.delete-btn:hover { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
body[class*="theme-"] #mic-btn { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
body[class*="theme-"] #mic-btn.recording, body[class*="theme-"] .recording { background: var(--danger) !important; color: #fff !important; }
body[class*="theme-"] #gallery-modal { background: rgba(0, 0, 0, .95); }

/* ---------- 8. Доступность и производительность ---------- */
button:focus-visible, input:focus-visible, textarea:focus-visible, .user-card:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* На слабых/мобильных устройствах blur — самый дорогой эффект. */
@media (max-width: 768px) {
    body[class*="theme-"] .sidebar, body[class*="theme-"] .my-profile,
    body[class*="theme-"] .chat-header, body[class*="theme-"] .input-area,
    body[class*="theme-"] .chat-window { -webkit-backdrop-filter: none; backdrop-filter: none; }
}



/* ==========================================================================
   KODKOD — FIXES v5
   1) меню «⋮» в шапке чата поверх сообщений
   2) читаемый текст во всех темах
   3) бейдж непрочитанных
   ========================================================================== */

/* ---------- 1. Слои чата: шапка (и её выпадающее меню) выше сообщений ---------- */
/* У шапки в темах есть backdrop-filter → она образует собственный слой, и меню
   внутри неё раньше рисовалось ПОД сообщениями. Задаём явный порядок слоёв. */
.chat-header { position: relative; z-index: 30; }
.messages-container { position: relative; z-index: 1; }
.typing-indicator, #reply-preview, #edit-preview, #preview-container { position: relative; z-index: 2; }
.input-area { position: relative; z-index: 3; }
#scroll-bottom-btn { z-index: 20 !important; }
#chat-header-menu-wrap { z-index: 40; }
#chat-header-menu { z-index: 1000 !important; min-width: 230px !important; }

#chat-header-menu,
body[class*="theme-"] #chat-header-menu {
    background: var(--surface-solid, #191b23) !important; /* непрозрачный фон: сообщения не просвечивают */
    border: 1px solid var(--border, rgba(255,255,255,.1)) !important;
    box-shadow: var(--shadow, 0 14px 35px rgba(0,0,0,.35)) !important;
}
#chat-header-menu .chat-menu-item { margin: 0 !important; width: 100%; box-sizing: border-box; }
body[class*="theme-"] #chat-header-menu .chat-menu-danger { color: var(--danger) !important; }
body[class*="theme-"] #chat-header-menu .chat-menu-danger:hover {
    background: color-mix(in srgb, var(--danger) 14%, transparent) !important;
}

/* ---------- 2. Контраст в темах ---------- */
/* Непрозрачные аналоги --surface (для меню и т.п.) и цвет «предупреждения». */
body { --surface-solid: #17181e; --warn: #ffb703; --on-mine: #ffffff; }
body.theme-light, body.theme-sakura-milk { --surface-solid: #ffffff; --warn: #8a5a00; }
body.theme-nebula      { --surface-solid: #1a0d30; }
body.theme-neon-sunset { --surface-solid: #250f1f; }
body.theme-blossom     { --surface-solid: #291428; --on-mine: #3a0f24; }
body.theme-neon-glow   { --surface-solid: #0a0c22; }
body.theme-midnight    { --surface-solid: #0d1324; }
body.theme-forest      { --surface-solid: #0d1c16; }
body.theme-ocean       { --surface-solid: #0a1f2e; }
body.theme-amoled      { --surface-solid: #0a0a0a; }
body.theme-gold        { --surface-solid: #17130a; --on-mine: #1a1304; }
body.theme-custom      { --surface-solid: #16161c; }

/* Кнопка отправки и «Сохранить профиль»: текст берётся из --on-mine, а не из --accent-ink.
   Раньше в темах «Стандартная» и AMOLED иконка/текст были тёмными на тёмной заливке. */
body[class*="theme-"] .send-btn,
body[class*="theme-"] .save-profile-btn,
body.theme-light .send-btn, body.theme-sakura-milk .send-btn,
body.theme-nebula .send-btn, body.theme-neon-sunset .send-btn,
body.theme-blossom .send-btn, body.theme-neon-glow .send-btn,
body.theme-midnight .send-btn { color: var(--on-mine) !important; }
body[class*="theme-"] .send-btn i, body[class*="theme-"] .save-profile-btn i { color: inherit !important; }

body[class*="theme-"] .btn-danger { background: color-mix(in srgb, var(--danger) 78%, #000); color: #fff; }

/* Пустые состояния чата и «Избранное» (раньше — белый текст inline, невидимый на светлых темах) */
.chat-empty-hint { text-align: center; color: var(--text-dim, rgba(255,255,255,.6)); margin-top: 50px; }
body[class*="theme-"] .chat-card-handle { color: var(--text-dim); }

/* Внутри пузырей цвет производный от цвета самого пузыря, а не от общей темы */
body[class*="theme-"] .forwarded-label { color: color-mix(in srgb, currentColor 68%, transparent) !important; }
body[class*="theme-"] .message-reply { color: inherit !important; }
body[class*="theme-"] #edit-preview { color: var(--warn) !important; }

/* Оверлей перетаскивания фото, настройки, удаление аккаунта, скелетоны */
body[class*="theme-"] .drop-content p { color: var(--text-dim); }
body[class*="theme-"] .settings-eyebrow { color: var(--text-dim); opacity: 1; }
body[class*="theme-"] .settings-tabs .tab-btn small { color: var(--text-dim); }
body[class*="theme-"] .settings-danger-card strong { color: var(--danger); }
body[class*="theme-"] .settings-danger-card span { color: var(--text-dim); }
body[class*="theme-"] .settings-danger-card button {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 35%, transparent);
    background: color-mix(in srgb, var(--danger) 10%, transparent);
}
body[class*="theme-"] #delete-account-modal h2 { color: var(--danger) !important; }
body[class*="theme-"] #delete-account-modal p { color: var(--text-dim) !important; }
body[class*="theme-"] #delete-account-modal p:nth-of-type(2) { color: var(--danger) !important; }
body[class*="theme-"] #delete-account-progress { color: var(--text-dim) !important; }
body[class*="theme-"] .skeleton-message { background: var(--hover-strong); }

/* ---------- 3. Бейдж непрочитанных: «99+» не должен ломать круг ---------- */
.unread-badge { border-radius: 999px; box-sizing: border-box; min-width: 20px; flex-shrink: 0; }

/* ===== KODKOD: значок рядом с именем ===== */
.name-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    vertical-align: middle;
    font-size: 0.9em;
    line-height: 1;
    transform: translateY(-1px);
}
.name-badge img {
    width: 1.15em;
    height: 1.15em;
    min-width: 16px;
    min-height: 16px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18), 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* --- Редактор значка в настройках --- */
.badge-field > label { margin-bottom: 8px; }
.badge-card {
    display: flex; flex-direction: column; gap: 16px;
    padding: 16px; border-radius: 18px;
    background: var(--surface-3, rgba(255,255,255,.055));
    border: 1px solid var(--border, rgba(255,255,255,.10));
}
.badge-hero {
    display: flex; align-items: center; gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border, rgba(255,255,255,.10));
}
.badge-current {
    width: 56px; height: 56px; min-width: 56px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 18px; font-size: 28px;
    background: var(--hover, rgba(255,255,255,.07));
    border: 1px solid var(--border, rgba(255,255,255,.14));
    transition: border-color .2s, background .2s;
}
.badge-current.is-empty { border-style: dashed; }
.badge-current:not(.is-empty) { border-color: var(--accent, #a9d6e5); background: var(--hover-strong, rgba(255,255,255,.11)); }
.badge-current .name-badge { margin-left: 0; transform: none; font-size: 28px; }
.badge-current .name-badge img { width: 42px; height: 42px; }
.badge-empty { font-size: 12px; color: var(--text-faint, rgba(255,255,255,.4)); font-weight: 600; }
.badge-hero-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.badge-hero-caption { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint, rgba(255,255,255,.42)); font-weight: 600; }
.badge-name-preview {
    font-size: 16px; font-weight: 700; color: var(--text, #fff);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.badge-section { display: flex; flex-direction: column; gap: 8px; }
.badge-section-title { font-size: 12px; font-weight: 600; color: var(--text-dim, rgba(255,255,255,.62)); }
.badge-presets { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.badge-preset {
    width: 100%; aspect-ratio: 1 / 1; height: auto; margin: 0; padding: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; line-height: 1; border-radius: 14px;
    background: var(--hover, rgba(255,255,255,.06));
    border: 1px solid transparent;
    cursor: pointer; transition: background .15s, transform .15s, border-color .15s;
}
.badge-preset:hover { background: var(--hover-strong, rgba(255,255,255,.16)); transform: translateY(-2px); }
.badge-preset.active { border-color: var(--accent, #a9d6e5); background: var(--hover-strong, rgba(169,214,229,.15)); }
.badge-actions { position: relative; display: flex; align-items: stretch; gap: 10px; }
.file-input-hidden {
    position: absolute !important; top: 0; left: 0; width: 1px; height: 1px; margin: -1px;
    padding: 0; border: 0; opacity: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); pointer-events: none;
}
/* Селекторы с .badge-field .badge-actions — чтобы не проигрывать общим правилам
   `.form-group label` и `button` (они ломали display/margin и кнопка стояла криво). */
.badge-field .badge-actions .badge-upload-btn {
    flex: 1 1 auto; min-width: 0; min-height: 56px; margin: 0; padding: 8px 14px 8px 8px;
    box-sizing: border-box; display: flex; align-items: center; justify-content: flex-start; gap: 12px;
    border-radius: 14px; cursor: pointer; text-align: left; line-height: 1.2;
    font-family: inherit; font-size: 13px; font-weight: 600;
    color: var(--text, #fff);
    background: var(--hover, rgba(255,255,255,.06));
    border: 1.5px dashed var(--border, rgba(255,255,255,.22));
    transition: background .2s, border-color .2s, transform .15s;
    -webkit-tap-highlight-color: transparent; user-select: none;
}
.badge-field .badge-actions .badge-upload-btn:hover { background: var(--hover-strong, rgba(255,255,255,.12)); border-color: var(--accent, #a9d6e5); }
.badge-field .badge-actions .badge-upload-btn:active { transform: scale(.985); }
.badge-upload-icon {
    width: 40px; height: 40px; flex: 0 0 40px; display: flex; align-items: center; justify-content: center;
    border-radius: 12px; color: var(--accent, #a9d6e5);
    background: color-mix(in srgb, var(--accent, #a9d6e5) 18%, transparent);
}
.badge-upload-icon i { font-size: 21px; line-height: 1; margin: 0; }
.badge-upload-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.badge-upload-text strong { font-size: 13.5px; font-weight: 700; color: var(--text, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge-upload-text small { margin: 0; font-size: 11.5px; font-weight: 500; color: var(--text-faint, rgba(255,255,255,.5)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge-field .badge-actions .badge-clear-btn {
    flex: 0 0 56px; width: 56px; height: auto; min-height: 56px; margin: 0; padding: 0;
    display: flex; align-items: center; justify-content: center; box-sizing: border-box;
    border-radius: 14px; cursor: pointer; font-size: 16px;
    color: var(--danger, #ff8b8b);
    background: var(--hover, rgba(255,255,255,.06));
    border: 1px solid var(--border, rgba(255,255,255,.14));
    transition: background .2s, border-color .2s, transform .15s;
}
.badge-field .badge-actions .badge-clear-btn i { font-size: 22px; margin: 0; }
.badge-field .badge-actions .badge-clear-btn:hover { background: rgba(255,82,82,.14); border-color: rgba(255,82,82,.45); }
.badge-field .badge-actions .badge-clear-btn:active { transform: scale(.94); }
.badge-card .field-hint { margin-top: -4px; }
@media (max-width: 768px) {
    .badge-card { padding: 14px; gap: 14px; }
    .badge-hero { padding-bottom: 14px; }
    .badge-presets { gap: 6px; }
    .badge-preset { font-size: 20px; border-radius: 12px; }
    .badge-field .badge-actions .badge-upload-btn { padding-right: 10px; gap: 10px; }
    .badge-upload-text strong { font-size: 13px; }
    .badge-upload-text small { font-size: 11px; }
}

/* ===== KODKOD: карточка профиля ===== */
.profile-sheet-overlay { z-index: 300; padding: 16px; box-sizing: border-box; }
.profile-sheet {
    position: relative;
    width: 100%; max-width: 400px;
    max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px);
    margin: auto;
    border-radius: 26px;
    overflow: hidden;
    background: rgba(22, 24, 32, 0.82);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    animation: profileSheetIn 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2);
    display: flex; flex-direction: column;
}
@keyframes profileSheetIn {
    from { opacity: 0; transform: translateY(26px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.profile-sheet-cover {
    height: 110px; min-height: 110px;
    background:
        radial-gradient(circle at 20% 20%, rgba(169, 214, 229, 0.35), transparent 60%),
        radial-gradient(circle at 85% 30%, rgba(120, 90, 220, 0.4), transparent 55%),
        linear-gradient(135deg, rgba(74, 78, 105, 0.9), rgba(34, 34, 59, 0.95));
    background-size: cover; background-position: center;
    position: relative;
}
.profile-sheet-cover::after {
    content: ''; position: absolute; inset: 0;
    backdrop-filter: blur(30px) saturate(1.3); -webkit-backdrop-filter: blur(30px) saturate(1.3);
    background: linear-gradient(180deg, rgba(15, 16, 20, 0.15), rgba(15, 16, 20, 0.55));
}
.profile-sheet-close {
    position: absolute; top: 14px; right: 14px; z-index: 5;
    width: 38px; height: 38px; min-width: 38px; margin: 0; padding: 0;
    border-radius: 50%; border: none;
    background: rgba(0, 0, 0, 0.35); color: #fff; font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: 0.2s;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.profile-sheet-close:hover { background: rgba(0, 0, 0, 0.55); transform: rotate(90deg); }
.profile-sheet-body {
    padding: 0 24px 24px;
    display: flex; flex-direction: column; align-items: center;
    overflow-y: auto;
}
.profile-sheet-avatar-wrap { position: relative; margin-top: -52px; z-index: 2; }
.profile-sheet-avatar {
    width: 104px !important; height: 104px !important;
    font-size: 44px;
    border-radius: 34px;
    border: 4px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.profile-sheet-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-online-dot {
    position: absolute; right: 4px; bottom: 6px;
    width: 20px; height: 20px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 3px solid rgba(22, 24, 32, 0.95);
    display: none;
}
.profile-online-dot.active { display: block; background: #4ade80; box-shadow: 0 0 10px rgba(74, 222, 128, 0.8); }
.profile-sheet-name {
    margin: 14px 0 4px;
    font-size: 24px; font-weight: 800;
    text-align: center; letter-spacing: 0.2px;
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
}
.profile-sheet-handle-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.profile-sheet-handle {
    color: var(--theme-accent, #a9d6e5);
    font-weight: 700; font-size: 14px;
    background: rgba(169, 214, 229, 0.1);
    padding: 4px 12px; border-radius: 20px;
    border: 1px solid rgba(169, 214, 229, 0.2);
}
.profile-sheet-status { font-size: 13px; color: rgba(255, 255, 255, 0.55); font-weight: 600; }
.profile-sheet-status.status-online { color: #4ade80; }
.profile-sheet-bio {
    margin-top: 14px;
    width: 100%; box-sizing: border-box;
    padding: 12px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    font-size: 14px; line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
    white-space: pre-wrap; word-break: break-word;
}
.profile-sheet-info {
    width: 100%; margin-top: 14px;
    display: flex; flex-direction: column; gap: 8px;
}
.profile-info-row {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.profile-info-row > i { font-size: 20px; color: var(--theme-accent, #a9d6e5); }
.profile-info-row-text { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.profile-info-row-text small { font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: rgba(255, 255, 255, 0.45); font-weight: 700; }
.profile-info-row-text span { font-size: 14px; font-weight: 600; color: #fff; }
.profile-sheet-actions { width: 100%; display: flex; gap: 10px; margin-top: 18px; }
.profile-action-primary, .profile-action-secondary {
    flex: 1; margin: 0; padding: 13px 14px;
    border-radius: 15px; border: none;
    font-size: 15px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    cursor: pointer; transition: 0.2s;
}
.profile-action-primary {
    background: linear-gradient(135deg, var(--theme-accent, #a9d6e5), #6b8cce);
    color: #10121a;
}
.profile-action-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
.profile-action-secondary {
    background: rgba(255, 255, 255, 0.09); color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.14);
}
.profile-action-secondary:hover { background: rgba(255, 255, 255, 0.17); }
@media (max-width: 480px) {
    .profile-sheet { max-width: 100%; border-radius: 22px; }
    .profile-sheet-body { padding: 0 18px 18px; }
}

/* ==========================================================
   KODKOD — FIXES v6
   1) Профиль: баннер больше не перекрывает аватар.
      Причина: у .profile-sheet-body стоит overflow-y:auto, а аватар
      «залезал» на баннер отрицательным margin ребёнка — scroll-контейнер
      обрезал всё, что уходит выше его верхней границы. Теперь вверх
      сдвигается само тело карточки (margin), а не элемент внутри него.
   2) Аватар в профиле: аккуратная тонкая рамка вместо толстой.
   3) Карточка профиля подхватывает цвета текущей темы
      (в т.ч. «Светлая» и «Сакура-молоко»).
   4) Значок «Избранного» — в цвет букв стандартного аватара.
   ========================================================== */

/* ---------- 1. Баннер vs аватар ---------- */
.profile-sheet-body {
    margin-top: -52px;   /* тело карточки заходит на баннер */
    padding-top: 0;      /* аватар остаётся внутри scroll-области и не обрезается */
}
.profile-sheet-avatar-wrap { margin-top: 0; }

/* ---------- 2. Рамка аватара в профиле ---------- */
.profile-sheet-avatar {
    border-radius: 50% !important;
    border: 3px solid var(--surface-solid, rgba(22, 24, 32, .95)) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28) !important;
}
.profile-sheet-avatar img { border-radius: 50% !important; }

/* ---------- 3. Карточка профиля в цветах темы ---------- */
body[class*="theme-"] .profile-sheet {
    background: var(--surface-solid, var(--surface));
    border-color: var(--border);
    color: var(--text);
    box-shadow: var(--shadow);
}
body[class*="theme-"] .profile-sheet-cover {
    background:
        radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 60%),
        radial-gradient(circle at 85% 30%, color-mix(in srgb, var(--accent-2) 50%, transparent), transparent 55%),
        linear-gradient(135deg,
            color-mix(in srgb, var(--accent) 55%, var(--surface-solid, var(--surface))),
            color-mix(in srgb, var(--accent-2) 55%, var(--surface-solid, var(--surface))));
}
body[class*="theme-"] .profile-sheet-cover::after {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--surface-solid, var(--surface)) 5%, transparent),
        color-mix(in srgb, var(--surface-solid, var(--surface)) 62%, transparent));
}
body[class*="theme-"] .profile-sheet-name { color: var(--text); }
body[class*="theme-"] .profile-sheet-handle {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-color: color-mix(in srgb, var(--accent) 26%, transparent);
}
body[class*="theme-"] .profile-sheet-status { color: var(--text-dim); }
body[class*="theme-"] .profile-sheet-status.status-online { color: var(--ok); }
body[class*="theme-"] .profile-online-dot { border-color: var(--surface-solid, var(--surface)); }
body[class*="theme-"] .profile-sheet-bio {
    background: var(--hover);
    border-color: var(--border);
    color: var(--text);
}
body[class*="theme-"] .profile-info-row {
    background: var(--hover);
    border-color: var(--border);
}
body[class*="theme-"] .profile-info-row > i { color: var(--accent); }
body[class*="theme-"] .profile-info-row-text small { color: var(--text-faint); }
body[class*="theme-"] .profile-info-row-text span { color: var(--text); }
body[class*="theme-"] .profile-action-primary {
    background: var(--bubble-mine);
    color: var(--on-mine, #fff);
}
body[class*="theme-"] .profile-action-secondary {
    background: var(--hover-strong);
    color: var(--text);
    border-color: var(--border);
}
body[class*="theme-"] .profile-action-secondary:hover { background: var(--hover); }

/* ---------- 4. Значок «Избранного» = цвет букв аватара ---------- */
/* Раньше красился в var(--accent) поверх акцентного градиента аватара и
   сливался с фоном. inherit берёт тот же цвет, что у буквы-заглушки. */
.saved-messages-icon,
body[class*="theme-"] .saved-messages-icon {
    color: inherit !important;
}

/* ===== Подгрузка истории вверх: без рывков ===== */
/* Позицию скролла держим вручную (см. loadOlderMessages) — родной scroll anchoring
   браузера с ней конфликтует и даёт двойной сдвиг. */
.messages-container { overflow-anchor: none; }
/* Анимация появления — только у новых живых сообщений */
.message-wrapper.no-anim .message { animation: none !important; }
/* Резерв высоты у ещё не загруженного одиночного фото, чтобы лента не прыгала */
.message-images-grid.grid-1 img:not(.is-loaded) { aspect-ratio: 4 / 3; min-height: 160px; }
.message-images-grid.grid-1 img.is-loaded { aspect-ratio: auto; min-height: 0; }

/* =====================================================================
   KODKOD · АДМИН-СИСТЕМА
   ===================================================================== */

/* --- Кнопка входа в админку в шапке --- */
.admin-entry-btn { color: #ffd166; }
.admin-entry-btn:hover { background: rgba(255, 209, 102, .14); }

/* --- Плашка «техработы включены» для админа --- */
#maintenance-admin-banner {
    position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
    z-index: 1500; display: flex; align-items: center; gap: 10px;
    max-width: min(92vw, 560px); padding: 9px 12px 9px 14px;
    border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #ffd166;
    background: rgba(30, 24, 12, .92); border: 1px solid rgba(255, 209, 102, .35);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 30px rgba(0,0,0,.45); animation: adminBannerIn .3s ease;
}
#maintenance-admin-banner i { font-size: 17px; }
#maintenance-admin-banner span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#maintenance-admin-banner button {
    margin: 0; padding: 6px 12px; width: auto; border-radius: 999px; border: none;
    font-size: 12px; font-weight: 700; cursor: pointer; color: #1d1608;
    background: #ffd166; flex-shrink: 0;
}
@keyframes adminBannerIn { from { opacity: 0; transform: translate(-50%, -12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* --- Блокирующие оверлеи (техработы / бан) --- */
#maintenance-overlay, #ban-overlay {
    align-items: center; justify-content: center; padding: 24px; box-sizing: border-box;
    background: radial-gradient(1200px 700px at 50% -10%, rgba(90, 110, 255, .12), transparent 60%), #0b0c11;
}
.block-overlay-card {
    max-width: 420px; width: 100%; text-align: center; padding: 44px 32px 36px;
    border-radius: 28px; box-sizing: border-box;
    background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09);
    box-shadow: 0 30px 80px rgba(0,0,0,.5);
    animation: blockCardIn .35s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes blockCardIn { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
.block-overlay-icon {
    position: relative; width: 92px; height: 92px; margin: 0 auto 22px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 30px; font-size: 44px; color: #a9d6e5;
    background: rgba(169, 214, 229, .1); border: 1px solid rgba(169, 214, 229, .22);
}
.block-overlay-icon i { animation: wrenchWiggle 2.4s ease-in-out infinite; }
@keyframes wrenchWiggle { 0%, 88%, 100% { transform: rotate(0); } 92% { transform: rotate(-16deg); } 96% { transform: rotate(12deg); } }
.block-overlay-ring {
    position: absolute; inset: -7px; border-radius: 36px;
    border: 2px solid rgba(169, 214, 229, .35); border-top-color: transparent;
    animation: blockRingSpin 3.2s linear infinite;
}
@keyframes blockRingSpin { to { transform: rotate(360deg); } }
.block-overlay-icon--ban { color: #ff8b8b; background: rgba(255, 82, 82, .1); border-color: rgba(255, 82, 82, .25); }
.block-overlay-icon--ban i { animation: none; }
.block-overlay-card h2 { margin: 0 0 12px; font-size: 24px; color: #fff; display: block; }
.block-overlay-text { margin: 0 0 18px; font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.62); white-space: pre-wrap; }
.block-overlay-note {
    display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px;
    border-radius: 999px; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.55);
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
}
.ban-reason {
    margin: 0 0 18px; padding: 11px 14px; border-radius: 12px;
    font-size: 13px; line-height: 1.45; color: #ffb4b4; text-align: left;
    background: rgba(255, 82, 82, .07); border: 1px solid rgba(255, 82, 82, .16);
}
.ban-logout-btn {
    display: inline-flex; align-items: center; gap: 8px; width: auto; margin: 2px 0 0;
    padding: 11px 20px; border-radius: 12px; cursor: pointer;
    font-size: 13.5px; font-weight: 700; color: #fff;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16);
    transition: background .2s;
}
.ban-logout-btn:hover { background: rgba(255,255,255,.18); }

/* --- Тосты --- */
#kodkod-toast-wrap {
    position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
    z-index: 30000; display: flex; flex-direction: column; align-items: center; gap: 8px;
    pointer-events: none;
}
.kodkod-toast {
    display: flex; align-items: center; gap: 9px; padding: 11px 18px;
    border-radius: 999px; font-size: 13.5px; font-weight: 600; color: #fff;
    background: rgba(22, 30, 24, .94); border: 1px solid rgba(88, 214, 141, .3);
    box-shadow: 0 12px 34px rgba(0,0,0,.45); backdrop-filter: blur(10px);
    opacity: 0; transform: translateY(12px); transition: opacity .3s, transform .3s;
    max-width: 88vw;
}
.kodkod-toast i { font-size: 18px; color: #58d68d; }
.kodkod-toast--error { background: rgba(34, 20, 20, .94); border-color: rgba(255, 107, 107, .32); }
.kodkod-toast--error i { color: #ff8b8b; }
.kodkod-toast.is-visible { opacity: 1; transform: none; }

/* --- Админ-панель --- */
.admin-overlay { z-index: 140; }
.admin-panel {
    max-width: 860px !important; width: min(94vw, 860px) !important;
    padding: 0 !important; overflow: hidden !important; text-align: left;
    background: rgba(17, 18, 24, .96); border: 1px solid rgba(255,255,255,.1);
}
.admin-header { padding: 22px 26px 16px; border-bottom: 1px solid rgba(255,255,255,.06); }
.admin-header h2 i { color: #ffd166; }
.admin-layout { min-height: 480px; }
.admin-tabs { border-right: 1px solid rgba(255,255,255,.06); padding: 14px 10px !important; }
.admin-tabs .tab-btn small {
    margin-left: auto; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    font-size: 10.5px; font-weight: 700; color: #fff; background: #ff5252; opacity: 1;
}
.admin-body { min-width: 0; padding: 20px 24px; max-height: 62vh; overflow-y: auto; }

/* --- Поиск и списки --- */
.admin-search-row { display: flex; gap: 9px; align-items: center; margin-bottom: 14px; }
.admin-search-box {
    flex: 1; display: flex; align-items: center; gap: 9px; height: 44px; padding: 0 14px;
    border-radius: 13px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.1);
    transition: border-color .2s;
}
.admin-search-box:focus-within { border-color: rgba(169, 214, 229, .45); }
.admin-search-box > i { font-size: 17px; color: rgba(255,255,255,.4); flex-shrink: 0; }
.admin-search-box input {
    flex: 1; min-width: 0; height: auto; margin: 0; padding: 0; border: none; background: transparent;
    font-size: 14px; color: #fff; outline: none; box-shadow: none;
}
.admin-search-box input:focus { border: none; background: transparent; }
.admin-round-btn {
    width: 44px; height: 44px; min-width: 44px; margin: 0; padding: 0; border-radius: 13px;
    display: flex; align-items: center; justify-content: center; font-size: 18px;
    color: rgba(255,255,255,.75); cursor: pointer;
    background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.1);
    transition: background .2s, transform .15s;
}
.admin-round-btn:hover { background: rgba(255,255,255,.12); }
.admin-round-btn:active { transform: scale(.93); }
.admin-tab-hint { flex: 1; font-size: 12px; color: rgba(255,255,255,.42); display: flex; align-items: center; gap: 7px; }
.admin-tab-hint i { font-size: 15px; color: rgba(169, 214, 229, .7); }
.admin-list { display: flex; flex-direction: column; gap: 9px; }
.admin-empty {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 44px 20px; font-size: 13.5px; color: rgba(255,255,255,.4); text-align: center;
}
.admin-empty i { font-size: 38px; opacity: .5; }

/* --- Карточка пользователя --- */
.admin-user-card {
    border-radius: 16px; background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07); overflow: hidden;
    transition: border-color .2s, background .2s;
}
.admin-user-card:hover { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.055); }
.admin-user-row { display: flex; align-items: center; gap: 12px; padding: 11px 13px; }
.admin-avatar { width: 42px; height: 42px; min-width: 42px; font-size: 17px; }
.admin-user-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.admin-user-name {
    display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
    font-size: 14.5px; font-weight: 700; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.admin-user-sub { font-size: 12px; color: rgba(255,255,255,.42); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-user-actions { display: flex; gap: 6px; flex-shrink: 0; }
.admin-action-btn {
    width: 36px; height: 36px; margin: 0; padding: 0; border-radius: 11px;
    display: flex; align-items: center; justify-content: center; font-size: 16.5px;
    color: rgba(255,255,255,.72); cursor: pointer;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09);
    transition: background .18s, color .18s, transform .15s;
}
.admin-action-btn:hover { background: rgba(255,255,255,.14); color: #fff; }
.admin-action-btn:active { transform: scale(.9); }
.admin-action-btn--danger { color: #ff9a9a; }
.admin-action-btn--danger:hover { background: rgba(255, 82, 82, .16); border-color: rgba(255, 82, 82, .3); }
.admin-action-btn--ok { color: #6fdc9c; }
.admin-action-btn--ok:hover { background: rgba(88, 214, 141, .14); border-color: rgba(88, 214, 141, .3); }
.admin-action-btn--admin-on { color: #ffd166; border-color: rgba(255, 209, 102, .3); }

/* --- Чипы --- */
.admin-chip {
    display: inline-flex; align-items: center; height: 18px; padding: 0 7px;
    border-radius: 6px; font-size: 9.5px; font-weight: 800; letter-spacing: .05em;
}
.admin-chip--admin { color: #ffd166; background: rgba(255, 209, 102, .13); border: 1px solid rgba(255, 209, 102, .28); }
.admin-chip--ban { color: #ff9a9a; background: rgba(255, 82, 82, .12); border: 1px solid rgba(255, 82, 82, .28); }
.admin-chip--me { color: #a9d6e5; background: rgba(169, 214, 229, .12); border: 1px solid rgba(169, 214, 229, .28); }
.admin-chip--new { color: #ffb4b4; background: rgba(255, 82, 82, .14); border: 1px solid rgba(255, 82, 82, .3); }
.admin-chip--ok { color: #6fdc9c; background: rgba(88, 214, 141, .12); border: 1px solid rgba(88, 214, 141, .28); }
.admin-chip--muted { color: rgba(255,255,255,.45); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }

/* --- Редактор значка внутри карточки --- */
.admin-badge-editor { padding: 0 13px 13px; border-top: 1px dashed rgba(255,255,255,.08); }
.admin-badge-editor-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 11px 0 9px; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.6);
}
.admin-badge-editor-head i { margin-right: 5px; color: #a9d6e5; }
.admin-badge-clear {
    display: inline-flex; align-items: center; gap: 5px; width: auto; margin: 0;
    padding: 6px 11px; border-radius: 9px; font-size: 11.5px; font-weight: 600;
    color: #ff9a9a; cursor: pointer; background: rgba(255, 82, 82, .08);
    border: 1px solid rgba(255, 82, 82, .2);
}
.admin-badge-clear i { margin: 0; color: inherit; }
.admin-badge-editor .badge-presets { grid-template-columns: repeat(9, 1fr); }
.admin-badge-editor .badge-preset { font-size: 19px; border-radius: 11px; }

/* --- Скелетоны --- */
.admin-skeleton-row { pointer-events: none; }
.admin-skel {
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.05) 75%);
    background-size: 200% 100%; animation: adminSkel 1.2s infinite;
}
.admin-skel-avatar { width: 42px; height: 42px; min-width: 42px; border-radius: 50%; }
.admin-skel-line { height: 12px; margin: 3px 0; }
@keyframes adminSkel { to { background-position: -200% 0; } }

/* --- Кнопка-добавить в админке --- */
.admin-add-row { display: flex; gap: 9px; margin-bottom: 14px; }
.admin-primary-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    width: auto; margin: 0; padding: 0 18px; height: 44px; border-radius: 13px;
    font-size: 13.5px; font-weight: 700; color: #10131a; cursor: pointer; border: none;
    background: linear-gradient(135deg, #a9d6e5, #7fb8cf);
    box-shadow: 0 6px 18px rgba(127, 184, 207, .25); transition: filter .2s, transform .15s;
}
.admin-primary-btn:hover { filter: brightness(1.08); }
.admin-primary-btn:active { transform: scale(.96); }

/* --- Жалобы --- */
.admin-report-card {
    padding: 13px 14px; border-radius: 16px;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
    display: flex; flex-direction: column; gap: 9px;
}
.admin-report-card--done { opacity: .62; }
.admin-report-head { display: flex; align-items: center; gap: 8px; }
.admin-report-reason { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #fff; flex: 1; }
.admin-report-reason i { color: #ffb4b4; font-size: 15px; }
.admin-report-time { font-size: 11px; color: rgba(255,255,255,.35); }
.admin-report-route { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.admin-report-route > i { color: rgba(255,255,255,.3); font-size: 13px; }
.admin-report-user {
    font-weight: 600; color: #a9d6e5; cursor: pointer; padding: 3px 9px; border-radius: 8px;
    background: rgba(169, 214, 229, .08); border: 1px solid rgba(169, 214, 229, .14);
}
.admin-report-user:hover { background: rgba(169, 214, 229, .16); }
.admin-report-user--target { color: #ffb4b4; background: rgba(255, 82, 82, .08); border-color: rgba(255, 82, 82, .16); }
.admin-report-user--target:hover { background: rgba(255, 82, 82, .16); }
.admin-report-comment {
    padding: 10px 12px; border-radius: 11px; font-size: 12.8px; line-height: 1.5;
    color: rgba(255,255,255,.72); background: rgba(255,255,255,.045);
    border-left: 3px solid rgba(169, 214, 229, .35); word-break: break-word;
}
.admin-report-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.admin-mini-btn {
    display: inline-flex; align-items: center; gap: 5px; width: auto; margin: 0;
    padding: 7px 12px; border-radius: 9px; font-size: 12px; font-weight: 600;
    color: rgba(255,255,255,.75); cursor: pointer;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
    transition: background .18s;
}
.admin-mini-btn:hover { background: rgba(255,255,255,.13); }
.admin-mini-btn--danger { color: #ff9a9a; }
.admin-mini-btn--danger:hover { background: rgba(255, 82, 82, .15); border-color: rgba(255, 82, 82, .3); }
.admin-mini-btn--ok { color: #6fdc9c; }
.admin-mini-btn--ok:hover { background: rgba(88, 214, 141, .13); border-color: rgba(88, 214, 141, .3); }

/* --- Диалог подтверждения --- */
.admin-dialog-overlay { z-index: 500; }
.admin-dialog { max-width: 340px; padding: 26px 22px 20px; text-align: center; }
.admin-dialog-icon {
    width: 60px; height: 60px; margin: 0 auto 14px; border-radius: 20px;
    display: flex; align-items: center; justify-content: center; font-size: 28px;
    color: #a9d6e5; background: rgba(169, 214, 229, .1); border: 1px solid rgba(169, 214, 229, .22);
}
.admin-dialog-icon--danger { color: #ff9a9a; background: rgba(255, 82, 82, .1); border-color: rgba(255, 82, 82, .24); }
.admin-dialog h3 { margin: 0 0 8px; font-size: 17.5px; color: #fff; }
.admin-dialog p { margin: 0 0 16px; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.55); }
.admin-dialog textarea {
    width: 100%; min-height: 72px; margin: 0 0 14px; padding: 11px 13px; border-radius: 12px;
    font-size: 13px; font-family: inherit; color: #fff; resize: vertical; box-sizing: border-box;
    background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12); outline: none;
}
.admin-dialog textarea:focus { border-color: rgba(169, 214, 229, .4); }
.admin-dialog-actions { display: flex; gap: 9px; }
.admin-dialog-cancel, .admin-dialog-confirm {
    flex: 1; height: 42px; margin: 0; border-radius: 12px; font-size: 13.5px; font-weight: 700;
    cursor: pointer; transition: background .18s, filter .18s;
}
.admin-dialog-cancel { color: rgba(255,255,255,.7); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); }
.admin-dialog-cancel:hover { background: rgba(255,255,255,.13); }
.admin-dialog-confirm { color: #10131a; border: none; background: linear-gradient(135deg, #a9d6e5, #7fb8cf); }
.admin-dialog-confirm:hover { filter: brightness(1.08); }
.admin-dialog-confirm--danger { color: #fff; background: linear-gradient(135deg, #e05555, #b93a3a); }
.admin-dialog-confirm:disabled { opacity: .6; cursor: default; }

/* --- Жалоба: модалка пользователя --- */
.report-overlay { z-index: 450; }
.report-dialog { max-width: 380px; padding: 22px; }
.report-dialog-head { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.report-dialog-head .admin-dialog-icon { margin: 0; width: 52px; height: 52px; font-size: 24px; border-radius: 17px; flex-shrink: 0; }
.report-dialog-head h3 { margin: 0 0 3px; font-size: 17px; color: #fff; }
.report-dialog-head p { margin: 0; font-size: 12.5px; color: rgba(255,255,255,.5); }
.report-reasons { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 13px; }
.report-reason {
    display: inline-flex; align-items: center; gap: 6px; width: auto; margin: 0;
    padding: 8px 12px; border-radius: 10px; font-size: 12.3px; font-weight: 600;
    color: rgba(255,255,255,.65); cursor: pointer;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
    transition: all .18s;
}
.report-reason i { font-size: 15px; }
.report-reason:hover { background: rgba(255,255,255,.1); }
.report-reason { position: relative; -webkit-tap-highlight-color: transparent; }
.report-reason.active { color: #ffb4b4; background: rgba(255, 82, 82, .16); border-color: rgba(255, 82, 82, .7); box-shadow: 0 0 0 3px rgba(255, 82, 82, .14); font-weight: 700; }
.report-reason.active::after { content: "\2713"; font-size: 12px; font-weight: 800; margin-left: 1px; }
.report-dialog textarea {
    width: 100%; min-height: 74px; margin: 0 0 15px; padding: 11px 13px; border-radius: 12px;
    font-size: 13px; font-family: inherit; color: #fff; resize: vertical; box-sizing: border-box;
    background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12); outline: none;
}
.report-dialog textarea:focus { border-color: rgba(255, 82, 82, .4); }

/* --- Кнопка «Пожаловаться» в карточке профиля --- */
.profile-action-icon {
    width: 44px; height: 44px; min-width: 44px; margin: 0; padding: 0; border-radius: 14px;
    display: flex; align-items: center; justify-content: center; font-size: 19px;
    color: rgba(255,255,255,.6); cursor: pointer;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
    transition: all .18s;
}
.profile-action-icon:hover { color: #ff9a9a; background: rgba(255, 82, 82, .12); border-color: rgba(255, 82, 82, .3); }

/* --- Вкладка «Техработы» --- */
.maintenance-card {
    padding: 18px; border-radius: 18px; display: flex; flex-direction: column; gap: 13px;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
    transition: border-color .25s;
}
.maintenance-card--on { border-color: rgba(255, 209, 102, .35); background: rgba(255, 209, 102, .045); }
.maintenance-card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.maintenance-status { display: flex; align-items: center; gap: 12px; min-width: 0; }
.maintenance-status strong { display: block; font-size: 14.5px; color: #fff; margin-bottom: 2px; }
.maintenance-status span { display: block; font-size: 11.8px; color: rgba(255,255,255,.45); line-height: 1.4; }
.maintenance-dot {
    width: 12px; height: 12px; min-width: 12px; border-radius: 50%;
    background: #58d68d; box-shadow: 0 0 0 4px rgba(88, 214, 141, .15);
}
.maintenance-card--on .maintenance-dot {
    background: #ffd166; box-shadow: 0 0 0 4px rgba(255, 209, 102, .18);
    animation: maintenancePulse 1.6s infinite;
}
@keyframes maintenancePulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(255, 209, 102, .18); }
    50% { box-shadow: 0 0 0 8px rgba(255, 209, 102, .06); }
}
.maintenance-toggle {
    position: relative; width: 56px; height: 32px; min-width: 56px; margin: 0; padding: 0;
    border-radius: 999px; cursor: pointer; border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.08); transition: background .25s, border-color .25s;
}
.maintenance-toggle.is-on { background: #ffd166; border-color: #ffd166; }
.maintenance-toggle-knob {
    position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
    background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); transition: transform .25s cubic-bezier(.2,.9,.3,1.3);
}
.maintenance-toggle.is-on .maintenance-toggle-knob { transform: translateX(24px); }
.maintenance-label { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.55); margin-bottom: -6px; }
.maintenance-card textarea {
    width: 100%; min-height: 80px; margin: 0; padding: 12px 14px; border-radius: 13px;
    font-size: 13.5px; font-family: inherit; line-height: 1.5; color: #fff;
    resize: vertical; box-sizing: border-box;
    background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12); outline: none;
}
.maintenance-card textarea:focus { border-color: rgba(255, 209, 102, .45); }
.maintenance-save { align-self: flex-start; }
.maintenance-meta { font-size: 11.5px; color: rgba(255,255,255,.38); }
.maintenance-note {
    display: flex; gap: 9px; align-items: flex-start; padding: 12px 14px; border-radius: 12px;
    font-size: 11.8px; line-height: 1.55; color: rgba(255,255,255,.48);
    background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07);
}
.maintenance-note i { font-size: 16px; color: rgba(255, 209, 102, .75); margin-top: 1px; flex-shrink: 0; }

/* --- Адаптив --- */
@media (max-width: 768px) {
    .admin-panel { width: 100% !important; max-height: 94dvh !important; border-radius: 24px 24px 0 0 !important; }
    .admin-header { padding: 18px 18px 14px; }
    .admin-layout { display: block; min-height: 0; }
    .admin-tabs { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.06); padding: 8px !important; }
    .admin-tabs .tab-btn { min-width: 105px; justify-content: center; }
    .admin-tabs .tab-btn small { position: absolute; top: 4px; right: 6px; margin: 0; }
    .admin-body { max-height: 60dvh; padding: 16px 16px 22px; }
    .admin-user-row { flex-wrap: wrap; }
    .admin-user-actions { width: 100%; justify-content: flex-end; }
    .admin-badge-editor .badge-presets { grid-template-columns: repeat(6, 1fr); }
    #maintenance-admin-banner span { font-size: 11.5px; }
    .block-overlay-card { padding: 34px 22px 28px; }
}

/* --- Темы оформления --- */
body[class*="theme-"] .admin-panel,
body[class*="theme-"] .admin-dialog,
body[class*="theme-"] .report-dialog { background: var(--surface); color: var(--text); }
body[class*="theme-"] .admin-user-card,
body[class*="theme-"] .admin-report-card,
body[class*="theme-"] .maintenance-card { background: var(--surface-3, rgba(255,255,255,.04)); border-color: var(--border); }
body[class*="theme-"] .admin-user-name,
body[class*="theme-"] .admin-report-reason,
body[class*="theme-"] .admin-dialog h3,
body[class*="theme-"] .report-dialog-head h3,
body[class*="theme-"] .maintenance-status strong { color: var(--text); }
body[class*="theme-"] .admin-search-box,
body[class*="theme-"] .admin-round-btn,
body[class*="theme-"] .admin-action-btn,
body[class*="theme-"] .admin-mini-btn,
body[class*="theme-"] .report-reason { background: var(--hover, rgba(255,255,255,.055)); border-color: var(--border); color: var(--text-dim); }
/* Активная причина жалобы в темах: правило выше (0,2,1) перебивало .report-reason.active (0,2,0) */
body[class*="theme-"] .report-reason:hover { background: var(--hover-strong, rgba(255,255,255,.1)); }
body[class*="theme-"] .report-reason.active {
    color: var(--danger, #ff6b6b); background: rgba(255, 82, 82, .16);
    border-color: rgba(255, 82, 82, .7); box-shadow: 0 0 0 3px rgba(255, 82, 82, .14);
}
body[class*="theme-"] .admin-search-box input { color: var(--text); }
body[class*="theme-"] .admin-user-sub,
body[class*="theme-"] .admin-report-time { color: var(--text-faint); }

/* =====================================================================
   НОВОЕ: окно звонка, папки, группы, безопасность, объявления
   ===================================================================== */

/* ---------- Экран входа: Google + «Забыли пароль?» ---------- */
.auth-forgot-row { display: flex; justify-content: flex-end; margin: 2px 0 10px; }
.auth-forgot-link {
    background: none; border: none; padding: 0; cursor: pointer;
    color: var(--accent, #a9d6e5); font-size: 13px; font-weight: 600;
}
.auth-forgot-link:hover { text-decoration: underline; }
.auth-divider {
    display: flex; align-items: center; gap: 12px; margin: 14px 0;
    color: rgba(255,255,255,.45); font-size: 12px;
}
.auth-divider::before, .auth-divider::after {
    content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.14);
}
.google-auth-btn {
    width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 12px 16px; border-radius: 12px; cursor: pointer;
    background: #ffffff; color: #1f1f1f; border: 1px solid rgba(0,0,0,.08);
    font-size: 14px; font-weight: 600; transition: transform .15s ease, box-shadow .15s ease;
}
.google-auth-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.google-auth-btn:active { transform: translateY(0); }

/* ---------- Папки чатов ---------- */
.chat-folders-bar {
    display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto;
    padding: 6px 10px 8px; scrollbar-width: none;
}
.chat-folders-bar::-webkit-scrollbar { display: none; }
.folder-chip {
    display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
    padding: 5px 12px; border-radius: 999px; cursor: pointer;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.75); font-size: 12.5px; font-weight: 600;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.folder-chip i { font-size: 14px; }
.folder-chip:hover { background: rgba(255,255,255,.1); }
.folder-chip.active {
    background: var(--accent, #a9d6e5); color: var(--accent-ink, #0f1014);
    border-color: transparent;
}
.folder-chip--add { padding: 5px 10px; color: rgba(255,255,255,.55); }
.folder-ctx-menu {
    position: fixed; z-index: 9999; min-width: 200px; padding: 6px;
    background: #23252d; border: 1px solid rgba(255,255,255,.12); border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.folder-ctx-title {
    padding: 7px 10px 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em;
    color: rgba(255,255,255,.45); text-transform: uppercase;
}
.folder-ctx-menu button {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 8px 10px; border: none; border-radius: 8px; cursor: pointer;
    background: none; color: #fff; font-size: 13.5px; text-align: left;
}
.folder-ctx-menu button:hover { background: rgba(255,255,255,.08); }
.folder-ctx-menu button.is-current { color: var(--accent, #a9d6e5); }
.folder-ctx-menu button.folder-ctx-danger { color: #ff9a9a; }

/* ---------- Группы: создание / информация ---------- */
.group-header-icon { font-size: 26px; }
.group-create-panel, .group-info-panel, .forgot-panel { max-width: 420px; width: 92%; }
.group-create-body, .group-info-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 12px; }
.group-create-name, .security-input {
    width: 100%; padding: 11px 13px; border-radius: 11px; box-sizing: border-box;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13);
    color: #fff; font-size: 14px; outline: none; transition: border-color .15s ease;
}
.group-create-name:focus, .security-input:focus { border-color: var(--accent, #a9d6e5); }
.group-create-members-title {
    display: flex; align-items: center; gap: 7px;
    font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: rgba(255,255,255,.5);
}
.group-create-members {
    display: flex; flex-direction: column; gap: 2px;
    max-height: 240px; overflow-y: auto;
}
.group-create-member {
    display: flex; align-items: center; gap: 10px; padding: 9px 10px;
    border-radius: 10px; cursor: pointer; transition: background .12s ease;
}
.group-create-member:hover { background: rgba(255,255,255,.06); }
.group-create-member input { accent-color: var(--accent, #a9d6e5); width: 16px; height: 16px; }
.group-create-member-name { font-weight: 600; font-size: 14px; }
.group-create-member-uname { color: rgba(255,255,255,.45); font-size: 12.5px; margin-left: auto; }
.group-create-hint { font-size: 12px; color: rgba(255,255,255,.4); }
.group-create-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 0 18px 16px; }
.group-info-member {
    display: flex; align-items: center; gap: 8px; padding: 9px 10px;
    border-radius: 10px; transition: background .12s ease;
}
.group-info-member:hover { background: rgba(255,255,255,.06); }
.group-info-member-name { font-weight: 600; font-size: 14px; }
.group-info-add-row { display: flex; gap: 8px; align-items: center; }
.group-info-add-row .admin-search-box { flex: 1; }
.group-info-leave { background: rgba(255,82,82,.14) !important; color: #ff9a9a !important; border: 1px solid rgba(255,82,82,.3) !important; }
.group-info-rename { margin-bottom: 2px; }
.message-sender-name { font-size: 11.5px; font-weight: 700; margin: 0 0 3px 4px; }

/* ---------- Бар группового звонка в шапке чата ---------- */
.group-call-bar {
    display: flex; align-items: center; gap: 9px;
    margin: 8px 12px 0; padding: 9px 12px; border-radius: 12px;
    background: rgba(82, 183, 136, .1); border: 1px solid rgba(82, 183, 136, .3);
}
.group-call-bar--active { background: rgba(169, 214, 229, .1); border-color: rgba(169, 214, 229, .35); }
.group-call-bar-pulse {
    width: 9px; height: 9px; border-radius: 50%; background: var(--ok, #52b788);
    animation: kodkod-gpulse 1.6s ease-out infinite;
}
@keyframes kodkod-gpulse {
    0% { box-shadow: 0 0 0 0 rgba(82,183,136,.55); }
    100% { box-shadow: 0 0 0 10px rgba(82,183,136,0); }
}
.group-call-bar-text { flex: 1; font-size: 13px; font-weight: 600; }
.group-call-bar-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 9px; border: none; cursor: pointer;
    background: var(--ok, #52b788); color: #0b1a12; font-size: 12.5px; font-weight: 700;
}
.group-call-bar--active .group-call-bar-btn { background: var(--accent, #a9d6e5); color: var(--accent-ink, #0f1014); }
.group-call-dot {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    background: rgba(82,183,136,.18); color: var(--ok, #52b788); font-size: 11px;
    animation: kodkod-gpulse 1.6s ease-out infinite;
}

/* ---------- Безопасность (настройки) ---------- */
.security-section {
    padding: 14px; border-radius: 14px; margin-bottom: 14px;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
    display: flex; flex-direction: column; gap: 10px;
}
.security-section-head { display: flex; align-items: center; gap: 11px; }
.security-section-head > i { font-size: 24px; color: var(--accent, #a9d6e5); }
.security-section-head strong { display: block; font-size: 15px; }
.security-section-head span { display: block; font-size: 12px; color: rgba(255,255,255,.5); }
.security-btn { align-self: flex-start; }
.security-btn--danger { background: rgba(255,82,82,.14) !important; color: #ff9a9a !important; border: 1px solid rgba(255,82,82,.3) !important; }
.security-google-status {
    display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 10px;
    background: rgba(255,255,255,.05); font-size: 13.5px; color: rgba(255,255,255,.7);
}
.security-google-status i { font-size: 17px; color: rgba(255,255,255,.45); }
.security-google-status.is-linked i { color: var(--ok, #52b788); }
.security-hint { display: flex; gap: 8px; font-size: 12px; color: rgba(255,255,255,.42); line-height: 1.45; }
.security-hint i { flex: 0 0 auto; margin-top: 1px; }

/* ---------- Восстановление пароля ---------- */
.forgot-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 11px; }
.forgot-step-hint { display: flex; gap: 8px; font-size: 13px; color: rgba(255,255,255,.65); line-height: 1.5; }
.forgot-step-hint i { flex: 0 0 auto; margin-top: 2px; color: var(--accent, #a9d6e5); }
.forgot-step-hint--warn i { color: #ffb86b; }
.forgot-step-hint--ok i { color: var(--ok, #52b788); }
.forgot-error { color: #ff9a9a; font-size: 12.5px; min-height: 0; }
.forgot-error:empty { display: none; }
.forgot-google-btn { width: 100%; }

/* ---------- Объявление (баннер) ---------- */
.kodkod-announcement {
    display: flex; align-items: flex-start; gap: 9px;
    margin: 8px 10px 2px; padding: 10px 12px; border-radius: 12px;
    background: linear-gradient(135deg, rgba(169,214,229,.16), rgba(74,78,105,.25));
    border: 1px solid rgba(169,214,229,.3);
    font-size: 13px; line-height: 1.45;
}
.kodkod-announcement > i { color: var(--accent, #a9d6e5); font-size: 16px; margin-top: 1px; }
.kodkod-announcement-text { flex: 1; word-break: break-word; }
.kodkod-announcement-close {
    background: none; border: none; color: rgba(255,255,255,.5); cursor: pointer;
    padding: 2px; border-radius: 6px; font-size: 14px;
}
.kodkod-announcement-close:hover { color: #fff; background: rgba(255,255,255,.08); }

/* ---------- Админка: модер-чип, статистика, журнал, объявление ---------- */
.admin-chip--moder { color: #9ec5ff; background: rgba(108, 148, 255, .13); border: 1px solid rgba(108, 148, 255, .3); }
.admin-primary-btn--moder { background: rgba(108,148,255,.16) !important; border: 1px solid rgba(108,148,255,.35) !important; color: #b9d2ff !important; }
.admin-section-title {
    display: flex; align-items: center; gap: 7px; margin: 14px 2px 8px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: rgba(255,255,255,.5);
}
.admin-stat-row {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 12px; border-radius: 11px; margin-bottom: 6px;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
}
.admin-stat-icon {
    width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center; font-size: 17px;
    background: rgba(169,214,229,.12); color: var(--accent, #a9d6e5);
}
.admin-stat-value { font-size: 17px; font-weight: 800; }
.admin-modlog-icon {
    width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center; font-size: 15px;
    background: rgba(255,255,255,.07); color: rgba(255,255,255,.75);
}
.admin-broadcast-text {
    width: 100%; min-height: 90px; resize: vertical; box-sizing: border-box;
    padding: 11px 13px; border-radius: 11px; margin: 10px 0;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13);
    color: #fff; font-size: 14px; font-family: inherit; outline: none;
}
.admin-broadcast-text:focus { border-color: var(--accent, #a9d6e5); }
.admin-broadcast-actions { display: flex; gap: 8px; }
.admin-broadcast-preview {
    padding: 11px 13px; border-radius: 11px; font-size: 13.5px; line-height: 1.5;
    background: rgba(169,214,229,.09); border: 1px solid rgba(169,214,229,.25);
}


/* =====================================================================
   KODKOD — исправления и обновление интерфейса
   Корень многих багов: глобальное button{width:100%;margin-top:15px;padding:14px}
   ===================================================================== */

/* Сброс глобальных стилей кнопок для компактных элементов */
.folder-chip, .kodkod-announcement-close, .msg-sender-avatar, .new-group-btn {
    width: auto; margin: 0; font-weight: 600;
}

/* ---------- Папки чатов: горизонтальная прокручиваемая лента ---------- */
.chat-folders-bar {
    flex: 0 0 auto; display: flex; flex-wrap: nowrap; gap: 8px;
    overflow-x: auto; overflow-y: hidden; padding: 8px 12px 10px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
    cursor: grab; mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 20px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 20px), transparent 100%);
}
.chat-folders-bar:active { cursor: grabbing; }
.folder-chip {
    flex: 0 0 auto; width: auto; padding: 7px 14px; border-radius: 999px; white-space: nowrap;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
    scroll-snap-align: start; user-select: none; -webkit-user-select: none;
}
.folder-chip span { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.folder-chip--add { padding: 7px 11px; border-style: dashed; }

/* ---------- Объявление ---------- */
.kodkod-announcement {
    flex: 0 0 auto; align-items: center; margin: 8px 12px 4px; padding: 11px 12px 11px 14px;
    border-radius: 14px; position: relative; overflow: hidden; min-width: 0;
}
.kodkod-announcement::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent, #a9d6e5);
}
.kodkod-announcement > i { flex: 0 0 auto; margin: 0; }
.kodkod-announcement-text {
    flex: 1 1 0; min-width: 0; white-space: normal;
    overflow-wrap: anywhere; word-break: normal; hyphens: auto;
}
.kodkod-announcement-close {
    flex: 0 0 auto; width: 26px; height: 26px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.06); border-radius: 50%;
}

/* ---------- Кнопка «Создать группу» в панели поиска ---------- */
.search-container .new-group-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
    margin-top: 8px; padding: 9px 12px; border-radius: 12px; font-size: 13.5px;
    background: transparent; border: 1px dashed rgba(255,255,255,.22); color: rgba(255,255,255,.8);
}
.search-container .new-group-btn:hover { background: rgba(255,255,255,.08); }

/* ---------- Аватарка группы ---------- */
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.group-avatar-edit { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-bottom: 6px; }
.group-avatar-edit .avatar-large { width: 96px; height: 96px; font-size: 40px; }
.group-avatar-edit .change-avatar-btn { width: auto; margin: 0; }

/* ---------- Групповой чат: отправитель ---------- */
.message-wrapper.has-sender-avatar { align-items: flex-end; gap: 8px; }
.msg-sender-avatar {
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; padding: 0;
    display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff;
    cursor: pointer; border: 0; box-shadow: 0 2px 8px rgba(0,0,0,.3); transition: transform .15s ease;
}
.msg-sender-avatar:hover { transform: scale(1.08); }
.msg-sender-avatar img { width: 100%; height: 100%; object-fit: cover; }
.message-sender-name {
    display: inline-flex; align-items: center; gap: 4px; margin: 0 0 4px; cursor: pointer;
    font-size: 12.5px; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.message-sender-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.group-info-member { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; transition: background .15s; }
.group-info-member:hover { background: rgba(255,255,255,.07); }
.group-member-av { width: 36px; height: 36px; font-size: 15px; }
.group-info-member-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.group-info-member-name small { opacity: .55; font-weight: 400; }

/* ---------- Обновление интерфейса ---------- */
.sidebar { background: rgba(10,11,16,.55); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.my-profile { padding: 14px 14px 12px; gap: 10px; }
.header-actions { display: flex; gap: 6px; }
.header-actions .icon-btn { width: 38px; height: 38px; margin: 0; padding: 0; border-radius: 12px; background: rgba(255,255,255,.07); }
.header-actions .icon-btn:hover { background: rgba(255,255,255,.15); }
.user-card { margin: 2px 0; padding: 10px 12px; border-radius: 14px; transition: background .15s ease, transform .15s ease; }
.user-card:hover { background: rgba(255,255,255,.07); }
.user-card:active { transform: scale(.985); }
.avatar { box-shadow: 0 0 0 2px rgba(255,255,255,.08), 0 4px 12px rgba(0,0,0,.25); }
.search-box input { border-radius: 14px; }
.chat-header { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.input-area { gap: 6px; }
.input-area #message-input { border-radius: 22px; margin: 0; }
.send-btn { border-radius: 50%; }
@media (max-width: 768px) {
    .message-wrapper.has-sender-avatar { gap: 6px; }
    .msg-sender-avatar { width: 28px; height: 28px; font-size: 12px; }
}