/* ========== BASE ========== */
body {
  font-family: "Inter", sans-serif;
}

/* анимация появления элементов */
@keyframes fadeUp {
  0%   { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: none; }
}
.card {
  animation: fadeUp 0.6s ease-in-out both;
}

/* ——— КНОПКА-ГРАДИЕНТ ——— */
.btn-primary {
  background-image: linear-gradient(90deg, #0d6efd 0%, #6610f2 100%);
  border: 0;
  transition: 0.2s filter, 0.2s transform;
}
.btn-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}

/* форма (login / register) по центру */
form.centered {
  max-width: 420px;
  margin: 0 auto;
}

/* ========== PROFILE ========== */

/* ——— БАННЕР ——— */
.profile-banner {
  height: 200px;              /* можно регулировать */
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
}
.profile-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* кнопка «изменить баннер» появляется при наведении */
.profile-banner:hover .upload-btn {
  opacity: 1;
  transform: translateY(0);
}
.upload-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  opacity: 0;
  transform: translateY(-8px);
  transition: 0.2s;
}

/* ——— БЕЙДЖ РОЛИ (USER / MODER / ADMIN) ——— */
.role-badge {
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
  padding: 0.3rem 0.8rem;
  border-radius: 0.6rem;
}
.role-badge--user  {
  background-image: linear-gradient(90deg, #0d6efd, #6610f2);
}
.role-badge--moder {
  background-image: linear-gradient(90deg, #198754, #20c997);
}
.role-badge--admin {
  background-image: linear-gradient(90deg, #fd7e14, #ffc107);
}

/* ——— АВАТАР ——— */
.avatar-wrapper {
  width: 120px;
  height: 120px;
  margin: -60px auto 1.5rem;
  position: relative;
}
.avatar-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px #ced4da;
}
.avatar-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.25rem;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  opacity: 0;
  transition: 0.2s;
  cursor: pointer;
}
.avatar-wrapper:hover .avatar-overlay {
  opacity: 1;
}

/* ——— ТАЙЛЫ / КАРТОЧКИ ——— */
.tile {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.tile-body { padding: 1.5rem; }

/* сетка профиля */
.row.profile { --bs-gutter-x: 2rem; }
.row.profile > [class*=col] { min-width: 0; }

/* адаптив — на ширине ≤ 992 px колонки складываются */
@media (max-width: 991.98px) {
  .row.profile > [class*=col] {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .profile-banner { height: 180px; }
  .avatar-wrapper { margin: -60px auto 1rem; }
}

/* скрытые input[type=file] */
input[type="file"] { display: none; }

/* курсор-рука для кастомных label-кнопок */
label.btn-light { cursor: pointer; }

/* ========== ADMIN ========== */

/* красная кнопка входа в админку */
.btn-admin {
  background-image: linear-gradient(90deg, #dc3545 0%, #fd7e14 100%);
  color: #fff;
  border: 0;
}
.btn-admin:hover { filter: brightness(1.1); }

/* ========== CONTEXT-MENU (ПКМ) ========== */
.context-menu {
  position: absolute;
  z-index: 9999;
  display: none;
  min-width: 160px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: .5rem;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}
.context-menu a {
  display: block;
  padding: .5rem 1rem;
  color: #212529;
  text-decoration: none;
  font-size: .9rem;
}
.context-menu a:hover { background: #f8f9fa; }

/* ========== CHAT ========== */
.chat-wrapper { max-width: 720px; margin: 0 auto; }
.chat-window {
  height: 400px;
  overflow-y: auto;
  border: 1px solid #dee2e6;
  border-radius: .5rem;
  padding: 1rem;
  background: #fff;
}
.message {
  margin-bottom: 1rem;
  display: flex;
  gap: .5rem;
}
.bubble {
  padding: .6rem 1rem;
  border-radius: 1rem;
  max-width: 75%;
}
.message.sent {
  justify-content: flex-end;
}
.message.sent .bubble {
  background: #0d6efd;
  color: #fff;
  border-bottom-right-radius: 0;
}
.message.recv .bubble {
  background: #f1f3f5;
  border-bottom-left-radius: 0;
}
.reply-info {
  font-style: italic;
  color: #6c757d;
}