/* =====================================================================
   ELITE SOCIAL HUB — ADD-ON FIXES (self-contained)
   Load AFTER style.css. Nothing in style.css or main.js is modified.
   Covers:
     A. Creator popup — "View campaigns" removed, no creator profile links
     B. Button hover — 3D label flip (goes away, comes back)
   ===================================================================== */

/* ---------------------------------------------------------------------
   A. CREATOR POPUP
   "View campaigns" had no destination, so it read as a dead button.
   It is removed, and "Partner" takes the full row.
   --------------------------------------------------------------------- */
#cmView,
.cmodal-actions #cmView,
.cmodal-actions .btn-outline[data-esh-removed] { display: none !important; }

.cmodal-actions {
  display: flex !important;
  gap: 12px;
}
/* when only one action is left it stretches instead of sitting half-width */
.cmodal-actions > .btn:only-child { flex: 1 1 100%; width: 100%; }

/* a creator card is a popup trigger, not a link to another page */
.cw-panel[data-esh-nolink],
a[data-esh-nolink] { cursor: pointer; }


/* ---------------------------------------------------------------------
   B. BUTTON HOVER — vertical text roll (matches the reference video)

   esh-fixes.js wraps the button's label in
     <span class="btn-swap"><i>Label</i><i aria-hidden="true">Label</i></span>
   The second copy sits exactly one line BELOW the first, and the pair is
   clipped to a single line. On hover both slide up by one line together:
   copy 1 leaves through the top while copy 2 arrives from the bottom, so
   mid-way you see the tail of one and the head of the other — exactly as
   in the video. Moving the mouse away rolls it straight back.
   --------------------------------------------------------------------- */
.has-swap { position: relative; }

.btn-swap {
  position: relative;
  display: inline-block;
  overflow: hidden;          /* the "window" the two copies roll through */
  vertical-align: middle;
  line-height: 1.45;         /* roomy enough that g/p/y tails are not clipped */
  white-space: nowrap;
}
.btn-swap > i {
  display: block;
  font-style: inherit;
  font-weight: inherit;
  white-space: nowrap;
  transition: transform .42s cubic-bezier(.22, .75, .28, 1);
  will-change: transform;
}
/* the waiting copy sits one full line lower */
.btn-swap > i + i {
  position: absolute;
  top: 100%; left: 0; right: 0;
}

/* both copies roll up by exactly one line */
.has-swap:hover .btn-swap > i,
.has-swap:focus-visible .btn-swap > i {
  transform: translateY(-100%);
}

.has-swap:focus-visible { outline: 2px solid var(--violet-2, #c15af0); outline-offset: 3px; }

/* touch devices have no hover — keep the label still */
@media (hover: none) {
  .btn-swap { overflow: visible; }
  .btn-swap > i { transform: none !important; }
  .btn-swap > i + i { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-swap > i { transition: none !important; }
}

/* ---------------------------------------------------------------------
   C. IMAGE FALLBACK — a broken photo shows the placeholder behind it
      rather than an empty box with a torn-image icon.
   --------------------------------------------------------------------- */
.img-failed { background: linear-gradient(165deg, #241239, #120a1c); }
.cw-media.img-failed::after,
.cmodal-avatar.img-failed::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(165deg, rgba(138,13,214,.25), rgba(18,10,28,.9));
}
img { background-color: rgb(0 0 0 / 0%); }

/* creator popup thumbnails: caption overlay + clickable variant */
.cmodal-media > a,
.cmodal-media > div { display: block; position: relative; }
/* a box whose file is missing keeps the gradient instead of a broken icon */
.cmodal-media > .img-failed { background: linear-gradient(165deg, #3a1a63, #150b23); }
.cmodal-media .cm-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 5px 7px; font-size: .62rem; font-weight: 600; line-height: 1.25;
  background: linear-gradient(transparent, rgba(6, 3, 12, .92));
  border-radius: 0 0 10px 10px;
}
.cmodal-media[hidden] { display: none !important; }

/* ---------------------------------------------------------------------
   NARROW SCREENS
   The roll needs nowrap to work, but a long label ("Send Onboarding
   Application") then overflows a 320px screen. Phones have no hover
   anyway, so below 480px the label simply wraps and the second copy is
   dropped — readable button, zero overflow.
   --------------------------------------------------------------------- */
@media (hover: none), (max-width: 480px) {
  .btn-swap { white-space: normal; max-width: 100%; overflow: visible; }
  .btn-swap > i { white-space: normal; }
  .btn-swap > i + i { display: none !important; position: static; }
  .has-swap { overflow: visible; }
}

/* the chat panel must fit the smallest phones */
#chat-widget { max-width: 100vw; }
#chat-box { width: min(340px, calc(100vw - 28px)) !important; }
.chat-quick { flex-wrap: wrap; }
.chat-quick a { flex: 1 1 auto; text-align: center; }

/* the cursor dot + glow are pointer decorations — pointless on touch */
@media (hover: none), (max-width: 720px) {
  #cursor-ball, #cursor-glow { display: none !important; }
}

/* =====================================================================
   D. CHAT PANEL — fixed height, header always visible, internal scroll
   The panel used to grow with its content: once a few replies and the
   suggestion chips were added it pushed the header off the top of the
   screen and there was nothing to scroll. It is now a fixed-size panel
   where only the message list scrolls.
   ===================================================================== */
#chat-box {
  height: min(560px, calc(100dvh - 132px));
  max-height: calc(100dvh - 132px);
  overflow: hidden;                       /* the parts inside do the scrolling */
}
#chat-box.open { display: flex !important; flex-direction: column; }

.chat-head {
  flex: 0 0 auto;                         /* never scrolls away */
  position: sticky; top: 0; z-index: 2;
}

/* the pre-chat form scrolls on its own if the field list is long */
.chat-prechat { flex: 1 1 auto; overflow-y: auto; min-height: 0; }

/* the message list is the only part that grows and scrolls */
.chat-body {
  flex: 1 1 auto;
  height: auto !important;
  min-height: 0;                          /* required or flex refuses to shrink it */
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.chat-body::-webkit-scrollbar { width: 6px; }
.chat-body::-webkit-scrollbar-thumb { background: rgba(193, 90, 240, .35); border-radius: 999px; }

/* chips and quick links keep their own height, capped so they can never
   push the message box or the input off the panel */
.chat-suggest {
  flex: 0 0 auto; max-height: 34%; overflow-y: auto;
  padding-bottom: 8px; border-top: 1px solid rgba(255, 255, 255, .06);
}
.chat-quick  { flex: 0 0 auto; }
#chat-form   { flex: 0 0 auto; }

@media (max-width: 700px) {
  #chat-box { height: min(72dvh, calc(100dvh - 118px)); }
  .chat-suggest { max-height: 30%; }
}

/* heading above the three photo boxes in the creator popup */
.cmodal-media-title {
  margin: 4px 0 10px; font-size: .74rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--violet-2);
}
.cmodal-media-title[hidden] { display: none !important; }