:root { --bg-t: #1e1f22; --bg-s: #2b2d31; --bg-p: #313338; --bg-i: #383a40; --accent: #5865F2; --text: #dbdee1; --muted: #949ba4; --green: #23a559; --red: #da373c; --own-bubble: #3a40a8; --yellow: #f5c518; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
body { margin: 0; background: var(--bg-p); color: var(--text); font-family: 'Comfortaa', 'Roboto', sans-serif; height: 100vh; display: flex; overflow: hidden; }
.sidebar { width: 260px; background: var(--bg-s); display: flex; flex-direction: column; flex-shrink: 0; transition: 0.2s; z-index: 1000; }
.sidebar-header { padding: 15px; border-bottom: 1px solid #1e1f22; box-shadow: 0 1px 2px rgba(0,0,0,0.2); display: flex; gap: 5px; flex-direction: column; }
.sidebar-tabs { display: flex; gap: 4px; }
.sidebar-tab { flex: 1; padding: 6px; background: var(--bg-t); border: none; color: var(--muted); cursor: pointer; border-radius: 4px; font-size: 12px; font-weight: 500; font-family: inherit; }
.sidebar-tab.active { background: var(--accent); color: #fff; }
.contacts-list, .calls-list { flex: 1; overflow-y: auto; padding: 10px; }
.calls-list { display: none; }
.contact-item, .call-item { padding: 8px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 10px; margin-bottom: 2px; transition: 0.1s; color: var(--muted); }
.contact-item:hover, .call-item:hover { background: #35373c; color: var(--text); }
.contact-item.active { background: #404249; color: #fff; }
.call-item { font-size: 13px; flex-direction: column; align-items: flex-start; gap: 4px; }
.call-item-row { display: flex; align-items: center; gap: 8px; width: 100%; }
.call-item-info { flex: 1; min-width: 0; }
.call-item-name { font-weight: 500; color: #fff; }
.call-item-meta { font-size: 11px; color: var(--muted); display: flex; gap: 6px; align-items: center; }

/* ========== АДАПТИВНОСТЬ ========== */

/* Очень маленькие экраны (старые телефоны) */
@media (max-width: 360px) {
    .sidebar { width: 90%; }
    .msg-row { max-width: 95%; }
    .msg-bubble { font-size: 13px; }
    .chat-header { font-size: 14px; }
    .input-field { font-size: 14px; }
    .video-small { width: 80px !important; height: 110px !important; }
}

/* Мобильные телефоны */
@media (max-width: 480px) {
    .sidebar { position: fixed; left: -100%; width: 85%; height: 100%; }
    .sidebar.mobile-open { left: 0; box-shadow: 5px 0 15px rgba(0,0,0,0.5); }
    .mobile-nav-btn { display: flex !important; }
    .chat-main { width: 100vw; }
    .msg-row { max-width: 90%; }
    .msg-container { padding: 10px; }
    .chat-header { padding: 0 10px; }
    .input-area { padding: 0 10px 10px; }
    .modal-card { width: 95%; padding: 15px; }
    .video-container { height: 200px; }
    .call-controls-bar { gap: 8px; }
    .call-ctrl-btn { width: 38px; height: 38px; }
    .msg-bubble { font-size: 14px; padding: 6px 10px; }
}

/* Маленькие телефоны / крупные мобильные */
@media (min-width: 481px) and (max-width: 640px) {
    .sidebar { position: fixed; left: -260px; height: 100%; }
    .sidebar.mobile-open { left: 0; box-shadow: 5px 0 15px rgba(0,0,0,0.5); }
    .mobile-nav-btn { display: flex !important; }
    .chat-main { width: 100vw; }
    .msg-row { max-width: 85%; }
    .msg-container { padding: 15px; }
}

/* Средние телефоны и маленькие планшеты */
@media (min-width: 641px) and (max-width: 768px) {
    .sidebar { position: fixed; left: -260px; height: 100%; }
    .sidebar.mobile-open { left: 0; box-shadow: 5px 0 15px rgba(0,0,0,0.5); }
    .mobile-nav-btn { display: flex !important; }
    .chat-main { width: 100vw; }
    .msg-row { max-width: 80%; }
}

/* Планшеты */
@media (min-width: 769px) and (max-width: 1024px) {
    .sidebar { width: 240px; }
    .msg-row { max-width: 75%; }
    .msg-container { padding: 20px 30px; }
}

/* ✅ ОБЫЧНЫЙ ДЕСКТОП (1025–1919px) — сюда попадает 1366, 1440, 1600, 1680 */
@media (min-width: 1025px) and (max-width: 1919px) {
    .sidebar { width: 260px; }
    .msg-row { max-width: 70%; }
    .msg-container { padding: 20px; }
}

/* ✅ FULL HD (1920–2559px) — твой монитор 1920x1080 */
@media (min-width: 1920px) and (max-width: 2559px) {
    .sidebar { width: 280px; }
    .msg-row { max-width: 65%; }
    .msg-container { padding: 20px 30px; }
}

/* 2K / 4K и ультраширокие (2560px+) */
@media (min-width: 2560px) {
    .sidebar { width: 320px; }
    .msg-row { max-width: 55%; }
    .msg-container { padding: 30px 50px; }
    .msg-bubble { font-size: 16px; }
}

/* Альбомная ориентация на мобильных */
@media (max-width: 768px) and (orientation: landscape) {
    .video-container { height: 180px; }
    .modal-card { max-height: 95vh; }
    .call-controls-bar { flex-wrap: nowrap; overflow-x: auto; }
}

/* ================================== */

.user-bar { background: #232428; padding: 8px; display: flex; align-items: center; gap: 10px; }
.ava { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--accent); flex-shrink: 0; }
.chat-main { flex: 1; display: flex; flex-direction: column; background: var(--bg-p); }
.chat-header { height: 48px; border-bottom: 1px solid #26272d; display: flex; align-items: center; padding: 0 16px; font-weight: bold; gap: 10px; justify-content: space-between; }
.chat-title-group { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.chat-title-group > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex-shrink: 0; transition: background 0.3s; }
.status-dot.online { background: var(--green); }
.status-dot.offline { background: var(--red); }
.mobile-nav-btn { display: none; background: none; border: none; color: white; cursor: pointer; padding: 5px; }
.mobile-nav-btn svg { width: 24px; height: 24px; fill: currentColor; }
.msg-container { flex: 1; overflow-y: auto; padding: 20px; }
.msg-row { display: flex; gap: 12px; margin-bottom: 14px; }
.msg-content { position: relative; min-width: 0; max-width: 75%; display: flex; flex-direction: column; align-items: flex-start; }
.msg-row.own { flex-direction: row-reverse; }
.msg-row.own .msg-content { align-items: flex-end; }
.msg-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.msg-name { font-weight: 500; color: #fff; font-size: 14px; }
.msg-time { font-size: 11px; color: var(--muted); }
.msg-edited { font-size: 10px; color: var(--muted); font-style: italic; margin-left: 4px; }
.msg-bubble { display: inline-block; width: fit-content; max-width: 100%; padding: 8px 12px; border-radius: 12px; background: var(--bg-i); line-height: 1.4; white-space: pre-wrap; word-break: break-word; position: relative; }
.msg-status { font-size: 12px; color: var(--muted); margin-left: 6px; }
.msg-status.read { color: #4fc3f7; }
.msg-row.own .msg-header { flex-direction: row-reverse; }
.msg-row.own .msg-bubble { background: var(--own-bubble); color: #fff; }
.msg-row.own .msg-name { display: none; }
.file-box { background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.1); padding: 10px; border-radius: 8px; display: inline-flex; align-items: center; gap: 8px; margin-top: 5px; color: #4fc3f7; text-decoration: none; }
.msg-edit-btn { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,0.5); border: none; color: #fff; width: 24px; height: 24px; border-radius: 4px; cursor: pointer; display: none; align-items: center; justify-content: center; padding: 0; z-index: 5; }
.msg-edit-btn svg { width: 14px; height: 14px; fill: currentColor; }
.msg-row.own:hover .msg-edit-btn.can-edit, .msg-row.own .msg-edit-btn.can-edit.touch-active { display: flex; }
.msg-edit-input { width: 100%; background: rgba(0,0,0,0.3); border: 1px solid var(--accent); color: #fff; padding: 6px 8px; border-radius: 6px; font-size: 14px; font-family: inherit; resize: none; outline: none; }
.search-bar { display: none; padding: 8px 16px; background: var(--bg-s); border-bottom: 1px solid #26272d; align-items: center; gap: 8px; }
.search-bar.active { display: flex; }
.search-input { flex: 1; background: var(--bg-t); border: 1px solid #444; color: #fff; padding: 8px 12px; border-radius: 6px; font-size: 14px; outline: none; font-family: inherit; }
.search-input:focus { border-color: var(--accent); }
.search-count { color: var(--muted); font-size: 12px; white-space: nowrap; }
.search-close { background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px; display: flex; align-items: center; }
.search-close:hover { color: #fff; }
.search-close svg { width: 18px; height: 18px; fill: currentColor; }
.highlight { background: var(--yellow); color: #000; padding: 0 2px; border-radius: 2px; }
.system-msg { text-align: center; margin: 16px 0; font-size: 12px; color: var(--muted); }
.system-msg-bubble { display: inline-block; background: var(--bg-s); padding: 6px 12px; border-radius: 12px; }
.typing-indicator { padding: 4px 16px; font-size: 12px; color: var(--muted); font-style: italic; min-height: 20px; }
.typing-dots span { animation: blink 1.4s infinite both; }
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%,80%,100%{opacity:.2} 40%{opacity:1} }
.offline-banner { background: var(--red); color: white; text-align: center; padding: 6px; font-size: 13px; display: none; }
.offline-banner.active { display: block; }
.input-area { padding: 0 16px 16px; }
.input-wrapper { background: var(--bg-i); border-radius: 8px; padding: 10px; display: flex; align-items: center; gap: 12px; }
.input-field { flex: 1; background: transparent; border: none; color: #fff; font-size: 15px; font-family: inherit; }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.85); display: none; align-items: center; justify-content: center; z-index: 2000; }
.modal.active { display: flex; }
.modal-card { background: var(--bg-p); padding: 25px; border-radius: 8px; width: 400px; max-width: 90%; box-shadow: 0 4px 15px rgba(0,0,0,0.5); max-height: 90vh; overflow-y: auto; }
.d-input { width: 100%; background: var(--bg-t); border: none; padding: 12px; color: #fff; border-radius: 4px; margin: 8px 0 16px; font-family: inherit; }
.btn-p { background: var(--accent); border: none; color: #fff; padding: 10px 20px; border-radius: 3px; cursor: pointer; width: 100%; font-weight: 500; font-family: inherit; }
.btn-p:hover { filter: brightness(1.1); }
.btn-icon { cursor: pointer; color: var(--muted); background: none; border: none; display: flex; align-items: center; justify-content: center; padding: 5px; transition: color 0.2s; }
.btn-icon:hover { color: #fff; }
.btn-icon svg { width: 24px; height: 24px; fill: currentColor; }
.progress-container { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,0.1); z-index: 3000; display: none; }
.progress-bar { height: 100%; background: var(--accent); width: 0%; transition: 0.1s; }
.call-buttons { display: none; gap: 10px; }
.call-buttons.active { display: flex; }
.video-container { position: relative; height: 300px; background: #000; border-radius: 8px; overflow: hidden; margin-bottom: 20px; }
.video-container.audio-only { background: var(--bg-s); height: auto; min-height: 180px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; }
.video-container.audio-only #remoteVideo, .video-container.audio-only #localVideo { display: none; }
.audio-only-avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: var(--accent); }
.audio-only-name { color: var(--text); font-size: 18px; font-weight: 500; }
.video-main { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; z-index: 1; cursor: pointer; background: #000; }
.video-small { position: absolute; bottom: 16px; right: 16px; width: 110px !important; height: 150px !important; object-fit: cover; border-radius: 8px; z-index: 2; box-shadow: 0 4px 12px rgba(0,0,0,0.6); background: #222; cursor: pointer; border: 2px solid rgba(255,255,255,0.15); }
.call-controls-bar { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.call-ctrl-btn { background: var(--bg-i); border: none; color: #fff; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.call-ctrl-btn:hover { background: #4a4d55; }
.call-ctrl-btn.active { background: var(--red); }
.call-ctrl-btn svg { width: 22px; height: 22px; fill: currentColor; }
.devices-panel { display: none; background: var(--bg-s); border-radius: 8px; padding: 12px; margin-bottom: 10px; }
.devices-panel.active { display: block; }
.devices-panel label { display: block; font-size: 11px; color: var(--muted); margin: 6px 0 2px; text-transform: uppercase; }
.devices-panel select { width: 100%; background: var(--bg-t); color: #fff; border: 1px solid #444; padding: 6px; border-radius: 4px; font-size: 13px; font-family: inherit; }
.empty-state { text-align: center; color: var(--muted); padding: 40px 20px; font-size: 14px; }
.verified-badge { width: 15px; height: 15px; flex-shrink: 0; display: inline-block; vertical-align: -3px; margin-left: 4px; user-select: none; pointer-events: none; }
.verified-badge svg { width: 100%; height: 100%; display: block; }
.admin-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-bottom: 1px solid var(--bg-i); }
.admin-row-info { flex: 1; min-width: 0; }
.admin-row-name { color: #fff; font-size: 13px; font-weight: 500; display: flex; align-items: center; }
.admin-row-id { font-size: 11px; color: var(--muted); }
.btn-small { padding: 6px 12px; font-size: 12px; width: auto; border-radius: 4px; border: none; color: #fff; cursor: pointer; font-family: inherit; }
.btn-small.ok { background: var(--green); }
.btn-small.danger { background: var(--red); }

/* ===== FIX: прижим своих сообщений к правому краю ===== */
.msg-row.own { margin-left: auto; flex-direction: row-reverse; }

/* ===== FIX: мобильные браузеры (100vh vs видимая область) ===== */
body { height: 100vh; height: 100dvh; }
.chat-header { flex-shrink: 0; }
.input-area { flex-shrink: 0; }
.typing-indicator { flex-shrink: 0; }
.msg-container { min-height: 0; }

/* ===== FIX: компактный низ на телефонах ===== */
@media (max-width: 768px) {
    .input-area { padding: 0 8px 8px; }
    .input-wrapper { padding: 8px; }
    .chat-main { height: 100%; min-height: 0; }
}
@media (max-width: 768px) and (orientation: landscape) {
    .msg-container { padding: 8px; }
    .typing-indicator { min-height: 14px; padding: 2px 10px; }
}