/* Scoped to the PWA chat flows in the Nov 1 reference recordings. */
html[data-pwa-layout="native"] #app[data-page="聊天"][data-native-panel="open"]>.composer{--composer-inset:0px}
html[data-pwa-layout="native"] #app .nc-call-choice{background:#fff;border-radius:3.333333cqw 3.333333cqw 0 0;padding-bottom:var(--native-bottom-inset,0px)}
html[data-pwa-layout="native"] #app .nc-call-choice .nc-action-sheet button{height:12.857143cqw;display:flex;align-items:center;justify-content:center;gap:2.381cqw;font-size:4cqw;border-top:1px solid #eee}
html[data-pwa-layout="native"] #app .nc-call-choice .nc-action-sheet button:first-child{border-top:0}
html[data-pwa-layout="native"] #app .nc-call-choice .nc-action-sheet button:last-child{margin-top:1.666667cqw}
html[data-pwa-layout="native"] #app .nc-call-choice .nc-action-sheet svg{width:4.762cqw;height:4.762cqw;fill:currentColor}
html[data-pwa-layout="native"] #app .nc-dim:has(>.nc-call-choice){animation:pwa-call-dim-in 200ms ease both}
@keyframes pwa-call-dim-in{from{background-color:#0000}to{background-color:#0008}}
html[data-pwa-layout="native"] #app .nc-page.lc-screen{animation:pwa-call-in 200ms ease both}
@keyframes pwa-call-in{from{opacity:0}to{opacity:1}}
/* The non-translucent Home Screen window already starts below the system bar.
   The outer gap is measured by the viewport adapter, independently of safe-area.
   Video and audio person positions are measured separately from the reference. */
html[data-pwa-layout="native"] #app .lc-screen .lc-top{top:calc(14.285714cqw - var(--pwa-call-external-top,0px))}
html[data-pwa-layout="native"] #app .lc-screen.video .lc-top button:first-child{transform:translateY(1.428571cqw)}
html[data-pwa-layout="native"] #app .lc-screen.audio .lc-top button:first-child{transform:translateY(.952381cqw)}
html[data-pwa-layout="native"] #app .lc-screen.video .lc-person{top:calc(17% - .83 * var(--pwa-call-external-top,0px))}
html[data-pwa-layout="native"] #app .lc-screen.audio .lc-person{top:calc(27.96% - .7204 * var(--pwa-call-external-top,0px))}
html[data-pwa-layout="native"] #app .lc-controls.audio{left:10.47619cqw;right:10.47619cqw;bottom:17.857143cqw}
html[data-pwa-layout="native"] #app .lc-controls.video{left:11.904762cqw;right:11.904762cqw;bottom:max(8.095238cqw,var(--native-bottom-inset,0px));row-gap:4.047619cqw}
html[data-pwa-layout="native"] #app .lc-controls.video .lc-video-bottom .lc-button:not(.lc-hangup){background:#ffffff26}

.pwa-chat-media{position:absolute;inset:0;z-index:180;container-type:inline-size;isolation:isolate;color:#191919;user-select:none;-webkit-user-select:none}
.pwa-chat-media button{padding:0;border:0;font:inherit;background:transparent;color:inherit;touch-action:manipulation}
.pwa-chat-media svg{width:24px;height:24px}
.cm-photo-shade{position:absolute;inset:0;background:#0008;animation:cm-fade 200ms ease}
.cm-photo-sheet{position:absolute;left:0;right:0;bottom:0;height:calc(100% - 44.7619cqw);min-height:55%;display:flex;flex-direction:column;background:#fff;border-radius:16px 16px 0 0;overflow:hidden;animation:cm-slide 300ms cubic-bezier(.2,.8,.2,1)}
.cm-photo-sheet>header{height:64px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 16px;font-size:17px}
.cm-photo-sheet>header button{width:32px;height:40px;display:grid;place-items:center}
.cm-photo-sheet>header strong{font-weight:500}
.cm-photo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;align-content:start;overflow:auto;flex:1;min-height:0}
.cm-photo-tile{aspect-ratio:1;position:relative;min-width:0;background:#f3f3f3}
.cm-photo-tile>button:first-child{width:100%;height:100%;display:block}
.cm-photo-tile img,.cm-photo-tile video{width:100%;height:100%;object-fit:cover;display:block}
.cm-photo-tile .cm-select{position:absolute;right:6px;top:6px;width:24px;height:24px;border:1.5px solid white;border-radius:50%;background:#0003;color:white;font-size:14px}
.cm-photo-tile .cm-select[aria-pressed="true"]{background:#07c160;border-color:#07c160}
.cm-photo-sheet>footer{display:flex;align-items:center;justify-content:space-between;flex:none;min-height:calc(56px + var(--native-bottom-inset,0px));padding:8px 16px calc(8px + var(--native-bottom-inset,0px));background:#f7f7f7;font-size:15px}
.cm-photo-sheet>footer label{display:flex;align-items:center;gap:4px}
.cm-photo-sheet input{accent-color:#07c160;width:20px;height:20px}
.cm-photo-sheet [data-cm=send]{background:#07c160;color:#fff;padding:7px 12px;border-radius:4px}
.pwa-chat-media button:disabled{opacity:.4}
.cm-file-preview,.cm-capture-review{position:absolute;inset:0;background:#000;color:white;z-index:3;display:flex;align-items:center;justify-content:center}
.cm-file-preview>img,.cm-file-preview>video,.cm-capture-review>img,.cm-capture-review>video{width:100%;height:100%;object-fit:contain}
.cm-file-preview>[data-cm=preview-close]{position:absolute;left:12px;top:12px;width:36px;height:36px}
.cm-file-preview>footer,.cm-capture-review>footer{position:absolute;left:0;right:0;bottom:0;padding:20px 24px calc(20px + var(--native-bottom-inset,0px));display:flex;justify-content:space-between;background:linear-gradient(transparent,#0009)}
.cm-capture-review [data-cm=capture-send]{background:#07c160;border-radius:5px;padding:9px 22px}
.cm-camera{background:#000;color:#fff;touch-action:none}
.cm-camera-video{position:absolute;top:0;left:0;right:0;bottom:39.285714cqw;width:100%;height:calc(100% - 39.285714cqw);object-fit:cover}
.cm-camera-video[data-front="yes"]{transform:scaleX(-1)}
.cm-camera-close{position:absolute;left:3.81cqw;top:3.81cqw;width:8.571cqw;height:8.571cqw;z-index:2}
.cm-camera-hint{position:absolute;left:0;right:0;bottom:43.81cqw;font-size:3.095cqw;line-height:4.762cqw;margin:0;text-align:center;text-shadow:0 1px 3px #0008}
.cm-camera-controls{position:absolute;left:12.381cqw;right:12.381cqw;bottom:14.285714cqw;height:19.047619cqw;display:flex;align-items:center;justify-content:space-between}
.cm-camera-controls>button{width:12.381cqw;height:12.381cqw;display:grid;place-items:center}
.cm-camera-controls .cm-shutter{width:19.047619cqw;height:19.047619cqw;border:1px solid #fff;border-radius:50%;padding:5px;touch-action:none;-webkit-touch-callout:none}
.cm-shutter>span{display:block;width:100%;height:100%;border-radius:50%;background:#fff}
.is-recording .cm-shutter>span{background:#ff4d50;transform:scale(.75);border-radius:8px}
.cm-camera-controls svg{width:6.667cqw;height:6.667cqw}
.cm-camera-retry{position:absolute;left:25%;right:25%;top:45%;padding:12px!important;background:#333!important;border-radius:6px}
.cm-notice{position:absolute;z-index:10;left:8%;right:8%;top:35%;background:#222e;color:#fff;font-size:14px;line-height:22px;border-radius:8px;padding:14px;text-align:center;pointer-events:none}
@keyframes cm-slide{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes cm-fade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.cm-photo-sheet,.cm-photo-shade{animation-duration:1ms}}

html[data-pwa-layout="native"] #app .nc-call-choice .nc-action-sheet{background:#f4f4f4}

html[data-pwa-layout="native"] #app .lc-person strong{font-size:4.761905cqw;line-height:6.190476cqw}
html[data-pwa-layout="native"] #app .lc-screen.video .lc-person strong{margin-top:2.142857cqw}
html[data-pwa-layout="native"] #app .lc-dots{gap:1.547619cqw}

.cm-camera-close{left:3.095238cqw;top:-2.142857cqw}.cm-camera-close svg{width:8.571429cqw;height:8.571429cqw}

html[data-pwa-layout="native"] #app .lc-screen.pwa-call-leaving{animation:pwa-call-out 180ms ease forwards}
@keyframes pwa-call-out{to{opacity:0}}
.cm-camera{animation:cm-fade 180ms ease both}
.pwa-chat-media.cm-closing{animation:pwa-call-out 180ms ease forwards;pointer-events:none}
.cm-closing .cm-photo-sheet{animation:cm-slide-out 180ms ease forwards}
@keyframes cm-slide-out{to{transform:translateY(100%)}}

/* Measured independently: keep the first icon row fixed; refine labels/dots. */
html[data-pwa-layout="native"] #app>.nc-panel .nc-panel-grid{grid-auto-rows:22.857143cqw}
html[data-pwa-layout="native"] #app>.nc-panel .nc-panel-grid button{gap:2.142857cqw}
html[data-pwa-layout="native"] #app>.nc-panel .nc-panel-grid small{font-size:2.698413cqw;line-height:3.333333cqw}
html[data-pwa-layout="native"] #app>.nc-panel nav{margin-top:2.961905cqw;gap:2.380952cqw}