/* Header (title + close button + divider) and open/close motion of every dropdown list.
   Lists: header menus (#donate-menu, #faq-menu, #language-menu), the anchored language dialog,
   .bl-select-menu (countries) and .sound-picker-options (settings pickers).
   The head is created by BLUI.listHead() in bl-ui.js; the language dialog uses its own .modal-header. */

/* ---------- 1. Head: title left, X right, thin divider under it ---------- */
html :is(.header-dropdown, .sound-picker-options, .language-dialog.anchored) { --bl-pad: 7px; }
html :is(.header-dropdown.language-menu, .bl-select-menu) { --bl-pad: 8px; }

html .bl-list-head,
html .language-dialog.anchored .modal-header {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  /* edge to edge of the list, like the title bar of a dialog */
  margin: calc(var(--bl-pad, 7px) * -1) calc(var(--bl-pad, 7px) * -1) 3px;
  padding: 6px 6px 6px 14px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 22%, transparent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
html .bl-picker > .bl-list-head { margin-bottom: 0; }
html .language-dialog.anchored .modal-header { margin-bottom: 8px; }
html .language-dialog.anchored .modal-header > div { min-width: 0; flex: 1 1 auto; }
html .language-dialog.anchored .modal-header p { display: none; }
/* Long lists (help menu on a short screen) keep the head in view. */
html :is(.header-dropdown, .sound-picker-options) > .bl-list-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-2, var(--panel));
}

html .bl-list-title,
html .language-dialog.anchored .modal-header h2 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font: 800 15px/1.2 Onest, Inter, sans-serif;
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

/* The same square close button as in dialogs (.dialog-close, 42px from style-system.css); menu button rules must not stretch it. */
html .bl-list-head .bl-list-close,
html .language-dialog.anchored .modal-header .dialog-close {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--muted);
  line-height: 0;
  box-shadow: none;
}
html .bl-list-head .bl-list-close:hover,
html .language-dialog.anchored .modal-header .dialog-close:hover {
  border-color: var(--vxp-highlight, var(--highlight, var(--accent)));
  background: var(--surface-3);
  color: var(--text);
}
/* Compact close button in list headers (smaller than the 42px dialog one). */
html:not(#blx) .bl-list-head .bl-list-close,
html:not(#blx) .language-dialog.anchored .modal-header .dialog-close {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  border-radius: 8px;
}
html:not(#blx) .bl-list-head .bl-list-close img,
html:not(#blx) .language-dialog.anchored .modal-header .dialog-close img,
html:not(#blx) .language-dialog.anchored .modal-header .dialog-close svg {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px;
}
html .bl-list-head .bl-list-close img,
html .language-dialog.anchored .modal-header .dialog-close img,
html .language-dialog.anchored .modal-header .dialog-close svg {
  display: block;
  width: 20px !important;
  height: 20px !important;
  margin: 0;
  padding: 0 !important;
  flex: 0 0 20px;
}

/* Help menu: avatar + "Справка / blmailo" stay, the X moves to the right. */
html .faq-menu .bl-list-head.faq-menu-head { margin-bottom: 3px; padding: 6px 6px 6px 14px; border-bottom: 1px solid color-mix(in srgb, var(--text) 22%, transparent); }
html .faq-menu-id { display: flex; min-width: 0; flex: 1 1 auto; align-items: center; gap: 10px; }
html .faq-menu-id .faq-menu-name { min-width: 0; overflow: hidden; white-space: nowrap; }

/* Room for the head inside the lists that cap their height. */
html .header-dropdown.language-menu .bl-picker-list { max-height: min(340px, calc(100dvh - var(--header-height, 68px) - 150px)); }
html .bl-select-menu .bl-picker-list { max-height: min(300px, 40dvh); }
html .language-dialog.anchored { max-height: min(450px, calc(100dvh - var(--header-height, 68px) - 16px)); }
html .language-dialog.anchored .language-list { max-height: min(310px, calc(100dvh - 190px)); }
html .sound-picker-options { max-height: min(300px, 50dvh); }

/* ---------- 2. Motion: every list opens and closes with an animation (.2s in / .16-.18s out) ---------- */
@keyframes bl-list-in {
  from { opacity: 0; transform: translateY(-8px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes bl-list-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-8px) scale(.985); }
}
html :is(.header-dropdown, .sound-picker-options):not([hidden]):not(.is-closing) {
  animation: bl-list-in .2s cubic-bezier(.2, .8, .2, 1) both;
}
html :is(.header-dropdown, .sound-picker-options).is-closing {
  pointer-events: none;
  animation: bl-list-out .16s ease-in both;
}
html .sound-picker-options.drop-up { transform-origin: bottom center; }
html .bl-select-menu.is-open { animation: bl-list-in .2s cubic-bezier(.2, .8, .2, 1) both; }
html .bl-select-menu.is-closing { pointer-events: none; animation: bl-list-out .16s ease-in both; }

/* The language list opened as an anchored dialog. */
html dialog.language-dialog.anchored[open]:not(.dialog-exiting) { animation: bl-list-in .2s cubic-bezier(.2, .8, .2, 1) both; }
html dialog.language-dialog.anchored[open].dialog-exiting { pointer-events: none; animation: bl-list-out .18s ease-in both; }

/* The customization panel (customize.css) replaces the open animation of lists and dialogs and, with the same
   animation name on the closing element, no closing animation was left. These rules keep the closing one. */
html[data-bl-anim]:not([data-bl-anim="off"]):not([data-bl-off~="menus"]) :is(.header-dropdown, .sound-picker-options, .account-menu, .popover).is-closing:not([hidden]) {
  animation: bl-list-out .16s ease-in both;
}
html[data-bl-anim]:not([data-bl-anim="off"]):not([data-bl-off~="windows"]):not([data-bl-off~="modals"]) dialog[open].dialog-exiting {
  animation: blmailo-dialog-out .2s ease-in both !important;
}
html[data-bl-anim]:not([data-bl-anim="off"]):not([data-bl-off~="windows"]):not([data-bl-off~="modals"]) dialog.language-dialog.anchored[open].dialog-exiting {
  animation: bl-list-out .18s ease-in both !important;
}

/* Reduced motion and the "animations off" switch: lists simply appear and disappear. */
@media (prefers-reduced-motion: reduce) {
  html :is(.header-dropdown, .sound-picker-options, .bl-select-menu, dialog.language-dialog.anchored),
  html :is(.header-dropdown, .sound-picker-options, .bl-select-menu, dialog.language-dialog.anchored).is-closing,
  html dialog.language-dialog.anchored[open].dialog-exiting { animation: none !important; }
}
html[data-bl-anim="off"] :is(.header-dropdown, .sound-picker-options, .bl-select-menu, dialog.language-dialog.anchored),
html[data-bl-anim="off"] dialog[open].dialog-exiting { animation: none !important; }