/* One phone coordinate system: status / content / system navigation.
   Container units follow the rendered screen, not the surrounding desktop. */
:root{--visible-height:100dvh;--visible-top:0px}
html,body,#root{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
.desktop-layout{width:100%;height:100dvh;min-height:0;padding:16px;display:flex;align-items:center;justify-content:center}
.phone-wrap{width:auto;height:100%;max-width:100%;display:flex;align-items:center;justify-content:center}
.phone-shell{width:min(414px,calc((100dvh - 32px)*390/844));height:auto;aspect-ratio:390/844;min-height:0;max-height:100%;padding:8px;border:2px solid #4c4d52;border-radius:46px;flex:none}
.phone-screen{width:100%;height:100%;padding:0;border-radius:35px;container-type:size;container-name:phone;--safe-top:0px;--safe-bottom:0px;--phone-top:52px;--phone-bottom:24px;--system-bottom:24px;--side:clamp(12px,5cqw,22px)}
.phone-screen.has-navigation{--system-bottom:calc(64px + var(--safe-bottom));--phone-bottom:var(--system-bottom)}
.screen-content{position:absolute;inset:0;height:100%;width:100%;min-width:0;min-height:0}
.statusbar{height:var(--phone-top);padding:calc(var(--safe-top) + 8px) clamp(16px,6cqw,26px) 0;pointer-events:none}
.statusbar>b{font-size:12px;min-width:40px}.status-icons{max-width:80px;flex:none;gap:3px}.status-icons svg{flex:none}
.island{top:calc(var(--safe-top) + 10px);width:clamp(82px,26cqw,108px);height:28px;min-height:28px;left:50%;transform:translateX(-50%)}
.app,.maps-v63{height:100%;min-height:0;min-width:0;padding-top:var(--phone-top)!important;padding-bottom:var(--system-bottom)!important}
.app-nav,.chat-nav,.browser-top,.map-nav{position:relative;top:auto;min-height:44px;flex-shrink:0}
.app-nav strong,.chat-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tool-button,.chat-nav>.tool-button,.chat-nav>div .tool-button,.chat-composer>.tool-button,.composer-field .tool-button,.send-message{min-width:44px!important;min-height:44px!important;width:44px;height:44px;flex-shrink:0}
.native-scroll,.pet-scroll,.phone-scroll,.settings-scroll,.friends-scroll,.more-scroll,.chat-list-scroll,.chat-scroll,.browser-scroll,.map-sheet-scroll{min-height:0;min-width:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none}
.native-scroll,.pet-scroll,.phone-scroll,.settings-scroll,.browser-scroll{scroll-padding-block:16px}
.device-navigation{position:absolute;bottom:0;inset-inline:0;height:var(--system-bottom);padding:2px max(12px,var(--side)) calc(18px + var(--safe-bottom));display:flex;gap:clamp(12px,8cqw,36px);justify-content:center;align-items:center;background:#f8f8fa;box-shadow:0 -1px #0000000c;z-index:34;color:#4b4b52}
.device-navigation button{display:flex;align-items:center;justify-content:center;gap:7px;flex:0 1 108px;min-width:44px;min-height:44px;height:44px;padding:0 8px;font-size:12px;line-height:1;white-space:nowrap;border-radius:15px}
.device-navigation button:active{background:#0000000c}.device-navigation button:disabled{opacity:.3}.device-navigation svg{width:19px;height:19px}
.device-navigation:after{content:'';position:absolute;bottom:calc(7px + var(--safe-bottom));left:50%;translate:-50% 0;width:clamp(90px,30cqw,126px);height:4px;border-radius:3px;background:currentColor;pointer-events:none}
.light-status .device-navigation{background:#0003;color:white;box-shadow:none}
.home-indicator{bottom:var(--safe-bottom);height:44px;min-height:44px}
.home-content{height:100%;display:flex;flex-direction:column;padding:calc(var(--phone-top) + clamp(10px,2cqh,22px)) var(--side) calc(var(--system-bottom) + 10px);--app-icon-size:clamp(44px,15cqw,62px);--app-icon-radius:calc(var(--app-icon-size)*.24);gap:0;overflow:hidden}
.home-date{flex:none;font-size:clamp(15px,4.7cqw,19px);line-height:1.3;margin:0 0 clamp(10px,1.7cqh,16px);overflow-wrap:anywhere}
.world-widget{width:100%;height:auto;min-height:0;flex:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:clamp(11px,3.5cqw,17px);margin:0 0 clamp(16px,3cqh,26px);border-radius:21px}
.widget-city{min-width:0;margin:0;gap:8px;font-size:clamp(10px,3cqw,12px);line-height:1.3}.widget-city+.widget-city{padding-left:12px}.widget-city b{font-size:clamp(25px,8cqw,34px);line-height:1;letter-spacing:-1px;white-space:nowrap}
.home-grid{display:grid;width:100%;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2.8cqh,24px) clamp(4px,2cqw,10px);flex:none;margin:0;align-content:start;align-items:start}
.app-button{min-width:0;min-height:0;width:100%;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px}
.home-content .app-icon{flex:none;aspect-ratio:1;width:var(--app-icon-size);height:var(--app-icon-size);margin:0}.home-content .app-artwork{aspect-ratio:1;object-fit:contain}
.app-name{display:block;max-width:100%;font-size:11px;line-height:16px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-align:center;letter-spacing:-.25px}
.home-spacer{flex:1;min-height:12px}.dock{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));flex:none;gap:clamp(4px,2cqw,10px);padding:10px 0;min-height:0;border-radius:24px;width:100%;margin:0}.dock .app-button{min-height:0;justify-content:center}
.lock-content{height:100%;padding:calc(var(--phone-top) + clamp(16px,3cqh,30px)) var(--side) calc(34px + var(--safe-bottom));min-height:0}.lock-date{font-size:clamp(14px,4.2cqw,18px)}.lock-clock{font-size:clamp(58px,21cqw,86px);line-height:1.1}.lock-space{min-height:12px}.unlock{min-height:44px}
.wallpaper.lock img{object-position:var(--lock-crop,43%) 50%}.wallpaper.home img{object-position:var(--home-crop,50%) 50%}
.notification-wrap{top:calc(var(--phone-top) + 4px);max-height:calc(100% - var(--phone-top) - var(--system-bottom));overflow:auto}.notification{min-width:0}.notification p{overflow-wrap:anywhere}
.chat-composer{gap:3px;padding:5px 4px;min-height:54px;flex:none}.composer-field{padding-left:9px;min-width:0;min-height:44px}.composer-field textarea{max-height:min(90px,20cqh);font-size:16px}.chat-scroll{padding-inline:clamp(9px,3cqw,16px)}
.message,.archive-message{min-width:0;gap:6px}.message>div,.archive-message .message-body{min-width:0;max-width:calc(100% - 38px)}.archive-message.sent .message-body,.message.sent>div{max-width:92%}.bubble-row{display:flex;min-width:0;max-width:100%;gap:4px}.bubble-row .bubble{min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:keep-all}.message-meta{flex-shrink:0}.bubble-row time{font-size:9px;white-space:nowrap;flex-shrink:0}
.room-row{padding-inline:clamp(10px,4cqw,18px);gap:9px}.room-copy{min-width:0}.room-meta{min-width:43px!important;flex-basis:43px!important}.chat-tabbar{flex:none;height:56px;padding-inline:4px}.chat-tabbar button{height:52px;min-height:44px}
.reply-area{max-height:45cqh;overflow:auto;flex-shrink:0}.reply-choice{min-height:44px}.chat-title{font-size:16px;padding-left:6px}.chat-nav{gap:0;padding-inline:5px}
.browser-scroll *{max-width:100%}.browser-article h1{font-size:clamp(22px,6.4cqw,28px);overflow-wrap:anywhere}.browser-article,.browser-start{padding-inline:clamp(14px,5cqw,22px)}.browser-history button>span,.result-card h2{min-width:0;overflow-wrap:anywhere}.browser-chrome{padding:6px 10px 0}.browser-actions{height:44px;margin:0}.browser-address{min-height:44px}.browser-top>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.maps-v63 .geo-map{height:clamp(148px,32cqh,300px)!important;min-height:0!important;flex:0 0 clamp(148px,32cqh,300px)!important}
.maps-v63.sheet-expanded .geo-map{height:clamp(100px,18cqh,165px)!important;flex-basis:clamp(100px,18cqh,165px)!important}
.map-nav{height:44px;min-height:44px}.map-sheet-v63{min-height:0;flex:1}.map-sheet-handle{height:44px;min-height:44px;flex-basis:44px}.map-search-field{flex-shrink:0;min-width:0}.map-search-field input{min-width:0;font-size:16px}.map-sheet-scroll{padding-inline:clamp(12px,4.5cqw,20px)}.map-sheet-scroll h1{font-size:clamp(20px,6cqw,25px);overflow-wrap:anywhere}.place-photo{max-height:24cqh;object-fit:cover}
.geo-map .map-controls{top:8px;right:8px}.geo-map .map-controls button{width:44px;height:44px;min-height:44px}.geo-map .map-pan{left:8px;bottom:16px}.geo-map .map-pan button{width:44px;height:44px;min-height:44px}.map-compass{display:none}
.pet-intro{padding:clamp(16px,3cqh,30px) 14px}.pet-options{gap:10px;margin:24px 0}.pet-select{min-width:0;padding:16px 4px}.pet-select .sprite{display:block;width:108px;height:96px;max-width:100%;margin:auto}.pet-landscape{height:clamp(160px,25cqh,230px);margin-inline:var(--side)}.pet-character{width:144px;bottom:24px}.pet-character .sprite{display:block;width:144px;height:128px;filter:none}.pet-friend{width:108px;right:0}.pet-friend .sprite{display:block;width:108px;height:96px;filter:none}.pet-comment-character{width:108px}.pet-comment-character svg{width:108px;height:96px;filter:none}.pet-actions{padding-inline:var(--side);gap:6px}.pet-actions button{min-width:0;min-height:60px;font-size:11px;overflow-wrap:anywhere}.pet-stats progress{min-width:0}.pet-stats{margin:18px var(--side)}.pet-heading{padding:16px var(--side)}
.app-overlay{padding-top:var(--phone-top);padding-bottom:0}.app-sheet{max-height:100%;min-height:0;padding-bottom:calc(12px + var(--safe-bottom))}.sheet-body{min-height:0;overflow:auto;overscroll-behavior:contain}.pet-comment-overlay{padding:calc(var(--phone-top) + 8px) 20px calc(var(--safe-bottom) + 20px)}.pet-comment-overlay .app-sheet{max-height:100%}.profile-photo-full{max-height:60cqh}.profile-spacer{min-height:12px}.profile-actions{flex:none}.profile-actions button{min-height:44px}
.dialer{overflow-y:auto;justify-content:flex-start;min-height:0;padding:0 12px;scrollbar-width:none}.dial-number{flex:none;min-height:48px;font-size:25px}.dial-grid{grid-template-columns:repeat(3,clamp(44px,16cqw,66px));gap:clamp(5px,1.3cqh,12px) clamp(20px,7cqw,28px);margin:8px 0;flex:none}.dial-grid>button{width:clamp(44px,16cqw,66px);height:clamp(44px,16cqw,66px);min-height:44px}.dial-grid b{font-size:27px}.phone-tabs{margin:5px 14px 4px;flex:none}.phone-heading{flex-basis:52px;min-height:52px}
.clock-city{gap:12px;padding:20px var(--side)}.clock-city>div{min-width:0}.clock-city h2{font-size:clamp(19px,6cqw,25px)}.city-digital{font-size:clamp(29px,10cqw,43px);white-space:nowrap}.album>img{width:min(205px,60cqw);height:auto;aspect-ratio:1}.note-content{padding-inline:var(--side)}.note-items li>div,.settings-entry>span,.list-row>div{min-width:0;overflow-wrap:anywhere}
.call-screen{height:100%;min-height:0;overflow:auto;padding:calc(var(--phone-top) + 18px) var(--side) calc(24px + var(--safe-bottom));gap:16px}.call-head{flex:none}.call-caption{flex:1;min-height:130px;padding:12px 0}.call-caption p{font-size:clamp(17px,5cqw,21px);line-height:1.6}.call-controls{flex:none;padding-top:0}.answer-slider{flex:none;min-height:73px}.ring-ripple{flex:none;min-height:60px;width:60px;height:60px;margin:auto}
.keyboard-open .maps-v63 .geo-map{display:none}
@container phone (max-height:650px){.home-content{padding-top:calc(var(--phone-top) + 10px);--app-icon-size:clamp(44px,14.5cqw,56px)}.home-date{margin-bottom:10px}.world-widget{padding:11px 13px;margin-bottom:18px}.widget-city{gap:7px}.widget-city b{font-size:clamp(25px,7.5cqw,30px)}.home-grid{row-gap:16px}.pet-heading{padding-block:12px}.pet-landscape{height:160px}.caller-symbol{width:44px;height:44px;margin-bottom:9px}.call-head h1{font-size:27px}}
@container phone (max-height:470px){.home-content{padding-top:calc(var(--phone-top) + 5px);overflow-y:auto}.home-date{font-size:14px;margin-bottom:6px}.world-widget{padding:8px 11px;margin-bottom:10px}.widget-city{gap:4px}.widget-city b{font-size:24px}.home-grid{row-gap:10px}.home-spacer{min-height:10px}.dock{padding:6px 0}.pet-intro{padding-top:12px}.pet-options{margin:15px 0}}
@media(max-width:600px){.desktop-layout{height:var(--visible-height,100dvh);position:fixed;top:var(--visible-top,0px);left:0;padding:0;background:#000}.phone-wrap{width:100%;height:100%;display:block}.phone-shell{width:100%;height:100%;min-height:0;max-height:none;padding:0;border:0;aspect-ratio:auto;border-radius:0;box-shadow:none}.phone-shell:before,.phone-shell:after{display:none}.phone-screen{border-radius:0;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--phone-top:calc(52px + var(--safe-top))}.keyboard-open .phone-screen{--system-bottom:0px;--phone-bottom:0px}.keyboard-open .device-navigation,.keyboard-open .home-indicator{display:none}.keyboard-open .chat-scroll{min-height:0}.keyboard-open .app-overlay{padding-bottom:0}}

/* Keep interface symbols square independently of text/flex width constraints. */
.ui-glyph{aspect-ratio:1;flex-shrink:0;object-fit:contain}
.settings-entry .settings-icon{flex:0 0 29px;min-width:29px;width:29px;height:29px;aspect-ratio:1}
.settings-entry .settings-icon>.ui-glyph{width:21px;height:21px;margin:0}
.settings-entry>div{min-width:0;flex:1;overflow-wrap:anywhere}
.send-message .ui-glyph{width:21px;height:21px}
.browser-history .ui-glyph{width:18px;height:18px}
.browser-history .ui-glyph:last-child{width:12px;height:12px}
.results-header .ui-glyph{width:18px;height:18px}
.settings-search svg,.safari-search-field svg{width:18px;height:18px;flex:none}
.map-search-field svg{width:19px;height:19px;flex:none}
.map-recent-row svg{width:17px;height:17px;flex:none}
.back svg{width:22px;height:22px;flex:none}
.app-artwork{aspect-ratio:1;object-fit:contain;flex-shrink:0}

/* Call layout: contact, elapsed time, automatic dialogue, native end control. */
.natural-call .caller-symbol{width:72px;height:72px;margin:0 auto 16px;background:#ffffff18}
.natural-call .caller-symbol .ui-glyph{width:38px;height:38px}
.natural-call .call-head h1{font-size:32px;line-height:1.2;margin:0 0 8px}
.natural-call .call-caption{flex:1;background:none;box-shadow:none;max-width:330px;min-height:110px;padding:20px 8px;text-align:center}
.natural-call .call-caption p{font-size:clamp(17px,4.8cqw,20px);line-height:1.65;margin:0;text-wrap:pretty}
.natural-call .call-controls{padding:0 0 18px;align-items:center}
.natural-call .end-call{width:66px;height:66px;min-width:66px;min-height:66px;border-radius:50%;display:grid;place-items:center;padding:0;background:#ff453a;color:#fff}
.natural-call .end-call:disabled{opacity:.75}
.natural-call .end-call svg{width:27px;height:27px;margin:0}
.settings-app .app-nav .nav-spacer{background:none}
.settings-entry{align-items:center}
.settings-entry>div{line-height:1.35}
.settings-entry .setting-value{white-space:nowrap;flex:none;align-self:center}
.tool-button,.send-message{align-items:center;justify-content:center}
.chat-tabbar button,.phone-tabs button{align-items:center}
@container (max-height:650px){.natural-call .caller-symbol{width:52px;height:52px;margin-bottom:10px}.natural-call .call-head h1{font-size:28px}.natural-call .call-controls{padding-bottom:8px}}

/* Keep the dialpad centered in its available area instead of pinned near the island.
   Auto margins collapse on short viewports, preserving scrolling instead of clipping. */
.native-phone .dialer{justify-content:flex-start;scrollbar-width:none}
.native-phone .dial-number{margin-top:auto}
.native-phone .dial-grid{margin-bottom:auto}

/* Read-only ambient history: realistic list density, no dead tap targets. */
.native-phone .call-history-date{font-size:12px;font-weight:600;color:#7e7e87;margin:17px 22px 7px}
.native-phone .historical-call{cursor:default;min-height:64px;padding-block:9px;border-radius:12px;box-shadow:none}
.native-phone .recent-person-photo{object-fit:cover;object-position:center 25%;border-radius:50%;flex:0 0 43px}
.native-phone .recent-call-main{flex:1;min-width:0}
.native-phone .recent-call-main b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.native-phone .historical-call.missed .recent-call-main b{color:#d53d3d}
.native-phone .recent-call-main small{font-size:11px;line-height:1.5}
.native-phone .historical-call time{flex:none;white-space:nowrap}
.native-phone .call-history-list{padding-bottom:12px}

/* An optional, non-dialling archived call easter egg. Captions intentionally
   play without impersonating a real person's voice. */
.native-phone .bagel-voice-scroll{display:flex;flex-direction:column;align-items:stretch;gap:16px;padding:16px 18px 26px}
.bagel-voice-person{text-align:center;padding:18px 0 9px}
.bagel-voice-person>.ui-glyph{width:76px;height:76px;border-radius:50%;padding:17px;color:#fff;background:#d7d7dd}
.bagel-voice-person h1{font-size:27px;margin:13px 0 4px}
.bagel-voice-person p{color:#777781;font-size:13px;margin:0}
.bagel-voice-card{background:white;border-radius:17px;padding:19px 17px;min-width:0;box-shadow:0 1px 2px #0000000a}
.bagel-voice-kind{font-size:13px;color:#777781;margin:0 0 16px}
.bagel-voice-timeline{height:5px;border-radius:8px;background:#e5e6eb;overflow:hidden}
.bagel-voice-progress{height:100%;border-radius:8px;background:#007aff;transition:width 250ms ease}
.bagel-voice-caption{min-height:122px;margin:21px 0 16px;font-size:17px;font-weight:500;line-height:1.65;word-break:keep-all;overflow-wrap:break-word}
.bagel-voice-actions{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bagel-voice-actions button{height:44px;min-width:44px;display:flex;justify-content:center;align-items:center;gap:7px;border-radius:11px;padding:0 13px;color:#007aff;background:#eff6ff;font-size:14px;font-weight:600}
.bagel-voice-transcript{border-top:1px solid #eee;margin-top:16px;padding-top:15px;font-size:14px;line-height:1.7}
.bagel-voice-transcript summary{cursor:pointer;color:#007aff;font-weight:500;min-height:35px}
.bagel-voice-transcript p{border-top:1px solid #f4f4f5;padding:11px 0;margin:0;word-break:keep-all;overflow-wrap:anywhere}
@container (max-height:640px){.bagel-voice-person{padding-top:0}.bagel-voice-person>.ui-glyph{width:59px;height:59px}.bagel-voice-caption{min-height:88px}}

.native-phone .dial-grid .dial-call:not(:disabled){opacity:1;cursor:pointer;background:#32c759}