/* Chat bubble: the app's cream tour bubble (build_app.py .tmsg) with the DreamBug firefly
   sitting at its tail. Used for "the firefly explains" callouts, FAQ answers and, through
   coach.css, the guided tour. Colours are fixed (cream, gold edge, navy ink) on any ground,
   exactly as the app fixes them so a light world can never turn the words pale.

   <div class="db-bubble [db-bubble--right] [db-bubble--top] [db-bubble--lg]">
     <img class="db-bubble__mascot" src="assets/brand/mascot-512.png" alt="">
     <div class="db-bubble__msg"><p class="db-bubble__title">..</p><p class="db-bubble__text">..</p></div>
   </div>
   Typing: put <span class="db-bubble__dots" role="img" aria-label="The firefly is typing"><i></i><i></i><i></i></span>
   inside __msg instead of text. */
.db-bubble{--bug:58px;--tail-y:13px;position:relative;display:flex;align-items:flex-end;gap:4px;max-width:34rem;
  font-family:var(--db-font);color:var(--db-ink-light)}
.db-bubble--right{flex-direction:row-reverse;margin-left:auto}
.db-bubble--top{align-items:flex-start}
.db-bubble--lg{--bug:84px}
.db-bubble__mascot{width:var(--bug);height:auto;flex:none;margin:0 0 -6px;
  filter:drop-shadow(0 6px 10px rgba(4,6,20,.5));transform-origin:50% 90%}
.db-bubble--top .db-bubble__mascot{margin:-6px 0 0}

.db-bubble__msg{position:relative;flex:1;min-width:0;background:var(--db-cream);border:1.5px solid var(--db-gold);
  border-radius:var(--db-r-lg);padding:.7rem 1rem .75rem;box-shadow:0 18px 40px rgba(4,6,20,.45),0 2px 6px rgba(4,6,20,.25);
  color:var(--db-ink-light);text-align:left}
/* the tail: a gold triangle (::before) under a cream one (::after), so the gold edge wraps it */
.db-bubble__msg::before,.db-bubble__msg::after{content:"";position:absolute;pointer-events:none}
.db-bubble__msg::before{bottom:calc(var(--tail-y) - 2px);left:-13.5px;width:15.5px;height:19px;background:var(--db-gold);
  clip-path:polygon(100% 0,100% 100%,0 100%)}
.db-bubble__msg::after{bottom:var(--tail-y);left:-11px;width:13px;height:16px;background:var(--db-cream);
  clip-path:polygon(100% 0,100% 100%,0 100%)}
.db-bubble--right .db-bubble__msg::before{left:auto;right:-13.5px;clip-path:polygon(0 0,100% 100%,0 100%)}
.db-bubble--right .db-bubble__msg::after{left:auto;right:-11px;clip-path:polygon(0 0,100% 100%,0 100%)}
.db-bubble--top .db-bubble__msg::before{bottom:auto;top:calc(var(--tail-y) - 2px);clip-path:polygon(100% 0,100% 100%,0 0)}
.db-bubble--top .db-bubble__msg::after{bottom:auto;top:var(--tail-y);clip-path:polygon(100% 0,100% 100%,0 0)}
.db-bubble--top.db-bubble--right .db-bubble__msg::before,
.db-bubble--top.db-bubble--right .db-bubble__msg::after{clip-path:polygon(0 0,100% 0,0 100%)}

.db-bubble__title{margin:0;font-size:1.125rem;font-weight:700;line-height:1.2;color:var(--db-ink-light)}
.db-bubble__text{margin:.25rem 0 0;font-size:.95rem;line-height:1.42;color:var(--db-muted-light)}
.db-bubble__text:first-child{margin-top:0}
.db-bubble__msg a{color:var(--db-gold-ink);font-weight:700}
.db-bubble__msg :focus-visible{outline-color:var(--db-ink-light)}
.db-bubble--lg .db-bubble__title{font-size:1.35rem}
.db-bubble--lg .db-bubble__text{font-size:1.02rem}

/* typing dots: the firefly is thinking */
.db-bubble__dots{display:inline-flex;gap:6px;align-items:center;height:1.6rem;padding:0 .2rem}
.db-bubble__dots i{width:8px;height:8px;border-radius:50%;background:var(--db-muted-light);opacity:.45;
  animation:db-bubble-dot calc(var(--m-dur-slow) * 2.5) var(--m-ease) infinite}
.db-bubble__dots i:nth-child(2){animation-delay:var(--m-dur-fast)}
.db-bubble__dots i:nth-child(3){animation-delay:calc(var(--m-dur-fast) * 2)}
@keyframes db-bubble-dot{0%,60%,100%{transform:none;opacity:.4}30%{transform:translateY(-5px);opacity:1;background:var(--db-gold-2)}}

/* gentle idle float for the firefly (opt in) */
.db-bubble--float .db-bubble__mascot{animation:db-bubble-float calc(var(--m-dur-slow) * 9) ease-in-out infinite}
@keyframes db-bubble-float{0%,100%{transform:none}50%{transform:translateY(-4px) rotate(-3deg)}}

@media (prefers-reduced-motion:reduce){
  .db-bubble__dots i,.db-bubble--float .db-bubble__mascot{animation:none}
  .db-bubble__dots i:nth-child(2){opacity:.7}
}