:root {
  --header: #7fa8c8;
  --accent: #2e8ee8;
  --panel: #d9eafa;
  --line: #a8bfd4;
  --text: #111;
  font-family: Tahoma, Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

.app-preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #f4f3ef;
  transition: opacity .45s ease, visibility .45s ease;
}

.app-preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.app-preloader-card {
  width: min(490px, 90vw);
  min-height: 390px;
  padding: 42px 34px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.app-preloader-logo {
  width: min(320px, 72vw);
  max-height: 230px;
  margin-bottom: 32px;
  object-fit: contain;
}

.app-preloader-spinner {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.app-preloader-spinner span {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ee243c;
  animation: preloaderPulse .8s infinite ease-in-out alternate;
}

.app-preloader-spinner span:nth-child(2) {
  background: #2f72c9;
  animation-delay: .15s;
}

.app-preloader-spinner span:nth-child(3) {
  background: #8d74c9;
  animation-delay: .3s;
}

@keyframes preloaderPulse {
  from {
    transform: scale(.7);
    opacity: .45;
  }
  to {
    transform: scale(1.25);
    opacity: 1;
  }
}

.app-preloader-version {
  color: #858585;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 4px;
  text-align: center;
}

html,
body {
  height: 100%;
  min-height: 100%;
}

body {
  margin: 0;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  color: var(--text);
  background: #bcd2e4;
  font-size: 12px;
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.chat-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100vh;
  max-height: 100vh;
  min-height: 0;
  overflow: hidden;
  background: #c8dced;
  --chat-background-image: url("/assets/brand/chat-bg.jpeg");
}

.chat-shell:not(.in-room) {
  grid-template-rows: auto minmax(0, 1fr);
}

.radio-banner {
  position: relative;
  display: grid;
  grid-template-columns: 116px 44px 128px 142px minmax(310px, 1fr) 96px 74px;
  align-items: center;
  gap: 8px;
  height: 60px;
  min-height: 60px;
  padding: 0 7px 0 0;
  overflow: hidden;
  color: #fff;
  border-top: 1px solid #020612;
  border-bottom: 2px solid #ff24e6;
  background-color: #040713;
  background-image:
    linear-gradient(90deg, rgba(2, 5, 16, .88), rgba(7, 0, 12, .42) 18%, rgba(3, 6, 18, .34) 55%, rgba(10, 0, 16, .72)),
    url("/assets/radio/fondo-radio-revolution.jpeg");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  box-shadow: inset 0 1px rgba(118,236,255,.28), inset 0 -1px rgba(255,42,238,.8), 0 1px 8px rgba(4,13,32,.45);
}

.radio-banner::before {
  position: absolute;
  inset: 6px 82px 6px 406px;
  content: "";
  border: 1px solid rgba(27, 229, 255, .82);
  border-radius: 18px;
  background: linear-gradient(90deg, rgba(15, 2, 28, .38), rgba(0, 210, 255, .06), rgba(255, 32, 221, .12));
  box-shadow: 0 0 12px rgba(0, 223, 255, .75), 0 0 16px rgba(255, 37, 231, .42), inset 0 0 12px rgba(255,255,255,.18);
  pointer-events: none;
}

.radio-banner::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), transparent 43%, rgba(0,0,0,.34)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 4px);
  mix-blend-mode: screen;
  opacity: .55;
  pointer-events: none;
}

.radio-banner > * {
  position: relative;
  z-index: 1;
}

.update-logo {
  align-self: stretch;
  display: flex;
  align-items: center;
  padding-left: 0;
  min-width: 120px;
  justify-content: center;
}

.update-logo img {
  display: block;
  width: auto;
  max-width: 120px;
  max-height: 44px;
  object-fit: contain;
}

.radio-play {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  min-height: 0;
  border: 2px solid rgba(255, 204, 88, .92);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 24%, rgba(255,255,255,.92), rgba(80,238,255,.32) 23%, transparent 39%),
    linear-gradient(145deg, rgba(255,44,229,.96), rgba(5,30,71,.94) 52%, rgba(0,229,255,.96));
  color: #fff9c9;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 2px #000, 0 0 7px rgba(255,255,255,.75);
  box-shadow: inset 0 1px 7px rgba(255,255,255,.62), inset 0 -5px 9px rgba(0,0,0,.46), 0 0 8px rgba(0,224,255,.78), 0 0 12px rgba(255,45,224,.58);
}

.radio-play:hover {
  border-color: #ffe79c;
  box-shadow: inset 0 1px 8px rgba(255,255,255,.74), inset 0 -5px 9px rgba(0,0,0,.42), 0 0 12px rgba(0,236,255,.95), 0 0 18px rgba(255,55,232,.8);
}

.radio-play.is-playing {
  color: #71fbff;
  border-color: #62f7ff;
}

.radio-play.is-loading,
.radio-play:disabled {
  cursor: wait;
  opacity: .68;
  filter: saturate(.8);
  box-shadow: inset 0 1px 5px rgba(255,255,255,.42), inset 0 -5px 9px rgba(0,0,0,.48), 0 0 7px rgba(0,224,255,.45);
}

.radio-volume-pill {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 128px;
  min-width: 0;
  height: 30px;
  padding: 4px 11px 4px 8px;
  border: 1px solid rgba(87, 232, 255, .72);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(13, 21, 48, .78), rgba(24, 4, 38, .72));
  box-shadow: inset 0 1px rgba(255,255,255,.22), inset 0 -1px rgba(0,0,0,.58), 0 0 8px rgba(0,218,255,.34), 0 0 10px rgba(255,45,225,.18);
}

.radio-speaker {
  color: #78f5ff;
  font-size: 17px;
  line-height: 1;
  filter: drop-shadow(0 0 4px rgba(0,224,255,.85));
}

.radio-volume {
  width: 100%;
  height: 16px;
  margin: 0;
  appearance: none;
  background: transparent;
  outline: none;
}

.radio-volume::-webkit-slider-runnable-track {
  height: 6px;
  border: 1px solid rgba(255, 221, 132, .44);
  border-radius: 999px;
  background: linear-gradient(90deg, #ff2bdf, #16e4ff 58%, #fff184);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.75), 0 0 7px rgba(0,220,255,.7);
}

.radio-volume::-moz-range-track {
  height: 6px;
  border: 1px solid rgba(255, 221, 132, .44);
  border-radius: 999px;
  background: linear-gradient(90deg, #ff2bdf, #16e4ff 58%, #fff184);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.75), 0 0 7px rgba(0,220,255,.7);
}

.radio-volume::-webkit-slider-thumb {
  width: 17px;
  height: 17px;
  margin-top: -6px;
  appearance: none;
  border: 2px solid #ffe28a;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fff, #53ecff 42%, #10192f 72%);
  box-shadow: 0 0 7px rgba(0,229,255,.95), 0 0 8px rgba(255,212,88,.62);
}

.radio-volume::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border: 2px solid #ffe28a;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fff, #53ecff 42%, #10192f 72%);
  box-shadow: 0 0 7px rgba(0,229,255,.95), 0 0 8px rgba(255,212,88,.62);
}

.radio-title {
  min-width: 0;
  padding: 5px 10px 4px;
  border: 1px solid rgba(255, 204, 88, .52);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(4, 9, 25, .82), rgba(35, 6, 50, .7));
  box-shadow: inset 0 1px rgba(255,255,255,.2), 0 0 8px rgba(255,42,225,.34);
  align-self: center;
  text-align: center;
  font-family: Georgia, serif;
  font-size: 15px;
  line-height: 15px;
  text-shadow: 0 1px 2px #000, 0 0 7px rgba(255,43,224,.5);
}

.radio-title span {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 4px;
  color: #fff;
  font-family: Tahoma, Arial, sans-serif;
  font-size: 12px;
}

.radio-eq {
  display: inline-flex;
  align-items: end;
  gap: 1px;
  height: 14px;
}

.radio-eq em {
  display: block;
  width: 3px;
  background: #45f8ff;
  box-shadow: 0 0 4px #00dfff, 0 0 5px rgba(255, 238, 112, .7);
}

.radio-eq em:nth-child(1) { height: 5px; }
.radio-eq em:nth-child(2) { height: 9px; }
.radio-eq em:nth-child(3) { height: 13px; }
.radio-eq em:nth-child(4) { height: 7px; }
.radio-eq em:nth-child(5) { height: 12px; }
.radio-eq em:nth-child(6) { height: 8px; }
.radio-eq em:nth-child(7) { height: 14px; }

.radio-track {
  min-width: 0;
  padding: 5px 20px 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 55, 235, .78);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(18, 4, 33, .86), rgba(7, 28, 59, .72), rgba(36, 4, 45, .82));
  box-shadow: inset 0 1px rgba(255,255,255,.24), inset 0 0 9px rgba(255,255,255,.12), 0 0 10px rgba(255,42,230,.48), 0 0 14px rgba(0,223,255,.28);
  color: #fff7ff;
  font: italic 18px Georgia, serif;
  text-align: center;
  text-shadow: 0 1px 2px #000, 0 0 8px rgba(255,48,231,.62);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radio-dj {
  padding: 5px 11px 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 217, 112, .62);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(30, 8, 45, .82), rgba(7, 16, 38, .8));
  box-shadow: inset 0 1px rgba(255,255,255,.22), 0 0 9px rgba(255,203,84,.28), 0 0 9px rgba(255,34,225,.24);
  color: #fff1bd;
  font: italic 15px Georgia, serif;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px #000, 0 0 6px rgba(255,210,92,.55);
  white-space: nowrap;
}

.radio-live {
  justify-self: end;
  min-width: 70px;
  padding: 5px 8px 6px;
  border: 1px solid rgba(255, 43, 226, .88);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,39,226,.78), rgba(75, 5, 86, .82) 48%, rgba(4, 24, 45, .86));
  box-shadow: inset 0 1px rgba(255,255,255,.34), inset 0 -1px rgba(0,0,0,.55), 0 0 10px rgba(255,35,226,.72), 0 0 12px rgba(0,218,255,.34);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 1px 2px #000, 0 0 5px rgba(255,255,255,.65);
}

.top-strip {
  display: none;
}

.chat-shell:not(.in-room) .top-strip,
.chat-shell.in-room .top-strip {
  display: none;
}

.secondary-strip a[href*="youtube"],
.secondary-strip a[href*="facebook"],
.secondary-strip a[href*="apple"],
.secondary-strip a[href*="android"],
.secondary-strip [data-action*="youtube" i],
.secondary-strip [data-action*="facebook" i],
.secondary-strip [data-action*="stream" i],
.secondary-strip [data-action*="apple" i],
.secondary-strip [data-action*="android" i] {
  display: none !important;
}

.chat-shell.in-room #signinTop {
  display: none;
}

