/* auth-badge.css — persistent login + membership indicator in the header.
   Self-contained. Loaded alongside auth-badge.js on app pages. v=20260613-authbadge */

.wai-badge { position: relative; display: inline-flex; align-items: center; font-family: inherit; }
.wai-badge.wai-fixed { position: fixed; top: 10px; right: 12px; z-index: 9000; }

/* explicit display on the buttons would otherwise beat the UA [hidden] rule */
.wai-signin[hidden], .wai-trigger[hidden] { display: none !important; }

/* Trigger button (signed-in: avatar + name + tier) */
.wai-trigger {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 9px 3px 3px;
  background: #fff; border: 1px solid #f0c2d6; border-radius: 999px;
  cursor: pointer; font: inherit; color: #5a2040; line-height: 1;
  box-shadow: 0 1px 3px rgba(200,68,122,.12);
  transition: box-shadow .15s, border-color .15s;
  max-width: 230px;
}
.wai-trigger:hover { border-color: #e58bb0; box-shadow: 0 2px 7px rgba(200,68,122,.2); }

.wai-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg,#ff8fb3,#e05080); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; overflow: hidden; user-select: none;
}
.wai-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.wai-name {
  font-size: 13px; font-weight: 700; color: #5a2040;
  max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Tier badge */
.wai-tier {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 800; white-space: nowrap; line-height: 1.3;
  border: 1px solid transparent;
}
.wai-tier.wai-free  { background: #eef0f2; color: #6b7280; border-color: #d8dde2; }
.wai-tier.wai-pro   { background: linear-gradient(135deg,#fff3cf,#ffe8a8); color: #6a3010; border-color: #f3c25c; }
.wai-tier.wai-trial { background: linear-gradient(135deg,#ffe6cc,#ffd2a6); color: #8a3d00; border-color: #f0a965; }
.wai-tier.wai-hidden { display: none; }

/* Signed-out sign-in pill */
.wai-signin {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 13px; border-radius: 999px; cursor: pointer; font: inherit;
  font-size: 13px; font-weight: 800; line-height: 1;
  background: linear-gradient(135deg,#ff6b9d,#e05080); color: #fff;
  border: 1px solid transparent; box-shadow: 0 1px 4px rgba(224,80,128,.3);
  transition: filter .15s;
}
.wai-signin:hover { filter: brightness(1.06); }

/* Dropdown */
.wai-menu {
  position: absolute; top: calc(100% + 7px); right: 0; z-index: 9500;
  min-width: 220px; max-width: 280px;
  background: #fff; border: 1px solid #f0c2d6; border-radius: 14px;
  box-shadow: 0 10px 30px rgba(120,40,80,.22);
  padding: 12px; display: none; text-align: left;
}
.wai-menu.wai-open { display: block; }
.wai-fixed .wai-menu { right: 0; }

.wai-menu .wai-m-name  { font-size: 14px; font-weight: 800; color: #3a1226; word-break: break-word; }
.wai-menu .wai-m-email { font-size: 12px; color: #9a7384; margin-top: 1px; word-break: break-all; }
.wai-menu .wai-m-status {
  margin: 9px 0; padding: 8px 10px; border-radius: 10px;
  background: #fdeef5; font-size: 12.5px; color: #5a2040; line-height: 1.45;
}
.wai-menu .wai-m-status b { color: #c8447a; }
.wai-menu hr { border: none; border-top: 1px solid #f3dde8; margin: 9px 0; }

.wai-menu a, .wai-menu button {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 9px; border-radius: 9px; border: none; background: transparent;
  font: inherit; font-size: 13.5px; font-weight: 700; color: #5a2040;
  text-decoration: none; cursor: pointer; text-align: left;
}
.wai-menu a:hover, .wai-menu button:hover { background: #fdeef5; }
.wai-menu .wai-m-upgrade { color: #c8447a; }
.wai-menu .wai-m-out { color: #b3506e; }

@media (max-width: 760px) {
  .wai-name { max-width: 64px; }
  .wai-trigger { max-width: 180px; }
}