.user-list-page .user-list > .item {
  padding: 8px 16px;
  display: grid;
  grid-template-columns: auto 2fr 0.5fr 0.8fr;
  gap: 8px;
  align-items: center;
  border-radius: 16px;
}
.user-list-page .user-list > .item:hover {
  background-color: var(--background-select);
}

.room-list-page .room-list > .item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  padding: 8px 16px;
  gap: 8px;
  align-items: center;
  border-radius: 16px;
}
.room-list-page .room-list > .item:hover {
  background-color: var(--background-select);
}

.live-room-grid {
  align-content: start;
}
.live-room-grid > .au-alertbox {
  grid-column: 1/-1;
  margin-top: 32px;
}

.live-room-card {
  min-width: 0;
  overflow: hidden;
  align-self: start;
  border: solid 1px var(--outline-variant);
  border-radius: 16px;
  background: var(--surface);
}
.live-room-card .live-room-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: black;
}
.live-room-card .live-room-preview video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: black;
}
.live-room-card .live-room-preview .preview-state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: white;
  background: rgba(0, 0, 0, 0.75);
}
.live-room-card .live-room-preview .preview-error {
  display: none;
}
.live-room-card .live-room-preview video[data-preview-state=playing] ~ .preview-loading,
.live-room-card .live-room-preview video[data-preview-state=playing] ~ .preview-error {
  display: none;
}
.live-room-card .live-room-preview video[data-preview-state=error] ~ .preview-loading {
  display: none;
}
.live-room-card .live-room-preview video[data-preview-state=error] ~ .preview-error {
  display: flex;
}
.live-room-card .live-room-preview .live-indicator {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  color: white;
  background: var(--error);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.live-room-card.preview-failed .preview-loading {
  display: none;
}
.live-room-card.preview-failed .preview-error {
  display: flex;
}
.live-room-card .live-room-card-details {
  padding: 16px;
}
.live-room-card .live-room-card-details .clickable-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-room-card .live-room-card-details .room-detail-icon {
  display: inline-flex;
  color: var(--secondary);
}
.live-room-card.live-room-card-placeholder {
  aspect-ratio: 16/11;
}

.quick-room-actions-dialog {
  max-width: 560px;
}

.room-watch-page {
  height: 100%;
}
.room-watch-page .video-container {
  height: 100%;
  width: 100%;
  background-color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.room-watch-page .video-container video {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

@keyframes au-modal-scrim-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes au-modal-scrim-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.admin-room-overlay {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
}
.admin-room-overlay span {
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
}
.admin-room-overlay .icon {
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.7));
}
.admin-room-overlay > .content {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0));
}
@media (min-width: 601px) {
  .admin-room-overlay > .content {
    grid-template-columns: 1fr clamp(300px, 28vw, 420px);
  }
}
.admin-room-overlay .left-pane {
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 16px;
  gap: 16px;
  min-height: 0;
}
.admin-room-overlay .left-pane > .top-row {
  display: flex;
  justify-content: flex-start;
  pointer-events: auto;
}
.admin-room-overlay .left-pane > .guests {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  pointer-events: auto;
  max-height: 60%;
  overflow-y: auto;
}
.admin-room-overlay .right-pane {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
  min-height: 0;
  overflow: hidden;
  pointer-events: auto;
  background-color: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
}
@media (max-width: 767px) {
  .admin-room-overlay .right-pane {
    max-height: 45%;
  }
}

.admin-room-details-view {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--on-background);
}

.admin-room-commands-view {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-room-activity-view {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  min-height: 0;
}

.admin-room-feed-view {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: 4px;
  min-height: 0;
}
.admin-room-feed-view > .scrollable {
  overflow-y: auto;
  min-height: 0;
}
.admin-room-feed-view > .scrollable > .feed-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-room-feed-view > .scrollable > .feed-items::before {
  content: "";
  display: block;
  height: 60%;
  flex-shrink: 0;
}
.admin-room-feed-view .entry {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.admin-room-feed-view .entry.system {
  align-items: center;
  color: var(--on-background);
  opacity: 0.8;
}
.admin-room-feed-view .entry.system .au-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.admin-room-feed-view .entry > .body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-break: break-word;
}

.admin-room-participant-list-view {
  min-height: 0;
  overflow: hidden;
}
.admin-room-participant-list-view > .scrollable {
  height: 100%;
  overflow-y: auto;
}
.admin-room-participant-list-view .participants {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-room-participant-list-view .participant {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.25);
}
.admin-room-participant-list-view .identity {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.admin-guest-list-view {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-guest-list-view > .guests {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-guest-view {
  position: relative;
  width: 140px;
  aspect-ratio: 3/4;
  border-radius: 8px;
  overflow: clip;
  background-color: black;
}
.admin-guest-view .publication-view,
.admin-guest-view video {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.admin-guest-view > .overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 4px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0) 50%);
}
.admin-guest-view > .overlay > .identity {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.admin-guest-view > .overlay > .identity span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-guesting-requests-view {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.admin-guesting-requests-view > .request {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.5);
}
.admin-guesting-requests-view > .request > .identity {
  display: flex;
  align-items: center;
  gap: 4px;
}