/* ===================================== Rain: Downpour Corridor === */

html[data-theme="taiga"] {
  --display-weight: 610;
  --display-spacing: -0.008em;
  --title-weight: 560;
  --label-spacing: 0.14em;

  --radius-lg: 6px;
  --radius-md: 4px;
  --radius-sm: 3px;
  --radius-chip: 999px;
  --rail-width: 2px;

  --bg: #05090a;
  --surface-1: rgba(2, 8, 12, 0.68);
  --surface-2: rgba(7, 15, 20, 0.62);
  --surface-3: rgba(65, 124, 150, 0.1);
  --sunken: rgba(1, 5, 8, 0.72);

  --line: rgba(151, 184, 199, 0.14);
  --line-strong: rgba(160, 197, 214, 0.28);

  --card-bg: rgba(3, 9, 12, 0.62);
  --card-bg-open: rgba(4, 11, 15, 0.76);
  --card-texture: none;
  --card-border: rgba(181, 207, 220, 0.2);
  --card-border-open: rgba(170, 207, 225, 0.4);
  --card-shadow:
    inset 0 1px 0 rgba(225, 241, 237, 0.05),
    0 18px 42px -32px rgba(0, 0, 0, 0.96);

  --plate-bg: rgba(9, 18, 22, 0.48);
  --plate-shadow: inset 0 1px 0 rgba(221, 239, 234, 0.07);
  --turn-shadow: 0 18px 34px -28px rgba(0, 0, 0, 0.95);

  --text: #e7eff3;
  --text-soft: #bdccd3;
  --text-muted: #899ba5;
  --text-faint: #667781;

  --accent: #417c96;
  --accent-soft: rgba(65, 124, 150, 0.14);
  --accent-line: rgba(65, 124, 150, 0.62);
  --accent-glow: 0 0 18px -8px rgba(65, 124, 150, 0.82);
  --selection: rgba(65, 124, 150, 0.28);
  --brand-gradient: linear-gradient(150deg, rgba(65, 124, 150, 0.22), rgba(19, 45, 58, 0.24));
  --brand-shadow: 0 0 18px -10px rgba(65, 124, 150, 0.82);

  --shell-header-background:
    linear-gradient(90deg, rgba(1, 5, 8, 0.7), rgba(3, 10, 14, 0.3) 52%, rgba(1, 5, 8, 0.68)),
    var(--taiga-header-asset) center 76% / cover no-repeat;
  --shell-header-border: 1px solid rgba(65, 124, 150, 0.26);
  --shell-header-rule: linear-gradient(90deg, transparent 1%, rgba(65, 124, 150, 0.18) 8%, #417c96 48%, rgba(65, 124, 150, 0.24) 90%, transparent 99%);
  --shell-header-rule-opacity: 0.92;
  --shell-view-switch-background: rgba(1, 6, 9, 0.46);
  --shell-view-switch-border: 1px solid rgba(151, 184, 199, 0.13);
  --shell-tab-active-background: rgba(65, 124, 150, 0.07);
  --shell-tab-active-border: 1px solid transparent;
  --shell-tab-active-shadow: inset 0 -2px #417c96, 0 8px 18px -15px rgba(65, 124, 150, 0.95);
  --shell-tab-active-color: #dbe8ed;
  --shell-control-background: rgba(1, 6, 9, 0.48);
  --shell-control-border: 1px solid rgba(151, 184, 199, 0.14);
  --shell-panel-border: 2px solid transparent;
  --shell-panel-border-image: var(--taiga-panel-frame-asset) 64 fill stretch;
  --shell-panel-border-width: 2px;
  --shell-panel-border-image-width: 5px;
  --shell-panel-radius: 4px;
  --shell-chat-border: 2px solid transparent;
  --shell-chat-border-image: var(--taiga-panel-frame-asset) 64 fill stretch;
  --shell-chat-panel-border-image-width: 5px;
  --shell-chat-panel-border-width: 2px;
  --shell-chat-radius: 4px;
  --shell-stream-tabs-background:
    linear-gradient(rgba(1, 6, 9, 0.48), rgba(2, 8, 12, 0.42)),
    var(--taiga-panel-asset) center / 512px 512px repeat;
  --shell-stream-tabs-border-bottom: 1px solid rgba(65, 124, 150, 0.24);
  --shell-stream-tab-background: transparent;
  --shell-stream-tab-hover-background: rgba(65, 124, 150, 0.07);
  --shell-stream-tab-active-background: rgba(65, 124, 150, 0.06);
  --shell-stream-card-background: transparent;
  --shell-stream-card-border: 1px solid transparent;
  --shell-stream-card-shadow: none;

  --provider-none: #768480;
  --provider-codex: #a8c5d2;
  --provider-claude: #d2a26f;
  --provider-tone-lightness: 0.77;
  --provider-tone-chroma: 0.07;
  --provider-tone-alpha: 0.17;
  --ok: #9fc8c0;
  --pending: #d2a46d;

  --dot-input: #a8c5d2;
  --dot-cache: #a6c0cd;
  --dot-output: #d2a46d;
  --dot-think: #a5a7bd;

  --space-glow-a: rgba(158, 195, 213, 0.07);
  --space-glow-b: rgba(72, 111, 132, 0.08);
  --space-base: #05090a;
  --space-star: transparent;
  --star-opacity: 0;
  --taiga-image: url("./rain-corridor.png");
}

/* Сцена остаётся ярче в центре и справа, а рабочая зона получает только
   локальное затемнение. Дождь поверх кадра создаёт общий слой particles. */
html[data-theme="taiga"] body::after {
  background-color: #05090a;
  background-image:
    linear-gradient(90deg, rgba(2, 6, 9, 0.34), rgba(2, 6, 9, 0.01) 52%, rgba(2, 6, 9, 0.22)),
    linear-gradient(180deg, rgba(2, 6, 9, 0.04), transparent 48%, rgba(2, 6, 9, 0.22)),
    var(--taiga-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  inset: 0;
  mask-image: none;
  opacity: 1;
}

/* Медленное дыхание лунной дымки — единственный дополнительный эффект темы.
   Он меняет только transform и opacity и не запускает перерисовку панелей. */
html[data-theme="taiga"] body::before {
  animation: taiga-mist-breathe 16s ease-in-out infinite alternate;
  background:
    radial-gradient(46% 38% at 55% 22%, rgba(202, 224, 235, 0.12), transparent 72%),
    linear-gradient(105deg, transparent 36%, rgba(145, 181, 199, 0.05) 54%, transparent 72%);
  content: "";
  inset: -3% -2%;
  mask-image: none;
  mix-blend-mode: screen;
  opacity: 0.42;
  pointer-events: none;
  transform: translate3d(-0.5%, 0, 0) scale(1.015);
}

@keyframes taiga-mist-breathe {
  to {
    opacity: 0.62;
    transform: translate3d(0.7%, -0.35%, 0) scale(1.025);
  }
}

/* Шапка и верхние панели сохраняют общую геометрию Hub; тема меняет только
   материал и палитру. */
html[data-theme="taiga"] .app-header {
  backdrop-filter: blur(12px) saturate(92%);
  -webkit-backdrop-filter: blur(12px) saturate(92%);
}

/* Слева — почти сухая матовая панель убежища. В рабочей области панели
   остаются отдельными дымчатыми стёклами, между которыми виден лес. */
html[data-theme="taiga"] .task-rail {
  backdrop-filter: blur(10px) saturate(88%);
  -webkit-backdrop-filter: blur(10px) saturate(88%);
  background:
    linear-gradient(90deg, rgba(1, 6, 9, 0.58), rgba(2, 8, 12, 0.34)),
    url("./rain-panel.png") center / 512px 512px repeat;
  box-shadow:
    inset -1px 0 rgba(202, 224, 234, 0.04),
    14px 0 34px -30px rgba(0, 0, 0, 0.98);
}

html[data-theme="taiga"] .activity-rail {
  backdrop-filter: blur(10px) saturate(88%);
  -webkit-backdrop-filter: blur(10px) saturate(88%);
  background:
    linear-gradient(90deg, rgba(2, 8, 12, 0.34), rgba(1, 6, 9, 0.58)),
    url("./rain-panel.png") center / 512px 512px repeat;
}

html[data-theme="taiga"] .activity-rail .workspace-task-panel,
html[data-theme="taiga"] .activity-streams {
  background: transparent;
}

html[data-theme="taiga"] .chat {
  background: transparent;
}

html[data-theme="taiga"] .stream-tabs {
  backdrop-filter: blur(8px) saturate(92%);
  -webkit-backdrop-filter: blur(8px) saturate(92%);
}

html[data-theme="taiga"] .stream-chat-columns {
  background: transparent;
}

html[data-theme="taiga"] .stream-chat-columns[data-multi-stream] {
  background: rgba(181, 209, 222, 0.12);
  gap: 1px;
  padding: 0;
}

html[data-theme="taiga"] .chat-pane,
html[data-theme="taiga"] .stream-chat-preview {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(2, 7, 10, 0.1);
  border: 1px solid rgba(176, 207, 222, 0.13);
  border-radius: 0;
  box-shadow:
    inset 0 1px 0 rgba(224, 240, 247, 0.06),
    inset 0 -24px 34px -34px rgba(0, 0, 0, 0.9);
}

html[data-theme="taiga"] .stream-chat-preview {
  border-left-color: rgba(176, 207, 222, 0.16);
}

html[data-theme="taiga"] .stream-chat-columns[data-multi-stream] > .chat-pane[data-active-stream] {
  background: rgba(3, 10, 14, 0.16);
  box-shadow:
    inset 0 -2px rgba(65, 124, 150, 0.78),
    inset 0 1px 0 rgba(232, 245, 250, 0.11);
}

html[data-theme="taiga"] .task-workspace-item {
  background: rgba(2, 8, 12, 0.18);
  border-color: transparent;
  border-radius: 2px;
  box-shadow: inset 0 -1px rgba(151, 184, 199, 0.07);
}

html[data-theme="taiga"] .task-workspace-item:hover,
html[data-theme="taiga"] .task-workspace-item:focus-visible {
  background: rgba(65, 124, 150, 0.08);
  border-color: transparent;
}

html[data-theme="taiga"] .task-workspace-item[data-selected] {
  background: rgba(65, 124, 150, 0.1);
  border-color: transparent;
  box-shadow:
    inset 0 -2px #417c96,
    0 10px 20px -18px rgba(65, 124, 150, 0.95);
}

html[data-theme="taiga"] .task-item {
  background: rgba(2, 8, 12, 0.34);
  border-color: rgba(151, 184, 199, 0.13);
  border-radius: 3px;
  box-shadow: inset 0 1px rgba(225, 239, 245, 0.035);
}

html[data-theme="taiga"] .task-item:hover {
  background: rgba(8, 21, 27, 0.56);
  border-color: rgba(65, 124, 150, 0.34);
}

html[data-theme="taiga"] .task-item[data-selected] {
  background: rgba(11, 29, 37, 0.64);
  border-color: rgba(65, 124, 150, 0.62);
  box-shadow:
    inset 0 -2px #417c96,
    inset 0 1px rgba(229, 241, 237, 0.07);
}

html[data-theme="taiga"] .msg {
  backdrop-filter: blur(7px) saturate(94%);
  -webkit-backdrop-filter: blur(7px) saturate(94%);
  background:
    linear-gradient(rgba(2, 8, 12, 0.68), rgba(2, 8, 12, 0.62)),
    url("./rain-panel.png") center / 512px 512px repeat;
  border-color: rgba(151, 184, 199, 0.13);
  border-radius: 3px;
  box-shadow:
    inset 0 1px rgba(227, 241, 237, 0.04),
    0 16px 30px -26px rgba(0, 0, 0, 0.96);
}

html[data-theme="taiga"] .msg-agent,
html[data-theme="taiga"] .msg-live {
  background:
    linear-gradient(rgba(1, 7, 10, 0.72), rgba(1, 7, 10, 0.68)),
    url("./rain-panel.png") center / 512px 512px repeat;
}

html[data-theme="taiga"] .msg-user {
  background:
    linear-gradient(rgba(65, 124, 150, 0.16), rgba(25, 57, 70, 0.1)),
    url("./rain-panel.png") center / 512px 512px repeat;
  border-color: rgba(65, 124, 150, 0.38);
}

html[data-theme="taiga"] body form.composer {
  backdrop-filter: blur(14px) saturate(92%);
  -webkit-backdrop-filter: blur(14px) saturate(92%);
  background-color: transparent !important;
  background-image:
    linear-gradient(rgba(1, 6, 9, 0.18), rgba(1, 6, 9, 0.34)),
    url("./rain-composer.png") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  border: 2px solid transparent !important;
  border-image: url("./rain-panel-frame.png") 64 fill / 5px / 0 stretch !important;
  border-radius: 5px;
  box-shadow:
    inset 0 1px rgba(214, 232, 240, 0.06),
    0 20px 42px -30px rgba(0, 0, 0, 0.96);
}

html[data-theme="taiga"] .composer-input {
  background: rgba(1, 6, 9, 0.22);
  border-color: transparent;
  border-radius: 2px;
}

html[data-theme="taiga"] .journal details[data-work-log-day-section] {
  backdrop-filter: blur(7px) saturate(104%);
  -webkit-backdrop-filter: blur(7px) saturate(104%);
  background-color: rgba(3, 8, 9, 0.72);
  background-image: none;
  border-radius: 4px;
}

html[data-theme="taiga"] .journal details[data-work-log-turn-details] {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background-color: rgba(4, 10, 10, 0.58);
  background-image: none;
  border-radius: 4px;
}

html[data-theme="taiga"] .journal details[data-work-log-turn-details]:hover,
html[data-theme="taiga"] .journal details[data-work-log-turn-details][open] {
  background-color: rgba(8, 16, 15, 0.76);
}

/* Реестр фонов подменяет эти переменные в браузере, Worker и VS Code. */
html[data-background-override="true"][data-background="taiga"] {
  --taiga-image: url("./rain-corridor.png");
  --hub-background-color: #040809;
  --hub-background-image:
    linear-gradient(90deg, rgba(2, 6, 9, 0.34), rgba(2, 6, 9, 0.01) 52%, rgba(2, 6, 9, 0.22)),
    linear-gradient(180deg, rgba(2, 6, 9, 0.04), transparent 48%, rgba(2, 6, 9, 0.22)),
    var(--taiga-image);
  --hub-background-position: center;
}

html[data-background-override="true"][data-background="taiga-corridor"] {
  --hub-background-color: #05090a;
  --hub-background-image:
    linear-gradient(90deg, rgba(2, 6, 9, 0.38), rgba(2, 6, 9, 0.04) 52%, rgba(2, 6, 9, 0.2)),
    linear-gradient(180deg, rgba(2, 6, 9, 0.06), transparent 46%, rgba(2, 6, 9, 0.26)),
    var(--taiga-corridor-image, url("./rain-shelter.png"));
  --hub-background-position: 54% center;
}

html[data-background-override="true"][data-background="taiga-lantern"] {
  --hub-background-color: #040808;
  --hub-background-image:
    linear-gradient(90deg, rgba(2, 5, 6, 0.32), rgba(2, 5, 6, 0.03) 52%, rgba(2, 5, 6, 0.24)),
    linear-gradient(180deg, rgba(2, 5, 6, 0.06), transparent 48%, rgba(2, 5, 6, 0.25)),
    var(--taiga-lantern-image, url("./rain-lantern.png"));
  --hub-background-position: center;
}

html[data-background-override="true"][data-background="taiga-waterfall"] {
  --hub-background-color: #03070c;
  --hub-background-image:
    linear-gradient(90deg, rgba(1, 5, 10, 0.26), rgba(1, 5, 10, 0.01) 50%, rgba(1, 5, 10, 0.12)),
    linear-gradient(180deg, rgba(1, 5, 10, 0.03), transparent 54%, rgba(1, 5, 10, 0.18)),
    var(--taiga-waterfall-image, url("./rain-waterfall.png"));
  --hub-background-position: 58% center;
}

html[data-background-override="true"][data-background="taiga-ruins"] {
  --hub-background-color: #03070a;
  --hub-background-image:
    linear-gradient(90deg, rgba(1, 5, 8, 0.18), rgba(1, 5, 8, 0.01) 50%, rgba(1, 5, 8, 0.08)),
    linear-gradient(180deg, rgba(1, 5, 8, 0.02), transparent 52%, rgba(1, 5, 8, 0.16)),
    var(--taiga-ruins-image, url("./rain-ruins.png"));
  --hub-background-position: 60% center;
}

@media (max-width: 720px) {
  html[data-theme="taiga"] body::after {
    background-position: 61% center;
  }

  html[data-theme="taiga"] .chat-pane,
  html[data-theme="taiga"] .stream-chat-preview,
  html[data-theme="taiga"] .msg {
    background-color: rgba(3, 9, 12, 0.82);
  }

  html[data-background-override="true"][data-background="taiga"] {
    --hub-background-position: 61% center;
  }

  html[data-background-override="true"][data-background="taiga-corridor"],
  html[data-background-override="true"][data-background="taiga-lantern"] {
    --hub-background-position: 52% center;
  }

  html[data-background-override="true"][data-background="taiga-waterfall"],
  html[data-background-override="true"][data-background="taiga-ruins"] {
    --hub-background-position: 74% center;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="taiga"] body::before {
    animation: none;
    opacity: 0.54;
    transform: none;
  }
}