:root{
  --bg:#05080d;
  --card: rgba(10, 14, 22, 0.72);
  --stroke: rgba(255,255,255,0.10);
  --text:#eaf1ff;
  --muted:#9db0cf;
  --cyan:#00e5ff;
  --violet:#a855f7;
  --green:#22c55e;
  --shadow: 0 20px 70px rgba(0,0,0,.40);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  overflow-x:hidden;
}
a{color:inherit}

.bg{position:fixed; inset:0; z-index:-1}
.grid{
  position:absolute; inset:-40px;
  background:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity:.08;
  transform: perspective(900px) rotateX(58deg) translateY(-220px);
}
.glow{position:absolute; width:900px; height:900px; filter:blur(80px); opacity:.35}
.g1{left:-240px; top:-260px; background:radial-gradient(circle at 30% 30%, var(--cyan), transparent 55%)}
.g2{right:-260px; bottom:-260px; background:radial-gradient(circle at 60% 60%, var(--violet), transparent 58%)}
.noise{
  position:absolute; inset:0; opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27120%27 height=%27120%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.8%27 numOctaves=%273%27 stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Crect width=%27120%27 height=%27120%27 filter=%27url(%23n)%27 opacity=%270.4%27/%3E%3C/svg%3E");
}

.wrap{max-width:1100px; margin:0 auto; padding:18px}

.top{
  max-width:1100px; margin:0 auto; padding:18px 18px 0;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.brand{display:flex; align-items:center; gap:12px}
.logo{
  width:44px; height:44px; border-radius:14px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(0,229,255,.22), rgba(168,85,247,.16));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 0 0 1px rgba(0,229,255,.06) inset;
}
.name{font-weight:900; letter-spacing:.3px}
.tag{font-size:12px; color:var(--muted); margin-top:2px}
.topright{display:flex; align-items:center; gap:12px}
.tiny{font-size:12px; opacity:.7; text-decoration:none}
.tiny:hover{opacity:1}

.card{
  border:1px solid var(--stroke);
  background:var(--card);
  border-radius:22px;
  box-shadow: var(--shadow);
}

.hero{display:grid; grid-template-columns: 1.1fr .9fr; gap:16px; padding:18px}
.heroL{padding:16px}
.heroR{padding:16px}

.kicker{
  display:inline-block;
  font-size:12px;
  letter-spacing:.14em;
  opacity:.85;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.25);
}

h1{margin:12px 0 10px; font-size:46px; line-height:1.05}
.neon{
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 0 22px rgba(0,229,255,.18);
}
.sub{color:var(--muted); font-size:16px; line-height:1.7; margin:0 0 16px}
.cta{display:flex; gap:10px; flex-wrap:wrap; margin:12px 0 10px}
.btn{
  border-radius:14px; padding:12px 14px; border:1px solid rgba(255,255,255,.14);
  background:rgba(17,24,39,.6); color:var(--text); cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{transform:translateY(-1px); border-color: rgba(0,229,255,.35)}
.btn:active{transform:translateY(0px)}
.btn:disabled{opacity:.55; cursor:not-allowed}
.primary{
  background: linear-gradient(135deg, rgba(0,229,255,.18), rgba(168,85,247,.12));
  border-color: rgba(0,229,255,.28);
}
.ghost{background:transparent}
.fine{color:rgba(157,176,207,.9); font-size:12px; line-height:1.5; margin-top:8px}

.featrow{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.pill{
  font-size:12px; padding:8px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.20);
}

.console{
  border-radius:18px; border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.22);
  overflow:hidden;
}
.consoleH{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.dot{width:10px; height:10px; border-radius:999px; display:inline-block}
.d1{background:#ff5f57}.d2{background:#febc2e}.d3{background:#28c840}
.consoleT{margin-left:6px; font-size:12px; color:rgba(234,241,255,.85)}
.consoleB{padding:12px}
.line{display:flex; gap:10px; font-family: var(--mono); font-size:12px; margin:6px 0}
.k{color:rgba(157,176,207,.85); min-width:84px}
.v{color:rgba(234,241,255,.92)}
.v.ok{color:rgba(34,197,94,.95)}
.sep{height:1px; background:rgba(255,255,255,.08); margin:10px 0}
.faint{color:rgba(157,176,207,.7)}

.agentgrid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-top:12px}
.agentcard{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(12,18,32,.50);
  border-radius:18px;
  padding:14px;
}
.agentname{font-weight:900}
.agentsub{color:rgba(157,176,207,.9); font-size:12px; margin-top:6px}
.locked{opacity:.65}

.demo{margin-top:14px; padding:16px}
.hidden{display:none}

.demoTop{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:8px 4px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.big{font-size:20px; font-weight:900}
.small{font-size:12px; color:rgba(157,176,207,.9); margin-top:4px}
.demoBtns{display:flex; gap:10px; flex-wrap:wrap}
.badge{
  padding:3px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.25);
}
.badge.ok{border-color:rgba(34,197,94,.35); color:rgba(34,197,94,.95)}

.chat{
  height:44vh;
  overflow:auto;
  padding:14px 6px;
}
.bubble{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.25);
  border-radius:16px;
  padding:12px 12px;
  margin:10px 0;
  animation: fadeIn .18s ease-out;
}
@keyframes fadeIn{from{opacity:0; transform:translateY(4px)}to{opacity:1; transform:translateY(0)}}
.who{font-weight:900; margin-right:8px}
.meta{font-size:12px; color:rgba(157,176,207,.85)}
.text{margin-top:8px; color:rgba(234,241,255,.92); line-height:1.55; white-space:pre-wrap}
.bubble.user{border-color:rgba(0,229,255,.16)}
.bubble.agent{border-color:rgba(168,85,247,.16)}

.composer{
  display:flex; gap:10px; padding:12px 6px 8px;
  border-top:1px solid rgba(255,255,255,.08);
}
input[type="text"]{
  flex:1; min-width:220px;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.12);
  color:var(--text);
  padding:12px 12px;
  border-radius:14px;
  outline:none;
}
input[type="text"]:focus{border-color: rgba(0,229,255,.35)}
.hint{font-size:12px; color:rgba(157,176,207,.85); padding:10px 6px 2px}

.toast{
  position:fixed;
  left:50%; bottom:20px;
  transform:translateX(-50%);
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.55);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  font-size:12px;
  z-index:9999;
}
.toast.hidden{display:none}

.foot{
  display:flex; justify-content:space-between; align-items:center;
  color:rgba(157,176,207,.75); font-size:12px;
  margin:16px 6px 4px;
}
.muted{opacity:.8}

@media (max-width: 980px){
  .hero{grid-template-columns:1fr}
  h1{font-size:38px}
  .agentgrid{grid-template-columns:1fr}
  .chat{height:48vh}
}

/* SWAMPY_AGENT_CARDS_BG_V1
   - Make the 3 cards show PNG backgrounds (no overlay text)
   - Click-to-select highlight ring
*/
.agentgrid .agentcard{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  min-height: 108px;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.16);
  background:
    linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.55)),
    var(--agent-bg) center/cover no-repeat;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.agentgrid .agentcard:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 12px 28px rgba(0,0,0,0.25);
}

/* Hide the text that overlays the cover art */
.agentgrid .agentcard .agentname,
.agentgrid .agentcard .agentsub{
}

/* Selection ring */
.agentgrid .agentcard.selected{
  border-color: rgba(0, 200, 120, 0.9);
  box-shadow: 0 0 0 3px rgba(0, 200, 120, 0.28), 0 12px 28px rgba(0,0,0,0.32);
}

