/**
 * Token Display Badge Styles
 * Shows remaining message tokens in header
 */

/* ============================================================================
   TOKEN DISPLAY BADGE
   ============================================================================ */

.token-display {
  position: fixed;
  top: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease, opacity 1s ease;
  z-index: 950; /* Below settings menu (1000) but above content */
  opacity: 1;
}

.token-display.fade-out {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.token-display:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.token-icon {
  font-size: 1.1rem;
}

.token-count {
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--primary-color);
  min-width: 1.5rem;
  text-align: center;
}

.token-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* Low tokens warning state */
.token-display.token-low {
  border-color: var(--error-color, #dc3545);
  animation: pulse-warning 2s ease-in-out infinite;
}

.token-display.token-low .token-count {
  color: var(--error-color, #dc3545);
}

@keyframes pulse-warning {
  0%,
  100% {
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.2);
  }
  50% {
    box-shadow: 0 4px 16px rgba(220, 53, 69, 0.5);
  }
}

/* Unlimited state */
.token-display.token-unlimited {
  border-color: var(--success-color, #28a745);
}

.token-display.token-unlimited .token-count {
  color: var(--success-color, #28a745);
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 768px) {
  .token-display {
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.9rem;
  }

  .token-icon {
    font-size: 1rem;
  }

  .token-count {
    font-size: 1rem;
  }

  .token-label {
    display: none; /* Hide label on mobile to save space */
  }
}

/* Adjust for when settings menu is open */
body.settings-open .token-display {
  transform: translateY(0);
  opacity: 0.5;
}

/* ============================================================================
   INTEGRATION WITH ACCOUNT PILL
   ============================================================================ */

/* If account pill is visible, position token display below it */
.account-pill:not(.hidden) ~ .container .token-display {
  top: 4rem;
}

@media (max-width: 768px) {
  .account-pill:not(.hidden) ~ .container .token-display {
    top: 3.5rem;
  }
}