.fk-watch-room-entry .handle-btn,
.fk-watch-room-detail-btn {
  cursor: pointer;
}

.fk-watch-room-detail-btn {
  margin-left: 8px;
}

.player .module-player-handle-items .handle-btn-name {
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}

.fk-watch-room-panel,
.fk-watch-toast {
  --fk-watch-bg: #e9ecef;
  --fk-watch-surface: #f7f8f9;
  --fk-watch-soft: #eef2f7;
  --fk-watch-border: #dfe4eb;
  --fk-watch-border-strong: #cfd7e3;
  --fk-watch-text: #20293a;
  --fk-watch-title: #172033;
  --fk-watch-muted: #697386;
  --fk-watch-subtle: #8792a6;
  --fk-watch-accent: #0080ff;
  --fk-watch-accent-hover: #0b73df;
  --fk-watch-accent-text: #fff;
  --fk-watch-chip: #fff;
  --fk-watch-status: #dcecff;
  --fk-watch-status-text: #28527d;
  --fk-watch-host-bg: #ffe08a;
  --fk-watch-host-text: #553b00;
  --fk-watch-reaction-bg: #fff6d8;
  --fk-watch-reaction-text: #74520b;
  --fk-watch-input: #fff;
  --fk-watch-toast-bg: rgba(24, 29, 40, .94);
  --fk-watch-toast-text: #fff;
}

.fk-watch-room-panel {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  height: auto;
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-top: 1px solid var(--fk-watch-border);
  border-radius: 0;
  background: var(--fk-watch-bg);
  color: var(--fk-watch-text);
  box-shadow: none;
}

html[data-mx-theme="black"] .fk-watch-room-panel,
html[data-mx-theme="black"] .fk-watch-toast {
  --fk-watch-bg: #16161a;
  --fk-watch-surface: #1f2229;
  --fk-watch-soft: #25252b;
  --fk-watch-border: #30323a;
  --fk-watch-border-strong: #3b3e48;
  --fk-watch-text: #e1e3e5;
  --fk-watch-title: #f4f7ff;
  --fk-watch-muted: #aeb6c8;
  --fk-watch-subtle: #7f889d;
  --fk-watch-chip: #25252b;
  --fk-watch-status: #243143;
  --fk-watch-status-text: #d7e7ff;
  --fk-watch-host-bg: #ffd36b;
  --fk-watch-host-text: #1f1300;
  --fk-watch-reaction-bg: rgba(255, 211, 107, .16);
  --fk-watch-reaction-text: #ffe5a1;
  --fk-watch-input: #1a1c1f;
  --fk-watch-toast-bg: rgba(15, 23, 32, .94);
}

.fk-watch-room-panel[hidden] {
  display: none !important;
}

.fk-watch-room-active {
  --fk-watch-rail-episodes-height: 100%;
  --fk-watch-rail-room-height: 100%;
  --fk-watch-rail-collapsed-height: 56px;
  --fk-watch-head-action-size: 40px;
  --fk-watch-rail-float-button-size: 40px;
  --fk-watch-fullscreen-side-width: clamp(300px, 28vw, 420px);
}

.fk-watch-room-active.fk-watch-rail-mode-room .module-player .module-main:fullscreen,
.fk-watch-room-active.fk-watch-rail-mode-room .module-player .module-main:-webkit-full-screen {
  display: flex;
  align-items: stretch;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #000;
}

.fk-watch-room-active.fk-watch-rail-mode-room .module-player .module-main:fullscreen .player-box,
.fk-watch-room-active.fk-watch-rail-mode-room .module-player .module-main:-webkit-full-screen .player-box {
  flex: 1 1 auto;
  min-width: 0;
  height: 100vh;
  border-radius: 0;
  background: #000;
}

.fk-watch-room-active.fk-watch-rail-mode-room .module-player .module-main:fullscreen .player-box::after,
.fk-watch-room-active.fk-watch-rail-mode-room .module-player .module-main:-webkit-full-screen .player-box::after {
  display: none;
}

