/* =========================================================
   ГЛОБАЛЬНЫЕ СБРОСЫ И БАЗОВЫЕ НАСТРОЙКИ
   ========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: #111;
    color: white;
    font-family: Arial, sans-serif;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: manipulation;
    min-width: 0;
    max-width: 100%;
}

/* =========================================================
   ОБЩИЕ ЭЛЕМЕНТЫ
   ========================================================= */

button,
input {
    font-family: inherit;
}

button {
    border: none;
    outline: none;
    cursor: pointer;
    /* Цвет по умолчанию — как у компьютерных браузеров (чёрный). Без него
       iPhone красит текст кнопок системным синим, а за ним и рамки,
       которые берут currentColor. Темы задают свой цвет поверх. */
    color: #000000;
    transition: background 0.18s ease, border-color 0.18s ease,
        color 0.18s ease, transform 0.12s ease, opacity 0.18s ease;
}

button:active {
    transform: scale(0.98);
}

/* Ползунки — не системным синим (iPhone), а цветом SHIZ */
input[type="range"] {
    accent-color: #6fdc8b;
}

input {
    outline: none;
}

/* =========================================================
   AUTH
   ========================================================= */

.auth-screen {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 40%, #2d2d2d 0%, #161616 45%, #0c0c0e 100%);
}

.auth-box {
    width: 380px;
    padding: 38px;
    background: #111111;
    border: 1px solid #2c2c2c;
    border-radius: 50px;
    box-shadow: 0px 0px 35px rgba(231, 231, 231, 0.164);
    backdrop-filter: blur(20px);
}

.auth-logo {
    font-family: Verdana, sans-serif;
    margin-bottom: 30px;
    text-align: center;
    font-size: 38px;
    font-weight: 800;
    letter-spacing: 0px;
    color: #ffffff;
    text-shadow: 0 0 25px rgba(255, 255, 255, 0.12);
}

.auth-box h2 {
    margin: 0 0 20px;
    font-size: 22px;
    font-weight: 600;
    color: #eeeeee;
}

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

input {
    width: 100%;
    height: 46px;
    margin-top: 12px;
    padding: 0 14px;
    background: #2c2c2c;
    border: 1px solid #323232;
    border-radius: 24px;
    color: #ffffff;
    font-size: 14px;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

input::placeholder {
    color: #7c7d7d;
}

input:hover {
    background: #232323;
}

input:focus {
    background: #242424;
    border-color: #696969;
    /*box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04);*/
}

/* =========================================================
   КНОПКИ
   ========================================================= */

#forgotSendButton,
#forgotResetButton,
#loginButton,
#registerButton {
    width: 100%;
    height: 46px;
    margin-top: 18px;
    background: #ffffff;
    color: #101216;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
}

#forgotSendButton:hover,
#forgotResetButton:hover,
#loginButton:hover,
#registerButton:hover {
    background: #e9e9e9;
}

.secondary {
    width: 100%;
    margin-top: 12px;
    padding: 12px;
    background: transparent;
    color: #ffffff;
    border: 1px solid #1c1c1c;
    border-radius: 24px;
}

.secondary:hover {
    background: #1c2026;
    color: #ffffff;
    border-color: #454b54;
}

#forgotMessage,
#loginMessage,
#registerMessage {
    min-height: 20px;
    margin-top: 12px;
    text-align: center;
    color: #999fa8;
    font-size: 13px;
}

/* =========================================================
   MESSENGER
   ========================================================= */

.messenger-screen {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #0b0d10;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    position: fixed;
    inset: 0;
}

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

.top-bar {
    width: 100%;
    height: 60px;
    flex-shrink: 0;
    position: relative;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background: #111419;
    border-bottom: 1px solid #252a31;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
}

.top-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.top-logo {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 3px;
    color: #ffffff;
}

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

.menu-button {
    width: 38px;
    height: 38px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #181c21;
    color: #c7ccd3;
    border: 1px solid #2b3038;
    border-radius: 10px;
    font-size: 20px;
}

.menu-button:hover {
    background: #22272e;
    color: #ffffff;
    border-color: #3a4049;
}

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

.profile-button {
    height: 38px;
    padding: 0 15px;
    background: #181c21;
    color: #d8dbe0;
    border: 1px solid #2b3038;
    border-radius: 24px;
    font-size: 13px;
}

.profile-button:hover {
    background: #22272e;
    border-radius: 24px;
    border-color: #3a4049;
    color: #ffffff;
}

/* =========================================================
   CONTROL PANEL
   ========================================================= */

.control-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    height: 100vh;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    background: #111419;
    border-right: 1px solid #2b3037;
    box-shadow: 15px 0 50px rgba(0, 0, 0, 0.55);
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(.2, .8, .2, 1);
}

.control-panel.open {
    transform: translateX(0);
}

.control-panel-header {
    height: 60px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background: #15181d;
    border-bottom: 1px solid #282d34;
    font-size: 16px;
    font-weight: 600;
}

.control-close-button {
    width: 34px;
    height: 34px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #777e88;
    border-radius: 8px;
    font-size: 25px;
}

.control-close-button:hover {
    background: #20242a;
    color: #ffffff;
}

.control-panel-content {
    flex: 1;
    padding: 12px;
}

.control-button {
    width: 100%;
    height: 46px;
    margin-bottom: 4px;
    padding: 0 13px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: transparent;
    color: #aeb4bc;
    border-radius: 9px;
    text-align: left;
    font-size: 14px;
}

.control-button:hover {
    background: #1d2127;
    color: #ffffff;
}

.control-button-icon {
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #777e88;
    font-size: 17px;
}

.control-button:hover .control-button-icon {
    color: #ffffff;
}

.control-panel-bottom {
    flex-shrink: 0;
    padding: 12px;
    border-top: 1px solid #292e35;
}

.control-logout-button {
    width: 100%;
    height: 44px;
    padding: 0 13px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: transparent;
    color: #858b94;
    border: 1px solid #2c3139;
    border-radius: 24px;
    text-align: left;
    font-size: 14px;
}

.control-logout-button:hover {
    background: #1e2228;
    color: #ffffff;
    border-color: #3a4048;
}

.control-logout-button img {
    width: 17px !important;
    height: 17px !important;
    object-fit: contain;
    filter: invert(1);
    margin-left: 18px;
}

.control-button-icon img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    filter: invert(1);
}

/* =========================================================
   OVERLAY
   ========================================================= */

.control-panel-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.58);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.control-panel-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

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

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

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

.sidebar {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: #111419;
    border-right: 1px solid #292e35;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.sidebar-header {
    height: 66px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 18px;
    border-bottom: 1px solid #252a31;
}

.sidebar-header h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #e7e9ec;
}

/* =========================================================
   CHATS
   ========================================================= */

.chats-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px;
}

.empty-chats {
    padding: 30px 15px;
    text-align: center;
    color: #656b74;
    font-size: 13px;
}

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

.chat {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    padding: 13px 14px;
    margin-bottom: 4px;
}

.chat-main-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.chat:hover {
    background: #1b1f25;
    border-color: #272c34;
}

.chat strong {
    font-size: 14px;
    font-weight: 600;
    color: #e8eaed;
}

.chat span {
    margin-top: 5px;
    font-size: 12px;
    color: #707680;
}

.chat .unread-badge {
    background: #e53935;
    color: #ffffff;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 13px;
    font-weight: bold;
    min-width: 24px;
    text-align: center;
    display: inline-block;
    margin-left: auto;
    white-space: nowrap;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.unread-badge.hidden {
    display: none !important;
    opacity: 0;
}

.chat.has-unread {
    background: #2a1f1f;
    border-left: 3px solid #e53935;
}

.chat-avatar {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #252a31;
    border-radius: 50%;
    color: #e9eaec;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    margin-right: 12px;
    position: relative;
}

.chat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

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

.sidebar-bottom {
    flex-shrink: 0;
    padding: 13px;
    border-top: 1px solid #252a31;
}

.add-contact-button {
    width: 100%;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #1b1f25;
    color: #d8dbe0;
    border: 1px solid #30353d;
    border-radius: 10px;
    font-size: 13px;
}

.add-contact-button:hover {
    background: #242930;
    color: #ffffff;
    border-color: #414750;
}

.button-icon {
    font-size: 19px;
    line-height: 1;
}

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

.chat-area {
    flex: 1;
    min-width: 0;
    min-height: 0;
    position: relative;
    background: #0c0f13;
    overflow: hidden;
}

/* =========================================================
   EMPTY CHAT
   ========================================================= */

.empty-chat {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #565d66;
    text-align: center;
}

.empty-chat-title {
    font-size: 23px;
    font-weight: 500;
    color: #7b828c;
}

.empty-chat-text {
    margin-top: 8px;
    font-size: 13px;
    color: #4f555e;
}

/* =========================================================
   CHAT SCREEN
   ========================================================= */

.chat-screen {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #0c0f13;
    overflow: hidden;
    position: relative;
    min-width: 0;
    min-height: 0;
}

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

.chat-user-header {
    position: absolute;
    top: 10px;
    left: 20px;
    right: 20px;
    height: 60px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    background: rgba(17, 20, 25, 0.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 30px;
    z-index: 10;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}

#chatAvatar {
    width: 42px;
    height: 42px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #252a31;
    border: 1px solid #363c45;
    color: #e9eaec;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
}

#chatUserInfo {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

#chatTitle {
    font-size: 15px;
    font-weight: 600;
    color: #f1f2f3;
}

#chatStatus {
    font-size: 11px;
    color: #686f78;
}

#chatStatus.online {
    color: #6fdc8b;
}

.chat-options-button {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #aaa;
    font-size: 24px;
    cursor: pointer;
    margin-left: auto;
}

.chat-options-button:hover {
    background: #333;
    color: white;
}

.chat-options-menu {
    display: none;
    position: absolute;
    top: 60px;
    right: 10px;
    min-width: 190px;
    padding: 5px;
    background: #222;
    border: 1px solid #444;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
    z-index: 1000;
}

.chat-options-menu.open {
    display: flex;
    flex-direction: column;
}

.chat-options-menu button {
    border: none;
    background: transparent;
    color: white;
    text-align: left;
    padding: 11px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

.chat-options-menu button:hover {
    background: #333;
}

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

#messagesList {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 20px;
    padding-top: 90px;
    padding-bottom: 75px;
    background: #0c0f13;
    position: relative;
    z-index: 1;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    overscroll-behavior: contain;
}

#messagesList > p {
    margin: auto;
    color: #565d66;
    font-size: 13px;
}

.message {
    max-width: min(70%, 600px);
    padding: 9px 12px;
    border-radius: 25px;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    position: relative;
}

.mobile-message {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.my-message {
    align-self: flex-end;
    background: #343941;
    border-bottom-right-radius: 4px;
}

.other-message {
    align-self: flex-start;
    background: #1c2026;
    border: 1px solid #272c33;
    border-bottom-left-radius: 4px;
}

.message-text {
    font-size: 14px;
    line-height: 1.45;
    color: #eeeeef;
}

.message-time {
    margin-top: 5px;
    font-size: 10px;
    color: #777e87;
    text-align: right;
}

.message-status {
    margin-top: 4px;
    text-align: right;
    color: #777e87;
    font-size: 12px;
    letter-spacing: -2px;
}

.message-meta {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
}

.message-meta .message-time {
    margin-top: 0;
}

.message-meta .message-status {
    margin-top: 0;
    margin-left: 0;
}

.message-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 10px;
}

.message-row .message-text {
    flex: 1;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.message-row .message-meta {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 0;
}

/* =========================================================
   MESSAGE DELETE MENU
   ========================================================= */

.message-delete-menu {
    display: none;
    position: fixed; 
    top: 0;         
    left: 0;        
    min-width: 170px;
    padding: 5px;
    background: #222;
    border: 1px solid #444;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
    z-index: 1000; 
}

/* Меню position: fixed, координаты ставит openMessageDeleteMenu.
   right не задаём: вместе с left оно растягивало меню на весь экран */
.message-delete-menu {
    right: auto;
    width: max-content;
    max-width: calc(100vw - 20px);
}

.my-message .message-menu-button {
    right: 5px;
}

.other-message .message-menu-button {
    left: 5px;
}

.message-delete-menu.open {
    display: flex;
    flex-direction: column;
}

.message-delete-menu button {
    border: none;
    background: transparent;
    color: white;
    text-align: left;
    padding: 10px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

.message-delete-menu button:hover {
    background: #333;
}

.delete-for-all-button {
    color: #ff6b6b !important;
}

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

#messageInputSection {
    position: absolute !important;
    bottom: 14px !important;
    left: 20px !important;
    right: 20px !important;
    width: auto !important;
    z-index: 5 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 8px 6px 8px !important;
    background: rgba(17, 20, 25, 0.55) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 30px !important;
    min-height: 52px !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
    position: relative;
}

#messageInputSection .message-input-wrapper,
#messageInputSection #attachButton,
#messageInputSection #sendMessageButton,
#messageInputSection .composer-send-slot,
#messageInputSection .voice-record-row {
    pointer-events: auto !important;
}

.message-input-wrapper {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 22px !important;
    padding: 0 4px !important;
    height: 38px !important;
    transition: border-color 0.2s ease, background 0.2s ease !important;
}

.message-input-wrapper:focus-within {
    border-color: rgba(255, 255, 255, 0.2) !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

.message-input-wrapper input {
    flex: 1 !important;
    width: auto !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 10px !important;
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 15px !important;
    outline: none !important;
    font-family: inherit !important;
}

.message-input-wrapper input::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

#messageInputSection #messageInput {
    flex: 1;
    width: auto;
    height: 44px;
    margin: 0;
    padding: 0 14px;
    background: #181c21;
    border: 1px solid #2c3139;
    border-radius: 20px;
}

#messageInputSection #messageInput:focus {
    border-color: #454c56;
    background: #ec0606;
}

#attachButton,
#sendMessageButton,
#voiceButton {
    width: 38px !important;
    height: 38px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: background 0.2s ease, color 0.2s ease !important;
    box-shadow: none !important;
}

#attachButton:hover,
#sendMessageButton:hover,
#voiceButton:hover {
    background: rgba(255, 255, 255, 0.16) !important;
}

#attachButton img,
#sendMessageButton img,
#voiceButton svg {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
    filter: invert(1) !important;
}

.icon-button {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    margin: 0;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 11px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
}

.icon-button img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.icon-button:hover {
    background: #e8e8e8;
}

.icon-button:active {
    transform: scale(0.94);
}

/* =========================================================
   EMOJI PICKER
   ========================================================= */

.emoji-picker {
    position: absolute;
    bottom: 60px;
    right: 60px;
    z-index: 3000;
    background: rgba(19, 19, 19, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.emoji-picker emoji-picker {
    width: 320px;
    max-height: 400px;
}

emoji-picker {
    --background: transparent;
    --border-color: rgba(255, 255, 255, 0.08);
    --text-color: #e8eaed;
    --secondary-text-color: #9aa0a8;
    --input-bg: rgba(255, 255, 255, 0.07);
    --input-border-color: rgba(255, 255, 255, 0.12);
    --input-text-color: #e8eaed;
    --button-hover-bg: rgba(255, 255, 255, 0.12);
    --emoji-size: 1.3rem;
    --indicator-color: #e8eaed;
}

.emoji-button {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #181c21;
    border: 1px solid #2c3139;
    border-radius: 11px;
    color: #ffffff;
    font-size: 22px;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}

.emoji-button:hover {
    background: #23272e;
    border-color: #3a4049;
}

.emoji-button:active {
    transform: scale(0.96);
}

.emoji-button img {
    width: 25px;
    height: 25px;
    object-fit: contain;
    filter: invert(1);
}

#emojiButton {
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    cursor: pointer !important;
    border-radius: 50% !important;
    padding: 0 !important;
    margin: 0 !important;
}

#emojiButton:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

#emojiButton img {
    width: 22px !important;
    height: 22px !important;
    object-fit: contain !important;
    filter: invert(1) !important;
}

.cancel-edit-button {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #ffffff;
    cursor: pointer;
}

.cancel-edit-button img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: invert(1);
}

/* =========================================================
   MODAL OVERLAY
   ========================================================= */

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.68);
    backdrop-filter: blur(4px);
}

.modal-window {
    position: relative;
    width: 360px;
    max-width: 100%;
    padding: 25px;
    background: #111111;
    border: 1px solid #2c2c2c;
    border-radius: 34px;
    box-shadow: 0px 0px 35px rgba(231, 231, 231, 0.164) !important;
    animation: modalAppear 0.18s ease;
}

@keyframes modalAppear {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-window h2 {
    margin: 0 0 18px;
    font-size: 20px;
    font-weight: 600;
    color: #eeeeee;
}

.modal-window p {
    margin: 0 0 12px;
    color: #858c95;
    font-size: 13px;
}

.modal-window button {
    margin-top: 12px;
    border-radius: 50px;
}

.modal-message {
    min-height: 20px;
    margin-top: 12px;
    text-align: center;
    color: #858c95;
    font-size: 12px;
}

/* =========================================================
   CONTACTS
   ========================================================= */

.contacts-window {
    width: 480px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
}

#contactsCloseButton {
    width: 34px;
    height: 34px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #777e88;
    border-radius: 30px;
    font-size: 25px;
}

#contactsCloseButton img {
    width: 25px;
    height: 25px;
    object-fit: contain;
    filter: invert(1);
    opacity: 1 !important;
}

.contacts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #292e35;
}

.contacts-header h2 {
    margin: 0;
    text-align: left;
}

.contacts-header .secondary {
    width: auto;
    margin: 0;
    padding: 8px 14px;
    font-size: 12px;
}

.contacts-list {
    max-height: 450px;
    overflow-y: auto;
    padding-top: 10px;
}

.empty-contacts {
    padding: 30px 10px;
    text-align: center;
    color: #626973;
    font-size: 13px;
}

.contact-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    margin-bottom: 5px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    transition: background 0.16s ease, border-color 0.16s ease;
}

.contact-item:hover {
    background: #3c3c3c95;
    border-color: #494949;
    border-radius: 30px;
}

.contact-avatar {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #252a31;
    color: #e9eaec;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    overflow: hidden;
}

.contact-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.contact-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-info strong {
    font-size: 14px;
    color: #e7e9ec;
}

.contact-info span {
    font-size: 12px;
    color: #737a84;
}

.contact-chat-button {
    width: auto !important;
    flex-shrink: 0;
    margin: 0 !important;
    padding: 8px 14px !important;
    background: #ffffff;
    color: #111317;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
}

.contact-chat-button:hover {
    background: #e8e8e8;
}

/* =========================================================
   SCROLLBARS
   ========================================================= */

#messagesList::-webkit-scrollbar,
.chats-list::-webkit-scrollbar,
.contacts-list::-webkit-scrollbar {
    width: 7px;
}

#messagesList::-webkit-scrollbar-track,
.chats-list::-webkit-scrollbar-track,
.contacts-list::-webkit-scrollbar-track {
    background: transparent;
}

#messagesList::-webkit-scrollbar-thumb,
.chats-list::-webkit-scrollbar-thumb,
.contacts-list::-webkit-scrollbar-thumb {
    background: #30353d;
    border-radius: 10px;
}

#messagesList::-webkit-scrollbar-thumb:hover,
.chats-list::-webkit-scrollbar-thumb:hover,
.contacts-list::-webkit-scrollbar-thumb:hover {
    background: #414751;
}

/* =========================================================
   ПАРОЛЬ С КНОПКОЙ ПОКАЗА
   ========================================================= */

.password-input-wrapper {
    position: relative;
    width: 100%;
}

.password-input-wrapper input {
    padding-right: 48px;
}

.password-toggle {
    position: absolute;
    top: 17px;
    right: 8px;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #303030;
    border: none;
    border-radius: 7px;
    font-size: 17px;
    cursor: pointer;
    opacity: 1;
}

.password-toggle:hover {
    color: #636262;
    opacity: 1;
}

.password-toggle img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    filter: invert(1);
}

/* =========================================================
   ONLINE INDICATOR
   ========================================================= */

.online-indicator {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #4ade80;
    border: 2px solid #111;
    box-sizing: border-box;
    display: none;
    z-index: 10;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
}

.online-indicator.online {
    display: block;
}

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

#profileModal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#profileModal > .modal-window {
    width: 420px;
    max-width: calc(100vw - 30px);
    box-sizing: border-box;
    padding: 28px;
    background: #111111;
    border: 1px solid #2c2c2c;
    border-radius: 55px;
    color: #ffffff;
    box-shadow: 0px 0px 35px rgba(231, 231, 231, 0.164) !important;
}

#profileModal > .modal-window > h2 {
    margin: 0 0 25px 0;
    text-align: center;
    font-size: 22px;
    font-weight: 600;
    color: #ffffff;
}

#profileModal .profile-header {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 28px;
}

#profileModal #profileAvatar {
    width: 110px;
    height: 110px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    box-sizing: border-box;
    border-radius: 50%;
    background: #242424;
    border: 2px solid #3a3a3a;
    color: #ffffff;
    font-size: 42px;
    font-weight: 600;
    text-transform: uppercase;
    user-select: none;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.45);
}

.profile-avatar-wrapper {
    position: relative;
    width: 110px;
    height: 110px;
    margin-bottom: 14px;
    cursor: pointer;
}

.profile-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    background: #242424;
    border: 2px solid #3a3a3a;
    color: #ffffff;
    font-size: 42px;
    font-weight: 600;
    text-transform: uppercase;
    user-select: none;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.45);
    box-sizing: border-box;
}

.avatar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

@media (max-width: 400px) {
    .avatar-overlay {
        left: 8px;
        width: 86%;
        height: 86%;
    }
}

.profile-avatar-wrapper:not(.is-owner) .avatar-overlay {
    display: none !important;
}

.profile-avatar-wrapper:hover .avatar-overlay {
    opacity: 1;
}

.avatar-overlay-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    filter: invert(1);
}

.avatar-overlay-plus {
    font-size: 40px;
    color: #ffffff;
    line-height: 1;
}

#profileModal .profile-header-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#profileModal .profile-username-row {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px;
}

#profileModal #profileUsername {
    color: #999999;
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
}

#profileModal .profile-display-name-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
}

#profileModal #profileDisplayName {
    max-width: calc(100% - 40px);
    font-weight: 600;
    line-height: 34px;
    text-align: center;
    word-break: break-word;
}

.profile-display-name.my {
    color: white;
    font-size: 27px;
    font-weight: bold;
    margin-left: 38px;
}

.profile-display-name.other {
    color: white;
    font-size: 27px;
    font-weight: bold;
    text-align: center;
}

#profileModal #editProfileNameButton {
    width: 32px;
    height: 32px;
    margin-bottom: 9px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 7px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #8f8f8f;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

#profileModal #editProfileNameButton:hover {
    background: #242424;
    color: #ffffff;
    transform: scale(1.05);
}

#profileModal #editProfileNameButton:active {
    transform: scale(0.94);
}

#profileModal .profile-info {
    width: 100%;
    box-sizing: border-box;
    border-top: 1px solid #2b2b2b;
}

#profileModal .profile-info-row {
    width: 100%;
    min-height: 52px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5px;
    border-bottom: 1px solid #2b2b2b;
}

#profileModal .profile-info-row > span {
    color: #888888;
    font-size: 14px;
    font-weight: 400;
}

#profileModal .profile-info-row > strong {
    max-width: 58%;
    color: #eeeeee;
    font-size: 14px;
    font-weight: 500;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#profileModal #profileMessage {
    min-height: 20px;
    margin-top: 10px;
    color: #999999;
    font-size: 13px;
    text-align: center;
}

#profileModal #profileWriteButton,
#profileModal #backButton {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    width: 120px;
    box-sizing: border-box;
    margin-top: 17px;
    padding: 12px 16px;
    border: 1px solid #333333;
    border-radius: 34px;
    background: #1c1c1c;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

#profileModal #profileWriteButton:hover,
#profileModal #backButton:hover {
    background: #262626;
    border-color: #444444;
}

.edit-profile-button img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    filter: invert(1);
}

/* =========================================================
   EDIT PROFILE NAME
   ========================================================= */

#editProfileNameModal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#editProfileNameModal > .modal-window {
    width: 380px;
    max-width: calc(100vw - 30px);
    box-sizing: border-box;
    padding: 25px;
    background: #111111;
    border: 1px solid #2c2c2c;
    border-radius: 18px;
    color: #ffffff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

#editProfileNameModal h2 {
    margin: 0 0 20px 0;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
}

#editProfileNameModal #displayNameInput {
    width: 100%;
    height: 44px;
    box-sizing: border-box;
    padding: 0 13px;
    border: 1px solid #353535;
    border-radius: 10px;
    outline: none;
    background: #1a1a1a;
    color: #ffffff;
    font-size: 15px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

#editProfileNameModal #displayNameInput:focus {
    border-color: #555555;
    background: #202020;
}

#editProfileNameModal #displayNameInput::placeholder {
    color: #666666;
}

#editProfileNameModal #editProfileMessage {
    min-height: 20px;
    margin-top: 9px;
    color: #999999;
    font-size: 13px;
    text-align: center;
}

#editProfileNameModal .modal-buttons {
    display: flex;
    gap: 10px;
    margin-top: 17px;
}

#editProfileNameModal .modal-buttons button {
    flex: 1;
    height: 42px;
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
}

#editProfileNameModal #cancelEditProfileButton {
    background: #1c1c1c;
    border: 1px solid #333333;
    color: #ffffff;
}

#editProfileNameModal #cancelEditProfileButton:hover {
    background: #262626;
}

#editProfileNameModal #saveProfileButton {
    background: #ffffff;
    border: 1px solid #ffffff;
    color: #000000;
}

#editProfileNameModal #saveProfileButton:hover {
    background: #dddddd;
}

/* =========================================================
   AVATAR CROP
   ========================================================= */

.avatar-crop-modal {
    width: 480px;
    max-width: calc(100vw - 30px);
}

.avatar-crop-container img {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

.avatar-crop-buttons {
    display: flex;
    gap: 10px;
}

.avatar-crop-buttons button {
    flex: 1;
    padding: 12px;
    border-radius: 24px;
    font-size: 14px;
    cursor: pointer;
}

.avatar-crop-buttons .secondary {
    background: transparent;
    border: 1px solid #30353d;
    color: #aeb4bd;
}

.avatar-crop-buttons .secondary:hover {
    background: #1c2026;
    color: #ffffff;
    border-color: #454b54;
}

#avatarCropSave {
    background: #ffffff;
    color: #101216;
    font-weight: 600;
}

#avatarCropSave:hover {
    background: #e9e9e9;
}

.avatar-crop-wrapper {
    position: relative;
    width: 260px;
    height: 260px;
    margin: 0 auto 15px;
    border-radius: 50%;
    overflow: hidden;
    background: #414040;
}

.avatar-crop-wrapper img {
    opacity: 1 !important;
    display: block;
    filter: none !important;
    max-width: none !important;
}

.avatar-crop-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    pointer-events: none;
    box-shadow: none;
}

.cropper-crop-box,
.cropper-view-box,
.cropper-face,
.cropper-line,
.cropper-point {
    opacity: 0 !important;
}

.cropper-crop-box,
.cropper-view-box,
.cropper-face,
.cropper-line,
.cropper-point,
.cropper-modal {
    background: transparent !important;
    display: none !important;
}

.cropper-container,
.cropper-container * {
    max-width: none !important;
}

.cropper-container img {
    max-width: none !important;
}

.cropper-canvas,
.cropper-wrap-box,
.cropper-crop-box {
    background: transparent !important;
}

/* =========================================================
   SETTINGS
   ========================================================= */

.settings-window {
    position: relative;
    width: 420px;
    max-width: calc(100vw - 30px);
}

#closeRegistrationsButton,
#closeSettingsModalButton,
#closeInterfaceModalButton {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s ease;
}

#closeRegistrationsButton:hover,
#closeSettingsModalButton:hover,
#closeInterfaceModalButton:hover {
    background: #2a2f36;
}

#closeRegistrationsButton img,
#closeSettingsModalButton img,
#mobileUpdatesCloseButton img,
#closeInterfaceModalButton img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: invert(1);
}

.settings-section {
    margin-top: 20px;
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
}

.settings-label {
    font-size: 15px;
    color: #ffffff;
}

.settings-hint {
    margin-top: 5px;
    font-size: 12px;
    color: #858b94;
}

#registrationsSettingsButton.settings-nav-button,
#forceUpdateButton.settings-nav-button,
#notificationsSettingsButton.settings-nav-button,
#passwordSettingsButton.settings-nav-button,
#installSettingsButton.settings-nav-button,
#devicesSettingsButton.settings-nav-button,
#privacySettingsButton.settings-nav-button,
#voiceVideoSettingsButton.settings-nav-button,
#interfaceSettingsButton.settings-nav-button {
    width: 100%;
    height: 50px;
    padding: 14px 16px;
    margin-top: 12px;
    border: 1.7px solid #646464;
    border-radius: 35px;
    background: #2c2c2c;
    color: #ffffff;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    text-align: left;
    transition: background 0.18s ease, border-color 0.18s ease;
}

#registrationsSettingsButton.hidden,
#forceUpdateButton.hidden,
#notificationsSettingsButton.hidden,
#passwordSettingsButton.hidden,
#installSettingsButton.hidden,
#devicesSettingsButton.hidden,
#privacySettingsButton.hidden,
#voiceVideoSettingsButton.hidden,
#interfaceSettingsButton.hidden {
    display: none !important;
}

#registrationsSettingsButton.settings-nav-button:hover,
#forceUpdateButton.settings-nav-button:hover,
#notificationsSettingsButton.settings-nav-button:hover,
#passwordSettingsButton.settings-nav-button:hover,
#installSettingsButton.settings-nav-button:hover,
#devicesSettingsButton.settings-nav-button:hover,
#privacySettingsButton.settings-nav-button:hover,
#voiceVideoSettingsButton.settings-nav-button:hover,
#interfaceSettingsButton.settings-nav-button:hover {
    background: #333333;
    border-color: #494949;
}

#registrationsSettingsButton.settings-nav-button span,
#forceUpdateButton.settings-nav-button span,
#notificationsSettingsButton.settings-nav-button span,
#passwordSettingsButton.settings-nav-button span,
#installSettingsButton.settings-nav-button span,
#devicesSettingsButton.settings-nav-button span,
#privacySettingsButton.settings-nav-button span,
#voiceVideoSettingsButton.settings-nav-button span,
#interfaceSettingsButton.settings-nav-button span {
    width: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#registrationsSettingsButton.settings-nav-button img,
#forceUpdateButton.settings-nav-button img,
#notificationsSettingsButton.settings-nav-button img,
#passwordSettingsButton.settings-nav-button img,
#installSettingsButton.settings-nav-button img,
#devicesSettingsButton.settings-nav-button img,
#privacySettingsButton.settings-nav-button img,
#voiceVideoSettingsButton.settings-nav-button img,
#interfaceSettingsButton.settings-nav-button img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: invert(1);
}

.switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #282a2c;
    transition: 0.25s;
    border-radius: 26px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: #ffffff;
    transition: 0.25s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #5c5c5c;
}

input:checked + .slider:before {
    transform: translateX(22px);
}

#addAccountSubmit,
#modalAddContactButton {
    width: 100%;
    padding: 14px 16px;
    margin-top: 12px;
    border: 1.7px solid #9c9c9c;
    border-radius: 24px;
    background: #ffffff;
    color: #000000;
    font-size: 15px;
    cursor: pointer;
    text-align: center;
    transition: background 0.18s ease, border-color 0.18s ease;
    font-weight: bold;
}


/* =========================================================
   UPDATES
   ========================================================= */

.updates-window {
    width: 620px;
    max-width: calc(100vw - 40px);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    background: #17191d;
    border: 1px solid #30343b;
    border-radius: 18px;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.55);
}

.updates-window h2 {
    margin: 0;
    padding: 22px 25px 20px;
    font-size: 21px;
    font-weight: 600;
    color: #ffffff;
    background: #1b1e23;
    border-bottom: 1px solid #2d3138;
}

.updates-list {
    flex: 1;
    overflow-y: auto;
    padding: 18px 20px;
    background: #121418;
}

.updates-list::-webkit-scrollbar {
    width: 7px;
}

.updates-list::-webkit-scrollbar-track {
    background: transparent;
}

.updates-list::-webkit-scrollbar-thumb {
    background: #363b44;
    border-radius: 10px;
}

.updates-list::-webkit-scrollbar-thumb:hover {
    background: #4a505a;
}

.updates-list > p {
    margin: 35px 10px;
    text-align: center;
    color: #707680;
    font-size: 14px;
}

.update-item {
    position: relative;
    margin-bottom: 14px;
    padding: 19px 20px 18px;
    background: #1b1e23;
    border: 1px solid #2b3038;
    border-radius: 13px;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.update-item:last-child {
    margin-bottom: 0;
}

.update-item:hover {
    background: #1e2228;
    border-color: #3a404a;
    transform: translateY(-1px);
}

.update-item h3 {
    margin: 0;
    padding-right: 5px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    color: #ffffff;
}

.update-date {
    margin-top: 6px;
    font-size: 12px;
    color: #777d87;
}

.update-item p {
    margin: 14px 0 0;
    font-size: 14px;
    line-height: 1.65;
    color: #c7cbd1;
    white-space: pre-wrap;
    word-break: break-word;
}

.update-admin-buttons {
    display: flex;
    gap: 8px;
    margin-top: 17px;
    padding-top: 14px;
    border-top: 1px solid #2b3037;
}

.update-admin-buttons button {
    flex: 1;
    min-height: 36px;
    padding: 8px 12px;
    border: 1px solid #343941;
    border-radius: 9px;
    background: #22262c;
    color: #dfe2e6;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease,
        color 0.18s ease, transform 0.15s ease;
}

.update-admin-buttons button:hover {
    background: #2b3037;
    border-color: #454b55;
    color: #ffffff;
}

.update-admin-buttons button:active {
    transform: scale(0.97);
}

.edit-update-button {
    color: #d7dbe0 !important;
}

.delete-update-button {
    color: #e0a4a4 !important;
    border-color: #493034 !important;
    background: #241b1e !important;
}

.delete-update-button:hover {
    color: #ffffff !important;
    background: #392126 !important;
    border-color: #674047 !important;
}

#ownerUpdateControls {
    padding: 14px 20px;
    background: #171a1f;
    border-top: 1px solid #2b3037;
}

#openCreateUpdateButton {
    width: 100%;
    min-height: 42px;
    padding: 10px 16px;
    border: 1px solid #3d4651;
    border-radius: 10px;
    background: #242930;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

#openCreateUpdateButton:hover {
    background: #2d333b;
    border-color: #515b68;
}

#openCreateUpdateButton:active {
    transform: scale(0.98);
}

#mobileCreateUpdateButton {
    width: 100%;
    min-height: 42px;
    padding: 10px 16px;
    border: 1px solid #3d4651;
    border-radius: 10px;
    background: #242930;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.updates-window .modal-buttons {
    display: flex;
    gap: 10px;
    padding: 15px 20px;
    margin: 0;
    background: #1b1e23;
    border-top: 1px solid #2d3138;
}

#updatesOkButton {
    flex: 1;
    min-height: 40px;
    border: 1px solid #3d4651;
    border-radius: 9px;
    background: #262b32;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

#updatesOkButton:hover {
    background: #30363e;
    border-color: #505864;
}

#updatesCloseButton {
    flex: 1;
    min-height: 40px;
    border: 1px solid #343941;
    border-radius: 9px;
    background: transparent;
    color: #9da3ac;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

#updatesCloseButton:hover {
    background: #24282e;
    color: #ffffff;
    border-color: #444a53;
}

/* =========================================================
   CREATE UPDATE
   ========================================================= */

#createUpdateModal .modal-window {
    width: 520px;
    max-width: calc(100vw - 40px);
    padding: 25px;
    background: #17191d;
    border: 1px solid #30343b;
    border-radius: 17px;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.55);
}

#createUpdateModal .modal-window h2 {
    margin: 0 0 22px;
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
}

#updateTitleInput {
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 11px 13px;
    margin-bottom: 12px;
    background: #101216;
    border: 1px solid #30353d;
    border-radius: 9px;
    outline: none;
    color: #ffffff;
    font-size: 14px;
    transition: border-color 0.2s ease, background 0.2s ease;
}

#updateTitleInput::placeholder {
    color: #6f757e;
}

#updateTitleInput:focus {
    background: #13161a;
    border-color: #505761;
}

#updateTextInput {
    width: 100%;
    box-sizing: border-box;
    min-height: 150px;
    padding: 12px 13px;
    margin-bottom: 15px;
    resize: vertical;
    background: #101216;
    border: 1px solid #30353d;
    border-radius: 9px;
    outline: none;
    color: #ffffff;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    transition: border-color 0.2s ease, background 0.2s ease;
}

#updateTextInput::placeholder {
    color: #6f757e;
}

#updateTextInput:focus {
    background: #13161a;
    border-color: #505761;
}

#createUpdateButton {
    width: 100%;
    min-height: 43px;
    margin-bottom: 9px;
    border: 1px solid #414852;
    border-radius: 9px;
    background: #292e35;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

#createUpdateButton:hover {
    background: #343a43;
    border-color: #555d68;
}

#createUpdateButton:active {
    transform: scale(0.98);
}

#closeCreateUpdateButton {
    width: 100%;
    min-height: 40px;
    border: 1px solid #30353c;
    border-radius: 9px;
    background: transparent;
    color: #858b94;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

#closeCreateUpdateButton:hover {
    background: #23272d;
    color: #ffffff;
}

