/* The accepted portrait stays prominent while the speaking controls remain reachable. */
.sei-face-stage{display:flex;align-items:center;justify-content:center;position:relative;flex:0 1 34dvh;min-height:120px;max-height:320px;margin:10px 16px 0;overflow:hidden}
.sei-face-stage[hidden],.sei-face-stage [hidden]{display:none}
.sei-face-stage>img,.sei-face-stage>canvas{display:block;width:auto;height:100%;max-width:100%;max-height:100%;aspect-ratio:504/530;object-fit:contain;border-radius:24px}
.sei-face-enabled .conversation-head{min-height:70px}
.sei-face-enabled .conversation-head>.sei-conversation-face{width:44px;height:48px}
.sei-face-enabled .messages{padding-top:12px;padding-bottom:12px}
.sei-face-enabled .sei-voice-bar{gap:6px 10px}
.conversation>.sei-current-audio{flex:none;width:calc(100% - 32px)!important;margin:8px 16px 0!important}
.sei-face-enabled.sei-typing .sei-face-stage{flex-basis:16dvh;min-height:64px}
.sei-face-enabled .speak-bar{min-height:62px}
@media(min-width:700px) and (max-height:540px){
  .conversation.sei-face-enabled{display:grid;grid-template-columns:minmax(160px,38%) minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr) auto;grid-template-areas:"head head" "voice voice" "audio audio" "face messages" "input input";width:min(100%,1040px)}
  .sei-face-enabled>.conversation-head{grid-area:head;min-height:58px;padding-top:6px;padding-bottom:6px}
  .sei-face-enabled>.sei-voice-bar{grid-area:voice;padding-top:4px;padding-bottom:4px}
  .sei-face-enabled>.sei-current-audio{grid-area:audio;height:32px!important;margin-top:4px!important}
  .sei-face-enabled>.sei-face-stage{grid-area:face;min-height:0;max-height:none;height:100%;margin:0;padding:6px}
  .sei-face-enabled>.messages{grid-area:messages;min-height:0;min-width:0}
  .sei-face-enabled>.speak-bar{grid-area:input;margin-top:4px;margin-bottom:max(6px,env(safe-area-inset-bottom));min-height:56px}
}