/* Selected agent line under Connect Wallet */
.agent-selected-line{
  margin-top: 10px;
  font-size: 14px;
  opacity: 0.95;
}
.agent-selected-line b{ font-weight: 800; }


/* SWAMPY_SELECTED_AGENT_PREVIEW_V1
   Selected Agent line becomes a wide preview bar that uses --agent-bg
*/
#selectedAgentLine{
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  padding: 12px 14px;
  margin-top: 14px;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.35), rgba(0,0,0,0.70)),
    var(--agent-bg) center/cover no-repeat;
}
#selectedAgentLine b{ font-weight: 800; }

/* SWAMPY_AGENTCARD_NAME_ONLY_V1
   Goal: No overlay text on card art.
   Show ONLY the agent name at the bottom of each card.
*/
.agentgrid .agentcard{
  position: relative;
}

/* Hide anything inside the card (kills any overlay text from HTML/templates) */
.agentgrid .agentcard > *{
}

/* Bottom name label from data-agent attribute */
.agentgrid .agentcard::after{
  content: attr(data-agent);
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.2px;
  color: rgba(255,255,255,0.95);

  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Add a subtle bottom fade to help the label read */
.agentgrid .agentcard::before{
  content: ;
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.00) 40%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}

/* SWAMPY_FORCE_CLEAN_CARD_ART_V1
   Purpose:
   - Force card art to clean PNGs (even if JS tries to override)
   - Remove any runtime overlay text inside cards
   - Keep only bottom name label (data-agent) via ::after
*/

.agentgrid .agentcard{
  /* kill any injected text rendering quirks */
}

/* Force clean backgrounds regardless of inline style / JS changes */
.agentgrid .agentcard[data-agent="Problem Solver"]{
  background:
    linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.55)),
}
.agentgrid .agentcard[data-agent="Data Hunter"]{
  background:
    linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.55)),
}
.agentgrid .agentcard[data-agent="Investigator"]{
  background:
    linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.55)),
}

/* Hide anything injected inside the card (text overlays, badges, etc) */
.agentgrid .agentcard *{
}

/* Re-enable our bottom label (from the previous script) */
.agentgrid .agentcard::after{
}


/* SWAMPY_CARDS_NAME_ONLY_LOCKED_V2
   Cards show ONLY clean PNG art + bottom glass name label.
   Any injected text inside cards is fully hidden.
*/
.agentgrid .agentcard{
  position: relative;
  overflow: hidden;
}

/* Force the clean art backgrounds (wins over any inline styles / JS) */
.agentgrid .agentcard[data-agent="Problem Solver"]{
  background:
    linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.55)),
}
.agentgrid .agentcard[data-agent="Data Hunter"]{
  background:
    linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.55)),
}
.agentgrid .agentcard[data-agent="Investigator"]{
  background:
    linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.55)),
}

/* Hide EVERYTHING inside the card (kills any overlay copy added by HTML/JS) */
.agentgrid .agentcard *{
}

/* Bottom fade for readability */
.agentgrid .agentcard::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.00) 45%, rgba(0,0,0,0.60) 100%);
  pointer-events: none;
}

/* Bottom glass name bar (ONLY visible text on card) */
.agentgrid .agentcard::after{
  content: attr(data-agent);
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  padding: 10px 12px;
  border-radius: 14px;

  text-align: center;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.3px;
  color: rgba(255,255,255,0.96);

  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
}

/* === SWAMPY CARD OVERLAY KILL SWITCH === */
/* Remove ALL injected card text layers */

.agentcard .overlay,
.agentcard .overlay-content,
.agentcard .card-overlay,
.agentcard .card-copy,
.agentcard .agentcopy,
.agentcard .description,
.agentcard .subtitle,
.agentcard .tagline,
.agentcard .details,
.agentcard .meta,
.agentcard .info,
.agentcard .label,
.agentcard .pill,
.agentcard .button,
.agentcard .cta,
.agentcard h1,
.agentcard h2,
.agentcard h3,
.agentcard h4,
.agentcard p,
.agentcard span,
.agentcard div:not(.agentcard)::before,
.agentcard div:not(.agentcard)::after {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Allow ONLY the bottom name bar */
.agentcard::after {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Prevent JS from re-enabling text */
.agentcard * {
  pointer-events: none !important;
}


/* SWAMPY_FORCE_CLEAN_ART_V3
   Goal:
   - Force CLEAN PNG art for the 3 cards, even if app_v2 injects inline backgrounds or images
   - Remove ALL overlay text/content on the cards
   - Keep only the bottom name bar (optional, but helpful)
*/

/* Hide anything injected inside cards (kills overlay text regardless of markup) */
html body .agentgrid .agentcard *{
}

/* Also hide any injected <img> (some scripts use <img> tags instead of background) */
html body .agentgrid .agentcard img{
}

/* Nuke any inline background-image on the card (then we paint our own via ::before) */
html body .agentgrid .agentcard{
  position: relative;
  overflow: hidden;
}

/* Paint the clean art on a pseudo element so it ALWAYS wins */
html body .agentgrid .agentcard::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.55)),
    var(--swampy-card-art) center/cover no-repeat;
  pointer-events: none;
}

/* Assign clean PNGs per agent */
html body .agentgrid .agentcard[data-agent="Problem Solver"]{ --swampy-card-art: url(/agents/assets/nfts/problem_solver.png); }
html body .agentgrid .agentcard[data-agent="Data Hunter"]{   --swampy-card-art: url(/agents/assets/nfts/data_hunter.png); }
html body .agentgrid .agentcard[data-agent="Investigator"]{  --swampy-card-art: url(/agents/assets/nfts/investigatorolg.png); }

/* Bottom glass name bar (ONLY visible text on card) */
html body .agentgrid .agentcard::after{
  content: attr(data-agent);
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  padding: 10px 12px;
  border-radius: 14px;

  text-align: center;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.3px;
  color: rgba(255,255,255,0.96);

  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
}

/* Selection ring */
html body .agentgrid .agentcard.selected{
}

/* SWAMPY_CARDS_CLEAN_UI_V1
   - No overlay text on cards
   - Cards show only image art
   - Bottom label: NFT (optional minimal wording)
*/

html body .agentgrid .agentcard .agentname,
html body .agentgrid .agentcard .agentsub{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
}

/* Force card to render using --agent-bg variable (from inline style) */
html body .agentgrid .agentcard{
  background: none !important;
  position: relative;
  overflow: hidden;
}

html body .agentgrid .agentcard::before{
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.55)),
    var(--agent-bg) center/cover no-repeat;
  pointer-events: none;
}

/* Minimal label. If you want no label at all, we can remove this block. */
html body .agentgrid .agentcard::after{
  content: 'NFT';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  text-align: center;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.96);
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
}

/* SWAMPY_UI_TUNE_V1 */

/* Replace the card label text with NFT 1/2/3 */
html body .agentgrid .agentcard::after{ content: 'NFT' !important; }
html body .agentgrid .agentcard:nth-child(1)::after{ content: 'NFT 1' !important; }
html body .agentgrid .agentcard:nth-child(2)::after{ content: 'NFT 2' !important; }
html body .agentgrid .agentcard:nth-child(3)::after{ content: 'NFT 3' !important; }

