/* BL System shared components. Loaded after every other stylesheet on every page.
   Everything reads the app tokens (--border, --control, --selected, --surface-2, --highlight, ...)
   that style-system.css and the customization panel (customize.js) set, so themes, accent colours
   and button shapes defined by the user apply here too. */

:root {
  --bl-ok: #5ccf8e;
  --bl-warn: #e6c15a;
  --bl-bad: #ec6a6a;
  --bl-icon-button-bg: color-mix(in srgb, var(--control, #171717) 82%, var(--text, #fff) 18%);
  --bl-icon-button-bg-hover: color-mix(in srgb, var(--control, #171717) 68%, var(--text, #fff) 32%);
}
html[data-theme="light"] {
  --bl-ok: #1f8f55;
  --bl-warn: #a87908;
  --bl-bad: #c63a3a;
}

/* ---------- 1. Dropdowns: one look for every menu ----------
   Reference: the language menu of the mail app (surface, 12px corners, 7px padding, soft shadow). */
html :is(.header-dropdown, .sound-picker-options, .bl-select-menu) {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2, var(--panel));
  box-shadow: 0 16px 36px rgba(0, 0, 0, .5);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text) 28%, transparent) transparent;
}
html :is(.header-dropdown, .sound-picker-options) { padding: 7px; }
html :is(.header-dropdown, .sound-picker-options, .bl-picker-list) {
  overscroll-behavior: contain;
}
html :is(.header-dropdown, .sound-picker-options) button {
  border-radius: var(--bl-btn-radius, 9px);
}
html .header-dropdown p {
  margin: 4px 8px 6px;
  color: var(--muted);
  font: 700 11px/1.3 Onest, Inter, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}
html .header-dropdown { max-width: calc(100vw - 16px); max-height: calc(100dvh - var(--header-height, 68px) - 16px); overflow: auto; }
@media (max-width: 760px) {
  /* Menus never run off the screen: they pin to the viewport edge instead of the button. */
  html .header-menu-group { position: static; }
  html .header-dropdown {
    position: fixed;
    top: calc(var(--header-height, 68px) + 6px);
    right: 8px;
    left: auto;
    width: min(320px, calc(100vw - 16px));
  }
}

/* Searchable picker (languages in the header, countries in forms) */
html .bl-picker { display: grid; gap: 8px; min-width: 0; }
html .bl-picker .language-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  margin: 0;
  padding: 0 6px 0 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--control);
}
html .bl-picker .language-search > span { display: grid; place-items: center; flex: none; opacity: .75; }
html .bl-picker .language-search > span img { width: 16px; height: 16px; filter: brightness(0) invert(1); }
html[data-theme="light"] .bl-picker .language-search > span img { filter: brightness(0); }
html .bl-picker .language-search input,
html .bl-picker .language-search input:is(:hover, :focus, :active) {
  flex: 1;
  min-width: 0;
  height: 36px;
  min-height: 0;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--text);
  font: 500 13px/1 Inter, sans-serif;
}
html .bl-picker-list {
  display: grid;
  align-content: start;
  gap: 5px;
  max-height: min(340px, 52dvh);
  margin: 0 -3px 0 0;
  padding: 0 3px 0 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text) 28%, transparent) transparent;
}
html .bl-picker-list::-webkit-scrollbar { width: 8px; }
html .bl-picker-list::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 8px; background: color-mix(in srgb, var(--text) 28%, transparent); background-clip: padding-box; }
html .bl-picker-list::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--text) 45%, transparent); background-clip: padding-box; }
html .bl-picker-option {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 38px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--control);
  color: var(--text);
  font: 600 13px/1.2 Onest, Inter, sans-serif;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
/* style-system.css makes header dropdown buttons flex through a selector containing an id, so the
   language rows need an id-level rule to keep the flag / name / code columns (code at the right edge). */
