* {
    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;
}


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

button,
input {
    font-family: inherit;
}

button {
    border: none;
    outline: none;
    cursor: pointer;
}

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%,
            #1b1f26 0%,
            #0d0f13 45%,
            #08090c 100%
        );
}


.auth-box {
    width: 380px;

    padding: 38px;

    background: rgba(22, 25, 30, 0.92);

    border: 1px solid #2b3038;

    border-radius: 18px;

    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.65);

    backdrop-filter: blur(20px);
}


.auth-logo {
    margin-bottom: 30px;

    text-align: center;

    font-size: 38px;
    font-weight: 800;
    letter-spacing: 6px;

    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: #15181d;

    border: 1px solid #292e36;

    border-radius: 10px;

    color: #ffffff;

    font-size: 14px;

    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}


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


input:hover {
    background: #181c21;
}


input:focus {
    background: #191d23;

    border-color: #555d68;

    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.04);
}


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

button {
    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);
}


#loginButton,
#registerButton {
    width: 100%;
    height: 46px;

    margin-top: 18px;

    background: #ffffff;

    color: #101216;

    border-radius: 10px;

    font-size: 14px;
    font-weight: 600;
}


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


.secondary {
    width: 100%;

    margin-top: 12px;

    padding: 12px;

    background: transparent;

    color: #aeb4bd;

    border: 1px solid #30353d;

    border-radius: 10px;
}


.secondary:hover {
    background: #1c2026;

    color: #ffffff;

    border-color: #454b54;
}


#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;
}


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

.top-bar {
    width: 100%;
    height: 60px;

    flex-shrink: 0;

    position: relative;
    z-index: 1500;

    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);

    z-index: 100;
}


.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: 10px;

    font-size: 13px;
}


.profile-button:hover {
    background: #22272e;

    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: 9px;

    text-align: left;

    font-size: 14px;
}


.control-logout-button:hover {
    background: #1e2228;

    color: #ffffff;

    border-color: #3a4048;
}


/* =========================================================
   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;
}


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

.sidebar {
    width: 300px;

    flex-shrink: 0;

    display: flex;
    flex-direction: column;

    background: #111419;

    border-right: 1px solid #292e35;
}


.sidebar-header {
    height: 60px;

    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: column;

    position: relative;

    padding: 13px 14px;

    margin-bottom: 4px;

    background: transparent;

    border: 1px solid transparent;

    border-radius: 10px;

    cursor: pointer;

    transition:
        background 0.16s ease,
        border-color 0.16s ease;
}


.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;
}


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

.sidebar-bottom {
    flex-shrink: 0;

    padding: 12px;

    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;
}


/* =========================================================
   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;
}


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

.chat-user-header {
    height: 66px;

    flex-shrink: 0;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 10px 18px;

    background: #111419;

    border-bottom: 1px solid #292e35;
}


#chatAvatar {
    width: 42px;
    height: 42px;

    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;
}


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

#messagesList {
    flex: 1;

    min-height: 0;

    overflow-y: auto;

    display: flex;
    flex-direction: column;

    gap: 7px;

    padding: 20px;

    background: #0c0f13;
}


#messagesList > p {
    margin: auto;

    color: #565d66;

    font-size: 13px;
}


.message {
    max-width: min(70%, 600px);

    padding: 9px 12px;

    border-radius: 13px;

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

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.12);
}


.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-username {
    margin-bottom: 4px;

    font-size: 11px;

    color: #858c96;
}


.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 INPUT
   ========================================================= */

#messageInputSection {
    flex-shrink: 0;

    display: flex;
    align-items: center;

    gap: 8px;

    padding: 12px 14px;

    background: #111419;

    border-top: 1px solid #292e35;
}


#messageInputSection #messageInput {
    flex: 1;

    width: auto;

    height: 44px;

    margin: 0;

    padding: 0 14px;

    background: #181c21;

    border: 1px solid #2c3139;

    border-radius: 11px;
}


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

    background: #1b1f25;
}


/* =========================================================
   SEND BUTTON
   ========================================================= */

.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: 20px;
    height: 20px;

    display: block;

    object-fit: contain;
}


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


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


/* =========================================================
   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
   ========================================================= */

