/* Entity Chips - Clickable entity references in narrative and selections
 *
 * Entity chips are action-chip-styled buttons for entities (NPCs, locations, items, spells)
 * mentioned in narrative or presented as selection options.
 *
 * Usage:
 * - Narrative entities: `[[Goblin Chief]]` becomes clickable chip
 * - Inline selections: World/language choices as chip buttons
 */

/* ==========================================================================
   Base Entity Chip
   ========================================================================== */

.entity-chip {
  /* Entity chip color theming via custom properties */
  --chip-color: var(--color-accent-primary);
  --chip-color-rgb: 97, 175, 239;

  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border: 1px solid rgba(var(--chip-color-rgb), 0.3);
  border-radius: var(--radius-full);
  background: linear-gradient(
    180deg,
    rgba(var(--chip-color-rgb), 0.12) 0%,
    rgba(var(--chip-color-rgb), 0.04) 100%
  );
  color: var(--chip-color);
  font-size: 0.9em;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
  vertical-align: baseline;
  position: relative;
}

.entity-chip:hover {
  background: linear-gradient(
    180deg,
    rgba(var(--chip-color-rgb), 0.2) 0%,
    rgba(var(--chip-color-rgb), 0.1) 100%
  );
  border-color: rgba(var(--chip-color-rgb), 0.5);
  box-shadow: 0 0 8px rgba(var(--chip-color-rgb), 0.25);
  transform: translateY(-1px);
}

.entity-chip:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.entity-chip:active {
  transform: translateY(0);
  box-shadow: 0 0 4px rgba(var(--chip-color-rgb), 0.2);
}

/* Inspect indicator - subtle icon hint */
.entity-chip__inspect-icon {
  font-size: 0.75em;
  opacity: 0;
  transition: opacity var(--transition-fast);
  margin-left: 2px;
}

.entity-chip:hover .entity-chip__inspect-icon {
  opacity: 0.7;
}

/* Entity type icon */
.entity-chip__icon {
  font-size: 0.85em;
  opacity: 0.8;
}

/* ==========================================================================
   Entity Type Variants
   Using CSS custom properties for consistent theming
   ========================================================================== */

/* NPC - Cyan/teal theme */
.entity-chip--npc {
  --chip-color: var(--color-entity-npc);
  --chip-color-rgb: 34, 211, 238;
}

/* Location - Green theme */
.entity-chip--location {
  --chip-color: var(--color-entity-location);
  --chip-color-rgb: 152, 195, 121;
}

/* Item - Amber/gold theme */
.entity-chip--item {
  --chip-color: var(--color-entity-item);
  --chip-color-rgb: 229, 192, 123;
}

/* Spell - Purple theme */
.entity-chip--spell {
  --chip-color: var(--color-entity-spell);
  --chip-color-rgb: 198, 120, 221;
}

/* Monster/Creature - Red theme */
.entity-chip--creature,
.entity-chip--monster {
  --chip-color: var(--color-entity-creature);
  --chip-color-rgb: 224, 108, 117;
}

/* Quest - Blue theme */
.entity-chip--quest {
  --chip-color: var(--color-entity-quest);
  --chip-color-rgb: 97, 175, 239;
}

/* Faction - Orange theme */
.entity-chip--faction {
  --chip-color: var(--color-entity-faction);
  --chip-color-rgb: 209, 154, 102;
}

/* Lore - Gray theme */
.entity-chip--lore {
  --chip-color: var(--color-entity-lore);
  --chip-color-rgb: 171, 178, 191;
}

/* ==========================================================================
   Inline Selection Chips
   ========================================================================== */

