my-plugin-placeholder:has(#plugin-placeholder-player-next #xxivchat-container) {
  --xxivchat-side-width: clamp(240px, var(--xxivchat-panel-width, clamp(280px, 27vw, 390px)), min(50vw, 720px));
  align-self: stretch;
  display: block;
  flex: 0 0 auto;
  height: 66vh;
  max-height: 66vh;
  max-width: var(--xxivchat-side-width);
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  transition: width 160ms ease, max-width 160ms ease, height 160ms ease, min-height 160ms ease, max-height 160ms ease;
  width: var(--xxivchat-side-width);
}

#plugin-placeholder-player-next:has(#xxivchat-container) {
  height: 100%;
  min-height: 0;
  width: 100%;
}

/* PeerTube gives the complete video surface its own contextual radius. Clip
   the attached sidebar with that same outer shape so the player and chat read
   as one block in both side-by-side and stacked layouts. */
#video-wrapper:has(#xxivchat-container.xxivchat--peertube-theme:not(.xxivchat--player-overlay)) {
  overflow: hidden;
}

#video-wrapper #xxivchat-container.xxivchat--peertube-theme:not(.xxivchat--player-overlay) {
  border: 0;
}

#xxivchat-container {
  --xxiv-accent: var(--primary, var(--mainColor, #f2690d));
  --xxiv-accent-hover: var(--primary-400, var(--xxiv-accent));
  --xxiv-bg: var(--bg, var(--mainBackgroundColor, #fff));
  --xxiv-bg-soft: var(--bg-secondary-400, var(--greyBackgroundColor, #eee));
  --xxiv-fg: var(--fg, var(--mainForegroundColor, #111));
  --xxiv-on-accent: var(--on-primary, var(--xxiv-fg));
  --xxiv-input-bg: var(--input-bg, var(--xxiv-bg-soft));
  --xxiv-input-border: var(--input-border-color, var(--xxiv-border));
  --xxiv-input-fg: var(--input-fg, var(--xxiv-fg));
  --xxiv-input-radius: var(--input-border-radius, 4px);
  --xxiv-muted: var(--fg-200, color-mix(in srgb, var(--xxiv-fg) 62%, transparent));
  --xxiv-border: var(--border-secondary, color-mix(in srgb, var(--xxiv-fg) 20%, transparent));
  --xxiv-font-size: 14px;
  background: var(--xxiv-bg);
  border: 1px solid var(--xxiv-border);
  border-radius: 0;
  box-sizing: border-box;
  color: var(--xxiv-fg);
  display: flex;
  flex-direction: column;
  font-size: 14px;
  height: 100%;
  margin: 0;
  min-height: 0;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.xxivchat__panel-resize {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: ew-resize;
  display: none;
  height: 100%;
  left: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  touch-action: none;
  width: 8px;
  z-index: 11;
}

.xxivchat__panel-resize::after {
  background: transparent;
  bottom: 0;
  content: '';
  left: 0;
  position: absolute;
  top: 0;
  width: 2px;
}

.xxivchat__panel-resize:hover::after,
.xxivchat__panel-resize:focus-visible::after,
.xxivchat--panel-resizing > .xxivchat__panel-resize::after { background: var(--xxiv-accent); }

#xxivchat-container.xxivchat--contrast-dark {
  --xxiv-accent: #ff9e50;
  --xxiv-bg: #050505;
  --xxiv-bg-soft: #191919;
  --xxiv-border: #777;
  --xxiv-fg: #fff;
  --xxiv-muted: #c4c4c4;
  --xxiv-input-bg: var(--xxiv-bg-soft);
  --xxiv-input-border: var(--xxiv-border);
  --xxiv-input-fg: var(--xxiv-fg);
  --xxiv-input-radius: 0;
  color-scheme: dark;
}

#xxivchat-container.xxivchat--contrast-light {
  --xxiv-accent: #8b3500;
  --xxiv-bg: #fff;
  --xxiv-bg-soft: #f0f0f0;
  --xxiv-border: #555;
  --xxiv-fg: #000;
  --xxiv-muted: #4b4b4b;
  --xxiv-input-bg: var(--xxiv-bg-soft);
  --xxiv-input-border: var(--xxiv-border);
  --xxiv-input-fg: var(--xxiv-fg);
  --xxiv-input-radius: 0;
  color-scheme: light;
}

#xxivchat-container *,
#xxivchat-container *::before,
#xxivchat-container *::after { box-sizing: border-box; }

#xxivchat-container button,
#xxivchat-container input,
#xxivchat-container select,
#xxivchat-container textarea { font: inherit; }

.xxivchat__bar {
  align-items: center;
  background: var(--xxiv-bg-soft);
  border-bottom: 1px solid var(--xxiv-border);
  display: flex;
  flex: 0 0 40px;
  gap: 4px;
  min-width: 0;
  padding: 3px 5px;
}

.xxivchat__bar-spacer { flex: 1; }

.xxivchat__status {
  color: var(--xxiv-muted);
  font-size: inherit;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xxivchat__icon-button,
.xxivchat__message-menu-button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--xxiv-fg);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 24px;
  height: 24px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  width: 24px;
}

.xxivchat__icon-button:hover,
.xxivchat__message-menu-button:hover { background: color-mix(in srgb, var(--xxiv-fg) 10%, transparent); }

.xxivchat__icon-button[hidden],
.xxivchat__role-mark[hidden] { display: none; }

.xxivchat__icon {
  display: block;
  height: 14px;
  object-fit: contain;
  width: 14px;
}

.xxivchat__icon--peertube { height: 17px; width: 17px; }
.xxivchat__icon--fediverse {
  background-color: currentColor;
  height: 15px;
  mask: var(--xxiv-icon-mask) center / contain no-repeat;
  width: 15px;
  -webkit-mask: var(--xxiv-icon-mask) center / contain no-repeat;
}
.xxivchat__icon--users,
.xxivchat__icon--shield,
.xxivchat__icon--camera,
.xxivchat__icon--chat,
.xxivchat__icon--settings,
.xxivchat__icon--smile,
.xxivchat__icon--logout,
.xxivchat__icon--overlay,
.xxivchat__icon--chevron { filter: invert(50%); }

.xxivchat__users-button {
  gap: 2px;
  padding: 0 3px;
  width: auto;
}

.xxivchat__users-button .xxivchat__icon {
  filter: invert(50%);
}

.xxivchat__online-count { font-size: inherit; }

.xxivchat__collapse-label { display: none; }

.xxivchat__collapse-button .xxivchat__icon {
  height: 16px;
  transition: transform 120ms ease;
  width: 16px;
}

.xxivchat__role-mark {
  align-items: center;
  display: inline-flex;
  flex: 0 0 16px;
  height: 16px;
  justify-content: center;
  width: 16px;
}

.xxivchat__role-mark .xxivchat__icon {
  filter: invert(50%);
  height: 14px;
  width: 14px;
}

.xxivchat__role-mark--admin,
.xxivchat__role-mark--moderator { background: transparent; }

.xxivchat__content {
  background: var(--xxiv-bg);
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  position: relative;
}

.xxivchat__messages {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  font-size: var(--xxiv-font-size);
  gap: 1px;
  list-style: none;
  margin: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 3px;
}

.xxivchat__message {
  border-radius: 0;
  flex: 0 0 auto;
  min-width: 0;
  padding: 3px 4px;
  position: relative;
}

.xxivchat__message:hover { background: color-mix(in srgb, var(--xxiv-fg) 5%, transparent); }

.xxivchat__message-content { display: contents; }

.xxivchat__message--mentioned {
  background: color-mix(in srgb, var(--xxiv-accent) 9%, var(--xxiv-bg));
  box-shadow: inset 2px 0 var(--xxiv-accent);
}

.xxivchat__message--mentioned:hover {
  background: color-mix(in srgb, var(--xxiv-accent) 13%, var(--xxiv-bg));
}

.xxivchat__message-head {
  align-items: center;
  display: flex;
  gap: 4px;
  min-height: 20px;
  min-width: 0;
  padding-right: 24px;
}

.xxivchat__message-head--avatar { padding-left: 22px; }

.xxivchat__message > .xxivchat__avatar {
  height: 18px;
  left: 4px;
  position: absolute;
  top: 4px;
  width: 18px;
}

.xxivchat__author {
  background: transparent;
  border: 0;
  color: var(--xxiv-fg);
  cursor: pointer;
  font-size: inherit;
  font-weight: 650;
  overflow: hidden;
  order: 0;
  padding: 0;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xxivchat__irc-name-decoration { display: none; }

.xxivchat__author:hover,
.xxivchat__author:focus-visible,
.xxivchat__user-name:hover,
.xxivchat__user-name:focus-visible {
  color: var(--xxiv-accent);
  outline: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.xxivchat__time {
  color: var(--xxiv-muted);
  flex: 0 0 auto;
  font-size: inherit;
  margin-left: auto;
  order: 2;
}

.xxivchat__time[hidden] { display: none; }

.xxivchat__body {
  color: var(--xxiv-fg);
  font-size: inherit;
  line-height: 1.3;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.xxivchat__body--clamped {
  max-height: 10.4em;
  overflow: hidden;
}

#xxivchat-container .xxivchat__message-expand {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--xxiv-muted);
  cursor: pointer;
  display: block;
  font: inherit;
  line-height: 1.2;
  margin: 2px 0 0;
  padding: 1px 3px;
  user-select: none;
  width: max-content;
}

#xxivchat-container .xxivchat__message-expand:hover,
#xxivchat-container .xxivchat__message-expand:focus-visible {
  background: transparent;
  color: var(--xxiv-fg);
  outline: 0;
  text-decoration: underline;
}

#xxivchat-container .xxivchat__message-expand[hidden] { display: none; }

.xxivchat__system-message {
  color: var(--xxiv-muted);
  flex: 0 0 auto;
  font-size: var(--xxiv-font-size);
  font-style: italic;
  line-height: 1.3;
  overflow-wrap: anywhere;
  padding: 3px 5px;
}

.xxivchat__system-message[hidden] { display: none; }

#xxivchat-container.xxivchat--avatars-hidden .xxivchat__message > .xxivchat__avatar { display: none; }
#xxivchat-container.xxivchat--avatars-hidden .xxivchat__message-head--avatar { padding-left: 0; }

#xxivchat-container.xxivchat--avatars-large .xxivchat__message {
  min-height: 46px;
  padding-left: 46px;
}

#xxivchat-container.xxivchat--avatars-large .xxivchat__message > .xxivchat__avatar {
  font-size: 14px;
  height: 36px;
  width: 36px;
}

#xxivchat-container.xxivchat--avatars-large .xxivchat__message-head--avatar { padding-left: 0; }

#xxivchat-container.xxivchat--irc .xxivchat__messages {
  gap: 0;
  padding: 2px;
  user-select: text;
}

#xxivchat-container.xxivchat--irc .xxivchat__message {
  display: block;
  line-height: 1.15;
  min-height: 0;
  padding: 0 2px;
  user-select: text;
}

#xxivchat-container.xxivchat--irc .xxivchat__message-content {
  display: block;
}

#xxivchat-container.xxivchat--irc .xxivchat__message-content--clamped {
  max-height: 9.2em;
  overflow: hidden;
}