.modal-window {
    width: 360px;

    max-width: 100%;

    padding: 25px;

    background: #15181d;

    border: 1px solid #30353d;

    border-radius: 16px;

    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.65);

    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 {
    width: 100%;

    margin-top: 12px;

    padding: 12px;

    border-radius: 10px;
}


.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;
}


.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: #1d2127;

    border-color: #292e36;
}


.contact-info {
    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;
}


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

@media (max-width: 700px) {

    .sidebar {
        width: 240px;
    }

    .message {
        max-width: 82%;
    }

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

        padding: 28px;
    }

}


@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%;
    }

}

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

.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: rgb(99, 98, 98);
    opacity: 1;
}

/* =========================================
   МОБИЛЬНЫЙ MESSENGER
   ========================================= */

.mobile-messenger {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;

    background: #111;

    color: white;

    overflow: hidden;
}


/* =========================================
   ВЕРХНЯЯ ПАНЕЛЬ
   ========================================= */

.mobile-top-bar {
    width: 100%;
    height: 58px;

    flex-shrink: 0;

    display: flex;
    align-items: center;

    padding: 0 10px;

    background: #1c1c1c;

    border-bottom: 1px solid #333;
}


.mobile-menu-button {
    width: 40px;
    height: 40px;

    flex-shrink: 0;

    padding: 0;

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

    background: #2b2b2b;

    color: white;

    border: 1px solid #3a3a3a;
    border-radius: 9px;

    font-size: 20px;
}


.mobile-logo {
    flex: 1;

    text-align: center;

    font-size: 20px;
    font-weight: bold;
}


.mobile-profile-button {
    max-width: 110px;
    height: 40px;

    padding: 0 10px;

    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;

    background: #2b2b2b;

    color: white;

    border: 1px solid #3a3a3a;
    border-radius: 9px;

    font-size: 13px;
}


/* =========================================
   ЭКРАН СПИСКА ЧАТОВ
   ========================================= */

.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: 10px;

    cursor: pointer;
}


.mobile-chat-item:hover {
    background: #252525;

    border-color: #333;
}


.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;
}


.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-bottom-bar {
    flex-shrink: 0;

    padding: 10px;

    background: #1c1c1c;

    border-top: 1px solid #333;
}


.mobile-add-contact-button {
    width: 100%;
    height: 44px;

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

    gap: 7px;

    background: #2b2b2b;

    color: white;

    border: 1px solid #3b3b3b;

    border-radius: 9px;
}


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


/* =========================================
   МОБИЛЬНЫЙ ЧАТ
   ========================================= */

.mobile-chat-screen {
    position: absolute;

    inset: 0;

    display: flex;
    flex-direction: column;

    background: #111;

    z-index: 10;
}


/* =========================================
   ЗАГОЛОВОК МОБИЛЬНОГО ЧАТА
   ========================================= */

.mobile-chat-header {
    height: 62px;

    flex-shrink: 0;

    display: flex;
    align-items: center;

    gap: 9px;

    padding: 8px 10px;

    background: #1c1c1c;

    border-bottom: 1px solid #333;
}


.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;

    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;
}


.mobile-chat-status {
    font-size: 11px;

    color: #777;
}


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


/* =========================================
   СООБЩЕНИЯ
   ========================================= */

.mobile-messages-list {
    flex: 1;

    min-height: 0;

    overflow-y: auto;

    display: flex;
    flex-direction: column;

    gap: 7px;

    padding: 10px;
}


.mobile-message {
    max-width: 82%;

    padding: 9px 11px;

    border-radius: 12px;

    word-break: break-word;
}


.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-username {
    margin-bottom: 3px;

    font-size: 10px;

    opacity: 0.65;
}


.mobile-message-text {
    font-size: 14px;

    line-height: 1.35;
}


.mobile-message-time {
    margin-top: 4px;

    font-size: 9px;

    text-align: right;

    opacity: 0.45;
}


.mobile-empty-messages {
    margin: auto;

    color: #555;

    font-size: 13px;

    text-align: center;
}


/* =========================================
   ПОЛЕ ВВОДА
   ========================================= */

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

    display: flex;
    align-items: center;

    gap: 7px;

    padding: 8px;

    background: #1c1c1c;

    border-top: 1px solid #333;
}