html #language-menu button.bl-picker-option { display: grid; }
html .bl-picker-option:is(:hover, :focus-visible) { outline: none; border-color: var(--highlight, var(--accent)); background: var(--selected); }
html .bl-picker-option.active { border-color: var(--highlight, var(--accent)); background: var(--selected); }
html .bl-picker-option .language-option-flag { display: block; width: 24px; height: 24px; }
html .bl-picker-option .language-option-flag img { display: block; width: 100%; height: 100%; object-fit: contain; }
html .bl-picker-option .language-option-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html .bl-picker-option .language-option-code { display: inline-flex; align-items: center; justify-content: flex-end; min-width: 20px; color: var(--muted); font-size: 11px; font-weight: 700; }
html .bl-picker-option .bl-option-check { width: 16px; height: 16px; filter: brightness(0) invert(1); }
html[data-theme="light"] .bl-picker-option .bl-option-check { filter: brightness(0); }
html .bl-picker-empty { margin: 0; padding: 14px 8px; color: var(--muted); font-size: 13px; text-align: center; }
/* Help menu: compact rows and a head with the current avatar and "Справка / blmailo". */
html .faq-menu { gap: 3px; }
html .faq-menu > :is(button, a) + :is(button, a) { margin-top: 0; }
html .faq-menu button { min-height: 38px; }
html .faq-menu .faq-menu-title { margin: 12px 8px 4px; }
html .faq-menu .faq-menu-head { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; padding: 2px 6px 10px; border-bottom: 1px solid var(--border); }
html .faq-menu-avatar { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; overflow: hidden; border: 1px solid var(--avatar-frame-color, var(--border)); border-radius: 50%; background: var(--control); font: 800 15px/1 Onest, Inter, sans-serif; }
html .faq-menu-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
html .faq-menu-name { display: flex; min-width: 0; align-items: baseline; gap: 5px; font: 800 15px/1.2 Onest, Inter, sans-serif; }
html .faq-menu-name span { color: var(--muted); font-weight: 700; }
html .header-dropdown.language-menu { width: 280px; padding: 8px; }
html .header-dropdown.language-menu .bl-picker-list { max-height: min(360px, calc(100dvh - var(--header-height, 68px) - 90px)); }

