/* public/css/alexandra-identity.css
   Alexandra Identity System — avatar theming, role badges, light/dark mode.
   Design tokens inherit from TikTok-native palette (cyan #00F2EA + coral #FF4D6D).
*/

:root {
  /* Avatar backgrounds */
  --alex-avatar-light-bg: #F8F6F3;
  --alex-avatar-dark-bg: transparent;

  /* Avatar ring colors */
  --alex-avatar-ring-active: #00F2EA;
  --alex-avatar-ring-idle: rgba(0, 242, 234, 0.3);
  --alex-avatar-ring-badge: #FF4D6D;

  /* Role badge colors */
  --alex-badge-creator: #00F2EA;
  --alex-badge-brand: #7A3FFF;
  --alex-badge-advertiser: #FF6B35;
  --alex-badge-agency: #4ADE80;
  --alex-badge-internal: #FACC15;

  /* Avatar sizes */
  --alex-avatar-32: 32px;
  --alex-avatar-48: 48px;
  --alex-avatar-64: 64px;
  --alex-avatar-80: 80px;
  --alex-avatar-120: 120px;
}

/* Base avatar class */
.alex-avatar {
  display: inline-block;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--alex-avatar-light-bg);
}

/* Avatar size variants */
.alex-avatar-32 {
  width: var(--alex-avatar-32);
  height: var(--alex-avatar-32);
  border-radius: 50%;
}

.alex-avatar-48 {
  width: var(--alex-avatar-48);
  height: var(--alex-avatar-48);
  border-radius: 50%;
}

.alex-avatar-64 {
  width: var(--alex-avatar-64);
  height: var(--alex-avatar-64);
  border-radius: 50%;
}

.alex-avatar-80 {
  width: var(--alex-avatar-80);
  height: var(--alex-avatar-80);
  border-radius: 50%;
}

.alex-avatar-120 {
  width: var(--alex-avatar-120);
  height: var(--alex-avatar-120);
  border-radius: 50%;
}

/* Avatar ring glow — for active/streaming state */
.alex-avatar-ring {
  position: relative;
}

.alex-avatar-ring::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 50%;
  border: 2px solid var(--alex-avatar-ring-active);
  animation: alex-ring-pulse 2s ease-in-out infinite;
  pointer-events: none;
}

.alex-avatar-ring.idle::after {
  border-color: var(--alex-avatar-ring-idle);
  animation: none;
}

@keyframes alex-ring-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.04); }
}

/* Role badge — small pill below avatar */
.alex-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.4;
}

.alex-role-badge.creator {
  background: rgba(0, 242, 234, 0.15);
  color: var(--alex-badge-creator);
  border: 1px solid rgba(0, 242, 234, 0.3);
}

.alex-role-badge.brand {
  background: rgba(122, 63, 255, 0.15);
  color: var(--alex-badge-brand);
  border: 1px solid rgba(122, 63, 255, 0.3);
}

.alex-role-badge.advertiser {
  background: rgba(255, 107, 53, 0.15);
  color: var(--alex-badge-advertiser);
  border: 1px solid rgba(255, 107, 53, 0.3);
}

.alex-role-badge.agency {
  background: rgba(74, 222, 128, 0.15);
  color: var(--alex-badge-agency);
  border: 1px solid rgba(74, 222, 128, 0.3);
}

.alex-role-badge.internal {
  background: rgba(250, 204, 21, 0.15);
  color: var(--alex-badge-internal);
  border: 1px solid rgba(250, 204, 21, 0.3);
}

/* Dark mode — avatar adjustments */
[data-theme="dark"] .alex-avatar,
.alex-avatar-dark {
  background: transparent;
}

/* Avatar inline in step list — beside step label */
.alex-step-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  vertical-align: middle;
  margin-right: 8px;
}

/* Avatar + name row in panel headers */
.alex-identity-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.alex-identity-row .alex-avatar {
  flex-shrink: 0;
}

.alex-identity-label {
  font-size: 14px;
  font-weight: 700;
  color: #E0E0E0;
  line-height: 1.3;
}

.alex-identity-sublabel {
  font-size: 11px;
  color: #888;
  font-weight: 500;
}

/* Face C compact mark — for inline use */
.alex-face-c-mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.alex-face-c-mark .alex-avatar-32 {
  width: 32px;
  height: 32px;
}

/* Dark mode overrides */
body.dark-mode,
[data-theme="dark"] {
  --alex-avatar-light-bg: transparent;
}