/* Gemeni Dialogue Pro — front-end styles (synced with TTOnline theme)
   Path: wp-content/plugins/gemeni-dialogue-pro/gemeni-dialogue-pro.css
   Uses theme CSS variables from style.css: --bg, --surface, --txt, --muted, --line, --brand, --chip-bg, --chip-ink, --badge-bg, --badge-ink, --ring
   No hardcoded colors for light/dark except semantic accents.
*/

/* ---------- Resets & helpers ---------- */
.gvp-dialogue, .gdp-cloze{ accent-color: var(--brand); }
.gvp-dialogue *{ box-sizing:border-box; }
.gvp-dialogue .visually-hidden{ position:absolute !important; width:1px;height:1px;overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }

/* ---------- Dialogue container ---------- */
.gvp-dialogue{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  margin: 16px 0;
  transition: box-shadow .2s ease, border-color .2s ease, transform .12s ease;
}
.gvp-dialogue:hover{ box-shadow:0 12px 26px rgba(2,6,23,.10); border-color: color-mix(in oklab, var(--brand) 18%, var(--line)); transform: translateY(-1px); }
.gvp-dialogue:focus-within{ outline:none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 40%, transparent), 0 12px 26px rgba(2,6,23,.10); border-color: color-mix(in oklab, var(--ring) 55%, var(--line)); }

/* Controls */
.gvp-dialogue .gvp-controls{ display:flex; gap:10px; align-items:center; justify-content:flex-start; flex-wrap:wrap; margin: 4px 0 10px; }
.gvp-dialogue .gvp-play-all{
  background: var(--brand); color:#fff; border:0; border-radius:12px; padding:10px 12px; cursor:pointer; font-weight:600;
}
.gvp-dialogue .gvp-play-all:hover{ filter:brightness(.95); }
.gvp-dialogue .gvp-play-all:focus-visible{ outline:3px solid color-mix(in oklab, var(--ring) 40%, transparent); outline-offset:2px; }

