/* Conversation chat floats over the person's own camera, like OmeTV: the
   partner's video stays uncovered and the messages stay readable over video.
   No entry animation: calls pause every CSS animation (.call-live), which
   would leave a new message frozen at its first, invisible frame. */
.call-screen .local-card {
  --chat-mark-space: 96px;
}

.call-screen .chat-overlay {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: calc(100% - 16px);
  pointer-events: none;
}

.call-screen .chat-overlay .messages {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  max-height: min(62%, 320px);
  margin: 0;
  padding: 18px 0 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  background: none;
  pointer-events: auto;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22px);
}

.call-screen .chat-overlay .messages::-webkit-scrollbar {
  display: none;
}

.call-screen .chat-overlay .messages > :first-child {
  margin-top: auto;
}

.call-screen .chat-overlay .message {
  align-self: flex-start;
  max-width: 82%;
  margin: 0;
  padding: 6px 11px;
  border: 0;
  border-radius: 15px 15px 15px 5px;
  background: #0b0a10a6;
  color: #fff;
  font-size: 14px;
  line-height: 1.35;
  text-shadow: 0 1px 2px #000a;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.call-screen .chat-overlay .message.mine {
  align-self: flex-end;
  border-radius: 15px 15px 5px 15px;
  background: #6c47d6b8;
}

.call-screen .chat-overlay .message.system {
  align-self: center;
  max-width: 92%;
  padding: 4px 10px;
  border-radius: 10px;
  background: #0006;
  color: #ffffffd6;
  font-size: 12px;
  text-align: center;
}

.call-screen .chat-overlay .message.system[role="button"] {
  cursor: pointer;
}

.call-screen .chat-overlay .chat-empty {
  align-self: center;
  margin: 0;
  padding: 5px 11px;
  border-radius: 10px;
  background: #0007;
  color: #ffffffd9;
  font-size: 12px;
  text-align: center;
}

/* The composer leaves the bottom-right corner to the simpeo.tv mark. */
.call-screen .chat-overlay .message-form {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 var(--chat-mark-space) 0 0;
  padding: 0;
  border: 0;
  background: none;
  pointer-events: auto;
}

.call-screen .chat-overlay .message-form input {
  flex: 1 1 auto;
  width: 0;
  min-width: 0;
  height: 40px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #ffffff38;
  border-radius: 20px;
  background: #0b0a1094;
  color: #fff;
  font-size: 16px;
  box-shadow: none;
}

.call-screen .chat-overlay .message-form input::placeholder {
  color: #ffffffb3;
}

.call-screen .chat-overlay .message-form input:focus {
  outline: 2px solid #b99bff;
  outline-offset: 0;
  background: #0b0a10c4;
}

.call-screen .chat-overlay .message-form input:disabled {
  opacity: .7;
}

.call-screen .chat-overlay .message-form button {
  display: grid;
  flex: 0 0 40px;
  place-items: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #7b55e6;
  color: #fff;
}

.call-screen .chat-overlay .message-form button.chat-hide {
  border: 1px solid #ffffff38;
  background: #0b0a1094;
}

.call-screen .chat-overlay .message-form button:disabled {
  opacity: .5;
}

.call-screen .chat-overlay .message-form .icon {
  width: 19px;
  height: 19px;
}

/* While the camera is off the mark is hidden, so the composer can use it. */
.call-screen .local-card:has(#localPlaceholder:not([hidden])) .chat-overlay .message-form {
  margin-right: 0;
}

.call-screen #chatToggle {
  position: relative;
}

.call-screen #chatToggle[data-unread]::after {
  content: attr(data-unread);
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: #ff4f6e;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}

@media (min-width: 701px) {
  .call-screen .local-card {
    --chat-mark-space: 112px;
  }

  .call-screen .chat-overlay {
    left: 14px;
    right: 14px;
    bottom: 12px;
  }

  .call-screen .chat-overlay .message {
    max-width: 72%;
    font-size: 15px;
  }
}

/* Entry to Chat en vivo, mirrored with the brand on the waiting screen. */
.call-screen .rooms-entry {
  position: absolute;
  top: max(10px, env(safe-area-inset-top, 0px));
  right: 10px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 12px 6px 9px;
  border: 1px solid #ffffff2e;
  border-radius: 22px;
  background: #120b20b8;
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.call-screen .rooms-entry .icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: #c9b2ff;
}

.call-screen .rooms-entry span {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.call-screen .rooms-entry strong {
  font-size: 13px;
  font-weight: 700;
}

.call-screen .rooms-entry small {
  color: #ffffffb8;
  font-size: 11px;
}

.call-screen .rooms-entry.live small::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
  background: #3ddc84;
  vertical-align: 1px;
}