/* =========================================================
   EDIT UPDATE
   ========================================================= */

#editUpdateModal {
    display: none;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 20px;
}

#editUpdateModal .modal-window {
    width: 100%;
    max-width: 520px;
    padding: 30px;
    box-sizing: border-box;
    background: #171717;
    border: 1px solid #303030;
    border-radius: 18px;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.025);
    animation: editUpdateOpen 0.2s ease-out;
}

#editUpdateModal h2 {
    margin: 0 0 25px 0;
    color: #ffffff;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.3px;
    text-align: left;
}

#editUpdateTitleInput {
    display: block;
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    padding: 0 15px;
    margin-bottom: 15px;
    background: #101010;
    color: #ffffff;
    border: 1px solid #353535;
    border-radius: 10px;
    outline: none;
    font-family: inherit;
    font-size: 15px;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

#editUpdateTitleInput::placeholder {
    color: #777777;
}

#editUpdateTitleInput:hover {
    border-color: #454545;
}

#editUpdateTitleInput:focus {
    background: #131313;
    border-color: #777777;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
}

#editUpdateTextInput {
    display: block;
    width: 100%;
    min-height: 180px;
    box-sizing: border-box;
    padding: 14px 15px;
    margin-bottom: 22px;
    resize: vertical;
    background: #101010;
    color: #ffffff;
    border: 1px solid #353535;
    border-radius: 10px;
    outline: none;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.55;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

#editUpdateTextInput::placeholder {
    color: #777777;
}

#editUpdateTextInput:hover {
    border-color: #454545;
}

#editUpdateTextInput:focus {
    background: #131313;
    border-color: #777777;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
}

#saveEditUpdateButton {
    width: 100%;
    height: 48px;
    margin-bottom: 10px;
    border: none;
    border-radius: 10px;
    background: #ffffff;
    color: #111111;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

#saveEditUpdateButton:hover {
    background: #e8e8e8;
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.08);
}

#saveEditUpdateButton:active {
    transform: scale(0.98);
}

#closeEditUpdateButton {
    width: 100%;
    height: 46px;
    border: 1px solid #353535;
    border-radius: 10px;
    background: #202020;
    color: #bdbdbd;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

#closeEditUpdateButton:hover {
    background: #292929;
    border-color: #4a4a4a;
    color: #ffffff;
}

@keyframes editUpdateOpen {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

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

.mobile-messenger {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #111;
    color: white;
    overflow: hidden;
}

.mobile-top-bar {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    height: 58px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 2px;
    background: #ffffff0f;
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0px 0px 35px rgba(231, 231, 231, 0.1) !important;
    border: 1px solid #7c7c7c57;
    border-radius: 50px;
    margin-top: 8px !important;
}

.mobile-top-bar .mobile-profile-button {
    margin-left: auto;
    flex-shrink: 0;
}

.mobile-menu-button {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: white;
    border-radius: 9px;
    font-size: 20px;
}

.mobile-menu-button img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: invert(1);
}

.mobile-logo {
    flex: 1;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    font-family: Verdana, sans-serif;
    text-shadow: 0 0 25px rgba(255, 255, 255, 0.3);
}

.mobile-profile-button {
    max-width: 110px;
    height: 40px;
    padding: 0 4px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background: transparent;
    color: white;
    border: none;
    border-radius: 24px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.mobile-profile-button:active {
    transform: scale(0.96);
}

.mobile-profile-avatar {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
    background: #3a3a3a;
    color: white;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    overflow: hidden;
}

.mobile-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.mobile-profile-name {
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
}

.mobile-chats-screen {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.mobile-chats-header {
    height: 55px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-bottom: 1px solid #2d2d2d;
}

.mobile-chats-header h2 {
    margin: 0;
    font-size: 19px;
    text-align: left;
}

.mobile-chats-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px;
}

.mobile-empty-chats {
    padding: 35px 15px;
    text-align: center;
    color: #666;
    font-size: 14px;
}

.mobile-chat-item {
    width: 100%;
    min-height: 68px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    margin-bottom: 5px;
    background: #1c1c1c;
    border: 1px solid transparent;
    border-radius: 24px;
    cursor: pointer;
}

.mobile-chat-item:hover {
    background: #252525;
    border-color: #333;
}

.mobile-chat-item.has-unread {
    background: #2a1f1f;
    border-left: 3px solid #e53935;
}

.mobile-chat-item-avatar {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #3a3a3a;
    border-radius: 50%;
    color: white;
    font-size: 17px;
    font-weight: bold;
    position: relative;
}

.mobile-chat-item-info {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mobile-chat-item-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 15px;
    font-weight: 600;
}

.mobile-chat-item-username {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #777;
    font-size: 12px;
}

.mobile-unread-badge {
    background: #e53935;
    color: #ffffff;
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 13px;
    font-weight: bold;
    min-width: 24px;
    text-align: center;
    display: inline-block;
    margin-left: auto;
    white-space: nowrap;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.mobile-unread-badge.hidden {
    display: none !important;
    opacity: 0;
}

.mobile-bottom-bar {
    flex-shrink: 0;
    padding: 15px;
}

.mobile-add-contact-button {
    width: 200px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: #ffffff0a;
    color: white;
    border: 1px solid #3b3b3b;
    border-radius: 34px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 10px 0 35px rgba(53, 53, 53, 0.5);
}

.mobile-add-contact-button span {
    font-size: 20px;
}

/* =========================================================
   MOBILE CHAT SCREEN (ЭФФЕКТ СТЕКЛА КАК В TELEGRAM)
   ========================================================= */

.mobile-chat-screen {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: #111;
    z-index: 10;
    overflow: hidden;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

/* ШАПКА - поверх сообщений, со стеклом */
.mobile-chat-header {
    flex-shrink: 0;
    top: 10px;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    height: 56px;
    background: rgba(19, 19, 19, 0.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-sizing: border-box;
}

.mobile-back-button {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: white;
    border: none;
    font-size: 25px;
}

.mobile-chat-avatar {
    width: 42px;
    height: 42px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #444;
    color: white;
    font-size: 16px;
    font-weight: bold;
}

.mobile-chat-user-info {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mobile-chat-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 15px;
    font-weight: 600;
    color: #f1f2f3;
}

.mobile-chat-status {
    font-size: 11px;
    color: #686f78;
}

.mobile-chat-status.online {
    color: #6fdc8b;
}

/* Кнопка настроек чата */
.mobile-chat-options-button {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #aaa;
    font-size: 24px;
    cursor: pointer;
    flex-shrink: 0;
}

.mobile-chat-options-button:active {
    background: #333;
    color: white;
}

/* Меню настроек чата */
.mobile-chat-options-menu {
    display: none;
    position: absolute;
    top: 55px;
    right: 8px;
    min-width: 180px;
    padding: 5px;
    background: #222;
    border: 1px solid #444;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
    z-index: 1000;
}

.mobile-chat-options-menu.open {
    display: flex;
    flex-direction: column;
}

.mobile-chat-options-menu button {
    border: none;
    background: transparent;
    color: white;
    text-align: left;
    padding: 11px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

.mobile-chat-options-menu button:active {
    background: #333;
}

/* СПИСОК СООБЩЕНИЙ */
.mobile-messages-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 20px;
    padding-top: 70px;
    padding-bottom: 64px;
    background: transparent;
    box-sizing: border-box;
    width: 100%;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

.mobile-message {
    max-width: min(70%, 600px);
    padding: 9px 11px;
    border-radius: 20px;
    word-break: break-word;
    position: relative;
}

.mobile-my-message {
    align-self: flex-end;
    background: #4a4a4a;
    border-bottom-right-radius: 3px;
}

.mobile-other-message {
    align-self: flex-start;
    background: #303030;
    border-bottom-left-radius: 3px;
}

.mobile-message-text {
    font-size: 14px;
    line-height: 1.35;
    color: #eeeeef;
}

.mobile-message-time {
    margin-top: 4px;
    font-size: 9px;
    text-align: right;
    opacity: 0.45;
    color: #b9b9b9;
}

.mobile-message-status {
    margin-top: 3px;
    text-align: right;
    color: #aaa;
    font-size: 11px;
    letter-spacing: -2px;
}

.mobile-message-meta {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

.mobile-message-meta .mobile-message-time {
    margin-top: 0;
}

.mobile-message-meta .mobile-message-status {
    margin-top: 0;
    margin-left: 0;
}

.mobile-message-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 8px;
}

.mobile-message-row .mobile-message-text {
    flex: 1;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.mobile-message-row .mobile-message-meta {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 0;
}

.mobile-empty-messages {
    margin: auto;
    color: #555;
    font-size: 13px;
    text-align: center;
}

/* ПОЛЕ ВВОДА - прижато к низу, поверх сообщений, со стеклом */
.mobile-message-input-area {
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    min-height: 56px;
    background: rgba(19, 19, 19, 0.55);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    box-sizing: border-box;
    pointer-events: none;
}

.mobile-message-input-area .mobile-message-input-wrapper,
.mobile-message-input-area .mobile-send-button {
    pointer-events: auto;
}

.mobile-message-input-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    position: relative;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    padding: 0 4px;
    height: 40px;
    transition: border-color 0.2s, background 0.2s;
}

.mobile-message-input-wrapper:focus-within {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
}

#mobileMessageInput {
    flex: 1;
    width: auto;
    height: 100%;
    margin: 0;
    padding: 0 10px;
    background: transparent !important;
    border: none !important;
    color: #ffffff;
    font-size: 15px;
    outline: none;
    font-family: inherit;
}

#mobileMessageInput::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

#mobileMessageInput:focus {
    box-shadow: none;
}

.mobile-emoji-button {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #ffffff;
    cursor: pointer;
    border-radius: 50%;
    padding: 0;
    margin: 0;
}

.mobile-emoji-button:active {
    background: rgba(255, 255, 255, 0.08);
}

.mobile-emoji-button img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: invert(1);
}

.mobile-send-button {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s;
}

.mobile-send-button:active {
    background: rgba(255, 255, 255, 0.16);
}

.mobile-send-button img,
.voice-mic-button svg {
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: invert(1);
}

.mobile-emoji-picker {
    position: absolute;
    bottom: 60px;
    right: 60px;
    z-index: 3000;
    background: rgba(19, 19, 19, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.mobile-emoji-picker emoji-picker {
    width: 300px;
    max-height: 350px;
}

/* Меню удаления */
.mobile-message-delete-menu {
    display: none;
    position: fixed; 
    top: 0;          
    left: 0;        
    width: 160px;
    padding: 5px;
    background: #222;
    border: 1px solid #444;
    border-radius: 30px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    z-index: 110;  
}

@media (max-width: 400px) {
    .mobile-message-delete-menu {
        z-index: 110 !important;
    }
}

.mobile-my-message .mobile-message-delete-menu {
    right: 4px;
}

.mobile-other-message .mobile-message-delete-menu {
    left: 100%;
    margin-left: 8px;
}

.mobile-message-delete-menu.open {
    display: flex;
    flex-direction: column;
}

.mobile-message-delete-menu button {
    border: none;
    background: transparent;
    color: white;
    text-align: left;
    padding: 10px 12px;
    border-radius: 30px;
    font-size: 14px;
}

.mobile-message-delete-menu button:active {
    background: #333;
    border-radius: 30px;
}

.mobile-delete-for-all-button {
    color: #ff5f4d !important;
}

.mobile-my-message .mobile-message-menu-button {
    right: 4px;
}

.mobile-other-message .mobile-message-menu-button {
    left: 4px;
}

/* =========================================================
   ИКОНКИ В МЕНЮ УДАЛЕНИЯ СООБЩЕНИЙ
   ========================================================= */

.message-delete-menu button,
.mobile-message-delete-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.message-delete-menu .menu-icon,
.mobile-message-delete-menu .menu-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.message-delete-menu .menu-icon img,
.mobile-message-delete-menu .menu-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: invert(1); 
}

.message-delete-menu .copy-message-button.menu-icon img,
.mobile-message-delete-menu .mobile-copy-message-button .menu-icon img {
    width: 27px;
    height: 27px;
}

.message-delete-menu .edit-message-button .menu-icon img,
.mobile-message-delete-menu .mobile-edit-message-button .menu-icon img {
    width: 27px;
    height: 27px;
}

.message-delete-menu .copy-message-button .menu-icon img,
.mobile-message-delete-menu .mobile-reply-message-button .menu-icon img {
    transform: scaleX(-1);
}

/* Красная иконка для "Удалить у всех" */
.mobile-delete-for-all-button .menu-icon img,
.delete-for-all-button .menu-icon img {
    filter: invert(48%) sepia(90%) saturate(2000%) hue-rotate(330deg);
}

/* =========================================================
   MOBILE CONTROL PANEL
   ========================================================= */

.mobile-control-panel {
    position: fixed;
    top: 2px;
    left: 4px;
    width: 82%;
    max-width: 320px;
    height: 99dvh;
    z-index: 20000;
    display: flex;
    flex-direction: column;
    /*background: #111419;*/
    backdrop-filter: blur(9px) !important;
    border-right: 1.25px solid #d8d8d853;
    border-radius: 30px;
    transform: translateX(-105%);
    transition: transform 0.25s ease;
}

.mobile-control-panel.open {
    transform: translateX(0);
    border-radius: 30px;
    box-shadow: 10px 0 35px rgba(53, 53, 53, 0.5);
}

.mobile-control-header {
    height: 55px;
    /* С отступом от краёв, как кнопка «Выйти»: скругление шапки идёт ровно
       внутри скругления панели, без второго контура в углу */
    margin: 8px 8px 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background: #ffffff0a;
    color: #ffffff;
    font-size: 17px;
    font-weight: 600;
    border-radius: 22px;
    box-shadow: 0px 0px 35px rgba(231, 231, 231, 0.1) !important;
    border: 1px solid #7c7c7c57;
}

.mobile-control-header button {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #858b94;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-control-header button:active {
    background: #20242a;
    color: #ffffff;
}

.mobile-control-content {
    flex: 1;
    padding: 12px;
    background: #11111100;
}

.mobile-back-button img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: invert(1);
    transform: rotate(90deg);
}
.mobile-control-bottom img,
.mobile-control-content img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: invert(1);
}

.mobile-control-button {
    width: 100%;
    height: 50px;
    margin-bottom: 5px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #b5bac2;
    display: flex;
    align-items: center;
    gap: 13px;
    text-align: left;
    font-size: 15px;
}

.mobile-control-button span {
    width: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.mobile-control-button:active {
    background: #20242a;
    color: #ffffff;
}

.mobile-control-bottom {
    flex-shrink: 0;
    padding: 12px;
    border-radius: 30px;
    
}

.mobile-control-logout {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid #2c3139;
    border-radius: 24px;
    background: transparent;
    color: #9a9fa7;
    display: flex;
    align-items: center;
    gap: 13px;
    text-align: left;
    font-size: 15px;
}

.mobile-control-logout span {
    width: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.mobile-control-logout:active {
    background: #20242a;
    color: #ffffff;
}

.mobile-control-panel-overlay {
    position: fixed;
    inset: 0;
    z-index: 19999;
    background: rgba(0, 0, 0, 0.58);
    backdrop-filter: blur(1px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.mobile-control-panel-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

/* =========================================================
   МОБИЛЬНЫЕ СКРОЛЛБАРЫ
   ========================================================= */

.mobile-chats-list::-webkit-scrollbar,
.mobile-messages-list::-webkit-scrollbar {
    width: 5px;
}

.mobile-chats-list::-webkit-scrollbar-track,
.mobile-messages-list::-webkit-scrollbar-track {
    background: transparent;
}

.mobile-chats-list::-webkit-scrollbar-thumb,
.mobile-messages-list::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 10px;
}

/* =========================================================
   МОБИЛЬНЫЕ INPUT (фикс зума на iOS)
   ========================================================= */

input,
textarea,
select {
    font-size: 16px !important;
}

input:focus,
textarea:focus,
select:focus {
    font-size: 16px !important;
}

/* =========================================================
    Плавающая кнопка "Обновить" для всех пользователей 
    ========================================================= */
#forceUpdateBanner {
    position: fixed;
    bottom: 60px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;

    /* Стеклянный фон */
    background: rgb(255 255 255 / 9%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);

    /* Внутренние отступы и текст */
    padding: 20px 44px;
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;

    /* Скрыта по умолчанию */
    display: none;
    align-items: center;
    gap: 12px;

    /* Чтобы псевдоэлементы не выходили за пределы */
    isolation: isolate;
}

#forceUpdateBanner:hover {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 48px rgba(0, 0, 0, 0.5);
    transform: translate(-50%, -50%) scale(1.04);
}

/* Эффект при клике */
#forceUpdateBanner:active {
    transform: translate(-50%, -50%) scale(0.96);
}

#forceUpdateBanner::before,
#forceUpdateBanner::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transform: translate(-50%, -50%) scale(1);
    animation: wave 2s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

#forceUpdateBanner::after {
    animation-delay: 0.6s; /* задержка для создания двух волн */
}

/* Анимация волны */
@keyframes wave {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.6);
        opacity: 0;
    }
}

/* =========================================================
   ЦИТИРОВАНИЕ
   ========================================================= */

/* Блок цитаты над полем ввода (ПК) */
.quote-block {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-left: 3px solid #fdfdfd;
    border-radius: 24px;
    gap: 12px;
    min-height: 44px;
    
    /* ===== АБСОЛЮТНОЕ ПОЗИЦИОНИРОВАНИЕ (НЕ МЕНЯЕМ) ===== */
    position: absolute !important;
    bottom: 70px !important;
    left: 20px !important;
    right: 20px !important;
    z-index: 6 !important;
}

.quote-content {
    flex: 1;
    min-width: 0;
}

.quote-text {
    font-size: 14px;
    color: #e0e0e0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quote-author {
    font-size: 12px;
    color: #8a8a8a;
    margin-top: 2px;
}

.cancel-quote-button {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #999;
    cursor: pointer;
    border-radius: 50%;
    padding: 0;
    transition: background 0.2s;
}

.cancel-quote-button:hover {
    background: rgba(255, 255, 255, 0.1);
}

.cancel-quote-button img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    filter: invert(1);
    opacity: 0.6;
}

/* Блок цитаты в сообщении (ПК) */
.message-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.message-quote {
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.06);
    border-left: 3px solid #ffffff;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
}

.message-quote:hover {
    background: rgba(255, 255, 255, 0.1);
}

.message-quote-author {
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
}

.message-quote-text {
    font-size: 13px;
    color: #aaa;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================================================
   МОБИЛЬНЫЕ СТИЛИ ДЛЯ ЦИТИРОВАНИЯ
   ========================================================= */

/* Блок цитаты над полем ввода (Мобильный) */
.mobile-quote-block {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(10px);
    border-left: 3px solid #fefefe;
    border-radius: 24px;
    gap: 10px;
    min-height: 40px;
    
    /* ===== АБСОЛЮТНОЕ ПОЗИЦИОНИРОВАНИЕ (НЕ МЕНЯЕМ) ===== */
    position: absolute !important;
    bottom: 78px !important;
    left: 12px !important;
    right: 12px !important;
    z-index: 6 !important;
}

.mobile-quote-content {
    flex: 1;
    min-width: 0;
}

.mobile-quote-text {
    font-size: 16px;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-quote-author {
    font-size: 12px;
    color: #c6c6c6;
    margin-top: 1.5px;
}

.mobile-cancel-quote-button {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #999;
    cursor: pointer;
    border-radius: 50%;
    padding: 0;
}

.mobile-cancel-quote-button:active {
    background: rgba(255, 255, 255, 0.1);
}

.mobile-cancel-quote-button img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    filter: invert(1);
    opacity: 0.6;
}

/* Блок цитаты в сообщении (Мобильный) */
.mobile-message-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.mobile-message-quote {
    padding: 5px 8px;
    background: rgba(255, 255, 255, 0.06);
    border-left: 3px solid #ffffff;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
}

.mobile-message-quote:active {
    background: rgba(255, 255, 255, 0.1);
}

.mobile-message-quote-author {
    font-size: 12px;
}

.mobile-message-quote-text {
    font-size: 10px;
}

.h-captcha-container {
    pointer-events: auto;
    background-color: rgb(244 244 244 / 0%);
    border-radius: 30px;
    width: 272px;
    height: 67px;
    overflow: hidden;
}

/* =========================================================
   КНОПКА СКРОЛЛА ВНИЗ
   ========================================================= */

/* ПК версия — как на телефоне: круглая, по центру над полем ввода */
.scroll-to-bottom-btn {
    position: absolute;
    bottom: 84px;
    left: calc(50% - 22px);   /* по центру без transform: темы сбрасывают transform при нажатии */
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(19, 19, 19, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(103, 101, 103, 0.15);
    cursor: pointer;
    z-index: 20;
    transition: transform 0.2s ease, opacity 0.3s ease, background 0.2s ease;
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
}

.scroll-to-bottom-btn.visible {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.scroll-to-bottom-btn.visible:hover {
    background: rgba(50, 50, 55, 0.9);
    transform: scale(1.06);
}

.scroll-to-bottom-btn.visible:active {
    transform: scale(0.92);
}

.scroll-to-bottom-btn img {
    width: 21px;
    height: 21px;
    object-fit: contain;
    filter: invert(1);
}

/* Мобильная версия */
.mobile-scroll-to-bottom-btn {
    position: absolute;
    bottom: 76px;
    left: 45%;                    /* ← Отступ от левого края на 50% */
    transform: translateX(-50%);  /* ← Смещение на половину ширины кнопки */
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(19, 19, 19, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    box-shadow: 0 0px 20px rgba(103, 101, 103, 0.15);
    cursor: pointer;
    z-index: 20;
    transition: transform 0.2s ease, opacity 0.3s ease, background 0.2s ease;
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
}

.mobile-scroll-to-bottom-btn.visible {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.mobile-scroll-to-bottom-btn:active {
    background: rgba(61, 61, 61, 0.9);
    transform: scale(0.92);
}

.mobile-scroll-to-bottom-btn img {
    width: 21px;
    height: 21px;
    object-fit: contain;
    filter: invert(1);
}

/* =========================================================
   МОДАЛЬНОЕ ОКНО ПЕРЕСЫЛКИ
   ========================================================= */
.forward-window {
    width: 480px;
    max-width: calc(100vw - 30px);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    padding: 20px 25px 25px;
}

.forward-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.forward-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.forward-close-button {
    width: 34px;
    height: 34px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.forward-close-button:hover {
    background: #2a2f36;
}

.forward-close-button img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: invert(1);
}

.forward-contacts-list {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 15px;
    padding: 5px 0;
    max-height: 400px;
}

.forward-contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s ease;
    background: transparent;
}

.forward-contact-item:hover {
    background: #1d2127;
}

.forward-contact-item.selected {
    background: #2a2f36;
}

.forward-contact-item .forward-contact-avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #252a31;
    color: #e9eaec;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    overflow: hidden;
}

.forward-contact-item .forward-contact-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.forward-contact-item .forward-contact-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.forward-contact-item .forward-contact-name {
    font-weight: 600;
    color: #e7e9ec;
}

.forward-contact-item .forward-contact-username {
    font-size: 12px;
    color: #737a84;
}

.forward-contact-item .forward-contact-check {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #555;
    background: transparent;
    transition: all 0.15s ease;
}

.forward-contact-item.selected .forward-contact-check {
    border-color: #ffffff;
    background: #ffffff;
    position: relative;
}

.forward-contact-item.selected .forward-contact-check::after {
    content: "✓";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #111;
    font-size: 14px;
    font-weight: bold;
}

#forwardSendButton {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 10px;
    background: #ffffff;
    color: #101216;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, opacity 0.2s ease;
}

#forwardSendButton:hover {
    background: #e9e9e9;
}

#forwardSendButton:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

#forwardMessage {
    min-height: 20px;
    margin-top: 8px;
    margin-bottom: 12px;
    text-align: center;
    color: #858c95;
    font-size: 13px;
}

/* =========================================================
   ПЕРЕСЛАННЫЕ СООБЩЕНИЯ
   ========================================================= */
.message-forwarded-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #888;
    margin-bottom: 3px;
}

.message-forwarded-label img {
    width: 14px;
    height: 14px;
    opacity: 0.6;
    filter: invert(0.6);
}

/* Тёмная иконка для светлых сообщений (мои) */
.my-message .message-forwarded-label img {
    filter: invert(0.8);
}

.my-message .message-forwarded-label {
    color: #aaa;
}

/* Мобильная версия */
.mobile-message .mobile-message-forwarded-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: #888;
    margin-bottom: 2px;
}

.mobile-message .mobile-message-forwarded-label img {
    width: 12px;
    height: 12px;
    opacity: 0.6;
    filter: invert(0.6);
}

.mobile-my-message .mobile-message-forwarded-label img {
    filter: invert(0.8);
}

.mobile-my-message .mobile-message-forwarded-label {
    color: #aaa;
}

/* Адаптация для мобильных */
@media (max-width: 600px) {
    .forward-window {
        width: calc(100vw - 24px);
        padding: 18px 16px 20px;
        max-height: 85vh;
    }
    .forward-contacts-list {
        max-height: 300px;
    }
    .forward-contact-item {
        padding: 8px 12px;
    }
}

/* =========================================================
   АДАПТАЦИЯ
   ========================================================= */

@media (max-width: 700px) {
    .sidebar {
        width: 240px;
    }

    .message {
        max-width: 82%;
    }

    .auth-box {
        width: calc(100% - 30px);
        padding: 28px;
    }

    html,
    body {
        overflow: hidden !important;
        width: 100vw;
        height: 100dvh;
        max-width: 100vw;
        max-height: 100dvh;
    }

    .messenger-screen {
        width: 100vw;
        height: 100dvh;
        max-width: 100vw;
        max-height: 100dvh;
        overflow: hidden;
    }

    .top-bar {
        width: 100%;
        flex-shrink: 0;
        overflow: hidden;
    }

    .messenger-main {
        width: 100vw;
        height: calc(100dvh - 58px);
        max-width: 100vw;
        overflow: hidden;
    }

    .sidebar {
        width: 220px;
        flex-shrink: 0;
        overflow: hidden;
    }

    .chat-area {
        width: calc(100vw - 220px);
        min-width: 0;
        overflow: hidden;
    }

    .chat-screen {
        width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    #messagesList {
        width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }

    #messageInputSection {
        width: 100%;
        padding: 8px;
        gap: 7px;
        flex-shrink: 0;
    }

    #messageInputSection #messageInput {
        width: auto;
        min-width: 0;
        height: 44px;
        flex: 1 1 auto;
    }

    .icon-button {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
    }

    .online-indicator {
        width: 12px;
        height: 12px;
        border-width: 1.5px;
    }

    .mobile-chat-screen {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .mobile-chat-header {
        flex-shrink: 0;
    }

    .mobile-messages-list {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: linear-gradient(to bottom, rgba(50, 50, 50, 0.41) 0%, transparent 15%, transparent 95%, rgba(50, 50, 50, 0.41) 100%);
    }

    .mobile-message-input-area {
        flex-shrink: 0;
    }

    #forceUpdateBanner {
        padding: 14px 24px;
        font-size: 16px;
        border-radius: 40px;
        gap: 8px;
    }
    #forceUpdateBanner::before {
        font-size: 20px;
    }
}

@media (max-width: 550px) {
    .sidebar {
        width: 200px;
    }

    .top-logo {
        font-size: 17px;
        letter-spacing: 2px;
    }

    .profile-button {
        max-width: 130px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .chat-user-header {
        padding: 10px 12px;
    }

    #messagesList {
        padding: 14px;
    }

    .contacts-window {
        width: 100%;
    }

    .sidebar {
        width: 190px;
    }

    .chat-area {
        width: calc(100vw - 190px);
    }

    .top-logo {
        font-size: 18px;
    }
}

@media (max-width: 400px) {
    .mobile-chat-header {
        padding: 6px 10px;
        height: 48px;
    }

    .mobile-messages-list {
        padding-top: 60px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .mobile-message-input-area {
        padding: 6px 10px;
        min-height: 48px;
    }

    .mobile-message-input-wrapper {
        height: 50px;
    }

    #mobileMessageInput {
        font-size: 14px;
    }

    .mobile-send-button {
        width: 34px;
        height: 34px;
    }

    .mobile-send-button img {
        width: 24px;
        height: 24px;
    }

    .mobile-scroll-to-bottom-btn {
        bottom: 84px;
        width: 40px;
        height: 40px;

    }
    
    .mobile-scroll-to-bottom-btn img {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 600px) {
    #profileModal > .modal-window {
        width: calc(100vw - 24px);
        padding: 24px 20px;
        border-radius: 42px;
    }

    #profileModal > .modal-window > h2 {
        font-size: 21px;
        margin-bottom: 22px;
    }

    #profileModal #profileAvatar {
        width: 95px;
        height: 95px;
        font-size: 36px;
        margin-bottom: 13px;
    }

    #profileModal #profileDisplayName {
        font-size: 24px;
    }

    #profileModal .profile-info-row {
        min-height: 48px;
    }

    #profileModal .profile-info-row > strong {
        max-width: 55%;
    }

    #editProfileNameModal > .modal-window {
        width: calc(100vw - 24px);
        padding: 22px 18px;
    }

    .updates-window {
        width: calc(100vw - 24px);
        max-width: none;
        max-height: 86vh;
        border-radius: 15px;
    }

    .updates-window h2 {
        padding: 18px 18px;
        font-size: 18px;
    }

    .updates-list {
        padding: 13px;
    }

    .update-item {
        padding: 16px;
        margin-bottom: 10px;
        border-radius: 11px;
    }

    .update-item h3 {
        font-size: 16px;
    }

    .update-item p {
        font-size: 13px;
        line-height: 1.55;
    }

    .update-admin-buttons {
        flex-direction: column;
        gap: 7px;
    }

    .update-admin-buttons button {
        width: 100%;
    }

    #ownerUpdateControls {
        padding: 12px 13px;
    }

    .updates-window .modal-buttons {
        padding: 12px 13px;
    }

    #createUpdateModal .modal-window {
        width: calc(100vw - 24px);
        max-width: none;
        padding: 20px;
        border-radius: 15px;
    }

    #updateTextInput {
        min-height: 130px;
    }

    #editUpdateModal {
        padding: 15px;
    }

    #editUpdateModal .modal-window {
        max-width: none;
        padding: 22px;
        border-radius: 15px;
    }

    #editUpdateModal h2 {
        font-size: 19px;
        margin-bottom: 20px;
    }

    #editUpdateTextInput {
        min-height: 150px;
    }
}

@media (orientation: landscape) and (max-height: 600px) {
    .mobile-top-bar {
        height: 50px;
        padding: 6px 10px;
    }

    .mobile-chat-header {
        height: 52px;
    }

    .mobile-chats-header {
        height: 46px;
    }

    .mobile-bottom-bar {
        padding: 6px 10px;
    }

    .mobile-messages-list {
        padding: 10px;
    }

    .mobile-add-contact-button {
        height: 38px;
    }

    .mobile-chat-item {
        min-height: 58px;
        padding: 7px;
        border-radius: 24px;
    }

    .mobile-chat-item-avatar {
        width: 40px;
        height: 40px;
    }

    .mobile-message-input-area {
        min-height: 48px;
        padding: 6px 10px;
    }

    #mobileMessageInput,
    .mobile-send-button {
        height: 38px;
    }
}

/* =========================================================
   ДОПОЛНИТЕЛЬНЫЕ СТИЛИ
   ========================================================= */

.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.clear-chat-history-modal {
    position: relative;
    min-width: 320px;
}

.close-modal-button {
    position: absolute;
    top: 4px;
    right: 10px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #aaa;
    font-size: 24px;
    cursor: pointer;
}

.close-modal-button:hover {
    background: #333;
    color: white;
}

.clear-chat-history-buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.clear-chat-history-buttons button {
    flex: 1;
    padding: 11px 15px;
    border: none;
    border-radius: 24px;
    background: #333;
    color: white;
    cursor: pointer;
    font-size: 14px;
}

.clear-chat-history-buttons button:hover {
    background: #444;
}

.clear-chat-history-buttons .danger-button {
    background: #7d3030;
}

.clear-chat-history-buttons .danger-button:hover {
    background: #a33a3a;
}

.mobile-only-modal {
    display: none;
}

.mobile-updates-window {
    width: 95%;
    max-height: 90vh;
    background: #111;
    border-radius: 20px;
    padding: 20px;
    color: white;
    overflow: hidden;
    box-shadow: 0px 0px 35px rgba(231, 231, 231, 0.164);
}

.mobile-updates-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
}

.mobile-updates-header button {
    background: none;
    border: none;
    color: white;
    font-size: 25px;
}

.mobile-updates-list {
    margin-top: 15px;
    overflow-y: auto;
    max-height: 70vh;
}

.mobile-updates-list .update-item {
    background: #1b1b1b;
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 12px;
}

@media (min-width: 700px) {
    .mobile-only-modal {
        display: none !important;
    }
}

#closeLastSeenModalButton,
#closeChangePasswordModalButton,
#closeDevicesModalButton,
#closePrivacyModalButton,
#closeInstallModalButton,
#closeVoiceVideoModalButton,
#closeNotificationsModalButton {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s ease;
}

#closeLastSeenModalButton:hover,
#closeChangePasswordModalButton:hover,
#closeDevicesModalButton:hover,
#closePrivacyModalButton:hover,
#closeInstallModalButton:hover,
#closeVoiceVideoModalButton:hover,
#closeNotificationsModalButton:hover {
    background: #2a2f36;
}

#closeLastSeenModalButton img,
#closeChangePasswordModalButton img,
#closeDevicesModalButton img,
#closePrivacyModalButton img,
#closeInstallModalButton img,
#closeVoiceVideoModalButton img,
#closeNotificationsModalButton img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: invert(1);
}

/* =========================================================
   МОБИЛЬНЫЙ ЧАТ - СКРУГЛЕНИЯ КАК В TELEGRAM
   ========================================================= */

/* 1. ШАПКА ЧАТА - скруглённая, как в Telegram */
.mobile-chat-header {
    position: absolute;
    top: 10px;
    left: 12px;
    right: 12px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 10px;
    height: 50px;
    background: rgba(19, 19, 19, 0.65);
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px !important;
    box-sizing: border-box;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
    transition: top 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

/* 2. ПОЛЕ ВВОДА - скруглённое, как в Telegram */
.mobile-message-input-area {
    position: absolute;
    bottom: 14px;
    left: 12px;
    right: 12px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 12px;
    min-height: 50px;
    background: rgba(19, 19, 19, 0.55);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 28px !important;
    box-sizing: border-box;
    pointer-events: none;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15);
}

/* При открытой клавиатуре поднимаем поле ввода 
.mobile-chat-screen.keyboard-visible .mobile-message-input-area {
    bottom: calc(14px + 260px); 
}

/* Добавляем отступ снизу для списка сообщений, чтобы они не перекрывались 
.mobile-chat-screen.keyboard-visible .mobile-messages-list {
    padding-bottom: calc(64px + 440px); /* 64px — стандартный отступ, 220px — клавиатура 
}
/* Добавляем отступ снизу для списка сообщений, чтобы они не перекрывались 
.mobile-chat-screen.keyboard-visible {
    padding-bottom: calc(100% + 440px) !important;
}

.mobile-chat-screen.keyboard-visible .mobile-message {
    top: calc(100% + 412px) !important;
}

.mobile-chat-screen.keyboard-visible .mobile-quote-block {
    bottom: calc(78px + 246px) !important;
}

@media (min-width: 380px) {
    .mobile-chat-screen.keyboard-visible .mobile-message {
        top: 433px !important;
    }
}
*/

/* 3. ОБЁРТКА ПОЛЯ ВВОДА - скруглённая */
.mobile-message-input-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    position: relative;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    padding: 0 4px;
    height: 36px;
    transition: border-color 0.2s, background 0.2s;
}

/* 4. КНОПКА ЭМОДЗИ - круглая */
.mobile-emoji-button {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50% !important;
    color: #ffffff;
    cursor: pointer;
    padding: 0;
    margin: 0;
}

.mobile-emoji-button:active {
    background: rgba(255, 255, 255, 0.08);
}

.mobile-emoji-button img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: invert(1);
}

/* 5. КНОПКА ОТПРАВКИ - круглая */
.mobile-send-button {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 50% !important;
    cursor: pointer;
    transition: background 0.2s;
}

.mobile-send-button:active {
    background: rgba(255, 255, 255, 0.16);
}

.mobile-send-button img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    filter: invert(1);
}

/* 6. СООБЩЕНИЯ - скругления как в Telegram */
.mobile-message {
    max-width: min(75%, 600px);
    padding: 10px 14px;
    border-radius: 18px !important;
    word-break: break-word;
    position: relative;
}

/* Моё сообщение - скругление как в Telegram (справа) */
.mobile-my-message {
    align-self: flex-end;
    background: #4a4a4a;
    border-bottom-right-radius: 4px !important; /* Маленький уголок как в Telegram */
}

/* Сообщение собеседника - скругление как в Telegram (слева) */
.mobile-other-message {
    align-self: flex-start;
    background: #303030;
    border-bottom-left-radius: 4px !important; /* Маленький уголок как в Telegram */
}

/* 7. АВАТАР В ШАПКЕ - круглый */
.mobile-chat-avatar {
    width: 36px;
    height: 36px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
    background: #444;
    color: white;
    font-size: 14px;
    font-weight: bold;
}

.mobile-chat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* 8. АВАТАР В СПИСКЕ ЧАТОВ - круглый */
.mobile-chat-item-avatar {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #3a3a3a;
    border-radius: 50% !important;
    color: white;
    font-size: 17px;
    font-weight: bold;
    position: relative;
}

