/* A fixed portrait and voice controls accompany the paginated text. */
.child-dialog>.dialogue-bar{flex:none;display:flex;align-items:center;gap:12px;min-height:76px;width:100%;box-sizing:border-box;padding:4px 12px;border-radius:22px;background:#edf0d7;border:1px solid #c1cfaa;text-align:left}
.dialogue-avatar{flex:none;display:block;width:72px;height:72px;padding:3px;box-sizing:border-box}
.dialogue-avatar svg{width:100%!important;height:100%!important;max-width:100%;max-height:100%;overflow:visible}
.dialogue-name{flex:1;min-width:0;font-size:18px;overflow-wrap:anywhere;color:#285346}
.dialogue-controls{display:flex;flex:none;gap:8px}
.dialogue-control{display:flex;align-items:center;justify-content:center;gap:6px;min-width:48px;min-height:48px;padding:8px;border:2px solid #648c70;border-radius:16px;background:#fbf4de;color:#285346;font:700 16px/1.2 var(--font-child);cursor:pointer}
.dialogue-control:disabled{opacity:.5;cursor:default}.dialogue-control svg{width:24px!important;height:24px!important;flex:none}
.dialogue-control>.toy-face{display:flex;align-items:center;justify-content:center;gap:6px;min-height:0;padding:0}
.dialogue-control:focus-visible{outline:3px solid #194f4d;outline-offset:3px}.dialogue-message{border-left:4px solid #88ac80;padding:8px 12px;background:#f8f4e4;border-radius:12px;text-align:left}
body.access-large-targets .dialogue-control{min-width:56px;min-height:56px}
.speech-open{display:none}.dialogue-bar[data-dialogue-state=playing][data-dialogue-still=false] .speech-open{display:initial;animation:dialogue-mouth .26s steps(2,end) infinite;transform-box:fill-box;transform-origin:center}
.dialogue-bar[data-dialogue-state=playing][data-dialogue-still=false] .speech-closed{visibility:hidden}
.dialogue-bar[data-dialogue-still=false] .speech-eye{animation:dialogue-blink 6.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.dialogue-bar[data-dialogue-state=playing][data-dialogue-still=false] .dialogue-avatar>svg{animation:dialogue-gesture 2.8s ease-in-out infinite;transform-origin:50% 85%}
@keyframes dialogue-mouth{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
@keyframes dialogue-blink{0%,45%,49%,100%{transform:scaleY(1)}47%{transform:scaleY(.12)}}
@keyframes dialogue-gesture{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1deg)}}
body.reduce-motion .dialogue-avatar *,body.access-calm .dialogue-avatar *{animation:none!important}
body.high-contrast .dialogue-bar{background:#fff;border:2px solid #143c30}body.high-contrast .dialogue-control{color:#143c30;background:#fff;border-color:#143c30}
@media(prefers-reduced-motion:reduce){.dialogue-avatar,.dialogue-avatar *{animation:none!important}}
@container brotemar-screen (max-width:520px){.dialogue-control .dialogue-button-label{display:none}.dialogue-name{font-size:16px}.child-dialog>.dialogue-bar{gap:6px;padding:2px 6px}}
@container brotemar-screen (max-height:450px){.child-dialog>.dialogue-bar{min-height:52px;gap:6px;padding:0 4px}.dialogue-avatar{width:48px;height:48px}.dialogue-control .dialogue-button-label{display:none}.dialogue-name{font-size:15px}.dialogue-controls{gap:4px}}
@container brotemar-screen (max-height:450px){
 #modal-root .child-dialog:has(>.dialogue-bar){grid-template-rows:auto auto minmax(0,1fr)}
 #modal-root .child-dialog>.dialogue-bar{grid-column:1;grid-row:2;min-width:0;flex-wrap:wrap}
 #modal-root .child-dialog:has(>.dialogue-bar)>.fit-dialog-body{grid-row:3}
 #modal-root .child-dialog:has(>.dialogue-bar)>.fit-dialog-actions{grid-row:2/4}
 #modal-root .child-dialog:has(>.dialogue-bar)>.fit-pager{grid-row:3!important}
}
@container brotemar-screen (max-width:420px) and (max-height:450px){
 #modal-root .child-dialog>.dialogue-bar{display:grid;grid-template-columns:36px minmax(0,1fr);gap:2px;padding:2px}
 .child-dialog>.dialogue-bar .dialogue-avatar{grid-column:1;grid-row:1/3;width:36px;height:36px;padding:0}
 .child-dialog>.dialogue-bar .dialogue-name{grid-column:2;grid-row:1}
 .child-dialog>.dialogue-bar .dialogue-controls{grid-column:2;grid-row:2;gap:2px}
}