/* Hide the scope line in the memory console */
html body #consoleLog .line{
  display: flex;
}
html body #consoleLog .line:has(.k){
  /* keep normal */
}
html body #consoleLog .line:has(.k){
  /* no-op */
}
/* Fallback (no :has support): we hide via JS too, but this helps on modern Chromium */
html body #consoleLog .line:has(.k):has(.k:contains(scope)){ display:none !important; }


/* SWAMPY_FORCE_NFT_POS_ART_V1
   Force NFT 1/2/3 art by position so nothing can go blank.
*/
html body .agentgrid .agentcard:nth-child(1){ --swampy-card-art: url(/agents/assets/nfts/problem_solver.png) !important; }
html body .agentgrid .agentcard:nth-child(2){ --swampy-card-art: url(/agents/assets/nfts/data_hunter.png) !important; }
html body .agentgrid .agentcard:nth-child(3){ --swampy-card-art: url(/agents/assets/nfts/investigatorolg.png) !important; }

/* Ensure ::before uses the forced art var */
html body .agentgrid .agentcard::before{
  background:
    linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.55)),
    var(--swampy-card-art) center/cover no-repeat !important;
}
/* SWAMPY_NFT3_USE_NFTAGENT_V1 */
html body .agentgrid .agentcard:nth-child(3){ --swampy-card-art: url(/agents/assets/nfts/nft-agent.png) !important; }

/* SWAMPY_NFT_LABELS_AND_ART_V1 (20260118_063413)
   - Labels: NFT #1/#2/#3
   - Force art by position with cache-bust query
*/
html body .agentgrid .agentcard:nth-child(1){ --swampy-card-art: url(/agents/assets/nfts/problem_solver.png?v=20260118_063413) !important; }
html body .agentgrid .agentcard:nth-child(2){ --swampy-card-art: url(/agents/assets/nfts/data_hunter.png?v=20260118_063413) !important; }
html body .agentgrid .agentcard:nth-child(3){ --swampy-card-art: url(/agents/assets/nfts/nft-agent.png?v=20260118_063413) !important; }

html body .agentgrid .agentcard::before{
  background:
    linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.55)),
    var(--swampy-card-art) center/cover no-repeat !important;
}

/* Label text */
html body .agentgrid .agentcard::after{ content: 'NFT' !important; }
html body .agentgrid .agentcard:nth-child(1)::after{ content: 'NFT #1' !important; }
html body .agentgrid .agentcard:nth-child(2)::after{ content: 'NFT #2' !important; }
html body .agentgrid .agentcard:nth-child(3)::after{ content: 'NFT #3' !important; }


/* SWAMPY_SELECTED_BAR_TUNE_V1
   The selected bar is an image panel + minimal label.
*/
#selectedAgentLine{
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  padding: 12px 14px;
  margin-top: 14px;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.35), rgba(0,0,0,0.70)),
    var(--agent-bg) center/cover no-repeat;
}

/* SWAMPY_FIX_V2_UI */
#selectedAgentLine{
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  padding: 14px 16px;
  margin-top: 14px;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.35), rgba(0,0,0,0.72)),
    var(--agent-bg) center/cover no-repeat;
}
#selectedAgentLine .selTitle{ font-weight: 900; font-size: 16px; }
#selectedAgentLine .selBlurb{ margin-top: 8px; font-size: 13px; opacity: .92; line-height: 1.35; }

/* Modal */
.snm.hidden{ display:none; }
.snm{ position: fixed; inset: 0; z-index: 999999; }
.snm-backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.snm-card{
  position: relative;
  width: min(980px, 92vw);
  height: min(720px, 86vh);
  margin: 6vh auto;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(8,12,18,0.72);
  box-shadow: 0 30px 120px rgba(0,0,0,0.65);
  display:flex;
  flex-direction: column;
  transform: translateY(10px) scale(0.985);
  animation: snmIn 220ms ease forwards;
}
@keyframes snmIn{ to{ transform: translateY(0) scale(1); } }
.snm-close{
  position:absolute; right: 16px; top: 16px;
  width: 40px; height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  color: #fff;
  cursor: pointer;
  z-index: 5;
}
.snm-top{
  display:flex; gap: 18px;
  padding: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.45));
}
.snm-art{
  width: 300px; min-width: 300px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.14);
  background:
    radial-gradient(circle at 30% 20%, rgba(0,200,120,0.16), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.65)),
    var(--snm-art) center/cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 16px 44px rgba(0,0,0,0.55);
}
.snm-meta{ flex:1; padding-top: 4px; }
.snm-kicker{
  display:inline-block;
  font-size: 12px;
  letter-spacing: 0.18em;
  opacity: 0.75;
  border: 1px solid rgba(255,255,255,0.14);
  padding: 6px 10px;
  border-radius: 999px;
}
.snm-title{ margin-top: 10px; font-size: 26px; font-weight: 900; }
.snm-sub{ margin-top: 12px; font-size: 14px; opacity: 0.92; line-height: 1.45; }
.snm-chat{ flex:1; display:flex; flex-direction: column; padding: 14px 18px 16px 18px; }
.snm-chathead{
  display:flex; justify-content: space-between; align-items:center;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
}
.snm-chatbody{
  flex:1; margin-top: 12px; padding: 12px;
  border-radius: 16px; border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.22); overflow:auto;
}
.snm-msg{
  margin: 10px 0; padding: 10px 12px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05); max-width: 86%;
}
.snm-msg.me{ margin-left:auto; }
.snm-composer{ margin-top: 12px; display:flex; gap: 10px; align-items:center; }
#snmMsg{
  flex:1; height: 44px;
  border-radius: 14px; padding: 0 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: #fff;
}

/* =========================================================
   SWAMPY_NFT_POPUP_POLISH_V1
   Premium "live NFT card" modal:
   - True NFT card ratio for the art
   - Tier glows (Common/Epic/Legendary)
   - Foil shine + aura + subtle motion
   - Cleaner chat UI
   ========================================================= */

:root{
  --tier-common: rgba(140, 150, 170, 0.85);
  --tier-epic: rgba(0, 220, 170, 0.90);
  --tier-legendary: rgba(255, 204, 80, 0.95);
}

/* Make the modal card feel like a collectible */
.snm-card{
  border-radius: 26px;
  box-shadow: 0 30px 140px rgba(0,0,0,0.75);
  --tier-glow: var(--tier-common);
}

/* Top layout: give the art more "card presence" */
.snm-top{
  gap: 22px;
  padding: 22px;
}

/* NFT CARD ART: portrait ratio + framed */
.snm-art{
  width: 360px;
  min-width: 360px;
  height: 480px;              /* ~3:4 */
  border-radius: 22px;
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
}

/* Extra inner frame to scream "NFT" */
.snm-art::before{
  content:'';
  position:absolute;
  inset: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35);
  pointer-events:none;
}

/* Foil shine pass */
.snm-art::after{
  content:'';
  position:absolute;
  inset:-40%;
  background:
    linear-gradient(115deg,
      transparent 35%,
      rgba(255,255,255,0.10) 45%,
      rgba(255,255,255,0.02) 55%,
      transparent 65%);
  transform: translateX(-30%) rotate(8deg);
  animation: snmFoil 3.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes snmFoil{
  0%{ transform: translateX(-35%) rotate(8deg); opacity: 0.25; }
  50%{ transform: translateX(35%) rotate(8deg); opacity: 0.45; }
  100%{ transform: translateX(-35%) rotate(8deg); opacity: 0.25; }
}

/* Outer aura */
.snm-card::before{
  content:'';
  position:absolute;
  inset:-2px;
  border-radius: 28px;
  pointer-events:none;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10),
              0 0 52px color-mix(in srgb, var(--tier-glow) 45%, transparent);
}
.snm-card::after{
  content:'';
  position:absolute;
  inset:-42px;
  pointer-events:none;
  background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--tier-glow) 32%, transparent), transparent 60%);
  filter: blur(14px);
  opacity: 0.95;
}