.fk-watch-room-active.fk-watch-rail-mode-room .module-player .module-main:fullscreen .player-box-main,
.fk-watch-room-active.fk-watch-rail-mode-room .module-player .module-main:-webkit-full-screen .player-box-main {
  display: block;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.fk-watch-room-active.fk-watch-rail-mode-room .module-player .module-main:fullscreen .MacPlayer,
.fk-watch-room-active.fk-watch-rail-mode-room .module-player .module-main:-webkit-full-screen .MacPlayer {
  width: 100% !important;
  height: 100% !important;
  padding-bottom: 0 !important;
}

.fk-watch-room-active.fk-watch-rail-mode-room .module-player .module-main:fullscreen .module-player-side,
.fk-watch-room-active.fk-watch-rail-mode-room .module-player .module-main:-webkit-full-screen .module-player-side {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  flex: 0 0 var(--fk-watch-fullscreen-side-width);
  width: var(--fk-watch-fullscreen-side-width);
  height: 100vh;
  border-radius: 0;
  background: var(--fk-watch-bg);
}

.fk-watch-room-active.fk-watch-rail-mode-room .module-player .module-main:fullscreen .fk-watch-room-panel,
.fk-watch-room-active.fk-watch-rail-mode-room .module-player .module-main:-webkit-full-screen .fk-watch-room-panel {
  height: 100vh;
  border-top: 0;
  border-left: 1px solid var(--fk-watch-border);
}

html.fk-watch-room-fullscreen-lock,
html.fk-watch-room-fullscreen-lock body {
  overflow: hidden !important;
}

.fk-watch-room-active .module-player-side {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  overflow: hidden;
}

.fk-watch-room-active .module-player-side .fk-watch-room-panel {
  order: 1;
  flex: 0 0 var(--fk-watch-rail-room-height);
  min-height: 0;
  max-height: none;
  margin-bottom: 0;
  transition: flex-basis .18s ease, min-height .18s ease, max-height .18s ease;
}

.fk-watch-room-active .module-player-side > .module-player-info {
  order: 1;
  flex: 0 0 auto;
}

.fk-watch-room-active .module-player-side > .player-list {
  order: 2;
  display: flex;
  flex: 0 0 var(--fk-watch-rail-episodes-height);
  flex-direction: column;
  width: 100%;
  height: auto;
  min-height: 0;
  overflow: hidden;
  transition: flex-basis .18s ease, min-height .18s ease;
}

.fk-watch-room-active .module-player-side > .player-list .module-heading.player-heading {
  display: flex !important;
  align-items: center;
  flex: 0 0 auto;
  gap: 6px;
  min-height: 40px;
  padding-bottom: 0 !important;
  padding-right: 8px !important;
}

.fk-watch-room-active .module-player-side > .player-list .module-heading.player-heading .module-title {
  flex: 0 1 auto !important;
  min-width: 0;
  max-width: 42%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fk-watch-room-active .module-player-side > .player-list .module-heading.player-heading .module-tab {
  flex: 1 1 auto !important;
  min-width: 84px;
}

.fk-watch-room-active .module-player-side > .player-list .module-heading.player-heading .shortcuts-mobile-overlay {
  flex: 0 0 auto;
}

.fk-watch-room-active .module-player-side > .player-list .module-list {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  margin-top: 0;
}

.fk-watch-room-active .module-player-side > .player-list .module-play-list {
  margin-top: 0;
  max-height: none;
}

.fk-watch-room-active.fk-watch-rail-mode-room .module-player-side > .module-player-info,
.fk-watch-room-active.fk-watch-rail-mode-room .module-player-side > .player-list,
.fk-watch-room-active.fk-watch-rail-mode-room .module-player-side > .module-player-handle-items {
  display: none;
}

.fk-watch-room-active.fk-watch-rail-mode-room .module-player-side .fk-watch-room-panel {
  flex: 1 1 auto;
  min-height: 0;
}

.fk-watch-room-active.fk-watch-rail-mode-episodes .module-player-side .fk-watch-room-panel,
.fk-watch-room-active .fk-watch-room-panel.is-collapsed {
  flex: 0 0 var(--fk-watch-rail-collapsed-height);
  min-height: var(--fk-watch-rail-collapsed-height);
  max-height: var(--fk-watch-rail-collapsed-height);
}

.fk-watch-room-active .fk-watch-room-panel.is-collapsed .fk-watch-room-head {
  min-height: var(--fk-watch-rail-collapsed-height);
  border-bottom: 0;
}

.fk-watch-room-active.fk-watch-rail-mode-episodes .fk-watch-room-panel .fk-watch-room-meta,
.fk-watch-room-active.fk-watch-rail-mode-episodes .fk-watch-room-panel .fk-watch-room-status,
.fk-watch-room-active.fk-watch-rail-mode-episodes .fk-watch-room-panel .fk-watch-room-tabs,
.fk-watch-room-active.fk-watch-rail-mode-episodes .fk-watch-room-panel .fk-watch-room-body,
.fk-watch-room-panel.is-collapsed .fk-watch-room-meta,
.fk-watch-room-panel.is-collapsed .fk-watch-room-status,
.fk-watch-room-panel.is-collapsed .fk-watch-room-tabs,
.fk-watch-room-panel.is-collapsed .fk-watch-room-body {
  display: none;
}

.fk-watch-room-active.fk-watch-rail-mode-room .module-player-side {
  display: flex;
  flex-direction: column;
}

.fk-watch-room-active.fk-watch-rail-mode-episodes .module-player-side {
  display: block;
}

.fk-watch-room-active.fk-watch-rail-mode-episodes .module-player-side > .module-player-info {
  display: block;
}

.fk-watch-room-active.fk-watch-rail-mode-episodes .module-player-side > .player-list {
  display: block;
  flex: none;
  width: 100%;
  height: 100%;
  overflow: visible;
  transition: none;
}

.fk-watch-room-active.fk-watch-rail-mode-episodes .module-player-side > .player-list .module-heading.player-heading {
  gap: var(--fk-play-heading-gap, 30px);
  min-height: 0;
  padding-bottom: initial !important;
  padding-right: var(--fk-play-floating-gutter, 12px) !important;
}

.fk-watch-room-active.fk-watch-rail-mode-episodes .module-player-side > .player-list .module-heading.player-heading .module-title {
  flex: 0 0 auto !important;
  min-width: max-content;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
}

.fk-watch-room-active.fk-watch-rail-mode-episodes .module-player-side > .player-list .module-list {
  width: 100%;
}

.fk-watch-room-active.fk-watch-rail-mode-episodes .module-player-side > .module-player-handle-items {
  display: flex;
}

.fk-watch-room-active.fk-watch-rail-mode-episodes .module-player-side .fk-watch-room-panel {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 12;
  width: var(--fk-watch-rail-float-button-size);
  height: var(--fk-watch-rail-float-button-size);
  min-height: var(--fk-watch-rail-float-button-size);
  max-height: var(--fk-watch-rail-float-button-size);
  border: 0;
  background: transparent;
}

.fk-watch-room-active.fk-watch-rail-mode-episodes .fk-watch-room-panel .fk-watch-room-head,
.fk-watch-room-panel.is-collapsed .fk-watch-room-head {
  min-height: var(--fk-watch-rail-float-button-size);
  padding: 0;
  border-bottom: 0;
  justify-content: center;
}

.fk-watch-room-active.fk-watch-rail-mode-episodes .fk-watch-room-panel .fk-watch-room-title,
.fk-watch-room-panel.is-collapsed .fk-watch-room-title {
  display: none;
}

.fk-watch-room-active.fk-watch-rail-mode-episodes .fk-watch-room-panel .fk-watch-room-actions,
.fk-watch-room-panel.is-collapsed .fk-watch-room-actions {
  display: inline-flex;
  width: var(--fk-watch-rail-float-button-size);
  gap: 0;
}

.fk-watch-room-active.fk-watch-rail-mode-episodes .fk-watch-room-panel .fk-watch-icon-btn,
.fk-watch-room-panel.is-collapsed .fk-watch-icon-btn {
  width: var(--fk-watch-rail-float-button-size);
  height: var(--fk-watch-rail-float-button-size);
}

.fk-watch-room-active.fk-watch-rail-mode-episodes .fk-watch-room-panel [data-fk-watch-invite],
.fk-watch-room-panel.is-collapsed [data-fk-watch-invite] {
  display: none;
}

.fk-watch-room-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  box-sizing: border-box;
  padding: 6px 12px;
  border-bottom: 1px solid var(--fk-watch-border);
}

.fk-watch-room-panel.is-collapsed .fk-watch-room-title {
  flex: 1 1 auto;
}

.fk-watch-room-panel.is-rail-compact .fk-watch-room-head {
  min-height: 38px;
  padding: 4px 10px;
}

.fk-watch-room-panel.is-rail-compact .fk-watch-room-kicker,
.fk-watch-room-panel.is-rail-compact .fk-watch-room-meta {
  display: none;
}

.fk-watch-room-panel.is-rail-compact .fk-watch-room-status {
  height: 22px;
  margin-top: 4px;
  padding: 3px 7px;
  font-size: 10px;
}

.fk-watch-room-panel.is-rail-compact .fk-watch-room-body {
  padding: 4px 8px 6px;
}

.fk-watch-room-panel.is-rail-compact .fk-watch-message {
  padding: 2px 0;
  font-size: 11px;
}

.fk-watch-room-panel.is-rail-compact .fk-watch-room-reactions {
  height: auto;
  gap: 4px;
  padding: 1px 0;
}

.fk-watch-room-panel.is-rail-compact .fk-watch-room-reactions button {
  min-width: 0;
  height: 22px;
  font-size: 11px;
}

.fk-watch-room-panel.is-rail-compact .fk-watch-room-form {
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 5px;
}

.fk-watch-room-panel.is-rail-compact .fk-watch-room-form input,
.fk-watch-room-panel.is-rail-compact .fk-watch-room-form button {
  height: 28px;
  font-size: 12px;
}

.fk-watch-room-title {
  min-width: 0;
}

.fk-watch-room-kicker {
  display: block;
  color: var(--fk-watch-accent);
  font-size: 10px;
  line-height: 1.2;
}

.fk-watch-room-name {
  display: block;
  overflow: hidden;
  color: var(--fk-watch-title);
  font-size: 14px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fk-watch-room-actions {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 6px;
}

.fk-watch-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--fk-watch-border);
  border-radius: 8px;
  background: var(--fk-watch-surface);
  color: var(--fk-watch-text);
  font-size: 14px;
  cursor: pointer;
}

