@charset "UTF-8";
:root{font-family:Meiryo,"メイリオ",sans-serif;color:#071d65;background:#eaf0f7;font-synthesis:none;color-scheme:light}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;min-height:100dvh;display:grid;place-items:center}
button,input,textarea{font:inherit;-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled{cursor:default;opacity:.45}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #2778ff;outline-offset:4px}
[hidden]{display:none!important}
.avatar-stage{position:relative;isolation:isolate;width:min(100vw,177.77778dvh);aspect-ratio:16/9;overflow:hidden;container-type:inline-size;background:#e9f1f9;box-shadow:0 8px 80px #142b4c12}
avatar-container,.idle-background{position:absolute;inset:0;display:block;width:100%;height:100%}
avatar-container{z-index:0}
.idle-background{z-index:1;object-fit:cover;pointer-events:none}
.brand-bar{position:absolute;inset:0 0 auto;z-index:10;height:8.6%;padding:0 2.5%;display:flex;align-items:center;gap:2.2cqw;background:#ffffffb5;backdrop-filter:blur(8px)}
.brand-bar img{width:8.6%;height:auto;object-fit:contain}
.brand-bar h1{font-size:1.85cqw;letter-spacing:.035em;line-height:1.4;margin:0;font-weight:700}
.brand-bar h1 span{font-size:1.4cqw;font-weight:400;letter-spacing:0;margin-left:.75cqw}
.preview-badge{margin-left:auto;font-size:.75cqw;white-space:nowrap;border:1px solid #b8cce5;padding:.35cqw .65cqw;border-radius:20px;color:#536d8d}
/* Every conversation control belongs to the same 16:9 stage as the SDK video. */
.bubbles{position:absolute;left:2.5%;top:19.8%;width:23%;z-index:20;display:flex;flex-direction:column;gap:2.45cqw;pointer-events:none}
.speech-bubble{position:relative;width:fit-content;max-width:100%;background:#fffffff2;border:1px solid #ffffffcc;border-radius:1.7cqw;padding:1.15cqw 1.5cqw;box-shadow:0 6px 24px #1649a01c;font-size:1.65cqw;line-height:1.55;font-weight:700;overflow-wrap:anywhere;pointer-events:auto}
.speech-bubble:after{content:"";position:absolute;right:-1.35cqw;bottom:.85cqw;width:2.3cqw;height:2cqw;border-bottom-left-radius:100%;background:inherit;clip-path:polygon(0 0,100% 100%,0 80%);z-index:-1}
.speech-bubble p{margin:0;max-height:19cqw;overflow:auto;scrollbar-width:thin;white-space:pre-line}
.greeting{white-space:pre-line}
.bubble-label{display:block;font-size:.76cqw;font-weight:500;color:#5c7aaa;margin-bottom:.65cqw;letter-spacing:.05em}
.response{min-width:75%}
.response.answer{font-size:1.3cqw;line-height:1.85;font-weight:500}
.text-link{border:0;background:none;color:#0962e2;font-size:.8cqw;padding:.7cqw 0 0;text-align:left}
.actions{position:absolute;z-index:30;right:1.8%;top:26%;display:flex;flex-direction:column;gap:1.5cqw}
.round-action{width:6.3cqw;aspect-ratio:1;border-radius:50%;border:3px solid #fff;background:#fffffff2;box-shadow:0 5px 22px #1e60cc26;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45cqw;color:#005bff;transition:background .18s,transform .18s}
.round-action:hover:not(:disabled){transform:translateY(-2px);background:#eef5ff}
.round-action svg{width:2.7cqw;height:2.7cqw}
.round-action span{font-size:clamp(9px,.75cqw,15px);font-weight:700;white-space:nowrap}
.round-action .stop-icon{display:none}
.round-action.is-active{background:#075df5;color:#fff;box-shadow:0 0 0 .55cqw #2d7aff15}
.round-action.is-active .mic-icon{display:none}
.round-action.is-active .stop-icon{display:block}
/* The user's words and editor share a left-facing speech bubble on the right. */
.user-bubble,.text-panel{position:absolute;z-index:25;left:auto;right:10.2%;top:54%;width:23%;color:#164ba9;font-size:1.2cqw;font-weight:500;line-height:1.7;background:#f5f9fff5}
.user-bubble:after,.text-panel:after{right:auto;left:-1.35cqw;transform:scaleX(-1)}
.user-bubble p{max-height:12cqw}
.text-panel{z-index:40;top:49%;background:#fffffff7;padding:1.2cqw 1.4cqw}
.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:.7cqw}
.panel-heading h2{font-size:.82cqw;font-weight:500;color:#5c7aaa;margin:0}
.close-button{border:0;background:#edf3fb;border-radius:50%;width:1.9cqw;height:1.9cqw;color:#5b7197;font-size:1.35cqw;line-height:1;padding:0;flex-shrink:0}
.text-panel textarea{resize:none;display:block;width:100%;height:6.5cqw;background:transparent;color:#143f8d;border:0;border-radius:.3cqw;padding:.2cqw 0;font-size:1.2cqw;line-height:1.65}
.text-panel textarea::placeholder{color:#7a92b4}
.compose-footer{display:flex;align-items:center;justify-content:space-between;margin-top:.55cqw;gap:8px}
.compose-footer small{font-size:.65cqw;color:#788ba7;font-weight:400}
.send-button{width:2.6cqw;height:2.6cqw;border:0;border-radius:50%;background:#075df5;color:white;display:grid;place-items:center;padding:.5cqw}
.send-button svg{width:100%;height:100%}
.send-button:hover:not(:disabled){background:#064bd0}
.voice-wave{height:2.6cqw;display:flex;align-items:center;gap:.35cqw;margin:.5cqw 0 .9cqw}
.voice-wave i{width:.3cqw;height:35%;background:#1268f7;border-radius:10px;animation:voice-wave 1s ease-in-out infinite alternate}
.voice-wave i:nth-child(2),.voice-wave i:nth-child(4){height:65%;animation-delay:.25s}
.voice-wave i:nth-child(3){height:100%;animation-delay:.5s}
@keyframes voice-wave{to{transform:scaleY(.4)}}
.floating-panel{position:absolute;z-index:40;left:2.5%;width:28%;background:#fffffff5;backdrop-filter:blur(14px);border:1px solid #fff;border-radius:1.4cqw;box-shadow:0 12px 40px #1649a024;padding:1.4cqw;overflow:auto}
.floating-panel .panel-heading h2{font-size:1.1cqw;color:#112b60;font-weight:600}
.history-panel{top:18%;max-height:70%;width:29%}
.history-panel ol{list-style:none;padding:0;margin:0}
.history-panel li{padding:1cqw 0;border-bottom:1px solid #e5edf5;font-size:.95cqw;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere}
.history-panel li strong{display:block;color:#7286a4;font-size:.7cqw;margin-bottom:.3cqw}
.history-panel li[data-kind="user"]{color:#225ec0}
.diagnostics{left:auto;right:10%;top:16%;max-height:70%;width:31%}
.diagnostics dl{display:grid;grid-template-columns:1fr 1.6fr;gap:.7cqw .8cqw;font-size:.8cqw;line-height:1.6}
.diagnostics dt{color:#788ba7}
.diagnostics dd{margin:0;overflow-wrap:anywhere}
.trace-list{font-size:.68cqw;line-height:1.8;margin:0;padding-left:1.4cqw;color:#617695}
.notice{position:absolute;z-index:45;left:2.5%;bottom:11%;width:28%;background:#fff8ec;border:1px solid #e6d8be;border-radius:1cqw;padding:1cqw 1.25cqw;box-shadow:0 4px 20px #644b1710}
.notice p{margin:0;font-size:.9cqw;line-height:1.8;color:#805b2e;white-space:pre-line}
.notice .text-link{color:#805b2e}
.session-footer{position:absolute;z-index:30;left:2.5%;right:2.5%;bottom:2.6%;display:flex;align-items:center;gap:1cqw}
.status-pill{display:flex;align-items:center;gap:.5cqw;border-radius:30px;background:#ffffffd9;padding:.55cqw .85cqw;color:#496384;font-size:clamp(10px,.75cqw,15px)}
.status-pill i{width:.42cqw;height:.42cqw;background:#9aaabe;border-radius:50%;flex-shrink:0}
.status-pill i.ready{background:#38a278}
.status-pill i.active{background:#1d70ff}
.footer-actions{display:flex;align-items:center;gap:.6cqw;margin-left:auto}
.subtle-button{border:0;border-radius:20px;background:#ffffffc9;color:#5a708d;font-size:clamp(10px,.75cqw,15px);padding:.55cqw .85cqw}
.subtle-button:hover{background:#fff;color:#075df5}
/* Standby: the supplied empty office image and one centered start action. */
.entry-overlay{position:absolute;z-index:50;inset:0;display:grid;place-items:center}
.start-content{text-align:center;transform:translateY(1.5cqw)}
.start-button{display:flex;align-items:center;gap:1.3cqw;padding:1.3cqw 1.8cqw 1.3cqw 1.3cqw;border:2px solid white;border-radius:100px;background:#fffffff2;color:#075bec;box-shadow:0 10px 40px #0055c21d,0 0 0 .5cqw #ffffff45;font-size:1.6cqw;font-weight:700;letter-spacing:.03em;transition:transform .18s,box-shadow .18s}
.start-button:hover{transform:translateY(-3px);box-shadow:0 14px 44px #0055c230,0 0 0 .65cqw #ffffff60}
.start-icon{display:grid;place-items:center;width:3cqw;height:3cqw;background:#edf4ff;border-radius:50%;padding:.6cqw}
.start-icon svg{width:100%;height:100%}
.start-arrow{font-size:1.6cqw;font-weight:400;margin-left:1.2cqw}
.start-content>p{font-size:.83cqw;color:#627c9c;letter-spacing:.025em;margin:1.8cqw 0 0}
.password-overlay,.connection-overlay{background:#edf4fa52;backdrop-filter:blur(5px)}
.password-overlay{z-index:55}
.entry-card{position:relative;width:34%;border:1px solid #fff;background:#fffffff2;border-radius:1.7cqw;box-shadow:0 22px 80px #20477918;padding:2.5cqw}
.entry-close{position:absolute;right:1.2cqw;top:1.2cqw}
.eyebrow{font-size:.68cqw;letter-spacing:.15em;color:#6683ac}
.entry-card h2{font-size:1.75cqw;letter-spacing:.03em;line-height:1.4;margin:1cqw 0}
.entry-card p{font-size:1cqw;line-height:1.95;color:#67809e;margin:0 0 1.7cqw}
.entry-card label{display:block;font-size:.8cqw;margin-bottom:.6cqw}
.password-row{display:flex;gap:.6cqw}
.password-row input{min-width:0;width:100%;font-size:.9cqw;background:#f7faff;border:1px solid #d5e1f0;border-radius:.65cqw;padding:.8cqw;color:#102655}
.primary-button{border:0;border-radius:.65cqw;background:#075df5;color:#fff;font-size:1cqw;font-weight:600;padding:.8cqw 1.3cqw;min-height:2.6cqw;white-space:nowrap}
.primary-button:hover:not(:disabled){background:#064cd0}
.primary-button span{margin-left:.7cqw}
.entry-card .field-error{font-size:.75cqw;color:#b9443e;min-height:1.4em;margin:.6cqw 0 .8cqw}
.entry-card>small{font-size:.68cqw;color:#8a9cb5}
.connection-actions{display:flex;gap:1cqw;align-items:center}
.connection-overlay{z-index:49}
.connection-overlay .entry-card{text-align:center}
.connection-overlay .entry-card p{white-space:pre-line}
.connection-overlay .connection-actions{justify-content:center}
.connection-spinner{display:inline-block;width:2.2cqw;height:2.2cqw;border:2px solid #dceaff;border-top-color:#0763ff;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
noscript{position:absolute;z-index:99;top:50%;left:25%;background:#fff;padding:20px}
@media(max-width:900px){
  .brand-bar h1{font-size:2cqw}.brand-bar h1 span{font-size:1.5cqw}.preview-badge{font-size:1cqw}
  .round-action{width:7.5cqw;min-width:44px;border-width:2px}.round-action svg{width:3.3cqw;height:3.3cqw;min-width:20px;min-height:20px}.round-action span{font-size:1cqw}
  .bubbles{width:27%}.speech-bubble{font-size:1.8cqw}.response.answer{font-size:1.55cqw}
  .user-bubble,.text-panel{right:11%;width:25%;font-size:1.5cqw}.text-panel textarea{font-size:1.5cqw;height:7.5cqw}
  .bubble-label,.panel-heading h2,.text-link{font-size:1.1cqw}.compose-footer small{font-size:.8cqw}.close-button{width:2.5cqw;height:2.5cqw;font-size:1.9cqw}.send-button{width:3.5cqw;height:3.5cqw}
  .start-button{font-size:2.2cqw;padding:1.6cqw 2.2cqw}.start-icon{width:4cqw;height:4cqw}.start-content>p{font-size:1.25cqw}
  .entry-card{width:46%;padding:2.8cqw}.entry-card h2{font-size:2.2cqw}.entry-card p{font-size:1.4cqw;margin-bottom:1.1cqw}.entry-card label,.password-row input,.primary-button{font-size:1.25cqw}.entry-card>small,.eyebrow,.entry-card .field-error{font-size:1cqw}
  .status-pill,.subtle-button{font-size:1.1cqw}.floating-panel{width:35%}.floating-panel .panel-heading h2{font-size:1.5cqw}.history-panel li,.notice p{font-size:1.3cqw}.history-panel li strong,.diagnostics dl{font-size:1.1cqw}.trace-list{font-size:.95cqw}.notice{width:37%}
}
@media(max-width:540px){
  .brand-bar{height:14%;gap:2cqw}.brand-bar img{width:15%}.brand-bar h1{font-size:2.9cqw}.brand-bar h1 span{font-size:2cqw;margin-left:.7cqw}.preview-badge{font-size:1.5cqw;padding:.5cqw}
  .start-button{font-size:3.8cqw;padding:2.5cqw 3.5cqw;gap:2cqw}.start-icon{width:6cqw;height:6cqw;padding:1.2cqw}.start-arrow{font-size:4cqw}.start-content>p{font-size:2cqw;margin-top:3cqw}
  .bubbles{top:22%;width:34%;gap:2cqw}.speech-bubble{font-size:2.6cqw;padding:1.6cqw 2cqw;border-radius:3cqw}.response.answer{font-size:2.4cqw}.speech-bubble p{max-height:22cqw}.bubble-label{font-size:1.9cqw}
  .actions{top:24%;right:2%;gap:2cqw}.round-action{width:12cqw;min-width:44px}.round-action svg{width:5cqw;height:5cqw}.round-action span{font-size:1.7cqw}
  .user-bubble{right:17%;top:54%;width:33%;font-size:2.5cqw}.user-bubble p{max-height:11cqw}
  .text-panel{right:17%;top:23%;width:48%;padding:2cqw}.text-panel textarea{font-size:3cqw;height:15cqw;padding:1cqw 0}.panel-heading{margin-bottom:1cqw}.panel-heading h2{font-size:2.4cqw}.close-button{width:5cqw;height:5cqw;font-size:4cqw}.send-button{width:6cqw;height:6cqw;padding:1cqw}.compose-footer small,.text-link{font-size:2cqw}.voice-wave{height:4cqw;gap:.7cqw}.voice-wave i{width:.7cqw}
  .session-footer{bottom:2.5%;gap:1cqw}.status-pill,.subtle-button{font-size:1.9cqw;padding:1cqw 1.25cqw}.status-pill i{width:1cqw;height:1cqw}.footer-actions{gap:.5cqw}
  .entry-card{width:78%;padding:3cqw;border-radius:3cqw}.entry-close{right:2cqw;top:2cqw}.eyebrow{font-size:1.8cqw}.entry-card h2{font-size:3.5cqw;margin:.8cqw 0}.entry-card p{font-size:2.5cqw;line-height:1.5;margin-bottom:2cqw}.entry-card label,.password-row input,.primary-button{font-size:2.5cqw}.password-row input,.primary-button{padding:1.8cqw 2cqw;border-radius:1.2cqw}.entry-card>small,.entry-card .field-error{font-size:1.9cqw}.entry-card .field-error{margin:1cqw 0}.entry-card label{margin-bottom:1cqw}.connection-spinner{width:5cqw;height:5cqw}
  .floating-panel{left:2.5%;right:auto;top:17%;width:80%;max-height:72%;padding:2cqw;border-radius:2cqw}.floating-panel .panel-heading h2{font-size:3cqw}.history-panel li{font-size:2.8cqw;padding:2cqw 0}.history-panel li strong{font-size:2.2cqw}.diagnostics dl{font-size:2.4cqw;gap:1cqw}.trace-list{font-size:2.1cqw}.notice{width:78%;bottom:16%;padding:2cqw;max-height:65%;overflow:auto}.notice p{font-size:2.7cqw}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}