* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --success-color: #28a745;
  --danger-color: #dc3545;
  --light-bg: #f8f9fa;
  --border-color: #dee2e6;
  --text-color: #212529;
  --shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --android-lime: #9ACD32; 
}

body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; background-color: #fff; color: var(--text-color); -webkit-tap-highlight-color: transparent; }

/* === АВАТАРКИ === */
.mini-avatar, .header-avatar, .chat-list-avatar, .search-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 12px;
    flex-shrink: 0;
}
.chat-list-avatar { width: 48px; height: 48px; }
.mini-avatar { width: 35px; height: 35px; margin-right: 10px; cursor: pointer; }

/* Стили для текстовой аватарки (буква на цветном фоне) */
.letter-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    user-select: none;
}

/* Размеры шрифтов букв для разных аватарок */
.mini-avatar.letter-avatar { font-size: 16px; }
.header-avatar.letter-avatar { font-size: 18px; }
.chat-list-avatar.letter-avatar { font-size: 22px; }
.search-avatar.letter-avatar { font-size: 18px; }
.settings-avatar.letter-avatar { font-size: 40px; }

/* Клик по профилю в шапке сайдбара */
.profile-header-click { display: flex; align-items: center; cursor: pointer; }

/* === АВТОРИЗАЦИЯ === */
.container { width: 100%; height: 100vh; }
#auth-container { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary-color), #0056b3); }
.auth-wrapper { width: 100%; max-width: 400px; padding: 20px; }
.auth-form { background: white; padding: 40px; border-radius: 12px; box-shadow: var(--shadow); }
.auth-form h1 { text-align: center; margin-bottom: 30px; color: var(--primary-color); font-size: 28px; }
.form-tabs { display: flex; gap: 10px; margin-bottom: 20px; border-bottom: 2px solid var(--border-color); }
.tab-btn { flex: 1; padding: 10px; background: none; border: none; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--secondary-color); border-bottom: 3px solid transparent; transition: all 0.3s; }
.tab-btn.active { color: var(--primary-color); border-bottom-color: var(--primary-color); }
.tab-content { display: none; }
.tab-content.active { display: block; }
.input { width: 100%; padding: 12px; margin-bottom: 12px; border: 1px solid var(--border-color); border-radius: 6px; font-size: 14px; transition: border-color 0.3s; }
.input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1); }
.btn { width: 100%; padding: 12px; border: none; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.3s; }
.btn-primary { background-color: var(--primary-color); color: white; }
.btn-primary:hover { background-color: #0056b3; }
.error-message { margin-top: 15px; padding: 12px; background-color: #f8d7da; color: #721c24; border-radius: 6px; display: none; font-size: 14px; }
.error-message.show { display: block; }

/* === МЕССЕНДЖЕР === */
.messenger { display: flex; height: 100vh; background-color: var(--light-bg); position: relative; overflow: hidden; }
.sidebar { width: 350px; background: white; border-right: 1px solid var(--border-color); display: flex; flex-direction: column; box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease; }
.sidebar-header { padding: 15px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; }
.sidebar-header h2 { font-size: 20px; color: var(--text-color); }
.header-buttons { display: flex; gap: 8px; }
.btn-icon { background: none; border: none; font-size: 20px; cursor: pointer; padding: 6px 10px; border-radius: 6px; transition: background-color 0.3s; }
.btn-icon:hover { background-color: var(--light-bg); }
.input-search { margin: 12px; padding: 10px; border: 1px solid var(--border-color); border-radius: 6px; font-size: 14px; width: calc(100% - 24px); }
.users-list-container { padding: 10px 0; border-bottom: 1px solid var(--border-color); }
.users-list { max-height: 200px; overflow-y: auto; }

/* Элемент пользователя в поиске и чатах */
.user-item, .chat-item { 
    padding: 12px 15px; 
    cursor: pointer; 
    transition: background-color 0.2s; 
    display: flex; 
    align-items: center; 
    border-bottom: 1px solid var(--border-color); 
}
.user-info, .chat-info-block { flex: 1; min-width: 0; }
.user-name, .chat-username { font-weight: 500; font-size: 14px; }
.user-status-indicator { width: 8px; height: 8px; border-radius: 50%; background-color: var(--secondary-color); }
.user-status-indicator.online { background-color: var(--success-color); }

.chats-list { flex: 1; overflow-y: auto; }
.chat-item.active { background-color: rgba(0, 123, 255, 0.1); border-left: 4px solid var(--primary-color); }
.chat-header-info { display: flex; justify-content: space-between; align-items: center; }
.chat-time { font-size: 12px; color: var(--secondary-color); }
.chat-preview { font-size: 13px; color: var(--secondary-color); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* === ОКНО ЧАТА === */
.main-content { flex: 1; display: flex; flex-direction: column; background: white; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; height: 100%; }
.no-chat { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--secondary-color); }
.no-chat-icon { font-size: 60px; margin-bottom: 15px; }
.chat-container { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.chat-header { padding: 15px 20px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; background: white; z-index: 5; flex-shrink: 0; }
.chat-info h3 { margin: 0; font-size: 16px; }
.status { font-size: 12px; color: var(--secondary-color); margin-top: 4px; }
.status.online { color: var(--success-color); }
.btn-back-mobile { display: none; background: none; border: none; font-size: 24px; cursor: pointer; margin-right: 15px; color: var(--primary-color); }

.messages-list { 
    flex: 1; 
    overflow-y: auto; 
    padding: 16px; 
    padding-bottom: 90px; /* Отступ под парящий блок */
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
    background: inherit;
}
.message { display: flex; flex-direction: column; margin-bottom: 12px; max-width: 80%; }
.message:not(.own) { align-self: flex-start; align-items: flex-start; }
.message.own { align-self: flex-end; align-items: flex-end; }
.message-bubble { padding: 8px 12px; border-radius: 12px; word-break: break-word; line-height: 1.4; position: relative; }
.message:not(.own) .message-bubble { background: #e4e6eb; color: #000; border-radius: 18px 18px 18px 4px; }
.message.own .message-bubble { background: #0084ff; color: white; border-radius: 18px 18px 4px 18px; }
.message-time { font-size: 11px; color: #888; margin-top: 4px; }

/* === ПАРЯЩИЙ БЛОК ВВОДА (ANDROID STYLE) === */
.chat-input-area { position: absolute; bottom: 0; left: 0; right: 0; padding: 10px 15px; background: transparent; z-index: 10; }
.floating-input-container { 
  display: flex; 
  align-items: center; 
  gap: 2px; 
  background: white; 
  border-radius: 25px; 
  padding: 5px 8px; 
  box-shadow: 0 2px 8px rgba(0,0,0,0.2); 
  width: 100%; 
  min-height: 50px;
  overflow: hidden; 
}
.message-input-android { flex: 1; height: 40px; border: none; background: transparent; padding: 0 10px; font-size: 16px; outline: none; color: black; min-width: 0; }
.btn-input-icon { width: 40px; height: 40px; background: transparent; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 20px; flex-shrink: 0; color: #888; }
.btn-send-android { color: var(--android-lime) !important; font-size: 22px; }

/* Эмодзи пикер */
.emoji-picker-container { display: none; position: absolute; bottom: 75px; right: 20px; background: #fff; border: 1px solid #ccc; border-radius: 10px; padding: 10px; z-index: 1000; box-shadow: 0 4px 12px rgba(0,0,0,0.15); max-height: 250px; overflow-y: auto; }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.emoji-grid button { font-size: 18px; background: none; border: none; cursor: pointer; padding: 6px; border-radius: 6px; }

/* === НАСТРОЙКИ И АВАТАР === */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: flex; justify-content: center; align-items: center; z-index: 2000; }
.settings-card { background: white; padding: 30px; border-radius: 20px; width: 380px; text-align: center; }

.avatar-upload-wrapper { position: relative; width: 100px; height: 100px; margin: 0 auto 15px; }
.settings-avatar { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 2px solid var(--primary-color); }
.edit-avatar-badge { position: absolute; bottom: 0; right: 0; background: var(--primary-color); color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; border: 2px solid white; }

/* === ТЕМНАЯ ТЕМА === */
body.dark-theme { background-color: #121212; color: #e0e0e0; }
.dark-theme .sidebar, .dark-theme .main-content, .dark-theme .chat-header { background-color: #1e1e1e; border-color: #333; }
.dark-theme .floating-input-container { background-color: #2a2a2a; border: 1px solid #444; }
.dark-theme .message-input-android { color: white; }
.dark-theme .message-bubble { background-color: #333; color: #fff; }
.dark-theme .settings-card { background: #1e1e1e; color: white; border: 1px solid #333; }
.dark-theme .chat-item, .dark-theme .user-item, .dark-theme .sidebar-header, .dark-theme .input-search { border-color: #333; }
.dark-theme .input-search { background: #2a2a2a; color: white; }

/* === МОБИЛЬНАЯ ВЕРСИЯ === */
@media (max-width: 768px) {
  .sidebar { width: 100% !important; position: absolute; left: 0; top: 0; height: 100%; z-index: 1; }
  .main-content { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; transform: translateX(100%); background: white; }
  .messenger.chat-active .main-content { transform: translateX(0); }
  .messenger.chat-active .sidebar { transform: translateX(-20%); }
  .btn-back-mobile { display: block; }
  
  .chat-input-area { padding: 8px 10px; }
  .floating-input-container { min-height: 48px; border-radius: 24px; padding: 4px 6px; gap: 0; }
  .message-input-android { height: 40px; font-size: 15px; }
  .btn-input-icon { width: 38px; height: 38px; font-size: 18px; }
  .messages-list { padding-bottom: 80px; }
}