* { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
body { background-color: #0f141c; color: #f5f5f5; height: 100vh; height: 100dvh; display: flex; overflow: hidden; }

#auth-screen { width: 100%; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #17212b; padding: 20px; }
.tg-logo { font-size: 60px; color: #5288c1; margin-bottom: 20px; animation: bounce 2s infinite; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
#auth-screen h2 { font-size: 24px; margin-bottom: 8px; color: #fff; }
#auth-screen p { color: #8596a5; font-size: 14px; margin-bottom: 24px; text-align: center; max-width: 320px; }
.input-group { width: 100%; max-width: 320px; margin-bottom: 14px; text-align: left; }
.input-group label { display: block; font-size: 12px; color: #8596a5; margin-bottom: 6px; font-weight: 500; }
.input-group input { width: 100%; padding: 12px 16px; background: #242f3d; border: 1px solid #2b3847; border-radius: 12px; color: #fff; font-size: 15px; outline: none; transition: border 0.2s; }
.input-group input:focus { border-color: #5288c1; }
.btn-primary { width: 100%; max-width: 320px; padding: 12px; background: #5288c1; color: #fff; border: none; border-radius: 12px; font-size: 15px; font-weight: 600; cursor: pointer; margin-top: 6px; transition: background 0.2s; }
.btn-primary:hover { background: #4075b0; }
.btn-secondary { background: none; border: none; color: #5288c1; font-size: 14px; cursor: pointer; margin-top: 15px; }
#auth-error { color: #e53935; font-size: 13px; margin-bottom: 12px; text-align: center; }

#app-screen { display: none; width: 100%; height: 100vh; height: 100dvh; display: flex; position: relative; }
.sidebar { width: 340px; min-width: 280px; background: #17212b; border-right: 1px solid #0f141c; display: flex; flex-direction: column; height: 100%; z-index: 2; }
.sidebar-header { padding: 14px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #242f3d; }
.my-profile { display: flex; align-items: center; gap: 12px; cursor: pointer; overflow: hidden; }
.my-profile-name { font-size: 15px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.my-profile-phone { font-size: 12px; color: #8596a5; }
.header-actions { display: flex; gap: 8px; }
.icon-btn { background: #242f3d; border: none; color: #8596a5; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; flex-shrink: 0; }
.icon-btn:hover { background: #2b3847; color: #fff; }

.search-box { padding: 10px 14px; display: flex; gap: 8px; }
.search-box input { flex: 1; padding: 8px 14px; background: #242f3d; border: none; border-radius: 10px; color: #fff; font-size: 13px; outline: none; }
.add-user-btn { background: #242f3d; border: none; color: #5288c1; padding: 0 12px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.add-user-btn:hover { background: #2b3847; }

.chat-list { flex: 1; overflow-y: auto; }
.chat-item { display: flex; align-items: center; padding: 10px 14px; gap: 12px; cursor: pointer; transition: background 0.15s; position: relative; }
.chat-item:hover { background: #202b36; }
.chat-item.active { background: #2b5278; }
.avatar { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; color: #fff; font-size: 18px; flex-shrink: 0; background-size: cover; background-position: center; position: relative; }
.online-dot { width: 12px; height: 12px; background: #4caf50; border: 2px solid #17212b; border-radius: 50%; position: absolute; bottom: 0; right: 0; }
.chat-info { flex: 1; overflow: hidden; border-bottom: 1px solid #242f3d; padding-bottom: 10px; }
.chat-top { display: flex; justify-content: space-between; margin-bottom: 4px; }
.chat-name { font-size: 15px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-phone-tag { font-size: 11px; color: #7f91a4; flex-shrink: 0; }
.chat-preview-row { display: flex; justify-content: space-between; align-items: center; }
.chat-preview { font-size: 13px; color: #8596a5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.unread-badge { background: #5288c1; color: #fff; font-size: 11px; padding: 2px 6px; border-radius: 10px; font-weight: 600; flex-shrink: 0; }

.chat-area { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    background: #0e1621; 
    position: relative; 
    height: 100vh; 
    height: 100dvh; 
    overflow: hidden; 
}
.empty-chat { flex: 1; display: flex; align-items: center; justify-content: center; color: #7f91a4; font-size: 14px; text-align: center; padding: 20px; }

#active-chat-container { 
    display: none; 
    flex-direction: column; 
    width: 100%; 
    height: 100%; 
    flex: 1;
    min-height: 0;
}

.chat-header {
    padding: 10px 16px;
    background: #17212b;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #0f141c;
    z-index: 3;
    flex-shrink: 0;
    height: 60px;
}
.chat-header-title {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-header-status {
    font-size: 12px;
    color: #8596a5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-header-status.online { color: #5288c1; }

/* Кнопка назад в шапке чата (видна всегда на мобильных или по логике) */
.back-btn { background: none; border: none; color: #5288c1; font-size: 22px; cursor: pointer; display: none; padding: 4px 8px 4px 0; align-items: center; justify-content: center; }

.messages-box {
    flex: 1;
    width: 100%;
    padding: 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background-image: radial-gradient(#1e2c3a 1px, transparent 1px);
    background-size: 20px 20px;
    min-height: 0; /* Важно для корректного сжатия флекса */
}
.msg { max-width: 75%; padding: 8px 12px; border-radius: 12px; font-size: 14px; line-height: 1.4; position: relative; word-break: break-word; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.msg.in { background: #182533; color: #fff; align-self: flex-start; border-bottom-left-radius: 4px; }
.msg.out { background: #2b5278; color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.msg-meta { display: flex; align-items: center; justify-content: flex-end; gap: 4px; font-size: 10px; color: rgba(255,255,255,0.6); margin-top: 4px; float: right; margin-left: 8px; }
.msg-img { max-width: 240px; max-height: 240px; border-radius: 8px; display: block; margin-bottom: 4px; cursor: pointer; object-fit: cover; }
.msg-file { color: #fff; text-decoration: underline; font-size: 13px; display: block; margin-bottom: 4px; }
.msg-actions { position: absolute; right: 8px; top: 4px; display: none; gap: 6px; background: rgba(0,0,0,0.5); padding: 2px 6px; border-radius: 6px; font-size: 11px; cursor: pointer; }
.msg:hover .msg-actions { display: flex; }

#composer-bar { display: none; padding: 8px 16px; background: #17212b; border-top: 1px solid #242f3d; align-items: center; justify-content: space-between; }
#composer-text { font-size: 13px; color: #8596a5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }

.chat-input-bar {
    padding: 10px 16px;
    background: #17212b;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    border-top: 1px solid #1a2430;
}
.chat-input-bar input[type="text"] { flex: 1; padding: 10px 14px; background: #242f3d; border: none; border-radius: 12px; color: #fff; font-size: 14px; outline: none; }
.attach-btn { background: none; border: none; color: #8596a5; font-size: 20px; cursor: pointer; transition: color 0.2s; }
.attach-btn:hover { color: #fff; }
.send-btn { background: #5288c1; border: none; width: 40px; height: 40px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s; flex-shrink: 0; }
.send-btn:hover { background: #4075b0; }

/* Модальные окна */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); align-items: center; justify-content: center; z-index: 1000; padding: 16px; }
.modal-card { background: #17212b; width: 100%; max-width: 360px; padding: 20px; border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
.modal-card h3 { font-size: 18px; color: #fff; margin-bottom: 12px; }
.modal-avatar-wrap { width: 80px; height: 80px; border-radius: 50%; margin: 0 auto 12px auto; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.modal-btns { display: flex; gap: 10px; margin-top: 20px; }
.btn-cancel { background: #242f3d; border: none; color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 14px; cursor: pointer; }
.found-results { max-height: 200px; overflow-y: auto; margin-top: 10px; }
.found-item { display: flex; align-items: center; justify-content: space-between; padding: 8px; border-radius: 8px; background: #242f3d; margin-bottom: 6px; }
.found-item-left { display: flex; align-items: center; gap: 10px; flex: 1; overflow: hidden; }
.btn-chat-start { background: #5288c1; border: none; color: #fff; padding: 6px 12px; border-radius: 8px; font-size: 12px; cursor: pointer; flex-shrink: 0; }

/* Просмотрщик картинок на весь экран */
#image-viewer-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 2000; align-items: center; justify-content: center; flex-direction: column; }
#image-viewer-modal img { max-width: 90%; max-height: 85vh; border-radius: 8px; object-fit: contain; }
.image-viewer-close { position: absolute; top: 20px; right: 20px; background: rgba(255,255,255,0.2); border: none; color: #fff; font-size: 24px; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }

/* Универсальная адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .sidebar { width: 100%; position: absolute; left: 0; top: 0; transition: transform 0.2s ease; }
    .sidebar.hidden-mobile { transform: translateX(-100%); }
    
    .chat-area { width: 100%; position: absolute; left: 0; top: 0; z-index: 5; transform: translateX(100%); transition: transform 0.2s ease; }
    .chat-area:not(.hidden-mobile) { transform: translateX(0); }
    .sidebar:not(.hidden-mobile) { transform: translateX(0); }
    
.back-btn {
    background: none;
    border: none;
    color: #5288c1;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    flex-shrink: 0;
}
}