/* Title and tags look more premium */
.snm-kicker{ letter-spacing: 0.22em; }
.snm-title{ font-size: 32px; }

/* Chat area: looks like a contained "terminal" inside the NFT */
.snm-chatbody{
  background: rgba(0,0,0,0.28);
  border-color: rgba(255,255,255,0.12);
}

/* Message bubbles */
.snm-msg{
  border-radius: 16px;
  padding: 12px 14px;
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
}
.snm-msg.me{
  background: rgba(0, 220, 170, 0.10);
  border-color: rgba(0, 220, 170, 0.22);
}
.snm-msg.bot{
  background: rgba(255,255,255,0.05);
}

/* Composer: feels like an "input console" */
#snmMsg{
  height: 48px;
  border-radius: 16px;
  border-color: rgba(255,255,255,0.16);
}
#snmSend{ border-radius: 16px; }

/* Responsive: keep it usable on smaller screens */
@media (max-width: 980px){
  .snm-top{ flex-direction: column; }
  .snm-art{ width: 100%; min-width: 0; height: 360px; }
}


/* SWAMPY_MODAL_FIT_V2
   - Prevent modal from opening "mid-card"
   - Keep header visible
*/
.snm-card{
  margin: 2vh auto !important;
  height: min(760px, 92vh) !important;
}
.snm-top{
  padding: 18px !important;
}
.snm-art{
  height: 440px !important;
}

/* =========================================================
   SWAMPY_MODAL_V4 (CLEAN)
   - hidden ALWAYS wins (close works)
   - left anchored modal
   - left = portrait NFT card, right = chat
   ========================================================= */

/* close must always work */
#swampyNftModal.hidden,
#swampyNftModal[aria-hidden="true"]{ display:none !important; }

/* base stacking */
#swampyNftModal{ position:fixed; inset:0; z-index:999999; }
#swampyNftModal .snm-backdrop{ position:absolute; inset:0; z-index:0; }
#swampyNftModal .snm-card{ position:relative; z-index:1; }

/* decorative layers cannot block clicks */
#swampyNftModal .snm-card::before,
#swampyNftModal .snm-card::after,
#swampyNftModal .snm-art::before,
#swampyNftModal .snm-art::after{ pointer-events:none !important; }

/* make X clickable no matter what */
#snmClose{
  position:absolute !important;
  top:14px !important;
  right:14px !important;
  z-index:2147483647 !important;
  pointer-events:auto !important;
}

/* ANCHOR MODAL LEFT */
#swampyNftModal.snm{
  display:flex;
  align-items:center;
  justify-content:flex-start;   /* LEFT */
  padding:18px;
}

/* THE MODAL CARD */
#swampyNftModal .snm-card{
  width: min(1240px, 96vw);
  height: min(780px, 92vh);
  margin: 0 0 0 18px;          /* push from left edge slightly */

  display:grid;
  grid-template-columns: 520px 1fr; /* left card, right panel */
  grid-template-rows: 1fr;

  border-radius:28px;
  overflow:hidden;
  background: rgba(8,12,18,0.92);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 40px 160px rgba(0,0,0,0.72);
}

/* LEFT PANE */
#swampyNftModal .snm-front{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:22px;
}

/* NFT FRONT = portrait card */
#swampyNftModal .snm-art{
  width: 420px;
  max-width: 100%;
  aspect-ratio: 3/4;
  height:auto;

  border-radius:24px;
  border: 1px solid rgba(255,255,255,0.18);
  overflow:hidden;

  background:
    linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.72)),
    var(--snm-art) center/cover no-repeat;

  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.35),
    0 24px 90px rgba(0,0,0,0.70);
  position:relative;
}

/* RIGHT PANE */
#swampyNftModal .snm-back{
  display:flex;
  flex-direction:column;
  min-height:0;
  padding: 20px 20px 18px 0;
}
#swampyNftModal .snm-top{
  display:block;
  padding: 0 0 14px 0;
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
#swampyNftModal .snm-chat{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  padding: 14px 0 0 0;
}
#swampyNftModal .snm-chatbody{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
}
#swampyNftModal .snm-composer{
  flex:0 0 auto;
  position:sticky;
  bottom:0;
  padding-top:12px;
  background: linear-gradient(180deg, rgba(0,0,0,0.00), rgba(0,0,0,0.45));
}

/* MOBILE */
@media (max-width: 980px){
  #swampyNftModal.snm{ justify-content:center; }
  #swampyNftModal .snm-card{ grid-template-columns:1fr; height:94vh; margin:0; }
  #swampyNftModal .snm-front{ justify-content:center; }
  #swampyNftModal .snm-art{ width: 100%; aspect-ratio: 16/9; }
  #swampyNftModal .snm-back{ padding: 12px 14px; }
}


/* =========================================================
   SWAMPY_MODAL_UI_POLISH_V1
   - Show ESC hint near the close button
   - Remove input ghosting/artifacts inside composer field
   ========================================================= */

/* --- ESC hint on the close button --- */
#snmClose{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  padding: 0 14px !important;
  width:auto !important;
  min-width: 54px !important;
}

#snmClose::after{
  content:"ESC";
  font-size: 11px;
  letter-spacing: 0.10em;
  opacity: 0.75;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.20);
}

/* --- Input ghosting fix (caret + outline + weird inner artifacts) --- */
#snmMsg{
  -webkit-appearance: none !important;
  appearance: none !important;

  background-clip: padding-box !important;
  box-shadow: none !important;
  outline: none !important;

  caret-color: #ffffff !important;
  text-shadow: none !important;

  /* prevents weird inset artifacts on some GPUs */
  filter: none !important;
  transform: translateZ(0) !important;
}

#snmMsg:focus{
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(0,220,170,0.18) !important;
}

/* If Chrome autofill causes a weird block */
#snmMsg:-webkit-autofill{
  -webkit-text-fill-color: #fff !important;
  transition: background-color 99999s ease-out 0s;
}


/* =========================================================
   SWAMPY_MODAL_HEADER_WALLET_CENTER_V1
   - Center wallet status at top of modal
   ========================================================= */

/* Header container */
.snm-header{
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* Wallet status pill */
#snmChatStatus{
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;

  padding: 8px 16px !important;
  border-radius: 999px !important;

  font-size: 13px !important;
  letter-spacing: 0.04em !important;

  background: rgba(0,0,0,0.35) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  backdrop-filter: blur(6px) !important;

  white-space: nowrap !important;
  pointer-events: none !important; /* purely informational */
}

/* Ensure title stays left */
#snmTitle{
  position: relative !important;
  z-index: 2 !important;
}


/* =========================================================
   SWAMPY_MODAL_WALLET_TOP_CENTER_V2
   Place Connected pill in the top header row:
   between "Swampy Agent" and (X / ESC)
   ========================================================= */

/* Use the chat header row as the positioning anchor */
#swampyNftModal .snm-chathead{
  position: relative !important;
}

/* Center the wallet pill within that header bar */
#swampyNftModal #snmChatStatus{
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;

  margin: 0 !important;

  /* keep it compact */
  padding: 7px 14px !important;
  font-size: 13px !important;
  border-radius: 999px !important;

  background: rgba(0,0,0,0.28) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  backdrop-filter: blur(6px) !important;

  white-space: nowrap !important;
  pointer-events: none !important;
}