.secondary-strip,
.module-row,
.secondary-strip .module-row {
  height: var(--secondary-strip-height, 70px) !important;
  min-height: var(--secondary-strip-height, 70px) !important;
  box-sizing: border-box;
}

.secondary-strip,
.module-row {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.secondary-strip {
  align-items: center;
}

.secondary-strip.has-custom-background,
.module-row.has-custom-background {
  background-image:
    linear-gradient(rgba(210, 230, 245, .60), rgba(210, 230, 245, .60)),
    var(--secondary-strip-background-image);
}

.secondary-strip .top-actions,
.secondary-strip .secondary-actions,
.secondary-strip [data-action],
.module-row .top-actions,
.module-row .secondary-actions,
.module-row [data-action] {
  height: 100%;
  display: flex;
  align-items: center;
}

.secondary-strip button,
.secondary-strip a,
.module-row button,
.module-row a {
  min-width: 30px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.brand {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border: 1px solid #80a5c6;
  border-radius: 50%;
  color: #287ac5;
  background: radial-gradient(circle at 30% 30%, #fff, #9fd6ff);
  font-size: 21px;
  font-weight: 900;
  transform: rotate(-18deg);
}

#aboutModal .brand-mark {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  display: inline-block !important;
  background: url("/assets/brand/infinity-webchat-logo.png") center / contain no-repeat !important;
  color: transparent !important;
  font-size: 0 !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  transform: none !important;
  border: 0 !important;
}

#aboutModal #aboutName {
  color: #0074d9 !important;
  font-weight: 800 !important;
}

.brand strong {
  display: block;
  color: #f08200;
  font-size: 16px;
  text-shadow: 1px 1px #fff;
}

.brand span {
  display: block;
  max-width: 46vw;
  overflow: hidden;
  color: #507089;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.top-actions button,
.top-actions a,
.module-button {
  min-height: 27px;
  padding: 4px 9px;
  border: 1px solid #a1b9ce;
  border-radius: 5px;
  color: #344;
  background: linear-gradient(#fff, #d7e5f1);
  text-decoration: none;
}

.top-actions button:not(:first-child),
.info-btn,
.module-icon {
  min-width: 26px;
  min-height: 26px;
  padding: 0 4px;
  border: 0;
  color: #3087cf;
  background: transparent;
  font-size: 20px;
}

.toolbar-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  isolation: isolate;
  width: 36px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease, opacity .18s ease;
  overflow: visible;
}

.toolbar-icon-btn::after,
.toolbar-label-btn[data-tooltip]::after,
.input-avatar[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 7px);
  transform: translateX(-50%) translateY(4px);
  background: rgba(15, 63, 104, .96);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  padding: 4px 7px;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  z-index: 9999;
}

.toolbar-icon-btn:hover::after,
.toolbar-icon-btn:focus-visible::after,
.toolbar-label-btn[data-tooltip]:hover::after,
.toolbar-label-btn[data-tooltip]:focus-visible::after,
.input-avatar[data-tooltip]:hover::after,
.input-avatar[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toolbar-icon-btn:hover,
.toolbar-icon-btn:focus-visible,
.toolbar-label-btn[data-tooltip]:hover,
.toolbar-label-btn[data-tooltip]:focus-visible,
.input-avatar[data-tooltip]:hover,
.input-avatar[data-tooltip]:focus-visible {
  background: rgba(0, 170, 255, .12);
  box-shadow: 0 0 10px rgba(0, 195, 255, .35);
  outline: none;
}

.toolbar-icon-btn.is-active {
  background: rgba(0, 170, 255, .18);
  box-shadow: 0 0 12px rgba(0, 195, 255, .55);
}

.toolbar-icon-btn.is-disabled {
  opacity: .45;
  pointer-events: none;
}

.toolbar-icon-svg {
  width: 22px;
  height: 22px;
  display: block;
  object-fit: contain;
  opacity: .93;
  filter: none;
  transition: filter .18s ease, opacity .18s ease, transform .18s ease;
}

.toolbar-icon-btn:hover .toolbar-icon-svg,
.toolbar-icon-btn:focus-visible .toolbar-icon-svg {
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(0, 195, 255, .55)) brightness(1.14) saturate(1.12);
}

.toolbar-icon-btn.is-active .toolbar-icon-svg {
  opacity: 1;
  filter: drop-shadow(0 0 10px rgba(0, 195, 255, .85)) brightness(1.2) saturate(1.15);
}

.toolbar-icon-btn.is-disabled .toolbar-icon-svg {
  opacity: .48;
  filter: grayscale(.75) brightness(.95);
}

.toolbar-label-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid #a1b9ce;
  border-radius: 5px;
  color: #344;
  background: linear-gradient(#fff, #d7e5f1);
  text-decoration: none;
  position: relative;
  overflow: visible;
}

.toolbar-label-btn .toolbar-icon-svg {
  width: 18px;
  height: 18px;
  filter: none;
}

.module-camera {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 9px;
  color: #238ad0;
  background: transparent;
  transition: background-color .15s ease, box-shadow .15s ease, opacity .15s ease, color .15s ease, transform .15s ease;
}

.module-camera.is-off {
  opacity: .72;
}

.module-camera.is-active {
  color: #59d5ff;
  background: rgba(0, 195, 255, .08);
  box-shadow: inset 0 0 0 1px rgba(89, 213, 255, .2), 0 0 14px rgba(89, 213, 255, .26);
}

.module-camera .webcam-icon-img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
  opacity: .92;
  filter: grayscale(.22) brightness(1.05) contrast(1.05);
  transition: filter .15s ease, opacity .15s ease, transform .15s ease;
}

.module-camera:hover .webcam-icon-img,
.module-camera:focus-visible .webcam-icon-img {
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(68, 215, 255, .72)) brightness(1.1) saturate(1.18);
  transform: translateY(-1px);
}

.module-camera.is-active .webcam-icon-img {
  opacity: 1;
  filter: drop-shadow(0 0 10px rgba(68, 215, 255, .95)) brightness(1.18) saturate(1.2);
}

.module-camera.is-off .webcam-icon-img {
  opacity: .62;
  filter: grayscale(.55) brightness(.95);
}

@media (hover: none) {
  .toolbar-icon-btn::after {
    display: none;
  }
}

.select-room-screen {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  padding: 14px;
  border-radius: 22px;
  background-image: url("/assets/brand/rooms-bg.jpeg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
}

.select-room-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
  pointer-events: none;
}

.select-room-screen > * {
  position: relative;
  z-index: 1;
}

.select-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.42);
}

.select-title-row h1 {
  margin: 0;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 7px rgba(0,0,0,.35);
}

.select-room-top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.side-search input {
  min-height: 22px;
  border: 1px solid #b4c5d4;
  border-radius: 4px;
  background: #fff;
}

.side-search span {
  grid-column: 2;
  margin-top: 2px;
}

.select-room-action {
  min-height: 28px;
  padding: 5px 11px;
  color: #fff;
  border: 1px solid rgba(117, 205, 255, 0.85);
  border-radius: 8px;
  background: rgba(8, 22, 56, 0.78);
  box-shadow: 0 0 10px rgba(0, 195, 255, 0.35);
  text-shadow: 0 1px 2px rgba(0,0,0,.9);
}

.select-room-action.icon-button {
  min-width: 30px;
  padding-inline: 8px;
}

.select-room-action:hover {
  background: rgba(0, 116, 217, 0.95);
  box-shadow: 0 0 14px rgba(0, 195, 255, 0.65);
}

.select-rooms-list {
  display: grid;
  gap: 6px;
  max-height: calc(100vh - 126px);
  overflow-y: auto;
  padding-right: 2px;
}

.select-room-row {
  display: grid;
  grid-template-columns: 66px minmax(220px, 1.2fr) minmax(180px, 1fr) 96px;
  align-items: center;
  width: 100%;
  min-height: 60px;
  padding: 7px 10px;
  border: 1px solid rgba(120, 160, 210, 0.45);
  border-radius: 18px;
  color: #111;
  text-align: left;
  background: rgba(240, 246, 255, 0.88);
  box-shadow: 0 4px 14px rgba(36, 72, 107, 0.12);
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}

.select-room-row:nth-child(even) {
  background: rgba(232, 241, 252, 0.9);
}

.select-room-row:hover {
  transform: translateY(-2px);
  background: rgba(248, 251, 255, 0.94);
  box-shadow: 0 8px 18px rgba(36, 72, 107, 0.18);
  border-color: rgba(62, 125, 177, 0.72);
}

.select-room-row img {
  width: 50px;
  height: 36px;
  object-fit: contain;
}

.select-room-copy strong {
  display: block;
  color: #1680d4;
  font-size: 13px;
}

.select-room-copy small,
.select-room-count small {
  display: block;
  margin-top: 6px;
}

.select-room-brand {
  justify-self: center;
  font-weight: 700;
  font-size: 13px;
}

.select-room-count {
  justify-self: end;
  font-weight: 700;
  text-align: center;
  font-size: 13px;
}

.chat-screen {
  display: grid;
  grid-template-rows: var(--secondary-strip-height, 38px) minmax(0, 1fr);
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #c8dced;
}
.module-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  padding: 0 12px !important;
  border-top: 1px solid #eff8ff;
  border-bottom: 1px solid #8daeca;
  background: linear-gradient(#dcedfb, #a9c6dd);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.module-spacer { flex: 1 1 auto; }

.chat-frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 264px;
  column-gap: 0;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 0 0 0 4px;
  background: #b8cfe1;
}

.main-chat,
.side-panel {
  min-height: 0;
  max-height: 100%;
  border: 1px solid #8faec7;
  background: #eef6fd;
}

