/* Wabi website liquid-ui material: foreground labels, icons, and portraits stay sharp. */
.liquid-control[data-liquid-glass] {
  isolation: isolate;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  -webkit-tap-highlight-color: transparent;
  transition-property: transform, box-shadow, color;
}
.liquid-control > .lg-material {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: inherit;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}
.lg-material > .lg-frost,
.lg-material > .lg-backdrop,
.lg-material > .lg-optics {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
}
.lg-frost {
  background: linear-gradient(-75deg, #ffffff0d, #ffffff33, #ffffff0d);
}
.liquid-control > .lg-material > .lg-frost {
  background-image: linear-gradient(-75deg,
    rgb(255 255 255 / calc(var(--button-opacity, .2) * .25)),
    rgb(255 255 255 / var(--button-opacity, .2)),
    rgb(255 255 255 / calc(var(--button-opacity, .2) * .25))),
    linear-gradient(rgb(var(--button-tint, 255 255 255) / var(--button-tint-amount, 0)), rgb(var(--button-tint, 255 255 255) / var(--button-tint-amount, 0)));
}
.lg-backdrop {
  backdrop-filter: blur(1.5px) saturate(1.2);
  -webkit-backdrop-filter: blur(1.5px) saturate(1.2);
}
.lg-optics { opacity: .92; transition: opacity 220ms ease; }
.liquid-control:hover > .lg-material > .lg-optics { opacity: 1; }
/* Exact reflective hairline from the website control material. */
.liquid-control::after {
  content: ''; position: absolute; z-index: 1; pointer-events: none;
  inset: -.5px; padding: 1px; border-radius: inherit; box-sizing: border-box;
  background: conic-gradient(from var(--angle-1, -75deg) at 50% 50%,
    #0008, #0000 5% 40%, #0008 50%, #0000 60% 95%, #0008),
    linear-gradient(#ffffff80, #ffffff80);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  box-shadow: inset 0 0 0 .5px #ffffff59;
  transition: --angle-1 500ms ease;
}
.liquid-control:hover::after { --angle-1: -125deg; }

body .phone-shell .reference-header .liquid-control {
  border-color: transparent;
  box-shadow: inset 0 1px 1px #fff9, inset 0 -1px 1px #0000000a, 0 4px 12px -5px #29323b24;
}
body .phone-shell .reference-header .chat-members {
  border-radius: 18px;
  height: 36px;
  top: 10.5px;
  padding: 0;
  right: var(--chat-inset, 16px);
}
/* Decorative material never inherits the header's icon or text geometry. */
body .phone-shell .reference-header .lg-material,
body .phone-shell .reference-header .lg-material > * {
  position:absolute; inset:0; width:100%; height:100%; min-width:0;
  margin:0; padding:0; border:0; border-radius:inherit; pointer-events:none;
}
body .phone-shell .reference-header .lg-optics { fill:initial; stroke:none; }
@media (prefers-reduced-motion: reduce) {
  .liquid-control > .lg-material, .lg-optics, .liquid-control::after { transition:none; }
}
@media (prefers-reduced-transparency: reduce) {
  body .phone-shell .liquid-control .lg-material > .lg-frost { background:#fafbfc; }
}
@media (forced-colors: active) {
  body .phone-shell .reference-header .liquid-control { border:1px solid ButtonText; }
  .liquid-control > .lg-material { display:none; }
}

.liquid-control > .lg-material > .lg-frost {
  background-color:rgb(255 255 255 / clamp(0, calc(var(--button-opacity, .04) * 2.75), .9));
  background-image:linear-gradient(-75deg,
    rgb(255 255 255 / calc(var(--button-opacity, .04) * .5)),
    rgb(255 255 255 / calc(var(--button-opacity, .04) * 1.5)),
    rgb(255 255 255 / calc(var(--button-opacity, .04) * .5))),
    linear-gradient(rgb(var(--button-tint, 255 255 255) / var(--button-tint-amount, 0)), rgb(var(--button-tint, 255 255 255) / var(--button-tint-amount, 0)));
}
@media (prefers-reduced-transparency:reduce) {
  .liquid-control > .lg-material > .lg-frost { background:#fafbfc; }
}

/* App navigation needs a readable surface above scrolling photography. */
.guide-nav.liquid-control > .lg-material > .lg-frost{background-color:#ffffffe0}

/* Phone UI uses the optical material without the website CTA's metallic rim. */
.phone-shell .liquid-control::after,
.widget-app .liquid-control::after { content:none; }
body .phone-shell .reference-header .liquid-control {
  border-color:rgb(0 0 0 / .05);
  box-shadow:0 2px 8px -3px rgb(35 40 43 / .09);
}
body .phone-shell .reference-header .chat-members {
  border:0;
  box-shadow:none;
}
.widget-app .app-header .liquid-control {
  border-color:rgb(0 0 0 / .05);
  box-shadow:0 2px 8px -3px rgb(35 40 43 / .09);
}
.widget-app .guide-nav.liquid-control {
  border-color:transparent;
  box-shadow:0 6px 20px rgb(35 40 43 / .08);
}
@media (forced-colors:active) {
  body .phone-shell .reference-header .liquid-control,
  .widget-app .liquid-control { border:1px solid ButtonText; }
}

/* Match the title portrait, with the pile centered on the 36px back control. */
body .phone-shell .reference-header .chat-members>.cue{margin:0}
body .phone-shell .reference-header .chat-members>.cue+.cue{margin-left:-18px}
body .phone-shell .reference-header .chat-members .member-avatar{width:32px;height:32px;border-width:1.5px}