/* ===========================================================================
   Liquid Glass — web.

   Подключается ПОСЛЕ app.css и meeting.css и надстраивает уже существующие
   поверхности: разметка и продуктовый вид не меняются, добавляется материал —
   отзывчивое на фон размытие, преломление на кромке и зеркальные блики.

   Три тира; тир выставляет glass.js в <html data-glass-tier>:

     full — backdrop-filter + настоящее преломление через feDisplacementMap.
            Карту смещения рисует glass.js в canvas: середина нейтральна, у
            кромки градиент, толкающий пиксели фона наружу.
     blur — backdrop-filter есть, url()-фильтр не поддерживается (WebKit,
            Firefox). Кромка имитируется отдельным слоем с более сильным
            размытием, обрезанным маской в полосу по краю.
     flat — стекла нет вовсе: Reduce Transparency, высокий контраст, слабое
            устройство или старый браузер. Поверхность почти плотная.

   Правило Apple соблюдается буквально: стекло не кладётся на стекло.
   Органы управления внутри стеклянной панели становятся плоскими — это и
   требование к материалу, и экономия: каждый backdrop-filter стоит
   отдельного прохода композитора.
   =========================================================================== */

/* =================== мост: облик стекла -> токены продукта ================
   Тёмный облик обязан менять не только плёнку стекла, но и бумагу с
   чернилами. Иначе получается то, что и получилось при первой проверке:
   тёмная плёнка (11% белого) поверх светлой бумаги — панели выцветают, а
   подписи становятся нечитаемыми. Здесь продуктовые токены app.css
   переопределяются под текущий облик, поэтому весь интерфейс переезжает
   в тёмный целиком, а контраст текста сохраняется.

   Светлый облик ничего не переопределяет: он и есть вид продукта. */

html[data-appearance="dark"]{
  --paper:var(--lg-canvas);
  --paper-2:var(--lg-canvas-deep);
  --ink:var(--lg-ink);
  --ink-2:#A2AA97;
  --ink-3:#79826E;

  --glass:rgb(255 255 255 / .11);
  --glass-2:rgb(255 255 255 / .07);
  --glass-line:rgb(255 255 255 / .16);
  --line:rgb(255 255 255 / .10);
  --field:rgb(255 255 255 / .09);

  /* Бары митинга на тёмном: не сливочные, иначе это два белых пятна поверх
     тёмной сцены. Контраст чернил по ним — светлый. */
  --cream:#24271C;
  --cream-bright:#2E3124;
  --on-cream:#E8EBDF;

  /* Оливковый на тёмном темнеет и перестаёт читаться — берём светлую
     ветку той же краски, бренд сохраняется. */
  --olive:#AEB79A;
  --olive-deep:#C4CCB2;
  --olive-tint:rgb(174 183 154 / .14);

  --shadow-sm:0 2px 8px rgb(0 0 0 / .35);
  --shadow:0 10px 34px rgb(0 0 0 / .45);
  --shadow-lg:0 22px 58px rgb(0 0 0 / .55);

  color-scheme:dark;
}

/* Главная кнопка на тёмном: светлая заливка и тёмные буквы, иначе
   оливковая кнопка сливается с фоном. */
html[data-appearance="dark"] .btn.primary{
  background:var(--olive);
  color:var(--lg-canvas);
}

/* Активный сегмент: в светлом облике это белая плашка с оливковым текстом,
   но на тёмном оливковый становится светлым — светлое на белом не читается.
   Поэтому в тёмном облике плашка сама становится оливковой, а текст тёмным. */
html[data-appearance="dark"] .seg button.on{
  background:var(--olive);
  color:var(--lg-canvas);
}

