/* Web responsive mobile adjustments for header, search, products and panels. */
@media (max-width: 460px) {
  .web-chat-body .chat-header-main {
    grid-template-columns: 54px minmax(0, 1fr) auto;
  }

  .web-chat-body .site-logo {
    width: 46px;
    height: 46px;
  }

  .web-chat-body.is-chat-room .header-room-back {
    width: 50px;
    height: 50px;
    border-radius: 16px;
  }

  .web-chat-body .header-center {
    font-size: 21px;
  }

  .web-chat-body .header-icon-btn {
    width: 38px;
    height: 38px;
  }

  .web-chat-body .header-action-img {
    width: 38px;
    height: 38px;
  }

  .md-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px 18px;
  }

  .md-product-icon {
    width: 62px;
    height: 62px;
    font-size: 34px;
  }

  .md-product-icon.md-product-icon--asset {
    width: 72px;
    height: 72px;
  }

  .md-product-card {
    font-size: 15px;
  }

  .md-referral-strip {
    padding: 0 54px;
  }

  .md-info-card p {
    font-size: 16px;
  }

  .md-autopay-grid {
    gap: 12px;
  }

  .md-autopay-product-card {
    min-height: 164px;
    padding: 14px 10px;
  }

  .md-step-pill {
    min-height: 44px;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 4px;
    padding: 5px;
  }

  .md-step-pill b {
    width: 22px;
    height: 22px;
  }

  .md-step-pill em {
    font-size: 10px;
  }

  .md-summary-card,
  .md-pay-options {
    grid-template-columns: 1fr;
  }

  .md-bottom-nav button {
    font-size: 11px;
    min-height: 56px;
  }

  .md-wallet-summary,
  .md-topup-row,
  .md-referral-stats {
    grid-template-columns: 1fr;
  }

  .md-preset-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.web-chat-body.is-chat-room .chat-shell {
  grid-template-rows: minmax(0, 1fr);
}

html:has(.web-chat-body.is-chat-room),
.web-chat-body.is-chat-room {
  background:
    radial-gradient(ellipse at 50% 0, rgba(85, 226, 207, 0.2), transparent 44%),
    radial-gradient(ellipse at 86% 0, rgba(123, 60, 255, 0.18), transparent 40%),
    #071016;
}

.web-chat-body.is-chat-room::before {
  content: "";
  position: fixed;
  top: 0;
  left: 50%;
  width: min(620px, 100vw);
  height: env(safe-area-inset-top, 0px);
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 0, rgba(85, 226, 207, 0.24), transparent 58%),
    radial-gradient(ellipse at 88% 4px, rgba(123, 60, 255, 0.22), transparent 54%);
}

.web-chat-body.is-chat-room .md-app {
  grid-row: 1;
  height: 100dvh;
}

.web-chat-body.is-chat-room .md-chat-panel.is-active {
  display: block;
  height: 100dvh;
  padding: 0;
}

.web-chat-body.is-chat-room .chat-stage {
  height: 100dvh;
  background:
    radial-gradient(ellipse at 50% 0, rgba(85, 226, 207, 0.12), transparent 36%),
    radial-gradient(ellipse at 88% 2px, rgba(123, 60, 255, 0.12), transparent 32%),
    #071016;
}

.web-chat-body.is-chat-room .app-topbar {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top, 0px));
  left: 50%;
  width: min(596px, calc(100vw - 20px));
  margin: 0;
  padding: 6px 12px;
  border-radius: 26px;
  transform: translateX(-50%);
  z-index: 42;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.04)),
    linear-gradient(135deg, rgba(85, 226, 207, 0.08), rgba(123, 60, 255, 0.1)),
    rgba(8, 9, 13, 0.18);
  border-color: rgba(255, 255, 255, 0.17);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    0 16px 36px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(42px) saturate(1.72);
  -webkit-backdrop-filter: blur(42px) saturate(1.72);
}

.web-chat-body.is-chat-room .chat-header-main {
  grid-template-columns: 54px minmax(0, 1fr) auto;
}

.web-chat-body.is-chat-room .header-room-back {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.075);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 8px 18px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
}

