/* ===== RESET & GLOBAL ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  height: 100%; margin: 0; padding: 0;
  font-family: 'Roboto', sans-serif;
  background: #e8eaf6; overflow: hidden;
}
.full-width { width: 100%; }
.hide { display: none !important; }

/* ===== AUTH VIEW ===== */
.auth-view {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #009688 0%, #004d40 100%);
  padding: 16px;
}
.auth-card {
  background: #fff; border-radius: 16px; padding: 32px;
  width: 100%; max-width: 420px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
.auth-header { text-align: center; margin-bottom: 20px; }
.auth-logo { font-size: 48px; color: #009688; display: block; margin-bottom: 8px; }
.auth-header h4 { margin: 0; font-weight: 500; color: #263238; }
.auth-form { padding: 16px 0; }
.auth-form .input-field { margin-top: 8px; }
.auth-form .tabs { overflow: hidden; }
.auth-form .tab a { color: #009688 !important; }
.auth-form .indicator { background-color: #009688 !important; }

/* ===== APP LAYOUT ===== */
.app-view {
  display: flex; height: 100vh; width: 100vw; background: #fff;
}

/* ===== SIDEBAR (Telegram-style) ===== */
.sidebar {
  width: 320px; min-width: 320px;
  background: #fff;
  display: flex; flex-direction: column;
  border-right: 1px solid #e0e0e0;
}
.sidebar-header {
  padding: 14px 16px;
  background: #009688; color: #fff;
  display: flex; align-items: center; gap: 10px;
}
.sidebar-header .brand-text {
  font-size: 18px; font-weight: 500; flex: 1;
}
.sidebar-header .sidebar-actions { display: flex; gap: 2px; }
.sidebar-header .sidebar-actions .btn-flat {
  color: #fff; padding: 0 8px; border-radius: 50%;
  width: 36px; height: 36px;
}
.sidebar-header .sidebar-actions .btn-flat:hover { background: rgba(255,255,255,0.15); }
/* ===== SEARCH MODAL ===== */
#search-modal .modal-content { padding: 16px; min-height: 200px; }
#search-modal .input-field { margin-top: 0; }
#search-modal .chat-item { border-radius: 8px; }
#search-modal .chat-item:hover { background: #f5f5f5; }

/* ===== CHAT LIST ===== */
.chat-list { flex: 1; overflow-y: auto; overflow-x: hidden; }
.chat-item {
  display: flex; align-items: center;
  padding: 10px 16px; cursor: pointer;
  transition: background 0.12s;
}
.chat-item:hover { background: #f0f0f0; }
.chat-item.active { background: #e0f2f1; }
.chat-item .chat-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: #009688; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 500; font-size: 18px; margin-right: 12px;
  flex-shrink: 0; overflow: hidden;
}
.chat-item .chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-item .chat-info { flex: 1; min-width: 0; }
.chat-item .chat-name {
  font-weight: 500; font-size: 15px; color: #212121;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-item .chat-preview {
  font-size: 13px; color: #757575;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 1px;
}
.chat-item .chat-time {
  font-size: 11px; color: #aaa;
  flex-shrink: 0; margin-left: 8px;
  align-self: flex-start; margin-top: 4px;
}
.chat-item.saved-item { margin-top: 4px; border-bottom: 1px solid #e8e8e8; }
.chat-item.saved-item .chat-avatar { background: #ffb300; }
.chat-item .saved-badge {
  font-size: 10px; background: #ffb300; color: #fff;
  border-radius: 8px; padding: 1px 6px; margin-left: 6px;
  vertical-align: middle;
}

/* ===== USER MENU (integrated into sidebar bottom) ===== */
.user-menu {
  padding: 10px 16px;
  background: #f5f5f5;
  border-top: 1px solid #e0e0e0;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
}
.user-menu:hover { background: #eee; }
.user-avatar-circle {
  width: 40px; height: 40px; border-radius: 50%;
  background: #009688; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 500; font-size: 16px;
  flex-shrink: 0; overflow: hidden;
}
.user-avatar-circle img { width: 100%; height: 100%; object-fit: cover; }
.user-info { flex: 1; min-width: 0; }
.user-name { font-weight: 600; font-size: 14px; display: block; color: #212121; }
.user-username { font-size: 12px; color: #888; }
.user-actions { display: flex; gap: 2px; }
.user-actions .btn-flat {
  padding: 0; width: 34px; height: 34px;
  border-radius: 50%; display: flex;
  align-items: center; justify-content: center;
}
.user-actions .btn-flat:hover { background: rgba(0,0,0,0.08); }

/* ===== MAIN CONTENT ===== */
.main-content {
  flex: 1; display: flex; flex-direction: column;
  background: #eef2f5; position: relative;
}
.no-chat-selected {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  user-select: none; color: #bbb;
}
.no-chat-selected .no-chat-icon {
  font-size: 96px; color: #ddd; margin-bottom: 8px;
}
.no-chat-selected h5 {
  font-weight: 400; font-size: 20px; color: #bbb; margin: 0 0 4px;
}

/* ===== CHAT VIEW ===== */
.chat-view { flex: 1; display: flex; flex-direction: column; height: 100%; }
.chat-header {
  padding: 10px 16px; background: #fff;
  border-bottom: 1px solid #e0e0e0;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  z-index: 1;
}
.chat-header-info { flex: 1; }
.chat-title { margin: 0; font-size: 16px; font-weight: 500; }
.chat-status-text { font-size: 12px; }

/* ===== MESSAGES ===== */
.messages-container {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 3px;
  background: #e6f3ee;
  background-image: radial-gradient(circle at 20px 20px, rgba(255,255,255,0.3) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ===== MESSAGE BUBBLES ===== */
.message-wrapper {
  display: flex; flex-direction: column;
  max-width: 78%; margin-bottom: 2px;
}
.message-wrapper.own { align-self: flex-end; align-items: flex-end; }
.message-wrapper.other { align-self: flex-start; align-items: flex-start; }
.message-bubble {
  padding: 8px 14px; border-radius: 18px;
  font-size: 14px; line-height: 1.4;
  word-wrap: break-word; position: relative;
}
.message-wrapper.own .message-bubble {
  background: #d9f8c6; border-bottom-right-radius: 4px;
}
.message-wrapper.other .message-bubble {
  background: #fff; border-bottom-left-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.message-sender {
  font-size: 12px; font-weight: 500; color: #009688; margin-bottom: 2px;
}
.message-time {
  font-size: 10px; color: #999; margin-top: 2px;
  display: flex; align-items: center; gap: 4px;
}
.message-wrapper.own .message-time { justify-content: flex-end; }
.message-file { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.message-file .material-icons { font-size: 32px; }
.message-file a { color: #1565c0; text-decoration: underline; word-break: break-all; }
.message-image {
  max-width: 280px; max-height: 280px;
  border-radius: 12px; cursor: pointer; display: block;
}
.reply-badge {
  font-size: 11px; color: #009688;
  border-left: 3px solid #009688; padding: 4px 8px;
  margin-bottom: 4px; background: rgba(0,150,136,0.06);
  border-radius: 4px;
}

/* ===== REPLY PREVIEW ===== */
.reply-preview {
  display: flex; align-items: center;
  padding: 8px 16px; background: #f0f0f0;
  border-top: 1px solid #ddd; gap: 8px;
}
.reply-info { flex: 1; }
.reply-label { font-size: 12px; font-weight: 500; color: #009688; }
.reply-text {
  font-size: 13px; color: #666; display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ===== MESSAGE INPUT ===== */
.message-input {
  padding: 8px 12px; background: #fff;
  border-top: 1px solid #e0e0e0; display: flex; align-items: center; gap: 6px;
}
.msg-input-wrap {
  flex: 1; position: relative; display: flex; align-items: center;
}
.msg-input-wrap input {
  width: 100%; height: 42px; border-radius: 21px;
  background: #f0f0f0; padding: 0 44px 0 16px; border: none;
  outline: none; font-size: 14px;
}
.msg-input-wrap input:focus {
  background: #e8e8e8;
}
.msg-input-wrap #btn-send {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #009688;
  transition: background 0.15s;
}
.msg-input-wrap #btn-send:hover { background: rgba(0,150,136,0.1); }
.msg-input-wrap #btn-send .material-icons { font-size: 22px; }
.message-input .btn-flat#btn-attach {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.message-input .btn-flat#btn-attach:hover { background: rgba(0,0,0,0.06); }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #aaa; }

/* ===== TOAST ===== */
.toast { border-radius: 10px !important; font-size: 13px; }

/* ===== MODAL ===== */
.modal { border-radius: 16px; }
.modal .modal-footer { border-radius: 0 0 16px 16px; }
.modal .input-field input:focus + label,
.modal .input-field textarea:focus + label { color: #009688 !important; }
.modal .input-field input:focus { border-bottom: 1px solid #009688 !important; box-shadow: 0 1px 0 0 #009688 !important; }
.modal .input-field textarea:focus { border-bottom: 1px solid #009688 !important; box-shadow: 0 1px 0 0 #009688 !important; }

/* ===== USER AVATAR LARGE ===== */
.avatar-edit-wrap {
  position: relative; display: inline-block; margin: 0 auto;
}
.user-avatar-large {
  width: 100px; height: 100px; border-radius: 50%;
  background: #009688; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 36px; font-weight: 500;
  overflow: hidden; transition: filter 0.2s;
}
.user-avatar-large img { width: 100%; height: 100%; object-fit: cover; }
.avatar-overlay {
  position: absolute; inset: 0; border-radius: 50%;
  background: rgba(0,0,0,0.5); color: #fff;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s; cursor: pointer;
}
.avatar-overlay:hover { opacity: 1; }
.avatar-overlay .material-icons { font-size: 28px; }

/* ===== PREVENT iOS ZOOM ON INPUT ===== */
@media screen and (max-width: 768px) {
  input, textarea, select { font-size: 16px !important; }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .sidebar { width: 100%; min-width: 0; }
  .sidebar.hide-mobile { display: none; }
  .main-content { display: none; }
  .main-content.show { display: flex; }
  #btn-back { display: flex !important; margin-left: -8px; }
}