/* ====================================================== тема «Мегаполис» === */

html[data-theme="metropolis"] {
  --display-weight: 610;
  --display-spacing: -0.012em;
  --title-weight: 555;
  --label-spacing: 0.17em;

  --radius-lg: 15px;
  --radius-md: 10px;
  --radius-sm: 7px;
  --radius-chip: 999px;
  --rail-width: 2px;

  --bg: #050b12;
  --surface-1: rgba(198, 223, 236, 0.032);
  --surface-2: rgba(198, 223, 236, 0.058);
  --surface-3: rgba(198, 223, 236, 0.095);
  --sunken: rgba(1, 6, 11, 0.54);

  --line: rgba(145, 190, 216, 0.14);
  --line-strong: rgba(145, 190, 216, 0.29);

  --card-bg: linear-gradient(180deg, rgba(7, 16, 24, 0.52), rgba(3, 9, 15, 0.64));
  --card-bg-open: linear-gradient(180deg, rgba(9, 20, 29, 0.58), rgba(3, 9, 15, 0.7));
  --card-texture: none;
  --card-border: rgba(148, 194, 220, 0.17);
  --card-border-open: rgba(104, 195, 231, 0.42);
  --card-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 26px 58px -36px rgba(0, 0, 0, 0.96);

  --plate-bg: linear-gradient(180deg, rgba(204, 228, 239, 0.075), rgba(2, 8, 13, 0.3));
  --plate-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
  --turn-shadow: 0 0 30px -21px rgba(91, 192, 232, 0.92);

  --text: #e5eef3;
  --text-soft: #b5c6cf;
  --text-muted: #8297a3;
  --text-faint: #5f727d;

  --accent: #68c3e7;
  --accent-soft: rgba(104, 195, 231, 0.14);
  --accent-line: rgba(104, 195, 231, 0.43);
  --accent-glow: 0 0 24px -9px rgba(104, 195, 231, 0.96);
  --selection: rgba(104, 195, 231, 0.3);
  --brand-gradient: linear-gradient(150deg, rgba(111, 204, 237, 0.28), rgba(221, 163, 88, 0.18));
  --brand-shadow: 0 0 24px -10px rgba(104, 195, 231, 0.9);

  --provider-none: #78909c;
  --provider-codex: #74d2ef;
  --provider-claude: #e5a05f;
  --provider-tone-lightness: 0.79;
  --provider-tone-chroma: 0.1;
  --provider-tone-alpha: 0.18;
  --ok: #6fd3ad;
  --pending: #e3ab64;

  --dot-input: #74d2ef;
  --dot-cache: #6fd3ad;
  --dot-output: #e3ab64;
  --dot-think: #a6a1d5;

  --space-glow-a: rgba(60, 145, 190, 0.1);
  --space-glow-b: rgba(219, 147, 74, 0.05);
  --space-base: #050b12;
  --space-star: transparent;
  --star-opacity: 0;
  --metropolis-image: url("./metropolis-night.jpg");
}

html[data-theme="stormglass"] .theme-atmosphere [data-metropolis-glass],
html[data-theme="metropolis"] .theme-atmosphere [data-storm-glass] {
  display: none;
}

html[data-theme="metropolis"] .theme-atmosphere {
  display: block;
}

html[data-theme="metropolis"] .theme-atmosphere[data-ready="true"] canvas {
  opacity: 1;
}

/* «Мегаполис»: исходный снимок остаётся запасным фоном, если WebGL
   недоступен. Основной слой рисует тот же снимок через шейдер и поэтому может
   размывать запотевшие участки, оставлять прозрачные дорожки и преломлять
   изображение внутри капель, как в референсе Rain Droplets. */
html[data-theme="metropolis"] body::after {
  background-color: #050b12;
  background-image:
    linear-gradient(90deg, rgba(2, 7, 12, 0.5), rgba(2, 7, 12, 0.08) 62%),
    linear-gradient(180deg, rgba(3, 8, 14, 0.04) 48%, rgba(2, 6, 10, 0.42)),
    var(--metropolis-image);
  background-position: center, center, 62% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  mask-image: none;
  opacity: 1;
}

html[data-theme="metropolis"] body::before {
  content: none;
}

html[data-theme="metropolis"] .app-header {
  backdrop-filter: blur(16px) saturate(112%);
  -webkit-backdrop-filter: blur(16px) saturate(112%);
  background:
    radial-gradient(70% 150% at 92% 0, rgba(104, 195, 231, 0.13), transparent 64%),
    rgba(3, 10, 17, 0.58);
}

html[data-theme="metropolis"] .app-header::after {
  background: linear-gradient(90deg, transparent, rgba(104, 195, 231, 0.62), transparent);
}

