/* Input geometry belongs here, after component skins. Focus alone never moves UI. */
:root{--visible-height:100dvh;--visible-top:0px;--input-tools-height:0px}
.keyboard-open{--input-tools-height:48px}
.modal{inset:auto 0 auto;top:var(--visible-top);height:var(--visible-height);box-sizing:border-box;padding-bottom:var(--input-tools-height)}
.modal .sheet,#modal .sheet,#editModal .sheet{display:flex;flex-direction:column;overflow:hidden;max-height:calc(var(--visible-height) - var(--input-tools-height) - 16px);min-height:0}
.modal .sheet-head,#editModal .sheet-head{position:relative;top:auto;flex:0 0 auto}
.modal .sheet-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;overflow-anchor:none;scroll-behavior:auto;scroll-padding:12px 0 24px;padding-bottom:max(22px,env(safe-area-inset-bottom,0px))}
.modal.info-modal,.modal.theme-modal{padding-top:12px;padding-bottom:calc(12px + var(--input-tools-height))}
.modal.info-modal .sheet,.modal.theme-modal .sheet{max-height:calc(var(--visible-height) - var(--input-tools-height) - 24px)}
.sheet-close{min-width:44px;min-height:44px}.sheet-body input,.sheet-body textarea,.sheet-body select{scroll-margin:12px 0 24px}
.input-toolbar{position:fixed;z-index:1000;left:0;right:0;top:calc(var(--visible-top) + var(--visible-height) - 48px);height:48px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px max(12px,env(safe-area-inset-right,0px)) 2px max(12px,env(safe-area-inset-left,0px));background:var(--surface);border-top:1px solid var(--line)}
.input-toolbar[hidden]{display:none!important}.input-toolbar>span{font:12px/1.3 system-ui,sans-serif;color:var(--txt2)}
.input-toolbar .btn{height:44px;min-width:100px;flex-shrink:0;padding:8px 16px}
.keyboard-open .modal .sheet{transition:none}
.keyboard-open :is(.edit-sticky-actions,.ux-wizard-footer,.ux-dirty){display:none!important}
.keyboard-open dialog.news-options>footer{display:none}
.keyboard-open .toast{bottom:auto;top:calc(var(--visible-top) + 8px);z-index:1100;pointer-events:none}
/* Reclaim room only when an actual keyboard leaves a very short viewport. */
.keyboard-open.compact-input .ux-editor-nav{display:none}
/* Native top-layer dialogs share the same visible viewport and scroll their body. */
dialog.cx-dialog[open],dialog.party-result-dialog[open]{max-height:calc(var(--visible-height) - var(--input-tools-height) - 24px);display:flex;flex-direction:column;overflow:hidden}
dialog.cx-dialog>.cx-dialog-body,dialog.party-result-dialog>.cx-dialog-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;overflow-anchor:none;scroll-behavior:auto}
dialog.cx-dialog>header,dialog.cx-dialog>footer,dialog.party-result-dialog>header,dialog.party-result-dialog>footer{flex-shrink:0}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:759px),(pointer:coarse){
  body[data-theme] :is(#modal,#editModal,#demoModal){align-items:flex-start;padding-top:12px}
  body[data-theme] :is(#modal,#editModal,#demoModal) .sheet{height:calc(var(--visible-height) - var(--input-tools-height) - 12px);max-height:calc(var(--visible-height) - var(--input-tools-height) - 12px);transition:none;transform:none}
  body[data-theme] .sheet-head{padding:12px 16px;min-height:68px}
  .modal .sheet-head>div{min-width:0}.modal .sheet-head b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  textarea{max-height:240px;resize:none}
  .keyboard-open textarea{min-height:80px;max-height:max(80px,calc(var(--visible-height) - 250px))}
  .info-btn{min-width:36px;min-height:36px;flex-shrink:0}
  input:not([type=range]):not([type=checkbox]):not([type=radio]),textarea,select{font-size:16px;line-height:1.5}
  .sheet-body select,.sheet-body input:not([type=range]):not([type=checkbox]):not([type=radio]){min-height:44px}
  .persona-filter{min-height:44px}
  dialog.cx-dialog[open],dialog.party-result-dialog[open]{position:fixed;top:calc(var(--visible-top) + 12px);bottom:auto;margin:0 auto}
}
@media(prefers-reduced-motion:reduce){.modal,.modal .sheet,.persona-fill{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Russo One is already bundled locally (Latin + Cyrillic, OFL) in boot CSS. */
body[data-theme]{--heading-font:'Russo One',system-ui,sans-serif;--heading-glow:none}
body[data-theme=dark]{--heading-glow:0 0 2px #ffffff3d,0 0 12px #ffffff18}
body[data-theme] :is(.brand,h1,h2,h3,.sheet-head b,.bot-name,.theme-name){font-family:var(--heading-font);font-weight:400;letter-spacing:0;text-shadow:var(--heading-glow)}
body[data-theme] :is(.brand,.sheet-head b){color:var(--txt)}
body[data-theme] .brand{-webkit-text-fill-color:var(--txt);font-size:18px}
body[data-theme] :is(.tab,.ux-editor-nav button){font-family:var(--heading-font);font-weight:400;letter-spacing:0}
/* Form values and longer explanations stay unglowed, 16px and easy to edit. */
body[data-theme] :is(input,textarea,select,.field-help,.hint){text-shadow:none}