/*
 * Global account/status pill + bespoke Pro menu.
 *
 * Deliberately NOT a modal/popup: no backdrop, no full-width bar. A small
 * rounded pill (the visual is the inner .qc-account-pill__btn — an <a>, a
 * <button>, or a <span> depending on state) fixed top-right. For an active Pro
 * user the pill becomes a menu button with a caret; clicking opens a compact
 * dropdown styled to match quotechecker.ai's dark/cyan theme. High contrast;
 * stays clear of primary page actions and below modal/checkout overlays.
 *
 * Loaded via <link rel="stylesheet" href="/styles/account-pill.css"> alongside
 * /lib/account-pill.js — same component pattern as /lib/audit-backdrop.css.
 */

/* The root is a positioning context for the dropdown; it has no box of its own. */
.qc-account-pill {
  position: fixed;
  top: 12px;
  right: 12px;
  /* Above normal page content, but below modal/checkout overlays (1000+). */
  z-index: 900;
  font: 600 13px/1.2 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── The pill itself ─────────────────────────────────────────────────────── */
.qc-account-pill__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  box-sizing: border-box;
  max-width: min(78vw, 320px);
  margin: 0;
  padding: 7px 13px;

  border-radius: 999px;
  border: 1px solid rgba(47, 233, 255, 0.35);   /* site accent, subtle */
  background: rgba(8, 9, 10, 0.92);             /* matches dark base #08090a */
  color: #e6edf3;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: saturate(140%) blur(4px);
  backdrop-filter: saturate(140%) blur(4px);

  font: inherit;
  letter-spacing: 0.2px;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;

  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.qc-account-pill__label {
  color: #c4cdd6;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qc-account-pill__sep { color: rgba(196, 205, 214, 0.5); }
.qc-account-pill__cta { color: #2fe9ff; font-weight: 700; }   /* --accent-aaa */

/* Caret — only on the active-Pro menu button. Rotates when the menu opens. */
.qc-account-pill__caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #2fe9ff;
  margin-left: 2px;
  transition: transform 0.15s ease;
}
.qc-account-pill[data-open='true'] .qc-account-pill__caret { transform: rotate(180deg); }

/* Hover / focus — meaningful on the interactive pill (link or button). */
.qc-account-pill__btn:hover,
.qc-account-pill__btn:focus-visible {
  border-color: rgba(47, 233, 255, 0.85);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(47, 233, 255, 0.25);
  transform: translateY(-1px);
  outline: none;
}
.qc-account-pill__btn:focus-visible {
  outline: 2px solid #2fe9ff;
  outline-offset: 2px;
}

/* Loading (inert <span>): not interactive, slightly dimmed, no lift on hover. */
.qc-account-pill__btn[aria-disabled='true'] {
  cursor: default;
  opacity: 0.85;
}
.qc-account-pill__btn[aria-disabled='true']:hover {
  transform: none;
  border-color: rgba(47, 233, 255, 0.35);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

/* Tone accents — quiet, so the pill never reads as an alert banner. */
.qc-account-pill[data-tone='active'] .qc-account-pill__btn { border-color: rgba(47, 233, 255, 0.55); }
.qc-account-pill[data-tone='active'] .qc-account-pill__label { color: #2fe9ff; }

.qc-account-pill[data-tone='lapsed'] .qc-account-pill__btn { border-color: rgba(255, 196, 84, 0.5); }
.qc-account-pill[data-tone='lapsed'] .qc-account-pill__cta { color: #ffc454; }

.qc-account-pill[data-tone='error'] .qc-account-pill__btn { border-color: rgba(255, 120, 120, 0.5); }
.qc-account-pill[data-tone='error'] .qc-account-pill__label { color: #ff9c9c; }

.qc-account-pill[data-tone='loading'] .qc-account-pill__label {
  animation: qc-account-pill-pulse 1.4s ease-in-out infinite;
}
@keyframes qc-account-pill-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* ── Dropdown menu (active Pro only) ─────────────────────────────────────── */
.qc-account-pill__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  padding: 6px;

  /* The pill is fixed-positioned, so the menu can't rely on the page scrolling
     to reveal overflow. Cap the panel to the viewport (flex column) and let the
     inner list scroll, so every item stays reachable on short (landscape-phone)
     screens. */
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 72px);
  max-height: calc(100dvh - 72px); /* dvh tracks mobile Safari's dynamic toolbar; vh is the fallback */

  border-radius: 14px;
  border: 1px solid rgba(47, 233, 255, 0.28);
  background: rgba(10, 12, 14, 0.98);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);

  /* A short reveal so it doesn't look like a hard popup. */
  transform-origin: top right;
  animation: qc-account-pill-reveal 0.13s ease-out;
}
.qc-account-pill__menu[hidden] { display: none; }

/* The role="menu" itself: the scroll container holding the menuitems. */
.qc-account-pill__menu-list {
  flex: 1 1 auto;
  min-height: 0;            /* allow the flex child to shrink + scroll */
  overflow-y: auto;
  overscroll-behavior: contain;
}

@keyframes qc-account-pill-reveal {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.qc-account-pill__menu-header {
  flex: 0 0 auto;          /* fixed header; the list below it scrolls */
  padding: 6px 10px 8px;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #2fe9ff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.qc-account-pill__item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 10px;
  border-radius: 9px;
  text-decoration: none;
  color: #e6edf3;
  white-space: nowrap;
}
.qc-account-pill__item:hover,
.qc-account-pill__item:focus-visible {
  background: rgba(47, 233, 255, 0.12);
  outline: none;
}
.qc-account-pill__item:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(47, 233, 255, 0.6);
}
.qc-account-pill__item-label { font-weight: 600; font-size: 13px; }
.qc-account-pill__item-desc { font-weight: 400; font-size: 11px; color: #9aa6b1; }

/* Small screens: tighten and let the menu span a sensible width near the edge. */
@media (max-width: 480px) {
  .qc-account-pill { top: 8px; right: 8px; }
  .qc-account-pill__btn { max-width: 64vw; padding: 6px 11px; font-size: 12px; }
  .qc-account-pill__menu { min-width: 200px; max-width: 78vw; }
}

/* Print: the pill is screen chrome, not content. */
@media print {
  .qc-account-pill { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .qc-account-pill__btn,
  .qc-account-pill__caret { transition: none; }
  .qc-account-pill__menu { animation: none; }
  .qc-account-pill[data-tone='loading'] .qc-account-pill__label { animation: none; }
}