/* Make sure left label and right side don’t collide with the centered pill */
#swampyNftModal .snm-chatlabel{
  padding-right: 260px !important;  /* reserve space */
}
#swampyNftModal .snm-chathead{
  padding-right: 110px !important;  /* reserve room for X/ESC cluster */
}


/* SWAMPY_WALLET_PILL_LEFT_V1 */
/* Hide the top-center pill */
#snmChatStatus{ display:none !important; }

/* Show wallet under NFT art (left) */
.snm-wallet-left{
  position:absolute;
  left: 22px;
  bottom: 140px;  /* adjust near NFT AGENT LIVE PREVIEW */
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(6px);
  white-space: nowrap;
  pointer-events: none;
}


/* SWAMPY_WALLET_UNDER_IMAGE_V1 */
#snmChatStatus{ display:none !important; }

.snm-wallet-under{
  position:absolute;
  left: 22px;
  bottom: 110px;     /* tweak if needed */
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 13px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(6px);
  white-space: nowrap;
  pointer-events: none;
}


/* SWAMPY_POWERED_BY_BOOB_V1 */
.snm-powered-boob{
  position:absolute;
  left: 22px;
  bottom: 64px;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.12);
  text-decoration:none;
  color:#fff;
  pointer-events:auto;
}
.snm-powered-boob img{
  width: 28px;
  height: 28px;
  border-radius: 999px;
}
.snm-powered-boob span{ font-size: 13px; opacity: 0.95; }
.snm-powered-boob strong{ font-weight: 900; }


/* SWAMPY_CARD_CLICK_FIX_V1
   Restore clickability on NFT cards (the earlier rule disabled pointer events).
*/
.agentgrid .agentcard{
  pointer-events: auto !important;
  cursor: pointer;
}
.agentgrid .agentcard *{
  pointer-events: auto !important;
}


/* SWAMPY_MODAL_OVERLAY_CLICK_FIX_V1
   If the modal container exists but is hidden, it must not intercept clicks.
*/
#swampyNftModal.hidden{
  display: none !important;
}
#swampyNftModal.hidden,
#swampyNftModal.hidden *{
  pointer-events: none !important;
}


/* SWAMPY_CHAT_PANEL_VISIBILITY_V1 */
#swampyNftModal .snm-back{
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
}

#swampyNftModal .snm-chat{
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
  flex: 1 1 auto !important;
}

#swampyNftModal .snm-chatbody{
  display:block !important;
  min-height: 220px !important;
  flex: 1 1 auto !important;
  overflow:auto !important;
}

#swampyNftModal .snm-composer{
  display:flex !important;
  gap: 10px !important;
}


/* SWAMPY_CHAT_VISIBILITY_FIX_V1 */

/* Make sure the input text is visible while typing */
#snmMsg{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  caret-color: #ffffff !important;
}

/* Make sure chat bubbles are never hidden by any global “hide overlays” rules */
#snmChatBody .snm-msg{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ensure bubbles have readable contrast */
#snmChatBody .snm-msg.me{
  background: rgba(0, 220, 170, 0.12) !important;
  border: 1px solid rgba(0, 220, 170, 0.22) !important;
}
#snmChatBody .snm-msg.bot{
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}


/* SWAMPY_FORCE_CHAT_INPUT_VISIBLE_V2 */
#snmMsg{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  opacity:1 !important;
  caret-color:#fff !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
}

#snmChatBody .snm-msg{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  color:#fff !important;
}


/* SWAMPY_LOGO_BIG_V1 */
header.top .logo img,
header .logo img,
.brand .logo img,
img.logo {
  height: 78px !important;
  width: auto !important;
  max-height: 78px !important;
}


/* SWAMPY_POWERED_BY_BOOB_LANDING_V1 */
.powered-by-boob{
  margin-top: 10px;
}
.powered-by-boob a{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.12);
  color:#fff;
  text-decoration:none;
}
.powered-by-boob img{
  width: 30px;
  height: 30px;
  border-radius: 999px;
}
.powered-by-boob strong{ font-weight: 900; }


/* SWAMPY_TOP_BOOB_BADGE_V1 */
.top-boob{
  position:absolute;
  top: 16px;
  right: 72px; /* leaves space for the X button */
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.12);
  color:#fff;
  text-decoration:none;
  z-index: 10;
}

.top-boob img{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display:block;
}

.top-boob strong{ font-weight: 900; }

/* REMOVE the ghost circle (it’s a leftover decorative toggle/indicator element).
   This targets any small circular “toggle” next to the powered badge area. */
.powered-by-boob + div,
.powered-by-boob + span,
.top-boob + div,
.top-boob + span{
  display:none !important;
}


/* SWAMPY_LOGO_POSITION_FIX_V1 */
header.top .brand{
  display:flex;
  align-items:center;
  gap: 14px;
}

header.top .brand .logo{
  display:flex;
  align-items:center;
}

header.top .brand .logo img{
  height: 78px !important;
  width: auto !important;
  margin: 0 !important;
  transform: translateY(-6px); /* nudges it back into the header line */
}


/* SWAMPY_LOGO_LEFT_V2 */
header.top .brand{
  justify-content:flex-start !important;
}

header.top .brand .logo img{
  transform: translate(-14px, -6px) !important; /* LEFT + a little up */
}


/* SWAMPY_LOGO_LEFT_V2 */
header.top .brand{
  justify-content:flex-start !important;
}

header.top .brand .logo img{
  transform: translate(-14px, -22px) !important; /* LEFT + a little up */
}


/* SWAMPY_LOGO_LEFT_V2 */
header.top .brand{
  justify-content:flex-start !important;
}

header.top .brand .logo img{
  transform: translate(-14px, -6px) !important; /* LEFT + a little up */
}


/* SWAMPY_LOGO_LEFT_V2 */
header.top .brand{
  justify-content:flex-start !important;
}

header.top .brand .logo img{
  transform: translate(-8px, -6px) !important; /* LEFT + a little up */
}


/* SWAMPY_LOGO_LEFT_V2 */
header.top .brand{
  justify-content:flex-start !important;
}

header.top .brand .logo img{
  transform: translate(-22px, -6px) !important; /* LEFT + a little up */
}


/* SWAMPY_LOGO_LEFT_V2 */
header.top .brand{
  justify-content:flex-start !important;
}

header.top .brand .logo img{
  transform: translate(-26px, -8px) !important; /* LEFT + a little up */
}


/* SWAMPY_LOGO_LEFT_V2 */
header.top .brand{
  justify-content:flex-start !important;
}

header.top .brand .logo img{
  transform: translate(-28px, -5px) !important; /* LEFT + a little up */
}


/* SWAMPY_LOGO_LEFT_V2 */
header.top .brand{
  justify-content:flex-start !important;
}

header.top .brand .logo img{
  transform: translate(-32px, -4px) !important; /* LEFT + a little up */
}


/* SWAMPY_LOGO_LEFT_V2 */
header.top .brand{
  justify-content:flex-start !important;
}

header.top .brand .logo img{
  transform: translate(-37px, -2px) !important; /* LEFT + a little up */
}


/* SWAMPY_LOGO_LEFT_V2 */
header.top .brand{
  justify-content:flex-start !important;
}

header.top .brand .logo img{
  transform: translate(-37px, -1px) !important; /* LEFT + a little up */
}


/* SWAMPY_LOGO_LEFT_V2 */
header.top .brand{
  justify-content:flex-start !important;
}

