/* One call surface: Yuki above, captions filling the space to the call controls.
   Keep the video and compositor on the same square coordinate system. */
html,body{height:100%;min-height:0;overflow:hidden}
.app-shell{position:fixed;inset:var(--conversation-top,0px) 0 auto;height:calc(var(--conversation-height,100dvh) - var(--yuki-footer-space,36px));min-height:0;padding:16px;display:flex}
.call-card{container-type:size;width:min(900px,100%);height:100%;min-height:0;margin:auto;padding:0;display:flex;position:relative;overflow:hidden}
.topbar{position:absolute;z-index:10;top:0;left:0;right:0;min-height:48px;margin:0;padding:10px 16px;border:0;align-items:center;background:linear-gradient(#f6f5f0ee,#f6f5f000)}
.topbar .eyebrow,.topbar .subtitle{display:none}.topbar h1{font-size:1.2rem}
.top-actions{flex-direction:row;align-items:center;gap:6px}.icon-button{width:34px;height:34px;font-size:1rem}
.badge{font-size:.7rem;padding:6px 8px;background:#fffefa!important}
.tutor-layout{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:50% minmax(0,1fr) auto;align-items:stretch;gap:0;width:100%;height:100%;min-height:0}
.avatar-column{display:contents}
.call-card .stage{grid-row:1;width:100%;height:100%;aspect-ratio:auto;position:relative;margin:0;border:0;border-radius:0;background:#d8d7d0}
.avatar-scene{inset:0;margin:auto;width:min(100cqw,50cqh);height:min(100cqw,50cqh);aspect-ratio:1}
.state-pill{bottom:10px;font-size:.7rem;padding:4px 8px;white-space:nowrap}
.caption-panel{grid-row:2;display:flex;flex-direction:column;height:auto;min-height:0;max-height:none;min-width:0;margin:0;padding:18px 22px;border:0;border-radius:0;background:#f1f4eb;overflow:hidden}
.speaker{flex:none;font-size:.7rem;line-height:1.4;margin:0 0 12px;color:#65806b}
.caption-panel #caption{display:block;flex:1;min-height:0;min-width:0;margin:0;font-size:1.08rem;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-gutter:stable}
.controls{grid-row:3;display:flex;flex-wrap:nowrap;gap:10px;padding:10px 16px max(10px,env(safe-area-inset-bottom,0px));margin:0;border-top:1px solid #dce4d6;background:#fffefa}
.controls button{min-height:46px;min-width:0;flex:1;padding:8px 12px;font-size:.9rem;border-radius:12px}.controls #callButton{flex:2}
button:focus-visible,#caption:focus-visible{outline:3px solid #b69749;outline-offset:-3px}
button{touch-action:manipulation}
.review-dialog{max-height:85dvh;overflow:auto}.review-dialog-content{padding:22px}
.review-dialog .renderer-line{width:100%;margin-top:20px;flex-wrap:wrap}
.review-dialog .renderer-line span:first-child{max-width:100%}.review-dialog .usage-note{text-align:left}
.settings-dialog{max-height:90dvh;overflow:auto}.settings-dialog input{font-size:16px}
@media(max-width:800px){
  .app-shell{padding:0}
  .call-card{width:100%;max-width:none;height:100%;border:0;border-radius:0}
  .topbar{padding:max(6px,env(safe-area-inset-top,0px)) 10px 6px}
  .caption-panel{padding:14px 16px}
  .caption-panel #caption{font-size:1rem;line-height:1.55}
  .controls{padding:8px 12px max(8px,env(safe-area-inset-bottom,0px))}
}
@media(max-height:560px){
  .caption-panel{padding:8px 12px}.speaker{font-size:.62rem;margin-bottom:6px}
  .caption-panel #caption{font-size:.88rem;line-height:1.45}
  .controls{padding:6px 10px max(6px,env(safe-area-inset-bottom,0px))}.controls button{min-height:40px;font-size:.8rem}
}

/* Match the encoded v16 background at the video edges. */
.avatar-body{background:#d8d7d0}