/* CASE 02 デモ（DOM実装・動画の代替案）：Namazu API をバックボーンLLMにして
   社内エンジニアが自作した想定の「週次調査エージェント」。
   デスクトップ風の画面に、受信トレイ（表側・左上の大きい窓）とエージェント実行ログ
   （裏側・右下の小さい窓）が独立したウィンドウとして重なる。PCと同じ作法で、
   後ろのウィンドウをクリックすると前面へ浮き上がって切り替わる（z順の入替＋軽い持ち上げの動き）。
   上部はmacOS風のバー（左＝ストーリー時計、右＝再生）、下部はタスクバー（APIコストのみ。旧・稼働ログは廃止）。
   Powered by Sakana Namazu は実行ログ窓下端のボトムバーに置く。
   文字・レイアウトはコンテナ幅基準（cqw）でスケール。挙動・中身の描画は case2.js。
   行レイアウト（.nz-uc--wide / .nz-uc__b--wide）は case1.css の共通定義をそのまま利用する
   （両ファイルは本ページで常時読み込まれるため、ここでは再宣言しない）。 */

.nz-anim2{container-type:inline-size;aspect-ratio:16/10;border:1px solid #e5e7eb;border-radius:12px;background:#e9edf2;box-shadow:0px 1px 3px 0px rgba(0,0,0,.1),0px 1px 2px -1px rgba(0,0,0,.1);overflow:hidden;}
/* cqw 単位はコンテナ自身には適用できないため、直下のラッパーで基準フォントを決める（case1 と同じ） */
.nz-anim2__in{height:100%;display:flex;flex-direction:column;font-size:clamp(9px,2.0cqw,17px);font-family:var(--font-jp);color:#111827;}
@supports not (container-type:inline-size){.nz-anim2__in{font-size:13px;}}
/* fugu_lp.css の .t-ja{font-family:var(--font-jp)} がmono要素内でも勝ってしまうため、
   デモ内の .t-ja は常にコンテナのフォントを継承させる（mono枠はmono、本文枠はJPのまま） */
.nz-anim2 .t-ja{font-family:inherit;}

/* ---- 上部バー（macOS 風）：左にストーリー時計、右に再生ボタン ---- */
.nz-anim2__topbar{position:relative;z-index:3;flex:none;display:flex;align-items:center;justify-content:space-between;gap:.7em;padding:.32em .95em;background:rgba(255,255,255,.6);border-bottom:1px solid #dde2e8;}
.nz-anim2__clock{flex:none;font-family:var(--font-mono-jb);font-size:.72em;color:#374151;white-space:nowrap;}
.nz-anim2__clock .t-ja{font-family:var(--font-mono-jb);}
/* ⏸/▶ボタン（topbar 内・常時表示。⏸で仮想時計ごと静止、▶で続きから再開） */
.nz-anim2__replay{display:inline-block;flex:none;font-family:var(--font-mono-jb);font-size:.68em;color:#6b7280;background:#fff;border:1px solid #dde2e8;padding:.1em .6em;cursor:pointer;white-space:nowrap;transition:color .15s ease,border-color .15s ease;}
.nz-anim2__replay .t-ja{font-family:var(--font-mono-jb);}
.nz-anim2__replay:hover{color:var(--ac);border-color:var(--ac);}

/* ---- デスクトップ：2枚の独立ウィンドウが重なる領域 ---- */
.nz-anim2__desk{flex:1;position:relative;min-height:0;}
.nz-anim2__winx{position:absolute;display:flex;flex-direction:column;min-height:0;background:#fff;border:1px solid #d7dce3;border-radius:.6em;overflow:hidden;z-index:1;box-shadow:0px 4px 6px -1px rgba(0,0,0,.1),0px 2px 4px -2px rgba(0,0,0,.1);transition:transform .35s ease,box-shadow .35s ease;transform:scale(.995);}
/* 受信トレイ＝左上の大きい窓／実行ログ＝右下の小さい窓。
   実行ログの下辺は受信トレイより少し低くして、段差で奥行きを出す */
.nz-anim2__winx--mail{top:3%;left:1.5%;width:73%;height:89%;}
.nz-anim2__winx--be{right:1.5%;bottom:2.5%;width:58%;height:68%;}
/* 前面のウィンドウ：z順を上げ、少し持ち上げる（切替時に浮き上がって見える） */
.nz-anim2__desk[data-a2-desk="mail"] .nz-anim2__winx--mail,
.nz-anim2__desk[data-a2-desk="be"] .nz-anim2__winx--be{z-index:2;transform:scale(1);box-shadow:0px 10px 15px -3px rgba(0,0,0,.1),0px 4px 6px -4px rgba(0,0,0,.1);}
/* 後ろのウィンドウはクリックで前面へ（case2.js がキャプチャで拾う） */
.nz-anim2__desk[data-a2-desk="mail"] .nz-anim2__winx--be,
.nz-anim2__desk[data-a2-desk="be"] .nz-anim2__winx--mail{cursor:pointer;}

/* ウィンドウのタイトルバー（各窓に信号機ボタン） */
.nz-anim2__titlebar{flex:none;display:flex;align-items:center;gap:.55em;padding:.4em .8em;background:#f6f8fa;border-bottom:1px solid #e5e7eb;}
.nz-anim2__dots{display:flex;gap:.35em;}
.nz-anim2__dots i{width:.55em;height:.55em;border-radius:50%;background:#d1d5db;}
.nz-anim2__titlebar .wt{min-width:0;font-family:var(--font-mono-jb);font-size:.68em;letter-spacing:.05em;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nz-anim2__titlebar .wt .t-ja{font-family:var(--font-mono-jb);}
.nz-anim2__titlebar .wc{flex:none;margin-left:auto;font-family:var(--font-mono-jb);font-size:.68em;color:#9ca3af;}
.nz-anim2__titlebar .wc b{color:#111827;font-weight:600;}
.nz-anim2__titlebar .run{flex:none;margin-left:auto;font-family:var(--font-mono-jb);font-size:.62em;border:1px solid #e5e7eb;background:#fff;color:#9ca3af;padding:.1em .55em;white-space:nowrap;}
.nz-anim2__titlebar .run .t-ja{font-family:var(--font-mono-jb);}
.nz-anim2__winx--running .run{border-color:var(--ac);color:var(--ac);}
.nz-anim2__winbody{flex:1;min-height:0;display:flex;flex-direction:column;}

/* ---- 受信トレイ：一覧とレポートの2ビュー切替（case1 のビュー切替と同じ作法） ---- */
.nz-anim2__mailmain{flex:1;min-height:0;position:relative;}
.nz-anim2__list,.nz-anim2__reportview{position:absolute;inset:0;display:none;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#e5e7eb transparent;}
.nz-anim2__list::-webkit-scrollbar,.nz-anim2__reportview::-webkit-scrollbar{width:6px;}
.nz-anim2__list::-webkit-scrollbar-thumb,.nz-anim2__reportview::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:3px;}
.nz-anim2__mailmain[data-a2-mview="list"] .nz-anim2__list{display:flex;flex-direction:column;animation:nz-anim2-fadein .25s ease;}
.nz-anim2__mailmain[data-a2-mview="report"] .nz-anim2__reportview{display:block;animation:nz-anim2-fadein .25s ease;}
@keyframes nz-anim2-fadein{from{opacity:0;}to{opacity:1;}}

/* メール行（クリックでレポートを開く）。新着はスライドイン＋残光（case1 と同じ） */
.nz-anim2__row{display:none;grid-template-columns:minmax(0,1fr) auto auto;gap:.6em;align-items:center;width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid #f1f5f9;padding:.5em .95em;font-family:var(--font-jp);font-size:.74em;color:#6b7280;cursor:pointer;transition:background .15s ease;}
.nz-anim2__row[data-in]{display:grid;animation:nz-anim2-rowin .8s ease;}
@keyframes nz-anim2-rowin{0%{opacity:0;transform:translateY(-.5em);background:rgba(225,6,0,.07);}55%{opacity:1;transform:none;background:rgba(225,6,0,.07);}100%{background:transparent;}}
.nz-anim2__row:hover{background:#fafbfc;}
/* 視線誘導：注目させたい新着行を太字＋アクセント地でパルス表示（case2.js が一時付与） */
.nz-anim2__row.is-focus{background:rgba(225,6,0,.08);box-shadow:inset 3px 0 0 var(--ac);animation:nz-anim2-focus 1s ease infinite;}
.nz-anim2__row.is-focus .s{color:#111827;font-weight:700;}
@keyframes nz-anim2-focus{0%,100%{background:rgba(225,6,0,.06);}50%{background:rgba(225,6,0,.14);}}
/* 既読行は薄いグレー地（Gmail 風に未読＝白地・太字と区別する） */
.nz-anim2__row[data-done]{background:#f6f8fa;}
.nz-anim2__row[data-done]:hover{background:#eef1f4;}
.nz-anim2__row .s{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nz-anim2__row:not([data-done]) .s{color:#111827;font-weight:600;}
.nz-anim2__row .tm{font-family:var(--font-mono-jb);font-size:.85em;color:#9ca3af;white-space:nowrap;}
.nz-anim2__row .st{font-family:var(--font-mono-jb);font-size:.82em;white-space:nowrap;}
.nz-anim2__row .stn{display:inline;color:var(--ac);}
.nz-anim2__row .str{display:none;color:#9ca3af;}
.nz-anim2__row[data-done] .stn{display:none;}
.nz-anim2__row[data-done] .str{display:inline;}

/* レポート表示（各週で中身が異なる。本文は完結した文＋「…（以下略）」で締める） */
.nz-anim2__rph{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:.6em;padding:.6em .95em .5em;background:#fff;border-bottom:1px solid #f1f5f9;}
.nz-anim2__rpback{flex:none;text-align:left;background:transparent;border:0;padding:0;font-family:var(--font-mono-jb);font-size:.72em;color:#6b7280;cursor:pointer;white-space:nowrap;transition:color .15s ease;}
.nz-anim2__rpback:hover{color:var(--ac);}
.nz-anim2__rpmeta{min-width:0;margin-left:auto;font-family:var(--font-mono-jb);font-size:.62em;color:#9ca3af;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nz-anim2__rpmeta .t-ja{font-family:var(--font-mono-jb);}
.nz-anim2__rpdoc{padding:.65em .95em .9em;}
.nz-anim2__rpt{font-size:.85em;font-weight:600;line-height:1.6;border-bottom:1px solid #e5e7eb;padding-bottom:.4em;}
.nz-anim2__rpsec{margin-top:.75em;}
.nz-anim2__rpsec h4{margin:0 0 .3em;padding-left:.5em;border-left:2px solid var(--ac);font-size:.74em;font-weight:600;color:#111827;}
.nz-anim2__rpsec ul{margin:0;padding-left:1.2em;}
.nz-anim2__rpsec li{font-size:.72em;line-height:1.8;color:#374151;}
.nz-anim2__rpmore{margin:.15em 0 0;padding-left:1.2em;font-size:.7em;color:#9ca3af;}

/* ---- エージェント実行ログ（裏側）：指示カード＋フェーズ表示＋トレース ---- */
/* 指示バー（折りたたみ式）：プロローグで開いて指示が打ち込まれ、確認を見せてから畳む。
   以後もバーをクリックすれば登録済みの指示をいつでも確認できる */
.nz-anim2__inst{flex:none;border-bottom:1px solid #f1f5f9;background:#fff;}
.nz-anim2__inst .ih{display:flex;align-items:center;gap:.5em;width:100%;text-align:left;background:transparent;border:0;padding:.45em .8em;cursor:pointer;}
.nz-anim2__inst .ihl{min-width:0;font-family:var(--font-mono-jb);font-size:.6em;letter-spacing:.08em;color:#9ca3af;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nz-anim2__inst .ihl .t-ja{font-family:var(--font-mono-jb);}
.nz-anim2__inst .is{flex:none;margin-left:auto;font-family:var(--font-mono-jb);font-size:.58em;color:#1a7f37;opacity:0;transition:opacity .3s ease;}
.nz-anim2__inst .is .t-ja{font-family:var(--font-mono-jb);}
.nz-anim2__inst[data-reg] .is{opacity:1;}
.nz-anim2__inst .chev{flex:none;font-size:.58em;color:#9ca3af;transition:transform .3s ease;}
.nz-anim2__inst[data-open] .chev{transform:rotate(180deg);}
.nz-anim2__inst .ib{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.22,.61,.36,1);}
.nz-anim2__inst[data-open] .ib{max-height:9em;}
.nz-anim2__inst .ibi{padding:0 .8em .5em;}
.nz-anim2__inst .it{font-size:.7em;line-height:1.7;color:#374151;min-height:1.7em;}
.nz-anim2__inst .it.typing::after{content:"▍";color:var(--ac);animation:nz-anim2-blink 1s steps(1) infinite;}
@keyframes nz-anim2-blink{50%{opacity:0;}}
.nz-anim2__inst .ic{margin-top:.3em;font-family:var(--font-mono-jb);font-size:.62em;color:#1a7f37;opacity:0;transition:opacity .4s ease;}
.nz-anim2__inst .ic .t-ja{font-family:var(--font-mono-jb);}
.nz-anim2__inst .ic[data-on]{opacity:1;}

.nz-anim2__flowmini{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:.2em .4em;padding:.5em .8em;border-bottom:1px solid #f1f5f9;background:#fbfcfe;}
.nz-anim2__flowmini .nd{flex:none;font-size:.66em;font-weight:600;color:#6b7280;border:1px solid #e5e7eb;border-radius:.45em;background:#fff;padding:.14em .6em;white-space:nowrap;transition:border-color .15s ease,color .15s ease,background .15s ease;}
.nz-anim2__flowmini .nd[data-active]{border-color:var(--ac);color:var(--ac);background:rgba(225,6,0,.04);}
.nz-anim2__flowmini .nd[data-done]::after{content:" ✓";color:#1a7f37;}
.nz-anim2__flowmini .ar{flex:none;font-family:var(--font-mono-jb);font-size:.7em;color:#d1d5db;}
.nz-anim2__flowmini .lap{flex:none;margin-left:auto;font-family:var(--font-mono-jb);font-size:.68em;color:#6b7280;white-space:nowrap;}
.nz-anim2__flowmini .lap .t-ja{font-family:var(--font-mono-jb);}
.nz-anim2__flowmini .lap b{color:#111827;font-weight:600;}

.nz-anim2__trace{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#e5e7eb transparent;display:flex;flex-direction:column;gap:.34em;padding:.55em .8em .7em;font-family:var(--font-mono-jb);}
.nz-anim2__trace::-webkit-scrollbar{width:6px;}
.nz-anim2__trace::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:3px;}
.nz-anim2__trace .ln{display:flex;gap:.6em;font-size:.7em;line-height:1.55;animation:nz-anim2-lnin .3s ease;}
@keyframes nz-anim2-lnin{from{opacity:0;transform:translateY(.3em);}to{opacity:1;transform:none;}}
.nz-anim2__trace .tm{flex:none;color:#9ca3af;}
.nz-anim2__trace .k{flex:none;width:4.2em;font-weight:600;}
.nz-anim2__trace .k--plan{color:#6b7280;}
.nz-anim2__trace .k--search{color:#0969da;}
.nz-anim2__trace .k--read{color:#6b7280;}
.nz-anim2__trace .k--code{color:#8250df;}
.nz-anim2__trace .k--write{color:#111827;}
.nz-anim2__trace .k--send{color:#1a7f37;}
.nz-anim2__trace .tx{min-width:0;color:#374151;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* 日付の区切り線：実行回ごとのトレースを分ける（両側に破線） */
.nz-anim2__trace .ln--sep{color:#9ca3af;margin-top:.2em;}
.nz-anim2__trace .ln--sep::before,.nz-anim2__trace .ln--sep::after{content:"";flex:1;align-self:center;border-top:1px dashed #e5e7eb;}
/* 実行ログ窓のボトムバー（Powered by 表記） */
.nz-anim2__befoot{flex:none;padding:.35em .8em;border-top:1px solid #e5e7eb;background:#fafbfc;font-family:var(--font-mono-jb);font-size:.6em;letter-spacing:.05em;color:#9ca3af;white-space:nowrap;}
.nz-anim2__befoot .br{color:var(--ac);font-weight:600;}

/* ---- 送信ビート：実行ログ（右下）から受信トレイ（左上）へ飛ぶ封筒 ---- */
.nz-anim2__fly{position:absolute;left:-2em;top:-2em;z-index:4;font-size:1.05em;color:var(--ac);opacity:0;pointer-events:none;}
.nz-anim2__fly.go{animation:nz-anim2-fly .9s ease forwards;}
@keyframes nz-anim2-fly{0%{left:62%;top:64%;opacity:0;transform:scale(.9);}18%{opacity:1;}80%{opacity:1;}100%{left:14%;top:14%;opacity:0;transform:scale(1.05);}}

/* ---- タスクバー：APIコスト（右寄せ）。
   コスト表示は取り外し可能な独立モジュール：[data-a2-cost] の span を丸ごと削除しても
   レイアウト（.log が flex:1）と他の挙動に影響しない（case2.js 側も null 許容） ---- */
.nz-anim2__taskbar{position:relative;z-index:3;flex:none;display:flex;align-items:center;gap:.6em;padding:.42em .95em;border-top:1px solid #dde2e8;background:#f1f4f7;font-family:var(--font-mono-jb);font-size:.68em;color:#6b7280;min-width:0;}
/* ステータス字幕（「エージェント実行中…」等）は目に留まるよう拡大＋濃色に */
.nz-anim2__taskbar .cost{flex:none;margin-left:auto;color:#9ca3af;white-space:nowrap;}
.nz-anim2__taskbar .cost b{color:#6b7280;font-weight:600;}
.nz-anim2__taskbar .t-ja{font-family:var(--font-mono-jb);}

/* ---- 枠下の注記（表示内容が架空である旨） ---- */
.nz-anim2__note{margin:8px 0 0;font-size:10.5px;line-height:1.7;color:#9ca3af;font-family:var(--font-jp);}

/* ---- 狭幅：縦横比を解除し、デスクトップの高さを固定して確保 ---- */
@media (max-width:560px){
	/* 狭幅：重なりデスクトップは成立しない（豆粒になる）ため、2窓を縦積みの実寸表示に切り替える */
	.nz-anim2{aspect-ratio:auto;}
	.nz-anim2__in{font-size:12.5px;}
	/* ⏸/▶/↻ ボタンは指で押せる大きさに */
	.nz-anim2__replay{font-size:12px;padding:5px 12px;}
	/* 外枠は固定高さのまま、中の2窓を縦積みにする。動いていない方はタイトルバーだけに
	   折りたたみ、アクティブ側（=data-a2-desk）が残り全部を使って大きく表示される。
	   分配は flex-grow のトランジションで滑らかに切り替わる。折りたたみ側はタップで展開 */
	.nz-anim2__desk{flex:none;height:30em;display:flex;flex-direction:column;gap:8px;padding:8px;} /* flex:none が無いと基底の flex:1(=basis 0%) が height を打ち消して両窓とも潰れる */
	.nz-anim2__winx{position:static;width:auto;height:auto;transform:none!important;box-shadow:0px 4px 6px -1px rgba(0,0,0,.1),0px 2px 4px -2px rgba(0,0,0,.1)!important;cursor:default!important;flex:1 1 0;min-height:2.5em;transition:flex-grow .35s ease;}
	.nz-anim2__desk[data-a2-desk="be"] .nz-anim2__winx--mail,
	.nz-anim2__desk[data-a2-desk="mail"] .nz-anim2__winx--be{flex-grow:0.001;cursor:pointer!important;}
	.nz-anim2__fly{display:none;} /* 封筒の飛行は重なり座標前提のため畳む */
	.nz-anim2__inst .it{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}
}

@media (prefers-reduced-motion:reduce){
	.nz-anim2,.nz-anim2 *{transition:none!important;animation:none!important;}
}