/* ============= Brand tokens (per-flyer via JS) ============= */
:root{
  --brand: #ff8a00;
  --accent: #ffc422;
  --text: #757575;
  --bg: #fff;
  --wa: #25d366;          /* WhatsApp brand green */

  --logo-height: 42px;    /* header logo height */

  /* core sizes (desktop/tablet defaults) */
  --main-size: min(368px, 44vmin);     /* big round play/pause */
  --side-size: 64px;      /* prev/next tap target */
  --side-icon: 56px;      /* prev/next glyph */
  --share-size: 72px;     /* text+icon share pills */
  --share-pill: 68px;     /* icon-only share pill diameter */
  --share-icon: 32px;     /* icon-only glyph size */

  --nudge-count: 5;       /* number of pulses */
  --nudge-dur: 1.1s;      /* pulse length */
}

/* ============= Layout ============= */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  background:var(--bg);
  color:#111;
  font:16px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

.flyer{
  max-width: 480px;
  margin: 0 auto;
  padding: 24px 20px 40px;
  text-align: center;
}

/* ============= Brand header ============= */
.brand{ margin: 12px 0 32px; }
#brand-logo{
  height: var(--logo-height);
  width: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}

/* Collapse the brand header when we’re in no-logo mode */
.no-brand .flyer .brand { display: none; }

/* Safety: hide an image that has no src at all */
.flyer #brand-logo[src=""],
.flyer #brand-logo:not([src]){ display: none; }


/* Bigger Play when there is no logo, on all viewports */
html.no-brand{ --main-size: 250px; }          /* default was 184px */

/* Pull timeline up a bit when there is no logo */
html.no-brand .timeline{ margin: 4px 0 12px; }/* base is 6px 0 28px */

/* ============= Timeline ============= */
.timeline{
  display:flex;
  align-items:center;
  gap:16px;
  justify-content:center;
  margin: 6px 0 28px;
}
.timeline .time{
  color: var(--text);
  font-size: 14px;
  width: 60px;
}

