.chat-meta-panel {
  align-items: stretch;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  position: fixed;
  right: 12px;
  top: 12px;
  max-width: min(100%, 520px);
  padding: 10px;
  width: fit-content;
  z-index: 2000;
}

.chat-meta-topic,
.chat-meta-timer,
.chat-admin-controls {
  background: var(--bg-pan);
  border-radius: var(--b-rd);
  box-shadow: var(--sdw);
}

.chat-meta-topic,
.chat-meta-timer {
  align-items: center;
  display: flex;
  min-height: 38px;
  padding: 8px 10px;
}

.chat-meta-topic {
  border: 1px solid rgba(137, 34, 255, .75);
  max-width: 360px;
  min-width: 120px;
}

.chat-meta-topic strong {
  color: var(--clr);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.chat-meta-topic strong.is-empty {
  display: none;
}

.chat-meta-timer {
  border: 1px solid rgba(255, 255, 255, .08);
  min-width: 105px;
  text-align: right;
}

.chat-meta-timer strong {
  color: #ffffff;
  font-size: .98rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

.chat-meta-timer strong.is-expired {
  color: var(--red);
}

.chat-admin-controls {
  border: 1px solid rgba(255, 255, 255, .06);
  display: flex;
  flex-direction: column;
  gap: 8px;
  left: 12px;
  max-width: 520px;
  padding: 10px;
  position: fixed;
  top: 12px;
  width: min(520px, calc(100vw - 24px));
  z-index: 2000;
}

.chat-admin-row {
  align-items: flex-end;
  display: flex;
  gap: 10px;
}

.chat-admin-field {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.chat-admin-field span {
  color: var(--gray);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.2;
}

.chat-admin-topic-field {
  flex-basis: 100%;
}

.chat-admin-hours-field {
  max-width: 160px;
}

.chat-admin-field input {
  min-height: 35px;
  width: 100%;
}

.chat-admin-topic-field input {
  border-color: rgba(137, 34, 255, .85);
  box-shadow: inset 0 0 0 1px rgba(137, 34, 255, .25);
}

.chat-admin-row button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.chat-admin-status {
  color: var(--gray);
  font-size: .8rem;
  min-height: 1rem;
}

body.chat-user-panel-visible main:not(.amd) {
  padding-top: 74px;
}

body.chat-admin-panel-visible main.amd {
  padding-top: 150px;
}

@media (max-width: 720px) {
  .chat-meta-panel {
    flex-direction: column;
    left: 12px;
    max-width: none;
    width: calc(100vw - 24px);
  }

  .chat-meta-topic,
  .chat-meta-timer {
    max-width: none;
    width: 100%;
  }

  .chat-meta-timer {
    justify-content: flex-end;
  }

  .chat-admin-row {
    align-items: stretch;
    flex-direction: column;
  }

  .chat-admin-hours-field {
    max-width: none;
  }

  body.chat-user-panel-visible main:not(.amd) {
    padding-top: 132px;
  }

  body.chat-admin-panel-visible main.amd {
    padding-top: 220px;
  }
}