/* Панель быстрых действий: плавающая полоса с кнопками.
   Часть v3/header.css; порядок частей важен — см. static/README.md. */
/* ─── Панель быстрых действий ─────────────────────────────────────────── */
.quick-bar.quick-bar--floating {
  position: fixed;
  left: 50%;
  bottom: max(var(--quick-bar-bottom-offset), env(safe-area-inset-bottom));
  display: flex;
  width: auto;
  max-width: calc(100% - 18px);
  transform: translateX(-50%) translateY(0);
  z-index: var(--z-quick-bar);
  opacity: 1;
  transition:
      opacity   var(--motion-dur-base) var(--motion-ease),
      transform var(--motion-dur-base) var(--motion-ease);
}

html[data-header-open-panel]:not([data-header-open-panel="none"]) .quick-bar,
body.body--locked .quick-bar.quick-bar--floating,
html[data-virtual-keyboard-open="true"] .quick-bar.quick-bar--floating,
.quick-bar.quick-bar--floating[hidden],
.quick-bar.quick-bar--floating[aria-hidden="true"],
.quick-bar__shell[hidden],
.quick-bar__shell[aria-hidden="true"] {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(8px);
  transition:
      opacity   var(--motion-dur-sm) var(--motion-ease-in),
      transform var(--motion-dur-sm) var(--motion-ease-in);
}

.quick-bar__shell {
  display: inline-flex;
  align-items: center;
  gap: var(--control-gap-3xs);
  width: auto;
  min-height: var(--quick-bar-height);
  margin-left: auto;
  padding: var(--quick-bar-shell-padding);
  border: 1px solid var(--glass-shell-border);
  border-radius: var(--radius-pill);
  background: var(--glass-shell-bg-strong);
  box-shadow: var(--glass-shell-shadow);
  -webkit-backdrop-filter: var(--glass-shell-backdrop);
  backdrop-filter: var(--glass-shell-backdrop);
  flex-wrap: nowrap;
  white-space: nowrap;
}

.quick-bar__more {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-left: var(--control-gap-3xs);
}

.quick-bar__more-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--control-gap-tight));
  min-width: 176px;
  max-width: min(280px, calc(100vw - 24px));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--control-gap-base);
  padding: var(--control-gap-wide);
  border: 1px solid var(--glass-shell-border);
  border-radius: var(--control-radius);
  background: var(--glass-shell-bg-strong);
  box-shadow: var(--glass-shell-shadow);
  -webkit-backdrop-filter: var(--glass-shell-backdrop);
  backdrop-filter: var(--glass-shell-backdrop);
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition:
      opacity var(--motion-dur-base) var(--motion-ease),
      display  var(--motion-dur-base) allow-discrete;
}

.quick-bar__more-panel[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}

.quick-bar__more-panel[hidden] {
  display: none;
  opacity: 0;
  transition:
      opacity var(--motion-dur-sm) var(--motion-ease-in),
      display  var(--motion-dur-sm) allow-discrete;
}

@starting-style {
  .quick-bar__more-panel[data-open="true"] {
    opacity: 0;
  }
}

/* Quick-bar buttons: CSS-driven fade in/out with allow-discrete display transition.
   The explicit display: inline-flex on the visible state is required — allow-discrete
   only operates when *both* states have CSS-authored display values (the UA [hidden]
   stylesheet rule is not enough for the browser to start an interpolation). */
.quick-bar .quick-bar__button {
  display: inline-flex;
  transition:
      opacity var(--motion-dur-base) var(--motion-ease),
      display var(--motion-dur-base) allow-discrete;
}

.quick-bar .quick-bar__button[hidden] {
  display: none;
  opacity: 0;
  transition:
      opacity var(--motion-dur-sm) var(--motion-ease-in),
      display var(--motion-dur-sm) allow-discrete;
}

@starting-style {
  .quick-bar .quick-bar__button:not([hidden]) {
      opacity: 0;
  }
}

[data-quick-bar-title] {
  flex: 0 0 100%;
  margin: 0;
  color: var(--theme-text-muted);
  font-size: var(--type-label-size);
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.quick-bar .quick-bar__button {
  position: relative;
  --button-icon-box-size: var(--quick-bar-control-size);
  --button-icon-size: 18px;
  --button-chrome-bg: transparent;
  --button-chrome-border: transparent;
  --button-chrome-color: var(--theme-text-muted);
  --button-chrome-bg-hover: var(--glass-control-hover-bg);
  --button-chrome-bg-active: var(--glass-control-active-bg);
  --button-chrome-border-hover: transparent;
  --button-chrome-color-hover: var(--theme-text-strong);
  overflow: visible;
}

.quick-bar .quick-bar__button[aria-disabled="true"] {
  opacity: 0.62;
  border-color: var(--theme-border-quiet);
  background: var(--theme-action-secondary-bg);
  color: var(--theme-text-soft);
}

.quick-bar .quick-bar__button[data-sidebar-open][aria-expanded="true"],
.quick-bar .quick-bar__button[data-sidebar-toggle][aria-expanded="true"],
.quick-bar .quick-bar__button[data-action="open-search"][aria-pressed="true"],
.quick-bar .quick-bar__button[data-action="mobile-search"][aria-pressed="true"],
.quick-bar .quick-bar__more[data-open="true"] > .quick-bar__button {
  --button-chrome-bg-selected: var(--theme-state-selected-bg);
  --button-chrome-border-selected: var(--theme-state-selected-border);
  --button-chrome-color-selected: var(--theme-state-selected-color);
  --button-chrome-bg-hover: var(--theme-state-selected-bg-hover);
  --button-chrome-bg-active: var(--theme-state-selected-bg-hover);
  --button-chrome-border-hover: var(--theme-state-selected-border-hover);
  --button-chrome-color-hover: var(--theme-state-selected-color-hover);
}

.quick-bar .action-icon {
  --action-icon-size: 18px;
}

[data-quick-bar-glyph] {
  font-size: var(--type-control-size);
  line-height: 1;
}

.quick-bar__button-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 1;
  border-radius: var(--radius-pill);
  border: 1px solid var(--theme-action-secondary-border-hover);
  background: var(--theme-surface-accent-soft);
  color: var(--theme-text-accent);
  font-size: 10px;
  line-height: 1;
  font-weight: var(--hierarchy-status-weight-strong);
  letter-spacing: 0.01em;
}