/* Character-first viewport. Original raster assets and rig pivots are unchanged. */
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Tahoma,Arial,sans-serif;color:#29364f}body{background:#faf7fc}button,input,select{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.45;cursor:default}a{color:#435c85}*:focus-visible{outline:3px solid #5088b3;outline-offset:4px}
.character-only{background:radial-gradient(ellipse at 50% 60%,#e7eef9 0,transparent 56%),radial-gradient(ellipse at 75% 24%,#fff1f5 0,transparent 56%),#faf9fc;overflow-x:hidden}
.conversation-shell{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;padding:58px 16px max(18px,env(safe-area-inset-bottom));isolation:isolate}
.settings-button{position:absolute;top:max(14px,env(safe-area-inset-top));inset-inline-end:16px;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#ffffff8c;color:#8b8fa7;z-index:10}
.settings-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.conversation-shell .characters{width:100%;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:0}
.conversation-shell .character{height:auto;width:auto;justify-content:center}
.conversation-shell .characters.single-teacher .avatar{height:min(640px,calc(100svh - 210px),139vw);min-height:190px;max-height:none;filter:drop-shadow(0 15px 12px #8696b52b)}
.conversation-controls{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:20px;min-height:111px}
#status{margin:0;font-size:12px;color:#717c90;min-height:19px;letter-spacing:0}
#talkButton{display:grid;place-items:center;height:66px;width:66px;border:1px solid #d6e1ee;border-radius:50%;background:#fff;color:#567a9b;box-shadow:0 7px 22px #8198bb22}
#talkButton svg{height:27px;width:27px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.stop-icon{display:none;width:19px;height:19px;border-radius:4px;background:currentColor}
#talkButton[aria-pressed="true"] .mic-icon{display:none}#talkButton[aria-pressed="true"] .stop-icon{display:block}
#notice{font-size:12px;text-align:center;color:#92565f;margin:8px 0 0;max-width:330px;line-height:1.7}
.account-page{min-height:100svh;display:grid;place-items:center;padding:20px;background:linear-gradient(145deg,#f5f8fd,#fff5f8)}
.account-card{width:min(430px,100%);padding:27px;border:1px solid #e0e5f0;border-radius:24px;background:#fff;box-shadow:0 20px 50px #778ca215}
.account-card h1{font-size:23px;margin:0 0 14px}.account-card p{font-size:13px;line-height:1.9;color:#67758c}
.account-card form{display:grid;gap:10px}.account-card label{font-size:13px;margin-top:7px}.account-card input,.account-card select{padding:11px;border:1px solid #ced7e4;border-radius:11px;min-height:45px;width:100%;font-size:16px;background:white;color:#243953}
.action{margin-top:12px;padding:12px;border:0;border-radius:13px;color:#fff;background:#557999}.quiet{padding:9px 4px;border:0;background:transparent;color:#67758c;font-size:13px}.account-card .error{color:#98434b;min-height:20px}.account-card nav{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:18px}.account-card nav a{font-size:13px}
@media(max-height:540px){.conversation-shell{padding-top:40px}.conversation-controls{min-height:90px;margin-top:6px}#talkButton{height:50px;width:50px}.conversation-shell .characters.single-teacher .avatar{height:calc(100svh - 165px);min-height:120px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* Reset legacy V3 mobile order/max-height so controls remain BELOW the avatar. */
.conversation-shell{height:100svh;min-height:360px}
.conversation-shell .characters{order:0;max-height:none;height:auto;min-height:0}
.conversation-controls{order:1;flex:0 0 auto}
#notice{order:2}
/* Replay the SAME turn. A mobile browser can refuse a sound that starts seconds after the tap which
   requested it, so the family needs one fresh tap to hear a reply that already arrived. */
#replayButton{order:3;align-self:center;margin:10px 0 0;padding:10px 20px;min-height:42px;border:1px solid #ced7e4;border-radius:12px;background:#fff;color:#3f5f7d;font:inherit;font-size:13px}
#replayButton:disabled{opacity:.55}
/* Required disclosure: the reply is machine-generated and may be wrong.
   Kept small and centred at the end of the page so it never crowds the character. */
.disclosure{margin:16px 8px 6px;color:#67758c;font-size:12px;line-height:1.7;text-align:center}

/* Child mode: hide everything that leads out of the conversation, keep the character area intact. */
body.child-lock #settingsLink,body.child-lock #memoryLink,body.child-lock nav,body.child-lock input,body.child-lock textarea{display:none !important;}
body.child-lock #stage{min-height:78vh;}
#parentLock{position:fixed;inset-inline-start:8px;bottom:8px;width:34px;height:34px;border-radius:50%;
 background:transparent;opacity:.18;z-index:40;-webkit-user-select:none;user-select:none;touch-action:none;}
#parentLock.holding{opacity:.55;}
.childlock{margin:10px 0;color:#44506b;font-size:13px}
.childlockNote{color:#8a6d3b;font-size:12px;line-height:1.7}
/* Applied from an inline rule before first paint, so the parent entry is never briefly tappable. */
html.child-lock #settingsLink,html.child-lock #memoryLink,html.child-lock nav,html.child-lock input,html.child-lock textarea{display:none !important;}

/* stop-controls-unoccluded: the parent's stop must win the hit test in every orientation and size. */
#talkButton,#replayButton{position:relative;z-index:60;touch-action:manipulation;}
#parentLock{z-index:40;}
@media (max-height:560px){
  body.child-lock #stage,html.child-lock #stage{min-height:48vh;}
  body.child-lock #stage .character,html.child-lock #stage .character{max-height:52vh;}
}

/* stop-controls-unoccluded-2: the stage sits under the controls in child mode, on every short screen. */
body.child-lock #stage,html.child-lock #stage{position:relative;z-index:1;}
body.child-lock #talkButton,body.child-lock #replayButton,
html.child-lock #talkButton,html.child-lock #replayButton{z-index:70;}
@media (max-height:720px){
  body.child-lock #stage,html.child-lock #stage{min-height:54vh;}
}