/* =================================== «Озеро»: тишина после летнего дождя === */

html[data-theme="lake"] {
  --display-weight: 610;
  --display-spacing: -0.008em;
  --title-weight: 570;
  --label-spacing: 0.075em;

  --radius-lg: 22px 9px 22px 9px;
  --radius-md: 16px 7px 16px 7px;
  --radius-sm: 11px 5px 11px 5px;
  --radius-chip: 999px;
  --rail-width: 2px;

  --bg: #06100c;
  --surface-1: rgb(4 24 17 / 34%);
  --surface-2: rgb(12 43 31 / 38%);
  --surface-3: rgb(32 73 51 / 44%);
  --sunken: rgb(1 13 9 / 42%);

  --line: rgb(151 227 177 / 18%);
  --line-strong: rgb(159 237 188 / 34%);
  --card-bg: linear-gradient(180deg, rgb(7 30 21 / 48%), rgb(2 17 12 / 54%));
  --card-bg-open: linear-gradient(180deg, rgb(10 39 27 / 62%), rgb(3 20 14 / 68%));
  --card-texture: none;
  --card-border: rgb(151 227 177 / 20%);
  --card-border-open: rgb(159 237 188 / 38%);
  --card-shadow:
    inset 0 1px 0 rgb(220 255 231 / 5%),
    0 28px 64px -40px rgb(0 0 0 / 95%);
  --plate-bg: linear-gradient(180deg, rgb(166 235 188 / 7%), rgb(4 22 15 / 24%));
  --plate-shadow: inset 0 1px 0 rgb(222 255 232 / 6%);
  --turn-shadow: 0 14px 34px -28px rgb(0 0 0 / 92%);

  --text: #eff8f0;
  --text-soft: #c9ddcc;
  --text-muted: #93aa98;
  --text-faint: #697e6f;
  --accent: #83dfa5;
  --accent-soft: rgb(101 220 148 / 14%);
  --accent-line: rgb(131 229 169 / 42%);
  --accent-glow: 0 0 22px -11px rgb(113 231 158 / 88%);
  --selection: rgb(104 218 147 / 26%);
  --brand-gradient: linear-gradient(150deg, rgb(120 230 163 / 18%), rgb(23 84 58 / 22%));
  --brand-shadow: 0 0 24px -13px rgb(119 231 162 / 72%);

  --provider-none: #91a196;
  --provider-codex: #92d7cf;
  --provider-claude: #e9bd83;
  --provider-tone-lightness: 0.8;
  --provider-tone-chroma: 0.08;
  --provider-tone-alpha: 0.17;
  --ok: #83dfa5;
  --pending: #e2bd70;
  --dot-input: #92d7cf;
  --dot-cache: #d4c58d;
  --dot-output: #e9bd83;
  --dot-think: #bca9d6;

  --space-glow-a: rgb(117 225 159 / 9%);
  --space-glow-b: rgb(62 132 91 / 10%);
  --space-base: #06100c;
  --space-star: transparent;
  --star-opacity: 0;

  --lake-image: url("./lake-after-rain.jpg");
  --lake-corners-image: url("./lake-corners.png");
  --lake-mark-image: url("./lake-mark.png");
  --lake-settings-image: url("./lake-settings.png");
}

html[data-theme="lake"] body::after {
  background-color: #06100c;
  background-image:
    linear-gradient(90deg, rgb(2 12 8 / 54%) 0%, rgb(2 12 8 / 27%) 31%, transparent 57%),
    linear-gradient(0deg, rgb(2 10 7 / 22%), transparent 38%),
    var(--lake-image);
  background-position: center, center, 61% 54%;
  background-repeat: no-repeat;
  background-size: cover;
  inset: 0;
  mask-image: none;
  opacity: 1;
}

/* Медленный блик идёт по воде, не двигая сам кадр. Анимируются только
   transform и opacity, поэтому эффект остаётся дешёвым даже на ноутбуке. */
@keyframes lake-sun-path {
  0%, 100% { opacity: 0.12; transform: translate3d(-1.5%, 0.5%, 0) scale(1.01); }
  50% { opacity: 0.34; transform: translate3d(1.5%, -0.35%, 0) scale(1.035); }
}

html[data-theme="lake"] body::before {
  animation: lake-sun-path 24s ease-in-out infinite;
  background-image:
    radial-gradient(32% 18% at 59% 22%, rgb(239 255 212 / 22%), transparent 72%),
    radial-gradient(34% 11% at 57% 58%, rgb(192 241 190 / 13%), transparent 76%);
  background-position: center;
  background-size: cover;
  content: "";
  mask-image: none;
  mix-blend-mode: screen;
  opacity: 0.18;
}

