/* Прячем рекламу «Planka Pro»: баннер сверху и пункт меню «Upgrade to Pro».
   Хешированные имена — Planka 2.1.1; могут поменяться при апгрейде. */
._wrapper_1u45e_5,
._proMenuItem_13awa_23 { display: none !important; }

/* ============================================================
   Лоадер «Загружаем задачи…» на 20+ секунд белой страницы,
   пока качается основной React-бандл Planka (2.2 МБ).
   DOM создаётся из theme-switcher.js (структура — см. там), CSS — здесь.
   Скрипт убирает #bear-loader, когда React заполняет #root.
   ============================================================ */
#bear-loader {
  position: fixed; inset: 0; z-index: 9999;
  background: #faf6fb;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Helvetica Neue", Arial, sans-serif;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
html[data-theme="dark"] #bear-loader {
  background: #0f0a1a;
}
#bear-loader.bl-hide {
  opacity: 0; visibility: hidden; pointer-events: none;
}

/* центральный блок: спиннер + название + текст оды */
.bl-center {
  display: flex; flex-direction: column; align-items: center;
  max-width: min(640px, 86vw);
  padding: 0 16px;
  z-index: 2;
}
.bl-spinner {
  width: 56px; height: 56px;
  border: 4px solid rgba(0, 0, 0, 0.06);
  border-top-color: #ec4899;
  border-radius: 50%;
  animation: bl-spin 0.9s linear infinite;
}
html[data-theme="dark"] .bl-spinner {
  border-color: rgba(255, 255, 255, 0.08);
  border-top-color: #b48cff;
}
@keyframes bl-spin { to { transform: rotate(360deg); } }

.bl-title {
  margin-top: 18px;
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #9c8aa3;
}
html[data-theme="dark"] .bl-title { color: #8a7ba8; }

.bl-ode {
  margin-top: 18px;
  font-size: 17px; line-height: 1.5;
  text-align: center;
  white-space: pre-line;
  color: #4a334a;
  font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua",
               Palatino, Georgia, serif;
  font-style: italic;
  min-height: 5em;
  /* Плавное появление текста оды, когда придёт ответ от Anthropic */
  transition: opacity 0.35s ease;
}
html[data-theme="dark"] .bl-ode { color: #ddd4ec; }
.bl-ode.bl-ode-loading { opacity: 0.55; }

/* ============================================================
   Фейерверки на весь экран. .bl-fx-layer — общий слой на весь
   вьюпорт, в нём лежат:
     - .bl-launcher — эмодзи-пусковые установки по краям, видимые
       пользователю как «откуда шарашит»;
     - .bl-particle — частицы, спавнятся в координатах своей пусковой
       и улетают по дуге с гравитацией.
   Координаты пусковых и направления полёта — в theme-switcher.js
   (массив LAUNCHERS), здесь только стили и анимация.
   ============================================================ */
.bl-fx-layer {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.bl-launcher {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 220px;
  line-height: 1;
  user-select: none;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.22));
  animation: bl-launcher-pulse 1.4s ease-in-out infinite;
}
html[data-theme="dark"] .bl-launcher {
  filter: drop-shadow(0 0 24px rgba(180, 140, 255, 0.55));
}
@keyframes bl-launcher-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1)    rotate(-3deg); }
  50%      { transform: translate(-50%, -50%) scale(1.08) rotate( 3deg); }
}