.main-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  border-right: 0;
  background: linear-gradient(rgba(255,255,255,.72), rgba(255,255,255,.72)), var(--chat-background-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.room-media-panel {
  display: grid;
  gap: 5px;
  padding: 6px 8px;
  border-bottom: 1px solid #9eb8cf;
  background: #eef6fd;
  color: #18364f;
  font-size: 12px;
}

.room-media-panel[hidden] {
  display: none;
}

.room-media-panel audio,
.room-media-panel video {
  width: 100%;
  max-height: 180px;
}

.room-media-panel a {
  color: #0759a6;
}

.room-tabbar {
  display: flex;
  align-items: end;
  flex: 0 0 auto;
  min-height: 29px;
  border-bottom: 1px solid #9eb8cf;
  background: linear-gradient(#eaf6ff, #c7ddef);
}

.room-tab {
  min-width: 136px;
  height: 29px;
  border: 1px solid #8faec7;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  background: #fff;
  color: #111;
  font-weight: 700;
}

.tab-arrows {
  margin-left: auto;
  padding-right: 8px;
  color: #111;
  font-size: 17px;
}

.messages {
  position: relative;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  height: auto;
  padding: 6px 7px;
  background-color: rgba(255,255,255,.74);
  background-image: var(--chat-background-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: lighten;
}

.message {
  position: relative;
  min-height: 29px;
  padding: 4px 6px 4px 33px;
  font-size: 13px;
  line-height: 20px;
}

.message.system {
  padding-left: 22px;
  color: #126ee4;
  font-weight: 700;
}

.message .avatar {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  object-fit: cover;
}

.message strong { color: #111; }
.message time {
  display: block;
  margin-top: 3px;
  color: #83909a;
  font-size: 11px;
  font-weight: 400;
}
.inline-smiley {
  max-width: 42px;
  max-height: 42px;
  width: auto;
  height: auto;
  object-fit: contain;
  vertical-align: middle;
}

.chat-image {
  display: block;
  max-width: 260px;
  max-height: 190px;
  border: 1px solid #9eb6ca;
  background: #fff;
  object-fit: contain;
}

.gift-line {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  color: #0a93ff;
  font-size: 16px;
  font-weight: 700;
}

.gift-line img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.message-box {
  display: grid;
  grid-template-rows: 30px minmax(0, 1fr);
  flex: 0 0 auto;
  margin-top: auto;
  min-height: 104px;
  max-height: 104px;
  border-top: 1px solid #8faec7;
  background: #fff;
}

.bottom-compose {
  align-self: stretch;
}

.toolbar-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 4px 5px;
  border-bottom: 1px solid #9db7cf;
  background: linear-gradient(#d9eaf8, #92b0c9);
}

.toolbar-line select { width: 103px; min-height: 22px; }
.toolbar-grow { flex: 1 1 auto; }

.tool-btn {
  min-width: 25px;
  min-height: 22px;
  border: 0;
  color: #1c72bd;
  background: transparent;
  font-size: 18px;
  font-weight: 700;
}

.tool-btn.active {
  color: #111;
  background: #d5e8f8;
}

.input-line {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 92px;
  min-height: 74px;
  background: #fff;
}

.input-avatar {
  display: grid;
  place-items: center;
  border: 0;
  background: #fff;
  position: relative;
  overflow: visible;
}

.input-avatar img,
.me-card img {
  width: 46px;
  height: 46px;
  object-fit: cover;
}

.input-line textarea {
  width: 100%;
  height: 74px;
  min-height: 74px;
  border: 0;
  border-left: 1px solid #d7e1ea;
  outline: 0;
  padding: 7px 8px;
  resize: none;
}

.send-stack {
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 5px 6px;
}

.send-stack button,
.modal-actions button,
.legacy-modal button:not(.secondary),
.webcam-window button {
  min-height: 25px;
  border: 1px solid #2b82d7;
  border-radius: 5px;
  color: #fff;
  background: linear-gradient(#3aa1ff, #1680dc);
}

.side-panel {
  position: relative;
  display: grid;
  grid-template-rows: 62px 31px 28px minmax(0, 1fr) auto;
  height: 100%;
  max-height: 100%;
  border-radius: 0;
  overflow: hidden;
  background: #edf5fb;
}

.me-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-bottom: 1px solid #c1d2df;
  background: #f8fcff;
}

.me-card strong { display: block; font-size: 13px; }
.me-card span { color: #e66b00; }
#sideMenuButton { border: 0; background: transparent; font-size: 19px; }

.side-search {
  display: none !important;
  width: auto;
  margin: 5px 8px;
}

.side-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid #d0dfeb;
  border-bottom: 1px solid #a6bfd5;
}

.side-tabs button {
  border: 0;
  background: #d8e9f8;
  color: #31566f;
  font-weight: 700;
}

.side-tabs button.active {
  color: #fff;
  background: linear-gradient(#76a6cf, #3f83bc);
}

.side-tab-panel { min-height: 0; overflow: hidden; grid-row: 4; }
.users-list { height: 100%; overflow: hidden; }
.rooms-list {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
}

#usersTab,
#roomsTab {
  grid-row: 4;
}

#sponsorCard {
  grid-row: 5;
}

#roomsTab {
  position: relative;
  padding: 16px;
  border-radius: 22px;
  overflow: hidden;
  background-image: url("/assets/brand/rooms-bg.jpeg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#roomsTab::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.18);
  pointer-events: none;
}

#roomsTab .rooms-list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.user-item,
.room-item {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  width: 100%;
  min-height: 51px;
  margin-bottom: 10px;
  padding: 7px 10px;
  border: 1px solid rgba(120, 160, 210, 0.45);
  border-radius: 18px;
  color: #111;
  text-align: left;
  background: rgba(240, 246, 255, 0.88);
  box-shadow: 0 4px 14px rgba(36, 72, 107, 0.12);
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}

.user-item:nth-child(even),
.room-item:nth-child(even) {
  background: rgba(232, 241, 252, 0.9);
}

.user-item img,
.room-item img {
  width: 30px;
  height: 30px;
  object-fit: cover;
}

.user-item strong,
.room-item strong,
.room-item small,
.user-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(36, 72, 107, 0.18);
}

.room-item.active {
  border-color: rgba(62, 125, 177, 0.72);
  box-shadow: 0 8px 18px rgba(36, 72, 107, 0.18), inset 3px 0 var(--accent);
}

.user-identity {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
}

.user-gender-icon {
  flex: 0 0 auto;
}

.user-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-user-tooltip] {
  position: relative;
}

[data-user-tooltip]::after {
  content: attr(data-user-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 10010;
  min-width: max-content;
  max-width: 220px;
  padding: 4px 8px;
  border: 1px solid rgba(0,0,0,.28);
  border-radius: 4px;
  background: rgba(35, 45, 55, .96);
  color: #fff;
  font-size: 11px;
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(3px);
  transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
}

[data-user-tooltip]:hover::after,
[data-user-tooltip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.sponsor-card {
  display: none;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  background: rgba(120, 150, 180, .25);
}

.modal-overlay,
.signin-overlay {
  background: rgba(70, 95, 115, 0.35);
  backdrop-filter: none;
}

#signinModal.has-login-background,
.signin-modal.has-login-background {
  background-image:
    linear-gradient(rgba(255,255,255,.70), rgba(255,255,255,.70)),
    var(--login-background-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#signinModal.has-login-background .signin-modal-body,
#signinModal.has-login-background .auth-modal-body {
  background-image:
    linear-gradient(rgba(255,255,255,.86), rgba(255,255,255,.86)),
    var(--login-background-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.legacy-modal,
.floating-popup {
  z-index: 35;
  border: 1px solid #9eb6ca;
  border-radius: 5px;
  background: #f4f8fc;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
}

.signin-window {
  width: min(430px, calc(100vw - 28px));
  min-height: 0;
  padding: 0;
}

.signin-modal,
.auth-modal {
  overflow: hidden;
  background: #f8fbff;
  border: 1px solid #9fb8cc;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

.signin-modal-body,
.auth-modal-body {
  padding: 14px 18px 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f8fc 100%);
}

.signin-modal-header,
.auth-modal-header {
  margin: 0;
  background: linear-gradient(180deg, #9dbbd1 0%, #6f97b5 100%);
  color: #ffffff;
}

.signin-warning {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin: 0 0 12px;
  padding: 0 0 11px;
  border-bottom: 1px solid #dce7f0;
}

.signin-warning span {
  font-size: 26px;
}

.signin-warning p {
  margin: 0;
}

.signin-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}

.signin-fields label {
  display: grid;
  gap: 4px;
  margin: 0;
  color: #20394c;
  font-weight: 700;
}

.signin-fields .check-row {
  display: flex !important;
  justify-content: start;
  margin: 0;
  color: #20394c;
}

.signin-fields input:not([type="checkbox"]) {
  width: 100%;
  min-height: 26px;
}

.auth-switches {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.auth-switches button {
  flex: 1 1 0;
  justify-content: center;
}

.auth-switches button.active {
  color: #fff;
  border-color: #688fb0;
  background: linear-gradient(#91b5cf, #5f87a8);
}

.legacy-modal label {
  display: grid;
  gap: 4px;
  margin: 7px 0;
  font-weight: 700;
}

.legacy-modal input,
.legacy-modal select,
.legacy-modal textarea,
.admin-panel input,
.admin-panel select,
.admin-panel textarea,
.admin-login input {
  min-height: 26px;
  border: 1px solid #9eb6ca;
  border-radius: 3px;
  background: #fff;
}

.check-row {
  display: flex !important;
  align-items: center;
  gap: 7px;
}

.check-row input { min-height: auto; }

.modal-title,
.popup-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 28px;
  margin: 0 -12px 10px;
  padding: 4px 9px;
  border-radius: 4px 4px 0 0;
  color: #fff;
  background: linear-gradient(#9fc0db, #7299b9);
  font-weight: 700;
}

.popup-title { margin: 0 0 7px; }

.modal-title button,
.popup-title button {
  min-height: 0;
  border: 0;
  color: #fff;
  background: transparent;
  font-size: 18px;
}

.modal-actions {
  display: flex;
  justify-content: end;
  gap: 12px;
  margin-top: 10px;
}

button.secondary {
  color: #234;
  border: 1px solid #b6c7d5;
  background: linear-gradient(#fff, #e6edf3);
}

.form-error {
  min-height: 18px;
  color: #b30000;
  font-weight: 700;
}

.floating-popup {
  position: fixed;
  z-index: 34;
  padding: 0 6px 7px;
}

.font-popup {
  left: 8px;
  bottom: 110px;
  width: min(690px, calc(100vw - 16px));
  max-height: min(520px, calc(100vh - 130px));
  overflow: hidden;
  padding: 0;
  border-color: #9fb8cc;
  background: #f4f8fc;
  color: #1d2b36;
  box-shadow: 0 4px 14px rgba(26, 54, 79, .28);
}

.font-popup .popup-title {
  min-height: 30px;
  margin: 0;
  padding: 5px 9px 5px 11px;
  border-bottom: 1px solid #7f9fba;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #9dbbd1 0%, #6f97b5 100%);
  color: #fff;
  text-shadow: 0 1px rgba(21, 54, 79, .55);
}

.font-popup-body {
  display: grid;
  grid-template-columns: 205px 190px minmax(210px, 1fr);
  gap: 9px;
  max-height: calc(min(520px, calc(100vh - 130px)) - 30px);
  overflow: auto;
  padding: 10px;
  border-top: 1px solid #dceaf4;
  background: linear-gradient(180deg, #ffffff 0%, #f4f8fc 100%);
}

.font-panel {
  min-width: 0;
  padding: 7px;
  border: 1px solid #b6c9d9;
  border-radius: 4px;
  background: #eef5fb;
  box-shadow: inset 0 1px rgba(255, 255, 255, .86);
}

.font-panel-title {
  display: block;
  margin: 0 0 6px;
  color: #24445f;
  font-weight: 700;
}

.font-family-list {
  display: grid;
  gap: 4px;
  max-height: 342px;
  overflow-y: auto;
  padding: 3px;
  border: 1px solid #cfdae4;
  background: #fff;
}

.font-family-list button {
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: #f8fbff;
  color: #1d2b36;
  text-align: left;
}

.font-family-list button:hover,
.font-family-list button.is-selected {
  border-color: #1e88e5;
  background: #fff;
  color: #0d4f88;
  box-shadow: inset 3px 0 #1e88e5;
}

.font-size-grid {
  display: grid;
  grid-template-columns: repeat(4, 34px);
  gap: 7px;
  justify-content: center;
  padding: 6px;
  border: 1px solid #cfdae4;
  background: #fff;
}

.font-size-grid button {
  width: 34px;
  height: 31px;
  min-height: 31px;
  border: 1px solid #a9bfd2;
  border-radius: 3px;
  background: linear-gradient(#fff, #edf5fb);
  color: #1d2b36;
  font-weight: 700;
}

.font-size-grid button:hover,
.font-size-grid button.is-selected {
  border-color: #1e88e5;
  background: #e6f3ff;
  color: #0a61ac;
  box-shadow: 0 0 0 1px rgba(255, 211, 77, .65), inset 0 1px rgba(255, 255, 255, .9);
}

.font-style-row {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 8px;
}

.font-style-btn {
  width: 34px;
  height: 28px;
  min-height: 28px;
  border: 1px solid #9fb8cc;
  border-radius: 3px;
  background: linear-gradient(#fff, #e6eef6);
  color: #1d2b36;
  font-weight: 800;
}

.font-style-btn:nth-child(2) { font-style: italic; }
.font-style-btn:nth-child(3) { text-decoration: underline; }

.font-style-btn.active {
  border-color: #1e88e5;
  background: #dff0ff;
  color: #0a61ac;
  box-shadow: inset 0 -2px #ffd34d;
}

.font-preview {
  min-height: 44px;
  margin-top: 9px;
  padding: 8px;
  overflow: hidden;
  border: 1px solid #b6c9d9;
  border-radius: 3px;
  background: #fff;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.font-color-grid {
  display: grid;
  grid-template-columns: repeat(6, 24px);
  gap: 6px;
  justify-content: center;
  max-height: 342px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid #cfdae4;
  background: #fff;
}

.font-color-grid button {
  position: relative;
  width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  border: 1px solid #8ea8bb;
  border-radius: 2px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .55);
}

.font-color-grid button[style*="#ffffff"] {
  box-shadow: inset 0 0 0 1px #e2e7ec;
}

.font-color-grid button:hover,
.font-color-grid button.is-selected {
  border-color: #1e88e5;
  box-shadow: 0 0 0 2px #ffd34d, 0 1px 5px rgba(30, 136, 229, .32);
}

.font-color-grid button.is-selected::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  content: "✓";
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 2px #000, 0 0 2px #000;
}

.font-color-grid button[data-font-color="#ffffff"].is-selected::after,
.font-color-grid button[data-font-color="#fff8d6"].is-selected::after,
.font-color-grid button[data-font-color="#e3f2fd"].is-selected::after,
.font-color-grid button[data-font-color="#ffebee"].is-selected::after {
  color: #0a61ac;
  text-shadow: 0 1px #fff;
}

.picker-popup {
  left: 120px;
  bottom: 92px;
  width: 275px;
}

.tabs-mini {
  display: flex;
  gap: 0;
  margin-bottom: 7px;
}

.tabs-mini button {
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid #d6e0e9;
  border-bottom-color: #c7d4df;
  background: #f8fbfd;
  color: #223;
}

.tabs-mini button.active {
  border-bottom-color: #fff;
  background: #fff;
  font-weight: 700;
}

.currency-panel[hidden],
[data-currency-panel][hidden] {
  display: none !important;
}

.smiley-picker {
  display: grid;
  grid-template-columns: repeat(7, 36px);
  gap: 4px;
}

.smiley-picker.emoji-picker {
  grid-template-columns: repeat(7, 31px);
}

.smiley-picker.emoji-picker button {
  font-size: 18px;
}

.smiley-picker button,
.asset-grid button {
  display: grid;
  place-items: center;
  border: 1px solid #d3e0eb;
  background: #fff;
}

.smiley-picker button {
  min-height: 34px;
}

.smiley-picker img {
  max-width: 32px;
  max-height: 32px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.avatar-window {
  position: fixed;
  left: 390px;
  top: 160px;
  width: 502px;
  padding: 0 20px 20px;
}

.avatar-extra-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.avatar-camera-panel {
  margin-top: 12px;
  padding: 10px;
  background: #f6fbff;
  border: 1px solid #d5e4f1;
  border-radius: 8px;
}

.avatar-camera-panel[hidden] {
  display: none;
}

.avatar-camera-panel video {
  display: block;
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #aec8dd;
  background: #101828;
}

.avatar-camera-preview img {
  display: block;
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #aec8dd;
}

.avatar-camera-status {
  margin-top: 8px;
  color: #345;
  font-size: 13px;
  min-height: 20px;
}

.gift-window,
.profile-window {
  position: fixed;
  right: 285px;
  top: 200px;
  width: 300px;
  padding: 0 10px 12px;
}

.gift-window {
  top: 76px;
  width: 462px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 96px);
  border-color: #7f9bb3;
  background: #e8f0f7;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.gift-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 2px 12px;
}

.asset-grid {
  display: grid;
  grid-template-columns: repeat(6, 42px);
  gap: 7px;
  min-height: 120px;
  padding: 10px;
  background: #fff;
  border: 1px solid #e0e8ef;
}

.asset-grid button.active {
  outline: 2px solid #1680dc;
}

.asset-grid img {
  width: 32px;
  height: 32px;
  object-fit: cover;
}

.asset-grid span {
  font-size: 10px;
}

.gift-window .modal-title {
  background: linear-gradient(#8fb3d0, #5e86a7);
}

.gift-window .tabs-mini {
  margin-bottom: 0;
  padding-left: 2px;
}

.gift-window .tabs-mini button {
  min-width: 82px;
  min-height: 26px;
  border-color: #9fb5c8;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(#eef5fb, #d4e3ef);
  color: #1d2b36;
  font-weight: 600;
}

.gift-window .tabs-mini button.active {
  background: #fff;
  color: #111;
}

.gift-window .asset-grid,
.gift-grid {
  grid-template-columns: repeat(6, 64px);
  gap: 6px;
  min-height: 0;
  max-height: none;
  overflow: visible;
  border-color: #9fb5c8;
  background: #f8fbff;
}

.gift-grid button {
  grid-template-rows: 40px minmax(24px, auto) 15px;
  align-content: start;
  min-height: 88px;
  padding: 5px 3px;
  border-color: #5c8eb8;
  color: #ffffff;
  background: linear-gradient(#3f84b6, #1f5f95);
}

.gift-grid button.active,
.gift-grid button.is-selected {
  outline: 0;
  border: 2px solid #ffcc33;
  background: linear-gradient(#4a95cc, #236ba7);
  box-shadow: 0 0 0 1px rgba(255,255,255,.8), inset 0 0 0 1px rgba(17,50,78,.45);
}

.gift-grid img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.gift-grid span,
.gift-grid .gift-name {
  width: 100%;
  overflow: visible;
  color: #ffffff;
  font-size: 10px;
  line-height: 12px;
  font-weight: 600;
  text-align: center;
  text-shadow: 0 1px 1px rgba(0,0,0,.35);
  white-space: normal;
  overflow-wrap: anywhere;
}

.gift-grid small,
.gift-grid .gift-card-cost {
  color: #ffd34d;
  font-size: 10px;
  font-weight: 700;
  text-shadow: 0 1px 1px rgba(0,0,0,.45);
}

.gift-bottom {
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  gap: 10px;
  padding: 8px 2px 0;
}

.gift-preview {
  display: grid;
  grid-template-rows: 58px 18px 16px;
  justify-items: center;
  min-height: 96px;
  border: 1px solid #b5c7d5;
  background: #fff;
}

.gift-preview img {
  width: 54px;
  height: 54px;
  margin-top: 4px;
  object-fit: contain;
}

.gift-preview strong,
.gift-preview span {
  overflow: hidden;
  max-width: 112px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gift-form {
  display: grid;
  align-content: start;
  gap: 6px;
}

.gift-form label {
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  margin: 0;
}

.gift-form input {
  width: 100%;
}

.gift-legacy-note {
  margin: 8px 0 5px;
  color: #d00000;
  font-size: 11px;
  line-height: 15px;
}

.gift-cost {
  margin-top: 5px;
  color: #c26500;
  font-weight: 700;
}

.gift-balance {
  color: #31566f;
  font-weight: 700;
}

.coin-status {
  min-height: 18px;
  padding: 6px;
  color: #0b67b1;
  font-weight: 700;
}

.coin-method-card {
  margin: 8px 0 6px;
  padding: 8px;
  border: 1px solid #9eb2c1;
  background: linear-gradient(#ffffff, #eef4f8);
}

.coin-method-card-inner {
  display: grid;
  gap: 8px;
  align-items: start;
}

.coin-method-logo,
.coin-method-qr {
  max-width: 100%;
  border: 1px solid #c0ceda;
  background: #fff;
}

.coin-method-logo {
  max-height: 42px;
  object-fit: contain;
}

.coin-method-qr {
  max-width: 180px;
  max-height: 180px;
}

.coin-method-title {
  font-weight: 700;
  color: #17354d;
}

.coin-method-meta,
.coin-method-text,
.coin-method-account {
  color: #27495f;
  font-size: 12px;
  line-height: 1.45;
}

.profile-body {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
}

.profile-body img {
  width: 64px;
  height: 64px;
  object-fit: cover;
}

.profile-body p {
  margin: 6px 0;
}

.about-window {
  width: 360px;
  padding: 0 12px 14px;
}

.about-body {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.about-body h2 {
  margin: 0 0 4px;
  color: #f08200;
  font-size: 17px;
}

.about-body p {
  margin: 5px 0;
}

.webcam-popup {
  position: fixed;
  right: 24px;
  bottom: 80px;
  z-index: 9999;
  width: min(300px, calc(100vw - 32px));
  pointer-events: auto;
}

.webcam-popup[hidden] {
  display: none;
}

.webcam-popup .webcam-window {
  width: 100%;
  background: #111827;
  border: 1px solid rgba(96, 225, 255, .55);
  border-radius: 10px;
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
  overflow: hidden;
  color: #eaf7ff;
}

.webcam-popup.is-maximized {
  top: 72px;
  left: 24px;
  right: 24px;
  bottom: 24px;
  width: auto;
}

.webcam-popup.is-maximized .webcam-window {
  height: 100%;
}

.webcam-popup.is-maximized #localWebcamVideo {
  height: calc(100vh - 236px);
  max-height: none;
}

.webcam-titlebar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  color: #eaf7ff;
  background: linear-gradient(#263447, #111827);
  border-bottom: 1px solid rgba(96, 225, 255, .16);
  cursor: move;
}

.webcam-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-weight: 700;
}

.webcam-title strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.webcam-title-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #43e0ff;
  box-shadow: 0 0 10px rgba(67,224,255,.85);
}

.webcam-window-actions {
  display: flex;
  gap: 6px;
}

.webcam-action-btn {
  width: 30px;
  height: 28px;
  border: 1px solid rgba(117,205,255,.45);
  border-radius: 7px;
  color: #fff;
  background: rgba(15, 23, 42, .92);
  box-shadow: 0 0 10px rgba(0,195,255,.12);
  font-size: 18px;
  line-height: 1;
}

.webcam-action-btn:hover,
.webcam-control-btn:hover {
  background: rgba(0,116,217,.9);
  box-shadow: 0 0 14px rgba(0,195,255,.6);
}

.webcam-action-btn.close {
  color: #ff9ba7;
}

.webcam-body {
  padding: 14px;
}

.webcam-popup.is-minimized .webcam-body {
  display: none;
}

#localWebcamVideo {
  display: block;
  width: 100%;
  height: 160px;
  background: #020617;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  object-fit: cover;
}

.webcam-status {
  margin-top: 12px;
  min-height: 38px;
  color: #c6d8e6;
  font-size: 13px;
  line-height: 1.35;
}

.webcam-controls {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.webcam-control-btn {
  min-width: 72px;
  height: 48px;
  padding: 0 10px;
  color: #fff;
  background: rgba(15, 23, 42, .92);
  border: 1px solid rgba(117,205,255,.75);
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,195,255,.28);
}

.webcam-control-btn.is-off {
  opacity: .58;
  filter: grayscale(1);
}

.webcam-control-btn.stop {
  border-color: rgba(255, 112, 112, .82);
  color: #ffd5d5;
}

.webcam-request-window {
  position: fixed;
  right: 24px;
  top: 132px;
  width: 300px;
  padding: 0 12px 12px;
  z-index: 10001;
}

.webcam-request-window .webcam-request-body {
  padding: 10px 4px 0;
}

.webcam-request-window p {
  margin: 0 0 10px;
}

.webcam-windows {
  position: fixed;
  left: 24px;
  top: 118px;
  z-index: 33;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: calc(100vw - 300px);
  pointer-events: none;
}

.webcam-window {
  width: 250px;
  padding: 0 8px 8px;
  pointer-events: auto;
}

.webcam-window .modal-title {
  margin-left: -8px;
  margin-right: -8px;
}

.webcam-window video {
  display: block;
  width: 232px;
  height: 174px;
  border: 1px solid #7393ad;
  background: #111;
  object-fit: cover;
}

.webcam-note {
  padding-top: 5px;
  color: #31566f;
}

.webcam-open {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  color: #14a0d8;
}

.webcam-open-icon {
  width: 14px;
  height: 14px;
  display: block;
  filter: drop-shadow(0 0 4px rgba(24, 161, 216, .35));
}

body.dragging-webcam {
  user-select: none;
}

#webcamWindows.webcam-windows {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: block;
  max-width: none;
  pointer-events: none;
}

#webcamWindows .webcam-window {
  position: fixed;
  width: 268px;
  min-height: 214px;
  padding: 0;
  color: #dcefff;
  background: #0b111a;
  border: 1px solid rgba(91, 205, 242, .55);
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(0,0,0,.52), 0 0 0 1px rgba(255,255,255,.04) inset;
  overflow: hidden;
  pointer-events: auto;
}

#webcamWindows .webcam-window.is-minimized {
  min-height: 0;
  height: 30px !important;
}

#webcamWindows .webcam-window.is-minimized .webcam-body {
  display: none;
}

#webcamWindows .webcam-window.is-maximized {
  left: 24px !important;
  top: 72px !important;
  width: min(760px, calc(100vw - 48px)) !important;
  height: min(560px, calc(100vh - 96px)) !important;
}

#webcamWindows .webcam-window.is-maximized .webcam-body {
  height: calc(100% - 30px);
}

#webcamWindows .webcam-window.is-maximized .webcam-video-shell {
  height: calc(100% - 78px);
}

#webcamWindows .webcam-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  padding: 0 6px 0 8px;
  color: #f4fbff;
  background: linear-gradient(#303946, #151b24);
  border-bottom: 1px solid rgba(128, 222, 255, .18);
  cursor: move;
}

#webcamWindows .webcam-title {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

#webcamWindows .webcam-title strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#webcamWindows .webcam-title-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #5bdcff;
  box-shadow: 0 0 9px rgba(91, 220, 255, .8);
}

#webcamWindows .webcam-window-actions {
  display: flex;
  gap: 4px;
}

#webcamWindows .webcam-action-btn,
#webcamWindows .webcam-control-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0;
  border: 1px solid rgba(127, 171, 196, .55);
  color: #dcefff;
  background: linear-gradient(#263241, #101722);
  box-shadow: inset 0 1px rgba(255,255,255,.08);
}

#webcamWindows .webcam-action-btn {
  width: 23px;
  height: 22px;
  border-radius: 4px;
  font-size: 13px;
}

#webcamWindows .webcam-action-btn.close {
  color: #ffb2bd;
}

#webcamWindows .webcam-body {
  padding: 8px;
  background: radial-gradient(circle at top, rgba(32, 50, 68, .72), rgba(5, 9, 14, .98));
}

