/* ============================================================================
   REVIEW ROOM — shared styles (.rv-)  ·  paired with review-room.js
   ========================================================================== */
#review {
  background: var(--navy); color: #fff; overflow: hidden; position: relative;
  --rv-chrome: #111827; --rv-stage: #0A0F1A; --rv-panel: #161F2E;
  --rv-line: rgba(255,255,255,.08);
  --rv-text: #F5F7FA; --rv-dim: #B7C0CE; --rv-mute: #8A94A6;
  --rv-glass: rgba(22,31,46,.72);
  --rv-blue: #0057FF; --rv-orange: #EB6834; --rv-teal: #12A594;
  --rv-remy: #818CF8; --rv-remy-fg: #4338CA; --rv-self: #3A4457;
  --rv-ui: 'Inter', system-ui, sans-serif; --rv-mono: var(--mono);
  --rv-ease: cubic-bezier(.2,0,0,1); --rv-fast: 180ms; --rv-base: 280ms; --rv-slow: 320ms;
}
#review .glow1 { position: absolute; width: 760px; height: 760px; background: rgba(0,87,255,.20); border-radius: 50%; filter: blur(140px); top: -300px; right: -200px; pointer-events: none; }
#review .glow2 { position: absolute; width: 560px; height: 560px; background: rgba(129,140,248,.15); border-radius: 50%; filter: blur(120px); bottom: -220px; left: -160px; pointer-events: none; }
#review .wrap { position: relative; }
.rv-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* frame */
.rv-frame {
  width: 100%; border-radius: 18px; overflow: hidden; background: var(--rv-chrome);
  font-family: var(--rv-ui); font-size: 13px; color: var(--rv-text); position: relative;
  box-shadow: 0 60px 140px -50px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.07), 0 0 120px -40px rgba(0,87,255,.28);
}
.rv-frame * { box-sizing: border-box; }
.rv-frame.rv-instant *, .rv-frame.rv-instant *::before, .rv-frame.rv-instant *::after { transition: none !important; animation: none !important; }
.rv-head { height: 56px; padding: 0 14px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--rv-line); position: relative; z-index: 5; }
.rv-ic { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--rv-dim); flex: none; }
.rv-ic svg { width: 18px; height: 18px; }
.rv-file { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.rv-file b { font-weight: 500; font-size: 14px; color: var(--rv-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-file span { font: 500 11px/1 var(--rv-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--rv-mute); }
.rv-vpill { font: 500 11px/1 var(--rv-mono); letter-spacing: .12em; color: var(--rv-dim); border: 1px solid rgba(255,255,255,.18); padding: 5px 10px; border-radius: 9999px; position: relative; overflow: hidden; }
.rv-vpill i { font-style: normal; display: inline-block; transition: transform var(--rv-base) var(--rv-ease), opacity var(--rv-base) var(--rv-ease); }
.rv-vpill.flip i { animation: rvFlip .32s var(--rv-ease); }
@keyframes rvFlip { 0% { transform: translateY(0); opacity: 1; } 45% { transform: translateY(-6px); opacity: 0; } 55% { transform: translateY(6px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
.rv-stack { display: flex; align-items: center; padding-left: 8px; position: relative; }
.rv-av { width: 26px; height: 26px; border-radius: 50%; margin-left: -8px; box-shadow: 0 0 0 2px var(--rv-chrome); display: grid; place-items: center; font: 600 10px/1 var(--rv-ui); color: #fff; background: var(--c, var(--rv-self)); transform: scale(.6); opacity: 0; transition: transform var(--rv-base) var(--rv-ease), opacity var(--rv-base) var(--rv-ease); }
.rv-av.in { transform: none; opacity: 1; }
.rv-av.self { order: 9; }
.rv-av.pip::after { content: ''; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--rv-chrome); bottom: -1px; right: -1px; }
.rv-av { position: relative; }

.rv-body { display: flex; align-items: stretch; }
.rv-stage { flex: 1; min-width: 0; background: var(--rv-stage); padding: 44px 28px 92px; position: relative; overflow: hidden; transition: box-shadow var(--rv-slow) var(--rv-ease); }
.rv-stage.follow { box-shadow: inset 0 0 0 3px var(--fc); }

/* art */
.rv-art { border-radius: var(--rv-r-media, 12px); width: 100%; max-width: 760px; aspect-ratio: var(--rv-ar, 3/2); margin: 0 auto; position: relative; container-type: inline-size; }
.rv-layer { position: absolute; inset: 0; border-radius: var(--rv-r-media, 12px); overflow: hidden; background: var(--rv-paper, #2E2E30); }
.rv-layer > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-layer.a { z-index: 10; clip-path: inset(0 calc(100% - var(--rv-wipe, 100%)) 0 0); display: none; }
.rv-frame.cmp .rv-layer.a { display: block; }
.rv-poster { position: absolute; inset: 0; pointer-events: none; }
.rv-pb { position: absolute; white-space: nowrap; line-height: 1.15; }
.rv-pb.mono { font-family: var(--rv-mono); }
.rv-pb.ui { font-family: var(--rv-ui); }

.rv-marks { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 20; overflow: visible; pointer-events: none; }
.rv-marks .m { fill: none; stroke: var(--c); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: opacity var(--rv-base) var(--rv-ease); }
.rv-marks .m.region, .rv-marks .m.ellipse { fill: color-mix(in srgb, var(--c) 9%, transparent); }
.rv-marks .m.draft, .rv-marks .m.dashed { stroke-dasharray: 7 6; }
.rv-marks .m.draw { stroke-width: 5.6; }
.rv-marks .m.drawing { transition: stroke-dashoffset var(--ms, 900ms) linear; }
.rv-marks .m.resolved { opacity: .45; }
.rv-marks .m.resolved.region { fill: transparent; }
.rv-marks .halo { fill: none; stroke: var(--c); stroke-width: 8.4; opacity: .22; }
.rv-marks .head { fill: var(--c); stroke: none; }
.rv-marks g { opacity: 0; transition: opacity var(--rv-base) var(--rv-ease); }
.rv-marks g.in { opacity: 1; }
.rv-marks g.resolved { opacity: .45; }
.rv-badges { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
.rv-bd { position: absolute; width: 22px; height: 22px; border-radius: 50%; transform: translate(-50%,-50%) scale(.6); opacity: 0; background: var(--c); color: #fff; font: 600 8.5px/1 var(--rv-ui); display: grid; place-items: center; box-shadow: 0 0 0 1.2px rgba(255,255,255,.85); transition: transform var(--rv-base) var(--rv-ease), opacity var(--rv-base) var(--rv-ease); }
.rv-bd.in { transform: translate(-50%,-50%); opacity: 1; }
.rv-bd.ai { background: var(--rv-chrome); color: var(--rv-remy); border: 1.5px dashed var(--rv-remy); font-family: var(--rv-mono); box-shadow: none; }
.rv-bd.resolved { opacity: .45; }
.rv-bd .ok { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #0F9E86; color: #fff; font-size: 8px; display: grid; place-items: center; right: -8px; bottom: -8px; box-shadow: 0 0 0 1.5px var(--rv-stage); }

/* on-canvas pills */
.rv-pill { position: absolute; z-index: 60; font: 500 11px/1 var(--rv-mono); padding: 7px 11px; border-radius: 9999px; background: var(--rv-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--rv-text); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); opacity: 0; transform: translateY(6px); transition: opacity var(--rv-fast) var(--rv-ease), transform var(--rv-fast) var(--rv-ease); pointer-events: none; }
.rv-pill.in { opacity: 1; transform: none; }
.rv-draft { left: 16px; bottom: 16px; }
.rv-land { background: var(--rv-blue); color: #fff; font-size: 10.5px; padding: 5px 10px; box-shadow: 0 8px 20px -6px rgba(0,87,255,.7); transform: translate(-50%, 6px); }
.rv-land.in { transform: translate(-50%, 0); }
.rv-cross { position: absolute; z-index: 60; width: 14px; height: 14px; transform: translate(-50%,-50%); opacity: 0; transition: opacity var(--rv-fast); pointer-events: none; }
.rv-cross.in { opacity: 1; }
.rv-cross::before, .rv-cross::after { content: ''; position: absolute; background: var(--rv-blue); }
.rv-cross::before { left: 6px; top: 0; width: 2px; height: 14px; }
.rv-cross::after { top: 6px; left: 0; height: 2px; width: 14px; }
.rv-sweep { position: absolute; inset: 0; z-index: 22; border-radius: 12px; overflow: hidden; pointer-events: none; }
.rv-sweep::after { content: ''; position: absolute; top: 0; bottom: 0; width: 45%; left: -50%; background: linear-gradient(105deg, transparent, rgba(129,140,248,.16), transparent); }
.rv-sweep.go::after { animation: rvSweep 1.4s linear forwards; }
@keyframes rvSweep { to { left: 110%; } }

/* callouts */
.rv-call { position: absolute; max-width: 284px; z-index: 50; border-radius: 4px 12px 12px 12px; padding: 10px 13px; color: #fff; background: var(--c); box-shadow: 0 14px 34px -12px rgba(0,0,0,.8); transform: translateY(6px) scale(.97); opacity: 0; transition: transform var(--rv-base) var(--rv-ease), opacity var(--rv-base) var(--rv-ease); pointer-events: none; }
.rv-call.in { transform: none; opacity: 1; }
.rv-call.out { transition-duration: var(--rv-fast); }
.rv-call.tl { border-radius: 12px 4px 12px 12px; }
.rv-call .l { font: 700 10.5px/1 var(--rv-mono); letter-spacing: .14em; text-transform: uppercase; opacity: .78; display: block; margin-bottom: 4px; }
.rv-call .t { font-size: 13px; line-height: 1.42; }
.rv-call.ai { color: #0B1020; }

/* cursors */
.rv-cur { position: absolute; z-index: 55; left: 0; top: 0; opacity: 0; transition: transform var(--ms, 1200ms) cubic-bezier(.33,0,.1,1), opacity var(--rv-base) var(--rv-ease); pointer-events: none; }
.rv-cur.in { opacity: 1; }
.rv-cur.dim { opacity: .4; }
.rv-cur svg { width: 18px; height: 18px; display: block; }
.rv-flag { margin: 12px 0 0 12px; display: inline-block; border-radius: 4px 10px 10px 10px; padding: 3px 7px; font: 500 10.4px/1.2 var(--rv-ui); color: #fff; background: var(--c); white-space: nowrap; }
.rv-fpill { position: absolute; z-index: 85; top: 14px; left: 50%; transform: translate(-50%, -8px); opacity: 0; background: var(--fc); color: #fff; font: 500 12px/1 var(--rv-ui); padding: 6px 8px 6px 14px; border-radius: 9999px; display: flex; align-items: center; gap: 10px; transition: opacity var(--rv-base) var(--rv-ease), transform var(--rv-base) var(--rv-ease); box-shadow: 0 10px 24px -10px rgba(0,0,0,.7); }
.rv-fpill.in { opacity: 1; transform: translate(-50%, 0); }
.rv-fpill b { font-weight: 500; background: rgba(0,0,0,.24); padding: 4px 9px; border-radius: 9999px; font-size: 11px; }

/* AI plate — portrait (Remy) */
.rv-ai.portrait { position: absolute; left: 0; bottom: 104px; z-index: 45; width: 132px; height: 132px; border-radius: 26px; background: linear-gradient(158deg, #131A33, #0C1124); display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(129,140,248,.42), 0 0 46px -6px rgba(129,140,248,.5), 0 22px 50px -18px rgba(0,0,0,.8); transform: translateX(-140px); transition: transform .42s var(--rv-ease); }
.rv-ai.portrait.in, .rv-ai.plate.in { transform: translateX(-16px); }
.rv-ai.portrait img { width: 104px; height: 104px; display: block; }

/* dock */
.rv-dock { position: absolute; z-index: 70; left: 50%; bottom: 20px; transform: translateX(-50%); height: 44px; padding: 0 8px; border-radius: 9999px; background: var(--rv-glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 12px 34px -12px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.1); display: flex; align-items: center; gap: 2px; font-size: 12.5px; color: var(--rv-dim); white-space: nowrap; }
.rv-dock > span, .rv-dock > b { padding: 0 8px; height: 30px; display: inline-flex; align-items: center; border-radius: 8px; font-weight: 400; }
.rv-dock .n { font: 500 11.5px/1 var(--rv-mono); letter-spacing: .06em; color: var(--rv-text); font-variant-numeric: tabular-nums; }
.rv-dock .sep { width: 1px; height: 18px; background: rgba(255,255,255,.14); padding: 0; margin: 0 4px; }
.rv-dock .tool { background: var(--rv-blue); color: #fff; border-radius: 9px; padding: 0 9px; gap: 6px; font-size: 14px; position: relative; }
.rv-dock .tool small { font-size: 10px; opacity: .8; }
.rv-dock .seg { display: inline-flex; background: rgba(255,255,255,.06); border-radius: 9999px; padding: 2px; }
.rv-dock .seg i { font-style: normal; padding: 5px 10px; border-radius: 9999px; font-size: 12px; }
.rv-dock .seg i.on { background: rgba(255,255,255,.14); color: var(--rv-text); }
.rv-dock .cmp-only, .rv-frame.cmp .rv-dock .single-only { display: none; }
.rv-frame.cmp .rv-dock .cmp-only { display: inline-flex; }
.rv-tools { position: absolute; z-index: 72; left: 50%; bottom: 72px; transform: translate(-50%, 6px); opacity: 0; display: flex; gap: 4px; padding: 6px; border-radius: 12px; background: var(--rv-glass); backdrop-filter: blur(18px); box-shadow: 0 12px 34px -12px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.1); transition: opacity var(--rv-fast) var(--rv-ease), transform var(--rv-fast) var(--rv-ease); pointer-events: none; }
.rv-tools.in { opacity: 1; transform: translate(-50%, 0); }
.rv-tools i { font-style: normal; width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; font-size: 14px; color: var(--rv-dim); }
.rv-tools i.on { background: var(--rv-blue); color: #fff; }

/* compare */
.rv-bar { position: absolute; z-index: 40; top: 0; bottom: 0; left: var(--rv-wipe, 100%); width: 2px; background: #fff; box-shadow: 0 0 14px rgba(0,0,0,.6); display: none; }
.rv-frame.cmp .rv-bar { display: block; }
.rv-bar i { position: absolute; top: 50%; left: 50%; width: 32px; height: 32px; border-radius: 50%; background: #fff; transform: translate(-50%,-50%); box-shadow: 0 6px 18px rgba(0,0,0,.5); display: grid; place-items: center; }
.rv-bar i svg { width: 14px; height: 14px; }
.rv-frame.cmp .rv-marks, .rv-frame.cmp .rv-badges { clip-path: inset(0 0 0 var(--rv-wipe, 100%)); }
.rv-art.wiping .rv-marks, .rv-art.wiping .rv-badges, .rv-art.wiping .rv-layer.a, .rv-art.wiping .rv-bar, .rv-art.wiping .rv-chip.b { transition: clip-path var(--ms, 1100ms) cubic-bezier(.33,0,.1,1), left var(--ms, 1100ms) cubic-bezier(.33,0,.1,1); }
.rv-chip { position: absolute; z-index: 35; top: 12px; display: none; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border-radius: 9999px; background: rgba(10,15,26,.74); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); font-size: 12px; white-space: nowrap; }
.rv-frame.cmp .rv-chip { display: inline-flex; }
.rv-chip.a { left: 12px; }
.rv-chip.b { left: calc(var(--rv-wipe, 100%) + 12px); }
.rv-chip em { font-style: normal; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 700 10px/1 var(--rv-ui); color: #fff; background: var(--rv-blue); }
.rv-chip.b em { background: #0B1020; }
.rv-chip small { font: 500 10.5px/1 var(--rv-mono); border: 1px solid rgba(255,255,255,.18); padding: 3px 7px; border-radius: 9999px; color: var(--rv-dim); }

/* header picker */
.rv-picker { position: absolute; z-index: 95; right: 14px; top: 50px; width: 300px; border-radius: 12px; background: var(--rv-panel); box-shadow: 0 24px 60px -20px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.1); padding: 10px 6px 6px; opacity: 0; transform: translateY(-6px); transition: opacity var(--rv-fast) var(--rv-ease), transform var(--rv-fast) var(--rv-ease); pointer-events: none; }
.rv-picker.in { opacity: 1; transform: none; }
.rv-picker h5 { margin: 0 8px 8px; font: 500 10.5px/1 var(--rv-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--rv-mute); }
.rv-picker div { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; font-size: 12.5px; }
.rv-picker div.on { background: rgba(255,255,255,.08); }
.rv-picker div small { margin-left: auto; font: 500 10.5px/1 var(--rv-mono); color: var(--rv-mute); }

/* panel */
.rv-panel { width: 360px; flex: none; background: var(--rv-panel); border-left: 1px solid var(--rv-line); display: flex; flex-direction: column; position: relative; }
.rv-tabs { height: 44px; display: flex; align-items: stretch; padding: 0 6px; border-bottom: 1px solid var(--rv-line); }
.rv-tabs span { flex: 1; display: grid; place-items: center; font-size: 12px; color: var(--rv-mute); position: relative; }
.rv-tabs span.on { color: var(--rv-text); box-shadow: inset 0 -2px 0 var(--rv-blue); }
.rv-ph { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.rv-seg { display: inline-flex; border-radius: 9999px; background: rgba(255,255,255,.05); padding: 3px; }
.rv-seg i { font-style: normal; font-size: 11.5px; padding: 4px 10px; border-radius: 9999px; color: var(--rv-mute); white-space: nowrap; }
.rv-seg i.on { background: rgba(255,255,255,.1); color: var(--rv-text); }
.rv-rbtn { margin-left: auto; width: 28px; height: 28px; border-radius: 8px; background: rgba(129,140,248,.16); display: grid; place-items: center; color: var(--rv-remy); position: relative; }
.rv-rbtn svg { width: 16px; height: 16px; }
.rv-rbtn.pulse::after { content: ''; position: absolute; inset: -3px; border-radius: 11px; border: 2px solid var(--rv-remy); animation: rvPulse .9s var(--rv-ease) 2; }
@keyframes rvPulse { 0% { opacity: .9; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.3); } }
.rv-list { flex: 1; min-height: 0; overflow: hidden; padding: 0 12px; display: flex; flex-direction: column; gap: 8px; -webkit-mask-image: linear-gradient(#000 84%, transparent); mask-image: linear-gradient(#000 84%, transparent); }
.rv-empty { padding: 20px 4px; color: var(--rv-mute); font-size: 12.5px; line-height: 1.5; }
.rv-empty b { display: block; color: var(--rv-dim); font-weight: 500; margin-bottom: 2px; }
.rv-card { border-radius: 12px; background: rgba(255,255,255,.035); padding: 11px 12px; display: flex; flex-direction: column; gap: 8px; transform: translateY(-8px); opacity: 0; transition: transform var(--rv-base) var(--rv-ease), opacity var(--rv-base) var(--rv-ease), background var(--rv-base); flex: none; }
.rv-card.in { transform: none; opacity: 1; }
.rv-card.sel { background: rgba(0,87,255,.12); box-shadow: inset 0 0 0 1px rgba(0,87,255,.5); }
.rv-card.ai { border-left: 2px solid var(--rv-remy); background: rgba(129,140,248,.07); }
.rv-card.resolved { opacity: .45; }
.rv-cr { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rv-cb { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; font: 600 9.5px/1 var(--rv-ui); color: var(--c); border: 1.5px solid var(--c); }
.rv-cb.ai { border-style: dashed; font-family: var(--rv-mono); }
.rv-cr b { font-weight: 500; font-size: 12.5px; color: var(--rv-text); white-space: nowrap; }
.rv-cr time { font: 400 10.5px/1 var(--rv-mono); color: var(--rv-mute); }
.rv-cr .chip { font: 500 10px/1 var(--rv-mono); border: 1px dashed rgba(255,255,255,.2); border-radius: 9999px; padding: 3px 7px; color: var(--rv-dim); white-space: nowrap; }
.rv-cr .st { margin-left: auto; font: 500 10px/1 var(--rv-mono); letter-spacing: .12em; color: var(--rv-mute); }
.rv-cr .st.ok { color: #0F9E86; }
.rv-card p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--rv-dim); }
.rv-reply { display: flex; gap: 8px; padding-left: 4px; border-left: 1px solid var(--rv-line); margin-left: 11px; transform: translateY(-4px); opacity: 0; transition: transform var(--rv-base) var(--rv-ease), opacity var(--rv-base) var(--rv-ease); }
.rv-reply.in { transform: none; opacity: 1; }
.rv-reply .rv-cb { width: 20px; height: 20px; font-size: 8px; }
.rv-reply > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rv-acts { display: flex; gap: 6px; margin-top: 2px; }
.rv-btn { font: 500 11px/1 var(--rv-ui); padding: 6px 10px; border-radius: 7px; background: rgba(255,255,255,.07); color: var(--rv-dim); transition: background var(--rv-fast), color var(--rv-fast); }
.rv-btn.pri { background: var(--rv-blue); color: #fff; }
.rv-btn.ai { background: var(--rv-remy); color: #0B1020; }
.rv-btn.pressed { transform: scale(.96); filter: brightness(1.2); }
.rv-comp { padding: 10px 12px 12px; border-top: 1px solid var(--rv-line); display: flex; flex-direction: column; gap: 8px; }
.rv-cchips { display: flex; gap: 6px; min-height: 0; }
.rv-cchips:empty { display: none; }
.rv-cchips span { font: 500 10px/1 var(--rv-mono); border: 1px dashed rgba(255,255,255,.2); border-radius: 9999px; padding: 4px 8px; color: var(--rv-dim); }
.rv-cin { min-height: 42px; border-radius: 10px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); padding: 10px 12px; font-size: 12.5px; line-height: 1.45; color: var(--rv-text); }
.rv-cin:empty::before { content: attr(data-ph); color: var(--rv-mute); }
.rv-cin.typing::after { content: ''; display: inline-block; width: 1px; height: 13px; background: var(--rv-text); margin-left: 2px; vertical-align: -2px; animation: rvCaret 1s steps(2) infinite; }
@keyframes rvCaret { 50% { opacity: 0; } }
.rv-crow { display: flex; align-items: center; gap: 6px; }
.rv-crow .tg { display: inline-flex; gap: 2px; }
.rv-crow .tg i { font-style: normal; width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; font-size: 13px; color: var(--rv-mute); }
.rv-crow .tg i.on { background: var(--rv-blue); color: #fff; }
.rv-crow .rv-btn { margin-left: auto; }

/* Remy popover */
.rv-pop { position: absolute; z-index: 90; left: 10px; right: 10px; top: 50px; bottom: 10px; border-radius: 14px; background: var(--rv-chrome); box-shadow: 0 30px 70px -24px rgba(0,0,0,.9), inset 0 0 0 1px rgba(129,140,248,.25); display: flex; flex-direction: column; opacity: 0; transform: translateY(8px); transition: opacity var(--rv-base) var(--rv-ease), transform var(--rv-base) var(--rv-ease); pointer-events: none; overflow: hidden; }
.rv-pop.in { opacity: 1; transform: none; }
.rv-ptabs { display: flex; height: 40px; padding: 0 8px; border-bottom: 1px solid var(--rv-line); flex: none; }
.rv-ptabs span { padding: 0 12px; display: grid; place-items: center; font-size: 12px; color: var(--rv-mute); }
.rv-ptabs span.on { color: var(--rv-text); box-shadow: inset 0 -2px 0 var(--rv-remy); }
.rv-ptabs b { margin-left: auto; align-self: center; font: 500 11px/1 var(--rv-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--rv-remy); }
.rv-pbody { flex: 1; min-height: 0; overflow: hidden; padding: 12px; display: flex; flex-direction: column; gap: 10px; font-size: 12.5px; line-height: 1.5; color: var(--rv-dim); }
.rv-pbody > * { transition: opacity var(--rv-base) var(--rv-ease); }
.rv-pbody h6 { margin: 0; font: 500 13.5px/1.3 var(--rv-ui); color: var(--rv-text); }
.rv-pbody .dchip { display: inline-block; font: 500 10.5px/1 var(--rv-mono); border: 1px dashed var(--rv-remy); color: var(--rv-remy); border-radius: 9999px; padding: 4px 8px; }
.rv-pbody .row { display: flex; gap: 6px; flex-wrap: wrap; }
.rv-pbody .judg { display: flex; gap: 10px; align-items: flex-start; border-radius: 12px; background: rgba(129,140,248,.08); padding: 10px; color: var(--rv-text); }
.rv-pbody .judg img { width: 40px; height: 40px; flex: none; }
.rv-pbody .find { border-radius: 10px; border-left: 2px solid var(--rv-remy); background: rgba(255,255,255,.035); padding: 9px 10px; display: flex; flex-direction: column; gap: 6px; transform: translateY(-6px); opacity: 0; transition: transform var(--rv-base) var(--rv-ease), opacity var(--rv-base) var(--rv-ease); }
.rv-pbody .find.in { transform: none; opacity: 1; }
.rv-pbody .find.done { border-left-color: rgba(255,255,255,.2); opacity: .7; }
.rv-pbody .find .rv-cr .dchip { padding: 3px 7px; }
.rv-pbody .acts { border-radius: 10px; background: rgba(255,255,255,.035); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.rv-pbody .acts h6 { font: 500 10.5px/1.3 var(--rv-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--rv-mute); }
.rv-pbody .acts div { display: flex; align-items: center; gap: 8px; color: var(--rv-text); }
.rv-pbody .ask { margin-top: auto; }
.rv-pbody .think { display: flex; align-items: center; gap: 8px; color: var(--rv-remy); font-size: 12px; }
.rv-pbody .think i { width: 6px; height: 6px; border-radius: 50%; background: var(--rv-remy); animation: rvDot 1s infinite; }
.rv-pbody .think i:nth-child(2) { animation-delay: .2s; } .rv-pbody .think i:nth-child(3) { animation-delay: .4s; }
@keyframes rvDot { 50% { opacity: .2; } }
.rv-roster { position: absolute; z-index: 95; right: 14px; top: 50px; width: 268px; border-radius: 12px; background: var(--rv-panel); box-shadow: 0 24px 60px -20px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.1); padding: 10px 6px 6px; opacity: 0; transform: translateY(-6px); transition: opacity var(--rv-fast) var(--rv-ease), transform var(--rv-fast) var(--rv-ease); pointer-events: none; }
.rv-roster.in { opacity: 1; transform: none; }
.rv-roster h5 { margin: 0 8px 8px; font: 500 10.5px/1 var(--rv-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--rv-mute); }
.rv-roster .rw { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; }
.rv-roster .rw div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rv-roster .rw b { font-weight: 500; font-size: 12.5px; color: var(--rv-text); }
.rv-roster .rw span { font: 400 10px/1 var(--rv-mono); color: var(--rv-mute); }
.rv-roster .rw .rv-btn { margin-left: auto; }
.rv-roster .rw .rv-btn.on { background: var(--c); color: #fff; }

/* outside the frame */
.rv-rail { display: none; }
.rv-cap { margin-top: 30px; display: flex; gap: 18px; align-items: baseline; }
.rv-cap b { font: 700 11px/1 var(--mono); letter-spacing: .2em; color: var(--ac, var(--blue)); white-space: nowrap; }
.rv-cap span { font-size: 18px; color: rgba(255,255,255,.72); transition: opacity .28s var(--ease); }
.rv-cap span.fade { opacity: 0; }
.rv-track { margin-top: 24px; display: flex; gap: 8px; align-items: stretch; }
.rv-chip-btn { flex: 1; position: relative; text-align: left; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); padding: 11px 13px 9px; overflow: hidden; display: flex; flex-direction: column; gap: 4px; transition: background .25s var(--ease), border-color .25s var(--ease); color: rgba(255,255,255,.8); }
.rv-chip-btn:hover { background: rgba(255,255,255,.07); }
.rv-chip-btn[aria-checked="true"] { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #fff; }
.rv-chip-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.rv-chip-btn small { font: 500 10px/1 var(--mono); letter-spacing: .16em; color: rgba(255,255,255,.35); }
.rv-chip-btn span { font-size: 13.5px; font-weight: 500; }
.rv-chip-btn i { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--ac); }
.rv-play { flex: none; width: 36px; height: 36px; align-self: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.16); color: #fff; display: grid; place-items: center; }
.rv-play:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.rv-play svg { width: 14px; height: 14px; }
.rv-play .ip, .rv-play.paused .ii { display: none; }
.rv-play.paused .ip { display: block; }
.rv-foot { margin-top: 44px; text-align: center; font: 700 11px/1.6 var(--mono); letter-spacing: .22em; color: rgba(255,255,255,.3); position: relative; }
.rv-foot::after { content: ''; position: absolute; left: 50%; bottom: -10px; height: 2px; width: 0; background: var(--grad); transform: translateX(-50%); transition: width .6s var(--ease); }
.rv-foot.coda::after { width: min(420px, 90%); }

/* ---- additions for the shared module ---- */
.rv-pb.display { font-family: var(--sans); }
.rv-pb.img { line-height: 0; }
.rv-pb.img img { width: 100%; height: 100%; display: block; }
.rv-pb i { font: 700 .38em/1 var(--rv-mono); letter-spacing: .18em; opacity: .55; font-style: normal; vertical-align: .35em; }
.rv-guides { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 15; pointer-events: none; overflow: visible; }
.rv-guides .legend { font: 700 13px var(--rv-mono); letter-spacing: .12em; fill: rgba(11,16,32,.45); }
@container (max-width: 520px) { .rv-guides .legend { display: none; } }
.rv-marks .casing { fill: none; stroke: #fff; stroke-opacity: .55; stroke-width: 5.8; stroke-linecap: round; stroke-linejoin: round; }
.rv-marks .casing.draw { stroke-width: 8.6; }
.rv-marks .casing.drawing { transition: stroke-dashoffset var(--ms, 900ms) linear; }
.rv-frame.ground-light .rv-marks .m { stroke-width: 2.8; }
.rv-frame.ground-light .rv-marks .m.draw { stroke-width: 5.6; }
.rv-frame.ground-light .rv-marks .halo { stroke-width: 8.8; }
.rv-frame.ground-light .rv-art { box-shadow: 0 34px 80px -28px rgba(0,0,0,.9); }
.rv-frame.ground-light .rv-sweep::after { background: linear-gradient(105deg, transparent, rgba(79,70,229,.14) 60%, rgba(79,70,229,.55) 61%, transparent 62%); }
.rv-frame.ground-light .rv-bd.ai { background: #fff; color: #4F46E5; border-color: #4F46E5; }
.rv-role { font: 700 8.5px/1 var(--rv-mono); letter-spacing: .12em; text-transform: uppercase; padding: 3px 5px; border-radius: 3px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 34%, transparent); white-space: nowrap; }
.rv-roster .rw b .rv-role { margin-left: 6px; vertical-align: 1px; }
.rv-cin.me { align-self: flex-end; max-width: 80%; background: rgba(255,255,255,.08); }
.rv-frame.ai-plate .rv-rbtn { background: var(--rv-remy); color: #fff; font: 700 11px/1 var(--sans); box-shadow: 0 0 0 3px rgba(129,140,248,.18); }
.rv-aidisc { width: 22px; height: 22px; border-radius: 50%; background: var(--rv-remy); color: #fff; font: 700 9px/1 var(--sans); display: grid; place-items: center; flex: none; }
.rv-pbody .judg .rv-aidisc { margin-top: 2px; }
/* AI plate — nameplate (Johnny) */
.rv-ai.plate { position: absolute; left: 0; bottom: 104px; z-index: 45; width: 208px; height: 84px; border-radius: 18px; background: linear-gradient(158deg, #131A33, #0C1124); display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; padding: 0 16px 0 14px; box-shadow: inset 0 0 0 1px rgba(129,140,248,.42), 0 0 46px -6px rgba(129,140,248,.5), 0 22px 50px -18px rgba(0,0,0,.8); transform: translateX(-216px); transition: transform .42s var(--rv-ease); }
.rv-ai.plate .seal { width: 44px; height: 44px; border-radius: 50%; background: var(--grad); display: grid; place-items: center; font: 700 18px/1 var(--sans); color: #fff; box-shadow: 0 10px 24px -8px rgba(0,87,255,.75), 0 0 0 4px rgba(255,255,255,.1); }
.rv-ai.plate .nm { font: 700 22px/1 var(--sans); letter-spacing: -.02em; color: #fff; display: block; }
.rv-ai.plate .sb { display: block; margin-top: 5px; font: 400 8.5px/1 var(--rv-mono); letter-spacing: .08em; color: rgba(255,255,255,.62); white-space: nowrap; }
/* title-block footer */
.rv-foot.tb { margin-top: 44px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; text-align: left; font: 700 10.5px/1.6 var(--mono); letter-spacing: .04em; }
.rv-foot.tb .l { color: rgba(255,255,255,.72); position: relative; }
.rv-foot.tb .r { color: var(--violet); }
.rv-foot.tb::after { display: none; }
.rv-foot.tb .l::after { content: ''; position: absolute; left: 0; bottom: -8px; height: 2px; width: 0; background: var(--grad); transition: width .6s var(--ease); }
.rv-foot.tb.coda .l::after { width: 100%; }
@media (max-width: 640px) { .rv-foot.tb { flex-direction: column; } }

@media (max-width: 1239px) {
  .rv-panel { width: 300px; }
  .rv-stage { padding: 36px 20px 76px; }
}
@media (max-width: 900px) {
  .rv-panel { display: none; }
  .rv-stage { padding: 24px 16px 68px; }
  .rv-dock .nav, .rv-dock .rot { display: none; }
  .rv-call { max-width: 220px; }
  .rv-call .t { font-size: 12px; }
  .rv-ai.portrait { width: 108px; height: 108px; bottom: 84px; }
  .rv-ai.portrait img { width: 84px; height: 84px; }
  .rv-ai.plate { width: 176px; height: 72px; bottom: 84px; }
  .rv-ai.plate .seal { width: 38px; height: 38px; font-size: 16px; }
  .rv-ai.plate .nm { font-size: 19px; }
  .rv-ai.plate .sb { display: none; }
  .rv-rail { display: block; margin-top: 12px; min-height: 96px; font-family: var(--rv-ui); }
  .rv-rail .rv-card { background: rgba(255,255,255,.05); }
  .rv-picker, .rv-roster { display: none; }
}
@media (max-width: 640px) {
  .rv-track { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
  .rv-chip-btn { flex: 0 0 150px; scroll-snap-align: center; }
  .rv-cap { flex-direction: column; gap: 8px; }
  .rv-cap span { font-size: 16px; }
  .rv-foot { letter-spacing: .16em; }
  .rv-file span { display: none; }
}