#mobileMessageInput {
    flex: 1;

    width: auto;

    height: 42px;

    margin: 0;

    padding: 0 12px;

    background: #2b2b2b;

    border-radius: 10px;
}


.mobile-send-button {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    margin: 0;
    padding: 9px;

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

    background: white;

    border-radius: 10px;
}


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

    object-fit: contain;
}


/* =========================================
   МОБИЛЬНАЯ ПРОКРУТКА
   ========================================= */

.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;
}


/* =========================================
   ГОРИЗОНТАЛЬНЫЙ ТЕЛЕФОН
   ========================================= */

@media (orientation: landscape) and (max-height: 600px) {

    .mobile-top-bar {
        height: 50px;
    }


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


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


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


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


    .mobile-chat-item {
        min-height: 58px;

        padding: 7px;
    }


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


    .mobile-message-input-area {
        padding: 6px;
    }


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

}

/* =========================================
   МОБИЛЬНАЯ ФИКСАЦИЯ VIEWPORT
   ========================================= */

html,
body {
    width: 100%;
    height: 100%;

    min-width: 0;
    max-width: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;

    overscroll-behavior: none;

    touch-action: manipulation;
}


/* Запрещаем элементам вылезать
   за ширину экрана */

* {
    max-width: 100%;
}


/* =========================================
   МОБИЛЬНЫЙ MESSENGER
   ========================================= */

.messenger-screen {
    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    position: fixed;
    inset: 0;
}


/* Основная область */

.messenger-main {
    width: 100%;
    height: calc(100% - 58px);

    min-width: 0;
    min-height: 0;

    overflow: hidden;
}


/* Левая панель */

.sidebar {
    min-width: 0;
    max-width: 100%;

    overflow: hidden;
}


/* Область чата */

.chat-area {
    min-width: 0;
    min-height: 0;

    width: 100%;

    overflow: hidden;
}


/* Сам чат */

.chat-screen {
    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    overflow: hidden;
}


/* Сообщения */

#messagesList {
    min-width: 0;
    min-height: 0;

    width: 100%;

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

    overscroll-behavior: contain;
}


/* Поле ввода */

#messageInputSection {
    width: 100%;

    min-width: 0;

    overflow: hidden;
}


/* Сам input */

#messageInputSection #messageInput {
    min-width: 0;
    max-width: 100%;

    flex: 1 1 auto;
}


/* Кнопка отправки */

#sendMessageButton {
    flex-shrink: 0;
}


/* =========================================
   МОБИЛЬНЫЕ INPUT
   ========================================= */

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


/* Очень важно:
   браузер iPhone/Android не будет
   автоматически приближать страницу
   при фокусе на input */

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


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

@media (max-width: 700px) {

    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;
    }

}


/* =========================================
   ОЧЕНЬ УЗКИЙ ЭКРАН
   ========================================= */

@media (max-width: 550px) {

    .sidebar {
        width: 190px;
    }


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


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

}

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

@media (max-width: 700px) {

    html,
    body {
        width: 100%;
        height: 100%;

        margin: 0;
        padding: 0;

        overflow: hidden !important;

        position: fixed;

        inset: 0;

        overscroll-behavior: none;
    }


    /* Весь messenger стоит на месте */

    .messenger-screen {
        position: fixed;

        left: 0;
        top: 0;

        width: 100%;
        height: 100%;

        overflow: hidden;

        transform: none !important;
    }


    /* Верхняя панель */

    .top-bar {
        position: relative;

        width: 100%;
        height: 58px;

        flex-shrink: 0;
    }


    /* Основная часть */

    .messenger-main {
        position: relative;

        width: 100%;

        height: calc(100% - 58px);

        min-height: 0;

        overflow: hidden;

        display: flex;
    }


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

    .sidebar {
        flex-shrink: 0;

        overflow: hidden;
    }


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

    .chat-area {
        position: relative;

        flex: 1;

        min-width: 0;
        min-height: 0;

        overflow: hidden;
    }


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

    .chat-screen {
        position: absolute;

        left: 0;
        top: 0;

        width: 100%;
        height: 100%;

        min-width: 0;
        min-height: 0;

        overflow: hidden;
    }


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

    .chat-user-header {
        flex-shrink: 0;

        width: 100%;

        height: 64px;
    }


    /* =====================================
       СООБЩЕНИЯ
       ===================================== */

    #messagesList {
        flex: 1;

        min-width: 0;
        min-height: 0;

        width: 100%;

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

        overscroll-behavior: contain;
    }


    /* =====================================
       ПОЛЕ ВВОДА
       ===================================== */

    #messageInputSection {
        flex-shrink: 0;

        width: 100%;

        min-width: 0;

        overflow: hidden;
    }


    #messageInputSection #messageInput {
        min-width: 0;

        width: auto;

        flex: 1;
    }


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

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

}