@media (prefers-color-scheme: dark){
  html[data-appearance="system"]{
    --paper:var(--lg-canvas);
    --paper-2:var(--lg-canvas-deep);
    --ink:var(--lg-ink);
    --ink-2:#A2AA97;
    --ink-3:#79826E;
    --glass:rgb(255 255 255 / .11);
    --glass-2:rgb(255 255 255 / .07);
    --glass-line:rgb(255 255 255 / .16);
    --line:rgb(255 255 255 / .10);
    --field:rgb(255 255 255 / .09);
    --cream:#24271C;
    --cream-bright:#2E3124;
    --on-cream:#E8EBDF;
    --olive:#AEB79A;
    --olive-deep:#C4CCB2;
    --olive-tint:rgb(174 183 154 / .14);
    --shadow-sm:0 2px 8px rgb(0 0 0 / .35);
    --shadow:0 10px 34px rgb(0 0 0 / .45);
    --shadow-lg:0 22px 58px rgb(0 0 0 / .55);
    color-scheme:dark;
  }
  html[data-appearance="system"] .btn.primary,
  html[data-appearance="system"] .seg button.on{
    background:var(--olive);
    color:var(--lg-canvas);
  }
}

/* ------------------------------------------------------------ роли -------- */

/* ВАЖНО про обстановку комнаты (.room-top, .room-bar, .board-bar, .panel).
   Её здесь больше нет, и это исправление настоящей поломки, а не уборка.

   :is() берёт специфичность самого сильного своего аргумента, а в списке
   поверхностей ниже стоит .btn:not(.primary) — то есть весь список получал
   вес (0,2,0). Плюс glass.css подключается ПОСЛЕ meeting.css. В сумме
   правила этого файла перебивали продуктовые, и получалось так:

   • панель «Люди» и «Чат» вместо задуманного тёмного фона получала белый на
     58% при белом тексте — то есть была нечитаемой целиком;
   • панель доски получала белый на 55%, и девять кнопок из десяти рисовались
     белым по белому с контрастом 1.04 к 1 — «Текст», «Чистая», «Отменить»,
     «Вернуть», «Сохранить в фото» просто не было видно;
   • сливочные бары митинга получали под свой непрозрачный градиент ещё один
     слой белого на 55%, который не виден никогда.

   Тёмная обстановка комнаты живёт в meeting.css и controls.css и красится
   сама. Здесь остаётся светлый мир — листы, карточки, органы управления.
   Доступностные переопределения ниже (forced-colors, снижение прозрачности)
   обстановку комнаты по-прежнему упоминают: там они к месту. */

:is(.sheet, .ring-card){
  --_blur:var(--lg-overlay-blur); --_sat:var(--lg-overlay-saturate);
  --_tint:var(--lg-overlay-tint-a); --_border:var(--lg-overlay-border-a);
  --_rimT:var(--lg-overlay-rim-top-a); --_rimB:var(--lg-overlay-rim-bottom-a);
  --_refract:var(--lg-overlay-refraction); --_shadow:var(--lg-overlay-shadow-a);
}
.glass{
  --_blur:var(--lg-panel-blur); --_sat:var(--lg-panel-saturate);
  --_tint:var(--lg-panel-tint-a); --_border:var(--lg-panel-border-a);
  --_rimT:var(--lg-panel-rim-top-a); --_rimB:var(--lg-panel-rim-bottom-a);
  --_refract:var(--lg-panel-refraction); --_shadow:var(--lg-panel-shadow-a);
}
:is(.iconbtn, .field, .btn:not(.primary), .langchip){
  --_blur:var(--lg-control-blur); --_sat:var(--lg-control-saturate);
  --_tint:var(--lg-control-tint-a); --_border:var(--lg-control-border-a);
  --_rimT:var(--lg-control-rim-top-a); --_rimB:var(--lg-control-rim-bottom-a);
  --_refract:var(--lg-control-refraction); --_shadow:var(--lg-control-shadow-a);
}

/* Закрытый список поверхностей: навигация, оверлеи, крупные карточки и
   ключевые органы управления. Всё остальное остаётся плоским. */
