:root {
  --bg-dark: #2f3136;
  --bg-sidebar: #202225;
  --bg-panel: #2b2d31;
  --bg-hover: #393c43;
  --text-primary: #dfe2e6;
  --text-secondary: #c4c4c4;
  --accent: #5865f2;
  --background-primary: #36393f;
  --background-primary-hover: #3d414b;
  --background-secondary: #2f3136;
  --background-tertiary: #202225;
  --background-accent: #4f545c;
  --background-modifier-hover: rgba(79, 84, 92, 0.16);
  --background-modifier-accent: rgba(79, 84, 92, 0.48);
  --background-floating: #18191c;
  --brand-experiment: #5865f2;
  --brand-experiment-560: #4752c4;
  --status-danger: #ed4245;
  --status-warning: #faa81a;
  --text-normal: #dcddde;
  --text-muted: #72767d;
  --img-muted: #bebebe;
  --brand: #5865f2;
  --brand-hover: #4752c4;
  --selected: rgba(44, 45, 49, 0.8);
  --success: #3ba55d;
  --danger: #ed4245;
  --online: #3ba55d;
  --idle: #faa81a;
  --dnd: #ed4245;
  --offline: #747f8d;
  --highlight-color: #5e6cffdc;
  --font-code: "gg mono", "Source Code Pro", Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
}

/* Универсальный курсор-указатель */
.pointer {
  cursor: pointer;
}

.hidden {
  display: none !important;
}

/* Базовый сброс */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#panelContent {
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  /* Стили скроллбара */
  scrollbar-width: thin;
  scrollbar-color: var(--background-accent) var(--background-tertiary);
}

#panelContent::-webkit-scrollbar {
  width: 6px;
}

#panelContent::-webkit-scrollbar-track {
  background: var(--background-tertiary);
  border-radius: 3px;
}

#panelContent::-webkit-scrollbar-thumb {
  background: var(--background-accent);
  border-radius: 3px;
}

#panelContent::-webkit-scrollbar-thumb:hover {
  background: var(--brand-experiment);
}

#panelContent:has(.empty),
#panelContent:empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

#panelContent:has(.userResult) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;

  padding-right: 20px;
  width: 100%;
  height: 100%;
}

#panelContent:has(.userRequest) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
}

/* Все .userResult внутри show_request_friend должны быть растянуты */
#panelContent:has(.userResult) .userResult {
  width: 100%;

  box-sizing: border-box;
}

#panelContent:has(.userRequest) .userRequest {
  width: 100%;

  box-sizing: border-box;
}

/* Скрываем текст "Нет заявок", когда появились заявки */
#panelContent:has(.userResult) .empty {
  display: none;
}

/* Скрываем текст "Нет заявок", когда появились заявки */
#panelContent:has(.userRequest) .empty {
  display: none;
}

html,
body {
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Segoe UI", sans-serif;
  background: var(--bg-dark);
  color: var(--text-primary);
}