#webcamWindows .webcam-video-shell {
  position: relative;
  height: 146px;
  border: 1px solid rgba(141, 178, 200, .38);
  border-radius: 6px;
  background: #020407;
  overflow: hidden;
}

#webcamWindows .webcam-window video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #020407;
  object-fit: cover;
}

#webcamWindows .webcam-empty-state {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  color: #8ea3b4;
  font-size: 12px;
  text-align: center;
  background: linear-gradient(135deg, rgba(16, 24, 34, .96), rgba(5, 9, 14, .96));
}

#webcamWindows .webcam-empty-state[hidden] {
  display: none;
}

#webcamWindows .webcam-status {
  min-height: 18px;
  margin: 7px 0;
  color: #bcd1df;
  font-size: 11px;
  line-height: 1.2;
}

#webcamWindows .webcam-controls {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin: 0;
}

#webcamWindows .webcam-control-btn {
  width: 34px;
  height: 32px;
  border-radius: 7px;
  font-size: 15px;
  filter: grayscale(.35);
}

#webcamWindows .webcam-action-btn:hover,
#webcamWindows .webcam-control-btn:hover {
  background: linear-gradient(#28506a, #11283a);
  box-shadow: 0 0 10px rgba(91, 220, 255, .34), inset 0 1px rgba(255,255,255,.1);
  filter: none;
}