header.top .brand .logo img{
  transform: translate(-37px, -0px) !important; /* LEFT + a little up */
}


/* SWAMPY_TOP_BOOB_BADGE_V2 */
.top-boob{
  position: fixed;           /* fixed so it always shows */
  top: 18px;
  right: 88px;               /* leaves room for the X */
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.12);
  color:#fff;
  text-decoration:none;
  z-index: 1000000;
}
.top-boob img{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display:block;
}
.top-boob strong{ font-weight: 900; }


/* SWAMPY_DISCONNECT_BUTTON_V1 */
.discbtn{
  margin-left: 10px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.28);
  color: rgba(255,255,255,0.95);
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}


/* SWAMPY_DISCONNECT_LABEL_V1 */
#disconnectWallet.discbtn::after{
  content: "Disconnect";
  position:absolute;
  right: 54px;
  white-space: nowrap;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff;
  font-size: 13px;
  opacity: 0;
  transform: translateY(2px);
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
}
#disconnectWallet.discbtn{
  position: relative;
}
#disconnectWallet.discbtn:hover::after{
  opacity: 1;
  transform: translateY(0);
}

/* Kill the old ghost circle next to wallet controls */
.ghost-circle,
.wallet-ghost,
#ghostCircle{
  display:none !important;
}


/* SWAMPY_NFT_TITLE_NO_CLIP_V1 */
/* This targets the big bottom-left title inside the NFT front card */
#swampyNftModal .snm-front h1,
#swampyNftModal .snm-front .snm-front-title,
#swampyNftModal .snm-front .nft-title,
#swampyNftModal .snm-front .title{
  white-space: normal !important;
  line-height: 1.05 !important;
  padding-bottom: 18px !important;
  word-break: break-word;
}

/* If your titles are too big on Common/Legendary, scale them slightly */
@media (max-height: 820px){
  #swampyNftModal .snm-front h1,
  #swampyNftModal .snm-front .snm-front-title,
  #swampyNftModal .snm-front .nft-title,
  #swampyNftModal .snm-front .title{
    font-size: 54px !important;
  }
}


/* SWAMPY_NFT_TITLE_NO_CLIP_V1 */
/* This targets the big bottom-left title inside the NFT front card */
#swampyNftModal .snm-front h1,
#swampyNftModal .snm-front .snm-front-title,
#swampyNftModal .snm-front .nft-title,
#swampyNftModal .snm-front .title{
  white-space: normal !important;
  line-height: 1.05 !important;
  padding-bottom: 18px !important;
  word-break: break-word;
}

/* If your titles are too big on Common/Legendary, scale them slightly */
@media (max-height: 820px){
  #swampyNftModal .snm-front h1,
  #swampyNftModal .snm-front .snm-front-title,
  #swampyNftModal .snm-front .nft-title,
  #swampyNftModal .snm-front .title{
    font-size: 54px !important;
  }
}


/* SWAMPY_DISCONNECT_PILL_V1 */
#disconnectWallet.discbtn{
  margin-left: 10px;
  height: 44px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.28);
  color: rgba(255,255,255,0.95);
  cursor: pointer;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .2px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}


/* SWAMPY_GHOST_CIRCLE_KILL_V1
   Hide the empty circle element next to wallet controls on landing.
*/
#disconnectWallet + .circle,
#disconnectWallet + .ghost,
#disconnectWallet + .dot,
#connectWallet + .circle,
#connectWallet + .ghost,
#connectWallet + .dot{
  display:none !important;
}


/* SWAMPY_MODAL_TITLE_SIZE_FIX_V1
   Common (#1) and Legendary (#3) clip because the title is longer.
   Reduce just those two.
*/
#swampyNftModal[data-nft="1"] .snm-front-title,
#swampyNftModal[data-nft="3"] .snm-front-title{
  font-size: 56px !important;
  line-height: 1.03 !important;
}


/* SWAMPY_HIDE_BOOB_IN_MODAL_V1 */
body.modal-open .top-boob,
body.modal-open .powered-by-boob{
  display:none !important;
}


/* SWAMPY_MODAL_BOTTOM_TITLE_FIX_V2
   Prevent big bottom-left title from clipping.
*/
#swampyNftModal .snm-front{
  padding-bottom: 24px !important;
}

#swampyNftModal .snm-front *{
  box-sizing: border-box;
}

/* Catch the big title block (Common/Legendary) */
#swampyNftModal .snm-front h1,
#swampyNftModal .snm-front .big,
#swampyNftModal .snm-front .title,
#swampyNftModal .snm-front .nft-title{
  max-width: 100% !important;
  white-space: normal !important;
  line-height: 1.02 !important;
  font-size: 56px !important; /* smaller so it never clips */
}


/* SWAMPY_CTA_ROW_LAYOUT_V1
   Force the wallet row to be exactly 3 items and remove ghost circle artifacts.
*/
.cta{
  display:flex !important;
  align-items:center !important;
  gap: 14px !important;
  flex-wrap: wrap;
}

/* Kill any circular decorative node/pseudo-element inside the CTA row */
.cta .circle,
.cta .dot,
.cta .ghost,
.cta .orb,
.cta .ring,
.cta::before,
.cta::after,
.cta *::before,
.cta *::after{
  /* only affects pseudo-elements and known circle classes */
  box-shadow: none !important;
}

/* specifically hide any pseudo element that renders as a circle */
.cta *::before,
.cta *::after{
  content: none !important;
}


/* SWAMPY_HIDE_LANDING_BADGES_IN_MODAL_V2 */
#swampyNftModal:not(.hidden) ~ .top-boob,
body.modal-open .top-boob,
body.modal-open .powered-by-boob{
  display:none !important;
}


/* SWAMPY_MODAL_TITLE_CLIP_FIX_FINAL */
#swampyNftModal .snm-front{
  padding-bottom: 26px !important;
}

#swampyNftModal .snm-front .nft-title,
#swampyNftModal .snm-front .title,
#swampyNftModal .snm-front h1,
#swampyNftModal .snm-front h2{
  font-size: 56px !important;
  line-height: 1.02 !important;
  white-space: normal !important;
  word-break: break-word;
  max-width: 100% !important;
}



@media (max-width: 980px){

  /* modal container */
  #swampyNftModal .snm-card{
    width: 96vw !important;
    height: 94vh !important;
    margin: 2vh auto !important;

    display:flex !important;
    flex-direction: column !important;
    overflow:hidden !important;
  }

  /* left/front image becomes top */
  #swampyNftModal .snm-front{
    width: 100% !important;
    flex: 0 0 auto !important;
    padding: 14px !important;
  }

  #swampyNftModal .snm-art{
    width: 100% !important;
    height: 280px !important;
    margin: 0 !important;
    border-radius: 18px !important;
  }

  /* prevent giant title clipping */
  #swampyNftModal .snm-front .nft-title,
  #swampyNftModal .snm-front h1,
  #swampyNftModal .snm-front h2{
    font-size: 34px !important;
    line-height: 1.05 !important;
    white-space: normal !important;
  }

  /* right/back chat fills rest */
  #swampyNftModal .snm-back{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 12px 14px 14px 14px !important;
    display:flex !important;
    flex-direction: column !important;
  }

  #swampyNftModal .snm-chatbody{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow:auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* composer always visible */
  #swampyNftModal .snm-composer{
    flex: 0 0 auto !important;
    position: sticky !important;
    bottom: 0 !important;
    background: rgba(0,0,0,0.55) !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* make input readable and roomy on phones */
  #snmMsg{
    height: 52px !important;
    font-size: 16px !important; /* avoids iOS zoom issues */
  }

  /* hide the BOOB badge in modal on mobile too (if still present anywhere) */
  body.modal-open .top-boob,
  body.modal-open .powered-by-boob{
    display:none !important;
  }
}


