* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #222;
    background: #f4f5f7;
    overflow: hidden;
}

button,
input,
select {
    font-family: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

.mobile-app {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.mobile-header {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 7px 8px;
    background: #fff;
    border-bottom: 1px solid #d8dce1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    z-index: 5;
}

.mobile-menu-button {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #26384a;
    font-size: 26px;
    line-height: 42px;
    cursor: pointer;
}

.mobile-header-title {
    min-width: 0;
    flex: 1 1 auto;
    padding: 0 8px;
}

.mobile-chat-title {
    font-size: 17px;
    font-weight: bold;
    white-space: nowrap;
}

.mobile-user-name {
    margin-top: 2px;
    color: #7a818a;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-room-select {
    flex: 0 1 44%;
    min-width: 95px;
    max-width: 46%;
    height: 38px;
    padding: 0 7px;
    border: 1px solid #cfd4d9;
    border-radius: 7px;
    background: #fff;
    color: #25313b;
    font-size: 14px;
}

.mobile-main {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.mobile-messages {
    width: 100%;
    height: 100%;
    padding: 10px 10px 14px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #f7f8fa;
}

.mobile-empty-message {
    display: flex;
    gap: 7px;
    max-width: 100%;
    padding: 10px 12px;
    border: 1px solid #e0e3e7;
    border-radius: 10px;
    background: #fff;
    color: #727a84;
    font-size: 14px;
    line-height: 1.35;
}

.mobile-empty-time {
    flex: 0 0 auto;
    color: #a0a6ad;
    font-size: 11px;
}

.mobile-user-panel {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    width: min(88%, 360px);
    height: 100%;
    padding: 14px;
    overflow-y: auto;
    background: #fff;
    border-left: 1px solid #d7dbe0;
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.08);
    z-index: 4;
}

.mobile-panel-title {
    font-size: 16px;
    font-weight: bold;
}

.mobile-user-list-hint {
    margin-top: 10px;
    color: #707880;
    font-size: 13px;
    line-height: 1.45;
}

.mobile-mode {
    display: flex;
    padding: 6px 8px;
    background: #fff;
    border-top: 1px solid #d8dce1;
}

.mobile-mode-button {
    flex: 1 1 50%;
    min-height: 40px;
    border: 1px solid #cfd4d9;
    background: #f8f9fa;
    color: #69717a;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
}

.mobile-mode-button:first-child {
    border-radius: 7px 0 0 7px;
}

.mobile-mode-button:last-child {
    border-left: 0;
    border-radius: 0 7px 7px 0;
}

.mobile-mode-button.active {
    background: #e7ebef;
    color: #273746;
}

.mobile-composer {
    display: flex;
    gap: 7px;
    padding: 7px 8px 9px;
    background: #fff;
    border-top: 1px solid #d8dce1;
}

.mobile-message-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 0 12px;
    border: 1px solid #ccd2d7;
    border-radius: 10px;
    outline: none;
    background: #fff;
    color: #222;
    font-size: 16px;
}

.mobile-message-input:focus {
    border-color: #8895a1;
}

.mobile-send-button {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: #34495e;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}

.mobile-menu-overlay {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: none;
    background: rgba(0, 0, 0, 0.28);
    z-index: 19;
}

.mobile-menu {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(88%, 340px);
    padding: 8px 0;
    transform: translateX(-105%);
    transition: transform 0.18s ease;
    background: #fff;
    box-shadow: 3px 0 14px rgba(0, 0, 0, 0.16);
    z-index: 20;
}

.mobile-menu.open {
    transform: translateX(0);
}

.mobile-menu-overlay.open {
    display: block;
}

.mobile-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 54px;
    padding: 0 12px 0 16px;
    border-bottom: 1px solid #e1e4e7;
    font-size: 15px;
    font-weight: bold;
}

.mobile-menu-head button {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #515960;
    font-size: 30px;
    line-height: 40px;
    cursor: pointer;
}

.mobile-menu-link {
    display: block;
    width: 100%;
    min-height: 50px;
    padding: 14px 16px;
    border: 0;
    border-bottom: 1px solid #eceff1;
    background: #fff;
    color: #28343f;
    text-align: left;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
}

.mobile-menu-link:active {
    background: #f0f2f4;
}

.mobile-menu-exit {
    color: #9a2f2f;
}

.mobile-start {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 18px;
    background: #f4f5f7;
}

.mobile-start-box {
    width: min(100%, 390px);
    padding: 24px 20px 22px;
    border: 1px solid #d8dde2;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07);
    text-align: center;
}

.mobile-logo {
    font-size: 26px;
    font-weight: bold;
}

.mobile-start-title {
    margin-top: 7px;
    color: #6e767e;
    font-size: 15px;
}

.mobile-start-text {
    margin-top: 18px;
    color: #424b53;
    font-size: 14px;
    line-height: 1.45;
}

.mobile-start-note {
    margin-top: 14px;
    color: #8a9096;
    font-size: 12px;
    line-height: 1.4;
}

.mobile-start-button {
    display: block;
    margin-top: 18px;
    padding: 13px 14px;
    border-radius: 9px;
    background: #34495e;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
}

.mobile-message {
    margin-top: 15px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
}

.mobile-message-error {
    background: #fff0f0;
    color: #8a3232;
    border: 1px solid #f0caca;
}

body.mobile-night {
    color: #e7eaed;
    background: #1d2227;
}

body.mobile-night .mobile-header,
body.mobile-night .mobile-mode,
body.mobile-night .mobile-composer,
body.mobile-night .mobile-menu,
body.mobile-night .mobile-menu-link,
body.mobile-night .mobile-start-box {
    background: #252b31;
    color: #e7eaed;
}

body.mobile-night .mobile-header {
    border-bottom-color: #394149;
}

body.mobile-night .mobile-chat-title,
body.mobile-night .mobile-menu-head,
body.mobile-night .mobile-menu-link {
    color: #e7eaed;
}

body.mobile-night .mobile-user-name,
body.mobile-night .mobile-start-title,
body.mobile-night .mobile-start-note,
body.mobile-night .mobile-start-text {
    color: #aeb6bd;
}

body.mobile-night .mobile-messages {
    background: #1d2227;
}

body.mobile-night .mobile-empty-message {
    background: #252b31;
    border-color: #394149;
    color: #b8c0c7;
}

body.mobile-night .mobile-mode-button,
body.mobile-night .mobile-room-select,
body.mobile-night .mobile-message-input {
    background: #1e2429;
    color: #e7eaed;
    border-color: #414a53;
}

body.mobile-no-images img {
    display: none !important;
}

@media (min-width: 700px) {
    .mobile-app {
        width: 520px;
        margin: 0 auto;
        border-left: 1px solid #d8dce1;
        border-right: 1px solid #d8dce1;
    }

    body {
        background: #e7eaed;
    }
}


.mobile-room-name { margin-top:2px; color:#7a818a; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mobile-start { min-height:100%; display:flex; align-items:center; justify-content:center; padding:24px 14px; background:#f4f5f7; }
.mobile-start-box { width:100%; max-width:390px; padding:26px 20px 22px; border:1px solid #d7dce2; border-radius:16px; background:#fff; box-shadow:0 3px 16px rgba(0,0,0,.07); text-align:center; }
.mobile-logo { margin-bottom:7px; font-size:28px; font-weight:bold; }
.mobile-start-title { color:#6d7680; font-size:15px; }
.mobile-login-form { margin-top:22px; text-align:left; }
.mobile-login-form label { display:block; margin:0 0 5px; color:#4f5862; font-size:13px; }
.mobile-login-form input { width:100%; height:44px; margin:0 0 12px; padding:0 12px; border:1px solid #ccd2d7; border-radius:9px; font-size:16px; outline:none; }
.mobile-login-form input:focus { border-color:#8895a1; }
.mobile-start-button { display:block; width:100%; min-height:44px; padding:11px 14px; border:0; border-radius:9px; background:#34495e; color:#fff; text-decoration:none; font-size:14px; font-weight:bold; text-align:center; cursor:pointer; }
.mobile-main-link { display:block; margin-top:14px; color:#34495e; font-size:13px; text-decoration:none; }
.mobile-start-note { margin-top:15px; color:#8b929a; font-size:12px; line-height:1.45; }
.mobile-message-list { display:block; }
.mobile-message { margin:0 0 7px; padding:7px 9px; border:1px solid #e0e3e7; border-radius:9px; background:#fff; }
.mobile-message-private { border:2px solid #d16a83; border-left:6px solid #c74363; background:#fff1f4; box-shadow:0 1px 4px rgba(199,67,99,.14); }
.mobile-message-head { display:flex; align-items:baseline; gap:7px; line-height:1.2; }
.mobile-message-time { color:#9098a1; font-size:11px; }
.mobile-message-nick { color:#26384a; font-weight:bold; font-size:13px; cursor:pointer; }
.mobile-message-nick-plain { display:none; }
body.mobile-no-images .mobile-message-nick-rich { display:none; }
body.mobile-no-images .mobile-message-nick-plain { display:inline; }
.mobile-message-private-label { color:#a52f4c; font-size:10px; font-weight:bold; padding:2px 5px; border:1px solid #d16a83; border-radius:4px; background:#ffe0e7; flex:0 0 auto; }
.mobile-message-recipient { color:#606a73; font-size:12px; font-weight:bold; white-space:nowrap; }
.mobile-user-panel-title { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.mobile-user-panel-close { flex:0 0 36px; width:36px; height:36px; padding:0; border:0; border-radius:7px; background:transparent; color:#65707a; font-size:27px; line-height:36px; cursor:pointer; }
.mobile-message-body { font-size:14px; line-height:1.35; overflow-wrap:anywhere; white-space:pre-wrap; }
.mobile-message-body img { max-width:100%; height:auto; }
.mobile-user-list { margin-top:9px; }
.mobile-user { padding:7px 8px; border-bottom:1px solid #eceef0; font-size:14px; }
.mobile-recipient-link {
    font-weight:bold;
    color:inherit;
    text-decoration:none;
    cursor:pointer;
}

.mobile-user-panel .mobile-user {
    display:block;
    visibility:visible;
    color:#26343f;
    background:transparent;
}
.mobile-user.selected { background:#e8edf2; font-weight:bold; }
.mobile-user-special { font-weight:bold; }
.mobile-message-error { margin-top:18px; color:#b32323; font-size:14px; line-height:1.4; }
body.mobile-night { background:#1d242b; color:#eef2f5; }
body.mobile-night .mobile-header, body.mobile-night .mobile-mode, body.mobile-night .mobile-composer, body.mobile-night .mobile-start-box { background:#252e36; border-color:#3b4650; }
body.mobile-night .mobile-messages { background:#1d242b; }
body.mobile-night .mobile-message { background:#252e36; border-color:#3b4650; }
body.mobile-night .mobile-message-private { border-color:#c56a83; background:#392833; box-shadow:none; }
body.mobile-night .mobile-message-private-label { color:#f0b4c2; border-color:#a45c72; background:#4b303b; }
body.mobile-night .mobile-mode-button.active {
    background:#586b7b;
    color:#fff;
    border-color:#aab8c3;
}
body.mobile-night .mobile-menu-button {
    background:#394650;
    color:#f2f5f7;
    border-radius:8px;
}
body.mobile-night .mobile-message-recipient {
    color:#c1cbd3;
}
body.mobile-night .mobile-user-panel-close {
    color:#e2e7eb;
    background:#394650;
}
body.mobile-night .mobile-user.selected {
    background:#465662;
    color:#fff;
}
body.mobile-night .mobile-message-body a,
body.mobile-night .mobile-message-body a:visited {
    color:#b9d6f2;
}

body.mobile-night .mobile-message-nick { color:#e8edf1; }
body.mobile-night .mobile-message-body { color:#e8edf1; white-space:pre-wrap; }
body.mobile-night .mobile-room-name, body.mobile-night .mobile-user-name, body.mobile-night .mobile-message-time { color:#aeb7bf; }
body.mobile-night .mobile-user-panel { background:#252e36; border-color:#3b4650; }
body.mobile-night .mobile-user-panel .mobile-user { color:#eef2f5; }
body.mobile-night .mobile-recipients-list { color:#e8edf1; }

body.mobile-night .mobile-menu { background:#252e36; }
body.mobile-night .mobile-menu-link, body.mobile-night .mobile-menu-head { color:#eef2f5; }
body.mobile-no-images img { display:none !important; }

/* Mobile shell elements used by messages.php */
.mobile-bottom {
    flex: 0 0 auto;
    background: #fff;
}

.mobile-recipients {
    display:flex;
    align-items:center;
    gap:6px;
    min-height:28px;
    padding:4px 9px;
    background:#fff;
    border-top:1px solid #d8dce1;
    color:#6d757e;
    font-size:12px;
}
.mobile-recipients-title {
    flex:0 0 auto;
    font-weight:bold;
}
.mobile-recipients-list {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#26384a;
}

.mobile-mode-switch {
    display: flex;
    padding: 6px 8px 0;
    background: #fff;
}

.mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 54px;
    padding: 0 12px 0 16px;
    border-bottom: 1px solid #e1e4e7;
    font-size: 15px;
    font-weight: bold;
}

.mobile-menu-header button {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #515960;
    font-size: 30px;
    line-height: 40px;
    cursor: pointer;
}

.mobile-menu > a,
.mobile-menu > button {
    display: block;
    width: 100%;
    min-height: 50px;
    padding: 14px 16px;
    border: 0;
    border-bottom: 1px solid #eceff1;
    background: #fff;
    color: #28343f;
    text-align: left;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
}

.mobile-menu > a:active,
.mobile-menu > button:active {
    background: #f0f2f4;
}

.mobile-user-panel-title {
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: bold;
}

.mobile-user-empty {
    color: #777f87;
}

.mobile-empty-text {
    display: block;
}

body.mobile-night .mobile-menu-header,
body.mobile-night .mobile-menu > a,
body.mobile-night .mobile-menu > button {
    background: #252e36;
    color: #eef2f5;
    border-bottom-color: #3b4650;
}

body.mobile-night .mobile-menu-header button {
    color: #d9e0e5;
}

body.mobile-night .mobile-recipients,
body.mobile-night .mobile-mode-switch,
body.mobile-night .mobile-bottom {
    background: #252e36;
}

.mobile-error {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    padding:18px;
    box-sizing:border-box;
    background:#f4f5f7;
}
.mobile-error-box {
    width:min(100%, 420px);
    padding:22px 18px;
    border:1px solid #d8dde2;
    border-radius:12px;
    background:#fff;
    text-align:center;
    box-shadow:0 4px 16px rgba(0,0,0,.07);
}
.mobile-error-title { font-size:18px; font-weight:bold; color:#9c2f2f; margin-bottom:12px; }
.mobile-error-text { font-size:14px; line-height:1.45; color:#333; margin-bottom:16px; }
.mobile-error-form { margin:0; }
.mobile-error-input, .mobile-error-select { width:100%; box-sizing:border-box; min-height:42px; margin:0 0 10px; padding:8px 10px; border:1px solid #ccd2d7; border-radius:8px; background:#fff; font-size:16px; }
.mobile-error-button { display:block; width:100%; min-height:42px; padding:10px 14px; border:0; border-radius:8px; background:#34495e; color:#fff; font-size:14px; font-weight:bold; text-decoration:none; cursor:pointer; box-sizing:border-box; }
.mobile-error-back { display:block; margin-top:10px; color:#596a78; font-size:13px; text-decoration:none; }
body.mobile-night .mobile-error { background:#1d242b; }
body.mobile-night .mobile-error-box { background:#252e36; border-color:#3b4650; }
body.mobile-night .mobile-error-text { color:#e8edf1; }
body.mobile-night .mobile-error-input, body.mobile-night .mobile-error-select { background:#1d242b; color:#e8edf1; border-color:#4a555e; }


/* Recipient selector */
.mobile-recipient-link {
    cursor:pointer;
    color:inherit;
    text-decoration:none;
    font-weight:bold;
}

body.mobile-night .mobile-recipient-link {
    color:#d7e0e7;
}

/* Slightly lighter night message surface. */
body.mobile-night .mobile-message {
    background:#303941;
    border-color:#48535d;
}

body.mobile-night .mobile-message-private {
    background:#41323a;
    border-color:#c56a83;
}