/* native <progress> colors */
progress.amplitude-song-played-progress{
  -webkit-appearance:none;
  appearance:none;
  height: 14px;
  border-radius: 9px;
  width: 100%;
  max-width: 380px;
  border:0;
  background:#f2f2f2;
  overflow:hidden;
}
progress[value]::-webkit-progress-bar{ background:#f3f3f3 }
progress[value]::-webkit-progress-value{ background:var(--accent) }
progress[value]::-moz-progress-bar{ background:var(--accent) }

/* ============= Controls ============= */
.controls{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap: 28px;
  margin: 10px 0 40px;
}

.ctrl{
  appearance:none;border:0;background:transparent;cursor:pointer;padding:0;
  color: var(--brand);
  width: var(--side-size);
  height: var(--side-size);
  display:grid;place-items:center;
}
.ctrl svg{ width: var(--side-icon); height: var(--side-icon); }

.ctrl--main{
  width: var(--main-size);
  height: var(--main-size);
  border-radius: 50%;
  display:grid; place-items:center; position:relative;
}
.ctrl--main .icon{ position:absolute; inset:0; width:100%; height:100%; display:none }
.ctrl--main .btn-bg{ fill: var(--brand) }

/* Toggle which icon shows (Amplitude adds these classes) */
.amplitude-paused  .icon--play  { display:block }
.amplitude-playing .icon--pause { display:block }

/* small phones (very narrow): taper the main button a bit */
@media (max-width:360px){
  :root{ --main-size: 180px; --side-size: 44px; --side-icon: 36px; }
}

/* ============= Meta ============= */
.meta{ margin: 40px 0 6px }
#track-title{
  font-size: 16px; font-weight:600; margin:0; color:#333;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ============= Share ============= */
.share-row{
  display:flex; gap:14px; align-items:center; justify-content:center;
  margin-top: 12px;
}

.btn-wa{
  display:flex; align-items:center; gap:8px;
  border:0; cursor:pointer; padding:10px 14px; border-radius:999px;
  color:#fff; background:var(--wa);
  font-weight:600; font-size:16px;
  box-shadow: 0 4px 10px rgba(37,211,102,.25);
}
.btn-wa svg{ width:22px; height:22px }

.share-btn{
  display:flex; align-items:center; gap:8px;
  color: var(--brand);
  border:2px solid currentColor; background:transparent; cursor:pointer;
  padding:10px 14px; border-radius:999px; font-weight:600; font-size:16px;
}
.share-btn svg{ width:22px; height:22px }

.share-row--icons{
  display:flex; gap:16px; justify-content:center; align-items:center;
  margin-top: 14px;
}

.pill{
  width: var(--share-pill);
  height: var(--share-pill);
  border-radius: 50%;
  position: relative; 
  display:grid; place-items:center;
  border:none; cursor:pointer; outline: none;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  transition: transform .08s ease, box-shadow .2s ease;
}
.pill:active{ transform: scale(.96); }
.pill svg{ width: var(--share-icon); height: var(--share-icon); }

.pill--wa{ background: var(--wa); }
.pill--more{
  background: #fff;
  border: 2px solid var(--brand);
  color: var(--brand);
}

/* share “nudge” animation */
.pill--wa.nudge{
  animation: nudge-pop var(--nudge-dur) ease-in-out 0s var(--nudge-count);
  box-shadow: 0 8px 18px rgba(37,211,102,.28);
}
.pill--wa.nudge::after{
  content:'';
  position:absolute; inset:-8px;
  border:3px solid var(--wa); border-radius:50%;
  opacity:0; pointer-events:none;
  animation: nudge-ring var(--nudge-dur) ease-out 0s var(--nudge-count);
}
@keyframes nudge-pop{
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.07); }
}
@keyframes nudge-ring{
  0%   { transform: scale(.85); opacity:.50; }
  100% { transform: scale(1.25); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .pill--wa.nudge,
  .pill--wa.nudge::after{ animation: none !important; }
}

/* bigger on tablets */
@media (min-width:768px){
  :root{ --share-pill: 76px; --share-icon: 36px; }
}

/* stack on very small screens if needed */
@media (max-width:360px){
  .share-row{ flex-direction:column; gap:10px }
}

/* Small screens */
@media (max-width:360px){
  .ctrl--main{ width:140px;height:140px }
  #track-title{ font-size:16px }
}

/* Large phone / small tablet */
@media (min-width:480px){
  .timeline{ gap:20px }
}

/* ============= AUMA container ============= */

/* hide via either [hidden] or .hidden */
#auma[hidden], #auma.hidden { display: none; }

/* square container (responsive, cropped) */
#auma{
  position: relative;
  width: 100%;
  max-width: min(720px, 92vw);
  aspect-ratio: 1 / 1;
  margin: 12px auto 10px;
  border-radius: 10px;
  overflow: hidden;
  background: #f5f5f5;
  padding: 0; /* ensure no stray padding affects sizing */
}

/* the image: always fill the square and crop */
#auma > img,
#auma #auma-image,
#auma #auma-img{
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  opacity: 0;                 /* fade-in on load */
  transition: opacity .35s ease;
}

/* when JS sets .ready after onload */
#auma > img.ready,
#auma #auma-image.ready,
#auma #auma-img.ready{ opacity: 1; }

/* AUMA image should feel tappable */
.has-auma #auma{
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* optional: tiny press feedback (very subtle) */
.has-auma #auma:active{
  transform: scale(0.995);
}

/* AUMA should feel tappable */
#auma,
#auma #auma-image,
#auma img{
  cursor: pointer;
  touch-action: manipulation;
}