#xxivchat-container.xxivchat--irc .xxivchat__message-head {
  display: inline;
  min-height: 0;
  padding: 0;
}

#xxivchat-container.xxivchat--irc .xxivchat__message > .xxivchat__avatar,
#xxivchat-container.xxivchat--irc .xxivchat__message .xxivchat__role-mark { display: none; }

#xxivchat-container.xxivchat--irc .xxivchat__time {
  display: inline-block;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
  margin: 0;
  max-width: var(--xxiv-irc-time-width, auto);
  min-width: var(--xxiv-irc-time-width, auto);
  overflow: visible;
  vertical-align: baseline;
  width: var(--xxiv-irc-time-width, auto);
  white-space: pre;
}

#xxivchat-container.xxivchat--irc .xxivchat__author {
  align-items: baseline;
  display: inline-flex;
  font-weight: inherit;
  margin: 0;
  max-width: 45%;
  min-width: 0;
  overflow: hidden;
  vertical-align: baseline;
  white-space: nowrap;
  user-select: text;
}

#xxivchat-container.xxivchat--irc .xxivchat__author-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#xxivchat-container.xxivchat--irc .xxivchat__irc-name-decoration {
  display: inline;
  flex: 0 0 auto;
}
#xxivchat-container.xxivchat--irc .xxivchat__irc-name-suffix { white-space: pre; }