.bl-particle {
  position: absolute;
  width: var(--sz, 6px); height: var(--sz, 6px);
  margin-left: calc(var(--sz, 6px) / -2);
  margin-top:  calc(var(--sz, 6px) / -2);
  background: var(--c, #ec4899);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--c, #ec4899),
              0 0 20px var(--c, #ec4899);
  animation: bl-firework var(--dur, 2s) cubic-bezier(.25,.6,.4,1) forwards;
  will-change: transform, opacity;
}
@keyframes bl-firework {
  0%   { transform: translate(0, 0) scale(0.3); opacity: 0; }
  8%   { opacity: 1; }
  55%  { transform: translate(calc(var(--dx, 0vw) * 0.55),
                              calc(var(--dy, -60vh) * 0.5))
                  scale(1); opacity: 1; }
  100% { transform: translate(var(--dx, 0vw),
                              calc(var(--dy, -60vh) + 12vh))
                  scale(0.4); opacity: 0; }
}

/* ════════════════════════════════════════════════════════════
   ЛАКШЕРИ-СПОКОЙНЫЙ ЛОАДЕР — темы «Лакшери · Айвори» (luxe) и
   «Лакшери · Оникс» (luxe-dark). Без фейерверков (гасятся и в
   theme-switcher.js), благородный фон, тонкий золотой спиннер.
   Весёлые пастельные темы и «Чернильный аметист» (dark) — без изменений.
   ════════════════════════════════════════════════════════════ */
html[data-theme="luxe"] #bear-loader .bl-fx-layer,
html[data-theme="luxe-dark"] #bear-loader .bl-fx-layer { display: none !important; }

/* — Айвори (светлая лакшери) — */
html[data-theme="luxe"] #bear-loader {
  background: radial-gradient(125% 95% at 50% 0%, #fbf8f1 0%, #f3ecdd 68%, #ede3cf 100%) !important;
}
html[data-theme="luxe"] .bl-spinner {
  width: 50px; height: 50px; border-width: 3px;
  border-color: rgba(120, 96, 40, 0.15) !important;
  border-top-color: #c2a049 !important;
  animation-duration: 1.1s;
}
html[data-theme="luxe"] .bl-title { color: #a98c4d !important; letter-spacing: 0.16em; }
html[data-theme="luxe"] .bl-ode   { color: #5b4a2c !important; }

/* — Оникс (тёмная лакшери) — */
html[data-theme="luxe-dark"] #bear-loader {
  background: radial-gradient(125% 95% at 50% 0%, #16141a 0%, #0d0c10 68%, #08080a 100%) !important;
}
html[data-theme="luxe-dark"] .bl-spinner {
  width: 50px; height: 50px; border-width: 3px;
  border-color: rgba(201, 169, 81, 0.18) !important;
  border-top-color: #d6b65f !important;
  animation-duration: 1.1s;
}
html[data-theme="luxe-dark"] .bl-title { color: #c8a951 !important; letter-spacing: 0.16em; }
html[data-theme="luxe-dark"] .bl-ode   { color: #e7dcc4 !important; }

/* ============================================================
   Аудио-бар: [🔊] [название] [⏭] — прижат справа к тумблеру тем
   (центрирован, ширина ~188px), зазор 8px, высота 32px.
   Висит над всем (поверх React-UI и лоадера).
   ============================================================ */
#bear-audio-bar {
  position: fixed;
  top: 9px;
  left: 50%;
  /* половина ширины тумблера тем (~94px) + зазор 8px */
  transform: translateX(102px);
  z-index: 10050;
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
}

#bear-audio-toggle,
#bear-audio-next {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  line-height: 1;
  background: rgba(255, 255, 255, 0.93);
  border: 1.5px solid rgba(0, 0, 0, 0.07);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 2px 9px rgba(0, 0, 0, 0.22);
  transition: background 0.15s ease, box-shadow 0.4s ease;
}
#bear-audio-toggle:hover,
#bear-audio-next:hover {
  background: rgba(255, 255, 255, 1);
}
#bear-audio-toggle.is-playing {
  animation: bear-audio-pulse 0.9s ease-in-out infinite;
}
@keyframes bear-audio-pulse {
  0%, 100% { box-shadow: 0 2px 9px rgba(0,0,0,0.22),
                          0 0 0  0   rgba(236, 72, 153, 0.55); }
  50%      { box-shadow: 0 2px 9px rgba(0,0,0,0.22),
                          0 0 0 10px rgba(236, 72, 153, 0.00); }
}

#bear-audio-title {
  height: 32px;
  box-sizing: border-box;
  display: flex; align-items: center;
  padding: 0 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.50);
  background: rgba(255, 255, 255, 0.93);
  border: 1.5px solid rgba(0, 0, 0, 0.07);
  border-radius: 16px;
  box-shadow: 0 2px 9px rgba(0, 0, 0, 0.22);
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s ease, background 0.15s ease;
  user-select: none;
  cursor: pointer;
}
#bear-audio-title:hover { background: rgba(255, 255, 255, 1); }
#bear-audio-title.is-playing {
  color: rgba(0, 0, 0, 0.85);
}

html[data-theme="dark"] #bear-audio-toggle,
html[data-theme="dark"] #bear-audio-next,
html[data-theme="dark"] #bear-audio-title {
  background: rgba(24, 15, 38, 0.95);
  border-color: rgba(157, 109, 255, 0.4);
  box-shadow: 0 2px 13px rgba(157, 109, 255, 0.5);
}
html[data-theme="dark"] #bear-audio-toggle:hover,
html[data-theme="dark"] #bear-audio-next:hover {
  background: rgba(40, 24, 64, 1);
}
html[data-theme="dark"] #bear-audio-title {
  color: rgba(255, 255, 255, 0.55);
}
html[data-theme="dark"] #bear-audio-title.is-playing {
  color: rgba(255, 255, 255, 0.95);
}
html[data-theme="dark"] #bear-audio-toggle.is-playing {
  animation: bear-audio-pulse-dark 0.9s ease-in-out infinite;
}
@keyframes bear-audio-pulse-dark {
  0%, 100% { box-shadow: 0 2px 13px rgba(157,109,255,0.5),
                          0 0 0  0   rgba(180, 140, 255, 0.6); }
  50%      { box-shadow: 0 2px 13px rgba(157,109,255,0.5),
                          0 0 0 10px rgba(180, 140, 255, 0.0); }
}

/* ---- Выпадающий плейлист по клику на название ---- */
#bear-audio-menu {
  position: fixed;
  top: 48px;     /* прямо под аудио-баром (9px top + 32px height + 7px зазор) */
  left: 50%;
  /* центрируем под названием: к началу bar +102px добавляем (32 + 6 + 32 + 6)
     = 76px от bar до названия, ширина названия макс 260px, центр на ~+208px */
  transform: translateX(36px);
  z-index: 10049;
  min-width: 260px;
  max-width: 360px;
  max-height: 60vh;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.97);
  border: 1.5px solid rgba(0, 0, 0, 0.07);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform-origin: top center;
  transform: translateX(36px) scale(0.96);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
#bear-audio-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateX(36px) scale(1);
}
.bam-row {
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.75);
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.1s ease, color 0.1s ease;
}
.bam-row:hover { background: rgba(0, 0, 0, 0.06); }
.bam-row.is-current {
  background: rgba(236, 72, 153, 0.15);
  color: rgb(180, 36, 110);
  font-weight: 600;
}
.bam-row.is-current::before {
  content: "▶ ";
  font-size: 10px;
}

html[data-theme="dark"] #bear-audio-menu {
  background: rgba(24, 15, 38, 0.97);
  border-color: rgba(157, 109, 255, 0.4);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6),
              0 0 14px rgba(157, 109, 255, 0.3);
}
html[data-theme="dark"] .bam-row { color: rgba(255, 255, 255, 0.85); }
html[data-theme="dark"] .bam-row:hover { background: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .bam-row.is-current {
  background: rgba(157, 109, 255, 0.20);
  color: rgb(220, 195, 255);
}