.audience-chat__open {
  min-height: 44px; padding: 0 12px; border: 1px solid color-mix(in srgb, var(--cream) 24%, transparent);
  border-radius: 999px; background: color-mix(in srgb, var(--night) 82%, transparent); color: var(--cream);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; font: inherit; font-size: var(--fine); font-weight: 680;
}
.audience-chat__open[hidden] { display: none; }
.audience-chat__count { min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box; border-radius: 999px; background: var(--go); color: var(--night); font-size: 10px; line-height: 17px; }
.audience-chat__count[hidden] { display: none; }
.audience-chat[hidden] { display: none; }
.audience-chat { position: fixed; z-index: 69; inset: 0; background: #0008; }
.audience-chat__panel {
  position: fixed; z-index: 70; inset: max(10px, var(--safe-t)) 10px calc(10px + var(--vv-bottom, 0px));
  max-width: 430px; margin-left: auto; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto;
  border: 1px solid color-mix(in srgb, var(--cream) 20%, transparent); border-radius: 22px;
  background: color-mix(in srgb, var(--night) 96%, transparent); box-shadow: 0 18px 60px #000a; overflow: hidden;
  backdrop-filter: blur(22px); color: var(--cream);
}
.audience-chat__panel[hidden] { display: none; }
.audience-chat__head { min-height: 54px; padding: 0 10px 0 16px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
.audience-chat__head strong { font-size: var(--body); }
.audience-chat__status { margin-left: auto; color: var(--ink-3); font-size: var(--kicker); }
.audience-chat__close { width: 44px; height: 44px; border: 0; background: none; color: inherit; font: 300 30px/1 system-ui; }
.audience-chat__feed { min-height: 0; padding: 12px 14px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 9px; }
.audience-chat__line { display: grid; grid-template-columns: minmax(58px, auto) 1fr; gap: 8px; align-items: start; font-size: var(--fine); line-height: 1.35; }
.audience-chat__line strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--lamp); }
.audience-chat__line span { overflow-wrap: anywhere; }
.audience-chat__inline-emote { width: 34px; height: 34px; object-fit: contain; }
.audience-chat__reactions { padding: 8px 10px; display: flex; gap: 6px; overflow-x: auto; border-top: 1px solid var(--line); }
.audience-chat__react { flex: 0 0 44px; width: 44px; height: 44px; padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); color: inherit; font-size: 22px; }
.audience-chat__glyph::before { content: attr(data-glyph); }
.audience-chat__emote { display: block; width: 100%; height: 100%; object-fit: contain; }
.audience-chat__emote[hidden], .audience-chat__inline-emote[hidden] { display: none !important; }
.audience-chat__emote-name { display: none; font-size: 11px; font-weight: 750; overflow-wrap: anywhere; }
.audience-chat__react.is-image-error .audience-chat__emote-name,
.audience-chat__line.is-image-error .audience-chat__emote-name { display: inline; }
.audience-chat__react--custom.is-image-error { flex-basis: auto; width: auto; max-width: 8rem; padding-inline: 9px; }
.audience-chat__react--custom.is-image-error .audience-chat__emote-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.audience-chat__form { padding: 8px 10px calc(8px + var(--safe-b)); display: grid; grid-template-columns: 1fr auto; gap: 8px; border-top: 1px solid var(--line); }
.audience-chat__input { min-width: 0; height: 44px; box-sizing: border-box; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); color: inherit; font: inherit; font-size: 16px; }
.audience-chat__input:focus-visible, .audience-chat button:focus-visible { outline: 2px solid var(--lamp); outline-offset: 2px; }
.audience-chat__send { min-width: 62px; border: 0; border-radius: 12px; background: var(--cream); color: var(--night); font: inherit; font-weight: 750; }
.shell__sec--friends > .audience-chat__open { align-self: stretch; }
.play__actions > .audience-chat__open { padding: 0 10px; }
@media (prefers-reduced-motion: reduce) {
  .audience-chat__emote, .audience-chat__inline-emote { display: none; }
  .audience-chat__emote-name { display: inline; }
  .audience-chat__react--custom { flex-basis: auto; width: auto; min-width: 44px; max-width: 8rem; padding-inline: 9px; }
  .audience-chat__react--custom .audience-chat__emote-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}