@font-face {
  font-family: "Mono";
  src: url("JetBrainsMono-Medium.woff2") format("woff2");
  font-weight: 400 500;
  font-display: swap;
}
@font-face {
  font-family: "Mono";
  src: url("JetBrainsMono-Bold.woff2") format("woff2");
  font-weight: 600 800;
  font-display: swap;
}
@font-face {
  font-family: "Brutal";
  src: url("tektur.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}

@font-face {
  font-family: "Graff";
  src: url("wetpaint.woff2") format("woff2");
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: "Etch";
  src: url("rocksalt.woff2") format("woff2");
  font-weight: normal;
  font-display: swap;
}
@font-face {
  
  font-family: "Helv";
  src: url("helv-extblk-subset.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}@font-face {
  font-family: "Segment";
  src: url("DS-DIGI.woff2") format("woff2");
  font-weight: normal;
  font-display: swap;
}

:root {
  --font-ui:      "Mono", ui-monospace, Consolas, monospace;
  --font-display: "Brutal", "Mono", Impact, sans-serif;
  --font-led:     "Segment", "Mono", monospace;
  --font-graff:   "Graff", "Brutal", Impact, sans-serif;
  --font-etch:    "Etch", "Brutal", cursive;

  --round-sm: 4px;
  --round:    7px;
  --round-lg: 10px;
  --round-pill: 999px;

  
  --spring: cubic-bezier(.34, 1.56, .64, 1);

  

  
  --brushed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92 0.004' numOctaves='4' seed='11'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.075' intercept='0.4625'/%3E%3CfeFuncG type='linear' slope='0.075' intercept='0.4625'/%3E%3CfeFuncB type='linear' slope='0.075' intercept='0.4625'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23b)'/%3E%3C/svg%3E");

  /* Sparser, deeper streaks over the top: the scratches you actually notice. */
  --scratched: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='s' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5 0.0015' numOctaves='2' seed='29'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.30' intercept='0.35'/%3E%3CfeFuncG type='linear' slope='0.30' intercept='0.35'/%3E%3CfeFuncB type='linear' slope='0.30' intercept='0.35'/%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 0 0 .25 .5 .8 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23s)'/%3E%3C/svg%3E");

  /*
   * Swirl. Stainless is not only brushed - it carries broad cloudy polish
   * marks across the grain, and without them a vertical-only texture reads as
   * corduroy rather than steel. Low-frequency turbulence, barely any contrast.
   */
  --swirl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560'%3E%3Cfilter id='w' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008 0.016' numOctaves='4' seed='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.34' intercept='0.33'/%3E%3CfeFuncG type='linear' slope='0.34' intercept='0.33'/%3E%3CfeFuncB type='linear' slope='0.34' intercept='0.33'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='560' height='560' filter='url(%23w)'/%3E%3C/svg%3E");

  /* An anisotropic highlight: brushed metal throws one broad hot band that
     runs across the grain, not an even top-to-bottom fade. */
  --sheen: linear-gradient(176deg,
    rgba(255, 255, 255, .15)  0%,
    rgba(255, 255, 255, .06) 18%,
    rgba(255, 255, 255, .01) 34%,
    rgba(0, 0, 0, .06)       52%,
    rgba(255, 255, 255, .03) 68%,
    rgba(0, 0, 0, .18)       88%,
    rgba(0, 0, 0, .30)      100%);

  /* Shallow dents and cloudy patches. Stainless is never a flat tone: beyond
     the brushing there are polish swirls and faint knocks in the surface, and
     without them the plates read as coloured rectangles. */
  --dents: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cfilter id='d' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.045' numOctaves='3' seed='17'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeGaussianBlur stdDeviation='1.1'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.30' intercept='0.35'/%3E%3CfeFuncG type='linear' slope='0.30' intercept='0.35'/%3E%3CfeFuncB type='linear' slope='0.30' intercept='0.35'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='480' height='480' filter='url(%23d)'/%3E%3C/svg%3E");

  /* Fine monochrome grain for the metal itself. Desaturated at the filter, so
     it cannot tint the surface it sits on. */
  --metal-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='mg' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.30' intercept='0.35'/%3E%3CfeFuncG type='linear' slope='0.30' intercept='0.35'/%3E%3CfeFuncB type='linear' slope='0.30' intercept='0.35'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23mg)'/%3E%3C/svg%3E");

  --lateral: linear-gradient(96deg,
    rgba(255, 255, 255, .22)  0%,
    rgba(255, 255, 255, .14) 42%,
    rgba(255, 255, 255, .03) 68%,
    rgba(0, 0, 0, .05)       84%,
    rgba(0, 0, 0, .13)      100%);

  /* One surface, four layers, blended rather than stacked. */
  --surface-img:   var(--metal-grain), var(--scratched), var(--brushed), var(--dents), var(--swirl), var(--lateral), var(--sheen);
  --surface-blend: soft-light, soft-light, overlay, soft-light, soft-light, normal, normal;

  /* One slotted screw, reused at every corner. */
  /*
   * A countersunk screw, not a disc.
   *
   * The previous one was a flat circle sitting on the surface. A real fastener
   * lives in a dimple: the panel is punched inward, so there is a dark crescent
   * along the top-inside of the recess and a bright one along the bottom, and
   * only then the domed head with its own highlight.
   */
  /*
   * Two fasteners, both countersunk.
   *
   * A real screw lives in a dimple: the panel is punched inward, so there is a
   * dark crescent along the top-inside of the recess and a bright one along the
   * bottom, and only then the domed head. The heads differ because the parts
   * differ - the screens are bolted down with phillips, the plates are slotted.
   */
  --bolt-phillips: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='bowl' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23000000' stop-opacity='.62'/%3E%3Cstop offset='.5' stop-color='%23000000' stop-opacity='.10'/%3E%3Cstop offset='1' stop-color='%23ffffff' stop-opacity='.85'/%3E%3C/linearGradient%3E%3CradialGradient id='head' cx='36%25' cy='28%25'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.5' stop-color='%23cfd2d3'/%3E%3Cstop offset='1' stop-color='%23767b7e'/%3E%3C/radialGradient%3E%3Cfilter id='soft' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='0.55'/%3E%3C/filter%3E%3C/defs%3E%3Ccircle cx='12' cy='12' r='9.4' fill='%23ffffff' opacity='.9'/%3E%3Ccircle cx='12' cy='12' r='8.7' fill='%23000000' opacity='.55'/%3E%3Ccircle cx='12' cy='12' r='8.4' fill='url(%23bowl)' filter='url(%23soft)'/%3E%3Ccircle cx='12' cy='12' r='5.2' fill='%23000000' opacity='.5'/%3E%3Ccircle cx='12' cy='12' r='4.7' fill='url(%23head)'/%3E%3Cpath d='M12 8.6v6.8M8.6 12h6.8' stroke='%23343A3D' stroke-width='1.9' stroke-linecap='round'/%3E%3Cpath d='M12 8.6v6.8M8.6 12h6.8' stroke='%23ffffff' stroke-width='.6' stroke-linecap='round' opacity='.45' transform='translate(-.55,-.55)'/%3E%3C/svg%3E");

  --bolt-flat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='bowl' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23000000' stop-opacity='.62'/%3E%3Cstop offset='.5' stop-color='%23000000' stop-opacity='.10'/%3E%3Cstop offset='1' stop-color='%23ffffff' stop-opacity='.85'/%3E%3C/linearGradient%3E%3CradialGradient id='head' cx='36%25' cy='28%25'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.5' stop-color='%23cfd2d3'/%3E%3Cstop offset='1' stop-color='%23767b7e'/%3E%3C/radialGradient%3E%3Cfilter id='soft' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='0.55'/%3E%3C/filter%3E%3C/defs%3E%3Ccircle cx='12' cy='12' r='9.4' fill='%23ffffff' opacity='.9'/%3E%3Ccircle cx='12' cy='12' r='8.7' fill='%23000000' opacity='.55'/%3E%3Ccircle cx='12' cy='12' r='8.4' fill='url(%23bowl)' filter='url(%23soft)'/%3E%3Ccircle cx='12' cy='12' r='5.2' fill='%23000000' opacity='.5'/%3E%3Ccircle cx='12' cy='12' r='4.7' fill='url(%23head)'/%3E%3Cpath d='M8.2 12h7.6' stroke='%23343A3D' stroke-width='2.1' stroke-linecap='round'/%3E%3Cpath d='M8.2 11.1h7.6' stroke='%23ffffff' stroke-width='.7' stroke-linecap='round' opacity='.5'/%3E%3C/svg%3E");

  --bolt: var(--bolt-flat);

  /* Fine film grain. */
  /* Soft grain. Lower frequency and a touch of blur, because at 0.9 with three
     octaves it was sharp enough to read as digital noise rather than film. */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2' stitchTiles='stitch'/%3E%3CfeGaussianBlur stdDeviation='0.6'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Coarser mottling: dirt and uneven wear rather than grain. */
  --noise-coarse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='c' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014' numOctaves='4' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='520' height='520' filter='url(%23c)'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------- dark: gunmetal */

/* ------------------------------------------------- the one palette */
/*
 * The night finish, and the only one.
 *
 * There was a toggle with a daylight variant beside this. Two finishes meant
 * every colour decision had to be made twice and re-verified twice - the
 * muted tone had to chase the steel three separate times to stay legible, and
 * the logout red twice - so the pair is gone and this is what remains.
 */
:root {
  /* A dim room, not a lit one: the wall sits well below the fittings. */
  --page:        #5b7d87;
  --page-2:      #688d98;

  --metal:       #767b7f;
  --metal-dark:  #494d51;
  --metal-light: #8d9296;
  --metal-hi:    #b9bec2;
  --metal-edge:  #33373a;
  --metal-frame: #62676b;   /* the screens' frames, a shade under the plates */

  --ink:         #f0f5f8;
  --muted:       #e0e5e8;

  --inset:       #2d3236;
  --inset-edge:  #14181a;
  --screen:      #070a0c;
  --screen-edge: #222b31;

  --acc-coral: #ff8172;
  --acc-amber: #ffc247;
  --acc-mint:  #86e8b6;
  --acc-cyan:  #74dcec;
  --acc-lilac: #cbb0ff;
  --acc-ink:   #10160f;

  --led-on:  #62e878;
  --led-red: #ffd0d0;

  color-scheme: dark;
}








html {
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-ui);
}
body {
  background: transparent;
  color: var(--ink);
  font-family: var(--font-ui);
}


body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  
  background: var(--page);
}



.chat-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 899;
  pointer-events: none;
  background:
    
    radial-gradient(closest-side circle at 50% 45%,
      transparent 62%,
      rgba(0, 0, 0, .03) 88%,
      rgba(0, 0, 0, .07) 100%);
}



body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: var(--noise), var(--noise-coarse);
  background-size: 200px 200px, 520px 520px;
  opacity: .15;
  mix-blend-mode: overlay;
}


:root:root .chat-page,
:root:root .chat-page *,
:root:root .chat-page *::placeholder,
:root:root .chat-page *::before,
:root:root .chat-page *::after {
  letter-spacing: normal;
}



:root:root .chat-page .collapsible-section,
:root:root .chat-page .local-chat-section {
  position: relative;
  background-image: var(--surface-img);
  background-color: var(--metal);
  background-blend-mode: var(--surface-blend);
  border: 1px solid var(--metal-edge);
  border-radius: var(--round);
  box-shadow:
    inset 0 1px 0 var(--metal-hi),
    inset 0 -1px 0 rgba(0, 0, 0, .45),
    inset 1px 0 0 rgba(255, 255, 255, .10),
    inset -1px 0 0 rgba(0, 0, 0, .25),
    0 2px 0 rgba(0, 0, 0, .38),
    0 8px 16px rgba(0, 0, 0, .35);
  overflow: hidden;
}


:root:root .chat-page .left-column .collapsible-section::after,
:root:root .chat-page .local-chat-section::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background-image: var(--bolt-flat), var(--bolt-flat), var(--bolt-flat), var(--bolt-flat);
  background-size: 12px 12px;
  background-repeat: no-repeat;
  background-position:
    4px 4px, calc(100% - 4px) 4px,
    4px calc(100% - 4px), calc(100% - 4px) calc(100% - 4px);
}


:root:root .chat-page .collapsible-header {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, .14), rgba(0, 0, 0, .10) 55%, rgba(0, 0, 0, .22));
  border: none;
  border-bottom: 1px solid var(--metal-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 0 rgba(255, 255, 255, .07);
  padding: 9px 14px;
  transition: filter .15s ease;
}
:root:root .chat-page .collapsible-header:hover { filter: brightness(1.1); }
:root:root .chat-page .collapsible-header h3 {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .45);
}
:root:root .chat-page .collapsible-header::after { border-top-color: var(--ink); }


:root:root .chat-page .buddy-inner,
:root:root .chat-page .cosmetics-inner,
:root:root .chat-page .settings-inner {
  background: linear-gradient(180deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, .12));
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .45);
  border-top: 1px solid rgba(0, 0, 0, .5);
}




:root:root .chat-page .video-grid > .video-wrapper {
  position: relative;
  
  padding: 27px;
  box-sizing: border-box;
  background-image: var(--surface-img);
  background-color: var(--metal);
  background-blend-mode: var(--surface-blend);
  border: 1px solid var(--metal-edge);
  border-radius: var(--round-lg);
  box-shadow:
    inset 0 2px 0 var(--metal-hi),
    inset 0 -2px 0 rgba(0, 0, 0, .5),
    inset 2px 0 0 rgba(255, 255, 255, .09),
    inset -2px 0 0 rgba(0, 0, 0, .28),
    0 3px 0 rgba(0, 0, 0, .4),
    0 10px 22px rgba(0, 0, 0, .45);
}

:root:root .chat-page .video-grid > .video-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  background-image: var(--bolt-phillips), var(--bolt-phillips), var(--bolt-phillips), var(--bolt-phillips);
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position:
    4px 4px, calc(100% - 4px) 4px,
    4px calc(100% - 4px), calc(100% - 4px) calc(100% - 4px);
}


:root:root .chat-page .video-grid > .video-wrapper::after {
  content: "";
  position: absolute;
  left: -3px;
  top: 24%;
  bottom: 24%;
  width: 7px;
  pointer-events: none;
  z-index: 5;
  border-radius: 3px;
  background:
    linear-gradient(180deg,
      var(--metal-light) 0 calc(10% - 1.5px),
      var(--metal-dark)  calc(10% - 1.5px) calc(10% + 1.5px),
      var(--metal-light) calc(10% + 1.5px) calc(20% - 1.5px),
      var(--metal-dark)  calc(20% - 1.5px) calc(20% + 1.5px),
      var(--metal-light) calc(20% + 1.5px) calc(30% - 1.5px),
      var(--metal-dark)  calc(30% - 1.5px) calc(30% + 1.5px),
      var(--metal-light) calc(30% + 1.5px) calc(40% - 1.5px),
      var(--metal-dark)  calc(40% - 1.5px) calc(40% + 1.5px),
      var(--metal-light) calc(40% + 1.5px) calc(50% - 1.5px),
      var(--metal-dark)  calc(50% - 1.5px) calc(50% + 1.5px),
      var(--metal-light) calc(50% + 1.5px) calc(60% - 1.5px),
      var(--metal-dark)  calc(60% - 1.5px) calc(60% + 1.5px),
      var(--metal-light) calc(60% + 1.5px) calc(70% - 1.5px),
      var(--metal-dark)  calc(70% - 1.5px) calc(70% + 1.5px),
      var(--metal-light) calc(70% + 1.5px) calc(80% - 1.5px),
      var(--metal-dark)  calc(80% - 1.5px) calc(80% + 1.5px),
      var(--metal-light) calc(80% + 1.5px) calc(90% - 1.5px),
      var(--metal-dark)  calc(90% - 1.5px) calc(90% + 1.5px),
      var(--metal-light) calc(90% + 1.5px) 100%),
    var(--metal);
  border: 1px solid var(--metal-edge);
  box-shadow:
    inset 0 1px 0 var(--metal-hi),
    inset -1px 0 0 rgba(0, 0, 0, .4),
    0 2px 5px rgba(0, 0, 0, .5);
}


:root:root .chat-page .video-slot {
  background: var(--screen);
  border: 1px solid var(--screen-edge);
  border-radius: var(--round-sm);
  box-shadow:
    inset 0 3px 10px rgba(0, 0, 0, .95),
    inset 0 0 0 1px rgba(0, 0, 0, .8),
    0 0 0 1px rgba(255, 255, 255, .06);
  overflow: hidden;
}


:root:root .chat-page .tile-bar { background: none; padding: 8px; }
:root:root .chat-page .nameLabel {
  
  display: inline-block;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #fff;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, .95),
    0 0 10px rgba(0, 0, 0, .8);
}


:root:root .chat-page .overlay {
  font-family: var(--font-led);
  font-size: 19px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--acc-amber);
  text-shadow: 0 0 10px color-mix(in srgb, var(--acc-amber) 45%, transparent);
  opacity: .85;
}




:root:root .chat-page .search-button,
:root:root .chat-page #sendChatBtn,
:root:root .chat-page #buddyBtn,
:root:root .chat-page #saveCosmeticsBtn,
:root:root .chat-page #leaveBuddyBtn,
:root:root .chat-page .jump-to-bottom-btn,
:root:root .chat-page .mobile-control-bar button {
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--acc-ink);
  border: 2px solid rgba(255, 255, 255, .85);
  border-radius: var(--round-pill);
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, .55) 0%,
      rgba(255, 255, 255, .10) 46%,
      rgba(0, 0, 0, .10) 54%,
      rgba(0, 0, 0, .22) 100%),
    var(--acc-cyan);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 -3px 6px rgba(0, 0, 0, .3),
    0 3px 0 rgba(0, 0, 0, .45),
    0 6px 12px rgba(0, 0, 0, .4);
  cursor: pointer;
  overflow: hidden;
  transition: transform .15s var(--spring), box-shadow .15s ease, filter .2s ease;
}


:root:root .chat-page .search-button::before,
:root:root .chat-page #sendChatBtn::before,
:root:root .chat-page #buddyBtn::before,
:root:root .chat-page #saveCosmeticsBtn::before,
:root:root .chat-page #leaveBuddyBtn::before {
  content: "";
  position: absolute;
  left: 5%; right: 5%; top: 2px;
  height: 40%;
  border-radius: var(--round-pill);
  background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0));
  pointer-events: none;
}

:root:root .chat-page .search-button:hover,
:root:root .chat-page #sendChatBtn:hover,
:root:root .chat-page #buddyBtn:hover,
:root:root .chat-page #saveCosmeticsBtn:hover,
:root:root .chat-page #leaveBuddyBtn:hover {
  filter: brightness(1.08) saturate(1.12);
  transform: translateY(-1px);
}


:root:root .chat-page .search-button:active,
:root:root .chat-page #sendChatBtn:active,
:root:root .chat-page #buddyBtn:active,
:root:root .chat-page #saveCosmeticsBtn:active,
:root:root .chat-page #leaveBuddyBtn:active {
  transform: translateY(3px);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5), 0 2px 4px rgba(0, 0, 0, .35);
}


:root:root .chat-page #saveCosmeticsBtn  { background-color: var(--acc-mint); }
:root:root .chat-page #leaveBuddyBtn     { background-color: var(--acc-coral); }
:root:root .chat-page #sendChatBtn,
:root:root .chat-page #buddyBtn          { background-color: var(--acc-cyan); }


:root:root .chat-page .search-button .search-placeholder { color: var(--acc-ink); }
:root:root .chat-page .search-button .search-status {
  font-family: var(--font-led);
  font-size: 15px;
  letter-spacing: .06em;
}
:root:root .chat-page .search-button .status-bracket { color: rgba(0, 0, 0, .42); }
:root:root .chat-page .search-button .status-text    { color: var(--acc-ink); }


:root:root .chat-page .tileBtn,
:root:root .chat-page .streamer-toggle,
:root:root .chat-page .theme-toggle {
  border-radius: 50%;
  border: 1px solid var(--metal-edge);
  background-image: var(--surface-img);
  background-color: var(--metal-light);
  background-blend-mode: var(--surface-blend);
  box-shadow:
    inset 0 1px 0 var(--metal-hi),
    inset 0 -2px 4px rgba(0, 0, 0, .35),
    0 2px 0 rgba(0, 0, 0, .4),
    0 3px 6px rgba(0, 0, 0, .35);
  color: var(--ink);
  transition: transform .15s var(--spring), filter .2s, box-shadow .15s;
}
:root:root .chat-page .tileBtn:hover,
:root:root .chat-page .streamer-toggle:hover,
:root:root .chat-page .theme-toggle:hover {
  filter: brightness(1.15);
  color: var(--acc-cyan);
  border-color: var(--acc-cyan);
}
:root:root .chat-page .tileBtn:active,
:root:root .chat-page .streamer-toggle:active,
:root:root .chat-page .theme-toggle:active {
  transform: translateY(2px);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .5);
}

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  margin-right: 10px;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.theme-toggle svg { width: 15px; height: 15px; fill: currentColor; }
.theme-toggle .icon-sun  { display: none; }




:root:root .chat-page #chatBox {
  background: var(--screen);
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, .9), inset 0 0 0 1px var(--screen-edge);
  color: var(--ink);
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--metal-light) transparent;
}
:root:root .chat-page #chatBox::-webkit-scrollbar { width: 9px; }
:root:root .chat-page #chatBox::-webkit-scrollbar-thumb {
  background: var(--metal-light);
  border-radius: var(--round-pill);
  border: 2px solid var(--screen);
}

:root:root .chat-page input[type="text"],
:root:root .chat-page input[type="password"],
:root:root .chat-page select,
:root:root .chat-page textarea {
  font-family: var(--font-ui);
  color: var(--acc-mint);
  background: var(--screen);
  border: 1px solid var(--screen-edge);
  border-radius: var(--round-sm);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .8);
  transition: border-color .15s, box-shadow .15s;
}
:root:root .chat-page input[type="text"]:focus,
:root:root .chat-page select:focus,
:root:root .chat-page textarea:focus {
  outline: none;
  border-color: var(--acc-mint);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, .8),
    0 0 0 2px color-mix(in srgb, var(--acc-mint) 40%, transparent);
}
:root:root .chat-page ::placeholder { color: var(--muted); opacity: .9; }


:root:root .chat-page input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 10px;
  background: var(--screen);
  border: 1px solid var(--screen-edge);
  border-radius: var(--round-pill);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .9);
}
:root:root .chat-page input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .8);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(0, 0, 0, .22)),
    var(--acc-cyan);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 2px 4px rgba(0, 0, 0, .6);
  cursor: pointer;
  transition: transform .15s var(--spring);
}
:root:root .chat-page input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.12); }



:root:root .chat-page .top-bar { background: none; border: none; }
:root:root .chat-page .username-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}
:root:root .chat-page .logout-link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--led-red);
  text-decoration: none;
}
:root:root .chat-page .logout-link:hover { filter: brightness(1.25); }

:root:root .chat-page #topProfilePicture {
  border-radius: var(--round-sm);
  border: 1px solid var(--metal-edge);
  box-shadow: inset 0 1px 0 var(--metal-hi), 0 2px 0 rgba(0, 0, 0, .4);
}

:root:root .chat-page .footer .policies a,
:root:root .chat-page .footer .nav-link,
:root:root .chat-page .footer a {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
:root:root .chat-page .footer .policies a:hover { color: var(--acc-cyan); }



:root:root .chat-page.streamer .mobile-tabbar {
  background-image: var(--surface-img);
  background-color: var(--metal);
  background-blend-mode: var(--surface-blend);
  border-top: 2px solid var(--metal-edge);
  box-shadow: inset 0 2px 0 var(--metal-hi), 0 -6px 18px rgba(0, 0, 0, .5);
}
:root:root .chat-page.streamer .mobile-tabbar button {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  border-right: 1px solid rgba(0, 0, 0, .32);
  transition: color .15s, background .15s;
}
:root:root .chat-page.streamer .mobile-tabbar button:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, .07);
}
:root:root .chat-page.streamer .mobile-tabbar button.active {
  color: var(--acc-ink);
  border-top: 3px solid var(--acc-amber);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--acc-amber) 82%, transparent), transparent 88%);
}


:root:root #mobilePanel .panel-content {
  background-image: var(--surface-img);
  background-color: var(--metal);
  background-blend-mode: var(--surface-blend);
  border: 2px solid var(--metal-edge);
  border-radius: var(--round-lg);
  box-shadow:
    inset 0 2px 0 var(--metal-hi),
    inset 0 -2px 0 rgba(0, 0, 0, .5),
    0 4px 0 rgba(0, 0, 0, .45),
    0 16px 34px rgba(0, 0, 0, .6);
}



:root:root .chat-page .notification-container > *,
:root:root .chat-page .notification {
  font-family: var(--font-ui);
  background-image: var(--surface-img);
  background-color: var(--metal);
  background-blend-mode: var(--surface-blend);
  border: 1px solid var(--metal-edge);
  border-radius: var(--round);
  box-shadow: inset 0 1px 0 var(--metal-hi), 0 3px 0 rgba(0, 0, 0, .4);
  color: var(--ink);
}


:root:root .chat-page .scrolling-box,
:root:root .chat-page .scrolling-box-currentbuddy,
:root:root .chat-page .scrolling-boxnameglow {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  color: var(--muted);
}
:root:root .chat-page .scrolling-text,
:root:root .chat-page .glowPreviewText,
:root:root .chat-page .buddyNeek,
:root:root .chat-page .buddymembers {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
:root:root .chat-page .buddymembers { color: var(--acc-mint); }

:root:root .chat-page .scrolling-text strong {
  font-family: var(--font-led);
  font-size: 16px;
  color: var(--acc-amber);
}

:root:root .chat-page .preview-video-slot {
  background: var(--screen);
  border: 1px solid var(--screen-edge);
  border-radius: var(--round-sm);
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, .9);
}

:root:root .chat-page .setting-label label,
:root:root .chat-page .inbox,
:root:root .chat-page label.inbox {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
}




:root:root .chat-page .tileBtn.micBtn {
  width: 30px; height: 30px;
  min-width: 0;
  padding: 0;
  flex: 0 0 auto;
  aspect-ratio: 1;
}
:root:root .chat-page .micBtn svg { width: 15px; height: 15px; }
:root:root .chat-page .micBtn .mic-body  { fill: var(--ink); }
:root:root .chat-page .micBtn .mic-stand { stroke: var(--ink); }
:root:root .chat-page .micBtn.muted .mic-body  { fill: var(--led-red); }
:root:root .chat-page .micBtn.muted .mic-stand,
:root:root .chat-page .micBtn.muted .mic-slash { stroke: var(--led-red); }


:root:root .chat-page .chat-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .1));
  border-top: 1px solid var(--metal-edge);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .4);
}
:root:root .chat-page .chat-input-row .mention-wrapper { flex: 1; min-width: 0; }
:root:root .chat-page .chat-input-row input[type="text"] {
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--round-pill);
}
:root:root .chat-page .chat-input-row #charCount {
  flex: 0 0 auto;
  font-family: var(--font-led);
  font-size: 15px;
  color: var(--acc-amber);
  white-space: nowrap;
}
:root:root .chat-page .chat-input-row button {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
}
:root:root .chat-page .chat-input-row button img { width: 15px; height: 15px; }


:root:root .chat-page .local-chat-section.closed {
  align-self: start;
  height: auto;
  min-height: 0;
}
:root:root .chat-page .local-chat-section.closed > .collapsible-section {
  height: auto;
  min-height: 0;
}
:root:root .chat-page .left-column .collapsible-section { flex: 0 0 auto; }


:root:root .chat-page .buddy-system .buddy-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}
:root:root .chat-page .buddy-system .buddy-messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  overflow: visible;
}

:root:root .chat-page .scrolling-text {
  transform: none;
  animation: none;
  white-space: normal;
  display: block;
  line-height: 1.5;
  text-align: left;
}
:root:root .chat-page .scrolling-box { overflow: visible; white-space: normal; }
:root:root .chat-page .scrolling-box-currentbuddy {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  text-align: left;
}
:root:root .chat-page .buddyNeek { margin: 0; }
:root:root .chat-page #buddyBox:empty,
:root:root .chat-page #buddyInvites:empty { display: none; }
:root:root .chat-page .buddy-leave { padding: 0; background: none; border: none; }
:root:root .chat-page #leaveBuddyBtn { width: 100%; padding: 8px 12px; }
:root:root .chat-page .buddy-input-container { padding: 0; background: none; border: none; }
:root:root .chat-page .buddy-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: none;
  border: none;
}
:root:root .chat-page .buddy-input-row input[type="text"] {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border-radius: var(--round-pill);
}
:root:root .chat-page .buddy-input-row button {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  padding: 0;
  display: grid;
  place-items: center;
}
:root:root .chat-page .buddy-input-row button img { width: 14px; height: 14px; }


.mobile-tabbar { z-index: 1600; }
#mobilePanel, .mobile-panel { z-index: 1601; }



:root:root #profileOverlay {
  background: rgba(6, 10, 8, .62) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
:root:root :is(#profileOverlay, #linkPopupOverlay) > div {
  background-image: var(--surface-img) !important;
  background-color: var(--metal) !important;
  background-blend-mode: var(--surface-blend) !important;
  border: 2px solid var(--metal-edge) !important;
  border-radius: var(--round-lg) !important;
  box-shadow:
    inset 0 2px 0 var(--metal-hi),
    inset 0 -2px 0 rgba(0, 0, 0, .5),
    0 4px 0 rgba(0, 0, 0, .45),
    0 18px 40px rgba(0, 0, 0, .6) !important;
  color: var(--ink) !important;
  font-family: var(--font-ui) !important;
  padding: 22px !important;
}
:root:root :is(#profileOverlay, #linkPopupOverlay) * { font-family: var(--font-ui) !important; }
:root:root #profileOverlay > div > button {
  width: 26px !important; height: 26px !important;
  top: 10px !important; right: 10px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  border: 1px solid var(--metal-edge) !important;
  background: var(--metal-light) !important;
  color: var(--ink) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  box-shadow: inset 0 1px 0 var(--metal-hi), 0 2px 0 rgba(0, 0, 0, .4) !important;
}
:root:root #profileOverlay > div > button:hover {
  color: var(--led-red) !important;
  border-color: var(--led-red) !important;
}
:root:root #profileOverlay > div > div:first-of-type {
  border: 2px solid var(--metal-edge) !important;
  border-radius: var(--round) !important;
  box-shadow: inset 0 1px 0 var(--metal-hi), 0 2px 0 rgba(0, 0, 0, .4) !important;
  overflow: hidden;
}
:root:root #profileOverlay img { border-radius: var(--round-sm) !important; }
:root:root #pfpActionPopup {
  background: var(--metal) !important;
  border: 1px solid var(--metal-edge) !important;
  border-radius: var(--round-sm) !important;
  color: var(--ink) !important;
  overflow: hidden;
}
:root:root #pfpActionPopup > div { border-bottom-color: var(--metal-edge) !important; }
:root:root #pfpActionPopup > div:hover {
  background: var(--acc-amber) !important;
  color: var(--acc-ink) !important;
}
:root:root #pfpError { color: var(--led-red) !important; }
:root:root #pfpSaveBar > div {
  border-radius: var(--round-pill) !important;
  border: 2px solid rgba(255, 255, 255, .8) !important;
  background: var(--acc-mint) !important;
  color: var(--acc-ink) !important;
  font-weight: 700 !important;
}
:root:root #profileOverlay textarea {
  background: var(--screen) !important;
  border: 1px solid var(--screen-edge) !important;
  border-radius: var(--round-sm) !important;
  color: var(--acc-mint) !important;
  padding: 10px !important;
}



@media (prefers-reduced-motion: reduce) {
  :root:root .chat-page * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}


@media (max-width: 899px) {
  :root:root .chat-page .video-grid > .video-wrapper {
    padding: 16px;
    border-radius: var(--round);
  }
  :root:root .chat-page .video-grid > .video-wrapper::after { display: none; }
  :root:root .chat-page .video-grid > .video-wrapper::before {
    background-size: 8px 8px;
    background-position:
      3px 3px, calc(100% - 3px) 3px,
      3px calc(100% - 3px), calc(100% - 3px) calc(100% - 3px);
  }
}




:root:root .chat-page .nameLabel {
  flex: 0 0 auto;
  width: fit-content;
  max-width: 100%;
  margin-right: auto;
  align-self: flex-end;
}


:root:root .chat-page .scrolling-text {
  font-size: 10px;
  letter-spacing: .05em;
  line-height: 1.6;
}
:root:root .chat-page .scrolling-text strong {
  font-size: 15px;
  line-height: 1;
  vertical-align: -1px;
}
:root:root .chat-page .scrolling-text .sep { opacity: .45; margin: 0 2px; }


:root:root .chat-page .footer .icons img {
  filter: none;
  opacity: .55;
}
:root:root .chat-page .footer .icons a:hover img { opacity: .9; }



:root:root .chat-page .scrolling-text strong {
  display: inline-block;
  min-width: 22px;
  padding: 1px 5px;
  text-align: center;
  background: var(--screen);
  border: 1px solid var(--screen-edge);
  border-radius: 3px;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, .9);
  color: var(--acc-amber);
  vertical-align: baseline;
}


:root:root .chat-page .buddymembers {
  color: var(--ink);
  font-weight: 700;
}


:root:root .chat-page .logout-link { color: var(--led-red); }


:root:root #mobilePanel .panel-content #saveCosmeticsBtn,
:root:root #mobilePanel .panel-content #leaveBuddyBtn,
:root:root #mobilePanel .panel-content #buddyBtn,
:root:root #mobilePanel .panel-content #sendChatBtn {
  border: 2px solid rgba(255, 255, 255, .85);
  border-radius: var(--round-pill);
  color: var(--acc-ink);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, .55) 0%,
      rgba(255, 255, 255, .10) 46%,
      rgba(0, 0, 0, .10) 54%,
      rgba(0, 0, 0, .22) 100%),
    var(--acc-mint);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 -3px 6px rgba(0, 0, 0, .3),
    0 3px 0 rgba(0, 0, 0, .45);
  padding: 9px 16px;
  height: auto;
}
:root:root #mobilePanel .panel-content #leaveBuddyBtn { background-color: var(--acc-coral); }
:root:root #mobilePanel .panel-content #buddyBtn,
:root:root #mobilePanel .panel-content #sendChatBtn {
  background-color: var(--acc-cyan);
  padding: 0;
  width: 34px; height: 34px;
}



:root:root .chat-page .buttons-container {
  
  background: linear-gradient(180deg, rgba(0, 0, 0, .30), rgba(0, 0, 0, .16));
  border: 1px solid var(--metal-edge);
  border-radius: var(--round);
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, .5),
    inset 0 -1px 0 var(--metal-hi),
    0 1px 0 var(--metal-hi);
  padding: 9px;
  gap: 9px;
}

:root:root .chat-page .buttons-container .search-button {
  position: relative;
  border: none;
  border-radius: 5px;
  padding: 11px 14px 12px;
  overflow: visible;

  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, .55) 0%,
      rgba(255, 255, 255, .12) 42%,
      rgba(0, 0, 0, .06) 58%,
      rgba(0, 0, 0, .14) 100%),
    var(--keycap, var(--metal-light));

  
  color: var(--keycap-ink, #6f625d);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-shadow:
    0 -1px 0 rgba(0, 0, 0, .30),
    0  1px 0 rgba(255, 255, 255, .95),
    0  2px 2px rgba(255, 255, 255, .5);

  
  box-shadow:
    inset  1px  1px 0 rgba(255, 255, 255, .95),
    inset  2px  2px 0 rgba(255, 255, 255, .45),
    inset -1px -1px 0 rgba(0, 0, 0, .45),
    inset -2px -2px 0 rgba(0, 0, 0, .18),
    0 5px 0 var(--metal-dark),
    0 6px 1px rgba(0, 0, 0, .35),
    0 9px 10px rgba(0, 0, 0, .4);

  transition: transform .06s linear, box-shadow .06s linear, filter .12s ease;
}

:root:root .chat-page .buttons-container .search-button::before { display: none; }

:root:root .chat-page .buttons-container .search-button:hover {
  filter: brightness(1.05);
  transform: none;
}


:root:root .chat-page .buttons-container .search-button:active {
  transform: translateY(5px);
  box-shadow:
    inset  1px  1px 0 rgba(255, 255, 255, .6),
    inset -1px -1px 0 rgba(0, 0, 0, .45),
    inset  0 2px 6px rgba(0, 0, 0, .35),
    0 0 0 var(--metal-dark),
    0 1px 2px rgba(0, 0, 0, .3);
}


:root:root .chat-page #startSkipBtn { --keycap: #f2d3cd; --keycap-ink: #7a4f46; }
:root:root .chat-page #stopBtn      { --keycap: #f3e2c2; --keycap-ink: #6d5628; }

:root:root .chat-page .buttons-container .search-button .search-placeholder {
  color: inherit;
}
:root:root .chat-page .buttons-container .search-button .search-status {
  font-family: var(--font-led);
  font-size: 15px;
}
:root:root .chat-page #startSkipBtn .status-text { color: #8f2a1f; }
:root:root .chat-page #stopBtn .status-text      { color: #7a5410; }
:root:root .chat-page .buttons-container .search-button .status-bracket {
  color: rgba(0, 0, 0, .28);
}
:root:root .chat-page #startSkipBtn,
:root:root .chat-page #stopBtn {
  
  color: var(--keycap-ink);
  border: none;
}
:root:root .chat-page #startSkipBtn .status-bracket,
:root:root .chat-page #stopBtn .status-bracket { color: rgba(0, 0, 0, .35); }




:root:root .chat-page .top-left { flex: 1; justify-content: flex-start; }
:root:root .chat-page .identity {
  display: flex;
  align-items: center;
  gap: 10px;
}
:root:root .chat-page .identity .user-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}
:root:root .chat-page .profile-picture-container {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  line-height: 0;
}
:root:root .chat-page #topProfilePicture {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: var(--round-sm);
  border: 1px solid var(--metal-edge);
  box-shadow: inset 0 1px 0 var(--metal-hi), 0 2px 0 rgba(0, 0, 0, .35);
  transition: filter .15s ease, border-color .15s ease;
}

:root:root .chat-page #topProfilePicture {
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
:root:root .chat-page #topProfileBtn:hover #topProfilePicture {
  filter: brightness(1.06);
  transform: translateY(-1px);
  
  box-shadow:
    inset 0 1px 0 var(--metal-hi),
    0 3px 5px rgba(0, 0, 0, .6);
}
:root:root .chat-page #topProfileBtn:active #topProfilePicture {
  transform: translateY(0);
  box-shadow: inset 0 1px 0 var(--metal-hi), 0 2px 0 rgba(0, 0, 0, .35);
}
:root:root .chat-page .username-display {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
}
:root:root .chat-page .username-display:hover { color: var(--acc-cyan); }


:root:root .chat-page .left-column .collapsible-header,
:root:root .chat-page .local-chat-section .collapsible-header {
  padding-left: 26px;
  padding-right: 30px;
}
:root:root .chat-page .collapsible-header::after { right: 12px; }




:root:root .chat-page .shutter {
  position: absolute;
  inset: 0;
  
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .62));
  
  z-index: 1550;
  pointer-events: none;
  overflow: hidden;
  
  transform: translateY(-101%);
  transition: transform .5s cubic-bezier(.4, .05, .25, 1);
}


:root:root .chat-page .shutter > span {
  position: absolute;
  inset: 0;
  background-image:
    var(--scratched),
    var(--brushed),
    
    repeating-linear-gradient(180deg,
      rgba(0, 0, 0, .46)       0px,
      rgba(0, 0, 0, .34)       1.6px,
      rgba(255, 255, 255, .18) 3.2px,
      rgba(255, 255, 255, .26) 4.4px,
      rgba(255, 255, 255, .14) 6px,
      rgba(255, 255, 255, .04) 9.5px,
      rgba(0, 0, 0, .08)      11.5px,
      rgba(0, 0, 0, .18)      13.4px,
      rgba(0, 0, 0, .16)      15px);
  background-color: var(--metal);
  background-blend-mode: soft-light, overlay, normal;
  box-shadow:
    inset 0 -3px 0 var(--metal-dark),
    inset 0 -5px 10px rgba(0, 0, 0, .55);
}


:root:root .chat-page .shutter > span::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .55;
}


:root:root .chat-page #slot1 .shutter > span::before {
  background-image:
    radial-gradient(58% 40% at 18% 76%, rgba(0, 0, 0, .1), transparent 70%),
    radial-gradient(44% 52% at 88% 26%, rgba(0, 0, 0, .085), transparent 72%),
    radial-gradient(30% 26% at 72% 62%, rgba(255, 255, 255, .07), transparent 68%),
    radial-gradient(22% 30% at 31% 22%, rgba(255, 255, 255, .055), transparent 70%),
    radial-gradient(38% 30% at 54% 92%, rgba(0, 0, 0, .07), transparent 74%);
}

:root:root .chat-page #slot2 .shutter > span::before {
  background-image:
    radial-gradient(50% 46% at 74% 82%, rgba(0, 0, 0, .11), transparent 70%),
    radial-gradient(38% 44% at 12% 34%, rgba(0, 0, 0, .07), transparent 74%),
    radial-gradient(34% 24% at 42% 18%, rgba(255, 255, 255, .06), transparent 66%),
    radial-gradient(26% 34% at 91% 58%, rgba(255, 255, 255, .05), transparent 72%),
    radial-gradient(30% 26% at 26% 96%, rgba(0, 0, 0, .06), transparent 70%);
}

:root:root .chat-page #slot3 .shutter > span::before {
  background-image:
    radial-gradient(46% 54% at 62% 14%, rgba(0, 0, 0, .1), transparent 72%),
    radial-gradient(56% 38% at 34% 88%, rgba(0, 0, 0, .09), transparent 68%),
    radial-gradient(24% 30% at 8% 52%, rgba(255, 255, 255, .075), transparent 70%),
    radial-gradient(32% 22% at 84% 70%, rgba(255, 255, 255, .05), transparent 68%),
    radial-gradient(28% 32% at 50% 44%, rgba(0, 0, 0, .055), transparent 76%);
}


:root:root .chat-page .shutter::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 7px;
  background: linear-gradient(180deg, var(--metal-light), var(--metal-dark));
  border-top: 1px solid rgba(0, 0, 0, .5);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .55);
}


:root:root .chat-page .shutter.closed {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  :root:root .chat-page .shutter { transition: none; }
}



:root:root .chat-page .video-slot {
  border: none;
  
  box-shadow:
    0 0 0 2px var(--metal-dark),
    0 0 0 4px var(--metal-light),
    0 0 0 5px var(--metal-edge),
    0 2px 5px 5px rgba(0, 0, 0, .28);
}

:root:root .chat-page .video-slot::before {
  content: "";
  position: absolute;
  inset: 0;
  
  z-index: 1560;
  pointer-events: none;
  border-radius: inherit;
  
  
  box-shadow:
    
    inset 0 0 0 1px rgba(0, 0, 0, .85),
    
    inset 0 4px 6px -2px rgba(0, 0, 0, .55),
    inset 0 0 7px 1px rgba(0, 0, 0, .3),
    inset 3px 0 5px -2px rgba(0, 0, 0, .4),
    inset 0 -3px 5px -2px rgba(0, 0, 0, .36),
    inset -3px 0 5px -2px rgba(0, 0, 0, .33);
}



:root:root .chat-page .collapsible-header {
  position: relative;
  z-index: 4;                 
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 26px;
  overflow: visible;
}
:root:root .chat-page .collapsible-header h3 {
  width: 100%;
  text-align: center;
  margin: 0;
}


:root:root .chat-page .collapsible-header::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -11px;
  transform: translateX(-50%);
  width: 44px;
  height: 12px;
  border: 1px solid var(--metal-edge);
  border-top: none;
  border-radius: 0 0 5px 5px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M7 3.4l5 4.2 5-4.2' fill='none' stroke='%23ffffff' stroke-opacity='.9' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' transform='translate(0,1.2)'/%3E%3Cpath d='M7 3.4l5 4.2 5-4.2' fill='none' stroke='%23000000' stroke-opacity='.5' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    var(--lateral);
  background-repeat: no-repeat;
  background-position: center 1px, 0 0;
  background-size: 19px 10px, auto;
  background-color: var(--metal-light);
  box-shadow:
    inset 0 -1px 0 var(--metal-hi),
    inset 0 2px 4px rgba(0, 0, 0, .2),
    0 2px 4px rgba(0, 0, 0, .35);
  color: transparent;
  font-size: 0;
  text-shadow: none;
  transition: filter .15s ease;
}
:root:root .chat-page .collapsible-header:hover::after { filter: brightness(1.09); }

/* Open: swap the glyph rather than rotating the tab. Spinning the whole tab
   through 180 degrees was the "weird spin" - it turned the housing upside
   down along with the arrow. */
:root:root .chat-page .collapsible-header.active::after {
  transform: translateX(-50%);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M7 8.6l5-4.2 5 4.2' fill='none' stroke='%23ffffff' stroke-opacity='.9' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' transform='translate(0,1.2)'/%3E%3Cpath d='M7 8.6l5-4.2 5 4.2' fill='none' stroke='%23000000' stroke-opacity='.5' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    var(--lateral);
  background-repeat: no-repeat;
  background-position: center 1px, 0 0;
  background-size: 19px 10px, auto;
}
:root:root .chat-page .collapsible-header.active:hover::after {
  transform: translateX(-50%);
}

/* ------------------------------------------------- the panel as a shutter */

:root:root .chat-page .left-column .collapsible-content {
  position: relative;
  /* the slat face the content is printed on */
  background-image:
    var(--brushed),
    repeating-linear-gradient(180deg,
      rgba(0, 0, 0, .30)       0px,
      rgba(0, 0, 0, .30)       1px,
      rgba(255, 255, 255, .22) 1px,
      rgba(255, 255, 255, .22) 3px,
      rgba(255, 255, 255, .03) 3px,
      rgba(255, 255, 255, .03) 11px,
      rgba(0, 0, 0, .13)      11px,
      rgba(0, 0, 0, .13)      15px);
  background-color: var(--metal);
  background-blend-mode: overlay, normal;
  box-shadow: inset 0 4px 7px -4px rgba(0, 0, 0, .6);
  transition: max-height .42s cubic-bezier(.35, .02, .3, 1);
}

/* The leading bar. It sits on the bottom edge, so it travels down with the
   panel as it unrolls and back up as it closes. */
:root:root .chat-page .left-column .collapsible-content::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 7px;
  z-index: 5;
  background: linear-gradient(180deg, var(--metal-light), var(--metal-dark));
  border-top: 1px solid rgba(0, 0, 0, .45);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .45);
}

/* The inner containers were recessed dark boxes, which hid the slats they are
   supposed to be printed on. */
:root:root .chat-page .left-column .buddy-inner,
:root:root .chat-page .left-column .cosmetics-inner,
:root:root .chat-page .left-column .settings-inner {
  background: none;
  border-top: none;
  box-shadow: none;
  padding-bottom: 16px;       /* clear of the leading bar */
}

@media (prefers-reduced-motion: reduce) {
  /* !important because the per-panel rules above carry more classes than this
     selector does; without it a reduced-motion user still gets the animation
     and, worse, sits at its start value. */
  :root:root .chat-page .left-column .collapsible-content,
  :root:root .chat-page .left-column .collapsible-content.active {
    transition: none !important;
  }
}

/* ==========================================================================
   PANEL ROLL, CORRECTED
   ==========================================================================
   Three separate bugs were stopping this from behaving as one mechanism:

   - .settings had `transition: none` and opened to `max-height: none`. Neither
     animates, so that panel simply appeared.
   - .buddy-system had `height: auto` alongside the max-height collapse, so its
     box existed at full size immediately and the slats flashed in before the
     roll started.
   - the tab lived on the header, so it stayed put while the panel moved, and
     when closed it was clipped away entirely by the plate's overflow.

   So: every panel animates the same property, over the same duration, to a
   concrete height; and the tab rides the panel's bottom edge instead.
   ========================================================================== */

:root:root .chat-page .left-column .collapsible-content,
:root:root .chat-page .left-column .cosmetics .collapsible-content,
:root:root .chat-page .left-column .settings .collapsible-content,
:root:root .chat-page .left-column .buddy-system .collapsible-content {
  position: relative;
  display: block;
  height: auto;
  /* Closed leaves a strip: the stowed shutter, with its bar and tab showing. */
  max-height: 15px;
  overflow: hidden;
  transition: max-height .42s cubic-bezier(.35, .02, .3, 1);
}

/* A concrete height, because `none` and `100%` cannot be transitioned. Large
   enough for the tallest panel; overflow stays hidden either way. */
:root:root .chat-page .left-column .collapsible-content.active,
:root:root .chat-page .left-column .cosmetics .collapsible-content.active,
:root:root .chat-page .left-column .settings .collapsible-content.active,
:root:root .chat-page .left-column .buddy-system .collapsible-content.active {
  max-height: 620px;
}

/* Nothing inside may scroll, or a scrollbar appears and disappears during the
   roll and shunts the contents sideways as it goes. */
:root:root .chat-page .left-column .collapsible-content *,
:root:root .chat-page .left-column .buddy-inner,
:root:root .chat-page .left-column .cosmetics-inner,
:root:root .chat-page .left-column .settings-inner {
  overflow: hidden;
  scrollbar-width: none;
}
:root:root .chat-page .left-column .collapsible-content *::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Room for the bar and tab at the bottom of every panel. */
:root:root .chat-page .left-column .buddy-inner,
:root:root .chat-page .left-column .cosmetics-inner,
:root:root .chat-page .left-column .settings-inner {
  padding-bottom: 20px;
}

/* ------------------------------------------------------------- the tab --- */

:root:root .chat-page .shutter-pull {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 7;
  width: 46px;
  height: 13px;
  padding: 0;
  border: 1px solid var(--metal-edge);
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M7 3.4l5 4.2 5-4.2' fill='none' stroke='%23ffffff' stroke-opacity='.9' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' transform='translate(0,1.2)'/%3E%3Cpath d='M7 3.4l5 4.2 5-4.2' fill='none' stroke='%23000000' stroke-opacity='.5' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    var(--lateral);
  background-repeat: no-repeat;
  background-position: center 2px, 0 0;
  background-size: 19px 10px, auto;
  background-color: var(--metal-light);
  box-shadow: inset 0 1px 0 var(--metal-hi), 0 -1px 3px rgba(0, 0, 0, .3);
  cursor: pointer;
  transition: filter .15s ease;
}
:root:root .chat-page .shutter-pull:hover { filter: brightness(1.1); }

/* Open: swap the glyph. The tab itself never rotates - spinning the housing
   through 180 degrees is what looked wrong before. */
:root:root .chat-page .collapsible-content.active .shutter-pull {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M7 8.6l5-4.2 5 4.2' fill='none' stroke='%23ffffff' stroke-opacity='.9' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' transform='translate(0,1.2)'/%3E%3Cpath d='M7 8.6l5-4.2 5 4.2' fill='none' stroke='%23000000' stroke-opacity='.5' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    var(--lateral);
  background-repeat: no-repeat;
  background-position: center 2px, 0 0;
  background-size: 19px 10px, auto;
}

/* The header no longer carries a tab. */
:root:root .chat-page .collapsible-header::after {
  content: none;
  display: none;
}

/* One fastener each side, on the centre line, rather than four in the corners. */
:root:root .chat-page .left-column .collapsible-section::after,
:root:root .chat-page .local-chat-section::after {
  background-image: var(--bolt-flat), var(--bolt-flat);
  background-size: 12px 12px;
  background-position: 5px 12px, calc(100% - 5px) 12px;
}

/* ==========================================================================
   PANEL ROLL, FINAL SHAPE
   ==========================================================================
   Closed is now genuinely closed: the header, and a tab hanging beneath it.
   The 15px strip that used to sit there was a sliver of stowed shutter with
   the tab laid over it, which read as a second empty band under the title.

   The tab lives on the plate rather than inside the panel, because inside it
   was clipped away the moment the panel collapsed. On the plate it sits at
   whatever the panel's bottom edge currently is, so it travels with the roll.
   ========================================================================== */


:root:root .chat-page .left-column .collapsible-section {
  overflow: visible;
}
:root:root .chat-page .left-column .collapsible-header {
  border-radius: var(--round) var(--round) 0 0;
}

:root:root .chat-page .left-column .collapsible-content,
:root:root .chat-page .left-column .cosmetics .collapsible-content,
:root:root .chat-page .left-column .settings .collapsible-content,
:root:root .chat-page .left-column .buddy-system .collapsible-content {
  max-height: 0;
  border-radius: 0 0 var(--round) var(--round);
  transition: max-height .26s cubic-bezier(.32, .02, .28, 1);
}
:root:root .chat-page .left-column .collapsible-content.active,
:root:root .chat-page .left-column .cosmetics .collapsible-content.active,
:root:root .chat-page .left-column .settings .collapsible-content.active,
:root:root .chat-page .left-column .buddy-system .collapsible-content.active {
  max-height: 620px;
}




:root:root .chat-page .left-column .collapsible-content::after { opacity: 0; }
:root:root .chat-page .left-column .collapsible-content.active::after { opacity: 1; }





:root:root .chat-page .left-column .shutter-pull {
  position: absolute;
  left: 50%;
  bottom: -12px;
  transform: translateX(-50%);
  z-index: 3;
  width: 46px;
  height: 13px;
  padding: 0;
  border: 1px solid var(--metal-edge);
  border-top: none;
  border-radius: 0 0 5px 5px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M7 3.4l5 4.2 5-4.2' fill='none' stroke='%23ffffff' stroke-opacity='.9' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' transform='translate(0,1.2)'/%3E%3Cpath d='M7 3.4l5 4.2 5-4.2' fill='none' stroke='%23000000' stroke-opacity='.5' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    var(--lateral);
  background-repeat: no-repeat;
  background-position: center 1px, 0 0;
  background-size: 19px 10px, auto;
  background-color: var(--metal-light);
  box-shadow:
    inset 0 -1px 0 var(--metal-hi),
    inset 0 2px 3px rgba(0, 0, 0, .18),
    0 2px 4px rgba(0, 0, 0, .35);
  cursor: pointer;
  transition: filter .15s ease;
}
:root:root .chat-page .left-column .shutter-pull:hover { filter: brightness(1.1); }

/* Open: swap the glyph. The housing never rotates. */
:root:root .chat-page .left-column .collapsible-section:has(.collapsible-content.active) .shutter-pull {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M7 8.6l5-4.2 5 4.2' fill='none' stroke='%23ffffff' stroke-opacity='.9' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' transform='translate(0,1.2)'/%3E%3Cpath d='M7 8.6l5-4.2 5 4.2' fill='none' stroke='%23000000' stroke-opacity='.5' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    var(--lateral);
  background-repeat: no-repeat;
  background-position: center 1px, 0 0;
  background-size: 19px 10px, auto;
}

/* The plate's fasteners belong to the header, not to the whole plate, now that
   the plate grows and shrinks with the panel. */
:root:root .chat-page .left-column .collapsible-section::after {
  height: 40px;
  inset: 0 0 auto 0;
  background-position: 5px 12px, calc(100% - 5px) 12px;
}




:root:root .chat-page .cosmetics .collapsible-content,
:root:root .chat-page .cosmetics .collapsible-content.active {
  margin-top: 0;
  padding-top: 0;
}


:root:root .chat-page .left-column .collapsible-section { margin-bottom: 18px; }
:root:root .chat-page .left-column .collapsible-section:last-of-type { margin-bottom: 0; }




:root:root .chat-page .local-chat-section {
  position: relative;
  overflow: visible;
}
:root:root .chat-page .local-chat-section .collapsible-content {
  display: flex;
  flex-direction: column;
  max-height: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 0 0 var(--round) var(--round);
  transition: max-height .26s cubic-bezier(.32, .02, .28, 1);
}
:root:root .chat-page .local-chat-section .collapsible-content.active {
  max-height: 3000px;
  flex-grow: 1;
}


:root:root .chat-page .local-chat-section:not(:has(.collapsible-content.active)) {
  flex-grow: 0;
  align-self: start;
  height: auto;
}

:root:root .chat-page .local-chat-section .shutter-pull {
  position: absolute;
  left: 50%;
  bottom: -12px;
  transform: translateX(-50%);
  z-index: 7;
  width: 46px;
  height: 13px;
  padding: 0;
  border: 1px solid var(--metal-edge);
  border-top: none;
  border-radius: 0 0 5px 5px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M7 3.4l5 4.2 5-4.2' fill='none' stroke='%23ffffff' stroke-opacity='.9' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' transform='translate(0,1.2)'/%3E%3Cpath d='M7 3.4l5 4.2 5-4.2' fill='none' stroke='%23000000' stroke-opacity='.5' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    var(--lateral);
  background-repeat: no-repeat;
  background-position: center 1px, 0 0;
  background-size: 19px 10px, auto;
  background-color: var(--metal-light);
  box-shadow:
    inset 0 -1px 0 var(--metal-hi),
    inset 0 2px 3px rgba(0, 0, 0, .18),
    0 2px 4px rgba(0, 0, 0, .35);
  cursor: pointer;
  transition: filter .15s ease;
}
:root:root .chat-page .local-chat-section .shutter-pull:hover { filter: brightness(1.1); }

:root:root .chat-page .local-chat-section:has(.collapsible-content.active) .shutter-pull {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M7 8.6l5-4.2 5 4.2' fill='none' stroke='%23ffffff' stroke-opacity='.9' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' transform='translate(0,1.2)'/%3E%3Cpath d='M7 8.6l5-4.2 5 4.2' fill='none' stroke='%23000000' stroke-opacity='.5' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    var(--lateral);
  background-repeat: no-repeat;
  background-position: center 1px, 0 0;
  background-size: 19px 10px, auto;
}

@media (prefers-reduced-motion: reduce) {
  :root:root .chat-page .local-chat-section .collapsible-content,
  :root:root .chat-page .local-chat-section .collapsible-content.active {
    transition: none !important;
  }
}

/* ==========================================================================
   TIMING, AND THE CHAT SHUTTER
   ==========================================================================
   Why the panels felt laggy, and why closing felt slower than opening:

   max-height was being animated to a flat 620px. The real panels are around
   250px tall, so opening spent its first frames travelling through 370px of
   height that nothing occupied - invisible motion - and closing spent its
   last frames the same way. The visible part therefore started late and ended
   early, which reads exactly like input lag.

   grid-template-rows: 0fr -> 1fr interpolates to the content's actual height,
   so every frame of the animation is a frame you can see. No magic number, no
   dead travel, and open and close are genuinely symmetrical.

   The easing changed too: the old curve started at .02, meaning it barely
   moved for the first fifth of its duration. Now it leaves immediately and
   settles at the end, which is what makes a control feel attached to the
   click.
   ========================================================================== */

:root:root .chat-page .left-column .collapsible-content,
:root:root .chat-page .left-column .cosmetics .collapsible-content,
:root:root .chat-page .left-column .settings .collapsible-content,
:root:root .chat-page .left-column .buddy-system .collapsible-content {
  display: grid;
  grid-template-rows: minmax(0, 0fr);
  max-height: none;
  transition: grid-template-rows .24s cubic-bezier(.22, .9, .3, 1);
}
:root:root .chat-page .left-column .collapsible-content.active,
:root:root .chat-page .left-column .cosmetics .collapsible-content.active,
:root:root .chat-page .left-column .settings .collapsible-content.active,
:root:root .chat-page .left-column .buddy-system .collapsible-content.active {
  grid-template-rows: minmax(0, 1fr);
  max-height: none;
  transition: grid-template-rows .24s cubic-bezier(.22, .9, .3, 1);
}


:root:root .chat-page .left-column .collapsible-content > * {
  min-height: 0;
  overflow: hidden;
}


:root:root .chat-page .shutter {
  transition: transform .34s cubic-bezier(.22, .9, .3, 1);
}




:root:root .chat-page .local-chat-section .collapsible-content,
:root:root .chat-page .local-chat-section .collapsible-content.active {
  display: flex;
  flex-direction: column;
  max-height: none;
  flex-grow: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  transition: none;
}
:root:root .chat-page .local-chat-section {
  flex-grow: 1;
  align-self: stretch;
  height: 100%;
}






@media (prefers-reduced-motion: reduce) {
  :root:root .chat-page .left-column .collapsible-content,
  :root:root .chat-page .left-column .collapsible-content.active,
  :root:root .chat-page .shutter {
    transition: none !important;
  }
}




:root:root .chat-page .left-column .buddy-inner,
:root:root .chat-page .left-column .cosmetics-inner,
:root:root .chat-page .left-column .settings-inner {
  margin: 9px;
  padding: 12px;
  background: var(--inset);
  border-radius: var(--round-sm);
  outline: 1px solid var(--inset-edge);
  outline-offset: -1px;
  box-shadow:
    inset 0 3px 7px -2px rgba(0, 0, 0, .55),
    inset 0 0 0 1px rgba(0, 0, 0, .25),
    0 1px 0 var(--metal-hi);
}


:root:root .chat-page .local-chat-section,
:root:root .chat-page .local-chat-section.closed,
:root:root .chat-page .local-chat-section:not(:has(.collapsible-content.active)) {
  flex-grow: 1;
  align-self: stretch;
  height: 100%;
  min-height: 0;
}
:root:root .chat-page .local-chat-section.closed > .collapsible-section {
  height: 100%;
}







:root:root .chat-page .local-chat-section .collapsible-content,
:root:root .chat-page .local-chat-section .collapsible-content.active {
  display: flex;
  flex-direction: column;
  max-height: none;
  flex-grow: 1;
  min-height: 0;
  overflow: visible;
  position: relative;
  
  transition: none;
}

:root:root .chat-page .local-chat-section {
  position: relative;
  overflow: visible;
  flex-grow: 1;
  align-self: stretch;
  height: 100%;
  box-sizing: border-box;
}

:root:root .chat-page .chat-shutter-clip {
  position: absolute;
  inset: 0;
  z-index: 10;
  overflow: hidden;                 
  pointer-events: none;
  border-radius: 0 0 var(--round) var(--round);
}

:root:root .chat-page .chat-shutter {
  position: absolute;
  inset: 0;
  overflow: hidden;
  
  container-type: inline-size;
  transform: translateY(-100%);
  transition: transform .34s cubic-bezier(.22, .9, .3, 1);
}

:root:root .chat-page .chat-shutter {
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .8),
    inset 0 6px 8px -3px rgba(0, 0, 0, .6),
    inset 0 0 10px 2px rgba(0, 0, 0, .34),
    inset 3px 0 6px -2px rgba(0, 0, 0, .4),
    inset -3px 0 6px -2px rgba(0, 0, 0, .36),
    inset 0 -3px 6px -2px rgba(0, 0, 0, .38);
}

:root:root .chat-page .chat-shutter > span {
  position: absolute;
  inset: 0;
  
  
  background-image:
    var(--metal-grain),
    linear-gradient(180deg,
      rgba(0, 0, 0, .5)        0px,
      rgba(0, 0, 0, .5)        1px,
      rgba(255, 255, 255, .3)  1px,
      rgba(255, 255, 255, .3)  3px,
      rgba(255, 255, 255, .04) 3px,
      rgba(255, 255, 255, .04) 11px,
      rgba(0, 0, 0, .2)       11px,
      rgba(0, 0, 0, .2)       15px);
  background-size: auto, 100% 15px;
  background-position: 0 0, 0 100%;
  background-repeat: repeat, repeat;
  background-color: var(--metal);
  background-blend-mode: soft-light, overlay, normal;
}
:root:root .chat-page .local-chat-section:not(:has(.collapsible-content.active)) .chat-shutter {
  transform: translateY(0);
}


:root:root .chat-page .local-chat-section .chat-pull {
  position: absolute;
  top: 0;
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
  
  z-index: 3;
  pointer-events: auto;
  width: 46px;
  height: 13px;
  padding: 0;
  border: 1px solid var(--metal-edge);
  border-top: none;
  border-radius: 0 0 5px 5px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M7 3.4l5 4.2 5-4.2' fill='none' stroke='%23ffffff' stroke-opacity='.9' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' transform='translate(0,1.2)'/%3E%3Cpath d='M7 3.4l5 4.2 5-4.2' fill='none' stroke='%23000000' stroke-opacity='.5' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    var(--lateral);
  background-repeat: no-repeat;
  background-position: center 1px, 0 0;
  background-size: 19px 10px, auto;
  background-color: var(--metal-light);
  box-shadow:
    inset 0 -1px 0 var(--metal-hi),
    inset 0 2px 3px rgba(0, 0, 0, .18),
    0 2px 4px rgba(0, 0, 0, .35);
  cursor: pointer;
  transition: top .34s cubic-bezier(.22, .9, .3, 1), filter .15s ease;
}
:root:root .chat-page .local-chat-section .chat-pull:hover { filter: brightness(1.1); }
:root:root .chat-page .local-chat-section:not(:has(.collapsible-content.active)) .chat-pull {
  top: 100%;
}

/* The chevron points where the cover is going: down when it is stowed and
   about to come, up when it is down and about to lift. */
:root:root .chat-page .local-chat-section:has(.collapsible-content.active) .chat-pull {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M7 3.4l5 4.2 5-4.2' fill='none' stroke='%23ffffff' stroke-opacity='.9' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' transform='translate(0,1.2)'/%3E%3Cpath d='M7 3.4l5 4.2 5-4.2' fill='none' stroke='%23000000' stroke-opacity='.5' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    var(--lateral);
  background-repeat: no-repeat;
  background-position: center 1px, 0 0;
  background-size: 19px 10px, auto;
}
:root:root .chat-page .local-chat-section:not(:has(.collapsible-content.active)) .chat-pull {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M7 8.6l5-4.2 5 4.2' fill='none' stroke='%23ffffff' stroke-opacity='.9' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round' transform='translate(0,1.2)'/%3E%3Cpath d='M7 8.6l5-4.2 5 4.2' fill='none' stroke='%23000000' stroke-opacity='.5' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    var(--lateral);
  background-repeat: no-repeat;
  background-position: center 1px, 0 0;
  background-size: 19px 10px, auto;
}

/* The chat header is permanently the top of a plate, so only its top corners
   are ever round - all.css rounds all four whenever .closed is set. */
:root:root .chat-page .local-chat-section .collapsible-header,
:root:root .chat-page .local-chat-section.closed .collapsible-header {
  border-radius: var(--round) var(--round) 0 0;
  border: none;
  border-bottom: 1px solid var(--metal-edge);
}
:root:root .chat-page .local-chat-section.closed,
:root:root .chat-page .local-chat-section.closed > .collapsible-section {
  height: 100%;
  align-self: stretch;
  flex-grow: 1;
}

@media (prefers-reduced-motion: reduce) {
  :root:root .chat-page .chat-shutter,
  :root:root .chat-page .chat-pull {
    transition: none !important;
  }
}

/* ==========================================================================
   SHADOWS: SHORTER, HARDER, DARKER
   ==========================================================================
   Everything was casting long soft shadows, which reads as a soft studio
   light and undercuts the whole panel idea. Real equipment under a hard lamp
   throws a short, dark, well-defined shadow - so the blur radii come down,
   the offsets stay small and the alphas go up.
   ========================================================================== */

:root {
  --lift-1: 0 1px 0 rgba(0, 0, 0, .55), 0 2px 2px rgba(0, 0, 0, .45);
  --lift-2: 0 2px 0 rgba(0, 0, 0, .6),  0 3px 4px rgba(0, 0, 0, .5);
  --lift-3: 0 3px 0 rgba(0, 0, 0, .65), 0 5px 7px rgba(0, 0, 0, .55);
}

:root:root .chat-page .collapsible-section,
:root:root .chat-page .local-chat-section {
  box-shadow:
    inset 0 1px 0 var(--metal-hi),
    inset 0 -1px 0 rgba(0, 0, 0, .5),
    inset 1px 0 0 rgba(255, 255, 255, .10),
    inset -1px 0 0 rgba(0, 0, 0, .3),
    0 2px 0 rgba(0, 0, 0, .55),
    0 3px 4px rgba(0, 0, 0, .5);
}

:root:root .chat-page .video-grid > .video-wrapper {
  box-shadow:
    inset 0 2px 0 var(--metal-hi),
    inset 0 -2px 0 rgba(0, 0, 0, .55),
    inset 2px 0 0 rgba(255, 255, 255, .09),
    inset -2px 0 0 rgba(0, 0, 0, .3),
    0 3px 0 rgba(0, 0, 0, .6),
    0 5px 6px rgba(0, 0, 0, .5);
}

:root:root .chat-page .video-slot {
  box-shadow:
    0 0 0 2px var(--metal-dark),
    0 0 0 4px var(--metal-light),
    0 0 0 5px var(--metal-edge),
    0 2px 3px 5px rgba(0, 0, 0, .45);
}

/* ==========================================================================
   CAMERA FRAMES: SPUN FINISH
   ==========================================================================
   Concentric rings rather than the straight brushing everywhere else, and a
   shade darker. Two machining passes on two different parts, which is what
   stops the page reading as one continuous sheet. Kept faint - at strength it
   moires against the pixel grid.
   ========================================================================== */

:root {
  --spun: repeating-radial-gradient(circle at 50% 45%,
    rgba(255, 255, 255, .10) 0px,
    rgba(255, 255, 255, .10) 1.5px,
    rgba(0, 0, 0, .10)       1.5px,
    rgba(0, 0, 0, .10)       3px);
}

:root:root .chat-page .video-grid > .video-wrapper {
  background-image: var(--spun), var(--surface-img);
  background-blend-mode: soft-light, var(--surface-blend);
  background-color: var(--metal-frame);
}

/* ==========================================================================
   PANEL INSERTS
   ==========================================================================
   The contents sit in a recessed insert with a flat field, the same
   relationship the screens have with their frames - text on a flat surface
   rather than a striped one.

   The gap around it is a transparent border, not a margin: a grid row sized
   with 1fr does not account for its item's margins, so with a margin the
   insert hung past the bottom of the panel meant to contain it.
   ========================================================================== */

:root:root .chat-page .left-column .buddy-inner,
:root:root .chat-page .left-column .cosmetics-inner,
:root:root .chat-page .left-column .settings-inner {
  background: var(--inset);
  background-clip: padding-box;
  border: 9px solid transparent;
  border-bottom-width: 12px;
  border-radius: var(--round-sm);
  margin: 0;
  padding: 12px;
  
  box-shadow:
    inset 0 0 0 1px var(--inset-edge),
    inset 0 3px 7px -2px rgba(0, 0, 0, .6);
}



:root:root .chat-page #sendChatBtn,
:root:root .chat-page #buddyBtn,
:root:root .chat-page #saveCosmeticsBtn,
:root:root .chat-page #leaveBuddyBtn,
:root:root .chat-page .chat-input-row button,
:root:root .chat-page .buddy-input-row button {
  position: relative;
  border: none;
  border-radius: 5px;
  overflow: visible;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, .55) 0%,
      rgba(255, 255, 255, .12) 42%,
      rgba(0, 0, 0, .06) 58%,
      rgba(0, 0, 0, .14) 100%),
    var(--keycap, var(--metal-light));
  color: var(--keycap-ink, #55595c);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-shadow:
    0 -1px 0 rgba(0, 0, 0, .32),
    0  1px 0 rgba(255, 255, 255, .95);
  box-shadow:
    inset  1px  1px 0 rgba(255, 255, 255, .95),
    inset -1px -1px 0 rgba(0, 0, 0, .45),
    0 4px 0 var(--metal-dark),
    0 5px 3px rgba(0, 0, 0, .5);
  transition: transform .06s linear, box-shadow .06s linear, filter .12s ease;
}
:root:root .chat-page #sendChatBtn::before,
:root:root .chat-page #buddyBtn::before,
:root:root .chat-page #saveCosmeticsBtn::before,
:root:root .chat-page #leaveBuddyBtn::before { display: none; }

:root:root .chat-page #sendChatBtn:hover,
:root:root .chat-page #buddyBtn:hover,
:root:root .chat-page #saveCosmeticsBtn:hover,
:root:root .chat-page #leaveBuddyBtn:hover { filter: brightness(1.06); transform: none; }

:root:root .chat-page #sendChatBtn:active,
:root:root .chat-page #buddyBtn:active,
:root:root .chat-page #saveCosmeticsBtn:active,
:root:root .chat-page #leaveBuddyBtn:active {
  transform: translateY(4px);
  box-shadow:
    inset  1px  1px 0 rgba(255, 255, 255, .6),
    inset -1px -1px 0 rgba(0, 0, 0, .45),
    inset  0 2px 5px rgba(0, 0, 0, .35),
    0 0 0 var(--metal-dark),
    0 1px 2px rgba(0, 0, 0, .35);
}

:root:root .chat-page #saveCosmeticsBtn { --keycap: #d8ecd6; --keycap-ink: #2e5730; }
:root:root .chat-page #leaveBuddyBtn    { --keycap: #f2d3cd; --keycap-ink: #7a4f46; }


:root:root .chat-page #sendChatBtn img,
:root:root .chat-page #buddyBtn img {
  filter:
    brightness(0) saturate(100%) invert(32%) sepia(8%) saturate(420%) hue-rotate(165deg)
    drop-shadow(0 1px 0 rgba(255, 255, 255, .95));
}


:root:root .chat-page .chat-input-row button,
:root:root .chat-page .buddy-input-row button {
  width: 34px;
  height: 32px;
  border-radius: 5px;
}



:root:root .chat-page input[type="text"],
:root:root .chat-page input[type="password"],
:root:root .chat-page textarea,
:root:root .chat-page .chat-input-row input[type="text"],
:root:root .chat-page .buddy-input-row input[type="text"] {
  border: none;
  border-radius: 5px;
  background: var(--screen);
  color: var(--acc-mint);
  padding: 8px 12px;
  box-shadow:
    inset  1px  1px 0 rgba(0, 0, 0, .9),
    inset -1px -1px 0 rgba(255, 255, 255, .28),
    inset  0 2px 5px rgba(0, 0, 0, .8);
}
:root:root .chat-page input[type="text"]:focus,
:root:root .chat-page textarea:focus {
  outline: none;
  box-shadow:
    inset  1px  1px 0 rgba(0, 0, 0, .9),
    inset -1px -1px 0 rgba(255, 255, 255, .28),
    inset  0 2px 5px rgba(0, 0, 0, .8),
    0 0 0 2px color-mix(in srgb, var(--acc-mint) 45%, transparent);
}

:root:root .chat-page select {
  border: none;
  border-radius: 5px;
  background: var(--screen);
  box-shadow:
    inset  1px  1px 0 rgba(0, 0, 0, .9),
    inset -1px -1px 0 rgba(255, 255, 255, .28),
    inset  0 2px 5px rgba(0, 0, 0, .8);
}



:root {

  

  
  --spun: repeating-radial-gradient(circle at 50% 45%,
    rgba(255, 255, 255, .05) 0px,
    rgba(255, 255, 255, 0)   1px,
    rgba(0, 0, 0, .05)       2px,
    rgba(0, 0, 0, 0)         3px,
    rgba(255, 255, 255, .05) 4px);
  --spun-size: auto;

  --spun-img:   var(--spun);
  --spun-blend: soft-light;
}

:root:root .chat-page .video-grid > .video-wrapper {
  background-image: var(--spun-img), var(--surface-img);
  background-size: var(--spun-size), auto;
  background-blend-mode: var(--spun-blend), var(--surface-blend);
  background-color: var(--metal-frame);
}



:root:root .chat-page .video-grid > .video-wrapper::after {
  background-image: var(--spun-img),
    linear-gradient(180deg,
      var(--metal-light) 0 calc(10% - 1.5px),
      var(--metal-dark)  calc(10% - 1.5px) calc(10% + 1.5px),
      var(--metal-light) calc(10% + 1.5px) calc(20% - 1.5px),
      var(--metal-dark)  calc(20% - 1.5px) calc(20% + 1.5px),
      var(--metal-light) calc(20% + 1.5px) calc(30% - 1.5px),
      var(--metal-dark)  calc(30% - 1.5px) calc(30% + 1.5px),
      var(--metal-light) calc(30% + 1.5px) calc(40% - 1.5px),
      var(--metal-dark)  calc(40% - 1.5px) calc(40% + 1.5px),
      var(--metal-light) calc(40% + 1.5px) calc(50% - 1.5px),
      var(--metal-dark)  calc(50% - 1.5px) calc(50% + 1.5px),
      var(--metal-light) calc(50% + 1.5px) calc(60% - 1.5px),
      var(--metal-dark)  calc(60% - 1.5px) calc(60% + 1.5px),
      var(--metal-light) calc(60% + 1.5px) calc(70% - 1.5px),
      var(--metal-dark)  calc(70% - 1.5px) calc(70% + 1.5px),
      var(--metal-light) calc(70% + 1.5px) calc(80% - 1.5px),
      var(--metal-dark)  calc(80% - 1.5px) calc(80% + 1.5px),
      var(--metal-light) calc(80% + 1.5px) calc(90% - 1.5px),
      var(--metal-dark)  calc(90% - 1.5px) calc(90% + 1.5px),
      var(--metal-light) calc(90% + 1.5px) 100%);
  background-size: var(--spun-size), auto;
  background-blend-mode: var(--spun-blend), normal;
  background-color: var(--metal-frame);
}


:root:root .chat-page .video-grid > .video-wrapper.right-video::after {
  left: auto;
  right: -3px;
  box-shadow:
    inset 0 1px 0 var(--metal-hi),
    inset 1px 0 0 rgba(0, 0, 0, .4),
    0 2px 5px rgba(0, 0, 0, .5);
}




@media (min-width: 900px) {
  :root:root .chat-page {
    --rail-h: 64px;
  }

  
  :root:root .chat-page:not(.streamer) .buttons-container {
    min-height: var(--rail-h);
  }

  :root:root .chat-page .chat-input-row {
    height: calc(var(--rail-h) - 1px);
    box-sizing: border-box;
  }
}



:root:root .chat-page .chat-input-row,
:root:root .chat-page .buddy-input-row {
  align-items: center;
}
:root:root .chat-page .chat-input-row input[type="text"],
:root:root .chat-page .buddy-input-row input[type="text"],
:root:root .chat-page .chat-input-row button,
:root:root .chat-page .buddy-input-row button {
  height: 32px;
  box-sizing: border-box;
  align-self: center;
  margin: 0;
  vertical-align: middle;
}
:root:root .chat-page .chat-input-row input[type="text"],
:root:root .chat-page .buddy-input-row input[type="text"] {
  padding: 0 12px;
  line-height: 30px;
}



:root:root .chat-page .nameLabel {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, .95),
    0 0 6px rgba(0, 0, 0, .85),
    0 0 14px rgba(0, 0, 0, .5);
}



:root:root .chat-page .glow-swatches {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 2px 0 4px;
}

:root:root .chat-page .glow-swatch {
  position: relative;
  height: 26px;
  padding: 0;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(0, 0, 0, .16)),
    var(--sw, var(--metal-light));
  box-shadow:
    inset  1px  1px 0 rgba(255, 255, 255, .85),
    inset -1px -1px 0 rgba(0, 0, 0, .5),
    0 3px 0 var(--metal-dark),
    0 4px 3px rgba(0, 0, 0, .45);
  transition: transform .06s linear, box-shadow .06s linear;
}
:root:root .chat-page .glow-swatch:active,
:root:root .chat-page .glow-swatch.selected {
  transform: translateY(3px);
  box-shadow:
    inset  1px  1px 0 rgba(255, 255, 255, .5),
    inset -1px -1px 0 rgba(0, 0, 0, .5),
    inset  0 2px 4px rgba(0, 0, 0, .4),
    0 0 0 var(--metal-dark),
    0 1px 2px rgba(0, 0, 0, .3);
}

:root:root .chat-page .glow-swatch.selected::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5);
}


:root:root .chat-page .glow-swatch.is-off {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(0, 0, 0, .16)),
    var(--metal-light);
}
:root:root .chat-page .glow-swatch.is-off::before {
  content: "";
  position: absolute;
  left: 5px; right: 5px; top: 50%;
  height: 2px;
  transform: translateY(-50%) rotate(-20deg);
  background: var(--metal-dark);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8);
  border-radius: 2px;
}

:root:root .chat-page .glowPreviewText {
  display: block;
  text-align: center;
  padding-bottom: 4px;
}




:root {
}




:root:root .chat-page .tile-bar,
:root:root .chat-page .nameLabel {
  overflow: visible;
}
:root:root .chat-page .nameLabel {
  line-height: 1.6;
  padding: 2px 0;
}




:root:root .chat-page .chat-input-row,
:root:root .chat-page .buddy-input-row {
  align-items: flex-start;
}
:root:root .chat-page .chat-input-row button,
:root:root .chat-page .buddy-input-row button {
  height: 30px;                 
  margin-bottom: 4px;           
  overflow: visible;
}
:root:root .chat-page .chat-input-row input[type="text"],
:root:root .chat-page .buddy-input-row input[type="text"] {
  height: 34px;                 
  line-height: 32px;
  padding: 0 12px;
  box-sizing: border-box;
}



:root:root .chat-page .glow-swatches {
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
:root:root .chat-page .glow-swatch { height: 22px; }



:root:root .chat-page .chat-line {
  display: grid;
  grid-template-columns: 22px 1fr;
  column-gap: 8px;
  align-items: start;
  padding: 3px 0;
}
:root:root .chat-page .chat-avatar {
  width: 22px;
  height: 22px;
  object-fit: cover;
  border-radius: 3px;
  cursor: pointer;
  align-self: start;
  border: 1px solid var(--metal-edge);
  box-shadow: inset 0 1px 0 var(--metal-hi), 0 1px 0 rgba(0, 0, 0, .5);
}
:root:root .chat-page .chat-avatar:hover { filter: brightness(1.15); }




:root:root .chat-page .video-slot video {
  object-position: center 35%;
}





:root {
  --tile-aspect: 1.48;   
  --fs-gap: clamp(10px, 1vw, 18px);

  
  --tile-gap: clamp(8px, 1vw, 20px);
}

@media (min-width: 900px) {
  :root:root .chat-page .video-grid > .video-wrapper {
    aspect-ratio: var(--tile-aspect);
    height: 100%;
    width: auto;
    max-width: 100%;
    justify-self: center;
    align-self: center;
  }
  :root:root .chat-page .video-grid {
    justify-items: center;
    align-items: center;
  }
}

:root:root .chat-page .video-slot video {
  object-fit: cover;
  
  object-position: center 38%;
  transform: none;
}

:root:root .chat-page #slot0 video { transform: scaleX(-1); }




:root:root .chat-page.streamer .video-grid {
  
  width: 100%;
  height: auto;
  aspect-ratio: var(--tile-aspect);
  max-height: 100%;
  max-width: 100%;
  margin: auto;
  justify-self: center;
  align-self: center;
  justify-items: stretch;
  align-items: stretch;
}
:root:root .chat-page.streamer .video-grid > .video-wrapper {
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;      
}

:root:root .chat-page.streamer .buttons-container,
:root:root .chat-page.streamer .top-bar {
  width: 100%;
}



@media (min-width: 900px) {
  :root:root .chat-page .main-content {
    grid-template-columns:
      clamp(150px, 14vw, 230px)
      minmax(0, 1fr)
      clamp(250px, 23vw, 430px);
  }

  :root:root .chat-page .video-grid {
    
    width: 100%;
    height: auto;
    aspect-ratio: var(--tile-aspect);
    max-height: 100%;
    max-width: 100%;
    margin: auto;
    justify-self: center;
    align-self: center;
  }

  
  :root:root .chat-page .video-grid > .video-wrapper {
    aspect-ratio: auto;
    width: 100%;
    height: 100%;
    max-width: none;
    justify-self: stretch;
    align-self: stretch;
  }
}



:root:root .chat-page.streamer .mobile-tabbar,
:root:root .chat-page.streamer .buttons-container,
:root:root .chat-page.streamer .mobile-control-bar {
  display: none !important;
}

:root:root .chat-page.streamer .main-content {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "camera";
  padding: clamp(10px, 1.4vw, 26px);
}



@media (min-width: 900px) {
  :root:root .chat-page.streamer .main-content {
    grid-template-columns: clamp(160px, 13vw, 215px) minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr);
    grid-template-areas:
      "ident    camera"
      "controls camera"
      "chat     camera"
      "panels   camera";
    gap: var(--fs-gap);
    padding: var(--fs-gap);
  }

  

  :root:root .chat-page.streamer .video-grid {
    grid-area: camera;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
    margin: 0;
    gap: var(--fs-gap);
  }
  :root:root .chat-page.streamer .video-grid > .video-wrapper {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    max-width: none;
  }

  

  :root:root .chat-page.streamer .top-bar {
    position: static;
    grid-area: ident;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    pointer-events: auto;
  }
  :root:root .chat-page.streamer .top-bar .top-left { display: block; flex: 1; }
  :root:root .chat-page.streamer .top-bar .user-info,
  :root:root .chat-page.streamer .top-bar .profile-picture-container { display: flex; }
  :root:root .chat-page.streamer .top-bar .top-right { flex: 0 0 auto; }
  :root:root .chat-page.streamer .theme-toggle { margin-right: 0; }

  

  :root:root .chat-page.streamer .buttons-container {
    display: flex !important;
    grid-area: controls;
    flex-direction: column;
    gap: 8px;
    align-self: start;
    padding: 8px;
    height: auto;
  }
  :root:root .chat-page.streamer .buttons-container .search-button {
    width: 100%;
    height: auto;
    padding: 11px 12px 12px;
  }

  

  
  :root:root .chat-page.streamer .local-chat-section {
    grid-area: chat;
    position: relative;
    height: auto;
    min-height: 0;
    flex-grow: 0;
    align-self: start;
    border-radius: var(--round) var(--round) 0 0;
    border-bottom: none;
    box-shadow:
      inset 0 1px 0 var(--metal-hi),
      inset 1px 0 0 rgba(255, 255, 255, .10),
      inset -1px 0 0 rgba(0, 0, 0, .3);
  }

  :root:root .chat-page.streamer .left-column {
    display: flex;
    flex-direction: column;
    grid-area: panels;
    min-height: 0;
    overflow: visible;
  }

  
  :root:root .chat-page.streamer .left-column .collapsible-section {
    display: block;
    margin: 0;
    border-radius: 0;
    border-top: none;
    box-shadow:
      inset 1px 0 0 rgba(255, 255, 255, .10),
      inset -1px 0 0 rgba(0, 0, 0, .3);
  }
  :root:root .chat-page.streamer .left-column .collapsible-section:last-of-type {
    border-radius: 0 0 var(--round) var(--round);
    box-shadow:
      inset 1px 0 0 rgba(255, 255, 255, .10),
      inset -1px 0 0 rgba(0, 0, 0, .3),
      inset 0 -1px 0 rgba(0, 0, 0, .5),
      0 2px 0 rgba(0, 0, 0, .55),
      0 3px 4px rgba(0, 0, 0, .5);
  }

  
  :root:root .chat-page.streamer .mobile-tabbar,
  :root:root .chat-page.streamer #mobilePanel {
    display: none !important;
  }

  

  :root:root .chat-page.streamer .left-column .footer {
    display: block;
    margin-top: auto;          
    padding-top: 14px;
    text-align: center;
  }
  :root:root .chat-page.streamer .footer .icons {
    display: flex;
    justify-content: center;
    gap: 14px;
    padding: 6px 0;
  }
  :root:root .chat-page.streamer .footer .policies {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }
}


@media (min-width: 900px) {
  :root:root .chat-page.streamer .local-chat-section {
    display: block !important;
  }

  
  :root:root .chat-page.streamer .chat-shutter-clip,
  :root:root .chat-page.streamer .chat-pull {
    display: none !important;
  }
  :root:root .chat-page.streamer .local-chat-section .collapsible-content {
    display: grid;
    grid-template-rows: minmax(0, 0fr);
    flex-grow: 0;
    max-height: none;
    overflow: hidden;
    transition: grid-template-rows .24s cubic-bezier(.22, .9, .3, 1);
  }
  :root:root .chat-page.streamer .local-chat-section .collapsible-content.active {
    grid-template-rows: minmax(0, 1fr);
  }
  :root:root .chat-page.streamer .local-chat-section .collapsible-content > * {
    min-height: 0;
    overflow: hidden;
  }
  
  :root:root .chat-page.streamer .local-chat-section #chatBox {
    max-height: 34dvh;
    overflow-y: auto;
  }
}


@media (min-width: 900px) {
  :root:root .chat-page.streamer .left-column {
    margin-top: calc(-1 * var(--fs-gap));
  }
}



@media (min-width: 900px) {
  
  :root:root .chat-page.streamer .local-chat-section .collapsible-content {
    display: flex;
    flex-direction: column;
    grid-template-rows: none;
    max-height: 0;
    overflow: hidden;
    flex-grow: 0;
    transition: max-height .24s cubic-bezier(.22, .9, .3, 1);
  }
  :root:root .chat-page.streamer .local-chat-section .collapsible-content.active {
    max-height: 46dvh;
  }
  
  :root:root .chat-page.streamer .local-chat-section #chatBox {
    min-height: 0 !important;
    max-height: 34dvh;
    overflow-y: auto;
  }

  
  :root:root .chat-page.streamer .shutter-pull,
  :root:root .chat-page.streamer .collapsible-header::after {
    display: none !important;
  }
}


html, body {
  margin: 0;
  padding: 0;
  border: 0;
  background-color: var(--page);
}
:root:root .chat-page.streamer {
  overflow: hidden;
}



@media (min-width: 900px) {
  
  :root:root .chat-page.streamer .local-chat-section .collapsible-header,
  :root:root .chat-page.streamer .left-column .collapsible-header {
    padding: 9px 26px;
    min-height: 0;
    line-height: 1.2;
  }
  :root:root .chat-page.streamer .local-chat-section .collapsible-header h3,
  :root:root .chat-page.streamer .left-column .collapsible-header h3 {
    margin: 0;
    line-height: 1.2;
  }

  
  :root:root .chat-page.streamer .local-chat-section .collapsible-content.active {
    max-height: 52dvh;
  }
  :root:root .chat-page.streamer .local-chat-section #chatBox {
    min-height: 180px !important;
    max-height: 38dvh;
    flex: 1 1 auto;
    overflow-y: auto;
  }
}




:root:root .chat-page.streamer .left-column {
  padding: 0 !important;
  margin-right: 0 !important;
  overflow: visible;
}
:root:root .chat-page.streamer .left-column .collapsible-section {
  margin: 0 !important;
}


:root:root .chat-page.streamer .local-chat-section .collapsible-content.active {
  max-height: 70dvh !important;
}
:root:root .chat-page.streamer .local-chat-section #chatBox {
  min-height: 340px !important;
  max-height: 56dvh !important;
}




:root:root .chat-page .buttons-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 1vw, 20px);
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}


:root:root .chat-page .local-chat-section {
  margin-bottom: 0;
  padding-bottom: 0;
}


:root:root .chat-page.streamer .left-column {
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  scrollbar-width: thin;
}
:root:root .chat-page.streamer .left-column::-webkit-scrollbar { width: 6px; }
:root:root .chat-page.streamer .left-column::-webkit-scrollbar-thumb {
  background: var(--metal-dark);
  border-radius: 3px;
}




:root:root .chat-page .video-slot { --tile-name: clamp(14px, 3.4cqi, 26px); }

:root:root .chat-page .nameLabel {
  font-size: var(--tile-name, clamp(14px, 3.4cqi, 26px));
  letter-spacing: .06em;
  text-shadow:
    0 2px 3px rgba(0, 0, 0, .95),
    0 0 8px rgba(0, 0, 0, .9),
    0 0 18px rgba(0, 0, 0, .6);
}





:root:root .chat-page.streamer .local-chat-section .collapsible-content {
  transition: max-height .26s var(--quick) !important;
}
:root:root .chat-page.streamer .local-chat-section .collapsible-content.active {
  transition: max-height .4s var(--settle) !important;
}

@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }

  :root:root .chat-page.streamer .local-chat-section .collapsible-content {
    max-height: none !important;
    height: 0;
    transition: height .26s var(--quick) !important;
  }
  :root:root .chat-page.streamer .local-chat-section .collapsible-content.active {
    max-height: none !important;
    height: auto;
    transition: height .4s var(--settle) !important;
  }
}


body::after { opacity: .24; }


:root {
  --lift-1: 0 2px 0 rgba(0, 0, 0, .65), 0 3px 3px rgba(0, 0, 0, .55);
  --lift-2: 0 3px 0 rgba(0, 0, 0, .7),  0 5px 6px rgba(0, 0, 0, .6);
  --lift-3: 0 4px 0 rgba(0, 0, 0, .75), 0 8px 10px rgba(0, 0, 0, .65);
}
:root:root .chat-page .collapsible-section,
:root:root .chat-page .local-chat-section {
  box-shadow:
    inset 0 1px 0 var(--metal-hi),
    inset 0 -1px 0 rgba(0, 0, 0, .5),
    inset 1px 0 0 rgba(255, 255, 255, .10),
    inset -1px 0 0 rgba(0, 0, 0, .3),
    0 3px 0 rgba(0, 0, 0, .7),
    0 5px 7px rgba(0, 0, 0, .6);
}
:root:root .chat-page .video-grid > .video-wrapper {
  box-shadow:
    inset 0 2px 0 var(--metal-hi),
    inset 0 -2px 0 rgba(0, 0, 0, .55),
    inset 2px 0 0 rgba(255, 255, 255, .09),
    inset -2px 0 0 rgba(0, 0, 0, .3),
    0 4px 0 rgba(0, 0, 0, .72),
    0 8px 10px rgba(0, 0, 0, .62);
}


:root:root .chat-page #startSkipBtn { --keycap: #a9d9a2; --keycap-ink: #1f4a22; }
:root:root .chat-page #stopBtn      { --keycap: #d4d0c8; --keycap-ink: #3d3a33; }
:root:root .chat-page #startSkipBtn .status-text { color: #1f4a22; }
:root:root .chat-page #stopBtn .status-text      { color: #3d3a33; }




:root:root .chat-page .mobile-badge::before { content: none; }
:root:root .chat-page .mobile-badge::after  { content: none; }


:root {
  
  --settle: linear(
    0 0%, 0.0098 4%, 0.0297 8%, 0.0569 12%, 0.0901 16%,
    0.1288 20%, 0.1724 24%, 0.2207 28%, 0.2732 32%, 0.3299 36%,
    0.3904 40%, 0.4548 44%, 0.5227 48%, 0.5941 52%, 0.6689 56%,
    0.747 60%, 0.8282 64%, 0.9126 68%, 1 72%, 0.9854 73.2727%,
    0.9767 74.5455%, 0.9728 75.8182%, 0.9727 77.0909%, 0.9753 78.3636%, 0.9794 79.6364%,
    0.9842 80.9091%, 0.9891 82.1818%, 0.9935 83.4545%, 0.9972 84.7273%, 1 86%,
    1 87.2727%, 1 88.5455%, 1 89.8182%, 1 91.0909%, 1 92.3636%,
    1 93.6364%, 1 94.9091%, 1 96.1818%, 1 97.4545%, 1 98.7273%,
    1 100%
  );
  --quick: cubic-bezier(.3, 0, .25, 1);
}


:root:root .chat-page .shutter {
  transform: translateY(-100%);
  animation: none;
  transition: transform .3s var(--quick);
}
:root:root .chat-page .shutter.closed {
  transform: translateY(0);
  transition: transform .46s var(--settle);
}


:root:root .chat-page .chat-shutter {
  transform: translateY(-100%);
  animation: none;
  transition: transform .3s var(--quick);
}
:root:root .chat-page .local-chat-section .chat-pull {
  animation: none;
  transition: top .3s var(--quick), filter .15s ease;
}
:root:root .chat-page .local-chat-section:not(:has(.collapsible-content.active)) .chat-shutter {
  transform: translateY(0);
  transition: transform .5s var(--settle);
}
:root:root .chat-page .local-chat-section:not(:has(.collapsible-content.active)) .chat-pull {
  animation: none;
  transition: top .5s var(--settle), filter .15s ease;
}


:root:root .chat-page .left-column .collapsible-content > *,
:root:root .chat-page .left-column .cosmetics .collapsible-content > *,
:root:root .chat-page .left-column .settings .collapsible-content > *,
:root:root .chat-page .left-column .buddy-system .collapsible-content > * {
  animation: none;
  transform: none;
  transition: none;
}
:root:root .chat-page .left-column .collapsible-content,
:root:root .chat-page .left-column .cosmetics .collapsible-content,
:root:root .chat-page .left-column .settings .collapsible-content,
:root:root .chat-page .left-column .buddy-system .collapsible-content {
  transition: grid-template-rows .26s var(--quick);
}
:root:root .chat-page .left-column .collapsible-content.active,
:root:root .chat-page .left-column .cosmetics .collapsible-content.active,
:root:root .chat-page .left-column .settings .collapsible-content.active,
:root:root .chat-page .left-column .buddy-system .collapsible-content.active {
  transition: grid-template-rows .4s var(--settle);
}

@media (prefers-reduced-motion: reduce) {
  :root { --settle: linear(0, 1); }
}



:root {
  --lift-1: 0 2px 3px rgba(0, 0, 0, .42), 0 4px 7px rgba(0, 0, 0, .3);
  --lift-2: 0 3px 5px rgba(0, 0, 0, .45), 0 6px 12px rgba(0, 0, 0, .34);
  --lift-3: 0 4px 8px rgba(0, 0, 0, .48), 0 10px 20px rgba(0, 0, 0, .38);
}
:root:root .chat-page .collapsible-section,
:root:root .chat-page .local-chat-section {
  box-shadow:
    inset 0 1px 0 var(--metal-hi),
    inset 0 -1px 0 rgba(0, 0, 0, .5),
    inset 1px 0 0 rgba(255, 255, 255, .10),
    inset -1px 0 0 rgba(0, 0, 0, .3),
    0 3px 5px rgba(0, 0, 0, .45),
    0 7px 13px rgba(0, 0, 0, .34);
}
:root:root .chat-page .video-grid > .video-wrapper {
  box-shadow:
    inset 0 2px 0 var(--metal-hi),
    inset 0 -2px 0 rgba(0, 0, 0, .55),
    inset 2px 0 0 rgba(255, 255, 255, .09),
    inset -2px 0 0 rgba(0, 0, 0, .3),
    0 4px 7px rgba(0, 0, 0, .48),
    0 9px 18px rgba(0, 0, 0, .36);
}



:root:root .chat-page .notification-badge,
:root:root .chat-page .mobile-badge {
  position: absolute;
  right: 12px;
  top: 50%;
  margin: 0;
  transform: translateY(-50%) rotate(-9deg);
  font-family: var(--font-etch);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0;
  color: color-mix(in srgb, var(--metal) 55%, #000);
  text-shadow:
    0 -1px 0 rgba(0, 0, 0, .5),
    0  1px 0 rgba(255, 255, 255, .55),
    0  1px 2px rgba(255, 255, 255, .3);
}



:root {
  
  --grain-fine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g' filterUnits='userSpaceOnUse' x='0' y='0' width='200' height='200' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='1' seed='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.16' intercept='0.42'/%3E%3CfeFuncG type='linear' slope='0.16' intercept='0.42'/%3E%3CfeFuncB type='linear' slope='0.16' intercept='0.42'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
}

body {
  background-image: var(--grain-fine);
  background-size: 200px 200px;
  background-repeat: repeat;
  background-attachment: fixed;
  background-blend-mode: overlay;
}

/* The old layer is dead weight now, and leaving it would double the grain the
   day someone fixes the blend. */
body::after { display: none; }

/* ==========================================================================
   THE BAND UNDER EACH HEADER
   ==========================================================================
   The plate is a 1px metal frame around the header (section 35px, header 33px,
   inset 1px on every side). The header was rounded 7px on top and square on
   the bottom, so at the bottom corners the frame had nothing rounded to follow
   - it squared off and read as a second box poking out past the curve.

   When the panel is closed the header IS the whole plate, so it should carry
   the curve on all four corners. 1px less radius than the frame, so the two
   arcs nest concentrically instead of one cutting the other.
   ========================================================================== */

/* Left column only. The chat is not one of these - its body stays put under
   a cover, so the plate below the header never goes away and a rounded bottom
   edge would sit over a square one. It was in this list, and this rule
   outranked the one meant to keep it square, which is why the chat header
   rounded off whenever the shutter came down. */
:root:root .chat-page .left-column .collapsible-section:not(:has(.collapsible-content.active)) .collapsible-header {
  border-radius: calc(var(--round) - 1px);
}

/* Open, the content below carries the bottom curve, so the header keeps its
   square bottom edge and the two meet flush. */
:root:root .chat-page .left-column .collapsible-section:has(.collapsible-content.active) .collapsible-header,
:root:root .chat-page .local-chat-section:has(.collapsible-content.active) .collapsible-header {
  border-radius: calc(var(--round) - 1px) calc(var(--round) - 1px) 0 0;
}
:root:root .chat-page .left-column .collapsible-content,
:root:root .chat-page .local-chat-section .collapsible-content {
  border-radius: 0 0 calc(var(--round) - 1px) calc(var(--round) - 1px);
}

/* ==========================================================================
   SHADOWS: HALF THE BLUR
   ========================================================================== */

:root {
  --lift-1: 0 2px 2px rgba(0, 0, 0, .42), 0 4px 4px rgba(0, 0, 0, .3);
  --lift-2: 0 3px 3px rgba(0, 0, 0, .45), 0 6px 6px rgba(0, 0, 0, .34);
  --lift-3: 0 4px 4px rgba(0, 0, 0, .48), 0 10px 10px rgba(0, 0, 0, .38);
}
:root:root .chat-page .collapsible-section,
:root:root .chat-page .local-chat-section {
  box-shadow:
    inset 0 1px 0 var(--metal-hi),
    inset 0 -1px 0 rgba(0, 0, 0, .5),
    inset 1px 0 0 rgba(255, 255, 255, .10),
    inset -1px 0 0 rgba(0, 0, 0, .3),
    0 3px 3px rgba(0, 0, 0, .45),
    0 7px 7px rgba(0, 0, 0, .34);
}
:root:root .chat-page .video-grid > .video-wrapper {
  box-shadow:
    inset 0 2px 0 var(--metal-hi),
    inset 0 -2px 0 rgba(0, 0, 0, .55),
    inset 2px 0 0 rgba(255, 255, 255, .09),
    inset -2px 0 0 rgba(0, 0, 0, .3),
    0 4px 4px rgba(0, 0, 0, .48),
    0 9px 9px rgba(0, 0, 0, .36);
}

/* ==========================================================================
   THE PANELS ARE NOT SHUTTERS ANY MORE
   ==========================================================================
   The slat face and the leading rail were doing the same job as the roll
   animation, and between them the left column was reading as three shutters
   stacked on top of each other. The motion carries the idea on its own.

   What is left is the honest version of the same object: a metal box with a
   recessed panel dropped into it. The animation is untouched.
   ========================================================================== */

:root:root .chat-page .left-column .collapsible-content {
  background-image: var(--brushed);
  background-color: var(--metal);
  background-blend-mode: overlay;
  box-shadow: inset 0 4px 7px -5px rgba(0, 0, 0, .5);
}

/* The leading rail was the bottom edge of a shutter. There is no shutter. */
:root:root .chat-page .left-column .collapsible-content::after {
  content: none;
}

/*
 * The inner panel, sunk into the metal.
 *
 * The gap around it is a transparent border rather than a margin. A margin on
 * a grid item is not counted by a `1fr` track, which is what overflowed the
 * buddies panel by exactly its own margin last time. `background-clip:
 * padding-box` keeps the fill off the transparent border so the metal shows
 * through as a surround, and an inset shadow lands on the padding edge, which
 * is where the recess should read.
 */
:root:root .chat-page .left-column .buddy-inner,
:root:root .chat-page .left-column .cosmetics-inner,
:root:root .chat-page .left-column .settings-inner {
  border: 9px solid transparent;
  border-radius: 13px;
  background-clip: padding-box;
  background-color: var(--inset);
  background-image: linear-gradient(180deg, rgba(0, 0, 0, .18), rgba(255, 255, 255, .03));
  margin: 0;
  padding: 12px;

  /* The old rule drew this edge with `outline` + `outline-offset: -1px`, which
     worked while the gap was a 9px margin: the border box was the insert, so
     the outline sat on it. Swapping the margin for a transparent border grew
     the border box by 18px, and an outline follows the BORDER box - so it
     jumped outwards and traced the container instead, carrying the insert's
     13px corners onto a container that is square on top and 7px at the bottom.
     That mismatch was the stray rounded line. The inset ring below draws the
     same edge on the padding box, which is where the insert actually is. */
  outline: none;
  box-shadow:
    inset 0 0 0 1px var(--inset-edge),
    inset 0 3px 6px -2px rgba(0, 0, 0, .8),
    inset 0 -1px 0 rgba(255, 255, 255, .07);
}



:root:root .chat-page .notification-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: static;
  vertical-align: middle;
  margin: 0 0 1px 9px;
  min-width: 29px;
  height: 15px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 2px;
  border: 1px solid var(--screen-edge);

  font-family: var(--font-led);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .04em;
  text-align: center;
  transform: none;

  
  color: var(--acc-amber);
  text-shadow: 0 0 2px rgba(255, 194, 71, .95), 0 0 6px rgba(255, 194, 71, .6);
  background-color: var(--screen);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(0, 0, 0, .45)),
    repeating-linear-gradient(180deg,
      rgba(255, 255, 255, .04) 0 1px,
      rgba(0, 0, 0, 0)         1px 2px);

  box-shadow:
    
    inset 0 2px 3px rgba(0, 0, 0, .9),
    inset 0 -1px 0 rgba(255, 255, 255, .10),
    
    0 1px 0 var(--metal-hi),
    0 -1px 0 rgba(0, 0, 0, .5);
}
:root:root .chat-page .notification-badge::before,
:root:root .chat-page .notification-badge::after { content: none; }


:root:root .chat-page .mobile-badge {
  font-family: var(--font-ui);
  transform: none;
  text-shadow: none;
  color: var(--acc-ink);
}
:root:root .chat-page .mobile-badge[data-count="0"] { display: none; }


:root:root .chat-page .left-column .collapsible-header,
:root:root .chat-page .local-chat-section .collapsible-header {
  padding-left: 30px;
  padding-right: 30px;
}



:root:root .chat-page .left-column .collapsible-section:not(:has(.collapsible-content.active)) .collapsible-header {
  transition: border-radius 0s linear .26s;
}
:root:root .chat-page .left-column .collapsible-section:has(.collapsible-content.active) .collapsible-header {
  transition: border-radius 0s linear 0s;
}


:root:root .chat-page:not(.streamer) .local-chat-section .collapsible-header {
  border-radius: calc(var(--round) - 1px) calc(var(--round) - 1px) 0 0;
}

:root:root .chat-page.streamer .local-chat-section:not(:has(.collapsible-content.active)) .collapsible-header {
  border-radius: calc(var(--round) - 1px);
  transition: border-radius 0s linear .3s;
}
:root:root .chat-page.streamer .local-chat-section:has(.collapsible-content.active) .collapsible-header {
  transition: border-radius 0s linear 0s;
}


:root:root .chat-page #chatBox .chat-system {
  display: block;
  margin: 6px 4px;
  padding: 6px 9px;
  border: 1px solid var(--screen-edge);
  border-left: 3px solid var(--acc-amber);
  border-radius: 3px;
  background: rgba(0, 0, 0, .45);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .7);
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: .02em;
  color: var(--acc-amber);
  text-shadow: 0 0 6px rgba(255, 194, 71, .35);
}





:root:root .chat-page .collapsible-header .header-label {
  position: relative;
  display: inline-block;
}
:root:root .chat-page .notification-badge {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 0 0 9px;
}



:root {
  --receipt-w: 320px;
  --paper: #f4f1e8;
  --paper-2: #e6e2d6;
  --paper-ink: #1b1a17;
  --paper-faint: #6d6a61;
}


:root:root .chat-page .printer {
  flex: 1 1 auto;      
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin: 10px 0 6px;
  min-width: 0;
}

:root:root .chat-page .printer-head {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--metal-edge);
  border-radius: calc(var(--round) - 1px);
  background-color: var(--metal);
  background-image: var(--lateral), var(--brushed);
  background-blend-mode: normal, overlay;
  box-shadow:
    inset 0 1px 0 var(--metal-hi),
    inset 0 -1px 0 rgba(0, 0, 0, .5),
    0 3px 3px rgba(0, 0, 0, .45),
    0 7px 7px rgba(0, 0, 0, .34);
}

:root:root .chat-page .printer-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 255, 255, .18);
}


:root:root .chat-page .printer-lamp {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--inset);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .9);
  transition: background .2s ease, box-shadow .2s ease;
}
:root:root .chat-page .printer:has(.receipt-roll) .printer-lamp {
  background: var(--led-on);
  box-shadow: 0 0 5px var(--led-on), inset 0 1px 1px rgba(255, 255, 255, .5);
}


:root:root .chat-page .printer-slot {
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: -1px;
  height: 3px;
  border-radius: 1px;
  background: var(--screen);
  box-shadow: inset 0 1px 2px #000, 0 1px 0 rgba(255, 255, 255, .12);
}

:root:root .chat-page .notification-container,
:root:root .chat-page #notificationContainer {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  
  overflow: hidden;
  pointer-events: none;
}

:root:root .chat-page .receipt-roll {
  position: relative;
  pointer-events: auto;
  padding: 9px 13px 13px;
  color: var(--paper-ink);
  background-color: var(--paper);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(0, 0, 0, 0) 22%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 82%, rgba(0, 0, 0, .07)),
    var(--grain-fine);
  background-size: auto, auto, 200px 200px;
  
  background-blend-mode: normal, normal, soft-light;
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .01em;
  box-shadow: 0 3px 5px rgba(0, 0, 0, .45), 0 8px 14px rgba(0, 0, 0, .3);

  box-sizing: border-box;
  
  max-height: 100%;
  display: flex;
  flex-direction: column;

  
  --tooth: 7px;
  -webkit-mask:
    linear-gradient(#000 0 0) 0 0 / 100% calc(100% - var(--tooth)) no-repeat,
    conic-gradient(from 45deg at 50% 0, #0000 0 90deg, #000 0)
      0 100% / calc(var(--tooth) * 2) var(--tooth) repeat-x;
  mask:
    linear-gradient(#000 0 0) 0 0 / 100% calc(100% - var(--tooth)) no-repeat,
    conic-gradient(from 45deg at 50% 0, #0000 0 90deg, #000 0)
      0 100% / calc(var(--tooth) * 2) var(--tooth) repeat-x;

  animation: roll-feed .34s cubic-bezier(.25, .8, .35, 1) both;
}


@keyframes roll-feed {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}

:root:root .chat-page .printer .receipt-roll.roll-out {
  overflow: hidden;
  pointer-events: none;
  animation: none;
  
  padding-top: 0;
  padding-bottom: 0;
  min-height: 0;
  transition:
    height .42s cubic-bezier(.45, .03, .35, 1),
    padding-top .42s cubic-bezier(.45, .03, .35, 1),
    padding-bottom .42s cubic-bezier(.45, .03, .35, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root:root .chat-page .printer .receipt-roll.roll-out { transition: none; }
}

:root:root .chat-page .receipt-head {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .34em;
  text-indent: .34em;             
  padding-bottom: 5px;
  color: var(--paper-faint);
  flex: 0 0 auto;
}


:root:root .chat-page .roll-entries {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, .35) transparent;
}
:root:root .chat-page .roll-entries::-webkit-scrollbar { width: 5px; }
:root:root .chat-page .roll-entries::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .3);
  border-radius: 3px;
}




:root:root .chat-page .entry-slot {
  display: grid;
  grid-template-rows: minmax(0, 0fr);
  transition: grid-template-rows .3s cubic-bezier(.25, .8, .35, 1);
}
:root:root .chat-page .entry-slot.open { grid-template-rows: minmax(0, 1fr); }
:root:root .chat-page .entry-slot > * { min-height: 0; overflow: hidden; }

:root:root .chat-page .receipt-entry {
  position: relative;
  padding: 6px 22px 6px 2px;      
  border-top: 1px dashed rgba(0, 0, 0, .35);
}
:root:root .chat-page .entry-slot:first-child .receipt-entry { border-top: none; }

:root:root .chat-page .entry-text {
  text-align: center;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

:root:root .chat-page .entry-actions:empty { display: none; }
:root:root .chat-page .entry-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding-top: 7px;
}

:root:root .chat-page .entry-stamp {
  padding-top: 3px;
  text-align: center;
  font-size: 9px;
  letter-spacing: .12em;
  color: var(--paper-faint);
}



:root:root .chat-page .entry-close {
  position: absolute;
  top: 6px;
  right: 0;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 2px;
  background: none;
  color: var(--paper-faint);
  font: 700 13px/1 var(--font-ui);
  cursor: pointer;
}
:root:root .chat-page .entry-close:hover {
  background: rgba(0, 0, 0, .08);
  color: var(--paper-ink);
}

:root:root .chat-page .receipt-btn {
  padding: 4px 11px;
  border: 1px solid var(--paper-ink);
  border-radius: 2px;
  background: transparent;
  color: var(--paper-ink);
  font: 700 10px/1 var(--font-ui);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
:root:root .chat-page .receipt-btn:hover { background: var(--paper-ink); color: var(--paper); }
:root:root .chat-page .receipt-btn-quiet { border-color: rgba(0, 0, 0, .3); color: var(--paper-faint); }
:root:root .chat-page .receipt-btn-yes:hover { background: #1e6b2e; border-color: #1e6b2e; color: var(--paper); }
:root:root .chat-page .receipt-btn-no:hover  { background: #8f2020; border-color: #8f2020; color: var(--paper); }

:root:root .chat-page .receipt-input {
  flex: 1 1 100%;
  min-width: 0;
  padding: 5px 7px;
  border: 1px solid rgba(0, 0, 0, .45);
  border-radius: 2px;
  background: var(--paper-2);
  color: var(--paper-ink);
  font: 400 11px/1.3 var(--font-ui);
}
:root:root .chat-page .receipt-input:focus {
  outline: none;
  border-color: var(--paper-ink);
  background: #fff;
}
:root:root .chat-page .receipt-input::placeholder { color: var(--paper-faint); }

@media (prefers-reduced-motion: reduce) {
  :root:root .chat-page .receipt-roll,
  :root:root .chat-page .printer .receipt-roll.roll-out { animation: none; }
  :root:root .chat-page .entry-slot { transition: none; }
}




:root:root .chat-page .printer .receipt-roll {
  pointer-events: auto;
  margin-top: -2px;
  padding: 10px 11px 12px;
  border-radius: 0 0 2px 2px;
  font-size: 10px;
  animation: none;                 
}


:root:root .chat-page .printer .receipt-head { display: none; }

:root:root .chat-page .printer .roll-entries { overflow: visible; }

:root:root .chat-page .printer .receipt-entry {
  padding: 6px 18px 6px 2px;
  border-top: none;
  border-bottom: 1px dashed rgba(0, 0, 0, .35);
}

:root:root .chat-page .printer .entry-slot:last-child .receipt-entry {
  border-bottom: none;
}
:root:root .chat-page .printer .entry-text { font-size: 10px; line-height: 1.45; }
:root:root .chat-page .printer .entry-stamp { font-size: 8px; letter-spacing: .1em; }
:root:root .chat-page .printer .entry-close { top: 4px; width: 14px; height: 14px; font-size: 12px; }
:root:root .chat-page .printer .receipt-btn { padding: 3px 8px; font-size: 9px; }


@media (max-width: 899px) {
  :root:root .chat-page .printer { display: none; }
}


:root:root .chat-page.streamer .printer { flex: 0 0 auto; }
:root:root .chat-page.streamer #notificationContainer { height: 30dvh; }




:root:root .chat-page .printer { flex: 1 1 0; }
:root:root .chat-page .notification-container,
:root:root .chat-page #notificationContainer { flex: 1 1 0; }


:root:root .chat-page .printer-head {
  background-color: var(--metal-dark);
  background-image: var(--surface-img);
  background-blend-mode: var(--surface-blend);
}
:root:root .chat-page .printer-label { color: var(--muted); }


:root:root .chat-page .printer .receipt-roll {
  width: calc(100% - 22px);   
  margin: -3px auto 0;
  box-shadow:
    inset 0 4px 5px -4px rgba(0, 0, 0, .75),
    0 3px 5px rgba(0, 0, 0, .45),
    0 8px 14px rgba(0, 0, 0, .3);
}




:root:root .chat-page .printer-head {
  background-image: var(--spun-img), var(--surface-img);
  background-size: var(--spun-size), auto;
  background-blend-mode: var(--spun-blend), var(--surface-blend);
  background-color: var(--metal-dark);
}




:root:root .chat-page .printer-head {
  background-image: var(--surface-img);
  background-size: auto;
  background-blend-mode: var(--surface-blend);
  background-color: var(--metal-dark);
}


:root:root .chat-page .printer { flex: 1 0 auto; min-height: 0; }
:root:root .chat-page .notification-container,
:root:root .chat-page #notificationContainer {
  flex: 1 0 auto;
  overflow: visible;
}
:root:root .chat-page .printer .receipt-roll { max-height: none; }
:root:root .chat-page.streamer #notificationContainer { height: auto; }


:root:root .chat-page .printer-head { padding-bottom: 3px; }
:root:root .chat-page .printer-slot {
  height: 5px;
  bottom: -3px;
  z-index: 3;
}
:root:root .chat-page .printer .receipt-roll {
  margin-top: -13px;
  position: relative;
  z-index: 0;
}


:root:root .chat-page .entry-slot { overflow: hidden; }
:root:root .chat-page .entry-slot > .receipt-entry {
  align-self: end;               
  min-height: 0;
  overflow: visible;
}


:root:root .chat-page .entry-slot {
  display: block;
  position: relative;
  overflow: hidden;
  height: 0;
  grid-template-rows: none;
  transition: height .3s cubic-bezier(.25, .8, .35, 1);
}
:root:root .chat-page .entry-slot > .receipt-entry {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  align-self: auto;
}


:root:root .chat-page .entry-slot.settled { height: auto; }
:root:root .chat-page .entry-slot.settled > .receipt-entry { position: static; }


:root:root .chat-page .printer .receipt-roll { padding-top: 22px; }




:root:root .chat-page .printer-head { padding-bottom: 0; }
:root:root .chat-page .printer-slot {
  left: 12px;
  right: 12px;
  bottom: 2px;
  height: 4px;
  z-index: 3;
}

:root:root .chat-page .printer .receipt-roll {
  margin-top: -11px;
  padding-top: 20px;
}


:root:root .chat-page .receipt-roll {
  
  --tooth: 7px;
  -webkit-mask:
    linear-gradient(#000 0 0) 0 0 / 100% calc(100% - var(--tooth)) no-repeat,
    conic-gradient(from -45deg at 50% 100%, #000 0 90deg, #0000 0)
      0 100% / calc(var(--tooth) * 2) var(--tooth) repeat-x;
  mask:
    linear-gradient(#000 0 0) 0 0 / 100% calc(100% - var(--tooth)) no-repeat,
    conic-gradient(from -45deg at 50% 100%, #000 0 90deg, #0000 0)
      0 100% / calc(var(--tooth) * 2) var(--tooth) repeat-x;
}


:root:root .chat-page .left-column {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
:root:root .chat-page .left-column::-webkit-scrollbar {
  width: 0;
  height: 0;
}


:root:root .chat-page.streamer .left-column {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
:root:root .chat-page.streamer .left-column::-webkit-scrollbar {
  width: 0;
  height: 0;
}




:root:root .chat-page .printer { position: relative; }
:root:root .chat-page .printer-head { z-index: 1; }

:root:root .chat-page .printer-slot {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 20px;                 
  bottom: auto;
  height: 6px;
  z-index: 5;                
  border-radius: 1px;
  background: var(--screen);
  box-shadow:
    inset 0 2px 3px #000,
    inset 0 -1px 0 rgba(255, 255, 255, .07),
    0 1px 0 rgba(255, 255, 255, .13);
}

:root:root .chat-page #notificationContainer { position: relative; z-index: 2; }
:root:root .chat-page .printer .receipt-roll {
  margin-top: -6px;          
  padding-top: 16px;
}


:root:root .chat-page .printer .receipt-roll {
  box-shadow: inset 0 4px 5px -4px rgba(0, 0, 0, .75);
  filter:
    drop-shadow(0 2px 2px rgba(0, 0, 0, .4))
    drop-shadow(0 5px 6px rgba(0, 0, 0, .3));
}


:root:root .chat-page .printer .entry-slot:last-child .receipt-entry {
  border-bottom: 1px dashed rgba(0, 0, 0, .35);
}


:root:root .chat-page .printer .receipt-roll { width: calc(100% - 32px); }


:root:root .chat-page .printer-slot { top: 22px; height: 4px; }
:root:root .chat-page .printer .receipt-roll { margin-top: -4px; }


:root:root .chat-page .entry-slot.torn > .receipt-entry { visibility: hidden; }




:root:root .chat-page .printer .receipt-roll {
  
  background-image:
    
    linear-gradient(180deg, rgba(0, 0, 0, .34), rgba(0, 0, 0, 0) 20px),
    linear-gradient(180deg,
      rgba(255, 255, 255, 0) 10px,
      rgba(255, 255, 255, .55) 19px,
      rgba(255, 255, 255, 0) 28px),
    
    linear-gradient(90deg,
      rgba(0, 0, 0, .13) 0%,
      rgba(0, 0, 0, 0) 11%,
      rgba(255, 255, 255, .16) 46%,
      rgba(0, 0, 0, 0) 89%,
      rgba(0, 0, 0, .15) 100%),
    
    radial-gradient(72% 26% at 22% 34%, rgba(120, 104, 78, .07), rgba(0, 0, 0, 0) 70%),
    radial-gradient(48% 18% at 78% 71%, rgba(96, 88, 70, .06), rgba(0, 0, 0, 0) 70%),
    var(--grain-fine),
    var(--grain-fine);
  background-size: auto, auto, auto, auto, auto, 200px 200px, 47px 47px;
  background-blend-mode: multiply, overlay, normal, multiply, multiply, soft-light, overlay;
  filter:
    drop-shadow(0 3px 3px rgba(0, 0, 0, .5))
    drop-shadow(0 9px 11px rgba(0, 0, 0, .34));
}


:root:root .chat-page .printer .receipt-roll::before { content: none; }



:root:root .chat-page .printer .receipt-entry { padding: 8px 24px 8px 5px; }
:root:root .chat-page .printer .entry-text { font-size: 11.5px; line-height: 1.5; }
:root:root .chat-page .printer .entry-stamp { font-size: 9px; padding-top: 5px; }
:root:root .chat-page .printer .entry-actions { gap: 6px; padding-top: 9px; }


:root:root .chat-page .printer .receipt-btn,
:root:root .chat-page .printer .entry-close,
:root:root .chat-page .printer .receipt-input,
:root:root .chat-page .printer .entry-text,
:root:root .chat-page .printer .entry-stamp {
  text-shadow: none;
}
:root:root .chat-page .printer .receipt-btn::before,
:root:root .chat-page .printer .receipt-btn::after,
:root:root .chat-page .printer .entry-close::before,
:root:root .chat-page .printer .entry-close::after { content: none; }



:root:root .chat-page .printer .receipt-btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 6px 4px;
  font-size: 9px;
  letter-spacing: 0;
  border-radius: 2px;
  white-space: nowrap;
}

:root:root .chat-page .printer .receipt-input { flex: 1 1 100%; }

:root:root .chat-page .printer .entry-close {
  top: 5px;
  right: 1px;
  width: 19px;
  height: 19px;
  font-size: 15px;
  line-height: 1;
}

:root:root .chat-page .printer .receipt-input {
  font-size: 11px;
  padding: 6px 9px;
}



:root:root .chat-page.streamer .local-chat-section,
:root:root .chat-page.streamer .local-chat-section .collapsible-header {
  border-radius: calc(var(--round) - 1px) calc(var(--round) - 1px) 0 0;
}
:root:root .chat-page.streamer .buddy-system,
:root:root .chat-page.streamer .buddy-system .collapsible-header,
:root:root .chat-page.streamer .cosmetics,
:root:root .chat-page.streamer .cosmetics .collapsible-header {
  border-radius: 0;
}
:root:root .chat-page.streamer .settings {
  border-radius: 0 0 calc(var(--round) - 1px) calc(var(--round) - 1px);
}

:root:root .chat-page.streamer .settings .collapsible-header {
  border-radius: 0;
}
:root:root .chat-page.streamer .settings:not(:has(.collapsible-content.active)) .collapsible-header {
  border-radius: 0 0 calc(var(--round) - 1px) calc(var(--round) - 1px);
}
:root:root .chat-page.streamer .settings .collapsible-content {
  border-radius: 0 0 calc(var(--round) - 1px) calc(var(--round) - 1px);
}





:root {
  --cap-face-hi:   #f7f4ea;
  --cap-face-lo:   #dcd6c4;
  --cap-skirt-t:   #fffdf6;
  --cap-skirt-l:   #f1ecdc;
  --cap-skirt-r:   #b4ae9b;
  --cap-skirt-b:   #948e7b;
  --cap-outline:   #4b473a;
  --cap-house-hi:  #6a6555;
  --cap-house-lo:  #3a372d;
  --cap-ink:       #26251f;
}

:root:root .chat-page .key95 {
  position: relative;
  top: 0;
  transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 13px;
  box-sizing: border-box;

  
  border-style: solid;
  border-width: 4px 5px 6px 4px;
  border-top-color: var(--cap-skirt-t);
  border-left-color: var(--cap-skirt-l);
  border-right-color: var(--cap-skirt-r);
  border-bottom-color: var(--cap-skirt-b);
  border-radius: 4px;

  background-color: var(--cap-face-lo);
  background-image: linear-gradient(160deg, var(--cap-face-hi), var(--cap-face-lo));
  color: var(--cap-ink);
  font: 700 10px/1 var(--font-display);
  letter-spacing: .13em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .85);
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--cap-outline);
  transition: top .05s linear, border-width .05s linear;
}


:root:root .chat-page .key95::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 8px;
  pointer-events: none;
  background-image:
    radial-gradient(140% 90% at 50% -20%,
      rgba(255, 255, 255, .85) 0%,
      rgba(255, 255, 255, .28) 34%,
      rgba(255, 255, 255, 0) 62%),
    linear-gradient(180deg,
      rgba(255, 255, 255, .18) 0%,
      rgba(255, 255, 255, 0) 30%,
      rgba(0, 0, 0, .05) 72%,
      rgba(0, 0, 0, .16) 100%);
  box-shadow:
    inset 0 4px 5px -3px rgba(255, 255, 255, .95),
    inset 0 -5px 6px -4px rgba(0, 0, 0, .34),
    inset 4px 0 5px -4px rgba(255, 255, 255, .7),
    inset -4px 0 5px -4px rgba(0, 0, 0, .24);
}


:root:root .chat-page .key95::after {
  content: "";
  position: absolute;
  inset: -3px -3px -6px -3px;
  z-index: -1;
  border-radius: 5px;
  background-image: linear-gradient(180deg, var(--cap-house-hi), var(--cap-house-lo));
  box-shadow:
    inset 0 2px 3px -1px rgba(255, 255, 255, .22),
    inset 0 -3px 4px -2px rgba(0, 0, 0, .55),
    0 4px 6px rgba(0, 0, 0, .45),
    0 10px 16px rgba(0, 0, 0, .3);
}


:root:root .chat-page .key95 > * { position: relative; z-index: 1; }

:root:root .chat-page .key95:hover {
  background-color: #e4dfcf;
  background-image: linear-gradient(160deg, #fbf9f1, #e4dfcf);
}


:root:root .chat-page .key95:active,
:root:root .chat-page .key95.down {
  top: 4px;
  transform: none;
  border-width: 4px 5px 2px 4px;
  border-top-color: var(--cap-skirt-l);
  background-color: #d2ccba;
  background-image: linear-gradient(160deg, #e6e1d1, #d2ccba);
}
:root:root .chat-page .key95:active::before,
:root:root .chat-page .key95.down::before {
  background-image:
    radial-gradient(140% 90% at 50% 120%,
      rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, rgba(0, 0, 0, .14), rgba(0, 0, 0, 0) 45%);
  box-shadow:
    inset 0 5px 6px -3px rgba(0, 0, 0, .38),
    inset 0 -4px 5px -4px rgba(255, 255, 255, .7),
    inset 4px 0 5px -4px rgba(0, 0, 0, .18),
    inset -4px 0 5px -4px rgba(255, 255, 255, .35);
}
:root:root .chat-page .key95:active::after,
:root:root .chat-page .key95.down::after {
  inset: -3px -3px -2px -3px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    inset 0 2px 4px rgba(0, 0, 0, .5),
    0 1px 2px rgba(0, 0, 0, .5);
}


:root:root .chat-page .key95-led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6b665a;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .85), 0 1px 0 rgba(255, 255, 255, .75);
}
:root:root .chat-page .key95.down .key95-led {
  background: #ff4d43;
  box-shadow: 0 0 6px #ff4d43, inset 0 1px 1px rgba(255, 255, 255, .7);
}

:root:root .chat-page .audio-keys { display: flex; align-items: center; gap: 12px; }



:root:root .chat-page .key95-sm {
  gap: 0;
  padding: 4px 6px;
  border-width: 3px 4px 5px 3px;
  border-radius: 3px;
}
:root:root .chat-page .key95-sm::before { border-radius: 6px; }
:root:root .chat-page .key95-sm::after { inset: -2px -2px -5px -2px; border-radius: 4px; }
:root:root .chat-page .key95-sm:active,
:root:root .chat-page .key95-sm.down {
  top: 3px;
  transform: none;
  border-width: 3px 4px 2px 3px;
}
:root:root .chat-page .key95-sm:active::after,
:root:root .chat-page .key95-sm.down::after { inset: -2px -2px -2px -2px; }
:root:root .chat-page .key95-sm svg,
:root:root .chat-page .key95-sm svg path { fill: var(--cap-ink); }



:root:root .chat-page #startSkipBtn,
:root:root .chat-page #stopBtn,
:root:root .chat-page .buttons-container .search-button {
  position: relative;
  top: 0;
  transform: none;
  box-sizing: border-box;
  border-style: solid;
  border-width: 6px 7px 9px 6px;
  border-top-color: var(--cap-skirt-t);
  border-left-color: var(--cap-skirt-l);
  border-right-color: var(--cap-skirt-r);
  border-bottom-color: var(--cap-skirt-b);
  border-radius: 5px;
  background-color: var(--cap-face-lo);
  background-image: linear-gradient(160deg, var(--cap-face-hi), var(--cap-face-lo));
  color: var(--cap-ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .85);
  box-shadow: 0 0 0 1px var(--cap-outline);
  transition: top .05s linear, border-width .05s linear;
}
:root:root .chat-page #startSkipBtn {
  background-color: #a8cf9a;
  background-image: linear-gradient(160deg, #d9edcd, #a8cf9a);
}

:root:root .chat-page #startSkipBtn::before,
:root:root .chat-page #stopBtn::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 11px;
  pointer-events: none;
  background-image:
    radial-gradient(140% 90% at 50% -20%,
      rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .28) 34%,
      rgba(255, 255, 255, 0) 62%),
    linear-gradient(180deg,
      rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, 0) 30%,
      rgba(0, 0, 0, .05) 72%, rgba(0, 0, 0, .16) 100%);
  box-shadow:
    inset 0 4px 5px -3px rgba(255, 255, 255, .95),
    inset 0 -5px 6px -4px rgba(0, 0, 0, .34),
    inset 4px 0 5px -4px rgba(255, 255, 255, .7),
    inset -4px 0 5px -4px rgba(0, 0, 0, .24);
}
:root:root .chat-page #startSkipBtn::after,
:root:root .chat-page #stopBtn::after,
:root:root .chat-page .buttons-container .search-button::after {
  content: "";
  position: absolute;
  inset: -4px -4px -8px -4px;
  z-index: -1;
  border-radius: 7px;
  background-image: linear-gradient(180deg, var(--cap-house-hi), var(--cap-house-lo));
  box-shadow:
    inset 0 2px 3px -1px rgba(255, 255, 255, .22),
    inset 0 -3px 4px -2px rgba(0, 0, 0, .55),
    0 4px 6px rgba(0, 0, 0, .45),
    0 10px 16px rgba(0, 0, 0, .3);
}

:root:root .chat-page #startSkipBtn:active,
:root:root .chat-page #stopBtn:active,
:root:root .chat-page .buttons-container .search-button:active {
  top: 5px;
  transform: none;
  border-width: 6px 7px 4px 6px;
  border-top-color: var(--cap-skirt-l);
  background-color: #d2ccba;
  background-image: linear-gradient(160deg, #e6e1d1, #d2ccba);
}
:root:root .chat-page #startSkipBtn:active {
  background-color: #9cc48e;
  background-image: linear-gradient(160deg, #cbe6bd, #9cc48e);
}
:root:root .chat-page #startSkipBtn:active::after,
:root:root .chat-page #stopBtn:active::after,
:root:root .chat-page .buttons-container .search-button:active::after {
  inset: -4px -4px -3px -4px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .5);
}



:root:root .chat-page .buttons-container .search-button:hover,
:root:root .chat-page #stopBtn:hover {
  background-color: #e4dfcf;
  background-image: linear-gradient(160deg, #fdfbf4, #e7e2d2);
  filter: none;
  box-shadow: 0 0 0 1px var(--cap-outline);
}
:root:root .chat-page #startSkipBtn:hover {
  background-color: #a8cf9a;
  background-image: linear-gradient(160deg, #e2f3d8, #b0d6a2);
  filter: none;
  box-shadow: 0 0 0 1px var(--cap-outline);
}




:root:root .chat-page .tile-bar .volumeControl {
  position: relative;
  top: 0;
  transform: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 7px 4px 5px;
  box-sizing: border-box;
  border-style: solid;
  border-width: 3px 4px 5px 3px;
  border-top-color: var(--cap-skirt-t);
  border-left-color: var(--cap-skirt-l);
  border-right-color: var(--cap-skirt-r);
  border-bottom-color: var(--cap-skirt-b);
  border-radius: 3px;
  background-color: var(--cap-face-lo);
  background-image: linear-gradient(160deg, var(--cap-face-hi), var(--cap-face-lo));
  box-shadow: 0 0 0 1px var(--cap-outline);
}
:root:root .chat-page .tile-bar .volumeControl::after {
  content: "";
  position: absolute;
  inset: -2px -2px -5px -2px;
  z-index: -1;
  border-radius: 4px;
  background-image: linear-gradient(180deg, var(--cap-house-hi), var(--cap-house-lo));
  box-shadow:
    inset 0 2px 3px -1px rgba(255, 255, 255, .18),
    0 4px 6px rgba(0, 0, 0, .45),
    0 10px 16px rgba(0, 0, 0, .3);
}
:root:root .chat-page .tile-bar .volumeControl > * { position: relative; z-index: 1; }

:root:root .chat-page .tile-bar .volumeIcon { display: block; width: 13px; height: 13px; cursor: pointer; }
:root:root .chat-page .tile-bar .volumeIcon svg { display: block; width: 13px; height: 13px; }
:root:root .chat-page .tile-bar .volumeIcon svg path {
  fill: none;
  stroke: var(--cap-ink);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
:root:root .chat-page .tile-bar .volumeIcon svg .speaker-body { fill: var(--cap-ink); stroke-width: 1.2; }
:root:root .chat-page .tile-bar .volumeControl.silenced .volumeIcon svg path { stroke: #a32323; }
:root:root .chat-page .tile-bar .volumeControl.silenced .volumeIcon svg .speaker-body { fill: #a32323; }

:root:root .chat-page .tile-bar .volumeTrack {
  position: relative;
  width: 62px;
  height: 13px;
  border: 1px solid var(--screen-edge);
  border-radius: 2px;
  background-color: var(--screen);
  background-image: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, .05) 0 1px, rgba(0, 0, 0, 0) 1px 4px);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .95);
  cursor: pointer;
  touch-action: none;
}
:root:root .chat-page .tile-bar .volumeFill {
  position: absolute;
  inset: 1px;
  transform-origin: left center;
  transform: scaleX(1);
  border-radius: 1px;
  background: linear-gradient(180deg, #8dfba8, var(--led-on) 55%, #3ea355);
  box-shadow: 0 0 5px rgba(98, 232, 120, .75);
  transition: transform .09s linear, background .12s ease, box-shadow .12s ease;
}
:root:root .chat-page .tile-bar .volumeControl.silenced .volumeFill {
  background: linear-gradient(180deg, #ff8d8d, #c0342f 60%, #7d1f1c);
  box-shadow: 0 0 5px rgba(220, 70, 60, .7);
}


:root:root .chat-page .tile-bar { display: flex; align-items: center; gap: 8px; }
:root:root .chat-page .tile-bar .tile-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}




:root:root .chat-page .buttons-container {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  column-gap: var(--tile-gap);
}

:root:root .chat-page .buttons-container .search-button {
  min-width: 0;
}


:root:root .chat-page .buttons-container .search-button.latch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}


:root:root .chat-page .buttons-container .search-button.latch.down {
  top: 5px;
  transform: none;
  border-width: 6px 7px 4px 6px;
  border-top-color: var(--cap-skirt-l);
  background-color: #d2ccba;
  background-image: linear-gradient(160deg, #e6e1d1, #d2ccba);
}
:root:root .chat-page .buttons-container .search-button.latch.down::after {
  inset: -4px -4px -3px -4px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .5);
}
:root:root .chat-page .buttons-container .search-button.latch.down .key95-led {
  background: #ff4d43;
  box-shadow: 0 0 6px #ff4d43, inset 0 1px 1px rgba(255, 255, 255, .7);
}


@media (max-width: 899px) {
  :root:root .chat-page .buttons-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 9px;
  }
}


:root:root .chat-page .buttons-container .search-button:hover:active {
  background-color: #d2ccba;
  background-image: linear-gradient(160deg, #e6e1d1, #d2ccba);
}
:root:root .chat-page #startSkipBtn:hover:active {
  background-color: #9cc48e;
  background-image: linear-gradient(160deg, #cbe6bd, #9cc48e);
}





:root:root .chat-page .buttons-container .search-button:active,
:root:root .chat-page .buttons-container .search-button.latch.down,
:root:root .chat-page #startSkipBtn:active,
:root:root .chat-page #stopBtn:active {
  top: 5px;
  transform: none;
  margin-bottom: 0;
  border-width: 6px 7px 9px 6px;      
  border-top-color: var(--cap-skirt-l);
}

:root:root .chat-page .buttons-container .search-button:active::after,
:root:root .chat-page .buttons-container .search-button.latch.down::after,
:root:root .chat-page #startSkipBtn:active::after,
:root:root .chat-page #stopBtn:active::after {
  
  inset: -9px -4px -3px -4px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .5);
}



:root:root .chat-page.streamer .left-column .local-chat-section,
:root:root .chat-page.streamer .left-column .local-chat-section .collapsible-header,
:root:root .chat-page.streamer .local-chat-section,
:root:root .chat-page.streamer .local-chat-section .collapsible-header {
  border-radius: calc(var(--round) - 1px) calc(var(--round) - 1px) 0 0 !important;
}

:root:root .chat-page.streamer .buddy-system,
:root:root .chat-page.streamer .buddy-system .collapsible-header,
:root:root .chat-page.streamer .buddy-system .collapsible-content,
:root:root .chat-page.streamer .cosmetics,
:root:root .chat-page.streamer .cosmetics .collapsible-header,
:root:root .chat-page.streamer .cosmetics .collapsible-content,
:root:root .chat-page.streamer .local-chat-section .collapsible-content {
  border-radius: 0 !important;
}

:root:root .chat-page.streamer .settings,
:root:root .chat-page.streamer .settings .collapsible-content {
  border-radius: 0 0 calc(var(--round) - 1px) calc(var(--round) - 1px) !important;
}

:root:root .chat-page.streamer .settings .collapsible-header {
  border-radius: 0 !important;
}
:root:root .chat-page.streamer .settings:not(:has(.collapsible-content.active)) .collapsible-header {
  border-radius: 0 0 calc(var(--round) - 1px) calc(var(--round) - 1px) !important;
}




:root:root .chat-page .key95-sm::before { content: none; }


:root:root .chat-page .tile-bar .key95-sm {
  
  height: 28px;
  padding: 0 8px;
  border-width: 3px 4px 5px 3px;
  border-radius: 3px;
}


:root:root .chat-page .tile-bar .key95-sm svg {
  display: block;
  width: 14px;
  height: 14px;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, .85))
    drop-shadow(0 -1px 0 rgba(0, 0, 0, .3));
}
:root:root .chat-page .tile-bar .key95-sm svg path,
:root:root .chat-page .tile-bar .key95-sm svg g {
  fill: var(--cap-ink);
}
:root:root .chat-page .tile-bar .key95-sm:hover svg path,
:root:root .chat-page .tile-bar .key95-sm:hover svg g {
  fill: #14130f;
}




:root:root .chat-page .tile-bar .volumeControl {
  position: relative;
  top: 0;
  transform: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 6px;
  box-sizing: border-box;
  border-style: solid;
  border-width: 3px 4px 5px 3px;
  border-top-color: var(--cap-skirt-t);
  border-left-color: var(--cap-skirt-l);
  border-right-color: var(--cap-skirt-r);
  border-bottom-color: var(--cap-skirt-b);
  border-radius: 3px;
  background-color: var(--cap-face-lo);
  background-image: linear-gradient(160deg, var(--cap-face-hi), var(--cap-face-lo));
  box-shadow: 0 0 0 1px var(--cap-outline);
}
:root:root .chat-page .tile-bar .volumeControl::before { content: none; }
:root:root .chat-page .tile-bar .volumeControl::after {
  content: "";
  position: absolute;
  inset: -2px -2px -5px -2px;
  z-index: -1;
  border-radius: 4px;
  background-image: linear-gradient(180deg, var(--cap-house-hi), var(--cap-house-lo));
  box-shadow:
    inset 0 2px 3px -1px rgba(255, 255, 255, .18),
    0 4px 6px rgba(0, 0, 0, .45),
    0 10px 16px rgba(0, 0, 0, .3);
}
:root:root .chat-page .tile-bar .volumeControl > * { position: relative; z-index: 1; }


:root:root .chat-page .tile-bar .volumeTrack {
  position: relative;
  width: 74px;
  height: 14px;
  border: 1px solid #10161a;
  border-radius: 2px;
  background-color: #060a0c;
  background-image: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, .05) 0 1px, rgba(0, 0, 0, 0) 1px 4px);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, .95),
    0 1px 0 rgba(255, 255, 255, .55);
  cursor: pointer;
  touch-action: none;
  overflow: hidden;
  display: flex;
  align-items: center;
}


:root:root .chat-page .tile-bar .volumeFill {
  position: absolute;
  inset: 2px auto 2px 2px;
  width: calc(100% - 4px);
  transform-origin: left center;
  transform: scaleX(1);
  border-radius: 1px;
  background: linear-gradient(180deg, #b6ffc8, #62e878 48%, #2f9c47);
  box-shadow:
    0 0 6px rgba(98, 232, 120, .95),
    0 0 14px rgba(98, 232, 120, .55),
    inset 0 1px 0 rgba(255, 255, 255, .6);
  transition: transform .09s linear, background .12s ease, box-shadow .12s ease;
}
:root:root .chat-page .tile-bar .volumeControl.silenced .volumeFill {
  background: linear-gradient(180deg, #ffb0b0, #d8453d 55%, #8d221d);
  box-shadow: 0 0 6px rgba(216, 69, 61, .9), inset 0 1px 0 rgba(255, 255, 255, .5);
}


:root:root .chat-page .tile-bar .volumeIcon {
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: block;
  width: 13px;
  height: 13px;
  cursor: pointer;
}
:root:root .chat-page .tile-bar .volumeIcon svg { display: block; width: 13px; height: 13px; }
:root:root .chat-page .tile-bar .volumeIcon svg path {
  fill: none;
  stroke: #d8ffe2;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 3px rgba(98, 232, 120, .9));
}
:root:root .chat-page .tile-bar .volumeIcon svg .speaker-body {
  fill: #d8ffe2;
  stroke-width: 1.1;
}
:root:root .chat-page .tile-bar .volumeControl.silenced .volumeIcon svg path {
  stroke: #ffc9c6;
  filter: drop-shadow(0 0 3px rgba(216, 69, 61, .9));
}
:root:root .chat-page .tile-bar .volumeControl.silenced .volumeIcon svg .speaker-body { fill: #ffc9c6; }


:root:root .chat-page .tile-bar { display: flex; align-items: center; gap: 8px; }
:root:root .chat-page .tile-bar .tile-controls {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
}



:root:root .chat-page .tile-bar .key95-sm:hover,
:root:root .chat-page .tile-bar .key95-sm:active,
:root:root .chat-page .tile-bar .volumeControl:hover,
:root:root .chat-page .tile-bar .volumeControl:active {
  transform: none;
  filter: none;
  background-color: var(--cap-face-lo);
  background-image:
    linear-gradient(180deg, #fdfbf4, #e2ddcd),
    var(--cap-muck),
    var(--noise);
  background-size: auto, auto, 200px 200px;
  background-blend-mode: normal, multiply, soft-light;
}
:root:root .chat-page .tile-bar .key95-sm:active {
  top: 3px;
  border-width: 3px 4px 2px 3px;
}
:root:root .chat-page .tile-bar .key95-sm:active::after { inset: -5px -2px -2px -2px; }


:root:root .chat-page .tile-bar .key95-sm { height: 34px; padding: 0 11px; }
:root:root .chat-page .tile-bar .key95-sm svg { width: 17px; height: 17px; }
:root:root .chat-page .tile-bar .volumeControl { height: 34px; padding: 0 7px; }


:root:root .chat-page .tile-bar .tile-controls { gap: 16px; }


:root:root .chat-page .tile-bar .volumeTrack { width: 86px; height: 17px; }


:root:root .chat-page .tile-bar .volumeFill {
  inset: 2px auto 2px 2px;
  width: calc(100% - 30px);
}



:root {
  
  --cap-muck:
    radial-gradient(58% 42% at 32% 30%, rgba(120, 108, 82, .10), rgba(0, 0, 0, 0) 72%),
    radial-gradient(44% 34% at 74% 76%, rgba(96, 88, 68, .085), rgba(0, 0, 0, 0) 70%);
}

:root:root .chat-page .key95,
:root:root .chat-page .buttons-container .search-button,
:root:root .chat-page #startSkipBtn,
:root:root .chat-page #stopBtn,
:root:root .chat-page .tile-bar .key95-sm,
:root:root .chat-page .tile-bar .volumeControl {
  background-color: var(--cap-face-lo);
  background-image:
    linear-gradient(180deg, #fdfbf4 0%, var(--cap-face-hi) 38%, #d5cfbc 100%),
    var(--cap-muck),
    var(--noise);
  background-size: auto, auto, 200px 200px;
  background-blend-mode: normal, multiply, soft-light;
  box-shadow:
    0 0 0 1px var(--cap-outline),
    0 3px 4px rgba(0, 0, 0, .4),
    0 8px 12px rgba(0, 0, 0, .28);
}


:root:root .chat-page #startSkipBtn {
  background-color: #a8cf9a;
  background-image:
    linear-gradient(180deg, #e2f4d8 0%, #c3e3b4 38%, #93bd85 100%),
    var(--cap-muck),
    var(--noise);
}


:root:root .chat-page .buttons-container .search-button:active,
:root:root .chat-page .buttons-container .search-button.latch.down,
:root:root .chat-page #stopBtn:active {
  background-color: #d2ccba;
  background-image:
    linear-gradient(180deg, #e9e4d5 0%, #ddd7c6 38%, #c6c0ae 100%),
    var(--cap-muck),
    var(--noise);
}
:root:root .chat-page #startSkipBtn:active,
:root:root .chat-page #startSkipBtn:hover:active {
  background-color: #9cc48e;
  background-image:
    linear-gradient(180deg, #cfe8c2 0%, #b3d8a4 38%, #86ae78 100%),
    var(--cap-muck),
    var(--noise);
}


:root:root .chat-page .tile-bar .volumeControl { left: 0; right: auto; }


:root:root .chat-page .buttons-container .search-button:hover,
:root:root .chat-page #startSkipBtn:hover,
:root:root .chat-page #stopBtn:hover,
:root:root .chat-page .key95:hover {
  box-shadow:
    0 0 0 1px var(--cap-outline),
    0 3px 4px rgba(0, 0, 0, .4),
    0 8px 12px rgba(0, 0, 0, .28);
}
:root:root .chat-page .buttons-container .search-button:hover,
:root:root .chat-page #stopBtn:hover {
  background-color: #e6e1d1;
  background-image:
    linear-gradient(180deg, #fffdf7 0%, #f2efe5 38%, #ddd7c4 100%),
    var(--cap-muck),
    var(--noise);
  background-size: auto, auto, 200px 200px;
  background-blend-mode: normal, multiply, soft-light;
}
:root:root .chat-page #startSkipBtn:hover {
  background-color: #b0d6a2;
  background-image:
    linear-gradient(180deg, #ebfae3 0%, #cde9df 38%, #9cc48e 100%),
    var(--cap-muck),
    var(--noise);
  background-size: auto, auto, 200px 200px;
  background-blend-mode: normal, multiply, soft-light;
}



:root:root .chat-page .tile-bar .volumeControl {
  background-color: var(--cap-face-lo);
  background-image:
    linear-gradient(180deg, #fdfbf4 0%, var(--cap-face-hi) 38%, #d5cfbc 100%),
    var(--cap-muck),
    var(--noise);
  background-size: auto, auto, 200px 200px;
  background-blend-mode: normal, multiply, soft-light;
  box-shadow:
    0 0 0 1px var(--cap-outline),
    0 3px 4px rgba(0, 0, 0, .4),
    0 8px 12px rgba(0, 0, 0, .28);
  gap: 5px;
  padding: 0 7px;
}


:root:root .chat-page .tile-bar .volumeTrack { width: 78px; }
:root:root .chat-page .tile-bar .volumeFill {
  inset: 2px;
  width: auto;
  right: 2px;
}


:root:root .chat-page .tile-bar .volumeScreen {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 17px;
  border: 1px solid #10161a;
  border-radius: 2px;
  background-color: #060a0c;
  background-image: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, .05) 0 1px, rgba(0, 0, 0, 0) 1px 4px);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, .95),
    0 1px 0 rgba(255, 255, 255, .55);
}
:root:root .chat-page .tile-bar .volumeScreen .volumeIcon {
  position: static;
  transform: none;
  width: 14px;
  height: 14px;
}
:root:root .chat-page .tile-bar .volumeScreen .volumeIcon svg { width: 14px; height: 14px; }



:root:root .chat-page .tile-bar .key95-sm,
:root:root .chat-page .tile-bar .volumeControl,
:root:root .chat-page .tile-bar .volumeTrack {
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
:root:root .chat-page .tile-bar .key95-sm:focus,
:root:root .chat-page .tile-bar .volumeControl:focus { outline: none; }
:root:root .chat-page .tile-bar .key95-sm:focus-visible {
  outline: 2px solid var(--acc-cyan);
  outline-offset: 2px;
}



:root:root .chat-page .buttons-container .search-button:hover,
:root:root .chat-page #startSkipBtn:hover,
:root:root .chat-page #stopBtn:hover {
  box-shadow:
    0 0 0 1px var(--cap-outline),
    0 4px 5px rgba(0, 0, 0, .42),
    0 11px 17px rgba(0, 0, 0, .3);
}
:root:root .chat-page .buttons-container .search-button:active,
:root:root .chat-page .buttons-container .search-button:hover:active,
:root:root .chat-page .buttons-container .search-button.latch.down,
:root:root .chat-page #startSkipBtn:active,
:root:root .chat-page #stopBtn:active {
  box-shadow:
    0 0 0 1px var(--cap-outline),
    0 1px 2px rgba(0, 0, 0, .45),
    0 3px 5px rgba(0, 0, 0, .26);
}



:root:root .chat-page .printer .receipt-entry { padding: 8px 20px; }
:root:root .chat-page .printer .entry-close {
  position: absolute;
  top: 4px;
  right: 1px;
  z-index: 2;
}


:root:root .chat-page .tile-bar .tile-controls .volumeControl {
  flex-wrap: nowrap;
  width: max-content;
  min-width: 0;
  max-width: none;
  background-color: var(--cap-face-lo);
  background-image:
    linear-gradient(180deg, #fdfbf4 0%, var(--cap-face-hi) 38%, #d5cfbc 100%),
    var(--cap-muck),
    var(--noise);
  background-size: auto, auto, 200px 200px;
  background-blend-mode: normal, multiply, soft-light;
}
:root:root .chat-page .tile-bar .tile-controls .volumeTrack,
:root:root .chat-page .tile-bar .tile-controls .volumeScreen { flex: 0 0 auto; }


:root:root .chat-page .tile-bar .tile-controls .volumeControl { flex-direction: row; }



:root:root .chat-page .tile-bar .volumeControl {
  background-color: var(--cap-face-lo) !important;
  background-image:
    linear-gradient(180deg, #fdfbf4 0%, var(--cap-face-hi) 38%, #d5cfbc 100%),
    var(--cap-muck),
    var(--noise) !important;
  background-size: auto, auto, 200px 200px !important;
  background-blend-mode: normal, multiply, soft-light !important;
  border-style: solid !important;
  border-width: 3px 4px 5px 3px !important;
  border-top-color: var(--cap-skirt-t) !important;
  border-left-color: var(--cap-skirt-l) !important;
  border-right-color: var(--cap-skirt-r) !important;
  border-bottom-color: var(--cap-skirt-b) !important;
  border-radius: 3px !important;
  box-shadow:
    0 0 0 1px var(--cap-outline),
    0 3px 4px rgba(0, 0, 0, .4),
    0 8px 12px rgba(0, 0, 0, .28) !important;
  flex-direction: row !important;
  align-items: center !important;
}





:root:root .chat-page .tile-bar {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: auto;
  gap: 10px;
}
:root:root .chat-page .tile-bar .nameLabel {
  flex: 1 1 auto;
  min-width: 0;
  margin-right: auto;
}
:root:root .chat-page .tile-bar .tile-controls { margin-left: auto; flex: 0 0 auto; }


:root:root .chat-page .tile-bar .nameLabel {
  min-width: 6ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 8px 0;
  margin: -8px auto -8px 0;
}







:root:root .chat-page .tile-bar,
:root:root .chat-page .video-slot:not(#slot0) .tile-bar { right: 5px; }




:root:root .chat-page .tile-bar .volumeControl {
  opacity: 1;
  transition: none;
}

@container (max-width: 380px) {
  :root:root .chat-page .tile-bar .tile-controls { gap: 9px; }

  :root:root .chat-page .tile-bar .key95-sm { height: 28px; padding: 0 7px; }
  :root:root .chat-page .tile-bar .key95-sm svg { width: 14px; height: 14px; }

  :root:root .chat-page .tile-bar .volumeControl {
    height: 28px;
    padding: 0 5px;
    gap: 4px;
  }
  :root:root .chat-page .tile-bar .volumeTrack { width: 46px; height: 14px; }
  :root:root .chat-page .tile-bar .volumeScreen { width: 20px; height: 14px; }
  :root:root .chat-page .tile-bar .volumeScreen .volumeIcon,
  :root:root .chat-page .tile-bar .volumeScreen .volumeIcon svg { width: 12px; height: 12px; }
}




:root:root .chat-page .tile-bar,
:root:root .chat-page .tile-bar * {
  -webkit-user-select: none;
  user-select: none;
}


:root:root .chat-page .tile-bar .tileBtn,
:root:root .chat-page .tile-bar .key95-sm,
:root:root .chat-page .tile-bar .volumeControl,
:root:root .chat-page .tile-bar .volumeTrack,
:root:root .chat-page .tile-bar .volumeScreen,
:root:root .chat-page .tile-bar .volumeIcon,
:root:root .chat-page .tile-bar .tileBtn:focus,
:root:root .chat-page .tile-bar .key95-sm:focus,
:root:root .chat-page .tile-bar .volumeControl:focus,
:root:root .chat-page .tile-bar .volumeTrack:focus,
:root:root .chat-page .tile-bar .tileBtn:active,
:root:root .chat-page .tile-bar .key95-sm:active {
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}
:root:root .chat-page .tile-bar .key95-sm:focus-visible {
  outline: 2px solid var(--acc-cyan) !important;
  outline-offset: 2px;
}




:root:root .chat-page .video-slot .audioBadge {
  position: absolute;
  top: 8px;
  right: 8px;
  left: auto;
  bottom: auto;
  z-index: 30;
  display: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  background: rgba(10, 12, 14, .78);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .16),
    0 2px 5px rgba(0, 0, 0, .55);
  pointer-events: none;
}
:root:root .chat-page .video-slot .audioBadge.on { display: inline-flex; }
:root:root .chat-page .video-slot .audioBadge svg { width: 16px; height: 16px; display: block; }
:root:root .chat-page .video-slot .audioBadge svg path {
  fill: none;
  stroke: #ff6a5e;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}



:root:root .chat-page .tile-bar .volumeControl { z-index: auto; }



:root:root .chat-page .tile-bar .tileBtn:hover,
:root:root .chat-page .tile-bar .tileBtn:focus,
:root:root .chat-page .tile-bar .tileBtn:active {
  color: var(--cap-ink);
  border-top-color: var(--cap-skirt-t);
  border-left-color: var(--cap-skirt-l);
  border-right-color: var(--cap-skirt-r);
  border-bottom-color: var(--cap-skirt-b);
}
:root:root .chat-page .tile-bar .tileBtn:active {
  border-top-color: var(--cap-skirt-l);
}


:root:root .chat-page .tile-bar .key95-sm:focus-visible {
  outline: 2px solid var(--cap-ink) !important;
  outline-offset: 1px;
  box-shadow:
    0 0 0 1px var(--cap-outline),
    0 0 0 4px rgba(255, 253, 246, .55),
    0 3px 4px rgba(0, 0, 0, .4),
    0 8px 12px rgba(0, 0, 0, .28);
}
:root:root .chat-page .video-slot .audioBadge svg .solid { fill: #ff6a5e; stroke-width: 1; }



:root:root .chat-page input.receipt-input,
:root:root .chat-page #reportReasonInput {
  padding: 5px 7px;
  border: 1px solid rgba(0, 0, 0, .45);
  border-radius: 2px;
  background: var(--paper-2);
  color: var(--paper-ink);
  caret-color: var(--paper-ink);
  box-shadow: none;
  font: 400 11px/1.3 var(--font-ui);
  letter-spacing: 0;
}
:root:root .chat-page input.receipt-input:focus,
:root:root .chat-page #reportReasonInput:focus {
  outline: none;
  border-color: var(--paper-ink);
  background: #fff;
  box-shadow: none;
}
:root:root .chat-page input.receipt-input::placeholder,
:root:root .chat-page #reportReasonInput::placeholder {
  color: var(--paper-faint);
  letter-spacing: 0;
}




:root:root .chat-page .video-slot .nameLabel {
  transition: opacity .22s ease;
}
:root:root .chat-page .video-slot .nameLabel.awaiting-video {
  opacity: 0;
  pointer-events: none;
  transition: none;
}


:root:root .chat-page .video-slot[data-showing="static"] .nameLabel {
  opacity: 0;
  pointer-events: none;
  transition: none;
}






:root:root .chat-page .buddy-screen {
  position: relative;
  margin: 8px 0;
  padding: 7px 8px 8px;
  border: 1px solid #10161a;
  border-radius: 3px;
  background-color: #060a0c;
  background-image: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, .05) 0 1px, rgba(0, 0, 0, 0) 1px 4px);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, .95),
    0 1px 0 rgba(255, 255, 255, .35);
}
:root:root .chat-page .buddy-screen-title {
  margin-bottom: 5px;
  color: rgba(126, 232, 150, .5);
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
:root:root .chat-page .buddy-roster {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 132px;
  overflow-y: auto;
}
:root:root .chat-page .buddy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 19px;
  padding: 1px 2px 1px 3px;
}
:root:root .chat-page .buddy-name {
  overflow: hidden;
  color: #7ee896;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .02em;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 0 6px rgba(98, 232, 120, .55);
}

:root:root .chat-page .buddy-row-empty {
  color: rgba(126, 232, 150, .32);
  font-family: var(--font-display);
  font-size: 12px;
  text-shadow: none;
}


:root:root .chat-page .buddy-kick {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 2px;
  background: rgba(255, 255, 255, .05);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
:root:root .chat-page .buddy-kick svg {
  display: block;
  width: 11px;
  height: 11px;
  fill: none;
  stroke: #e8776d;
  stroke-width: 1.8;
  stroke-linecap: round;
}
:root:root .chat-page .buddy-kick:hover {
  background: rgba(232, 119, 109, .22);
  border-color: rgba(232, 119, 109, .55);
}
:root:root .chat-page .buddy-kick:hover svg {
  stroke: #ff9d94;
  filter: drop-shadow(0 0 4px rgba(255, 100, 90, .85));
}
:root:root .chat-page .buddy-kick:active { background: rgba(232, 119, 109, .38); }
:root:root .chat-page .buddy-kick:focus-visible {
  outline: 2px solid #7ee896;
  outline-offset: 1px;
}




:root:root .chat-page .buddy-invite-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 7px 0;
  padding: 0;
  border: none;
  background: none;
  overflow: visible;
}
:root:root .chat-page .buddy-invite-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}


:root:root .chat-page .buddy-invite-item .invite-name {
  flex: 1 1 auto;
  min-width: 0;
  height: 27px;
  padding: 0 8px;
  overflow: hidden;
  color: var(--cap-ink);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .02em;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}
:root:root .chat-page .buddy-invite-item .buddy-accept-btn,
:root:root .chat-page .buddy-invite-item .buddy-decline-btn {
  flex: 0 0 auto;
  width: 30px;
  height: 27px;
  padding: 0;
}
:root:root .chat-page .buddy-invite-item .buddy-accept-btn svg,
:root:root .chat-page .buddy-invite-item .buddy-decline-btn svg {
  display: block;
  width: 14px;
  height: 14px;
  margin: 0 auto;
  fill: none;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, .85))
    drop-shadow(0 -1px 0 rgba(0, 0, 0, .28));
}
:root:root .chat-page .buddy-invite-item .buddy-accept-btn svg  { stroke: #2f7a3d; }
:root:root .chat-page .buddy-invite-item .buddy-decline-btn svg { stroke: #8f2a1f; }
:root:root .chat-page .buddy-invite-item .buddy-accept-btn:hover svg  { stroke: #1e6b2e; }
:root:root .chat-page .buddy-invite-item .buddy-decline-btn:hover svg { stroke: #74180f; }




:root:root .chat-page .buddy-leave #leaveBuddyBtn {
  position: relative;
  top: 0;
  transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  
  padding: 3px 10px;
  border-style: solid;
  border-width: 4px 5px 6px 4px;
  border-top-color: #ffd9d2;
  border-left-color: #f3c4bb;
  border-right-color: #b9887f;
  border-bottom-color: #96695f;
  border-radius: 5px;
  background-color: #d8a49b;
  background-image:
    linear-gradient(180deg, #f7ded8 0%, #e3b4ab 38%, #c9938a 100%),
    var(--cap-muck),
    var(--noise);
  background-size: auto, auto, 200px 200px;
  background-blend-mode: normal, multiply, soft-light;
  color: #6d2a20;
  font-family: var(--font-display);
  
  font-size: 12px;
  white-space: nowrap;
  letter-spacing: .03em;
  text-transform: lowercase;
  cursor: pointer;
  box-shadow:
    0 0 0 1px var(--cap-outline),
    0 3px 4px rgba(0, 0, 0, .4),
    0 8px 12px rgba(0, 0, 0, .28);
  transition: top .05s linear, border-width .05s linear;
}

:root:root .chat-page .buddy-leave #leaveBuddyBtn .search-placeholder,
:root:root .chat-page .buddy-leave #leaveBuddyBtn .search-status,
:root:root .chat-page .buddy-leave #leaveBuddyBtn .status-bracket,
:root:root .chat-page .buddy-leave #leaveBuddyBtn .status-text {
  text-shadow:
    0 -1px 0 rgba(0, 0, 0, .32),
    0  1px 0 rgba(255, 255, 255, .92),
    0  2px 2px rgba(255, 255, 255, .5);
}
:root:root .chat-page .buddy-leave #leaveBuddyBtn .search-placeholder { color: inherit; }
:root:root .chat-page .buddy-leave #leaveBuddyBtn .search-status {
  font-family: var(--font-led);
  font-size: 14px;
}
:root:root .chat-page .buddy-leave #leaveBuddyBtn .status-text    { color: #8f2a1f; }
:root:root .chat-page .buddy-leave #leaveBuddyBtn .status-bracket { color: rgba(0, 0, 0, .35); }

:root:root .chat-page .buddy-leave #leaveBuddyBtn:hover {
  background-color: #e0b0a7;
  background-image:
    linear-gradient(180deg, #fdeae5 0%, #ecc2b9 38%, #d29c93 100%),
    var(--cap-muck),
    var(--noise);
  filter: none;
}
:root:root .chat-page .buddy-leave #leaveBuddyBtn:active {
  top: 3px;
  transform: none;
  border-width: 4px 5px 3px 4px;
  border-top-color: #f3c4bb;
  background-color: #c9938a;
  background-image:
    linear-gradient(180deg, #e8c6bf 0%, #d6a89f 38%, #b8867d 100%),
    var(--cap-muck),
    var(--noise);
  box-shadow:
    0 0 0 1px var(--cap-outline),
    0 1px 2px rgba(0, 0, 0, .45),
    0 3px 5px rgba(0, 0, 0, .26);
}
:root:root .chat-page .buddy-leave #leaveBuddyBtn:focus { outline: none; }
:root:root .chat-page .buddy-leave #leaveBuddyBtn:focus-visible {
  outline: 2px solid var(--cap-ink);
  outline-offset: 2px;
}




:root:root .chat-page .buddy-setting {
  display: flex;
  justify-content: flex-start;
  margin-top: 9px;
  padding-bottom: 6px;
}
:root:root .chat-page .buddy-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 9px;
  color: var(--cap-ink);
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: .05em;
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .85);
}


:root:root .chat-page .buddy-switch:active {
  top: 0;
  border-width: 3px 4px 5px 3px;
  border-top-color: var(--cap-skirt-t);
}
:root:root .chat-page .buddy-switch:active::after { inset: -2px -2px -5px -2px; }
:root:root .chat-page .buddy-switch.down {
  top: 3px;
  border-width: 3px 4px 2px 3px;
  border-top-color: var(--cap-skirt-l);
}
:root:root .chat-page .buddy-switch.down::after { inset: -2px -2px -2px -2px; }


:root:root .chat-page .buddy-switch .key95-led {
  background: #3fbf63;
  box-shadow: 0 0 5px rgba(63, 191, 99, .85), inset 0 1px 1px rgba(255, 255, 255, .6);
}
:root:root .chat-page .buddy-switch.down .key95-led {
  background: #ff4d43;
  box-shadow: 0 0 6px #ff4d43, inset 0 1px 1px rgba(255, 255, 255, .7);
}
:root:root .chat-page .buddy-switch.down .switch-label { color: #8f2a1f; }


:root:root .chat-page .buddy-switch[aria-busy="true"] {
  pointer-events: none;
  opacity: .72;
}





:root:root .chat-page.streamer .buttons-container {
  flex-flow: row nowrap;
  align-items: stretch;
  align-content: start;
  gap: 7px;
  padding: 0;
}


:root:root .chat-page.streamer .buttons-container .search-button {
  flex: 0 0 calc((100% - 21px) / 4);
  width: auto;
  min-width: 0;
  gap: 0;
  padding: 3px 0;
  border-width: 4px 5px 6px 4px;
}
:root:root .chat-page.streamer .buttons-container .search-button .search-placeholder,
:root:root .chat-page.streamer .buttons-container .search-button .search-status {
  display: none;
}


:root:root .chat-page.streamer .buttons-container .latch .key95-led {
  display: none;
}

:root:root .chat-page.streamer .buttons-container .search-button:active,
:root:root .chat-page.streamer .buttons-container .search-button.latch.down {
  top: 3px;
  margin-bottom: 0;
  border-width: 4px 5px 6px 4px;      
  border-top-color: var(--cap-skirt-l);
}
:root:root .chat-page.streamer .buttons-container .search-button:active::after,
:root:root .chat-page.streamer .buttons-container .search-button.latch.down::after {
  
  inset: -7px -4px -5px -4px;
}


:root:root .chat-page .buttons-container .key-glyph { display: none; }
:root:root .chat-page.streamer .buttons-container .key-glyph {
  display: block;
  line-height: 0;
  margin: 0 auto;
}


:root:root .chat-page.streamer #stopBtn .key-glyph { opacity: .38; }
:root:root .chat-page.streamer #stopBtn.is-on .key-glyph { opacity: 1; }


:root:root .chat-page.streamer .buttons-container #startSkipBtn .key-glyph svg,
:root:root .chat-page.streamer .buttons-container #stopBtn .key-glyph svg {
  width: 17px;
  height: 17px;
  margin: 0 auto;
  fill: var(--keycap-ink, var(--cap-ink));
  stroke: none;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, .9))
    drop-shadow(0 -1px 0 rgba(0, 0, 0, .3));
}


:root:root .chat-page.streamer .buttons-container #stopBtn .glyph-pause,
:root:root .chat-page.streamer .buttons-container #startSkipBtn .glyph-play {
  display: block;
}
:root:root .chat-page.streamer .buttons-container #startSkipBtn .glyph-skip {
  display: none;
}
:root:root .chat-page.streamer .buttons-container #startSkipBtn.is-skip .glyph-play {
  display: none;
}
:root:root .chat-page.streamer .buttons-container #startSkipBtn.is-skip .glyph-skip {
  display: block;
}

:root:root .chat-page.streamer .buttons-container .latch .key-glyph svg {
  display: block;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--cap-ink);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, .9))
    drop-shadow(0 -1px 0 rgba(0, 0, 0, .3));
}
:root:root .chat-page.streamer .buttons-container .latch .key-glyph svg .mic-body,
:root:root .chat-page.streamer .buttons-container .latch .key-glyph svg .solid {
  fill: var(--cap-ink);
  stroke-width: 1.1;
}

:root:root .chat-page.streamer .buttons-container .latch.down .key-glyph svg {
  stroke: #a32323;
}
:root:root .chat-page.streamer .buttons-container .latch.down .key-glyph svg .mic-body,
:root:root .chat-page.streamer .buttons-container .latch.down .key-glyph svg .solid {
  fill: #a32323;
}



:root:root .chat-page #stopBtn { --keycap: #d9a4a2; --keycap-ink: #4a201f; }

:root:root .chat-page #stopBtn {
  background-color: #cf9c9a;
  background-image: linear-gradient(160deg, #edcecd, #cf9c9a);
}


:root:root .chat-page #stopBtn {
  background-color: #cf9c9a;
  background-image:
    linear-gradient(180deg, #edcecd 0%, #d6a4a2 38%, #ae7a78 100%),
    var(--cap-muck),
    var(--noise);
  background-size: auto, auto, 200px 200px;
  background-blend-mode: normal, multiply, soft-light;
}

:root:root .chat-page #stopBtn:hover {
  background-color: #d6a4a2;
  background-image:
    linear-gradient(180deg, #fae4e3 0%, #e9cecd 38%, #c4908e 100%),
    var(--cap-muck),
    var(--noise);
  background-size: auto, auto, 200px 200px;
  background-blend-mode: normal, multiply, soft-light;
  filter: none;
}

:root:root .chat-page #stopBtn:active,
:root:root .chat-page #stopBtn:hover:active {
  background-color: #c4908e;
  background-image:
    linear-gradient(180deg, #e8c3c2 0%, #d8a6a4 38%, #ae7a78 100%),
    var(--cap-muck),
    var(--noise);
  background-size: auto, auto, 200px 200px;
  background-blend-mode: normal, multiply, soft-light;
}


:root:root .chat-page #stopBtn .status-text { color: #4a201f; }
:root:root .chat-page #stopBtn .status-bracket { color: rgba(0, 0, 0, .35); }



:root:root .chat-page #startSkipBtn {
  --cap-skirt-t: #fafcf9;
  --cap-skirt-l: #e2efde;
  --cap-skirt-r: #99c788;
  --cap-skirt-b: #74b25d;
}
:root:root .chat-page #stopBtn {
  --cap-skirt-t: #fcf9f9;
  --cap-skirt-l: #efdede;
  --cap-skirt-r: #c78a88;
  --cap-skirt-b: #b2605d;
}



:root:root .chat-page .buddy-switch[aria-busy="true"] {
  pointer-events: none;
  opacity: 1;
}
:root:root .chat-page .buddy-switch:active {
  background-color: var(--cap-face-lo);
  background-image:
    linear-gradient(180deg, #fdfbf4 0%, var(--cap-face-hi) 38%, #d5cfbc 100%),
    var(--cap-muck),
    var(--noise);
  background-size: auto, auto, 200px 200px;
  background-blend-mode: normal, multiply, soft-light;
}

:root:root .chat-page .buddy-switch:active::before { content: none; }
:root:root .chat-page .buddy-switch:active::after {
  inset: -2px -2px -5px -2px;
  box-shadow:
    inset 0 2px 3px -1px rgba(255, 255, 255, .18),
    0 4px 6px rgba(0, 0, 0, .45),
    0 10px 16px rgba(0, 0, 0, .3);
}




:root:root .chat-page .setting-row.inline .setting-input {
  display: flex;
  justify-content: flex-end;
  flex: 0 0 auto;
  width: auto;
  min-width: 46px;
  overflow: visible;
}

:root:root .chat-page .setting-row.inline .setting-label {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}
:root:root .chat-page .setting-row.inline .setting-label label {
  margin-bottom: 0;
  letter-spacing: .01em;
  white-space: nowrap;
}

:root:root .chat-page .setting-row.inline input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 1px solid #14181b;
  border-radius: 11px;
  cursor: pointer;
  
  background-color: #1a1210;
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(255, 255, 255, .06)),
    radial-gradient(120% 140% at 78% 50%, rgba(196, 60, 48, .55), rgba(0, 0, 0, 0) 62%);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, .9),
    inset 0 -1px 0 rgba(255, 255, 255, .10),
    0 1px 0 rgba(255, 255, 255, .30);
  transition: background-color .16s ease, background-image .16s ease;
}
:root:root .chat-page .setting-row.inline input[type="checkbox"]:checked {
  background-color: #0e1a12;
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(255, 255, 255, .06)),
    radial-gradient(120% 140% at 22% 50%, rgba(63, 191, 99, .55), rgba(0, 0, 0, 0) 62%);
}


:root:root .chat-page .setting-row.inline input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 2px;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  border-radius: 50%;
  background-color: var(--metal-light, #b9b4ab);
  background-image:
    linear-gradient(180deg, #fdfdfb 0%, #cfcac1 46%, #8e8981 100%),
    radial-gradient(60% 60% at 50% 28%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 70%);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .7),
    inset 0 1px 0 rgba(255, 255, 255, .85),
    inset 0 -1px 1px rgba(0, 0, 0, .35);
  transition: left .16s cubic-bezier(.4, 1.4, .6, 1);
}
:root:root .chat-page .setting-row.inline input[type="checkbox"]:checked::after {
  left: 24px;
}
:root:root .chat-page .setting-row.inline input[type="checkbox"]:focus { outline: none; }
:root:root .chat-page .setting-row.inline input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--acc-mint);
  outline-offset: 2px;
}
:root:root .chat-page .setting-row.inline input[type="checkbox"]:active::after {
  background-image:
    linear-gradient(180deg, #f0efec 0%, #c2bdb4 46%, #837e77 100%),
    radial-gradient(60% 60% at 50% 28%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 70%);
}



:root:root .chat-page .video-slot .safetyMosaic {
  position: absolute;
  inset: 0;
  z-index: 4;                 
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  pointer-events: none;
}



:root:root .chat-page .chat-input-row { position: relative; }

:root:root .chat-page #jumpToBottomBtn {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 7px);
  transform: translateX(-50%);
  z-index: 6;
  width: auto;
  height: 26px;
  padding: 0 12px;
  box-sizing: border-box;
  border-style: solid;
  border-width: 3px 4px 5px 3px;
  border-top-color: var(--cap-skirt-t);
  border-left-color: var(--cap-skirt-l);
  border-right-color: var(--cap-skirt-r);
  border-bottom-color: var(--cap-skirt-b);
  border-radius: 3px;
  background-color: var(--cap-face-lo);
  background-image:
    linear-gradient(180deg, #fdfbf4 0%, var(--cap-face-hi) 38%, #d5cfbc 100%),
    var(--cap-muck),
    var(--noise);
  background-size: auto, auto, 200px 200px;
  background-blend-mode: normal, multiply, soft-light;
  color: var(--cap-ink);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  
  text-shadow:
    0 -1px 0 rgba(0, 0, 0, .3),
    0  1px 0 rgba(255, 255, 255, .9);
  box-shadow:
    0 0 0 1px var(--cap-outline),
    0 3px 4px rgba(0, 0, 0, .45),
    0 8px 14px rgba(0, 0, 0, .35);
  transition: top .05s linear, border-width .05s linear;
}
:root:root .chat-page #jumpToBottomBtn:hover {
  background-color: #e6e1d1;
  background-image:
    linear-gradient(180deg, #fffdf7 0%, #f2efe5 38%, #ddd7c4 100%),
    var(--cap-muck),
    var(--noise);
  filter: none;
}
:root:root .chat-page #jumpToBottomBtn:active {
  border-width: 3px 4px 2px 3px;
  border-top-color: var(--cap-skirt-l);
  background-color: #d2ccba;
  background-image:
    linear-gradient(180deg, #e9e4d5 0%, #ddd7c6 38%, #c6c0ae 100%),
    var(--cap-muck),
    var(--noise);
  
  margin-top: 3px;
}
:root:root .chat-page #jumpToBottomBtn:focus { outline: none; }
:root:root .chat-page #jumpToBottomBtn:focus-visible {
  outline: 2px solid var(--cap-ink);
  outline-offset: 2px;
}




:root:root .chat-page .printer .receipt-roll {
  border: none;
  
  margin-top: -6px;
  padding-top: 18px;
  filter: none;
}

:root:root .chat-page .printer-slot { z-index: 3; }
:root:root .chat-page .printer #notificationContainer { z-index: 4; }


:root:root .chat-page #notificationContainer {
  
  clip-path: inset(-4px 0 0 0);
}


:root:root .chat-page .printer #notificationContainer {
  --paper-edge: rgb(51, 55, 58);
  filter:
    drop-shadow( 1px 0 0 var(--paper-edge))
    drop-shadow(-1px 0 0 var(--paper-edge))
    drop-shadow(0  1px 0 var(--paper-edge))
    drop-shadow(0 -1px 0 var(--paper-edge))
    drop-shadow(0 3px 3px rgba(0, 0, 0, .5))
    drop-shadow(0 9px 11px rgba(0, 0, 0, .34));
}



:root:root #profileOverlay .profile-avatar {
  position: relative;
  width: 104px;
  height: 104px;
  margin: 0 auto 12px;
  box-sizing: border-box;
  border: none;
  border-radius: 8px;
  
  box-shadow:
    0 4px 8px rgba(0, 0, 0, .6),
    0 10px 20px rgba(0, 0, 0, .45),
    0 0 0 1px rgba(255, 255, 255, .14);
}
:root:root #profileOverlay .profile-avatar img {
  border-radius: 8px;
}


:root:root #profileOverlay .profile-name {
  margin: 0 0 4px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: .02em;
  color: #fff;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .95);
}
:root:root #profileOverlay .profile-name.has-glow {
  text-shadow:
    0 0 7px var(--glow),
    0 0 18px var(--glow),
    0 2px 3px rgba(0, 0, 0, .8);
}


:root:root #profileOverlay .profile-created {
  margin: 0 0 14px;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #cfd6d4;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
}


:root:root #profileOverlay .profile-bio {
  margin: 0 0 15px;
  padding: 11px 12px;
  border: 1px solid #10161a;
  border-radius: 3px;
  background-color: #060a0c;
  background-image: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, .05) 0 1px, rgba(0, 0, 0, 0) 1px 4px);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, .95),
    0 1px 0 rgba(255, 255, 255, .28);
  color: #f2f7f6;
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: .01em;
  text-align: left;
  text-shadow:
    0 0 6px rgba(226, 244, 240, .55),
    0 0 14px rgba(190, 220, 214, .3);
  transition: background-color .2s;
}


:root:root #profileOverlay .profile-bio-edit {
  padding: 11px 12px;
  border: 1px solid #10161a;
  border-radius: 3px;
  background-color: #060a0c;
  background-image: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, .05) 0 1px, rgba(0, 0, 0, 0) 1px 4px);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, .95),
    0 1px 0 rgba(255, 255, 255, .28);
  color: #f2f7f6;
  caret-color: #7ee896;
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: .01em;
  text-shadow:
    0 0 6px rgba(226, 244, 240, .55),
    0 0 14px rgba(190, 220, 214, .3);
}
:root:root #profileOverlay .profile-bio-edit:focus {
  border-color: #1d2b33;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, .95),
    0 0 0 2px rgba(126, 232, 150, .25),
    0 1px 0 rgba(255, 255, 255, .28);
}



:root:root :is(#profileOverlay, #linkPopupOverlay) {
  background: rgba(6, 10, 8, .72) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: profile-dim .18s ease both;
}
:root:root :is(#profileOverlay, #linkPopupOverlay) > div {
  
  animation: profile-in .34s cubic-bezier(.33, .7, .35, 1) both;
  transform-origin: center center;
  will-change: transform;
}

@keyframes profile-dim {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes profile-in {
  0%   { transform: scale(.5);  opacity: 0; }
  55%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}


:root:root :is(#profileOverlay, #linkPopupOverlay).closing {
  animation: profile-undim .2s ease both;
  pointer-events: none;
}
@keyframes profile-undim {
  from { opacity: 1; }
  to   { opacity: 0; }
}
:root:root :is(#profileOverlay, #linkPopupOverlay).closing > div {
  animation: profile-out .2s cubic-bezier(.4, 0, .8, .4) both;
}
@keyframes profile-out {
  from { transform: scale(1);  opacity: 1; }
  to   { transform: scale(.5); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  :root:root :is(#profileOverlay, #linkPopupOverlay),
  :root:root :is(#profileOverlay, #linkPopupOverlay) > div,
  :root:root :is(#profileOverlay, #linkPopupOverlay).closing,
  :root:root :is(#profileOverlay, #linkPopupOverlay).closing > div { animation: none; }
}




:root:root :is(#profileOverlay, #linkPopupOverlay) .profile-close {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 26px !important;
  padding: 0 !important;
  border-style: solid !important;
  border-width: 3px 4px 5px 3px !important;
  border-top-color: #ffd9d2 !important;
  border-left-color: #f3c4bb !important;
  border-right-color: #b9887f !important;
  border-bottom-color: #96695f !important;
  border-radius: 3px !important;
  background-color: #cf9c9a !important;
  background-image:
    linear-gradient(180deg, #edcecd 0%, #d6a4a2 38%, #ae7a78 100%),
    var(--cap-muck),
    var(--noise) !important;
  background-size: auto, auto, 200px 200px !important;
  background-blend-mode: normal, multiply, soft-light !important;
  box-shadow:
    0 0 0 1px var(--cap-outline),
    0 3px 4px rgba(0, 0, 0, .45),
    0 8px 12px rgba(0, 0, 0, .3) !important;
  cursor: pointer;
}
:root:root :is(#profileOverlay, #linkPopupOverlay) .profile-close svg {
  display: block;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
  
  filter:
    drop-shadow(0 1px 0 rgba(0, 0, 0, .45))
    drop-shadow(0 -1px 0 rgba(0, 0, 0, .25));
}
:root:root :is(#profileOverlay, #linkPopupOverlay) .profile-close:hover {
  background-color: #d6a4a2 !important;
  background-image:
    linear-gradient(180deg, #fae4e3 0%, #e9cecd 38%, #c4908e 100%),
    var(--cap-muck),
    var(--noise) !important;
  border-color: #ffd9d2 #b9887f #96695f #f3c4bb !important;
}
:root:root :is(#profileOverlay, #linkPopupOverlay) .profile-close:active {
  top: 15px !important;
  border-width: 3px 4px 2px 3px !important;
  border-top-color: #f3c4bb !important;
  background-image:
    linear-gradient(180deg, #e8c3c2 0%, #d8a6a4 38%, #ae7a78 100%),
    var(--cap-muck),
    var(--noise) !important;
}
:root:root :is(#profileOverlay, #linkPopupOverlay) .profile-close::before,
:root:root :is(#profileOverlay, #linkPopupOverlay) .profile-close::after { content: none !important; }




:root:root #profileOverlay .profile-bio,
:root:root #profileOverlay .profile-bio-edit {
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, .95),
    0 0 0 2px #0a0f12,
    0 0 0 3px rgba(255, 255, 255, .16),
    0 2px 3px rgba(0, 0, 0, .5) !important;
}


:root:root #profileOverlay .profile-bio-edit {
  
  display: block !important;
  padding: 11px 12px !important;
  border: 1px solid #10161a !important;
  border-radius: 3px !important;
  background-color: #060a0c !important;
  background-image: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, .05) 0 1px, rgba(0, 0, 0, 0) 1px 4px) !important;
  color: #f2f7f6 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  letter-spacing: .01em !important;
}
:root:root #profileOverlay .profile-bio {
  padding: 11px 12px !important;
  border: 1px solid #10161a !important;
  border-radius: 3px !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  letter-spacing: .01em !important;
}



:root:root #profileOverlay .profile-bio,
:root:root #profileOverlay .profile-bio-edit {
  border: 1px solid #05080a !important;
  box-shadow:
    
    inset 0 3px 8px rgba(0, 0, 0, .95),
    inset 0 1px 0 rgba(0, 0, 0, .9),
    
    0 0 0 1px #6e7376,
    0 -1px 0 1px rgba(255, 255, 255, .30),
    0 1px 0 1px rgba(0, 0, 0, .55),
    
    0 0 0 3px #23282b,
    0 0 0 4px rgba(255, 255, 255, .07),
    0 3px 5px rgba(0, 0, 0, .45) !important;
}

:root:root #profileOverlay .profile-bio,
:root:root #profileOverlay .pfp-bar { margin-left: 4px; margin-right: 4px; }
:root:root #profileOverlay .profile-bio-edit { width: calc(100% - 8px) !important; margin: 0 4px; }






:root:root #profileOverlay .pfp-bar {
  position: absolute;
  top: 50%;
  left: calc(100% + 12px);
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}

:root:root #profileOverlay .pfp-key {
  position: relative;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 23px;
  padding: 0 6px;
  box-sizing: border-box;
  
  border-style: solid;
  border-width: 3px 4px 5px 3px;
  border-top-color: var(--cap-skirt-t);
  border-left-color: var(--cap-skirt-l);
  border-right-color: var(--cap-skirt-r);
  border-bottom-color: var(--cap-skirt-b);
  border-radius: 3px;
  background-color: var(--cap-face-lo);
  background-image:
    linear-gradient(180deg, #fdfbf4 0%, var(--cap-face-hi) 38%, #d5cfbc 100%),
    var(--cap-muck),
    var(--noise);
  background-size: auto, auto, 200px 200px;
  background-blend-mode: normal, multiply, soft-light;
  box-shadow:
    0 0 0 1px var(--cap-outline),
    0 3px 4px rgba(0, 0, 0, .45),
    0 8px 12px rgba(0, 0, 0, .3);
  color: var(--cap-ink);
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: lowercase;
  white-space: nowrap;
  cursor: pointer;
  
  text-shadow:
    0 -1px 0 rgba(0, 0, 0, .3),
    0  1px 0 rgba(255, 255, 255, .9);
  transition: top .05s linear, border-width .05s linear;
}
:root:root #profileOverlay .pfp-key:hover {
  background-image:
    linear-gradient(180deg, #fffdf7 0%, #f2efe5 38%, #ddd7c4 100%),
    var(--cap-muck),
    var(--noise);
}

:root:root #profileOverlay .pfp-key:active {
  top: 3px;
  border-width: 3px 4px 2px 3px;
  border-top-color: var(--cap-skirt-l);
}

:root:root #profileOverlay .pfp-bar.pfp-busy .pfp-key {
  pointer-events: none;
  opacity: .75;
}
:root:root #profileOverlay .pfp-key:focus { outline: none; }
:root:root #profileOverlay .pfp-key:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

:root:root #profileOverlay .pfp-key-red {
  border-top-color: #ffd9d2;
  border-left-color: #f3c4bb;
  border-right-color: #b9887f;
  border-bottom-color: #96695f;
  background-color: #cf9c9a;
  background-image:
    linear-gradient(180deg, #edcecd 0%, #d6a4a2 38%, #ae7a78 100%),
    var(--cap-muck),
    var(--noise);
  color: #6d2a20;
}
:root:root #profileOverlay .pfp-key-red:hover {
  background-image:
    linear-gradient(180deg, #fae4e3 0%, #e9cecd 38%, #c4908e 100%),
    var(--cap-muck),
    var(--noise);
}
:root:root #profileOverlay .pfp-key-red:active { border-top-color: #f3c4bb; }

:root:root #profileOverlay .pfp-key-green {
  border-top-color: #e9f7e2;
  border-left-color: #d8efd2;
  border-right-color: #8bb47e;
  border-bottom-color: #6e9463;
  background-color: #a8cf9a;
  background-image:
    linear-gradient(180deg, #d9edcd 0%, #b3d8a4 38%, #86ae78 100%),
    var(--cap-muck),
    var(--noise);
  color: #1f4a22;
}
:root:root #profileOverlay .pfp-key-green:hover {
  background-image:
    linear-gradient(180deg, #ebfae3 0%, #cde9df 38%, #9cc48e 100%),
    var(--cap-muck),
    var(--noise);
}
:root:root #profileOverlay .pfp-key-green:active { border-top-color: #d8efd2; }


:root:root #profileOverlay .profile-avatar { cursor: pointer; }

:root:root #profileOverlay .profile-avatar {
  position: relative;
  overflow: visible !important;
}



:root:root #profileOverlay .profile-avatar {
  transition: transform .09s ease, box-shadow .09s ease;
}

:root:root #profileOverlay .profile-avatar {
  transition: box-shadow .12s ease;
}
:root:root #profileOverlay .profile-avatar:active:not(:has(.pfp-bar:active)) {
  box-shadow:
    0 7px 12px rgba(0, 0, 0, .78),
    0 14px 28px rgba(0, 0, 0, .6),
    0 0 0 2px rgba(255, 255, 255, .2);
}



:root:root #profileOverlay .pfp-dim {
  position: absolute;
  inset: 0;
  display: flex;
  opacity: 0;
  border-radius: var(--round-sm);
  background: rgba(0, 0, 0, .4);
  pointer-events: none;
  transition: opacity .18s ease;
}
:root:root #profileOverlay .profile-avatar:hover:not(:has(.pfp-bar:hover)) .pfp-dim { opacity: 1; }



:root:root #profileOverlay .social-key {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 32px;
  box-sizing: border-box;
  border-style: solid;
  border-width: 3px 4px 5px 3px;
  border-top-color: var(--cap-skirt-t);
  border-left-color: var(--cap-skirt-l);
  border-right-color: var(--cap-skirt-r);
  border-bottom-color: var(--cap-skirt-b);
  border-radius: 3px;
  background-color: var(--cap-face-lo);
  background-image:
    linear-gradient(180deg, #fdfbf4 0%, var(--cap-face-hi) 38%, #d5cfbc 100%),
    var(--cap-muck),
    var(--noise);
  background-size: auto, auto, 200px 200px;
  background-blend-mode: normal, multiply, soft-light;
  box-shadow:
    0 0 0 1px var(--cap-outline),
    0 3px 4px rgba(0, 0, 0, .45),
    0 8px 12px rgba(0, 0, 0, .3);
  top: 0;
  transition: top .05s linear, border-width .05s linear;
}
:root:root #profileOverlay .social-key:hover {
  background-image:
    linear-gradient(180deg, #fffdf7 0%, #f2efe5 38%, #ddd7c4 100%),
    var(--cap-muck),
    var(--noise);
}
:root:root #profileOverlay .social-key:active {
  top: 3px;
  border-width: 3px 4px 2px 3px;
  border-top-color: var(--cap-skirt-l);
}
:root:root #profileOverlay .social-key img {
  width: 17px;
  height: 17px;
  display: block;
  
  filter:
    brightness(0)
    opacity(.82)
    drop-shadow(0 1px 0 rgba(255, 255, 255, .9))
    drop-shadow(0 -1px 0 rgba(0, 0, 0, .3));
}

:root:root #profileOverlay .social-key:not(.has-link) img { opacity: .34; }
:root:root #profileOverlay .social-key:not(.has-link) {
  box-shadow:
    0 0 0 1px var(--cap-outline),
    0 2px 3px rgba(0, 0, 0, .35);
}



:root:root .chat-page .footer .icons a {
  position: relative;
  display: inline-block;
  width: 26px;
  height: 26px;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, .22))
    drop-shadow(0 2px 3px rgba(0, 0, 0, .55));
  transition: filter .16s ease, transform .16s ease;
}
:root:root .chat-page .footer .icons a img { visibility: hidden; }
:root:root .chat-page .footer .icons a::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--metal-light);
  background-image:
    linear-gradient(180deg, #fbfaf7 0%, #d2cfc7 42%, #8e8b83 78%, #6f6c65 100%),
    var(--surface-img);
  background-blend-mode: normal, var(--surface-blend);
  -webkit-mask: var(--mark) center / contain no-repeat;
  mask: var(--mark) center / contain no-repeat;
}
:root:root .chat-page .footer .icons a:hover {
  transform: translateY(-1px);
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, .34))
    drop-shadow(0 3px 5px rgba(0, 0, 0, .6));
}
:root:root .chat-page .footer .icons a:hover::before {
  background-image:
    linear-gradient(180deg, #ffffff 0%, #e2dfd7 42%, #a5a199 78%, #86837c 100%),
    var(--surface-img);
}


:root:root .chat-page .footer .icons a:has(img[src*="discord"]) { --mark: url("data:image/svg+xml,%3Csvg xmlns:dc=%22http://purl.org/dc/elements/1.1/%22 xmlns:cc=%22http://creativecommons.org/ns%23%22 xmlns:rdf=%22http://www.w3.org/1999/02/22-rdf-syntax-ns%23%22 xmlns:svg=%22http://www.w3.org/2000/svg%22 xmlns=%22http://www.w3.org/2000/svg%22 xmlns:sodipodi=%22http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd%22 xmlns:inkscape=%22http://www.inkscape.org/namespaces/inkscape%22 width=%22800px%22 height=%22800px%22 viewBox=%220 -28.5 256 256%22 version=%221.1%22 preserveAspectRatio=%22xMidYMid%22 id=%22svg4577%22 sodipodi:docname=%22discord.svg%22 inkscape:version=%220.92.4 (5da689c313, 2019-01-14)%22%3E %3Cmetadata id=%22metadata4583%22%3E %3Crdf:RDF%3E %3Ccc:Work rdf:about=%22%22%3E %3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E %3Cdc:type rdf:resource=%22http://purl.org/dc/dcmitype/StillImage%22 /%3E %3C/cc:Work%3E %3C/rdf:RDF%3E %3C/metadata%3E %3Cdefs id=%22defs4581%22 /%3E %3Csodipodi:namedview pagecolor=%22%23ffffff%22 bordercolor=%22%23666666%22 borderopacity=%221%22 objecttolerance=%2210%22 gridtolerance=%2210%22 guidetolerance=%2210%22 inkscape:pageopacity=%220%22 inkscape:pageshadow=%222%22 inkscape:window-width=%22691%22 inkscape:window-height=%22480%22 id=%22namedview4579%22 showgrid=%22false%22 inkscape:zoom=%220.295%22 inkscape:cx=%22400%22 inkscape:cy=%22400%22 inkscape:window-x=%220%22 inkscape:window-y=%220%22 inkscape:window-maximized=%220%22 inkscape:current-layer=%22svg4577%22 /%3E %3Cg id=%22g4575%22 style=%22fill:%237f7f7f;fill-opacity:1%22%3E %3Cpath d=%22M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z%22 fill=%22%235865F2%22 fill-rule=%22nonzero%22 id=%22path4573%22 style=%22fill:%237f7f7f;fill-opacity:1%22 /%3E %3C/g%3E %3C/svg%3E"); }
:root:root .chat-page .footer .icons a:has(img[src*="twit"])    { --mark: url("data:image/svg+xml,%3Csvg xmlns:dc=%22http://purl.org/dc/elements/1.1/%22 xmlns:cc=%22http://creativecommons.org/ns%23%22 xmlns:rdf=%22http://www.w3.org/1999/02/22-rdf-syntax-ns%23%22 xmlns:svg=%22http://www.w3.org/2000/svg%22 xmlns=%22http://www.w3.org/2000/svg%22 xmlns:sodipodi=%22http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd%22 xmlns:inkscape=%22http://www.inkscape.org/namespaces/inkscape%22 viewBox=%220 0 24 24%22 width=%2218%22 height=%2218%22 version=%221.1%22 id=%22svg26%22 sodipodi:docname=%22twit.svg%22 inkscape:version=%220.92.4 (5da689c313, 2019-01-14)%22%3E %3Cmetadata id=%22metadata32%22%3E %3Crdf:RDF%3E %3Ccc:Work rdf:about=%22%22%3E %3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E %3Cdc:type rdf:resource=%22http://purl.org/dc/dcmitype/StillImage%22 /%3E %3C/cc:Work%3E %3C/rdf:RDF%3E %3C/metadata%3E %3Cdefs id=%22defs30%22 /%3E %3Csodipodi:namedview pagecolor=%22%23ffffff%22 bordercolor=%22%23666666%22 borderopacity=%221%22 objecttolerance=%2210%22 gridtolerance=%2210%22 guidetolerance=%2210%22 inkscape:pageopacity=%220%22 inkscape:pageshadow=%222%22 inkscape:window-width=%221920%22 inkscape:window-height=%221017%22 id=%22namedview28%22 showgrid=%22false%22 inkscape:zoom=%2233.312586%22 inkscape:cx=%225.8304362%22 inkscape:cy=%224.0602457%22 inkscape:window-x=%22-8%22 inkscape:window-y=%22-8%22 inkscape:window-maximized=%221%22 inkscape:current-layer=%22svg26%22 /%3E %3Cpath d=%22m0 0h24v24h-24%22 fill=%22%23fff%22 opacity=%220%22 id=%22path22%22 /%3E %3Cpath d=%22m8.08 20a11.07 11.07 0 0 0 11.44-11 8.09 8.09 0 0 0 1.48-2.84.44.44 0 0 0 -.62-.51 1.88 1.88 0 0 1 -2.16-.38 3.89 3.89 0 0 0 -5.58-.17 4.13 4.13 0 0 0 -1.15 3.9c-3.35.2-5.65-1.39-7.49-3.57a.43.43 0 0 0 -.75.24 9.68 9.68 0 0 0 4.6 10.05 6.73 6.73 0 0 1 -4.47 2.28.45.45 0 0 0 -.14.84 11 11 0 0 0 4.84 1.16%22 fill=%22%23231f20%22 id=%22path24%22 style=%22fill:%237f7f7f;fill-opacity:1%22 /%3E %3C/svg%3E"); }
:root:root .chat-page .footer .icons a:has(img[src*="ig.svg"])  { --mark: url("data:image/svg+xml,%3Csvg xmlns:dc=%22http://purl.org/dc/elements/1.1/%22 xmlns:cc=%22http://creativecommons.org/ns%23%22 xmlns:rdf=%22http://www.w3.org/1999/02/22-rdf-syntax-ns%23%22 xmlns:svg=%22http://www.w3.org/2000/svg%22 xmlns=%22http://www.w3.org/2000/svg%22 xmlns:sodipodi=%22http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd%22 xmlns:inkscape=%22http://www.inkscape.org/namespaces/inkscape%22 height=%2218%22 viewBox=%220 0 24 24%22 width=%2218%22 version=%221.1%22 id=%22svg24834%22 sodipodi:docname=%22ig.svg%22 inkscape:version=%220.92.4 (5da689c313, 2019-01-14)%22%3E %3Cmetadata id=%22metadata24840%22%3E %3Crdf:RDF%3E %3Ccc:Work rdf:about=%22%22%3E %3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E %3Cdc:type rdf:resource=%22http://purl.org/dc/dcmitype/StillImage%22 /%3E %3C/cc:Work%3E %3C/rdf:RDF%3E %3C/metadata%3E %3Cdefs id=%22defs24838%22 /%3E %3Csodipodi:namedview pagecolor=%22%23ffffff%22 bordercolor=%22%23666666%22 borderopacity=%221%22 objecttolerance=%2210%22 gridtolerance=%2210%22 guidetolerance=%2210%22 inkscape:pageopacity=%220%22 inkscape:pageshadow=%222%22 inkscape:window-width=%221920%22 inkscape:window-height=%221017%22 id=%22namedview24836%22 showgrid=%22false%22 inkscape:zoom=%2247.111111%22 inkscape:cx=%225.5507075%22 inkscape:cy=%229%22 inkscape:window-x=%22-8%22 inkscape:window-y=%22-8%22 inkscape:window-maximized=%221%22 inkscape:current-layer=%22svg24834%22 /%3E %3Cpath d=%22m20.947 8.305c-.011-.757-.151-1.508-.419-2.216-.469-1.209-1.424-2.165-2.633-2.633-.699-.263-1.438-.404-2.186-.42-.962-.043-1.267-.055-3.709-.055s-2.755 0-3.71.055c-.747.016-1.486.157-2.185.42-1.209.468-2.165 1.424-2.633 2.633-.263.699-.405 1.438-.419 2.185-.043.963-.056 1.268-.056 3.71s0 2.754.056 3.71c.015.748.156 1.486.419 2.187.469 1.208 1.424 2.164 2.634 2.632.696.272 1.435.426 2.185.45.963.043 1.268.056 3.71.056s2.755 0 3.71-.056c.747-.015 1.486-.156 2.186-.419 1.209-.469 2.164-1.425 2.633-2.633.263-.7.404-1.438.419-2.187.043-.962.056-1.267.056-3.71-.002-2.442-.002-2.752-.058-3.709zm-8.953 8.297c-2.554 0-4.623-2.069-4.623-4.623s2.069-4.623 4.623-4.623c2.552 0 4.623 2.069 4.623 4.623s-2.071 4.623-4.623 4.623zm4.807-8.339c-.597 0-1.078-.482-1.078-1.078s.481-1.078 1.078-1.078c.595 0 1.077.482 1.077 1.078s-.482 1.078-1.077 1.078z%22 id=%22path24830%22 style=%22fill:%237f7f7f;fill-opacity:1%22 /%3E %3C/svg%3E"); }

/* ==========================================================================
   ROOM FOR THE SHADOWS
   ==========================================================================
   Two things were being cut off by boxes that fit their contents exactly.

   The footer marks: `.icons` is 26px tall, which is the height of a mark and
   nothing else, and it clips - so the shadow under each one stopped dead at
   the bottom edge. The row lets them spill; the footer around it has the room.

   The receipt: its shadow is drawn by a filter on the container, which puts
   ink outside that element's box, and the rail is a scroll container that
   clips. When the roll grew long enough to push the footer, the bottom of the
   shadow was at the very edge of the scrollable area and got shaved. Padding
   inside the container keeps the sheet clear of the edge, so the shadow lands
   on space the container itself owns.
   ========================================================================== */

:root:root .chat-page .footer .icons {
  overflow: visible;
  padding-bottom: 5px;
}

:root:root .chat-page .printer #notificationContainer {
  padding-bottom: 14px;
  box-sizing: border-box;
}

/* ==========================================================================
   THE MUTED AND DEAFENED BADGE, BIGGER
   ==========================================================================
   It is the one thing on a tile that answers "can they hear me", and at 26px
   with a 16px glyph it was easy to miss on a quarter tile.
   ========================================================================== */

:root:root .chat-page .video-slot .audioBadge {
  width: 38px;
  height: 38px;
  border-radius: 6px;
}
:root:root .chat-page .video-slot .audioBadge svg { width: 24px; height: 24px; }
:root:root .chat-page .video-slot .audioBadge svg path { stroke-width: 2.1; }

/* ==========================================================================
   THE LINK WARNING
   ==========================================================================
   The card, the dim and the animation are the profile's - those rules name
   this overlay too. What is left is what this card has that the other does
   not: a lit wordmark, the address on a screen, and the key that goes.
   ========================================================================== */

:root:root #linkPopupOverlay .link-card {
  position: relative;
  max-width: 420px;
  width: 90%;
  box-sizing: border-box;
  pointer-events: auto;
  text-align: center;
}

/* The wordmark as a readout: the mark is a mask over lit green, with a dither
   laid across it in both directions so it reads as something being displayed
   rather than something printed. The glow is on the wrapper - masking happens
   after filters, so a shadow on the mark itself would be cut away by it. */
/*
 * The wordmark is a hole in the plate.
 *
 * Not a lit sign sitting on the metal - an opening machined through it, with
 * an unlit panel visible behind: lamps that are simply not on, which is what a
 * board looks like before anything drives it.
 *
 * The rim is built the way the housing was, one drop-shadow at a time, each
 * computed from the result of the last so every ring follows the silhouette
 * rather than boxing it in. What changes for a cutout is where the light goes.
 * A raised thing is bright along its top edge and dark underneath; a recess is
 * the other way round - the metal above the opening is in its own shadow and
 * the metal below it catches the light. Reading that backwards is the whole
 * difference between a badge stuck on and a hole cut out, so: dark above,
 * bright below, mid-tone at the sides, twice over to give the lip some
 * thickness.
 */
/*
 * The wordmark is a hole in the plate.
 *
 * Not a lit sign sitting on the metal - an opening machined through it, with
 * an unlit panel visible behind: lamps that are simply not on, which is what a
 * board looks like before anything drives it.
 *
 * The rim is built one drop-shadow at a time, each computed from the result of
 * the last, so every ring follows the silhouette rather than boxing it in.
 * What changes for a cutout is where the light goes: a raised thing is bright
 * along its top edge and dark underneath, a recess is the other way round,
 * because the metal above the opening is in its own shadow and the metal below
 * catches the light. Reading that backwards is the difference between a badge
 * stuck on and a hole cut out.
 *
 * One course of lip, not two. Every ring grows the shape by its own offset, so
 * a second course put five pixels on every arm and the mark came out fatter
 * than the mark. It also costs: each shadow is another pass, and the card is
 * scaling while they are drawn - see the note about the layer below.
 */
/*
 * The wordmark, machined out of the same metal as the case.
 *
 * Not lit and not a hole any more: the mark itself is the plate, a few shades
 * darker than the panel it sits on so it reads as a separate piece, with a
 * spun finish - conic sweeps crossing a fine radial grain, the way a turned
 * face catches light in a circle rather than in lines.
 *
 * The bevel is built one drop-shadow at a time, each computed from the result
 * of the last so every ring follows the silhouette rather than boxing it in:
 * bright along the top where the light is, dark underneath. One course of it,
 * because each ring also grows the shape and two made the arms fat.
 *
 * It all has to live on the wrapper. The mark is a mask, and a mask cuts away
 * anything drawn on the element it shapes.
 */
/*
 * The wordmark is the same plate as the case it sits on, a few shades down.
 *
 * Exactly the same fill - `--metal`, `--surface-img`, the same blend - and
 * then darkened, so it reads as the same material rather than a different one.
 * The spun finish that was here before was invented rather than borrowed and
 * it showed: conic sweeps put a hard seam through the middle of the mark and
 * looked nothing like the metal around it.
 *
 * `filter` on this element rather than a darkening layer in the background,
 * because filters run before masking - the mark is darkened and then cut out,
 * which is the order that leaves the edges clean.
 */
:root:root #linkPopupOverlay .link-logo-wrap {
  width: 120px;
  height: 106px;
  margin: 4px auto 16px;
  /* A thin cut, one course of bevel - light along the top where the light is,
     dark underneath - and the shadow it casts on the panel. */
  filter:
    drop-shadow( 1px 0 0 #2a2d30)
    drop-shadow(-1px 0 0 #2a2d30)
    drop-shadow(0  1px 0 #2a2d30)
    drop-shadow(0 -1px 0 #2a2d30)
    drop-shadow(0 -1px 0 #d7d5cf)
    drop-shadow(0  1px 0 #3f4245)
    drop-shadow(0 3px 4px rgba(0, 0, 0, .55));
  /* Drawn once into its own layer: the card it sits in scales from 50% to
     106%, and redrawing this chain on every frame of that is what made the
     card judder. */
  will-change: transform;
  transform: translateZ(0);
}
:root:root #linkPopupOverlay .link-logo {
  width: 100%;
  height: 100%;
  background-color: var(--metal);
  background-image: var(--surface-img);
  background-blend-mode: var(--surface-blend);
  filter: brightness(.66) contrast(1.04);
  -webkit-mask: url("logo.png") center -3px / 231px 130px no-repeat;
  mask: url("logo.png") center -3px / 231px 130px no-repeat;
}

/* The key that leaves wears the same face as the switch in the buddy panel. */
:root:root #linkPopupOverlay .link-go {
  font-family: var(--font-display) !important;
  font-size: 11px;
  letter-spacing: .05em;
}

/* ==========================================================================
   THE SOCIAL KEYS, LEGIBLE
   ==========================================================================
   The marks were charcoal on beige with a one-pixel cut, which is the right
   treatment for a letterform and too subtle for a logo. They are darker now,
   sitting in a shallow dish - a soft dark halo under the mark and a highlight
   below it - so the shape reads before you have looked for it.
   ========================================================================== */

:root:root #profileOverlay .social-key img {
  width: 19px;
  height: 19px;
  filter:
    brightness(0)
    opacity(.92)
    drop-shadow(0 0 3px rgba(0, 0, 0, .28))
    drop-shadow(0 1px 0 rgba(255, 255, 255, .95))
    drop-shadow(0 -1px 0 rgba(0, 0, 0, .45));
}
/* Not set: still visible, still obviously blank. */
:root:root #profileOverlay .social-key:not(.has-link) img {
  opacity: .5;
  filter:
    brightness(0)
    opacity(.6)
    drop-shadow(0 1px 0 rgba(255, 255, 255, .9));
}

/* The field under a key: metal surround, lit screen inside, the same pair the
   rest of the page is built from. */
:root:root #profileOverlay .social-input {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  margin-top: 7px;
  padding: 5px;
  border: 2px solid var(--metal-edge);
  border-radius: var(--round-sm);
  background-color: var(--metal);
  background-image: var(--surface-img);
  background-blend-mode: var(--surface-blend);
  box-shadow:
    inset 0 1px 0 var(--metal-hi),
    inset 0 -1px 0 rgba(0, 0, 0, .45),
    0 4px 8px rgba(0, 0, 0, .55);
}
:root:root #profileOverlay .social-field {
  width: 118px;
  padding: 6px 8px;
  box-sizing: border-box;
  border: 1px solid #05080a !important;
  border-radius: 2px;
  background-color: #060a0c !important;
  background-image: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, .05) 0 1px, rgba(0, 0, 0, 0) 1px 4px) !important;
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, .95),
    0 1px 0 rgba(255, 255, 255, .22);
  color: #7ee896 !important;
  caret-color: #7ee896;
  font-family: var(--font-display) !important;
  font-size: 12px;
  letter-spacing: .02em;
  outline: none;
  text-shadow: 0 0 6px rgba(98, 232, 120, .5);
}
:root:root #profileOverlay .social-field::placeholder {
  color: rgba(126, 232, 150, .38);
}

/* ==========================================================================
   RESTORED
   ==========================================================================
   These rules were removed by accident while the wordmark was being rebuilt --
   a text edit that cut from the logo block to the next `background-size: auto`
   and took four unrelated rules with it. Put back verbatim.
   ========================================================================== */

/* The receipt's shadow, trimmed to the room it has: the sheet sits 11px inside
   its container at the sides and 14px clear of the bottom, and the old reach
   was longer than that, so it was shaved at the edges. */
:root:root .chat-page .printer #notificationContainer {
  filter:
    drop-shadow( 1px 0 0 var(--paper-edge))
    drop-shadow(-1px 0 0 var(--paper-edge))
    drop-shadow(0  1px 0 var(--paper-edge))
    drop-shadow(0 -1px 0 var(--paper-edge))
    drop-shadow(0 2px 2px rgba(0, 0, 0, .5))
    drop-shadow(0 4px 5px rgba(0, 0, 0, .3));
}

:root:root #linkPopupOverlay .link-heading {
  margin: 0 0 10px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: .03em;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .9);
}

/* The address, on glass, with the same bezel the bio has - it is the thing
   worth reading before you decide. Long ones wrap rather than being cut. */
:root:root #linkPopupOverlay .link-screen {
  margin: 0 4px 12px;
  padding: 11px 12px;
  border: 1px solid #05080a;
  border-radius: 3px;
  background-color: #060a0c;
  background-image: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, .05) 0 1px, rgba(0, 0, 0, 0) 1px 4px);
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, .95),
    inset 0 1px 0 rgba(0, 0, 0, .9),
    0 0 0 1px #6e7376,
    0 -1px 0 1px rgba(255, 255, 255, .30),
    0 1px 0 1px rgba(0, 0, 0, .55),
    0 0 0 3px #23282b,
    0 0 0 4px rgba(255, 255, 255, .07),
    0 3px 5px rgba(0, 0, 0, .45);
  color: #7ee896;
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .01em;
  text-align: left;
  overflow-wrap: anywhere;
  text-shadow: 0 0 6px rgba(98, 232, 120, .5);
}

:root:root #linkPopupOverlay .link-disclaimer {
  margin: 0 0 14px;
  color: #cfd6d4;
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: .02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
}

/* The key that leaves. Written out in full for the same reason the picture
   keys are: `.key95` is scoped to `.chat-page` and this card is on <body>. */
:root:root #linkPopupOverlay .link-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  top: 0;
  min-width: 130px;
  height: 30px;
  padding: 0 16px;
  box-sizing: border-box;
  border-style: solid;
  border-width: 3px 4px 5px 3px;
  border-top-color: #e9f7e2;
  border-left-color: #d8efd2;
  border-right-color: #8bb47e;
  border-bottom-color: #6e9463;
  border-radius: 3px;
  background-color: #a8cf9a;
  background-image:
    linear-gradient(180deg, #d9edcd 0%, #b3d8a4 38%, #86ae78 100%),
    var(--cap-muck),
    var(--noise);
  background-size: auto, auto, 200px 200px;
  background-blend-mode: normal, multiply, soft-light;
  box-shadow:
    0 0 0 1px var(--cap-outline),
    0 3px 4px rgba(0, 0, 0, .45),
    0 8px 12px rgba(0, 0, 0, .3);
  color: #1f4a22;
  font-family: var(--font-display) !important;
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: lowercase;
  cursor: pointer;
  text-shadow:
    0 -1px 0 rgba(0, 0, 0, .25),
    0  1px 0 rgba(255, 255, 255, .8);
  transition: top .05s linear, border-width .05s linear;
}
:root:root #linkPopupOverlay .link-go:hover {
  background-image:
    linear-gradient(180deg, #ebfae3 0%, #cde9df 38%, #9cc48e 100%),
    var(--cap-muck),
    var(--noise);
}
:root:root #linkPopupOverlay .link-go:active {
  top: 3px;
  border-width: 3px 4px 2px 3px;
  border-top-color: #d8efd2;
}

/* ==========================================================================
   THE ONLINE READOUT HAS ITS OWN CASE
   ==========================================================================
   It was a line of text inside the buddy panel. It is a small machine now,
   sitting above the chat and the same width as it, with a strip of glass in
   the middle and the count travelling across it. In fullscreen there is no
   chat column for it to sit above, so script moves it back into the buddy
   panel - see setStreamer.
   ========================================================================== */

:root:root .chat-page .online-case {
  box-sizing: border-box;
  margin: 0 0 10px;
  padding: 7px;
  border: 1px solid var(--metal-edge);
  border-radius: var(--round);
  background-color: var(--metal);
  background-image: var(--surface-img);
  background-blend-mode: var(--surface-blend);
  box-shadow:
    inset 0 1px 0 var(--metal-hi),
    inset 0 -2px 0 rgba(0, 0, 0, .45),
    0 2px 0 rgba(0, 0, 0, .35),
    0 4px 10px rgba(0, 0, 0, .3);
}

/* The glass, with the same bezel the other screens have. */
:root:root .chat-page .online-screen {
  position: relative;
  overflow: hidden;
  height: 22px;
  border: 1px solid #05080a;
  border-radius: 3px;
  background-color: #060a0c;
  background-image: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, .05) 0 1px, rgba(0, 0, 0, 0) 1px 4px);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, .95),
    0 1px 0 rgba(255, 255, 255, .22);
}
:root:root .chat-page .online-marquee {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  display: flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation: online-pass 14s linear infinite;
}
:root:root .chat-page .online-run {
  padding: 0 8px;
  color: #7ee896;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-shadow: 0 0 6px rgba(98, 232, 120, .55);
}
:root:root .chat-page .online-run strong {
  color: #d8ffe4;
  font-weight: 400;
  text-shadow: 0 0 8px rgba(160, 255, 190, .8);
}
:root:root .chat-page .online-run .sep { opacity: .6; margin: 0 2px; }

/* Right to left, all the way across and off, then round again. */
@keyframes online-pass {
  from { transform: translateX(100%); }
  to   { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  :root:root .chat-page .online-marquee {
    animation: none;
    position: static;
    justify-content: center;
    width: 100%;
  }
}

/* In the rail it is just another panel-width strip. */
:root:root .chat-page.streamer .online-case { margin-bottom: 8px; }

/* ==========================================================================
   THE BUDDY PANEL'S TEXT IS LIT
   ==========================================================================
   The roster reads like the bio on a profile now - the same faint bloom
   rather than flat green on black.
   ========================================================================== */

:root:root .chat-page .buddy-name {
  text-shadow:
    0 0 6px rgba(126, 232, 150, .55),
    0 0 14px rgba(98, 232, 120, .3);
}
:root:root .chat-page .buddy-screen-title {
  text-shadow: 0 0 6px rgba(126, 232, 150, .35);
}
:root:root .chat-page .buddy-row-empty {
  text-shadow: 0 0 6px rgba(126, 232, 150, .22);
}

/* ==========================================================================
   THE SETTINGS TOGGLES SIT ON THE PANEL PROPERLY
   ==========================================================================
   The white line under each switch was the highlight that sells it as sunk
   into the metal - but it was drawn as an outer shadow on a rounded box and
   clipped square by the row, so it read as a cut-off edge. It is an inset now,
   inside the track where nothing can trim it.
   ========================================================================== */

:root:root .chat-page .setting-row.inline input[type="checkbox"] {
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, .9),
    inset 0 -1px 0 rgba(255, 255, 255, .16),
    inset 0 1px 0 rgba(0, 0, 0, .5);
}

/* ==========================================================================
   THE MENTION LIST IS A SCREEN ON THE INPUT
   ==========================================================================
   A white dropdown with blue highlights, from before any of this existed. It
   is the same pair as everywhere else now: a metal case carrying a lit panel,
   growing upward out of the chat field it belongs to.
   ========================================================================== */

:root:root .chat-page .mention-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  top: auto;
  z-index: 40;
  box-sizing: border-box;
  max-height: 172px;
  overflow-y: auto;
  padding: 5px;
  border: 2px solid var(--metal-edge) !important;
  border-radius: var(--round-sm);
  background-color: var(--metal) !important;
  background-image: var(--surface-img) !important;
  background-blend-mode: var(--surface-blend);
  box-shadow:
    inset 0 1px 0 var(--metal-hi),
    inset 0 -1px 0 rgba(0, 0, 0, .45),
    0 6px 14px rgba(0, 0, 0, .55) !important;
  scrollbar-width: thin;
}
:root:root .chat-page .mention-dropdown .mention-row {
  display: flex;
  align-items: baseline;
  gap: 2px;
  padding: 5px 8px;
  border: 1px solid #05080a;
  border-radius: 2px;
  background-color: #060a0c;
  background-image: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, .05) 0 1px, rgba(0, 0, 0, 0) 1px 4px);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .9);
  color: #7ee896;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .02em;
  cursor: pointer;
  text-shadow: 0 0 6px rgba(98, 232, 120, .45);
}
:root:root .chat-page .mention-dropdown .mention-row + .mention-row { margin-top: 4px; }
:root:root .chat-page .mention-dropdown .mention-at { opacity: .55; }
/* The one under the arrow keys, and the one under the pointer, look the same
   - there is only ever one of each and they mean the same thing. */
:root:root .chat-page .mention-dropdown .mention-row:hover,
:root:root .chat-page .mention-dropdown .mention-row.highlight {
  background-color: #0b1a12;
  color: #d8ffe4;
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, .9),
    inset 0 0 0 1px rgba(126, 232, 150, .45);
  text-shadow: 0 0 8px rgba(126, 232, 150, .8);
}

/* ==========================================================================
   THE DISCORD HANDLE, WHEN IT IS SHOWING
   ==========================================================================
   It sits over the key it came from, so it needs to be legible against a
   beige cap: a small screen, like everything else that carries text you have
   to read exactly.
   ========================================================================== */

:root:root #profileOverlay .discord-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  padding: 3px 6px;
  border: 1px solid #05080a;
  border-radius: 2px;
  background-color: #060a0c;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .9), 0 2px 4px rgba(0, 0, 0, .5);
  color: #7ee896;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .02em;
  white-space: nowrap;
  cursor: pointer;
  user-select: text;
  text-shadow: 0 0 6px rgba(98, 232, 120, .5);
}
:root:root #profileOverlay .discord-handle.copied {
  color: #d8ffe4;
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, .9),
    inset 0 0 0 1px rgba(126, 232, 150, .5),
    0 2px 4px rgba(0, 0, 0, .5);
}



/* ==========================================================================
   THE ONLINE READOUT LIVES IN THE TOP BAR
   ==========================================================================
   It had its own case above the chat, which cost the chat that much height and
   - worse - meant wrapping the chat in a container, which broke the
   fullscreen grid: that layout places `.local-chat-section` by name as a
   direct child, and once it was nested it stopped joining the rail. The chat
   is a direct child again and runs the full height it used to.

   This goes in the space at the right of the top bar, which was empty.
   ========================================================================== */

/* `.top-left` takes the whole bar (`flex: 1 1 0`) and `.top-right` was sized
   by its contents, so a strip told to fill its parent had nothing to fill and
   collapsed to 14px. The identity on the left needs only as much room as it
   uses; the space left over is this readout's. */
:root:root .chat-page .top-bar .top-left { flex: 0 1 auto; }
:root:root .chat-page .top-bar .top-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 18px;
}
:root:root .chat-page .top-bar .online-case {
  flex: 1 1 auto;
  min-width: 120px;
  max-width: 560px;
  margin: 0;
  padding: 5px;
}
:root:root .chat-page .online-screen { height: 26px; }

/* Bigger, and repeated: one line left most of the glass empty for most of the
   loop, and at 11px it was hard to read across the room. */
:root:root .chat-page .online-run {
  padding: 0;
  font-size: 13px;
  letter-spacing: .07em;
}
/* The gap between one line and the next: under 50px, so there is always one
   in view wherever the strip happens to be. */
:root:root .chat-page .online-run + .online-run { margin-left: 44px; }
:root:root .chat-page .online-group + .online-group { margin-left: 44px; }
:root:root .chat-page .online-group {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

/* Two identical groups, scrolled by exactly one group's width, so the second
   arrives where the first began and the seam never shows. */
:root:root .chat-page .online-marquee {
  animation: online-pass 26s linear infinite;
}
@keyframes online-pass {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ==========================================================================
   THE CHAT TAB
   ==========================================================================
   The tab belongs to the cover:

     cover stowed, chat in use   hidden until you go looking for it - hover
                                 the header and it unrolls, leave and it rolls
                                 back up
     cover down over the chat    simply there. It came down with the cover and
                                 it is how you send the cover back up, so it
                                 cannot be something you have to hunt for

   It is revealed by unrolling rather than by sliding. Moving it meant it spent
   the first half of the trip drawn across the header - the header's plate does
   not fill its own box, so a tab passing through that band shows between the
   metal and the label whatever z-index it has. Clipped from its own bottom
   edge it never leaves the strip below the header at all: it grows down out of
   the header's edge and shrinks back into it.

   The `top` timings are the cover's own, and they are restated rather than
   replaced. A single blanket transition flattened both states to one duration,
   which is what made the tab arrive well ahead of the cover - the comment on
   those rules says the two are on the same clock deliberately, welded through
   the rebound, and that is worth keeping.
   ========================================================================== */

:root:root .chat-page .local-chat-section { position: relative; }

/*
 * The header has to be opaque before anything can hide behind it.
 *
 * Its plate is a gradient of translucent black and white -- the metal you see
 * across it belongs to .local-chat-section, painted underneath. So the header
 * has never actually covered anything: a positioned element between the
 * section's background and the header's gradient shows straight through, and
 * lowering the tab's z-index only moved it into that gap. That is the whole of
 * the "the header's plate does not fill its own box" note that made the tab be
 * revealed by clipping in the first place, and it is a description of a fault
 * rather than a reason to work around it.
 *
 * The same finish the section wears, given to the header itself, so it looks
 * identical and is opaque: the shading gradient stays on top, the surface
 * texture and the metal go underneath it. The texture's origin moves from the
 * section's box to the header's, which nothing can see -- it is noise.
 */
:root:root .chat-page .local-chat-section .collapsible-header {
  background-image:
    linear-gradient(180deg,
      rgba(255, 255, 255, .14), rgba(0, 0, 0, .10) 55%, rgba(0, 0, 0, .22)),
    var(--surface-img);
  background-color: var(--metal);
  background-blend-mode: normal, var(--surface-blend);
}


:root:root .chat-page .local-chat-section:has(.collapsible-content.active) .chat-pull {
  transform: translateX(-50%) translateY(-100%);
  pointer-events: none;
}

:root:root .chat-page .local-chat-section:has(.collapsible-content.active) .collapsible-header:hover ~ .collapsible-content .chat-pull,
:root:root .chat-page .local-chat-section:has(.collapsible-content.active) .chat-pull:hover,
:root:root .chat-page .local-chat-section:has(.collapsible-content.active) .chat-pull:focus-visible {
  transform: translateX(-50%);
  pointer-events: auto;
}


:root:root .chat-page.streamer .local-chat-section:has(.collapsible-content.active) .chat-pull {
  transform: translateX(-50%);
  pointer-events: auto;
}


:root:root .chat-page .local-chat-section .chat-pull {
  
  transition:
    transform .3s var(--quick),
    top .3s var(--quick),
    filter .15s ease;
}
:root:root .chat-page .local-chat-section:not(:has(.collapsible-content.active)) .chat-pull {
  transition:
    transform .5s var(--settle),
    top .5s var(--settle),
    filter .15s ease;
}
@media (prefers-reduced-motion: reduce) {
  :root:root .chat-page .local-chat-section .chat-pull,
  :root:root .chat-page .local-chat-section:not(:has(.collapsible-content.active)) .chat-pull {
    transition: none;
  }
}



:root:root .chat-page .setting-row.inline input[type="checkbox"] {
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, .9),
    inset 0 -1px 0 rgba(255, 255, 255, .16),
    inset 0 1px 0 rgba(0, 0, 0, .5);
}



:root:root .chat-page .mention-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  top: auto;
  z-index: 40;
  box-sizing: border-box;
  max-height: 172px;
  overflow-y: auto;
  padding: 5px;
  border: 2px solid var(--metal-edge) !important;
  border-radius: var(--round-sm);
  background-color: var(--metal) !important;
  background-image: var(--surface-img) !important;
  background-blend-mode: var(--surface-blend);
  box-shadow:
    inset 0 1px 0 var(--metal-hi),
    inset 0 -1px 0 rgba(0, 0, 0, .45),
    0 6px 14px rgba(0, 0, 0, .55) !important;
  scrollbar-width: thin;
}
:root:root .chat-page .mention-dropdown .mention-row {
  display: flex;
  align-items: baseline;
  gap: 2px;
  padding: 5px 8px;
  border: 1px solid #05080a;
  border-radius: 2px;
  background-color: #060a0c;
  background-image: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, .05) 0 1px, rgba(0, 0, 0, 0) 1px 4px);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .9);
  color: #7ee896;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .02em;
  cursor: pointer;
  text-shadow: 0 0 6px rgba(98, 232, 120, .45);
}
:root:root .chat-page .mention-dropdown .mention-row + .mention-row { margin-top: 4px; }
:root:root .chat-page .mention-dropdown .mention-at { opacity: .55; }

:root:root .chat-page .mention-dropdown .mention-row:hover,
:root:root .chat-page .mention-dropdown .mention-row.highlight {
  background-color: #0b1a12;
  color: #d8ffe4;
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, .9),
    inset 0 0 0 1px rgba(126, 232, 150, .45);
  text-shadow: 0 0 8px rgba(126, 232, 150, .8);
}



:root:root #profileOverlay .discord-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  padding: 3px 6px;
  border: 1px solid #05080a;
  border-radius: 2px;
  background-color: #060a0c;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .9), 0 2px 4px rgba(0, 0, 0, .5);
  color: #7ee896;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .02em;
  white-space: nowrap;
  cursor: pointer;
  user-select: text;
  text-shadow: 0 0 6px rgba(98, 232, 120, .5);
}
:root:root #profileOverlay .discord-handle.copied {
  color: #d8ffe4;
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, .9),
    inset 0 0 0 1px rgba(126, 232, 150, .5),
    0 2px 4px rgba(0, 0, 0, .5);
}






:root:root .chat-page .top-bar .top-left { flex: 0 1 auto; }
:root:root .chat-page .top-bar .top-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 18px;
}
:root:root .chat-page .top-bar .online-case {
  flex: 1 1 auto;
  min-width: 120px;
  max-width: 560px;
  margin: 0;
  padding: 5px;
}
:root:root .chat-page .online-screen { height: 26px; }


:root:root .chat-page .online-run {
  padding: 0;
  font-size: 13px;
  letter-spacing: .07em;
}

:root:root .chat-page .online-run + .online-run { margin-left: 44px; }
:root:root .chat-page .online-group + .online-group { margin-left: 44px; }
:root:root .chat-page .online-group {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}


:root:root .chat-page .online-marquee {
  animation: online-pass 26s linear infinite;
}
@keyframes online-pass {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}






:root:root .chat-page .setting-row.inline input[type="checkbox"] {
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, .9),
    inset 0 -1px 0 rgba(255, 255, 255, .16),
    inset 0 1px 0 rgba(0, 0, 0, .5);
}




:root:root .chat-page .mention-dropdown {
  display: none;

  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  top: auto;
  z-index: 40;
  box-sizing: border-box;
  max-height: 172px;
  overflow-y: auto;
  padding: 5px;
  border: 2px solid var(--metal-edge) !important;
  border-radius: var(--round-sm);
  background-color: var(--metal) !important;
  background-image: var(--surface-img) !important;
  background-blend-mode: var(--surface-blend);
  box-shadow:
    inset 0 1px 0 var(--metal-hi),
    inset 0 -1px 0 rgba(0, 0, 0, .45),
    0 6px 14px rgba(0, 0, 0, .55) !important;
  scrollbar-width: thin;
}
:root:root .chat-page .mention-dropdown .mention-row {
  display: flex;
  align-items: baseline;
  gap: 2px;
  padding: 5px 8px;
  border: 1px solid #05080a;
  border-radius: 2px;
  background-color: #060a0c;
  background-image: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, .05) 0 1px, rgba(0, 0, 0, 0) 1px 4px);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .9);
  color: #7ee896;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .02em;
  cursor: pointer;
  text-shadow: 0 0 6px rgba(98, 232, 120, .45);
}
:root:root .chat-page .mention-dropdown .mention-row + .mention-row { margin-top: 4px; }
:root:root .chat-page .mention-dropdown .mention-at { opacity: .55; }

:root:root .chat-page .mention-dropdown .mention-row:hover,
:root:root .chat-page .mention-dropdown .mention-row.highlight {
  background-color: #0b1a12;
  color: #d8ffe4;
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, .9),
    inset 0 0 0 1px rgba(126, 232, 150, .45);
  text-shadow: 0 0 8px rgba(126, 232, 150, .8);
}



:root:root #profileOverlay .discord-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  padding: 3px 6px;
  border: 1px solid #05080a;
  border-radius: 2px;
  background-color: #060a0c;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .9), 0 2px 4px rgba(0, 0, 0, .5);
  color: #7ee896;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .02em;
  white-space: nowrap;
  cursor: pointer;
  user-select: text;
  text-shadow: 0 0 6px rgba(98, 232, 120, .5);
}
:root:root #profileOverlay .discord-handle.copied {
  color: #d8ffe4;
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, .9),
    inset 0 0 0 1px rgba(126, 232, 150, .5),
    0 2px 4px rgba(0, 0, 0, .5);
}






:root:root .chat-page .top-bar .top-left { flex: 0 1 auto; }
:root:root .chat-page .top-bar .top-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 18px;
}
:root:root .chat-page .top-bar .online-case {
  flex: 1 1 auto;
  min-width: 120px;
  max-width: 560px;
  margin: 0;
  padding: 5px;
}
:root:root .chat-page .online-screen { height: 26px; }


:root:root .chat-page .online-run {
  padding: 0;
  font-size: 13px;
  letter-spacing: .07em;
}

:root:root .chat-page .online-run + .online-run { margin-left: 44px; }
:root:root .chat-page .online-group + .online-group { margin-left: 44px; }
:root:root .chat-page .online-group {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}


:root:root .chat-page .online-marquee {
  animation: online-pass 26s linear infinite;
}
@keyframes online-pass {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}




:root:root .chat-page .tile-bar .key95-sm svg { width: 13.5px; height: 13.5px; }
:root:root .chat-page .tile-bar .report-key svg { width: 22.5px; height: 22.5px; }
@container (max-width: 380px) {
  :root:root .chat-page .tile-bar .key95-sm svg { width: 11px; height: 11px; }
  :root:root .chat-page .tile-bar .report-key svg { width: 18.5px; height: 18.5px; }
}



:root:root .chat-page .chat-line.self-mention {
  padding: 7px 8px;
  border: 2px dotted #4fd479;
  border-radius: 3px;
  background-color: #08170f;
  background-image: repeating-linear-gradient(90deg,
    rgba(126, 232, 150, .07) 0 1px, rgba(0, 0, 0, 0) 1px 4px);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, .8),
    0 0 7px rgba(79, 212, 121, .35),
    0 0 16px rgba(79, 212, 121, .16);
  transition: background-color .5s ease;
}
:root:root .chat-page .chat-line.self-mention .mention-self {
  color: #d8ffe4;
  text-shadow: 0 0 7px rgba(126, 232, 150, .8);
}



@supports (grid-template-columns: subgrid) {
  
  :root:root .chat-page .main-content > .top-bar {
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
    gap: inherit;
  }
  :root:root .chat-page .top-bar .top-left  { grid-column: 1; margin: 0; }
  :root:root .chat-page .top-bar .top-right { grid-column: 3; margin: 0; }
}


:root:root .chat-page .top-bar .online-case {
  max-width: none;
  padding: 6px;
}
:root:root .chat-page .online-screen { height: 32px; }
:root:root .chat-page .online-run {
  font-size: 15px;
  letter-spacing: .06em;
}
:root:root .chat-page .online-run + .online-run,
:root:root .chat-page .online-group + .online-group { margin-left: 40px; }



:root:root .chat-page .online-marquee {
  animation: online-pass 62s steps(360, end) infinite;
}



:root:root #profileOverlay .social-key {
  transition: top .05s linear, border-width .05s linear, box-shadow .12s ease;
}
:root:root #profileOverlay .social-key:hover,
:root:root #profileOverlay .social-key:not(.has-link):hover {
  box-shadow:
    0 0 0 1px var(--cap-outline),
    0 4px 5px rgba(0, 0, 0, .42),
    0 11px 17px rgba(0, 0, 0, .3);
}
:root:root #profileOverlay .social-key:active,
:root:root #profileOverlay .social-key:hover:active,
:root:root #profileOverlay .social-key:not(.has-link):active {
  box-shadow:
    0 0 0 1px var(--cap-outline),
    0 1px 2px rgba(0, 0, 0, .45),
    0 3px 5px rgba(0, 0, 0, .26);
}

:root:root #profileOverlay .social-key:not(.has-link):hover {
  background-image:
    linear-gradient(180deg, #fffdf7 0%, #f2efe5 38%, #ddd7c4 100%),
    var(--cap-muck),
    var(--noise);
}



:root:root .chat-page .online-marquee {
  position: static;
  width: 100%;
  height: 100%;
  justify-content: center;
  animation: none;
  will-change: auto;
}
:root:root .chat-page .online-group ~ .online-group,
:root:root .chat-page .online-run ~ .online-run { display: none; }


:root:root .chat-page .online-run {
  margin: 0;
  font-size: 21px;
  font-style: italic;
  letter-spacing: .04em;
  line-height: 1;
  white-space: nowrap;
}



@media (min-width: 900px) {
  :root:root .chat-page:not(.streamer) .video-grid {
    height: 100%;
    aspect-ratio: auto;
    max-height: calc(
      100vw
      - clamp(150px, 14vw, 230px)      
      - clamp(250px, 23vw, 430px)      
      - 60px                           
    );
  }
}



:root:root .chat-page .tile-bar .nameLabel {
  padding: 8px 0 8px 8px;
  margin: -8px auto -8px -8px;
}



:root:root .chat-page .logout-container { display: flex; margin-top: 5px; }
:root:root .chat-page .logout-link {
  position: relative;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 22px;
  padding: 0 9px;
  border-style: solid;
  border-width: 3px 4px 5px 3px;
  border-top-color: #ffd9d2;
  border-left-color: #f3c4bb;
  border-right-color: #b9887f;
  border-bottom-color: #96695f;
  border-radius: 3px;
  background-color: #cf9c9a;
  background-image:
    linear-gradient(180deg, #edcecd 0%, #d6a4a2 38%, #ae7a78 100%),
    var(--cap-muck),
    var(--noise);
  background-size: auto, auto, 200px 200px;
  background-blend-mode: normal, multiply, soft-light;
  box-shadow:
    0 0 0 1px var(--cap-outline),
    0 3px 4px rgba(0, 0, 0, .45),
    0 8px 12px rgba(0, 0, 0, .3);
  color: var(--acc-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
  transition: top .05s linear, border-width .05s linear, box-shadow .12s ease;
}

:root:root .chat-page .logout-link:hover {
  filter: none;
  background-color: #d6a4a2;
  background-image:
    linear-gradient(180deg, #fae4e3 0%, #e9cecd 38%, #c4908e 100%),
    var(--cap-muck),
    var(--noise);
  box-shadow:
    0 0 0 1px var(--cap-outline),
    0 4px 5px rgba(0, 0, 0, .42),
    0 11px 17px rgba(0, 0, 0, .3);
}
:root:root .chat-page .logout-link:active {
  top: 3px;
  border-width: 3px 4px 2px 3px;
  border-top-color: #f3c4bb;
  background-image:
    linear-gradient(180deg, #e8c3c2 0%, #d8a6a4 38%, #ae7a78 100%),
    var(--cap-muck),
    var(--noise);
  box-shadow:
    0 0 0 1px var(--cap-outline),
    0 1px 2px rgba(0, 0, 0, .45),
    0 3px 5px rgba(0, 0, 0, .26);
}



:root:root .chat-page .logout-link,
:root:root .chat-page .logout-link:hover { cursor: pointer; }

:root:root .chat-page .logout-container { margin-top: 0; }
:root:root .chat-page .logout-link { min-height: 20px; }






:root:root #authOverlay {
  background-color: rgba(10, 22, 26, .62);
  background-image:
    radial-gradient(120% 90% at 50% 45%,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, .38) 62%,
      rgba(0, 0, 0, .62) 100%);
}
:root:root #overlayContainer {
  background: none;
  padding: 20px;
  box-sizing: border-box;
}



:root:root #authOverlay .auth-plate {
  position: relative;
  width: 356px;
  max-width: 100%;
  padding: 24px 28px 22px;
  box-sizing: border-box;
  border: 1px solid var(--metal-edge);
  border-radius: var(--round);
  background-color: var(--metal);
  background-image: var(--surface-img);
  background-blend-mode: var(--surface-blend);
  box-shadow:
    inset 0 1px 0 var(--metal-hi),
    inset 0 -2px 0 rgba(0, 0, 0, .45),
    0 2px 0 rgba(0, 0, 0, .4),
    0 20px 46px rgba(0, 0, 0, .55);
  color: var(--ink);
  text-align: center;
  
  overflow: visible;
}

:root:root #authOverlay .auth-plate::before { content: none; }


:root:root #authOverlay .auth-plate::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--bolt-phillips), var(--bolt-phillips),
                    var(--bolt-phillips), var(--bolt-phillips);
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-position:
    5px 5px, calc(100% - 5px) 5px,
    5px calc(100% - 5px), calc(100% - 5px) calc(100% - 5px);
}




:root:root #authOverlay .auth-logo-wrap {
  width: 116px;
  height: 66px;
  margin: 0 auto 14px;
  filter:
    drop-shadow( 1px 0 0 #2a2d30)
    drop-shadow(-1px 0 0 #2a2d30)
    drop-shadow(0  1px 0 #2a2d30)
    drop-shadow(0 -1px 0 #2a2d30)
    drop-shadow(0 -1px 0 #d7d5cf)
    drop-shadow(0  1px 0 #3f4245)
    drop-shadow(0 3px 4px rgba(0, 0, 0, .55));
}
:root:root #authOverlay .auth-logo {
  width: 100%;
  height: 100%;
  background-color: var(--metal);
  background-image: var(--surface-img);
  background-blend-mode: var(--surface-blend);
  filter: brightness(.66) contrast(1.04);
  -webkit-mask: url("logo.png") center / contain no-repeat;
  mask: url("logo.png") center / contain no-repeat;
}




:root:root #authOverlay .auth-readout {
  margin: 0 0 16px;
  padding: 9px 11px;
  border: 1px solid #05080a;
  border-radius: 3px;
  background-color: #060a0c;
  background-image: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, .05) 0 1px, rgba(0, 0, 0, 0) 1px 4px);
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, .95),
    0 0 0 1px #6e7376,
    0 -1px 0 1px rgba(255, 255, 255, .30),
    0 1px 0 1px rgba(0, 0, 0, .55),
    0 0 0 3px #23282b,
    0 3px 5px rgba(0, 0, 0, .45);
}
:root:root #authOverlay .login-heading {
  margin: 0;
  min-height: 15px;
  color: #7ee896;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-shadow: 0 0 7px rgba(98, 232, 120, .55);
}

:root:root #authOverlay .login-heading::after {
  content: "_";
  margin-left: 1px;
  animation: auth-caret 1.05s steps(1) infinite;
}
@keyframes auth-caret { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }



:root:root #authOverlay .auth-field {
  margin: 0 0 11px;
  text-align: left;
}

:root:root #authOverlay .auth-field label {
  display: block;
  margin: 0 0 5px 2px;
  color: rgba(240, 245, 248, .62);
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}
:root:root #authOverlay .auth-field input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: auto;
  padding: 9px 11px;
  border: 1px solid #05080a;
  border-radius: 3px;
  background-color: #060a0c;
  background-image: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, .05) 0 1px, rgba(0, 0, 0, 0) 1px 4px);
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, .95),
    0 0 0 1px #6e7376,
    0 -1px 0 1px rgba(255, 255, 255, .26),
    0 1px 0 1px rgba(0, 0, 0, .5),
    0 2px 4px rgba(0, 0, 0, .4);
  color: #7ee896;
  caret-color: #7ee896;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: .05em;
  text-shadow: 0 0 6px rgba(98, 232, 120, .45);
  outline: none;
  transition: box-shadow .14s ease;
}

:root:root #authOverlay .auth-field input:focus {
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, .95),
    inset 0 0 12px rgba(98, 232, 120, .16),
    0 0 0 1px #8b9194,
    0 -1px 0 1px rgba(255, 255, 255, .32),
    0 1px 0 1px rgba(0, 0, 0, .5),
    0 2px 4px rgba(0, 0, 0, .4),
    0 0 9px rgba(98, 232, 120, .22);
}
:root:root #authOverlay .auth-field input::placeholder { color: rgba(126, 232, 150, .35); }

:root:root #authOverlay .auth-field input:-webkit-autofill {
  -webkit-text-fill-color: #7ee896;
  -webkit-box-shadow: inset 0 0 0 40px #060a0c, inset 0 3px 8px rgba(0, 0, 0, .95);
  caret-color: #7ee896;
}



:root:root #authOverlay .auth-key {
  
  --pad-y: 9px;
  position: relative;
  top: 0;
  display: block;
  width: 100%;
  margin: 14px 0 0;
  padding: var(--pad-y) 14px;
  box-sizing: border-box;
  border-style: solid;
  border-width: 4px 5px 6px 4px;
  border-top-color: var(--cap-skirt-t);
  border-left-color: var(--cap-skirt-l);
  border-right-color: var(--cap-skirt-r);
  border-bottom-color: var(--cap-skirt-b);
  border-radius: 4px;
  background-color: var(--cap-face-lo);
  background-image:
    linear-gradient(180deg, #fdfbf4 0%, var(--cap-face-hi) 38%, #d5cfbc 100%),
    var(--cap-muck),
    var(--noise);
  background-size: auto, auto, 200px 200px;
  background-blend-mode: normal, multiply, soft-light;
  box-shadow:
    0 0 0 1px var(--cap-outline),
    0 3px 4px rgba(0, 0, 0, .4),
    0 8px 12px rgba(0, 0, 0, .28);
  color: var(--cap-ink);
  font: 700 11px/1 var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .85);
  cursor: pointer;
  transition: top .05s linear, border-width .05s linear, box-shadow .12s ease;
}
:root:root #authOverlay .auth-key:hover {
  background-image:
    linear-gradient(180deg, #fffdf7 0%, #f2efe5 38%, #ddd7c4 100%),
    var(--cap-muck),
    var(--noise);
  box-shadow:
    0 0 0 1px var(--cap-outline),
    0 4px 5px rgba(0, 0, 0, .42),
    0 11px 17px rgba(0, 0, 0, .3);
}

:root:root #authOverlay .auth-key:active {
  top: 3px;
  border-width: 4px 5px 3px 4px;
  padding-bottom: calc(var(--pad-y) + 3px);
  border-top-color: var(--cap-skirt-l);
  box-shadow:
    0 0 0 1px var(--cap-outline),
    0 1px 2px rgba(0, 0, 0, .45),
    0 3px 5px rgba(0, 0, 0, .26);
}
:root:root #authOverlay .auth-key:focus { outline: none; }
:root:root #authOverlay .auth-key:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 1px var(--cap-outline),
    0 0 0 3px rgba(134, 232, 182, .55),
    0 4px 5px rgba(0, 0, 0, .42),
    0 11px 17px rgba(0, 0, 0, .3);
}


:root:root #authOverlay .auth-key-go {
  --cap-skirt-t: #fafcf9;
  --cap-skirt-l: #e2efde;
  --cap-skirt-r: #99c788;
  --cap-skirt-b: #74b25d;
  background-color: #a8cf9a;
  background-image:
    linear-gradient(180deg, #e2f4d8 0%, #c3e3b4 38%, #93bd85 100%),
    var(--cap-muck),
    var(--noise);
  color: #1f4a22;
}
:root:root #authOverlay .auth-key-go:hover {
  background-color: #b0d6a2;
  background-image:
    linear-gradient(180deg, #ecfae3 0%, #cdecbe 38%, #9dc78f 100%),
    var(--cap-muck),
    var(--noise);
}
:root:root #authOverlay .auth-key-go:active {
  background-color: #9cc48e;
  background-image:
    linear-gradient(180deg, #d5e9cb 0%, #b8daa9 38%, #8bb47d 100%),
    var(--cap-muck),
    var(--noise);
}

:root:root #authOverlay .auth-key.highlight {
  border-color: var(--cap-skirt-t) var(--cap-skirt-r)
                var(--cap-skirt-b) var(--cap-skirt-l) !important;
  color: #1f4a22 !important;
}


:root:root #authOverlay .guest-link.auth-key {
  display: inline-block;
  width: auto;
  --pad-y: 6px;
  margin: 0;
  padding: var(--pad-y) 11px;
  border-width: 3px 4px 5px 3px;
  font-size: 9px;
  letter-spacing: .13em;
}
:root:root #authOverlay .guest-link.auth-key:active {
  top: 3px;
  border-width: 3px 4px 2px 3px;
  padding-bottom: calc(var(--pad-y) + 3px);   
}



:root:root #authOverlay .tos-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 2px;
  text-align: left;
  
  justify-content: flex-start;
}


:root:root #authOverlay .tos-container + .tos-container { margin-top: 6px; }
:root:root #authOverlay :is(#tosCheck, #ageCheck) {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 1px solid #14181b;
  border-radius: 10px;
  cursor: pointer;
  background-color: #1a1210;
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(255, 255, 255, .06)),
    radial-gradient(120% 140% at 78% 50%, rgba(196, 60, 48, .55), rgba(0, 0, 0, 0) 62%);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, .9),
    inset 0 -1px 0 rgba(255, 255, 255, .10),
    inset 0 1px 0 rgba(0, 0, 0, .5);
  transition: background-color .16s ease, background-image .16s ease;
}
:root:root #authOverlay :is(#tosCheck, #ageCheck):checked {
  background-color: #0e1a12;
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(255, 255, 255, .06)),
    radial-gradient(120% 140% at 22% 50%, rgba(63, 191, 99, .55), rgba(0, 0, 0, 0) 62%);
}
:root:root #authOverlay :is(#tosCheck, #ageCheck)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 2px;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  border-radius: 50%;
  background-color: #b9b4ab;
  background-image:
    linear-gradient(180deg, #fdfdfb 0%, #cfcac1 46%, #8e8981 100%),
    radial-gradient(60% 60% at 50% 28%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 70%);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .7),
    inset 0 1px 0 rgba(255, 255, 255, .85),
    inset 0 -1px 1px rgba(0, 0, 0, .35);
  transition: left .16s cubic-bezier(.4, 1.4, .6, 1);
}
:root:root #authOverlay :is(#tosCheck, #ageCheck):checked::after { left: 22px; }
:root:root #authOverlay .tos-container label {
  margin: 0;
  color: rgba(240, 245, 248, .66);
  font-family: var(--font-display);
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}
:root:root #authOverlay .tos-container label a {
  color: var(--acc-mint);
  text-decoration: none;
  border-bottom: 1px dotted rgba(134, 232, 182, .5);
}
:root:root #authOverlay .tos-container label a:hover { color: #b6f5d5; }




:root:root #authOverlay .error-message {
  margin: 12px 0 0;
  padding: 7px 10px;
  border: 1px solid #0a0505;
  border-radius: 3px;
  background-color: #140809;
  background-image: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, .05) 0 1px, rgba(0, 0, 0, 0) 1px 4px);
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, .95),
    0 0 0 1px #6e7376,
    0 -1px 0 1px rgba(255, 255, 255, .22),
    0 2px 4px rgba(0, 0, 0, .4);
  color: #ff8d8d;
  font-family: var(--font-display);
  font-size: 10px;
  line-height: 1.45;
  letter-spacing: .05em;
  text-align: left;
  text-transform: lowercase;
  text-shadow: 0 0 7px rgba(255, 90, 90, .5);
}



:root:root #authOverlay .signup,
:root:root #authOverlay .already,
:root:root #authOverlay .guestcontinue {
  margin: 14px 0 0;
  color: rgba(240, 245, 248, .5);
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
:root:root #authOverlay .guestcontinue { margin-top: 16px; }
:root:root #authOverlay .guestcontinue .or-text { display: block; margin-bottom: 7px; }
:root:root #authOverlay .signup a,
:root:root #authOverlay .already a {
  color: var(--acc-mint);
  text-decoration: none;
  border-bottom: 1px solid rgba(134, 232, 182, .4);
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease;
}
:root:root #authOverlay .signup a:hover,
:root:root #authOverlay .already a:hover {
  color: #d3fbe8;
  border-bottom-color: rgba(211, 251, 232, .8);
}



@media (max-width: 420px) {
  :root:root #authOverlay .auth-plate { width: 100%; padding: 20px 18px 18px; }
  :root:root #authOverlay .auth-logo-wrap { width: 96px; height: 55px; }
}

@media (prefers-reduced-motion: reduce) {
  :root:root #authOverlay .login-heading::after { animation: none; }
  :root:root #authOverlay .auth-key,
  :root:root #authOverlay .auth-field input,
  :root:root #authOverlay :is(#tosCheck, #ageCheck),
  :root:root #authOverlay :is(#tosCheck, #ageCheck)::after { transition: none; }
}



:root:root #authOverlay .signup a,
:root:root #authOverlay .already a,
:root:root #authOverlay .tos-container label a,
:root:root #authOverlay .guestcontinue a {
  letter-spacing: .12em;
}



:root:root #authOverlay .guestcontinue .or-text {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 11px;
  color: rgba(240, 245, 248, .42);
  font-size: 9px;
  letter-spacing: .22em;
}
:root:root #authOverlay .guestcontinue .or-text::before,
:root:root #authOverlay .guestcontinue .or-text::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background-color: rgba(0, 0, 0, .45);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .12);
}




:root:root #authOverlay .tos-container label {
  font-size: 9.5px;
  line-height: 1.6;
  letter-spacing: .05em;
  text-transform: none;
}
:root:root #authOverlay .tos-container label a { white-space: nowrap; }



:root:root #authOverlay .auth-logo-wrap {
  width: 128px;
  height: 72px;
  margin-bottom: 16px;
}
@media (max-width: 420px) {
  :root:root #authOverlay .auth-logo-wrap { width: 104px; height: 59px; }
}


:root:root #overlayContainer {
  overflow-y: auto;
  align-items: center;
  align-items: safe center;
}





:root:root #authOverlay {
  background-color: rgba(10, 22, 26, .5);
  background-image:
    radial-gradient(125% 95% at 50% 45%,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, .26) 62%,
      rgba(0, 0, 0, .46) 100%);
}



:root:root #authOverlay .auth-plate {
  width: 408px;
  padding: 28px 32px 26px;
}
:root:root #authOverlay .auth-plate::after {
  background-size: 15px 15px;
  background-position:
    6px 6px, calc(100% - 6px) 6px,
    6px calc(100% - 6px), calc(100% - 6px) calc(100% - 6px);
}




:root:root #authOverlay .auth-logo-wrap {
  width: 150px;
  height: 84px;
  margin: 0 auto 18px;
  filter:
    drop-shadow(0 0 5px rgba(98, 232, 120, .55))
    drop-shadow(0 0 14px rgba(98, 232, 120, .30))
    drop-shadow(0 0 30px rgba(98, 232, 120, .14));
}
:root:root #authOverlay .auth-logo {
  background-color: #7ee896;
  
  background-image:
    repeating-linear-gradient(0deg,
      rgba(0, 0, 0, .46) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
    repeating-linear-gradient(90deg,
      rgba(0, 0, 0, .20) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
    linear-gradient(180deg, #c6ffd6 0%, #7ee896 52%, #46c46a 100%);
  background-blend-mode: normal, normal, normal;
  filter: none;
}



:root:root #authOverlay .auth-readout {
  margin: 0 0 18px;
  padding: 11px 13px;
}
:root:root #authOverlay .login-heading {
  min-height: 17px;
  font-size: 15px;
  letter-spacing: .06em;
}



:root:root #authOverlay .auth-field { margin: 0 0 13px; }
:root:root #authOverlay .auth-field label {
  margin-bottom: 6px;
  font-size: 10px;
  letter-spacing: .16em;
}
:root:root #authOverlay .auth-field input {
  padding: 11px 13px;
  font-size: 15px;
}



:root:root #authOverlay .auth-input-wrap { position: relative; }

:root:root #authOverlay .auth-input-wrap input { padding-right: 42px; }

:root:root #authOverlay .auth-eye {
  position: absolute;
  top: 50%;
  right: 7px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid #05080a;
  border-radius: 3px;
  
  background-color: #040708;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, .9),
    0 -1px 0 rgba(255, 255, 255, .10),
    0 1px 0 rgba(0, 0, 0, .6);
  cursor: pointer;
  transition: background-color .14s ease, box-shadow .14s ease;
}
:root:root #authOverlay .auth-eye svg {
  display: block;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: #2f6b41;                 
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .14s ease, filter .14s ease;
}
:root:root #authOverlay .auth-eye .eye-pupil { stroke-width: 1.9; }
:root:root #authOverlay .auth-eye:hover svg { stroke: #4d9c63; }


:root:root #authOverlay .auth-eye[aria-pressed="true"] {
  background-color: #071410;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, .9),
    inset 0 0 8px rgba(98, 232, 120, .35),
    0 -1px 0 rgba(255, 255, 255, .10),
    0 1px 0 rgba(0, 0, 0, .6),
    0 0 7px rgba(98, 232, 120, .3);
}
:root:root #authOverlay .auth-eye[aria-pressed="true"] svg {
  stroke: #9dffb8;
  filter: drop-shadow(0 0 4px rgba(126, 232, 150, .9));
}

:root:root #authOverlay .auth-eye[aria-pressed="true"] .eye-bar { opacity: 0; }
:root:root #authOverlay .auth-eye .eye-bar {
  opacity: 1;
  transition: opacity .14s ease;
}
:root:root #authOverlay .auth-eye:focus { outline: none; }
:root:root #authOverlay .auth-eye:focus-visible {
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, .9),
    0 0 0 2px rgba(134, 232, 182, .6);
}



:root:root #authOverlay .auth-key {
  --pad-y: 11px;
  margin-top: 16px;
  padding: var(--pad-y) 16px;
  font-size: 12px;
}
:root:root #authOverlay .guest-link.auth-key {
  --pad-y: 8px;
  padding: var(--pad-y) 14px;
  font-size: 10px;
}
:root:root #authOverlay .signup,
:root:root #authOverlay .already,
:root:root #authOverlay .guestcontinue { font-size: 10.5px; }
:root:root #authOverlay .guestcontinue .or-text { font-size: 10px; }
:root:root #authOverlay .tos-container label { font-size: 11px; }
:root:root #authOverlay .tos-container { gap: 11px; margin-top: 16px; }
:root:root #authOverlay .error-message {
  font-size: 11px;
  padding: 8px 11px;
}



@media (max-width: 460px) {
  :root:root #authOverlay .auth-plate { width: 100%; padding: 22px 20px 20px; }
  :root:root #authOverlay .auth-logo-wrap { width: 118px; height: 66px; }
  :root:root #authOverlay .auth-field input { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  :root:root #authOverlay .auth-eye,
  :root:root #authOverlay .auth-eye svg,
  :root:root #authOverlay .auth-eye .eye-bar { transition: none; }
}


:root:root #authOverlay .auth-eye { margin: 0; }



:root:root #authOverlay .auth-eye {
  border: none;
  background: none;
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease;
}

:root:root #authOverlay .auth-input-wrap:hover .auth-eye,
:root:root #authOverlay .auth-input-wrap:focus-within .auth-eye,
:root:root #authOverlay .auth-input-wrap input:not(:placeholder-shown) ~ .auth-eye,
:root:root #authOverlay .auth-eye[aria-pressed="true"] {
  opacity: 1;
  pointer-events: auto;
}


:root:root #authOverlay .auth-eye svg { stroke: #3e8a54; }
:root:root #authOverlay .auth-eye:hover svg { stroke: #6fc98a; }
:root:root #authOverlay .auth-eye[aria-pressed="true"] {
  background: none;
  box-shadow: none;
}
:root:root #authOverlay .auth-eye[aria-pressed="true"] svg {
  stroke: #9dffb8;
  filter: drop-shadow(0 0 5px rgba(126, 232, 150, .85));
}

:root:root #authOverlay .auth-eye:focus-visible {
  box-shadow: none;
  outline: 1px solid rgba(134, 232, 182, .7);
  outline-offset: 1px;
  border-radius: 3px;
}


:root:root #authOverlay .auth-field input::placeholder { color: transparent; }

@media (prefers-reduced-motion: reduce) {
  :root:root #authOverlay .auth-eye { transition: none; }
}




:root:root #authOverlay .auth-logo-wrap {
  width: 152px;
  height: 85px;
  filter:
    drop-shadow(0 -1px 0 rgba(214, 255, 226, .55))
    drop-shadow(0 1.5px 0 rgba(0, 40, 14, .35))
    drop-shadow(0 0 7px rgba(78, 208, 99, .44))
    drop-shadow(0 0 17px rgba(78, 208, 99, .28))
    drop-shadow(0 0 30px rgba(78, 208, 99, .12));
}
:root:root #authOverlay .auth-logo {
  background-image:
    repeating-linear-gradient(0deg,
      rgba(0, 0, 0, .26) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
    linear-gradient(180deg, #c6ffd6 0%, #7ee896 52%, #46c46a 100%);
  background-blend-mode: normal, normal;
}





:root:root #authOverlay .auth-logo {
  background-image:
    repeating-linear-gradient(0deg,
      rgba(0, 0, 0, .06) 0 1.7px,
      rgba(0, 0, 0, 0) 1.7px 3.5px),
    linear-gradient(180deg, #c6ffd6 0%, #7ee896 52%, #46c46a 100%);
}



:root:root #linkPopupOverlay .link-logo-wrap {
  width: 132px;
  height: 74px;
  margin: 2px auto 16px;
  
  filter:
    drop-shadow(0 -1px 0 rgba(214, 255, 226, .55))
    drop-shadow(0  1px 0 rgba(0, 40, 14, .55))
    drop-shadow(0 0 5px rgba(98, 232, 120, .5))
    drop-shadow(0 0 14px rgba(98, 232, 120, .26))
    drop-shadow(0 0 30px rgba(98, 232, 120, .12));
  
  will-change: transform;
  transform: translateZ(0);
}
:root:root #linkPopupOverlay .link-logo {
  width: 100%;
  height: 100%;
  background-color: #7ee896;
  background-image:
    repeating-linear-gradient(0deg,
      rgba(0, 0, 0, .13) 0 .5px, rgba(0, 0, 0, 0) .5px 1.5px),
    linear-gradient(180deg, #c6ffd6 0%, #7ee896 52%, #46c46a 100%);
  background-blend-mode: normal, normal;
  filter: none;
  -webkit-mask: url("logo.png") center / contain no-repeat;
  mask: url("logo.png") center / contain no-repeat;
}



:root:root .chat-page.streamer .online-case {
  flex: 0 0 auto;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 8px;
  padding: 5px;
}
:root:root .chat-page.streamer .online-screen {
  height: auto;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 7px;
  box-sizing: border-box;
}
:root:root .chat-page.streamer .online-marquee {
  position: static;
  width: 100%;
  height: auto;
}
:root:root .chat-page.streamer .online-group { display: block; width: 100%; }
:root:root .chat-page.streamer .online-run {
  display: block;
  white-space: normal;          
  text-align: center;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: .04em;
}


:root:root .chat-page.streamer .online-group ~ .online-group,
:root:root .chat-page.streamer .online-run ~ .online-run { display: none; }



:root:root .chat-page .buddy-messages > .online-case {
  flex: 0 0 auto;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 8px;
  padding: 5px;
}
:root:root .chat-page .buddy-messages > .online-case .online-screen {
  height: auto;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 7px;
  box-sizing: border-box;
}
:root:root .chat-page .buddy-messages > .online-case .online-marquee {
  position: static;
  width: 100%;
  height: auto;
}
:root:root .chat-page .buddy-messages > .online-case .online-group {
  display: block;
  width: 100%;
}
:root:root .chat-page .buddy-messages > .online-case .online-run {
  display: block;
  white-space: normal;
  text-align: center;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: .04em;
}
:root:root .chat-page .buddy-messages > .online-case .online-group ~ .online-group,
:root:root .chat-page .buddy-messages > .online-case .online-run ~ .online-run {
  display: none;
}



@media (max-width: 899px) {

  

  
  :root:root .chat-page .video-grid {
    left: 8px;
    right: 8px;
    top: calc(var(--top-bar-h) + 8px);
    bottom: calc(var(--bottom-bars-total) + 8px);
    height: auto;
    box-sizing: border-box;
    padding: 9px;
    gap: 0;
    border: 1px solid var(--metal-edge);
    border-radius: 12px;
    background-color: var(--metal);
    background-image: var(--surface-img);
    background-blend-mode: var(--surface-blend);
    box-shadow:
      inset 0 1px 0 var(--metal-hi),
      inset 0 -2px 0 rgba(0, 0, 0, .45),
      0 2px 0 rgba(0, 0, 0, .35),
      0 8px 22px rgba(0, 0, 0, .45);
    overflow: hidden;
  }

  
  :root:root .chat-page .video-grid::before {
    content: "";
    position: absolute;
    inset: 9px;
    z-index: 6;
    pointer-events: none;
    background-image:
      linear-gradient(90deg,
        rgba(0, 0, 0, 0) calc(50% - 1px), #0b0e10 calc(50% - 1px),
        #0b0e10 calc(50% + 1px), rgba(0, 0, 0, 0) calc(50% + 1px)),
      linear-gradient(180deg,
        rgba(0, 0, 0, 0) calc(50% - 1px), #0b0e10 calc(50% - 1px),
        #0b0e10 calc(50% + 1px), rgba(0, 0, 0, 0) calc(50% + 1px));
  }

  
  :root:root .chat-page .video-grid::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 7;
    pointer-events: none;
    background-image: var(--bolt-phillips), var(--bolt-phillips),
                      var(--bolt-phillips), var(--bolt-phillips);
    background-size: 15px 15px;
    background-repeat: no-repeat;
    background-position:
      6px 6px, calc(100% - 6px) 6px,
      6px calc(100% - 6px), calc(100% - 6px) calc(100% - 6px);
  }

  
  :root:root .chat-page .video-grid > .video-wrapper,
  :root:root .chat-page .video-grid > .video-wrapper > .video-wrapper,
  :root:root .chat-page .video-grid .video-slot {
    outline: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #05080a;
  }
  
  :root:root .chat-page .video-grid > .video-wrapper::before,
  :root:root .chat-page .video-grid > .video-wrapper::after {
    display: none !important;
  }

  

  
  :root:root .chat-page .mobile-control-bar { display: none !important; }

  :root:root .chat-page .buttons-container {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(var(--tabbar-h) + 7px);
    z-index: 1002;
    width: auto;
    margin: 0;
    padding: 0;
  }
  :root:root .chat-page .buttons-container .search-button {
    width: 100%;
    min-width: 0;
    padding: 9px 4px;
  }

  
  :root:root .chat-page .buttons-container .search-placeholder,
  :root:root .chat-page .buttons-container .search-status,
  :root:root .chat-page .buttons-container .latch .key95-led { display: none; }

  :root:root .chat-page .buttons-container .key-glyph {
    display: block;
    line-height: 0;
    margin: 0 auto;
  }
  :root:root .chat-page .buttons-container #startSkipBtn .key-glyph svg,
  :root:root .chat-page .buttons-container #stopBtn .key-glyph svg {
    width: 19px;
    height: 19px;
    margin: 0 auto;
    fill: var(--keycap-ink, var(--cap-ink));
    stroke: none;
    filter:
      drop-shadow(0 1px 0 rgba(255, 255, 255, .9))
      drop-shadow(0 -1px 0 rgba(0, 0, 0, .3));
  }
  
  :root:root .chat-page .buttons-container #stopBtn .key-glyph { opacity: .38; }
  :root:root .chat-page .buttons-container #stopBtn.is-on .key-glyph { opacity: 1; }

  
  :root:root .chat-page .buttons-container #stopBtn .glyph-pause,
  :root:root .chat-page .buttons-container #startSkipBtn .glyph-play { display: block; }
  :root:root .chat-page .buttons-container #startSkipBtn .glyph-skip { display: none; }
  :root:root .chat-page .buttons-container #startSkipBtn.is-skip .glyph-play { display: none; }
  :root:root .chat-page .buttons-container #startSkipBtn.is-skip .glyph-skip { display: block; }

  :root:root .chat-page .buttons-container .latch .key-glyph svg {
    display: block;
    width: 19px;
    height: 19px;
    fill: none;
    stroke: var(--cap-ink);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter:
      drop-shadow(0 1px 0 rgba(255, 255, 255, .9))
      drop-shadow(0 -1px 0 rgba(0, 0, 0, .3));
  }
  :root:root .chat-page .buttons-container .latch .key-glyph svg .mic-body,
  :root:root .chat-page .buttons-container .latch .key-glyph svg .solid {
    fill: var(--cap-ink);
    stroke-width: 1.1;
  }
  :root:root .chat-page .buttons-container .latch.down .key-glyph svg { stroke: #a32323; }
  :root:root .chat-page .buttons-container .latch.down .key-glyph svg .mic-body,
  :root:root .chat-page .buttons-container .latch.down .key-glyph svg .solid { fill: #a32323; }

  

  
  :root:root .chat-page .top-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    box-sizing: border-box;
  }
  :root:root .chat-page .top-bar .top-right { display: none; }
  :root:root .chat-page .top-bar .identity {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
  }
  :root:root .chat-page .top-bar .user-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 9px;
    min-width: 0;
  }
  :root:root .chat-page .top-bar .username-display {
    max-width: 42vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  :root:root .chat-page .logout-container { margin: 0; }
  :root:root .chat-page .logout-link { white-space: nowrap; }
}

@media (max-width: 899px) {

  
  :root:root .chat-page .video-grid {
    height: calc(100dvh - var(--top-bar-h) - var(--bottom-bars-total) - 16px);
  }

  
  :root:root .chat-page .main-content > .top-bar {
    display: flex;
    grid-template-columns: none;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    box-sizing: border-box;
  }
  :root:root .chat-page .main-content > .top-bar .top-left { grid-column: auto; min-width: 0; }
  :root:root .chat-page .main-content > .top-bar .top-right { display: none; }
}

@media (max-width: 899px) {
  
  :root:root .chat-page .video-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    width: auto;
    max-width: none;
    min-width: 0;
  }
  :root:root .chat-page .video-grid > .video-wrapper,
  :root:root .chat-page .video-grid .video-slot { min-width: 0; }
}

@media (max-width: 899px) {
  
  :root:root .chat-page .video-grid { width: calc(100% - 16px); }
}



:root:root #mobilePanel .panel-content #buddyBtn,
:root:root #mobilePanel .panel-content #sendChatBtn,
:root:root #mobilePanel .panel-content #saveCosmeticsBtn {
  border-style: solid;
  border-width: 3px 4px 5px 3px;
  border-top-color: var(--cap-skirt-t);
  border-left-color: var(--cap-skirt-l);
  border-right-color: var(--cap-skirt-r);
  border-bottom-color: var(--cap-skirt-b);
  border-radius: 3px;
  background-color: var(--cap-face-lo);
  background-image:
    linear-gradient(180deg, #fdfbf4 0%, var(--cap-face-hi) 38%, #d5cfbc 100%),
    var(--cap-muck),
    var(--noise);
  background-size: auto, auto, 200px 200px;
  background-blend-mode: normal, multiply, soft-light;
  box-shadow:
    0 0 0 1px var(--cap-outline),
    0 3px 4px rgba(0, 0, 0, .4),
    0 8px 12px rgba(0, 0, 0, .28);
  color: var(--cap-ink);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .85);
  padding: 7px 12px;
  height: auto;
}
:root:root #mobilePanel .panel-content #buddyBtn:active,
:root:root #mobilePanel .panel-content #sendChatBtn:active,
:root:root #mobilePanel .panel-content #saveCosmeticsBtn:active {
  position: relative;
  top: 3px;
  border-width: 3px 4px 2px 3px;
  border-top-color: var(--cap-skirt-l);
}

:root:root #mobilePanel .panel-content #buddyBtn img,
:root:root #mobilePanel .panel-content #sendChatBtn img {
  width: 17px;
  height: auto;
  filter:
    brightness(0)
    opacity(.82)
    drop-shadow(0 1px 0 rgba(255, 255, 255, .9))
    drop-shadow(0 -1px 0 rgba(0, 0, 0, .3));
}

:root:root #mobilePanel .panel-content #leaveBuddyBtn {
  --cap-skirt-t: #fcf9f9;
  --cap-skirt-l: #efdede;
  --cap-skirt-r: #c78a88;
  --cap-skirt-b: #b2605d;
  background-color: #cf9c9a;
  background-image:
    linear-gradient(180deg, #edcecd 0%, #d6a4a2 38%, #ae7a78 100%),
    var(--cap-muck),
    var(--noise);
}

@media (max-width: 899px) {
  
  :root:root .chat-page .chat-pull,
  :root:root .chat-page .chat-shutter-clip,
  :root:root .chat-page .shutter-pull { display: none !important; }

  
  :root:root #mobilePanel .panel-content .collapsible-header { display: none; }
}




:root:root button,
:root:root a,
:root:root label,
:root:root summary,
:root:root [role="button"],
:root:root input:not([type="range"]),
:root:root select,
:root:root textarea {
  touch-action: manipulation;
}


@media (pointer: coarse) {
  :root:root input[type="text"],
  :root:root input[type="password"],
  :root:root input[type="email"],
  :root:root input[type="search"],
  :root:root input[type="number"],
  :root:root input[type="tel"],
  :root:root input[type="url"],
  :root:root textarea,
  :root:root select,
  :root:root #authOverlay .auth-field input {
    font-size: 16px;
  }
}



@media (max-width: 899px) {

  
  :root:root .chat-page {
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-l: env(safe-area-inset-left, 0px);
    --safe-r: env(safe-area-inset-right, 0px);

    --top-bar-h: 44px;
    
    --bar-key-h: 30px;
    
    --tabbar-h: 52px;
    --control-bar-h: 0px;
    --bottom-bars-total: var(--tabbar-h);
  }

  

  :root:root .chat-page .top-bar {
    position: fixed;
    top: var(--safe-t);
    left: 0;
    right: 0;
    z-index: 1003;
    height: var(--top-bar-h);
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 calc(var(--safe-r) + 8px) 0 calc(var(--safe-l) + 8px);
    box-sizing: border-box;
  }
  
  :root:root .chat-page .top-bar .top-right { display: none; }

  :root:root .chat-page .top-bar .identity {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
  }
  :root:root .chat-page .top-bar .user-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 9px;
    min-width: 0;
  }
  :root:root .chat-page .top-bar .username-display {
    max-width: 34vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
  }
  :root:root .chat-page .logout-container { margin: 0; }
  :root:root .chat-page .logout-link {
    white-space: nowrap;
    padding: 4px 9px;
    font-size: 10px;
  }

  

  
  :root:root .chat-page #noticeBellBtn {
    position: relative;
    margin-left: auto;
    flex: 0 0 auto;
    width: 38px;
    min-width: 0;
    height: var(--bar-key-h);
    padding: 0;
    display: grid;
    place-items: center;
  }
  :root:root .chat-page #noticeBellBtn .key-glyph { display: block; line-height: 0; }
  :root:root .chat-page #noticeBellBtn .key-glyph svg {
    display: block;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--cap-ink);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  :root:root .chat-page #noticeBellBtn .key-glyph svg .solid {
    fill: var(--cap-ink);
    stroke-width: 1;
  }
  
  :root:root .chat-page #noticeBellBtn.has-notices .key-glyph svg { stroke: #d8b23a; }
  :root:root .chat-page #noticeBellBtn.has-notices .key-glyph svg .solid { fill: #d8b23a; }

  :root:root .chat-page .notice-count { display: none; }
  :root:root .chat-page #noticeBellBtn.has-notices .notice-count {
    display: block;
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 15px;
    padding: 0 3px;
    border-radius: 8px;
    background: #a32323;
    color: #fff;
    font: 700 9px/15px var(--font-ui);
    text-align: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  }

  

  :root:root .chat-page .video-grid {
    top: calc(var(--safe-t) + var(--top-bar-h) + 4px);
    bottom: calc(var(--tabbar-h) + var(--safe-b) + 5px);
    left: calc(var(--safe-l) + 6px);
    right: calc(var(--safe-r) + 6px);
    padding: 7px;
  }
  
  :root:root .chat-page .video-grid::before { inset: 7px; }

  

  
  :root:root .chat-page .buttons-container { display: none !important; }
  :root:root .chat-page .mobile-control-bar { display: none !important; }

  :root:root .chat-page .mobile-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1002;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
    height: calc(var(--tabbar-h) + var(--safe-b));
    padding: 5px calc(var(--safe-r) + 6px) calc(var(--safe-b) + 5px) calc(var(--safe-l) + 6px);
    box-sizing: border-box;
    border: none;
    background: none;
  }
  
  :root:root .chat-page .mobile-tabbar button:not(:last-child) { border-right: none; }

  
  :root:root .chat-page .mobile-tabbar .proxy-key .key-glyph { display: block; line-height: 0; }
  :root:root .chat-page .mobile-tabbar .proxy-key .key-glyph svg {
    display: block;
    width: 18px;
    height: 18px;
    margin: 0 auto;
  }
  :root:root .chat-page .mobile-tabbar .proxy-label {
    font: 700 8px/1 var(--font-ui);
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .75;
  }

  
  :root:root .chat-page #searchProxyKey .key-glyph svg {
    fill: var(--cap-ink);
    stroke: none;
  }
  :root:root .chat-page #searchProxyKey .glyph-skip { display: none; }
  :root:root .chat-page #searchProxyKey.is-skip .glyph-play { display: none; }
  :root:root .chat-page #searchProxyKey.is-skip .glyph-skip { display: block; }
  
  :root:root .chat-page #searchProxyKey.is-on .key-glyph svg { fill: var(--acc-mint); }

  :root:root .chat-page #muteProxyKey .key-glyph svg {
    fill: none;
    stroke: var(--cap-ink);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  :root:root .chat-page #muteProxyKey .key-glyph svg .mic-body { fill: var(--cap-ink); stroke-width: 1; }
  :root:root .chat-page #muteProxyKey .mic-slash { opacity: 0; }
  :root:root .chat-page #muteProxyKey.down .key-glyph svg { stroke: #a32323; }
  :root:root .chat-page #muteProxyKey.down .key-glyph svg .mic-body { fill: #a32323; }
  :root:root .chat-page #muteProxyKey.down .mic-slash { opacity: 1; }

  

  :root:root .chat-page #mobilePanel,
  :root:root .chat-page .mobile-panel {
    top: calc(var(--safe-t) + var(--top-bar-h));
    bottom: calc(var(--tabbar-h) + var(--safe-b));
  }

  
  :root:root .chat-page .setting-row:has(#audioInputSelect),
  :root:root .chat-page .setting-row:has(#videoInputSelect) { display: none; }

  
  :root:root .chat-page .printer { display: none; }

}


:root:root .chat-page .notice-window {
  width: min(420px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--metal-edge);
  border-radius: 6px;
  background-color: var(--metal);
  background-image: var(--surface-img);
  background-blend-mode: var(--surface-blend);
  box-shadow:
    inset 0 1px 0 var(--metal-hi),
    0 10px 30px rgba(0, 0, 0, .55);
  overflow: hidden;
}
:root:root .chat-page .notice-titlebar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px 7px 11px;
  border-bottom: 1px solid var(--metal-edge);
  background: linear-gradient(180deg, var(--metal-light), var(--metal));
}
:root:root .chat-page .notice-title {
  font: 700 11px/1 var(--font-ui);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--acc-ink);
}
:root:root .chat-page .notice-close {
  margin-left: auto;
  width: 22px;
  height: 20px;
  min-width: 0;
  padding: 0;
  border: 1px solid var(--metal-edge);
  border-radius: 3px;
  background: var(--metal-light);
  background-image: var(--lateral);
  color: var(--cap-ink);
  font: 700 13px/1 var(--font-ui);
  cursor: pointer;
  box-shadow: inset 0 1px 0 var(--metal-hi);
}
:root:root .chat-page .notice-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 6px 0;
  overflow-y: auto;
  background: var(--screen);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6);
}
:root:root .chat-page .notice-row {
  display: flex;
  gap: 9px;
  padding: 7px 11px;
  font-family: var(--font-mono, var(--font-ui));
  font-size: 11px;
  line-height: 1.45;
  color: var(--acc-mint);
}
:root:root .chat-page .notice-row + .notice-row { border-top: 1px solid rgba(255, 255, 255, .06); }
:root:root .chat-page .notice-stamp {
  flex: 0 0 auto;
  opacity: .5;
  font-variant-numeric: tabular-nums;
}
:root:root .chat-page .notice-text { min-width: 0; word-break: break-word; }
:root:root .chat-page .notice-empty {
  margin: 0;
  padding: 26px 0;
  text-align: center;
  font: 700 11px/1 var(--font-ui);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted, #7d8a92);
  opacity: .7;
}


@media (min-width: 900px) {
  :root:root .chat-page #noticeBellBtn { display: none; }
}



:root:root .chat-page .notice-modal {
  position: fixed;
  inset: 0;
  z-index: 2400;
  display: grid;
  place-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px
           calc(env(safe-area-inset-bottom, 0px) + 16px);
  background: rgba(4, 6, 8, .62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
:root:root .chat-page .notice-modal.hidden { display: none !important; }


@media (max-width: 899px) {
  :root:root .chat-page .mobile-tabbar .tab-cosmetics { display: none; }
}



@media (max-width: 899px) {

  

  :root:root .chat-page .mobile-tabbar button,
  
  :root:root .chat-page #noticeBellBtn,
  :root:root .chat-page .top-keys .report-key {
    position: relative;
    top: 0;
    box-sizing: border-box;

    
    border-style: solid;
    border-width: 3px 4px 5px 3px;
    border-top-color: var(--cap-skirt-t);
    border-left-color: var(--cap-skirt-l);
    border-right-color: var(--cap-skirt-r);
    border-bottom-color: var(--cap-skirt-b);
    border-radius: 3px;

    background-color: var(--cap-face-lo);
    background-image:
      linear-gradient(180deg, var(--cap-face-hi) 0%, var(--cap-face-lo) 100%),
      var(--cap-muck),
      var(--noise);
    background-size: auto, auto, 200px 200px;
    background-blend-mode: normal, multiply, soft-light;

    
    box-shadow:
      0 0 0 1px var(--cap-outline),
      0 3px 4px rgba(0, 0, 0, .45),
      0 8px 12px rgba(0, 0, 0, .3);

    color: var(--cap-ink);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
    cursor: pointer;
    transition: top .05s linear, border-width .05s linear, box-shadow .12s ease;
  }
  
  :root:root .chat-page .mobile-tabbar button::before,
  :root:root .chat-page .mobile-tabbar button::after,
  :root:root .chat-page #noticeBellBtn::before,
  :root:root .chat-page #noticeBellBtn::after,
  :root:root .chat-page .top-keys .report-key::before,
  :root:root .chat-page .top-keys .report-key::after { content: none; display: none; }

  
  :root:root .chat-page .mobile-tabbar button:active,
  :root:root .chat-page .mobile-tabbar button.pressed,
  :root:root .chat-page .mobile-tabbar button[data-panel].active,
  :root:root .chat-page #noticeBellBtn:active,
  :root:root .chat-page #noticeBellBtn.pressed,
  :root:root .chat-page #noticeBellBtn[aria-pressed="true"],
  :root:root .chat-page .top-keys .report-key:active {
    top: 3px;
    
    transform: none;
    border-width: 3px 4px 2px 3px;
    border-top-color: var(--cap-skirt-l);
    box-shadow:
      0 0 0 1px var(--cap-outline),
      0 1px 2px rgba(0, 0, 0, .45),
      0 3px 5px rgba(0, 0, 0, .26);
  }

  

  :root:root .chat-page #noticeBellBtn {
    margin-left: auto;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    min-height: 24px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
  }
  :root:root .chat-page #noticeBellBtn .key-glyph { display: block; line-height: 0; }
  :root:root .chat-page #noticeBellBtn .key-glyph svg {
    display: block;
    width: 15px;
    height: 15px;
    fill: none;
    stroke: var(--cap-ink);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .55));
  }
  :root:root .chat-page #noticeBellBtn .key-glyph svg .solid {
    fill: var(--cap-ink);
    stroke-width: 1;
  }

  :root:root .chat-page .notice-count { display: none; }
  :root:root .chat-page #noticeBellBtn.has-notices .notice-count {
    display: block;
    position: absolute;
    top: -6px;
    right: -6px;
    z-index: 2;
    min-width: 15px;
    padding: 0 3px;
    border-radius: 8px;
    background: #a32323;
    color: #fff;
    font: 700 9px/15px var(--font-ui);
    letter-spacing: 0;
    text-align: center;
    text-shadow: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .55);
  }

  

  :root:root .chat-page .mobile-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1002;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 7px;
    align-items: start;
    height: calc(var(--tabbar-h) + var(--safe-b));
    
    padding: 3px calc(var(--safe-r) + 8px) calc(var(--safe-b) + 9px) calc(var(--safe-l) + 8px);
    box-sizing: border-box;
    border: none;
    background: none;
  }
  
  :root:root .chat-page .mobile-tabbar button:not(:last-child) { border-right-width: 4px; }

  :root:root .chat-page .mobile-tabbar button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    min-width: 0;
    height: 36px;
    margin: 0;
    padding: 3px 2px;
    font-size: 8px;
  }

  :root:root .chat-page .mobile-tabbar .proxy-key .key-glyph { display: block; line-height: 0; }
  :root:root .chat-page .mobile-tabbar .proxy-key .key-glyph svg {
    display: block;
    width: 14px;
    height: 14px;
    margin: 0 auto;
    fill: var(--cap-ink);
    stroke: none;
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .55));
  }
  :root:root .chat-page .mobile-tabbar .proxy-label {
    font: 700 8px/1 var(--font-display);
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  
  :root:root .chat-page #searchProxyKey .glyph-skip { display: none; }
  :root:root .chat-page #searchProxyKey.is-skip .glyph-play { display: none; }
  :root:root .chat-page #searchProxyKey.is-skip .glyph-skip { display: block; }

  
  :root:root .chat-page #stopProxyKey {
    border-top-color: #ffd9d2;
    border-left-color: #f3c4bb;
    border-right-color: #b9887f;
    border-bottom-color: #96695f;
    background-color: #cf9c9a;
    background-image:
      linear-gradient(180deg, #edcecd 0%, #d6a4a2 38%, #ae7a78 100%),
      var(--cap-muck),
      var(--noise);
  }
  :root:root .chat-page #stopProxyKey:active,
  :root:root .chat-page #stopProxyKey.pressed {
    border-top-color: #f3c4bb;
    background-image:
      linear-gradient(180deg, #e8c3c2 0%, #d8a6a4 38%, #ae7a78 100%),
      var(--cap-muck),
      var(--noise);
  }
}



@media (max-width: 899px) {
  :root:root .chat-page .video-grid .video-slot { overflow: hidden; }
}



@media (min-width: 900px) {
  
  :root:root .chat-page #noticeBellBtn { display: none; }
  
  :root:root .chat-page .mobile-tabbar .proxy-key { display: none; }
}



:root:root .chat-page .inline-notice {
  margin: 6px 0 2px;
  padding: 6px 9px;
  border-left: 2px solid var(--led-red);
  border-radius: 2px;
  background: rgba(163, 35, 35, .13);
  color: #f0b8b8;
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .02em;
  word-break: break-word;
}

:root:root .chat-page .inline-notice[hidden] { display: none; }




:root:root .chat-page .alert-window { width: min(340px, 100%); }

:root:root .chat-page .alert-body {
  padding: 14px 14px 12px;
  background: var(--screen);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6);
}
:root:root .chat-page .alert-text {
  margin: 0;
  color: var(--acc-mint);
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  word-break: break-word;
}
:root:root .chat-page .alert-text[hidden] { display: none; }

:root:root .chat-page .alert-field { margin-top: 11px; }
:root:root .chat-page .alert-field[hidden] { display: none; }
:root:root .chat-page .alert-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: none;
  border-radius: 4px;
  background: #0b0f11;
  color: var(--acc-mint);
  font-family: var(--font-ui);
  
  font-size: 16px;
  box-shadow:
    inset 1px 1px 0 rgba(0, 0, 0, .9),
    inset -1px -1px 0 rgba(255, 255, 255, .22),
    inset 0 2px 5px rgba(0, 0, 0, .8);
}
:root:root .chat-page .alert-field input:focus { outline: 1px solid var(--acc-mint); }

:root:root .chat-page .alert-actions {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 13px;
}


:root:root .chat-page .alert-key {
  position: relative;
  top: 0;
  min-width: 74px;
  padding: 6px 13px;
  box-sizing: border-box;
  border-style: solid;
  border-width: 3px 4px 5px 3px;
  border-top-color: var(--cap-skirt-t);
  border-left-color: var(--cap-skirt-l);
  border-right-color: var(--cap-skirt-r);
  border-bottom-color: var(--cap-skirt-b);
  border-radius: 3px;
  background-color: var(--cap-face-lo);
  background-image:
    linear-gradient(180deg, var(--cap-face-hi) 0%, var(--cap-face-lo) 100%),
    var(--cap-muck),
    var(--noise);
  background-size: auto, auto, 200px 200px;
  background-blend-mode: normal, multiply, soft-light;
  box-shadow:
    0 0 0 1px var(--cap-outline),
    0 3px 4px rgba(0, 0, 0, .45),
    0 8px 12px rgba(0, 0, 0, .3);
  color: var(--cap-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
  cursor: pointer;
  transition: top .05s linear, border-width .05s linear, box-shadow .12s ease;
}
:root:root .chat-page .alert-key::before,
:root:root .chat-page .alert-key::after { content: none; display: none; }
:root:root .chat-page .alert-key:active {
  top: 3px;
  border-width: 3px 4px 2px 3px;
  border-top-color: var(--cap-skirt-l);
  box-shadow:
    0 0 0 1px var(--cap-outline),
    0 1px 2px rgba(0, 0, 0, .45),
    0 3px 5px rgba(0, 0, 0, .26);
}

:root:root .chat-page .alert-key-go { color: #2c4a34; }



@media (max-width: 899px) {
  :root:root .chat-page .video-grid {
    width: calc(100% - (var(--safe-l) + var(--safe-r) + 12px));
  }
}



@media (max-width: 899px) {
  :root:root .chat-page .video-grid {
    border-radius: 18px;          
    padding: 8px;
  }
  
  :root:root .chat-page .video-grid::before { inset: 8px; }
  :root:root .chat-page .video-grid .video-slot { border-radius: 0 !important; }

  
  :root:root .chat-page .video-grid::after {
    background-image:
      var(--bolt-phillips), var(--bolt-phillips),
      var(--bolt-phillips), var(--bolt-phillips),
      var(--bolt-phillips), var(--bolt-phillips),
      var(--bolt-phillips), var(--bolt-phillips);
    background-size: 10px 10px;
    background-repeat: no-repeat;
    background-position:
      
      4px 4px,
      calc(100% - 4px) 4px,
      4px calc(100% - 4px),
      calc(100% - 4px) calc(100% - 4px),
      
      50% 4px,
      50% calc(100% - 4px),
      4px 50%,
      calc(100% - 4px) 50%;
  }
}



@media (max-width: 899px) {
  :root:root .chat-page .video-slot .volumeControl { display: none !important; }
}



:root:root .chat-page .notice-modal,
:root:root .chat-page #mobilePanel { background: rgba(6, 10, 8, .72); }


:root:root .chat-page .notice-modal.priming,
:root:root .chat-page #mobilePanel.priming {
  opacity: 0;
  pointer-events: none;
  transition: none;
  animation: none;
}
:root:root .chat-page .notice-modal.priming > .notice-window,
:root:root .chat-page #mobilePanel.priming > .panel-content {
  opacity: 0;
  transform: scale(.5);
  transition: none;
  animation: none;
}


:root:root .chat-page .notice-modal.opening,
:root:root .chat-page #mobilePanel.opening {
  animation: profile-dim .18s ease both;
}
:root:root .chat-page .notice-modal.opening > .notice-window,
:root:root .chat-page #mobilePanel.opening > .panel-content {
  animation: profile-in .34s cubic-bezier(.33, .7, .35, 1) both;
  transform-origin: center center;
  will-change: transform;
}

:root:root .chat-page .notice-modal.closing,
:root:root .chat-page #mobilePanel.closing {
  animation: profile-undim .2s ease both;
  pointer-events: none;
}
:root:root .chat-page .notice-modal.closing > .notice-window,
:root:root .chat-page #mobilePanel.closing > .panel-content {
  animation: profile-out .2s cubic-bezier(.4, 0, .8, .4) both;
}

@media (prefers-reduced-motion: reduce) {
  :root:root .chat-page .notice-modal,
  :root:root .chat-page .notice-modal > .notice-window,
  :root:root .chat-page .notice-modal.closing,
  :root:root .chat-page .notice-modal.closing > .notice-window,
  :root:root .chat-page #mobilePanel,
  :root:root .chat-page #mobilePanel > .panel-content,
  :root:root .chat-page #mobilePanel.closing,
  :root:root .chat-page #mobilePanel.closing > .panel-content { animation: none; }
}



@media (max-width: 899px) {
  :root:root .chat-page #searchProxyKey {
    border-top-color: #cfe9c8;
    border-left-color: #b6d9ae;
    border-right-color: #6f9367;
    border-bottom-color: #55764f;
    background-color: #8fb987;
    background-image:
      linear-gradient(180deg, #c3e2bb 0%, #9cc394 38%, #7ba173 100%),
      var(--cap-muck),
      var(--noise);
    color: #22391f;
  }
  :root:root .chat-page #searchProxyKey .key-glyph svg { fill: #22391f; }
  :root:root .chat-page #searchProxyKey:active,
  :root:root .chat-page #searchProxyKey.pressed {
    border-top-color: #b6d9ae;
    background-image:
      linear-gradient(180deg, #b2d7aa 0%, #93bb8b 38%, #7ba173 100%),
      var(--cap-muck),
      var(--noise);
  }
}



@media (max-width: 899px) {
  :root:root .chat-page .video-grid {
    left: 50%;
    right: auto;
    width: calc(100vw - (var(--safe-l) + var(--safe-r) + 12px));
    max-width: calc(100vw - 12px);
    transform: translateX(-50%);
  }
}



:root:root .chat-page .video-slot video { background: #05080a; }



@media (max-width: 899px) {

  

  
  :root:root .chat-page #mobilePanel .panel-content {
    width: 86%;
    max-width: 330px;
    border-radius: 14px;
    overflow: hidden;
  }

  
  :root:root .chat-page #mobilePanel .panel-content > .collapsible-content {
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
    margin: 0;
  }
  
  :root:root .chat-page #mobilePanel .panel-content > .collapsible-content + .collapsible-content {
    border-top: 1px solid var(--metal-edge);
  }

  

  
  :root:root .chat-page .glow-swatches {
    grid-template-columns: repeat(5, 40px);
    justify-content: center;
    gap: 9px;
    padding: 4px 0 6px;
  }
  :root:root .chat-page .glow-swatch {
    height: auto;
    aspect-ratio: 1;
    border-radius: 7px;
  }

  

  
  :root:root .chat-page .inline-notice.is-ok {
    border-left-color: var(--acc-mint, #62e878);
    background: rgba(98, 232, 120, .12);
    color: #bdf0c8;
  }

  

  
  :root:root .chat-page .chat-input-row,
  :root:root .chat-page .buddy-input-row {
    align-items: stretch;
    gap: 8px;
  }
  :root:root .chat-page .chat-input-row button,
  :root:root .chat-page .buddy-input-row button {
    height: auto;
    margin-bottom: 0;
    align-self: stretch;
  }
  :root:root .chat-page .chat-input-row input[type="text"],
  :root:root .chat-page .buddy-input-row input[type="text"] {
    height: auto;
    line-height: normal;
    align-self: stretch;
  }

  
  :root:root #mobilePanel .panel-content #sendChatBtn,
  :root:root #mobilePanel .panel-content #buddyBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 13px;
  }
  :root:root #mobilePanel .panel-content #sendChatBtn img,
  :root:root #mobilePanel .panel-content #buddyBtn img {
    display: block;
    margin: 0;
  }

  

  
  :root:root .chat-page .notice-window { width: min(320px, 88%); border-radius: 12px; }
  :root:root .chat-page .alert-window  { width: min(300px, 88%); }

  :root:root .chat-page .notice-window {
    box-shadow:
      inset 0 1px 0 var(--metal-hi),
      0 6px 0 rgba(0, 0, 0, .35),
      0 18px 34px rgba(0, 0, 0, .6),
      0 40px 70px rgba(0, 0, 0, .45);
  }

  
  :root:root .chat-page .notice-titlebar {
    background-color: var(--metal);
    background-image: var(--surface-img);
    background-blend-mode: var(--surface-blend);
    box-shadow: inset 0 1px 0 var(--metal-hi);
  }

  
  :root:root .chat-page .notice-close {
    position: relative;
    top: 0;
    width: auto;
    min-width: 26px;
    height: auto;
    padding: 3px 8px 4px;
    border-style: solid;
    border-width: 2px 3px 4px 2px;
    border-top-color: #ffd9d2;
    border-left-color: #f3c4bb;
    border-right-color: #b9887f;
    border-bottom-color: #96695f;
    border-radius: 3px;
    background-color: #cf9c9a;
    background-image:
      linear-gradient(180deg, #edcecd 0%, #d6a4a2 38%, #ae7a78 100%),
      var(--cap-muck),
      var(--noise);
    background-size: auto, auto, 200px 200px;
    background-blend-mode: normal, multiply, soft-light;
    box-shadow:
      0 0 0 1px var(--cap-outline),
      0 2px 3px rgba(0, 0, 0, .45),
      0 6px 9px rgba(0, 0, 0, .3);
    color: var(--acc-ink);
    font: 700 12px/1 var(--font-display);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
    transition: top .05s linear, border-width .05s linear, box-shadow .12s ease;
  }
  :root:root .chat-page .notice-close:active,
  :root:root .chat-page .notice-close.pressed {
    top: 3px;
    border-width: 2px 3px 1px 2px;
    border-top-color: #f3c4bb;
    background-image:
      linear-gradient(180deg, #e8c3c2 0%, #d8a6a4 38%, #ae7a78 100%),
      var(--cap-muck),
      var(--noise);
    box-shadow:
      0 0 0 1px var(--cap-outline),
      0 1px 2px rgba(0, 0, 0, .45),
      0 2px 4px rgba(0, 0, 0, .26);
  }

  
  :root:root #mobilePanel .panel-content #buddyBtn.pressed,
  :root:root #mobilePanel .panel-content #sendChatBtn.pressed,
  :root:root #mobilePanel .panel-content #saveCosmeticsBtn.pressed {
    position: relative;
    top: 3px;
    border-width: 3px 4px 2px 3px;
    border-top-color: var(--cap-skirt-l);
  }
  :root:root .chat-page .alert-key.pressed {
    top: 3px;
    border-width: 3px 4px 2px 3px;
    border-top-color: var(--cap-skirt-l);
    box-shadow:
      0 0 0 1px var(--cap-outline),
      0 1px 2px rgba(0, 0, 0, .45),
      0 3px 5px rgba(0, 0, 0, .26);
  }
}



@media (max-width: 899px) {
  :root:root .chat-page .tile-bar .nameLabel {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  :root:root .chat-page .tile-bar .tile-controls {
    flex: 0 0 auto;
    margin-left: auto;
  }
}



@media (hover: none) {
  :root:root .chat-page .video-slot:hover #tileControls1,
  :root:root .chat-page .video-slot:hover #tileControls2,
  :root:root .chat-page .video-slot:hover #tileControls3 {
    opacity: 0;
    visibility: hidden;
  }
  :root:root .chat-page .tile-touch-open #tileControls1,
  :root:root .chat-page .tile-touch-open #tileControls2,
  :root:root .chat-page .tile-touch-open #tileControls3 {
    opacity: 1;
    visibility: visible;
  }
}



@media (max-width: 899px) {

  

  
  :root:root .chat-page .inline-notice {
    margin: 8px 0 6px;
    padding: 0;
    border: none;
    background: none;
    text-align: center;
    font-size: 11px;
    letter-spacing: .04em;
    color: #f0b8b8;
  }
  :root:root .chat-page .inline-notice.is-ok { background: none; color: #9fe0ad; }

  

  
  :root:root .chat-page #mobilePanel .panel-content .cosmetics-inner,
  :root:root .chat-page #mobilePanel .panel-content .settings-inner,
  :root:root .chat-page #mobilePanel .panel-content .buddy-inner {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 14px;
    margin: 0;
  }
  :root:root .chat-page #mobilePanel .panel-content .settings-grid,
  :root:root .chat-page #mobilePanel .panel-content .cosmetics-footer {
    width: 100%;
    box-sizing: border-box;
  }

  
  :root:root .chat-page .glow-swatches {
    grid-template-columns: repeat(5, 32px);
    justify-content: center;
    gap: 8px;
    padding: 8px 0;
  }
  :root:root .chat-page .glow-swatch {
    width: 32px;
    max-width: 32px;
    height: auto;
    aspect-ratio: 1;
    justify-self: center;
    border-radius: 7px;
  }

  

  
  :root:root .chat-page #mobilePanel .panel-content .buddy-inner,
  :root:root .chat-page #mobilePanel .panel-content .buddy-messages,
  :root:root .chat-page #mobilePanel .panel-content .buddy-screen {
    border-radius: 10px;
  }
  :root:root .chat-page #mobilePanel .panel-content .buddy-screen {
    padding: 9px 10px;
    box-sizing: border-box;
  }
  :root:root .chat-page #mobilePanel .panel-content .buddy-input-container {
    padding: 2px 0 0;
  }

  
  :root:root .chat-page #mobilePanel .panel-content .buddy-input-row input[type="text"],
  :root:root .chat-page #mobilePanel .panel-content .chat-input-row input[type="text"] {
    background: var(--screen);
    background-image: none;
    border: none;
    color: var(--acc-mint);
    box-shadow:
      inset  1px  1px 0 rgba(0, 0, 0, .9),
      inset -1px -1px 0 rgba(255, 255, 255, .28),
      inset  0 2px 5px rgba(0, 0, 0, .8);
  }
}



@media (max-width: 899px) {

  
  :root:root .chat-page #mobilePanel .panel-content {
    padding: 7px;
    box-sizing: border-box;
    background-color: var(--metal);
    background-image: var(--surface-img);
    background-blend-mode: var(--surface-blend);
  }

  
  :root:root .chat-page #mobilePanel .panel-content > .collapsible-content {
    border-radius: 9px;
    background: var(--panel-recess, rgba(0, 0, 0, .22));
    box-shadow:
      inset 0 2px 5px rgba(0, 0, 0, .55),
      inset 0 -1px 0 var(--metal-hi);
    overflow: hidden;
  }
  
  :root:root .chat-page #mobilePanel .panel-content > .collapsible-content + .collapsible-content {
    border-top: none;
    margin-top: 7px;
  }

  

  
  :root:root .chat-page #mobilePanel .panel-content .cosmetics-inner,
  :root:root .chat-page #mobilePanel .panel-content .settings-inner,
  :root:root .chat-page #mobilePanel .panel-content .buddy-inner {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 13px;
    margin: 0;
    background: none;
    border: none;
  }

  
  :root:root .chat-page #mobilePanel .panel-content .glowPreviewText,
  :root:root .chat-page #mobilePanel .panel-content .scrolling-boxnameglow p {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--acc-ink);
    text-shadow:
      0 1px 0 rgba(0, 0, 0, .55),
      0 0 8px rgba(0, 0, 0, .35);
  }

  

  
  :root:root .chat-page #mobilePanel .panel-content .buddy-messages,
  :root:root .chat-page #mobilePanel .panel-content .buddy-screen {
    border-radius: 7px;
  }
}



@media (max-width: 899px) {

  
  :root:root .chat-page .video-grid::after { display: none; }

  
  :root:root .chat-page .video-grid::before {
    background-image:
      linear-gradient(90deg,
        rgba(0, 0, 0, 0) calc(50% - 1px), rgba(0, 0, 0, .42) calc(50% - 1px),
        rgba(0, 0, 0, .42) calc(50% + 1px), rgba(0, 0, 0, 0) calc(50% + 1px)),
      linear-gradient(180deg,
        rgba(0, 0, 0, 0) calc(50% - 1px), rgba(0, 0, 0, .42) calc(50% - 1px),
        rgba(0, 0, 0, .42) calc(50% + 1px), rgba(0, 0, 0, 0) calc(50% + 1px));
  }

  
  :root:root .chat-page .video-grid #slot0 { border-top-left-radius:     11px !important; }
  :root:root .chat-page .video-grid #slot1 { border-top-right-radius:    11px !important; }
  :root:root .chat-page .video-grid #slot2 { border-bottom-left-radius:  11px !important; }
  :root:root .chat-page .video-grid #slot3 { border-bottom-right-radius: 11px !important; }
  :root:root .chat-page .video-grid .video-slot { overflow: hidden; }
}




@media (hover: none) {
  :root:root .chat-page .video-slot.tile-touch-open #tileControls1,
  :root:root .chat-page .video-slot.tile-touch-open #tileControls2,
  :root:root .chat-page .video-slot.tile-touch-open #tileControls3 {
    opacity: 1;
    visibility: visible;
  }
}

@media (max-width: 899px) {

  

  
  :root:root .chat-page .video-grid > .video-wrapper,
  :root:root .chat-page .video-grid > .video-wrapper > .video-wrapper {
    background: transparent !important;
  }

  
  :root:root .chat-page .video-grid::before {
    background-image:
      linear-gradient(90deg,
        rgba(0, 0, 0, 0) calc(50% - .5px), rgba(0, 0, 0, .2) calc(50% - .5px),
        rgba(0, 0, 0, .2) calc(50% + .5px), rgba(0, 0, 0, 0) calc(50% + .5px)),
      linear-gradient(180deg,
        rgba(0, 0, 0, 0) calc(50% - .5px), rgba(0, 0, 0, .2) calc(50% - .5px),
        rgba(0, 0, 0, .2) calc(50% + .5px), rgba(0, 0, 0, 0) calc(50% + .5px));
  }

  

  
  :root:root .chat-page #mobilePanel .panel-content { max-width: 300px; }
  :root:root .chat-page .glow-swatches { gap: 7px; }
  :root:root .chat-page .glow-swatch { max-width: 32px; }

  
  :root:root .chat-page #mobilePanel .panel-content .glowPreviewText,
  :root:root .chat-page #mobilePanel .panel-content .scrolling-boxnameglow p {
    color: var(--ink);
    text-shadow:
      0 1px 0 rgba(0, 0, 0, .6),
      0 0 9px rgba(0, 0, 0, .4);
  }
}



@media (max-width: 899px) {

  
  :root:root .chat-page #mobilePanel .panel-content .chat-input-row,
  :root:root .chat-page #mobilePanel .panel-content .buddy-input-row {
    --chat-key: 38px;
    --chat-ring: 1px;
    --chat-line: calc(var(--chat-key) + var(--chat-ring) * 2);
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--chat-line);
    min-height: var(--chat-line);
  }

  
  :root:root .chat-page #mobilePanel .panel-content .chat-input-row #sendChatBtn,
  :root:root .chat-page #mobilePanel .panel-content .buddy-input-row #buddyBtn {
    flex: 0 0 var(--chat-key);
    width: var(--chat-key);
    height: var(--chat-key);
    min-width: 0;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  
  :root:root .chat-page #mobilePanel .panel-content .chat-input-row .mention-wrapper {
    flex: 1 1 auto;
    min-width: 0;
    height: var(--chat-line);
    margin: 0;
    display: block;
  }

  
  :root:root .chat-page #mobilePanel .panel-content .chat-input-row input[type="text"],
  :root:root .chat-page #mobilePanel .panel-content .buddy-input-row input[type="text"] {
    display: block;
    width: 100%;
    height: var(--chat-line);
    min-height: var(--chat-line);
    max-height: var(--chat-line);
    box-sizing: border-box;
    padding: 0 12px;
    margin: 0;
    line-height: var(--chat-line);
    flex: 1 1 auto;
    min-width: 0;
    align-self: center;
  }

  
  :root:root .chat-page #mobilePanel .panel-content .chat-input-row #charCount {
    flex: 0 0 auto;
    align-self: center;
    height: auto;
    margin: 0;
  }
}





:root:root .chat-page .tile-bar .tileBtn,
:root:root .chat-page .tile-controls .tileBtn {
  
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
:root:root .chat-page .tile-bar .tileBtn svg,
:root:root .chat-page .tile-controls .tileBtn svg {
  display: block;
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}


@media (hover: none) {
  :root:root .chat-page .tile-bar .tileBtn,
  :root:root .chat-page .tile-controls .tileBtn {
    width: 32px;
    height: 32px;
    min-width: 32px;
  }
  :root:root .chat-page .tile-bar .tileBtn svg,
  :root:root .chat-page .tile-controls .tileBtn svg {
    width: 16px;
    height: 16px;
  }
}



@media (max-width: 899px) {
  :root:root .chat-page #mobilePanel .panel-content #chatContent {
    padding: 12px 13px;
    box-sizing: border-box;
  }
  
  :root:root .chat-page #mobilePanel .panel-content #chatBox {
    margin-bottom: 10px;
  }
}



:root:root .chat-page .tile-bar .tile-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
}
:root:root .chat-page .tile-bar .tile-controls > * {
  height: 30px;
  min-height: 30px;
  max-height: 30px;
  box-sizing: border-box;
  align-self: center;
  flex: 0 0 auto;
}

:root:root .chat-page .tile-bar .tile-controls .tileBtn {
  width: 30px;
  min-width: 30px;
  padding: 0;
}
:root:root .chat-page .tile-bar .tile-controls .tileBtn svg {
  display: block;
  width: 15px;
  height: 15px;
}

:root:root .chat-page .tile-bar .tile-controls .tileBtn.key95:not(:active):not(.down) { top: 0; }

@media (hover: none) {
  :root:root .chat-page .tile-bar .tile-controls { height: 34px; }
  :root:root .chat-page .tile-bar .tile-controls > * {
    height: 34px;
    min-height: 34px;
    max-height: 34px;
  }
  :root:root .chat-page .tile-bar .tile-controls .tileBtn {
    width: 34px;
    min-width: 34px;
  }
  :root:root .chat-page .tile-bar .tile-controls .tileBtn svg { width: 17px; height: 17px; }
}



@media (max-width: 899px) {
  :root:root .chat-page #mobilePanel .panel-content .chat-input-row {
    padding: 0;
    background: none;
    border-top: none;
    box-shadow: none;
  }
}


@media (max-width: 899px) {
  :root:root .chat-page #mobilePanel .panel-content #chatBox { border-radius: 7px; }
}


:root:root .chat-page .tile-bar .tile-controls .report-key svg { width: 20px; height: 20px; }
@media (hover: none) {
  :root:root .chat-page .tile-bar .tile-controls .report-key svg { width: 22px; height: 22px; }
}



@media (max-width: 899px) {

  :root:root .chat-page .mobile-tabbar .mobile-badge {
    display: block;
    position: absolute;
    
    top: auto;
    right: auto;
    left: 50%;
    bottom: calc(100% - 9px);      
    width: auto;
    height: auto;
    z-index: -1;
    min-width: 26px;
    
    padding: 7px 7px 11px;
    box-sizing: border-box;

    
    background-color: #faf8f2;
    background-image:
      linear-gradient(180deg, #ffffff 0%, #f4f1e8 100%),
      var(--noise);
    background-size: auto, 200px 200px;
    background-blend-mode: normal, multiply;
    border-radius: 2px 2px 1px 1px;
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, .3),
      0 3px 6px rgba(0, 0, 0, .45);

    
    color: #c0271f;
    font-family: "Bradley Hand", "Noteworthy", "Segoe Script", "Ink Free",
                 "Snell Roundhand", cursive;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    
    text-shadow: 0 0 1.5px rgba(192, 39, 31, .55);

    transform: translate(-50%, 100%) rotate(-2.5deg);
    transform-origin: bottom center;
    transition: transform .26s cubic-bezier(.2, .8, .3, 1);
    pointer-events: none;
  }
  
  :root:root .chat-page .mobile-tabbar .mobile-badge::before,
  :root:root .chat-page .mobile-tabbar .mobile-badge::after { content: none; }

  
  :root:root .chat-page .mobile-tabbar .mobile-badge[data-count]:not([data-count="0"]) {
    transform: translate(-50%, 0) rotate(-2.5deg);
  }
  
  :root:root .chat-page .mobile-tabbar .mobile-badge:not([data-count]),
  :root:root .chat-page .mobile-tabbar .mobile-badge[data-count="0"] {
    visibility: hidden;
  }

  @media (prefers-reduced-motion: reduce) {
    :root:root .chat-page .mobile-tabbar .mobile-badge { transition: none; }
  }
}



:root:root .chat-page .video-slot:has(.nameLabel.awaiting-video) .audioBadge {
  opacity: 0;
  pointer-events: none;
}
:root:root .chat-page .video-slot .audioBadge { transition: opacity .18s ease; }



@media (pointer: coarse) {
  :root:root #profileOverlay input,
  :root:root #profileOverlay textarea,
  :root:root #profileOverlay select,
  :root:root #linkPopupOverlay input,
  :root:root #linkPopupOverlay textarea {
    font-size: 16px !important;
  }
}


@media (max-width: 899px) {
  :root:root .chat-page .mobile-tabbar .mobile-badge {
    padding: 5px 7px 15px;      
    font-family: "Mono", ui-monospace, monospace;
    font-weight: 700;
    font-size: 12px;
  }
}




:root:root .chat-page .mention-dropdown {
  transform: none;
  left: 0;
  right: 0;
  width: auto;
  bottom: calc(100% + 8px);
  border-radius: var(--round-sm);
}


:root:root .chat-page .panel-unavailable {
  padding: 26px 18px;
  text-align: center;
}
:root:root .chat-page .panel-unavailable-title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: .55;
}
:root:root .chat-page .panel-unavailable-why {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--muted, #7d8a92);
  opacity: .8;
}


:root:root .chat-page .buddy-input-row input[type="text"]:focus,
:root:root .chat-page .chat-input-row input[type="text"]:focus {
  outline: none;
  box-shadow:
    inset 0 0 0 1.5px var(--acc-mint),
    inset  1px  1px 0 rgba(0, 0, 0, .9),
    inset -1px -1px 0 rgba(255, 255, 255, .28),
    inset  0 2px 5px rgba(0, 0, 0, .8);
}


@media (max-width: 899px) {
  :root:root .chat-page #jumpToBottomBtn { bottom: calc(100% + 14px); }
}



:root:root .chat-page .collapsible-section.section-unavailable {
  opacity: .72;
}
:root:root .chat-page .section-unavailable .collapsible-header {
  cursor: default;
  padding-top: 8px;
  padding-bottom: 9px;
  
  background: linear-gradient(180deg,
    rgba(0, 0, 0, .18), rgba(0, 0, 0, .30) 55%, rgba(0, 0, 0, .38));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
:root:root .chat-page .section-unavailable .collapsible-header:hover { filter: none; }

:root:root .chat-page .section-unavailable .collapsible-header::after { display: none; }

:root:root .chat-page .section-unavailable .collapsible-header h3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 0;
}
:root:root .chat-page .section-unavailable .header-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .45);
  opacity: .62;
}
:root:root .chat-page .section-unavailable .header-why {
  font-family: var(--font-ui);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: lowercase;
  color: var(--muted, #7d8a92);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
}




:root:root .chat-page .notice-modal.is-blocking .notice-close { display: none; }
:root:root .chat-page .notice-modal.is-blocking .alert-text {
  text-align: left;
  line-height: 1.55;
}

:root:root .chat-page .notice-modal.is-blocking .alert-window { width: min(400px, 92%); }




.rotate-me { display: none; }

@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  :root:root .chat-page .rotate-me {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 24px;
    background-color: var(--page);
    background-image: var(--surface-img);
    background-blend-mode: var(--surface-blend);
  }

  
  :root:root .chat-page .rotate-mark {
    width: 46px;
    height: 74px;
    border: 3px solid var(--metal-edge);
    border-radius: 8px;
    background: var(--screen);
    box-shadow:
      inset 0 2px 6px rgba(0, 0, 0, .8),
      0 4px 0 rgba(0, 0, 0, .35);
    transform: rotate(-90deg);
    animation: rotate-hint 2.4s ease-in-out infinite;
  }
  :root:root .chat-page .rotate-say {
    margin: 0;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--acc-amber);
    text-shadow: 0 0 10px color-mix(in srgb, var(--acc-amber) 45%, transparent);
  }

  
  :root:root .chat-page .main-content { pointer-events: none; }
}

@keyframes rotate-hint {
  0%, 30%  { transform: rotate(-90deg); }
  60%, 100% { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  :root:root .chat-page .rotate-mark { animation: none; transform: rotate(0deg); }
}



.bannedclock {
  display: inline-flex;
  align-items: flex-end;
  gap: 22px;
  margin: 22px auto 4px;
  padding: 14px 22px 12px;
  border-radius: 6px;
  
  background:
    linear-gradient(180deg, #23262a 0%, #131518 18%, #0b0d0f 100%);
  border: 1px solid #303539;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    inset 0 -2px 6px rgba(0, 0, 0, .9),
    0 10px 26px rgba(0, 0, 0, .55);
}

.clockcell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.clocklabel {
  font-family: var(--font-ui, sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #c9ced2;
}


.clockdigits {
  position: relative;
  display: block;
  font-family: var(--font-led, "Segment", monospace);
  font-size: 46px;
  line-height: .9;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.clockghost {
  color: #ff2b1f;
  opacity: .05;
  user-select: none;
}

.clocklive {
  position: absolute;
  inset: 0;
  color: #ff2b1f;
  text-shadow:
    0 0 6px rgba(255, 43, 31, .75),
    0 0 18px rgba(255, 43, 31, .45);
}


.bannedclock.done .clocklive {
  color: #3a1512;
  text-shadow: none;
}

.bannedover {
  margin: 8px 0 0;
  font-family: var(--font-ui, sans-serif);
  font-size: 13px;
  color: #cfd6d4;
}

@media (max-width: 560px) {
  .bannedclock { gap: 13px; padding: 11px 14px 9px; }
  .clockdigits { font-size: 32px; }
  .clocklabel  { font-size: 8px; letter-spacing: .16em; }
}




.banned-page {
  min-height: 100dvh;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui, system-ui, sans-serif);
  color: var(--ink, #e4e4e4);
}

.bannedbox {
  margin: 0;
  padding: 24px 18px;
  text-align: center;
}

.bannedbox .cuffsimage {
  display: block;
  max-width: 200px;
  height: auto;
  margin: 0 auto 20px auto;
}

.bannedbox .bannedframe {
  display: block;
  max-width: 300px;
  height: auto;
  margin: 20px auto;
  border-radius: 8px;
  transform: scaleY(0.78);
}

.bannedbox .contactadmin { margin-top: 10px; }



:root:root .chat-page .buddy-row-waiting { opacity: .72; }
:root:root .chat-page .buddy-row-waiting .buddy-name { font-style: italic; }
:root:root .chat-page .buddy-waiting-note {
  margin-left: auto;
  padding-left: 8px;
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--acc-amber, #ffc247);
  white-space: nowrap;
}





:root:root .chat-page .buddy-invite-key {
  position: relative;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 27px;
  padding: 0;
  margin: 0;
  cursor: pointer;
  box-sizing: border-box;

  border-style: solid;
  border-width: 2px 3px 4px 2px;
  border-top-color: #fffdf6;
  border-left-color: #f1ecdc;
  border-right-color: #b4ae9b;
  border-bottom-color: #948e7b;
  border-radius: 3px;

  
  background-color: #e6e0cf !important;
  background-image: linear-gradient(180deg, #f7f4ea 0%, #dcd6c4 100%) !important;

  box-shadow:
    0 0 0 1px #4b473a,
    0 2px 3px rgba(0, 0, 0, .4);
  transition: top .05s linear, border-width .05s linear, box-shadow .12s ease;
}


:root:root .chat-page .buddy-invite-key::before,
:root:root .chat-page .buddy-invite-key::after,
:root:root .chat-page .buddy-invite-key:active::before,
:root:root .chat-page .buddy-invite-key:active::after,
:root:root .chat-page .buddy-invite-key.pressed::before,
:root:root .chat-page .buddy-invite-key.pressed::after {
  content: none !important;
  display: none !important;
  background: none !important;
}


:root:root .chat-page .buddy-invite-key:active,
:root:root .chat-page .buddy-invite-key.pressed,
:root:root .chat-page .buddy-invite-key:focus,
:root:root .chat-page .buddy-invite-key:hover {
  background-color: #e6e0cf !important;
  background-image: linear-gradient(180deg, #f7f4ea 0%, #dcd6c4 100%) !important;
}
:root:root .chat-page .buddy-invite-key:active,
:root:root .chat-page .buddy-invite-key.pressed {
  top: 2px;
  border-width: 2px 3px 2px 2px;
  border-top-color: #f1ecdc;
  box-shadow:
    0 0 0 1px #4b473a,
    0 1px 2px rgba(0, 0, 0, .4);
}



:root:root .chat-page .video-slot.tile-connecting .nameLabel,
:root:root .chat-page .video-slot.tile-connecting .tile-controls,
:root:root .chat-page .video-slot.tile-connecting .audioBadge,
:root:root .chat-page .video-slot.tile-connecting .volumeControl {
  visibility: hidden;
  pointer-events: none;
}



@media (min-width: 900px) {
  :root:root .chat-page .top-logo {
    grid-row: 1;
    grid-column: 2;
    justify-self: center;
    align-self: center;
    height: calc(100% - 6px);
    max-width: 100%;

    position: relative;
    
    pointer-events: none;

    
    z-index: 1570;
  }
}

  
  
  :root:root .chat-page .top-logo .logo-spring {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    pointer-events: none;
  }

  
  
  :root:root .chat-page .top-logo .logo-spring-base {
    position: absolute;
    width: 34px;
    height: 34px;
    pointer-events: none;
    
    filter: drop-shadow(1px 2px 3px rgba(0, 0, 0, .5));
    background-image: url("/css/spring-base.svg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  
  :root:root .chat-page .top-logo .logo-spring-coils {
    position: absolute;
    left: 0;
    top: 0;
    overflow: visible;
    pointer-events: none;
    
    filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, .55));
  }

  :root:root .chat-page .top-logo .logo-plate {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    
    
    padding: 6px 26px;
    gap: 5px;

    border: 1px solid var(--metal-edge);
    border-radius: 5px;
    background-color: var(--metal);
    background-image: var(--surface-img);
    background-blend-mode: var(--surface-blend);

    box-shadow:
      inset 0 1px 0 var(--metal-hi),
      inset 0 -2px 0 rgba(0, 0, 0, .45),
      0 2px 5px rgba(0, 0, 0, .5);

    
    pointer-events: auto;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    will-change: transform;
  }
  :root:root .chat-page .top-logo .logo-plate.logo-plate-held { cursor: grabbing; }

  
  :root:root .chat-page .top-logo .logo-plate::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: var(--bolt-phillips), var(--bolt-phillips);
    background-size: 11px 11px;
    background-repeat: no-repeat;
    background-position: 6px 50%, calc(100% - 6px) 50%;
  }

  
  :root:root .chat-page .top-logo .logo-mark {
    position: relative;
    display: block;
    flex: 0 0 auto;
    align-self: center;

    
    background-color: #262a2d;

    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
  }

  
  :root:root .chat-page .top-logo .logo-mark::after {
    content: "";
    position: absolute;
    inset: 1px 0 -1px 0;
    pointer-events: none;

    background-color: #3a3e42;
    background-image:
      var(--metal-grain), var(--scratched), var(--brushed),
      var(--dents), var(--swirl);
    background-blend-mode:
      soft-light, soft-light, overlay, soft-light, soft-light;

    -webkit-mask-size: inherit;          mask-size: inherit;
    -webkit-mask-position: inherit;      mask-position: inherit;
    -webkit-mask-repeat: inherit;        mask-repeat: inherit;
  }

  :root:root .chat-page .top-logo .logo-mark-icon,
  :root:root .chat-page .top-logo .logo-mark-icon::after {
    -webkit-mask-image: url("/css/logo-icon.svg");
            mask-image: url("/css/logo-icon.svg");
  }
  :root:root .chat-page .top-logo .logo-mark-icon {
    height: 81.5%;
    aspect-ratio: 1.1244;
  }

  
  :root:root .chat-page .top-logo .logo-mark-text,
  :root:root .chat-page .top-logo .logo-mark-text::after {
    -webkit-mask-image: url("/css/logo-text.svg");
            mask-image: url("/css/logo-text.svg");
  }
  :root:root .chat-page .top-logo .logo-mark-text {
    height: 61.6%;
    aspect-ratio: 5.3424;
    transform: translateY(10.94%);
  }


@media (min-width: 900px) and (max-width: 1039px) {
  :root:root .chat-page .top-logo .logo-mark-text { display: none; }
  :root:root .chat-page .top-logo .logo-plate { gap: 0; padding: 6px 18px; }
}



@media (max-width: 899px) {
  
  :root:root .chat-page .main-content > .top-logo { display: none; }

  :root:root .chat-page .main-content > .top-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
  }
  
  :root:root .chat-page .top-bar .top-left { grid-row: 1; grid-column: 1; min-width: 0; }
  :root:root .chat-page .top-bar .top-logo { grid-row: 1; grid-column: 2; }
  
  :root:root .chat-page .top-bar #noticeBellBtn {
    grid-row: 1;
    grid-column: 3;
    justify-self: end;
    margin-left: 0;
  }

  
  :root:root .chat-page .top-bar .top-keys {
    grid-row: 1;
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  
  :root:root .chat-page .top-keys .report-key {
    width: 38px;
    height: var(--bar-key-h);
    min-width: 0;
    min-height: 0;
    max-height: none;
    padding: 0;
    display: grid;
    place-items: center;
    align-self: center;
    margin-bottom: 0;
    opacity: 1;
    
    border-radius: 3px;
  }
  
  :root:root .chat-page .top-keys .report-key svg {
    display: block;
    width: 10px;
    height: 8.8px;
  }
  
  :root:root .chat-page .top-keys .report-key svg,
  :root:root .chat-page .top-keys .report-key svg path {
    fill: var(--cap-ink);
  }

  
  :root:root .chat-page .top-bar #topProfilePicture {
    width: var(--bar-key-h);
    height: var(--bar-key-h);
    box-sizing: border-box;
  }

  :root:root .chat-page .top-bar .top-logo {
    position: relative;
    height: var(--bar-key-h);
    justify-self: center;
    pointer-events: auto;
    
    z-index: 1550;
  }

  
  :root:root .chat-page .top-logo .logo-plate {
    gap: 3px;
    padding: 4px 14px;
  }
  
  :root:root .chat-page .top-logo .logo-plate::after {
    background-size: 8px 8px;
    background-position: 4px 50%, calc(100% - 4px) 50%;
  }

  
  :root:root .chat-page .top-logo .logo-spring-base {
    width: calc(var(--bar-key-h) - 2px);
    height: calc(var(--bar-key-h) - 2px);
  }

  
  :root:root .chat-page .top-bar .logout-container { display: none; }

  
  :root:root .chat-page .settings-inner .logout-container {
    display: flex;
    justify-content: center;
    margin: 14px 0 2px;
    padding-top: 14px;
    border-top: 1px solid var(--metal-edge);
  }
  :root:root .chat-page .settings-inner .logout-link {
    min-width: 50%;
    padding: 7px 14px;
    font-size: 11px;
  }
}



@media (min-width: 900px) {
  :root:root .chat-page.streamer .top-logo {
    
    grid-area: ident;
    justify-self: end;

    
    align-self: stretch;
    height: auto;
    max-width: none;
  }

  :root:root .chat-page.streamer .top-logo .logo-mark-text { display: none; }

  :root:root .chat-page.streamer .top-logo .logo-plate {
    gap: 0;
    
    padding: 6px 20px;
  }

  
  :root:root .chat-page.streamer .top-logo {
    position: relative;
    z-index: 1550;
    
    pointer-events: auto;
  }
  :root:root .chat-page.streamer .top-logo .logo-plate { pointer-events: auto; }

  
  :root:root .chat-page.streamer .top-bar { position: relative; z-index: 0; }

}



@media (min-width: 900px) {
  :root:root .chat-page .top-bar {
    
    --ident-h: calc(3vw - 10px);
    padding-top: 0;
    padding-bottom: 0;
  }

  
  :root:root .chat-page.streamer .main-content > .top-bar {
    display: flex;
    grid-template-columns: none;
    align-items: center;

    
    gap: 0;

    
    align-self: stretch;
  }

  :root:root .chat-page.streamer .top-bar .top-left {
    display: flex;
    align-items: center;
    height: 100%;
    flex: 1;
  }

  
  :root:root .chat-page.streamer .top-bar .identity { height: 100%; }
  :root:root .chat-page.streamer .top-bar .user-info { height: auto; }

  
  :root:root .chat-page.streamer .top-bar .profile-picture-container {
    position: relative;
    width: auto;
    height: 100%;
    aspect-ratio: 1;
  }
  :root:root .chat-page.streamer .top-bar #topProfilePicture {
    position: absolute;
    inset: 0;
  }

  :root:root .chat-page .top-bar .top-left { padding: 0; }

  :root:root .chat-page .top-bar .identity {
    display: flex;
    align-items: stretch;
    gap: 8px;
    height: var(--ident-h);
    margin: 0;
  }

  
  :root:root .chat-page .top-bar .profile-picture-container {
    width: var(--ident-h);
    height: var(--ident-h);
    padding: 0;
    flex: 0 0 auto;
  }

  
  :root:root .chat-page .top-bar #topProfilePicture {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    object-fit: cover;
  }

  
  :root:root .chat-page .top-bar .user-info {
    height: var(--ident-h);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    margin: 0;
    padding: 0;
  }
  :root:root .chat-page .top-bar .user-info .username-display { margin: 0; }
  :root:root .chat-page .top-bar .logout-container { margin: 0; }
}




:root:root #alertModal .alert-picture {
  position: relative;
  margin: 0 0 12px;
  border: 1px solid var(--metal-edge);
  border-radius: var(--round-sm);
  background: #0b0f11;
  overflow: hidden;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .75);
  line-height: 0;
}


:root:root #alertModal .alert-picture.no-frame {
  min-height: 128px;
}
:root:root #alertModal .alert-picture img {
  display: block;
  width: 100%;
  height: auto;
  
  max-height: 48vh;
  object-fit: contain;
  margin: 0 auto;
}


:root:root #alertModal .alert-picture-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 7px 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.2;
  color: #f0f5f8;
  background: linear-gradient(180deg, rgba(8, 12, 14, 0) 0%, rgba(8, 12, 14, .82) 55%);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}



:root:root #alertModal .alert-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 12px;
}

:root:root #alertModal .alert-key-page {
  font-size: 11px;
  padding: 6px 12px;
}


:root:root #alertModal .alert-key-page.is-end {
  opacity: .42;
  cursor: default;
}

:root:root #alertModal .alert-key-page.is-end:active {
  top: 0;
  border-width: 3px 4px 5px 3px;
  border-top-color: var(--cap-skirt-t);
}

:root:root #alertModal .alert-pager-count {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-width: 44px;
  text-align: center;
}




:root:root .chat-page #tileControls0 .report-key {
  
  position: relative;
  top: 0;
  transform: none;
  min-width: 0;
  
  font-size: var(--tile-name, 16px);
  height: 1em;
  width: calc(1em * 595 / 520);
  
  min-height: 1em;
  max-height: 1em;
  
  align-self: center;
  margin-bottom: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  
  opacity: .19;
  
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, .2))
    drop-shadow(0 2px 3px rgba(0, 0, 0, .6));
  transition: opacity .16s ease, transform .16s ease, filter .16s ease;
}


:root:root .chat-page #tileControls0 {
  height: auto;
  min-height: 0;
  max-height: none;
  align-items: center;
}


:root:root .chat-page #tileControls0 .report-key::before,
:root:root .chat-page #tileControls0 .report-key::after {
  content: none;
  display: none;
}


:root:root .chat-page #tileControls0 .report-key svg,
:root:root .chat-page #tileControls0 .report-key svg path {
  fill: #eef3f5;
}

:root:root .chat-page #tileControls0 .report-key svg {
  display: block;
  width: 100%;
  height: 100%;
}

:root:root .chat-page #tileControls0 .report-key:hover,
:root:root .chat-page #tileControls0 .report-key:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, .32))
    drop-shadow(0 3px 5px rgba(0, 0, 0, .65));
}


:root:root .chat-page #tileControls0 .report-key:active {
  top: 0;
  transform: translateY(0);
  border-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  :root:root .chat-page #tileControls0 .report-key { transition: opacity .16s ease; }
  :root:root .chat-page #tileControls0 .report-key:hover,
  :root:root .chat-page #tileControls0 .report-key:focus-visible { transform: none; }
}


:root:root #alertModal .alert-pager[hidden],
:root:root #alertModal .alert-picture[hidden] { display: none; }




@media (min-width: 900px) {
  
  :root:root .chat-page .top-bar .top-keys { display: none; }

  :root:root .chat-page .notice-close {
    position: relative;
    top: 0;
    width: auto;
    min-width: 26px;
    height: auto;
    border-style: solid;
    border-width: 2px 3px 4px 2px;
    border-top-color: #ffd9d2;
    border-left-color: #f3c4bb;
    border-right-color: #b9887f;
    border-bottom-color: #96695f;
    border-radius: 3px;
    background-color: #cf9c9a;
    background-image:
      linear-gradient(180deg, #edcecd 0%, #d6a4a2 38%, #ae7a78 100%),
      var(--cap-muck),
      var(--noise);
    background-size: auto, auto, 200px 200px;
    background-blend-mode: normal, multiply, soft-light;
    box-shadow:
      0 0 0 1px var(--cap-outline),
      0 2px 3px rgba(0, 0, 0, .45),
      0 6px 9px rgba(0, 0, 0, .3);
    color: var(--acc-ink);
    font: 700 12px/1 var(--font-display);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
    transition: top .05s linear, border-width .05s linear, box-shadow .12s ease;
  }
  :root:root .chat-page .notice-close:active {
    top: 3px;
    border-width: 2px 3px 1px 2px;
    border-top-color: #f3c4bb;
    background-image:
      linear-gradient(180deg, #e8c3c2 0%, #d8a6a4 38%, #ae7a78 100%),
      var(--cap-muck),
      var(--noise);
    box-shadow:
      0 0 0 1px var(--cap-outline),
      0 1px 2px rgba(0, 0, 0, .45),
      0 2px 4px rgba(0, 0, 0, .26);
  }
}


:root:root .chat-page .notice-close {
  display: grid;
  place-items: center;
  padding: 5px 7px 3px 8px;
  line-height: 1;
}




:root:root .chat-page .video-slot .tilePreview {
  position: absolute;
  inset: 0;
  z-index: 4;
  background-size: cover;
  background-position: center;
  filter: blur(18px) saturate(1.1);
  
  transform: scale(1.25);
  opacity: 1;
  transition: opacity .45s ease;
  pointer-events: none;
}


:root:root .chat-page .video-slot .tilePreview.gone { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  :root:root .chat-page .video-slot .tilePreview { transition: opacity .1s linear; }
}




:root:root .chat-page .video-slot .tileFreeze {
  position: absolute;
  inset: 0;
  
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  
  object-position: center 38%;
  pointer-events: none;
}



:root:root .chat-page .vsc-controller,
:root:root .chat-page .video-slot .vsc-controller {
  display: none !important;
}








:root:root .chat-page .video-slot .tileStatic,
:root:root .chat-page .video-slot .tileFreeze {
  pointer-events: none;
}


:root:root .chat-page .video-slot video {
  z-index: 3;
}

:root:root .chat-page .video-slot .tileStatic {
  
  z-index: 1;
  position: absolute;
  
  inset: -4px;
  
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  
  image-rendering: auto;
  
  filter: blur(.5px);
  
  opacity: .8;
  pointer-events: none;
}


:root:root .chat-page .video-slot .overlay { display: none !important; }




:root:root .chat-page .video-slot video {
  background: transparent;
}




:root:root .chat-page .chat-clear {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(10px, 5%, 30px);
  
  z-index: 1;
  
  pointer-events: auto;
}




:root:root .chat-page .chat-clear-screen {
  box-sizing: border-box;
  
  width: max-content;
  max-width: 86%;
  padding: clamp(6px, 2.2cqi, 11px) clamp(9px, 3.2cqi, 15px);
  border-radius: var(--round);
  background-color: #060a0c;
  background-image: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, .05) 0 1px, rgba(0, 0, 0, 0) 1px 4px);
  box-shadow:
    
    0 0 0 2px var(--metal-dark),
    0 0 0 4px var(--metal-light),
    0 0 0 5px var(--metal-edge),
    0 2px 5px 5px rgba(0, 0, 0, .28),
    
    inset 0 0 0 1px rgba(0, 0, 0, .85),
    inset 0 4px 6px -2px rgba(0, 0, 0, .55),
    inset 0 0 7px 1px rgba(0, 0, 0, .3),
    inset 3px 0 5px -2px rgba(0, 0, 0, .4),
    inset 0 -3px 5px -2px rgba(0, 0, 0, .36),
    inset -3px 0 5px -2px rgba(0, 0, 0, .33);
}




:root:root .chat-page .chat-clear-bin {
  --led: #2fe07d;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(3px, 1.2cqi, 7px);
  width: auto;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  cursor: pointer;
  color: var(--led);
  transition: color .18s ease;
}


:root:root .chat-page .chat-clear.is-armed .chat-clear-bin { --led: #ff5340; }



:root:root .chat-page .chat-clear-bin .bin {
  display: block;
  width: clamp(22px, 8.5cqi, 38px);
  height: auto;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px color-mix(in srgb, currentColor 55%, transparent));
  transition: filter .18s ease;
}


:root:root .chat-page .chat-clear-bin .bin-trash {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
}


:root:root .chat-page .chat-clear-bin .bin-ribs { opacity: .8; }


:root:root .chat-page .chat-clear.is-clear .chat-clear-bin .bin-trash {
  opacity: 0;
}


:root:root .chat-page .chat-clear-bin .bin-lid {
  transform-box: fill-box;
  transform-origin: 15% 100%;
  transform: rotate(-9deg) translateY(-1px);
  transition: transform .2s var(--spring);
}
:root:root .chat-page .chat-clear.is-clear .chat-clear-bin .bin-lid {
  transform: none;
}
:root:root .chat-page .chat-clear.is-armed .chat-clear-bin .bin-lid {
  transform: rotate(-17deg) translateY(-3px);
}


:root:root .chat-page .chat-clear-bin.is-knocked .bin { animation: bin-knock .34s ease; }
@keyframes bin-knock {
  0%   { transform: translateY(0)    rotate(0deg); }
  25%  { transform: translateY(-3px) rotate(-6deg); }
  55%  { transform: translateY(0)    rotate(4deg); }
  80%  { transform: translateY(0)    rotate(-2deg); }
  100% { transform: translateY(0)    rotate(0deg); }
}





:root:root .chat-page .chat-clear-word {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(7px, 2.7cqi, 12px);
  letter-spacing: .04em;
  white-space: nowrap;
  text-transform: lowercase;
  color: currentColor;
  text-shadow: 0 0 7px color-mix(in srgb, currentColor 60%, transparent);
}




:root:root .chat-page .chat-clear.is-clear .chat-clear-bin {
  cursor: default;
  opacity: .55;
}

@media (prefers-reduced-motion: reduce) {
  :root:root .chat-page .chat-clear-bin .bin,
  :root:root .chat-page .chat-clear-bin .bin-lid { transition: none; animation: none; }
}



:root:root .chat-page .chat-input-row button,
:root:root .chat-page .chat-input-row button *,
:root:root .chat-page .buddy-input-row button,
:root:root .chat-page .buddy-input-row button * {
  cursor: pointer;
}
:root:root .chat-page .chat-input-row button[aria-disabled="true"],
:root:root .chat-page .chat-input-row button[aria-disabled="true"] * {
  cursor: default;
}





:root:root .chat-page .buttons-container .search-button .search-placeholder,
:root:root .chat-page .buttons-container .search-button .search-status,
:root:root .chat-page .buttons-container .search-button .status-bracket,
:root:root .chat-page .buttons-container .search-button .status-text {
  text-shadow:
    0 -1px 0 rgba(0, 0, 0, .32),
    0  1px 0 rgba(255, 255, 255, .95),
    0  2px 2px rgba(255, 255, 255, .55);
}



:root:root .chat-page #tileControls0 .report-key { visibility: hidden; }
:root:root .chat-page #slot0.has-picture #tileControls0 .report-key {
  visibility: visible;
}




:root:root .chat-page .shutter .shutter-mark {
  display: none;

  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  
  height: var(--badge-size, 18%);
  aspect-ratio: 112 / 100;       
  overflow: visible;             
  pointer-events: none;
}

:root:root .chat-page .shutter .shutter-mark .badge-face {
  width: 100%;
  height: 100%;

  
  background-color: #64625e;
  background-image:
    var(--spun-img),
    var(--brushed),
    var(--scratched),
    var(--surface-img),
    
    linear-gradient(176deg,
      hsl(40 4% var(--badge-dark, 14%))   0%,
      hsl(40 4% calc(var(--badge-dark, 14%) + (var(--badge-light, 48%) - var(--badge-dark, 14%)) * .35)) 16%,
      hsl(40 4% calc(var(--badge-dark, 14%) + (var(--badge-light, 48%) - var(--badge-dark, 14%)) * .82)) 36%,
      hsl(40 4% var(--badge-light, 48%))  50%,
      hsl(40 4% calc(var(--badge-dark, 14%) + (var(--badge-light, 48%) - var(--badge-dark, 14%)) * .74)) 64%,
      hsl(40 4% calc(var(--badge-dark, 14%) + (var(--badge-light, 48%) - var(--badge-dark, 14%)) * .30)) 84%,
      hsl(40 4% var(--badge-dark, 14%)) 100%);
  background-size:
    var(--spun-size),
    220% 220%,
    170% 170%,
    auto, auto, auto, auto, auto, auto, auto,
    100% 100%;
  background-blend-mode:
    var(--spun-blend),
    overlay,
    overlay,
    var(--surface-blend),
    normal;

  -webkit-mask-image: url("/css/logo-icon.svg");
  mask-image: url("/css/logo-icon.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}












@media (min-width: 900px) {
  :root:root .chat-page .chat-input-row {
    align-items: stretch;

    
    --send-side: calc(var(--rail-h) - 22px);
    
    --send-skirt: 4px;
  }

  
  :root:root .chat-page .chat-input-row .mention-wrapper {
    position: relative;
    display: flex;
    width: 100%;
    align-self: stretch;
  }

  
  :root:root .chat-page .chat-input-row .mention-wrapper #chatInput {
    height: 100%;
    align-self: stretch;
    line-height: normal;
  }

  
  :root:root .chat-page .chat-input-row #sendChatBtn {
    width: var(--send-side);
    height: calc(var(--send-side) - var(--send-skirt));
    aspect-ratio: auto;
    align-self: flex-start;
    flex: 0 0 auto;
  }
}



@media (min-width: 900px) {
  
  :root:root .chat-page .top-bar { --ident-h: 48px; }

  
  :root:root .chat-page .top-bar .identity .user-info {
    justify-content: space-between;
    gap: 0;
  }
  :root:root .chat-page .top-bar .logout-container { margin-top: 0; }
}




@media (min-width: 900px) {
  
  :root:root .chat-page.streamer .top-logo .logo-spring-base {
    width: 28px;
    height: 28px;
  }
}



@media (min-width: 900px) {
  
  :root:root .chat-page.streamer .top-bar {
    --door: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%23ffffff' stroke-opacity='.6' transform='translate(0,1.4)'%3E%3Cpath d='M13 3H6a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h7'/%3E%3Cpath d='M17.5 15.5 21 12l-3.5-3.5'/%3E%3Cpath d='M21 12H10'/%3E%3C/g%3E%3Cg stroke='%2310160f' stroke-opacity='.92'%3E%3Cpath d='M13 3H6a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h7'/%3E%3Cpath d='M17.5 15.5 21 12l-3.5-3.5'/%3E%3Cpath d='M21 12H10'/%3E%3C/g%3E%3C/svg%3E");
  }

  :root:root .chat-page.streamer .top-bar .top-left {
    container-type: inline-size;
    container-name: ident;
    box-sizing: border-box;
    padding-right: 66px;
  }

  /* Whatever else happens, the name yields instead of overflowing. A flex item
     will not shrink below its content without this. */
  /*
   * Now it CAN shrink, because there is finally something to shrink against.
   *
   * A flex item will not go below its content unless told to, so the cluster
   * sat at 159.7 inside a 121.2 opening and simply hung out of it. This was
   * tried once before and collapsed everything to 0px -- but that was against
   * a hand-faked fullscreen where the rail itself measured zero, so shrinking
   * to fit it meant shrinking to nothing. In real F11 the rail is 187.2 with
   * 66 reserved for the plate, so fitting it means fitting 121.2, and the name
   * truncates into what is left instead of running under the plate.
   */
  :root:root .chat-page.streamer .top-bar .identity {
    min-width: 0;
    max-width: 100%;
  }

  /*
   * (The note below is kept because the trap is real: this is only safe while
   * the rail has a width of its own.)
   *
   * That was tried and it collapsed the whole cluster: .top-left is `flex: 1`
   * with a zero basis, so the moment its contents were allowed to shrink to
   * nothing the rail handed it nothing and the picture, the name and the key
   * all measured 0px wide. The floor has to stay on the cluster; only the text
   * column inside it is allowed to give.
   */
  /*
   * `align-items: stretch`, and that is the line that does the work.
   *
   * .user-info is a flex column set to flex-start, which sizes its children to
   * their own content and lets them ignore the column entirely -- so the name
   * measured 118px inside a 46px space and simply ran on under the plate.
   * Truncation cannot happen to a box that was never made to fit. Stretched,
   * the name is the column's width and the ellipsis has something to bite on.
   */
  :root:root .chat-page.streamer .top-bar .user-info {
    min-width: 0;
    align-items: stretch;
    
    flex: 1 1 auto;
  }
  :root:root .chat-page.streamer .top-bar .username-display {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  @container ident (max-width: 190px) {
    :root:root .chat-page.streamer .top-bar .username-display { font-size: 10px; }

    
    
    :root:root .chat-page.streamer .top-bar .logout-link {
      font-size: 8px;
      padding: 0;
      min-height: 0;
      width: 24px;
      height: 24px;
      flex: 0 0 auto;
    }
    :root:root .chat-page.streamer .top-bar .username-display { line-height: 16px; }
    :root:root .chat-page.streamer .top-bar .user-info {
      gap: 4px;
      justify-content: flex-start;
    }
  }

  
  @container ident (max-width: 150px) {
    
    :root:root .chat-page.streamer .top-bar .logout-link {
      font-size: 0;
      
      padding: 0;
      background-image: none;
    }
    
    :root:root .chat-page.streamer .top-bar .logout-link::before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      
      background: var(--door) center / 13px 13px no-repeat;
    }
  }
}




@media (min-width: 900px) {
  
  :root:root .chat-page.streamer .top-bar .identity { min-height: 44px; }

  
  :root:root .chat-page.streamer .buttons-container { align-items: flex-start; }
  :root:root .chat-page.streamer .buttons-container .search-button {
    height: auto;
    min-height: 0;
    aspect-ratio: 1 / 1;
  }

  :root:root .chat-page.streamer .local-chat-section .chat-input-row {
    overflow: visible;
  }
}





:root:root .chat-page .usernameSpan {
  position: relative;
  top: 0;
  transition: color .18s ease, top .18s ease;
}
:root:root .chat-page .usernameSpan:hover {
  color: #c0c0c0;
  top: -1px;
}

:root:root .chat-page .usernameSpan:active {
  top: 1px;
  transition-duration: .06s;
}

@media (prefers-reduced-motion: reduce) {
  :root:root .chat-page .usernameSpan,
  :root:root .chat-page .usernameSpan:hover,
  :root:root .chat-page .usernameSpan:active { top: 0; }
}




@media (min-width: 900px) {
  
  :root:root .chat-page.streamer .main-content {
    grid-template-rows: auto auto auto minmax(0, 1fr);
    grid-template-areas:
      "ident    camera"
      "controls camera"
      "chat     camera"
      "panels   camera";
  }
  :root:root .chat-page.streamer .top-logo { display: none; }

  

  
  :root:root .chat-page.streamer .top-logo {
    grid-area: brand;
    
    justify-self: center;
    align-self: start;
    width: auto;
    max-width: 100%;
    height: 40px;
  }
  
  :root:root .chat-page.streamer .top-logo .logo-mark-text { display: block; }
  :root:root .chat-page.streamer .top-logo .logo-plate {
    gap: 7px;
    
    padding: 6px 20px;
  }

  
  :root:root .chat-page.streamer .top-logo .logo-mark-text {
    transform: translateY(5.5%);
  }

  

  
  :root:root .chat-page.streamer .top-bar .identity {
    min-height: 34px;
    align-items: center;
    gap: 9px;
  }

  
  :root:root .chat-page.streamer .top-bar {
    align-items: center;
    align-self: center;
  }
  :root:root .chat-page.streamer .top-bar .top-left { align-self: center; }

  
  :root:root .chat-page.streamer .top-bar .user-info { display: contents; }

  
  
  :root:root .chat-page.streamer .top-bar .top-left {
    padding-right: 0;
    justify-content: center;
  }

  
  :root:root .chat-page.streamer .top-bar .username-display { flex: 1 1 0%; }

  :root:root .chat-page.streamer .top-bar .username-display {
    font-size: 13px;
    line-height: 1.1;
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  :root:root .chat-page.streamer .top-bar .logout-container {
    flex: 0 0 auto;
    margin: 0;
  }

  
  
  :root:root .chat-page.streamer .top-bar .logout-link {
    font-size: 9px;
    width: auto;
    height: auto;
    min-height: 22px;
    padding: 0 9px;
    flex: 0 0 auto;
    background-image: none;
  }
  :root:root .chat-page.streamer .top-bar .logout-link::before { content: none; }

  
  
  :root:root .chat-page.streamer .top-bar .identity {
    flex: 1 1 auto;
    width: 100%;
    justify-content: flex-start;
  }
  :root:root .chat-page.streamer .top-bar .logout-container { margin-left: auto; }
  :root:root .chat-page.streamer .top-bar .username-display { flex: 0 1 auto; }
}






:root:root .chat-page .chat-shutter > span::after {
  content: "";
  position: absolute;



  inset: 0 0 15px 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='30' viewBox='0 0 26 30'%3E%3Crect x='5.2' y='5.300000000000001' width='15.6' height='4.4' rx='1.5' fill='%23ffffff' fill-opacity='.30'/%3E%3Crect x='5.2' y='3.7' width='15.6' height='4.4' rx='1.5' fill='%23000000' fill-opacity='.42'/%3E%3Crect x='5.6000000000000005' y='4.5' width='14.8' height='4' rx='1.3' fill='%2305070a' fill-opacity='.86'/%3E%3Crect x='5.6000000000000005' y='4.5' width='14.8' height='1' rx='.45' fill='%23000000' fill-opacity='.38'/%3E%3Crect x='-7.8' y='20.3' width='15.6' height='4.4' rx='1.5' fill='%23ffffff' fill-opacity='.30'/%3E%3Crect x='-7.8' y='18.7' width='15.6' height='4.4' rx='1.5' fill='%23000000' fill-opacity='.42'/%3E%3Crect x='-7.3999999999999995' y='19.5' width='14.8' height='4' rx='1.3' fill='%2305070a' fill-opacity='.86'/%3E%3Crect x='-7.3999999999999995' y='19.5' width='14.8' height='1' rx='.45' fill='%23000000' fill-opacity='.38'/%3E%3Crect x='18.2' y='20.3' width='15.6' height='4.4' rx='1.5' fill='%23ffffff' fill-opacity='.30'/%3E%3Crect x='18.2' y='18.7' width='15.6' height='4.4' rx='1.5' fill='%23000000' fill-opacity='.42'/%3E%3Crect x='18.599999999999998' y='19.5' width='14.8' height='4' rx='1.3' fill='%2305070a' fill-opacity='.86'/%3E%3Crect x='18.599999999999998' y='19.5' width='14.8' height='1' rx='.45' fill='%23000000' fill-opacity='.38'/%3E%3C/svg%3E");
  
  background-size: 26px 30px;   
  
  background-position: 0 100%;
  background-repeat: repeat;
}


:root:root .chat-page .chat-shutter {
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .7),
    inset 0 4px 6px -3px rgba(0, 0, 0, .4),
    inset 0 0 8px 1px rgba(0, 0, 0, .2),
    inset 5px 0 8px -5px rgba(0, 0, 0, .4),
    inset -5px 0 8px -5px rgba(0, 0, 0, .38),
    inset 0 -3px 5px -3px rgba(0, 0, 0, .26);
}

:root:root .chat-page .chat-shutter::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  
  background-image:
    linear-gradient(90deg,
      rgba(0, 0, 0, .34) 0, rgba(0, 0, 0, .12) 6px, rgba(0, 0, 0, 0) 14px),
    linear-gradient(270deg,
      rgba(0, 0, 0, .34) 0, rgba(0, 0, 0, .12) 6px, rgba(0, 0, 0, 0) 14px);
  background-blend-mode: normal, normal;
  opacity: .85;
}
















:root:root .chat-page .tile-watermark {
  position: absolute;
  right: 3.4cqi;
  bottom: 2.8cqi;
  width: 21cqi;
  
  aspect-ratio: 5.3424;
  
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  
  transition: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55));
}
:root:root .chat-page .tile-watermark span {
  position: absolute;
  inset: 0;
  background-color: #b6bcc1;
  -webkit-mask: url("/css/logo-text.svg") center / contain no-repeat;
          mask: url("/css/logo-text.svg") center / contain no-repeat;
}


:root:root .chat-page .video-slot.occupied:has(.nameLabel:not(.awaiting-video)) .tile-watermark,

:root:root .chat-page .video-slot:has(.tileFreeze[data-holding]) .tile-watermark {
  opacity: .8;
  transition: opacity .22s ease;
}


@media (max-width: 899px) {
  :root:root .chat-page .tile-watermark { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  :root:root .chat-page .tile-watermark { transition: none; }
  :root:root .chat-page .video-slot.occupied:has(.nameLabel:not(.awaiting-video)) .tile-watermark,
  :root:root .chat-page .video-slot:has(.tileFreeze[data-holding]) .tile-watermark {
    transition: none;
  }
}




:root:root .chat-page .chat-shutter > span::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  
  height: 15px;
  background-color: var(--metal);
  background-image: var(--metal-grain);
  background-blend-mode: soft-light;
  box-shadow:
    inset 0 1px 0 rgba(0, 0, 0, .55),
    inset 0 2px 0 rgba(255, 255, 255, .13),
    inset 0 -3px 5px -2px rgba(0, 0, 0, .45),
    inset 0 -1px 0 rgba(0, 0, 0, .5);
}








:root:root .chat-page #tileControls1,
:root:root .chat-page #tileControls2,
:root:root .chat-page #tileControls3 {
  transition: opacity .18s ease, visibility 0s linear .18s;
}
:root:root .chat-page .video-slot:hover #tileControls1,
:root:root .chat-page .video-slot:hover #tileControls2,
:root:root .chat-page .video-slot:hover #tileControls3,
:root:root .chat-page .tile-touch-open #tileControls1,
:root:root .chat-page .tile-touch-open #tileControls2,
:root:root .chat-page .tile-touch-open #tileControls3 {
  transition: opacity .18s ease, visibility 0s linear 0s;
}


:root:root .chat-page .top-right .online-case {
  box-shadow:
    inset 0 1px 0 var(--metal-hi),
    inset 0 -2px 0 rgba(0, 0, 0, .45),
    0 2px 5px rgba(0, 0, 0, .5);
}
:root:root .chat-page #topProfilePicture {
  box-shadow:
    inset 0 1px 0 var(--metal-hi),
    0 3px 4px rgba(0, 0, 0, .45),
    0 8px 12px rgba(0, 0, 0, .3);
}

:root:root .chat-page .username-display {
  text-shadow:
    0 2px 3px rgba(0, 0, 0, .55),
    0 5px 9px rgba(0, 0, 0, .35);
}


:root:root .chat-page .chat-input-row input[type="text"],
:root:root .chat-page #chatInput {
  letter-spacing: normal;
}


@media (min-width: 900px) {
  
}



:root:root .chat-page .tile-bar .volumeControl:not(.silenced) {
  visibility: inherit;
}



:root:root .chat-page.no-chat-anim .local-chat-section .collapsible-content,
:root:root .chat-page.no-chat-anim .local-chat-section .collapsible-content.active,
:root:root .chat-page.no-chat-anim .chat-shutter,
:root:root .chat-page.no-chat-anim .chat-pull {
  transition: none !important;
  animation: none !important;
}



@media (max-width: 899px) {

  
  :root:root .chat-page .top-bar .username-display {
    padding: 0 10px 14px;
    margin: 0 -10px -14px;
    max-width: calc(34vw + 20px);
  }

  
  :root:root .chat-page #mobilePanel .panel-content .chat-input-row #sendChatBtn,
  :root:root .chat-page #mobilePanel .panel-content .buddy-input-row #buddyBtn {
    box-shadow: 0 0 0 1px var(--cap-outline);
  }
}



@media (max-width: 899px) {

  
  :root:root .chat-page .video-grid::before {
    background-image:
      linear-gradient(90deg,
        rgba(0, 0, 0, 0) calc(50% - .25px), rgba(0, 0, 0, .11) calc(50% - .25px),
        rgba(0, 0, 0, .11) calc(50% + .25px), rgba(0, 0, 0, 0) calc(50% + .25px)),
      linear-gradient(180deg,
        rgba(0, 0, 0, 0) calc(50% - .25px), rgba(0, 0, 0, .11) calc(50% - .25px),
        rgba(0, 0, 0, .11) calc(50% + .25px), rgba(0, 0, 0, 0) calc(50% + .25px));
  }

  
  :root:root .chat-page .top-bar .username-display {
    padding: 0 6px 10px;
    margin: 0 -6px -10px;
    max-width: calc(34vw + 12px);
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
    touch-action: manipulation;
  }
  
  :root:root .chat-page .top-bar .username-display:active { color: var(--acc-cyan); }
}

@media (max-width: 899px) {

  
  :root:root .chat-page #slot0 .shutter::after,
  :root:root .chat-page #slot1 .shutter::after {
    border-top-color: transparent;
    box-shadow: none;
  }

  
  :root:root .chat-page #slot0 .shutter::after,
  :root:root .chat-page #slot1 .shutter::after {
    background: linear-gradient(180deg, var(--metal-light), var(--metal));
  }
}




@media (min-width: 900px) {

  :root:root .chat-page .chat-shutter > span {
    --perforations: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='30'%3E%3Cmask id='h'%3E%3Crect width='26' height='30' fill='%23fff'/%3E%3Crect x='5.6' y='4.5' width='14.8' height='4' rx='1.3' fill='%23000'/%3E%3Crect x='-7.4' y='19.5' width='14.8' height='4' rx='1.3' fill='%23000'/%3E%3Crect x='18.6' y='19.5' width='14.8' height='4' rx='1.3' fill='%23000'/%3E%3C/mask%3E%3Crect width='26' height='30' fill='%23000' mask='url(%23h)'/%3E%3C/svg%3E");
    -webkit-mask-image: var(--perforations), linear-gradient(#000, #000);
            mask-image: var(--perforations), linear-gradient(#000, #000);
    -webkit-mask-size: 26px 30px, 100% 15px;
            mask-size: 26px 30px, 100% 15px;
    /*
     * Fifteen pixels up, which is the whole of why this lines up.
     *
     * The slots are drawn by `> span::after`, and that element is `inset: 0 0
     * 15px 0` -- its box stops 15px short of the bottom, so its own
     * `background-position: 0 100%` lays the tile from THERE. The mask is on
     * the span, whose box runs the full height, so the same `0 100%` laid the
     * cuts 15px lower than the slots they were meant to be inside: a second
     * set of perforations next to the first, which is exactly what appeared.
     * Matching the drawing's origin puts each cut back inside its own slot.
     */
    -webkit-mask-position: 0 calc(100% - 15px), 0 100%;
            mask-position: 0 calc(100% - 15px), 0 100%;
    -webkit-mask-repeat: repeat, no-repeat;
            mask-repeat: repeat, no-repeat;
    
    -webkit-mask-composite: source-over;
            mask-composite: add;
  }
}



:root:root .chat-page:not(.tiles-primed) #slot0:not(.has-picture)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  
  background-color: #5f666b;
  background-image: var(--noise), var(--metal-grain);
  background-blend-mode: soft-light, overlay;
}



@media (max-width: 899px) {

  :root:root .chat-page .video-grid #slot0::before {
    box-shadow:
      inset 0 1px 0 0 rgba(0, 0, 0, .85),
      inset 1px 0 0 0 rgba(0, 0, 0, .85),
      inset 0 4px 6px -2px rgba(0, 0, 0, .55),
      inset 3px 0 5px -2px rgba(0, 0, 0, .4);
  }
  :root:root .chat-page .video-grid #slot1::before {
    box-shadow:
      inset 0 1px 0 0 rgba(0, 0, 0, .85),
      inset -1px 0 0 0 rgba(0, 0, 0, .85),
      inset 0 4px 6px -2px rgba(0, 0, 0, .55),
      inset -3px 0 5px -2px rgba(0, 0, 0, .33);
  }
  :root:root .chat-page .video-grid #slot2::before {
    box-shadow:
      inset 0 -1px 0 0 rgba(0, 0, 0, .85),
      inset 1px 0 0 0 rgba(0, 0, 0, .85),
      inset 0 -3px 5px -2px rgba(0, 0, 0, .36),
      inset 3px 0 5px -2px rgba(0, 0, 0, .4);
  }
  :root:root .chat-page .video-grid #slot3::before {
    box-shadow:
      inset 0 -1px 0 0 rgba(0, 0, 0, .85),
      inset -1px 0 0 0 rgba(0, 0, 0, .85),
      inset 0 -3px 5px -2px rgba(0, 0, 0, .36),
      inset -3px 0 5px -2px rgba(0, 0, 0, .33);
  }

  
  
  :root:root .chat-page .video-grid::before {
    
    z-index: 1555;
    --seam-w: .5px;
    --seam-a: .5;
    background-image:
      linear-gradient(90deg,
        rgba(0, 0, 0, 0) calc(50% - var(--seam-w)),
        rgba(0, 0, 0, var(--seam-a)) calc(50% - var(--seam-w)),
        rgba(0, 0, 0, var(--seam-a)) calc(50% + var(--seam-w)),
        rgba(0, 0, 0, 0) calc(50% + var(--seam-w))),
      linear-gradient(180deg,
        rgba(0, 0, 0, 0) calc(50% - var(--seam-w)),
        rgba(0, 0, 0, var(--seam-a)) calc(50% - var(--seam-w)),
        rgba(0, 0, 0, var(--seam-a)) calc(50% + var(--seam-w)),
        rgba(0, 0, 0, 0) calc(50% + var(--seam-w)));
  }
}



:root:root .chat-page .video-slot video.is-empty {
  visibility: hidden;
}