/* Roomly room (2026-10-07) — комната в стиле дашборда: воздушная голубая
   подложка, панель каналов / шапка / чат — «парящие» белые карточки,
   поле ввода — плавающая «таблетка», один голубой акцент.
   Светлая тема (body.light-theme); тёмная — только аккуратные скругления. */

/* ---------- светлая тема ---------- */
html body.light-theme .room-view {
  --rr-blue: #3d7ff2;
  --rr-blue-2: #2f6fe0;
  --rr-tint: #eaf2fe;
  --rr-ink: #17181b;
  --rr-ink-2: #5b6170;
  --rr-ink-3: #8b91a0;
  --rr-card: rgba(255, 255, 255, .86);
  --rr-edge: rgba(255, 255, 255, .95);
  --rr-shadow:
    inset 0 1px 0 #fff,
    0 1px 2px rgba(40, 70, 140, .05),
    0 10px 20px -12px rgba(50, 90, 180, .16),
    0 30px 60px -28px rgba(50, 90, 180, .26);
  background:
    radial-gradient(900px 340px at 78% -60px, rgba(141, 182, 251, .38), transparent 70%),
    radial-gradient(700px 300px at 8% -40px, rgba(198, 222, 255, .55), transparent 70%),
    linear-gradient(180deg, #e8f1fe 0, #eef1f4 420px) !important;
}

/* фон внутренних слоёв — прозрачный, чтобы читалась подложка/карточки */
html body.light-theme .room-view .bg-telegram-bg { background: transparent !important; }

/* панель каналов */
html body.light-theme .room-view > aside {
  background: var(--rr-card) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid var(--rr-edge) !important;
}
html body.light-theme .room-view > aside .border-b,
html body.light-theme .room-view > aside .border-t { border-color: rgba(16, 24, 40, .06) !important; }

/* поиск канала */
html body.light-theme .room-view > aside .rounded-xl.border {
  background: #f4f6f8 !important;
  border-color: transparent !important;
  border-radius: 14px !important;
}

/* пункты каналов */
html body.light-theme .room-view > aside nav button {
  border-radius: 12px !important;
  color: var(--rr-ink-2) !important;
  transition: background .15s ease, color .15s ease;
}
html body.light-theme .room-view > aside nav button:hover { background: #f1f4f9 !important; color: var(--rr-ink) !important; }
html body.light-theme .room-view > aside nav button[class*="bg-telegram-accent"] {
  background: var(--rr-tint) !important;
  color: var(--rr-blue) !important;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(61, 127, 242, .14);
}
html body.light-theme .room-view > aside nav button svg { opacity: .85; }

/* шапка комнаты */
html body.light-theme .room-view main > header {
  background: var(--rr-card) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid var(--rr-edge) !important;
  box-shadow: var(--rr-shadow) !important;
}
html body.light-theme .room-view main > header h2 { color: var(--rr-ink) !important; font-weight: 600 !important; letter-spacing: -.015em; }

/* кнопки шапки: «Донаты», «Пригласить» — мягкие пилюли; «Выйти» — мягкий красный */
html body.light-theme .room-view main > header button {
  border-radius: 999px !important;
}
html body.light-theme .room-view main > header button.bg-red-500 {
  background: #fdecef !important;
  color: #d6455d !important;
  box-shadow: none !important;
}
html body.light-theme .room-view main > header button.bg-red-500:hover { background: #fadbe1 !important; }

/* область чата / видео — карточка */
html body.light-theme .room-view main > div.min-h-0.flex-1 {
  background: var(--rr-card);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid var(--rr-edge);
  box-shadow: var(--rr-shadow);
}

/* поле ввода — плавающая «таблетка» */
html body.light-theme .room-view .absolute.inset-x-0.bottom-0[class*="border-t"] {
  background: #fff !important;
  border: 1px solid rgba(16, 24, 40, .06) !important;
  box-shadow: 0 1px 2px rgba(40, 70, 140, .05), 0 14px 30px -16px rgba(50, 90, 180, .3) !important;
}

/* пустой чат */
html body.light-theme .room-view main .text-telegram-text-secondary\/50,
html body.light-theme .room-view main .text-telegram-text-secondary\/60 { color: var(--rr-ink-3) !important; }

/* ---------- раскладка «карточек» на компьютере ---------- */
@media (min-width: 1024px) {
  .room-view {
    gap: 14px;
    padding: 14px;
    box-sizing: border-box;
  }
  .room-view > aside {
    border-radius: 24px !important;
    overflow: hidden;
    border-right-width: 1px !important;
    box-shadow:
      0 1px 2px rgba(40, 70, 140, .05),
      0 10px 20px -12px rgba(50, 90, 180, .16),
      0 30px 60px -28px rgba(50, 90, 180, .26);
  }
  .room-view main { gap: 14px; }
  .room-view main > header { border-radius: 20px !important; }
  .room-view main > div.min-h-0.flex-1 { border-radius: 24px; overflow: hidden; }
  .room-view .absolute.inset-x-0.bottom-0[class*="border-t"] {
    left: 14px !important;
    right: 14px !important;
    bottom: 14px !important;
    border-radius: 18px !important;
  }
}

/* ---------- тёмная тема: только форма ---------- */
@media (min-width: 1024px) {
  body:not(.light-theme) .room-view { background: #14171d !important; }
  body:not(.light-theme) .room-view > aside,
  body:not(.light-theme) .room-view main > header,
  body:not(.light-theme) .room-view main > div.min-h-0.flex-1 {
    background-color: #1c2029 !important;
    border: 1px solid rgba(255, 255, 255, .06) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 40px -20px rgba(0, 0, 0, .6) !important;
  }
}
body:not(.light-theme) .room-view > aside nav button { border-radius: 12px !important; }
body:not(.light-theme) .room-view main > header button.bg-red-500 { background: rgba(242, 122, 142, .14) !important; color: #f27a8e !important; border-radius: 999px !important; }

/* ---------- узкая колонка чата рядом с аудио/видео ---------- */
/* поле ввода не сжималось (нет min-width:0) — кнопка отправки уезжала за край */
.room-view form.flex.items-end > .flex-1 { min-width: 0; }
.room-view form.flex.items-end textarea { min-width: 0; width: 100%; scrollbar-width: none; }
.room-view form.flex.items-end textarea::-webkit-scrollbar { display: none; }
.room-view form.flex.items-end textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body.light-theme .room-view main [class*="w-[320px]"] {
  border-left-color: rgba(16, 24, 40, .06) !important;
  background: rgba(244, 246, 250, .6);
}
html body.light-theme .room-view main [class*="w-[320px]"] .border-t {
  border-color: rgba(16, 24, 40, .06) !important;
  background: transparent !important;
}
html body.light-theme .room-view main [class*="w-[320px]"] form .bg-telegram-tertiary {
  background: #fff !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 2px rgba(40, 70, 140, .05), 0 8px 18px -12px rgba(50, 90, 180, .25);
}