.mobile-chat-item-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* 9. ЭЛЕМЕНТ ЧАТА В СПИСКЕ - скругление */
.mobile-chat-item {
    width: 100%;
    min-height: 68px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 4px;
    background: #1c1c1c;
    border: 1px solid transparent;
    border-radius: 35px !important;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.mobile-chat-item:active {
    background: #252525;
    border-color: #333;
}

/* 10. КНОПКА НАЗАД - круглая */
.mobile-back-button {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: white;
    border: none;
    border-radius: 50% !important;
    font-size: 24px;
}

/* 11. КНОПКА НАСТРОЕК ЧАТА - круглая */
.mobile-chat-options-button {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50% !important;
    background: transparent;
    color: #aaa;
    font-size: 22px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-chat-options-button:active {
    background: rgba(255, 255, 255, 0.08);
    color: white;
}

/* 12. ОНЛАЙН-ИНДИКАТОР - круглый */
.online-indicator {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 14px;
    height: 14px;
    border-radius: 50% !important;
    background-color: #4ade80;
    border: 2px solid #111;
    box-sizing: border-box;
    display: none;
    z-index: 10;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
}

.online-indicator.online {
    display: block;
}

/* =========================================================
   АДАПТАЦИЯ ПОД МАЛЕНЬКИЕ ЭКРАНЫ
   ========================================================= */

@media (max-width: 400px) {
    .mobile-chat-header {
        top: 8px;
        left: 8px;
        right: 8px;
        padding: 4px 8px;
        height: 54px;
        border-radius: 22px !important;
    }

    .mobile-message-input-area {
        bottom: 24px;
        left: 8px;
        right: 8px;
        padding: 4px 6px 4px 10px;
        min-height: 48px;
        border-radius: 24px !important;
    }

    .mobile-message-input-wrapper {
        height: 40px;
        border-radius: 24px;
    }

    .mobile-chat-avatar {
        width: 42px;
        height: 42px;
        font-size: 12px;
    }

    .mobile-chat-title {
        font-size: 15px;
    }

    .mobile-message {
        max-width: 82%;
        padding: 8px 12px;
    }

    .mobile-send-button {
        width: 40px;
        height: 40px;
    }

    .mobile-send-button img {
        width: 24px;
        height: 24px;
    }

    .mobile-emoji-button {
        width: 38px;
        height: 38px;
    }

    .mobile-emoji-button img {
        width: 24px;
        height: 24px;
    }

    #mobileMessageInput {
        font-size: 14px;
    }

    .mobile-messages-list {
        padding-top: 60px;
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (max-width: 700px) {
    .mobile-chat-header {
        top: 10px;
        left: 12px;
        right: 12px;
        border-radius: 28px !important;
    }

    .mobile-message-input-area {
        bottom: 24px;
        left: 12px;
        right: 12px;
        border-radius: 28px !important;
    }

    .mobile-messages-list {
        padding-top: 70px;
        padding-bottom: 80px;
    }

    .online-indicator {
        width: 12px;
        height: 12px;
        border-width: 1.5px;
    }
}

/* =========================================================
   РАЗДЕЛИТЕЛИ ДАТ 
   ========================================================= */

/* ПК версия */
.date-divider {
    width: 150px;
    text-align: center;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 0 6px 0;
    margin-top: 8px;
    /* Не прилипает: в общем списке прилипшие разделители ложились друг на друга.
       Дату при прокрутке показывает отдельная плавающая плашка (.floating-date) */
    position: relative;
    z-index: 5;
    background: rgba(11, 15, 19, 0.55);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    isolation: isolate;
    transform: translateZ(0);
    user-select: none;
    pointer-events: none;
    flex-shrink: 0;
    margin-left: auto;
    margin-right: auto;
    border-radius: 30px;
}

/* Мобильная версия */
.mobile-date-divider {
    text-align: center;
    width: 85px;
    margin: 6px auto 4px;
    border-radius: 30px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 0 6px 0;
    position: relative;
    z-index: 5;
    /* ── Стекло как в Telegram ── */
    background: rgba(28, 28, 28, 0.55);
    backdrop-filter: blur(6px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    /* ── Убираем накопление blur при наложении ── */
    isolation: isolate;
    transform: translateZ(0);
    /* ── Остальное ── */
    user-select: none;
    pointer-events: none;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Цвет для тёмной темы */
.date-divider,
.mobile-date-divider {
    color: rgba(255, 255, 255, 0.85);
}

/* =========================================================
   ПОИСК В ЧАТЕ (МОБИЛЬНЫЙ)
   ========================================================= */

/* Кнопка поиска */
.mobile-search-button {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s;
}

.mobile-search-button:active {
    background: rgba(255, 255, 255, 0.08);
}

.mobile-search-close img {
    width: 26px;
    height: px;
    object-fit: contain;
    filter: invert(0.7);
}

.mobile-search-button img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: invert(0.7);
}

/* Панель поиска */
.mobile-search-bar {
    display: flex !important;                
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin: 10px;
    background: rgba(19, 19, 19, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
    z-index: 10;
    border-radius: 30px;
    top: 60px;
    flex-shrink: 0;
    overflow: hidden;
    position: absolute !important;

    /* Скрыто по умолчанию */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px) scaleY(0.95);
    transform-origin: top center;

    /* Плавный переход */
    transition: opacity 0.3s ease,
                transform 0.3s ease,
                visibility 0.3s ease !important;
}

.mobile-search-bar.active {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scaleY(1);
}

.mobile-search-input-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 0 12px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: border-color 0.2s;
}

.mobile-search-input-wrapper:focus-within {
    border-color: rgba(255, 255, 255, 0.2);
}

.mobile-search-icon {
    width: 18px;
    height: 18px;
    opacity: 0.5;
    filter: invert(1);
    margin-right: 8px;
    flex-shrink: 0;
}

#chatSearchInput,
#mobileSearchInput {
    flex: 1;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 15px;
    outline: none;
    height: 100%;
    padding: 0;
    margin: 0;
    min-width: 0;
}

#chatSearchInput::placeholder,
#mobileSearchInput::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

#chatSearchInput:focus,
#mobileSearchInput:focus {
    box-shadow: none;
}

.mobile-search-clear {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    padding: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: #aaa;
    font-size: 14px;
    cursor: pointer;
}

.mobile-search-clear.visible {
    display: flex;
}

.mobile-search-clear:active {
    background: rgba(255, 255, 255, 0.2);
}

#chatSearchInput::placeholder,
#mobileSearchInput::placeholder {
    font-size: 12px;
    padding: 10px;
}

.mobile-search-close {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 50%;
}

.mobile-search-close:active {
    background: rgba(255, 255, 255, 0.08);
}

.mobile-search-count {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
    min-width: 60px;
    text-align: center;
    margin-left: 4px;
}

/* Подсветка найденных сообщений */
.message.highlight,
.mobile-message.highlight {
    background: rgba(255, 200, 50, 0.15) !important;
    border: 1px solid rgba(255, 200, 50, 0.3) !important;
    transition: background 0.3s ease;
}

.message.highlight .message-text,
.mobile-message.highlight .mobile-message-text {
    color: #ffffff;
}

/* =========================================================
   КНОПКИ НАВИГАЦИИ ПО РЕЗУЛЬТАТАМ ПОИСКА
   ========================================================= */

.mobile-search-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.mobile-search-nav-btn {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.mobile-search-nav-btn:hover {
    background: rgba(255, 255, 255, 0.16);
}

.mobile-search-nav-btn:active {
    transform: scale(0.92);
    background: rgba(255, 255, 255, 0.22);
}

.mobile-search-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.04);
}

.mobile-search-nav-btn:disabled:active {
    transform: none;
}

.mobile-search-nav-btn img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: invert(1);
    opacity: 0.85;
}

#chatSearchPrev,
#mobileSearchPrev {
    display: block;
}

/* Стрелка "вверх" — поворачиваем на -90° (из лежачей вверх) */
#chatSearchPrev img,
#mobileSearchPrev img {
    transform: rotate(-180deg);
}

/* Стрелка "вниз" — поворачиваем на +90° (из лежачей вниз) */
#chatSearchNext img,
#mobileSearchNext img {
    transform: rotate(0);
}

/* Счётчик в режиме навигации */
.mobile-search-nav .mobile-search-count {
    min-width: 50px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    white-space: nowrap;
}

/* Адаптация для ПК (опционально) */
@media (max-width: 800px) {
    .mobile-search-bar {
        position: sticky;
    }
}

/* =========================================================
   КАСТОМНАЯ МОБИЛЬНАЯ КЛАВИАТУРА (iOS-стиль)
   ========================================================= */

#mobileKeyboard {
    position: absolute !important;
    bottom: 80px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100 !important;
    background: #1c1c1e;
    padding: 6px 4px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 -2px 30px rgba(0, 0, 0, 0.5);
    user-select: none;
    max-height: 220px;
    overflow: hidden;
    display: none;
}

#mobileKeyboard .keyboard-row {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 6px;
}

#mobileKeyboard .keyboard-row:last-child {
    margin-bottom: 0;
}

#mobileKeyboard .key {
    flex: 1;
    min-width: 28px;
    height: 42px;
    border: none;
    border-radius: 10px;
    background: #2c2c2e;
    color: #ffffff;
    font-size: 18px;
    font-family: -apple-system, 'Helvetica Neue', 'Segoe UI', Roboto, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s ease, transform 0.1s ease;
    cursor: pointer;
    padding: 0 4px;
    box-shadow: none;
    letter-spacing: 0.5px;
    touch-action: manipulation;
}

#mobileKeyboard .key.icon-key {
    font-size: 0;
    background: #3a3a3c;
}

#mobileKeyboard .key.icon-key img {
    width: 24px;
    height: 24px;
    filter: invert(1);
    object-fit: contain;
}

#mobileKeyboard .key.shift-active {
    background: #5a5a5c;
}

#mobileKeyboard .key:active {
    transform: scale(0.96);
    background: #3a3a3c;
}

#mobileKeyboard .key.key-backspace {
    background: #3a3a3c;
    min-width: 44px;
    max-width: 44px;
}
#mobileKeyboard .key.key-shift {
    background: #3a3a3c;
    min-width: 44px;
    max-width: 44px;
}
#mobileKeyboard .key.key-enter {
    background: #0a84ff;
    min-width: 48px;
    max-width: 55px;
    font-weight: 600;
    color: #ffffff;
}
#mobileKeyboard .key.key-space {
    min-width: 130px;
    flex: 3;
    background: #2c2c2e;
}
#mobileKeyboard .key.key-numbers {
    background: #3a3a3c;
    min-width: 44px;
    max-width: 44px;
}
#mobileKeyboard .key.key-lang {
    background: #3a3a3c;
    min-width: 44px;
    max-width: 44px;
}
#mobileKeyboard .key.key-abc {
    background: #3a3a3c;
    min-width: 44px;
    max-width: 44px;
}

@media (max-width: 400px) {
    #mobileKeyboard {
        padding: 4px 2px 8px;
        max-height: 190px;
    }
    #mobileKeyboard .key {
        height: 38px;
        font-size: 16px;
        min-width: 24px;
        border-radius: 8px;
    }
    #mobileKeyboard .key.icon-key img {
        width: 20px;
        height: 20px;
    }
    #mobileKeyboard .key.key-space {
        min-width: 80px;
    }
    #mobileKeyboard .key.key-backspace,
    #mobileKeyboard .key.key-shift,
    #mobileKeyboard .key.key-enter,
    #mobileKeyboard .key.key-numbers,
    #mobileKeyboard .key.key-lang,
    #mobileKeyboard .key.key-abc {
        min-width: 36px;
        max-width: 40px;
    }
}

@media (max-width: 350px) {
    #mobileKeyboard .key {
        font-size: 14px;
        height: 34px;
    }
    #mobileKeyboard .key.key-space {
        min-width: 60px;
    }
}

/* =========================================================
   SPLASH SCREEN
   ========================================================= */

#splashScreen {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 44%, #2d2d2d 0%, #161616 45%, #0c0c0e 100%);
  transition: opacity 0.5s ease;
  pointer-events: auto;
}

#splashScreen .splash-content h1 {
  font-family: Verdana, sans-serif;
  font-size: 55px;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 0 50px rgba(255, 255, 255, 0.12);
  letter-spacing: 6px;
  animation: splashPulse 3s ease-in-out infinite;
  line-height: 1.2;
  position: relative;
  top: auto;
  bottom: auto; /* по умолчанию без смещения */
}

#splashScreen .splash-content h2 {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 6px;
    font-family: Verdana, sans-serif;
    text-shadow: 0 0 50px rgba(255, 255, 255, 0.12);
    position: relative;
    animation: splashPulse 3s ease-in-out infinite;
    text-align: center;
    top: 24px;
}

/* Десктопы (ширина ≥ 601px) – поднимаем на 30px */
@media (min-width: 601px) {
  #splashScreen .splash-content {
    top: -30px;
  }
}

/* Мобильные (ширина ≤ 600px) – поднимаем на 12px для центрирования */
@media (max-width: 600px) {
  #splashScreen .splash-content h1 {
    font-size: 48px;
    letter-spacing: 0;
    top: -52px;
    line-height: 0;
  }

  #splashScreen .splash-content h2 {
    font-size: 15px;
    letter-spacing: 0;
    top: 10px;
    line-height: 0;
    text-align: center;
  }

}

@keyframes splashPulse {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.06);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.9;
  }
}

#splashScreen.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* =========================================================
   ПАНЕЛЬ ДОБАВЛЕНИЯ КОНТАКТА (ДЕСКТОП)
   ========================================================= */
.add-contact-banner {
    position: absolute;
    top: 80px; /* Отступ от шапки чата */
    left: 20px;
    right: 20px;
    z-index: 9;
    background: rgba(19, 19, 19, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    padding: 12px 18px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    display: none;
    align-items: center;
    justify-content: space-between;
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 0;
    transform: translateY(-10px);
}

.add-contact-banner.visible {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

.add-contact-banner-content {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.add-contact-banner-text {
    font-size: 14px;
    color: #f0f0f0;
    font-weight: 500;
}

.add-contact-banner-actions {
    display: flex;
    gap: 8px;
}

.add-contact-banner-btn {
    padding: 8px 20px;
    border: none;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}

.add-contact-banner-btn.primary {
    background: #ffffff;
    color: #111;
}

.add-contact-banner-btn.primary:hover {
    background: #e8e8e8;
}

.add-contact-banner-btn.secondary {
    background: rgba(255, 255, 255, 0.08);
    color: #ccc;
    /* у общего .secondary есть margin-top и width: 100% — здесь они не нужны */
    width: auto;
    margin-top: 0;
    border: none;
}

.add-contact-banner-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.15);
}

.add-contact-banner-btn:active {
    transform: scale(0.96);
}

/* =========================================================
   ПАНЕЛЬ ДОБАВЛЕНИЯ КОНТАКТА (МОБИЛЬНАЯ)
   ========================================================= */
.mobile-add-contact-banner {
    position: absolute;
    top: 68px; /* Высота шапки + небольшой отступ */
    left: 12px;
    right: 12px;
    width: auto;
    z-index: 9;
    background: rgba(19, 19, 19, 0.85);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    padding: 10px 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    display: none;
    align-items: center;
    justify-content: space-between;
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 0;
    transform: translateY(-10px);
}

.mobile-add-contact-banner.visible {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

.mobile-add-contact-banner-content {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.mobile-add-contact-banner-text {
    font-size: 13px;
    color: #f0f0f0;
    font-weight: 500;
    margin-left: auto;
    margin-right: auto;
}

.mobile-add-contact-banner-actions {
    display: flex;
    gap: 6px;
    margin-left: auto;
    margin-right: auto;
}

.mobile-add-contact-banner-btn {
    padding: 6px 16px;
    border: none;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}

.mobile-add-contact-banner-btn.add {
    background: #ffffff;
    color: #111;
    height: 35px;
    width: 90.13px;
}

.mobile-add-contact-banner-btn.add:active {
    background: #e8e8e8;
}

.mobile-add-contact-banner-btn.close {
    background: rgba(255, 255, 255, 0.08);
    color: #ccc;
    height: 35px;
    width: 90.13px;
    
}

.mobile-add-contact-banner-btn.close:active {
    background: rgba(255, 255, 255, 0.15);
}

/* =========================================================
   КНОПКИ УДАЛЕНИЯ В КОНТАКТАХ
   ========================================================= */

.contact-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.contact-chat-button {
    width: auto !important;
    flex-shrink: 0;
    margin: 0 !important;
    margin-top: 12px !important;
    padding: 8px 14px !important;
    background: #ffffff;
    color: #111317;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    cursor: pointer;
}

.contact-chat-button:hover {
    background: #e8e8e8;
}

.contact-delete-button {
    width: 40px;
    height: 40px;
    padding: 8px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    background: rgba(255, 0, 0);
    color: #ff6b6b;
    line-height: 1;
}

.contact-delete-button img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: invert(1);
}

.contact-delete-button:hover {
    background: rgba(244, 67, 54, 0.2);
    transform: scale(1.05);
}

.contact-delete-button:active {
    transform: scale(0.95);
}

/* =========================================================
   КНОПКА ДОБАВЛЕНИЯ В КОНТАКТЫ В ПРОФИЛЕ
   ========================================================= */

/* =========================================================
   КНОПКА ДОБАВЛЕНИЯ В КОНТАКТЫ В ПРОФИЛЕ (В ПРАВОМ ВЕРХНЕМ УГЛУ)
   ========================================================= */

#profileAddContactButton.profile-add-contact-button {
    position: absolute;
    top: 10px;
    right: 18px;
    width: 42px;
    height: 42px;
    display: none; /* скрыта по умолчанию, управляется через JS */
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 50%;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    z-index: 20;
    transition: background 0.2s ease, transform 0.15s ease;
}

#profileAddContactButton.profile-add-contact-button:hover {
    background: rgba(255, 255, 255, 0.16);
    transform: scale(1.05);
}

#profileAddContactButton.profile-add-contact-button:active {
    transform: scale(0.95);
}

#profileAddContactButton.profile-add-contact-button img {
    width: 23px;
    height: 23px;
    display: block;
    object-fit: contain;
    filter: invert(1);
}
/* =========================================================
   QR-КОД В ПРОФИЛЕ
   ========================================================= */

.profile-qr-button {
    position: absolute !important;
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    margin-top: 0px !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 24px !important;
    cursor: pointer !important;
    transition: background 0.2s ease, transform 0.15s ease, border-color 0.2s ease !important;
    z-index: 10 !important;
}

.profile-qr-button.visible {
    display: flex !important;
}

.profile-qr-button:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
}

.profile-qr-button:active {
    transform: scale(0.92);
}

.profile-qr-button img {
    width: 23px;
    height: 23px;
    object-fit: contain;
    filter: invert(1);
}

.profile-qr-button:hover img {
    opacity: 1;
}

/* =========================================================
   QR-МОДАЛКА (стиль карточки Telegram)
   ========================================================= */

#qrModal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(2.5px);
    -webkit-backdrop-filter: blur(8px);
}

/* =========================================================
   КАРТОЧКА
   ========================================================= */

.qr-card {
    position: relative;
    width: 340px;
    max-width: calc(100vw - 30px);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 60px;
    animation: qrCardAppear 0.25s ease-out;
}

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

/* =========================================================
   АВАТАР СВЕРХУ
   ========================================================= */

.qr-card-avatar {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    background: #1c1c1c;
    border: 4px solid #1c1c1c;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    z-index: 2;
}

.qr-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =========================================================
   БЕЛАЯ КАРТОЧКА С QR
   ========================================================= */

.qr-card-body {
    width: 85%;
    background: #ffffff;
    border-radius: 32px;
    padding: 24px 24px 24px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    margin-top: 40px;
}

/* =========================================================
   QR-КОД
   ========================================================= */

.qr-code-container {
    width: 240px;
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    position: relative;
}

.qr-code-container canvas {
    width: 150% !important;
    height: 113% !important;
    border-radius: 50px;
    display: block;
}
.qr-code-container svg {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

.qr-spinner {
    color: #666;
    font-size: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* =========================================================
   ВРЕМЯ ДО ИСТЕЧЕНИЯ
   ========================================================= */

.qr-expiry-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

#qrExpiryTimer {
    font-weight: 700;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
    min-width: 45px;
}

.qr-expiry-label {
    color: rgba(255, 255, 255, 0.6);
}

/* Когда таймер < 60 секунд */
#qrExpiryTimer.warning {
    color: #e0a4a4;
}

/* =========================================================
   КНОПКА ЗАКРЫТЬ
   ========================================================= */

.qr-card-close {
    margin-top: 16px;
    padding: 12px 40px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
    backdrop-filter: blur(10px);
}

.qr-card-close:hover,
.qr-card-scan:hover {
    background: rgba(255, 255, 255, 0.18);
}

.qr-card-close:active,
.qr-card-scan:active {
    transform: scale(0.96);
}

.qr-card-scan img{
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: invert(1);
}

.qr-card-scan {
    left: 50px;
    bottom: 0px;
    position: absolute;
    width: 42.4px;
    height: 42.4px;
    background: rgb(255 255 255 / 15%);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 19px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
    backdrop-filter: blur(10px);
    align-items: center;
    display: flex;
    align-items: center;
    justify-content: center;
    
}

.qr-card-scan:hover {
     background: rgba(255, 255, 255, 0.28);
}

/* Кнопка «Поделиться» — справа от «Закрыть» */
.qr-card-share {
    position: absolute;
    right: -60px;
    bottom: 0px;
    width: 42.4px;
    height: 42.4px;
    background: rgb(255 255 255 / 15%);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 19px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-card-share:hover {
    background: rgba(255, 255, 255, 0.28);
}

.qr-card-share:active {
    transform: scale(0.96);
}

.qr-card-share img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: invert(1);
}

.qr-card-share {
    position: absolute;
    right: 50px;
    bottom: 0px;
    width: 42.4px;
    height: 42.4px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 19px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================================================
   ПАНЕЛЬКА «ПОДЕЛИТЬСЯ»
   ========================================================= */

.qr-share-menu {
    position: absolute;
    bottom: 60px;         /* над кнопками */
    right: 20px;
    width: 200px;
    background: rgb(53 53 53 / 64%);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    z-index: 100;
    overflow: hidden;
    animation: qrShareMenuAppear 0.18s ease-out;
}

@keyframes qrShareMenuAppear {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.qr-share-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 14px;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}

.qr-share-menu-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.qr-share-menu-item:active {
    background: rgba(255, 255, 255, 0.12);
}

.qr-share-menu-item + .qr-share-menu-item {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.qr-share-menu-icon {
    font-size: 16px;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* =========================================================
   АДАПТАЦИЯ ПОД МОБИЛЬНЫЕ
   ========================================================= */

@media (max-width: 420px) {
    .qr-card {
        width: calc(100vw - 32px);
        padding-top: 50px;
    }
    
    .qr-card-avatar {
        width: 100px;
        height: 100px;
        border-width: 3px;
    }
    
    .qr-card-body {
        padding: 24px 24px 20px 24px;
        border-radius: 45px;
        margin-top: 30px;
    }
    
    .qr-code-container {
        width: 230px;
        height: 230px;
    }
}

/* =========================================================
       ОКНО СКАНИРОВАНИЯ QR-КОДА
       ========================================================= */

    #qrScannerModal {
        position: fixed;
        inset: 0;
        z-index: 1100;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 20px;
        background: rgba(0, 0, 0, 0.85);
        backdrop-filter: blur(2.5px);
        -webkit-backdrop-filter: blur(8px);
    }

    .qr-scanner-card {
        position: relative;
        width: 420px;
        max-width: calc(100vw - 30px);
        max-height: calc(100vh - 40px);
        max-height: calc(100dvh - 40px);
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 16px;
        background: #111111;
        border: 1px solid #2c2c2c;
        border-radius: 50px;
        box-shadow: 0px 0px 35px rgba(231, 231, 231, 0.164);
        overflow: hidden;
    }

    .qr-scanner-header {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
        flex-shrink: 0;
    }

    .qr-scanner-back {
        width: 36px;
        height: 36px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        transition: background 0.15s ease;
    }

    .qr-scanner-back:hover {
        background: rgba(255, 255, 255, 0.08);
    }

    .qr-scanner-back img {
        width: 22px;
        height: 22px;
        object-fit: contain;
        filter: invert(1);
        transform: rotate(90deg);
    }

    .qr-scanner-placeholder {
        width: 36px;
        height: 36px;
    }

    .qr-scanner-viewport {
        position: relative;
        width: 100%;
        aspect-ratio: 1 / 1;
        max-height: 60vh;
        background: #000000;
        border-radius: 18px;
        overflow: hidden;
        flex-shrink: 1;
        min-height: 0;
    }

    .qr-scanner-reader {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
    }

    .qr-scanner-reader video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block;
    }

    /* Рамка для наведения */
    .qr-scanner-frame {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 65%;
        height: 65%;
        transform: translate(-50%, -50%);
        pointer-events: none;
        z-index: 5;
    }

    .qr-scanner-frame-corner {
        position: absolute;
        width: 28px;
        height: 28px;
        border-color: #ffffff;
        border-style: solid;
        border-width: 0;
    }

    .qr-scanner-frame-tl {
        top: 0;
        left: 0;
        border-top-width: 3px;
        border-left-width: 3px;
        border-top-left-radius: 12px;
    }

    .qr-scanner-frame-tr {
        top: 0;
        right: 0;
        border-top-width: 3px;
        border-right-width: 3px;
        border-top-right-radius: 12px;
    }

    .qr-scanner-frame-bl {
        bottom: 0;
        left: 0;
        border-bottom-width: 3px;
        border-left-width: 3px;
        border-bottom-left-radius: 12px;
    }

    .qr-scanner-frame-br {
        bottom: 0;
        right: 0;
        border-bottom-width: 3px;
        border-right-width: 3px;
        border-bottom-right-radius: 12px;
    }

    .qr-scanner-hint {
        margin-top: 12px;
        font-size: 13px;
        color: rgba(255, 255, 255, 0.65);
        text-align: center;
        flex-shrink: 0;
    }

    #qrScannerFileButton.qr-scanner-file-button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 70%;
        margin-top: 12px;
        padding: 12px 20px;
        background: rgba(255, 255, 255, 0.1);
        color: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 30px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.2s ease, transform 0.15s ease;
        flex-shrink: 0;
        gap: 8px;
        text-align: center;
    }

    .qr-scanner-file-button span {
        width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 18px;
    }

    .qr-share-menu-icon img,
    .qr-scanner-file-button img {
        width: 22px;
        height: 22px;
        object-fit: contain;
        filter: invert(1);
    }

    .qr-share-menu-icon.copy img {
        width: 30px;
        height: 30px;
        object-fit: contain;
        filter: invert(1);
        transform: scale(1, -1);
    }



    .qr-scanner-file-button:hover {
        background: rgba(255, 255, 255, 0.18);
    }

    .qr-scanner-file-button:active {
        transform: scale(0.97);
    }

    .qr-scanner-cancel-button {
        width: 40%;
        margin-top: 8px;
        padding: 12px;
        background: transparent;
        color: rgba(255, 255, 255, 0.6);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 30px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
        flex-shrink: 0;
    }

    .qr-scanner-cancel-button:hover {
        background: rgba(255, 255, 255, 0.08);
        color: #ffffff;
    }

    .qr-scanner-cancel-button:active {
        transform: scale(0.97);
    }

      /* Заглушка при ошибке камеры */
    .qr-scanner-error {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 24px;
        text-align: center;
        background: #0a0a0a;
        color: #ffffff;
        z-index: 3;
    }

    .qr-scanner-error-icon img {
        width: 50px;
        height: 50px;
        object-fit: contain;
        filter: invert(1);
    }

    .qr-scanner-error-text {
        font-size: 15px;
        font-weight: 600;
        color: #ffffff;
        margin-bottom: 8px;
        line-height: 1.4;
    }

    .qr-scanner-error-hint {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.55);
        line-height: 1.4;
    }

     #qrFileReader {
        position: fixed !important;
        top: -10000px !important;
        left: -10000px !important;
        width: 1000px !important;
        height: 1000px !important;
        visibility: hidden !important;
        pointer-events: none !important;
        z-index: -1 !important;
    }

    #qrFileReader canvas,
    #qrFileReader img,
    #qrFileReader video {
        width: 1000px !important;
        height: 1000px !important;
        max-width: none !important;
        max-height: none !important;
        display: block !important;
    }

    /* Адаптация под мобильные */
    @media (max-width: 480px) {
        .qr-scanner-card {
            width: calc(100vw - 20px);
            padding: 12px;
            border-radius: 50px;
        }

        .qr-scanner-viewport {
            max-height: 50vh;
            max-height: 42dvh;
        }

        .qr-scanner-frame {
            width: 70%;
            height: 70%;
        }

        .qr-scanner-frame-corner {
            width: 22px;
            height: 22px;
        }

        .qr-scanner-file-button img {
            width: 22px;
            height: 22px;
            object-fit: contain;
            filter: invert(1);
        }
    }


/*---------------------------------------------------*/
/*          ВЕРИФИКАЦИЯ И ВСЕ чтО СВЯЗАННО           */
/*---------------------------------------------------*/

#changePasswordSubmit,
#verifyCodeButton {
    width: 100%;
    margin-top: 12px;
    padding: 12px;
    background: white;
    color: black;
    border: 1px solid #ffffff;
    border-radius: 24px;
    font-weight: bold;
}

/* =========================================================
   МОДАЛЬНОЕ ОКНО ИНТЕРФЕЙСА
   =========================================================
   Поиск, вкладки «Все / Избранное», два вида (сетка и галерея),
   увеличенное превью со снимками (#themePeek). Кнопки внутри
   .modal-window получают цвета текущей темы из styles/*.css —
   здесь задаём только размеры и состояния. */

#interfaceModal .interface-window {
    width: 560px;
    max-width: calc(100vw - 30px);
    max-height: min(86vh, 780px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.interface-subtitle {
    margin: 0 0 14px;
    color: #858c95;
    font-size: 13px;
}

/* ---------- Панель: поиск, вкладки, вид ---------- */
.interface-toolbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
    flex-shrink: 0;
}

.interface-search {
    position: relative;
    display: block;
}

#interfaceSearchInput {
    width: 100%;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 40px !important;
    box-sizing: border-box;
}

.interface-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    margin-top: -9px;
    display: flex;
    opacity: 0.5;
    pointer-events: none;
}

#interfaceModal .interface-search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 50% !important;
    color: inherit;
    opacity: 0.6;
}

#interfaceModal .interface-search-clear[hidden] {
    display: none !important;
}

.interface-toolbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.interface-filters,
.interface-views {
    display: flex;
    gap: 6px;
    min-width: 0;
}

#interfaceModal .interface-filter,
#interfaceModal .interface-view {
    height: 30px;
    min-height: 0;
    margin: 0 !important;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0.6;
}

#interfaceModal .interface-view,
#interfaceModal .interface-filter--fav {
    width: 30px;
    padding: 0;
}

#interfaceModal .interface-filter.is-active,
#interfaceModal .interface-view.is-active {
    opacity: 1;
    font-weight: 600;
    box-shadow: inset 0 0 0 1.5px currentColor !important;
}

.interface-filter-count {
    opacity: 0.65;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.interface-filter-star {
    display: flex;
    color: #f5b301;
}

.interface-filter-star svg {
    width: 14px;
    height: 14px;
}

/* ---------- Сетка карточек ---------- */
.interface-cards {
    display: grid;
    /* minmax(0, …): длинное название не распирает колонку за край окна */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    overflow-y: auto;
    padding: 4px 4px 6px;
    margin: -4px;
    flex: 1 1 auto;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(138, 143, 152, 0.45) transparent;
}

.interface-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: #1a1d22;
    border: 2px solid #2c3139;
    border-radius: 16px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.interface-card:hover {
    background: #1e2228;
    border-color: #3a4049;
}

/* На ПК карточка чуть приподнимается при наведении */
@media (hover: hover) and (pointer: fine) {
    .interface-card:hover {
        transform: translateY(-2px) scale(1.025);
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
    }
}

.interface-card:active {
    transform: scale(0.98);
}

/* Палец держит карточку — она медленно «вдавливается», потом открывается превью */
.interface-card.is-pressing {
    transform: scale(0.95);
    transition: transform 0.42s ease;
}

.interface-card.is-active {
    border-color: #6fdc8b;
    background: #1a2320;
}

.interface-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
}

.interface-card-title {
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.interface-card-preview {
    border-radius: 12px;
    overflow: hidden;
}

.interface-card-state {
    font-size: 13px;
    color: #858c95;
    text-align: center;
    padding: 6px 0;
    border-top: 1px solid #2c3139;
}

.interface-card.is-active .interface-card-state {
    color: #6fdc8b;
    font-weight: 600;
}

.interface-card.is-active .interface-card-state::before {
    content: '✓ ';
    font-weight: 700;
}

/* ---------- Звёздочка «в избранное» ---------- */
#interfaceModal .interface-card-fav,
#interfaceModal .interface-slide-fav {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    margin: -4px -4px -4px 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 50% !important;
    color: inherit;
    opacity: 0.45;
    transition: opacity 0.15s ease, transform 0.15s ease, color 0.15s ease;
}

#interfaceModal .interface-card-fav:hover,
#interfaceModal .interface-slide-fav:hover {
    opacity: 0.85;
    transform: scale(1.12);
}

#interfaceModal .interface-card-fav:not(.is-on) svg path,
#interfaceModal .interface-slide-fav:not(.is-on) svg path,
.theme-peek-fav:not(.is-on) svg path {
    fill: none;
}

#interfaceModal .interface-card-fav.is-on,
#interfaceModal .interface-slide-fav.is-on {
    color: #f5b301 !important;
    opacity: 1;
}

#interfaceModal .interface-card-fav svg,
#interfaceModal .interface-slide-fav svg {
    width: 19px;
    height: 19px;
}

/* ---------- Пусто ---------- */
.interface-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 44px 16px;
    text-align: center;
}

.interface-empty b {
    font-size: 15px;
}

.interface-empty span {
    font-size: 13px;
    opacity: 0.65;
    max-width: 280px;
}

.interface-empty .interface-empty-star {
    display: flex;
    color: #f5b301;
    opacity: 1;
    margin-bottom: 4px;
}

.interface-empty-star svg {
    width: 36px;
    height: 36px;
}

/* ---------- Галерея: тема в центре, соседние видны по бокам ---------- */
/* Окно в режиме галереи занимает всю доступную высоту, снимок подстраивается
   под неё (размеры --slide-w/--slide-h считает theme-switcher.js) */
/* Высоту сцены считает theme-switcher.js (сколько остаётся до max-height окна) */
#interfaceModal .interface-window.is-gallery-mode {
    width: 760px;
}

.interface-cards.is-gallery {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.interface-gallery {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    outline: none;
}

.interface-gallery-stage {
    position: relative;
    flex: 0 0 auto;
    height: 300px;
    width: 100%;
}

.interface-gallery-track {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    gap: var(--slide-gap, 16px);
    /* Отступы по бокам — чтобы первая и последняя тема тоже вставали в центр */
    padding: 0 calc((100% - var(--slide-w, 60%)) / 2);
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.interface-gallery-track::-webkit-scrollbar {
    display: none;
}

.interface-slide {
    position: relative;
    flex: 0 0 var(--slide-w, 60%);
    width: var(--slide-w, 60%);
    height: var(--slide-h, 80%);
    scroll-snap-align: center;
    scroll-snap-stop: always;
    border-radius: 16px;
    overflow: hidden;
    line-height: 0;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    transform-origin: center;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.interface-slide.is-center {
    cursor: zoom-in;
}

.interface-slide.is-active {
    box-shadow: 0 0 0 2px #6fdc8b, 0 10px 30px rgba(0, 0, 0, 0.35);
}

.interface-slide.is-pressing .theme-shot {
    filter: brightness(0.85);
}

.interface-slide-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 9px;
    border-radius: 20px;
    background: rgba(20, 24, 28, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #6fdc8b;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    pointer-events: none;
}

.theme-shot {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-user-drag: none;
}

.theme-shot--fallback {
    display: flex;
}

.theme-shot--fallback .theme-shot-preview {
    width: 100%;
    height: 100% !important;
    min-height: 220px;
    border-radius: 0;
}

/* Подпись под галереей: название и звёздочка */
.interface-gallery-caption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: 100%;
    min-height: 30px;
    flex-shrink: 0;
}

.interface-slide-title {
    font-size: 17px;
    font-weight: 700;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* «Применить» — скромная, внимание на галерее */
#interfaceModal .interface-gallery-apply {
    flex-shrink: 0;
    height: 30px;
    min-height: 0;
    margin: 0 0 2px !important;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 500;
    /* Цвет — как у текста окна: у кнопок темы он рассчитан на их фон, а фона тут нет */
    color: inherit !important;
    background: transparent !important;
    border: 1px solid color-mix(in srgb, currentColor 28%, transparent) !important;
    box-shadow: none !important;
    opacity: 0.85;
}

#interfaceModal .interface-gallery-apply:hover:not(:disabled) {
    opacity: 1;
    border-color: currentColor !important;
}

#interfaceModal .interface-gallery-apply:disabled {
    opacity: 0.55;
    border-color: transparent !important;
    cursor: default;
}

/* Стрелки (только мышь; пальцем листают свайпом) */
#interfaceModal .interface-gallery-nav,
.theme-peek .theme-peek-nav {
    position: absolute;
    width: 38px;
    height: 38px;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2;
    transition: opacity 0.18s ease;
}

