/* Keep rollout controls hidden even when a component sets display:flex. */
[data-language-settings][hidden], [data-language-choice][hidden] { display: none !important; }
.language-settings-trigger { margin-inline-start: auto; margin-bottom: 12px; }
.language-dialog {
  color: var(--text-primary, #f5f3ff);
  background: var(--bg-secondary, #201b32);
  border: 1px solid var(--border-color, rgba(155, 130, 220, .35));
  border-radius: 24px;
  padding: 24px;
  width: min(380px, calc(100vw - 32px));
  max-height: calc(100dvh - 40px);
  overflow: auto;
  box-sizing: border-box;
}
.language-dialog::backdrop { background: rgba(10, 8, 22, .65); }
.language-dialog h2 { margin: 0 0 20px; }
.language-dialog-choices { display: grid; gap: 12px; margin-bottom: 20px; }
.language-dialog button { width: 100%; min-height: 44px; white-space: normal; }
.language-dialog [aria-pressed="true"] { outline: 2px solid var(--accent, #a78bfa); outline-offset: 2px; }
.language-dialog button:focus-visible { outline: 3px solid #a78bfa; outline-offset: 3px; }
body[data-theme="light"] .language-dialog { color: #211b35; background: #faf8ff; }
.mode-header-actions { flex-wrap: wrap; min-width: 0; max-width: 100%; }
.mode-header-actions > * { max-width: 100%; }
.mode-tg-promo-button { white-space: normal; }