* { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
body { background: #e7ebf0; display: flex; justify-content: center; align-items: center; height: 100vh; transition: background 0.3s; }
.auth-container { background: white; padding: 40px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); width: 360px; text-align: center; }
.auth-container h2 { color: #3390ec; margin-bottom: 24px; }
.auth-container input { width: 100%; padding: 12px; margin-bottom: 16px; border: 1px solid #dae1e8; border-radius: 8px; outline: none; font-size: 16px; }
.auth-container button { width: 100%; padding: 12px; background: #3390ec; color: white; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; font-size: 14px; }
.auth-toggle { margin-top: 16px; color: #3390ec; cursor: pointer; font-size: 13px; text-decoration: underline; }
.error-msg { color: #e53935; font-size: 13px; margin-bottom: 12px; display: none; text-align: left; }
.app-container { width: 1100px; height: 90vh; background: white; border-radius: 16px; box-shadow: 0 4px 24px rgba(0,0,0,0.08); display: none; overflow: hidden; }
.sidebar { width: 340px; border-right: 1px solid #f0f0f2; display: flex; flex-direction: column; background: #fff; flex-shrink: 0; }
.sidebar-header { padding: 16px 20px; font-size: 16px; font-weight: 600; color: #212121; background: #fff; display: flex; align-items: center; border-bottom: 1px solid #f4f4f5; position: relative; }
.search-box { padding: 12px 16px; border-bottom: 1px solid #f4f4f5; }
.search-box input { width: 100%; padding: 8px 12px; background: #f4f4f5; border: 1px solid transparent; border-radius: 20px; outline: none; font-size: 14px; }
.plus-menu-container { position: relative; }
.plus-btn { background: none; border: none; font-size: 26px; color: #3390ec; cursor: pointer; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; outline: none; transition: background 0.2s; }
.plus-btn:hover { background: #f0f6fc; }
.plus-dropdown { position: absolute; top: 38px; right: 0; background: white; border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,0.15); width: 180px; display: none; flex-direction: column; z-index: 500; overflow: hidden; border: 1px solid #f0f0f2; }
.plus-dropdown div { padding: 12px 16px; font-size: 14px; font-weight: 500; color: #4a4a4a; cursor: pointer; transition: background 0.15s; }
.plus-dropdown div:hover { background: #f4f4f5; }
.user-list { flex: 1; overflow-y: auto; list-style: none; padding: 4px 0; }
.user-item { padding: 10px 16px; cursor: pointer; display: flex; align-items: center; gap: 14px; transition: background 0.15s; margin: 2px 8px; border-radius: 10px; }
.user-item:hover { background: #f4f4f5; }
.user-item.active { background: #3390ec; color: white; }
.user-item.active .user-name { color: white; }
.user-item.active .user-avatar { background: white !important; color: #3390ec !important; }
.user-avatar { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; color: white; font-size: 16px; text-transform: uppercase; flex-shrink: 0; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.user-name { font-size: 15px; font-weight: 500; color: #212121; }
/* ИСПРАВЛЕНО: Автономный SVG-паттерн вместо проблемной внешней картинки GitHub */
.chat-area { flex: 1; display: flex; flex-direction: column; background-color: #f4f4f5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://w3.org' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%233390ec' fill-opacity='0.04'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm1-61c3.16 0 6-1.84 6-5s-2.84-5-6-5-6 1.84-6 5 2.84 5 6 5z'/%3E%3C/g%3E%3C/svg%3E"); min-width: 0; }
.chat-area-bg-dark { background-image: none !important; background-color: #181818 !important; }
.chat-header { background: white; padding: 14px 20px; border-bottom: 1px solid #f0f0f2; }
.chat-header:hover { background: #f9f9f9; }
.chat-title { font-weight: 600; font-size: 16px; color: #212121; }
.chat-status { font-size: 13px; color: #707579; }
.messages-container { flex: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.message-bubble { max-width: 65%; min-width: 102px; padding: 8px 14px; font-size: 15px; line-height: 1.4; word-wrap: break-word; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,0.07); }
.message-bubble.incoming { background: white; align-self: flex-start; border-radius: 4px 14px 14px 14px; color: #212121; }
.message-bubble.outgoing { background: #eeffde; align-self: flex-end; border-radius: 14px 14px 4px 14px; color: #212121; }
.input-area { padding: 12px 20px; background: white; display: flex; align-items: center; gap: 12px; border-top: 1px solid #f0f0f2; }
.input-wrapper { flex: 1; background: #f4f4f5; border-radius: 22px; padding: 4px 16px; display: flex; align-items: center; border: 1px solid transparent; }
.input-wrapper input { flex: 1; border: none; background: transparent; padding: 8px 0; outline: none; font-size: 15px; }
.send-btn { background: none; border: none; color: #3390ec; font-size: 15px; font-weight: 600; cursor: pointer; padding: 8px 12px; }
.back-btn { background: none; border: none; font-size: 22px; color: #3390ec; cursor: pointer; display: none; }
.modal-backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.4); display: none; justify-content: center; align-items: center; z-index: 1000; }
.modal-content { background: white; padding: 30px; border-radius: 14px; box-shadow: 0 4px 30px rgba(0,0,0,0.15); width: 340px; display: flex; flex-direction: column; }
.modal-content h3 { margin-bottom: 20px; color: #212121; font-size: 18px; }
.modal-content input { padding: 10px 12px; margin-bottom: 12px; border: 1px solid #dae1e8; border-radius: 8px; outline: none; font-size: 15px; }
.modal-save-btn { flex: 1; padding: 10px; background: #3390ec; color: white; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; }
.modal-close-btn { padding: 10px; background: #f4f4f5; color: #707579; border: none; border-radius: 8px; cursor: pointer; text-align: center; }
.modal-toggle-pass-btn { background: none; border: none; color: #3390ec; cursor: pointer; text-align: left; font-size: 14px; margin: 4px 0 10px 0; }
body.dark { background: #0e0e10; color: #e1e1e3; }
body.dark .app-container { background: #18181c; box-shadow: 0 4px 24px rgba(0,0,0,0.4); }
body.dark .sidebar { background: #18181c; border-right-color: #26262b; }
body.dark .sidebar-header { background: #18181c; color: #e1e1e3; border-bottom-color: #26262b; }
body.dark .search-box { border-bottom-color: #26262b; }
body.dark .search-box input { background: #26262b; color: #fff; }
body.dark .user-item:hover { background: #26262b; }
body.dark .user-name { color: #e1e1e3; }
body.dark .plus-dropdown { background: #1f1f24; border-color: #26262b; box-shadow: 0 4px 16px rgba(0,0,0,0.3); }
body.dark .plus-dropdown div { color: #cbd5e1; }
body.dark .plus-dropdown div:hover { background: #26262b; }
body.dark .chat-header { background: #18181c; border-bottom-color: #26262b; }
body.dark .chat-header:hover { background: #1f1f24; }
body.dark .chat-title { color: #fff; }
body.dark .chat-status { color: #94a3b8; }
body.dark .input-area { background: #18181c; border-top-color: #26262b; }
body.dark .input-wrapper { background: #26262b; }
body.dark .input-wrapper input { color: #fff; }
body.dark .message-bubble.incoming { background: #26262b; color: #fff; }
body.dark .message-bubble.outgoing { background: #1e3a24; color: #e2f7cb; }
body.dark .modal-content { background: #1f1f24; color: #fff; }
body.dark .modal-content h3 { color: #fff; }
body.dark .modal-content input { background: #26262b; border-color: #3f3f46; color: #fff; }
body.dark .modal-close-btn { background: #26262b; color: #a1a1aa; }
@media (max-width: 768px) {
    body { background: #fff; }
    .auth-container { width: 100%; height: 100vh; box-shadow: none; display: flex; flex-direction: column; justify-content: center; border-radius: 0; padding: 24px; }
    .app-container { width: 100vw; height: 100vh; border-radius: 0; box-shadow: none; }
    .sidebar { width: 100%; }
    .sidebar-header { justify-content: space-between; }
    .chat-area { display: none; width: 100%; }
    .back-btn { display: block; }
    .app-container.chat-open #app-sidebar { display: none; }
    .app-container.chat-open #app-chat-area { display: flex; }
    .message-bubble { max-width: 85%; min-width: 102px; }
}

/* Адаптивное отображение картинок в диалогах */
.message-bubble img {
    max-width: 100%;
    max-height: 250px;
    border-radius: 8px;
    display: block;
    margin-top: 4px;
    object-fit: cover;
}
/* Современный переключатель темы (телеграм-стиль) */
.tg-switch-row { display:flex; align-items:center; justify-content:space-between; font-size:15px; }
.tg-switch { position: relative; display:inline-block; width:44px; height:26px; flex-shrink:0; }
.tg-switch input { opacity:0; width:0; height:0; position:absolute; }
.tg-switch-slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background-color:#dae1e8; transition:.25s; border-radius:26px; }
.tg-switch-slider:before { position:absolute; content:""; height:20px; width:20px; left:3px; bottom:3px; background-color:white; transition:.25s; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,0.2); }
.tg-switch input:checked + .tg-switch-slider { background-color:#3390ec; }
.tg-switch input:checked + .tg-switch-slider:before { transform: translateX(18px); }
body.dark .tg-switch-slider { background-color:#3f3f46; }
body.dark .tg-switch input:checked + .tg-switch-slider { background-color:#2b5278; }

/* Кнопки действий с аватаркой */
.avatar-action-btn { background:#f0f6fc; color:#3390ec; border:none; padding:6px 14px; border-radius:16px; font-size:13px; cursor:pointer; font-weight:500; transition:background .2s, transform .1s; }
.avatar-action-btn:hover { background:#e2eefb; }
.avatar-action-btn:active { transform: scale(0.96); }
body.dark .avatar-action-btn { background:#26262b; color:#8ecbff; }

/* Плавные нажатия на модальные кнопки */
.modal-save-btn, .modal-close-btn, .plus-btn { transition: background .2s, transform .1s; }
.modal-save-btn:hover { background:#2894e0; }
.modal-close-btn:hover { background:#e5e7eb; }
.modal-save-btn:active, .modal-close-btn:active, .plus-btn:active { transform: scale(0.96); }

/* Кнопка "Назад" — как у кнопки отправки, круглая */
.back-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f0f6fc;
    border: none;
    color: #3390ec;
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s, transform 0.1s;
}
.back-btn:hover { background: #e2eefb; }
.back-btn:active { transform: scale(0.94); }
body.dark .back-btn { background:#26262b; color:#8ecbff; }

@media (max-width: 768px) {
    .back-btn { display: flex; }
}

/* Системные сообщения (вход/выход/аватар) — центрированная серая плашка без пузыря */
.system-message {
    align-self: center;
    background: rgba(0,0,0,0.06);
    color: #707579;
    font-size: 12.5px;
    padding: 6px 14px;
    border-radius: 12px;
    max-width: 80%;
    text-align: center;
    margin: 4px 0;
}
body.dark .system-message { background: rgba(255,255,255,0.08); color: #a1a1aa; }

/* ---------- Кнопка звонка в шапке ---------- */
.call-btn{
    display:none; align-items:center; justify-content:center;
    width:40px; height:40px; border-radius:50%;
    background:#f0f6fc; color:#3390ec; border:none;
    cursor:pointer; flex-shrink:0; margin-left:12px; padding:0;
    transition:background .2s, transform .1s;
}
.call-btn:hover{ background:#e2eefb; }
.call-btn:active{ transform:scale(.92); }
body.dark .call-btn{ background:#26262b; color:#8ecbff; }

/* ---------- Оверлей звонка ---------- */
#call-overlay{
    position:fixed; inset:0; z-index:3000; display:none;
    background:#111418; overflow:hidden;
    padding-bottom:env(safe-area-inset-bottom);
}
#call-overlay.visible{ display:block; }

.call-remote-video{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; background:#111418;
}

.call-peer-card{
    position:absolute; inset:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:14px;
    background:linear-gradient(160deg,#1c2733 0%,#111418 100%);
    transition:opacity .3s;
}
.call-peer-avatar{
    width:120px; height:120px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:44px; font-weight:600;
    box-shadow:0 8px 30px rgba(0,0,0,.45);
    background-position:center;
}
.call-peer-name{ color:#fff; font-size:23px; font-weight:600; text-align:center; padding:0 24px; }
.call-status{ color:#9aa8b6; font-size:15px; min-height:20px; }

.call-local-video{
    position:absolute; right:14px;
    top:calc(18px + env(safe-area-inset-top));
    width:104px; height:150px; object-fit:cover;
    border-radius:14px; background:#000; display:none;
    box-shadow:0 4px 16px rgba(0,0,0,.5);
    transform:scaleX(-1); z-index:2;
}

.call-top-bar{
    position:absolute; left:0; right:0;
    top:calc(20px + env(safe-area-inset-top));
    display:flex; justify-content:center; pointer-events:none; z-index:2;
}
.call-timer{
    color:#fff; font-size:15px; font-weight:500;
    background:rgba(0,0,0,.35); padding:5px 14px; border-radius:14px;
    backdrop-filter:blur(6px);
}

.call-controls{
    position:absolute; left:0; right:0;
    bottom:calc(38px + env(safe-area-inset-bottom));
    display:flex; align-items:center; justify-content:center; gap:20px; z-index:3;
}
.call-round-btn{
    width:62px; height:62px; border-radius:50%; border:none;
    background:rgba(255,255,255,.16); color:#fff; font-size:24px;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    backdrop-filter:blur(10px);
    transition:transform .1s, background .2s;
}
.call-round-btn:hover{ background:rgba(255,255,255,.26); }
.call-round-btn:active{ transform:scale(.9); }
.call-round-btn.active{ background:#fff; color:#111418; }
.call-round-btn.muted{ background:#fff; color:#e53935; }
.call-round-btn.hangup{ background:#e53935; }
.call-round-btn.hangup:hover{ background:#c62828; }
.call-round-btn.accept{ background:#2bba5a; }
.call-round-btn.accept:hover{ background:#25a04e; }

@media (max-width:768px){
    .call-round-btn{ width:58px; height:58px; font-size:22px; }
    .call-controls{ gap:16px; }
}
.call-tap-to-hear{
    position:absolute; left:50%; transform:translateX(-50%);
    bottom:calc(120px + env(safe-area-inset-bottom));
    display:none; z-index:5;
    background:#fff; color:#111418; border:none;
    padding:12px 20px; border-radius:22px;
    font-size:14px; font-weight:600; cursor:pointer;
    box-shadow:0 6px 24px rgba(0,0,0,.45);
    animation:tapPulse 1.6s ease-in-out infinite;
}
@keyframes tapPulse{
    0%,100%{ transform:translateX(-50%) scale(1); }
    50%    { transform:translateX(-50%) scale(1.05); }
}
#call-remote-audio{ position:absolute; width:0; height:0; opacity:0; pointer-events:none; }
/* ========== О ПРОГРАММЕ ========== */
.settings-link-btn{
    background:none; border:none; color:#3390ec; cursor:pointer;
    font-size:15px; font-weight:500; text-align:left; padding:0;
    transition:opacity .15s;
}
.settings-link-btn:hover{ opacity:.75; }

.about-content{ width:420px; max-width:calc(100vw - 32px); max-height:88vh; }
.about-title{ margin-bottom:14px; }

.about-scroll{
    overflow-y:auto; max-height:62vh; padding-right:6px;
    -webkit-overflow-scrolling:touch;
}
.about-lead{ font-size:14.5px; line-height:1.55; color:#3a3a40; margin-bottom:14px; }

.about-list{ list-style:none; padding:0; margin:0 0 16px; display:flex; flex-direction:column; gap:11px; }
.about-list li{
    position:relative; padding-left:20px;
    font-size:14px; line-height:1.5; color:#4a4a52;
}
.about-list li::before{
    content:''; position:absolute; left:4px; top:8px;
    width:6px; height:6px; border-radius:50%; background:#3390ec;
}
.about-list b{ color:#212121; }

.about-meta{
    background:#f6f8fa; border-radius:10px; padding:12px 14px;
    display:flex; flex-direction:column; gap:8px; margin-bottom:14px;
}
.about-meta > div{ display:flex; justify-content:space-between; gap:12px; font-size:13.5px; }
.about-meta span{ color:#8b959e; }
.about-meta b{ color:#212121; font-weight:600; }
.about-meta a{ color:#3390ec; text-decoration:none; }

.about-footer{
    font-size:13px; color:#8b959e; text-align:center;
    line-height:1.5; font-style:italic; padding-bottom:4px;
}
.about-ok{ margin-top:16px; width:100%; }

body.dark .about-lead{ color:#c9ccd3; }
body.dark .about-list li{ color:#b6bac2; }
body.dark .about-list b{ color:#fff; }
body.dark .about-meta{ background:#26262b; }
body.dark .about-meta b{ color:#fff; }
body.dark .about-footer{ color:#7b8592; }

@media (max-width:768px){
    .about-content{ width:100%; max-width:none; border-radius:14px; }
    .about-scroll{ max-height:58vh; }
}

/* ========== ПРОФИЛЬ СОБЕСЕДНИКА (в стиле Telegram) ========== */
#user-info-modal { padding: 0; align-items: stretch; justify-content: stretch; }

.profile-sheet{
    width:100%; max-width:520px; margin:auto;
    background:#fff; display:flex; flex-direction:column;
    max-height:100vh; overflow-y:auto;
    border-radius:16px; box-shadow:0 10px 50px rgba(0,0,0,.3);
    -webkit-overflow-scrolling:touch;
}
body.dark .profile-sheet{ background:#18181c; }

/* --- шапка с крупным фото --- */
.profile-hero{
    position:relative; width:100%; aspect-ratio:1/1;
    max-height:56vh; background:#1c2733; overflow:hidden;
    flex-shrink:0;
}
.profile-hero.no-photo{ aspect-ratio:16/10; max-height:320px; }

.profile-hero-photo{
    position:absolute; inset:0; display:none;
    background-size:cover; background-position:center top; background-repeat:no-repeat;
}
.profile-hero-fallback{
    position:absolute; inset:0; display:none;
    align-items:center; justify-content:center;
    color:#fff; font-size:96px; font-weight:600;
}
.profile-hero-shade{
    position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 28%,
                rgba(0,0,0,0) 45%, rgba(0,0,0,.75) 100%);
}
.profile-hero-close{
    position:absolute; z-index:3;
    top:calc(14px + env(safe-area-inset-top)); left:14px;
    width:40px; height:40px; border-radius:50%; border:none;
    background:rgba(0,0,0,.4); color:#fff; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    backdrop-filter:blur(10px); transition:background .2s, transform .1s;
}
.profile-hero-close:hover{ background:rgba(0,0,0,.6); }
.profile-hero-close:active{ transform:scale(.92); }

.profile-hero-info{ position:absolute; left:20px; right:20px; bottom:18px; z-index:2; }
.profile-hero-name{
    color:#fff; font-size:26px; font-weight:700; line-height:1.2;
    text-shadow:0 2px 12px rgba(0,0,0,.55);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.profile-hero-sub{
    color:rgba(255,255,255,.85); font-size:15px; margin-top:4px;
    text-shadow:0 1px 8px rgba(0,0,0,.5);
}

/* --- кнопки действий --- */
.profile-actions{
    display:flex; gap:8px; padding:14px 16px;
    background:#fff; border-bottom:1px solid #f0f0f2;
}
body.dark .profile-actions{ background:#18181c; border-bottom-color:#26262b; }

.profile-action-btn{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:5px;
    padding:11px 4px; border:none; border-radius:12px;
    background:#f4f4f5; color:#3390ec; cursor:pointer;
    font-size:12px; font-weight:500;
    transition:background .2s, transform .1s;
}
.profile-action-btn:hover{ background:#e8eef5; }
.profile-action-btn:active{ transform:scale(.96); }
.profile-action-icon{ display:flex; align-items:center; justify-content:center; height:24px; }
body.dark .profile-action-btn{ background:#26262b; color:#8ecbff; }

/* --- тело --- */
.profile-body{ padding:16px; display:flex; flex-direction:column; gap:12px; }
.profile-card{
    background:#f8f9fa; border-radius:12px; padding:4px 16px;
}
body.dark .profile-card{ background:#1f1f24; }

.profile-row{ padding:12px 0; }
.profile-row + .profile-row{ border-top:1px solid #ececf0; }
body.dark .profile-row + .profile-row{ border-top-color:#2b2b31; }
.profile-row-label{ font-size:12.5px; color:#8b959e; margin-bottom:3px; }
.profile-row-value{ font-size:16px; color:#3390ec; word-break:break-all; }

.profile-danger-btn{
    width:100%; padding:13px; border:none; border-radius:12px;
    background:#fff0f0; color:#e53935; font-size:15px; font-weight:500;
    cursor:pointer; transition:background .2s, transform .1s;
}
.profile-danger-btn:hover{ background:#ffe3e3; }
.profile-danger-btn:active{ transform:scale(.98); }
body.dark .profile-danger-btn{ background:#2a1a1c; color:#ff6b6b; }

@media (max-width:768px){
    .profile-sheet{ max-width:none; border-radius:0; min-height:100vh; }
    .profile-hero{ max-height:62vh; }
    .profile-hero-name{ font-size:24px; }
}
/* индикатор сложности пароля */
.pwd-hint{ display:none; margin:-8px 0 14px; text-align:left; }
.pwd-bar{ height:4px; background:#eceff3; border-radius:2px; overflow:hidden; }
.pwd-bar-fill{ width:8%; height:100%; background:#e53935; border-radius:2px; transition:width .25s, background .25s; }
.pwd-hint-text{ font-size:12px; color:#8b959e; margin-top:6px; }
body.dark .pwd-bar{ background:#26262b; }

/* ================= ONLINE-ТОЧКА В СПИСКЕ ================= */
.avatar-wrap{ position:relative; flex-shrink:0; }
.online-dot{
    display:none; position:absolute; right:1px; bottom:1px;
    width:13px; height:13px; border-radius:50%;
    background:#2bba5a; border:2.5px solid #fff;
}
body.dark .online-dot{ border-color:#18181c; }
.user-item.active .online-dot{ border-color:#3390ec; }
.unread-badge{
    background:#2481cc; color:#fff; border-radius:50%;
    padding:2px 7px; font-size:12px; font-weight:bold; margin-left:auto;
}

/* ================= СТРУКТУРА СООБЩЕНИЙ ================= */
.message-row{ display:flex; align-items:center; gap:8px; width:100%; }
.message-row.row-out{ justify-content:flex-end; }
.message-row.row-in { justify-content:flex-start; }

.message-bubble{
    position:relative; max-width:72%; min-width:96px;
    padding:8px 14px 22px; font-size:15px; line-height:1.4;
    word-wrap:break-word; box-shadow:0 1px 2px rgba(0,0,0,.07);
    align-self:auto;
    -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
    transition:background .2s, transform .12s;
}
.message-bubble.incoming{ background:#fff; border-radius:4px 14px 14px 14px; color:#212121; }
.message-bubble.outgoing{ background:#eeffde; border-radius:14px 14px 4px 14px; color:#212121; }
body.dark .message-bubble.incoming{ background:#26262b; color:#fff; }
body.dark .message-bubble.outgoing{ background:#1e3a24; color:#e2f7cb; }
.message-bubble.selected{ background:#d6ebff !important; }
body.dark .message-bubble.selected{ background:#20364d !important; }
.message-bubble.flash{ animation:msgFlash 1.3s ease-out; }
@keyframes msgFlash{
    0%,100%{ box-shadow:0 1px 2px rgba(0,0,0,.07); }
    25%    { box-shadow:0 0 0 3px rgba(51,144,236,.55); }
}

.msg-author{ font-size:11px; font-weight:600; color:#3390ec; display:block; margin-bottom:3px; }
.msg-forwarded{ font-size:11.5px; color:#2bba9a; font-weight:600; margin-bottom:4px; }

.msg-meta{
    position:absolute; right:10px; bottom:4px;
    display:flex; align-items:center; gap:5px;
    font-size:10px; color:#a0a0a0; white-space:nowrap; user-select:none;
}
.message-bubble.outgoing .msg-meta{ color:#8bbf6a; }
body.dark .message-bubble.outgoing .msg-meta{ color:#7fa96a; }
body.dark .message-bubble.incoming .msg-meta{ color:#6c7883; }

.msg-status{ display:flex; align-items:center; }
.msg-status.read  { color:#3390ec; }
.msg-status.unread{ color:#b9b9be; }
body.dark .msg-status.read{ color:#5fb0f5; }

.msg-image{ max-width:100%; max-height:230px; border-radius:8px; display:block; margin-top:2px; cursor:pointer; }
.msg-file{ display:flex; align-items:center; gap:8px; padding:2px 0; }
.msg-file-icon{ font-size:22px; }
.msg-file a{ color:#2481cc; font-weight:500; text-decoration:none; word-break:break-all; }

/* ---- цитата ответа ---- */
.msg-quote{
    border-left:3px solid #3390ec; padding:4px 8px; margin:2px 0 6px;
    background:rgba(51,144,236,.09); border-radius:0 6px 6px 0; cursor:pointer;
}
.msg-quote-name{ display:block; font-size:11.5px; font-weight:600; color:#3390ec; }
.msg-quote-text{
    display:block; font-size:13px; color:#5b6b7a;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:230px;
}
body.dark .msg-quote{ background:rgba(51,144,236,.16); }
body.dark .msg-quote-text{ color:#9fb0c0; }

/* ---- чекбокс выбора ---- */
.msg-check{
    flex-shrink:0; width:22px; height:22px; border-radius:50%;
    border:2px solid #c3c9d1; display:flex; align-items:center; justify-content:center;
    color:transparent; transition:background .15s, border-color .15s, color .15s;
}
.msg-check.checked{ background:#3390ec; border-color:#3390ec; color:#fff; }
.messages-container.selection-mode .message-bubble{ cursor:pointer; }

/* ================= КОНТЕКСТНОЕ МЕНЮ ================= */
#msg-ctx-backdrop{ position:fixed; inset:0; z-index:2500; background:transparent; }
#msg-ctx-menu{
    position:fixed; z-index:2600; min-width:186px;
    background:#fff; border-radius:14px; overflow:hidden;
    box-shadow:0 12px 40px rgba(0,0,0,.22); border:1px solid rgba(0,0,0,.06);
    opacity:0; transform:scale(.94); transform-origin:top center;
    transition:opacity .13s, transform .13s;
}
#msg-ctx-menu.visible{ opacity:1; transform:scale(1); }
.msg-ctx-item{
    display:flex; align-items:center; gap:12px; width:100%;
    padding:13px 16px; border:none; background:none;
    font-size:15px; color:#212121; cursor:pointer; text-align:left;
}
.msg-ctx-item:hover{ background:#f4f4f5; }
.msg-ctx-item.danger{ color:#e53935; }
.msg-ctx-icon{ width:20px; text-align:center; font-size:17px; color:#3390ec; }
.msg-ctx-item.danger .msg-ctx-icon{ color:#e53935; }
body.dark #msg-ctx-menu{ background:#242429; border-color:#33333a; }
body.dark .msg-ctx-item{ color:#f0f0f2; }
body.dark .msg-ctx-item:hover{ background:#2f2f36; }

/* ================= ПАНЕЛЬ ОТВЕТА ================= */
#reply-bar{
    display:flex; align-items:center; gap:10px;
    padding:7px 10px; background:#f0f6fc; border-radius:10px;
    border-left:3px solid #3390ec;
}
.reply-bar-icon{ color:#3390ec; font-size:17px; flex-shrink:0; }
.reply-bar-body{ flex:1; min-width:0; cursor:pointer; }
.reply-bar-name{ font-size:12.5px; font-weight:600; color:#3390ec; }
.reply-bar-text{
    font-size:13px; color:#5b6b7a;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.reply-bar-close{
    background:none; border:none; color:#8b959e; font-size:17px;
    cursor:pointer; padding:2px 6px; flex-shrink:0;
}
body.dark #reply-bar{ background:#1f2733; }
body.dark .reply-bar-text{ color:#9fb0c0; }

/* ================= ПАНЕЛЬ ВЫБОРА ================= */
#selection-bar{
    position:absolute; left:0; right:0; top:0; z-index:60;
    display:none; align-items:center; gap:12px;
    padding:12px 16px; background:#fff;
    border-bottom:1px solid #f0f0f2; box-shadow:0 2px 10px rgba(0,0,0,.06);
    padding-top:calc(12px + env(safe-area-inset-top));
}
#selection-bar.visible{ display:flex; }
.sel-count{ flex:1; font-size:15px; font-weight:600; color:#212121; }
.sel-btn{
    background:none; border:none; cursor:pointer; color:#3390ec;
    font-size:19px; display:flex; align-items:center; gap:7px;
    padding:6px 8px; border-radius:8px;
}
.sel-btn:hover{ background:#f0f6fc; }
.sel-primary{ font-size:14px; font-weight:600; }
body.dark #selection-bar{ background:#18181c; border-bottom-color:#26262b; }
body.dark .sel-count{ color:#fff; }
body.dark .sel-btn:hover{ background:#26262b; }

/* ================= МОДАЛКА ПЕРЕСЫЛКИ ================= */
.forward-content{ width:400px; max-width:calc(100vw - 32px); }
.forward-list{
    max-height:46vh; overflow-y:auto; margin-bottom:12px;
    border:1px solid #ececf0; border-radius:10px;
    -webkit-overflow-scrolling:touch;
}
.forward-row{
    display:flex; align-items:center; gap:12px; padding:9px 12px; cursor:pointer;
    border-bottom:1px solid #f4f4f7;
}
.forward-row:last-child{ border-bottom:none; }
.forward-row:hover{ background:#f4f8fd; }
.forward-row .user-avatar{ width:40px; height:40px; font-size:15px; }
.forward-row-body{ min-width:0; }
.forward-row-title{ font-size:15px; font-weight:500; color:#212121;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.forward-row-sub{ font-size:12.5px; color:#8b959e;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.forward-empty{ padding:20px; text-align:center; color:#8b959e; font-size:14px; }
body.dark .forward-list{ border-color:#2b2b31; }
body.dark .forward-row{ border-bottom-color:#232329; }
body.dark .forward-row:hover{ background:#26262b; }
body.dark .forward-row-title{ color:#fff; }

/* ================= TOAST ================= */
#min-toast{
    position:fixed; left:50%; transform:translate(-50%,20px);
    bottom:calc(90px + env(safe-area-inset-bottom)); z-index:4000;
    background:rgba(20,22,26,.92); color:#fff;
    padding:11px 20px; border-radius:22px; font-size:14px;
    opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
    backdrop-filter:blur(8px); max-width:80vw; text-align:center;
}
#min-toast.visible{ opacity:1; transform:translate(-50%,0); }

/* ================= СВАЙП НАЗАД ================= */
.app-container.chat-open.swiping #app-sidebar{
    display:flex !important; position:absolute; inset:0; z-index:0;
}
.app-container.chat-open.swiping #app-chat-area{
    position:relative; z-index:1; will-change:transform;
    box-shadow:-10px 0 30px rgba(0,0,0,.18);
}
.chat-area{ position:relative; }

@media (max-width:768px){
    .message-bubble{ max-width:84%; }
    .msg-quote-text{ max-width:180px; }
    .forward-content{ width:100%; }
}

/* блокируем нативный свайп-назад Safari внутри приложения */
html, body{ overscroll-behavior-x:none; overflow-x:hidden; }
.app-container{ overscroll-behavior:contain; touch-action:pan-y; }
.messages-container{ overscroll-behavior-y:contain; touch-action:pan-y; }

/* ФИКС: у активного контакта не стираем background-image аватарки */
.user-item.active .user-avatar{
    background: unset !important;
    background-color: #fff !important;
    color: #3390ec !important;
}
.user-item.active .user-avatar[style*="background-image"]{
    background-color: transparent !important;
}



/* ================= БЛОКИРОВКА ВЫДЕЛЕНИЯ ТЕКСТА В ЧАТЕ ================= */
.messages-container,
.messages-container *{
    -webkit-user-select:none !important;
    -moz-user-select:none !important;
    -ms-user-select:none !important;
    user-select:none !important;
    -webkit-touch-callout:none !important;
    -webkit-user-drag:none;
}
.messages-container img{ pointer-events:auto; }

/* ================= ПОЛЕ ВВОДА (contenteditable) ================= */
#msg-input[contenteditable]{
    flex:1; min-height:22px; max-height:120px; overflow-y:auto;
    padding:8px 0; font-size:15px; line-height:1.35;
    outline:none; border:none; background:transparent;
    color:#212121; word-break:break-word; white-space:pre-wrap;
    -webkit-user-select:text; user-select:text;
}
#msg-input[contenteditable]:empty:before{
    content:attr(data-placeholder);
    color:#8b959e; pointer-events:none; display:block;
}
body.dark #msg-input[contenteditable]{ color:#fff; }

/* ================= РЕАКЦИИ ================= */
.msg-reactions{ display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.reaction-chip{
    display:flex; align-items:center; gap:4px;
    padding:3px 8px; border-radius:12px; border:none; cursor:pointer;
    background:rgba(51,144,236,.11); font-size:13px; line-height:1;
    transition:background .15s, transform .1s;
}
.reaction-chip:active{ transform:scale(.92); }
.reaction-chip.mine{ background:rgba(51,144,236,.28); box-shadow:inset 0 0 0 1.5px rgba(51,144,236,.55); }
.reaction-emoji{ font-size:15px; }
.reaction-count{ font-size:12px; font-weight:600; color:#3390ec; }
body.dark .reaction-chip{ background:rgba(51,144,236,.2); }
body.dark .reaction-chip.mine{ background:rgba(51,144,236,.38); }
body.dark .reaction-count{ color:#8ecbff; }

/* ================= ПАНЕЛЬ ЭМОДЗИ В МЕНЮ ================= */
#msg-ctx-menu.emoji-mode{ min-width:262px; }
.emoji-head{
    display:flex; align-items:center; gap:8px;
    padding:9px 12px; font-size:13.5px; font-weight:600; color:#8b959e;
    border-bottom:1px solid #f0f0f2;
}
.emoji-back{
    background:none; border:none; font-size:22px; line-height:1;
    color:#3390ec; cursor:pointer; padding:0 4px;
}
.emoji-grid{
    display:grid; grid-template-columns:repeat(5,1fr);
    gap:2px; padding:8px;
}
.emoji-btn{
    background:none; border:none; cursor:pointer;
    font-size:25px; line-height:1; padding:8px 0; border-radius:10px;
    transition:background .15s, transform .1s;
}
.emoji-btn:hover{ background:#f0f6fc; }
.emoji-btn:active{ transform:scale(1.25); }
.emoji-btn.active{ background:rgba(51,144,236,.2); }
body.dark .emoji-head{ border-bottom-color:#2f2f36; }
body.dark .emoji-btn:hover{ background:#2f2f36; }