/* Describe Image Coach: opt-in guided tour pinned onto the picture (public/di-coach.js).
   Motion uses transform/opacity plus the spotlight's box; one ease everywhere. */
#mode-describe-image {
  --coach-glass: rgba(10, 18, 34, .86);
  --coach-bar: #0b1424;
  --coach-gold: #fbbf24;
  --coach-gold-ink: #422006;
  --coach-ok: #22c55e;
  --coach-warn: #f59e0b;
  --coach-ease: cubic-bezier(.2, .8, .2, 1);
}

#mode-describe-image .di-coach-host { position: relative; }

/* While the coach is open on the practice stage the picture gives up enough height for the
   coach bar, so the bar stays above the bottom action bar. Closed, the picture is full size. */
#mode-describe-image.di-pte-v3 #di-pte-stage .di-coach-host img { transition: max-height .5s var(--coach-ease); }
#mode-describe-image.di-pte-v3 #di-pte-stage .di-coach-host.is-coach-open img { max-height: min(calc(58vh - 175px), 420px); }

/* ---- Coach button (top-left of the picture; zoom stays top-right) ---- */
#mode-describe-image .di-coach-btn {
  position: absolute; top: 18px; left: 18px; z-index: 3;
  display: flex; align-items: center; gap: 8px;
  border: 0; cursor: pointer; font: 600 14px/1 inherit; font-family: inherit;
  padding: 9px 14px 9px 9px; border-radius: 999px; color: #fff; background: var(--coach-glass);
  box-shadow: 0 6px 20px rgba(2, 8, 20, .25);
  transition: transform .25s var(--coach-ease), background .25s, color .25s;
}
#mode-describe-image .di-coach-btn:hover { transform: translateY(-1px); }
#mode-describe-image .di-coach-btn:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
#mode-describe-image .di-coach-btn__ic {
  width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #60a5fa, #a78bfa); color: #fff;
}
#mode-describe-image .di-coach-btn__ic svg { width: 14px; height: 14px; }
#mode-describe-image .di-coach-btn.is-on { background: #fff; color: #0f172a; }
#mode-describe-image .di-coach-btn:not(.is-on) .di-coach-btn__ic { animation: di-coach-invite 2.4s ease-in-out 1s 2; }
@keyframes di-coach-invite {
  0%, 100% { box-shadow: 0 0 0 0 rgba(96, 165, 250, 0); }
  50% { box-shadow: 0 0 0 8px rgba(96, 165, 250, .35); }
}
#mode-describe-image .di-image-container[data-image-state]:not([data-image-state="ready"]) .di-coach-btn { display: none; }

/* ---- Overlay: sized by JS to the painted picture ---- */
#mode-describe-image .di-coach-ov {
  position: absolute; z-index: 1; overflow: hidden; border-radius: 8px;
  pointer-events: none; visibility: hidden;
}
#mode-describe-image .di-coach-ov.is-on { pointer-events: auto; visibility: visible; cursor: default; }
#mode-describe-image .di-coach-spot {
  position: absolute; border-radius: 16px; opacity: 0;
  box-shadow: 0 0 0 2400px rgba(2, 8, 20, 0);
  transition: left .6s var(--coach-ease), top .6s var(--coach-ease), width .6s var(--coach-ease),
    height .6s var(--coach-ease), box-shadow .5s var(--coach-ease), opacity .3s;
}
#mode-describe-image .di-coach-ov.is-on .di-coach-spot { opacity: 1; box-shadow: 0 0 0 2400px rgba(2, 8, 20, .58); }
#mode-describe-image .di-coach-spot::after {
  content: ""; position: absolute; inset: -3px; border-radius: 18px; border: 2px solid rgba(251, 191, 36, .9);
  transition: opacity .3s;
}
#mode-describe-image .di-coach-ov.is-free .di-coach-spot { box-shadow: 0 0 0 2400px rgba(2, 8, 20, .18); }
#mode-describe-image .di-coach-ov.is-free .di-coach-spot::after { opacity: 0; }