.lg,
:is(.sheet, .ring-card, .glass,
    .iconbtn, .field, .btn:not(.primary), .langchip){
  position:relative;
  background-color:rgb(var(--lg-tint-rgb) / var(--_tint, .58));
  border:1px solid rgb(var(--lg-specular-rgb) / var(--_border, .8));
  -webkit-backdrop-filter:blur(var(--_blur, 20px)) saturate(var(--_sat, 1.4));
  backdrop-filter:blur(var(--_blur, 20px)) saturate(var(--_sat, 1.4));
  box-shadow:
    0 12px 32px rgb(var(--lg-shadow-rgb) / var(--_shadow, .1)),
    inset 0 1px 0 rgb(var(--lg-specular-rgb) / var(--_rimT, .9)),
    inset 0 -1px 0 rgb(var(--lg-specular-rgb) / var(--_rimB, .28));
}

/* Зеркальный блик. Именно он читается глазом как толщина стекла — само
   размытие толщины не даёт. Слой не перехватывает нажатия. */
.lg::after,
:is(.sheet, .ring-card, .glass,
    .iconbtn, .field, .btn:not(.primary), .langchip)::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit;
  pointer-events:none; z-index:1;
  background:linear-gradient(180deg,
    rgb(var(--lg-specular-rgb) / calc(var(--_rimT, .9) * .5)) 0%,
    rgb(var(--lg-specular-rgb) / 0) 24%,
    rgb(var(--lg-specular-rgb) / 0) 74%,
    rgb(var(--lg-specular-rgb) / calc(var(--_rimB, .28) * .8)) 100%);
}

/* ------------------------------- тир full: преломление ------------------- */
/* @supports здесь важнее тира: браузер, не понимающий url() внутри
   backdrop-filter, по спецификации отбрасывает ВЕСЬ список фильтров — и
   поверхность осталась бы вообще без размытия. Внутри @supports правило
   просто не применяется, а объявление с чистым blur выше остаётся в силе. */
/* Барам митинга преломление не нужно: controls.css сделал их непрозрачными
   сливочными плашками (градиент из двух глухих остановок) и сам погасил
   backdrop-filter. Но здесь специфичность выше — html[тир] :is(...) против
   одного класса, — поэтому фильтр возвращался и работал вслепую: за каждым
   баром браузер снимал подложку живого видео, гнал blur + saturate, потом
   feImage с feDisplacementMap, и результат целиком закрывался непрозрачным
   градиентом. Две полные цепочки фильтров на кадр ради нуля видимых точек.
   Здесь их нет, а плашки выглядят точно так же. */
@supports (backdrop-filter: url("#lg-refract")){
  html[data-glass-tier="full"]
    :is(.sheet, .ring-card, .glass, .panel, .board-bar, .cobrowse-head){
    -webkit-backdrop-filter:blur(var(--_blur, 20px)) saturate(var(--_sat, 1.4)) url("#lg-refract");
    backdrop-filter:blur(var(--_blur, 20px)) saturate(var(--_sat, 1.4)) url("#lg-refract");
  }
}

/* ------------------------- тир blur: имитация кромки -------------------- */
html[data-glass-tier="blur"]
  :is(.sheet, .ring-card, .glass, .panel)::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit;
  pointer-events:none; z-index:0; background:transparent;
  padding:calc(var(--_refract, 8) * 1px);
  -webkit-backdrop-filter:blur(calc(var(--_blur, 20px) * 1.9)) saturate(calc(var(--_sat, 1.4) * 1.15));
  backdrop-filter:blur(calc(var(--_blur, 20px) * 1.9)) saturate(calc(var(--_sat, 1.4) * 1.15));
  /* Две маски и exclude оставляют только полосу по краю шириной с padding. */
  -webkit-mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}