.web-chat-body.is-support-room .support-close-btn {
  display: none !important;
}

.web-chat-body.is-chat-room .messages {
  padding-top: calc(138px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(98px + max(4px, calc(env(safe-area-inset-bottom, 0px) - 12px)));
  background: transparent;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.web-chat-body.is-chat-room .md-chat-panel.is-active .messages {
  padding-bottom: calc(98px + max(4px, calc(env(safe-area-inset-bottom, 0px) - 12px)));
}

.web-chat-body.is-chat-room .messages::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.web-chat-body.is-chat-room .scroll-bottom-btn {
  right: 22px;
  bottom: calc(82px + max(4px, calc(env(safe-area-inset-bottom, 0px) - 12px)));
  z-index: 35;
}

.web-chat-body.is-chat-room .chat-bottom {
  left: 50%;
  bottom: max(4px, calc(env(safe-area-inset-bottom, 0px) - 12px));
  width: min(596px, calc(100vw - 20px));
  border-radius: 26px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.04)),
    linear-gradient(135deg, rgba(85, 226, 207, 0.07), rgba(123, 60, 255, 0.1)),
    rgba(8, 9, 13, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.17);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 -12px 32px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(42px) saturate(1.72);
  -webkit-backdrop-filter: blur(42px) saturate(1.72);
}

.web-chat-body.is-chat-room .chat-footer {
  grid-template-areas: "attach composer send";
  border-top: 0;
  background: transparent;
  padding: 7px 8px;
}

.web-chat-body.is-chat-room .chat-footer:has(.composer-reply-preview:not([hidden])),
.web-chat-body.is-chat-room .chat-footer:has(.composer-file-preview:not([hidden])) {
  grid-template-areas:
    "reply reply reply"
    "files files files"
    "attach composer send";
}

.web-chat-body.is-chat-room .attach-btn,
.web-chat-body.is-chat-room .chat-footer textarea,
.web-chat-body.is-chat-room .composer-reply-preview,
.web-chat-body.is-chat-room .composer-file-preview {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(12, 14, 20, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 18px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(16px) saturate(1.35);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
}

.web-broadcast-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(3, 5, 8, 0.46);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
}

.web-broadcast-overlay[hidden] {
  display: none;
}

.web-broadcast-card {
  position: relative;
  width: min(430px, 100%);
  max-height: min(76dvh, 620px);
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 26px;
  padding: 22px;
  color: #f7fbff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06)),
    linear-gradient(135deg, rgba(85, 226, 207, 0.12), rgba(123, 60, 255, 0.16)),
    rgba(11, 14, 21, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 28px 90px rgba(0, 0, 0, 0.46);
  scrollbar-width: none;
}

.web-broadcast-card::-webkit-scrollbar {
  display: none;
}

.web-broadcast-glow {
  position: absolute;
  inset: -80px 34% auto -60px;
  height: 180px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(85, 226, 207, 0.28), transparent 66%);
}

.web-broadcast-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  color: rgba(247, 251, 255, 0.84);
  background: rgba(255, 255, 255, 0.08);
  font-size: 24px;
  line-height: 1;
}

.web-broadcast-kicker {
  position: relative;
  margin-bottom: 8px;
  color: rgba(151, 236, 225, 0.94);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.web-broadcast-title {
  position: relative;
  margin: 0;
  padding-right: 42px;
  color: #ffffff;
  font-size: 24px;
  line-height: 1.14;
}

.web-broadcast-date {
  position: relative;
  margin-top: 6px;
  color: rgba(226, 232, 240, 0.62);
  font-size: 12px;
}

.web-broadcast-text {
  position: relative;
  margin-top: 18px;
  color: rgba(247, 251, 255, 0.92);
  font-size: 15px;
  line-height: 1.52;
  white-space: normal;
}

.web-broadcast-primary {
  position: relative;
  width: 100%;
  margin-top: 22px;
  border: 0;
  border-radius: 18px;
  padding: 14px 18px;
  color: #03110f;
  background: linear-gradient(135deg, #73f7e9, #8f7bff);
  box-shadow: 0 16px 34px rgba(85, 226, 207, 0.22);
  font-weight: 850;
}