/* Жидкое стекло по демо (16.10): кромка-блик, пружинящие кнопки, капля в переключателях и меню, преломление фона.
   Логика — site/glass.js. Подключается последним (index.html), поэтому перекрывает стили разделов.
   Белые карточки (созвоны, знания, мысли, новости, канбан) — без стекла: на белом тёмное стекло выглядит грязно. */

:root {
  --gl-rim-hi: rgba(255, 255, 255, .5);
  --gl-rim-lo: rgba(255, 255, 255, .16);
  --gl-rim-in: rgba(255, 255, 255, .08);
  --gl-edge: rgba(0, 0, 0, .32);
  --gl-glow: rgba(255, 255, 255, .13);
  --gl-drop: rgba(0, 0, 0, .4);
  --gl-track: rgba(0, 0, 0, .2);
  --gl-inner: inset 0 1px 1px rgba(255, 255, 255, .12), inset 0 -1px 1px rgba(255, 255, 255, .03);
}
[data-theme="light"] {
  --gl-rim-hi: rgba(255, 255, 255, .75);
  --gl-rim-lo: rgba(255, 255, 255, .35);
  --gl-rim-in: rgba(255, 255, 255, .5);
  --gl-edge: rgba(17, 24, 39, .1);
  --gl-glow: rgba(255, 255, 255, .5);
  --gl-drop: rgba(17, 24, 39, .14);
  --gl-track: rgba(17, 24, 39, .06);
  --gl-inner: inset 0 1px 1px rgba(255, 255, 255, .6), inset 0 -1px 1px rgba(17, 24, 39, .03);
}

/* ---------- кромка-блик: светлее сверху-слева и снизу-справа, как у толстого стекла ---------- */
:where(.btn, .icon-btn, .send-btn, .field-search.as-btn, .rail-btn.round, .rail-btn.add, .sheet, .dialog, .panel) { position: relative; }
.btn:not(.ghost):not(:is(.mcard, .kcard, .th-card, .th-item, .mmedia, .meet-review, .mt-row, .bcard, .hcard, .news-card, .news-new, .kn-a, .mp-answer) *)::after,
.icon-btn:not(:is(.mcard, .kcard, .th-card, .th-item, .mmedia, .meet-review, .mt-row, .bcard, .hcard, .news-card, .news-new, .kn-a, .mp-answer) *)::after,
:is(.send-btn, .field-search.as-btn, .rail-btn.round, .rail-btn.add, .toast, .sheet, .dialog, .gl-pane, .gl-lens)::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px;
  background: linear-gradient(135deg, var(--gl-rim-hi), transparent 30%, transparent 62%, var(--gl-rim-lo) 86%, var(--gl-rim-hi));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.panel:not(.gl-host)::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px; opacity: .55;
  background: linear-gradient(150deg, var(--gl-rim-hi), transparent 22%, transparent 75%, var(--gl-rim-lo));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }

/* ---------- стеклянные кнопки ---------- */
.btn:not(.ghost):not(:is(.mcard, .kcard, .th-card, .th-item, .mmedia, .meet-review, .mt-row, .bcard, .hcard, .news-card, .news-new, .kn-a, .mp-answer) *),
.icon-btn:not(:is(.mcard, .kcard, .th-card, .th-item, .mmedia, .meet-review, .mt-row, .bcard, .hcard, .news-card, .news-new, .kn-a, .mp-answer) *),
.field-search.as-btn, .rail-btn.round {
  isolation: isolate; border-color: transparent; -webkit-user-select: none; user-select: none;
  box-shadow: 0 0 0 .5px var(--gl-edge), var(--gl-inner), 0 6px 16px -8px var(--gl-drop); }