/* ============= Phone layout tweaks (only when AUMA image is present) ============= */
@media (max-width: 480px){

  /* mobile layout variables */
  :root{
    --play-size: clamp(88px, 20svw, 110px);  /* default play size on phones */
    --auma-box:  min(88vw, 46svh);           /* image box height on phones */
  }
  /* no-logo state: bigger Play, slightly smaller image box */
  .no-brand{
    --play-size: clamp(148px, 30svw, 196px);
    --auma-box:  min(88vw, 44svh);
  }
  
  
  /* Bigger Play in no-logo state */
  .no-brand .has-auma .ctrl--main,
  .no-brand .has-auma #playpause,
  .no-brand .has-auma #play-pause{
    width: clamp(124px, 26svw, 156px);
    height: clamp(124px, 26svw, 156px);
    margin-inline: auto;
  }
  
  /* Shrink the image box slightly to keep WhatsApp/Share visible */
  .no-brand .has-auma #auma{
    --auma-box: min(88vw, 42svh);                /* was ~46–44svh */
    width: var(--auma-box);
    height: var(--auma-box);
    margin: 8px auto 8px;
  }

  /* Header logo (presence without pushing layout down) */
  .has-auma #brand-logo img,
  .has-auma img#brand-logo{
    max-height: clamp(32px, 9svh, 60px);
    max-width: min(60vw, 220px);
    height: auto;
  }

  /* Thinner progress + less vertical margin */
  .has-auma .amplitude-song-played-progress{
    height: 6px;
    margin: 4px 0 8px;      /* was 6px 0 10px */
    border-radius: 6px;
  }

  /* Main Play size (covers #playpause/#play-pause variations) */
  .has-auma .ctrl--main,
  .has-auma #playpause,
  .has-auma #play-pause{
    width: var(--play-size);
    height: var(--play-size);
    margin-inline: auto;
  }
  .has-auma #prev,
  .has-auma #next{ transform: scale(1.08); }

  /* AUMA square sized to keep share row in view */
  .has-auma #auma{
    width: var(--auma-box);
    height: var(--auma-box);
    aspect-ratio: auto;     /* explicit h/w keeps it square */
    box-shadow: none !important; 
    margin: 8px auto 8px;   /* was 12px auto 8px */
  }

  /* Share row a bit tighter */
  .has-auma .share-row{
    margin-top: 8px;        /* was 10px */
    gap: 12px;              /* was 14px */
  }

  /* Hide track title on phones for AUMA */
  .has-auma #track-title{ display: none !important; }

  /* Controls: stable 3-column grid (prev | play | next) */
  .has-auma .controls{
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    width: 100%;
  }

  .has-auma #previous,
  .has-auma #prev,
  .has-auma .amplitude-prev{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    justify-self: end;
  }

  .has-auma #next,
  .has-auma .amplitude-next{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    justify-self: start;
  }

  /* One-track flyers: center the main button */
  .single-track #previous,
  .single-track #next,
  .single-track .amplitude-prev,
  .single-track .amplitude-next{ display: none !important; }

  .single-track #play-pause,
  .single-track #playpause,
  .single-track .ctrl--main{
    margin-left: auto;
    margin-right: auto;
  }

  .has-auma.single-track .controls{
    display: grid !important;
    grid-template-columns: 1fr; /* play only */
    justify-items: center;
    align-items: center;
    gap: 0;
  }
}

/* generic .hidden should not reserve space anywhere */
.hidden{ display: none; }

/* -----------------------------------------------------------
   COMPACT LAYOUT (applies when <html class="compact"> … )
   Matches your current HTML/IDs only — no .whats-btn/.nav-btn
   ----------------------------------------------------------- */

/* Make viewport calc more reliable on mobile browsers */
html, body { min-height: 100svh; }

/* ---------- Compact tweaks ---------- */
html.compact #brand-logo img { max-height: 28px; }   /* smaller top logo */
html.compact .progress-wrap { margin-top: 8px; }
html.compact .times { font-size: 12px; }             /* smaller time labels */

html.compact .controls{
  gap: 12px;
  margin: 8px 0 0;
}

