body.ui-stream,
body.ui-chat-popout {
  height: 100dvh;
}

body.ui-chat-popout {
  --chat-popout-min-width: var(--chat-min-width);
  min-width: var(--chat-popout-min-width);
  overflow-x: auto;
}

body.ui-chat-popout.chat-split-active {
  --chat-popout-min-width: calc(var(--chat-min-width) * 2 + var(--chat-split-divider-width));
}

body.ui-chat-popout #chat {
  width: 100% !important;
  min-width: var(--chat-popout-min-width) !important;
  max-width: none !important;
  height: 100%;
  max-height: none;
  flex: none;
  border: 0;
}

body.ui-skin #chat[hidden] {
  display: none !important;
}

body.ui-skin #chat-resize {
  touch-action: none;
}

body.ui-skin.resizing {
  user-select: none;
}

body.ui-skin .site-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

body.ui-skin #chat-visibility-btn {
  flex-shrink: 0;
  padding: 5px 9px;
  font: 600 12px/1.25 system-ui, sans-serif;
  white-space: nowrap;
}

body.ui-skin #chat-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr);
  gap: 6px;
}

body.ui-skin :is(#chat-header-left, #chat-header-right) {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

body.ui-skin #chat-header-left {
  grid-column: 1;
  grid-row: 1;
  gap: 10px;
}

body.ui-skin #chat-header-right {
  grid-column: 3;
  grid-row: 1;
  justify-content: flex-end;
}

body.ui-skin #chat-header :is(#poll-create-button, #mod-queue-btn, #streamer-menu-btn) {
  width: 30px;
  min-width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}

body.ui-skin #chat-header #stage-header-btn {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  left: auto;
  transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
}

body.ui-skin #chat-status {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding-inline: 12px;
}

body.ui-skin #chat-status :is(#private-indicator, #twitch-indicator) {
  margin-left: 0;
}

body.ui-skin #chat-input {
  margin: 0;
}

body.ui-skin #chat-pinned {
  max-height: 40%;
  overflow-y: auto;
  overscroll-behavior: contain;
}

body.ui-skin .pinned-entry + .pinned-entry {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--ui-button-edge);
}

body.ui-skin .pinned-unpin[hidden] {
  display: none;
}

body.ui-skin:not(.ui-admin) :is(#settings-menu, #streamer-menu, #poll-composer) {
  min-width: min(var(--chat-panel-min-width), calc(100% - var(--chat-panel-gutter)), calc(100vw - var(--chat-panel-gutter)));
  max-width: min(var(--chat-panel-max-width), calc(100% - var(--chat-panel-gutter)), calc(100vw - var(--chat-panel-gutter)));
}

body.ui-skin:not(.ui-admin) :is(#emoji-picker, #mod-queue-popup, #viewer-list-popup, #stage-dropdown, #stage-invite-popup, #twitch-popup, #ban-popup, #ban-cluster-panel, #mention-popup, .stream-chrome-menu, .chat-context-popover, .chat-report-dialog, .tip-modal-content) {
  max-width: min(var(--chat-panel-max-width), calc(100vw - var(--chat-panel-gutter)));
  box-sizing: border-box;
  overflow-wrap: anywhere;
}

body.ui-skin #stage-invite-popup {
  white-space: normal;
}

body.ui-chat-popout #chat-split-container.active {
  flex-direction: row;
}

body.ui-chat-popout :is(#twitch-messages, #local-messages) {
  min-width: var(--chat-min-width);
}

body.ui-chat-popout #split-divider {
  width: var(--chat-split-divider-width);
  height: auto;
  cursor: ew-resize;
}

body.ui-chat-popout #split-divider::after {
  width: 2px;
  height: 30px;
}