/* ══════════════════════════════════════════════════════════════════
   pimpstar-filter.css — Include/Exclude tabbed tag menu + filter polish.
   The content-warning behavior is the app's original (blur + Show); this
   file only styles the tabbed tag menu and tidies the advanced panel.
   ══════════════════════════════════════════════════════════════════ */

/* advanced panel: card feel + single tag column beside the content note */
.ps-adv {
  gap: 18px;
  grid-template-columns: 1fr auto;
  padding: 18px 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.12));
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: 16px;
  margin-top: 12px;
}
@media (max-width: 900px) { .ps-adv { grid-template-columns: 1fr; } }

/* ── Include / Exclude tabs ── */
.ps-adv-tabs {
  display: flex; gap: 8px; margin-bottom: 14px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,.08));
}
.ps-adv-tab {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  background: none; border: none; cursor: pointer;
  font-family: var(--fm, monospace); font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--dim, #7f8a99); padding: 10px 16px 12px; border-radius: 9px 9px 0 0;
  transition: color .15s, background .15s;
}
.ps-adv-tab:hover { color: var(--mid, #9fb0c8); background: rgba(255,255,255,.03); }
.ps-adv-tab.on { color: var(--text, #fff); }
.ps-adv-tab.on::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px; }
.ps-adv-tab[data-advtab="inc"].on { color: #6ee7b7; }
.ps-adv-tab[data-advtab="inc"].on::after { background: #6ee7b7; }
.ps-adv-tab[data-advtab="exc"].on { color: #fca5a5; }
.ps-adv-tab[data-advtab="exc"].on::after { background: #fca5a5; }
.ps-adv-tabn { font-size: 10px; font-weight: 700; border-radius: 999px; padding: 1px 7px; color: #0d1016; }
.ps-adv-tabn.inc { background: #6ee7b7; }
.ps-adv-tabn.exc { background: #fca5a5; }

/* the menu panel */
.ps-adv-menu { min-height: 120px; }
.ps-adv-menu-inc .ps-tag.on { background: rgba(110,231,183,.18); border-color: #6ee7b7; color: #d7fbe9; }
.ps-adv-menu-exc .ps-tag.on { background: rgba(252,165,165,.18); border-color: #fca5a5; color: #ffe3e3; }

/* tag chips: softer, springier */
.ps-adv .ps-tag { border-radius: 999px; padding: 5px 12px; font-size: 11px; transition: transform .1s, background .14s, border-color .14s; }
.ps-adv .ps-tag:hover { transform: translateY(-1px); }

/* group headers + count bubbles */
.ps-advgroup-h { cursor: pointer; border-radius: 9px; padding: 8px 11px; transition: background .14s; }
.ps-advgroup-h:hover { background: rgba(255,255,255,.04); }
.ps-tg-count { font-family: var(--fm, monospace); font-size: 10px; color: var(--dim, #7f8a99); background: rgba(255,255,255,.06); border-radius: 999px; padding: 1px 8px; }

/* the content-note column reads calmer */
.ps-adv-col.slim .ps-adv-note {
  font-size: 11.5px; line-height: 1.6; color: var(--mid, #9fb0c8);
  background: rgba(255,255,255,.03); border: 1px solid var(--border, rgba(255,255,255,.07));
  border-radius: 10px; padding: 11px 13px; margin-bottom: 12px;
}

/* ══════════════════════════════════════════════════════════════════
   CUSTOM (non-catalog) TAGS in the bot editor — removable chips
   ══════════════════════════════════════════════════════════════════ */
.ps-customtags { margin-top: 12px; }
.ps-customtags-h {
  font-family: var(--fm, monospace); font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: #ffca6a; margin-bottom: 8px;
}
.ps-customtags-note { color: var(--dim, #7f8a99); text-transform: none; letter-spacing: 0; font-size: 10.5px; margin-left: 6px; }
.ps-customtags-row { display: flex; flex-wrap: wrap; gap: 7px; }
.ps-customtag {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,170,40,.1); border: 1px solid rgba(255,170,40,.35);
  border-radius: 999px; padding: 4px 6px 4px 12px;
  font-size: 11px; color: #ffdca0;
}
.ps-customtag-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,170,40,.2); color: #ffca6a; font-size: 10px; line-height: 1;
  transition: background .14s, color .14s;
}
.ps-customtag-x:hover { background: rgba(230,80,80,.9); color: #fff; }

/* ══════════════════════════════════════════════════════════════════
   CONTENT-WARNING CONSENT POPUP — proper centered modal
   (fixes it rendering as an unstyled strip at the bottom)
   ══════════════════════════════════════════════════════════════════ */
.ps-warn-ov {
  position: fixed; inset: 0; z-index: 1000; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(4,0,8,.8); backdrop-filter: blur(8px);
  animation: psWarnFade .16s ease;
}
@keyframes psWarnFade { from { opacity: 0; } to { opacity: 1; } }
.ps-warn-box {
  width: min(400px, 100%);
  background: var(--surf, #140016); border: 1px solid rgba(255,170,40,.4);
  border-radius: 18px; padding: 26px 24px 20px; text-align: center;
  box-shadow: 0 24px 80px rgba(0,0,0,.7), 0 0 40px rgba(255,170,40,.15);
  animation: psWarnPop .2s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes psWarnPop { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.ps-warn-ic { font-size: 40px; line-height: 1; margin-bottom: 10px; filter: drop-shadow(0 0 14px rgba(255,170,40,.6)); }
.ps-warn-title { font-family: var(--fd, system-ui); font-size: 19px; font-weight: 800; color: #ffca6a; margin-bottom: 6px; }
.ps-warn-sub { font-size: 13px; color: var(--mid, #9fb0c8); margin-bottom: 14px; line-height: 1.5; }
.ps-warn-tags { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-bottom: 18px; }
.ps-warn-tag {
  font-family: var(--fm, monospace); font-size: 11px; font-weight: 700; letter-spacing: .5px;
  color: #ffdca0; background: rgba(255,170,40,.14); border: 1px solid rgba(255,170,40,.4);
  border-radius: 999px; padding: 4px 12px; text-transform: uppercase;
}
.ps-warn-remember {
  display: flex; align-items: center; gap: 9px; justify-content: center;
  font-size: 12.5px; color: var(--mid, #9fb0c8); cursor: pointer;
  padding: 10px; margin-bottom: 16px; user-select: none;
}
.ps-warn-remember input { width: 17px; height: 17px; accent-color: #ffca6a; cursor: pointer; flex: 0 0 auto; }
.ps-warn-actions { display: flex; gap: 10px; }
.ps-warn-actions .ps-btn { flex: 1; padding: 11px 16px; font-size: 13.5px; }
.ps-warn-actions .ps-btn.primary {
  background: linear-gradient(135deg, #ffb03a, #f0902b); color: #241300; font-weight: 800; border: none;
}
.ps-warn-actions .ps-btn.primary:hover { box-shadow: 0 0 18px rgba(255,170,40,.5); }
@media (max-width: 480px) {
  .ps-warn-box { padding: 22px 18px 16px; }
  .ps-warn-actions { flex-direction: column-reverse; }
}

/* ══════════════════════════════════════════════════════════════════
   NASTY / Warning badges — keep them clearly visible on every card,
   including the profile page (where the ☆ star + Edit/Delete chips
   were covering the top corners). Stack them top-left, below the star.
   ══════════════════════════════════════════════════════════════════ */
.ps-card-badges {
  position: absolute;
  top: 44px;            /* below the ☆ favorite star */
  left: 10px;
  right: auto;
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  pointer-events: none;
}
.ps-card-badges .ps-nsfw,
.ps-card-badges .ps-sensbadge {
  position: static !important;   /* let the flex container place them */
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  margin: 0 !important;
}
.ps-card-badges .ps-nsfw {
  font-weight: 800; letter-spacing: .6px; font-size: 10px;
  padding: 4px 11px; border-radius: 999px;
  background: linear-gradient(135deg, #ff2d78, #d61e5a) !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.55), 0 0 14px rgba(255,45,120,.55);
  border: 1px solid rgba(255,255,255,.3);
}

/* ══════════════════════════════════════════════════════════════════
   RAINBOW: when Nasty (NSFW) is on, the NASTY badges flow rainbow too
   (overrides the solid-pink badge style above, matching the UI theme)
   ══════════════════════════════════════════════════════════════════ */
body.theme-rainbow .ps-card-badges .ps-nsfw,
body.theme-rainbow .ps-nsfw {
  background: linear-gradient(90deg,#ff2d78 0%,#ff8a3d 16%,#ffe83d 33%,#3dff8a 50%,#3da8ff 66%,#a83dff 83%,#ff2d78 100%) !important;
  background-size: 200% 100% !important;
  animation: psRainbowFlow 7s linear infinite;
  color: #fff !important; -webkit-text-fill-color: #fff !important;
  border-color: rgba(255,255,255,.35) !important;
}

/* ══════════════════════════════════════════════════════════════════
   RAINBOW AURA — Nasty (NSFW) bot cards get a crisp rainbow outline
   PLUS a soft rainbow glow around it (the aura look), when Nasty is on.
   ══════════════════════════════════════════════════════════════════ */
body.theme-rainbow .ps-card-nsfw {
  position: relative;
  border-color: transparent;
  /* crisp animated rainbow border */
  background:
    linear-gradient(var(--card, #170f24), var(--card, #170f24)) padding-box,
    linear-gradient(120deg,#ff2d78,#ff8a3d,#ffe83d,#3dff8a,#3da8ff,#a83dff,#ff2d78) border-box;
  background-size: 100% 100%, 300% 300%;
  border: 2px solid transparent;
  animation: psOutlineFlow 8s linear infinite;
  /* the aura — a tight multi-color glow hugging the card edge */
  box-shadow:
    0 0 10px rgba(255,45,120,.45),
    0 0 22px rgba(168,61,255,.35),
    0 0 34px rgba(61,168,255,.22);
}
body.theme-rainbow .ps-card-nsfw:hover {
  box-shadow:
    0 0 14px rgba(255,45,120,.6),
    0 0 30px rgba(168,61,255,.5),
    0 0 48px rgba(61,168,255,.32);
}
@keyframes psOutlineFlow {
  0%   { background-position: 0 0, 0% 50%; }
  50%  { background-position: 0 0, 100% 50%; }
  100% { background-position: 0 0, 0% 50%; }
}

/* ══════════════════════════════════════════════════════════════════
   CARD TEXT CONTRAST — make card name + description readable
   ══════════════════════════════════════════════════════════════════ */
.ps-card-veil {
  height: 62% !important;
  background: linear-gradient(180deg, transparent, rgba(6,0,12,.55) 40%, rgba(6,0,12,.94)) !important;
}
.ps-card-name {
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.9), 0 1px 3px rgba(0,0,0,1) !important;
}
.ps-card-meta { color: #e8d4e2 !important; text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.ps-card-tagline { color: #d4dae6 !important; line-height: 1.5; }
body.theme-rainbow .ps-card-tagline { color: #e6d8f0 !important; }
body.theme-rainbow .ps-card-meta { color: #f0dcee !important; }