/* Mobile conversation surfaces. Layout changes never own media/session state. */
#keyboard-toggle,#transcript-toggle,#history-toggle{display:none}
@media(max-width:600px){
 .voice-call-inline .call-inline{display:flex;align-items:center;gap:10px;padding:12px;background:#eee9ff;border:0;border-radius:18px;margin:4px 0 10px;position:relative;z-index:2}
 .call-inline .avatar{width:46px;height:46px;flex-shrink:0;border-radius:16px;font-size:22px;background:#dfd6fb}
 .call-inline-person{min-width:0;flex:1}.call-inline-person strong{font-size:16px}.call-inline-person p{font-size:13px;color:#665b7d;margin:5px 0;overflow-wrap:anywhere}
 .call-inline-person #call-transcript{display:block;max-height:44px;overflow:auto;font-size:13px;color:#706780}
 .call-inline-actions{display:grid;grid-template-columns:1fr 1fr;gap:5px}.call-inline-actions button{font:inherit;font-size:12px;min-height:44px;padding:6px 8px;border-radius:12px;background:white;color:#56457d;border:0}.call-inline-actions .hangup{grid-column:1/-1;color:#a92d47;background:#f8dfe5}
 .voice-call-inline .modern .messages{height:calc(100dvh - 400px);min-height:120px}.voice-call-inline .modern .chat-composer{z-index:3}
 body.video-conversation{background:#f7f6fc;overflow:hidden;height:100dvh}
 .video-conversation main{height:var(--call-viewport,100dvh);max-width:600px;padding:0;display:flex;flex-direction:column;overflow:hidden}
 .video-conversation header{flex:none;display:flex;flex-wrap:nowrap;min-height:60px;padding:8px 12px;gap:8px;background:#f7f6fc;z-index:6}
 .video-conversation header #back{font-size:0;flex:none;min-width:44px;min-height:44px;display:grid;place-items:center}.video-conversation header #back::first-letter{font-size:26px}
 #call-person-name{font-weight:650;font-size:18px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .video-conversation #remaining{display:none}.video-conversation #layout-toggle,.video-conversation #history-toggle{display:block;background:#eee9fb;color:#59449c;min-height:44px;padding:8px;font-size:13px;border-radius:12px}
 .video-conversation #video-mode,.video-conversation .note{display:none}
 .video-conversation .call-body,.video-conversation.compact .call-body{display:flex;flex-direction:column;gap:0;flex:1;min-height:0;overflow:hidden}
 .video-conversation .stage,.video-conversation.compact .stage{position:relative;top:auto;width:100%;height:auto;min-height:160px;flex:1;max-height:none;border-radius:22px;margin:0;align-self:stretch}
 .video-conversation .stage video{object-fit:cover;object-position:center 32%}
 .video-conversation #status{font-size:15px;line-height:1.5;background:#191622a6;padding:10px 12px}
 .video-conversation #stream-label{font-size:0;background:transparent}.video-conversation #stream-label::after{content:'数字分身';font-size:12px;background:#19162299;padding:6px 9px;border-radius:10px}
 .video-conversation #transcript{display:none;flex:1;min-height:0;max-height:none;padding:12px;overflow-y:auto;line-height:1.65}
 .video-conversation #transcript p{font-size:16px;overflow-wrap:anywhere;margin:10px 0;padding:12px 14px;border-radius:16px}
 .video-conversation #transcript p[data-speaker='我']{background:#eae5ff;margin-left:34px}.video-conversation #transcript p[data-speaker='人物']{margin-right:20px}
 .video-conversation.compact .stage{flex:none;height:clamp(140px,28dvh,240px);min-height:0}
 .video-conversation.compact #transcript,.video-conversation.records-open #transcript{display:block}
 .video-conversation.records-open:not(.compact) .stage{flex:none;height:26dvh;min-height:100px}
 .video-conversation #transcript-toggle{display:block;flex:none;margin:6px 12px 0;padding:9px 14px;min-height:44px;background:#eee9fb;color:#59449c;text-align:left}
 .video-conversation .controls{flex:none;padding:10px 12px max(12px,env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;gap:8px}
 .video-conversation .controls button{min-height:46px;font-size:14px;padding:11px 14px;border-radius:16px}
 .video-conversation #connect{flex:1}.video-conversation #connect:disabled{display:none}.video-conversation #mic{flex:1;min-width:120px}
 .video-conversation #keyboard-toggle{display:block;background:#eee9fb;color:#59449c}.video-conversation #interrupt{background:#eee9fb;color:#59449c}.video-conversation #hangup{background:#b93855;color:white}
 .video-conversation #text-form{display:none;padding:0 12px max(12px,env(safe-area-inset-bottom));flex:none;margin:0}
 .video-conversation.typing #text-form{display:block}.video-conversation #text-form label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .video-conversation #text-form input{width:0;min-height:48px;background:white;border-radius:16px}.video-conversation #text-form button{min-height:48px;padding:10px 14px}
 .video-conversation.typing .stage{height:clamp(90px,18dvh,150px);flex:none;min-height:90px}.video-conversation.typing #transcript{display:block;min-height:0}
 .video-conversation #video-progress,.video-conversation.compact #video-progress{flex:none;width:60%;margin:4px auto;padding:0}.video-conversation #video-progress small{display:none}
 .video-conversation #error:empty{display:none}.video-conversation #error{flex:none;margin:0;padding:8px 12px;font-size:13px;max-height:72px;overflow:auto}
 .video-conversation #video-history-panel{display:none;position:absolute;inset:65px 8px 10px;z-index:10;margin:0;background:#f7f6fc;border:1px solid #ddd7ee;border-radius:18px;padding:14px;overflow:auto;box-shadow:0 12px 36px #30205030}
 .video-conversation.history-open #video-history-panel{display:block}.video-conversation #video-history-panel summary{min-height:44px;color:#59449c}.video-conversation #video-history{grid-template-columns:1fr}.video-conversation #video-history video{height:200px;object-fit:contain}
 .video-conversation #retry-video{margin:0 12px 8px;font-size:14px;min-height:44px;flex:none}
}
@media(max-width:360px){.video-conversation header{gap:4px;padding:6px}.video-conversation header button{font-size:12px!important;padding:6px!important}.video-conversation .controls{gap:5px;padding:8px}.video-conversation .controls button{font-size:13px;padding:9px}.call-inline .avatar{display:none}.voice-call-inline .call-inline{gap:6px}}

@media(max-width:600px){
 .video-conversation header #back{font-size:14px;max-width:80px}.video-conversation header #back::first-letter{font-size:14px}
 .video-conversation .controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
 .video-conversation #mic,.video-conversation #connect{grid-column:1/-1}
 .video-conversation.compact .controls{grid-template-columns:64px minmax(0,1fr)64px}
 .video-conversation.compact #mic{grid-column:2;grid-row:1;min-width:0;touch-action:none;user-select:none;-webkit-user-select:none}
 .video-conversation.compact #keyboard-toggle{grid-column:1;grid-row:1}.video-conversation.compact #hangup{grid-column:3;grid-row:1}
 .video-conversation.compact #connect:not(:disabled){grid-column:1/-1;grid-row:1}.video-conversation.compact:has(#connect:not(:disabled)) #mic,.video-conversation.compact:has(#connect:not(:disabled)) #keyboard-toggle,.video-conversation.compact:has(#connect:not(:disabled)) #hangup{grid-row:2}
 .video-conversation.compact #interrupt{grid-column:1/-1;grid-row:2}.video-conversation.compact #interrupt:disabled{display:none}
 .video-conversation.history-open #history-toggle{position:relative;z-index:12}
}

/* Explicit picture / conversation states. Media cannot expand intrinsic grid rows. */
@media(max-width:600px){
 .video-conversation .stage{display:block;min-height:130px;transition:height .18s ease,width .18s ease;background:#0636a4}
 .video-conversation .stage video{position:absolute;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;min-width:0;min-height:0;object-fit:cover;object-position:50% 10%}
 .video-conversation.compact .stage,.video-conversation.typing .stage,.video-conversation.records-open .stage{width:min(76%,300px);height:auto;aspect-ratio:4/3;max-height:none;min-height:0;flex:none;align-self:center;justify-self:auto;border-radius:18px}
 .video-conversation.typing .stage{width:min(70%,calc(var(--call-viewport,100dvh)*.5))}
 .video-conversation .call-body>#status{position:static;flex:none;width:100%;background:transparent;color:#655b77;font-size:13px;line-height:1.45;text-align:center;margin:0;padding:7px 12px;min-height:30px;max-height:58px;overflow:auto;pointer-events:auto}
 .video-conversation .stage #placeholder{inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
 .video-conversation #play-saved,.video-conversation #play-template,.video-conversation #enable-motion{left:50%;top:50%;transform:translate(-50%,-50%);max-width:90%;white-space:normal;font-size:13px}
 .video-conversation .call-body{gap:5px;padding-top:3px}
 .video-conversation #transcript{flex:1;max-height:none;min-height:0}
 .video-conversation #transcript-toggle{font-size:13px;padding:8px 12px;margin:0 12px;min-height:38px}
 .video-conversation.typing #transcript-toggle{display:none}
 .video-conversation.typing .controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:6px 12px}
 .video-conversation.typing #mic{display:none}.video-conversation.typing #keyboard-toggle,.video-conversation.typing #hangup,.video-conversation.typing #interrupt{grid-row:1;grid-column:auto;display:block}
 .video-conversation.typing #connect:not(:disabled){grid-column:1/-1;grid-row:1}.video-conversation.typing #connect:not(:disabled)~button{grid-row:2}
 .video-conversation #layout-toggle{transition:background-color .15s}.video-conversation #layout-toggle[aria-pressed=true]{background:#ded5fc}
}
@media(max-width:600px) and (max-height:500px){
 .video-conversation header{min-height:48px;padding-top:2px;padding-bottom:2px}
 .video-conversation .stage{min-height:80px}.video-conversation .controls{grid-template-columns:repeat(4,minmax(0,1fr));padding:5px 8px}
 .video-conversation:not(.compact) #mic{grid-column:auto;min-width:0}.video-conversation #transcript-toggle{min-height:32px}
 .video-conversation .controls button{padding:8px 5px;min-height:44px;font-size:12px}.video-conversation .call-body>#status{font-size:12px;padding:3px 8px;min-height:24px}
}
@media(prefers-reduced-motion:reduce){.video-conversation .stage,.video-conversation #layout-toggle{transition:none}}