#webcamWindows .webcam-control-btn.is-active {
  color: #ffffff;
  border-color: rgba(91, 220, 255, .95);
  background: linear-gradient(#1680a8, #0a4e72);
  box-shadow: 0 0 12px rgba(91, 220, 255, .56);
  filter: none;
}

.options-popup {
  right: 18px;
  top: 92px;
  display: grid;
  width: 180px;
  padding: 5px;
  background: #fff;
}

.options-popup button {
  min-height: 27px;
  border: 0;
  border-bottom: 1px solid #e0e8ef;
  color: #123;
  background: #fff;
  text-align: left;
}

.guest-menu-popup {
  top: 75px;
  right: 14px;
  width: 174px;
}

.user-action-popup {
  right: auto;
  top: auto;
  width: 178px;
}

.user-action-popup .coin-status {
  font-size: 11px;
  color: #0b67b1;
}

.user-context-menu {
  position: fixed;
  min-width: 170px;
  max-width: 230px;
  width: 210px;
  background: #f3f3f3;
  border: 1px solid #777;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
  z-index: 9999;
  font-size: 12px;
  padding: 0;
}

.user-context-menu[hidden] {
  display: none !important;
}

.user-context-menu-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  padding: 0;
  background: linear-gradient(#555, #333);
  color: #fff;
}

.user-context-menu-header-copy {
  display: grid;
  gap: 2px;
  padding: 6px 8px;
}

.user-context-menu-header strong {
  font-size: 13px;
}

.user-context-menu-close {
  min-width: 26px;
  min-height: 26px;
  margin: 4px 4px 0 0;
  border: 0;
  border-radius: 3px;
  color: #fff;
  background: rgba(255,255,255,.08);
  font-size: 18px;
  line-height: 1;
}

.user-context-menu-options {
  display: grid;
  padding: 2px 0;
}

.user-context-menu-option {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  cursor: pointer;
  color: #222;
  border: 0;
  border-top: 1px solid rgba(255,255,255,.2);
  background: transparent;
  text-align: left;
}

.user-context-menu-option:hover {
  background: #dbeafe;
}

.user-context-menu-option.is-danger {
  color: #b91c1c;
}

/* ===== CHAT PRIVATO COMPACTO - LEGACY STYLE ===== */

.private-chat-windows-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;
}

.private-chat-windows-layer .private-chat-window {
  pointer-events: auto;
}