#xxivchat-container.xxivchat--irc .xxivchat__body {
  display: inline;
  line-height: 1.15;
}

#xxivchat-container.xxivchat--irc .xxivchat__message-expand {
  margin: 1px 2px 1px auto;
  position: static;
}

#xxivchat-container.xxivchat--irc .xxivchat__system-message {
  line-height: 1.15;
  padding: 1px 2px;
}

#xxivchat-container.xxivchat--irc .xxivchat__message > .xxivchat__message-menu-button {
  background: var(--xxiv-bg);
  opacity: 0;
  pointer-events: none;
  top: -2px;
  user-select: none;
}

#xxivchat-container.xxivchat--irc .xxivchat__message:hover > .xxivchat__message-menu-button,
#xxivchat-container.xxivchat--irc .xxivchat__message:focus-within > .xxivchat__message-menu-button {
  opacity: 1;
  pointer-events: auto;
}

.xxivchat__message-menu-button {
  font-size: 17px;
  opacity: .45;
  position: absolute;
  right: 1px;
  top: 1px;
}

.xxivchat__message:hover .xxivchat__message-menu-button,
.xxivchat__message:focus-within .xxivchat__message-menu-button,
.xxivchat__user-row .xxivchat__message-menu-button { opacity: 1; }

.xxivchat__message-menu {
  background: var(--xxiv-bg);
  border: 1px solid var(--xxiv-border);
  border-radius: 0;
  box-shadow: 0 4px 14px #0005;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  min-width: 145px;
  max-width: calc(100% - 8px);
  overflow-y: auto;
  padding: 2px;
  position: absolute;
  z-index: 30;
}

.xxivchat__message-menu button {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--xxiv-fg);
  cursor: pointer;
  font-size: inherit;
  line-height: 1.2;
  padding: 5px 6px;
  text-align: left;
  white-space: nowrap;
}

.xxivchat__message-menu button:hover { background: var(--xxiv-bg-soft); }

.xxivchat__mention-autocomplete {
  background: var(--xxiv-bg);
  border: 1px solid var(--xxiv-border);
  box-shadow: 0 4px 16px #0007;
  bottom: calc(100% + 3px);
  color: var(--xxiv-fg);
  display: flex;
  flex-direction: column;
  left: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
  position: absolute;
  right: 4px;
  z-index: 30;
}

.xxivchat__mention-option {
  background: transparent;
  border: 0;
  color: var(--xxiv-fg);
  cursor: pointer;
  flex: 0 0 auto;
  min-height: 30px;
  overflow: hidden;
  padding: 5px 7px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.xxivchat__mention-option:hover,
.xxivchat__mention-option[aria-selected="true"] {
  background: color-mix(in srgb, var(--xxiv-accent) 18%, var(--xxiv-bg));
}

.xxivchat__composer,
.xxivchat__login-composer {
  background: var(--xxiv-bg);
  border-top: 1px solid var(--xxiv-border);
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
  padding: 4px;
}

.xxivchat__composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px auto;
  height: 42px;
  min-height: 42px;
  position: relative;
}

.xxivchat__composer--resizing { user-select: none; }

.xxivchat__composer-resize {
  background: transparent;
  border: 0;
  cursor: ns-resize;
  height: 9px;
  left: 0;
  margin: 0 !important;
  padding: 0;
  position: absolute;
  right: 0;
  top: -5px;
  width: 100%;
  z-index: 5;
}

.xxivchat__composer-resize::after {
  background: var(--xxiv-border);
  content: '';
  height: 1px;
  left: 42%;
  position: absolute;
  right: 42%;
  top: 4px;
}

.xxivchat__composer-resize:hover::after,
.xxivchat__composer-resize:focus-visible::after {
  background: var(--xxiv-accent);
  height: 2px;
}

.xxivchat__login-composer {
  flex-direction: column;
}

.xxivchat__login-row {
  display: grid;
  gap: 4px;
  grid-template-columns: minmax(0, 1fr) 122px;
  min-width: 0;
}

.xxivchat__input,
.xxivchat__name,
.xxivchat__instance,
.xxivchat__setting input,
.xxivchat__setting select {
  background: var(--xxiv-bg-soft);
  border: 1px solid var(--xxiv-border);
  border-radius: 0;
  caret-color: var(--xxiv-fg);
  color: var(--xxiv-fg);
  min-width: 0;
  padding: 4px 6px;
}

#xxivchat-container.xxivchat--peertube-theme:not(.xxivchat--player-overlay) .xxivchat__input,
#xxivchat-container.xxivchat--peertube-theme:not(.xxivchat--player-overlay) .xxivchat__name,
#xxivchat-container.xxivchat--peertube-theme:not(.xxivchat--player-overlay) .xxivchat__instance,
#xxivchat-container.xxivchat--peertube-theme:not(.xxivchat--player-overlay) .xxivchat__setting input,
#xxivchat-container.xxivchat--peertube-theme:not(.xxivchat--player-overlay) .xxivchat__setting select {
  background: var(--xxiv-input-bg);
  border-color: var(--xxiv-input-border);
  border-radius: var(--xxiv-input-radius);
  color: var(--xxiv-input-fg);
}