/* Container for inline selection chips */
.inline-selection {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
  padding: 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.inline-selection__label {
  width: 100%;
  font-size: 0.85em;
  color: var(--text-secondary, #888);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.inline-selection__counter {
  width: 100%;
  font-size: 0.8em;
  color: var(--text-secondary, #888);
  margin-top: 8px;
}

/* Selection chip (extends entity-chip for world/language selection) */
.selection-chip {
  /* Selection chip color theming */
  --chip-color: var(--color-gold);
  --chip-color-rgb: 255, 215, 0;

  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid rgba(var(--chip-color-rgb), 0.25);
  border-radius: 20px;
  background: linear-gradient(
    180deg,
    rgba(var(--chip-color-rgb), 0.08) 0%,
    rgba(var(--chip-color-rgb), 0.02) 100%
  );
  color: var(--chip-color);
  font-size: 0.9em;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-normal);
  text-decoration: none;
  white-space: nowrap;
}

.selection-chip:hover {
  background: linear-gradient(
    180deg,
    rgba(var(--chip-color-rgb), 0.15) 0%,
    rgba(var(--chip-color-rgb), 0.08) 100%
  );
  border-color: rgba(var(--chip-color-rgb), 0.4);
  box-shadow: 0 0 10px rgba(var(--chip-color-rgb), 0.2);
  transform: translateY(-1px);
}

.selection-chip:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.selection-chip:active {
  transform: translateY(0);
}

/* Selected state for multi-select */
.selection-chip--selected {
  background: linear-gradient(
    180deg,
    rgba(var(--chip-color-rgb), 0.25) 0%,
    rgba(var(--chip-color-rgb), 0.15) 100%
  );
  border-color: rgba(var(--chip-color-rgb), 0.6);
  box-shadow: 0 0 12px rgba(var(--chip-color-rgb), 0.25);
}

.selection-chip--selected::after {
  content: "✓";
  font-size: 0.85em;
  margin-left: var(--space-1);
  color: var(--chip-color);
}

/* Disabled state */
.selection-chip--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Selection chip icon */
.selection-chip__icon {
  font-size: 1.1em;
}

/* Selection chip badge (for language script type) */
.selection-chip__badge {
  font-size: 0.7em;
  padding: 2px 5px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* ==========================================================================
   World Selection Chips (specific styling)
   ========================================================================== */

.selection-chip--world {
  padding: 10px 16px;
  border-radius: 24px;
}

.selection-chip--world .selection-chip__icon {
  font-size: 1.3em;
}

.selection-chip--world .selection-chip__description {
  display: none;
}

/* Show description on hover for world chips */
@media (hover: hover) {
  .selection-chip--world:hover .selection-chip__description {
    display: block;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--bg-secondary, #1e1e1e);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    font-size: 0.8em;
    font-weight: 400;
    color: var(--text-primary, #fff);
    white-space: normal;
    max-width: 200px;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }
}

/* ==========================================================================
   Language Selection Chips (specific styling)
   ========================================================================== */

.selection-chip--language {
  padding: 6px 12px;
}

.selection-chip--language .selection-chip__badge {
  background: rgba(124, 58, 237, 0.2);
  color: #a78bfa;
}

/* ==========================================================================
   Animation States
   ========================================================================== */

/* Pulse animation for newly appearing chips */
@keyframes chip-appear {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  50% {
    opacity: 1;
    transform: scale(1.02);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.entity-chip--animate-in,
.selection-chip--animate-in {
  animation: chip-appear 0.3s ease forwards;
}

/* Loading state */
.entity-chip--loading {
  opacity: 0.7;
  pointer-events: none;
}

.entity-chip--loading::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 8px;
  width: 10px;
  height: 10px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
   Achievement Chips
   ========================================================================== */

/* Base achievement chip - Gold/trophy theme */
.achievement-chip {
  /* Achievement chip color theming */
  --chip-color: var(--color-gold);
  --chip-color-rgb: 255, 215, 0;

  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid rgba(var(--chip-color-rgb), 0.4);
  border-radius: 16px;
  background: linear-gradient(
    180deg,
    rgba(var(--chip-color-rgb), 0.15) 0%,
    rgba(var(--chip-color-rgb), 0.06) 100%
  );
  color: var(--chip-color);
  font-size: 0.9em;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-normal);
  text-decoration: none;
  white-space: nowrap;
  vertical-align: baseline;
  position: relative;
}

.achievement-chip:hover {
  background: linear-gradient(
    180deg,
    rgba(var(--chip-color-rgb), 0.25) 0%,
    rgba(var(--chip-color-rgb), 0.12) 100%
  );
  border-color: rgba(var(--chip-color-rgb), 0.6);
  box-shadow: 0 0 12px rgba(var(--chip-color-rgb), 0.3);
  transform: translateY(-1px);
}

.achievement-chip:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.achievement-chip:active {
  transform: translateY(0);
  box-shadow: 0 0 8px rgba(var(--chip-color-rgb), 0.25);
}

.achievement-chip__icon {
  font-size: 1.1em;
}

.achievement-chip__name {
  font-weight: 500;
}

.achievement-chip__category {
  font-size: 0.7em;
  padding: 2px 5px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.8;
}

/* ==========================================================================
   Achievement Category Variants
   Using CSS custom properties for consistent theming
   ========================================================================== */

/* Combat achievement - Red theme */
.achievement-chip--combat {
  --chip-color: var(--color-accent-error);
  --chip-color-rgb: 224, 108, 117;
}

/* Exploration achievement - Green theme */
.achievement-chip--exploration {
  --chip-color: var(--color-accent-secondary);
  --chip-color-rgb: 152, 195, 121;
}

/* Social achievement - Purple theme */
.achievement-chip--social {
  --chip-color: var(--color-accent-purple);
  --chip-color-rgb: 198, 120, 221;
}

/* Milestone achievement - Blue theme */
.achievement-chip--milestone {
  --chip-color: var(--color-accent-primary);
  --chip-color-rgb: 97, 175, 239;
}

/* Engagement achievement - Teal theme */
.achievement-chip--engagement {
  --chip-color: var(--color-entity-npc);
  --chip-color-rgb: 34, 211, 238;
}

/* Category badge inherits color from parent */
.achievement-chip .achievement-chip__category {
  background: rgba(var(--chip-color-rgb), 0.2);
}

/* ==========================================================================
   Achievement Unlock Animation
   ========================================================================== */

/* Special "just unlocked" state with celebration effect */
.achievement-chip--unlocked {
  animation: achievement-unlock 0.6s ease forwards;
}

@keyframes achievement-unlock {
  0% {
    opacity: 0;
    transform: scale(0.8);
    box-shadow: 0 0 0 rgba(255, 215, 0, 0);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.25);
  }
}

/* Inline achievement notification container */
.achievement-notification {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(
    180deg,
    rgba(255, 215, 0, 0.1) 0%,
    rgba(255, 215, 0, 0.03) 100%
  );
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 12px;
  margin: 8px 0;
}

.achievement-notification__label {
  font-size: 0.75em;
  color: var(--accent-gold, #ffd700);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}

/* Achievement chips container (for multiple achievements) */
.achievement-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}

/* ===========================================================================
   Achievement Chips Section (for "show achievements" display)
   =========================================================================== */

.achievement-chips-section {
  background: linear-gradient(
    180deg,
    rgba(255, 215, 0, 0.05) 0%,
    rgba(255, 215, 0, 0.02) 100%
  );
  border: 1px solid rgba(255, 215, 0, 0.2);
  border-radius: 12px;
  padding: 16px;
  margin: 12px 0;
}

.achievement-chips-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.achievement-chips-section__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent-gold, #ffd700);
  display: flex;
  align-items: center;
  gap: 8px;
}

.achievement-chips-section__title::before {
  content: '🏆';
}

.achievement-chips-section__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Achievement progress bar */
.achievement-chips-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

.achievement-chips-progress__bar {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.achievement-chips-progress__fill {
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--color-gold) 0%,
    rgba(255, 215, 0, 0.7) 100%
  );
  border-radius: var(--radius-md);
  transition: width var(--transition-slow);
}

.achievement-chips-progress__text {
  font-size: 0.8em;
  color: var(--text-muted, #9ca3af);
  white-space: nowrap;
}

/* Empty state for no achievements */
.achievement-chips-empty {
  text-align: center;
  padding: 20px;
  color: var(--text-muted, #9ca3af);
  font-style: italic;
}