/* ============================================================
   feedback-button.css — the "Feedback" entry in the shell header
   ------------------------------------------------------------
   Shares the pill geometry of the language button and the account
   chip (css/shared/i18n-rtl.css, css/account/account-chip.css).
   Phones (same breakpoint as css/shell/shell-mobile.css): icon only.
   The dialog's own styles are css/feedback/feedback.css, lazy-loaded.
   ============================================================ */

.shell-feedback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  box-sizing: border-box;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--accent-strong);
  font-family: 'Inter', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease, color .18s ease;
}
html[dir="rtl"] .shell-feedback { font-family: 'IBM Plex Sans Arabic', 'Tajawal', 'Inter', system-ui, sans-serif; }

.shell-feedback:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 1px 3px hsl(var(--shadow-color) / 0.08);
}
.shell-feedback:active { transform: scale(0.97); }
.shell-feedback:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.shell-feedback[aria-busy="true"] { cursor: progress; opacity: .75; }

.shell-feedback__icon { width: 15px; height: 15px; flex: none; display: block; }

/* Crowded header: the icon alone carries it. js/shell/header-fit.js
   decides by measuring the row (html[data-header-fit~="snug"]); the
   width query is only the fallback for a page without that script. */
html[data-header-fit~="snug"] .shell-feedback { width: 32px; padding: 0; }
html[data-header-fit~="snug"] .shell-feedback__label { display: none; }
@media (max-width: 1180px) {
  html:not([data-header-fit]) .shell-feedback { width: 32px; padding: 0; }
  html:not([data-header-fit]) .shell-feedback__label { display: none; }
}

@media (max-width: 700px), (max-height: 560px) and (max-width: 1024px) {
  .shell-actions .shell-feedback { width: 44px; height: 44px; border-color: transparent; background: transparent; }
  .shell-actions .shell-feedback__icon { width: 19px; height: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .shell-feedback { transition: none; }
  .shell-feedback:active { transform: none; }
}