#mode-describe-image .di-coach-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#mode-describe-image .di-coach-lines path {
  fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .95;
  transition: stroke-dashoffset .55s var(--coach-ease), opacity .3s;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6));
}
#mode-describe-image .di-coach-lines path.is-drawn { stroke-dashoffset: 0; }
#mode-describe-image .di-coach-lines path.is-dim { opacity: .18; }
#mode-describe-image .di-coach-ov.is-free .di-coach-lines path.is-dim { opacity: 0; }
/* Recording: one faint line per number keeps each number tied to its object without clutter. */
#mode-describe-image .di-coach-ov.is-recall .di-coach-lines path.is-dim.is-first { opacity: .4; }

#mode-describe-image .di-coach-dot {
  position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--coach-gold); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
  transform: scale(0); transition: transform .35s var(--coach-ease);
}
#mode-describe-image .di-coach-dot.is-in { transform: scale(1); }
#mode-describe-image .di-coach-dot.is-pulse::after {
  content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--coach-gold);
  animation: di-coach-ring 1.4s ease-out infinite;
}
@keyframes di-coach-ring { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }

/* ---- Labels pinned on the picture ---- */
#mode-describe-image .di-coach-tag {
  position: absolute; transform: translate(-50%, -50%) scale(.7); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 7px; white-space: nowrap; cursor: pointer;
  font: 600 14px/1 inherit; font-family: inherit; color: #fff;
  background: var(--coach-glass); border: 1.5px solid rgba(255, 255, 255, .25); border-radius: 999px;
  padding: 6px 12px 6px 6px; box-shadow: 0 6px 18px rgba(2, 8, 20, .35);
  transition: transform .4s var(--coach-ease), opacity .3s, background .25s, border-color .25s, color .25s, padding .3s;
}
#mode-describe-image .di-coach-tag.is-in { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
#mode-describe-image .di-coach-tag.is-act { background: #fff; color: #0f172a; border-color: var(--coach-gold); transform: translate(-50%, -50%) scale(1.08); }
#mode-describe-image .di-coach-tag:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
#mode-describe-image .di-coach-tag__n {
  width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 12px; background: rgba(255, 255, 255, .18);
}
#mode-describe-image .di-coach-tag.is-act .di-coach-tag__n { background: var(--coach-gold); color: var(--coach-gold-ink); }
#mode-describe-image .di-coach-tag__w { max-width: 240px; overflow: hidden; transition: max-width .4s var(--coach-ease), opacity .25s; }
#mode-describe-image .di-coach-ov.is-recall .di-coach-tag:not(:hover):not(:focus-visible) .di-coach-tag__w { max-width: 0; opacity: 0; }
#mode-describe-image .di-coach-ov.is-recall .di-coach-tag:not(:hover):not(:focus-visible) { padding-right: 6px; gap: 0; }
#mode-describe-image .di-coach-tag.is-ok { background: #14532d; border-color: var(--coach-ok); color: #fff; }
#mode-describe-image .di-coach-tag.is-ok .di-coach-tag__n { background: var(--coach-ok); color: #052e16; }
#mode-describe-image .di-coach-tag.is-miss { background: #713f12; border-color: var(--coach-warn); color: #fff; }
#mode-describe-image .di-coach-tag.is-miss .di-coach-tag__n { background: var(--coach-warn); color: #451a03; }
#mode-describe-image .di-coach-tag.is-flip { animation: di-coach-flip .5s var(--coach-ease); }
@keyframes di-coach-flip {
  0% { transform: translate(-50%, -50%) rotateX(0); }
  50% { transform: translate(-50%, -50%) rotateX(90deg); }
  100% { transform: translate(-50%, -50%) rotateX(0); }
}

