:root{--bg:#fafaf7;--fg:#1a1a1a;--mut:#666;--line:#ddd;--acc:#2f5d9e;--warn:#9a3412;--ok:#166534;--bar:#1e3a5f;--barfg:#fff}
@media (prefers-color-scheme:dark){:root{--bg:#161616;--fg:#eee;--mut:#9a9a9a;--line:#333;--acc:#7aa7e6;--warn:#fb923c;--ok:#4ade80;--bar:#0f2238;--barfg:#e8eef7}}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.6 system-ui,"Yu Gothic",sans-serif}
#ai-banner{position:sticky;top:0;z-index:10;background:var(--bar);color:var(--barfg);padding:8px 16px;font-size:13px;text-align:center}
main{max-width:760px;margin:0 auto;padding:16px}
h1{font-size:18px;margin:8px 0}
p.s{color:var(--mut);margin:0 0 12px;font-size:13px}
button{font:inherit;padding:8px 16px;border:1px solid var(--acc);background:var(--acc);color:#fff;border-radius:6px;cursor:pointer}
button.o{background:transparent;color:var(--acc)}button:disabled{opacity:.4;cursor:default}
input,select{font:inherit;padding:7px 10px;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--fg)}
.row{display:flex;gap:8px;align-items:center;margin:12px 0;flex-wrap:wrap}
.stage{display:flex;justify-content:center;padding:8px 0}
#avatar{--ar:.8889;width:min(320px,100%,calc(62vh * var(--ar)));min-width:160px}
#avatar .sprite-stage{position:relative;width:100%;aspect-ratio:var(--ar);min-width:160px;min-height:180px}
#avatar .sprite-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;user-select:none;pointer-events:none}
#avatar .sprite-ai{text-align:center;font-weight:700;font-size:18px;color:#243746;margin-top:-4px}
#avatar svg{display:block;width:100%;height:auto;aspect-ratio:320/360;min-width:160px;min-height:180px;overflow:visible}
.char-pick{justify-content:center;font-size:13px;color:var(--mut);margin:0 0 4px}
#avatar .sprite-stage video{pointer-events:none;user-select:none}
.char-name{text-align:center;font-weight:600;font-size:15px;margin:-4px 0 4px}
.status.busy{color:var(--acc);border-color:var(--acc)}
.g{color:var(--mut)}.list{margin:4px 0 8px 16px;padding:0}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.status{display:inline-block;padding:2px 10px;border-radius:999px;border:1px solid var(--line);font-size:13px}
.status.on{color:var(--ok);border-color:var(--ok)}.status.err{color:var(--warn);border-color:var(--warn)}
.box{border:1px solid var(--line);border-radius:8px;padding:12px;margin:12px 0;min-height:96px;max-height:340px;overflow:auto}
.u{color:var(--acc)}.warn{color:var(--warn)}.ok{color:var(--ok)}
table{border-collapse:collapse;width:100%;font-size:13px}td,th{border-bottom:1px solid var(--line);padding:4px 8px;text-align:left;vertical-align:top}
.err-msg{color:var(--warn)}

/* ===== 会話画面（D-1186）：背景の絵を全面に。箱は最小限。ログイン画面には影響しない（.app の中だけ） ===== */
.app{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.app main.scene{position:relative;flex:1;min-height:0;max-width:none;margin:0;padding:0;overflow:hidden;font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif}
.app #ai-banner{flex:none;background:rgba(30,58,95,.92)}
.app .bg{position:absolute;inset:-3%;background:var(--bg) center/cover no-repeat;animation:kb 40s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1) translate(0,0)}to{transform:scale(1.07) translate(-1.2%,.8%)}}
.app .shade{position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(rgba(8,10,34,0),rgba(8,10,34,.55));opacity:0;pointer-events:none;transition:opacity .4s}
.app.scene-on .shade{opacity:1}
.app .motes{display:none}.app.scene-on .motes{display:block}
.app .motes i{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff6cf;box-shadow:0 0 8px 2px rgba(255,240,180,.8);opacity:0;animation:fl 10s ease-in-out infinite}
.app.scene-on .motes i{opacity:.8}
@keyframes fl{0%,100%{transform:translate(0,0);opacity:.2}50%{transform:translate(24px,-46px);opacity:1}}
.app .motes i:nth-child(1){left:8%;top:62%;animation-delay:-1s}.app .motes i:nth-child(2){left:18%;top:78%;animation-delay:-3s}
.app .motes i:nth-child(3){left:27%;top:50%;animation-delay:-5s}.app .motes i:nth-child(4){left:36%;top:84%;animation-delay:-7s}
.app .motes i:nth-child(5){left:46%;top:58%;animation-delay:-2s}.app .motes i:nth-child(6){left:55%;top:76%;animation-delay:-4s}
.app .motes i:nth-child(7){left:63%;top:48%;animation-delay:-6s}.app .motes i:nth-child(8){left:72%;top:70%;animation-delay:-8s}
.app .motes i:nth-child(9){left:80%;top:56%;animation-delay:-9s}.app .motes i:nth-child(10){left:88%;top:80%;animation-delay:-1.5s}
.app .motes i:nth-child(11){left:93%;top:46%;animation-delay:-3.5s}.app .motes i:nth-child(12){left:14%;top:44%;animation-delay:-5.5s}
@media (prefers-reduced-motion:reduce){.app .bg,.app .motes i,.app .ripple{animation:none!important}}

/* 文字：背景が読めたときは白＋影、読めないときは従来の淡い背景に合わせた濃い文字 */
.app .state,.app .me,.app .sub,.app .hint,.app .char-name,.app .lab,.app #notice,.app .corner button{color:var(--fg)}
.app.scene-on .state,.app.scene-on .me,.app.scene-on .sub,.app.scene-on .hint,.app.scene-on .char-name,.app.scene-on .lab,.app.scene-on #notice,.app.scene-on .corner button{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 14px rgba(0,0,0,.7)}
.app.scene-on #notice{color:#ffd9b0}

/* 結（枠なし。ふちをなじませる） */
.app .stage{position:absolute;inset:0;display:block;padding:0;pointer-events:none}
.app #avatar{--ar:.682;position:absolute;left:50%;top:4%;transform:translateX(-50%);width:auto;height:70%;aspect-ratio:var(--ar);min-width:160px}
.app #avatar .sprite-stage{width:100%;height:100%;aspect-ratio:var(--ar);-webkit-mask-image:radial-gradient(ellipse 58% 58% at 50% 46%,#000 52%,transparent 100%);mask-image:radial-gradient(ellipse 58% 58% at 50% 46%,#000 52%,transparent 100%)}
.app #avatar svg{height:100%;width:100%}
/* 背景が透けた全身の動画（D-1194）：ぼかしを外し、足場の床の上に立たせる。足は動画の下から12.4%の高さ。足元に薄い影 */
.app #avatar.alpha{top:auto;bottom:4%;height:80%}
.app #avatar.alpha .sprite-stage{-webkit-mask-image:none;mask-image:none}
.app #avatar.alpha .sprite-ai{bottom:auto;top:12%;left:74%;transform:none}
.app #avatar.alpha::before{content:"";position:absolute;left:50%;bottom:10.8%;width:50%;height:3.2%;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(0,0,0,.45),rgba(0,0,0,0) 70%);pointer-events:none}
.app #avatar .sprite-ai{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);font-size:13px;letter-spacing:.1em;padding:0 8px;border:1px solid currentColor;border-radius:4px;margin:0;color:inherit}
.app.scene-on #avatar .sprite-ai{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.9)}
.app .char-name{position:absolute;left:18px;top:14px;margin:0;font-size:22px;letter-spacing:.2em;text-align:left}
.app .char-name::after{content:"AI社員";font-size:12px;letter-spacing:.1em;margin-left:8px;padding:0 6px;border:1px solid currentColor;border-radius:4px;vertical-align:middle}

/* 話す相手を選ぶ（結・孔明。開始前だけ選べる。D-1187） */
.app .pick{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(16% + 4.4em);z-index:6;display:flex;gap:6px;align-items:center;font-size:14px}
.app .pick-lab{margin-right:2px}
.app .pick button{padding:2px 16px;border:1px solid currentColor;border-radius:999px;background:rgba(0,0,0,.18);color:inherit;font:inherit;cursor:pointer}
.app .pick button[aria-checked=true]{background:#fff;color:#1a1a1a;border-color:#fff}
.app .pick button:disabled{cursor:default;opacity:.6}
.app .pick,.app .pick-lab{color:var(--fg)}
.app.scene-on .pick,.app.scene-on .pick-lab{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 14px rgba(0,0,0,.7)}
.app.scene-on .pick button[aria-checked=true]{color:#1a1a1a;text-shadow:none}

/* 状態・字幕・ヒント */
.app .state{position:absolute;right:16px;top:14px;font-size:15px;letter-spacing:.15em}
.app .state::before{content:"●";margin-right:6px;color:#aab}
.app[data-state=listen] .state::before{color:#6ff}.app[data-state=think] .state::before{color:#fc6}.app[data-state=talk] .state::before{color:#7f7}
.app #busy{position:absolute;right:16px;top:42px;background:rgba(0,0,0,.28);color:#fff;border-color:rgba(255,255,255,.6)}
.app .sub{position:absolute;left:50%;transform:translateX(-50%);bottom:16%;width:min(820px,88%);text-align:center;font-size:24px;line-height:1.6;min-height:1.6em}
.app .me{position:absolute;left:20px;bottom:calc(16% + 3.4em);max-width:30%;font-size:15px;font-style:italic;opacity:.95}
.app .hint{position:absolute;left:50%;transform:translateX(-50%);bottom:16%;width:90%;text-align:center;font-size:18px;display:none}
.app[data-state=idle] .hint{display:block}
.app #notice{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(16% + 2.2em);width:90%;text-align:center;font-size:14px}

/* 操作：丸いボタン3つ */
.app .dock{position:absolute;left:0;right:0;bottom:22px;display:flex;justify-content:center;align-items:center;gap:22px;z-index:5}
.app .mic{position:relative;width:72px;height:72px;padding:0;border-radius:50%;border:2px solid rgba(255,255,255,.9);background:rgba(120,140,170,.35);backdrop-filter:blur(6px);cursor:pointer;display:grid;place-items:center}
.app .mic svg{width:30px;height:30px;fill:#fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.app .mic:disabled{opacity:1;cursor:default;background:rgba(110,255,255,.22)}
.app .mic .ripple{position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(160,255,255,.9);opacity:0}
.app[data-state=listen] .mic .ripple{opacity:1;animation:rip 1.4s ease-out infinite}
@keyframes rip{from{transform:scale(1)}to{transform:scale(1.55);opacity:0}}
.app .ic{width:46px;height:46px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.75);background:rgba(0,0,0,.28);color:#fff;font-size:18px;cursor:pointer;backdrop-filter:blur(4px)}
.app .ic:disabled{opacity:.35}
.app .wrap{position:relative}
.app .lab{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);font-size:12px;white-space:nowrap}

/* 小窓（使い方・会話の記録・詳細）。ふだんは閉じている */
.app .corner{position:absolute;right:14px;top:44px;z-index:6;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.app .corner button{padding:1px 12px;border:1px solid currentColor;border-radius:999px;background:rgba(0,0,0,.18);font-size:13px}
.app .pop{position:absolute;right:14px;top:78px;z-index:8;width:min(340px,92%);max-height:calc(100% - 200px);overflow:auto;background:rgba(16,12,40,.88);color:#eee;border:1px solid rgba(255,255,255,.4);border-radius:10px;padding:12px 16px;font-size:14px;line-height:1.6;font-family:system-ui,"Yu Gothic",sans-serif}
.app .pop.wide{width:min(440px,92%)}
.app .pop h2{margin:0 0 4px;font-size:15px}.app .pop ol{margin:0;padding-left:1.2em}
.app .pop .okng{margin:8px 0 0}
.app .pop .box{border-color:rgba(255,255,255,.3);min-height:120px;max-height:50vh;margin:6px 0}
.app .pop .u{color:#9fd0ff}.app .pop .g{color:#bbb}.app .pop .warn{color:#fdba74}
.app .pop .s,.app .pop label{color:#ccc}.app .pop a{color:#9fd0ff}
.app .pop select,.app .pop input{color:#eee;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3)}
.app .pop select option{color:#111}
.app .pop table,.app .pop td,.app .pop th{border-color:rgba(255,255,255,.2)}
.app .pop .status{border-color:rgba(255,255,255,.4)}

/* スマホ幅 */
@media (max-width:899px){
  .app #avatar{top:12%;height:58%}
  .app .char-name{top:12px;font-size:18px}.app .state{font-size:13px;top:14px}.app .corner{top:40px}
  .app #ai-banner{font-size:11.5px;line-height:1.4;padding:6px 12px}
  .app .pick{bottom:calc(19% + 4.4em)}.app .sub{font-size:19px;bottom:19%}.app .hint{font-size:15px;bottom:19%}.app .me{bottom:calc(19% + 3.4em);max-width:70%}.app #notice{bottom:calc(19% + 2.2em)}
  .app .pop{left:10px;right:10px;width:auto;top:70px}.app .pop.wide{width:auto}
}