html[data-theme="metropolis"] .journal details[data-work-log-day-section] {
  backdrop-filter: blur(7px) saturate(108%);
  -webkit-backdrop-filter: blur(7px) saturate(108%);
  background-color: rgba(3, 10, 17, 0.46);
  background-image: none;
}

html[data-theme="metropolis"] .journal details[data-work-log-turn-details] {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  background-color: rgba(4, 12, 19, 0.38);
  background-image: none;
}

/* Hundreds of independently blurred turn cards exhaust Electron's compositor
   in stream/workspace grouping and leave painted frames with missing text. Groups
   already sit on a glass panel, so use one denser fill instead of a backdrop
   layer per row. */
html[data-theme="metropolis"]:is([data-grouping="stream"], [data-grouping="workspace"])
  .journal
  details[data-work-log-turn-details] {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background-color: rgba(4, 12, 19, 0.58);
}

/* До готовности шейдера показывается дешёвый CSS-fallback: матовый
   конденсат и несколько скользящих дорожек. */
@keyframes metropolis-fallback-drops {
  from { transform: translate3d(0, -180px, 0); }
  to { transform: translate3d(0, 0, 0); }
}

html[data-theme="metropolis"] .theme-atmosphere::before,
html[data-theme="metropolis"] .theme-atmosphere::after {
  content: "";
  inset: 0;
  opacity: 1;
  position: absolute;
  transition: opacity 240ms ease;
}

html[data-theme="metropolis"] .theme-atmosphere::before {
  backdrop-filter: blur(6px) saturate(68%) brightness(0.82);
  -webkit-backdrop-filter: blur(6px) saturate(68%) brightness(0.82);
  background:
    radial-gradient(circle at 16% 24%, rgba(224, 237, 241, 0.16), transparent 28%),
    radial-gradient(circle at 72% 18%, rgba(213, 230, 236, 0.13), transparent 24%),
    radial-gradient(circle at 60% 78%, rgba(220, 234, 239, 0.12), transparent 30%),
    radial-gradient(circle, rgba(230, 241, 244, 0.12) 0 0.7px, transparent 1.2px);
  background-color: rgba(151, 174, 184, 0.11);
  background-size: auto, auto, auto, 7px 7px;
}

html[data-theme="metropolis"] .theme-atmosphere::after {
  animation: metropolis-fallback-drops 5.6s linear infinite;
  background-image:
    radial-gradient(ellipse 10px 16px at 50% 74%, rgba(241, 251, 252, 0.36), rgba(22, 39, 47, 0.2) 54%, transparent 72%),
    linear-gradient(90deg, transparent 44%, rgba(224, 239, 243, 0.2) 49%, rgba(25, 42, 50, 0.16) 53%, transparent 58%),
    radial-gradient(ellipse 6px 11px at 50% 78%, rgba(237, 249, 251, 0.3), rgba(20, 37, 45, 0.18) 55%, transparent 73%);
  background-position: 24px 0, 24px 0, 91px 63px;
  background-repeat: repeat;
  background-size: 211px 360px, 211px 360px, 137px 240px;
  filter: drop-shadow(0 2px 2px rgba(0, 5, 8, 0.52));
  mix-blend-mode: screen;
  opacity: 0.54;
}

html[data-theme="metropolis"] .theme-atmosphere[data-ready="true"]::before,
html[data-theme="metropolis"] .theme-atmosphere[data-ready="true"]::after {
  opacity: 0;
}

html[data-theme="metropolis"][data-surface="mobile"] body::after {
  background-position: center, center, 68% 50%;
}

/* Узкие панели используют тот же компактный порог, что resolveSurface(). */
@media (max-width: 720px) {html[data-theme="metropolis"] body::after {
    background-position: center, center, 68% 50%;
  }
}

html[data-background-override="true"][data-background="metropolis"] { --metropolis-image: url("./metropolis-night.jpg"); --hub-background-color: #050b12; --hub-background-image: linear-gradient(90deg, rgba(2, 7, 12, .5), rgba(2, 7, 12, .08) 62%), linear-gradient(180deg, rgba(3, 8, 14, .04) 48%, rgba(2, 6, 10, .42)), var(--metropolis-image); --hub-background-position: center, center, 62% 50%; }
html[data-background-override="true"][data-background="metropolis-towers"] { --hub-background-color: #050b12; --hub-background-image: linear-gradient(90deg, rgba(2, 7, 12, .5), rgba(2, 7, 12, .08) 44%, rgba(2, 7, 12, 0) 64%), var(--metropolis-towers-image, url("./metropolis-towers.jpg")); --hub-background-position: center, 60% 52%; }

@media (max-width: 720px) {html[data-background-override="true"][data-background="metropolis"] { --hub-background-position: center, center, 68% 50%; }
  html[data-background-override="true"][data-background="metropolis-towers"] { --hub-background-position: center, 74% 50%; }
}