/**
 * Compact header account panel.
 *
 * This layer is loaded for both guest and authenticated responses. Guest
 * listings may replace account-premium.css with public-form-controls.css;
 * the header panel must retain its own layout after login/auth cache sync.
 *
 * @package DafaTheme
 */

body .header-user__panel.header-user__panel--compact {
  position: fixed;
  width: min(360px, calc(100vw - 24px));
  min-width: 0;
  padding: 16px;
  gap: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 0;
  border-radius: 10px;
  background: var(--dafa-surface);
  box-shadow: 0 8px 40px color-mix(in srgb, var(--dafa-text) 16%, transparent);
  scrollbar-width: thin;
}
.header-user__panel--compact::before { display: none; }
.header-user__panel--compact > * { flex-shrink: 0; }
.header-user__panel--compact .header-user__identity { align-items: center; padding: 0 0 16px; gap: 12px; }
.header-user__panel--compact .header-user__identity-avatar img { width: 42px; height: 42px; box-shadow: none; }
.header-user__identity-copy { display: grid; gap: 3px; min-width: 0; }
.header-user__identity-copy > strong { font-size: 16px; font-weight: 650; line-height: 1.4; }
.header-user__status { display: block; width: fit-content; color: var(--dafa-text-soft); font-size: 11px; line-height: 1.6; }
.header-user__status[data-dafa-vip-tier] { color: var(--dafa-vip-ink); }
.header-user__panel--compact .header-user__close { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; min-height: 36px; padding: 0; border: 0; background: none; color: var(--dafa-text-soft); border-radius: 5px; cursor: pointer; }
.header-user__panel--compact .header-user__close:hover { background: var(--dafa-surface-muted); color: var(--dafa-text); }
.header-user__metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; padding: 0; }
.header-user__panel--compact a.header-user__metric { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 12px !important; border: 0; border-radius: 6px; background: var(--dafa-surface-muted); text-decoration: none; color: var(--dafa-text); }
.header-user__panel--compact a.header-user__metric:hover { background: var(--dafa-accent-soft); }
.header-user__metric span, .header-user__metric em { color: var(--dafa-text-soft); font-size: 11px; font-style: normal; font-weight: 400; }
.header-user__metric b { min-width: 0; font-size: 19px; font-weight: 650; line-height: 1.3; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.header-user__panel--compact a.header-user__summary { margin: 0; padding: 12px 0 !important; border: 0 !important; border-radius: 0 !important; gap: 4px; background: none; box-shadow: none; }
.header-user__panel--compact a.header-user__summary:hover { background: none; color: var(--dafa-accent-strong) !important; }
.header-user__panel--compact .header-user__summary-head > strong { color: var(--dafa-text); font-size: 12px; font-weight: 500; }
.header-user__panel--compact .header-user__summary-head > span { font-size: 11px; }
.header-user__panel--compact .header-user__summary-detail { font-size: 12px; }
.header-user__panel--compact .header-user__summary-detail b { color: var(--dafa-text); font-size: 13px; font-weight: 600; }
.header-user__panel--compact .dafa-checkin--header { padding: 10px 0; border-top: 1px solid var(--dafa-border); }
.header-user__panel--compact .header-user__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; padding: 8px 0; border-top: 1px solid var(--dafa-border); }
.header-user__panel--compact .header-user__actions a { flex-direction: row; gap: 10px; min-height: 42px; padding: 9px 8px !important; border-radius: 5px !important; font-size: 13px; text-align: left; }
.header-user__action-icon { flex: 0 0 18px; color: var(--dafa-text-soft); }
.header-user__action-icon .dafa-account-icon { width: 18px; height: 18px; }
.header-user__panel--compact .header-user__actions a:hover { background: var(--dafa-surface-muted); }
.header-user__panel--compact .header-user__actions a:hover .header-user__action-icon { color: var(--dafa-accent-strong); }
.header-user__footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--dafa-border); }
.header-user__panel--compact .header-user__footer a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 2px !important; color: var(--dafa-text-soft); font-size: 12px; font-weight: 500; text-decoration: none; }
.header-user__panel--compact a.header-user__account-link { color: var(--dafa-text); }
.header-user__footer .dafa-account-icon { width: 16px; height: 16px; }
.header-user__panel--compact .header-user__footer a:hover { color: var(--dafa-accent-strong); }
.header-user__panel--compact :is(a, button):focus-visible { outline: 2px solid var(--dafa-accent); outline-offset: 2px; }
.header-user__toggle[aria-expanded="true"] { outline: 2px solid var(--dafa-accent-soft); outline-offset: 3px; }

:root,
body {
  --dafa-account-asset-wash: linear-gradient(145deg, color-mix(in srgb, var(--dafa-accent-soft) 70%, transparent), transparent 55%), var(--dafa-surface);
  --dafa-account-compact-wash: linear-gradient(145deg, color-mix(in srgb, var(--dafa-accent-soft) 45%, transparent), transparent 70%), var(--dafa-surface);
  --dafa-account-member-wash: linear-gradient(145deg, color-mix(in srgb, #d9a441 12%, transparent), transparent 55%), var(--dafa-surface);
}
html.dafa-color-dark body,
body:is(.dafa-color-dark, .night) {
  --dafa-account-asset-wash: linear-gradient(145deg, rgb(230 139 96 / 0.12), transparent 55%), var(--dafa-surface);
  --dafa-account-compact-wash: linear-gradient(145deg, rgb(230 139 96 / 0.08), transparent 70%), var(--dafa-surface);
  --dafa-account-member-wash: linear-gradient(145deg, rgb(217 164 65 / 0.10), transparent 55%), var(--dafa-surface);
}
html body .header-user__panel--compact a.header-user__metric {
  background: var(--dafa-account-compact-wash);
}
html body .header-user__panel--compact a.header-user__metric:hover {
  background: var(--dafa-account-asset-wash);
}

@media (prefers-reduced-motion: no-preference) {
  .header-user__panel--compact:not([hidden]),
  .header-notice__panel--refined:not([hidden]) { animation: dafa-account-reveal 120ms ease-out; }
  @keyframes dafa-account-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
}