/* Country (and any other <select>) as a searchable dropdown with flags */
.bl-native-select { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden; clip: rect(0 0 0 0); border: 0 !important; opacity: 0; pointer-events: none; }
html .bl-select { position: relative; min-width: 0; }
html .bl-select-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--bl-btn-radius, 10px);
  background: var(--control);
  color: var(--text);
  font: 500 14px/1 Inter, sans-serif;
  text-align: left;
  cursor: pointer;
  transition: border-color .28s ease, box-shadow .34s ease, background-color .28s ease;
}
html .bl-select-trigger:is(:hover, :focus-visible, [aria-expanded="true"]) { outline: none; border-color: var(--highlight, var(--accent)); }
html .bl-select-trigger[aria-expanded="true"], html .bl-select-trigger:focus-visible { box-shadow: var(--style-focus-glow, none); }
html .bl-select-flag { display: block; flex: none; width: 24px; height: 24px; }
html .bl-select-flag img { display: block; width: 100%; height: 100%; object-fit: contain; }
html .bl-select-flag img.bl-select-globe { width: 20px; height: 20px; margin: 2px; filter: brightness(0) invert(1); opacity: .6; }
html[data-theme="light"] .bl-select-flag img.bl-select-globe { filter: brightness(0); }
html .bl-select-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html .bl-select-chevron { flex: none; width: 18px; height: 18px; filter: brightness(0) invert(1); opacity: .7; transition: transform .2s ease; }
html[data-theme="light"] .bl-select-chevron { filter: brightness(0); }
html .bl-select-trigger[aria-expanded="true"] .bl-select-chevron { transform: rotate(180deg); }
html .bl-select-menu { z-index: 200; display: flex; flex-direction: column; padding: 8px; max-width: calc(100vw - 16px); overflow: hidden; }
html .bl-select-menu .bl-picker { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
html .bl-select-menu .bl-picker-list { flex: 1 1 auto; min-height: 0; }
html .bl-select-menu .bl-picker-search { flex: none; }
html .bl-select-menu[hidden] { display: none; }
html .bl-select-menu .bl-picker-list { max-height: min(320px, 46dvh); }
html .bl-select-menu.is-open { animation: bl-menu-in .18s cubic-bezier(.2, .8, .2, 1) both; }
html .bl-select-menu.is-closing { animation: bl-menu-out .16s ease-in both; pointer-events: none; }
@keyframes bl-menu-out { to { opacity: 0; transform: translateY(-4px); } }
@keyframes bl-menu-in { from { opacity: 0; transform: translateY(-4px); } }

/* ---------- 2. Embedded input actions: clear (X) and password eye ---------- */
html .bl-icon-button,
html .password-field > .password-toggle {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--bl-btn-radius, 8px);
  background: var(--bl-icon-button-bg);
  color: var(--text);
  line-height: 0;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
html .bl-icon-button img,
html .password-field > .password-toggle img {
  display: block;
  width: 18px;
  height: 18px;
  margin: 0;
  filter: brightness(0) invert(1);
}
html[data-theme="light"] .bl-icon-button img { filter: brightness(0); }
html .bl-icon-button:is(:hover, :focus-visible),
html .password-field > .password-toggle:is(:hover, :focus-visible, [aria-pressed="true"]) {
  outline: none;
  border-color: var(--highlight, var(--accent));
  background: var(--bl-icon-button-bg-hover);
}
html .bl-icon-button[hidden] { display: none; }

/* The password field is a flex row: input and button never overlap or leave the frame. */
html .password-field { display: flex; align-items: center; gap: 6px; padding: 0 5px 0 0; min-width: 0; }
html .password-field > input,
html .password-field > input:is(:hover, :focus, :focus-visible, :active) {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  padding-right: 4px;
}
html .password-field > .password-toggle {
  position: static;
  transform: none !important;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
}
html .password-field > .password-toggle:is(:hover, :focus-visible, [aria-pressed="true"]) { transform: none !important; }
html input[type="search"]::-webkit-search-cancel-button,
html input[type="search"]::-webkit-search-decoration { display: none; -webkit-appearance: none; }
html .has-clear { position: relative; }
html .has-clear .bl-input-clear { width: 28px; min-width: 28px; height: 28px; min-height: 28px; margin-left: auto; }
html .has-clear .bl-input-clear img { width: 14px; height: 14px; }
html .bl-field { display: flex; align-items: center; gap: 6px; min-width: 0; }
html .bl-field > input { flex: 1; min-width: 0; }

/* The activation-key field: label row above, field below, nothing overlapping. */
html .registration-key-field { display: grid; gap: 8px; min-width: 0; }
html .registration-key-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
html .registration-key-field .password-field { width: 100%; }

/* ---------- 3. Icon-only buttons stay centred when their label is hidden ---------- */
html :is(.header-action, .mobile-menu, .dialog-close, .icon-button, .refresh-action-button, .bulk-action-button, .help-action, .billing-back, .account-list-copy, .account-list-logout, .account-email-copy) {
  box-sizing: border-box;
}
@media (min-width: 761px) and (max-width: 1180px) {
  /* labels are hidden from 1180px down: the buttons become square icon buttons */
  html .header-actions :is(#settings-button, #header-integrations, #header-donate, #header-faq, #avatar-button) {
    width: 38px;
    min-width: 38px;
    height: 38px;
  }
}
@media (max-width: 1180px) {
  html :is(.header-actions .header-action, .header-actions .settings-button, .header-actions .avatar-button, .mobile-menu):not(#header-language) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0;
  }
  html .header-actions :is(.header-action, .settings-button) > :is(img, svg, i):first-child,
  html .mobile-menu > :is(img, svg, i):first-child {
    display: block;
    flex: none;
    margin: 0;
    padding: 0;
    position: static;
    transform: none;
  }
  html .header-actions .avatar-button #avatar-initial { margin: 0; }
}
@media (max-width: 560px) {
  html .header-actions :is(#settings-button, #header-integrations, #avatar-button, #header-donate, #header-faq) {
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
  }
}

/* ---------- 4. Copy-address button in the account list ---------- */
html .account-list-copy,
html .account-email-copy {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  margin-left: 4px;
  padding: 0;
  border-radius: var(--bl-btn-radius, 6px);
  vertical-align: middle;
  line-height: 0;
}
html :is(.account-list-copy, .account-email-copy) :is(svg, img, i) { width: 13px; height: 13px; margin: 0; }
html .account-list-copy img { filter: brightness(0) invert(1); }
html[data-theme="light"] .account-list-copy img { filter: brightness(0); }
@media (pointer: coarse) {
  /* a larger touch target without a larger visual button */
  html :is(.account-list-copy, .account-email-copy)::after { content: ""; position: absolute; inset: -9px; }
  html :is(.account-list-copy, .account-email-copy) { position: relative; }
}
html .account-email-line { display: flex; align-items: center; gap: 2px; min-width: 0; }
html .account-email-line small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 5. Avatar frame: smooth ring, sharp at any pixel density ---------- */
html :is(#avatar-initial, #popover-avatar, #settings-avatar, .account-list-row .small-avatar) {
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--page, #090909), 0 0 0 3px var(--avatar-frame-color, #d4d4d4);
  overflow: hidden;
  background-clip: padding-box;
}
html :is(#avatar-initial, #popover-avatar, #settings-avatar, .small-avatar, .large-avatar) img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  image-rendering: auto;
  transform: translateZ(0);
  backface-visibility: hidden;
}
html .avatar-button { overflow: visible; }

/* ---------- 6. Profile and personal information ---------- */
html .profile-core { display: grid; gap: 16px; }
html .settings-function [hidden] { display: none !important; }

/* ---------- 7. Account deletion: stepped, server-driven ---------- */
html .delete-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 4px; padding: 0; list-style: none; }
html .delete-steps li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 12px 0 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--control);
  color: var(--muted);
  font: 600 12px/1 Onest, Inter, sans-serif;
}
html .delete-steps li b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--selected); font-size: 11px; }
html .delete-steps li.is-current { border-color: var(--highlight, var(--accent)); color: var(--text); }
html .delete-steps li.is-done { color: var(--bl-ok); border-color: color-mix(in srgb, var(--bl-ok) 45%, var(--border)); }
html .delete-step { display: grid; gap: 12px; }
html .delete-step[hidden] { display: none; }
html .delete-step .delete-note { margin: 0; color: var(--muted); line-height: 1.5; }
html .delete-step .delete-error { margin: 0; color: var(--bl-bad); font-size: 13px; }
html .delete-step .delete-error:empty { display: none; }
html .delete-danger { border-color: color-mix(in srgb, var(--bl-bad) 55%, var(--border)) !important; color: var(--bl-bad); }

