/* Parley: two agents argue a topic, one line at a time. Markup in index.html (#parley), logic in parley.js.
   The look is Verser's "Let's argue" battle (the yvb styles): a dark stage, the two agents split top and bottom,
   a spinning VS badge that clashes on every line, LIVE pills, score meters to 1000 and a gold WIN. */
body.parley-open{overflow:hidden}
/* The overlay fades in and out (faster out). Nothing inside it moves for this: the panels follow the avatar audio. */
.parley{transition:opacity 200ms var(--ease-out)}
@starting-style{.parley{opacity:0}}
.parley.hidden.leaving{display:flex!important;opacity:0;pointer-events:none;transition-duration:150ms}
.parley{position:fixed;inset:0;z-index:60;display:flex;justify-content:center;color:#eef2ff;background:radial-gradient(1200px 700px at 50% -10%,rgba(110,139,255,.16),transparent 60%),radial-gradient(900px 600px at 50% 120%,rgba(168,85,247,.14),transparent 60%),#070512}
.parley-inner{display:flex;flex-direction:column;gap:8px;width:100%;max-width:var(--phone);height:100dvh;padding:var(--edge-top) 12px max(10px,env(safe-area-inset-bottom))}
.parley-head{display:flex;align-items:center;gap:10px}
.parley-head h2{margin:0;font-size:19px;font-weight:800}
.parley-matchup{display:flex;align-items:center;gap:6px;min-width:0;flex:1;font-size:14px;font-weight:800;overflow:hidden;white-space:nowrap}
.parley-matchup b{overflow:hidden;text-overflow:ellipsis}
.parley-matchup-a{color:#8fa6ff}.parley-matchup-b{color:#c89bff}.parley-matchup-vs{color:#22d3ee;font-style:italic}
.parley-matchup b:empty,.parley-matchup b:empty+.parley-matchup-vs{display:none}
.parley-head .btn{margin-left:auto;color:#eef2ff;border-color:rgba(160,180,255,.2);background:rgba(255,255,255,.06)}
.parley-setup{display:grid;grid-template-columns:1fr;gap:4px}
.parley-setup .field-label{margin:4px 0 0;color:#9aa6d6}
.parley-setup .field{color:#eef2ff;border-color:rgba(160,180,255,.2);background:rgba(255,255,255,.05)}
.parley-setup .field:focus{border-color:rgba(110,139,255,.6)}
/* The picker keeps the app's chevron, so it reads as a picker on the dark stage. */
.parley-setup select.field{background:var(--select-chevron) no-repeat right 14px center/20px 20px,rgba(255,255,255,.05)}
.parley-setup select.field option{color:#111}
.parley-topic-line{margin:0;font-size:14px;font-weight:700;line-height:1.35;color:#eef2ff}

/* The stage: the two agents stacked, the VS badge on the seam, the chat running over the lower half. */
.parley-arena{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:10px}
.parley-panel{--c1:#6e8bff;--c2:#22d3ee;position:relative;flex:1 1 0;min-height:0;overflow:hidden;border:1px solid rgba(110,139,255,.4);border-radius:18px;background:#0b0a1f;box-shadow:0 18px 50px -24px rgba(0,0,0,.8);transition:box-shadow .2s ease,filter .3s ease}
.parley-panel[data-side="B"]{--c1:#a855f7;--c2:#ec4899;border-color:rgba(168,85,247,.35)}
.parley-panel>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
/* Live speech draws the speaking side's portrait frames over its still face (verser-lipsync.js, options.stage). */
.parley-panel>.lipsync-layer{z-index:1}
.parley-panel>.lipsync-layer canvas{object-position:center top}
.parley-panel .parley-initial{position:absolute;inset:0;display:grid;place-items:center;font-size:46px;font-weight:800;color:rgba(255,255,255,.75)}
.parley-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(7,5,18,.5) 0%,transparent 26%,transparent 52%,rgba(7,5,18,.82) 100%)}
.parley-panel.thinking{box-shadow:0 0 0 2px rgba(34,211,238,.3)}
.parley-panel[data-side="B"].thinking{box-shadow:0 0 0 2px rgba(236,72,153,.3)}
/* .speaking only while the line's audio really plays (parleyAudible in parley.js); .thinking is the still turn ring. */
.parley-panel.speaking{box-shadow:0 0 0 2px rgba(34,211,238,.75),0 0 40px -6px rgba(34,211,238,.55)}
.parley-panel[data-side="B"].speaking{box-shadow:0 0 0 2px rgba(236,72,153,.75),0 0 40px -6px rgba(236,72,153,.55)}

.parley-id{position:absolute;left:12px;top:10px;right:80px;z-index:4;display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0}
.parley-id b{max-width:100%;font-size:15px;font-weight:800;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.parley-id small{max-width:100%;font-size:11.5px;line-height:1.25;color:#c3ccf2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.parley-side{max-width:100%;margin-top:4px;padding:3px 8px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;background:rgba(110,139,255,.28);color:#dbe3ff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.parley-panel[data-side="B"] .parley-side{background:rgba(168,85,247,.28);color:#f0e0ff}
.parley-side:empty{display:none}
.parley-voice{margin-top:3px;font-size:11px;font-weight:700;color:#fbbf24}
.parley-voice:empty{display:none}
.parley-bars{display:none;align-items:flex-end;gap:3px;height:16px;margin-top:5px}
.parley-panel.speaking .parley-bars{display:inline-flex}
.parley-bars i{width:3px;height:16px;border-radius:2px;background:var(--c2);transform-origin:bottom;transform:scaleY(.3125);animation:parleyBar .7s ease-in-out infinite}
.parley-bars i:nth-child(2){animation-delay:.1s}.parley-bars i:nth-child(3){animation-delay:.2s}.parley-bars i:nth-child(4){animation-delay:.3s}.parley-bars i:nth-child(5){animation-delay:.4s}
@keyframes parleyBar{0%,100%{transform:scaleY(.3125);opacity:.7}50%{transform:scaleY(1);opacity:1}}

/* The LIVE pill stays hidden: nobody else can watch a debate. Its red is the darker one (4.5:1 for the white text). */
.parley-live{position:absolute;right:10px;top:10px;z-index:4;display:none;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.06em;color:var(--on-live);background:var(--live-fill)}
.parley-live i{width:7px;height:7px;border-radius:50%;background:#fff;animation:parleyPulse 1.2s infinite}
@keyframes parleyPulse{0%,100%{opacity:1}50%{opacity:.35}}

.parley-foot{position:absolute;left:10px;right:10px;bottom:10px;z-index:6;display:flex;align-items:center;gap:8px}
.parley-meter{flex:1;min-width:30px;height:10px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden}
.parley-fill{width:100%;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--c1),var(--c2));transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.parley-score{display:flex;align-items:baseline;gap:1px;white-space:nowrap;font-weight:900}
.parley-points{display:inline-block;font-size:22px;line-height:1;color:#fff;text-shadow:0 1px 10px var(--c2)}
.parley-points.bump{animation:parleyPop .42s ease}
@keyframes parleyPop{0%{transform:scale(1)}35%{transform:scale(1.55)}100%{transform:scale(1)}}
.parley-score small{font-size:11px;font-weight:700;color:#9aa6d6}
.parley-like,.parley-cheer{flex:none;display:flex;align-items:center;gap:5px;height:44px;padding:0 11px;border-radius:999px;font-weight:800;font-size:13px;cursor:pointer;touch-action:manipulation}
.parley-like{border:1px solid rgba(160,180,255,.22);background:rgba(10,12,30,.55);color:var(--c1)}
.parley-like svg{width:15px;height:15px;fill:currentColor}
.parley-likes{color:#eef2ff}
.parley-cheer{border:0;color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2))}
.parley-panel[data-side="A"] .parley-cheer{color:#070512}   /* dark on the light blue-to-cyan gradient */
.parley-like:active,.parley-cheer:active{transform:scale(.94)}
.parley-like:disabled,.parley-cheer:disabled{opacity:.45;cursor:default;transform:none}
.parley-heart{position:absolute;right:18%;bottom:60px;z-index:7;width:22px;height:22px;fill:var(--c1);pointer-events:none;animation:parleyHeart 1.25s ease-out forwards}
@keyframes parleyHeart{0%{opacity:0;transform:translateY(0) scale(.5) rotate(-8deg)}15%{opacity:1}100%{opacity:0;transform:translateY(-100px) scale(1.25) rotate(8deg)}}

/* The VS badge sits on the seam between the panels and clashes when a line lands. */
.parley-vs{position:absolute;left:50%;top:50%;z-index:8;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;transform:translate(-50%,-50%);animation:parleyVsPulse 1.5s ease-in-out infinite;pointer-events:none}
.parley-vs::before{content:"";position:absolute;inset:3px;z-index:1;border-radius:50%;background:radial-gradient(circle at 32% 28%,#7ff0ff,#22d3ee 30%,#6e8bff 60%,#a855f7 100%);box-shadow:0 8px 26px -6px rgba(34,211,238,.65),inset 0 0 12px rgba(255,255,255,.25)}
.parley-vs-ring{position:absolute;inset:-4px;z-index:0;border-radius:50%;background:conic-gradient(from 0deg,#22d3ee,#a855f7,#ec4899,#22d3ee);filter:blur(3px);opacity:.9;animation:parleySpin 2.6s linear infinite}
.parley-vs-text{position:relative;z-index:2;font-size:18px;font-weight:900;font-style:italic;letter-spacing:.03em;color:#fff;text-shadow:0 1px 5px rgba(0,0,0,.4),0 0 14px rgba(127,240,255,.7)}
.parley-vs-spark{position:absolute;left:50%;top:50%;z-index:3;width:58px;height:58px;border:2px solid rgba(127,240,255,.9);border-radius:50%;opacity:0;transform:translate(-50%,-50%) scale(.6)}
.parley-vs.clash{animation:parleyClash .45s ease}
.parley-vs.clash .parley-vs-spark{animation:parleySpark .55s ease-out}
@keyframes parleySpin{to{transform:rotate(360deg)}}
@keyframes parleyVsPulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.08)}}
@keyframes parleyClash{0%{transform:translate(-50%,-50%) scale(1) rotate(0)}22%{transform:translate(-53%,-50%) scale(1.28) rotate(-9deg)}48%{transform:translate(-47%,-50%) scale(1.22) rotate(9deg)}74%{transform:translate(-50%,-50%) scale(1.12) rotate(-4deg)}100%{transform:translate(-50%,-50%) scale(1) rotate(0)}}
@keyframes parleySpark{0%{opacity:.95;transform:translate(-50%,-50%) scale(.6)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.4)}}

/* The winner glows gold under a WIN; the other side dims. */
.parley-panel.winner{border-color:#fde68a;animation:parleyWinGlow 1.1s ease-in-out infinite}
@keyframes parleyWinGlow{0%,100%{box-shadow:0 0 0 2px rgba(253,224,138,.7),0 0 50px -6px rgba(251,191,36,.55)}50%{box-shadow:0 0 0 3px rgba(253,224,138,.98),0 0 85px 2px rgba(251,191,36,.9)}}
.parley-panel.loser{filter:saturate(.55) brightness(.62)}
.parley-win{position:absolute;inset:0;z-index:5;display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;pointer-events:none;background:radial-gradient(circle at 50% 44%,rgba(251,191,36,.3),transparent 62%)}
.parley-panel.winner .parley-win{display:flex;animation:parleyWinShow .6s cubic-bezier(.2,.9,.3,1.3)}
.parley-win b{font-size:56px;font-weight:900;font-style:italic;letter-spacing:.04em;line-height:1;background:linear-gradient(180deg,#fffbe6,#fbbf24 55%,#f59e0b);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 5px 16px rgba(245,158,11,.6))}
.parley-winsub{padding:5px 14px;border:1px solid rgba(253,224,138,.55);border-radius:999px;font-size:13.5px;font-weight:800;background:rgba(7,5,18,.5);text-shadow:0 2px 10px rgba(0,0,0,.6)}
.parley-winsub:empty{display:none}
@keyframes parleyWinShow{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.1);opacity:1}100%{transform:scale(1);opacity:1}}

/* The lines as a live chat inside the bottom panel, under its name and above its meter: newest at the bottom,
   older ones fading out. It never reaches the seam, the VS badge or the top panel. */
.parley-feed{position:absolute;left:10px;width:68%;bottom:56px;top:calc(50% + 84px);z-index:6;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 38%);mask-image:linear-gradient(180deg,transparent 0%,#000 38%)}
.parley-line{flex:none;padding:6px 9px;border:1px solid rgba(160,180,255,.12);border-left:3px solid #6e8bff;border-radius:12px;background:rgba(10,12,30,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:parleyRise .3s ease}
.parley-line[data-side="B"]{border-left-color:#a855f7}
.parley-line.you{border-left-color:#22d3ee}
.parley-line b{display:block;margin-bottom:1px;font-size:11px;font-weight:800;color:#8fa6ff}
.parley-line[data-side="B"] b{color:#c89bff}
.parley-line.you b{color:#7fe9f5}
.parley-line p{margin:0;font-size:12.5px;line-height:1.35;color:#eef2ff}
@keyframes parleyRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* The person's own comment to one agent, answered in that agent's next line. */
.parley-say{display:flex;align-items:center;gap:8px;flex:none}
.parley-say-input{flex:1;min-width:0;height:44px;padding:0 16px;border:1px solid rgba(160,180,255,.2);border-radius:999px;background:rgba(10,12,30,.6);color:#eef2ff;font-size:16px}
.parley-say-input::placeholder{color:#8b97cf}
.parley-say-input:focus{border-color:rgba(110,139,255,.6)}
.parley-send{position:relative;flex:none;width:44px;height:44px;padding:0;border:2px solid #6e8bff;border-radius:50%;background:#23254a;cursor:pointer;overflow:hidden}
.parley-send[data-side="B"]{border-color:#a855f7}
.parley-send-face{position:absolute;inset:0;display:grid;place-items:center;font-size:15px;font-weight:800;color:#fff;background-size:cover;background-position:center}
.parley-send:disabled{opacity:.4;cursor:default}
.parley-send:active{transform:scale(.93)}

.parley-status{margin:0;min-height:18px;font-size:13px;line-height:1.35;text-align:center;color:#c3ccf2}
.parley-status.status-error{color:var(--bad)}   /* the app's one error style (dot from workspace.css); this file loads after it */


.parley-bar{display:flex;gap:8px;flex:none}
.parley-bar .btn{flex:1 1 0;min-width:0;color:#eef2ff;border-color:rgba(160,180,255,.2);background:rgba(255,255,255,.06)}
.parley-bar .btn.primary{border:0;color:#070512;background:linear-gradient(135deg,#a855f7,#6e8bff,#22d3ee);box-shadow:0 10px 26px -8px rgba(110,139,255,.7)}
.parley-bar .btn:disabled{opacity:.45}

@media (prefers-reduced-motion:reduce){
  .parley-vs,.parley-vs-ring,.parley-panel.winner,.parley-panel.speaking>img,.parley-points.bump,.parley-vs.clash,.parley-bars i,.parley-live i{animation:none}
  /* What still appears or goes keeps its fade, with no movement. */
  .parley-heart{animation-name:parleyFade}
  .parley-vs.clash .parley-vs-spark{animation-name:parleyFadeOut}
  .parley-panel.winner .parley-win{animation:parleyFadeIn .3s ease}
  .parley-line{animation-name:parleyFadeIn}
  .parley-bars i{transform:scaleY(.6)}
  .parley-fill{transition-property:none}
}
@keyframes parleyFadeIn{from{opacity:0}to{opacity:1}}
@keyframes parleyFadeOut{0%{opacity:.95}100%{opacity:0}}
@keyframes parleyFade{0%{opacity:0}15%{opacity:1}100%{opacity:0}}