/* =========================================================
   МОБИЛЬНЫЙ РЕЖИМ ПРИ ОТКРЫТОЙ КЛАВИАТУРЕ
   ========================================================= */

@media (max-width: 700px) {

    /* Обычный мобильный экран */

    .messenger-screen {
        width: 100vw;
        height: 100dvh;

        overflow: hidden;
    }


    /* Когда клавиатура открыта */

    body.keyboard-open {
        width: 100vw !important;
        height: 100dvh !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;

        overscroll-behavior: none;
    }


    /* Весь Messenger */

    body.keyboard-open .messenger-screen {
        width: 100vw !important;
        height: 100dvh !important;

        max-width: 100vw !important;
        max-height: 100dvh !important;

        overflow: hidden !important;
    }


    /* Верхняя панель исчезает */

    body.keyboard-open .top-bar {
        display: none !important;
    }


    /* Список чатов исчезает */

    body.keyboard-open .sidebar {
        display: none !important;
    }


    /* Основная область */

    body.keyboard-open .messenger-main {
        width: 100vw !important;
        height: 100dvh !important;

        min-width: 0 !important;
        min-height: 0 !important;

        display: block !important;

        overflow: hidden !important;
    }


    /* Область чата */

    body.keyboard-open .chat-area {
        width: 100vw !important;
        height: 100dvh !important;

        min-width: 0 !important;
        min-height: 0 !important;

        overflow: hidden !important;
    }


    /* Сам чат */

    body.keyboard-open .chat-screen {
        width: 100vw !important;
        height: 100dvh !important;

        min-width: 0 !important;
        min-height: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        overflow: hidden !important;
    }


    /* Заголовок пользователя */

    body.keyboard-open .chat-user-header {
        width: 100% !important;
        height: 64px !important;

        flex-shrink: 0 !important;

        display: flex !important;
        align-items: center !important;

        padding: 10px 14px !important;

        background: #1c1c1c;
        border-bottom: 1px solid #333;
    }


    /* Аватар */

    body.keyboard-open #chatAvatar {
        width: 42px !important;
        height: 42px !important;

        flex-shrink: 0 !important;
    }


    /* Информация */

    body.keyboard-open #chatUserInfo {
        min-width: 0 !important;

        display: flex !important;
        flex-direction: column !important;
    }


    body.keyboard-open #chatTitle {
        font-size: 16px !important;
    }


    body.keyboard-open #chatStatus {
        font-size: 12px !important;
    }


    /* Сообщения */

    body.keyboard-open #messagesList {
        width: 100% !important;

        min-width: 0 !important;
        min-height: 0 !important;

        flex: 1 1 auto !important;

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

        padding: 10px !important;
    }


    /* Панель ввода */

    body.keyboard-open #messageInputSection {
        width: 100% !important;
        height: 60px !important;

        min-width: 0 !important;

        flex-shrink: 0 !important;

        display: flex !important;
        align-items: center !important;

        gap: 7px !important;

        padding: 8px !important;

        overflow: hidden !important;
    }


    /* Поле */

    body.keyboard-open #messageInputSection #messageInput {
        flex: 1 1 auto !important;

        width: auto !important;
        min-width: 0 !important;

        height: 44px !important;

        margin: 0 !important;

        font-size: 16px !important;
    }


    /* Кнопка отправки */

    body.keyboard-open #sendMessageButton {
        width: 44px !important;
        height: 44px !important;

        min-width: 44px !important;

        flex-shrink: 0 !important;

        margin: 0 !important;
    }

}

.menu-button {
    position: relative;

    z-index: 3000;

    touch-action: manipulation;

    -webkit-tap-highlight-color: transparent;

    user-select: none;
    -webkit-user-select: none;
}