#xxivchat-container.xxivchat--peertube-theme:not(.xxivchat--player-overlay) .xxivchat__input:focus-visible,
#xxivchat-container.xxivchat--peertube-theme:not(.xxivchat--player-overlay) .xxivchat__name:focus-visible,
#xxivchat-container.xxivchat--peertube-theme:not(.xxivchat--player-overlay) .xxivchat__instance:focus-visible,
#xxivchat-container.xxivchat--peertube-theme:not(.xxivchat--player-overlay) .xxivchat__setting input:focus-visible,
#xxivchat-container.xxivchat--peertube-theme:not(.xxivchat--player-overlay) .xxivchat__setting select:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--xxiv-accent) 28%, transparent);
  outline: 0;
}

#xxivchat-container input::placeholder,
#xxivchat-container textarea::placeholder { color: var(--xxiv-muted); opacity: 1; }

#xxivchat-container.xxivchat--peertube-theme:not(.xxivchat--player-overlay) input::placeholder,
#xxivchat-container.xxivchat--peertube-theme:not(.xxivchat--player-overlay) textarea::placeholder {
  color: var(--input-placeholder-color, var(--xxiv-muted));
}

.xxivchat__input {
  flex: 1 1 auto;
  height: 100%;
  min-height: 34px;
  resize: none;
}

.xxivchat__name,
.xxivchat__instance {
  height: 34px;
  margin: 0 !important;
  width: 100%;
}

.xxivchat__send,
.xxivchat__provider-button,
.xxivchat__login-row button,
.xxivchat__moderation button:not(.xxivchat__icon-button) {
  align-items: center;
  background: var(--xxiv-bg-soft);
  border: 1px solid var(--xxiv-border);
  border-radius: 0;
  color: var(--xxiv-fg);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 4px;
  justify-content: center;
  line-height: 1.2;
  padding: 4px 7px;
  text-decoration: none;
}

.xxivchat__send {
  align-self: stretch;
  height: 100%;
  line-height: 1;
  padding-block: 0;
}

.xxivchat__send:hover,
.xxivchat__provider-button:hover,
.xxivchat__login-row button:hover,
.xxivchat__moderation button:not(.xxivchat__icon-button):hover { border-color: var(--xxiv-accent); color: var(--xxiv-fg); }

#xxivchat-container.xxivchat--peertube-theme:not(.xxivchat--player-overlay) .xxivchat__send {
  background: var(--xxiv-accent);
  border-color: var(--xxiv-accent);
  border-radius: var(--xxiv-input-radius);
  color: var(--xxiv-on-accent);
  font-weight: 600;
}

#xxivchat-container.xxivchat--peertube-theme:not(.xxivchat--player-overlay) .xxivchat__send:hover,
#xxivchat-container.xxivchat--peertube-theme:not(.xxivchat--player-overlay) .xxivchat__send:focus-visible {
  background: var(--xxiv-accent-hover);
  border-color: var(--xxiv-accent-hover);
  color: var(--xxiv-on-accent);
}

#xxivchat-container.xxivchat--peertube-theme:not(.xxivchat--player-overlay) .xxivchat__emoji-button {
  background: var(--xxiv-input-bg);
  border-color: var(--xxiv-input-border);
  border-radius: var(--xxiv-input-radius);
}

#xxivchat-container.xxivchat--peertube-theme:not(.xxivchat--player-overlay) .xxivchat__icon-button:hover,
#xxivchat-container.xxivchat--peertube-theme:not(.xxivchat--player-overlay) .xxivchat__message-menu-button:hover {
  background: var(--bg-secondary-450, color-mix(in srgb, var(--xxiv-accent) 14%, transparent));
}

#xxivchat-container.xxivchat--peertube-theme:not(.xxivchat--player-overlay) .xxivchat__presentation-button--active {
  background: color-mix(in srgb, var(--xxiv-accent) 24%, transparent);
}

.xxivchat__provider-button { min-width: 82px; }

.xxivchat__emoji-button {
  align-self: stretch;
  height: 100%;
  width: 30px;
}

.xxivchat__emoji-button .xxivchat__icon { height: 18px; width: 18px; }

.xxivchat__emoji-picker {
  align-items: center;
  background: var(--xxiv-bg);
  border: 1px solid var(--xxiv-border);
  bottom: calc(100% + 3px);
  box-shadow: 0 4px 16px #0006;
  color: var(--xxiv-fg);
  display: flex;
  justify-content: center;
  max-height: none;
  overflow: hidden;
  position: absolute;
  right: 3px;
  width: min(380px, calc(100% - 6px));
  z-index: 10;
}

.xxivchat__emoji-picker-element {
  --background: var(--xxiv-bg);
  --border-color: var(--xxiv-border);
  --border-radius: 0;
  --border-size: 0;
  --button-active-background: color-mix(in srgb, var(--xxiv-accent) 18%, var(--xxiv-bg));
  --button-hover-background: var(--xxiv-bg-soft);
  --category-font-color: var(--xxiv-fg);
  --category-font-size: 14px;
  --emoji-padding: .38rem;
  --emoji-size: 1.5rem;
  --indicator-color: var(--xxiv-accent);
  --input-border-color: var(--xxiv-border);
  --input-border-radius: 0;
  --input-font-color: var(--xxiv-fg);
  --input-font-size: 14px;
  --input-placeholder-color: var(--xxiv-muted);
  --num-columns: 8;
  --outline-color: var(--xxiv-accent);
  display: block;
  height: 100%;
  width: 100%;
}

.xxivchat__login-row button {
  height: 34px;
  margin: 0 !important;
  min-width: 0;
  width: 100%;
}

.xxivchat__jump-latest {
  background: var(--xxiv-bg-soft);
  border: 1px solid var(--xxiv-border);
  border-radius: 0;
  bottom: 46px;
  box-shadow: 0 2px 8px #0004;
  color: var(--xxiv-fg);
  cursor: pointer;
  font-size: 14px;
  padding: 4px 8px;
  position: absolute;
  right: 8px;
  z-index: 6;
}

.xxivchat__jump-latest[hidden] { display: none; }

.xxivchat__error,
.xxivchat__toast {
  color: #d93636;
  font-size: inherit;
  line-height: 1.25;
}

.xxivchat__error:empty { display: none; }

