/* ===================================== «Орбита»: центр наблюдения Земли === */

html:not([data-theme]),
html[data-theme="orbit"] {
  --bg: #020913;
  --surface-1: rgb(4 15 27 / 58%);
  --surface-2: rgb(8 24 40 / 48%);
  --surface-3: rgb(20 48 70 / 48%);
  --sunken: rgb(0 5 12 / 36%);

  --line: rgb(99 157 196 / 20%);
  --line-strong: rgb(111 186 229 / 38%);
  --card-bg: linear-gradient(180deg, rgb(8 24 41 / 54%), rgb(3 13 25 / 42%));
  --card-bg-open: linear-gradient(180deg, rgb(11 30 48 / 68%), rgb(4 15 27 / 56%));
  --card-border: var(--line);
  --card-border-open: var(--line-strong);
  --card-shadow: inset 0 1px 0 rgb(190 229 255 / 4%), 0 20px 42px -34px rgb(0 0 0 / 92%);
  --plate-bg: rgb(8 24 40 / 54%);
  --plate-shadow: inset 0 1px 0 rgb(195 232 255 / 5%);
  --turn-shadow: 0 12px 30px -24px rgb(0 0 0 / 92%);

  --text: #e5f2fb;
  --text-soft: #aec6d7;
  --text-muted: #7895aa;
  --text-faint: #526f83;
  --accent: #67c9f3;
  --accent-soft: rgb(51 176 224 / 14%);
  --accent-line: rgb(77 196 236 / 48%);
  --accent-glow: 0 0 22px -10px rgb(76 200 244 / 82%);
  --selection: rgb(64 183 227 / 28%);
  --brand-gradient: none;
  --brand-shadow: none;
  --provider-tone-lightness: 0.8;
  --provider-tone-chroma: 0.09;
  --provider-tone-alpha: 0.18;
  --pending: #ff7a45;

  --radius-lg: 5px;
  --radius-md: 4px;
  --radius-sm: 3px;
  --radius-chip: 3px;
  --content-width: 100vw;
  --task-rail-width: clamp(252px, 16vw, 304px);
  --orbit-image: url("./orbit-cartography.jpg");
  --orbit-mark-image: url("./orbit-mark.png");
}

html:not([data-theme]) body::after,
html[data-theme="orbit"] body::after {
  background-color: #020913;
  background-image: var(--orbit-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  inset: 0;
  mask-image: none;
  opacity: 1;
}

/* Единственный живой сигнал темы: слабый захват цели идёт по уже нарисованной
   трассе. Меняются только transform и opacity, поэтому он не перерисовывает UI. */
@keyframes orbit-tracking-pass {
  0%, 14% { opacity: 0; transform: translate3d(58vw, 76vh, 0) scale(0.72); }
  22% { opacity: 0.8; transform: translate3d(56vw, 64vh, 0) scale(0.82); }
  48% { opacity: 0.42; transform: translate3d(59vw, 46vh, 0) scale(0.9); }
  72% { opacity: 0.74; transform: translate3d(66vw, 29vh, 0) scale(0.96); }
  92%, 100% { opacity: 0; transform: translate3d(76vw, 17vh, 0) scale(1); }
}

html:not([data-theme]) body::before,
html[data-theme="orbit"] body::before {
  animation: orbit-tracking-pass 24s linear infinite;
  background: radial-gradient(circle, rgb(148 233 255 / 100%) 0 1px, rgb(73 201 240 / 62%) 2px, transparent 5px);
  content: "";
  height: 12px;
  inset: 0 auto auto 0;
  mask-image: none;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  width: 12px;
}

html:not([data-theme]) .app-header,
html[data-theme="orbit"] .app-header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgb(1 7 15 / 82%);
}

html:not([data-theme]) .app-header-inner,
html[data-theme="orbit"] .app-header-inner {
  max-width: none;
}

html:not([data-theme]) .brand .eyebrow,
html[data-theme="orbit"] .brand .eyebrow {
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
}

html:not([data-theme]) .brand h1,
html[data-theme="orbit"] .brand h1 {
  display: none;
}

