/* Owner-selected 75% phone density. Compensate the scene bounds to fill the visible viewport. */
:root.phone-layout{--phone-ui-scale:.75;--phone-safe-top:calc(env(safe-area-inset-top,0px) / var(--phone-ui-scale));--phone-safe-bottom:calc(env(safe-area-inset-bottom,0px) / var(--phone-ui-scale))}
.phone-layout .desktop-shell{zoom:var(--phone-ui-scale);width:100%;height:calc(var(--phone-vh,100dvh) / var(--phone-ui-scale));top:calc(var(--phone-top,0px) / var(--phone-ui-scale));left:0;right:auto}
.phone-layout #small-dialog,.phone-layout #search-dialog{zoom:var(--phone-ui-scale);left:calc(8px / var(--phone-ui-scale));right:auto;top:calc((var(--phone-top,0px) + 8px) / var(--phone-ui-scale));bottom:auto;width:calc((100vw - 16px) / var(--phone-ui-scale));max-width:none;max-height:calc((var(--phone-vh,100dvh) - 16px) / var(--phone-ui-scale));margin:0}
.phone-layout #small-dialog.emoji-dialog{left:calc(6px / var(--phone-ui-scale));right:auto;top:calc((var(--phone-top,0px) + var(--phone-vh,100dvh) - 8px) / var(--phone-ui-scale));bottom:auto;width:calc((100vw - 12px) / var(--phone-ui-scale));max-height:calc((var(--phone-vh,100dvh) - 16px) / var(--phone-ui-scale));transform:translateY(-100%)}
.phone-layout #phone-controls-dialog{zoom:var(--phone-ui-scale);left:0;right:auto;top:calc(var(--phone-top,0px) / var(--phone-ui-scale));width:calc(100vw / var(--phone-ui-scale));max-width:none;max-height:calc((var(--phone-vh,100dvh) - 12px) / var(--phone-ui-scale));padding-top:var(--phone-safe-top);margin:0}
.phone-layout #launcher-dialog{zoom:var(--phone-ui-scale)}
/* Keep focused form text at 16 visible pixels so Safari has no small-text reason to auto-zoom. */
.phone-layout :is(input:not([type=range]):not([type=date]),textarea,select):focus{font-size:calc(16px / var(--phone-ui-scale))!important}
:root.phone-layout.phone-keyboard{--phone-safe-bottom:0px}

/* Full-reveal wake artwork, with a 100% Home control inside the 75% app scene. */
:root.phone-layout{--phone-footer:calc(48px / var(--phone-ui-scale) + var(--phone-safe-bottom))}
:root.phone-layout .phone-app-nav{grid-template-columns:78px minmax(0,1fr) 88px}
.phone-layout .phone-bottom-nav{display:flex!important;position:absolute;inset:auto 0 0;height:var(--phone-footer);padding:0 0 var(--phone-safe-bottom);justify-content:center;align-items:center;border-top:1px solid #2d4134;background:#101b16;box-shadow:none;z-index:3001}
.phone-layout .phone-bottom-nav>.whole-watermelon-home{width:calc(48px / var(--phone-ui-scale));min-width:calc(48px / var(--phone-ui-scale));height:calc(48px / var(--phone-ui-scale));min-height:calc(48px / var(--phone-ui-scale));padding:calc(1px / var(--phone-ui-scale));border-radius:50%;border:1px solid #4d6353;background:#101b16;box-shadow:none;display:grid;place-items:center;transition:transform .14s}
.phone-layout .whole-watermelon-home>.whole-watermelon-art{width:calc(44px / var(--phone-ui-scale));height:calc(44px / var(--phone-ui-scale));display:block;stroke:none;filter:none}
.phone-layout .whole-watermelon-home:active{transform:scale(.94)}
.phone-layout .whole-watermelon-home:focus-visible{outline:3px solid #f3c3b3;outline-offset:2px}
.phone-layout .phone-home{bottom:var(--phone-footer)}
:root.phone-layout.phone-keyboard{--phone-footer:0px}
.phone-layout.phone-keyboard .phone-bottom-nav{display:none!important}
:root[data-large-text=true].phone-layout .phone-app-nav{grid-template-columns:44px minmax(0,1fr) 88px}
@media(max-width:374px){:root.phone-layout .phone-app-nav{grid-template-columns:44px minmax(0,1fr) 88px}}

/* Solid rind tones replace the black phone status and Home bands. */
.phone-layout .phone-status{background:#101b16;color:#f3f7ee;border-bottom:1px solid #2d4134;backdrop-filter:none;box-shadow:none}
.phone-layout .phone-status button{color:#f3f7ee;text-shadow:none}

/* Discoverable compose controls; keep conversation details and website controls. */
:root.phone-layout[data-phone-app="messages"][data-phone-messages="conversation"] .phone-app-nav{grid-template-columns:78px minmax(0,1fr) 132px}
.phone-layout .phone-nav-actions>.phone-compose-action{border:1px solid #5a7791;border-radius:6px;background:#e6eef5;color:#23486b;text-shadow:none;box-shadow:inset 0 1px #fff;min-width:40px;width:40px;height:36px;min-height:36px;margin:0 2px}
.phone-layout .phone-compose-action svg{width:23px;height:23px}
.phone-layout .phone-message-recipients{display:grid;gap:8px;margin:12px 0}
.phone-layout .phone-message-recipients>button{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:10px;border:1px solid #b5c6d4;border-radius:9px;background:#fff;color:#23415a;text-align:left}
.phone-message-recipients>button>img,.phone-message-recipients .neo-avatar{width:42px;height:42px;object-fit:cover;border-radius:50%;flex-shrink:0}
.phone-message-recipients>button>span:nth-child(2){flex:1;min-width:0;display:grid;gap:4px}
.phone-message-recipients strong{font-size:16px}.phone-message-recipients small{font-size:13px;line-height:1.4;color:#536a7d}.phone-message-recipients>button>svg{width:18px;height:18px}
@media(max-width:374px){:root.phone-layout[data-phone-app="messages"][data-phone-messages="conversation"] .phone-app-nav{grid-template-columns:44px minmax(0,1fr) 132px}}