/* FV の舞台 v3(G-37): Claude エージェントは自分の作業場(机)と一体。電話で呼んだ AI は前に出てきて話し、仕上がりを手渡す。
   受け取ったものはエージェントが作業場で確かめてから棚へ。手分けできる作業は分身(リトル)が列になって進める。
   人物は白地のインクの線画なので、舞台(.paper)はダークでも明るい紙の地のまま(G-39)。v2 は archive/fv-v2.* と /lp-archive/fv-v2/ */
@property --ik { syntax: '<number>'; inherits: true; initial-value: 1; }
.stage {
  --s-bg: color-mix(in srgb, var(--acc) 5%, var(--panel));
  position: relative; isolation: isolate; display: grid; gap: 12px; padding: 18px; border-radius: 24px;
  background: radial-gradient(120% 90% at 50% 40%, color-mix(in srgb, var(--acc) 10%, transparent), transparent 60%), var(--s-bg);
  border: 1px solid color-mix(in srgb, var(--acc) 16%, var(--line)); box-shadow: var(--shadow);
}
.paper {
  --ink: #1b1c1f; --ink-mut: #5f626a; --pp: #f7f6f2; --pp-line: #e2dfd6; --pp-rule: #d9d5ca; --blue: #2f4fd8; --ok: #1f8a5b;
  position: relative; border-radius: 18px; background: var(--pp); border: 1px solid var(--pp-line); overflow: hidden; color: var(--ink);
}
.paper::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgb(27 28 31 / .07) 1px, transparent 1px); background-size: 16px 16px; }
.scene { position: relative; height: 356px; }
.wires { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; }
.wire { fill: none; stroke: var(--blue); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 6 8; animation: wireflow 0.9s linear infinite; filter: drop-shadow(0 0 4px rgb(47 79 216 / .45)); }
@keyframes wireflow { to { stroke-dashoffset: -28; } }
.spark { fill: var(--blue); }