/* Turns list */
.gvp-dialogue .gvp-turns{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.gvp-dialogue .gvp-turn{
  position:relative; display:block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 10px 10px 52px; /* space for A/B badge */
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .12s ease;
}
.gvp-dialogue .gvp-turn:hover{ box-shadow:0 8px 20px rgba(2,6,23,.06); transform: translateY(-1px); }
.gvp-dialogue .gvp-turn.is-current{
  border-color: color-mix(in oklab, var(--brand) 30%, var(--line));
  background: linear-gradient(0deg, color-mix(in oklab, var(--brand) 10%, transparent), transparent 40%), var(--surface);
  box-shadow: 0 10px 22px rgba(2,6,23,.10);
}

/* A/B badge on each turn */
.gvp-dialogue .gvp-turn::before{
  content: attr(data-ab);
  position:absolute; left:12px; top:12px; width:26px; height:26px; border-radius:999px;
  display:grid; place-items:center; font-size:12px; font-weight:700;
  background: var(--chip-bg); color: var(--chip-ink); border:1px solid var(--line);
}
.gvp-dialogue .gvp-turn[data-ab="A"]::before{ background: color-mix(in oklab, var(--brand) 24%, var(--chip-bg)); color:#fff; border-color: color-mix(in oklab, var(--brand) 30%, var(--line)); }
.gvp-dialogue .gvp-turn[data-ab="B"]::before{ background: color-mix(in oklab, rebeccapurple 24%, var(--chip-bg)); color:#fff; border-color: color-mix(in oklab, rebeccapurple 30%, var(--line)); }

/* Turn header */
.gvp-dialogue .gvp-turn-head{ display:flex; align-items:center; gap:8px; margin-bottom:6px; flex-wrap:wrap; }
.gvp-dialogue .gvp-speaker{ font-weight:650; font-size:15px; }

/* Per-turn play button (icon size) */
.gvp-dialogue .gvp-play{
  --_size: 28px;
  width:var(--_size); height:var(--_size);
  display:inline-grid; place-items:center; line-height:1;
  background: transparent; color: var(--txt); border:1px solid var(--line);
  border-radius:999px; cursor:pointer; font-size:13px; padding:0;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.gvp-dialogue .gvp-play:hover{ background: rgba(14,165,233, .12); border-color: color-mix(in oklab, var(--brand) 28%, var(--line)); }
.gvp-dialogue .gvp-play:active{ transform: translateY(1px) scale(.98); }
.gvp-dialogue .gvp-play:focus-visible{ outline:3px solid color-mix(in oklab, var(--ring) 40%, transparent); outline-offset:2px; }

/* Lines */
.gvp-dialogue .gvp-zh{ font-size:16px; line-height:1.5; }
.gvp-dialogue .gvp-pinyin{ color:var(--muted); font-size:13px; margin-top:2px; }
.gvp-dialogue .gvp-vi{ font-size:14px; color:var(--muted); }

/* Autolinked Hanzi chip */
.gvp-dialogue .gvp-zh a.gdp-hanzi-link{
  text-decoration:none; background:var(--chip-bg); color:var(--chip-ink);
  border:1px solid var(--line); border-radius:999px; padding:.5px 8px; display:inline-flex; align-items:center; gap:6px;
}
.gvp-dialogue .gvp-zh a.gdp-hanzi-link:hover{ filter:brightness(.97); border-color: color-mix(in oklab, var(--brand) 20%, var(--line)); }
.gvp-dialogue .gvp-zh a.gdp-hanzi-link:focus-visible{ outline:3px solid color-mix(in oklab, var(--ring) 40%, transparent); outline-offset: 2px; }

/* Audio element */
.gvp-dialogue .gvp-audio{ width:100%; margin-top:8px; border-radius:10px; background:var(--surface); }

/* ---------- Cloze exercise ---------- */
.gdp-cloze{
  background: var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px; margin:16px 0;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.gdp-cloze:hover{ box-shadow:0 12px 26px rgba(2,6,23,.10); border-color: color-mix(in oklab, var(--brand) 18%, var(--line)); }
.gdp-cloze h3{ margin:0 0 10px; font-size:18px; line-height:1.3; }

.gdp-cloze .cloze-toolbar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
.gdp-cloze .score{ color:var(--muted); font-size:13px; margin-left:auto; }

/* Turn item within cloze */
.gdp-cloze .turn{ border:1px solid var(--line); border-radius:12px; padding:10px; margin:8px 0; background:var(--surface); }
.gdp-cloze .turn .meta{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.gdp-cloze .turn .speaker{ font-weight:650; font-size:14px; }
.gdp-cloze .turn .btn-audio{ background:transparent; border:1px solid var(--line); border-radius:10px; padding:6px 8px; cursor:pointer; }
.gdp-cloze .turn .btn-audio:hover{ background: rgba(14,165,233,.10); border-color: color-mix(in oklab, var(--brand) 28%, var(--line)); }
.gdp-cloze .turn .line{ font-size:15px; line-height:1.8; word-break:break-word; }
.gdp-cloze .turn .hint{ color:var(--muted); font-size:12px; margin-top:6px; }

/* Inputs */
.gdp-cloze .turn input.cloze.input{
  min-width:110px; max-width:100%; width:auto;
  padding:6px 8px; margin:0 4px 2px; border:1px solid var(--line);
  border-radius:10px; background: var(--bg); color: var(--txt);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.gdp-cloze .turn input.cloze.input:focus{ outline:none; border-color: color-mix(in oklab, var(--ring) 55%, var(--line)); box-shadow:0 0 0 3px color-mix(in oklab, var(--ring) 35%, transparent); }

/* Correct/incorrect states */
.gdp-cloze{ --ok:#16a34a; --bad:#dc2626; }
.gdp-cloze .turn input.ok{ border-color: color-mix(in oklab, var(--ok) 60%, var(--line)); box-shadow:0 0 0 3px color-mix(in oklab, var(--ok) 35%, transparent); }
.gdp-cloze .turn input.bad{ border-color: color-mix(in oklab, var(--bad) 60%, var(--line)); box-shadow:0 0 0 3px color-mix(in oklab, var(--bad) 35%, transparent); }

/* Buttons in toolbar reuse theme .btn, add subtle variants */
.gdp-cloze .btn-show{ background: transparent; color: var(--txt); border:1px solid var(--line); }
.gdp-cloze .btn-show:hover{ background: rgba(14,165,233,.08); }
.gdp-cloze .btn-reset{ background: transparent; border:1px dashed var(--line); color: var(--muted); }
.gdp-cloze .btn-reset:hover{ background: rgba(2,6,23,.04); }

/* ---------- Responsiveness ---------- */
@media (max-width: 560px){
  .gvp-dialogue{ padding:12px; }
  .gvp-dialogue .gvp-turn{ padding-left: 48px; }
  .gdp-cloze .turn input.cloze.input{ min-width:90px; }
}

/* ---------- Accessibility & motion ---------- */
@media (prefers-reduced-motion: reduce){
  .gvp-dialogue, .gvp-dialogue * , .gdp-cloze, .gdp-cloze *{ transition:none !important; }
}

/* ---------- Print ---------- */
@media print{
  .gvp-dialogue, .gdp-cloze{ border-color:#000; box-shadow:none; }
  .gvp-dialogue .gvp-play, .gvp-dialogue .gvp-play-all, .gdp-cloze .btn, .gdp-cloze .btn-audio, .gvp-dialogue .gvp-audio{ display:none !important; }
}