html[data-theme="lake"] .app-header {
  backdrop-filter: blur(10px) saturate(112%);
  -webkit-backdrop-filter: blur(10px) saturate(112%);
  background: rgb(3 18 13 / 52%);
  padding-block: 0.38rem;
}

html[data-theme="lake"] .app-header::after {
  background: linear-gradient(90deg, transparent, rgb(133 224 168 / 42%), transparent);
}

html[data-theme="lake"] .view-switch {
  background: transparent;
  border: 0;
  border-radius: 0;
  gap: 0.22rem;
  padding: 0;
}

html[data-theme="lake"] .brand .eyebrow {
  color: var(--text-soft);
  font-size: 0.76rem;
  letter-spacing: 0.015em;
  text-transform: none;
}

html[data-theme="lake"] .brand h1,
html[data-theme="lake"] .view-tab svg {
  display: none;
}

html[data-theme="lake"] .toolbar .view-settings {
  background: rgb(4 24 17 / 48%);
  border-color: rgb(151 227 177 / 25%);
  border-radius: 5px;
  box-shadow: inset 0 1px 0 rgb(220 255 231 / 5%);
  color: var(--text-soft);
  font-size: 0.72rem;
  gap: 0.38rem;
  min-height: 1.9rem;
  padding: 0.28rem 0.7rem 0.28rem 0.48rem;
}

html[data-theme="lake"] .toolbar .view-settings::before {
  background: var(--lake-settings-image) center / contain no-repeat;
  content: "";
  flex: 0 0 auto;
  height: 0.9rem;
  width: 0.9rem;
}

html[data-theme="lake"] .toolbar .view-settings > svg {
  display: none;
}

html[data-theme="lake"] .toolbar .view-settings:hover:not(:disabled) {
  background: rgb(22 58 41 / 58%);
  border-color: rgb(159 237 188 / 42%);
}

html[data-theme="lake"] .view-tab {
  border-bottom: 1px solid transparent;
  border-radius: 0;
  padding-inline: 0.82rem;
}

html[data-theme="lake"] .view-tab[aria-pressed="true"] {
  background: linear-gradient(180deg, transparent 55%, rgb(93 204 136 / 9%));
  border: 0;
  border-bottom: 1px solid var(--accent);
  padding: 0.32rem 0.82rem;
}

@keyframes lake-ripple {
  0% { opacity: 0.58; transform: translate(-50%, -50%) scale(0.62); }
  72%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.75); }
}

html[data-theme="lake"] .task-item[data-running] .provider-dot {
  animation: none;
  position: relative;
}

html[data-theme="lake"] .task-item[data-running] .provider-dot::after {
  animation: lake-ripple 2.8s ease-out infinite;
  border: 1px solid currentColor;
  border-radius: 50%;
  content: "";
  height: 1rem;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 50%;
  width: 1rem;
}

html[data-theme="lake"] .journal details[data-work-log-day-section] {
  backdrop-filter: blur(7px) saturate(110%);
  -webkit-backdrop-filter: blur(7px) saturate(110%);
  background-color: rgb(3 20 14 / 42%);
  background-image: none;
}

html[data-theme="lake"] .journal details[data-work-log-day-section][open] {
  background-color: rgb(3 22 15 / 52%);
}

html[data-theme="lake"] .journal details[data-work-log-turn-details] {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  background-color: rgb(6 28 19 / 38%);
  background-image: none;
}

html[data-theme="lake"] .journal details[data-work-log-turn-details]:hover,
html[data-theme="lake"] .journal details[data-work-log-turn-details][open] {
  background-color: rgb(10 40 27 / 54%);
}

/* На широком экране панели занимают левую часть кадра, а собаки остаются
   самостоятельным центром композиции справа. */