.private-chat-window {
  position: fixed;
  right: 284px;
  bottom: 88px;
  width: 245px !important;
  height: 225px !important;
  min-width: 245px !important;
  max-width: 245px !important;
  max-height: 225px !important;
  padding: 0;
  background: #f2f2f2;
  border: 1px solid #555;
  border-radius: 5px;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
  z-index: 9998;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.private-chat-header {
  height: 24px !important;
  min-height: 24px !important;
  background: linear-gradient(#666, #333);
  color: #fff;
  font-weight: 700;
  padding: 2px 5px !important;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: move;
  user-select: none;
  overflow: hidden;
}

.private-chat-header img {
  width: 18px !important;
  height: 18px !important;
  border-radius: 3px;
  object-fit: cover;
  flex-shrink: 0;
}

.private-chat-header-copy {
  display: block !important;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.private-chat-header-copy strong {
  display: block;
  max-width: 125px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px !important;
  line-height: 1.1;
}

.private-chat-header-copy span {
  display: none !important;
}

.private-chat-header-actions {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.private-chat-unread {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #c026d3;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.private-chat-btn {
  width: 19px !important;
  height: 19px !important;
  min-width: 19px !important;
  padding: 0 !important;
  border-radius: 3px;
  line-height: 1;
  font-size: 11px !important;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.12);
  color: #fff;
  cursor: pointer;
}

.private-chat-btn:hover {
  background: rgba(255,255,255,.25);
}

.private-chat-toolbar {
  height: 22px !important;
  min-height: 22px !important;
  background: linear-gradient(#777, #555);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 5px !important;
  color: #fff;
  overflow: hidden;
}

.private-chat-tool {
  min-width: 20px !important;
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 11px !important;
  line-height: 1;
  cursor: pointer;
}

.private-chat-tool:hover {
  background: rgba(255,255,255,.22);
}

.private-chat-title-label {
  margin-left: auto;
  font-size: 10.5px !important;
  color: #fff;
  min-width: 0;
  max-width: 118px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.private-chat-title-label strong {
  font-weight: 700;
}

.private-chat-history {
  display: grid;
  gap: 4px;
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 5px !important;
  border: 1px solid #c6d3df;
  border-left: 0;
  border-right: 0;
  background: #fff;
}

.private-chat-message {
  display: grid;
  gap: 2px;
  padding: 4px 5px;
  border: 1px solid #d7e1ea;
  background: linear-gradient(#ffffff, #f4f8fc);
  font-size: 11px;
  line-height: 1.25;
}

.private-chat-message.is-self {
  border-color: #a6c7ea;
  background: linear-gradient(#eef6ff, #deebf9);
}

.private-chat-message-head {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.private-chat-message-head strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}

.private-chat-message time {
  color: #748393;
  font-size: 10px;
}

.private-chat-form {
  padding: 0;
  margin: 0;
}

.private-chat-compose {
  display: grid !important;
  grid-template-columns: 1fr 43px 43px;
  align-items: end;
  gap: 4px;
  padding: 4px !important;
  background: #f7f7f7;
  border-top: 1px solid #c6d3df;
}

.private-chat-input {
  width: 100%;
  min-height: 30px !important;
  height: 30px !important;
  max-height: 30px !important;
  resize: none !important;
  font-size: 11px !important;
  padding: 4px !important;
  line-height: 1.2;
}

.private-chat-send,
.private-chat-newline {
  height: 26px !important;
  min-height: 26px !important;
  min-width: 43px !important;
  padding: 0 4px !important;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,.25);
  background: #2387de;
  color: #fff;
  font-size: 10.5px !important;
  cursor: pointer;
}

.private-chat-send:hover,
.private-chat-newline:hover {
  filter: brightness(1.08);
}

.private-chat-newline {
  background: #3b82c4;
}

.private-chat-window.is-minimized {
  height: 26px !important;
  max-height: 26px !important;
}

.private-chat-window.is-minimized .private-chat-toolbar,
.private-chat-window.is-minimized .private-chat-history,
.private-chat-window.is-minimized .private-chat-form {
  display: none !important;
}
.skin-dark .chat-shell,
.skin-dark .top-strip,
.skin-dark .module-row {
  background: #4d4d4d;
}

.skin-dark .secondary-strip.has-custom-background,
.skin-dark .module-row.has-custom-background {
  background-image:
    linear-gradient(rgba(210, 230, 245, .65), rgba(210, 230, 245, .65)),
    var(--secondary-strip-background-image);
}

.skin-dark .messages,
.skin-dark .input-line,
.skin-dark .user-item,
.skin-dark .room-item {
  background: #f4f4f4;
}

.private-message-notice {
  position: fixed;
  right: 290px;
  bottom: 340px;
  z-index: 10050;
  background: linear-gradient(#4b5563, #1f2937);
  color: #fff;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
  cursor: pointer;
}

.private-message-notice:hover {
  filter: brightness(1.08);
}

.private-message-notice[hidden] {
  display: none !important;
}

.private-chat-smiley-box {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 4px;
  background: #eef5fb;
  border-top: 1px solid #b9c9d8;
  max-height: 58px;
  overflow-y: auto;
  z-index: 2;
}

.private-chat-smiley-box[hidden] {
  display: none !important;
}

.private-chat-smiley-item {
  width: 24px;
  height: 24px;
  border: 1px solid #b8c7d6;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.private-chat-smiley-item img {
  max-width: 20px;
  max-height: 20px;
  object-fit: contain;
}

.private-chat-smiley-item:hover {
  background: #dbeafe;
}

.private-chat-window.private-text-active .private-chat-input {
  border-color: #2387de !important;
  box-shadow: 0 0 0 1px rgba(35, 135, 222, .35);
}

/* Admin */
.admin-body {
  overflow: auto;
  background: #d7e2ea;
}

body.admin-locked .admin-panel-view,
body.admin-locked #adminPanelView,
body.admin-locked .admin-sidebar,
body.admin-locked .admin-content,
body.admin-locked .admin-main,
body.admin-locked .admin-layout,
body.admin-locked .admin-classic-layout,
body.admin-locked .admin-classic-nav,
body.admin-locked .admin-classic-main {
  display: none !important;
}

body.admin-authenticated .admin-login-view,
body.admin-authenticated #adminLoginView {
  display: none !important;
}

body.admin-locked .admin-login-view,
body.admin-locked #adminLoginView {
  display: grid;
}

.admin-shell {
  min-height: 100vh;
}

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  color: #fff;
  background: linear-gradient(#3f6687, #264765);
}

.admin-header strong { display: block; font-size: 17px; }
.admin-header span { color: #d7e6f3; }
.admin-header a { color: #fff; font-weight: 700; }

.admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 10px;
  padding: 10px;
}

.admin-login {
  display: grid;
  place-items: center;
  padding: 40px 10px;
}

.admin-login form,
.admin-panel {
  padding: 12px;
  border: 1px solid #7f9bb3;
  border-radius: 5px;
  background: linear-gradient(#fff, #dce9f3);
}

.admin-login form {
  display: grid;
  gap: 10px;
  width: min(360px, 100%);
}

.admin-panel h2,
.admin-panel h3 {
  margin: 0 0 10px;
  color: #23465f;
  font-size: 16px;
}

.stack-form {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.admin-panel label,
.admin-login label {
  display: grid;
  gap: 4px;
  font-weight: 700;
}

.form-actions,
.row-actions {
  display: flex;
  gap: 8px;
}

.admin-panel button,
.admin-login button {
  min-height: 27px;
  border: 1px solid #285a84;
  border-radius: 3px;
  color: #fff;
  background: linear-gradient(#5e98c5, #3c78b5);
  font-weight: 700;
}

.admin-panel button,
.admin-login button,
.admin-panel .button,
.admin-actions button,
.modal-actions button,
.admin-classic-login button,
.admin-classic-layout button,
.classic-actions button,
.client-subnav button,
.room-editor-tabs button,
.skin-choice-grid button {
  transition:
    background-color .15s ease,
    box-shadow .15s ease,
    transform .12s ease,
    filter .15s ease;
}

.admin-panel button:hover,
.admin-login button:hover,
.admin-panel .button:hover,
.admin-actions button:hover,
.modal-actions button:hover,
.admin-classic-login button:hover,
.admin-classic-layout button:hover,
.classic-actions button:hover,
.client-subnav button:hover,
.room-editor-tabs button:hover,
.skin-choice-grid button:hover {
  filter: brightness(1.07);
  box-shadow: 0 2px 8px rgba(28, 95, 145, .25);
  transform: translateY(-1px);
}

.admin-panel button:active,
.admin-login button:active,
.admin-panel .button:active,
.admin-actions button:active,
.modal-actions button:active,
.admin-classic-login button:active,
.admin-classic-layout button:active,
.classic-actions button:active,
.client-subnav button:active,
.room-editor-tabs button:active,
.skin-choice-grid button:active {
  transform: translateY(0);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
}

.admin-login button[type="submit"],
.admin-classic-login button[type="submit"],
.admin-panel .primary,
.admin-panel button.primary,
.admin-panel button[data-save],
.admin-panel button.save,
.admin-classic-layout button.primary,
.admin-classic-layout button[data-save],
.admin-classic-layout button.save {
  color: #fff;
  border-color: #1d6fb8;
  background: linear-gradient(#3aa1ff, #1680dc);
}

.admin-login button[type="submit"]:hover,
.admin-classic-login button[type="submit"]:hover,
.admin-panel .primary:hover,
.admin-panel button.primary:hover,
.admin-panel button[data-save]:hover,
.admin-panel button.save:hover,
.admin-classic-layout button.primary:hover,
.admin-classic-layout button[data-save]:hover,
.admin-classic-layout button.save:hover {
  background: linear-gradient(#55b2ff, #0f76d3);
}

.admin-panel button.secondary,
.admin-login button.secondary,
.admin-panel button.reset,
.admin-panel button[data-reset],
.admin-classic-layout button.secondary,
.admin-classic-layout button.reset,
.admin-classic-layout button[data-reset],
.admin-classic-login button[type="reset"],
.classic-actions button[type="reset"] {
  color: #234;
  border-color: #9eb6ca;
  background: linear-gradient(#ffffff, #e4eef7);
}

.admin-panel button.secondary:hover,
.admin-login button.secondary:hover,
.admin-panel button.reset:hover,
.admin-panel button[data-reset]:hover,
.admin-classic-layout button.secondary:hover,
.admin-classic-layout button.reset:hover,
.admin-classic-layout button[data-reset]:hover,
.admin-classic-login button[type="reset"]:hover,
.classic-actions button[type="reset"]:hover {
  background: linear-gradient(#ffffff, #d6e8f6);
}

.admin-list {
  display: grid;
  gap: 6px;
}

.room-row,
.ban-row,
.skin-row,
.user-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 7px;
  border: 1px solid #b4c6d5;
  border-radius: 4px;
  background: #f9fcff;
}

.gift-admin-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 92px 82px auto;
  gap: 8px;
  align-items: center;
  padding: 7px;
  border: 1px solid #b4c6d5;
  border-radius: 4px;
  background: #f9fcff;
}

.gift-admin-row img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.gift-admin-row input[type="number"] {
  width: 92px;
}

.gift-admin-row .check-row {
  margin: 0;
}

.smiley-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.smiley-grid img {
  width: 22px;
  height: 22px;
}

.admin-message {
  position: fixed;
  right: 12px;
  bottom: 12px;
  max-width: 360px;
  padding: 8px 10px;
  border-radius: 4px;
  color: #fff;
  background: #1f405a;
  opacity: 0;
  pointer-events: none;
}

.admin-message.visible {
  opacity: 1;
}

.admin-classic-body {
  background: #8fa5b9;
  color: #1d2c38;
  min-height: 100vh;
}

.admin-classic-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #d8e1ea;
}

.admin-classic-header {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  border-bottom: 1px solid #2f5679;
  background: linear-gradient(#315d82, #214766);
  color: #fff;
}

.admin-classic-brand,
.admin-classic-title {
  padding: 12px 16px;
}

.admin-classic-brand {
  border-right: 1px solid rgba(255, 255, 255, 0.25);
}

.admin-classic-brand strong {
  display: block;
  font-size: 18px;
}

.admin-classic-brand span {
  display: block;
  margin-top: 4px;
  color: #dbe8f3;
  font-size: 12px;
}

.admin-classic-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.admin-classic-title h1 {
  margin: 0;
  font-size: 22px;
  letter-spacing: 0;
}

.admin-classic-title a {
  color: #fff;
  font-weight: 700;
}

.admin-classic-login {
  display: grid;
  place-items: start center;
  padding: 42px 16px;
}

.admin-classic-login form {
  width: min(420px, 100%);
  border: 1px solid #667f97;
  background: #eef3f7;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12);
}

.admin-modal-title {
  padding: 8px 10px;
  background: linear-gradient(#d5dde6, #b8c5d1);
  border-bottom: 1px solid #7d93a8;
  color: #16334b;
  font-weight: 700;
}

.admin-classic-login label,
.classic-form label {
  display: grid;
  gap: 4px;
  margin: 10px;
  color: #1f3548;
  font-size: 13px;
  font-weight: 700;
}

.admin-classic-login input,
.classic-form input,
.classic-form textarea {
  min-height: 28px;
  border: 1px solid #7b91a5;
  border-radius: 0;
  background: #fff;
  color: #172635;
  padding: 4px 6px;
  font: inherit;
}

.classic-form textarea {
  resize: vertical;
}

.admin-classic-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 0;
  flex: 1;
}

.admin-classic-nav {
  padding: 8px;
  border-right: 1px solid #788fa4;
  background: #c6d2dd;
  overflow: auto;
}

.admin-classic-nav button {
  display: block;
  width: 100%;
  min-height: 30px;
  margin: 0 0 4px;
  padding: 5px 8px;
  border: 1px solid #7b91a5;
  border-radius: 0;
  background: linear-gradient(#f8fbfd, #dce6ef);
  color: #16334b;
  text-align: left;
  font-weight: 700;
  cursor: pointer;
}

.admin-classic-nav button.active {
  border-color: #315d82;
  background: linear-gradient(#416f96, #295373);
  color: #fff;
}

.admin-classic-main {
  padding: 10px;
  overflow: auto;
  min-height: 0;
}

.admin-breadcrumb {
  padding: 7px 10px;
  border: 1px solid #8197aa;
  background: #edf3f8;
  color: #244863;
  font-weight: 700;
}

.admin-screen {
  display: none;
  margin-top: 10px;
  border: 1px solid #738ca3;
  background: #f5f7f9;
  min-height: 420px;
  max-height: calc(100vh - 150px);
  overflow: auto;
}

.admin-screen.active {
  display: block;
}

.admin-screen h2 {
  margin: 0;
  padding: 8px 10px;
  border-bottom: 1px solid #8197aa;
  background: linear-gradient(#dfe7ef, #c5d1dc);
  color: #17354d;
  font-size: 17px;
}

.dashboard-block {
  margin: 10px;
  border: 1px solid #95a8b8;
  background: #eef3f7;
}

.dashboard-block h3 {
  margin: 0;
  padding: 8px 10px;
  border-bottom: 1px solid #a7b8c7;
  background: linear-gradient(#dce5ee, #c2cfdc);
  color: #18364f;
  font-size: 14px;
}

.dashboard-summary-cards,
.dashboard-quick-actions,
.dashboard-alerts {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.dashboard-summary-cards {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.dashboard-card {
  min-height: 82px;
  padding: 10px;
  border: 1px solid #8ea3b4;
  background: linear-gradient(#fff, #dde7f0);
  box-shadow: inset 0 1px rgba(255,255,255,.72);
}

.dashboard-card-label {
  color: #35506a;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.dashboard-card-value {
  margin-top: 8px;
  color: #16334b;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.05;
}

.dashboard-card-detail {
  margin-top: 5px;
  color: #51697d;
  font-size: 12px;
}

.dashboard-card-blue { background: linear-gradient(#f7fbff, #d7e8f8); }
.dashboard-card-navy { background: linear-gradient(#edf4fb, #d1deeb); }
.dashboard-card-gray { background: linear-gradient(#f9fafb, #e2e8ee); }
.dashboard-card-gold { background: linear-gradient(#fff8e4, #efe0b6); }
.dashboard-card-red { background: linear-gradient(#fdecec, #f1caca); }
.dashboard-card-amber { background: linear-gradient(#fff7e7, #f4deb0); }
.dashboard-card-green { background: linear-gradient(#ecf7ef, #cee5d4); }
.dashboard-card-violet { background: linear-gradient(#f5f0fb, #ddd1ef); }

.dashboard-quick-actions {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.dashboard-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid #7c92a7;
  background: linear-gradient(#fff, #d7e2ec);
  color: #17354d;
  font-weight: 700;
  text-decoration: none;
}

.dashboard-action:hover,
.dashboard-action:focus {
  border-color: #315d82;
  background: linear-gradient(#4e799f, #295373);
  color: #fff;
}

.dashboard-action-back {
  text-align: center;
}

.dashboard-alerts {
  grid-template-columns: 1fr;
}

.dashboard-alert {
  display: grid;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid #9db0bf;
  background: #fff;
  color: #25384a;
}

.dashboard-alert strong {
  color: #17354d;
}

.dashboard-alert-ok {
  border-color: #95b0a0;
  background: #eef8f1;
}

.dashboard-alert-warning {
  border-color: #d1c08c;
  background: #fff8e2;
}

.dashboard-alert-danger {
  border-color: #cc8f8f;
  background: #faeaea;
}

.classic-form {
  padding: 10px;
}

.classic-form fieldset {
  margin: 0 0 10px;
  border: 1px solid #95a8b8;
  background: #eef3f7;
}

.classic-form legend {
  padding: 0 6px;
  color: #1c4668;
  font-weight: 700;
}

.classic-form .check-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.classic-form .check-row input {
  min-height: 0;
}

.classic-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
}

.classic-actions button {
  min-width: 76px;
  min-height: 28px;
  border: 1px solid #576f84;
  border-radius: 0;
  background: linear-gradient(#ffffff, #d3dde7);
  color: #17354d;
  font-weight: 700;
  cursor: pointer;
}

.admin-classic-login button,
.admin-classic-layout button,
.classic-actions button,
.client-subnav button,
.room-editor-tabs button,
.skin-choice-grid button {
  transition:
    background-color .15s ease,
    box-shadow .15s ease,
    transform .12s ease,
    filter .15s ease;
}

.admin-classic-login button:hover,
.admin-classic-layout button:hover,
.classic-actions button:hover,
.client-subnav button:hover,
.room-editor-tabs button:hover,
.skin-choice-grid button:hover {
  filter: brightness(1.07);
  box-shadow: 0 2px 8px rgba(28, 95, 145, .25);
  transform: translateY(-1px);
}

.admin-classic-login button:active,
.admin-classic-layout button:active,
.classic-actions button:active,
.client-subnav button:active,
.room-editor-tabs button:active,
.skin-choice-grid button:active {
  transform: translateY(0);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
}

.admin-classic-login button[type="submit"],
.admin-classic-layout button.primary,
.admin-classic-layout button[data-save],
.admin-classic-layout button.save {
  color: #fff;
  border-color: #1d6fb8;
  background: linear-gradient(#3aa1ff, #1680dc);
}

.admin-classic-login button[type="submit"]:hover,
.admin-classic-layout button.primary:hover,
.admin-classic-layout button[data-save]:hover,
.admin-classic-layout button.save:hover {
  background: linear-gradient(#55b2ff, #0f76d3);
}

.admin-classic-login button[type="reset"],
.admin-classic-layout button.secondary,
.admin-classic-layout button.reset,
.admin-classic-layout button[data-reset],
.classic-actions button[type="reset"] {
  color: #234;
  border-color: #9eb6ca;
  background: linear-gradient(#ffffff, #e4eef7);
}

.admin-classic-login button[type="reset"]:hover,
.admin-classic-layout button.secondary:hover,
.admin-classic-layout button.reset:hover,
.admin-classic-layout button[data-reset]:hover,
.classic-actions button[type="reset"]:hover {
  background: linear-gradient(#ffffff, #d6e8f6);
}

.classic-table {
  width: calc(100% - 20px);
  margin: 10px;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid #8197aa;
  font-size: 13px;
}

.classic-table th,
.classic-table td {
  border: 1px solid #b5c2cf;
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
}

.classic-table th {
  background: #d8e1ea;
  color: #17354d;
  font-weight: 700;
}

.classic-table tr:nth-child(even) td {
  background: #f4f6f8;
}

.classic-pending {
  margin: 10px;
  padding: 8px;
  border: 1px solid #b8c6d3;
  background: #fff;
  color: #31485a;
}

.brand-logo {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.client-settings-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  min-height: 0;
}

.client-subnav {
  padding: 8px;
  border-right: 1px solid #9aaebe;
  background: #dbe5ee;
}

.client-subnav button {
  display: block;
  width: 100%;
  min-height: 27px;
  margin-bottom: 3px;
  border: 1px solid #879bad;
  border-radius: 0;
  background: linear-gradient(#fff, #d9e3ec);
  color: #18364f;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.client-subnav button.active {
  background: linear-gradient(#416f96, #295373);
  color: #fff;
}

.client-tab { display: none; }
.client-tab.active { display: block; }
.room-editor .room-tab { display: none; }
.room-editor .room-tab.active { display: block; }
.user-panel { display: none; }
.user-panel.active { display: block; }
.ban-tab { display: none; }
.ban-tab.active { display: block; }
.mute-tab { display: none; }
.mute-tab.active { display: block; }

.client-tab h3,
.room-editor h3 {
  margin: 0 0 10px;
  padding: 7px 9px;
  border: 1px solid #9aaebe;
  background: #edf3f8;
  color: #244863;
}

.room-editor {
  margin: 10px;
  border: 1px solid #8197aa;
  background: #dbe5ee;
}

.permission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 6px 12px;
  margin-top: 10px;
}

.classic-fieldset {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #9aaebe;
  background: #f4f8fb;
}

.room-editor-tabs {
  flex-wrap: wrap;
  margin: 8px 8px 0;
}

.room-editor-tabs button {
  border-color: #879bad;
  border-radius: 0;
  background: linear-gradient(#fff, #d9e3ec);
  color: #18364f;
}

.room-editor-tabs button.active {
  background: linear-gradient(#416f96, #295373);
  color: #fff;
}

.room-editor .classic-form {
  max-height: 58vh;
  overflow: auto;
}

.room-editor select[size] {
  width: calc(100% - 20px);
  margin: 0 10px 10px;
  min-height: 120px;
  border: 1px solid #7b91a5;
  border-radius: 0;
  background: #fff;
}

.classic-table input[type="radio"] {
  width: 16px;
  height: 16px;
}

.client-settings-form select,
.client-settings-form input[type="number"],
.room-editor select,
.room-editor input[type="number"] {
  min-height: 28px;
  border: 1px solid #7b91a5;
  border-radius: 0;
  background: #fff;
}

.client-settings-form select[size] {
  width: calc(100% - 20px);
  margin: 0 10px 10px;
  min-height: 120px;
}

.classic-actions.compact { padding-block: 4px; }

.color-preview-swatch {
  display: block;
  width: 54px;
  min-width: 54px;
  height: 34px;
  border: 1px solid #7b91a5;
  background: #dcedfb;
  box-shadow: inset 0 1px rgba(255,255,255,.55);
}

.sticky-actions {
  position: sticky;
  bottom: 0;
  border-top: 1px solid #9aaebe;
  background: #dbe5ee;
}

.client-logo-preview {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin: 10px;
  padding: 8px;
  border: 1px solid #a8bac9;
  background: #fff;
}

.client-logo-preview img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.client-logo-preview span {
  grid-column: 2;
  color: #496273;
}

.chat-background-preview {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 10px;
  padding: 8px;
  border: 1px solid #a8bac9;
  background: #fff;
}

.chat-background-preview img {
  width: 110px;
  height: 74px;
  object-fit: cover;
  border: 1px solid #9eb6ca;
  background: #fff;
}

.chat-background-preview.secondary-strip-background-preview {
  background-color: var(--secondary-strip-bg-color, #fff);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.chat-background-preview.secondary-strip-background-preview.has-secondary-strip-color {
  background-image: none !important;
  background: var(--secondary-strip-bg-color) !important;
  background-color: var(--secondary-strip-bg-color) !important;
}

.chat-background-preview.secondary-strip-background-preview.has-secondary-strip-bg:not(.has-secondary-strip-color) {
  background-image: var(--secondary-strip-background-image) !important;
  background-color: transparent !important;
}

.chat-background-preview.secondary-strip-background-preview.has-secondary-strip-bg img {
  opacity: 0;
}

.chat-background-preview-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.chat-background-preview-copy strong {
  color: #244863;
}

.chat-background-preview-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #496273;
}

.skin-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
  gap: 8px;
  margin: 10px;
}

.skin-choice-grid button {
  display: grid;
  gap: 6px;
  border: 1px solid #879bad;
  border-radius: 0;
  background: #fff;
  color: #17354d;
  padding: 7px;
  cursor: pointer;
}

.skin-choice-grid button.active { outline: 2px solid #315d82; }

.skin-preview {
  height: 42px;
  border: 1px solid #778b9e;
  background: linear-gradient(var(--skin-h) 0 30%, var(--skin-p) 30% 100%);
  position: relative;
}

.skin-preview::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  height: 10px;
  background: var(--skin-a);
}

.defined-picker {
  display: grid;
  gap: 4px;
}

.defined-picker button {
  border: 1px solid #8ea2b5;
  border-radius: 0;
  background: #fff;
  color: #17354d;
  padding: 5px 7px;
  text-align: left;
}

.sound-message {
  display: grid;
  gap: 4px;
}

.sound-message audio {
  max-width: 260px;
  height: 32px;
}

.ad-banner {
  position: fixed;
  left: 50%;
  bottom: 14px;
  z-index: 35;
  transform: translateX(-50%);
  border: 1px solid #3a5f82;
  background: #fff;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.3);
}

.ad-banner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.share-window {
  left: 50%;
  top: 110px;
  transform: translateX(-50%);
  width: min(520px, 92vw);
}

.share-window textarea {
  width: calc(100% - 20px);
  margin: 10px;
  resize: vertical;
}

.edit-profile-form {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.edit-profile-form img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  justify-self: center;
}

.edit-profile-form label {
  display: grid;
  gap: 4px;
  font-weight: 700;
}

.hide-avatar-input .input-avatar { display: none; }

.avatar-extra-actions {
  display: flex;
  gap: 8px;
  padding: 8px 10px 0;
}

.avatar-extra-actions button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

@media (max-width: 760px) {
  body { overflow: hidden; }
  .chat-shell {
    min-height: 100vh;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .radio-banner {
    grid-template-columns: 82px 36px minmax(0, 1fr) 54px;
    height: 60px;
    min-height: 60px;
    gap: 7px;
    padding-right: 6px;
  }
  .radio-banner::before { inset: 9px 58px 9px 132px; }
  .update-logo { font-size: 18px; letter-spacing: -1px; }
  .radio-play { width: 36px; height: 36px; font-size: 15px; }
  .radio-volume-pill, .radio-title { display: none; }
  .radio-track { font-size: 14px; padding-inline: 8px; }
  .radio-dj { display: none; }
  .radio-live { min-width: 48px; font-size: 12px; }
  .select-room-row { grid-template-columns: 44px minmax(0, 1fr) 68px; }
  .select-room-brand { display: none; }
  .chat-frame {
    grid-template-columns: minmax(0, 1fr) 210px;
    padding-left: 0;
  }
  .side-panel { border-left: 1px solid #a6bfd5; }
  .avatar-window, .profile-window { left: 5vw; right: auto; top: 130px; width: 90vw; }
  .gift-window { left: 5vw; right: auto; top: 70px; width: 90vw; max-height: calc(100vh - 90px); }
  .font-popup {
    left: 8px;
    right: 8px;
    bottom: 106px;
    width: auto;
    max-height: calc(100vh - 120px);
  }
  .font-popup-body {
    grid-template-columns: 1fr;
    max-height: calc(100vh - 150px);
  }
  .font-family-list,
  .font-color-grid {
    max-height: 170px;
  }
  .font-size-grid {
    grid-template-columns: repeat(5, 34px);
  }
  .gift-window .asset-grid, .gift-grid { grid-template-columns: repeat(4, minmax(54px, 1fr)); }
  .gift-bottom { grid-template-columns: 1fr; }
  .gift-admin-row { grid-template-columns: 38px minmax(0, 1fr); }
  .admin-grid { grid-template-columns: 1fr; }
  .admin-classic-header,
  .admin-classic-layout { grid-template-columns: 1fr; }
  .admin-classic-brand {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  }
  .admin-classic-title {
    align-items: flex-start;
    flex-direction: column;
  }
  .admin-classic-nav {
    border-right: 0;
    border-bottom: 1px solid #788fa4;
    max-height: 220px;
  }
  .admin-screen { max-height: none; }
  .client-settings-layout { grid-template-columns: 1fr; }
  .client-subnav { border-right: 0; border-bottom: 1px solid #9aaebe; }
}
#chatScreen.chat-screen {
  grid-template-rows: var(--secondary-strip-height, 38px) minmax(0, 1fr);
}

#chatScreen > .module-row {
  height: var(--secondary-strip-height, 38px) !important;
  min-height: var(--secondary-strip-height, 38px) !important;
  max-height: none !important;
  display: flex !important;
  align-items: center !important;
  background-color: var(--secondary-strip-bg-color, transparent);
}

#chatScreen > .module-row .toolbar-icon-btn,
#chatScreen > .module-row .module-icon,
#chatScreen > .module-row .module-button,
#chatScreen > .module-row button,
#chatScreen > .module-row a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#chatScreen.chat-screen {
  grid-template-rows: var(--secondary-strip-height, 38px) minmax(0, 1fr);
}

#chatScreen > .module-row {
  height: var(--secondary-strip-height, 38px) !important;
  min-height: var(--secondary-strip-height, 38px) !important;
  background: linear-gradient(#dcedfb, #a9c6dd);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#chatScreen > .module-row.has-secondary-strip-color {
  background-image: none !important;
  background: var(--secondary-strip-bg-color) !important;
  background-color: var(--secondary-strip-bg-color) !important;
}

#chatScreen > .module-row.has-secondary-strip-bg:not(.has-secondary-strip-color) {
  background-image: var(--secondary-strip-background-image) !important;
  background-color: transparent !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.nickname-colored.nickname-role-superadmin,
.user-name.nickname-role-superadmin,
.message strong.nickname-role-superadmin,
.message strong .nickname-role-superadmin {
  color: var(--nickname-color-superadmin, #d4af37) !important;
}

.nickname-colored.nickname-role-admin,
.user-name.nickname-role-admin,
.message strong.nickname-role-admin,
.message strong .nickname-role-admin {
  color: var(--nickname-color-admin, #2f72c9) !important;
}

.nickname-colored.nickname-role-moderator,
.user-name.nickname-role-moderator,
.message strong.nickname-role-moderator,
.message strong .nickname-role-moderator {
  color: var(--nickname-color-moderator, #b74747) !important;
}

.nickname-colored.nickname-role-dj,
.user-name.nickname-role-dj,
.message strong.nickname-role-dj,
.message strong .nickname-role-dj {
  color: var(--nickname-color-dj, #7a52c7) !important;
}

.nickname-colored.nickname-user-male,
.user-name.nickname-user-male,
.message strong.nickname-user-male,
.message strong .nickname-user-male {
  color: var(--nickname-color-user-male, #1f4f7a) !important;
}

.nickname-colored.nickname-user-female,
.user-name.nickname-user-female,
.message strong.nickname-user-female,
.message strong .nickname-user-female {
  color: var(--nickname-color-user-female, #ad3d71) !important;
}

.nickname-colored.nickname-user-neutral,
.user-name.nickname-user-neutral,
.message strong.nickname-user-neutral,
.message strong .nickname-user-neutral {
  color: var(--nickname-color-user-neutral, #4f5965) !important;
}

.picker-popup {
  width: min(360px, calc(100vw - 24px)) !important;
  max-height: min(460px, calc(100vh - 130px)) !important;
  overflow: hidden !important;
}

.smiley-picker {
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)) !important;
  gap: 7px !important;
  max-height: 340px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 4px !important;
}

.smiley-picker.emoji-picker {
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)) !important;
}

.smiley-picker button,
.smiley-picker.emoji-picker button {
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 2px !important;
  overflow: visible !important;
}

.smiley-picker img {
  max-width: 44px !important;
  max-height: 44px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

.inline-smiley {
  max-width: 42px !important;
  max-height: 42px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  vertical-align: middle !important;
}

.private-chat-smiley-box {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)) !important;
  gap: 6px !important;
  max-height: 190px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 7px !important;
}

.private-chat-smiley-item {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 2px !important;
  overflow: visible !important;
}

.private-chat-smiley-item img {
  max-width: 38px !important;
  max-height: 38px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

.chat-shell,
.webcam-window,
.private-chat-window,
.admin-classic-shell {
  -webkit-user-select: none;
  user-select: none;
}

input,
textarea,
select,
[contenteditable="true"],
.messages,
.private-chat-history {
  -webkit-user-select: text;
  user-select: text;
}

img,
video,
canvas {
  -webkit-user-drag: none;
  user-drag: none;
}

.classic-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #9db2c3;
  background: #eef5fb;
}

.classic-filters label {
  display: grid;
  gap: 3px;
  font-size: 11px;
  color: #244863;
}

.classic-filters input {
  min-width: 0;
}

.admin-classic-title button {
  min-height: 26px;
  padding: 3px 10px;
  border: 1px solid #6f8497;
  background: linear-gradient(#f9fbfd, #dbe6ef);
  color: #1d3448;
  cursor: pointer;
}