.xxivchat__toast {
  background: var(--xxiv-bg);
  border: 1px solid #d93636;
  bottom: 46px;
  left: 4px;
  padding: 4px 6px;
  position: absolute;
  right: 4px;
  z-index: 12;
}

.xxivchat__panel {
  background: var(--xxiv-bg);
  border: 1px solid var(--xxiv-border);
  border-radius: 0;
  box-shadow: 0 4px 16px #0005;
  color: var(--xxiv-fg);
  font-size: 14px;
  inset: 3px;
  line-height: 1.25;
  overflow-y: auto;
  padding: 5px;
  position: absolute;
  z-index: 7;
}

.xxivchat__panel label,
.xxivchat__panel strong { color: var(--xxiv-fg); }

.xxivchat__panel-head,
.xxivchat__moderation-row,
.xxivchat__setting,
.xxivchat__user-row {
  align-items: center;
  display: flex;
  gap: 5px;
}

.xxivchat__panel-head {
  min-height: 32px;
  justify-content: space-between;
}

.xxivchat__panel-head strong {
  font-size: 16px !important;
  line-height: 1.2 !important;
}

.xxivchat__panel-close {
  background: transparent !important;
  border: 0 !important;
  flex: 0 0 30px;
  font-size: 24px !important;
  font-weight: 400;
  height: 30px;
  line-height: 1;
  margin: 0 !important;
  width: 30px;
}

.xxivchat__panel h4 {
  color: var(--xxiv-fg);
  font-size: 16px !important;
  font-weight: 650;
  line-height: 1.2;
  margin: 7px 0 2px;
}

.xxivchat__panel p { margin: 3px 0; }
.xxivchat__quiet { color: var(--xxiv-muted); }

.xxivchat__user-group {
  color: var(--xxiv-muted);
  font-size: inherit;
  font-weight: 650;
  letter-spacing: .04em;
  padding: 6px 0 2px;
  text-transform: uppercase;
}

.xxivchat__user-row {
  border-top: 1px solid var(--xxiv-border);
  min-height: 30px;
  position: relative;
}

.xxivchat__avatar {
  align-items: center;
  background: hsl(var(--xxiv-avatar-hue, 0) 42% 28%);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  flex: 0 0 18px;
  font-size: 9px;
  font-weight: 700;
  height: 18px;
  justify-content: center;
  letter-spacing: -.02em;
  line-height: 1;
  overflow: hidden;
  position: relative;
  text-transform: uppercase;
  width: 18px;
}

.xxivchat__avatar img {
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

.xxivchat__user-name {
  background: transparent;
  border: 0;
  color: var(--xxiv-fg);
  cursor: pointer;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  text-align: left;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xxivchat__user-menu-button {
  border-left: 1px solid var(--xxiv-border);
  flex: 0 0 28px;
  margin-left: 2px;
  opacity: 1;
  position: static;
}

.xxivchat__profile-summary {
  align-items: center;
  border-bottom: 1px solid var(--xxiv-border);
  display: flex;
  gap: 10px;
  padding: 10px 4px;
}

.xxivchat__profile-summary .xxivchat__profile-avatar {
  flex: 0 0 48px;
  font-size: 18px;
  height: 48px;
  width: 48px;
}

.xxivchat__profile-copy {
  align-items: center;
  display: grid;
  gap: 2px 5px;
  grid-template-columns: minmax(0, auto) 18px;
  min-width: 0;
}

.xxivchat__profile-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xxivchat__profile-handle {
  color: var(--xxiv-muted);
  grid-column: 1 / -1;
  overflow-wrap: anywhere;
}

.xxivchat__profile-link {
  color: var(--xxiv-accent);
  display: block;
  overflow-wrap: anywhere;
  padding: 8px 4px;
}

.xxivchat__profile-moderate {
  background: var(--xxiv-bg-soft);
  border: 1px solid var(--xxiv-border);
  border-radius: 0;
  color: var(--xxiv-fg);
  cursor: pointer;
  margin: 4px;
  padding: 5px 8px;
}

.xxivchat__moderation-row {
  border-top: 1px solid var(--xxiv-border);
  justify-content: space-between;
  min-height: 27px;
  padding: 2px 0;
}

.xxivchat__setting {
  border-top: 1px solid var(--xxiv-border);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(92px, 38%);
  line-height: 1.2;
  margin: 0;
  min-height: 42px;
  padding: 5px 0;
}

.xxivchat__setting-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.xxivchat__setting-copy strong {
  color: var(--xxiv-fg) !important;
  font-size: 16px !important;
  font-weight: 650;
  line-height: 1.2 !important;
}

.xxivchat__setting-copy small {
  color: var(--xxiv-muted) !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
}

.xxivchat__setting input,
.xxivchat__setting select {
  flex: 0 0 88px;
  font-size: 14px !important;
  min-height: 30px;
  padding: 2px 4px;
  width: 88px;
}

.xxivchat__setting select { flex-basis: 120px; width: 120px; }

.xxivchat__setting input,
.xxivchat__setting select {
  max-width: 100%;
  width: 100%;
}

.xxivchat__setting input[type="checkbox"] {
  accent-color: var(--xxiv-accent);
  height: 18px;
  justify-self: end;
  min-height: 18px;
  padding: 0;
  width: 18px;
}

.xxivchat__settings-subheading {
  border-top: 1px solid var(--xxiv-border);
  color: var(--xxiv-fg) !important;
  font-size: 16px !important;
  line-height: 1.2;
  margin: 4px 0 0;
  padding: 8px 0 2px;
}

.xxivchat__share-setting {
  border-top: 1px solid var(--xxiv-border);
  padding: 5px 0;
}

.xxivchat__share-row {
  display: grid;
  gap: 4px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  margin-top: 4px;
}

.xxivchat__share-url,
.xxivchat__share-row button,
.xxivchat__share-open {
  background: var(--xxiv-bg-soft);
  border: 1px solid var(--xxiv-border);
  border-radius: 0;
  color: var(--xxiv-fg);
  font: inherit;
  font-size: 14px !important;
  min-height: 30px;
}

.xxivchat__share-url {
  min-width: 0;
  padding: 3px 5px;
  width: 100%;
}

.xxivchat__share-row button,
.xxivchat__share-open {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  padding: 3px 7px;
  text-decoration: none;
}

.xxivchat__moderation > button,
.xxivchat__moderation-row button {
  font-size: 14px;
}

@media screen and (min-width: 1101px) {
  #plugin-placeholder-player-next > #xxivchat-container:not(.xxivchat--collapsed) > .xxivchat__panel-resize {
    display: block;
  }

  my-plugin-placeholder:has(#plugin-placeholder-player-next #xxivchat-container.xxivchat--panel-resizing) {
    transition: none;
  }

  my-plugin-placeholder:has(#plugin-placeholder-player-next #xxivchat-container.xxivchat--collapsed) {
    max-width: 34px;
    width: 34px;
  }

  #xxivchat-container.xxivchat--collapsed .xxivchat__bar {
    border-bottom: 0;
    border-left: 1px solid var(--xxiv-border);
    flex: 1;
    flex-direction: column;
    padding: 4px 2px;
  }

  #xxivchat-container.xxivchat--collapsed .xxivchat__bar { cursor: pointer; }

  #xxivchat-container.xxivchat--collapsed .xxivchat__collapse-button {
    flex: 1 1 auto;
    flex-direction: column;
    gap: 14px;
    height: 100%;
    width: 100%;
  }

  #xxivchat-container.xxivchat--collapsed .xxivchat__collapse-button .xxivchat__icon {
    transform: rotate(180deg);
  }

  #xxivchat-container.xxivchat--collapsed .xxivchat__collapse-label {
    display: block;
    font-size: 14px;
    font-weight: 650;
    transform: rotate(90deg);
    white-space: nowrap;
  }

  #xxivchat-container.xxivchat--collapsed .xxivchat__bar > :not(.xxivchat__collapse-button),
  #xxivchat-container.xxivchat--collapsed .xxivchat__content { display: none; }
}