#interfaceModal .interface-gallery-nav {
    top: calc(50% - 19px);
}

#interfaceModal .interface-gallery-prev { left: 2px; }
#interfaceModal .interface-gallery-next { right: 2px; }

#interfaceModal .interface-gallery-nav:disabled,
.theme-peek .theme-peek-nav:disabled {
    opacity: 0;
    pointer-events: none;
}

@media (hover: none) and (pointer: coarse) {
    #interfaceModal .interface-gallery-nav,
    .theme-peek .theme-peek-nav {
        display: none;
    }
}

/* Точки-указатели (превью) */
.theme-peek-dots {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.theme-peek .theme-peek-dot {
    /* !important: темы задают кнопкам свои размеры (Windows 95 — высокие) */
    width: 7px !important;
    height: 7px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 4px !important;
    background: #8a8f98 !important;
    opacity: 0.4;
    transition: width 0.2s ease, opacity 0.2s ease;
}

.theme-peek .theme-peek-dot.is-current {
    width: 18px !important;
    opacity: 1;
}

/* ---------- Увеличенное превью (#themePeek) ---------- */
.theme-peek {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.theme-peek[hidden] {
    display: none;
}

.theme-peek.open {
    opacity: 1;
}

.theme-peek .theme-peek-card {
    width: 760px;
    max-width: 100%;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    padding: 18px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box;
    overflow: hidden;
    animation: none !important;
    opacity: 0;
    transform: translate(var(--peek-from-x, 0), var(--peek-from-y, 0)) scale(0.4);
    transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.12), opacity 0.2s ease;
}

.theme-peek .theme-peek-card--mobile {
    width: 400px;
}

.theme-peek.open .theme-peek-card {
    opacity: 1;
    transform: none;
}

.theme-peek-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.theme-peek .theme-peek-title {
    margin: 0 !important;
    font-size: 19px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.theme-peek-badge {
    flex-shrink: 0;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(111, 220, 139, 0.16);
    color: #3fbf65;
}

.theme-peek-badge[hidden] {
    display: none;
}

.theme-peek .theme-peek-close {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
}

.theme-peek-device {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.theme-peek .theme-peek-device button {
    height: 32px;
    margin: 0 !important;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    opacity: 0.6;
}

.theme-peek .theme-peek-device button.is-active {
    opacity: 1;
    font-weight: 600;
    box-shadow: inset 0 0 0 1.5px currentColor !important;
}

.theme-peek-stage {
    position: relative;
    min-height: 0;
}

.theme-peek-track {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.theme-peek-track::-webkit-scrollbar {
    display: none;
}

.theme-peek-slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    user-select: none;
    -webkit-user-select: none;
}

.theme-peek-slide .theme-shot {
    border-radius: 14px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.3);
    object-fit: contain;
}

.theme-peek-card--pc .theme-peek-slide .theme-shot {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100vh - 290px);
    max-height: calc(100dvh - 290px);
    aspect-ratio: 1300 / 900;
}

.theme-peek-card--mobile .theme-peek-slide .theme-shot {
    width: auto;
    max-width: 100%;
    height: min(calc(100vh - 290px), 640px);
    height: min(calc(100dvh - 290px), 640px);
    aspect-ratio: 400 / 860;
}

.theme-peek-slide .theme-shot--fallback {
    width: 100%;
    height: 260px;
}

.theme-peek .theme-peek-prev { left: 8px; top: calc(50% - 19px); }
.theme-peek .theme-peek-next { right: 8px; top: calc(50% - 19px); }

.theme-peek-caption {
    min-height: 18px;
    text-align: center;
    font-size: 13px;
    opacity: 0.7;
}

.theme-peek .theme-peek-dots {
    margin-top: -4px;
}

.theme-peek-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.theme-peek .theme-peek-btn {
    height: 42px;
    margin: 0 !important;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 600;
    white-space: nowrap;
}

.theme-peek .theme-peek-apply:disabled {
    opacity: 0.7;
    cursor: default;
}

.theme-peek .theme-peek-fav.is-on svg {
    color: #f5b301;
}

/* ---------- Телефон ---------- */
@media (max-width: 600px) {
    #interfaceModal {
        padding: 10px;
    }

    #interfaceModal .interface-window {
        width: 100%;
        max-width: 100%;
        max-height: calc(100vh - 20px);
        max-height: calc(100dvh - 20px);
    }

    #interfaceModal .interface-window.is-gallery-mode {
        width: 100%;
    }

    /* Компактные плитки: превью во всю ширину, название под ним,
       звёздочка в углу превью, без строки «Применить» — выбранная
       тема отмечена зелёной рамкой и галочкой. !important — темы
       задают карточкам свои фон, рамку и отступы. */
    .interface-cards {
        gap: 14px 12px;
    }

    #interfaceModal .interface-card,
    #interfaceModal .interface-card:hover,
    #interfaceModal .interface-card.is-active {
        position: relative;
        padding: 0 !important;
        gap: 6px;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    #interfaceModal .interface-card .interface-card-preview {
        order: -1;
        height: 96px;
        border-radius: 14px !important;
        transition: box-shadow 0.18s ease;
    }

    #interfaceModal .interface-card.is-active .interface-card-preview {
        box-shadow: 0 0 0 2px #6fdc8b, 0 6px 16px rgba(0, 0, 0, 0.25);
    }

    #interfaceModal .interface-card-head {
        justify-content: center;
        padding: 0 4px;
    }

    #interfaceModal .interface-card-title {
        font-size: 13px;
        font-weight: 600;
        text-align: center;
    }

    #interfaceModal .interface-card.is-active .interface-card-title::before {
        content: '✓ ';
        color: #6fdc8b;
    }

    #interfaceModal .interface-card-state {
        display: none;
    }

    /* Звёздочка — маленький кружок в правом верхнем углу превью */
    #interfaceModal .interface-card-fav {
        position: absolute;
        top: 6px;
        right: 6px;
        z-index: 2;   /* превью идёт в разметке позже — иначе оно накрывает звёздочку */
        width: 26px;
        height: 26px;
        flex-basis: 26px;
        margin: 0 !important;
        background: rgba(0, 0, 0, 0.38) !important;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        color: #ffffff !important;
        opacity: 0.9;
    }

    #interfaceModal .interface-card-fav svg {
        width: 15px;
        height: 15px;
    }

    #interfaceModal .interface-card-fav.is-on {
        color: #f5b301 !important;
    }

    #interfaceModal .interface-filter {
        padding: 0 11px;
    }

    .theme-peek {
        padding: 10px;
    }

    .theme-peek .theme-peek-card {
        padding: 14px 12px 12px;
    }
}

@media (max-width: 360px) {
    .interface-filter-count {
        display: none;
    }
}

/* =========================================================
   СПИСОК ЧАТОВ: ВРЕМЯ, ПРЕВЬЮ, "ПЕЧАТАЕТ…"
   ========================================================= */

.chat-title-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.chat-title-row > strong,
.chat-title-row > .mobile-chat-item-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.chat-time {
    flex-shrink: 0;
    font-size: 11px;
    opacity: 0.6;
    white-space: nowrap;
}

.chat-preview {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.chat-preview-me {
    opacity: 0.75;
}

.chat-preview-draft {
    color: #e5534b;
}

/* =========================================================
   РЕАКЦИИ
   ========================================================= */

/* Ряд эмодзи в начале меню сообщения */
.reaction-picker {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2px;
    padding: 4px 4px 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(127, 127, 127, 0.25);
}

.reaction-pick {
    padding: 3px;
    font-size: 20px;
    line-height: 1;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: transform 0.12s ease, background 0.12s ease;
}

.reaction-pick:hover {
    background: rgba(127, 127, 127, 0.2);
    transform: scale(1.15);
}

.reaction-pick:active {
    transform: scale(0.9);
}

/* Мобильное меню узкое (160px) — все 6 эмодзи в одну строку */
.mobile-message-delete-menu .reaction-picker {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    justify-items: center;
    gap: 0;
    padding-left: 0;
    padding-right: 0;
}

.mobile-message-delete-menu .reaction-pick {
    padding: 2px 0;
    font-size: 17px;
}

/* Реакции под текстом сообщения */
.message-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 5px;
}

.message-reactions:empty {
    display: none;
}

.reaction-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: rgba(127, 127, 127, 0.18);
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.reaction-chip.mine {
    border-color: rgba(90, 169, 230, 0.8);
    background: rgba(90, 169, 230, 0.22);
}

.reaction-count {
    font-size: 12px;
    font-weight: 600;
}

/* =========================================================
   ЗАКРЕПЛЁННОЕ СООБЩЕНИЕ
   ========================================================= */

/* Плавает под шапкой, как панель поиска */
.pinned-bar {
    position: absolute;
    z-index: 9;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px 6px 16px;
    background: rgba(19, 19, 19, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 30px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
    color: #e8eaed;
}

/* ПК: шапка top 10 + высота 60, отступ 10 */
#pinnedBar {
    top: 80px;
    left: 20px;
    right: 20px;
}

/* Телефон: шапка top 10 + высота 50, отступ 10 */
#mobilePinnedBar {
    top: 70px;
    left: 12px;
    right: 12px;
}

/* Открыт поиск — плашка не нужна, панели не налезают друг на друга */
.mobile-search-bar.active ~ .pinned-bar {
    display: none !important;
}

/* Иконки — маска цвета текста: видны в светлых и тёмных темах */
.pinned-bar-icon,
.pinned-bar-unpin-icon {
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}

.pinned-bar-icon {
    --icon: url("Direct/img/icons/pin.svg");
    width: 18px;
    height: 18px;
    opacity: 0.8;
}

.pinned-bar-unpin-icon {
    --icon: url("Direct/img/icons/close.svg");
    width: 22px;
    height: 22px;
    opacity: 0.7;
    filter: invert(1);
}

.pinned-bar-body {
    flex: 1;
    min-width: 0;
    cursor: pointer;
    border-left: 2px solid #5aa9e6;
    padding-left: 8px;
}

.pinned-bar-title {
    font-size: 12px;
    font-weight: 600;
    color: #5aa9e6;
}

.pinned-bar-text {
    font-size: 13px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: 0.85;
}

.pinned-bar-unpin {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.pinned-bar-unpin:hover {
    background: rgba(127, 127, 127, 0.2);
}

/* =========================================================
   ПОИСК
   ========================================================= */

/* Панель поиска в чате на ПК — под плавающей шапкой (top 10 + 60) */
#chatSearchBar {
    top: 70px;
    left: 10px;
    right: 10px;
}

/* Поиск справа, вплотную к "⋮" (у "⋮" свой margin-left: auto) */
#chatUserHeader #chatSearchButton {
    margin-left: auto;
}

#chatUserHeader #chatOptionsButton {
    margin-left: 0;
}

/* Поиск по сообщениям над списком чатов */
.chats-search {
    position: relative;
    flex-shrink: 0;
    padding: 8px 8px 0;
}

.chats-search-input {
    width: 100%;
    height: 36px;
    box-sizing: border-box;
    padding: 0 34px 0 14px;
    border: 1px solid rgba(127, 127, 127, 0.3);
    border-radius: 18px;
    background: rgba(127, 127, 127, 0.12);
    color: inherit;
    font-size: 14px;
    outline: none;
}

.chats-search-input:focus {
    border-color: rgba(127, 127, 127, 0.6);
}

.chats-search-input::placeholder {
    color: inherit;
    opacity: 0.5;
}

.chats-search-clear {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 24px;
    height: 24px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(127, 127, 127, 0.2);
    color: inherit;
    font-size: 12px;
    cursor: pointer;
}

.chats-search-clear.visible {
    display: flex;
}

/* =========================================================
   АРХИВ, ЗАКРЕП И ЗВУК ЧАТОВ, БЛОКИРОВКА
   ========================================================= */

/* Аватар "Архива" — значок коробки цвета текста на синем круге */
.archive-avatar {
    bottom: 3px;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--archive-color, #3d6fb6);
    position: relative;
    transition: background-color 0.25s ease;
}
@media (max-width: 480px) {
    .archive-avatar {
        bottom: 0;
    }
}

.archive-avatar-chat {
    bottom: 0;
}

/* В шапке чата значок занимает весь круг: без сдвига и без рамки круга */
#chatAvatar:has(.archive-avatar),
#mobileChatAvatar:has(.archive-avatar) {
    position: relative;
    background: transparent !important;
    border: none !important;
}

#chatAvatar .archive-avatar,
#mobileChatAvatar .archive-avatar {
    position: absolute;
    inset: 0;
    bottom: 0;
    width: auto;
    height: auto;
}

.archive-avatar::after {
    content: '';
    position: absolute;
    inset: 25%;
    background-color: #ffffff;
    -webkit-mask: url("Direct/img/chat/archive.svg") center / contain no-repeat;
    mask: url("Direct/img/chat/archive.svg") center / contain no-repeat;
}

/* Значки у имени чата: без звука, закреплён */
.chat-flag {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    opacity: 0.55;
    background-color: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}

.chat-flag-muted {
    --icon: url("Direct/img/icons/mute.svg");
}

.chat-flag-pinned {
    --icon: url("Direct/img/icons/pin.svg");
}

/* Без звука — счётчик непрочитанных серый */
.is-muted .unread-badge,
.is-muted .mobile-unread-badge {
    background: #6b7280 !important;
}

/* Меню действий с чатом — у пальца/курсора, поверх всего */
.chat-options-menu.chat-actions-menu {
    position: fixed;
    top: 0;
    right: auto;
    z-index: 3000;
    /* Висит прямо на body (не внутри #mobileMessengerScreen) — своё правило,
       иначе долгое нажатие на чат открывает его вместе со штатным выделением iOS */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Блокировка: плашка на месте поля ввода */
#messageInputSection.blocked-hidden,
.mobile-message-input-area.blocked-hidden {
    display: none !important;
}

.blocked-banner {
    position: absolute;
    bottom: 14px;
    left: 20px;
    right: 20px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 50px;
    padding: 8px 16px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    background: rgba(19, 19, 19, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: #c9ccd1;
    font-size: 14px;
    text-align: center;
}

#mobileBlockedBanner {
    left: 12px;
    right: 12px;
}

.blocked-banner-unblock,
.blocked-banner-request {
    flex-shrink: 0;
    padding: 6px 14px;
    border: 1px solid rgba(90, 169, 230, 0.6);
    border-radius: 16px;
    background: transparent;
    color: #5aa9e6;
    font-size: 13px;
    cursor: pointer;
}

/* =========================================================
   СВАЙП ВЛЕВО ПО ЧАТУ (ТЕЛЕФОН)
   ========================================================= */

.chat-swipe {
    position: relative;
    overflow: hidden;
    margin-bottom: 5px;
    border-radius: 24px;
}

.chat-swipe > .mobile-chat-item {
    position: relative;
    z-index: 1;
    margin-bottom: 0 !important;
    /* Вертикальная прокрутка — браузеру, горизонталь — нам */
    touch-action: pan-y;
    transition: transform 0.2s ease;
}

.chat-swipe-actions {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    /* Не просвечивают сквозь полупрозрачный фон чата, пока он на месте */
    visibility: hidden;
}

.chat-swipe.swiping .chat-swipe-actions,
.chat-swipe.open .chat-swipe-actions {
    visibility: visible;
}

/* Кнопка: круг с иконкой и подпись под ним (как в Telegram) */
.chat-swipe-action {
    width: 76px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0;
    border: none !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: #ffffff;
    cursor: pointer;
}

.swipe-circle {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #ffffff;
    transition: transform 0.12s ease;
}

.chat-swipe-action:active .swipe-circle {
    transform: scale(0.9);
}

.swipe-label {
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
    color: #e8eaed;
}

.swipe-pin .swipe-circle { background: #4caf50; }
.swipe-mute .swipe-circle,
.swipe-unmute .swipe-circle { background: #e08a2b; }
.swipe-delete .swipe-circle { background: #c62828; }

.swipe-icon {
    position: relative;
    width: 22px;
    height: 22px;
    background-color: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}

.swipe-pin .swipe-icon { --icon: url("Direct/img/icons/pin.svg"); }
.swipe-mute .swipe-icon { --icon: url("Direct/img/icons/mute.svg"); }
.swipe-unmute .swipe-icon { --icon: url("Direct/img/icons/notifications.svg"); }
.swipe-delete .swipe-icon { --icon: url("Direct/img/icons/delete.svg"); }

/* "Открепить" — булавка зачёркнута */
.chat-swipe-action .swipe-icon.crossed::after {
    content: '';
    position: absolute;
    left: -2px;
    right: -2px;
    top: 50%;
    height: 2px;
    background: #ffffff;
    transform: rotate(-45deg);
}

/* =========================================================
   УСТРОЙСТВА
   ========================================================= */

.devices-list {
    margin-top: 12px;
    max-height: 50vh;
    overflow-y: auto;
}

.device-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 4px;
    border-bottom: 1px solid rgba(127, 127, 127, 0.2);
}

.device-info {
    flex: 1;
    min-width: 0;
}

.device-name {
    font-size: 14px;
    font-weight: 600;
}

.device-current {
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 10px;
    background: rgba(76, 175, 80, 0.2);
    color: #6fdc8b;
    font-size: 11px;
    font-weight: 500;
}

.device-details {
    margin-top: 3px;
    font-size: 12px;
    opacity: 0.6;
}

.device-terminate {
    flex-shrink: 0;
    padding: 5px 12px;
    border: 1px solid rgba(229, 83, 75, 0.6);
    border-radius: 14px;
    background: transparent;
    color: #e5534b;
    font-size: 12px;
    cursor: pointer;
}

.devices-terminate-all {
    width: 100%;
    margin-top: 14px;
    padding: 12px;
    border: 1px solid rgba(229, 83, 75, 0.6);
    border-radius: 24px;
    background: rgba(229, 83, 75, 0.12);
    color: #e5534b;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.search-section-title {
    padding: 10px 8px 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.55;
}

.search-mark {
    padding: 0 1px;
    border-radius: 3px;
    background: rgba(255, 200, 50, 0.45);
    color: inherit;
}

/* Число новых сообщений на кнопке ↓ */
.scroll-new-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 10px;
    background: #e53935;
    color: #ffffff;
    font-size: 11px;
    font-weight: bold;
    line-height: 20px;
    text-align: center;
    pointer-events: none;
}

.chat-preview-typing {
    display: none;
    font-style: italic;
}

.is-typing .chat-preview-text {
    display: none;
}

.is-typing .chat-preview-typing {
    display: inline;
}

/* =========================================================
   КОНФИДЕНЦИАЛЬНОСТЬ: КТО ВИДИТ "БЫЛ(А) В СЕТИ"
   ========================================================= */

/* Маленькая ссылка под переключателем */
.settings-link {
    display: inline-block;
    margin-top: 8px;
    padding: 0;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: #5aa9e6;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
}

.settings-link:hover {
    text-decoration: underline;
}

/* "Назад" — как в сканере QR, только в левом верхнем углу окна */
#lastSeenModal #lastSeenBackButton {
    position: absolute;
    top: 10px;
    left: 10px;
}

/* «<» в разделах настроек — там же, где в «Был(а) в сети»; заголовок сдвигается вправо от неё */
.modal-window > .settings-back-button {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
}

.modal-window.has-settings-back > h2 {
    padding-left: 34px;
}

#lastSeenModal .modal-window h2 {
    text-align: center;
}

.settings-radio-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.settings-radio,
.settings-contact {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    font-size: 14px;
    cursor: pointer;
}

.settings-radio input,
.settings-contact input {
    width: 18px;
    height: 18px;
    margin: 0;
    flex-shrink: 0;
    cursor: pointer;
}

.settings-contact-list {
    max-height: 30vh;
    overflow-y: auto;
    margin-top: 6px;
}

.settings-contact-avatar {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    font-size: 13px;
    font-weight: bold;
}

.settings-contact-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.settings-contact-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* =========================================================
   ГРУППОВЫЕ ЧАТЫ
   ========================================================= */

/* Имя автора над чужим сообщением */
.message-sender-name {
    margin-bottom: 3px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.message-sender-name:hover {
    text-decoration: underline;
}

/* Окна "Новая группа" и "Группа" — на основе окна пересылки */
.group-title-input {
    flex-shrink: 0;
    margin: 0 0 14px;
}

.group-pick-hint {
    margin: 0 4px 4px;
    font-size: 12px;
    color: #737a84;
}

#createGroupSubmitButton {
    width: 100%;
    margin-top: 0;
    padding: 12px;
    border-radius: 10px;
    background: #ffffff;
    color: #101216;
    font-size: 15px;
    font-weight: 600;
}

#createGroupSubmitButton:hover {
    background: #e9e9e9;
}

#createGroupSubmitButton:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.group-info-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.group-info-avatar {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #252a31;
    color: #e9eaec;
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
}

.group-info-text {
    flex: 1;
    min-width: 0;
}

.group-info-name {
    font-size: 18px;
    font-weight: 600;
    color: #e7e9ec;
    overflow-wrap: anywhere;
}

.group-info-text .group-title-input {
    height: 38px;
    margin: 0;
}

.group-info-count {
    margin-top: 3px;
    font-size: 13px;
    color: #737a84;
}

/* Иконки — маской, цвет берётся из color (работает в любой теме) */
.group-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}

.group-icon-edit {
    --icon: url("Direct/img/chat/editProfileNameButton.svg");
}

.group-icon-add {
    --icon: url("Direct/img/icons/group.svg");
}

.modal-window .group-icon-button {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #c9ccd1;
    border-radius: 50%;
}

.modal-window .group-icon-button:hover {
    background: #2a2f36;
}

.modal-window .group-add-members-button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0 0 6px;
    padding: 10px 14px;
    background: transparent;
    color: #6fb6ff;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    text-align: left;
}

.modal-window .group-add-members-button:hover {
    background: #1d2127;
}

.group-members-list {
    margin-bottom: 4px;
}

.group-member-item {
    cursor: pointer;
}

.group-member-role {
    flex-shrink: 0;
    font-size: 12px;
    color: #737a84;
}

.modal-window .group-member-remove {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    color: #8a9099;
    font-size: 22px;
    line-height: 1;
    border-radius: 50%;
}

.modal-window .group-member-remove:hover {
    background: #3a2326;
    color: #ff6b6b;
}

.group-info-footer {
    display: flex;
    gap: 10px;
}

.group-info-footer button {
    flex: 1;
    margin-top: 0;
    padding: 11px 15px;
    background: #333;
    color: #ffffff;
    font-size: 14px;
}

.group-info-footer .danger-button {
    background: #7d3030;
}

.group-info-footer .danger-button:hover {
    background: #a33a3a;
}

/* Кто прочитал: строка в меню сообщения и подсказка у ✓✓ */
.message-readers,
.readers-popover {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #9aa0a8;
}

.message-readers {
    padding: 4px 6px 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(127, 127, 127, 0.25);
}

.readers-avatars {
    display: flex;
}

.reader-avatar {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -6px;
    border: 2px solid #222;
    border-radius: 50%;
    background: #3a3f47;
    color: #e9eaec;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    overflow: hidden;
}

.reader-avatar:first-child {
    margin-left: 0;
}

.reader-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.readers-popover {
    position: fixed;
    z-index: 1100;
    display: none;
    max-width: 260px;
    padding: 6px 10px;
    background: #222;
    border: 1px solid #444;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

.readers-popover.open {
    display: flex;
}

/* ✓✓ своего сообщения в группе — наведение показывает прочитавших */
.my-message .message-status {
    cursor: default;
}
/* Кнопка «Новая группа» справа от заголовка «Чаты» */
.sidebar-header,
.mobile-chats-header {
    justify-content: space-between;
    gap: 10px;
}

.chats-header-action {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    margin-right: -6px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: 0.85;
    transition: background-color 0.15s, opacity 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.chats-header-action:hover {
    opacity: 1;
    background-color: rgba(127, 127, 127, 0.18);
}

.chats-header-action:active {
    background-color: rgba(127, 127, 127, 0.28);
}

.chats-header-action-icon {
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask: url("Direct/img/icons/group.svg") center / contain no-repeat;
    mask: url("Direct/img/icons/group.svg") center / contain no-repeat;
}

/* =========================================================
   ЗАБЫЛИ ПАРОЛЬ / СМЕНА ПАРОЛЯ
   ========================================================= */

.auth-link {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 6px;
    background: transparent;
    border: none;
    color: inherit;
    font-size: 13px;
    opacity: 0.7;
    text-align: center;
    cursor: pointer;
}

.auth-link:hover:not(:disabled) {
    opacity: 1;
    text-decoration: underline;
}

.auth-link:disabled {
    opacity: 0.4;
    cursor: default;
}

.auth-hint {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    opacity: 0.7;
}

#changePasswordModal .settings-section input {
    margin-top: 8px;
}

/* Высота поля в окнах тем разная — глазик ставим от низа поля */
#changePasswordModal .password-input-wrapper {
    margin-top: 8px;
}

#changePasswordModal .password-input-wrapper input {
    display: block;
    margin: 0;
}

#changePasswordModal .password-toggle {
    top: 50%;
    bottom: auto;
    margin: 0;
    transform: translateY(-50%);
}

#changePasswordModal .settings-link {
    display: block;
    margin-top: 10px;
}

#changePasswordSubmit {
    width: 100%;
    margin-top: 12px;
}

#changePasswordSubmit:disabled,
#forgotResetButton:disabled {
    opacity: 0.6;
}

/* Аватар в ПК-кнопке профиля: показывается только в теме Classic */
.profile-button-avatar {
    display: none;
}

/* Заголовок журнала в HTML обычным регистром; во всех темах, кроме Classic, — капсом, как раньше */
.updates-window h2 {
    text-transform: uppercase;
}


/* =========================================================
   ВХОД ПО QR-КОДУ
   ========================================================= */

.qr-login-card {
    position: relative;
    width: 256px;
    height: 256px;
    margin: 12px auto 0;
    padding: 8px;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
}

.qr-login-code,
.qr-login-code canvas,
.qr-login-code svg {
    display: block;
    width: 240px;
    height: 240px;
    color: #2b2b2b;
    font-size: 13px;
}

/* "Отсканирован", "Код истёк" — поверх размытого кода */
.qr-login-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #2b2b2b;
    text-align: center;
}

.qr-login-overlay-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}

.qr-login-overlay-text {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

.qr-login-overlay button {
    width: auto;
    margin-top: 0;
    padding: 8px 16px;
}

.qr-login-timer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 13px;
    opacity: 0.8;
}

.qr-login-ring {
    width: 22px;
    height: 22px;
    transform: rotate(-90deg);
}

.qr-login-ring circle {
    fill: none;
    stroke-width: 4;
}

.qr-login-ring-track {
    stroke: currentColor;
    opacity: 0.2;
}

.qr-login-ring-progress {
    stroke: currentColor;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s linear;
}

/* Инструкция со скриншотами */
.qr-login-steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: qr-step;
}

.qr-login-steps li {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    line-height: 1.35;
    text-align: left;
    counter-increment: qr-step;
}

.qr-login-steps li::before {
    content: counter(qr-step);
    position: absolute;
    top: 6px;
    left: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

.qr-login-steps img {
    width: 100%;
    aspect-ratio: 390 / 360;
    object-fit: contain;
    object-position: top;
    border-radius: 10px;
    border: 1px solid rgba(127, 127, 127, 0.3);
}

.qr-login-link {
    margin-top: 0;
}

.qr-login-confirm-device {
    margin: 4px 0 8px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}

.qr-login-confirm-warning {
    margin: 0 0 4px;
    font-size: 13px;
    line-height: 1.4;
    opacity: 0.75;
    text-align: center;
}

/* ПК: инструкция слева, код справа */
.auth-box.qr-login-wide {
    width: 860px;
    max-width: calc(100% - 30px);
    /* На телефоне и в низком окне — прокрутка внутри блока */
    max-height: calc(100dvh - 30px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

#qrLoginForm h2 {
    text-align: center;
}

.qr-login-layout {
    display: flex;
    flex-direction: column;
}

.qr-login-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
}

.qr-login-actions button {
    width: auto;
    min-width: 150px;
    margin-top: 0;
    padding: 10px 20px;
}

@media (min-width: 801px) {
    .qr-login-layout {
        flex-direction: row-reverse;
        align-items: center;
        gap: 32px;
    }

    .qr-login-main {
        flex: 0 0 300px;
    }

    .qr-login-main .qr-login-card {
        width: 300px;
        height: 300px;
        margin-top: 0;
        padding: 10px;
    }

    .qr-login-main .qr-login-code,
    .qr-login-main .qr-login-code canvas,
    .qr-login-main .qr-login-code svg {
        width: 280px;
        height: 280px;
    }

    .qr-login-steps {
        flex: 1;
        margin-top: 0;
    }
}

@media (max-width: 420px) {
    .qr-login-actions button {
        min-width: 0;
        flex: 1;
        padding: 10px 12px;
    }
}

/* Увеличенный скриншот инструкции (плавно вырастает из миниатюры) */
.qr-login-steps img {
    cursor: zoom-in;
}

.qr-step-zoom {
    position: fixed;
    z-index: 10000;
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
    pointer-events: none;
    transform-origin: top left;
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.28s ease;
}

/* =========================================================
   ССЫЛКИ В СООБЩЕНИЯХ, КРУПНЫЙ ЭМОДЗИ
   ========================================================= */

.message-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    opacity: 0.95;
    word-break: break-all;
    -webkit-user-select: text;
    user-select: text;
}

.message-link:hover {
    opacity: 1;
    text-decoration-thickness: 2px;
}

/* Одно эмодзи — крупно и без пузыря
   (#messengerScreen — сильнее пузырей тем classic и light) */
#messengerScreen .message.emoji-only,
#mobileChatScreen .mobile-message.emoji-only,
.message.emoji-only,
.mobile-message.emoji-only {
    padding: 0 4px !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.message.emoji-only .message-text,
.mobile-message.emoji-only .mobile-message-text {
    font-size: 56px;
    line-height: 1.1;
}


/* Двойное нажатие — ❤️ выпрыгивает над сообщением */
.message,
.mobile-message {
    touch-action: manipulation;
}

.quick-reaction-pop {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 5;
    font-size: 34px;
    line-height: 1;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.3);
    animation: quick-reaction-pop 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.3) forwards;
}

@keyframes quick-reaction-pop {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
    35% { opacity: 1; transform: translate(-50%, -60%) scale(1.25); }
    70% { opacity: 1; transform: translate(-50%, -75%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -110%) scale(0.9); }
}

/* =========================================================
   ВЫДЕЛЕНИЕ НЕСКОЛЬКИХ СООБЩЕНИЙ
   ========================================================= */

.selection-bar {
    display: none;
    flex: 1;
    min-width: 0;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    pointer-events: auto;
}

body.messages-selecting .selection-bar {
    display: flex;
}

/* Пока выделяем — в поле ввода только панель */
body.messages-selecting #messageInputSection > :not(.selection-bar),
body.messages-selecting .mobile-message-input-area > :not(.selection-bar),
body.messages-selecting .blocked-banner,
body.messages-selecting #emojiPicker,
body.messages-selecting #mobileEmojiPicker {
    display: none !important;
}

.selection-bar button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    min-height: 38px;
    margin: 0;
    padding: 8px 14px;
    border: none;
    border-radius: 20px;
    background: transparent;
    color: inherit;
    font-size: 14px;
    cursor: pointer;
}

.selection-bar button:hover:not(:disabled) {
    background: rgba(127, 127, 127, 0.18);
}

.selection-bar button:disabled {
    opacity: 0.4;
    cursor: default;
}

.selection-bar .selection-cancel {
    padding: 8px 10px;
}

.selection-bar .selection-delete {
    color: #ff6b6b;
}

.selection-count {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
}

.selection-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}

@media (max-width: 420px) {
    .selection-bar button span:not(.selection-icon) {
        display: none;
    }
}

/* Сообщения в режиме выделения */
body.messages-selecting .message[data-message-id],
body.messages-selecting .mobile-message[data-message-id] {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

/* Рамка внутри пузыря — край списка её не обрезает
   (с ID — сильнее «без пузыря» у крупных эмодзи) */
#messengerScreen .message.message-selected,
#mobileChatScreen .mobile-message.message-selected,
.message.message-selected,
.mobile-message.message-selected {
    box-shadow: inset 0 0 0 2px #4c8dff, 0 0 0 3px rgba(76, 141, 255, 0.18) !important;
}

.message.emoji-only.message-selected,
.mobile-message.emoji-only.message-selected {
    border-radius: 16px;
}


.blocked-banner-request:disabled {
    opacity: 0.6;
    cursor: default;
}

/* =========================================================
   ЦВЕТ АРХИВА, ЗАПРОС НА ПЕРЕПИСКУ
   ========================================================= */

/* В шапке Архива круг нажимается — меняет цвет */
#chatAvatar:has(.archive-avatar),
#mobileChatAvatar:has(.archive-avatar) {
    cursor: pointer;
}

.archive-color-preview {
    width: 72px;
    height: 72px;
    margin: 4px auto 16px;
}

.archive-color-preview .archive-avatar {
    bottom: 0;
}

.archive-color-list {
    display: grid;
    grid-template-columns: repeat(5, 40px);
    justify-content: center;
    gap: 12px;
    margin-bottom: 6px;
}

.modal-window .archive-color-option {
    width: 40px;
    height: 40px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--archive-color);
    cursor: pointer;
    box-shadow: 0 0 0 0 transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.modal-window .archive-color-option:hover {
    transform: scale(1.08);
}

.modal-window .archive-color-option.selected {
    box-shadow: 0 0 0 3px rgba(127, 127, 127, 0.25), 0 0 0 2px #ffffff inset;
}

.message-request-avatar {
    width: 72px;
    height: 72px;
    margin: 4px auto 10px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(127, 127, 127, 0.2);
    font-size: 28px;
    font-weight: 700;
}

.message-request-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#messageRequestModal h2 {
    text-align: center;
}

.message-request-hint {
    margin: 0 0 6px;
    font-size: 13px;
    line-height: 1.4;
    opacity: 0.75;
    text-align: center;
}

/* Пометка «Запрос» в списке чатов */
.chat-request-label {
    display: inline-block;
    margin-right: 4px;
    padding: 1px 7px;
    border-radius: 9px;
    background: #4c8dff;
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
}

/* При блокировке поле ввода скрыто — для выделения возвращаем
body.messages-selecting #messageInputSection.blocked-hidden,
body.messages-selecting .mobile-message-input-area.blocked-hidden {
    display: flex !important;
}

/* =========================================================
   ПЛАШКА «НЕТ СОЕДИНЕНИЯ»
   ========================================================= */

.connection-banner {
    position: fixed;
    top: max(10px, env(safe-area-inset-top));
    left: 50%;
    z-index: 100000;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 20px;
    background: rgba(30, 30, 30, 0.92);
    color: #ffffff;
    font-size: 13px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -20px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.connection-banner.visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.connection-banner-spinner {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: connection-spin 0.8s linear infinite;
}

@keyframes connection-spin {
    to { transform: rotate(360deg); }
}

/* =========================================================
   НЕОТПРАВЛЕННОЕ СООБЩЕНИЕ
   ========================================================= */

.message.message-failed,
.mobile-message.message-failed {
    opacity: 0.75;
    box-shadow: inset 0 0 0 1px rgba(255, 107, 107, 0.6) !important;
}

.message-failed-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 12px;
}

.message-failed-label {
    color: #ff8a80;
}

.message-failed-status button {
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 2px 8px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font-size: 12px;
    cursor: pointer;
}

.message-failed-status button:disabled {
    opacity: 0.5;
    cursor: default;
}

.message-failed-status .message-failed-remove {
    padding: 2px 6px;
    border: none;
    font-size: 15px;
    line-height: 1;
}

/* =========================================================
   ПЛАШКА «ВКЛЮЧИТЬ УВЕДОМЛЕНИЯ?»
   ========================================================= */

.notifications-prompt {
    position: fixed;
    left: 50%;
    top: max(84px, calc(env(safe-area-inset-top) + 76px));
    z-index: 99999;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 14px;
    width: max-content;
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    background: rgba(30, 30, 30, 0.95);
    color: #ffffff;
    font-size: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transform: translate(-50%, -20px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.notifications-prompt.visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.notifications-prompt-buttons {
    display: flex;
    gap: 8px;
}

.notifications-prompt button {
    width: auto;
    min-height: 34px;
    margin: 0;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 17px;
    background: transparent;
    color: #ffffff;
    font-size: 13px;
    cursor: pointer;
}

.notifications-prompt .notifications-prompt-yes {
    background: #ffffff;
    color: #111111;
    border-color: #ffffff;
    font-weight: 600;
}

/* =========================================================
   ОКНО «ДА / НЕТ» (showConfirm)
   ========================================================= */

#confirmDialogModal h2 {
    margin-bottom: 6px;
    text-align: center;
}

.confirm-dialog-hint {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.4;
    opacity: 0.75;
    text-align: center;
}

#confirmDialogModal .confirm-dialog-danger {
    color: #ff6b6b !important;
}

/* =========================================================
   ВЛОЖЕНИЯ: ФОТО И ФАЙЛЫ
   ========================================================= */