/* ---- Coach bar: attached under the picture, never covering it ---- */
#mode-describe-image .di-coach-bar {
  color: #fff; background: var(--coach-bar); border-radius: 12px; line-height: 1.5;
  max-height: 0; opacity: 0; overflow: hidden; padding: 0 14px; margin: 0;
  transition: max-height .5s var(--coach-ease), padding .5s var(--coach-ease), opacity .35s, margin .5s var(--coach-ease);
}
#mode-describe-image .di-coach-bar.is-in { max-height: 180px; opacity: 1; padding: 12px 14px 14px; margin: 8px 0 0; }
#mode-describe-image .di-coach-bar__top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
/* Simple / Advanced answer switch: a small segmented control at the start of the bar. */
#mode-describe-image .di-coach-ver {
  display: flex; gap: 2px; padding: 3px; border-radius: 9px; background: rgba(255, 255, 255, .1); flex: 0 0 auto;
}
#mode-describe-image .di-coach-ver button {
  border: 0; background: transparent; color: rgba(255, 255, 255, .75); cursor: pointer;
  font: 600 12px/1 inherit; font-family: inherit; padding: 6px 10px; border-radius: 7px;
  transition: background .25s var(--coach-ease), color .25s;
}
#mode-describe-image .di-coach-ver button:hover { color: #fff; }
#mode-describe-image .di-coach-ver button[aria-checked="true"] { background: #fff; color: #0b1220; }
#mode-describe-image .di-coach-ver button:focus-visible { outline: 2px solid #93c5fd; outline-offset: 1px; }

#mode-describe-image .di-coach-part {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700;
  padding: 3px 9px; border-radius: 999px; color: #0b1220; background: #60a5fa;
  transition: background .3s, color .3s; white-space: nowrap;
}
#mode-describe-image .di-coach-part[data-kind="intro"] { background: #a78bfa; }
#mode-describe-image .di-coach-part[data-kind="conclusion"] { background: #34d399; }
#mode-describe-image .di-coach-part[data-kind="turn"] { background: #fff; }
#mode-describe-image .di-coach-part[data-kind="rec"] { background: #fca5a5; }
#mode-describe-image .di-coach-part[data-kind="check"] { background: #bbf7d0; }
#mode-describe-image .di-coach-track { display: flex; gap: 4px; flex: 1; min-width: 0; }
#mode-describe-image .di-coach-seg {
  flex: 1; height: 14px; padding: 5px 0; border: 0; background: none; cursor: pointer; position: relative;
}
#mode-describe-image .di-coach-seg::before {
  content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .18);
}
#mode-describe-image .di-coach-seg b { position: absolute; left: 0; top: 5px; height: 4px; width: 0; border-radius: 2px; background: #fff; }
#mode-describe-image .di-coach-ctl { display: flex; gap: 4px; }
#mode-describe-image .di-coach-ctl button {
  width: 32px; height: 32px; border-radius: 8px; border: 0; background: rgba(255, 255, 255, .1); color: #fff;
  cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;
}
#mode-describe-image .di-coach-ctl button:hover { background: rgba(255, 255, 255, .22); }
#mode-describe-image .di-coach-ctl button:focus-visible { outline: 2px solid #93c5fd; }
#mode-describe-image .di-coach-ctl svg { width: 16px; height: 16px; }
#mode-describe-image .di-coach-say { font-size: 16px; transition: opacity .18s; min-height: 24px; }
#mode-describe-image .di-coach-say.is-fading { opacity: 0; }
#mode-describe-image .di-coach-say mark { background: var(--coach-gold); color: var(--coach-gold-ink); border-radius: 4px; padding: 0 4px; }
#mode-describe-image .di-coach-say b { font-weight: 700; }
#mode-describe-image .di-coach-tip { display: none; margin-top: 6px; font-size: 13px; color: #fde68a; }
#mode-describe-image .di-coach-tip.is-shown { display: block; }

@media (prefers-reduced-motion: reduce) {
  #mode-describe-image [class*="di-coach"],
  #mode-describe-image [class*="di-coach"]::before,
  #mode-describe-image [class*="di-coach"]::after { transition: none !important; animation: none !important; }
}