@media screen and (max-width: 1100px) {
  my-plugin-placeholder:has(#plugin-placeholder-player-next #xxivchat-container) {
    flex-basis: auto;
    height: min(420px, 65vh);
    max-height: 420px;
    min-height: 280px;
    max-width: 100%;
    width: 100%;
  }

  my-plugin-placeholder:has(#plugin-placeholder-player-next #xxivchat-container.xxivchat--collapsed) {
    height: 40px;
    min-height: 40px;
  }

  #xxivchat-container.xxivchat--collapsed .xxivchat__bar > :not(.xxivchat__collapse-button),
  #xxivchat-container.xxivchat--collapsed .xxivchat__content { display: none; }

  #xxivchat-container .xxivchat__collapse-button .xxivchat__icon { transform: rotate(-90deg); }

  #xxivchat-container.xxivchat--collapsed .xxivchat__bar { cursor: pointer; }

  #xxivchat-container.xxivchat--collapsed .xxivchat__collapse-button {
    flex: 1 1 auto;
    gap: 6px;
    height: 100%;
    margin-left: auto;
    width: 100%;
  }

  #xxivchat-container.xxivchat--collapsed .xxivchat__collapse-button .xxivchat__icon { transform: rotate(90deg); }
  #xxivchat-container.xxivchat--collapsed .xxivchat__collapse-label { display: block; font-weight: 650; }
}

/* PeerTube stacks player widgets below the video in theater mode regardless of
   viewport width. Follow that layout instead of retaining the desktop sidebar. */
.root.theater-enabled my-plugin-placeholder:has(#plugin-placeholder-player-next #xxivchat-container) {
  align-self: stretch;
  flex-basis: auto;
  height: min(300px, 40vh);
  max-height: 300px;
  max-width: 100%;
  min-height: min(200px, 40vh);
  width: 100%;
}

.root.theater-enabled my-plugin-placeholder:has(#plugin-placeholder-player-next #xxivchat-container.xxivchat--collapsed) {
  height: 40px;
  max-height: 40px;
  min-height: 40px;
  max-width: 100%;
  width: 100%;
}

.root.theater-enabled #xxivchat-container .xxivchat__collapse-button .xxivchat__icon {
  transform: rotate(-90deg);
}

.root.theater-enabled #xxivchat-container.xxivchat--collapsed .xxivchat__bar {
  border-bottom: 0;
  border-left: 0;
  cursor: pointer;
  flex: 1;
  flex-direction: row;
  padding: 3px 5px;
}

.root.theater-enabled #xxivchat-container.xxivchat--collapsed .xxivchat__collapse-button {
  flex: 1 1 auto;
  flex-direction: row;
  gap: 6px;
  height: 100%;
  margin-left: auto;
  width: 100%;
}

.root.theater-enabled #xxivchat-container.xxivchat--collapsed .xxivchat__collapse-button .xxivchat__icon {
  transform: rotate(90deg);
}

.root.theater-enabled #xxivchat-container.xxivchat--collapsed .xxivchat__collapse-label {
  display: block;
  font-weight: 650;
  transform: none;
}

.root.theater-enabled #xxivchat-container > .xxivchat__panel-resize { display: none; }

/* Fullscreen is owned by the Video.js element, so the client temporarily
   moves chat into that element and gives the media a real right-hand column. */
.video-js .vjs-xxivchat-control {
  align-items: center;
  display: none;
  justify-content: center;
}

.video-js.vjs-fullscreen .vjs-xxivchat-control { display: flex; }

.video-js .vjs-xxivchat-control .xxivchat__player-chat-glyph {
  background-color: currentColor;
  display: block;
  height: var(--icon-size, 1.625rem);
  mask: var(--xxiv-player-chat-icon) center / contain no-repeat;
  opacity: 0.72;
  width: var(--icon-size, 1.625rem);
  -webkit-mask: var(--xxiv-player-chat-icon) center / contain no-repeat;
}

.video-js .vjs-xxivchat-control:hover .xxivchat__player-chat-glyph,
.video-js .vjs-xxivchat-control:focus-visible .xxivchat__player-chat-glyph,
.video-js .vjs-xxivchat-control--active .xxivchat__player-chat-glyph { opacity: 1; }

