/*
 * Ordinary header/discovery popovers keep their component defaults. These
 * overrides only apply when the same controls are mounted inside `.ws-root`.
 * Radix dropdowns are portalled to that root in Pro mode so the shell tokens
 * remain inherited instead of leaking a second visual language in from body.
 */

.ws-root [data-radix-popper-content-wrapper]:has(.pro-popover) {
  z-index: 60 !important;
}

.ws-root
  .pro-popover:is([data-slot='dropdown-menu-content'], [data-slot='dropdown-menu-sub-content']) {
  padding: 4px;
  border: 1px solid var(--ws-line);
  border-radius: 10px;
  background: var(--ws-raised);
  color: var(--ws-ink-soft);
  box-shadow: var(--ws-lift-sm);
  --tw-ring-shadow: 0 0 #0000;
  font-size: 12.5px;
  line-height: 1.4;
}

.ws-root
  .pro-move-to-folder-popover:is(
    [data-slot='dropdown-menu-content'],
    [data-slot='dropdown-menu-sub-content']
  ) {
  width: 190px;
}

.ws-root .pro-account-popover[data-slot='dropdown-menu-content'] {
  min-width: 152px;
  backdrop-filter: none;
}

.ws-root .pro-popover [data-slot='dropdown-menu-label'] {
  padding: 4px 7px 5px;
  color: var(--ws-ink-mute);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
}

.ws-root .pro-popover [data-slot='dropdown-menu-item'],
.ws-root .pro-popover [data-slot='dropdown-menu-sub-trigger'] {
  min-height: 28px;
  gap: 6px;
  padding: 4px 7px;
  border-radius: 7px;
  color: var(--ws-ink-soft);
  font-size: 12.5px;
  line-height: 1.35;
}

.ws-root .pro-popover [data-slot='dropdown-menu-item']:focus,
.ws-root .pro-popover [data-slot='dropdown-menu-sub-trigger']:focus,
.ws-root .pro-popover [data-slot='dropdown-menu-sub-trigger'][data-state='open'] {
  background: var(--ws-tint-strong);
  color: var(--ws-ink);
}

.ws-root .pro-popover [data-slot='dropdown-menu-item'] svg,
.ws-root .pro-popover [data-slot='dropdown-menu-sub-trigger'] svg {
  width: 14px;
  height: 14px;
}

.ws-root .pro-popover [data-slot='dropdown-menu-separator'] {
  height: 1px;
  margin: 4px -4px;
  background: var(--ws-line-soft);
}

.ws-root .pro-composer-skill-popover[data-slot='dropdown-menu-sub-content'] {
  max-height: min(320px, var(--radix-dropdown-menu-content-available-height));
  overflow-x: hidden;
  overflow-y: auto;
}

.ws-root .pro-composer-skill-popover [data-slot='dropdown-menu-item'] {
  align-items: flex-start;
}

.ws-root .pro-composer-skill-popover [data-slot='dropdown-menu-item']:focus .text-muted-foreground {
  color: var(--ws-ink-mute);
}

.ws-root .pro-skill-slash-popover {
  padding: 4px;
  border-color: var(--ws-line);
  border-radius: 10px;
  background: var(--ws-raised);
  color: var(--ws-ink-soft);
  box-shadow: var(--ws-lift-sm);
  font-size: 12.5px;
  line-height: 1.4;
}

.ws-root .pro-skill-slash-popover > p {
  padding: 4px 7px 5px;
  color: var(--ws-ink-mute);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
}

.ws-root .pro-skill-slash-popover > ul {
  padding-bottom: 0;
}

.ws-root .pro-skill-slash-popover button {
  gap: 1px;
  padding: 5px 7px;
  border-radius: 7px;
  color: var(--ws-ink-soft);
  font-size: 12.5px;
  line-height: 1.35;
}

.ws-root .pro-skill-slash-popover button:hover,
.ws-root .pro-skill-slash-popover button[data-highlighted='true'] {
  background: var(--ws-tint-strong);
  color: var(--ws-ink);
}

.ws-root .pro-skill-slash-popover button .text-muted-foreground {
  color: var(--ws-ink-mute);
  font-size: 12.5px;
  line-height: 1.35;
}

.ws-root .pro-move-to-folder-popover .text-violet-500 {
  color: var(--ws-accent);
}

.ws-root .pro-theme-popover {
  min-width: 136px;
  padding: 4px;
  border: 1px solid var(--ws-line);
  border-radius: 10px;
  background: var(--ws-raised);
  color: var(--ws-ink-soft);
  box-shadow: var(--ws-lift-sm);
}

.ws-root .pro-theme-popover > button {
  min-height: 28px;
  gap: 6px;
  padding: 4px 7px;
  border-radius: 7px;
  color: var(--ws-ink-soft);
  font-size: 12.5px;
  line-height: 1.35;
}

.ws-root .pro-theme-popover > button:hover {
  background: var(--ws-tint-strong);
  color: var(--ws-ink);
}

.ws-root .pro-theme-popover > button.bg-purple-50 {
  background: var(--ws-accent-wash);
  color: var(--ws-accent);
}

.ws-root .pro-theme-popover svg {
  width: 14px;
  height: 14px;
}

/* The bottom notification/community flyout is already a Pro-only component;
   this pass brings its card density down to the same menu scale. */
.ws-root .ws-pop {
  gap: 1px;
  padding: 3px 4px;
  border-color: var(--ws-line);
  border-radius: 10px;
  background-color: var(--ws-raised);
  box-shadow: var(--ws-lift-sm);
}

.ws-root .ws-pop .ws-pop-item {
  gap: 1px;
}

.ws-root .ws-pop button,
.ws-root .ws-pop a {
  color: var(--ws-ink-mute);
}

.ws-root .ws-pop button:hover,
.ws-root .ws-pop a:hover {
  background: var(--ws-tint-strong);
  color: var(--ws-ink);
}

@media (prefers-reduced-motion: reduce) {
  .ws-root .pro-popover,
  .ws-root .pro-theme-popover {
    animation: none;
    transition: none;
  }
}