.machi-phone{position:fixed;inset:0;z-index:42;background:radial-gradient(ellipse at 55% 60%,#1b302321,#12252a70);backdrop-filter:blur(3px);display:grid;place-items:center;font-family:'Machi Sans',sans-serif;color:#314940}
.phone-held{position:relative;height:118dvh;aspect-ratio:1133/1388;transform-origin:50% 90%;animation:phone-lift .65s cubic-bezier(.2,.8,.2,1) both;align-self:end;margin-bottom:-11dvh}
.phone-held>img{width:100%;height:100%;object-fit:contain;pointer-events:none}.phone-screen{position:absolute;left:31%;top:10%;width:44%;height:72%;padding:3%;box-sizing:border-box;overflow-y:auto;text-align:center;scrollbar-width:thin;scrollbar-color:#75867655 transparent}
.phone-kicker{font-size:clamp(9px,1.4vh,12px);letter-spacing:.12em;margin:0 0 1.4vh}.phone-screen h1{font-family:Georgia,serif;font-size:clamp(17px,3vh,28px);font-weight:400;line-height:1.2;margin:1vh 0 2vh}.phone-screen h2{font-size:clamp(16px,2.5vh,23px);font-weight:500;margin:1vh 0}.phone-avatar{display:block;width:65%;height:17vh;object-fit:cover;object-position:50% 14%;margin:auto;border-radius:48% 48% 44% 44%;background:#d7dfd1}.phone-muted,.phone-status,.phone-demo{font-size:clamp(10px,1.7vh,14px);line-height:1.5}.phone-screen button{border:0;border-radius:24px;padding:10px 15px;font:inherit;font-size:clamp(12px,1.9vh,16px);cursor:pointer}.phone-call{background:#536d62;color:#fff9ec;width:100%;margin:1vh 0 2vh}.phone-demo{display:flex;align-items:center;gap:5px;text-align:left;color:#717e71}.phone-demo input{accent-color:#536d62;flex:0 0 auto}.phone-status{color:#6c786a}.phone-resume{background:transparent;color:#45665d;text-decoration:underline}.phone-close{position:absolute;right:5vw;top:5vh;border:1px solid #ffffff55;border-radius:50%;width:44px;height:44px;font-size:28px;background:#263e3d55;color:#fff8e9;cursor:pointer}
@keyframes phone-lift{from{transform:translate(15vw,70vh) rotate(16deg);opacity:0}to{transform:none;opacity:1}}
.cv-call-heard{font-size:12px;line-height:1.5;border-bottom:1px solid #ffffff30;padding-bottom:10px;margin-bottom:10px}.cv-call-heard p{margin:7px 0}.cv-phone-call .hidden{display:none!important}.cv-phone-call[data-stage=summary] .cv-summary-grid{grid-template-columns:1fr}.book-save{min-width:36px;display:grid;place-items:center}.book-item-mark img{vertical-align:middle}
@media(prefers-reduced-motion:reduce){.phone-held{animation:none}}
.cv-phone-call .cv-layout{z-index:5}.cv-phone-call .cv-call-heard,.cv-phone-call .cv-call-heard p{color:#f7f8ed}

.phone-home{position:absolute;left:30%;top:8.4%;width:46%;height:75%;box-sizing:border-box;border-radius:3.3vh;padding:3%;display:flex;flex-direction:column;text-align:center;background:radial-gradient(ellipse at 15% 80%,#ccdbcb,transparent 70%),linear-gradient(160deg,#f5f0db,#dce7dd 58%,#b6cdcc);color:#365149;overflow:hidden}.phone-home[hidden],.phone-screen[hidden]{display:none}.phone-system{font-size:9px;text-align:left;margin:0 0 2vh}.phone-clock{font-family:Georgia,serif;font-size:clamp(26px,6vh,54px);font-weight:400;letter-spacing:-.04em}.phone-home-note{font-size:clamp(9px,1.6vh,13px);margin:1vh 0 3vh;line-height:1.5}.phone-apps{display:grid;grid-template-columns:repeat(3,1fr);gap:2vh 6px}.phone-inactive-app span{display:grid;place-items:center;width:clamp(27px,7vh,48px);height:clamp(27px,7vh,48px);border-radius:23%;color:#fff9ed;font-size:clamp(19px,4vh,28px);margin:auto;opacity:.58}.phone-inactive-app small{display:block;font-size:clamp(8px,1.4vh,11px);margin-top:5px;opacity:.7}.phone-dock{margin-top:auto;padding:1.5vh;background:#fff8;border:1px solid #fff7;border-radius:3vh}.phone-app-launch{display:block;position:relative;margin:auto;border:0;width:clamp(38px,9vh,64px);height:clamp(38px,9vh,64px);border-radius:24%;background:#5b9876;color:#fff;cursor:pointer;box-shadow:0 0 0 6px #76b09433,0 0 24px #7fb3918c;animation:phone-glow 2.2s ease-in-out infinite}.phone-app-launch svg{width:60%;height:60%;fill:#fff;stroke:none}.phone-app-launch small{position:absolute;bottom:-16px;left:0;width:100%;font-size:10px;color:#365149}.phone-dock{padding-bottom:24px}@keyframes phone-glow{50%{box-shadow:0 0 0 9px #76b09415,0 0 32px #629e81b0}}@media(prefers-reduced-motion:reduce){.phone-app-launch{animation:none}}

.phone-guidance{font-size:clamp(11px,1.8vh,14px);line-height:1.7;color:#67776a;margin:1vh 0 2vh;text-wrap:pretty}.phone-status:empty{display:none}

.cv-phone-call[data-call-start=true] .cv-dialogue,.cv-phone-call[data-call-start=true] .cv-tools{display:none}

/* Calibrated to the painted screen; the photograph is cropped within a circle. */
.cv-call-device{position:absolute;left:0;bottom:-15vh;width:min(47vw,94.7vh);aspect-ratio:1133/1388}
.cv-call-device-art{position:absolute;width:100%;height:100%;pointer-events:none}
.cv-call-screen{position:absolute;left:30%;top:8.4%;width:46%;height:75%;border-radius:3.5vh;background:radial-gradient(ellipse at 10% 80%,#5b7570,transparent 75%),linear-gradient(155deg,#243947,#485365 55%,#263e43);color:#f2f5ee;display:flex;flex-direction:column;align-items:center;box-sizing:border-box;padding:7% 4% 5%;overflow:hidden;text-align:center;box-shadow:inset 0 1px 5px #081b3380}
.cv-call-connected{font-size:clamp(7px,1.5vh,11px);letter-spacing:.13em;color:#c6d7d3;margin:0 0 5%}
.cv-call-photo{width:55%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:#aebdaf;box-shadow:0 0 0 1px #eaf8ec44;flex:none}
.cv-call-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
.cv-call-screen h2{font-size:clamp(16px,3.5vh,27px);font-weight:400;letter-spacing:.025em;margin:8% 0 3%;line-height:1.3}
.cv-call-status{font-size:clamp(10px,1.7vh,14px);color:#d2dedb;margin:0}
.cv-call-speaker{margin:auto 0;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:clamp(9px,1.6vh,12px);color:#e2eae5}
.cv-call-speaker svg{width:clamp(20px,4vh,32px);height:clamp(20px,4vh,32px);padding:10px;border-radius:50%;background:#ffffff18;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.cv-call-screen .cv-call-hangup{display:grid;place-items:center;flex:none;width:clamp(40px,8vh,60px);height:clamp(40px,8vh,60px);min-height:0;border:0;border-radius:50%;padding:0;box-sizing:border-box;line-height:1;background:#b75250;color:white}
.cv-call-screen .cv-call-hangup:hover{background:#ce605a}.cv-call-hangup svg{display:block;width:25px;height:25px;fill:currentColor;stroke:none;justify-self:center;align-self:center}
.cv-call-end-label{font-size:clamp(9px,1.5vh,12px);margin-top:5%;color:#e4eae2}
.cv-phone-call[data-coach=true] .cv-call-device{filter:blur(5px);opacity:.4;pointer-events:none}
.cv-phone-call:not([data-coach=true]) .cv-layout{--rail:clamp(300px,39vw,500px)}
.cv-phone-call:not([data-coach=true]) .cv-assistance.cv-response{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(92px,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:18px;padding:24px;overflow:hidden;text-align:left}
.cv-phone-call .cv-response-head{grid-column:1/-1;grid-row:1;display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0;padding:0 0 14px;border-bottom:1px solid #deedf230}
.cv-phone-call .cv-response-head .cv-aside-title{margin:0;font-size:clamp(22px,3vh,30px)}
.cv-phone-call .cv-response-hints{grid-row:2;grid-column:1;overflow:auto;min-height:0;padding:0 9px 0 0;scrollbar-width:thin;scrollbar-color:#d1e3dd66 transparent}
.cv-phone-call .cv-response-voice{grid-row:2;grid-column:2;align-self:center;min-width:0}
.cv-phone-call .cv-response-voice .cv-voice{margin:0;gap:14px}
.cv-phone-call .cv-response-actions{grid-column:1/-1;grid-row:3;display:flex;justify-content:flex-start;gap:18px;margin:0;padding-top:10px;border-top:1px solid #deedf230}
.cv-phone-call .cv-response-actions .cv-button{width:auto;flex:none;font-size:12px;padding:8px 4px;min-height:36px;border:0}
.cv-phone-call .cv-coach-popover{position:static;width:auto;max-height:none;overflow:visible;padding:0;margin:0;background:none;border:0;box-shadow:none}
.cv-phone-call .cv-intents{gap:9px}.cv-phone-call .cv-intents .cv-button{font-size:14px;padding:10px 12px;min-height:42px;line-height:1.5}
.cv-phone-call .cv-response-head .cv-coach-trigger{width:auto;margin:0;font-size:12px;padding:7px 10px;min-height:36px;white-space:nowrap}
@media(max-height:500px){
 .cv-phone-call:not([data-coach=true]) .cv-layout{--rail:clamp(300px,43vw,370px)}
 .cv-phone-call:not([data-coach=true]) .cv-assistance.cv-response{padding:16px;gap:10px 14px;grid-template-columns:minmax(0,1.5fr) minmax(82px,1fr)}
 .cv-phone-call .cv-response-head{padding-bottom:10px}.cv-phone-call .cv-intents .cv-button{font-size:12px;padding:8px 10px;min-height:40px}
 .cv-phone-call .cv-response-head .cv-coach-trigger{font-size:11px;padding:6px 8px}.cv-phone-call .cv-response-actions{padding-top:5px;gap:14px}
}

.phone-close{box-sizing:border-box;display:grid;place-items:center;padding:0;min-height:0;line-height:1;aspect-ratio:1}
.phone-close svg{width:22px;height:22px;display:block;stroke-width:1.8}
.phone-app-launch{box-sizing:border-box;padding:0;min-height:0;aspect-ratio:1;display:grid;place-items:center;flex:none}
.cv-call-photo{position:relative}.cv-call-photo img{position:absolute;width:140%;height:140%;max-width:none;left:-20%;top:0;image-rendering:auto}
/* During listening, paper lives inside the right rail so the phone stays visible. */
.machi-conversation.cv-phone-call[data-stage=speaking] .cv-dialogue{left:auto;right:14px;width:calc(var(--rail) - 28px);top:86px;bottom:72px;max-height:none;padding:18px 20px;z-index:6}
.cv-phone-call[data-stage=speaking] .cv-assistance>.cv-kicker,.cv-phone-call[data-stage=speaking] .cv-assistance>.cv-aside-title,.cv-phone-call[data-stage=speaking] .cv-assistance>.cv-copy{display:none}
.cv-phone-call[data-stage=speaking] .cv-assistance>.cv-button{position:absolute;bottom:14px;left:24px;right:24px;width:calc(100% - 48px);margin:0;text-align:center}
.cv-phone-call[data-stage=speaking] .cv-call-heard{position:relative;margin:0;text-align:left;font-size:11px;z-index:8;padding:0;border:0}
.cv-phone-call[data-stage=speaking] .cv-call-heard[open]{background:#304d59;padding:10px;border-radius:8px;box-shadow:0 5px 20px #142f4566}
.cv-phone-call[data-stage=speaking] .cv-tools{left:auto;right:24px;top:40px;bottom:auto;width:calc(var(--rail) - 48px);flex-direction:row;justify-content:flex-start;z-index:7}
.cv-phone-call[data-stage=speaking] .cv-tools .cv-tool{min-height:32px;height:32px;padding:6px;width:74px}
.cv-phone-call[data-stage=speaking][data-translated=true] .cv-assistance{visibility:visible;pointer-events:auto}
.cv-phone-call[data-stage=response] .cv-dialogue,.cv-phone-call[data-stage=response] .cv-tools{display:none}
@media(max-height:500px){.machi-conversation.cv-phone-call[data-stage=speaking] .cv-dialogue{top:76px;bottom:66px;padding:14px 16px}.cv-phone-call[data-stage=speaking] .cv-tools{top:34px}.cv-phone-call[data-stage=speaking] .cv-call-heard{font-size:10px}.cv-phone-call[data-stage=speaking] .cv-japanese{font-size:20px}}
.machi-conversation.cv-phone-call[data-stage=speaking] .cv-layout>.cv-dialogue{left:auto;right:14px;top:86px;bottom:72px;max-height:none}
.cv-call-speaker svg{box-sizing:content-box}
@media(max-height:500px){.machi-conversation.cv-phone-call[data-stage=speaking] .cv-layout>.cv-dialogue{top:76px;bottom:66px}}
.cv-phone-call[data-stage=speaking] .cv-call-heard{position:absolute;top:12px;left:24px;right:24px}
.cv-phone-call[data-stage=speaking] .cv-call-heard summary{font:inherit;line-height:16px;min-height:0;padding:0;color:#e3ede7}