/* Иконка-маска: берёт цвет текста (белая в тёмных темах, тёмная в светлых) */
.svg-icon {
    display: inline-block;
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: center / contain no-repeat;
    mask: center / contain no-repeat;
}
.icon-clock    { -webkit-mask-image: url("Direct/img/icons/clock.svg");    mask-image: url("Direct/img/icons/clock.svg"); }
.icon-download { -webkit-mask-image: url("Direct/img/icons/download.svg"); mask-image: url("Direct/img/icons/download.svg"); }
.icon-file     { -webkit-mask-image: url("Direct/img/icons/file.svg");     mask-image: url("Direct/img/icons/file.svg"); }
.icon-music    { -webkit-mask-image: url("Direct/img/icons/music.svg");    mask-image: url("Direct/img/icons/music.svg"); }
.icon-zoom-in  { -webkit-mask-image: url("Direct/img/icons/zoom-in.svg");  mask-image: url("Direct/img/icons/zoom-in.svg"); }
.icon-zoom-out { -webkit-mask-image: url("Direct/img/icons/zoom-out.svg"); mask-image: url("Direct/img/icons/zoom-out.svg"); }
.icon-close    { -webkit-mask-image: url("Direct/img/icons/close.svg");    mask-image: url("Direct/img/icons/close.svg"); }
.icon-image    { -webkit-mask-image: url("Direct/img/icons/image.svg");    mask-image: url("Direct/img/icons/image.svg"); }
.icon-video    { -webkit-mask-image: url("Direct/img/icons/video.svg");    mask-image: url("Direct/img/icons/video.svg"); }
.icon-sticker  { -webkit-mask-image: url("Direct/img/icons/sticker.svg");  mask-image: url("Direct/img/icons/sticker.svg"); }

/* Значок в превью списка чатов («Фото», «Файл») */
.chat-preview-icon {
    width: 14px;
    height: 14px;
    margin-right: 4px;
    vertical-align: -2px;
}

/* ---------- Панель ввода: полоса прикреплённого — отдельной строкой сверху ---------- */
#messageInputSection,
.mobile-message-input-area {
    flex-wrap: wrap !important;
}
/* Поле ввода может сжиматься: иначе при переносе строк его «естественная»
   ширина (~20 символов) не помещается на узком экране и «Отправить»
   уезжает на вторую строку */
#messageInputSection .message-input-wrapper,
.mobile-message-input-area .mobile-message-input-wrapper,
.message-input-wrapper input,
.mobile-message-input-wrapper input {
    min-width: 0 !important;
}

/* Кнопка-скрепка на телефоне оформлена как «Отправить» (класс mobile-send-button),
   на ПК — по ID рядом с #sendMessageButton во всех темах */

.attach-preview {
    flex: 0 0 100%;
    order: -1;
    display: flex;
    gap: 8px;
    margin: 2px 10px 4px;
    padding: 2px 0 6px;
    overflow-x: auto;
    overflow-y: hidden;
    pointer-events: auto;
    box-sizing: border-box;
    max-width: calc(100% - 20px);
}
/* Во время отправки тускнеют карточки файлов, шкала загрузки — нет */
.attach-preview-sending {
    pointer-events: none;
}
.attach-preview-sending .attach-preview-item {
    opacity: 0.55;
}

.attach-preview-item {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 220px;
    padding: 5px 34px 5px 5px;
    background: rgba(127, 127, 127, 0.16);
    border-radius: 14px;
}
.attach-preview-item img {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    object-fit: cover;
    border-radius: 10px;
}
.attach-preview-fileicon {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(127, 127, 127, 0.22);
    font-size: 22px;
}
.attach-preview-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.attach-preview-name {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}
.attach-preview-size {
    font-size: 11px;
    opacity: 0.65;
}
.attach-preview-remove {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 22px !important;
    height: 22px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.55) !important;
    color: #ffffff;
    font-size: 16px;
    box-shadow: none !important;
}
.attach-preview-remove:active {
    transform: translateY(-50%) scale(0.92);
}

.attach-dragover {
    outline: 2px dashed rgba(120, 170, 255, 0.85) !important;
    outline-offset: -4px;
}

/* ---------- Вложения внутри сообщения ---------- */
.message-attachments {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.message-text:empty,
.mobile-message-text:empty {
    display: none;
}

/* Альбом фото (раскладка как в Telegram — считается в app.js).
   Ширина = доля от --album-max, высота — по пропорциям,
   фото расставлены в процентах, поэтому без пустых мест */
.message-album {
    --album-max: 340px;
    position: relative;
    max-width: 100%;
    border-radius: 16px;
    overflow: hidden;
    container-type: inline-size;
}
.mobile-message .message-album {
    --album-max: min(300px, 72vw);
}
.album-cell {
    position: absolute;
    overflow: hidden;
    cursor: zoom-in;
    background: rgba(127, 127, 127, 0.2);
}
.album-cell img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-user-drag: none;
    user-select: none;
}

/* Значок «удалится через N дней» */
.attachment-expiry {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    white-space: nowrap;
}
.attachment-expiry .svg-icon {
    width: 12px;
    height: 12px;
}
.message-album .attachment-expiry {
    position: absolute;
    left: 8px;
    bottom: 8px;
    padding: 3px 8px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    pointer-events: none;
}
.attachment-expiry-soon {
    color: #ff6b6b;
}
.message-album .attachment-expiry-soon {
    background: rgba(150, 20, 20, 0.75);
    color: #ffffff;
}
/* Узкий альбом — коротко «30 дн.», чтобы не налезать на время */
.attachment-expiry .expiry-short {
    display: none;
}
@container (max-width: 270px) {
    .attachment-expiry .expiry-long {
        display: none;
    }
    .attachment-expiry .expiry-short {
        display: inline;
    }
}

/* Только фото без подписи — без пузыря, как крупный эмодзи.
   #messengerScreen — сильнее правил тем «#messengerScreen .my-message» (classic, light) */
#messengerScreen .message.media-only,
#mobileChatScreen .mobile-message.media-only,
.message.media-only,
.mobile-message.media-only {
    padding: 0 !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.message.media-only .message-row,
.mobile-message.media-only .mobile-message-row {
    position: relative;
}
/* Время и галочки — поверх фото справа внизу */
.message.media-only .message-meta,
.mobile-message.media-only .mobile-message-meta {
    position: absolute;
    right: 8px;
    bottom: 8px;
    margin: 0;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.55);
    pointer-events: none;
}
#messengerScreen .message.media-only .message-meta *,
#mobileChatScreen .mobile-message.media-only .mobile-message-meta *,
.message.media-only .message-meta *,
.mobile-message.media-only .mobile-message-meta * {
    color: #ffffff !important;
    opacity: 1 !important;
}
#messengerScreen .message.media-only.message-selected,
#mobileChatScreen .mobile-message.media-only.message-selected,
.message.media-only.message-selected,
.mobile-message.media-only.message-selected {
    border-radius: 18px;
    box-shadow: 0 0 0 3px #4c8dff !important;
}

/* Фото с подписью — пузырь с тонкой рамкой, фото во всю ширину */
#messengerScreen .message.has-album,
#mobileChatScreen .mobile-message.has-album,
.message.has-album,
.mobile-message.has-album {
    padding: 4px !important;
}
.message.has-album .message-album,
.mobile-message.has-album .message-album {
    border-radius: 13px;
}
/* Время — под подписью, а не сбоку: иначе пузырь шире фото и сбоку пусто.
   Ширина содержимого = ширина фото (min-content), подпись переносится по ней */
#messengerScreen .message.has-album .message-row,
#mobileChatScreen .mobile-message.has-album .mobile-message-row,
.message.has-album .message-row,
.mobile-message.has-album .mobile-message-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
}
.message.has-album .message-content,
.mobile-message.has-album .mobile-message-content {
    width: min-content;
    max-width: 100%;
}
.message.has-album .message-text,
.mobile-message.has-album .mobile-message-text {
    overflow-wrap: anywhere;
}
.message.has-album .message-meta,
.mobile-message.has-album .mobile-message-meta {
    align-self: flex-end;
}
.message.has-album .message-text,
.mobile-message.has-album .mobile-message-text {
    padding: 6px 8px 2px;
}
.message.has-album .message-meta,
.mobile-message.has-album .mobile-message-meta {
    padding: 0 8px 4px;
}
.message.has-album .message-files,
.mobile-message.has-album .message-files {
    padding: 2px 4px 0;
}

/* Карточка файла */
.message-files {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.attachment-file {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 200px;
    max-width: 300px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(127, 127, 127, 0.15);
    color: inherit;
    text-decoration: none;
}
.attachment-file:hover {
    background: rgba(127, 127, 127, 0.25);
}
.attachment-file-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(127, 127, 127, 0.25);
    font-size: 22px;
}
.attachment-file-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.attachment-file-name {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.attachment-file-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    font-size: 12px;
    opacity: 0.75;
}
.attachment-file-meta .attachment-expiry-soon {
    opacity: 1;
}
.attachment-file-download {
    flex: 0 0 auto;
    display: flex;
    font-size: 20px;
    opacity: 0.8;
}
.attachment-file:hover .attachment-file-download {
    opacity: 1;
}

/* ---------- Просмотр фото на весь экран ---------- */
.image-viewer {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: none;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.92);
}
.image-viewer-toolbar {
    position: absolute;
    top: max(12px, env(safe-area-inset-top));
    right: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: 26px;
    background: rgba(30, 30, 30, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #ffffff;
}
.image-viewer-button {
    width: 42px !important;
    height: 42px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: none !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #ffffff !important;
    font-size: 22px;
    text-decoration: none;
    cursor: pointer;
}
.image-viewer-button:hover {
    background: rgba(255, 255, 255, 0.16) !important;
}
.image-viewer-zoom-level {
    min-width: 46px;
    text-align: center;
    font-size: 13px;
    opacity: 0.85;
    user-select: none;
}
.image-viewer-stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    cursor: zoom-in;
}
.image-viewer-stage.zoomed {
    cursor: grab;
}
.image-viewer-stage.zoomed:active {
    cursor: grabbing;
}
.image-viewer-stage img {
    max-width: 94vw;
    max-height: 86vh;
    border-radius: 6px;
    transform-origin: center center;
    will-change: transform;
    -webkit-user-drag: none;
    user-select: none;
}
.icon-reply    { -webkit-mask-image: url("Direct/img/icons/reply.svg");    mask-image: url("Direct/img/icons/reply.svg"); }

/* =========================================================
   УВЕДОМЛЕНИЯ ВНУТРИ SHIZ (как в Telegram)
   ========================================================= */
/* Полупрозрачное стекло: фон, размытие и рамку app.js берёт у плавающей
   панели ввода текущей темы (плотнее), цвет текста — читаемый на этом фоне. */
.inapp-stack {
    position: fixed;
    top: 88px;
    right: 24px;
    z-index: 3500;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 360px;
    max-width: calc(100vw - 32px);
    pointer-events: none;
}
/* Телефон — плашка сверху во всю ширину */
.inapp-stack.inapp-stack-mobile {
    top: max(10px, env(safe-area-inset-top));
    left: 10px;
    right: 10px;
    width: auto;
    max-width: none;
}

.inapp-notification {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px 10px 10px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.28);
    cursor: pointer;
    pointer-events: auto;
    touch-action: none;
    user-select: none;
    opacity: 0;
    transform: translateY(-16px) scale(0.98);
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease;
}
.inapp-notification.inapp-show {
    opacity: 1;
    transform: none;
}
.inapp-notification.inapp-hide { opacity: 0; transform: translateY(-12px) scale(0.98); }
.inapp-notification.inapp-hide-up { opacity: 0; transform: translateY(-120%); }
.inapp-notification.inapp-hide-left { opacity: 0; transform: translateX(-110%); }
.inapp-notification.inapp-hide-right { opacity: 0; transform: translateX(110%); }

.inapp-avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(127, 127, 127, 0.28);
    font-size: 17px;
    font-weight: 700;
}
.inapp-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.inapp-avatar .archive-avatar {
    width: 100%;
    height: 100%;
}
.inapp-body {
    flex: 1;
    min-width: 0;
}
.inapp-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}
.inapp-name {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.inapp-count {
    flex: 0 0 auto;
    font-size: 12px;
    opacity: 0.6;
}
.inapp-text {
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.35;
    opacity: 0.85;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.inapp-author {
    font-weight: 600;
}

.inapp-close {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    width: 22px !important;
    height: 22px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none !important;
    border-radius: 50% !important;
    background: rgba(127, 127, 127, 0.3) !important;
    color: inherit;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.15s ease;
    box-shadow: none !important;
}
.inapp-notification:hover .inapp-close {
    opacity: 1;
}
/* На телефоне крестика нет — плашку смахивают */
.inapp-stack-mobile .inapp-close {
    display: none;
}

/* =========================================================
   ЖЕСТЫ НА ТЕЛЕФОНЕ
   ========================================================= */
/* Свайп назад: список под чатом с затемнением */
.mobile-chats-screen.swipe-under {
    position: relative;
}
.mobile-chats-screen.swipe-under::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 5;
    background: #000000;
    opacity: var(--swipe-dim, 0);
    pointer-events: none;
}
.mobile-chat-screen.swiping {
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.4);
    will-change: transform;
}

/* Свайп-ответ: стрелка справа от сообщения */
.mobile-message.swipe-replying {
    position: relative;
    will-change: transform;
}
.swipe-reply-icon {
    position: absolute;
    top: 50%;
    right: -46px;
    width: 32px;
    height: 32px;
    margin-top: -16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    font-size: 17px;
    opacity: 0;
    transform: scale(0.6);
    transition: transform 0.15s ease;
    pointer-events: none;
}
.swipe-reply-icon.ready {
    transform: scale(1);
}
.icon-chat     { -webkit-mask-image: url("Direct/img/icons/chat.svg");     mask-image: url("Direct/img/icons/chat.svg"); }

/* =========================================================
   ПРОФИЛЬ: «НАПИСАТЬ» РЯДОМ С «ЗАКРЫТЬ»
   ========================================================= */
/* Кнопки в одну строку; оформление «Написать» темы берут от «Закрыть»
   (селекторы #profileWriteButton добавлены рядом с #backButton) */
.profile-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 17px;
}
#profileModal .profile-actions > button {
    margin: 0 !important;
}
#profileModal #profileWriteButton {
    gap: 7px;
}
#profileModal #profileWriteButton .svg-icon {
    width: 17px;
    height: 17px;
}
#profileModal #profileWriteButton {
    width: auto !important;
    min-width: 120px;
    white-space: nowrap;
}

/* =========================================================
   КАК УСТАНОВИТЬ SHIZ
   ========================================================= */
#installModal .install-window {
    width: 560px;
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.install-intro {
    margin: 4px 0 12px;
}
.install-installed {
    margin: 4px 0 10px;
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(76, 175, 80, 0.16);
    color: #6fd27a;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

/* Вкладки устройств — переключатель */
.install-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 14px;
    background: rgba(127, 127, 127, 0.14);
}
#installModal .install-tab {
    flex: 1;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 8px 6px !important;
    border: none !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
    font-size: 13px;
    font-weight: 600;
    opacity: 0.6;
    cursor: pointer;
}
#installModal .install-tab.active {
    background: rgba(127, 127, 127, 0.32) !important;
    opacity: 1;
}

.install-note {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.4;
    opacity: 0.75;
}
/* Шаги — как во входе по QR (номер, картинка, подпись, увеличение) */
.install-steps li span {
    font-size: 12.5px;
}
.icon-chevron  { -webkit-mask-image: url("Direct/img/icons/chevron-down.svg"); mask-image: url("Direct/img/icons/chevron-down.svg"); }

/* =========================================================
   НЕСКОЛЬКО АККАУНТОВ (меню «Управление»)
   ========================================================= */
.accounts-block {
    margin: 0 0 10px;
    color: inherit;
}
.accounts-block:empty {
    display: none;
}

.accounts-block .account-current,
.accounts-block .account-row,
.accounts-block .account-add {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border: none !important;
    border-radius: 18px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}
.accounts-block .account-current {
    background: rgba(127, 127, 127, 0.12) !important;
}
.accounts-block .account-current:hover,
.accounts-block .account-row:hover,
.accounts-block .account-add:hover {
    background: rgba(127, 127, 127, 0.18) !important;
}

.account-avatar {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(127, 127, 127, 0.3);
    font-size: 16px;
    font-weight: 700;
}
.account-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Картинки меню (иконки) в тёмных темах инвертируются правилом
       «.mobile-control-content img», а аватар — это фото, его нельзя переворачивать */
    filter: none !important;
}
.account-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.account-name {
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.account-username {
    font-size: 12.5px;
    opacity: 0.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.account-unread {
    flex: 0 0 auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: red;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}
.account-chevron {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    opacity: 0.6;
    transition: transform 0.2s ease;
}
.account-current.open .account-chevron {
    transform: rotate(180deg);
}

.accounts-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
}
.accounts-list[hidden] {
    display: none;
}

/* Свайп влево — под строкой открывается «Убрать» */
.account-swipe {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
}
/* Лента: строка во всю ширину + кнопка «Убрать» справа за краем;
   свайп сдвигает ленту, кнопка выезжает, ничего не просвечивает */
.account-track {
    display: flex;
    align-items: center;
    width: calc(100% + 84px);
    transition: transform 0.2s ease;
}
.account-swipe .account-row {
    flex: 0 0 calc(100% - 84px);
    touch-action: pan-y;
}
.account-swipe.revealed .account-row,
.account-swipe .account-row:active {
    background: rgba(127, 127, 127, 0.18) !important;
}
/* «Убрать» — как действия в списке чатов: красный круг с иконкой и подпись */
.accounts-block .account-remove {
    flex: 0 0 84px;
    width: 84px !important;
    min-height: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 0 !important;
    padding: 4px 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
    cursor: pointer;
}
.accounts-block .account-remove .swipe-circle {
    width: 40px;
    height: 40px;
    background: #c62828;
}
.accounts-block .account-remove:active .swipe-circle {
    transform: scale(0.9);
}
.accounts-block .account-remove .swipe-icon {
    width: 20px;
    height: 20px;
    --icon: url("Direct/img/icons/logout.svg");
}
.accounts-block .account-remove .swipe-label {
    color: inherit;
    font-size: 12px;
    font-weight: 500;
}

.account-add-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1.5px dashed rgba(127, 127, 127, 0.6);
    font-size: 22px;
    line-height: 1;
}

.add-account-hint {
    margin: 0 0 12px;
}

/* Переключение аккаунта — затемнение до перезагрузки */
body.account-switching::after {
    content: 'Переключаем аккаунт…';
    position: fixed;
    inset: 0;
    z-index: 30000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* ---- Аудио в сообщении: карточка в стиле Telegram ---- */
.message-audios {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.attachment-audio {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 240px;
    max-width: 100%;
    padding: 6px 4px 8px;
    overflow: hidden;
}

.audio-card-play {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.attachment-audio.is-current .audio-card-play {
    background: rgba(0, 0, 0, 0.5);
}

.audio-card-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.audio-card-name {
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.audio-card-duration {
    font-size: 13px;
    opacity: 0.8;
    font-variant-numeric: tabular-nums;
}

/* Сообщение с аудио: карточка во всю ширину пузыря (кнопка «Скачать» у самой стенки),
   время — внизу справа, на одной линии с полоской прогресса, как в Telegram */
#messengerScreen .message.has-audio .message-row,
#mobileChatScreen .mobile-message.has-audio .mobile-message-row,
.message.has-audio .message-row,
.mobile-message.has-audio .mobile-message-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
}

.message.has-audio .message-meta,
.mobile-message.has-audio .mobile-message-meta {
    align-self: flex-end;
    position: relative;
    margin-top: -16px;
}

.message.has-audio .message-text:empty,
.mobile-message.has-audio .mobile-message-text:empty {
    display: none;
}

.has-audio .audio-card-progress {
    right: 56px;
}

/* Кнопка «Скачать» справа в карточке аудио — как у обычного файла */
.audio-card-download {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: inherit;
    font-size: 20px;
    opacity: 0.8;
    text-decoration: none;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.audio-card-download:hover,
.audio-card-download:focus-visible {
    opacity: 1;
    background: color-mix(in srgb, currentColor 12%, transparent);
    outline: none;
}

.audio-card-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.15);
}

.audio-card-progress-fill {
    height: 100%;
    width: 0;
    background: rgba(255, 255, 255, 0.85);
}

/* ---- Общая панель проигрывания сверху (как в Telegram) ---- */
/* Панель выезжает снизу плавно: высота, прозрачность и сдвиг меняются вместе */
.audio-player-bar {
    position: relative;
    flex: 0 0 auto;
    margin: 0 20px;
    max-height: 0;
    opacity: 0;
    transform: translateY(-16px);
    visibility: hidden;
    overflow: hidden;
    border-radius: 30px;
    background: rgba(17, 20, 25, 0.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #ffffff;
    z-index: 5;
    transition: max-height 0.3s ease, margin-top 0.3s ease, opacity 0.25s ease,
        transform 0.3s ease, visibility 0s linear 0.3s;
}

.audio-player-bar.open {
    max-height: 160px;
    margin-top: 10px;
    opacity: 1;
    transform: none;
    visibility: visible;
    overflow: visible;
    transition: max-height 0.3s ease, margin-top 0.3s ease, opacity 0.25s ease,
        transform 0.3s ease, visibility 0s;
}

.audio-bar-inner {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px 4px;
}

.audio-bar-btn {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.audio-bar-btn:hover,
.audio-bar-btn:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    outline: none;
}

.audio-bar-main {
    width: 44px;
    height: 44px;
}

.audio-bar-speed {
    width: auto;
    min-width: 44px;
    padding: 0 8px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.audio-bar-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 0 8px;
}

.audio-bar-title {
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.audio-bar-time {
    font-size: 12px;
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
}

/* Громкость: кнопка и всплывающий вертикальный ползунок */
.audio-bar-volume {
    position: relative;
    display: flex;
}

.audio-bar-volume-pop {
    position: absolute;
    right: -4px;
    top: calc(100% + 10px);
    width: 48px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    background: rgba(19, 19, 19, 0.65);
    backdrop-filter: blur(13px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    z-index: 2;
}

.audio-bar-volume-pop[hidden] {
    display: none;
}

.audio-bar-volume-range {
    -webkit-appearance: slider-vertical;
    appearance: slider-vertical;
    writing-mode: vertical-lr;
    direction: rtl;
    width: 8px;
    height: 120px;
    margin: 0;
    accent-color: #ffffff;
    cursor: pointer;
}

/* Список аудио чата, раскрывается под панелью */
.audio-bar-playlist {
    position: absolute;
    left: 8px;
    right: 8px;
    top: calc(100% + 8px);
    max-height: 260px;
    overflow-y: auto;
    border-radius: 18px;
    background: rgba(38, 38, 40, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    padding: 4px;
    z-index: 3;
}

.audio-bar-playlist[hidden] {
    display: none;
}

.audio-bar-playlist-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: none;
    border-radius: 14px;
    background: transparent;
    color: #ffffff;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.audio-bar-playlist-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.audio-bar-playlist-item.is-current {
    background: rgba(255, 255, 255, 0.14);
    font-weight: 600;
}

.audio-bar-playlist-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.audio-bar-playlist-duration {
    flex: 0 0 auto;
    font-size: 12px;
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
}

.audio-bar-playlist-empty {
    padding: 12px;
    font-size: 14px;
    opacity: 0.7;
}

.audio-bar-progress {
    margin: 0 18px 10px;
    height: 3px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.15);
    cursor: pointer;
    overflow: hidden;
}

.audio-bar-progress-fill {
    height: 100%;
    width: 0;
    border-radius: 3px;
    background: #ffffff;
}

@media (max-width: 480px) {
    .audio-player-bar {
        margin: 0 8px;
    }
    .audio-player-bar.open {
        margin-top: 8px;
    }
    .audio-bar-btn {
        width: 34px;
        height: 34px;
    }
    .audio-bar-main {
        width: 40px;
        height: 40px;
    }
    .audio-bar-speed {
        min-width: 40px;
        padding: 0 6px;
    }
    .audio-bar-inner {
        gap: 2px;
        padding: 6px 4px 4px;
    }
}

/* Панель трека внутри чата (класс in-chat ставит app.js): всегда поверх переписки, а не в потоке,
   поэтому при открытии и закрытии ничего не прыгает. Выезжает сверху и уезжает наверх,
   шапка чата в это же время плавно опускается и поднимается. Той же ширины и высоты, что шапка. */
.audio-player-bar.in-chat {
    position: absolute;
    top: 10px;
    left: 20px;
    right: 20px;
    height: 60px;
    max-height: none;
    margin: 0;
    overflow: visible;
    border-radius: 30px;
    background: rgba(19, 19, 19, 0.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: none;
    z-index: 100000;
    transform: translateY(calc(-100% - 14px));
    opacity: 0;
    visibility: hidden;
    transition: transform 0.32s cubic-bezier(0.22, 0.8, 0.24, 1), opacity 0.25s ease, visibility 0s linear 0.32s;
}

.audio-player-bar.in-chat.open {
    margin: 0;
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: transform 0.32s cubic-bezier(0.22, 0.8, 0.24, 1), opacity 0.2s ease, visibility 0s;
}

.mobile-chat-screen .audio-player-bar.in-chat {
    left: 12px;
    right: 12px;
}

.audio-player-bar.in-chat .audio-bar-inner {
    height: 100%;
    padding: 0 16px;
    box-sizing: border-box;
}

/* Кнопки и текст — цветом шапки */
.audio-player-bar.in-chat .audio-bar-btn {
    color: inherit;
}

.audio-player-bar.in-chat .audio-bar-btn:hover,
.audio-player-bar.in-chat .audio-bar-btn:focus-visible {
    background: color-mix(in srgb, currentColor 12%, transparent);
}

.audio-player-bar.in-chat .audio-bar-progress {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 5px;
    margin: 0;
    background: color-mix(in srgb, currentColor 22%, transparent);
}

.audio-player-bar.in-chat .audio-bar-progress-fill {
    background: currentColor;
}

/* Шапка и баннер «не в контактах» плавно едут вместе с панелью */
.chat-user-header {
    transition: top 0.32s cubic-bezier(0.22, 0.8, 0.24, 1);
}

.add-contact-banner,
.mobile-add-contact-banner {
    transition: opacity 0.3s ease, transform 0.3s ease, top 0.32s cubic-bezier(0.22, 0.8, 0.24, 1);
}

.mobile-chat-header {
    transition: top 0.32s cubic-bezier(0.22, 0.8, 0.24, 1), opacity 0.3s ease, transform 0.3s ease;
}

.audio-above .chat-user-header,
.audio-above .mobile-chat-header {
    top: 80px;
}

.audio-above .add-contact-banner {
    top: 150px;
}

.mobile-chat-screen.audio-above .mobile-add-contact-banner {
    top: 138px;
}

/* Плашка «Включить уведомления» опускается под панель, пока трек играет */
body.audio-playing .notifications-prompt {
    top: max(236px, calc(env(safe-area-inset-top) + 228px));
}

/* Телефон: компактные кнопки, чтобы название трека помещалось в одну строку */
@media (max-width: 480px) {
    .audio-player-bar.in-chat .audio-bar-inner {
        padding: 0 8px;
        gap: 0;
    }
    .audio-player-bar.in-chat .audio-bar-btn {
        width: 30px;
        height: 30px;
    }
    .audio-player-bar.in-chat .audio-bar-main {
        width: 36px;
        height: 36px;
    }
    .audio-player-bar.in-chat .audio-bar-speed {
        min-width: 0;
        padding: 0 4px;
    }
    .audio-player-bar.in-chat .audio-bar-info {
        padding: 0 4px;
    }
    .audio-player-bar.in-chat .audio-bar-time,
    .audio-player-bar.in-chat .audio-bar-title {
        white-space: nowrap;
    }
}

/* Плавающая дата при прокрутке (как в Telegram): одна плашка под шапкой,
   видна только пока листают, через секунду после остановки плавно исчезает.
   Вид — как у разделителя дат в текущей теме (те же классы). */
.date-divider.floating-date,
.mobile-date-divider.floating-date {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    margin: 0 !important;
    transform: translateX(-50%) translateY(-4px) !important;
    opacity: 0;
    z-index: 9;
    pointer-events: none;
    white-space: nowrap;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.date-divider.floating-date.visible,
.mobile-date-divider.floating-date.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0) !important;
}

.floating-date.no-anim {
    transition: none;
}

/* Панель трека над списком чатов (класс as-header ставит app.js) — такая же,
   как внутри чата: высота и вид шапки чата, полоска прогресса внизу внутри,
   кнопки и текст цветом шапки. Остаётся в потоке: список чатов сдвигается вниз. */
.audio-player-bar.as-header.open {
    height: 60px;
    max-height: 60px;
    overflow: visible;
}

.audio-player-bar.as-header .audio-bar-inner {
    height: 100%;
    padding: 0 16px;
    box-sizing: border-box;
}

.audio-player-bar.as-header .audio-bar-btn {
    color: inherit;
}

.audio-player-bar.as-header .audio-bar-btn:hover,
.audio-player-bar.as-header .audio-bar-btn:focus-visible {
    background: color-mix(in srgb, currentColor 12%, transparent);
}

.audio-player-bar.as-header .audio-bar-progress {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 5px;
    margin: 0;
    background: color-mix(in srgb, currentColor 22%, transparent);
}

.audio-player-bar.as-header .audio-bar-progress-fill {
    background: currentColor;
}

@media (max-width: 480px) {
    .audio-player-bar.as-header .audio-bar-inner {
        padding: 0 8px;
        gap: 0;
    }
    .audio-player-bar.as-header .audio-bar-btn {
        width: 30px;
        height: 30px;
    }
    .audio-player-bar.as-header .audio-bar-main {
        width: 36px;
        height: 36px;
    }
    .audio-player-bar.as-header .audio-bar-speed {
        min-width: 0;
        padding: 0 4px;
    }
    .audio-player-bar.as-header .audio-bar-info {
        padding: 0 4px;
    }
}

/* Нажатие всегда попадает в саму кнопку, а не в картинку внутри
   (картинку иконки перерисовывают — на iPhone нажатие могло теряться) */
.audio-bar-btn svg,
.audio-card-play svg {
    pointer-events: none;
}

/* =========================================================
   ВИД ПРОФИЛЯ (выбирает сам человек, видят все)
   =========================================================
   Класс на окне: pv-classic (как было) | pv-left | pv-center | pv-poster.
   Ставит profile-look.js (applyProfileStyle). Обложка — #profileCover:
   градиент или картинка из настроек; без настроек — спокойный градиент.
   --pv-ring — цвет фона окна в текущей теме: кольцо вокруг аватара
   «вырезает» его из обложки. */

/* Ник — кнопка «скопировать» (во всех видах) */
#profileModal #profileUsername {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0 !important;
    padding: 2px 8px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    font: inherit;
    font-size: 15px;
    color: #999999;
    cursor: pointer;
    transform: none;
}

#profileModal #profileUsername::after {
    content: '';
    width: 15px;
    height: 15px;
    background: currentColor;
    -webkit-mask: url('Direct/img/icons/copy.svg') center / contain no-repeat;
    mask: url('Direct/img/icons/copy.svg') center / contain no-repeat;
    opacity: 0.7;
}

#profileModal #profileUsername:hover {
    background: rgba(127, 127, 127, 0.14) !important;
}

#profileModal .profile-cover {
    display: none;
}

#profileModal > .modal-window.pv-left,
#profileModal > .modal-window.pv-center,
#profileModal > .modal-window.pv-poster {
    position: relative;
    overflow: hidden;
    --pv-ring: #111111;
}

#profileModal .pv-left > .profile-cover,
#profileModal .pv-center > .profile-cover,
#profileModal .pv-poster > .profile-cover {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(135deg, #2e3b47, #1a1f26);
    background-size: cover;
    background-position: center;
    z-index: 0;
}

#profileModal .pv-center > .profile-cover { height: 130px; }
#profileModal .pv-poster > .profile-cover { height: 230px; }

/* Кнопки QR и «в контакты» — над обложкой */
#profileModal .pv-left > .profile-qr-button,
#profileModal .pv-center > .profile-qr-button,
#profileModal .pv-poster > .profile-qr-button,
#profileModal .pv-left > .profile-add-contact-button,
#profileModal .pv-center > .profile-add-contact-button,
#profileModal .pv-poster > .profile-add-contact-button {
    z-index: 3 !important;
}

/* На обложке (особенно светлой картинке) значок QR — на тёмной подложке */
#profileModal .pv-left > .profile-qr-button,
#profileModal .pv-center > .profile-qr-button,
#profileModal .pv-poster > .profile-qr-button {
    background: rgba(0, 0, 0, 0.38) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Имя стоит на обложке: лёгкое затемнение снизу, чтобы читалось на светлой картинке */
#profileModal .pv-left > .profile-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.38) 100%);
}

/* Низ постера плавно переходит в фон окна */
#profileModal .pv-poster > .profile-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 35%, var(--pv-ring) 100%);
}

/* Всё содержимое — над обложкой */
#profileModal .pv-left > .profile-header,
#profileModal .pv-center > .profile-header,
#profileModal .pv-poster > .profile-header,
#profileModal .pv-left > .profile-info,
#profileModal .pv-center > .profile-info,
#profileModal .pv-poster > .profile-info,
#profileModal .pv-left > .profile-actions,
#profileModal .pv-center > .profile-actions,
#profileModal .pv-poster > .profile-actions,
#profileModal .pv-left > #profileMessage,
#profileModal .pv-center > #profileMessage,
#profileModal .pv-poster > #profileMessage {
    position: relative;
    z-index: 1;
}

#profileModal .pv-left > h2,
#profileModal .pv-center > h2,
#profileModal .pv-poster > h2 {
    display: none;
}

#profileModal .pv-left #profileAvatar,
#profileModal .pv-center #profileAvatar,
#profileModal .pv-poster #profileAvatar {
    border: 4px solid var(--pv-ring) !important;
}

/* Данные — отдельной карточкой */
#profileModal .pv-left .profile-info,
#profileModal .pv-center .profile-info,
#profileModal .pv-poster .profile-info {
    border-top: 0;
    border-radius: 18px;
    padding: 2px 14px;
    background: rgba(127, 127, 127, 0.08);
}

#profileModal .pv-left .profile-info-row:last-child,
#profileModal .pv-center .profile-info-row:last-child,
#profileModal .pv-poster .profile-info-row:last-child {
    border-bottom: 0;
}

/* ---------- Обложка слева (аватар на границе слева, имя над линией) ---------- */
#profileModal .pv-left .profile-header {
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
    margin-top: 44px;
    margin-bottom: 22px;
}

#profileModal .pv-left .profile-avatar-wrapper,
#profileModal .pv-left #profileAvatar {
    width: 96px;
    height: 96px;
    margin: 0;
    flex-shrink: 0;
}

#profileModal .pv-left .profile-header-info,
#profileModal .pv-poster .profile-header-info {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    align-items: flex-start;
}

#profileModal .pv-left .profile-header-info {
    padding-top: 10px;
}

#profileModal .pv-left .profile-display-name-row,
#profileModal .pv-poster .profile-display-name-row {
    order: 1;
    justify-content: flex-start;
}

#profileModal .pv-left .profile-username-row,
#profileModal .pv-poster .profile-username-row {
    order: 2;
    justify-content: flex-start;
    margin: 2px 0 0 -8px;
}

#profileModal .pv-left #profileDisplayName,
#profileModal .pv-poster #profileDisplayName {
    margin-left: 0 !important;
    max-width: 100%;
    text-align: left;
    font-size: 23px;
    line-height: 30px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

#profileModal .pv-left #editProfileNameButton,
#profileModal .pv-poster #editProfileNameButton {
    margin-bottom: 0;
}

/* ---------- Обложка по центру (аватар на границе, «Закрыть» внутри карточки) ---------- */
#profileModal .pv-center .profile-header {
    margin-top: 47px;
    margin-bottom: 18px;
}

#profileModal .pv-center .profile-display-name-row { order: 1; }
#profileModal .pv-center .profile-username-row { order: 2; margin: 2px 0 0; }

#profileModal .pv-center .profile-info {
    border-radius: 18px 18px 0 0;
}

#profileModal .pv-center > #profileMessage,
#profileModal .pv-center > .profile-actions {
    margin: 0;
    background: rgba(127, 127, 127, 0.08);
}

#profileModal .pv-center > #profileMessage {
    min-height: 6px;
    padding: 0 14px;
}

#profileModal .pv-center > .profile-actions {
    border-radius: 0 0 18px 18px;
    padding: 0 0 16px;
}

#profileModal .pv-center #backButton,
#profileModal .pv-center #profileWriteButton {
    margin-top: 8px;
}

/* ---------- Постер (обложка во всю ширину, имя поверх нижнего края) ---------- */
#profileModal .pv-poster .profile-header {
    flex-direction: row;
    align-items: flex-end;
    gap: 12px;
    margin-top: 118px;
    margin-bottom: 20px;
}

#profileModal .pv-poster .profile-avatar-wrapper,
#profileModal .pv-poster #profileAvatar {
    width: 76px;
    height: 76px;
    margin: 0;
    flex-shrink: 0;
}

#profileModal .pv-poster #profileDisplayName {
    font-size: 26px;
}

#profileModal .pv-poster #profileAvatar {
    font-size: 30px;
}

/* =========================================================
   ОКНО «ИНТЕРФЕЙС»: ВКЛАДКИ «ТЕМЫ» / «ВНЕШНИЙ ВИД»
   ========================================================= */
.interface-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    margin: -8px 0 14px;
    border-radius: 16px;
    background: rgba(127, 127, 127, 0.1);
    flex-shrink: 0;
}

#interfaceModal .interface-tab {
    height: 34px;
    min-height: 0;
    margin: 0 !important;
    padding: 0 10px;
    border-radius: 12px !important;
    font-size: 14px;
    opacity: 0.6;
}

#interfaceModal .interface-tab:not(.is-active) {
    color: inherit !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