.video-js {
  --xxivchat-player-chat-width: clamp(240px, var(--xxivchat-panel-width, clamp(280px, 27vw, 390px)), min(50%, 720px));
}

.video-js.vjs-fullscreen {
  --xxivchat-player-chat-width: clamp(240px, var(--xxivchat-panel-width, clamp(280px, 28vw, 420px)), min(50vw, 720px));
}

/* PeerTube sizes non-fullscreen Video.js to the source aspect ratio and centers
   it inside a wider black canvas. In overlay mode, let the player element use
   that whole canvas; object-fit: contain keeps the picture unchanged while the
   chat can occupy otherwise unused pillarbox space. */
#videojs-wrapper > .video-js.xxivchat-player--chat-overlay:not(.vjs-fullscreen) {
  max-width: none !important;
  width: 100% !important;
}

.video-js > #xxivchat-container.xxivchat--player-fullscreen,
.video-js > #xxivchat-container.xxivchat--player-overlay {
  font-family: Arial, Helvetica, sans-serif;
  left: auto;
  max-height: none;
  max-width: none;
  opacity: 1;
  position: absolute;
  right: 0;
  transition: width 160ms ease, opacity 160ms ease, border-width 160ms ease;
  width: var(--xxivchat-player-chat-width) !important;
  z-index: 5;
}

.video-js > #xxivchat-container.xxivchat--player-fullscreen {
  bottom: 0;
  height: 100% !important;
  top: 0;
}

/* Overlay presentation follows the Video.js element through regular, theater,
   and fullscreen layouts. The measured control-bar height remains available
   while individual surfaces provide contrast over arbitrary video frames. */
.video-js > #xxivchat-container.xxivchat--player-overlay {
  --xxiv-accent: #ffad70;
  --xxiv-bg: transparent;
  --xxiv-bg-soft: rgb(5 5 5 / 78%);
  --xxiv-border: rgb(255 255 255 / 30%);
  --xxiv-fg: #fff;
  --xxiv-muted: #ddd;
  background: transparent;
  border: 0;
  bottom: max(var(--xxivchat-player-controls-height, 48px), env(safe-area-inset-bottom, 0px));
  color-scheme: dark;
  height: auto !important;
  top: env(safe-area-inset-top, 0px);
}

.video-js > #xxivchat-container.xxivchat--player-overlay .xxivchat__bar {
  background: rgb(5 5 5 / 60%);
  border: 0;
  border-radius: 6px;
  flex-basis: 36px;
  margin: 0 4px 4px;
}

.video-js > #xxivchat-container.xxivchat--player-overlay .xxivchat__bar .xxivchat__icon {
  filter: invert(1);
  opacity: .82;
}

.video-js > #xxivchat-container.xxivchat--player-overlay .xxivchat__presentation-button--active {
  background: rgb(255 255 255 / 18%);
}

.video-js > #xxivchat-container.xxivchat--player-overlay .xxivchat__content,
.video-js > #xxivchat-container.xxivchat--player-overlay .xxivchat__messages {
  background: transparent;
}

.video-js > #xxivchat-container.xxivchat--player-overlay .xxivchat__messages {
  gap: 4px;
  padding: 0 4px;
}

.video-js > #xxivchat-container.xxivchat--player-overlay .xxivchat__message,
.video-js > #xxivchat-container.xxivchat--player-overlay .xxivchat__system-message {
  background: rgb(5 5 5 / 62%);
  border: 0;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 32%);
}

.video-js > #xxivchat-container.xxivchat--player-overlay .xxivchat__message:hover {
  background: rgb(5 5 5 / 82%);
}

.video-js > #xxivchat-container.xxivchat--player-overlay .xxivchat__message--mentioned {
  background: color-mix(in srgb, var(--xxiv-accent) 24%, rgb(5 5 5 / 78%));
  box-shadow: inset 2px 0 var(--xxiv-accent), 0 1px 3px rgb(0 0 0 / 32%);
}

.video-js > #xxivchat-container.xxivchat--player-overlay.xxivchat--irc .xxivchat__message {
  margin: 0;
  padding: 2px 5px;
}

.video-js > #xxivchat-container.xxivchat--player-overlay .xxivchat__composer,
.video-js > #xxivchat-container.xxivchat--player-overlay .xxivchat__login-composer {
  background: transparent;
  border: 0;
  border-radius: 6px;
  margin: 4px;
}

.video-js > #xxivchat-container.xxivchat--player-overlay .xxivchat__input,
.video-js > #xxivchat-container.xxivchat--player-overlay .xxivchat__name,
.video-js > #xxivchat-container.xxivchat--player-overlay .xxivchat__instance,
.video-js > #xxivchat-container.xxivchat--player-overlay .xxivchat__setting input,
.video-js > #xxivchat-container.xxivchat--player-overlay .xxivchat__setting select {
  background: rgb(5 5 5 / 56%);
  border-color: transparent;
}

.video-js > #xxivchat-container.xxivchat--player-overlay .xxivchat__send,
.video-js > #xxivchat-container.xxivchat--player-overlay .xxivchat__provider-button,
.video-js > #xxivchat-container.xxivchat--player-overlay .xxivchat__login-row button,
.video-js > #xxivchat-container.xxivchat--player-overlay .xxivchat__emoji-button {
  background: rgb(5 5 5 / 56%);
  border-color: transparent;
}

.video-js > #xxivchat-container.xxivchat--player-overlay .xxivchat__panel,
.video-js > #xxivchat-container.xxivchat--player-overlay .xxivchat__message-menu,
.video-js > #xxivchat-container.xxivchat--player-overlay .xxivchat__mention-autocomplete,
.video-js > #xxivchat-container.xxivchat--player-overlay .xxivchat__emoji-picker,
.video-js > #xxivchat-container.xxivchat--player-overlay .xxivchat__toast,
.video-js > #xxivchat-container.xxivchat--player-overlay .xxivchat__jump-latest {
  background: rgb(5 5 5 / 92%);
  border-radius: 6px;
}

