/* His medallion's start cue and its life (medallion-life.js; Chris, 24 Oct). Its own file: panel.css is near its ceiling. */

/* Nothing under his coin in Your sessions (Chris, 1 Nov: "remove the cross and dot left and right under my coin"): the engraved plus
   is no longer drawn (mine.js startMedallion), and the dot that said whether sessions go is not shown. A tap on the coin still starts one. */
#detail-pic.starts .m-dot { display: none; }

/* The round start bubble in the window's corner (mine.js startBubble) as the same coin: a dark face, a ring of the rim's
   metal, the plus engraved in it. */
.mine-bubble {
  background: radial-gradient(circle at 50% 42%, var(--panel-2, #2a2622), var(--panel, #1c1916));
  color: var(--studio); border: 2px solid var(--studio); font-weight: 600; font-size: 26px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.22), 0 -1px 0 rgba(0, 0, 0, 0.55);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 0 0 3px rgba(0, 0, 0, 0.25);
  transition: color 0.2s ease-out, border-color 0.2s ease-out;
}
.mine-bubble:hover, .mine-bubble:focus-visible { color: var(--gold); border-color: var(--gold); }

/* The hand waits below the rim, out of the coin. */
#detail-pic .ml-hand { transform-box: fill-box; transform-origin: 50% 100%; transform: translate(0, 22px); }
#detail-pic .ml-surge { fill: none; stroke: #fff6e0; stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 0.28 1; stroke-dashoffset: 1.28; opacity: 0; }
/* The light that runs from the spark to Claude's mark (one element per run, made and taken away by the script). */
.ml-run {
  position: fixed; left: 0; top: 0; z-index: 30; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  pointer-events: none; background: #fff6e0; box-shadow: 0 0 8px 3px rgba(229, 175, 79, 0.75);
}

@media (prefers-reduced-motion: no-preference) {
  #detail-pic .o-eyes { transform-box: fill-box; transform-origin: 50% 55%; }
  #detail-pic.ml-blink .o-eyes { animation: ml-blink 0.26s ease-in-out; }
  #detail-pic.ml-look .v-iris { animation: ml-look 1.4s ease-in-out; }
  #detail-pic.ml-wave .ml-hand { animation: ml-wave 1.7s ease-in-out; }
  /* What is inside the rim turns, never the coin: the rim and its meander stay still. */
  #detail-pic svg.o-portrait > g[clip-path] { transform-box: view-box; transform-origin: 50% 50%; }
  #detail-pic.ml-turn svg.o-portrait > g[clip-path] { animation: ml-turn 0.9s ease-in-out; }
  #detail-pic.ml-surge-on .ml-surge { animation: ml-surge 0.9s ease-out; }
  #detail-pic.ml-surge-on .v-field { animation: ml-spark-flare 0.9s ease-out; }
  /* The spark keeps the session's beat: opacity alone, on a few pixels. */
  #detail-pic[data-claude='working'] .v-field { animation: ml-spark-pulse 1.6s ease-in-out infinite; }
  #detail-pic[data-claude='waits'] .v-field { animation: ml-spark-breathe 3.2s ease-in-out infinite; }
  #detail-body .chat-face.ml-flare { animation: ml-flare 0.7s ease-out; }
}

@keyframes ml-blink { 0%, 100% { transform: none; } 45%, 60% { transform: scaleY(0.1); } }
/* In the coin's mirrored drawing a step to -x is towards the front of his face: he glances out, then back. */
@keyframes ml-look { 0%, 100% { transform: none; } 25%, 70% { transform: translate(-0.14px, 0.04px); } }
@keyframes ml-wave {
  0% { transform: translate(0, 22px); }
  22% { transform: translate(0, 0) rotate(0deg); }
  36% { transform: translate(0, 0) rotate(-14deg); }
  50% { transform: translate(0, 0) rotate(12deg); }
  64% { transform: translate(0, 0) rotate(-10deg); }
  78% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(0, 22px); }
}
@keyframes ml-turn { 0%, 100% { transform: none; } 40%, 65% { transform: rotate(3deg) translateX(1px); } }
@keyframes ml-surge { 0% { stroke-dashoffset: 1.28; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes ml-spark-flare { 0%, 100% { opacity: 1; } 55% { opacity: 0.35; } 80% { opacity: 1; } }
@keyframes ml-spark-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes ml-spark-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
@keyframes ml-flare { 0% { filter: none; } 35% { filter: drop-shadow(0 0 4px rgba(255, 246, 224, 0.95)) brightness(1.5); } 100% { filter: none; } }