#interfaceModal .interface-tab.is-active {
    opacity: 1;
    font-weight: 600;
}

.interface-pane {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.interface-pane[hidden] {
    display: none !important;
}

/* ---------- «Внешний вид» ---------- */
.interface-look-pane {
    overflow-y: auto;
    margin: 0 -6px;
    padding: 0 6px 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(138, 143, 152, 0.45) transparent;
}

.look-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.look-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.look-head b {
    font-size: 16px;
}

.look-head span,
.look-note {
    font-size: 12px;
    opacity: 0.6;
}

.look-note {
    margin: 0 !important;
}

.look-label {
    font-size: 13px;
    font-weight: 600;
    opacity: 0.8;
    margin-bottom: -4px;
}

/* Живое превью: маленькое окно профиля */
.look-preview {
    display: flex;
    justify-content: center;
    padding: 4px 0;
}

.lp {
    position: relative;
    width: 230px;
    height: 205px;
    overflow: hidden;
    border-radius: 26px;
    background: #111111;
    border: 1px solid rgba(127, 127, 127, 0.3);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
    color: #ffffff;
}

.lp-cover {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 66px;
    background: linear-gradient(135deg, #2e3b47, #1a1f26);
}

.lp-title {
    text-align: center;
    font-weight: 700;
    font-size: 12px;
    padding-top: 12px;
}

.lp-header {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 14px 0;
}

.lp-ava {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #242424;
    border: 3px solid #111111;
    font-size: 20px;
    font-weight: 700;
    flex-shrink: 0;
}

.lp-ava img,
.lp-ava .avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lp-names {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

.lp-name {
    font-size: 14px;
    font-weight: 700;
    max-width: 150px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.lp-user {
    font-size: 10px;
    opacity: 0.6;
}

.lp-card {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
}

.lp-card i {
    display: block;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.16);
}

.lp-card i:nth-child(2) { width: 70%; }
.lp-card i:nth-child(3) { width: 85%; }

.lp-left .lp-cover,
.lp-center .lp-cover,
.lp-poster .lp-cover {
    display: block;
}

.lp-left .lp-title,
.lp-center .lp-title,
.lp-poster .lp-title {
    display: none;
}

.lp-left .lp-header {
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    padding-top: 40px;
}

.lp-left .lp-names,
.lp-poster .lp-names {
    align-items: flex-start;
    padding-top: 6px;
}

.lp-left .lp-name,
.lp-poster .lp-name {
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

.lp-center .lp-header {
    padding-top: 40px;
}

.lp-poster .lp-cover {
    height: 120px;
}

.lp-poster .lp-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 35%, #111111);
}

.lp-poster .lp-header {
    flex-direction: row;
    align-items: flex-end;
    gap: 8px;
    padding-top: 66px;
}

.lp-poster .lp-ava {
    width: 40px;
    height: 40px;
    font-size: 15px;
}

/* Выбор вида: схемы */
.look-layouts {
    display: grid;
    /* Сколько влезает по ширине: на ПК все в ряд, на телефоне — по три */
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
}

#interfaceModal .look-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    min-height: 0;
    height: auto;
    margin: 0 !important;
    padding: 6px 6px 7px !important;
    border-radius: 14px !important;
    border: 2px solid transparent !important;
    background: rgba(127, 127, 127, 0.1) !important;
    box-shadow: none !important;
    color: inherit !important;
    font-size: 11px;
    font-weight: 500;
    text-align: center;
}

#interfaceModal .look-layout.is-on {
    border-color: #6fdc8b !important;
}

#interfaceModal .look-layout.is-on .look-layout-name::before {
    content: "\2713  ";
    color: #6fdc8b;
}

.look-thumb {
    position: relative;
    display: block;
    height: 62px;
    border-radius: 8px;
    overflow: hidden;
    background: #0f1011;
}

.look-thumb i {
    position: absolute;
    display: block;
}

.lt-cover {
    left: 0;
    right: 0;
    top: 0;
    height: 28px;
    background: linear-gradient(135deg, #4b6a8a, #2a3b4d);
}

.lt-cover.lt-tall {
    height: 42px;
    background: linear-gradient(to bottom, #4b6a8a, #0f1011);
}

.lt-ava {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #4a4a4a;
    border: 2px solid #0f1011;
}

.lt-ava.lt-small {
    width: 16px;
    height: 16px;
}

.lt-line {
    height: 3px;
    border-radius: 2px;
    background: #4a4a4a;
}

.lt-line.lt-strong {
    background: #d6d9dc;
}

.lt-card {
    left: 6px;
    right: 6px;
    bottom: 6px;
    height: 16px;
    border-radius: 4px;
    background: #222326;
}

/* Обложка */
.look-cover-tabs {
    display: inline-flex;
    gap: 6px;
}

#interfaceModal .look-cover-tab,
#interfaceModal .look-remove,
#interfaceModal .look-open,
#interfaceModal .look-upload {
    height: 32px;
    min-height: 0;
    margin: 0 !important;
    padding: 0 14px;
    font-size: 13px;
}

#interfaceModal .look-cover-tab {
    opacity: 0.6;
}

#interfaceModal .look-cover-tab.is-active {
    opacity: 1;
    font-weight: 600;
    box-shadow: inset 0 0 0 1.5px currentColor !important;
}

.look-gradient[hidden],
.look-image[hidden] {
    display: none !important;
}

.look-grads {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

#interfaceModal .look-grad {
    aspect-ratio: 1.6;
    height: auto;
    min-height: 0;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 10px !important;
    border: 2px solid transparent !important;
    background: var(--g) !important;
    box-shadow: none !important;
    cursor: pointer;
}

#interfaceModal .look-grad.is-on {
    border-color: #ffffff !important;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.55) !important;
}

.look-custom {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.look-custom-label {
    font-size: 13px;
    opacity: 0.8;
    margin-right: 2px;
}

/* Выбор цвета — кружок с текущим цветом, сам input прозрачный поверх */
.look-color {
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--c, #888888);
    border: 2px solid rgba(255, 255, 255, 0.35);
    cursor: pointer;
    flex-shrink: 0;
}

#interfaceModal .look-color-input {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0;
    cursor: pointer;
}

#interfaceModal .look-swap {
    width: 30px;
    height: 30px;
    min-height: 0;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 15px;
    line-height: 1;
}

#interfaceModal .look-angle {
    accent-color: #6fdc8b;
    flex: 1 1 90px;
    min-width: 70px;
    width: auto !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer;
}

.look-angle-value {
    min-width: 36px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
    text-align: right;
}

.look-image {
    display: flex;
    gap: 12px;
    align-items: center;
}

.look-image-preview {
    width: 150px;
    height: 72px;
    flex-shrink: 0;
    border-radius: 12px;
    border: 1px solid rgba(127, 127, 127, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.look-image-preview.is-empty {
    border-style: dashed;
    opacity: 0.55;
}

.look-image-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}

.look-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 4px;
}

.look-status {
    flex: 1 1 auto;
    font-size: 12px;
    opacity: 0.75;
}

.look-status.is-error {
    color: #ff6b6b;
    opacity: 1;
}

#interfaceModal .look-remove:disabled {
    opacity: 0.4;
    cursor: default;
}

/* Классический вид — обложки нет: настройки обложки приглушены */
.look-classic-note {
    display: none;
}

.look-block.is-classic .look-classic-note {
    display: block;
}

.look-block.is-classic .look-cover-tabs,
.look-block.is-classic .look-gradient,
.look-block.is-classic .look-image,
.look-block.is-classic .look-remove {
    opacity: 0.45;
}

@media (max-width: 600px) {
    .look-layouts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .look-grads {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .look-image {
        flex-direction: column;
        align-items: stretch;
    }

    .look-image-preview {
        width: 100%;
    }
}

/* =========================================================
   «ИЗУЧИТЬ» В ЖУРНАЛЕ ОБНОВЛЕНИЙ (update-explore.js)
   ========================================================= */
/* Кнопка в тексте — зелёная со свечением во всех темах, изученная — серая.
   !important — темы (Win95, XP…) красят все кнопки окна по-своему */
#updatesList .update-explore,
#mobileUpdatesList .update-explore {
    --ex-green: #4fd18b;
    --ex-green-rgb: 79, 209, 139;
    --ex-grey: #8b92a5;
    --ex-grey-rgb: 139, 146, 165;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 6px 0 2px;
    padding: 4px 13px 4px 11px;
    width: auto;
    min-height: 0;
    border: 1px solid rgba(var(--ex-green-rgb), 0.5) !important;
    border-radius: 999px !important;
    background: rgba(var(--ex-green-rgb), 0.13) !important;
    color: var(--ex-green) !important;
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    text-shadow: none !important;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(var(--ex-green-rgb), 0.3) !important;
    animation: explore-glow 2.4s ease-in-out infinite;
    transition: background 0.15s, transform 0.15s;
}

/* Светлая карточка (класс ставит update-explore.js) — зелёный потемнее */
#updatesList .explore-on-light .update-explore,
#mobileUpdatesList .explore-on-light .update-explore {
    --ex-green: #128a4c;
    --ex-green-rgb: 18, 138, 76;
    --ex-grey: #7a8090;
    --ex-grey-rgb: 122, 128, 144;
}

@keyframes explore-glow {
    0%, 100% { box-shadow: 0 0 6px rgba(var(--ex-green-rgb), 0.22); }
    50%      { box-shadow: 0 0 16px rgba(var(--ex-green-rgb), 0.5); }
}

#updatesList .update-explore::after,
#mobileUpdatesList .update-explore::after {
    content: "→";
}

#updatesList .update-explore:hover,
#mobileUpdatesList .update-explore:hover {
    background: rgba(var(--ex-green-rgb), 0.24) !important;
}

#updatesList .update-explore:active,
#mobileUpdatesList .update-explore:active {
    transform: scale(0.97);
}

#updatesList .update-explore.is-done,
#mobileUpdatesList .update-explore.is-done {
    border-color: rgba(var(--ex-grey-rgb), 0.45) !important;
    background: transparent !important;
    color: var(--ex-grey) !important;
    box-shadow: none !important;
    animation: none;
}

#updatesList .update-explore.is-done::before,
#mobileUpdatesList .update-explore.is-done::before {
    content: "✓";
}

#updatesList .update-explore.is-done::after,
#mobileUpdatesList .update-explore.is-done::after {
    content: none;
}

/* Несколько кнопок в одной строке — с промежутком */
#updatesList .update-explore + .update-explore,
#mobileUpdatesList .update-explore + .update-explore {
    margin-left: 4px;
}

@media (prefers-reduced-motion: reduce) {
    #updatesList .update-explore,
    #mobileUpdatesList .update-explore { animation: none; }
}

.update-explore-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(127, 127, 127, 0.25);
    font-size: 12.5px;
}

.update-explore-progress {
    opacity: 0.7;
    margin-right: auto;
}

#updatesList .update-explore-tour,
#mobileUpdatesList .update-explore-tour {
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 5px 12px;
    border: 0;
    border-radius: 9px;
    background: rgba(127, 127, 127, 0.2);
    color: inherit;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none;
}

/* Рамка вокруг новинки: всё остальное затемнено, нажатия проходят насквозь */
.explore-spot {
    position: fixed;
    z-index: 20000;
    border-radius: 14px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
    pointer-events: none;
    transition: top 0.2s, left 0.2s, width 0.2s, height 0.2s;
}

.explore-spot::after {
    content: "";
    position: absolute;
    inset: -4px;
    border: 2px solid #fff;
    border-radius: 17px;
    animation: explore-ring 1.4s ease-out infinite;
}

.explore-spot.is-empty {
    transition: none;
}

.explore-spot.is-empty::after {
    content: none;
}

@keyframes explore-ring {
    from { opacity: 0.95; transform: scale(1); }
    to   { opacity: 0;    transform: scale(1.06); }
}

.explore-tip {
    position: fixed;
    z-index: 20001;
    width: min(340px, calc(100vw - 24px));
    padding: 14px 14px 12px;
    border-radius: 14px;
    background: #fdfdfd;
    color: #15171d;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4);
    font-size: 13.5px;
    line-height: 1.45;
    text-align: left;
}

.explore-tip-title {
    display: block;
    margin-bottom: 3px;
    font-size: 15px;
}

.explore-tip-text {
    margin: 0 0 10px;
    color: #3b4050;
}

.explore-tip-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.explore-tip-step {
    margin-right: auto;
    color: #7a8090;
    font-size: 12px;
}

.explore-tip .explore-tip-row button {
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 7px 13px;
    border: 0;
    border-radius: 9px;
    background: #eceef3;
    color: #15171d;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.explore-tip .explore-tip-row button.is-main {
    background: #15171d;
    color: #fff;
}

/* Плашка возврата */
button.explore-back {
    position: fixed;
    z-index: 20002;
    left: 50%;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 10px 18px;
    border: 0;
    border-radius: 999px;
    background: #15171d;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
    cursor: pointer;
}

/* Пример: аудио */
.explore-demo-audio {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding: 9px 11px;
    border-radius: 12px;
    background: #eef1f6;
}

.explore-tip .explore-demo-play {
    position: relative;
    flex: none;
    width: 36px;
    height: 36px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #15171d;
    cursor: pointer;
}

.explore-demo-play::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 11px;
    border-style: solid;
    border-width: 7px 0 7px 11px;
    border-color: transparent transparent transparent #fff;
}

.explore-demo-play.is-playing::before {
    left: 12px;
    top: 11px;
    width: 4px;
    height: 14px;
    border: 0;
    border-left: 4px solid #fff;
    border-right: 4px solid #fff;
    box-sizing: content-box;
}

.explore-demo-meta {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
}

.explore-demo-meta b {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.explore-demo-bar {
    height: 4px;
    margin: 5px 0 3px;
    border-radius: 4px;
    background: #cfd5e0;
    overflow: hidden;
}

.explore-demo-bar span {
    display: block;
    width: 0;
    height: 100%;
    background: #15171d;
}

.explore-demo-time {
    color: #7a8090;
    font-size: 11px;
}

.explore-demo-icon {
    flex: none;
    width: 20px;
    height: 20px;
    color: #3b4050;
}

/* Пример: даты */
.explore-demo-chat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 10px;
    padding: 30px 10px 10px;
    border-radius: 12px;
    background: #eef1f6;
    font-size: 12.5px;
}

.explore-demo-day {
    align-self: center;
    padding: 2px 10px;
    border-radius: 99px;
    background: rgba(21, 23, 29, 0.12);
    color: #3b4050;
    font-size: 11px;
    font-weight: 600;
}

.explore-demo-float {
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 10px;
    border-radius: 99px;
    background: #15171d;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    animation: explore-float 3s ease-in-out infinite;
}

@keyframes explore-float {
    0%, 15%   { opacity: 0; transform: translate(-50%, -4px); }
    30%, 80%  { opacity: 1; transform: translate(-50%, 0); }
    100%      { opacity: 0; transform: translate(-50%, -4px); }
}

.explore-demo-msg {
    align-self: flex-start;
    max-width: 80%;
    padding: 6px 10px;
    border-radius: 12px 12px 12px 4px;
    background: #fff;
}

.explore-demo-msg.is-mine {
    align-self: flex-end;
    border-radius: 12px 12px 4px 12px;
    background: #15171d;
    color: #fff;
}

/* Точка «новое» на пунктах меню */
.explore-new-rel {
    position: relative;
}

.explore-new-dot::after {
    content: "";
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #3d8bff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
    pointer-events: none;
}

/* Список мест у владельца */
.update-explore-picker {
    display: block;
    width: 100%;
    margin: 8px 0 4px;
    padding: 8px 10px;
    border: 1px solid rgba(127, 127, 127, 0.4);
    border-radius: 10px;
    background: rgba(127, 127, 127, 0.12);
    color: inherit;
    font: inherit;
    font-size: 13.5px;
    cursor: pointer;
}

/* Раскрытый список — системный, всегда читаемый */
.update-explore-picker option {
    background: #fff;
    color: #111;
}

@media (prefers-reduced-motion: reduce) {
    .explore-spot { transition: none; }
    .explore-spot::after,
    .explore-demo-float { animation: none; }
}

/* Примеры в подсказке «Изучить» (update-explore.js) */
.explore-demo-chat.is-plain {
    padding-top: 10px;
}

.explore-demo-steps {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.explore-demo-steps figure {
    flex: 0 0 72%;
    margin: 0;
    scroll-snap-align: start;
}

.explore-demo-steps img {
    display: block;
    width: 100%;
    border-radius: 10px;
    border: 1px solid #dde1e8;
}

.explore-demo-steps figcaption {
    margin-top: 4px;
    color: #7a8090;
    font-size: 11px;
    text-align: center;
}

.explore-demo-pin {
    display: flex;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 10px;
    background: #fff;
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
}

.explore-demo-pin span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.explore-demo-react {
    align-self: flex-start;
    padding: 5px 10px;
    border-radius: 99px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    font-size: 16px;
    letter-spacing: 3px;
}

.explore-demo-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 0 7px;
    border-radius: 99px;
    background: #e3e7ee;
    font-size: 11px;
}

.explore-demo-head,
.explore-demo-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 8px;
    border-radius: 10px;
    background: #fff;
}

.explore-demo-head i,
.explore-demo-row i {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff9a6b, #e0457b);
}

.explore-demo-head i.is-alt,
.explore-demo-row i.is-alt {
    background: linear-gradient(135deg, #6bc6ff, #4757e0);
}

.explore-demo-head div,
.explore-demo-row div {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    font-size: 12.5px;
}

.explore-demo-head small,
.explore-demo-row small {
    color: #7a8090;
    font-size: 11.5px;
}

.explore-demo-row time {
    align-self: flex-start;
    color: #7a8090;
    font-size: 11px;
}

.explore-demo-typing {
    color: #1f9a5c !important;
}

.explore-demo-typing span {
    animation: explore-typing 1.2s steps(4) infinite;
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    width: 1em;
}

@keyframes explore-typing {
    from { width: 0; }
    to   { width: 1em; }
}

.explore-demo-swipe {
    position: relative;
    display: flex;
    border-radius: 10px;
    overflow: hidden;
}

.explore-demo-swipe .explore-demo-row {
    flex: 1;
    min-width: 0;
    border-radius: 0;
    animation: explore-swipe 3.2s ease-in-out infinite;
}

.explore-demo-actions {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    z-index: -1;
}

.explore-demo-swipe {
    isolation: isolate;
}

.explore-demo-actions span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    background: #4757e0;
    font-size: 15px;
}

.explore-demo-actions span:nth-child(2) {
    background: #f0a020;
}

.explore-demo-actions span.is-danger {
    background: #e04545;
}

@keyframes explore-swipe {
    0%, 20%   { transform: translateX(0); }
    40%, 75%  { transform: translateX(-120px); }
    95%, 100% { transform: translateX(0); }
}

.explore-demo-big {
    align-self: flex-start;
    font-size: 40px;
    line-height: 1.1;
}

.explore-demo-heart {
    position: relative;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.explore-demo-heart.is-liked::after {
    content: "❤️";
    position: absolute;
    left: -10px;
    bottom: -8px;
    font-size: 16px;
    animation: explore-pop 0.3s ease-out;
}

@keyframes explore-pop {
    from { transform: scale(0.3); }
    70%  { transform: scale(1.3); }
    to   { transform: scale(1); }
}

.explore-demo-selbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 10px;
    background: #15171d;
    color: #fff;
    font-size: 12px;
}

.explore-demo-selbar b {
    margin-right: auto;
}

.explore-demo-msg.is-checked {
    position: relative;
    margin-left: 26px;
    outline: 2px solid #1f9a5c;
}

.explore-demo-msg.is-checked::before {
    content: "✓";
    position: absolute;
    left: -26px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #1f9a5c;
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
}

.explore-demo-player {
    margin-bottom: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #eef1f6;
    font-size: 12.5px;
}

.explore-demo-player-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.explore-demo-player-top small {
    color: #7a8090;
    font-size: 11px;
}

.explore-demo-player-btns {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
}

.explore-demo-player-btns .is-main {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #15171d;
    color: #fff;
    line-height: 30px;
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .explore-demo-typing span,
    .explore-demo-swipe .explore-demo-row { animation: none; }
}

/* =========================================================
   КАЛЕНДАРЬ ПЕРЕПИСКИ (chat-calendar.js)
   ========================================================= */
/* Даты в переписке нажимаются — открывают календарь */
#messagesList .date-divider,
#mobileMessagesList .mobile-date-divider {
    pointer-events: auto;
    cursor: pointer;
}

.date-divider.floating-date.visible,
.mobile-date-divider.floating-date.visible {
    pointer-events: auto;
    cursor: pointer;
}

/* После перехода: плашка дня и первое сообщение подсвечиваются */
.date-divider.cal-flash,
.mobile-date-divider.cal-flash {
    animation: cal-flash 1.6s ease;
}

@keyframes cal-flash {
    0%, 55% { box-shadow: 0 0 0 3px #4fd18b, 0 0 18px rgba(79, 209, 139, 0.6); }
    100%    { box-shadow: 0 0 0 0 rgba(79, 209, 139, 0); }
}

.cal-hl {
    animation: cal-hl 1.5s ease;
    border-radius: 16px;
}

@keyframes cal-hl {
    0%, 50% { background-color: rgba(79, 209, 139, 0.2); box-shadow: 0 0 0 2px rgba(79, 209, 139, 0.7); }
    100%    { background-color: transparent; box-shadow: 0 0 0 0 rgba(79, 209, 139, 0); }
}

/* Общие цвета: --cal-bg / --cal-fg / --cal-accent ставит скрипт по теме */
.cal-sheet,
.cal-pop {
    --cal-bg: #171a21;
    --cal-fg: #eceef3;
    --cal-accent: #4fd18b;
    --cal-bg-image: none;
    --cal-cell: color-mix(in srgb, var(--cal-fg) 9%, transparent);
    --cal-muted: color-mix(in srgb, var(--cal-fg) 58%, transparent);
    --cal-dim: color-mix(in srgb, var(--cal-fg) 28%, transparent);
    --cal-line: color-mix(in srgb, var(--cal-fg) 14%, transparent);
    position: fixed;
    z-index: 12001;
    box-sizing: border-box;
    background-color: var(--cal-bg);
    background-image: var(--cal-bg-image);
    color: var(--cal-fg);
    font-size: 14px;
    line-height: 1.35;
    text-align: left;
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    backdrop-filter: blur(22px) saturate(140%);
}

.cal-sheet[hidden],
.cal-pop[hidden],
.cal-backdrop[hidden] {
    display: none !important;
}

.cal-sheet button,
.cal-pop button {
    width: auto;
    min-height: 0;
    margin: 0;
    font: inherit;
    box-shadow: none;
    text-shadow: none;
}

.cal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 12000;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.cal-backdrop.open {
    opacity: 1;
}

/* ---------- телефон: шторка снизу ---------- */
.cal-sheet {
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 86vh;
    overflow-y: auto;
    padding: 6px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    border-radius: 26px 26px 0 0;
    border-top: 1px solid var(--cal-line);
    box-shadow: 0 -14px 34px rgba(0, 0, 0, 0.45);
    transform: translateY(105%);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    touch-action: pan-y;
    overscroll-behavior: contain;
}

.cal-sheet.open {
    transform: none;
}

.cal-grab {
    width: 42px;
    height: 5px;
    margin: 4px auto 10px;
    border-radius: 5px;
    background: var(--cal-dim);
}

.cal-chips {
    display: flex;
    gap: 6px;
    margin: 0 -14px 10px;
    padding: 0 14px 2px;
    overflow-x: auto;
    scrollbar-width: none;
}

.cal-chips::-webkit-scrollbar {
    display: none;
}

.cal-sheet .cal-chip {
    flex: none;
    padding: 6px 13px !important;
    border: 1px solid var(--cal-line) !important;
    border-radius: 99px !important;
    background: transparent !important;
    color: var(--cal-muted) !important;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.cal-sheet .cal-chip.is-on {
    background: var(--cal-fg) !important;
    border-color: var(--cal-fg) !important;
    color: var(--cal-bg) !important;
}

.cal-sheet .cal-chip:disabled {
    opacity: 0.35;
    cursor: default;
}

.cal-month-title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin: 2px 2px 10px;
}

.cal-month-title b {
    font-size: 18px;
}

.cal-month-title small {
    color: var(--cal-muted);
    font-size: 12.5px;
}

.cal-wd,
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.cal-wd span {
    padding-bottom: 6px;
    color: var(--cal-muted);
    font-size: 11px;
    text-align: center;
}

.cal-grid {
    gap: 6px;
}

/* Плитка дня: число вверху слева, сколько сообщений — внизу справа */
.cal-sheet .cal-day {
    position: relative;
    aspect-ratio: 1;
    display: block;
    padding: 0 !important;
    border: none !important;
    border-radius: 12px !important;
    background-color: var(--cal-cell) !important;
    background-size: cover !important;
    background-position: center !important;
    color: var(--cal-fg) !important;
    overflow: hidden;
    cursor: pointer;
}

.cal-sheet .cal-day .cal-num {
    position: absolute;
    top: 5px;
    left: 7px;
    z-index: 1;
    font-size: 13.5px;
    font-weight: 700;
}

.cal-sheet .cal-day .cal-count {
    position: absolute;
    right: 5px;
    bottom: 4px;
    z-index: 1;
    color: var(--cal-muted);
    font-size: 9.5px;
    font-weight: 600;
}

.cal-sheet .cal-day.has-photo {
    color: #fff !important;
}

.cal-sheet .cal-day.has-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), transparent 50%, rgba(0, 0, 0, 0.35));
}

.cal-sheet .cal-day.has-photo .cal-num,
.cal-sheet .cal-day.has-photo .cal-count {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.cal-sheet .cal-day.is-empty,
.cal-sheet .cal-day.is-future {
    background-color: transparent !important;
    cursor: default;
}

.cal-sheet .cal-day.is-empty {
    color: var(--cal-dim) !important;
}

.cal-sheet .cal-day.is-future {
    color: color-mix(in srgb, var(--cal-fg) 14%, transparent) !important;
}

.cal-sheet .cal-day.is-today {
    box-shadow: inset 0 0 0 2px var(--cal-accent) !important;
}

.cal-sheet .cal-day.is-selected {
    box-shadow: 0 0 0 2px var(--cal-fg) !important;
}

.cal-sheet .cal-day:not(:disabled):active {
    transform: scale(0.94);
}

/* Превью выбранного дня */
.cal-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 62px;
    margin-top: 12px;
    padding: 9px 10px;
    border-radius: 18px;
    background: var(--cal-cell);
}

.cal-preview-photo {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--cal-cell) center / cover no-repeat;
}

.cal-preview-photo.is-empty {
    background: var(--cal-line);
}

.cal-preview-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cal-preview-text b {
    font-size: 14px;
}

.cal-preview-text small {
    overflow: hidden;
    color: var(--cal-muted);
    font-size: 12.5px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cal-sheet .cal-go {
    flex: none;
    padding: 10px 15px !important;
    border: none !important;
    border-radius: 13px !important;
    background: var(--cal-accent) !important;
    color: #062114 !important;
    font-weight: 800;
    cursor: pointer;
}

.cal-quick {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.cal-sheet .cal-btn,
.cal-pop .cal-btn {
    flex: 1;
    padding: 10px 8px !important;
    border: 1px solid var(--cal-line) !important;
    border-radius: 13px !important;
    background: transparent !important;
    color: var(--cal-fg) !important;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.cal-error {
    margin: 20px 0;
    color: var(--cal-muted);
    text-align: center;
}

.cal-sheet.is-loading .cal-body,
.cal-pop.is-loading .cal-body {
    min-height: 260px;
    border-radius: 14px;
    background: linear-gradient(90deg, var(--cal-cell), var(--cal-line), var(--cal-cell));
    background-size: 200% 100%;
    animation: cal-loading 1.1s linear infinite;
}

@keyframes cal-loading {
    from { background-position: 100% 0; }
    to   { background-position: -100% 0; }
}

/* ---------- ПК: окошко под плашкой даты ---------- */
.cal-pop {
    width: 300px;
    padding: 12px 12px 12px;
    border: 1px solid var(--cal-line);
    border-radius: 20px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top center;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.cal-pop.open {
    opacity: 1;
    transform: none;
}

.cal-pop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.cal-pop-title {
    font-size: 15px;
}

.cal-pop .cal-arrow {
    width: 32px;
    height: 32px;
    padding: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    background: var(--cal-cell) !important;
    color: var(--cal-fg) !important;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}

.cal-pop .cal-arrow:disabled {
    opacity: 0.3;
    cursor: default;
}

.cal-pop .cal-grid {
    gap: 4px;
}

.cal-pop .cal-day {
    position: relative;
    justify-self: center;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    background-color: transparent !important;
    background-size: cover !important;
    background-position: center !important;
    color: var(--cal-fg) !important;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.cal-pop .cal-day:not(:disabled):not(.has-photo):hover {
    background-color: var(--cal-cell) !important;
}

.cal-pop .cal-day.has-photo {
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.cal-pop .cal-day.has-photo:hover {
    filter: brightness(1.15);
}

.cal-pop .cal-day .cal-num {
    position: relative;
    z-index: 1;
}

.cal-pop .cal-day.has-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.25);
}

.cal-pop .cal-day.is-empty {
    color: var(--cal-dim) !important;
    font-weight: 500;
    cursor: default;
}

.cal-pop .cal-day.is-future {
    color: color-mix(in srgb, var(--cal-fg) 14%, transparent) !important;
    font-weight: 500;
    cursor: default;
}

.cal-pop .cal-day.is-today {
    box-shadow: inset 0 0 0 2px var(--cal-accent) !important;
}

.cal-pop .cal-day.is-viewing::before {
    content: "";
    position: absolute;
    inset: -3px;
    border: 2px solid var(--cal-fg);
    border-radius: 50%;
}

.cal-pop .cal-quick .cal-btn {
    padding: 8px 6px !important;
    font-size: 12px;
}

@media (prefers-reduced-motion: reduce) {
    .cal-sheet,
    .cal-pop,
    .cal-backdrop { transition: none; }
    .date-divider.cal-flash,
    .mobile-date-divider.cal-flash,
    .cal-hl { animation: none; }
}

/* =========================================================
   ВКЛАДКИ В ПРОФИЛЕ И В ОКНЕ ГРУППЫ (profile-media.js)
   ========================================================= */
/* --sh-fg / --sh-bg — цвета текста и фона окна темы (ставит скрипт) */
.has-shared {
    --sh-fg: #eeeeee;
    --sh-bg: #111111;
    --sh-cell: color-mix(in srgb, var(--sh-fg) 8%, transparent);
    --sh-line: color-mix(in srgb, var(--sh-fg) 14%, transparent);
    --sh-muted: color-mix(in srgb, var(--sh-fg) 58%, transparent);
}

.shared-hidden {
    display: none !important;
}

.shared-tabs[hidden],
.shared-panes[hidden],
.shared-pane[hidden] {
    display: none !important;
}

/* Над обложкой профиля, как остальное содержимое */
#profileModal .modal-window > .shared-tabs,
#profileModal .modal-window > .shared-panes,
#profileModal .modal-window > .shared-groups {
    position: relative;
    z-index: 1;
}

/* Капсула с вкладками (как в Telegram) */
.shared-tabs {
    margin: 14px 0 10px;
}

.shared-tabs-inner {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    background: var(--sh-cell);
    overflow-x: auto;
    scrollbar-width: none;
}

.shared-tabs-inner::-webkit-scrollbar {
    display: none;
}

.has-shared .shared-tab {
    flex: 1 0 auto;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 7px 12px !important;
    border: none !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--sh-muted) !important;
    font: inherit;
    font-size: 13px !important;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.has-shared .shared-tab.is-on {
    background: var(--sh-fg) !important;
    color: var(--sh-bg) !important;
}

/* Содержимое вкладок — своя прокрутка, окно не растёт бесконечно */
.shared-panes {
    max-height: min(48vh, 440px);
    margin-bottom: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    text-align: left;
}

.shared-pane {
    padding-bottom: 6px;
}

.shared-month {
    margin: 12px 2px 6px;
    color: var(--sh-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.shared-pane > .shared-list > .shared-month:first-child {
    margin-top: 2px;
}

.shared-empty {
    padding: 28px 10px;
    color: var(--sh-muted);
    text-align: center;
}

.shared-more {
    height: 1px;
}

.shared-pane.is-loading .shared-more {
    height: 38px;
    background: radial-gradient(circle, var(--sh-muted) 0 3px, transparent 4px) center / 14px 14px no-repeat;
    animation: shared-pulse 0.9s ease-in-out infinite;
}

@keyframes shared-pulse {
    50% { opacity: 0.3; }
}

/* Фильтры и поиск */
.shared-filters {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

.has-shared .shared-filter {
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 5px 12px !important;
    border: 1px solid var(--sh-line) !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--sh-muted) !important;
    font: inherit;
    font-size: 12.5px !important;
    font-weight: 600;
    cursor: pointer;
}

.has-shared .shared-filter.is-on {
    border-color: var(--sh-fg) !important;
    background: var(--sh-fg) !important;
    color: var(--sh-bg) !important;
}

.has-shared .shared-search {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
    margin: 0 0 8px !important;
    padding: 9px 12px !important;
    border: 1px solid var(--sh-line) !important;
    border-radius: 12px !important;
    background: var(--sh-cell) !important;
    color: var(--sh-fg) !important;
    font: inherit;
    font-size: 13.5px;
    outline: none;
}

/* Сетка медиа */
.shared-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    border-radius: 12px;
    overflow: hidden;
}

.has-shared .shared-media {
    position: relative;
    aspect-ratio: 1;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: var(--sh-cell) !important;
    box-shadow: none !important;
    overflow: hidden;
    cursor: pointer;
}

.shared-media img,
.shared-media video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.has-shared .shared-media:hover img,
.has-shared .shared-media:hover video {
    filter: brightness(1.1);
}

.shared-badge {
    position: absolute;
    left: 5px;
    top: 5px;
    padding: 1px 7px;
    border-radius: 99px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
}

/* Списки: файлы, ссылки, музыка */
.shared-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.shared-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 14px;
    background: var(--sh-cell);
    color: var(--sh-fg) !important;
    text-decoration: none !important;
    cursor: pointer;
}

.shared-row:hover {
    background: color-mix(in srgb, var(--sh-fg) 13%, transparent);
}

.shared-ic {
    flex: none;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}

.shared-tx {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.shared-tx b {
    overflow: hidden;
    font-size: 13.5px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.shared-tx small {
    overflow: hidden;
    color: var(--sh-muted);
    font-size: 11.5px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.shared-tx small.shared-url {
    color: #4ea4ff;
}

.shared-go {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--sh-muted);
    text-align: center;
}

.shared-music-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--sh-muted);
    font-size: 12.5px;
}

.has-shared .shared-play-all {
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 7px 14px !important;
    border: none !important;
    border-radius: 999px !important;
    background: #4fd18b !important;
    box-shadow: none !important;
    color: #062114 !important;
    font: inherit;
    font-size: 12.5px !important;
    font-weight: 800;
    cursor: pointer;
}

.has-shared .shared-play {
    flex: none;
    width: 38px !important;
    height: 38px;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    background: var(--sh-fg) !important;
    box-shadow: none !important;
    color: var(--sh-bg) !important;
    font-size: 12px !important;
    cursor: pointer;
}

.has-shared .shared-play.is-on {
    background: #4fd18b !important;
    color: #062114 !important;
}

/* Общие группы (вкладка «Инфа») */
.shared-groups {
    margin-top: 12px;
    text-align: left;
}

.shared-groups-title {
    margin: 0 2px 6px;
    color: var(--sh-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.has-shared .shared-group {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 0 6px !important;
    padding: 8px 10px !important;
    border: none !important;
    border-radius: 14px !important;
    background: var(--sh-cell) !important;
    box-shadow: none !important;
    color: var(--sh-fg) !important;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.shared-group-avatar {
    flex: none;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-weight: 800;
}

.shared-group-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.shared-group-text small {
    color: var(--sh-muted);
    font-size: 11.5px;
}

.shared-group-go {
    color: var(--sh-muted);
    font-size: 18px;
}

/* Меню по долгому нажатию */
.shared-menu {
    position: fixed;
    z-index: 13000;
    width: 210px;
    padding: 6px;
    border-radius: 14px;
    background: #fdfdfd;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4);
}

.shared-menu[hidden] {
    display: none;
}

.shared-menu button {
    display: block;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border: none !important;
    border-radius: 9px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #15171d !important;
    font: inherit;
    font-size: 14px !important;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.shared-menu button:hover {
    background: #eceef3 !important;
}

/* Просмотр видео */
.shared-video-viewer {
    position: fixed;
    inset: 0;
    z-index: 4500;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.92);
}

.shared-video-viewer.open {
    display: flex;
}

.shared-video-viewer video {
    max-width: 100%;
    max-height: 100%;
    border-radius: 12px;
    background: #000;
}

.shared-video-viewer .shared-video-close {
    position: absolute;
    top: calc(14px + env(safe-area-inset-top, 0px));
    right: 14px;
    width: 42px;
    height: 42px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    .shared-pane.is-loading .shared-more { animation: none; }
}

/* Вид «Обложка по центру»: с вкладками карточка — только «Инфа», кнопки отдельно */
#profileModal .pv-center.has-shared .profile-info {
    border-radius: 18px;
}

#profileModal .pv-center.has-shared > #profileMessage,
#profileModal .pv-center.has-shared > .profile-actions {
    background: transparent;
}

#profileModal .pv-center.has-shared > .profile-actions {
    padding: 4px 0 0;
}

/* Узкий телефон: все пять вкладок помещаются без прокрутки */
@media (max-width: 440px) {
    .has-shared .shared-tab {
        flex: 1 1 auto;
        padding: 7px 6px !important;
        font-size: 12px !important;
    }
}

/* Закрытая панель аудио в потоке (над списком чатов) не должна занимать места:
   при max-height: 0 оставалась рамка 1+1 px и сдвигала всё ниже на 2 px */
.audio-player-bar:not(.open):not(.in-chat) {
    border-width: 0 !important;
}

/* =========================================================
   АВАТАР ГРУППЫ (app.js groupAvatarHtml, group-avatar.js)
   ========================================================= */
/* Буква или эмодзи заполняют круг аватара любого размера */
.group-av {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    color: #ffffff;
    font-weight: 700;
    line-height: 1;
    container-type: size;
    overflow: hidden;
}

.group-av > span {
    font-size: 42cqmin;
}

/* Общие правила списков (.chat span — серый текст с отступом 5px для превью)
   не должны задевать круг и букву: иначе круг съезжает, а буква сереет */
.group-av,
.group-av > span {
    margin: 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
    text-transform: none;
}

.group-av > span {
    line-height: 1 !important;
}

.group-av-emoji > span {
    font-size: 54cqmin;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

.shared-group-avatar {
    overflow: hidden;
}

.shared-group-avatar .avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Окно группы: создатель меняет аватар нажатием */
#groupInfoAvatar.is-editable {
    position: relative;
    cursor: pointer;
}

#groupInfoAvatar.is-editable::after {
    content: "";
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #4fd18b url("Direct/img/icons/plus.svg") center / 12px no-repeat;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
}

#groupInfoAvatar.is-editable:hover {
    filter: brightness(1.1);
}

#groupInfoAvatar.is-editable:focus-visible {
    outline: 2px solid #4fd18b;
    outline-offset: 3px;
}