/* ---------- 8. Login history and devices ---------- */
html .device-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bl-icon-button-bg);
  color: var(--text);
}
html .device-icon :is(svg, img, i) { display: block; width: 20px; height: 20px; margin: 0; }
html .device-icon img { filter: brightness(0) invert(1); }
html[data-theme="light"] .device-icon img { filter: brightness(0); }
html .device-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: start; }
@media (max-width: 600px) { html .device-item { grid-template-columns: auto minmax(0, 1fr); } html .device-item > .outline-button { grid-column: 1 / -1; width: 100%; } }
html .device-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
html .device-heading strong { min-width: 0; overflow-wrap: anywhere; }

html .bl-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  padding: 0 9px 0 8px;
  border: 1px solid color-mix(in srgb, var(--bl-status, var(--muted)) 50%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bl-status, var(--muted)) 14%, transparent);
  color: var(--bl-status, var(--muted));
  font: 700 11px/1 Onest, Inter, sans-serif;
  font-style: normal;
  letter-spacing: .02em;
  white-space: nowrap;
}
html .bl-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
html .bl-status[data-status="active"] { --bl-status: var(--bl-ok); }
html .bl-status[data-status="current"] { --bl-status: var(--bl-warn); }
html .bl-status[data-status="ended"] { --bl-status: var(--bl-bad); }