@media (min-width: 860px) {
  html:not([data-theme]):not([data-surface="mobile"]) .app-header-inner,
  html[data-theme="orbit"]:not([data-surface="mobile"]) .app-header-inner {
    padding-left: 4.25rem;
    padding-right: 1.15rem;
  }

  html:not([data-theme]):not([data-surface="mobile"]) .workspace,
  html[data-theme="orbit"]:not([data-surface="mobile"]) .workspace {
    gap: 0.72rem;
    grid-template-columns: var(--task-rail-width) minmax(0, 1fr);
    max-width: none;
    padding: 0.72rem 1rem 1rem 4.25rem;
  }

  html:not([data-theme]):not([data-surface="mobile"]) .task-rail,
  html[data-theme="orbit"]:not([data-surface="mobile"]) .task-rail {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgb(3 14 26 / 38%);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: inset 0 1px 0 rgb(174 224 255 / 3%);
    overflow: hidden;
  }

  html:not([data-theme]):not([data-surface="mobile"]) .chat,
  html[data-theme="orbit"]:not([data-surface="mobile"]) .chat {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgb(2 11 22 / 18%);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: inset 0 1px 0 rgb(174 224 255 / 3%);
    overflow: hidden;
  }

  html:not([data-theme]):not([data-surface="mobile"]) .chat-head,
  html[data-theme="orbit"]:not([data-surface="mobile"]) .chat-head {
    background: rgb(2 12 24 / 26%);
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

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

  html:not([data-theme]):not([data-surface="mobile"]) .chat-log,
  html[data-theme="orbit"]:not([data-surface="mobile"]) .chat-log {
    margin-left: 0;
    margin-right: 0;
    max-width: min(72%, 68rem);
  }

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

  html:not([data-theme]):not([data-surface="mobile"]) .msg-user,
  html[data-theme="orbit"]:not([data-surface="mobile"]) .msg-user {
    backdrop-filter: blur(3px) saturate(108%);
    -webkit-backdrop-filter: blur(3px) saturate(108%);
    background-color: rgb(9 28 47 / 72%);
    border-color: rgb(94 177 220 / 32%);
  }

  html:not([data-theme]):not([data-surface="mobile"]) .composer,
  html[data-theme="orbit"]:not([data-surface="mobile"]) .composer {
    background: rgb(2 12 23 / 34%);
    padding-left: 1.15rem;
    padding-right: max(1.15rem, 28%);
  }

  html:not([data-theme]):not([data-surface="mobile"]) .composer-input,
  html[data-theme="orbit"]:not([data-surface="mobile"]) .composer-input {
    background: rgb(4 17 30 / 74%);
  }

  html:not([data-theme]):not([data-surface="mobile"]) .task-item,
  html[data-theme="orbit"]:not([data-surface="mobile"]) .task-item {
    border-radius: 0;
  }

  html:not([data-theme]):not([data-surface="mobile"]) .task-item[aria-current="true"],
  html[data-theme="orbit"]:not([data-surface="mobile"]) .task-item[aria-current="true"] {
    box-shadow: inset 2px 0 0 var(--accent), inset 0 -1px 0 rgb(76 196 235 / 8%);
  }
}

html:not([data-theme]) .journal details[data-work-log-day-section]::before,
html[data-theme="orbit"] .journal details[data-work-log-day-section]::before {
  background: linear-gradient(90deg, transparent, var(--accent-line), transparent);
  border-radius: 0;
  content: "";
  height: 1px;
  inset: -1px 18% auto;
  opacity: 0.5;
  pointer-events: none;
  position: absolute;
}

html[data-background-override="true"][data-background="orbit"] {
  --hub-background-color: #020913;
  --hub-background-image: url("./orbit-cartography.jpg");
  --hub-background-position: center;
}

html[data-background-override="true"][data-background="orbit-limb"] {
  --hub-background-color: #05070c;
  --hub-background-image: url("./orbit-limb.jpg");
  --hub-background-position: 58% 46%;
}

html[data-background-override="true"][data-background="orbit-aurora"] {
  --hub-background-color: #01050a;
  --hub-background-image: var(--orbit-aurora-image, url("./orbit-aurora.jpg"));
  --hub-background-position: 60% center;
}

html[data-background-override="true"][data-background="orbit-earthrise"] {
  --hub-background-color: #010204;
  --hub-background-image: var(--orbit-earthrise-image, url("./orbit-earthrise.jpg"));
  --hub-background-position: 60% center;
}

html[data-background-override="true"][data-background="orbit"] body::before,
html[data-background-override="true"][data-background="orbit-limb"] body::before,
html[data-background-override="true"][data-background="orbit-aurora"] body::before,
html[data-background-override="true"][data-background="orbit-earthrise"] body::before {
  background: radial-gradient(circle, rgb(148 233 255 / 100%) 0 1px, rgb(73 201 240 / 62%) 2px, transparent 5px) !important;
  content: "" !important;
}

@media (max-width: 859px) {
  html:not([data-theme]),
  html[data-theme="orbit"] {
    --surface-1: rgb(3 13 24 / 84%);
    --surface-2: rgb(7 21 36 / 78%);
  }

  html:not([data-theme]) body::after,
  html[data-theme="orbit"] body::after {
    background-position: 64% center;
  }

  html[data-background-override="true"][data-background="orbit-aurora"],
  html[data-background-override="true"][data-background="orbit-earthrise"] {
    --hub-background-position: 76% center;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-theme]) body::before,
  html[data-theme="orbit"] body::before {
    animation: none;
    content: none;
  }
}

/* Правое поле было 1 rem против 4,25 rem слева, и консоль выглядела сдвинутой
   к краю. Вычитаем ширину зарезервированной полосы прокрутки, чтобы видимый
   отступ справа совпал с левым, а не оказался на неё шире. */
@media (min-width: 1120px) {
  html:not([data-theme]):not([data-surface="mobile"]) .workspace,
  html[data-theme="orbit"]:not([data-surface="mobile"]) .workspace {
    padding-right: max(1rem, calc(4.25rem - (100vw - 100%)));
  }

  html:not([data-theme]):not([data-surface="mobile"]) .app-header-inner,
  html[data-theme="orbit"]:not([data-surface="mobile"]) .app-header-inner {
    padding-right: max(1.15rem, calc(4.25rem - (100vw - 100%)));
  }
}