/* «Новая группа»: кружок аватара слева от названия */
.group-create-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.group-create-head .group-title-input {
    flex: 1;
    min-width: 0;
}

.group-create-avatar {
    position: relative;
    flex: none;
    width: 52px !important;
    height: 52px;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer;
}

.group-create-avatar-circle {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
}

.group-create-avatar-circle .avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.group-create-avatar-plus {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #4fd18b;
    color: #062114;
    font-size: 15px;
    font-weight: 800;
    line-height: 20px;
    text-align: center;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
}

/* Окно выбора — поверх окна группы */
#groupAvatarModal {
    z-index: 1100;
}

.group-avatar-window {
    width: 400px;
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    box-sizing: border-box;
}

.group-avatar-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}

.ga-preview {
    display: flex;
    justify-content: center;
}

.ga-circle {
    display: block;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.ga-circle .avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ga-tabs {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    background: rgba(127, 127, 127, 0.15);
}

.group-avatar-body .ga-tab {
    flex: 1;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border: none !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
    opacity: 0.65;
    font: inherit;
    font-size: 13.5px !important;
    font-weight: 700;
    cursor: pointer;
}

.group-avatar-body .ga-tab.is-on {
    opacity: 1;
    background: rgba(127, 127, 127, 0.3) !important;
}

.ga-label {
    margin: 4px 2px 0;
    line-height: 1.3;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.6;
}

.ga-emojis {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 6px;
}

.group-avatar-body .ga-emoji {
    aspect-ratio: 1;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 12px !important;
    background: rgba(127, 127, 127, 0.12) !important;
    box-shadow: none !important;
    font-size: 21px !important;
    line-height: 1;
    cursor: pointer;
}

.group-avatar-body .ga-emoji.is-on {
    background: rgba(79, 209, 139, 0.22) !important;
    box-shadow: inset 0 0 0 2px #4fd18b !important;
}

.ga-grads {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.group-avatar-body .ga-grad {
    aspect-ratio: 1;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 2px solid transparent !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    cursor: pointer;
}

.group-avatar-body .ga-grad.is-on {
    border-color: #ffffff !important;
    box-shadow: 0 0 0 2px #4fd18b !important;
}

.ga-photo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
}

.ga-photo[hidden],
.ga-ready[hidden] {
    display: none !important;
}

.group-avatar-body .ga-pick {
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10px 18px !important;
    border-radius: 999px !important;
    font-weight: 700;
    cursor: pointer;
}

.ga-note {
    margin: 0;
    font-size: 12.5px;
    opacity: 0.65;
    text-align: center;
}

.ga-status {
    min-height: 1em;
    font-size: 12.5px;
    text-align: center;
    opacity: 0.8;
}

.ga-status.is-error {
    color: #ff6b6b;
    opacity: 1;
}

.ga-footer {
    display: flex;
    gap: 8px;
}

.group-avatar-body .ga-footer button {
    flex: 1;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 11px 10px !important;
    border-radius: 14px !important;
    font-weight: 700;
    cursor: pointer;
}

.group-avatar-body .ga-save {
    background: #4fd18b !important;
    border: none !important;
    color: #062114 !important;
}

.group-avatar-body .ga-save:disabled {
    opacity: 0.5;
    cursor: default;
}

.group-avatar-body .ga-remove[hidden] {
    display: none !important;
}

/* Подпись «Участники» под строкой с аватаром новой группы */
.group-create-head + .group-pick-hint {
    margin-top: 12px;
}

/* =========================================================
   СЛУЖЕБНЫЕ СТРОКИ В ПЕРЕПИСКЕ («… сменил(а) аватар группы»)
   ========================================================= */
.system-message {
    display: block;
    flex-shrink: 0;
    align-self: center;
    width: fit-content;
    max-width: 85%;
    margin: 8px auto;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(127, 127, 127, 0.18);
    color: inherit;
    font-size: 12.5px;
    line-height: 1.4;
    text-align: center;
    opacity: 0.9;
    user-select: none;
}

.chat-preview-system {
    font-style: italic;
    opacity: 0.85;
}

/* =========================================================
   АНИМАЦИЯ ФОНА (space-fx.js) — поверх Classic, Dark и Light
   Цвета блока — от цвета текста темы (currentColor), поэтому
   одинаково смотрится и в тёмной, и в светлой теме.
   ========================================================= */
.fx-host {
    isolation: isolate;
}

.fx-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
}

.fx-options {
    --fx-line: color-mix(in srgb, currentColor 16%, transparent);
    --fx-soft: color-mix(in srgb, currentColor 6%, transparent);
    --fx-accent: #7aa2ff;
    margin: 0 0 12px;
    border: 1px solid var(--fx-line);
    border-radius: 16px;
    background: var(--fx-soft);
    flex-shrink: 0;
}

.fx-summary {
    padding: 11px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fx-summary::-webkit-details-marker {
    display: none;
}

.fx-summary::before {
    content: '';
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.2s ease;
    opacity: 0.7;
}

.fx-options[open] .fx-summary::before {
    transform: rotate(45deg);
}

.fx-summary-value {
    margin-left: auto;
    font-weight: 500;
    opacity: 0.6;
}

/* Карточки и предпросмотр стоят на месте; своим ползунком прокручиваются
   только строки настроек — иначе карточки уезжали под заголовок блока */
.fx-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 14px 14px;
}

/* Слева живой предпросмотр, справа настройки; на телефоне — предпросмотр сверху */
.fx-settings {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
}

.fx-settings[hidden] {
    display: none !important;
}

.fx-rows {
    display: flex;
    flex-direction: column;
    gap: 11px;
    min-width: 0;
    max-height: clamp(120px, 22vh, 200px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 2px 8px 2px 0;
    margin-right: -6px;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, currentColor 35%, transparent) transparent;
}

.fx-rows::-webkit-scrollbar {
    width: 6px;
}

.fx-rows::-webkit-scrollbar-thumb {
    border-radius: 99px;
    background: color-mix(in srgb, currentColor 35%, transparent);
}

.fx-rows::-webkit-scrollbar-track {
    background: transparent;
}

.fx-live {
    position: relative;
    min-height: 120px;
    border-radius: 12px;
    border: 1px solid var(--fx-line);
    background: color-mix(in srgb, currentColor 5%, transparent);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
    padding: 8px;
}

.fx-live-msg {
    align-self: flex-start;
    max-width: 90%;
    padding: 5px 9px;
    border-radius: 11px;
    font-size: 11px;
    line-height: 1.3;
    background: color-mix(in srgb, currentColor 14%, transparent);
}

.fx-live-msg--mine {
    align-self: flex-end;
    background: color-mix(in srgb, var(--fx-accent) 40%, transparent);
}

@media (max-width: 480px) {
    .fx-settings {
        grid-template-columns: minmax(0, 1fr);
    }

    .fx-live {
        min-height: 130px;
    }
}

/* Окно «Интерфейс» с блоком настроек темы прокручивается целиком —
   своим ползунком; список тем больше не сжимается под блоком */
#interfaceThemesPane:has(> .interface-theme-options) {
    overflow-y: auto;
    overscroll-behavior: contain;
    margin-right: -8px;
    padding-right: 8px;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, currentColor 35%, transparent) transparent;
}

#interfaceThemesPane:has(> .interface-theme-options)::-webkit-scrollbar {
    width: 6px;
}

#interfaceThemesPane:has(> .interface-theme-options)::-webkit-scrollbar-thumb {
    border-radius: 99px;
    background: color-mix(in srgb, currentColor 35%, transparent);
}

/* И сетка, и галерея держат свою высоту — окно прокручивается до «Применить» */
#interfaceThemesPane:has(> .interface-theme-options) > .interface-cards {
    flex: 0 0 auto;
    overflow: visible;
}

/* Карточки анимаций */
/* Колонок столько, сколько карточек, — все в одну строку;
   не хватает ширины — ряд прокручивается вбок, а не переносится */
.fx-cards {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(90px, 1fr);
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding: 2px;
    margin: -2px;
}

.fx-cards::-webkit-scrollbar {
    display: none;
}

#interfaceModal .fx-cards > .fx-card {
    scroll-snap-align: start;
}

#interfaceModal .fx-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    min-height: 0;
    height: auto;
    margin: 0 !important;
    padding: 5px !important;
    border-radius: 14px !important;
    border: 2px solid var(--fx-line) !important;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
    font: inherit;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

#interfaceModal .fx-card.is-on {
    border-color: var(--fx-accent) !important;
    box-shadow: 0 0 14px color-mix(in srgb, var(--fx-accent) 35%, transparent) !important;
}

#interfaceModal .fx-card--soon {
    cursor: default;
    border-style: dashed !important;
    opacity: 0.6;
}

.fx-card-view {
    position: relative;
    display: block;
    height: 64px;
    border-radius: 9px;
    overflow: hidden;
    background: color-mix(in srgb, currentColor 8%, transparent);
}

/* «Без анимации» — перечёркнутый кружок */
.fx-card-view--none::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22px;
    height: 22px;
    margin: -13px 0 0 -13px;
    border: 2px solid currentColor;
    border-radius: 50%;
    opacity: 0.45;
    background: linear-gradient(45deg, transparent 45%, currentColor 45%, currentColor 55%, transparent 55%);
}

.fx-card-view--soon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 6px;
    font-size: 10.5px;
    line-height: 1.3;
    opacity: 0.8;
}

/* Длинное название переносится только по словам, слово не режется */
.fx-card-name {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.2px;
    overflow-wrap: normal;
    word-break: normal;
}

@media (max-width: 480px) {
    .fx-cards {
        gap: 6px;
        grid-auto-columns: minmax(88px, 1fr);
    }

    .fx-card-view--soon {
        font-size: 9.5px;
        padding: 3px 4px;
    }

    #interfaceModal .fx-card {
        padding: 5px !important;
    }

    .fx-card-name {
        font-size: 11px;
        letter-spacing: -0.2px;
    }
}

/* Строки настроек */
.fx-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.fx-label {
    font-size: 13px;
    opacity: 0.85;
}

.fx-swatches {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

#interfaceModal .fx-swatch {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
    min-width: 0;
    min-height: 0;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 2px solid var(--fx-line) !important;
    background: var(--fx-swatch) !important;
    box-shadow: none !important;
    cursor: pointer;
}

/* «Как у темы» — светлая и тёмная половинки цвета анимации (--fx-auto из space-fx.js) */
#interfaceModal .fx-swatch--auto {
    background: var(--fx-auto, linear-gradient(135deg, #a9c1ff 0 50%, #26337a 50% 100%)) !important;
}

#interfaceModal .fx-swatch--custom {
    background: conic-gradient(#ff2a3d, #ffc400, #00ff41, #00e5ff, #3d7bff, #b04dff, #ff2a3d) !important;
    overflow: hidden;
}

#interfaceModal .fx-swatch--custom::after {
    content: '';
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: var(--fx-custom, transparent);
}

#interfaceModal .fx-swatch.is-on {
    border-color: currentColor !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 18%, transparent) !important;
}

.fx-color-input {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0;
    cursor: pointer;
}

.fx-range {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 160px;
    max-width: 240px;
}

#interfaceModal .fx-range-input {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    accent-color: var(--fx-accent);
    cursor: pointer;
}

.fx-range-value {
    min-width: 42px;
    text-align: right;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: default;
    user-select: none;
}

.fx-segment {
    display: inline-flex;
    padding: 2px;
    border-radius: 99px;
    border: 1px solid var(--fx-line);
}

#interfaceModal .fx-segment-item {
    min-width: 0;
    min-height: 0;
    height: auto;
    margin: 0 !important;
    padding: 5px 12px !important;
    border: 0 !important;
    border-radius: 99px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
    opacity: 0.75;
}

#interfaceModal .fx-segment-item.is-on {
    background: var(--fx-accent) !important;
    color: #ffffff !important;
    opacity: 1;
}

.fx-hint {
    margin: 0 !important;
    font-size: 12px;
    opacity: 0.6;
}

/* =========================================================
   СОЛНЕЧНАЯ СИСТЕМА (solar-system.js)
   Свои строки настроек анимации и карточка планеты с фактами
   ========================================================= */
.fx-extra {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.fx-extra[hidden],
.fx-row[hidden] {
    display: none !important;
}

.solar-card {
    position: absolute;
    right: 18px;
    top: 50%;
    z-index: 6;
    width: min(300px, calc(100% - 36px));
    padding: 16px 18px 14px;
    border-radius: 22px;
    background: rgba(12, 12, 18, 0.72);
    border: 1px solid rgba(255, 210, 150, 0.22);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55), 0 0 30px rgba(255, 180, 90, 0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #ffffff;
    transform: translateY(-50%) translateX(16px);
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: auto;
}

.solar-card.is-open {
    opacity: 1;
    transform: translateY(-50%);
}

.solar-card-name {
    font-size: 20px;
    font-weight: 700;
    margin: 0 28px 8px 0;
    text-shadow: 0 0 18px rgba(255, 190, 110, 0.35);
}

.solar-card-facts {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13.5px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.82);
}

.solar-card-facts li::marker {
    color: #ffb547;
}

.solar-card-close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-size: 20px;
    line-height: 30px;
    cursor: pointer;
}

.solar-card-close:hover {
    background: rgba(255, 255, 255, 0.16);
}

/* На телефоне карточка — снизу, над кнопкой «Добавить контакт» */
@media (max-width: 768px) {
    .solar-card {
        left: 14px;
        right: 14px;
        top: auto;
        bottom: 92px;
        width: auto;
        transform: translateY(16px);
    }

    .solar-card.is-open {
        transform: none;
    }
}

/* =========================================================
   ВИДЕО В ПЕРЕПИСКЕ (video-player.js)
   Ячейка видео в альбоме, полоса предпросмотра, ход отправки,
   плеер на весь экран и мини-плеер. Иконки — SVG.
   ========================================================= */
.attachment-video {
    overflow: hidden;
    cursor: pointer;
    background: #0d0d10;
}

.attachment-video > img,
.attachment-video > video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

/* Короткое видео крутится поверх обложки, когда уже пошло */
.attachment-video > .att-video-loop {
    z-index: 1;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.attachment-video.is-looping > .att-video-loop {
    opacity: 1;
}

.attachment-video-play {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    width: 48px;
    height: 48px;
    margin: -24px 0 0 -24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #ffffff;
    pointer-events: none;
    transition: transform 0.15s ease, opacity 0.2s ease;
}

.attachment-video-play svg {
    width: 22px;
    height: 22px;
    margin-left: 3px;
}

.attachment-video:hover .attachment-video-play {
    transform: scale(1.08);
}

.attachment-video.is-looping .attachment-video-play {
    opacity: 0.75;
}

.attachment-video-time {
    position: absolute;
    left: 8px;
    top: 8px;
    z-index: 2;
    padding: 2px 7px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
    pointer-events: none;
}

/* Полоса предпросмотра: видео, «Сжать», ход отправки */
.attach-preview-video {
    position: relative;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 10px;
    overflow: hidden;
    background: #202024;
}

.attach-preview-video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.attach-preview-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.25);
}

.attach-preview-play svg {
    width: 18px;
    height: 18px;
}

.attach-preview-item.is-video {
    max-width: 260px;
}

.attach-preview-compress {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
    padding: 3px 10px 3px 8px;
    border: 1px solid rgba(127, 127, 127, 0.4);
    border-radius: 12px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    align-self: flex-start;
}

.attach-preview-compress:hover {
    background: rgba(127, 127, 127, 0.18);
}

.attach-upload {
    flex: 0 0 auto;
    align-self: center;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 150px;
    padding: 6px 10px;
    border-radius: 12px;
    background: rgba(127, 127, 127, 0.16);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.attach-upload-track {
    display: block;
    height: 4px;
    border-radius: 2px;
    background: rgba(127, 127, 127, 0.3);
    overflow: hidden;
}

.attach-upload-track i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 2px;
    background: #4fd18b;
    transition: width 0.2s ease;
}

.attach-upload.is-saving .attach-upload-track i {
    animation: attach-saving 1.2s ease-in-out infinite;
}

@keyframes attach-saving {
    50% { opacity: 0.4; }
}

/* ---------- Плеер на весь экран ---------- */
html.vp-open {
    overflow: hidden;
}

.vp {
    position: fixed;
    inset: 0;
    z-index: 20000;   /* поверх всех окон и плашек */
    background: rgba(0, 0, 0, calc(0.94 * var(--vp-fade, 1)));
    color: #ffffff;
    user-select: none;
    -webkit-user-select: none;
    font-family: inherit;
}

.vp[hidden],
.vp-mini[hidden] {
    display: none !important;
}

.vp-stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
    transition: transform 0.2s ease;
}

.vp-video,
.vp-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.vp-video {
    width: 100%;
    height: 100%;
    background: transparent;
}

.vp-video[hidden],
.vp-img[hidden] {
    display: none;
}

/* Увеличили фото щипком/двойным касанием — курсор показывает, что его можно таскать */
.vp-stage.vp-zoomed {
    cursor: grab;
}

.vp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    flex: 0 0 auto;
    position: relative;
    text-decoration: none;
    transition: background 0.15s ease;
}

.vp-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

.vp-btn:focus-visible {
    outline: 2px solid #b9bcc2;
    outline-offset: 1px;
}

.vp-btn svg {
    width: 24px;
    height: 24px;
}

.vp-btn[hidden] {
    display: none;
}

/* Верх, низ и стрелки появляются при движении и прячутся во время просмотра */
.vp-top,
.vp-bar,
.vp-nav {
    transition: opacity 0.25s ease;
    opacity: 0;
    pointer-events: none;
}

.vp.vp-ui .vp-top,
.vp.vp-ui .vp-bar,
.vp.vp-ui .vp-nav,
.vp.vp-paused .vp-top,
.vp.vp-paused .vp-bar,
.vp.vp-paused .vp-nav,
.vp.vp-is-image .vp-top,
.vp.vp-is-image .vp-nav {
    opacity: 1;
    pointer-events: auto;
}

.vp.vp-is-image .vp-bar {
    display: none;
}

.vp-top {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: calc(10px + env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) 24px max(14px, env(safe-area-inset-left, 0px));
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent);
}

.vp-count {
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.vp-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    opacity: 0.8;
}

.vp-nav {
    position: absolute;
    top: 50%;
    width: 50px;
    height: 50px;
    margin-top: -25px;
    background: rgba(0, 0, 0, 0.35);
}

.vp-prev { left: max(14px, env(safe-area-inset-left, 0px)); }
.vp-next { right: max(14px, env(safe-area-inset-right, 0px)); }

.vp-big-play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 76px;
    height: 76px;
    margin: -38px 0 0 -38px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.vp-big-play svg {
    width: 34px;
    height: 34px;
    margin-left: 4px;
}

.vp-spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top-color: #ffffff;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    animation: vp-spin 0.8s linear infinite;
    transition: opacity 0.2s ease 0.3s;
}

.vp-spinner.is-on {
    opacity: 1;
}

@keyframes vp-spin {
    to { transform: rotate(360deg); }
}

/* Двойное касание: −10 / +10 с */
.vp-tap {
    position: absolute;
    top: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 18px 22px;
    margin-top: -48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    font-size: 13px;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
}

.vp-tap svg {
    width: 30px;
    height: 30px;
}

.vp-tap--left { left: 12%; }
.vp-tap--right { right: 12%; }

.vp-tap.is-on {
    animation: vp-tap 0.6s ease;
}

@keyframes vp-tap {
    0% { opacity: 0; transform: scale(0.8); }
    25% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.1); }
}

.vp-resume {
    position: absolute;
    left: 50%;
    bottom: 120px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 8px 14px;
    border-radius: 18px;
    background: rgba(20, 20, 24, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: 13px;
    transform: translate(-50%, 10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    white-space: nowrap;
}

.vp-resume.is-on {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

.vp-resume-btn {
    padding: 5px 12px;
    border: none;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

/* Нижняя панель */
.vp-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 30px max(14px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72), transparent);
}

.vp-progress {
    position: relative;
    height: 18px;
    margin: 0 6px;
    cursor: pointer;
    touch-action: none;
}

.vp-progress::before,
.vp-buffered,
.vp-played {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    height: 4px;
    margin-top: -2px;
    border-radius: 2px;
}

.vp-progress::before {
    right: 0;
    background: rgba(255, 255, 255, 0.25);
}

.vp-buffered {
    background: rgba(255, 255, 255, 0.4);
}

.vp-played {
    background: #b9bcc2;
}

.vp-thumb {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
    transform: scale(0.75);
    transition: transform 0.15s ease;
}

.vp-progress:hover .vp-thumb,
.vp-progress.is-seeking .vp-thumb {
    transform: scale(1);
}

.vp-hover-time {
    position: absolute;
    bottom: 20px;
    padding: 2px 7px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.75);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    transform: translateX(-50%);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
}

.vp-progress:hover .vp-hover-time {
    opacity: 1;
}

.vp-controls {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 4px;
}

.vp-time {
    margin-left: 6px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.vp-spacer {
    flex: 1 1 auto;
}

.vp-vol {
    display: flex;
    align-items: center;
}

.vp-vol-range {
    width: 0;
    opacity: 0;
    accent-color: #b9bcc2;
    transition: width 0.2s ease, opacity 0.2s ease;
}

.vp-vol:hover .vp-vol-range,
.vp-vol:focus-within .vp-vol-range {
    width: 80px;
    opacity: 1;
}

.vp-speed-badge {
    position: absolute;
    right: -2px;
    bottom: 2px;
    padding: 0 4px;
    border-radius: 6px;
    background: #b9bcc2;
    color: #1c1e22;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.4;
}

.vp-speed-badge:empty {
    display: none;
}

.vp-menu {
    position: absolute;
    right: max(14px, env(safe-area-inset-right, 0px));
    bottom: calc(70px + env(safe-area-inset-bottom, 0px));
    width: 280px;
    max-width: calc(100vw - 28px);
    padding: 12px;
    border-radius: 18px;
    background: rgba(22, 22, 28, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.vp-menu[hidden] {
    display: none;
}

.vp-menu-title {
    margin: 0 4px 8px;
    font-size: 12px;
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.vp-menu-speeds {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 10px;
}

.vp-menu-speed {
    padding: 8px 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: transparent;
    color: #ffffff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.vp-menu-speed.is-on {
    background: #b9bcc2;
    border-color: #b9bcc2;
    color: #1c1e22;
}

.vp-menu-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 8px;
    border: none;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    font: inherit;
    font-size: 13.5px;
    text-align: left;
    cursor: pointer;
}

.vp-menu-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: 7px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    color: transparent;
}

.vp-menu-check svg {
    width: 16px;
    height: 16px;
}

.vp-menu-row.is-on .vp-menu-check {
    background: #b9bcc2;
    border-color: #b9bcc2;
    color: #1c1e22;
}

/* На телефоне громкость прячем (её крутят кнопками телефона), ±10 с — двойным касанием */
@media (max-width: 600px) {
    .vp-vol-range,
    .vp-back,
    .vp-fwd,
    .vp-nav {
        display: none;
    }

    .vp-time {
        font-size: 12px;
    }
}

/* ---------- Мини-плеер ---------- */
.vp-mini {
    position: fixed;
    right: max(16px, env(safe-area-inset-right, 0px));
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    z-index: 19000;
    width: 300px;
    max-width: 62vw;
    border-radius: 16px;
    overflow: hidden;
    background: #000000;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.12);
    cursor: grab;
    touch-action: none;
}

.vp-mini-box {
    aspect-ratio: 16 / 9;
}

.vp-mini-box .vp-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.vp-mini-progress {
    height: 3px;
    background: rgba(255, 255, 255, 0.2);
}

.vp-mini-progress i {
    display: block;
    width: 0;
    height: 100%;
    background: #b9bcc2;
}

.vp-mini-bar {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.vp-mini:hover .vp-mini-bar,
.vp-mini:focus-within .vp-mini-bar {
    opacity: 1;
}

.vp-mini-bar .vp-btn {
    width: 34px;
    height: 34px;
    background: rgba(0, 0, 0, 0.55);
}

.vp-mini-bar .vp-btn svg {
    width: 18px;
    height: 18px;
}

@media (hover: none) {
    .vp-mini-bar {
        opacity: 1;
    }
}

/* Вкладка «Медиа»: значок видео — SVG, обложка как у фото */
.shared-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.shared-badge svg {
    width: 11px;
    height: 11px;
}

img.shared-video-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =========================================================
   «СМОТРЕТЬ НА СИСТЕМУ» — кнопка в шапке списка чатов (телефон)
   Есть только в теме «Солнечная система» (показывает styles/solar.css).
   Нажатие прячет поиск, чаты и «Добавить контакт» — остаётся шапка
   и сама система, по планетам можно нажимать (solar-system.js).
   ========================================================= */
.solar-explore-button {
    display: none;
    margin-left: auto;
    margin-right: 0;
}

.solar-explore-button + .chats-header-action {
    margin-left: 0;
}

.solar-explore-icon--list,
.solar-explore-button[aria-pressed="true"] .solar-explore-icon--orbit {
    display: none;
}

.solar-explore-button[aria-pressed="true"] .solar-explore-icon--list {
    display: block;
}

.solar-explore-button[aria-pressed="true"] {
    opacity: 1;
    background-color: rgba(255, 181, 71, 0.18);
    color: #ffc36a;
}

#mobileChatsScreen .chats-search,
#mobileChatsScreen .mobile-chats-list,
#mobileChatsScreen .mobile-bottom-bar {
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0s;
}

#mobileChatsScreen.solar-exploring .chats-search,
#mobileChatsScreen.solar-exploring .mobile-chats-list,
#mobileChatsScreen.solar-exploring .mobile-bottom-bar {
    opacity: 0;
    transform: translateY(14px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}

/* Подсказка над системой в режиме просмотра */
.solar-explore-hint {
    position: absolute;
    left: 50%;
    bottom: calc(26px + env(safe-area-inset-bottom, 0px));
    z-index: 5;
    padding: 8px 14px;
    border-radius: 16px;
    background: rgba(12, 12, 18, 0.62);
    border: 1px solid rgba(255, 210, 150, 0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    white-space: nowrap;
    transform: translate(-50%, 10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#mobileChatsScreen.solar-exploring .solar-explore-hint {
    opacity: 1;
    transform: translate(-50%, 0);
}

#mobileChatsScreen.solar-exploring .solar-card {
    bottom: calc(70px + env(safe-area-inset-bottom, 0px));
}

/* =========================================================
   ГОЛОСОВЫЕ СООБЩЕНИЯ
   ========================================================= */

/* Кнопка-микрофон и «Отправить» в одном месте — видна только одна */
.composer-send-slot {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

#voiceButton,
#mobileVoiceButton {
    display: flex !important;
}

#voiceButton[hidden],
#mobileVoiceButton[hidden],
#sendMessageButton[hidden],
#mobileSendMessageButton[hidden] {
    display: none !important;
}

/* Кнопка-микрофон красится так же, как #attachButton/#sendMessageButton (иконка
   mic.svg — чёрная заливка, как attach.svg/send.svg, инверсия в тот же белый
   цвет через те же правила filter: invert(1), в базовом блоке и в каждой теме) */

/* Идёт запись — кнопка пульсирует красным */
#messageInputSection.voice-recording #voiceButton,
.mobile-message-input-area.voice-recording #mobileVoiceButton {
    background: rgba(255, 69, 58, 0.35) !important;
    color: #ffffff !important;
    animation: voice-mic-pulse 1.4s ease-in-out infinite;
}

@keyframes voice-mic-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 69, 58, 0.35); }
    50% { box-shadow: 0 0 0 8px rgba(255, 69, 58, 0); }
}

/* Пока держат (или держали и отпустили в «замок») — прячем скрепку и поле ввода,
   их место занимает полоса записи */
#messageInputSection.voice-recording #attachButton,
#messageInputSection.voice-recording .message-input-wrapper,
.mobile-message-input-area.voice-recording #mobileAttachButton,
.mobile-message-input-area.voice-recording .mobile-message-input-wrapper {
    display: none !important;
}

.voice-record-row {
    display: none;
    flex: 1 1 auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 0 6px;
}

#messageInputSection.voice-recording .voice-record-row,
.mobile-message-input-area.voice-recording .voice-record-row {
    display: flex;
}