/* SWAMPY_MOBILE_MODAL_FIX_V2 (complete) */
@media (max-width: 980px){

  /* modal container */
  #swampyNftModal .snm-card{
    width: 96vw !important;
    height: 94vh !important;
    margin: 2vh auto !important;
    display:flex !important;
    flex-direction: column !important;
    overflow:hidden !important;
  }

  /* image (front) becomes top */
  #swampyNftModal .snm-front{
    width: 100% !important;
    flex: 0 0 auto !important;
    padding: 14px !important;
  }

  #swampyNftModal .snm-art{
    width: 100% !important;
    height: 280px !important;
    margin: 0 !important;
    border-radius: 18px !important;
  }

  /* bottom-left title size (avoid clipping on phones) */
  #swampyNftModal .snm-front h1,
  #swampyNftModal .snm-front h2,
  #swampyNftModal .snm-front .title,
  #swampyNftModal .snm-front .nft-title{
    font-size: 32px !important;
    line-height: 1.06 !important;
    white-space: normal !important;
  }

  /* chat (back) fills the rest */
  #swampyNftModal .snm-back{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 12px 14px 14px 14px !important;
    display:flex !important;
    flex-direction: column !important;
  }

  #swampyNftModal .snm-chat{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display:flex !important;
    flex-direction: column !important;
  }

  #swampyNftModal .snm-chatbody{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow:auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* composer stays visible */
  #swampyNftModal .snm-composer{
    flex: 0 0 auto !important;
    position: sticky !important;
    bottom: 0 !important;
    background: rgba(0,0,0,0.55) !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* input readable, avoid iOS zoom */
  #snmMsg{
    height: 52px !important;
    font-size: 16px !important;
  }

}


/* SWAMPY_BOOB_BADGE_TOP_CENTER_V1 */
.powered-by-boob{
  position: fixed !important;
  top: 18px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 1000000 !important;
  margin: 0 !important;
}

/* keep it from overlapping the header on small screens */
@media (max-width: 980px){
  .powered-by-boob{ top: 10px !important; }
}


/* SWAMPY_BOOB_BADGE_BOTTOM_CENTER_V1 */
.powered-by-boob{
  position: fixed !important;
  bottom: 18px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 1000000 !important;
  margin: 0 !important;
}


/* SWAMPY_TOOLS_UI_V1 */
.snm-tools{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 0 6px 0;
  flex-wrap: wrap;
}
.toolbtn{
  height: 40px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: #fff;
  cursor: pointer;
  font-weight: 800;
}
.toolbtn:disabled{
  opacity: .45;
  cursor: not-allowed;
}
.metabadge{
  margin-left:auto;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.25);
  font-size: 12px;
  opacity: .92;
}

/* paste overlay */
.snm-pastewrap{
  position: fixed;
  inset: 0;
  display:none;
  align-items:center;
  justify-content:center;
  padding: 18px;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(10px);
  z-index: 1000003;
}
.snm-pastecard{
  width: min(860px, 96vw);
  height: min(560px, 92vh);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(8,12,18,0.92);
  display:flex;
  flex-direction: column;
  overflow:hidden;
}
.snm-pastehead{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  font-weight: 900;
}
#snmPasteArea{
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  resize: none;
  padding: 12px 14px;
  border: 0;
  outline: none;
  color: #fff;
  background: rgba(0,0,0,0.20);
  font-size: 16px;
}
.snm-pasteactions{
  display:flex;
  gap:10px;
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,0.10);
}
.snm-pasteactions button{
  height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color:#fff;
  cursor:pointer;
  font-weight: 800;
}
.snm-pasteactions .primary{
  background: rgba(0,220,170,0.18);
  border-color: rgba(0,220,170,0.25);
}

/* Mobile: larger buttons */
@media (max-width: 980px){
  .toolbtn{ height: 46px; padding: 0 16px; font-size: 15px; }
  .metabadge{ width: 100%; margin-left: 0; }
  .snm-pastecard{ height: 92vh; }
}


/* SWAMPY_FLIP_CARDS_V1 */
.agentcard{
  position: relative;
  overflow: hidden;
}
.agentcard .flip3d{
  position:absolute;
  inset:0;
  perspective: 1200px;
}
.agentcard .flipface{
  position:absolute;
  inset:0;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  border-radius: 18px;
}

/* Front uses the card art already applied via --agent-bg */
.agentcard .flipface.front{
  background:
    linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.55)),
    var(--agent-bg) center/cover no-repeat;
}
.agentcard .stamp{
  position:absolute;
  top: 12px;
  left: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.35);
  font-weight: 900;
}
.agentcard .tier{
  position:absolute;
  bottom: 12px;
  left: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.35);
  font-weight: 900;
  letter-spacing: .06em;
}

/* Back */
.agentcard .flipface.back{
  transform: rotateY(180deg);
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 14px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.agentcard .backtitle{ font-weight: 900; font-size: 16px; }
.agentcard .req{
  font-size: 12px;
  opacity: .95;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
}
.agentcard .perks{
  margin:0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.35;
  opacity: .95;
}
.agentcard .hint{
  margin-top:auto;
  font-size: 12px;
  opacity: .75;
}

/* Desktop hover flip */
@media (hover:hover) and (pointer:fine){
  .agentcard:hover .flip3d{
    /* flip the “card” */
  }
  .agentcard:hover .flipface.front{ transform: rotateY(180deg); }
  .agentcard:hover .flipface.back{ transform: rotateY(360deg); }
}

/* Mobile/tablet: flip by class */
.agentcard.flipped .flipface.front{ transform: rotateY(180deg); }
.agentcard.flipped .flipface.back{ transform: rotateY(360deg); }

/* Smooth animation */
.agentcard .flipface.front,
.agentcard .flipface.back{
  transition: transform 320ms ease;
}


/* SWAMPY_TOPSTATUS_PILL_V1 */
#snmTopStatus.snm-topstatus{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  margin-left: 10px;
}



/* LANDING_CARDS_FULLSIZE_V1
   Make the 3 landing NFT cards large and readable, and remove the bottom NFT pill overlay.
*/

/* 1) Remove the CSS-generated "NFT #1/#2/#3" bottom pill/label */
html body .agentgrid .agentcard::after{
  content: "" !important;
  display: none !important;
  opacity: 0 !important;
}

/* 2) Make the landing cards feel like real NFT cards (bigger) */
html body .agentgrid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(280px, 1fr)) !important;
  gap: 18px !important;
  align-items: start !important;
}