/* short phones */
@media (max-height:680px){
  .no-brand{
    --play-size: clamp(136px, 28svw, 176px);
    --auma-box:  min(88vw, 41svh);
  }
}

/* medium phones */
@media (min-height:681px) and (max-height:800px){
  .no-brand{
    --play-size: clamp(148px, 30svw, 188px);
    --auma-box:  min(88vw, 42svh);
  }
}

/* tall phones */
@media (min-height:801px){
  .no-brand{
    --play-size: clamp(160px, 32svw, 200px);
    --auma-box:  min(88vw, 44svh);
  }
}

/* Audio-only keeps a generous play size; AUMA uses the same var so it won't get overridden */
html.compact:not(.has-auma) #playpause{
  width: var(--play-size, 140px);
  height: var(--play-size, 140px);
}
html.compact.has-auma #playpause{
  width: var(--play-size, 120px);
  height: var(--play-size, 120px);
}

/* Single audio flyer: hide side controls and hard-center the play button */
.single-track #prev,
.single-track #previous,
.single-track .amplitude-prev,
.single-track #next,
.single-track .amplitude-next {
  display: none !important;
}

.single-track .controls{
  display: grid !important;
  grid-template-columns: 1fr;   /* only the center cell */
  justify-items: center;        /* center the play button */
  align-items: center;
}

.single-track #play-pause,
.single-track #playpause,       /* safety: if the id ever comes without a hyphen */
.single-track .ctrl--main{
  margin-inline: auto;          /* belt & suspenders centering */
}

/* Nudge prev/next down a notch on very small screens */
html.compact #prev,
html.compact #next{ transform: scale(0.9); }

/* AUMA image: keep room for the sticky share row */
html.compact #auma{ margin-top: 8px; }
html.compact #auma #auma-image,
html.compact #auma #auma-img,
html.compact #auma > img{
  /* Square or rectangular, but don’t let it push share off screen */
  max-height: min(48svh, 420px);
  border-radius: 12px;
}

/* Tighten general vertical rhythm a bit */
html.compact section,
html.compact .auma-card{ margin-block: 8px; }

/* Optional: hide track title when space is tight and AUMA is present */
html.compact.has-auma #track-title{ display: none; }

/* Share buttons (generic — works for either <button> or <a>) */
html.compact #share button,
html.compact #share a{
  width: clamp(52px, 9.5vmin, 64px);
  height: clamp(52px, 9.5vmin, 64px);
  line-height: clamp(52px, 9.5vmin, 64px);
}
/* Default (share) look stays as your current pill styling.
 If your .pill--more already has border etc, you can leave it. */
 
/* Icon switching */
#share-native .icon { display: none; width: 30px; height: 30px; }
#share-native[data-type="native"] .icon--share { display: inline-block; }
#share-native[data-type="url"]    .icon--url   { display: inline-block; }
#share-native[data-type="call"]   .icon--call  { display: inline-block; }

/* CTA look */
#share-native.is-cta {
  background: var(--cta-bg, #ea2264);
  color: #fff;
  border: none;
  box-shadow: 0 0 0 6px rgba(234, 34, 100, 0.22);
}

/* Hide action buttons until first play */
#actions {
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
}

#actions.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* ============= Micro-feedback (Yes/No) ============= */
/* Assumes slot.html contains:
   <div id="feedback" class="feedback" hidden> ... #fb-yes #fb-no ... </div>
*/

.feedback{
  display:flex;
  gap:16px;
  justify-content:center;
  align-items:center;
  margin-top: 0; /* keep aligned with other action pills */
}

/* Use the existing .pill base styling */
.pill--fb{
  background:#fff;
  border:2px solid rgba(0,0,0,.10);
  color:#111;
}

/* Thumbs up: brand colored outline */
.pill--yes{
  border-color: var(--brand);
  color: var(--brand);
}

/* Thumbs down: neutral outline */
.pill--no{
  border-color: #cfcfcf;
  color: #666;
}

