/* ── Guide trigger FAB ──────────────────────────────────────────── */
.guide-fab {
  position: fixed;
  bottom: 90px;
  right: 28px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid rgba(0,242,255,0.3);
  cursor: pointer;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 890;
  box-shadow: 0 2px 10px rgba(0,0,0,.5), 0 0 12px rgba(0,242,255,0.1);
  transition: transform .18s, box-shadow .18s;
}
.guide-fab:hover { transform: scale(1.1); box-shadow: 0 4px 16px rgba(0,0,0,.2); }

/* ── Animated demo cursor ───────────────────────────────────────── */
#guideCursor {
  display: none;
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.45));
}

/* ── Click ripple ───────────────────────────────────────────────── */
#guideRippleLayer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
}
.guide-ripple {
  position: absolute;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: rgba(0,242,255,.25);
  animation: g-ripple .55s ease-out forwards;
}
@keyframes g-ripple {
  from { transform: scale(.2); opacity: 1; }
  to   { transform: scale(2.4); opacity: 0; }
}

/* secondary smaller ripple for double-click feel */
.guide-ripple-inner {
  position: absolute;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  background: rgba(0,242,255,.5);
  animation: g-ripple .3s ease-out forwards;
}

/* ── Element highlight glow ─────────────────────────────────────── */
#guideHighlight {
  display: none;
  position: fixed;
  z-index: 9950;
  pointer-events: none;
  border-radius: 4px;
  border: 2px solid rgba(0,242,255,.8);
  box-shadow: 0 0 0 4px rgba(0,242,255,.1), 0 0 20px rgba(0,242,255,.2);
  animation: hl-glow 1.8s ease-in-out infinite;
  transition: all .3s ease;
}
@keyframes hl-glow {
  0%,100% { box-shadow: 0 0 0 4px rgba(0,242,255,.1), 0 0 16px rgba(0,242,255,.15); }
  50%     { box-shadow: 0 0 0 6px rgba(0,242,255,.2), 0 0 28px rgba(0,242,255,.35); }
}

/* ── Narration bar (bottom strip) ───────────────────────────────── */
#guidePanel {
  display: none;
  position: fixed;
  bottom: 20px;
  left: 240px;
  right: 88px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 4px 28px rgba(0,0,0,.16);
  z-index: 9100;
  overflow: hidden;
  animation: gp-in .22s cubic-bezier(.22,1,.36,1);
}
@keyframes gp-in {
  from { transform: translateY(10px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.gp-body {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px 8px;
}

/* Character avatar with sound waves */
.gp-char-wrap { position: relative; flex-shrink: 0; }
.gp-char {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--accent-light);
  border: 1px solid rgba(0,242,255,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
}
.gp-waves {
  position: absolute; inset: -4px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center; gap: 2px;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}
.gp-waves.active { opacity: 1; }
.gp-wave {
  width: 2px; height: 7px;
  background: var(--accent);
  border-radius: 1px;
  animation: gpwave .8s ease-in-out infinite;
}
.gp-wave:nth-child(1){ animation-delay: .00s }
.gp-wave:nth-child(2){ animation-delay: .12s }
.gp-wave:nth-child(3){ animation-delay: .24s }
.gp-wave:nth-child(4){ animation-delay: .12s }
.gp-wave:nth-child(5){ animation-delay: .00s }
@keyframes gpwave { 0%,100%{height:4px} 50%{height:16px} }

.gp-text {
  flex: 1;
  font-size: .855rem;
  line-height: 1.55;
  color: var(--text);
  min-width: 0;
}

/* Dot progress + controls */
.gp-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 9px;
  border-top: 1px solid var(--border);
}
.gp-dots { display: flex; gap: 4px; flex: 1; align-items: center; }
.gp-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--border);
  transition: background .2s, width .2s;
}
.gp-dot.done    { background: #c6f6d5; }
.gp-dot.active  { background: var(--accent); width: 14px; border-radius: 3px; }

.gp-btn {
  padding: 5px 11px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  font-size: .8rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  transition: background .12s;
  flex-shrink: 0;
}
.gp-btn:hover:not(:disabled) { background: var(--bg); }
.gp-btn:disabled { opacity: .4; cursor: not-allowed; }

/* Pause (secondary) */
.gp-btn-pause {
  color: var(--accent);
  border-color: rgba(0,242,255,.3);
  background: var(--accent-light);
  font-weight: 600;
  min-width: 90px;
}
.gp-btn-pause:hover:not(:disabled) { background: rgba(0,242,255,.14); }

/* Resume (primary — stands out when paused) */
.gp-btn-resume {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 600;
  min-width: 90px;
}
.gp-btn-resume:hover:not(:disabled) { background: var(--accent-hover); }

.gp-btn-mute { color: var(--text-muted); min-width: 28px; text-align: center; padding: 5px 7px; }