/* Keep a consistent NFT-ish aspect ratio */
html body .agentgrid .agentcard{
  aspect-ratio: 3 / 4 !important;
  height: auto !important;
  min-height: 360px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

/* Ensure any hover/back-info text area stays inside and can scroll if needed */
html body .agentgrid .agentcard .back,
html body .agentgrid .agentcard .agentback,
html body .agentgrid .agentcard .details,
html body .agentgrid .agentcard .meta,
html body .agentgrid .agentcard .info{
  max-height: 40% !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Tablet: 2 columns */
@media (max-width: 980px){
  html body .agentgrid{
    grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
  }
  html body .agentgrid .agentcard{
    min-height: 380px !important;
  }
}

/* Phone: 1 column and taller so hover/info isn’t cut off */
@media (max-width: 640px){
  html body .agentgrid{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  html body .agentgrid .agentcard{
    min-height: 420px !important;
  }
}



/* FLIP_FIT_CARD_V1
   Ensure flip/hover back content stays inside the card and matches card size.
*/
html body .agentgrid .agentcard{
  position: relative !important;
  overflow: hidden !important;
}

/* Common “flip/back” layer selectors – constrain them to the card bounds */
html body .agentgrid .agentcard .front,
html body .agentgrid .agentcard .back,
html body .agentgrid .agentcard .agentfront,
html body .agentgrid .agentcard .agentback,
html body .agentgrid .agentcard .cardfront,
html body .agentgrid .agentcard .cardback{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  border-radius: inherit !important;
  overflow: hidden !important;
}

/* If the “back info” area has its own scrolling region, keep it inside */
html body .agentgrid .agentcard .back .details,
html body .agentgrid .agentcard .agentback .details,
html body .agentgrid .agentcard .back .info,
html body .agentgrid .agentcard .agentback .info{
  max-height: 100% !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
}



/* WALLET_SINGLE_BUTTON_V1
   Landing page: remove extra Disconnect button + ghost element.
*/
#disconnectWallet,
.disconnectWallet,
.discbtn,
.wallet-ghost,
.walletGhost{
  display: none !important;
}



/* MOBILE_TABLET_MODAL_FIX_V4
   iPhone/iPad: modal must be usable with keyboard, scroll properly, and not trap the page.
   Applies to touch devices + smaller screens (tablets included).
*/
@media (max-width: 1024px) {

  /* Modal overlay uses viewport and prevents body scroll issues */
  #swampyNftModal{
    position: fixed !important;
    inset: 0 !important;
    padding: 10px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Card becomes a flex column that fits screen height */
  #swampyNftModal .snm-card{
    width: 100% !important;
    max-width: 760px !important;
    height: 92dvh !important;
    max-height: 92dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    min-height: 0 !important;
  }
  @supports not (height: 92dvh){
    #swampyNftModal .snm-card{ height: 92vh !important; max-height: 92vh !important; }
  }

  /* Make the main content area flex and allow inner scrolling */
  #swampyNftModal .snm-right{
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* The messages pane is the scroll container */
  #swampyNftModal .snm-chat,
  #swampyNftModal .snm-messages{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 16px !important;
  }

  /* Keep the composer visible above iOS keyboard */
  #swampyNftModal .snm-input,
  #swampyNftModal .snm-composer{
    flex: 0 0 auto !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 1000006 !important;
    background: rgba(8,12,18,0.92) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }

  /* Make input usable on iOS (prevents zoom + weird scroll jumps) */
  #swampyNftModal input,
  #swampyNftModal textarea{
    font-size: 16px !important;
  }

  /* Close button always tappable */
  #snmClose{
    position: fixed !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 2147483647 !important;
    pointer-events: auto !important;
  }
}



/* LANDING_CARDS_SIZE_V2
   Reduce landing NFT card size on PC + phone (previously too large).
*/
html body .agentgrid{
  grid-template-columns: repeat(3, minmax(200px, 260px)) !important;
  justify-content: start !important;
  gap: 14px !important;
}

html body .agentgrid .agentcard{
  aspect-ratio: 3 / 4 !important;
  min-height: 280px !important;
  max-height: 320px !important;
}

/* Tablet */
@media (max-width: 980px){
  html body .agentgrid{
    grid-template-columns: repeat(2, minmax(200px, 260px)) !important;
  }
  html body .agentgrid .agentcard{
    min-height: 300px !important;
    max-height: 340px !important;
  }
}

/* Phone */
@media (max-width: 640px){
  html body .agentgrid{
    grid-template-columns: 1fr !important;
    justify-content: stretch !important;
  }
  html body .agentgrid .agentcard{
    width: 100% !important;
    min-height: 320px !important;
    max-height: 360px !important;
  }
}



/* IOS_MODAL_FIX_V5
   iPhone/iPad: reliable scroll + input visibility with keyboard.
*/
@media (max-width: 1024px){

  #swampyNftModal{
    position: fixed !important;
    inset: 0 !important;
    overflow: hidden !important;
    padding: 10px !important;
  }

  #swampyNftModal .snm-card{
    height: 92vh !important;
    max-height: 92vh !important;
    width: 100% !important;
    max-width: 760px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    min-height: 0 !important;
  }

  /* Right side is a flex column */
  #swampyNftModal .snm-right{
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* Messages scroll */
  #swampyNftModal .snm-messages,
  #swampyNftModal .snm-chat{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Composer: NOT sticky on iOS; keep it visible inside layout */
  #swampyNftModal .snm-input,
  #swampyNftModal .snm-composer{
    flex: 0 0 auto !important;
    position: relative !important;
    bottom: auto !important;
    z-index: 1000006 !important;
    background: rgba(8,12,18,0.92) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }

  /* Make typed text always visible */
  #swampyNftModal input,
  #swampyNftModal textarea{
    font-size: 16px !important;
    color: rgba(255,255,255,0.95) !important;
    caret-color: rgba(255,255,255,0.95) !important;
  }

  /* Close button pinned */
  #snmClose{
    position: fixed !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 2147483647 !important;
    pointer-events: auto !important;
  }
}



/* MOBILE_TAP_ANYWHERE_V1
   iPhone/iPad:
   - Card must be tappable anywhere (no left-edge-only hitbox)
   - Tap 1 flips card; show "Tap again to enter"
   - Modal must scroll so user can reach composer/input/send
*/
@media (hover: none) and (pointer: coarse) {

  /* Remove iOS click delay + improve tap reliability */
  .agentgrid .agentcard,
  #connectBtn,
  button {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* Ensure card itself is the tap target, not inner overlay layers */
  .agentgrid .agentcard {
    position: relative !important;
    pointer-events: auto !important;
    z-index: 3 !important;
  }

  /* Kill tap-stealing layers inside cards (common culprit for "only left edge works") */
  .agentgrid .agentcard * {
    pointer-events: none !important;
  }

  /* But keep the card tappable */
  .agentgrid .agentcard {
    pointer-events: auto !important;
  }

  /* Show a clear hint after first tap/flip */
  .agentgrid .agentcard.flipped::after {
    content: "TAP AGAIN TO ENTER";
    display: block !important;
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    text-align: center;
    font-weight: 800;
    letter-spacing: 0.08em;
    font-size: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.92);
    z-index: 6;
    pointer-events: none !important;
  }

  /* MODAL: allow scrolling to reach composer (don’t trap at “Built for power users”) */
  #swampyNftModal {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Let the card grow and be scrollable as a whole on iOS */
  #swampyNftModal .snm-card {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Ensure the right side doesn’t hide the composer */
  #swampyNftModal .snm-right,
  #swampyNftModal .snm-chat,
  #swampyNftModal .snm-messages {
    overflow: visible !important;
    max-height: none !important;
  }

  /* Keep input readable and visible on iOS */
  #swampyNftModal input,
  #swampyNftModal textarea {
    font-size: 16px !important;
    color: rgba(255,255,255,0.95) !important;
    caret-color: rgba(255,255,255,0.95) !important;
  }
}
/* FIX_NFT1_BLOCKER_V1
   Prevent overlays from stealing hover/click on NFT #1.
*/
.powered-by-boob{ pointer-events:none !important; }
.powered-by-boob a, .powered-by-boob img{ pointer-events:auto !important; }