html, body { margin: 0; padding: 0; width: 100vw; height: 100dvh; overflow: hidden; background-color: #F7A01D; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; touch-action: pan-y; color: #333; }
* { box-sizing: border-box; }

#auth-container { display: flex; flex-direction: column; width: 90%; max-width: 400px; background: #FCF9F2; padding: 30px; border-radius: 20px; box-shadow: 0 10px 25px rgba(0,0,0,0.2); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1000; }
.auth-header { font-size: 1.5rem; font-weight: bold; text-align: center; margin-bottom: 20px; color: #F7A01D; }
.auth-input { width: 100%; padding: 12px 15px; margin-bottom: 15px; border: 2px solid #ddd; border-radius: 10px; font-size: 1rem; outline: none; transition: border-color 0.3s; }
.auth-input:focus { border-color: #F7A01D; }
.auth-btn { width: 100%; padding: 12px; background-color: #F7A01D; color: white; border: none; border-radius: 10px; font-size: 1.1rem; font-weight: bold; cursor: pointer; transition: background-color 0.3s; }
.auth-btn:hover { background-color: #e08e16; }
.auth-switch { text-align: center; margin-top: 15px; color: #666; cursor: pointer; font-size: 0.9rem; text-decoration: underline; }
.error-msg { color: #d9534f; background: #fdf7f7; padding: 10px; border-radius: 8px; margin-bottom: 15px; font-size: 0.9rem; text-align: center; display: none; }

#app-container { display: none; width: 100%; height: 100%; background-color: #FCF9F2; overflow: hidden; }

.sidebar { width: 300px; background-color: #fff; border-right: 1px solid #ddd; display: flex; flex-direction: column; height: 100%; flex-shrink: 0; }
.sidebar-header { padding: 20px; background-color: #fff; border-bottom: 1px solid #eee; font-size: 1.2rem; font-weight: bold; display: flex; justify-content: space-between; align-items: center; }
.search-container { padding: 10px 15px; display: flex; gap: 10px; align-items: center; position: relative; border-bottom: 1px solid #eee; }
.menu-btn { font-size: 1.5rem; cursor: pointer; color: #F7A01D; user-select: none; }
.input-with-icon { position: relative; flex: 1; }
.search-input { width: 100%; padding: 8px 30px 8px 15px; border: 1px solid #ddd; border-radius: 20px; outline: none; }
.clear-search { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); cursor: pointer; color: #999; display: none; }

.dropdown-menu { display: none; position: absolute; top: 100%; left: 10px; background: white; border: 1px solid #ddd; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); z-index: 100; min-width: 200px; overflow: hidden; }
.dropdown-menu.active { display: block; }
.dropdown-item { padding: 12px 15px; cursor: pointer; border-bottom: 1px solid #eee; }
.dropdown-item:last-child { border-bottom: none; }
.dropdown-item:hover { background-color: #FCF9F2; }

.chat-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.user-item { padding: 15px 20px; border-bottom: 1px solid #eee; cursor: pointer; display: flex; align-items: center; gap: 15px; transition: background-color 0.2s; }
.user-item:hover, .user-item.active { background-color: #FCF9F2; }
.user-avatar { width: 45px; height: 45px; border-radius: 50%; background-color: #F7A01D; color: white; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; overflow: hidden; }
.user-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.user-name { font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-status { font-size: 0.8rem; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.chat-window { flex: 1; display: flex; flex-direction: column; height: 100%; background-color: #FCF9F2; }
.chat-header { padding: 15px 20px; background-color: #fff; border-bottom: 1px solid #ddd; font-size: 1.2rem; font-weight: bold; display: flex; align-items: center; gap: 15px; flex-shrink: 0; }
.back-btn { display: none; cursor: pointer; font-size: 1.2rem; }
.messages-area { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 15px; -webkit-overflow-scrolling: touch; }

.message { max-width: 85%; display: flex; flex-direction: column; }
.message.my-message { align-self: flex-end; }
.message.other-message { align-self: flex-start; }

.message-sender { font-size: 0.8rem; color: #888; margin-bottom: 3px; margin-left: 5px; }
.message-content { padding: 12px 16px; border-radius: 15px; font-size: 0.95rem; line-height: 1.4; word-wrap: break-word; }

.my-message .message-content { background-color: #F7A01D; color: white; border-bottom-right-radius: 5px; }
.other-message .message-content { background-color: #fff; color: #333; border: 1px solid #ddd; border-bottom-left-radius: 5px; }

.message-time { font-size: 0.7rem; color: #aaa; align-self: flex-end; margin-top: 5px; }
.my-message .message-time { color: rgba(255, 255, 255, 0.8); }

.input-area { display: flex; padding: 10px 15px; background-color: #fff; border-top: 1px solid #ddd; gap: 10px; flex-shrink: 0; padding-bottom: calc(10px + env(safe-area-inset-bottom)); align-items: center; }
.input-wrapper { flex: 1; display: flex; }
#message-input { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 20px; outline: none; font-size: 1rem; }
#message-input:focus { border-color: #F7A01D; }

.send-btn { background-color: #F7A01D; border: none; border-radius: 50%; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.2rem; color: white; transition: transform 0.1s; flex-shrink: 0; }
.send-btn:active { transform: scale(0.95); }

.modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 2000; align-items: center; justify-content: center; }
.modal-content { background: #fff; width: 90%; max-width: 400px; border-radius: 20px; padding: 25px; position: relative; max-height: 90dvh; overflow-y: auto; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 10px; }
.close-modal { font-size: 1.5rem; cursor: pointer; color: #999; }
.profile-avatar-section { display: flex; flex-direction: column; align-items: center; margin-bottom: 20px; }
.profile-avatar-preview { width: 80px; height: 80px; border-radius: 50%; background-color: #F7A01D; color: white; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; margin-bottom: 10px; overflow: hidden; }
.avatar-upload-btn { color: #F7A01D; cursor: pointer; font-size: 0.9rem; text-decoration: underline; }
.profile-form label { display: block; font-size: 0.85rem; color: #666; margin-bottom: 5px; }

@media (max-width: 768px) {
    .sidebar { width: 100%; position: absolute; z-index: 10; transition: transform 0.3s ease; }
    .chat-window { width: 100%; position: absolute; z-index: 5; }
    .back-btn { display: block; }
    .sidebar.hidden { transform: translateX(-100%); }
}

.unread-badge { background-color: #e74c3c; color: white; font-size: 0.8rem; font-weight: bold; padding: 3px 8px; border-radius: 12px; margin-left: auto; min-width: 24px; text-align: center; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }

/* ГОЛОСОВЫЕ СООБЩЕНИЯ */
.mic-btn { background-color: #eee; border: none; border-radius: 50%; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.2rem; transition: all 0.3s ease; flex-shrink: 0; -webkit-tap-highlight-color: transparent; }
.mic-btn.recording { background-color: #e74c3c; color: white; animation: pulse 1.5s infinite; }

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(231, 76, 60, 0); }
    100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
}

.audio-wrapper { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.audio-player { max-width: 200px; height: 35px; outline: none; }
.speed-btn { background: rgba(0,0,0,0.15); border: none; border-radius: 12px; padding: 4px 8px; font-size: 0.8rem; cursor: pointer; font-weight: bold; color: inherit; transition: background 0.2s; }
.speed-btn:hover { background: rgba(0,0,0,0.25); }