my-plugin-placeholder:has(#plugin-placeholder-player-next #xxivchat-container) {
  align-self: stretch;
  display: block;
  flex: 0 0 auto;
  height: 66vh;
  max-height: 66vh;
  max-width: clamp(280px, 27vw, 390px);
  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: clamp(280px, 27vw, 390px);
}

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

#xxivchat-container {
  --xxiv-accent: var(--primary, var(--mainColor, #f2690d));
  --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-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;
  width: 100%;
}

#xxivchat-container.xxivchat--contrast-dark {
  --xxiv-accent: #ff9e50;
  --xxiv-bg: #050505;
  --xxiv-bg-soft: #191919;
  --xxiv-border: #777;
  --xxiv-fg: #fff;
  --xxiv-muted: #c4c4c4;
  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;
  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--settings,
.xxivchat__icon--smile,
.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--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__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-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 {
  display: inline-block;
  font-weight: inherit;
  margin: 0;
  max-width: 45%;
  overflow: visible;
  text-overflow: clip;
  vertical-align: baseline;
  user-select: text;
}

#xxivchat-container.xxivchat--irc .xxivchat__irc-name-decoration { display: inline; }
#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__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;
  padding: 2px;
  position: absolute;
  right: 2px;
  top: 25px;
  z-index: 9;
}

.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__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 input::placeholder,
#xxivchat-container textarea::placeholder { color: var(--xxiv-muted); opacity: 1; }

.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: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__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) {
  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; }
}