@media (min-width: 1120px) {
  html[data-theme="lake"]:not([data-surface="mobile"]) {
    --task-rail-width: clamp(236px, 16.4vw, 292px);
  }

  html[data-theme="lake"]:not([data-surface="mobile"]) .app-header-inner {
    max-width: none;
    padding-inline: clamp(0.9rem, 1.25vw, 1.35rem);
  }

  html[data-theme="lake"]:not([data-surface="mobile"]) .workspace {
    gap: clamp(0.75rem, 0.9vw, 1.1rem);
    grid-template-columns: var(--task-rail-width) minmax(520px, 33vw);
    justify-content: start;
    margin: 0;
    max-width: none;
    padding: clamp(0.85rem, 1.05vw, 1.2rem);
    padding-bottom: 0.75rem;
    padding-right: 0;
    width: 100%;
  }

  html[data-theme="lake"]:not([data-surface="mobile"]) .task-rail,
  html[data-theme="lake"]:not([data-surface="mobile"]) .chat {
    border: 1px solid rgb(145 226 175 / 26%);
    box-shadow:
      inset 0 1px 0 rgb(220 255 230 / 5%),
      0 28px 68px -42px rgb(0 0 0 / 94%);
    overflow: hidden;
    position: relative;
  }

  /* Отдельный растр повторяет водяные завитки принятого концепта. */
  html[data-theme="lake"]:not([data-surface="mobile"]) .task-rail::after,
  html[data-theme="lake"]:not([data-surface="mobile"]) .chat::after {
    background: var(--lake-corners-image) center / 100% 100% no-repeat;
    content: "";
    inset: 5px;
    opacity: 0.25;
    pointer-events: none;
    position: absolute;
    z-index: 30;
  }

  html[data-theme="lake"]:not([data-surface="mobile"]) .task-rail {
    backdrop-filter: blur(7px) saturate(110%);
    -webkit-backdrop-filter: blur(7px) saturate(110%);
    background: linear-gradient(180deg, rgb(4 29 20 / 42%), rgb(2 17 12 / 52%));
    border-radius: 22px 8px 22px 8px;
  }

  html[data-theme="lake"]:not([data-surface="mobile"]) .task-rail-head {
    min-height: 2.35rem;
    padding: 0;
    position: absolute;
    right: 1rem;
    top: 0.9rem;
    z-index: 31;
  }

  html[data-theme="lake"]:not([data-surface="mobile"]) .task-rail-title {
    display: none;
  }

  html[data-theme="lake"]:not([data-surface="mobile"]) .task-search {
    background: rgb(1 15 10 / 36%);
    border-color: rgb(145 226 175 / 16%);
    border-radius: 14px 5px 14px 5px;
    margin: 0.9rem 3.95rem 0.72rem 1rem;
    min-height: 2.35rem;
    padding-inline: 0.72rem;
    position: relative;
    z-index: 31;
  }

  html[data-theme="lake"]:not([data-surface="mobile"]) .task-list {
    padding-inline: 0;
  }

  html[data-theme="lake"]:not([data-surface="mobile"]) .task-item {
    border: 0;
    border-bottom: 1px solid rgb(142 222 171 / 8%);
    border-radius: 0;
    margin: 0;
    min-height: 4.2rem;
    padding: 0.72rem 1rem;
  }

  html[data-theme="lake"]:not([data-surface="mobile"]) .task-item:hover {
    background: linear-gradient(90deg, rgb(108 218 149 / 9%), transparent);
  }

  html[data-theme="lake"]:not([data-surface="mobile"]) .task-item[data-selected] {
    background: linear-gradient(90deg, rgb(99 210 140 / 19%), rgb(40 106 75 / 7%));
    border-bottom-color: rgb(145 226 175 / 14%);
  }

  html[data-theme="lake"]:not([data-surface="mobile"]) .task-item[data-selected]::before {
    border-radius: 0 999px 999px 0;
    bottom: 0.52rem;
    left: 0;
    top: 0.52rem;
  }

  html[data-theme="lake"]:not([data-surface="mobile"]) .chat {
    backdrop-filter: blur(7px) saturate(108%);
    -webkit-backdrop-filter: blur(7px) saturate(108%);
    background: linear-gradient(180deg, rgb(3 26 18 / 34%), rgb(2 16 11 / 47%));
    border-radius: 10px 22px 10px 22px;
  }

  html[data-theme="lake"]:not([data-surface="mobile"]) .workspace:has(.chat-pane[data-dialog-settings-open]) {
    grid-template-columns: var(--task-rail-width) minmax(760px, 55vw);
  }

  /* С появлением соседних Streams интерфейс становится главным содержимым:
     рабочая область занимает остаток экрана, но фон с собаками остаётся виден
     через полупрозрачные панели. */
  html[data-theme="lake"]:not([data-surface="mobile"]) .workspace:has(.stream-chat-columns[data-multi-stream]) {
    grid-template-columns: var(--task-rail-width) minmax(0, 1fr);
    padding-right: clamp(0.85rem, 1.05vw, 1.2rem);
  }

  html[data-theme="lake"]:not([data-surface="mobile"]) .chat-head {
    background: rgb(3 23 16 / 36%);
    min-height: 4rem;
    padding: 0.82rem 1.1rem;
  }

  html[data-theme="lake"]:not([data-surface="mobile"]) .chat-scroll {
    padding: 1.15rem 1.2rem 0.9rem;
  }

  html[data-theme="lake"]:not([data-surface="mobile"]) .chat-log {
    gap: 0.9rem;
    margin: 0;
    max-width: none;
  }

  html[data-theme="lake"]:not([data-surface="mobile"]) .msg {
    max-width: min(40rem, 91%);
  }

  html[data-theme="lake"]:not([data-surface="mobile"]) .msg-agent,
  html[data-theme="lake"]:not([data-surface="mobile"]) .msg-live {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    padding-inline: 0;
  }

  html[data-theme="lake"]:not([data-surface="mobile"]) .msg-user {
    backdrop-filter: blur(4px) saturate(108%);
    -webkit-backdrop-filter: blur(4px) saturate(108%);
    background-color: rgb(31 79 55 / 50%);
    border-color: rgb(145 226 175 / 20%);
    border-radius: 14px 5px 14px 5px;
    max-width: min(34rem, 74%);
  }

  html[data-theme="lake"]:not([data-surface="mobile"]) .composer {
    background: rgb(2 19 13 / 38%);
    padding: 0.78rem 1rem 0.9rem;
  }

  html[data-theme="lake"]:not([data-surface="mobile"]) .composer-input {
    background: rgb(3 24 16 / 48%);
    border-radius: 13px 5px 13px 5px;
  }

  html[data-theme="lake"]:not([data-surface="mobile"]) .composer-send,
  html[data-theme="lake"]:not([data-surface="mobile"]) .composer-attach,
  html[data-theme="lake"]:not([data-surface="mobile"]) .composer-slash,
  html[data-theme="lake"]:not([data-surface="mobile"]) .icon-button,
  html[data-theme="lake"]:not([data-surface="mobile"]) .chip-button {
    border-radius: 10px 4px 10px 4px;
  }
}