/* ---------------------------- стекло не на стекле ----------------------- */
:is(.room-top, .room-bar, .board-bar, .cobrowse-head,
    .sheet, .ring-card, .glass, .panel)
  :is(.iconbtn, .field, .btn:not(.primary), .langchip, .tool .ci, .bt, .rbtn, .sz, .swatch){
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
:is(.room-top, .room-bar, .board-bar, .cobrowse-head,
    .sheet, .ring-card, .glass, .panel)
  :is(.iconbtn, .field, .btn:not(.primary), .langchip)::after{
  content:none;
}

/* ------------------------------ доступность ----------------------------- */

/* Reduce Transparency: прозрачность убирается, а не ослабляется. Работает без
   JS, поэтому дублирует логику тира flat. */
@media (prefers-reduced-transparency: reduce){
  .lg,
  :is(.room-top, .room-bar, .board-bar, .cobrowse-head,
      .sheet, .ring-card, .glass, .panel,
      .iconbtn, .field, .btn:not(.primary), .langchip){
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    background-color:color-mix(in srgb, var(--lg-canvas) calc(var(--lg-fallback-surface-alpha) * 100%), transparent) !important;
    border-color:rgb(var(--lg-shadow-rgb) / var(--lg-fallback-border-alpha)) !important;
  }
  :is(.sheet, .ring-card, .glass, .panel)::before{ content:none !important; }
  .sheet-bg, #ring{
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }
}

@media (prefers-contrast: more){
  .lg,
  :is(.room-top, .room-bar, .board-bar, .cobrowse-head,
      .sheet, .ring-card, .glass, .panel,
      .iconbtn, .field, .btn:not(.primary), .langchip){
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    background-color:var(--lg-canvas) !important;
    border-color:rgb(var(--lg-shadow-rgb) / var(--lg-fallback-high-contrast-border-alpha)) !important;
  }
  .gloss, .topbar h1{
    background:none !important; color:var(--lg-ink) !important;
    -webkit-text-fill-color:var(--lg-ink) !important; filter:none !important;
  }
}

/* Принудительные цвета: материал уходит полностью, остаются системные цвета
   и настоящие рамки — иначе стекло съедает границы элементов. */
@media (forced-colors: active){
  .lg,
  :is(.room-top, .room-bar, .board-bar, .cobrowse-head,
      .sheet, .ring-card, .glass, .panel,
      .iconbtn, .field, .btn, .tool .ci, .bt, .rbtn, .langchip){
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    background:Canvas !important;
    color:CanvasText !important;
    border:1px solid CanvasText !important;
    box-shadow:none !important;
    forced-color-adjust:none;
  }
  :is(.sheet, .ring-card, .glass, .panel)::before,
  :is(.sheet, .ring-card, .glass, .panel)::after{ content:none !important; }
  .gloss, .topbar h1{
    background:none !important; color:CanvasText !important;
    -webkit-text-fill-color:CanvasText !important; filter:none !important;
  }
  .btn.primary{ background:Highlight !important; color:HighlightText !important; }
}

/* ------------------------------- тир flat ------------------------------- */
html[data-glass-tier="flat"]
  :is(.room-top, .room-bar, .board-bar, .cobrowse-head,
      .sheet, .ring-card, .glass, .panel,
      .iconbtn, .field, .btn:not(.primary), .langchip){
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  background-color:color-mix(in srgb, var(--lg-canvas) calc(var(--lg-fallback-surface-alpha) * 100%), transparent);
  border-color:rgb(var(--lg-shadow-rgb) / var(--lg-fallback-border-alpha));
}
html[data-glass-tier="flat"] :is(.sheet, .ring-card, .glass, .panel)::before{ content:none; }

/* Браузер вовсе не знает backdrop-filter — тот же плотный вид без участия JS. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  :is(.room-top, .room-bar, .board-bar, .cobrowse-head,
      .sheet, .ring-card, .glass, .panel,
      .iconbtn, .field, .btn:not(.primary), .langchip){
    background-color:color-mix(in srgb, var(--lg-canvas) 97%, transparent);
    border-color:rgb(var(--lg-shadow-rgb) / .16);
  }
}

/* Фокус видно на любом тире: контур рисуется поверх материала. */
.lg:focus-visible,
:is(.iconbtn, .field, .btn, .tool, .bt, .rbtn, .langchip):focus-visible{
  outline:2px solid var(--lg-accent);
  outline-offset:2px;
  z-index:2;
}

/* Носитель SVG-фильтра. Не display:none и не visibility:hidden — иначе
   Chromium перестаёт применять фильтр к backdrop. */
#lg-defs{
  position:fixed; left:0; top:0; width:0; height:0;
  overflow:hidden; pointer-events:none; opacity:0;
}