/* ADPT shared sponsored placement. This is the existing visual system,
   isolated so every page can load it without importing the full site shell. */
.ad-banner {
  position: sticky;
  top: var(--ad-sticky-top, 0px);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.4rem clamp(0.8rem, 2.5vw, 1.75rem);
  --ad-accent: #9945ff;
  --ad-gold: var(--gold, var(--h5, #ffcf6b));
  --ad-primary: var(--primary, var(--h1, var(--bl, #4d7fff)));
  --ad-primary-dim: var(--primary-dim, rgba(77, 127, 255, 0.14));
  --ad-text: var(--text, var(--ink, var(--txt, #e8e8f2)));
  --ad-text-dim: var(--text-dim, var(--ink-2, var(--dim, #9a9ab4)));
  --ad-mono: var(--mono, "SF Mono", ui-monospace, "Cascadia Code", Menlo, monospace);
  background:
    radial-gradient(120% 200% at 0% 50%, color-mix(in srgb, var(--ad-accent) 14%, transparent), transparent 40%),
    radial-gradient(120% 200% at 100% 50%, color-mix(in srgb, var(--ad-accent) 10%, transparent), transparent 40%),
    linear-gradient(90deg, #0a0714, #08080f 30%, #08080f 70%, #0a0714);
  border-bottom: 1px solid color-mix(in srgb, var(--ad-accent) 35%, transparent);
  border-top: 1px solid rgba(255, 207, 107, 0.12);
  min-height: 60px;
  font-size: 0.94rem;
  line-height: 1.6;
  overflow: hidden;
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.75);
}
.ad-banner:empty,
.ad-banner[hidden] { display: none !important; }

/* A soft warp field masks the campaign hand-off without changing layout. */
.ad-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-image:
    radial-gradient(closest-side, rgba(235, 240, 255, 0.85), transparent),
    radial-gradient(closest-side, rgba(200, 214, 255, 0.55), transparent),
    radial-gradient(closest-side, rgba(153, 69, 255, 0.65), transparent),
    radial-gradient(closest-side, rgba(235, 240, 255, 0.45), transparent),
    radial-gradient(closest-side, rgba(233, 53, 193, 0.4), transparent),
    radial-gradient(closest-side, rgba(200, 214, 255, 0.6), transparent),
    radial-gradient(closest-side, rgba(255, 208, 158, 0.35), transparent),
    radial-gradient(closest-side, rgba(235, 240, 255, 0.6), transparent),
    radial-gradient(closest-side, rgba(153, 69, 255, 0.45), transparent);
  background-repeat: no-repeat;
  background-size:
    34% 7px, 46% 5px, 40% 8px, 52% 4px, 30% 6px,
    44% 5px, 38% 7px, 28% 4px, 48% 6px;
  background-position:
    14% 16%, 74% 26%, 32% 38%, 62% 50%, 10% 60%,
    82% 70%, 26% 82%, 55% 90%, 44% 8%;
  filter: blur(1.8px) saturate(1.25);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
  opacity: 0;
  transform: scaleX(0.08);
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: no-preference) {
  .ad-banner.washing::before {
    animation: ad-warp 1.15s cubic-bezier(0.5, 0, 0.65, 1) forwards;
  }
  .ad-banner.washing .ad-body,
  .ad-banner.washing .ad-tag {
    animation: ad-depart 0.5s cubic-bezier(0.5, 0, 0.75, 0.6) forwards;
  }
}
@keyframes ad-warp {
  0%   { opacity: 0;    transform: scaleX(0.08); }
  20%  { opacity: 0.9;  transform: scaleX(0.8); }
  55%  { opacity: 0.95; transform: scaleX(2); }
  85%  { opacity: 0.35; transform: scaleX(3); }
  100% { opacity: 0;    transform: scaleX(3.5); }
}
@keyframes ad-depart {
  to { opacity: 0; transform: scaleX(1.35) translateX(9%); filter: blur(8px) brightness(1.12); }
}

.ad-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.055) 50%, transparent 58%);
  transform: translateX(-120%);
  animation: ad-sheen 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ad-sheen {
  0%, 55% { transform: translateX(-120%); }
  85%, 100% { transform: translateX(120%); }
}
.ad-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, var(--ad-accent), var(--ad-gold));
  transform-origin: left;
  transform: scaleX(0);
  animation: ad-progress var(--ad-dwell, 18s) linear forwards;
  opacity: 0.85;
}
@keyframes ad-progress { to { transform: scaleX(1); } }
.ad-live {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ad-gold);
  margin-right: 0.4rem;
  vertical-align: 1px;
  animation: ad-live 1.8s ease-in-out infinite;
}
@keyframes ad-live {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px var(--ad-gold); }
  50% { opacity: 0.35; box-shadow: none; }
}
.ad-banner.ad-inline {
  position: relative;
  top: 0;
  z-index: 1;
  box-shadow: 0 18px 45px -12px rgba(0, 0, 0, 0.7);
  border-radius: 14px;
}
.ad-tag {
  font: 700 0.62rem var(--ad-mono);
  letter-spacing: 0.14em;
  color: var(--ad-gold);
  border: 1px solid color-mix(in srgb, var(--ad-gold) 40%, transparent);
  border-radius: 6px;
  padding: 0.18rem 0.5rem;
  flex: 0 0 auto;
}
.ad-body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--ad-text);
  text-decoration: none;
  min-width: 0;
  flex: 1;
  animation: ad-in 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  transition: transform 0.2s;
}
.ad-body:hover { transform: scale(1.02); }
.ad-body:hover .ad-name { color: var(--ad-primary); }
.ad-logo {
  font-size: 2.4rem;
  line-height: 1;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.15));
}
.ad-logo-img {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 15px;
  object-fit: cover;
  background: #0f1118;
  border: 1px solid color-mix(in srgb, var(--ad-accent) 55%, transparent);
  box-shadow: 0 6px 18px -4px rgba(0, 0, 0, 0.7), 0 0 22px -4px color-mix(in srgb, var(--ad-accent) 45%, transparent);
}
.ad-text { min-width: 0; text-align: left; line-height: 1.25; }
.ad-name { font-weight: 700; font-size: 1rem; color: var(--ad-text); }
.ad-ticker { font-family: var(--ad-mono); font-size: 0.85rem; margin-left: 0.4rem; }
.ad-tagline {
  display: block;
  color: var(--ad-text-dim);
  font-size: 0.88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ad-cta {
  flex: 0 0 auto;
  color: var(--ad-primary);
  text-decoration: none;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  border: 1px solid var(--ad-primary-dim);
  border-radius: 999px;
  padding: 0.4rem 1rem;
  transition: all 0.2s;
}
.ad-cta:hover { background: var(--ad-primary-dim); }
@keyframes ad-in {
  0% { opacity: 0; transform: scaleX(1.3) translateX(-6%); filter: blur(8px) brightness(1.2); }
  60% { opacity: 1; transform: scaleX(1.02); filter: blur(0.5px) brightness(1.05); }
  100% { opacity: 1; transform: none; filter: none; }
}

/* The chat page owns the viewport and lets only its message feed flex. */
.chat-page .ad-banner {
  position: relative;
  top: auto;
  z-index: 2;
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  .ad-banner { gap: 0.45rem; padding: 0.32rem 0.55rem; min-height: 52px; }
  .ad-tag { display: none; }
  .ad-cta { font-size: 0.68rem; padding: 0.3rem 0.55rem; }
  .ad-logo { font-size: 2rem; }
  .ad-logo-img { width: 32px; height: 32px; border-radius: 10px; }
  .ad-name { font-size: 0.9rem; }
  .ad-ticker { font-size: 0.72rem; }
  .ad-tagline { font-size: 0.72rem; }
}