/* Контейнер */
.app {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* --- Сайдбар --- */
.sidebar {
  width: 315px;
  background: var(--bg-sidebar);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  flex-shrink: 0;
}

.sidebar-top {
  padding: 8px;
}

.search-box {
  position: relative;
  margin-bottom: 10px;
}

.search-box input {
  width: 100%;
  padding: 8px 32px 8px 10px;
  border-radius: 6px;
  border: none;
  outline: none;
  background: var(--bg-panel);
  color: var(--text-primary);
  font-size: 13px;
}

.search-box .search-icon {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
}

/* Меню */
.friends-menu {
  padding-top: 4px;
}

.friends-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.menu-title,
.menu-item {
  border: none;
  background: var(--selected);
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 8px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1;
  transition: all 0.2s ease;
}

.menu-title:hover {
  background: var(--background-primary);
}

/* --- Единое выравнивание иконок меню --- */
.menu-title img,
.menu-item img {
  width: 30px;
  height: 30px;
  display: block;
}

.menu-title .icon,
.menu-item .icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon {
  width: 30px;
  height: 30px;
}

.icon img {
  filter: brightness(0.8);
  transition: filter 0.2s ease;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.menu-title:hover img {
  filter: brightness(1);
}


/* Фильтр */
.friends-filter {
  margin-top: 10px;
  align-items: center;
  padding: 6px 4px;
  background: transparent;
  border-radius: 4px;
}

.filter-item {
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  display: flex;
  height: 25px;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  min-height: 25px;
}

.filter-item-text {
  height: 25px;
  justify-self: center;
  display: flex;
  color: var(--text-secondary);
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  flex: 1;
}

.filter-item.active {
  background: var(--selected);
  color: var(--text-primary);
}

.add-new-chat {
  filter: brightness(0.7);
  border: none;
  background: transparent;
  width: 25px;
  height: 25px;
  margin-left: auto;
  cursor: pointer;
  transition: all 0.2s ease;
}

.add-new-chat:hover {
  filter: brightness(0.85);
}

/* Панель пользователя */
.user-panel {
  background: var(--bg-panel);
  display: flex;
  align-items: center;
  height: 60px;
  padding: 8px 10px;
  gap: 10px;
}

.avatarProfile {
  width: 35px;
  margin: 0 0 0 0;
  background: #444;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.avatarProfile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.user-info {
  flex: 1;
  min-width: 0;
}

.username {
  font-size: 13px;
}

.status {
  font-size: 12px;
  color: var(--text-secondary);
}

.user-actions {
  display: flex;
  gap: 4px;
  align-items: center;
  transition: scale 0.1s ease;
}

.user-actions .icon {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 5px;
}

.user-actions .icon:hover {
  background-color: rgba(78, 80, 88, 0.6);
  color: #dbdee1;
  transform: scale(1.1);
  cursor: pointer;
}

/* --- Основная часть --- */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  min-height: 0;
}

.topbar {
  background: var(--bg-panel);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.page-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1;
  /* убирает лишние зазоры по вертикали */
}

.page-title img {
  width: 30px;
  height: 30px;
  display: block;
}

/* Табсы сразу справа от заголовка */
.tabs {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: 12px;
}

.tab {
  background: transparent;
  border: none;
  padding: 6px 12px;
  color: var(--text-primary);
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

.tab:hover {
  background: var(--bg-hover);
}

.tab.active {
  background: var(--bg-hover);
}

.tab.btn-add {
  background: var(--accent);
  color: #fff;
}

.tab.btn-add.active {
  background: var(--bg-panel);
  color: #5865f2;
}

/* Контент-панели */
.content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  /* Стили скроллбара */
  scrollbar-width: thin;
  scrollbar-color: var(--background-accent) var(--background-tertiary);
}

.content::-webkit-scrollbar {
  width: 6px;
}

.content::-webkit-scrollbar-track {
  background: var(--background-tertiary);
  border-radius: 3px;
}

.content::-webkit-scrollbar-thumb {
  background: var(--background-accent);
  border-radius: 3px;
}

.content::-webkit-scrollbar-thumb:hover {
  background: var(--brand-experiment);
}

.panel {
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  /* Стили скроллбара */
  scrollbar-width: thin;
  scrollbar-color: var(--background-accent) var(--background-tertiary);
}

.panel::-webkit-scrollbar {
  width: 6px;
}

.panel::-webkit-scrollbar-track {
  background: var(--background-tertiary);
  border-radius: 3px;
}

.panel::-webkit-scrollbar-thumb {
  background: var(--background-accent);
  border-radius: 3px;
}

.panel::-webkit-scrollbar-thumb:hover {
  background: var(--brand-experiment);
}

/* Когда нужно выровнять панель вверху рядом с topbar */
.panel.top {
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: 12px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Вид "Ожидание" */
.empty {
  color: var(--text-secondary);
  font-size: 14px;
}

/* Поисковая строка: input + иконка внутри справа (нет кнопки) */
.add-search {
  position: relative;
  display: block;
  width: 100%;
}

.add-search input {
  width: 100%;
  padding: 9px 36px 9px 10px;
  border-radius: 6px;
  border: none;
  outline: none;
  background: var(--bg-panel);
  color: var(--text-primary);
  font-size: 14px;
}

.add-search .search-only-icon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  pointer-events: none;
}

/* Результаты — пустой по умолчанию */
.results {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.conversions-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  justify-content: flex-start;
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  margin: 4px;
}

.conversion {
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  padding-left: 12px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  cursor: pointer;
  min-height: 40px;
  width: 100%;
  position: relative;
  user-select: none;
}

.conversion:hover {
  background-color: rgba(78, 80, 88, 0.3);
}

.conversion:active {
  background-color: rgba(78, 80, 88, 0.5);
}

.conversion.select {
  background-color: rgba(44, 45, 49, 0.8);
}

.avatarConversion {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 8px;
  flex-shrink: 0;
}

.avatarConversion img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.usernameConversion {
  color: rgb(225, 225, 225);
  font-family: 'gg sans', 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin-right: auto;
}

.back-btn {
  width: 25px;
  height: 25px;
  display: none;
  background: var(--bg-hover);
  border: none;
  padding: 6px;
  margin: 0;
  border-radius: 20px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Стили изображения внутри кнопки */
.back-btn img {
  display: block;
  object-fit: contain;
}

/* Стили для user-panel-open-modal */
.user-panel-open-modal {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: transparent;
}

.user-panel-open-modal:hover {
  background: var(--bg-hover);
}

.user-panel-open-modal:active {
  background: var(--background-modifier-accent);
  transform: translateY(1px);
}

/* === Контейнер === */
.tooltip {
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* === Сам tooltip === */
.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  background: rgba(30, 30, 30, 0.9);
  color: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
  z-index: 10;
  /* Убран transform: translateY(4px) — теперь управляется в каждом направлении */
}

.tooltip::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 9;
}

/* === Hover: показываем с анимацией === */
.tooltip:hover::after,
.tooltip:hover::before {
  opacity: 1;
}

/* === TOP === */
.tooltip[data-position="top"]::after {
  bottom: calc(100% + 3px);
  /* Отступ 3px сверху */
  left: 50%;
  transform: translateX(-50%) translateY(4px);
}

.tooltip[data-position="top"]:hover::after {
  transform: translateX(-50%) translateY(0);
}

.tooltip[data-position="top"]::before {
  border-top-color: rgba(30, 30, 30, 0.9);
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(1px);
  /* Точное позиционирование */
  margin-bottom: -1px;
}

.tooltip[data-position="top"]:hover::before {
  transform: translateX(-50%) translateY(0);
}

/* === BOTTOM === */
.tooltip[data-position="bottom"]::after {
  top: calc(100% + 3px);
  /* Отступ 3px снизу */
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
}

.tooltip[data-position="bottom"]:hover::after {
  transform: translateX(-50%) translateY(0);
}

.tooltip[data-position="bottom"]::before {
  border-bottom-color: rgba(30, 30, 30, 0.9);
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-1px);
  margin-top: -1px;
}

