/* ============================================================
   MessApp Web — десктопная раскладка
   Двухпанельный режим: список чатов слева, переписка справа.
   Файл подключается после style.css и переопределяет мобильную
   раскладку только на широких экранах.
   ============================================================ */

:root {
  /* Список чатов тянется за окном: от 300px на узком десктопе
     до 520px в полноэкранном режиме. */
  --desktop-sidebar-width: clamp(300px, 30vw, 520px);
  --desktop-divider: rgba(255, 255, 255, .07);
  --desktop-hover: rgba(255, 255, 255, .06);
  --desktop-scrollbar: rgba(255, 255, 255, .16);
}

body.light-theme {
  --desktop-divider: rgba(0, 0, 0, .08);
  --desktop-hover: rgba(0, 0, 0, .05);
  --desktop-scrollbar: rgba(0, 0, 0, .18);
}

/* Заглушка существует только в двухпанельном режиме. */
#desktop-empty {
  display: none;
}

@media (min-width: 760px) {
  /* На широком экране плавающая кнопка APK мешает раскладке. */
  .btn-download {
    display: none !important;
  }

  /* ─── Каркас ─────────────────────────────────────────── */

  /* Список чатов — левая колонка фиксированной ширины. */
  #screen-chats {
    right: auto;
    width: var(--desktop-sidebar-width);
    background: var(--surface);
    border-right: 1px solid var(--desktop-divider);
    z-index: 30;
  }

  /* Когда открыт чат, список остаётся видимым слева. */
  body:has(#screen-chat.active) #screen-chats {
    display: flex;
  }

  /* Переписка занимает всё пространство справа от списка. */
  #screen-chat {
    left: var(--desktop-sidebar-width);
    background: var(--bg);
  }

  /* На десктопе кнопка «назад» не нужна. */
  #screen-chat #chat-back {
    display: none;
  }

  /* ─── Заглушка правой панели ─────────────────────────── */

  #desktop-empty {
    position: fixed;
    inset: 0 0 0 var(--desktop-sidebar-width);
    z-index: 5;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px;
    text-align: center;
    user-select: none;
    background: var(--bg);
    color: var(--text-dim);
  }

  body:has(#screen-chats.active) #desktop-empty {
    display: flex;
  }

  .desktop-empty-text {
    max-width: 360px;
    font-size: 15px;
    line-height: 1.6;
  }

  .desktop-empty-search {
    appearance: none;
    -webkit-appearance: none;
    margin-top: 10px;
    padding: 11px 22px;
    border: none;
    border-radius: 999px;
    background: var(--primary);
    color: var(--on-primary);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(124, 77, 255, .22);
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
  }

  .desktop-empty-search:hover {
    background: #C7A4FF;
    box-shadow: 0 12px 32px rgba(124, 77, 255, .32);
  }

  .desktop-empty-search:active {
    transform: translateY(1px);
  }

  body.light-theme .desktop-empty-search {
    background: var(--primary);
    color: var(--on-primary);
  }

  body.light-theme .desktop-empty-search:hover {
    background: var(--primary-dark);
    color: #FFFFFF;
  }

  /* ─── Шапки ──────────────────────────────────────────── */

  #screen-chats > .topbar,
  #screen-chat > .topbar {
    height: 64px;
    min-height: 64px;
    background: var(--surface);
    color: var(--text);
    box-shadow: none;
    border-bottom: 1px solid var(--desktop-divider);
  }

  #screen-chats > .topbar {
    padding: 0 10px 0 18px;
  }

  #screen-chats .topbar-title {
    color: var(--primary);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .2px;
  }

  body.light-theme #screen-chats .topbar-title {
    color: var(--primary-dark);
  }

  #screen-chats .topbar button {
    color: var(--text-dim);
  }

  #screen-chats .topbar button:hover {
    background: var(--desktop-hover);
    color: var(--text);
  }

  #screen-chat > .topbar {
    padding: 0 14px;
  }

  #screen-chat .topbar-title {
    font-size: 16px;
  }

  #screen-chat .topbar-status {
    font-size: 12px;
    opacity: .62;
  }

  #screen-chat .topbar button {
    color: var(--text-dim);
  }

  #screen-chat .topbar button:hover {
    background: var(--desktop-hover);
    color: var(--text);
  }

  #screen-chat .topbar-title-group,
  #screen-chat .topbar > .avatar {
    cursor: pointer;
  }

  /* ─── Список чатов ───────────────────────────────────── */

  #dialogs-list {
    padding: 8px 8px 24px;
  }

  #screen-chats .dialog-item {
    gap: 12px;
    margin-bottom: 2px;
    padding: 9px 10px;
    border-bottom: none;
    border-radius: 10px;
    transition: background .12s ease;
  }

  #screen-chats .dialog-item:hover {
    background: var(--desktop-hover);
  }

  #screen-chats .dialog-item.active {
    background: rgba(179, 136, 255, .16);
  }

  body.light-theme #screen-chats .dialog-item.active {
    background: rgba(124, 77, 255, .12);
  }

  #screen-chats .dialog-item .avatar {
    width: 50px;
    height: 50px;
  }

  #screen-chats .dialog-name {
    font-size: 15px;
  }

  #screen-chats .dialog-msg {
    margin-top: 3px;
    font-size: 13.5px;
  }

  #screen-chats .empty {
    width: 82%;
    font-size: 14px;
    line-height: 1.5;
  }

  /* ─── Переписка ──────────────────────────────────────── */

  #messages-list {
    padding: 20px 24px 12px;
  }

  #scroll-bottom {
    right: 24px;
    bottom: 18px;
    width: 44px;
    height: 44px;
    border: 1px solid var(--desktop-divider);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  }

  #screen-chat .input-bar {
    gap: 6px;
    padding: 10px 16px 14px;
    background: var(--bg);
  }

  #screen-chat .input-bar input[type="text"] {
    padding: 12px 18px;
    border: 1px solid var(--desktop-divider);
    border-radius: 22px;
    background: var(--surface);
  }

  #screen-chat .input-bar input[type="text"]:focus {
    border-color: rgba(179, 136, 255, .5);
  }

  #screen-chat .input-bar button:hover {
    background: var(--desktop-hover);
  }

  #screen-chat .emoji-panel {
    padding: 10px 16px;
    background: var(--surface);
  }

  /* ─── Аккуратные полосы прокрутки ────────────────────── */

  #dialogs-list::-webkit-scrollbar,
  #messages-list::-webkit-scrollbar,
  .profile-content::-webkit-scrollbar {
    width: 10px;
  }

  #dialogs-list::-webkit-scrollbar-track,
  #messages-list::-webkit-scrollbar-track,
  .profile-content::-webkit-scrollbar-track {
    background: transparent;
  }

  #dialogs-list::-webkit-scrollbar-thumb,
  #messages-list::-webkit-scrollbar-thumb,
  .profile-content::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background: var(--desktop-scrollbar);
    background-clip: content-box;
  }

  #dialogs-list::-webkit-scrollbar-thumb:hover,
  #messages-list::-webkit-scrollbar-thumb:hover,
  .profile-content::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
    background-clip: content-box;
  }

  /* В главном меню полоса прокрутки не показывается: список
     по-прежнему листается колесом, тачпадом и свайпом. */
  #dialogs-list {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  #dialogs-list::-webkit-scrollbar {
    display: none;
  }
}