.video-js > #xxivchat-container.xxivchat--player-fullscreen > .xxivchat__panel-resize,
.video-js > #xxivchat-container.xxivchat--player-overlay > .xxivchat__panel-resize {
  display: block;
}

.video-js.vjs-fullscreen:has(> #xxivchat-container.xxivchat--panel-resizing) > #xxivchat-container,
.video-js.vjs-fullscreen:has(> #xxivchat-container.xxivchat--panel-resizing) > .vjs-tech,
.video-js.vjs-fullscreen:has(> #xxivchat-container.xxivchat--panel-resizing) > .vjs-poster,
.video-js.vjs-fullscreen:has(> #xxivchat-container.xxivchat--panel-resizing) > .vjs-text-track-display,
.video-js.vjs-fullscreen:has(> #xxivchat-container.xxivchat--panel-resizing) > .vjs-title-bar,
.video-js.vjs-fullscreen:has(> #xxivchat-container.xxivchat--panel-resizing) > .vjs-error-display,
.video-js.vjs-fullscreen:has(> #xxivchat-container.xxivchat--panel-resizing) > .vjs-modal-dialog,
.video-js.vjs-fullscreen:has(> #xxivchat-container.xxivchat--panel-resizing) > .vjs-control-bar {
  transition: none !important;
}

.video-js:has(> #xxivchat-container.xxivchat--player-overlay.xxivchat--panel-resizing) > #xxivchat-container {
  transition: none !important;
}

/* Outside fullscreen, a collapsed overlay remains as a narrow vertical handle
   on the player edge. Fullscreen collapse continues to hide it completely. */
.video-js:not(.vjs-fullscreen) > #xxivchat-container.xxivchat--player-overlay.xxivchat--collapsed {
  width: 34px !important;
}

.video-js:not(.vjs-fullscreen) > #xxivchat-container.xxivchat--player-overlay.xxivchat--collapsed .xxivchat__bar {
  border: 0;
  cursor: pointer;
  flex: 1;
  flex-direction: column;
  padding: 4px 2px;
}

.video-js:not(.vjs-fullscreen) > #xxivchat-container.xxivchat--player-overlay.xxivchat--collapsed .xxivchat__collapse-button {
  flex: 1 1 auto;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  margin: 0;
  width: 100%;
}

.video-js:not(.vjs-fullscreen) > #xxivchat-container.xxivchat--player-overlay.xxivchat--collapsed .xxivchat__collapse-button .xxivchat__icon {
  transform: rotate(180deg);
}

.video-js:not(.vjs-fullscreen) > #xxivchat-container.xxivchat--player-overlay.xxivchat--collapsed .xxivchat__collapse-label {
  display: block;
  font-size: 14px;
  font-weight: 650;
  transform: rotate(90deg);
  white-space: nowrap;
}

/* Video.js applies a higher-specificity display:block rule to every button
   inside the player. Restore the chat controls' own flex centering whenever
   chat is mounted under the player element. */
.video-js #xxivchat-container:is(.xxivchat--player-fullscreen, .xxivchat--player-overlay) .xxivchat__icon-button,
.video-js #xxivchat-container:is(.xxivchat--player-fullscreen, .xxivchat--player-overlay) .xxivchat__message-menu-button,
.video-js #xxivchat-container:is(.xxivchat--player-fullscreen, .xxivchat--player-overlay) .xxivchat__send,
.video-js #xxivchat-container:is(.xxivchat--player-fullscreen, .xxivchat--player-overlay) .xxivchat__provider-button,
.video-js #xxivchat-container:is(.xxivchat--player-fullscreen, .xxivchat--player-overlay) .xxivchat__login-row button,
.video-js #xxivchat-container:is(.xxivchat--player-fullscreen, .xxivchat--player-overlay) .xxivchat__moderation button:not(.xxivchat__icon-button),
.video-js #xxivchat-container:is(.xxivchat--player-fullscreen, .xxivchat--player-overlay) .xxivchat__share-row button {
  align-items: center;
  display: inline-flex;
  justify-content: center;
}

.video-js.vjs-fullscreen.xxivchat-player--chat-hidden > #xxivchat-container.xxivchat--player-fullscreen {
  border-width: 0;
  opacity: 0;
  pointer-events: none;
  width: 0 !important;
}

.video-js.vjs-fullscreen.xxivchat-player--chat-visible:not(.xxivchat-player--chat-overlay) > .vjs-tech,
.video-js.vjs-fullscreen.xxivchat-player--chat-visible:not(.xxivchat-player--chat-overlay) > .vjs-poster,
.video-js.vjs-fullscreen.xxivchat-player--chat-visible:not(.xxivchat-player--chat-overlay) > .vjs-text-track-display,
.video-js.vjs-fullscreen.xxivchat-player--chat-visible:not(.xxivchat-player--chat-overlay) > .vjs-title-bar,
.video-js.vjs-fullscreen.xxivchat-player--chat-visible:not(.xxivchat-player--chat-overlay) > .vjs-error-display,
.video-js.vjs-fullscreen.xxivchat-player--chat-visible:not(.xxivchat-player--chat-overlay) > .vjs-modal-dialog,
.video-js.vjs-fullscreen.xxivchat-player--chat-visible:not(.xxivchat-player--chat-overlay) > .vjs-control-bar {
  right: auto !important;
  transition: width 160ms ease;
  width: calc(100% - var(--xxivchat-player-chat-width)) !important;
}

.video-js.vjs-fullscreen.xxivchat-player--chat-visible:not(.xxivchat-player--chat-overlay) > .vjs-loading-spinner,
.video-js.vjs-fullscreen.xxivchat-player--chat-visible:not(.xxivchat-player--chat-overlay) > .vjs-big-play-button {
  left: calc((100% - var(--xxivchat-player-chat-width)) / 2);
}

@media screen and (max-width: 700px) {
  .video-js {
    --xxivchat-player-chat-width: clamp(240px, var(--xxivchat-panel-width, min(44vw, 320px)), min(52vw, 720px));
  }
}