/*
 * Header live pill (portal_shell.tmpl header actions, ThemeData.stream).
 * Every declaration below is the resolved form of the source product's header
 * LIVE pill utility string (twdict.py resolve of
 * "px-3 md:px-4 py-1.5 rounded-lg bg-highlight text-black font-black flex
 *  items-center gap-2 shrink-0", "w-1.5 h-1.5 bg-black rounded-full",
 * "text-[10px] md:text-[13px]" and .golden-pulse / @keyframes golden-breath
 * from the production stylesheet), with --highlight -> --portal-accent and
 * --color-black -> --portal-accent-ink.
 *
 * It sits in the header actions row before the account link, exactly where
 * the source product renders it (internal/ui/components/header.templ); the
 * row itself (.portal-header-actions) is portal.css's, as the page frame is.
 */

/* Prod: .px-3.md:px-4.py-1.5.rounded-lg.bg-highlight.text-black.font-black
   .flex.items-center.gap-2.shrink-0 plus the pill's glow
   (shadow-[0_0_20px_rgba(127,255,0,0.4)], the token's own colour here) and
   .golden-pulse's breathing animation. */
.portal-stream-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  padding-inline: 0.75rem;
  padding-block: 0.375rem;
  border-radius: var(--portal-radius);
  background-color: var(--portal-accent);
  color: var(--portal-accent-ink);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 0 20px color-mix(in srgb, var(--portal-accent) 40%, transparent);
  animation: portal-stream-breath 2.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  transition: opacity 0.15s ease;
}

.portal-stream-link:hover { opacity: 0.9; }

/* Prod: .w-1\.5.h-1\.5.bg-black.rounded-full */
.portal-stream-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background-color: var(--portal-accent-ink);
}

/* Prod: .text-\[10px\] with .md\:text-\[13px\] */
.portal-stream-label {
  font-size: 10px;
  letter-spacing: 0.04em;
}

@media (width >= 48rem) {
  .portal-stream-link { padding-inline: 1rem; }
  .portal-stream-label { font-size: 13px; }
}

/* Prod: @keyframes golden-breath{0%{opacity:.4}50%{opacity:1}to{opacity:.4}} */
@keyframes portal-stream-breath {
  0% { opacity: 0.4; }
  50% { opacity: 1; }
  100% { opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-stream-link { animation: none; }
}