/* Optional: subtle highlight after selection */
.pill--fb.is-selected{
  box-shadow: 0 10px 20px rgba(0,0,0,.10);
}

/* Slightly smaller glyph than share icon */
.pill--fb svg{
  width: calc(var(--share-icon) - 4px);
  height: calc(var(--share-icon) - 4px);
}

/* Ensure hidden feedback never renders */
#feedback[hidden] { display: none !important; }

.is-hidden { display: none !important; }
/* =========================================================
   Solid action style (Share + CTA + Feedback)
   ========================================================= */

/* 1) Make the secondary (native share / url / call) button solid by default */
.pill--more{
  background: var(--accent); /* solid fill */
  border: none;
  color: #fff;
}

/* Keep icon visibility consistent */
.pill--more svg{ fill: currentColor; }

/* Optional: subtle outer ring (matches your CTA glow idea but lighter) */
.pill--more{
  box-shadow: 0 0 0 6px rgba(0,0,0,0.06), 0 6px 16px rgba(0,0,0,.08);
}

/* 2) CTA state stays as you already have it - just ensure it wins */
#share-native.is-cta{
  background: var(--cta-bg, #ea2264);
  color: #fff;
  border: none;
}

/* 3) Feedback buttons: solid fills + white icons */
.pill--fb{
  border: none;
  color: #fff;
}

/* Yes: use brand (so you can say "press the yellow button") */
.pill--yes{
  background: var(--brand);
}

/* No: neutral gray (clear contrast, not “alarm red”) */
.pill--no{
  background: #bdbdbd;
}

/* Keep feedback SVG consistent */
.pill--fb svg{ fill: currentColor; }

/* Optional: selection feedback remains (your existing class) */
.pill--fb.is-selected{
  box-shadow: 0 10px 20px rgba(0,0,0,.12);
}

/* =========================================================
   Ambient Feedback (sentiment) - 3 solid buttons
   ========================================================= */

.feedback-question{
  font-weight: 700;
  font-size: 18px;
  margin: 6px 0 14px;
  text-align: center;
}

.feedback-row{
  display: flex;
  justify-content: center;
  gap: 18px;
  margin: 0 auto;
}

.pill--sent{ border: none; color: #fff; }
.pill--good{ background: #39c36b; }     /* green */
.pill--neutral{ background: #ffc422; }  /* yellow (matches your accent) */
.pill--bad{ background: #e14b4b; }      /* red */

.ambient-feedback{
  text-align:center;
  margin-top:18px;
}

.ambient-question{
  font-size:18px;
  font-weight:600;
  margin-bottom:18px;
}

.ambient-options{
  display:flex;
  justify-content:center;
  gap:16px;
}

/* Ambient Feedback - non-literate UI */
.ambient-feedback{
  text-align:center;
  margin-top:18px;
}

.ambient-question{
  font-size:18px;
  font-weight:700;
  margin: 0 0 18px;
}

.ambient-options{
  display:flex;
  justify-content:center;
  gap:18px;
}

.ambient-btn{
  width:86px;
  height:86px;
  border-radius:999px;
  border:none;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

.ambient-btn:active{
  transform: scale(.96);
}

.ambient-btn.good{ background:#39c36b; }
.ambient-btn.neutral{ background:#ffc422; }
.ambient-btn.poor{ background:#e14b4b; }

/* Face icon uses "currentColor" for stroke/fill */
.face-icon{
  width:56px;
  height:56px;
  color:#111; /* black outline like your sample */
}
.ambient-btn:active{
  transform:scale(0.92);
}

/* Ambient Feedback - selection highlight */
.ambient-btn.is-selected{
  transform: scale(0.96);
  box-shadow: 0 0 0 8px rgba(0,0,0,.08), 0 12px 28px rgba(0,0,0,.18);
}

.ambient-btn.is-disabled{
  opacity: 0.55;
}