/* =====================================================================
   Tuck Me In — parent dashboard · Rainbow AI visual language (spec §13)
   Palette (loop order): #FF3B30 #FF9500 #FFCC00 #34C759 #00C7BE #007AFF #AF52DE
   One full colour cycle ≈ 6 s, linear, infinite. Rings: 4 s / rev.
   Paused while the tab is hidden (html.rb-paused, set by rainbow.js);
   static under prefers-reduced-motion.
   ===================================================================== */

:root {
  --rb-stops: #FF3B30, #FF9500, #FFCC00, #34C759, #00C7BE, #007AFF, #AF52DE;
  /* Palette twice so a 200%-wide background slides seamlessly. */
  --rb-linear: linear-gradient(90deg, #FF3B30, #FF9500, #FFCC00, #34C759, #00C7BE, #007AFF, #AF52DE,
                                       #FF3B30, #FF9500, #FFCC00, #34C759, #00C7BE, #007AFF, #AF52DE, #FF3B30);
  --rb-conic: conic-gradient(from 0deg, #FF3B30, #FF9500, #FFCC00, #34C759, #00C7BE, #007AFF, #AF52DE, #FF3B30);
}

@keyframes rb-travel { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes rb-spin { to { transform: rotate(360deg); } }
@keyframes rb-draw-on { to { stroke-dashoffset: 0; } }
@keyframes rb-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rb-fade-out { to { opacity: 0; } }
@keyframes rb-march { to { stroke-dashoffset: -28; } }
@keyframes rb-shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
/* sparkle: draws in over the first ~10% of an 8 s loop, holds, fades, redraws */
@keyframes rb-sparkle {
  0% { stroke-dashoffset: 1; opacity: 1; }
  10% { stroke-dashoffset: 0; opacity: 1; }
  85% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes rb-pop {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.06); opacity: 1; }
  80% { transform: scale(0.98); }
  100% { transform: scale(1); opacity: 1; }
}

/* ---------- primary CTA: solid assistant accent ----------
   (The travelling rainbow fill + glow was too intense on the parent's
   web portal; rainbow stays on the ring, wordmark, powder, outlines and
   progress.) --ai-accent is set from /v1/parent/assistant by qc-core. */
button.rb-cta, .btn.rb-cta {
  background: var(--ai-accent, #7C4DFF);
  border: 1.3px solid var(--ai-accent, #7C4DFF);
  color: #fff;
  font-weight: 700;
  box-shadow: none;
  text-shadow: none;
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
}
button.rb-cta:hover, .btn.rb-cta:hover {
  background: color-mix(in srgb, var(--ai-accent, #7C4DFF) 82%, #000);
  border-color: color-mix(in srgb, var(--ai-accent, #7C4DFF) 82%, #000);
  transform: translateY(-1px);
}
button.rb-cta:active, .btn.rb-cta:active { transform: scale(0.96); }
button.rb-cta:disabled, .btn.rb-cta:disabled {
  background: #B9BCC6; border-color: #B9BCC6; color: #fff; opacity: 1; transform: none; cursor: not-allowed;
}
.rb-cta .rb-icon { width: 16px; height: 16px; stroke: #fff; }

/* ---------- line-draw icons ---------- */
.rb-icon { width: 20px; height: 20px; fill: none; stroke: url(#rb-grad-d); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; overflow: visible; }
.rb-draw path, .rb-draw circle, .rb-draw rect { stroke-dasharray: 1; stroke-dashoffset: 1; animation: rb-draw-on 600ms ease-out forwards; }
.rb-draw path:nth-child(2) { animation-delay: 120ms; }
.rb-draw path:nth-child(3) { animation-delay: 220ms; }
.rb-draw path:nth-child(4) { animation-delay: 320ms; }
.rb-draw path:nth-child(5) { animation-delay: 420ms; }
.rb-icon.is-ok { stroke: #34C759; }
.rb-icon.is-bad { stroke: #9AA0AE; }
.rb-icon.is-xl { width: 64px; height: 64px; stroke-width: 1.6; }

/* tile outline that draws itself around a selected option (300 ms) */
svg.rb-outline { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
svg.rb-outline rect { fill: none; stroke: url(#rb-grad); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; animation: rb-draw-on 300ms ease-out forwards; }

/* ---------- Rainbow AI avatar ring ---------- */
.rb-ring { position: relative; display: inline-grid; place-items: center; flex: none; border-radius: 50%; }
.rb-ring > .qc-ava { box-shadow: none; }
.rb-ring::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--rb-conic);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  animation: rb-fade-in 250ms 550ms both, rb-spin 4s linear 550ms infinite;
}
.rb-ring-draw { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; animation: rb-fade-out 250ms 650ms forwards; }
.rb-ring-draw circle { fill: none; stroke: url(#rb-grad-d); stroke-width: 3px; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; animation: rb-draw-on 600ms ease-out forwards; }

/* ---------- wordmark + sparkle ---------- */
.ai-title em, .rb-word {
  background: var(--rb-linear);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: rb-shimmer 6s linear infinite;
  font-style: italic;
}
.rb-sparkle { width: 18px; height: 18px; margin-left: 4px; vertical-align: 2px; fill: none; stroke: url(#rb-grad-d); stroke-width: 1.8; stroke-linejoin: round; overflow: visible; }
.rb-sparkle path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: rb-sparkle 8s ease-in-out infinite; }

/* ---------- powder canvas ---------- */
canvas.rb-powder {
  position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none;
  z-index: 1250;                 /* above overlays (1100), below toasts (1300) */
  filter: blur(0.5px);
}

/* bubble revealed out of the powder (80 ms after the puff) */
.ct-msg.rb-pop .ct-msg-row { animation: rb-pop 520ms cubic-bezier(.34, 1.56, .64, 1) 80ms both; transform-origin: 100% 100%; }

/* ---------- composer: marching rainbow ants while focused ---------- */
.ct-compose-field { position: relative; flex: 1; display: flex; }
.ct-compose-field textarea { flex: 1; }
.ct-compose-field:focus-within textarea { border-color: transparent; }
svg.rb-ants { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 160ms ease; overflow: visible; }
svg.rb-ants rect { fill: none; stroke: url(#rb-grad); stroke-width: 2; stroke-dasharray: 8 6; animation: rb-march 1.5s linear infinite; }
.ct-compose-field:focus-within svg.rb-ants { opacity: 1; }

/* ---------- Try it: rainbow step bar, option feedback, end screen ---------- */
.rb-progress { height: 6px; border-radius: 99px; background: var(--paper-deep); overflow: hidden; margin: 6px 0 10px; }
.rb-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--rb-linear); background-size: 200% 100%; animation: rb-travel 6s linear infinite; transition: width 300ms ease; }
button.qz-pv-opt { position: relative; }
button.qz-pv-opt.is-picked { border-color: transparent; background: var(--paper-2); color: var(--ink); }
button.qz-pv-opt .rb-icon { margin-left: auto; }
.qz-pv-trophy { display: flex; justify-content: center; margin: 6px 0 2px; }
.rb-video { position: relative; }
.rb-play {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  background: rgba(11, 18, 40, 0.25); border-radius: 12px; transition: opacity 200ms ease;
}
.rb-play .rb-icon { width: 56px; height: 56px; stroke-width: 1.6; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4)); }
.rb-video.is-playing .rb-play { opacity: 0; }

/* ---------- pause / reduced motion ---------- */
html.rb-paused .rb-ring::before, html.rb-paused .rb-ring-draw,
html.rb-paused .rb-ring-draw circle, html.rb-paused .ai-title em, html.rb-paused .rb-word,
html.rb-paused .rb-sparkle path, html.rb-paused svg.rb-ants rect, html.rb-paused .rb-progress > span,
html.rb-paused .rb-draw path, html.rb-paused .rb-draw circle {
  animation-play-state: paused !important;
}
@media (prefers-reduced-motion: reduce) {
  .ai-title em, .rb-word, .rb-progress > span, svg.rb-ants rect { animation: none !important; }
  .rb-ring::before { animation: none !important; opacity: 1; }
  .rb-ring-draw { display: none; }
  .rb-draw path, .rb-draw circle, .rb-draw rect, svg.rb-outline rect, .rb-sparkle path {
    animation: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important;
  }
  .ct-msg.rb-pop .ct-msg-row { animation: none !important; }
}