.btn.primary:not(:is(.mcard, .kcard, .th-card, .th-item, .mmedia, .meet-review, .mt-row, .bcard, .hcard, .news-card, .news-new, .kn-a, .mp-answer) *), .send-btn, .rail-btn.add {
  isolation: isolate;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 55%);
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .25), inset 0 1px 1px rgba(255, 255, 255, .28), 0 8px 18px -8px var(--gl-drop); }
/* блик под мышкой (координаты ставит glass.js) */
.btn:not(.ghost):not(:is(.mcard, .kcard, .th-card, .th-item, .mmedia, .meet-review, .mt-row, .bcard, .hcard, .news-card, .news-new, .kn-a, .mp-answer) *)::before,
.icon-btn:not(:is(.mcard, .kcard, .th-card, .th-item, .mmedia, .meet-review, .mt-row, .bcard, .hcard, .news-card, .news-new, .kn-a, .mp-answer) *)::before,
:is(.send-btn, .field-search.as-btn, .rail-btn.round, .rail-btn.add)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(80px circle at var(--gl-x, 50%) var(--gl-y, 0%), var(--gl-glow), transparent 70%);
  transition: opacity .3s var(--ease-out); }
@media (hover: hover) {
  .btn:not(.ghost):not(:disabled):hover::before, .icon-btn:not(:disabled):hover::before,
  :is(.send-btn, .field-search.as-btn, .rail-btn.round, .rail-btn.add):hover::before { opacity: 1; }
}
/* пружину даёт glass.js — старое «вдавливание» на нажатии убираем, подсветка остаётся */
:is(.btn, .icon-btn, .send-btn, .field-search.as-btn, .rail-btn.round, .rail-btn.add, .rail-btn.mic, .mic-fab, .dp-add, .lg, .chip, .hz, .hchip.act, .lb-x, .lb-open):active:not(:disabled):not(.gl-x) { transform: none; }

/* ---------- капля: подложка выбранного пункта и линза, которую тянут ---------- */
.gl-pill { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; will-change: transform;
  opacity: calc(1 - var(--gl-lift, 0)); }
.gl-lens { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; will-change: transform;
  background: rgba(255, 255, 255, calc(var(--gl-lift, 0) * .04));
  box-shadow: 0 calc(var(--gl-lift, 0) * 10px) calc(var(--gl-lift, 0) * 26px) calc(var(--gl-lift, 0) * -4px) var(--gl-drop),
    inset 0 0 0 calc(var(--gl-lift, 0) * 1px) var(--gl-rim-in); }
.gl-lens::after { opacity: var(--gl-lift, 0); }
.gl-on { -webkit-user-select: none; user-select: none; }
.gl-on > :is(button, a) { position: relative; z-index: 1; -webkit-user-drag: none; }
.gl-on > :is(button, a)[aria-pressed="true"], .gl-on > .on { touch-action: none; }   /* выбранный пункт можно тянуть и пальцем */
.gl-on[data-gl-drag] > :is(button, a) { transition-property: color, background-color; }

/* переключатели в разделах (.seg): светлая капля на тёмной дорожке */
.seg.gl-on { position: relative; border-color: transparent; background: var(--gl-track);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18), 0 0 0 .5px var(--gl-edge); }
.seg.gl-on > button, .seg.gl-on > button.on { background: transparent; box-shadow: none; color: var(--text2); font-weight: 600; }
.seg.gl-on > button[data-gl-lit] { color: var(--tab-on-text); }
.seg.gl-on > .gl-pill { background: var(--tab-on); box-shadow: 0 1px 3px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .1); }
[data-theme="light"] .seg.gl-on > .gl-pill { box-shadow: 0 1px 3px rgba(17, 24, 39, .12), 0 0 0 .5px rgba(17, 24, 39, .04); }
.seg.gl-on > button:active:not(:disabled):not(.gl-x) { transform: none; }

/* плавающий выбор внизу (.float-switch) и меню слева (.rail): оранжевая капля, как активная кнопка раньше */
/* стекло панели — отдельным слоем позади содержимого (glass.js): иначе капля внутри видит пустоту и текст двоится */
.gl-host { isolation: isolate; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: transparent !important;
  border-color: transparent !important; box-shadow: none !important; }
