/* kobets.info header — компактная полупрозрачная полоса в начале страницы.
   Цвет полосы берётся от окна браузера (системные Canvas / CanvasText), то есть
   сама следует светлой и тёмной теме; полупрозрачность оставлена, чтобы сквозь
   полосу просвечивал фон сервиса.

   Полоса стоит В ПОТОКЕ и занимает свои ~28 px: содержимое сервиса начинается
   под ней, а не заезжает под неё. Наложение (position: fixed) пробовали —
   контент подъезжал под шапку и первая строка страницы пряталась. */

.kobets-header {
  position: relative;
  /* Полоса стоит в потоке и ничего не перекрывает, но её всплывающее окошко должно
     рисоваться поверх содержимого страницы — отсюда высокий слой. */
  z-index: 2147482000;
  color: var(--kobets-header-fg, #f4f4f7);
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 12px;
  line-height: 1.25;
  background: var(--kobets-header-bg, rgba(18, 18, 30, 0.3));
  -webkit-backdrop-filter: blur(7px) saturate(1.15);
  backdrop-filter: blur(7px) saturate(1.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.kobets-header-inner {
  display: flex;
  align-items: center;
  /* Имя пользователя — в правом углу полосы */
  justify-content: flex-end;
  margin: 0;
  padding: 0.2rem 0.6rem;
}

/* Блок без данных не показываем: в шапке только полезное */
.kobets-header-ctrl[hidden],
.kobets-header-pop__row[hidden] {
  display: none !important;
}

/* В полосе остался один блок — имя пользователя. Рамку и подложку ему не рисуем:
   полоса и так полупрозрачная, второй бокс поверх неё выглядел бы тяжело. */
.kobets-header-ctrl {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  box-sizing: border-box;
  cursor: default;
}

/* Заголовков у контролов нет (HEADER-CONTENT-RULES); скрываем на случай старого кэша */
.kobets-header-ctrl__label {
  display: none !important;
}

.kobets-header-ctrl__value {
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
  justify-content: center;
}

.kobets-header-ctrl__link,
.kobets-header-realm__link {
  color: #a9c9ff;
  text-decoration: none;
  font-weight: 500;
}

.kobets-header-ctrl__link:hover,
.kobets-header-realm__link:hover {
  text-decoration: underline;
}

/* Крестик — один и тот же и у пользователя, и у реалма */
.kobets-header-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  height: 1.15em;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #e6e6ea;
  font: inherit;
  font-size: 1em;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  text-shadow: none;
}

.kobets-header-x:hover {
  background: rgba(220, 80, 80, 0.6);
  color: #fff;
}

/* Карандаш — переход в id.ki изменить имя; тот же кружок, что и у крестика выхода, но
   без "опасного" красного hover — переименование не разрушительно. */
.kobets-header-profile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  height: 1.15em;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #e6e6ea;
  font-size: 0.8em;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  text-decoration: none;
  text-shadow: none;
}

.kobets-header-profile:hover {
  background: rgba(169, 201, 255, 0.35);
  color: #fff;
}

/* Реалмы: чип на каждый, имя — ссылка, крестик — выход из этого реалма */
.kobets-header-realm {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  max-width: 12em;
}

/* Реалмы в окошке идут столбиком, по чипу на строку */
.kobets-header-pop__row--realms .kobets-header-ctrl__value {
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  flex-wrap: nowrap;
}

.kobets-header-realm__link {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Пользователь: имя + крестик выхода; при наведении — окошко с часами и реалмами */
.kobets-header-user-block {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.kobets-header-user-block > .kobets-header-ctrl__value {
  cursor: default;
}

/* Всплывающее окошко: часы и реалмы. Показывается по наведению, по фокусу с клавиатуры
   и по классу --open (тап на тач-экране, где наведения нет). */
.kobets-header-pop {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.25rem;
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: rgba(18, 18, 30, 0.82);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
  z-index: 1;
}

.kobets-header-user-block:hover > .kobets-header-pop,
.kobets-header-user-block:focus-within > .kobets-header-pop,
.kobets-header-user-block--open > .kobets-header-pop {
  display: flex;
}

/* Мостик через зазор между именем и окошком: без него мышь по дороге вниз
   выходит из блока, :hover теряется и окошко захлопывается прямо под курсором. */
.kobets-header-pop::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 0.35rem;
}

.kobets-header-pop__row {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.kobets-header-pop__row--realms {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 0.25rem;
  width: 100%;
}

.kobets-header-user-name:focus {
  outline: 1px dotted rgba(255, 255, 255, 0.6);
  outline-offset: 1px;
}

.kobets-header-user-name {
  /* Владелец (2026-09-06): полное имя не должно обрезаться многоточием — технические
     display_name агентов (agent-<hex>) как раз длинные, и урезанный вид не даёт узнать,
     под какой учёткой авторизован браузер. max-width поднят с 10em до 24em (было слишком
     тесно для agent-<24 hex>), а не убран совсем — .kobets-header-inner не переносит
     строку (justify-content:flex-end, nowrap), голый overflow:visible без предела мог бы
     вытолкнуть крестик выхода и карандаш профиля за край полосы на длинных именах. */
  max-width: 24em;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.kobets-header-user-block--pending,
.kobets-header-auth--anonymous,
.kobets-header-auth--checking,
.kobets-header-auth--unavailable {
  color: #d8d8dc;
}

/* Детализация статуса шапки (TZ-KEY-HEADER-SAME-ORIGIN-AUTH §10.4) — точная палитра владельцем
   не зафиксирована, выбрана здесь: проверяю/недоступно — нейтральный серый (класс выше),
   доступ запрошен (pending) — янтарный, авторизован — зелёный, отклонён/сессия истекла — красный. */
.kobets-header-auth--pending {
  color: #f0c040;
  font-style: italic;
}

.kobets-header-auth--allowed {
  color: #8fe0a8;
}

.kobets-header-auth--revoked,
.kobets-header-auth--denied {
  color: #f0a8a8;
}

/* Таймер ожидания рядом с текстом стадии (pending.since, TZ-KEY-HEADER-SAME-ORIGIN-AUTH §4.4) */
.kobets-header-auth-elapsed {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  opacity: 0.85;
}

.kobets-header-login,
.kobets-header-retry {
  color: #a9c9ff;
  text-decoration: none;
  white-space: nowrap;
}

.kobets-header-login:hover,
.kobets-header-retry:hover {
  text-decoration: underline;
}

/* Часы = индикатор живости: идут, пока жив скрипт шапки; замирают, если он повис */
.kobets-header-time {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.kobets-header-time--stalled {
  color: #ffc860;
}

.kobets-header-time--stalled::after {
  content: ' ⚠';
}

@media (max-width: 640px) {
  .kobets-header-inner {
    padding: 0.15rem 0.35rem;
  }

  .kobets-header-controls {
    gap: 0.15rem 0.3rem;
  }

  .kobets-header-user-name {
    max-width: 16em;
  }

  .kobets-header-realm {
    max-width: 8em;
  }
}

@media (max-width: 380px) {
  .kobets-header-user-name {
    max-width: 13em;
  }

  .kobets-header-realm {
    max-width: 6em;
  }
}

/* Нет поддержки backdrop-filter (старый Firefox, часть мобильных) — фон чуть плотнее,
   иначе текст на пёстрой странице теряется. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .kobets-header {
    background: rgba(18, 18, 30, 0.55);
  }
}

/* Полоса в цвет окна браузера.
   Canvas / CanvasText — системные цвета: фон и текст окна браузера, они сами следуют
   светлой или тёмной теме браузера и ОС. Держим их полупрозрачными (color-mix), чтобы
   фон сервиса по-прежнему просвечивал. Ветка включается только там, где есть color-mix;
   иначе остаётся тёмная полупрозрачная полоса выше. Хост может задать свой цвет
   переменными --kobets-header-bg / --kobets-header-fg — они перекрывают и то, и другое. */
@supports (background: color-mix(in srgb, Canvas 50%, transparent)) {
  .kobets-header {
    /* Без этой строки Canvas/CanvasText всегда резолвятся по светлой теме: системные
       цвета следуют color-scheme элемента, а не настройке браузера самой по себе.
       Объявляем поддержку обеих тем — и полоса начинает менять цвет вместе с окном. */
    color-scheme: light dark;
    color: var(--kobets-header-fg, CanvasText);
    background: var(--kobets-header-bg, color-mix(in srgb, Canvas 78%, transparent));
    border-bottom-color: color-mix(in srgb, CanvasText 16%, transparent);
    /* Тень текста была нужна светлым буквам на тёмном; с системными цветами
       контраст обеспечивает сама пара Canvas/CanvasText. */
    text-shadow: none;
  }

  .kobets-header-ctrl__link,
  .kobets-header-realm__link,
  .kobets-header-login {
    color: LinkText;
  }

  .kobets-header-x {
    background: color-mix(in srgb, CanvasText 12%, transparent);
    color: CanvasText;
  }

  .kobets-header-x:hover {
    background: color-mix(in srgb, #dc5050 70%, transparent);
    color: #fff;
  }

  .kobets-header-profile {
    background: color-mix(in srgb, CanvasText 12%, transparent);
    color: CanvasText;
  }

  .kobets-header-profile:hover {
    background: color-mix(in srgb, LinkText 35%, transparent);
    color: CanvasText;
  }

  .kobets-header-pop {
    color: CanvasText;
    background: color-mix(in srgb, Canvas 94%, transparent);
    border-color: color-mix(in srgb, CanvasText 22%, transparent);
  }

  .kobets-header-pop__row--realms {
    border-top-color: color-mix(in srgb, CanvasText 18%, transparent);
  }

  .kobets-header-auth--anonymous,
  .kobets-header-auth--checking,
  .kobets-header-auth--unavailable {
    color: color-mix(in srgb, CanvasText 70%, transparent);
  }

  .kobets-header-auth--pending {
    color: color-mix(in srgb, #f0c040 62%, CanvasText);
  }

  .kobets-header-auth--allowed {
    color: color-mix(in srgb, #2f9e55 55%, CanvasText);
  }

  .kobets-header-user-name:focus {
    outline-color: color-mix(in srgb, CanvasText 60%, transparent);
  }

  /* Предупреждающие цвета подмешиваем к цвету текста: на светлой теме они темнеют,
     на тёмной светлеют — иначе бледно-оранжевое на белом просто не видно. */
  .kobets-header-time--stalled {
    color: color-mix(in srgb, #ff9800 62%, CanvasText);
  }

  .kobets-header-auth--revoked,
  .kobets-header-auth--denied {
    color: color-mix(in srgb, #e03131 62%, CanvasText);
  }

  .kobets-header-retry {
    color: LinkText;
  }
}

/* Тот же цвет окна, но без блюра (старый Firefox, часть мобильных): подложку делаем
   плотнее — просвечивающий фон сервиса без размытия мешает читать. */
@supports (background: color-mix(in srgb, Canvas 50%, transparent)) {
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .kobets-header {
      background: var(--kobets-header-bg, color-mix(in srgb, Canvas 92%, transparent));
    }

    .kobets-header-pop {
      background: color-mix(in srgb, Canvas 99%, transparent);
    }
  }
}

/* Каркас: полоса шапки сверху во всю ширину окна, страница — в контейнере под ней,
   контейнер занимает всю оставшуюся высоту и скроллится сам.
   Класс kobets-shell ставит embed.js на <html>; выключается data-shell="off". */
html.kobets-shell,
html.kobets-shell > body {
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* Ограничения ширины хоста (max-width на body) переезжают на .kobets-page__inner:
     полоса шапки должна быть во всю ширину браузера, а не по узкой колонке страницы. */
  max-width: none;
  width: auto;
}

html.kobets-shell > body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

html.kobets-shell > body > #kobets-header {
  flex: 0 0 auto;
  width: 100%;
}

html.kobets-shell > body > .kobets-page {
  flex: 1 1 auto;
  /* min-height: 0 обязателен: иначе flex-элемент не даёт себя сжать, контейнер
     распирает страницу и появляется второй скролл — у body. */
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

html.kobets-shell > body > .kobets-page > .kobets-page__inner {
  box-sizing: border-box;
}

/* На телефоне и тач-экране (#4720) каркас не держит свой скролл: страница прокручивает
   само окно, а полоса шапки липнет к верху (position: sticky). Иначе браузер не прячет
   адресную строку (минус ~60 px экрана), нет pull-to-refresh, «назад» не возвращает на
   прежнее место списка, а iOS хуже крутит по инерции. DOM тот же (#kobets-page остаётся),
   меняется только то, кто скроллится, — при повороте/ресайзе режим переключается сам.
   Липким элементам хоста полоса перекрывает верх окна: высоту полосы шапка кладёт
   в --kobets-header-h, а в этом режиме — ещё и в --kobets-page-top (в режиме контейнера
   она не задана); хосту достаточно писать `top: var(--kobets-page-top, 0px)`. */
@media (max-width: 48rem), (hover: none) and (pointer: coarse) {
  html.kobets-shell {
    --kobets-page-top: var(--kobets-header-h, 0px);
  }

  html.kobets-shell > body {
    display: block;
    height: auto;
    min-height: 100%;
    overflow: visible;
  }

  html.kobets-shell > body > #kobets-header {
    position: sticky;
    top: 0;
    /* sticky — свой слой: без z-index полоса и её окошко ушли бы под липкие
       и позиционированные элементы страницы. */
    z-index: 2147482000;
  }

  /* Под полосой теперь проезжает текст страницы — полупрозрачная полоса стала бы
     кашей из букв, поэтому здесь она плотная (свой --kobets-header-bg хоста в силе). */
  html.kobets-shell > body > #kobets-header > .kobets-header {
    background: var(--kobets-header-bg, rgb(18, 18, 30));
  }

  html.kobets-shell > body > .kobets-page {
    overflow: visible;
  }
}

@supports (background: color-mix(in srgb, Canvas 50%, transparent)) {
  @media (max-width: 48rem), (hover: none) and (pointer: coarse) {
    html.kobets-shell > body > #kobets-header > .kobets-header {
      background: var(--kobets-header-bg, Canvas);
    }
  }
}