.voice-record-row.is-canceling {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.voice-cancel-btn {
    display: none;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: inherit;
    cursor: pointer;
    padding: 0;
}

.voice-record-row.is-locked .voice-cancel-btn {
    display: flex;
}

.voice-record-dot {
    flex: 0 0 9px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ff453a;
    animation: voice-dot-blink 1s ease-in-out infinite;
}

@keyframes voice-dot-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

.voice-record-time {
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    opacity: 0.9;
    white-space: nowrap;
}

.voice-record-cancel-hint {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    font-size: 13px;
    opacity: 0.55;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: translateX(calc(min(0px, var(--drag-x, 0px)) * 0.6));
}

.voice-record-row.is-locked .voice-record-cancel-hint {
    display: none;
}

/* «Проведите вверх, чтобы закрепить» — всплывает над кнопкой, пока держат */
.voice-lock-hint {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 7px;
    border-radius: 16px;
    background: rgba(20, 22, 26, 0.9);
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.voice-lock-hint[hidden] {
    display: none;
}

.voice-lock-chevron {
    animation: voice-lock-bob 1.2s ease-in-out infinite;
}

@keyframes voice-lock-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* ---- Пузырь голосового сообщения в переписке ---- */
.attachment-voice {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 220px;
    max-width: 100%;
    padding: 6px 4px 8px;
}

.voice-play {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.attachment-voice.is-playing .voice-play {
    background: rgba(0, 0, 0, 0.5);
}

.voice-wave {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    height: 28px;
    cursor: pointer;
    touch-action: none;
}

/* Полоски не по flex-доле (с узким пузырём на телефоне их не видно — почти
   весь зазор "съедал" gap у 43 столбиков), а фиксированной ширины, разложены
   space-between — видно одинаково и на телефоне, и на ПК */
.voice-wave-bars {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.voice-wave-bars i {
    flex: 0 0 2px;
    width: 2px;
    display: block;
    height: var(--v, 30%);
    min-height: 3px;
    border-radius: 1px;
    background: currentColor;
    opacity: 0.45;
}

/* Во всю ширину (как фоновые полоски!) и обрезана clip-path-ом, а не своей
   шириной — раньше при width:X% внутренние полоски заново раскладывались
   space-between по ЭТОЙ узкой ширине и переставали совпадать с фоном.
   Теперь полоски у фона и у полосы «сыгранного» лежат в одних и тех же
   местах, а clip-path просто прячет то, что ещё не сыграно */
.voice-wave-progress {
    position: absolute;
    inset: 0;
    width: 100%;
    clip-path: inset(0 100% 0 0);
    pointer-events: none;
}

.voice-wave-progress .voice-wave-bars i {
    opacity: 1;
}

.voice-time {
    flex: 0 0 auto;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    opacity: 0.8;
}

/* Полоса предпросмотра: иконка голосового вместо имени файла */
.attach-preview-fileicon svg {
    width: 22px;
    height: 22px;
}

/* =========================================================
   НАСТРОЙКИ: «ГОЛОС И ВИДЕО»
   ========================================================= */
.settings-row-select {
    align-items: center;
}

.settings-select {
    flex: 0 1 auto;
    max-width: 60%;
    padding: 7px 10px;
    border: 1px solid #494949;
    border-radius: 10px;
    background: #2c2c2c;
    color: #ffffff;
    font-size: 13.5px;
    font-family: inherit;
}

.settings-select:disabled {
    opacity: 0.5;
}

.mic-test-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0 2px;
}

.mic-test-button {
    flex: 0 0 auto;
    padding: 8px 14px;
    border: 1.7px solid #646464;
    border-radius: 20px;
    background: #2c2c2c;
    color: #ffffff;
    font-size: 13.5px;
    cursor: pointer;
}

.mic-test-button:hover {
    background: #333333;
    border-color: #494949;
}

.mic-test-button.is-on {
    background: rgba(79, 209, 139, 0.18);
    border-color: #4fd18b;
    color: #4fd18b;
}

.mic-test-meter {
    flex: 1 1 auto;
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.mic-test-meter i {
    display: block;
    width: 0%;
    height: 100%;
    background: #4fd18b;
    transition: width 0.08s linear;
}

#speakerSettingsSection[hidden] {
    display: none;
}

/* =========================================================
   ТЕЛЕФОН: БЕЗ «ВЫДЕЛЕНИЯ ТЕКСТА» ПО ДОЛГОМУ НАЖАТИЮ
   =========================================================
   Долгое нажатие по списку чатов/меню действий/разделителю даты открывало
   не только наше меню, но и штатное выделение текста iOS (синие маркеры,
   лупа) поверх него — убираем на всём экране мессенджера, кроме полей
   ввода (там выделение/печать нужны как обычно) и текста самого сообщения
   (у него своё правило — при открытом чате оно выделяется по-другому). */
#mobileMessengerScreen {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

#mobileMessengerScreen input,
#mobileMessengerScreen textarea,
#mobileMessengerScreen [contenteditable="true"] {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}


/* ===== Заявки на регистрацию ===== */
#registrationsSettingsButton.settings-nav-button #registrationsBadge.registrations-badge {
    width: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: auto;
    border-radius: 10px;
    background: #e0524d;
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
}
.registrations-list { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; max-height: 55vh; overflow-y: auto; }
.registration-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1.5px solid #646464; border-radius: 18px; background: #2c2c2c; }
.registration-rejected { opacity: 0.65; }
.registration-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 140px; font-size: 13px; color: #c8ccd2; }
.registration-info b { color: #fff; font-size: 15px; word-break: break-all; }
.registration-info span { color: #9aa0a8; word-break: break-all; }
.registration-actions { display: flex; gap: 8px; flex: 0 0 auto; }
/* Цвета заданы жёстко: темы перекрашивают кнопки в окнах, и текст сливался с фоном */
#registrationsModal .registration-actions button { padding: 9px 14px; border-radius: 14px; border-style: solid !important; border-width: 1.5px !important; color: #fff !important; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: none !important; text-shadow: none !important; font-family: inherit; }
#registrationsModal .registration-actions .registration-accept { border-color: #3f9b5c !important; background: #24432f !important; }
#registrationsModal .registration-actions .registration-reject { border-color: #a04a47 !important; background: #472726 !important; }
#registrationsModal .registration-actions button:disabled { opacity: 0.5; cursor: default; }
@media (max-width: 480px) {
    .registration-actions { width: 100%; }
    #registrationsModal .registration-actions button { flex: 1 1 0; padding: 11px 10px; }
}
.approval-plate { margin-top: 16px; padding: 22px 18px; border: 1.5px solid #6c7a3a; border-radius: 20px; background: rgba(120, 140, 50, 0.12); text-align: center; color: #e6e9ee; }
.approval-plate h3 { margin: 8px 0 6px; font-size: 18px; }
.approval-plate p { margin: 0 0 14px; font-size: 14px; color: #b8bec6; }
.approval-plate-icon { font-size: 34px; }
.approval-plate button { padding: 10px 22px; border-radius: 16px; border: 1.5px solid #646464 !important; background: #333 !important; color: #fff !important; cursor: pointer; }
.approval-plate-rejected { border-color: #a04a47; background: rgba(160, 74, 71, 0.12); }

/* =========================================================
   НЕСКОЛЬКО ЗАКРЕПЛЁННЫХ: полоски, кнопка списка, окно «все закреплённые»
   ========================================================= */
.pinned-bar-list {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0 -2px 0 -8px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.pinned-bar-list:hover { background: rgba(127, 127, 127, 0.2); }
.pinned-bar-list-icon {
    width: 18px;
    height: 18px;
    background-color: currentColor;
    opacity: 0.8;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16v2H4zM4 11h16v2H4zM4 16h10v2H4z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16v2H4zM4 11h16v2H4zM4 16h10v2H4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pinned-bar-dots {
    flex-direction: column;
    align-self: stretch;
    gap: 2px;
    max-height: 32px;
    padding: 2px 0;
    flex-shrink: 0;
}
.pinned-bar-dots i {
    flex: 1;
    width: 3px;
    min-height: 3px;
    border-radius: 2px;
    background: currentColor;
    opacity: 0.25;
}
.pinned-bar-dots i.active { background: #5aa9e6; opacity: 1; }

/* Лента закреплённых: заменяет переписку, пока открыта */
.pins-view {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
}
.pins-view-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 8px 12px;
    padding: 8px 10px 8px 18px;
    background: rgba(19, 19, 19, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 30px;
    color: #e8eaed;
    font-size: 14px;
    font-weight: 600;
}
.pins-view-actions { display: flex; gap: 6px; flex-shrink: 0; }
.pins-view-actions button {
    margin: 0;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.07);
    color: #e8eaed;
    font-size: 12px;
    cursor: pointer;
}
.pins-view-actions button:hover { background: rgba(255, 255, 255, 0.14); }
.pins-view-actions .pins-view-unpin-all { color: #ff7b7b; }
.pins-view-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 6px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pins-bubble {
    position: relative;
    align-self: flex-start;
    max-width: 82%;
    padding: 7px 34px 5px 12px;
    border-radius: 18px;
    background: #2c2c2c;
    color: #e8eaed;
    cursor: pointer;
}
.pins-bubble-mine { align-self: flex-end; background: #3b3b3b; }
.pins-bubble:hover { filter: brightness(1.15); }
.pins-bubble-name { font-size: 12px; font-weight: 600; color: #c9ccd1; }
.pins-bubble-text { font-size: 14px; word-break: break-word; }
.pins-bubble-time { margin-top: 2px; text-align: right; font-size: 11px; opacity: 0.55; }
.pins-bubble-unpin {
    position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; margin: 0; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%; background: transparent; cursor: pointer; opacity: 0.6;
}
.pins-bubble-unpin:hover { opacity: 1; background: rgba(127, 127, 127, 0.3); }
.pins-bubble-unpin .pinned-bar-unpin-icon { width: 16px; height: 16px; }

/* =========================================================
   PNG С ПРОЗРАЧНОСТЬЮ: под картинкой нет серой подложки
   ========================================================= */
.album-cell.album-cell-alpha { background: transparent; }
.album-cell.album-cell-alpha img { object-fit: contain; }

/* =========================================================
   СТИКЕРЫ В ПЕРЕПИСКЕ
   ========================================================= */
.message-stickers { display: flex; flex-wrap: wrap; gap: 6px; }
.sticker-img {
    display: block;
    width: 190px;
    max-width: 100%;
    height: auto;
    max-height: 190px;
    object-fit: contain;
    background: transparent;
    cursor: pointer;
    user-select: none;
    -webkit-user-drag: none;
}
.mobile-message .sticker-img { width: min(170px, 52vw); }

/* =========================================================
   ОКНО ЭМОДЗИ: вкладки «Эмодзи / Стикеры». Цвета — из темы (--stk-*, их ставит stickers.js)
   ========================================================= */
.stk-wrap { width: 320px; color: var(--stk-text, #fff); }
.mobile-emoji-picker .stk-wrap { width: 300px; }
.stk-tabs { display: flex; border-bottom: 1px solid var(--stk-border, rgba(255,255,255,0.08)); }
.stk-tabs button {
    flex: 1;
    margin: 0;
    padding: 10px 0;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--stk-muted, #bbb);
    font-size: 14px;
    cursor: pointer;
}
.stk-tabs button.active { color: var(--stk-text, #fff); border-bottom-color: var(--stk-accent, #e8eaed); }
.stk-panel { flex-direction: column; height: 340px; }
.mobile-emoji-picker .stk-panel { height: 300px; }
.stk-strip {
    display: flex;
    gap: 6px;
    padding: 8px;
    overflow-x: auto;
    border-bottom: 1px solid var(--stk-border, rgba(255,255,255,0.08));
    flex-shrink: 0;
}
.stk-pack {
    width: 38px; height: 38px; flex-shrink: 0; margin: 0; padding: 4px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid transparent; border-radius: 10px;
    background: var(--stk-field, rgba(255,255,255,0.07));
    color: var(--stk-text, #fff);
    font-size: 16px; cursor: pointer;
}
.stk-pack img { width: 100%; height: 100%; object-fit: contain; }
.stk-pack.active { border-color: var(--stk-accent, #e8eaed); }
.stk-pack.stk-new { font-size: 22px; color: var(--stk-muted, #bbb); }
.stk-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 8px; }
.stk-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.stk-title { font-size: 13px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.stk-head-actions { display: flex; gap: 6px; flex-shrink: 0; }
.stk-btn {
    margin: 0; padding: 6px 10px;
    border: 1px solid var(--stk-border, rgba(255,255,255,0.08)); border-radius: 10px;
    background: var(--stk-field, rgba(255,255,255,0.07)); color: var(--stk-text, #fff);
    font-size: 12px; cursor: pointer;
}
.stk-btn:hover { background: var(--stk-hover, rgba(255,255,255,0.12)); }
.stk-btn:disabled { opacity: 0.55; cursor: default; }
.stk-ghost { background: transparent; }
.stk-ghost.active { border-color: var(--stk-accent, #e8eaed); }
.stk-danger { color: #ff6b6b; border-color: #a04a47; }
.stk-edit-row { display: flex; gap: 6px; margin-bottom: 8px; }
.stk-grid {
    flex: 1; min-height: 0; overflow-y: auto;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; align-content: start;
}
.stk-item { position: relative; aspect-ratio: 1; border-radius: 10px; cursor: pointer; padding: 4px; }
.stk-item:hover { background: var(--stk-hover, rgba(255,255,255,0.12)); }
.stk-item img { width: 100%; height: 100%; object-fit: contain; display: block; }
.stk-del {
    position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; margin: 0; padding: 0;
    border: none; border-radius: 50%; background: #c0392b; color: #fff; font-size: 15px; line-height: 22px; cursor: pointer;
}
.stk-empty { grid-column: 1 / -1; padding: 24px 10px; text-align: center; font-size: 13px; color: var(--stk-muted, #bbb); }
.stk-empty .stk-btn { margin-top: 10px; }
.stk-form { display: flex; flex-wrap: wrap; gap: 6px; }
.stk-form input {
    flex: 1 1 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 10px;
    border: 1px solid var(--stk-border, rgba(255,255,255,0.08)); background: var(--stk-field, rgba(255,255,255,0.07)); color: var(--stk-text, #fff);
    font-size: 14px; outline: none;
}

/* =========================================================
   РЕДАКТОР СТИКЕРА и ОКНО НАБОРА — тёмные, полупрозрачные, как шапка чата
   ========================================================= */
.stk-editor, .stk-pack-win {
    background: rgba(19, 19, 19, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    box-shadow: 0 2px 30px rgba(0, 0, 0, 0.5) !important;
    color: #e8eaed;
}
.stk-editor { width: 380px; }
.stk-editor h2 { color: #e8eaed; display: flex; justify-content: space-between; align-items: baseline; }
.stk-ed-count { font-size: 13px; font-weight: 400; color: #9aa0a8; }
.stk-ed-stage {
    position: relative;
    width: 100%;
    max-width: 330px;
    aspect-ratio: 1;
    margin: 0 auto;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: conic-gradient(#2b2b2b 25%, #222 0 50%, #2b2b2b 0 75%, #222 0) 0 0 / 16px 16px;
}
.stk-ed-stage canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.stk-ed-grid {
    position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(rgba(255,255,255,0.16) 1px, transparent 1px) 0 0 / 100% 33.333%,
        linear-gradient(90deg, rgba(255,255,255,0.16) 1px, transparent 1px) 0 0 / 33.333% 100%;
}
.stk-ctl { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 13px; color: #9aa0a8; }
.stk-ctl > span:first-child { width: 64px; flex-shrink: 0; }
.stk-ctl input[type=range] { flex: 1; accent-color: #e8eaed; }
.stk-zv, .stk-rv { width: 44px; text-align: right; }
.stk-ed-emoji {
    flex: 1; padding: 7px 10px; border-radius: 12px; font-size: 16px; outline: none;
    border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.07); color: #e8eaed;
}
.stk-seg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.stk-editor .stk-seg button {
    margin: 0; padding: 7px 12px; font-size: 12px; border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.07); color: #e8eaed; cursor: pointer;
}
.stk-editor .stk-seg button:hover { background: rgba(255,255,255,0.14); }
.stk-editor .stk-seg button.on { border-color: #e8eaed; }
.stk-editor .stk-ed-ok { background: #e8eaed !important; color: #151515 !important; font-weight: 600; }
.stk-ed-hint { margin: 10px 0 0 !important; font-size: 12px !important; color: #9aa0a8 !important; }

.stk-pack-win { width: 360px; padding: 16px; }
.stk-pack-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.stk-pack-head .stk-pack-x {
    width: 32px; height: 32px; margin: 0 !important; padding: 0; flex-shrink: 0;
    border: none; border-radius: 50%; background: transparent; color: #e8eaed; font-size: 16px; cursor: pointer;
}
.stk-pack-head .stk-pack-x:hover { background: rgba(255,255,255,0.12); }
.stk-pack-title { flex: 1; font-size: 17px; font-weight: 600; text-align: center; padding-right: 42px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stk-pack-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
    max-height: 46vh; overflow-y: auto; align-content: start;
}
.stk-pack-item { aspect-ratio: 1; border-radius: 12px; padding: 5px; cursor: pointer; background: rgba(255,255,255,0.05); }
.stk-pack-item:hover { background: rgba(255,255,255,0.14); }
.stk-pack-item img { width: 100%; height: 100%; object-fit: contain; display: block; }
.stk-pack-win .stk-pack-main {
    display: block; width: 100%; margin: 14px 0 0; padding: 13px; border: 0; border-radius: 30px;
    background: #e8eaed; color: #151515; font-size: 14px; font-weight: 700; letter-spacing: 0.3px; cursor: pointer;
}
.stk-pack-win .stk-pack-main:hover { filter: brightness(0.92); }
.stk-pack-win .stk-pack-main.stk-pack-remove { background: rgba(255,255,255,0.1); color: #ff7b7b; }
.stk-pack-author { margin-top: 10px; text-align: center; font-size: 12px; color: #9aa0a8; }

/* Кнопка выбора эмодзи в редакторе стикера и подсказки стикеров над полем ввода */
.stk-ed-emoji-btn {
    margin: 0; padding: 4px 14px; min-width: 56px; font-size: 24px; line-height: 1.3;
    border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; background: rgba(255,255,255,0.07);
    color: #e8eaed; cursor: pointer;
}
.stk-ed-emoji-btn.empty { opacity: 0.55; }
.stk-ed-emoji-note { font-size: 12px; }
.stk-ed-emoji-pop {
    position: absolute; left: 20px; right: 20px; bottom: 80px; z-index: 5; display: none;
    border: 1px solid rgba(255,255,255,0.1); border-radius: 18px; overflow: hidden;
    background: rgba(19,19,19,0.97); box-shadow: 0 6px 24px rgba(0,0,0,0.5);
}
.stk-ed-emoji-pop.open { display: block; }
.stk-ed-emoji-pop emoji-picker { width: 100%; height: 260px; }
.stk-ed-emoji-clear { margin: 0; padding: 4px 10px; font-size: 12px; border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.12); background: transparent; color: #9aa0a8; cursor: pointer; }
.stk-suggest {
    position: fixed; z-index: 2600; display: flex; gap: 6px; padding: 6px; overflow-x: auto;
    background: rgba(19, 19, 19, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 22px; box-shadow: 0 2px 20px rgba(0,0,0,0.35);
}
.stk-suggest-item { flex: 0 0 auto; width: 68px; height: 68px; padding: 4px; border-radius: 14px; cursor: pointer; }
.stk-suggest-item:hover { background: rgba(255,255,255,0.14); }
.stk-suggest-item img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Лента закреплённых открыта: переписка скрыта целиком, ничего не просвечивает */
.pins-open #messagesList,
.pins-open #mobileMessagesList,
.pins-open .pinned-bar,
.pins-open .add-contact-banner,
.pins-open .mobile-add-contact-banner { visibility: hidden; }
.pins-bubble .message-attachments { margin-bottom: 4px; }
.pins-bubble .message-album { --album-max: 240px; border-radius: 12px; }
.pins-bubble .sticker-img { width: 130px; max-height: 130px; }
.pins-bubble-text:empty { display: none; }

/* Значок «Недавние» в панели стикеров — SVG, цвет как у текста темы */
.stk-recent-icon {
    display: block; width: 22px; height: 22px; background-color: currentColor;
    -webkit-mask: url("Direct/img/icons/clock.svg") center / contain no-repeat;
    mask: url("Direct/img/icons/clock.svg") center / contain no-repeat;
}

/* Фото, видео и стикер без подписи в ленте закреплённых — без фона, как в чате */
.pins-bubble.pins-bubble-media { background: transparent; padding: 0; filter: none; }
.pins-bubble-media .pins-bubble-body { position: relative; }
.pins-bubble-media .pins-bubble-name { padding: 0 4px 3px; }
.pins-bubble-media .pins-bubble-time {
    position: absolute; right: 8px; bottom: 8px; margin: 0; padding: 2px 8px;
    border-radius: 10px; background: rgba(0, 0, 0, 0.55); color: #fff; opacity: 1;
}
.pins-bubble-media .pins-bubble-unpin { background: rgba(0, 0, 0, 0.55); opacity: 1; }
.pins-bubble-media .message-attachments { margin-bottom: 0; }

.pins-open .scroll-to-bottom-btn,
.pins-open .mobile-scroll-to-bottom-btn { visibility: hidden !important; }

/* Эмодзи-картинки в стиле Apple (emoji-apple.js) */
.apple-emoji {
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    margin: 0 0.04em;
    vertical-align: -0.28em;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}
.stk-ed-emoji-btn .apple-emoji { width: 1.1em; height: 1.1em; vertical-align: -0.2em; }

/* Скругления как у остальных элементов мессенджера: кнопки и поля — «таблетки», плитки наборов — круги */
.stk-btn { border-radius: 999px; padding: 7px 14px; }
.stk-form input { border-radius: 999px; padding: 10px 18px; }
.stk-pack { border-radius: 50%; }
.stk-item, .stk-suggest-item, .stk-pack-item { border-radius: 18px; }
.stk-ed-emoji-btn, .stk-ed-emoji-clear { border-radius: 999px; }
.stk-ed-emoji-pop { border-radius: 24px; }

/* =========================================================
   ЗВОНКИ: тёмные полупрозрачные плашки в стиле шапки SHIZ
   ========================================================= */
.call-header-btn img { width: 22px; height: 22px; }
.call-ic { display: block; width: 22px; height: 22px; background-color: currentColor;
    -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }

.call-banner {
    position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 6000;
    width: min(440px, calc(100vw - 24px)); display: flex; align-items: center; gap: 10px;
    padding: 8px 10px 8px 10px; color: #e8eaed;
    background: rgba(19, 19, 19, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 40px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55);
    animation: callBannerIn 0.25s ease;
}
@keyframes callBannerIn { from { opacity: 0; transform: translate(-50%, -14px); } to { opacity: 1; transform: translate(-50%, 0); } }
.call-banner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.call-banner-text b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-banner-text span { font-size: 12px; color: #9aa0a8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-avatar, .call-tile-av {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden;
    border-radius: 50%; background: #3a3a3a; color: #fff; font-weight: 700;
}
.call-avatar { width: 44px; height: 44px; font-size: 18px; }
.call-avatar img, .call-tile-av img { width: 100%; height: 100%; object-fit: cover; }

.call-round {
    position: relative; width: 46px; height: 46px; flex-shrink: 0; margin: 0; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 50%; cursor: pointer;
    background: rgba(255, 255, 255, 0.1); color: #fff; transition: background 0.15s, transform 0.1s;
}
.call-round:hover { background: rgba(255, 255, 255, 0.2); }
.call-round:active { transform: scale(0.94); }
.call-round.call-red { background: #e0524d; border-color: #e0524d; }
.call-round.call-green { background: #3fae6b; border-color: #3fae6b; }
.call-round.call-red .call-ic { transform: rotate(135deg); }
.call-round.is-on { background: #e8eaed; color: #151515; }
.call-round.is-off { background: rgba(255, 255, 255, 0.06); color: #9aa0a8; }
.call-round.is-off::after { content: ''; position: absolute; width: 30px; height: 2px; background: #e0524d; transform: rotate(-45deg); border-radius: 2px; }

.call-win { position: fixed; inset: 0; z-index: 5500; display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.call-win.is-min { display: none; }
.call-panel {
    width: min(980px, 96vw); height: min(680px, 94vh); display: flex; flex-direction: column; overflow: hidden; color: #e8eaed;
    background: rgba(19, 19, 19, 0.95); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 30px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.6);
}
.call-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px 6px; }
.call-top-info { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.call-title { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-sub { font-size: 13px; color: #9aa0a8; }
.call-top-btn { width: 40px; height: 40px; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #fff; cursor: pointer; }
.call-top-btn:hover { background: rgba(255, 255, 255, 0.18); }
.call-tiles { flex: 1; min-height: 0; display: grid; gap: 8px; padding: 8px 12px; grid-template-columns: 1fr; }
.call-tiles[data-count="3"], .call-tiles[data-count="4"] { grid-template-columns: repeat(2, 1fr); }
.call-tiles[data-count="5"], .call-tiles[data-count="6"] { grid-template-columns: repeat(3, 1fr); }
.call-tiles[data-count="7"], .call-tiles[data-count="8"], .call-tiles[data-count="9"] { grid-template-columns: repeat(4, 1fr); }
.call-tiles.direct { display: block; position: relative; }
.call-tiles.direct .call-tile:not(.is-self) { width: 100%; height: 100%; }
.call-tiles.direct .call-tile.is-self { position: absolute; right: 22px; bottom: 18px; width: 170px; height: 110px; z-index: 2;
    border: 1px solid rgba(255, 255, 255, 0.25); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5); }
.call-tile { position: relative; min-height: 0; overflow: hidden; border-radius: 22px; background: #202020; display: flex; align-items: center; justify-content: center; }
.call-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.call-tile:not(.has-video) video { opacity: 0; }
.call-tile.is-screen video { object-fit: contain; }
.call-tile.mirror video { transform: scaleX(-1); }
.call-tile-av { width: 96px; height: 96px; font-size: 38px; position: relative; }
.call-tile.has-video .call-tile-av { display: none; }
.call-tile.is-self .call-tile-av { width: 52px; height: 52px; font-size: 22px; }
.call-tile-name { position: absolute; left: 10px; bottom: 8px; max-width: calc(100% - 20px); padding: 3px 10px; border-radius: 12px;
    background: rgba(0, 0, 0, 0.55); font-size: 12px; color: #fff; display: flex; align-items: center; gap: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.call-muted { display: inline-flex; position: relative; color: #ff7b7b; font-style: normal; }
.call-muted .call-ic { width: 14px; height: 14px; }
.call-muted::after { content: ''; position: absolute; left: -1px; right: -1px; top: 50%; height: 1.5px; background: #ff7b7b; transform: rotate(-45deg); }
.call-controls { display: flex; justify-content: center; align-items: flex-start; gap: 20px; padding: 10px 14px 20px; }
.call-ctl { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; color: #c9ccd1; }
.call-ctl .call-round { width: 56px; height: 56px; }
.call-ctl .call-ic { width: 24px; height: 24px; }

.call-pill {
    position: absolute; left: 20px; right: 20px; top: 80px; z-index: 9; display: flex; align-items: center; gap: 10px;
    padding: 9px 18px; cursor: pointer; color: #e8eaed; font-size: 13px;
    background: rgba(22, 52, 36, 0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(63, 174, 107, 0.45); border-radius: 30px; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
}
#mobileChatScreen .call-pill { top: 70px; left: 12px; right: 12px; }
.call-pill-dot { width: 9px; height: 9px; border-radius: 50%; background: #3fae6b; animation: callDot 1.4s infinite; flex-shrink: 0; }
@keyframes callDot { 50% { opacity: 0.3; } }
.call-pill-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-pill-hint { font-size: 12px; color: #9fd9b6; white-space: nowrap; }
.call-mini { position: fixed; right: 16px; bottom: 96px; z-index: 5400; width: 140px; height: 190px; overflow: hidden; cursor: pointer;
    border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.25); background: #111; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6); touch-action: none; }
.call-mini video { width: 100%; height: 100%; object-fit: cover; }
.call-mini-time { position: absolute; left: 0; right: 0; bottom: 0; padding: 5px; text-align: center; font-size: 12px; background: rgba(0, 0, 0, 0.6); color: #fff; }
@media (max-width: 700px) {
    .call-panel { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; border: none; }
    .call-tiles.direct .call-tile.is-self { width: 110px; height: 150px; right: 14px; bottom: 12px; }
    .call-controls { gap: 12px; padding-bottom: 28px; }
    .call-ctl .call-round { width: 52px; height: 52px; }
}

/* Окно «Голос и видео»: предпросмотр камеры, кнопки «таблетками» */
.vv-preview { margin: 10px 0 2px; border-radius: 18px; overflow: hidden; background: #000; border: 1px solid rgba(255, 255, 255, 0.1); }
.vv-preview[hidden] { display: none; }
.vv-preview video { display: block; width: 100%; max-height: 220px; object-fit: cover; transform: scaleX(-1); }
.mic-test-button { border-radius: 999px; }
.mic-test-button:disabled { opacity: 0.5; cursor: default; }
#vvPermissionSection[hidden] { display: none; }

/* Звонок: аватар крупнее; трубка в шапке слева */
.call-tile-av { width: 160px; height: 160px; font-size: 64px; }
.call-tile.is-self .call-tile-av { width: 64px; height: 64px; font-size: 26px; }
.call-tiles[data-count="3"] .call-tile-av, .call-tiles[data-count="4"] .call-tile-av { width: 110px; height: 110px; font-size: 44px; }
.call-tiles[data-count="5"] .call-tile-av, .call-tiles[data-count="6"] .call-tile-av,
.call-tiles[data-count="7"] .call-tile-av, .call-tiles[data-count="8"] .call-tile-av { width: 80px; height: 80px; font-size: 32px; }
@media (max-width: 700px) { .call-tile-av { width: 140px; height: 140px; font-size: 56px; } }

/* Пинг звонка рядом со временем */
.call-ping { font-weight: 600; }
.call-ping.ok { color: #4fd18b; }
.call-ping.mid { color: #e6b84a; }
.call-ping.bad { color: #ff7b7b; }

/* Окно звонка: появление, белая ручка на телефоне */
.call-panel { animation: callPanelIn 0.28s ease; will-change: transform; }
@keyframes callPanelIn { from { opacity: 0; transform: translateY(36px) scale(0.98); } to { opacity: 1; transform: none; } }
.call-handle { display: none; }
@media (max-width: 700px) {
    .call-panel { animation-name: callPanelInMobile; touch-action: none; }
    @keyframes callPanelInMobile { from { transform: translateY(100%); } to { transform: none; } }
    .call-top-btn { display: none; }
    .call-handle { display: block; position: relative; height: 26px; flex-shrink: 0; cursor: pointer; }
    .call-handle::after { content: ''; position: absolute; left: 50%; top: 10px; width: 48px; height: 5px; margin-left: -24px;
        border-radius: 3px; background: #ffffff; opacity: 0.9; }
}

.call-pill.call-pill-global { position: fixed; top: 10px; left: 50%; right: auto; transform: translateX(-50%); width: min(440px, calc(100vw - 24px));
    box-sizing: border-box; z-index: 5300; }

/* Настройки голоса: ползунки громкости и заглушка камеры */
.vv-slider-row { display: flex; align-items: center; gap: 12px; }
.vv-slider-row .settings-label { flex: 0 0 auto; }
.vv-slider { flex: 1; min-width: 80px; height: 6px; -webkit-appearance: none; appearance: none; border-radius: 3px; outline: none; cursor: pointer;
    background: linear-gradient(to right, #e8eaed var(--fill, 50%), rgba(255, 255, 255, 0.14) var(--fill, 50%)); }
.vv-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #ffffff; border: none; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); }
.vv-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #ffffff; border: none; }
.vv-value { flex: 0 0 44px; text-align: right; font-size: 13px; color: #9aa0a8; }
.vv-preview { position: relative; min-height: 150px; display: flex; align-items: center; justify-content: center; }
.vv-preview video { display: none; width: 100%; }
.vv-preview.is-on video { display: block; }
.vv-preview.is-on .vv-placeholder { display: none; }
.vv-placeholder { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 10px; color: #7d848c; font-size: 13px; }
.vv-placeholder .call-ic { width: 38px; height: 38px; position: relative; }
.vv-placeholder .call-ic::after { content: ''; position: absolute; left: -4px; right: -4px; top: 50%; height: 3px; background: #e0524d; transform: rotate(-45deg); border-radius: 2px; }

/* Ползунки громкости: подпись и значение сверху, ползунок на всю ширину — ровно, как в Discord */
.vv-slider-row { flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.vv-slider-row .settings-label { order: 1; flex: 1 1 auto; }
.vv-slider-row .vv-value { order: 2; flex: 0 0 auto; }
.vv-slider-row .vv-slider { order: 3; flex: 1 1 100%; width: 100%; height: 8px; border-radius: 4px; margin: 2px 0 6px; box-sizing: border-box; }
.vv-slider::-webkit-slider-runnable-track { height: 8px; background: transparent; }
.vv-slider::-webkit-slider-thumb { margin-top: -5px; }

/* Ползунок: без внутренних отступов (их добавляло общее правило для полей — из-за них бегунок не доходил до края) */
.vv-slider-row .vv-slider { padding: 0 !important; border: none; background: linear-gradient(to right, #e8eaed calc(9px + (100% - 18px) * var(--r, 0.5)), rgba(255, 255, 255, 0.14) calc(9px + (100% - 18px) * var(--r, 0.5))); }

/* «Голос и видео»: три отдельных блока — микрофон, динамики, камера */
.vv-card {
    margin: 14px 0 0; padding: 14px 16px 12px;
    background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 22px;
}
.vv-title { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding-bottom: 10px; font-size: 16px; font-weight: 700; color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.vv-title .call-ic { width: 20px; height: 20px; color: #9aa0a8; }
.vv-card .settings-hint { margin-bottom: 2px; }

/* «Голос и видео» длиннее экрана — окно прокручивается */
#voiceVideoModal .modal-window {
    max-height: calc(100vh - 30px);
    max-height: calc(100dvh - 30px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

#voiceVideoModal .modal-window { scrollbar-color: rgba(255, 255, 255, 0.25) transparent; }
#voiceVideoModal .modal-window::-webkit-scrollbar { width: 6px; }
#voiceVideoModal .modal-window::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.25); border-radius: 3px; }

/* «Голос и видео»: компактнее, без видимой полосы прокрутки (прокрутка остаётся) */
#voiceVideoModal .modal-window {
    width: 480px;
    max-height: calc(100vh - 80px);
    max-height: calc(100dvh - 80px);
    padding: 18px 18px 16px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
#voiceVideoModal .modal-window::-webkit-scrollbar { display: none; width: 0; height: 0; }
#voiceVideoModal .modal-window h2 { margin-bottom: 4px; }
#voiceVideoModal .vv-card { margin-top: 10px; padding: 10px 14px 8px; border-radius: 20px; }
#voiceVideoModal .vv-title { margin-bottom: 4px; padding-bottom: 8px; font-size: 15px; }
#voiceVideoModal .vv-card .settings-row { padding-top: 6px; padding-bottom: 6px; min-height: 0; }
#voiceVideoModal .vv-card .settings-hint { margin: 4px 0 2px; font-size: 12px; line-height: 1.35; }
#voiceVideoModal .mic-test-row { padding: 8px 0 2px; }
#voiceVideoModal .vv-preview { min-height: 110px; max-height: 170px; margin-top: 8px; }
#voiceVideoModal .vv-preview video { max-height: 170px; }
#voiceVideoModal .vv-placeholder { padding: 16px 10px; }
@media (max-width: 520px) { #voiceVideoModal .modal-window { width: 100%; max-height: calc(100dvh - 40px); } }

/* Плашка звонка в списке чатов сдвигает интерфейс вниз, а не перекрывает его */
.call-pill.call-pill-global.call-pill-inline { position: static; transform: none; width: auto; margin: 6px 12px 2px; flex-shrink: 0; }

/* Выбор камеры в звонке */
.call-cam-menu { position: fixed; z-index: 6500; min-width: 220px; padding: 8px; border-radius: 22px;
    background: rgba(19, 19, 19, 0.92); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; gap: 4px; }
.call-cam-title { padding: 6px 12px 8px; font-size: 12px; color: #8b9198; }
.call-cam-item { border: none; background: transparent; color: #e8eaed; text-align: left; padding: 11px 14px; border-radius: 999px; font-size: 15px; cursor: pointer; }
.call-cam-item:hover { background: rgba(255, 255, 255, 0.08); }
.call-cam-item.is-on { background: rgba(255, 255, 255, 0.14); font-weight: 600; }

/* Выделение текста — только там, где его можно копировать (текст сообщений, поля ввода) */
body, body * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, [contenteditable="true"], [contenteditable=""],
.message-text, .message-text *, .mobile-message-text, .mobile-message-text *,
.allow-select, .allow-select * { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }

.call-controls, .call-controls * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.call-round { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* Стрелка рядом с «Камера» — список камер (на ПК; на телефоне есть долгое нажатие) */
.call-ctl { position: relative; }
.call-cam-arrow { position: absolute; top: -4px; right: -4px; width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(38, 38, 38, 0.95); color: #e8eaed; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.call-cam-arrow:hover { background: rgba(70, 70, 70, 0.98); }
.call-cam-arrow .call-ic, .call-cam-arrow svg, .call-cam-arrow img { width: 14px; height: 14px; }
@media (hover: none) { .call-cam-arrow { display: none; } }

/* Плитка на весь экран */
.call-tile-full { position: absolute; top: 10px; right: 10px; z-index: 3; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(19, 19, 19, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; display: none; align-items: center; justify-content: center; cursor: pointer; }
.call-tile.has-video .call-tile-full { display: flex; }
.call-tile.is-self .call-tile-full { display: none !important; }
.call-tile.is-self.is-screen .call-tile-full { display: flex !important; }
@media (hover: hover) { .call-tile.has-video .call-tile-full { opacity: 0; transition: opacity 0.15s; } .call-tile.has-video:hover .call-tile-full, .call-tile:fullscreen .call-tile-full { opacity: 1; } }
.call-tile:fullscreen, .call-tile:-webkit-full-screen, .call-tile.is-expanded { width: 100vw !important; height: 100vh !important; border-radius: 0 !important; background: #000; }
.call-tile.is-expanded { position: fixed !important; inset: 0 !important; z-index: 5600; right: auto !important; bottom: auto !important; }
.call-tile:fullscreen video, .call-tile.is-expanded video { object-fit: contain; }
.call-panel:has(.call-tile.is-expanded) { will-change: auto; animation: none; transform: none; }

/* Кнопка записи голосового: браузер не должен забирать жест свайпа (прокрутка/лупа/меню),
   иначе при «закреплении» палец вверх обрывал запись и она зависала */
.voice-mic-button {
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

/* =========================================================
   ЗАГЛУШКА ЗАГРУЗКИ В ЧАТЕ (голосовое, фото, видео, файл, музыка)
   ========================================================= */
.upload-pending .attachment,
.upload-pending .attachment *,
.upload-pending .voice-wave { pointer-events: none; }
.upload-pending .upload-ring,
.upload-pending .upload-ring * { pointer-events: auto; }
.upload-pending .upload-discard { pointer-events: auto; }

.upload-ring {
    position: relative;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.upload-ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.upload-ring-bg { fill: none; stroke: rgba(255, 255, 255, 0.25); stroke-width: 2.5; }
.upload-ring-fg {
    fill: none;
    stroke: #ffffff;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 113.1;
    stroke-dashoffset: calc(113.1 * (1 - var(--p, 0)));
    transition: stroke-dashoffset 0.25s linear;
}
.upload-ring-icon {
    position: relative;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.upload-ring-icon .ic-retry { display: none; }

/* Файл ушёл на сервер, он кладёт его в облако — круг крутится */
.upload-pending.is-saving .upload-ring-svg { animation: upload-ring-spin 1s linear infinite; }
.upload-pending.is-saving .upload-ring-fg { stroke-dashoffset: 80; transition: none; }
@keyframes upload-ring-spin { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }

/* Не отправилось: красноватый круг со стрелкой «повторить» */
.upload-pending.is-failed .upload-ring { background: rgba(255, 69, 58, 0.45); }
.upload-pending.is-failed .upload-ring-svg,
.upload-pending.is-failed .upload-ring-icon .ic-x { display: none; }
.upload-pending.is-failed .upload-ring-icon .ic-retry { display: block; }

/* Круг на месте кнопки, значка и поверх фото */
.upload-slot { background: transparent; padding: 0; }
.upload-slot .upload-ring { width: 100%; height: 100%; min-width: 40px; min-height: 40px; flex-basis: auto; }
.album-cell > .upload-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 52px;
    height: 52px;
    margin: -26px 0 0 -26px;
    z-index: 2;
}
.upload-pending .album-cell img,
.upload-pending .album-cell video { filter: blur(2px) brightness(0.7); }
.upload-pending .attachment-video-play { display: none; }

/* Голосовое: волна закрашивается по мере загрузки, музыка — полоска */
.upload-pending .voice-wave-progress { clip-path: inset(0 calc((1 - var(--p, 0)) * 100%) 0 0); }
.upload-pending .audio-card-progress-fill { width: calc(var(--p, 0) * 100%); }
.upload-pending .audio-card-download,
.upload-pending .attachment-file-download { display: none; }

.upload-status { font-size: 11px; opacity: 0.85; white-space: nowrap; }
.upload-pending.is-failed .upload-status { color: #ff8d86; opacity: 1; }
.upload-discard {
    display: none;
    border: none;
    background: none;
    color: #ff8d86;
    font-size: 11px;
    margin-left: 8px;
    padding: 0;
    cursor: pointer;
}
.upload-pending.is-failed .upload-discard { display: inline; }
.upload-pending .attachment-file { min-width: 220px; }

/* ===== Появление меню сообщения: сама панель растёт от сообщения, содержимое без анимации ===== */
.message-delete-menu.open,
.mobile-message-delete-menu.open {
    animation: msgMenuIn .22s cubic-bezier(.2, .9, .3, 1.15) backwards;
    transform-origin: var(--ox, 50%) var(--oy, 0);
}
@keyframes msgMenuIn { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .message-delete-menu.open, .mobile-message-delete-menu.open { animation: none; }
}

/* Меню сообщения на ПК — как на телефоне: скруглённая «таблетка», пункты с круглым фоном */
.message-delete-menu {
    border-radius: 30px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
}
.message-delete-menu button {
    border-radius: 30px;
}
.message-delete-menu .reaction-picker {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    justify-items: center;
    gap: 0;
    padding-left: 0;
    padding-right: 0;
}
.message-delete-menu .reaction-pick {
    padding: 2px 0;
    font-size: 17px;
}
/* Кнопки пунктов (Копировать, Закрепить, Удалить…) — без анимации */
.message-delete-menu button,
.mobile-message-delete-menu button {
    animation: none !important;
    transition: none !important;
}

/* Эмодзи в меню сообщения «выпрыгивают» по очереди */
.message-delete-menu.open .reaction-pick,
.mobile-message-delete-menu.open .reaction-pick {
    animation: msgMenuPop .3s cubic-bezier(.2, 1.6, .4, 1) backwards;
    animation-delay: calc(var(--i, 0) * 30ms + 60ms);
}
@keyframes msgMenuPop { from { opacity: 0; transform: scale(0) translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .message-delete-menu.open .reaction-pick, .mobile-message-delete-menu.open .reaction-pick { animation: none; }
}

/* Меню «⋯» в шапке чата и меню действий с чатом — как меню сообщения: «таблетка» и рост из точки */
.chat-options-menu {
    border-radius: 30px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
}
.chat-options-menu button {
    border-radius: 30px;
    animation: none !important;
    transition: none !important;
}
.chat-options-menu.open {
    animation: msgMenuIn .22s cubic-bezier(.2, .9, .3, 1.15) backwards;
    transform-origin: 100% 0;
}
.chat-options-menu.chat-actions-menu.open { transform-origin: 0 0; }
@media (prefers-reduced-motion: reduce) { .chat-options-menu.open { animation: none; } }

/* Закрытие меню: быстро уменьшается и гаснет */
.message-delete-menu.closing,
.mobile-message-delete-menu.closing,
.chat-options-menu.closing {
    display: flex;
    flex-direction: column;
    pointer-events: none;
    animation: msgMenuOut .13s ease-in forwards !important;
    transform-origin: var(--ox, 100%) var(--oy, 0);
}
.chat-options-menu.chat-actions-menu.closing { transform-origin: 0 0; }
@keyframes msgMenuOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.6); } }
@media (prefers-reduced-motion: reduce) {
    .message-delete-menu.closing, .mobile-message-delete-menu.closing, .chat-options-menu.closing { display: none; }
}

/* Чаты у краёв списка плавно растворяются, а не обрезаются */
.mobile-chats-list {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 70px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 70px), transparent 100%);
}

/* То же затухание у краёв в списке чатов на ПК */
.chats-list {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 40px), transparent 100%);
}