/* ============================================================
   User account menu (UserMenu.js) — dark-themed, self-contained.

   The original rules lived in the legacy style.css, which index.html
   NO LONGER LOADS (style-v2.css became authoritative). That left the
   account menu completely unstyled: the avatar rendered at the image's
   natural size (huge, clipped at the top edge) and the dropdown had no
   background or stacking, so it bled through the toolbar and was
   unreadable. This file is loaded and owns the menu's appearance.
   ============================================================ */

.user-menu { position: relative; display: inline-flex; }

/* Trigger button (avatar + name + credits + chevron) */
.user-menu-button {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 4px 10px;
  background: var(--surface-400, #1f1f23);
  border: 1px solid var(--border-default, rgba(255, 255, 255, 0.12));
  border-radius: 10px;
  cursor: pointer;
  color: var(--text-primary, #fafafa);
  font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.user-menu-button:hover {
  border-color: var(--accent-primary, #8b5cf6);
  box-shadow: 0 2px 10px rgba(139, 92, 246, 0.25);
}

.user-avatar,
.user-avatar-placeholder {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  display: block;
}
.user-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--accent-primary, #8b5cf6), var(--accent-secondary, #ec4899));
}

.user-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  line-height: 1.1;
  min-width: 0;
}
.user-name {
  font-weight: 600;
  font-size: 12px;
  color: var(--text-primary, #fafafa);
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-credits {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  color: var(--accent-primary, #a78bfa);
}
.user-credits .v6-icon { width: 10px; height: 10px; }
/* Out of credits reads as a state, not as a number in brand purple. */
.user-credits--empty { color: var(--accent-warning, #f59e0b); }
.dropdown-arrow {
  color: var(--text-secondary, #a1a1aa);
  transition: transform .15s ease;
}
.user-menu-button[aria-expanded="true"] .dropdown-arrow { transform: rotate(180deg); }
.user-signin-btn { display: inline-flex; align-items: center; gap: 6px; }

/* ---- Dropdown panel ---- */
.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 280px;
  max-width: 320px;
  max-height: calc(100dvh - 72px);
  background: var(--surface-300, #18181b);
  border: 1px solid var(--border-default, rgba(255, 255, 255, 0.14));
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  color: var(--text-primary, #fafafa);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
  z-index: 5000;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.user-menu-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.user-menu-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid var(--border-default, rgba(255, 255, 255, 0.08));
}
.user-menu-avatar img,
.user-menu-avatar .avatar-placeholder {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.user-menu-avatar .avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent-primary, #8b5cf6), var(--accent-secondary, #ec4899));
  font-size: 18px;
}
.user-menu-details { flex: 1; min-width: 0; }
.user-menu-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary, #fafafa);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-menu-email {
  font-size: 12px;
  color: var(--text-secondary, #a1a1aa);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Credits ----
   One number, one bar, one refill line. The old block printed
   "Daily Credits: 0" above "Total: 0" — the same figure twice. */
.user-menu-credits-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--surface-400, #1f1f23);
  border-bottom: 1px solid var(--border-default, rgba(255, 255, 255, 0.08));
}
.credits-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.credits-head__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary, #a1a1aa);
}
.credits-head__label .v6-icon { color: var(--accent-primary, #8b5cf6); }
.credits-head__total {
  font-size: 24px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary, #fafafa);
}
.credits-head__total--empty { color: var(--accent-warning, #f59e0b); }
.credits-meter {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-primary, #fafafa) 10%, transparent);
  overflow: hidden;
}
.credits-meter__fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-primary, #8b5cf6), var(--accent-secondary, #ec4899));
}
.credits-lines { display: flex; flex-direction: column; gap: 2px; }
.credits-line { font-size: 12px; color: var(--text-primary, #fafafa); }
.credits-line--muted { color: var(--text-secondary, #a1a1aa); }
.credits-line--bonus { color: var(--accent-secondary, #ec4899); }
.credits-line--premium { color: var(--accent-primary, #a78bfa); }
.premium-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 8px;
  background: linear-gradient(135deg, var(--accent-primary, #8b5cf6), var(--accent-secondary, #ec4899));
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
  font-size: 12px;
}
#upgradeBtn.user-menu-plans-btn {
  width: 100%;
  justify-content: center;
  gap: 6px;
}

/* ---- Menu items ---- */
.user-menu-section {
  padding: 8px;
}
.user-menu-section + .user-menu-section {
  border-top: 1px solid var(--border-default, rgba(255, 255, 255, 0.06));
}
.menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  color: var(--text-primary, #fafafa);
  transition: background .12s ease;
}
.menu-item:hover,
.menu-item:focus-visible { background: color-mix(in srgb, var(--text-primary, #fafafa) 7%, transparent); }
.menu-item.admin { color: var(--accent-primary, #8b5cf6); font-weight: 600; }
.menu-item.admin:hover { background: rgba(139, 92, 246, 0.12); }
.menu-icon { color: var(--text-secondary, #a1a1aa); }
.menu-item.admin .menu-icon { color: inherit; }
.menu-text { flex: 1; color: inherit; }

@media (max-width: 420px) {
  .user-menu-dropdown {
    min-width: 0;
    width: min(320px, calc(100vw - 16px));
  }
}