.tooltip[data-position="bottom"]:hover::before {
  transform: translateX(-50%) translateY(0);
}

/* === LEFT === */
.tooltip[data-position="left"]::after {
  right: calc(100% + 3px);
  /* Отступ 3px слева */
  top: 50%;
  transform: translateX(4px) translateY(-50%);
  white-space: normal;
  max-width: 220px;
}

.tooltip[data-position="left"]:hover::after {
  transform: translateX(0) translateY(-50%);
}

.tooltip[data-position="left"]::before {
  border-left-color: rgba(30, 30, 30, 0.9);
  right: 100%;
  top: 50%;
  transform: translateY(-50%) translateX(1px);
  margin-right: -1px;
}

.tooltip[data-position="left"]:hover::before {
  transform: translateX(0) translateY(-50%);
}

/* === RIGHT === */
.tooltip[data-position="right"]::after {
  left: calc(100% + 3px);
  /* Отступ 3px справа */
  top: 50%;
  transform: translateX(-4px) translateY(-50%);
  white-space: normal;
  max-width: 220px;
}

.tooltip[data-position="right"]:hover::after {
  transform: translateX(0) translateY(-50%);
}

.tooltip[data-position="right"]::before {
  border-right-color: rgba(30, 30, 30, 0.9);
  left: 100%;
  top: 50%;
  transform: translateY(-50%) translateX(-1px);
  margin-left: -1px;
}

.tooltip[data-position="right"]:hover::before {
  transform: translateX(0) translateY(-50%);
}


.newMessage {
  width: 20px;
  height: 20px;
  color: rgb(225, 225, 225);
  font-family: 'gg sans', 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin-right: 25px;
  align-items: center;
  justify-content: center;
  background-color: var(--brand);
  border-radius: 50px;
  display: none;
}

.newMessage.active {
  display: flex;
}

/* Индикатор загрузки  */
.circle {
  animation: effect 1s linear infinite;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
}

@keyframes effect {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }

}

/* Индикатор загрузки  */

/* Поведение при маленьком экране */
@media (max-width: 768px) {

  .tooltip::after,
  .tooltip::before {
    display: none !important;
  }

  /* Sidebar становится full-width и фиксируется (по умолчанию показываем sidebar) */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    z-index: 40;
    transition: transform .22s ease;
    transform: translateX(0);
  }

  .user-actions .icon:hover {
    background-color: transparent;
    color: none;
    transform: none;
  }


  /* Основной контейнер (панели) — вначале спрятан справа */
  .main {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 100%;
    width: 100%;
    max-width: 100%;
    z-index: 50;
    background: var(--bg-dark);
    transition: left .22s ease;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  /* Когда показываем панель (добавьте класс .mobile-open к #main-container из main.js) */
  #main-container.mobile-open,
  .main.mobile-open {
    left: 0;
  }

  /* Класс, скрывающий sidebar (добавить .hidden к #sidebar из main.js при открытии панели) */
  #sidebar.hidden,
  .sidebar.hidden {
    transform: translateX(-100%);
  }

  /* Показываем кнопку назад в топбар */
  .back-btn {
    border: none;
    display: inline-flex;
    position: relative;
    z-index: 60;
    background: transparent;
    border-radius: 5px
  }

  /* Сдвигаем заголовок, чтобы кнопка не накладывалась */
  .page-title {
    margin-left: 8px;
  }

  /* Увеличим отступ topbar контента, чтобы контент не попадал под фиксированный topbar */
  .topbar {
    position: relative;
    z-index: 55;
  }

  /* Немного поднимаем панель контента (panel) — избегаем краёв */
  .panel {
    padding-top: 8px;
  }

  /* Обеспечим скролл для основного содержимого */
  .conversions-content,
  #panelContent {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    height: calc(100vh - 56px);
    /* topbar высота ~56 */
  }
}

/* Плавное появление/скрытие на десктопе (не мешает текущим стилям) */
@media (min-width: 769px) {

  .main,
  .sidebar {
    position: relative;
    transform: translateX(0) !important;
    left: auto !important;
  }

  .back-btn {
    display: none;
  }

  .user-panel-open-modal {
    padding: 6px 10px;
  }

  .user-panel-open-modal:active {
    background: var(--background-modifier-accent);
    transform: none;
  }
}