/* 作業場(エージェントの机)。線画に合わせて、インクの線で縁どったモニター */
.desk { position: absolute; z-index: 1; left: 14px; top: 14px; bottom: 14px; width: 34%; display: flex; flex-direction: column; gap: 6px; padding: 10px; background: #fff; border: 1.5px solid var(--ink); border-radius: 14px; box-shadow: 4px 4px 0 rgb(27 28 31 / .1); }
.agent-h { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.agent-h > .ic { width: 16px; height: 16px; }
.agent-st { margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--blue); background: #eef1fd; border-radius: 999px; padding: 1px 8px; white-space: nowrap; transition: background-color 200ms ease, color 200ms ease; }
.agent-st.done { color: #0f7a52; background: #e3f4ec; }
.term { position: relative; min-height: 44px; display: flex; align-items: center; gap: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; line-height: 1.5; color: #d9dbe3; background: #16181f; border-radius: 8px; padding: 6px 8px; overflow: hidden; }
.term-t { min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.term b { color: #7fe3d0; font-weight: 600; }
.term .inbox { flex: none; width: 46px; aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden; outline: 2px solid #7fe3d0; }
.term .inbox img { width: 100%; height: 100%; object-fit: cover; display: block; }
.term.got { outline: 2px solid #7fe3d0; outline-offset: -2px; }
.agent-p { margin: 0; font-size: 11px; color: var(--ink-mut); display: flex; justify-content: space-between; gap: 6px; }
.agent-p b { color: var(--ink); font-weight: 700; }
.tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.task { display: grid; grid-template-columns: 15px minmax(0, 1fr) auto; align-items: center; gap: 6px; font-size: 11.5px; padding: 3px 6px; border-radius: 7px; color: var(--ink-mut); white-space: nowrap; transition: background-color 220ms ease, color 220ms ease; }
.task .ts { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid rgb(27 28 31 / .25); display: grid; place-items: center; transition: border-color 200ms ease, background-color 200ms ease; }
.task .ts .ic { width: 10px; height: 10px; opacity: 0; transform: scale(.4); color: #fff; transition: opacity 200ms ease, transform 260ms cubic-bezier(.34,1.56,.64,1); }
.task .tw { font-size: 10.5px; color: #8b8e96; display: inline-flex; align-items: center; gap: 3px; }
.task .tw .lg.mark, .task .tw .ic { width: 12px; height: 12px; }
.task .tt { font-size: 10px; color: var(--ok); font-variant-numeric: tabular-nums; font-weight: 700; }
.task.doing { background: #eef1fd; color: var(--ink); }
.task.doing .ts { border-color: var(--blue); border-top-color: transparent; animation: spin 0.8s linear infinite; }
.task.done { color: var(--ink); }
.task.done .ts { background: var(--ok); border-color: var(--ok); }
.task.done .ts .ic { opacity: 1; transform: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.prog { margin-top: auto; height: 4px; border-radius: 999px; background: rgb(27 28 31 / .08); overflow: hidden; }
.prog i { display: block; height: 100%; background: var(--blue); transform-origin: left; transform: scaleX(0); transition: transform 500ms cubic-bezier(.16,1,.3,1); }

/* 人物の札 */
.tag { position: absolute; left: 50%; bottom: 8px; translate: -50% 0; z-index: 2; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 11.5px; font-weight: 700; color: var(--ink); background: #fff; border: 1.5px solid var(--ink); border-radius: 999px; padding: 3px 10px 3px 6px; box-shadow: 2px 2px 0 rgb(27 28 31 / .12); }
.tag .lg.mark { width: 15px; height: 15px; }
.tag img.fm { width: 12px; height: auto; }
.tag small { font-size: 10px; font-weight: 600; color: var(--ink-mut); }

/* 中心の Claude エージェント(作業場の右に立つ) */
.chief { position: absolute; z-index: 2; bottom: 0; left: calc(34% + 2px); height: 75%; }
.chief img { height: 100%; width: auto; display: block; }
.chief .tag { bottom: 12px; }

/* 電話で呼べる AI: ふだんは小さく並んで待ち、呼ばれると前に出てくる(位置は JS が置く) */
.bench-l { position: absolute; z-index: 1; margin: 0; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--ink-mut); white-space: nowrap; }
.bench-l .ic { width: 13px; height: 13px; color: var(--blue); }
.mate { position: absolute; left: 0; top: 0; z-index: 2; transform-origin: 0 100%; opacity: .78; filter: grayscale(.45); transition: transform 700ms cubic-bezier(.16,1,.3,1), --ik 700ms cubic-bezier(.16,1,.3,1), opacity 400ms ease, filter 400ms ease; }
.mate img { width: 100%; height: 100%; display: block; position: relative; z-index: 1; }
.mate::before { content: ""; position: absolute; inset: 4% -14% 0; border-radius: 50% 50% 0 0; background: radial-gradient(closest-side, rgb(47 79 216 / .26), rgb(47 79 216 / .08) 70%, transparent); opacity: 0; transition: opacity 400ms ease; }
.mate.on, .mate.ringing { opacity: 1; filter: none; z-index: 4; }
.mate.on::before { opacity: 1; }
.mate.ringing img { animation: buzz2 0.45s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes buzz2 { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-2.5deg); } 75% { transform: rotate(2.5deg); } }
.mate .tag { bottom: 8%; transform: scale(var(--ik)); transform-origin: 50% 100%; }
.scene.snap .mate { transition: none; }
.bench-l { transition: opacity 300ms ease; }
.mate:not(.on) .tag small { display: none; }
.mate-s { position: absolute; z-index: 3; left: 50%; bottom: calc(100% + 5px); translate: -50% 0; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 11px; font-weight: 700; color: #fff; background: var(--blue); border-radius: 999px; padding: 2px 9px; font-variant-numeric: tabular-nums; }
.mate-s:empty { display: none; }
.mate-s .ic { width: 12px; height: 12px; }
.mate.ringing .mate-s .ic { animation: buzz 0.5s ease-in-out infinite; }
.mate-s.done { background: var(--ok); }
@keyframes buzz { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }

/* 吹き出し(マンガのように、インクの線で縁どる) */
.bub { position: absolute; z-index: 6; max-width: 158px; font-size: 11.5px; line-height: 1.5; padding: 6px 10px; border-radius: 14px; background: #fff; color: var(--ink); border: 1.5px solid var(--ink); box-shadow: 3px 3px 0 rgb(27 28 31 / .12); pointer-events: none; }
.bub small { display: flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; color: var(--ink-mut); }
.bub small .lg.mark { width: 11px; height: 11px; }
.bub.me { background: var(--blue); border-color: var(--blue); color: #fff; }
.bub.me small { color: rgb(255 255 255 / .8); }
.bub::after { content: ""; position: absolute; bottom: -6px; left: var(--tx, 50%); width: 9px; height: 9px; background: inherit; border-right: 1.5px solid; border-bottom: 1.5px solid; border-color: inherit; transform: translateX(-50%) rotate(45deg); }
.bub.side::after { bottom: auto; top: 12px; left: auto; right: -6px; transform: rotate(-45deg); }

/* 手渡し: 頼んだ相手 → エージェントの作業場 → 棚 */
.gift { position: absolute; z-index: 8; width: 78px; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; border: 2px solid #fff; background: #fff; box-shadow: 0 10px 24px -8px rgb(20 24 58 / .55); pointer-events: none; }
.gift img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gift .gl { position: absolute; left: 4px; bottom: 3px; font-size: 9.5px; font-weight: 700; color: #fff; background: rgb(15 18 40 / .66); padding: 0 5px; border-radius: 5px; }

/* 分身(リトル): 列になって手分けする */
.march { position: relative; height: 70px; border-top: 1.5px dashed var(--pp-rule); }
.march-l { position: absolute; z-index: 2; left: 14px; top: 10px; display: grid; font-size: 12px; font-weight: 800; color: var(--ink); line-height: 1.35; }
.march-l b { color: var(--blue); font-variant-numeric: tabular-nums; }
.march-l small { font-size: 10.5px; font-weight: 600; color: var(--ink-mut); max-width: 9.5em; }
.troop { position: absolute; top: 0; bottom: 0; left: 132px; right: 10px; }
.lil { position: absolute; left: 0; bottom: 4px; width: 32px; height: 58px; }
.lil img { width: 100%; height: 100%; display: block; }
.lil.walk img { animation: bob 0.3s ease-in-out infinite alternate; }
@keyframes bob { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-4px) rotate(3deg); } }
.lil i { position: absolute; top: -4px; right: -5px; width: 15px; height: 15px; display: grid; place-items: center; color: var(--ok); background: #fff; border-radius: 50%; opacity: 0; transform: scale(.4); transition: opacity 200ms ease, transform 280ms cubic-bezier(.34,1.56,.64,1); }
.lil i .ic { width: 15px; height: 15px; }
.lil.ok i { opacity: 1; transform: none; }

/* 出来たものの棚 */
.tray { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; padding: 12px; border-radius: 16px; border: 1px dashed color-mix(in srgb, var(--acc) 30%, var(--line)); background: color-mix(in srgb, var(--panel) 70%, transparent); }
.tray-l { position: absolute; top: -9px; left: 14px; font-size: 11px; font-weight: 600; color: var(--mut); background: var(--s-bg); padding: 0 6px; border-radius: 4px; }
.slot { aspect-ratio: 4 / 3; border-radius: 10px; background: color-mix(in srgb, var(--fg) 5%, transparent); display: grid; place-items: center; overflow: hidden; position: relative; }
.slot > .ic { width: 18px; height: 18px; color: color-mix(in srgb, var(--fg) 22%, transparent); }
.thumb { position: absolute; inset: 0; border-radius: 10px; overflow: hidden; background: var(--panel); box-shadow: 0 6px 16px -8px rgb(20 24 58 / .45); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb .tl { position: absolute; left: 6px; bottom: 5px; font-size: 10px; font-weight: 700; color: #fff; background: rgb(15 18 40 / .62); padding: 1px 6px; border-radius: 6px; }
.stage-done { position: absolute; z-index: 9; left: 50%; bottom: 84px; transform: translate(-50%, 0); background: var(--panel); border: 1px solid color-mix(in srgb, #1f8a5b 40%, var(--line)); color: #0f7a52; font-weight: 700; font-size: 14px; padding: 8px 16px; border-radius: 999px; box-shadow: var(--shadow); opacity: 0; pointer-events: none; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.stage-done .ic { width: 18px; height: 18px; }


/* スマホ: 上に作業場とエージェント、下に呼んだ相手 */
@media (max-width: 767px) {
  .stage { padding: 12px; gap: 10px; }
  .scene { height: 500px; }
  .desk { left: 10px; top: 10px; bottom: auto; width: 60%; padding: 8px; gap: 5px; }
  .desk .prog { margin-top: 2px; }
  .task { font-size: 11px; padding: 2px 4px; gap: 5px; }
  .task .tw .lg.mark, .task .tw .ic { width: 11px; height: 11px; }
  .chief { left: auto; right: 0; top: 6px; bottom: auto; height: 244px; }
  .chief .tag { font-size: 10.5px; padding: 2px 8px 2px 5px; }
  .bub { max-width: 140px; font-size: 11px; }
  .march { height: 66px; }
  .march-l { left: 10px; }
  .march-l small { max-width: 6.5em; }
  .troop { left: 92px; }
  .lil { width: 28px; height: 51px; }
  .tray { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 10px 8px 8px; }
  .stage-done { bottom: 180px; font-size: 13px; }
}
/* 待合が 4 人(Frew が加わった・G-53)なので、待っている間の札は小さく */
.mate:not(.on) .tag { font-size: 10.5px; gap: 3px; padding: 2px 7px 2px 4px; }
.mate:not(.on) .tag .lg.mark { width: 13px; height: 13px; }

/* スマホの FV(G-61・G-64): アプリの会話の画面のように、上から下へ流れる縦の物語。パソコンの舞台(.stage)はスマホでは出さない */
.fvm { display: none; }
@media (max-width: 767px) {
  .hero .stage { display: none; }
  .fvm { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; height: 610px; border-radius: 26px; overflow: hidden; background: var(--panel); border: 1px solid color-mix(in srgb, var(--acc) 16%, var(--line)); box-shadow: var(--shadow); }
}
.av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: #f3f2ee; border: 1.5px solid #1b1c1f; flex: none; }
.fvm-h { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--acc) 4%, var(--panel)); }
.fvm-h b { display: block; font-size: 14px; line-height: 1.3; }
.fvm-st { font-size: 11.5px; font-weight: 700; color: var(--acc); }
.fvm-n { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--mut); font-variant-numeric: tabular-nums; }
.fvm-feed { position: relative; overflow: hidden; background-image: radial-gradient(color-mix(in srgb, var(--fg) 6%, transparent) 1px, transparent 1px); background-size: 16px 16px; }
.fvm-list { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 10px; padding: 12px; }
@keyframes fmIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.fm { display: flex; gap: 8px; align-items: flex-end; animation: fmIn 420ms var(--ease) both; }
.fm.me { justify-content: flex-end; }
.fm .av { width: 28px; height: 28px; }
.fm .bb { max-width: 80%; font-size: 13px; line-height: 1.55; padding: 8px 12px; border-radius: 16px; background: color-mix(in srgb, var(--fg) 6%, var(--panel)); }
.fm.me .bb { background: var(--acc); color: var(--acc-fg); border-bottom-right-radius: 4px; }
.fm.ai .bb { border-bottom-left-radius: 4px; }
.fc { display: grid; gap: 7px; padding: 10px; border-radius: 18px; background: var(--panel); border: 1.5px solid color-mix(in srgb, var(--acc) 45%, var(--line)); box-shadow: 0 0 0 4px var(--acc-soft); animation: fmIn 420ms var(--ease) both; }
.fc-h { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; }
.fc-h .av { width: 38px; height: 38px; }
.fc-h .lg.mark, .fc-h img.fm-logo, .fc-h img.fm { width: 15px; height: 15px; }
.fc.ring .fc-h .av { animation: ringAv 0.9s ease-out infinite; }
@keyframes ringAv { from { box-shadow: 0 0 0 0 rgb(47 79 216 / .5); } to { box-shadow: 0 0 0 12px rgb(47 79 216 / 0); } }
.fc-s { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: #fff; background: var(--acc); border-radius: 999px; padding: 2px 9px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fc-s .ic { width: 12px; height: 12px; }
.fc.ring .fc-s .ic { animation: buzz 0.5s ease-in-out infinite; }
.fc-s.done { background: #1f8a5b; }
.fc .ln { max-width: 90%; font-size: 12.5px; line-height: 1.5; padding: 6px 10px; border-radius: 12px; animation: fmIn 300ms var(--ease) both; }
.fc .ln.me { justify-self: end; background: var(--acc); color: var(--acc-fg); border-bottom-right-radius: 4px; }
.fc .ln.you { justify-self: start; background: color-mix(in srgb, var(--fg) 6%, var(--panel)); border-bottom-left-radius: 4px; }
.th { position: relative; width: 132px; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; justify-self: start; box-shadow: 0 6px 16px -8px rgb(20 24 58 / .45); animation: fmIn 360ms var(--ease) both; }
.th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.th .tl { position: absolute; left: 5px; bottom: 4px; font-size: 10px; font-weight: 700; color: #fff; background: rgb(15 18 40 / .62); padding: 0 6px; border-radius: 6px; }
.fk { display: flex; align-items: center; gap: 6px; padding-left: 36px; font-size: 12px; color: var(--mut); animation: fmIn 360ms var(--ease) both; }
.fk .ic { width: 15px; height: 15px; color: #1f8a5b; }
.ft { display: grid; gap: 6px; padding: 10px 12px; border-radius: 16px; background: #f5f4f0; color: #1b1c1f; border: 1.5px dashed #d9d5ca; animation: fmIn 360ms var(--ease) both; }
.ft b { font-size: 12.5px; }
.ft.ok b::after { content: "  ✓ 手分けして完了"; color: #1f8a5b; }
.ft-row { display: flex; align-items: flex-end; gap: 4px; height: 46px; }
.ft-row img { height: 44px; width: auto; animation: lilIn 700ms var(--ease) both; }
@keyframes lilIn { from { opacity: 0; transform: translateX(-36px); } }
.fvm-tray { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; padding: 8px 12px; border-top: 1px solid var(--line); }
.fvm-tray .sl { aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: color-mix(in srgb, var(--fg) 6%, transparent); }
.fvm-tray .sl img { width: 100%; height: 100%; object-fit: cover; display: block; animation: pop 420ms cubic-bezier(.34,1.56,.64,1) both; }
@keyframes pop { from { opacity: 0; transform: scale(.4); } }
.fvm-ask { display: flex; align-items: center; gap: 8px; margin: 0 10px 10px; padding: 6px 6px 6px 14px; min-height: 48px; border-radius: 22px; border: 1px solid var(--line); background: var(--panel); font-size: 13px; }
.fvm-t { flex: 1; min-width: 0; line-height: 1.5; overflow-wrap: anywhere; }
.fvm-t:empty::before { content: "Claude エージェントに頼む"; color: var(--faint); }
.fvm.typing .fvm-t::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -.15em; background: var(--acc); animation: caret 0.9s steps(1) infinite; }
.fvm .ask-b { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--acc); color: var(--acc-fg); flex: none; }
.fvm .ask-b .ic { width: 16px; height: 16px; }