/* ---------- 9. Buy addresses ---------- */
html .billing-head { display: flex; align-items: center; gap: 14px; }
html .billing-head h1 { margin: 0; }
html .billing-field input { border-color: var(--border); }
html .billing-field input:not(:focus):hover { border-color: var(--highlight, var(--accent)); }
html .billing-field input:focus-visible { border-color: var(--highlight, var(--accent)); box-shadow: var(--style-focus-glow, 0 0 0 3px #ffffff1f); }
html .billing-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--border);
}
html .billing-summary .billing-sum {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 0;
}
html .billing-summary .billing-sum + .billing-sum { padding-left: 18px; border-left: 1px solid var(--border); }
html .billing-sum > span { color: var(--muted); font: 600 13px/1.3 Onest, Inter, sans-serif; letter-spacing: 0; }
html .billing-sum > strong { font: 700 20px/1.25 Onest, Inter, sans-serif; letter-spacing: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 280px) {
  html .billing-summary { grid-template-columns: 1fr; gap: 12px; }
  html .billing-summary .billing-sum + .billing-sum { padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--border); }
}
html .billing-confirm { position: relative; padding-top: 22px; }
html .billing-confirm .dialog-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
}
html .billing-confirm h2 { padding-right: 44px; }
html .billing-confirm .billing-actions { grid-template-columns: 1fr; }

/* ---------- 10. Help Center ---------- */
html .help-shell, html .help-shell .help-layout, html .help-shell .help-main { background-color: var(--page); }
html[data-bl-wp] .help-shell, html[data-bl-wp] .help-shell .help-layout, html[data-bl-wp] .help-shell .help-main { background-color: transparent; }
html .help-shell .site-header { z-index: 60; }
html .help-shell .site-header .mobile-menu[aria-expanded="true"] { border-color: var(--highlight, var(--accent)); background: var(--selected); }
@media (max-width: 860px) {
  /* The drawer starts under the sticky header and scrolls on its own: no entry hides behind it. */
  html .help-sidebar {
    top: var(--help-drawer-top, var(--header-height, 68px));
    height: auto;
    bottom: 0;
    z-index: 50;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    visibility: hidden;
    transition: transform .28s ease, visibility 0s linear .28s;
  }
  html .help-sidebar.open { visibility: visible; transition: transform .28s ease; }
  html .help-scrim { z-index: 45; top: var(--help-drawer-top, var(--header-height, 68px)); }
  html.help-drawer-open, html.help-drawer-open body { overflow: hidden; }
}

/* Icons drawn as <img> (public pages) take the text colour like the inline icons of the mail app. */
html :is(.account-dialog, .donation-dialog, .modal, .billing-confirm) img.lucide { filter: brightness(0) invert(1); }
html[data-theme="light"] :is(.account-dialog, .donation-dialog, .modal, .billing-confirm) img.lucide { filter: brightness(0); }
html .account-dialog .danger-action img.lucide { filter: brightness(0) saturate(100%) invert(58%) sepia(60%) saturate(1900%) hue-rotate(320deg); }
html .account-dialog .action-sticker img.lucide { display: block; width: 18px; height: 18px; margin: 0; }

/* ---------- 11. Shared dialog close buttons ---------- */
html .dialog-close { display: inline-grid; place-items: center; padding: 0; line-height: 0; }
html .dialog-close :is(svg, img, i) { display: block; margin: 0; }