/* ============================================================
   Weatmood — минимальный слой поверх базового дизайна.
   ПОЛНАЯ СЕРАЯ ТЕМА: интерфейс в серых тонах вместо чёрного.
   Классы и JS не тронуты: удаляем файл — возвращается база.
   ============================================================ */

/* --- Палитра Kimi: перекрываем переменные базы целиком --- */
:root {
  --bg: #121212;                    /* зона чата — темнее сайдбара */
  --bg-sidebar: #181817;            /* сайдбар — светлее и чуть тёплый */
  --bg-elev: #1f1f1f;               /* композер, кнопки, дропдауны */
  --bg-hover: rgba(255, 255, 255, .06);
  --bg-active: rgba(255, 255, 255, .09);
  --bg-composer: #1f1f1f;
  --border: rgba(255, 255, 255, .08);
}

:root {
  --wm-sidebar: #181817;
  --wm-hover: rgba(255, 255, 255, .06);
  --wm-active: rgba(255, 255, 255, .09);
  --wm-line: rgba(255, 255, 255, .07);
}

.sidebar {
  margin: 0;
  height: 100vh;
  border-radius: 0;
  background: var(--wm-sidebar);
  border-right: 1px solid var(--wm-line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  padding: 12px 10px 10px;
}

/* коллапс — как в базе */
body.is-collapsed .sidebar {
  margin-left: calc(var(--sidebar-w) * -1);
}

/* --- Бренд: лого под тему (без плашки) --- */
.brand__mark {
  width: 28px;
  height: 28px;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  overflow: visible;
}

.brand__mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* тёмная тема (по умолчанию) — белое лого, светлая — чёрное */
.brand__mark .logo-light { display: none; }
.brand__mark .logo-dark { display: block; }

html[data-theme="light"] .brand__mark .logo-dark { display: none; }
html[data-theme="light"] .brand__mark .logo-light { display: block; }

.brand__name {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--text);
}

/* --- Навигация --- */
.nav {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--wm-line);
}

.nav__item {
  border-radius: 8px;
  transition: background .12s ease, color .12s ease;
}

.nav__item:hover {
  background: var(--wm-hover);
}

.nav__item:hover svg {
  color: var(--text);
}

.nav__item:active {
  background: var(--wm-active);
}

/* «Новый чат» — тёмная кнопка с бордером, как в референсе */
.nav__item--primary {
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border);
  font-weight: 500;
  border-radius: 10px;
  box-shadow: none;
}

.nav__item--primary svg {
  color: var(--text);
}

.nav__item--primary:hover {
  background: #262625;
}

.nav__item--primary:active {
  transform: translateY(1px);
}

/* --- История чатов: без цветных полос, только тон серого --- */
.sidebar__history {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .14) transparent;
}

.sidebar__history::-webkit-scrollbar {
  width: 4px;
}

.sidebar__history::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .14);
  border-radius: 4px;
}

.history__item {
  border-left: none;
  transition: background .12s ease;
}

.history__item:hover {
  background: var(--wm-hover);
}

.history__row.is-active .history__item {
  background: var(--wm-active);
}

/* --- Карточка пользователя --- */
.sidebar__bottom {
  border-top: 1px solid var(--wm-line);
  padding-top: 10px;
}

.user {
  border-radius: 10px;
  transition: background .12s ease;
}

.user:hover {
  background: var(--wm-hover);
}

.user__avatar {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: none;
}

/* --- Аурора за композером: отключена --- */
.aurora {
  display: none;
}

/* --- Hero-заголовок: 3D-волна из букв-кубиков --- */
.hero__title {
  min-height: 46px;
  line-height: 1.15;
}

.cube-stage {
  --cube-depth: .31em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: .04em;
  min-height: 1.15em;
  perspective: 760px;
  perspective-origin: 50% 45%;
  white-space: nowrap;
}

.cube-letter {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: var(--cell-width, .7em);
  height: 1.15em;
  perspective: 760px;
  vertical-align: top;
  transition: width 240ms cubic-bezier(.22, .8, .3, 1);
}

