/* === WindWatch exact Theme popup fix === */

.realtime-side-card:has(.rt-theme-popover),
.rt-controls-section:has(.rt-theme-popover),
.rt-controls-grid:has(.rt-theme-popover) {
  overflow: visible !important;
}

.rt-theme-popover {
  width: 326px !important;
  max-width: min(326px, calc(100vw - 28px)) !important;

  /* Keep it attached above the Theme button, not floating over FER */
  position: absolute !important;
  right: 0 !important;
  bottom: calc(100% + 10px) !important;
  top: auto !important;
  left: auto !important;
  margin-bottom: 0 !important;
  transform: none !important;

  max-height: 360px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;

  z-index: 99999 !important;
  border-radius: 28px !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  background: linear-gradient(180deg, rgba(246,252,255,.96), rgba(223,242,255,.90)) !important;

  box-shadow:
    0 22px 58px rgba(28,80,130,.28),
    0 4px 14px rgba(28,80,130,.12),
    inset 0 1px 0 rgba(255,255,255,.92) !important;

  backdrop-filter: blur(26px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(180%) !important;
}

.rt-theme-popover .rt-theme-option {
  min-height: 50px !important;
  border-radius: 20px !important;
}

.rt-theme-popover::-webkit-scrollbar {
  width: 6px;
}

.rt-theme-popover::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(72,128,180,.35);
}

@media (max-width: 920px) {
  .rt-theme-popover {
    position: fixed !important;
    top: auto !important;
    bottom: 92px !important;
    right: 12px !important;
    left: auto !important;
    width: min(326px, calc(100vw - 24px)) !important;
    max-height: 380px !important;
  }
}

@media (max-width: 430px) {
  .rt-theme-popover {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
  }
}

/* === Theme popup compact size tune === */
.rt-theme-popover {
  width: 300px !important;
  max-width: min(300px, calc(100vw - 24px)) !important;
  max-height: 310px !important;
  padding: 10px !important;
  border-radius: 24px !important;
}

.rt-theme-popover .rt-theme-option {
  min-height: 42px !important;
  height: 42px !important;
  padding: 6px 10px !important;
  border-radius: 16px !important;
}

.rt-theme-popover .rt-theme-option > div:first-child,
.rt-theme-popover button > div:first-child {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
}

.rt-theme-popover .rt-theme-option span,
.rt-theme-popover .rt-theme-option div {
  line-height: 1.05 !important;
}

.rt-theme-popover .grid.gap-1\.5 {
  gap: 6px !important;
}

.rt-theme-popover .mt-3 {
  margin-top: 8px !important;
}

.rt-theme-popover .rounded-\[22px\] {
  border-radius: 18px !important;
  padding: 7px !important;
}

.rt-theme-popover .mb-2 {
  margin-bottom: 5px !important;
}

.rt-theme-popover [class*="text-[10px]"] {
  font-size: 9px !important;
}

.rt-theme-popover [class*="text-[13px]"] {
  font-size: 12px !important;
}

.rt-theme-popover [class*="text-[11px]"] {
  font-size: 10px !important;
}

.rt-theme-popover [class*="text-[9px]"] {
  font-size: 8px !important;
}

.rt-theme-popover [class*="h-10"],
.rt-theme-popover [class*="w-10"] {
  width: 34px !important;
  height: 34px !important;
}

.rt-theme-popover [class*="h-11"],
.rt-theme-popover [class*="w-11"] {
  width: 36px !important;
  height: 36px !important;
}

.rt-theme-popover [class*="gap-2"] {
  gap: 6px !important;
}

.rt-theme-popover [class*="gap-3"] {
  gap: 7px !important;
}

@media (max-width: 920px) {
  .rt-theme-popover {
    width: 292px !important;
    max-height: 300px !important;
  }
}

/* === Theme popup ultra compact final tune === */
.rt-theme-popover {
  width: 286px !important;
  max-width: min(286px, calc(100vw - 24px)) !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  padding: 8px !important;
  border-radius: 22px !important;
}

.rt-theme-popover .rt-theme-option {
  min-height: 36px !important;
  height: 36px !important;
  padding: 4px 8px !important;
  border-radius: 14px !important;
}

.rt-theme-popover .rt-theme-option > div:first-child,
.rt-theme-popover button > div:first-child {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
}

.rt-theme-popover .grid.gap-1\.5 {
  gap: 4px !important;
}

.rt-theme-popover .mt-3 {
  margin-top: 6px !important;
}

.rt-theme-popover .mb-2 {
  margin-bottom: 4px !important;
}

.rt-theme-popover .rounded-\[22px\] {
  padding: 6px !important;
  border-radius: 16px !important;
}

.rt-theme-popover [class*="text-[13px]"] {
  font-size: 11px !important;
}

.rt-theme-popover [class*="text-[11px]"] {
  font-size: 9px !important;
}

.rt-theme-popover [class*="text-[10px]"] {
  font-size: 8.5px !important;
}

.rt-theme-popover [class*="text-[9px]"] {
  font-size: 7.5px !important;
}

.rt-theme-popover [class*="h-10"],
.rt-theme-popover [class*="w-10"] {
  width: 30px !important;
  height: 30px !important;
}

.rt-theme-popover [class*="h-11"],
.rt-theme-popover [class*="w-11"] {
  width: 32px !important;
  height: 32px !important;
}

.rt-theme-popover::-webkit-scrollbar {
  display: none !important;
}

.rt-theme-popover {
  scrollbar-width: none !important;
}

@media (max-width: 920px) {
  .rt-theme-popover {
    width: 280px !important;
    max-width: min(280px, calc(100vw - 24px)) !important;
  }
}