/* Shared navigation remains above both content layers, without moving its box. */
.xixi-swipe-shared576{z-index:100!important}
.scroll-btn.xixi-swipe-scroll597{z-index:90!important}
.header.xixi-swipe-shared576:not(.xixi-sticky475){position:relative}
#familyChatButton{position:relative;white-space:nowrap}
.xixi-chat-entry-unread576{position:absolute;inset:-5px -5px auto auto;min-width:15px;padding:1px 4px;border-radius:20px;background:#dc3549;color:#fff;font:700 10px/1.4 sans-serif;pointer-events:none}
.xixi-chat-room-switch576{width:30px;height:30px;min-width:30px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;flex:none}
.xixi-chat-room-switch576[hidden]{display:none!important}
.xixi-chat-switch-picture576{display:block;position:relative;width:25px;height:25px;overflow:hidden;pointer-events:none}
.xixi-chat-switch-picture576 img{position:absolute;max-width:none!important;width:45px;height:45px;left:-10px;top:-10px;object-fit:contain}
/* Warm family colors share the same geometry, typography and glossy controls. */
#familyChatPanel{--family-surface576:#fff8ec;--family-header576:#ffecd2;--family-bubble576:#f3dec3;--family-text576:#563820;--family-muted576:#816247;--family-accent576:#af542a;--family-border576:#d5ac7a;background:var(--family-surface576);border-color:var(--family-border576)}
body.theme-dark #familyChatPanel{--family-surface576:#2a231d;--family-header576:#3d2d20;--family-bubble576:#4c3827;--family-text576:#fff0dc;--family-muted576:#d2b89a;--family-accent576:#b25a30;--family-border576:#88664b}
html body #familyChatPanel .realtime-duel-chat-header{background:var(--family-header576);border-color:var(--family-border576)}
html body #familyChatPanel :is(.realtime-duel-chat-messages,.realtime-duel-chat-compose,.realtime-duel-chat-hint,.family-chat-search){background:var(--family-surface576);border-color:var(--family-border576)}
html body #familyChatPanel :is(.realtime-duel-chat-title,.realtime-duel-chat-nick){color:var(--family-text576)}
html body #familyChatPanel :is(.realtime-duel-chat-subtitle,.realtime-duel-chat-meta,.realtime-duel-chat-hint,.family-chat-search-status){color:var(--family-muted576)}
html body #familyChatPanel .realtime-duel-chat-bubble{background:var(--family-bubble576);color:var(--family-text576)}
html body #familyChatPanel :is(.mine .realtime-duel-chat-bubble,.realtime-duel-chat-send){background:var(--family-accent576);color:#fff}
html body #familyChatPanel :is(.realtime-duel-chat-input,.family-chat-search-input){background:var(--family-surface576);color:var(--family-text576);border-color:var(--family-border576)}
html body #familyChatPanel .xixi-chat-input-wrap.has-mentions .realtime-duel-chat-input{color:transparent;caret-color:var(--family-text576)}
html body #familyChatPanel .realtime-duel-chat-input:focus{border-color:var(--family-accent576);box-shadow:0 0 0 3px #af542a24}
html body #familyChatPanel :is(.realtime-duel-chat-close,.xixi-unified-close,.xixi-chat-settings-button){background-color:var(--family-bubble576)!important;color:var(--family-text576)!important}
html body #familyChatPanel :is(.xixi-chat-text-settings,.xixi-chat-text-controls button){background:var(--family-header576);border-color:var(--family-border576);color:var(--family-text576)}
/* Use the language/text row gap throughout the idle practice controls. */
#practiceSetupControls:has(#practiceStartRow.active){--practice-gap576:14px}
#practiceSetupControls:has(#practiceStartRow.active) .practice-config-grid{row-gap:var(--practice-gap576)}
#practiceSetupControls:has(#practiceStartRow.active) .search-regex-error:empty{display:none;margin:0}
#practiceSetupControls:has(#practiceStartRow.active) .practice-config-summary-row>.practice-config-main{display:flex;flex-direction:column;gap:var(--practice-gap576)}
#practiceSetupControls:has(#practiceStartRow.active) :is(.practice-summary,.practice-start-row,.practice-link-tools){margin:0}
#practiceSetupControls:has(#practiceStartRow.active) .practice-link-tools{gap:var(--practice-gap576)}
@media(max-width:700px){#practiceSetupControls:has(#practiceStartRow.active){--practice-gap576:16px}}
/* Random text belongs to the passage heading in both setup and host lobby. */
.realtime-duel-config-control .duel-text-heading573{font:inherit;font-weight:700}
html body .duel-text-heading573 .challenge-random-check{font:inherit;font-weight:700;color:inherit;margin-left:auto;min-height:0}
.duel-text-heading573 .challenge-random-check input{width:1em;height:1em;flex:none;margin:0}
/* Keep the language's grid column while removing hidden rows from layout. */
#realtimeSetupTextRow471.duel-language-pending575>:not(#realtimeLanguageMount470),
.realtime-duel-host-config-row.duel-language-pending575>:not(:first-child){display:none!important}
.realtime-duel-host-config-row.duel-language-pending575{padding-top:var(--duel-language-inset576,0px)}
#realtimeSetupTextRow471.duel-language-pending575>#realtimeLanguageMount470,
.realtime-duel-host-config-row.duel-language-pending575>:first-child{flex:0 0 var(--duel-language-width576,160px);width:var(--duel-language-width576,160px);max-width:100%;box-sizing:border-box}