/* ── THE BAR UNDER HER ANSWERS (17 Sep 2026) ──────────────────────────────
   read out loud · copy · answer again · good · not good.

   It sits INSIDE the body column (.wkc-dbody / .dchat-dbody), never in the
   flex row beside her mark, or it would land to the right of the message
   instead of under it.

   It is quiet: on a desktop it fades in when the pointer is over the
   message, and stays up permanently on the LAST answer (the one he is
   actually going to act on). On a phone there is no hover, so it is always
   there. Same rule Claude and ChatGPT use, and for the same reason. */

.vbar{
  display:flex; align-items:center; gap:2px; flex-wrap:wrap;
  margin:9px 0 0; padding:0;
  opacity:0; transform:translateY(-2px);
  transition:opacity .16s ease, transform .16s ease;
  pointer-events:none;
}
.wkc-msg.dalia:hover .vbar,
.dchat-msg.dalia:hover .vbar,
.vbar.vbar-last,
.vbar.vbar-live,
.vbar:focus-within{ opacity:1; transform:none; pointer-events:auto; }

/* nothing to show until she has finished writing it */
.vbar.vbar-wait{ display:none }

.vb{
  -webkit-appearance:none; appearance:none;
  background:transparent; border:0; padding:5px; margin:0;
  line-height:0; cursor:pointer; border-radius:8px;
  color:var(--mute,#8C887E);
  transition:color .13s ease, background .13s ease;
}
.vb:hover{ color:#AF69EE; background:rgba(175,105,238,.10) }
.vb:active{ transform:translateY(.5px) }
.vb svg{ display:block; width:17px; height:17px; overflow:visible }

/* she is fetching the sound */
.vb.vb-load{ color:#AF69EE; animation:vbpulse 1.25s ease-in-out infinite }
@keyframes vbpulse{ 0%,100%{opacity:1} 50%{opacity:.38} }

/* she is reading */
.vb.vb-on{ color:#AF69EE; background:rgba(175,105,238,.13) }

/* his verdict, kept */
.vb.vb-rated{ color:#AF69EE }
.vb.vb-rated.vb-down{ color:#C98A7A }

.vb[disabled]{ opacity:.35; cursor:default }
.vb[disabled]:hover{ color:var(--mute,#8C887E); background:transparent }

/* a word instead of a tooltip, because a tooltip on a phone is nothing */
.vbar .vb-say{
  font-family:var(--hand,inherit); font-size:12.5px; color:#AF69EE;
  padding:0 7px 0 3px; white-space:nowrap; opacity:.9;
}

/* HIS PHONE IS NOT A SMALL DESKTOP (his standing rule): no hover there, so
   the bar is simply always up, and the targets are finger-sized. */
@media (hover:none), (max-width:820px){
  .vbar{ opacity:1; transform:none; pointer-events:auto; margin-top:10px }
  .vb{ padding:7px }
  .vb svg{ width:18.5px; height:18.5px }
}

/* the paper reads itself too — the control that sits on a document */
.vdoc{
  display:inline-flex; align-items:center; gap:6px;
  background:transparent; border:1px solid rgba(175,105,238,.32);
  color:#AF69EE; border-radius:9px; padding:5px 11px 5px 8px;
  font-family:var(--hand,inherit); font-size:13px; cursor:pointer;
  transition:background .13s ease;
}
.vdoc:hover{ background:rgba(175,105,238,.10) }
.vdoc svg{ display:block; width:16px; height:16px; overflow:visible }
.vdoc.vb-load{ animation:vbpulse 1.25s ease-in-out infinite }

/* HOW FAST SHE READS (17 Sep 2026, his ask). Only up while she is reading;
   tapping cycles 0.75 → 2 and the change lands on the clip already playing. */
.vb.vb-rate{
  font-family:var(--hand,inherit); font-size:12px; line-height:1;
  padding:4px 7px; min-width:34px; color:#AF69EE;
  border:1px solid rgba(175,105,238,.30); border-radius:7px;
  margin-left:4px; letter-spacing:.01em;
}
.vb.vb-rate:hover{ background:rgba(175,105,238,.13) }
@media (hover:none), (max-width:820px){
  .vb.vb-rate{ font-size:13px; padding:6px 9px; min-width:40px }
}

/* In the document viewer the control wears the viewer's own button, so the
   pill styling above must stand down - only the reading states stay. */
.dv-act .vdoc{ padding:0; border-radius:10px; gap:0 }
.dv-act .vdoc.vb-on{ background:rgba(175,105,238,.16) }

/* 360px IS THE REAL PHONE (his rule: mobile ships with the feature, it is not
   a follow-up pass). Five marks + the speed chip + a word is about 310px, so
   the row wraps rather than running off the side of his Samsung. */
@media (max-width:420px){
  .vb{ padding:6px }
  .vbar .vb-say{ padding-left:2px; font-size:12px }
}

/* ── HIS OWN SENTENCE (20 Sep 2026, TURN_SEP20) ──────────────────────────
   The same row her answers wear, under his bubble and aligned to it: copy,
   edit (the words go back into the composer), send it again. Quiet until he
   reaches for it; always there on a touch screen, where there is no hover. */
.wkc-msg.you > .vbar.vbar-you,
.dchat-msg.you > .vbar.vbar-you{
  display:flex; justify-content:flex-end; gap:2px;
  margin:3px 2px 0 0; opacity:0; transform:translateY(-2px);
  pointer-events:none; transition:opacity .16s ease, transform .16s ease;
}
.wkc-msg.you:hover > .vbar.vbar-you,
.dchat-msg.you:hover > .vbar.vbar-you,
.wkc-msg.you > .vbar.vbar-you:focus-within,
.dchat-msg.you > .vbar.vbar-you:focus-within{
  opacity:1; transform:none; pointer-events:auto;
}
@media (hover:none){
  .wkc-msg.you > .vbar.vbar-you,
  .dchat-msg.you > .vbar.vbar-you{ opacity:.6; pointer-events:auto }
}