.cube-letter__inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--cube-depth) * -1)) rotateY(0deg);
  transition: transform 760ms cubic-bezier(.2, .72, .18, 1);
  transition-delay: calc(var(--i) * 72ms);
  transform-origin: 50% 50%;
  will-change: transform;
}

.cube-stage.is-flipping .cube-letter__inner {
  transform: translateZ(calc(var(--cube-depth) * -1)) rotateY(-90deg);
}

.cube-letter__face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  color: var(--text);
  text-shadow: inherit;
  transform-style: preserve-3d;
}

.cube-letter__face--front {
  transform: rotateY(0deg) translateZ(var(--cube-depth));
}

.cube-letter__face--next {
  transform: rotateY(90deg) translateZ(var(--cube-depth));
  color: color-mix(in srgb, var(--text) 92%, var(--bg-elev));
  text-shadow: -7px 0 18px rgba(0, 0, 0, .28);
}

html[data-theme="light"] .cube-letter__face--next {
  text-shadow: -6px 0 16px rgba(0, 0, 0, .12);
}

@media (max-width: 520px) {
  .cube-stage {
    --cube-depth: .29em;
    perspective: 620px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .cube-letter,
  .cube-letter__inner {
    transition: none;
  }
}

/* --- Недоступная модель в списке (Weatmood Flash Alpha) --- */
.model-item.is-disabled {
  opacity: .45;
  cursor: not-allowed;
}

.model-item.is-disabled:hover {
  background: transparent;
}

.model-item.is-disabled::after {
  content: "скоро";
  margin-left: auto;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: .02em;
}

.model-item.is-disabled .model-item__check {
  display: none;
}

/* --- Композер в стиле референса: высокое поле, ввод сверху, кнопки снизу --- */
.composer {
  border-radius: 26px;
  padding: 12px 14px 12px 12px;
  gap: 4px;
  min-height: 118px;
}

.composer__row {
  flex-wrap: wrap;
  row-gap: 10px;
}

.composer__input {
  order: -1;
  flex: 1 1 100%;
  font-size: 16.5px;
  padding: 10px 12px 12px;
}

.composer__input::placeholder {
  color: var(--text-faint);
}

/* ряд управления: «+» слева, выбор модели и отправка справа */
.model-picker--in-composer {
  margin-left: auto;
}

.composer__add,
.composer__send {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

.composer__send {
  border-radius: 50%;
  background: #2c2c2c;
}

.composer__send:not(:disabled):hover {
  background: #3a3a3a;
}

/* --- Композер в hero-режиме: плотный фон без стекла, как в референсе --- */
.composer--center {
  background: var(--bg-composer);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: var(--border);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
}

.composer--center:focus-within {
  border-color: rgba(255, 255, 255, .22);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .40), 0 0 0 3px rgba(255, 255, 255, .07);
}

/* --- Светлая тема: серая панель на белом --- */
html[data-theme="light"] .sidebar {
  background: #f1f1f3;
  border-right-color: rgba(0, 0, 0, .07);
}

html[data-theme="light"] .nav {
  border-bottom-color: rgba(0, 0, 0, .07);
}

html[data-theme="light"] .sidebar__bottom {
  border-top-color: rgba(0, 0, 0, .07);
}

html[data-theme="light"] .nav__item:hover {
  background: rgba(0, 0, 0, .05);
}

html[data-theme="light"] .history__item:hover {
  background: rgba(0, 0, 0, .05);
}

html[data-theme="light"] .history__row.is-active .history__item {
  background: rgba(0, 0, 0, .08);
}

html[data-theme="light"] .nav__item--primary:hover {
  background: #e2e2e6;
}

html[data-theme="light"] .user:hover {
  background: rgba(0, 0, 0, .05);
}

/* --- Мобильная версия --- */
@media (max-width: 906px) {
  .sidebar {
    margin: 0;
    height: 100vh;
  }

  body.is-collapsed .sidebar {
    margin-left: calc(var(--sidebar-w) * -1);
  }
}