.call-screen .rooms-entry:hover,
.call-screen .rooms-entry:focus-visible {
  background: #2a1a46d9;
}

/* Chat en vivo page: header, channel chips, the room log and the composer. */
.call-screen #roomsSurface {
  position: fixed;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  padding: var(--call-safe-top) 0 var(--call-safe-bottom);
  background: radial-gradient(ellipse at 90% 0, #291b3c 0, transparent 53%), #100c19;
  color: #f2e9fa;
}

.call-screen .rooms-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 6px;
}

.call-screen .rooms-back {
  display: grid;
  flex: 0 0 44px;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid #ceb2f025;
  border-radius: 14px;
  background: #cbb1ff09;
  color: #decaef;
}

.call-screen .rooms-back .icon {
  width: 22px;
  height: 22px;
}

.call-screen .rooms-heading h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.4px;
}

.call-screen .rooms-heading p {
  margin: 2px 0 0;
  color: #bfa8d6;
  font-size: 12px;
}

.call-screen .rooms-channels {
  display: flex;
  gap: 8px;
  padding: 6px 12px 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.call-screen .rooms-channels::-webkit-scrollbar {
  display: none;
}

.call-screen .room-chip,
.call-screen #roomsCountry {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #d3b3f12e;
  border-radius: 18px;
  background: #241a2e;
  color: #eadcfb;
  font-size: 13px;
  white-space: nowrap;
}

.call-screen .room-chip.selected {
  border-color: #b48cff;
  background: #50316d;
  color: #fff;
}

.call-screen .room-chip small {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 10px;
  background: #3ddc8433;
  color: #8ff0bb;
  font-size: 11px;
  text-align: center;
}

.call-screen #roomsCountry {
  max-width: 150px;
  appearance: auto;
}

.call-screen .rooms-rules {
  margin: 0 12px 6px;
  color: #a993bd;
  font-size: 11px;
  line-height: 1.4;
}

.call-screen .rooms-log {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
  padding: 6px 12px 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.call-screen .rooms-log > :first-child {
  margin-top: auto;
}

.call-screen .room-message {
  padding: 5px 8px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.call-screen .room-message.mine {
  background: #50316d55;
}

.call-screen .room-author {
  display: inline;
  margin: 0 6px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: #c9b2ff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.call-screen .room-message.gold .room-author {
  color: #f3ce87;
}

.call-screen .room-text {
  color: #f2e9fa;
}

.call-screen .room-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.call-screen .room-actions button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #ffffff26;
  border-radius: 17px;
  background: #2b1e3a;
  color: #eadcfb;
  font-size: 12px;
}

.call-screen .rooms-status {
  margin: 0 12px 6px;
  padding: 8px 11px;
  border: 1px solid #dabfff25;
  border-radius: 10px;
  background: #2b1e3a;
  color: #eadcfb;
  font-size: 13px;
}

.call-screen .rooms-compose,
.call-screen .rooms-name div {
  display: flex;
  gap: 8px;
}

.call-screen .rooms-compose {
  padding: 8px 12px 10px;
  border-top: 1px solid #e0c2ff13;
  background: #130d1c;
}

.call-screen .rooms-name {
  padding: 10px 12px 12px;
  border-top: 1px solid #e0c2ff13;
  background: #130d1c;
}

.call-screen .rooms-name label {
  display: block;
  margin-bottom: 8px;
  color: #eadcfb;
  font-size: 14px;
  font-weight: 600;
}

.call-screen .rooms-compose input,
.call-screen .rooms-name input {
  flex: 1 1 auto;
  width: 0;
  min-width: 0;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid #d3b3f124;
  border-radius: 23px;
  background: #241a2e;
  color: #f0e4fa;
  font-size: 16px;
}

.call-screen .rooms-compose button,
.call-screen .rooms-name button {
  flex: 0 0 auto;
  min-width: 46px;
  height: 46px;
  padding: 0 14px;
  border: 0;
  border-radius: 23px;
  background: #bd97f2;
  color: #28133b;
  font-size: 15px;
  font-weight: 700;
}

.call-screen .rooms-compose .icon {
  width: 21px;
  height: 21px;
}

@media (min-width: 701px) {
  .call-screen #roomsSurface {
    padding-left: max(0px, calc((100vw - 820px) / 2));
    padding-right: max(0px, calc((100vw - 820px) / 2));
  }

  .call-screen .rooms-entry {
    top: 14px;
    right: 16px;
  }
}