.fk-watch-icon-btn i {
  display: inline-block;
  font-size: 14px;
  line-height: 1;
}

.fk-watch-icon-btn:hover {
  border-color: rgba(0, 128, 255, .35);
  color: var(--fk-watch-accent);
}

.fk-watch-rail-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 34px;
  height: 28px;
  box-sizing: border-box;
  padding: 0 8px;
  border: 1px solid var(--fk-watch-border, #dfe4eb);
  border-radius: 8px;
  outline: none;
  background: var(--fk-watch-surface, #f7f8f9);
  color: var(--fk-watch-text, #20293a);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

html[data-mx-theme="black"] .fk-watch-rail-toggle {
  border-color: #30323a;
  background: #1f2229;
  color: #e1e3e5;
}

.fk-watch-rail-toggle:hover {
  border-color: rgba(0, 128, 255, .45);
  color: var(--fk-watch-accent, #0080ff);
}

.fk-watch-rail-toggle:focus-visible {
  border-color: var(--fk-watch-accent, #0080ff);
  box-shadow: 0 0 0 2px rgba(0, 128, 255, .14);
}

.fk-watch-rail-toggle i {
  display: inline-block;
  font-size: 12px;
  transform: rotate(0deg);
  transition: transform .18s ease;
}

.fk-watch-room-active.fk-watch-rail-mode-episodes .fk-watch-room-panel .fk-watch-rail-toggle i {
  transform: rotate(180deg);
}

.fk-watch-room-active .fk-watch-rail-toggle-room {
  width: 34px;
  padding: 0;
}

.fk-watch-room-active .fk-watch-mobile-toggle {
  display: inline-flex;
}

.fk-watch-room-panel:not(.is-collapsed) .fk-watch-room-head .fk-watch-icon-btn,
.fk-watch-room-panel:not(.is-collapsed) .fk-watch-room-head .fk-watch-rail-toggle {
  flex: 0 0 var(--fk-watch-head-action-size);
  width: var(--fk-watch-head-action-size);
  min-width: var(--fk-watch-head-action-size);
  height: var(--fk-watch-head-action-size);
  box-sizing: border-box;
  padding: 0;
}

.fk-watch-mobile-toggle {
  display: none;
}

.fk-watch-room-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 4px 10px 0;
  color: var(--fk-watch-muted);
  font-size: 10px;
}

.fk-watch-room-meta span,
.fk-watch-room-role {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 0 7px;
  border: 1px solid var(--fk-watch-border);
  border-radius: 999px;
  background: var(--fk-watch-chip);
}

.fk-watch-room-role.is-host {
  border-color: transparent;
  color: var(--fk-watch-host-text);
  background: var(--fk-watch-host-bg);
}

.fk-watch-room-status {
  flex: 0 0 auto;
  min-height: 24px;
  box-sizing: border-box;
  margin: 5px 10px 0;
  overflow: hidden;
  padding: 4px 7px;
  border-radius: 8px;
  background: var(--fk-watch-status);
  color: var(--fk-watch-status-text);
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fk-watch-room-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  padding: 5px 10px 0;
}

.fk-watch-room-tabs button,
.fk-watch-host-tools button,
.fk-watch-member-actions button,
.fk-watch-room-form button {
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.fk-watch-room-tabs button {
  height: 26px;
  background: var(--fk-watch-soft);
  color: var(--fk-watch-muted);
  font-size: 13px;
}

.fk-watch-room-tabs button.active {
  background: var(--fk-watch-accent);
  color: var(--fk-watch-accent-text);
  font-weight: 600;
}

.fk-watch-room-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  padding: 5px 10px 8px;
}

.fk-watch-room-view {
  display: none;
  height: 100%;
  min-height: 0;
}

.fk-watch-room-view.active {
  display: flex;
  flex-direction: column;
}

.fk-watch-room-messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}

.fk-watch-message {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px;
  padding: 3px 0;
  color: var(--fk-watch-text);
  font-size: 12px;
  line-height: 1.45;
}

.fk-watch-message.is-system {
  display: block;
  color: var(--fk-watch-accent);
  font-size: 12px;
}

.fk-watch-message-name {
  max-width: 96px;
  overflow: hidden;
  color: var(--fk-watch-accent);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fk-watch-message-body {
  min-width: 0;
  overflow-wrap: anywhere;
}

.fk-watch-message-reaction {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--fk-watch-reaction-bg);
  color: var(--fk-watch-reaction-text);
}

.fk-watch-room-reactions {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  height: auto;
  box-sizing: border-box;
  gap: 4px;
  flex: 0 0 auto;
  overflow: hidden;
  padding: 2px 0;
  scrollbar-width: none;
}

.fk-watch-room-reactions::-webkit-scrollbar {
  display: none;
}

.fk-watch-room-reactions button {
  min-width: 0;
  width: 100%;
  height: 24px;
  padding: 0 4px;
  overflow: hidden;
  border: 1px solid var(--fk-watch-border);
  border-radius: 8px;
  background: var(--fk-watch-surface);
  color: var(--fk-watch-text);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  text-overflow: clip;
  white-space: nowrap;
}

.fk-watch-room-reactions button:hover {
  border-color: rgba(0, 128, 255, .35);
  color: var(--fk-watch-accent);
}

.fk-watch-room-reactions button:disabled,
.fk-watch-room-form button:disabled {
  cursor: not-allowed;
  opacity: .58;
}

.fk-watch-room-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 60px;
  align-items: center;
  gap: 6px;
}

.fk-watch-room-form input {
  min-width: 0;
  height: 34px;
  box-sizing: border-box;
  padding: 0 10px;
  border: 1px solid var(--fk-watch-border-strong);
  border-radius: 8px;
  outline: none;
  background: var(--fk-watch-input);
  color: var(--fk-watch-text);
}

.fk-watch-room-form input::placeholder {
  color: var(--fk-watch-subtle);
}

.fk-watch-room-form input:focus {
  border-color: var(--fk-watch-accent);
}

.fk-watch-room-form button,
.fk-watch-host-tools button,
.fk-watch-member-actions button {
  background: var(--fk-watch-accent);
  color: var(--fk-watch-accent-text);
  font-weight: 600;
}

.fk-watch-room-form button:hover,
.fk-watch-host-tools button:hover,
.fk-watch-member-actions button:hover {
  background: var(--fk-watch-accent-hover);
}

.fk-watch-room-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  box-sizing: border-box;
  padding: 0 10px;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}

.fk-watch-host-tools {
  display: flex;
  gap: 8px;
  padding-bottom: 10px;
}

.fk-watch-host-tools button,
.fk-watch-member-actions button {
  min-height: 30px;
  padding: 0 10px;
  font-size: 12px;
}

.fk-watch-room-members {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.fk-watch-member {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--fk-watch-border);
}

.fk-watch-member-main {
  min-width: 0;
}

.fk-watch-member-name {
  display: block;
  overflow: hidden;
  color: var(--fk-watch-title);
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fk-watch-member-sub {
  display: block;
  margin-top: 2px;
  color: var(--fk-watch-muted);
  font-size: 11px;
}

.fk-watch-member-actions {
  display: inline-flex;
  gap: 6px;
}

.fk-watch-toast {
  position: fixed;
  right: 18px;
  bottom: 22px;
  z-index: 99999;
  max-width: min(320px, calc(100vw - 36px));
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--fk-watch-toast-bg);
  color: var(--fk-watch-toast-text);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
  font-size: 13px;
}

@media (max-width: 1024px) {
  .fk-watch-room-active {
    --fk-watch-head-action-size: 38px;
    --fk-watch-rail-float-button-size: 42px;
    --fk-watch-mobile-player-height: 220px;
    --fk-watch-mobile-bottom-safe: calc(74px + env(safe-area-inset-bottom));
    --fk-watch-room-mobile-max-height: calc(100vh - var(--fk-watch-mobile-player-height) - var(--fk-watch-mobile-bottom-safe));
  }

  .fk-watch-room-active .module-player-side {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  .fk-watch-room-active .module-player .player-box {
    margin-bottom: 10px;
  }

  .fk-watch-room-active.fk-watch-rail-mode-room .player-box-main {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 90;
    width: 100%;
    background: #000;
  }

  .fk-watch-room-active.fk-watch-rail-mode-room .module-player-side {
    padding-top: var(--fk-watch-mobile-player-height);
  }

  .fk-watch-room-active .module-player-side .fk-watch-room-panel,
  .fk-watch-room-panel {
    height: min(46vh, var(--fk-watch-room-mobile-max-height));
    min-height: 300px;
    max-height: var(--fk-watch-room-mobile-max-height);
    margin-bottom: 12px;
    border-top: 1px solid var(--fk-watch-border);
    border-radius: 8px;
  }

  .fk-watch-room-active.fk-watch-rail-mode-episodes .module-player-side .fk-watch-room-panel {
    top: 8px;
    right: 8px;
    width: var(--fk-watch-rail-float-button-size);
    height: var(--fk-watch-rail-float-button-size);
    min-height: var(--fk-watch-rail-float-button-size);
    max-height: var(--fk-watch-rail-float-button-size);
    margin-bottom: 0;
    border: 0;
    border-radius: 8px;
  }

  .fk-watch-room-actions {
    gap: 8px;
  }

  .fk-watch-room-actions .fk-watch-icon-btn {
    width: 38px;
    height: 38px;
  }

  .fk-watch-icon-btn i {
    font-size: 15px;
  }

  .fk-watch-room-status {
    min-height: 28px;
    overflow: visible;
    white-space: normal;
  }

  .fk-watch-room-active .module-player-side > .player-list,
  .fk-watch-room-active .module-player-side .fk-watch-room-panel {
    transition: height .18s ease, min-height .18s ease;
  }

  .fk-watch-room-active .module-player-side > .player-list .module-heading.player-heading {
    min-height: 52px;
  }

  .fk-watch-room-active.fk-watch-rail-mode-room .module-player-side > .player-list {
    display: none;
  }

  .fk-watch-room-active.fk-watch-rail-mode-room .module-player-side > .player-list .module-list {
    display: none;
  }

  .fk-watch-room-active.fk-watch-rail-mode-room .module-player-side .fk-watch-room-panel {
    height: calc(100vh - var(--fk-watch-mobile-player-height) - var(--fk-watch-mobile-bottom-safe));
    min-height: min(420px, calc(100vh - var(--fk-watch-mobile-player-height) - var(--fk-watch-mobile-bottom-safe)));
    max-height: calc(100vh - var(--fk-watch-mobile-player-height) - var(--fk-watch-mobile-bottom-safe));
  }

  .fk-watch-room-active.fk-watch-rail-mode-room .module-player-side > .module-player-handle-items {
    position: absolute;
    top: 12px;
    right: 0;
    bottom: auto;
    left: auto;
  }

  .fk-watch-mobile-toggle {
    display: inline-flex;
  }

  .fk-watch-room-panel.is-collapsed {
    height: 56px;
    min-height: 56px;
  }

  .fk-watch-room-panel.is-collapsed .fk-watch-room-meta,
  .fk-watch-room-panel.is-collapsed .fk-watch-room-status,
  .fk-watch-room-panel.is-collapsed .fk-watch-room-tabs,
  .fk-watch-room-panel.is-collapsed .fk-watch-room-body {
    display: none;
  }
}

@media (min-width: 561px) and (max-width: 1024px) {
  .fk-watch-room-active.fk-watch-rail-mode-room .module-player-side .fk-watch-room-panel,
  .fk-watch-room-panel:not(.is-collapsed) {
    max-height: calc(100vh - var(--fk-watch-mobile-player-height, 220px) - var(--fk-watch-mobile-bottom-safe, 74px));
  }

  .fk-watch-room-active .module-player-side,
  .fk-watch-room-active .module-player-side > .player-list,
  .fk-watch-room-active .module-player-side > .player-list .module-list,
  .fk-watch-room-active .module-player-side .fk-watch-room-panel,
  .fk-watch-room-messages,
  .fk-watch-room-members {
    min-height: 0;
  }

  .fk-watch-room-active .module-player-side > .player-list,
  .fk-watch-room-active .module-player-side > .player-list .module-list,
  .fk-watch-room-active .module-player-side .fk-watch-room-panel {
    overflow: hidden;
  }

  .fk-watch-room-body,
  .fk-watch-room-view.active,
  .fk-watch-room-messages,
  .fk-watch-room-members {
    min-height: 0;
  }

  .fk-watch-room-body,
  .fk-watch-room-view.active {
    overflow: hidden;
  }
}

@media (max-width: 560px) {
  .fk-watch-room-detail-btn {
    margin-left: 0;
    margin-top: 8px;
  }

  .fk-watch-room-active.fk-watch-rail-mode-room .module-player-side .fk-watch-room-panel,
  .fk-watch-room-panel:not(.is-collapsed) {
    height: calc(100vh - var(--fk-watch-mobile-player-height) - var(--fk-watch-mobile-bottom-safe));
    min-height: min(420px, calc(100vh - var(--fk-watch-mobile-player-height) - var(--fk-watch-mobile-bottom-safe)));
    max-height: calc(100vh - var(--fk-watch-mobile-player-height) - var(--fk-watch-mobile-bottom-safe));
  }

  .fk-watch-room-status {
    min-height: 30px;
    padding: 5px 8px;
    line-height: 1.45;
  }
}

@media (max-width: 1024px) {
  .fk-watch-room-active.fk-watch-rail-mode-episodes .module-player-side > .module-player-handle-items {
    right: 75px;
  }

  .fk-watch-room-active.fk-watch-rail-mode-episodes .module-player-side .fk-watch-room-panel {
    top: 25px;
    right: 25px;
  }
}

@media (max-width: 560px) {
  .fk-watch-room-active.fk-watch-rail-mode-episodes .module-player-side > .module-player-handle-items {
    top: 12px;
    right: 58px;
  }

  .fk-watch-room-active.fk-watch-rail-mode-episodes .module-player-side .fk-watch-room-panel {
    top: 12px;
    right: 8px;
  }
}