/* ------------------------------------------------------
   Campfire Park — Bubbles (plugin-owned, no Customizer needed)
   Targets the markup emitted by render_bubble_post():
   <div class="cf-bubble-wrap cf-speaker-STARLING">
     <aside class="cf-bubble cf-starling-bubble"> ... </aside>
     <span class="cf-bubble-speaker-line">— Starling</span>
   </div>
------------------------------------------------------- */

/* Base “paper” look shared across speakers */
.cf-bubble {
  position: relative;
  display: block;
  background: #fffaf3;
  border: 1px solid #f2d4a8;
  padding: .75rem 1rem;
  border-radius: 12px;
  box-shadow: inset 0 0 0 3px rgba(255,140,42,.06);
  font-size: .95rem;
  line-height: 1.45;
}

/* Speaker tints (extend later as you add voices) */
.cf-speaker-starling .cf-bubble  { background:#fffaf3; border-color:#f2d4a8; }
.cf-speaker-buck     .cf-bubble  { background:#fffbe6; border-color:#f2d4a8; }
.cf-speaker-bobby    .cf-bubble  { background:#f7f3ff; border-color:#e0d5ff; }
.cf-speaker-guitar   .cf-bubble  { background:#eef7ff; border-color:#cfe6ff; }
.cf-speaker-dino     .cf-bubble,
.cf-speaker-boogie   .cf-bubble  { background:#f1fff3; border-color:#d1f3d6; }

/* --- Right-aligned layout with speaker name to the right --- */
.cf-bubble-wrap.cf-speaker-starling {
  display: flex;
  justify-content: flex-end;   /* push pair to the right edge */
  align-items: center;         /* vertically center speaker label */
  gap: .5rem;                  /* space between bubble and name */
  margin: 1rem 0;
  float: none;                 /* no prose wrap */
  clear: both;
  text-align: initial;
}

/* Bubble shrinks to fit on the right */
.cf-bubble-wrap.cf-speaker-starling > aside.cf-bubble.cf-starling-bubble {
  display: inline-block;
  max-width: 32rem;
  margin-left: 0;
}

/* Speaker name to the right of bubble */
.cf-bubble-wrap.cf-speaker-starling > .cf-bubble-speaker-line {
  margin: 0;
  white-space: nowrap;
  font-size: .9rem;
  font-style: italic;
  color: #946a3a;
  align-self: center;
}

/* --- Hard reset any old left-tail/left-accent for this bubble --- */
.cf-bubble-wrap.cf-speaker-starling > aside.cf-bubble.cf-starling-bubble::before,
.cf-bubble-wrap.cf-speaker-starling > aside.cf-bubble.cf-starling-bubble::after {
  content: "";
  position: absolute;
  left: auto; top: auto; bottom: auto;
  transform: none;
  background: transparent;
  border: 0;
  width: 0; height: 0;
}

/* --- Rebuild the RIGHT-side tail (outer border + inner fill) --- */
.cf-bubble-wrap.cf-speaker-starling > aside.cf-bubble.cf-starling-bubble::after {
  top: 14px;
  right: -12px;                     /* outer border triangle */
  border-style: solid;
  border-width: 9px 0 9px 12px;     /* points left */
  border-color: transparent transparent transparent #f2d4a8;
}
.cf-bubble-wrap.cf-speaker-starling > aside.cf-bubble.cf-starling-bubble::before {
  top: 15px;
  right: -10px;                     /* inner fill triangle */
  border-style: solid;
  border-width: 8px 0 8px 10px;
  border-color: transparent transparent transparent #fffaf3;
}

/* Links (inside bubbles) */
.cf-bubble a { text-decoration: none; border-bottom: 1px dotted currentColor; }

/* Whisper reveal (optional) */
@keyframes cf-whisper-in {
  from { opacity: 0; transform: translateY(6px); filter: blur(1px); }
  to   { opacity: 1; transform: translateY(0);   filter: blur(0); }
}
.cf-whisper { opacity: 0; transform: translateY(6px); }
.cf-whisper.is-visible { opacity: 1; animation: cf-whisper-in 480ms ease-out forwards; }
@media (prefers-reduced-motion: reduce) {
  .cf-whisper { opacity: 1; transform: none; animation: none; }
}

/* Mobile: let the pair stack; bubble can go full width if needed */
@media (max-width: 640px) {
  .cf-bubble-wrap.cf-speaker-starling {
    display: block;
    text-align: right;
  }
  .cf-bubble-wrap.cf-speaker-starling > aside.cf-bubble.cf-starling-bubble {
    max-width: 100%;
  }
  .cf-bubble-wrap.cf-speaker-starling > .cf-bubble-speaker-line {
    display: inline-block;
    margin-top: .35rem;
  }
}