html[data-background-override="true"][data-background="lake"] { --hub-background-color: #06100c; --hub-background-image: linear-gradient(90deg, rgb(2 12 8 / 54%) 0%, rgb(2 12 8 / 27%) 31%, transparent 57%), linear-gradient(0deg, rgb(2 10 7 / 22%), transparent 38%), var(--lake-image, url("./lake-after-rain.jpg")); --hub-background-position: center, center, 61% 54%; }
html[data-background-override="true"][data-background="lake-summer"] { --hub-background-color: #080d0b; --hub-background-image: linear-gradient(90deg, rgb(3 8 7 / 72%), rgb(3 8 7 / 38%) 32%, transparent 62%), linear-gradient(0deg, rgb(3 8 7 / 24%), transparent 36%), var(--lake-summer-image, url("./lake-summer.jpg")); --hub-background-position: center, center, 56% 64%; }
html[data-background-override="true"][data-background="lake-watercolor"] { --hub-background-color: #0a0f0c; --hub-background-image: linear-gradient(90deg, rgb(4 10 8 / 72%), rgb(4 10 8 / 38%) 32%, transparent 62%), linear-gradient(0deg, rgb(4 10 8 / 24%), transparent 36%), var(--lake-watercolor-image, url("./lake-watercolor.jpg")); --hub-background-position: center, center, 56% 52%; }

@media (max-width: 720px) {
  html[data-theme="lake"] body::after {
    background-image:
      linear-gradient(180deg, rgb(2 12 8 / 68%), rgb(2 12 8 / 46%) 35%, rgb(2 12 8 / 56%) 72%, rgb(2 10 7 / 72%)),
      var(--lake-image);
    background-position: center, 72% 55%;
  }

  html[data-theme="lake"] .journal details[data-work-log-day-section] {
    background-color: rgb(3 20 14 / 66%);
  }

  html[data-theme="lake"] .journal details[data-work-log-turn-details] {
    background-color: rgb(6 28 19 / 58%);
  }

  html[data-background-override="true"][data-background="lake"] { --hub-background-image: linear-gradient(180deg, rgb(2 12 8 / 68%), rgb(2 12 8 / 46%) 35%, rgb(2 12 8 / 56%) 72%, rgb(2 10 7 / 72%)), var(--lake-image, url("./lake-after-rain.jpg")); --hub-background-position: center, 72% 55%; }
  html[data-background-override="true"][data-background="lake-summer"] { --hub-background-image: linear-gradient(180deg, rgb(3 8 7 / 72%), rgb(3 8 7 / 48%) 32%, rgb(3 8 7 / 54%) 70%, rgb(3 8 7 / 74%)), var(--lake-summer-image, url("./lake-summer.jpg")); --hub-background-position: center, 72% 72%; }
  html[data-background-override="true"][data-background="lake-watercolor"] { --hub-background-image: linear-gradient(180deg, rgb(4 10 8 / 72%), rgb(4 10 8 / 48%) 32%, rgb(4 10 8 / 54%) 70%, rgb(4 10 8 / 74%)), var(--lake-watercolor-image, url("./lake-watercolor.jpg")); --hub-background-position: center, 72% 70%; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="lake"] body::before,
  html[data-theme="lake"] .task-item[data-running] .provider-dot::after {
    animation: none;
  }
}