:where(.rail) { position: relative; }
.gl-host > .gl-pane { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--glass-strong); box-shadow: 0 0 0 .5px var(--gl-edge), var(--pill-shadow); }
.rail.gl-host > .gl-pane { background: var(--glass); box-shadow: 0 0 0 .5px var(--gl-edge), var(--glass-shadow); }
.panel.gl-host:not(.rail) > .gl-pane { background: var(--glass); box-shadow: 0 0 0 .5px var(--gl-edge), var(--glass-shadow);
  -webkit-backdrop-filter: blur(30px) saturate(140%); backdrop-filter: blur(30px) saturate(140%); }
.panel.strong.gl-host > .gl-pane { background: var(--glass-strong); }
.panel.gl-host > .gl-pane::after { opacity: .55; background: linear-gradient(150deg, var(--gl-rim-hi), transparent 22%, transparent 75%, var(--gl-rim-lo)); }

.float-switch.gl-on > button, .float-switch.gl-on > button.on { background: transparent; color: var(--text); font-weight: 600; }
.float-switch.gl-on > .gl-pill, .rail-items.gl-on > .gl-pill { background: var(--accent);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 55%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .25), 0 6px 14px -6px rgba(0, 0, 0, .35); }
.float-switch.gl-on > button[data-gl-lit], .rail-items.gl-on > .rail-btn[data-gl-lit] { color: #fff; }
.float-switch.gl-on[data-gl-lifted] > button[data-gl-lit], .rail-items.gl-on[data-gl-lifted] > .rail-btn[data-gl-lit] { color: var(--accent-text); }
.float-switch.gl-on > button:active:not(:disabled):not(.gl-x),
.float-switch.gl-on > button.on:active:not(:disabled):not(.gl-x) { transform: none; background: transparent; }

.rail-items.gl-on { position: relative; }
.rail-items.gl-on > .rail-btn.on { background: transparent; }
/* значок под каплей — белый (правило выше); обычный цвет — только когда каплю утянули с пункта */
.rail-items.gl-on > .rail-btn.on:not([data-gl-lit]) { color: var(--nav); }
.rail-items.gl-on > .rail-btn:active:not(:disabled):not(.gl-x) { transform: none; }
.rail-items.gl-on > .rail-btn.on:active:not(:disabled):not(.gl-x) { background: transparent; }
@media (hover: hover) {
  .rail-items.gl-on > .rail-btn[data-gl-lit]:hover { background: transparent; color: #fff; }
  .rail-items.gl-on[data-gl-lifted] > .rail-btn[data-gl-lit]:hover { color: var(--accent-text); }
}
.rail-items.gl-on > .rail-btn.on .rail-badge { background: var(--accent); color: #fff; }
.rail-items.gl-on > .rail-btn[data-gl-lit] .rail-badge { background: #fff; color: var(--accent); }

/* листы, окна, уведомление: стекло прозрачнее, кромка преломляет то, что под ними */
.sheet, .dialog { background: var(--glass-strong); }
.toast { box-shadow: 0 0 0 .5px var(--gl-edge), var(--pill-shadow); }

@media (max-width: 899px) {
  .rail.gl-host > .gl-pane { background: var(--glass-strong); box-shadow: 0 0 0 .5px var(--gl-edge), var(--pill-shadow); }
  /* на телефоне пунктов много: сжимаются по ширине, подпись — с многоточием; «+» на телефоне в меню нет (phone.css) */
  .rail-items, .rail-items > .rail-btn:not(.add) { min-width: 0; }
  .rail-items > .rail-btn .rail-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (prefers-reduced-transparency: reduce) {
  .gl-pane, .gl-lens, .toast, .sheet, .dialog { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
@media (prefers-contrast: more) {
  .gl-pane, .btn:not(.ghost), .icon-btn { box-shadow: 0 0 0 1px var(--text3) !important; }
}