/**
 * ActivGate Unified Component Library
 * ====================================
 * Consolidated component styles using design tokens.
 *
 * Components:
 * - Buttons (.ag-btn)
 * - Cards (.ag-card)
 * - Form inputs (.ag-input, .ag-field)
 * - Alerts (.ag-alert)
 * - Badges (.ag-badge)
 * - Avatars (.ag-avatar)
 * - Spinners (.ag-spinner)
 * - Skeletons (.ag-skeleton)
 */

/* ========================================
 * BUTTONS
 * ======================================== */

/**
 * Button base - use with variant classes
 *
 * Sizes: .ag-btn--sm, .ag-btn--lg
 * Variants: .ag-btn--primary, .ag-btn--secondary, .ag-btn--ghost, .ag-btn--danger, .ag-btn--success
 * States: .ag-btn--loading, :disabled
 */
.ag-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ag-space-2);
  height: var(--ag-button-height-md);
  min-width: var(--ag-button-min-width);
  padding: 0 var(--ag-space-button-x);
  font-family: var(--ag-font-sans);
  font-size: var(--ag-font-size-sm);
  font-weight: var(--ag-font-weight-semibold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--ag-radius-button);
  cursor: pointer;
  transition: var(--ag-transition-colors), var(--ag-transition-shadow), var(--ag-transition-transform);
  -webkit-font-smoothing: antialiased;
}

.ag-btn:focus-visible {
  outline: 2px solid var(--ag-color-brand-primary);
  outline-offset: 2px;
}

.ag-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.ag-btn:disabled,
.ag-btn--loading {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Button Sizes */
.ag-btn--sm {
  height: var(--ag-button-height-sm);
  padding: 0 var(--ag-space-3);
  font-size: var(--ag-font-size-xs);
  gap: var(--ag-space-1);
}

.ag-btn--lg {
  height: var(--ag-button-height-lg);
  padding: 0 var(--ag-space-6);
  font-size: var(--ag-font-size-base);
  gap: var(--ag-space-3);
}

/* Rectangular buttons (non-pill) */
.ag-btn--rect {
  border-radius: var(--ag-radius-button-rect);
}

/* Button Variants */
.ag-btn--primary {
  background: var(--ag-gradient-button);
  border: solid 0.1px white;
  color: var(--ag-color-text-on-primary);
  box-shadow: var(--ag-shadow-primary);
}

.ag-btn--primary:hover:not(:disabled) {
  filter: brightness(1.05);
  box-shadow: 0 10px 28px rgba(37, 99, 235, 0.4);
}

.ag-btn--primary:active:not(:disabled) {
  filter: brightness(0.95);
}

/* Brand gradient variant */
.ag-btn--brand {
  background: var(--ag-gradient-brand);
  color: var(--ag-color-text-on-primary);
  box-shadow: var(--ag-shadow-md);
}

.ag-btn--brand:hover:not(:disabled) {
  filter: brightness(0.96);
  box-shadow: var(--ag-shadow-lg);
}

/* Secondary (outline) */
.ag-btn--secondary {
  background: var(--ag-color-bg-surface);
  color: var(--ag-color-text-body);
  border-color: var(--ag-color-border-strong);
}

.ag-btn--secondary:hover:not(:disabled) {
  background: var(--ag-color-bg-surface-alt);
  border-color: var(--ag-color-border);
}

/* Ghost (transparent) */
.ag-btn--ghost {
  background: transparent;
  color: var(--ag-color-text-body);
  border-color: transparent;
}

.ag-btn--ghost:hover:not(:disabled) {
  background: var(--ag-color-interactive-hover);
}

/* Ghost Primary */
.ag-btn--ghost-primary {
  background: transparent;
  color: var(--ag-color-brand-primary);
  border-color: transparent;
}

.ag-btn--ghost-primary:hover:not(:disabled) {
  background: var(--ag-color-brand-primary-softer);
}

/* Danger */
.ag-btn--danger {
  background: var(--ag-color-error);
  color: var(--ag-color-text-on-primary);
  box-shadow: var(--ag-shadow-error);
}

.ag-btn--danger:hover:not(:disabled) {
  background: var(--ag-color-error-hover);
}

/* Ghost Danger */
.ag-btn--ghost-danger {
  background: transparent;
  color: var(--ag-color-error);
  border-color: transparent;
}

.ag-btn--ghost-danger:hover:not(:disabled) {
  background: var(--ag-color-error-soft);
}

/* Success */
.ag-btn--success {
  background: var(--ag-color-success);
  color: var(--ag-color-text-on-primary);
  box-shadow: var(--ag-shadow-success);
}

.ag-btn--success:hover:not(:disabled) {
  background: var(--ag-color-success-hover);
}

/* Soft variants (light background) */
.ag-btn--soft {
  background: var(--ag-color-brand-primary-softer);
  color: var(--ag-color-brand-primary);
  border-color: var(--ag-color-brand-primary-border);
}

.ag-btn--soft:hover:not(:disabled) {
  background: var(--ag-color-brand-primary-soft);
}

/* Icon-only button */
.ag-btn--icon {
  min-width: auto;
  width: var(--ag-button-height-md);
  padding: 0;
}

.ag-btn--icon.ag-btn--sm {
  width: var(--ag-button-height-sm);
}

.ag-btn--icon.ag-btn--lg {
  width: var(--ag-button-height-lg);
}

/* Full width */
.ag-btn--full {
  width: 100%;
}

/* Loading state spinner */
.ag-btn--loading .ag-btn__text {
  visibility: hidden;
}

.ag-btn--loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ag-btn-spin 0.6s linear infinite;
}

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

/* ========================================
 * CARDS
 * ======================================== */

/**
 * Card component - flexible container
 *
 * Variants: .ag-card--flat, .ag-card--interactive, .ag-card--compact
 */
.ag-card {
  position: relative;
  background: var(--ag-color-bg-surface);
  border: 1px solid var(--ag-color-border-subtle);
  border-radius: var(--ag-radius-card);
  box-shadow: var(--ag-shadow-md);
  overflow: hidden;
  transition: var(--ag-transition-transform), var(--ag-transition-shadow), border-color var(--ag-transition-normal);
}

/* Subtle inner highlight */
.ag-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: var(--ag-shadow-inset);
}

/* Interactive card (hover effects) */
.ag-card--interactive {
  cursor: pointer;
}

.ag-card--interactive:hover {
  transform: translateY(-3px);
  box-shadow: var(--ag-shadow-lg);
  border-color: var(--ag-color-brand-primary-border);
}

/* Flat card (no shadow) */
.ag-card--flat {
  box-shadow: none;
}

.ag-card--flat::after {
  display: none;
}

/* Compact card (smaller padding) */
.ag-card--compact {
  border-radius: var(--ag-radius-xl);
}

/* Card sections */
.ag-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ag-space-3);
  padding: var(--ag-space-card);
  border-bottom: 1px solid var(--ag-color-border);
}

.ag-card__title {
  margin: 0;
  font-size: var(--ag-font-size-md);
  font-weight: var(--ag-font-weight-semibold);
  color: var(--ag-color-text-heading);
}

.ag-card__subtitle {
  margin: var(--ag-space-1) 0 0;
  font-size: var(--ag-font-size-xs);
  color: var(--ag-color-text-muted);
}

.ag-card__body {
  padding: var(--ag-space-card);
}

.ag-card__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ag-space-2);
  padding: var(--ag-space-card);
  border-top: 1px solid var(--ag-color-border);
}

/* Card media (images) */
.ag-card__media {
  position: relative;
  aspect-ratio: var(--ag-card-media-ratio);
  background: var(--ag-color-bg-page-alt);
  overflow: hidden;
}

.ag-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ag-transition-slow);
}

.ag-card--interactive:hover .ag-card__media img {
  transform: scale(1.03);
}

/* Card media overlay gradient */
.ag-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0));
  pointer-events: none;
}

/* Card link wrapper */
.ag-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* ========================================
 * FORM INPUTS
 * ======================================== */

/**
 * Input base - use for text, email, password, etc.
 *
 * Sizes: .ag-input--sm, .ag-input--lg
 * States: :focus, :disabled, .ag-input--error
 */
.ag-input {
  display: block;
  width: 100%;
  height: var(--ag-input-height-md);
  padding: var(--ag-space-input-y) var(--ag-space-input-x);
  font-family: var(--ag-font-sans);
  font-size: var(--ag-font-size-sm);
  color: var(--ag-color-text-body);
  background: var(--ag-color-bg-surface);
  border: 1px solid var(--ag-color-border);
  border-radius: var(--ag-radius-input);
  outline: none;
  transition: var(--ag-transition-colors), var(--ag-transition-shadow);
}

.ag-input::placeholder {
  color: var(--ag-color-text-muted);
}

.ag-input:focus {
  border-color: var(--ag-color-border-focus);
  box-shadow: var(--ag-shadow-focus);
}

.ag-input:disabled {
  background: var(--ag-color-bg-page);
  color: var(--ag-color-text-muted);
  cursor: not-allowed;
}

/* Input sizes */
.ag-input--sm {
  height: var(--ag-input-height-sm);
  padding: var(--ag-space-1) var(--ag-space-2);
  font-size: var(--ag-font-size-xs);
}

.ag-input--lg {
  height: var(--ag-input-height-lg);
  padding: var(--ag-space-3) var(--ag-space-4);
  font-size: var(--ag-font-size-base);
}

/* Error state */
.ag-input--error {
  border-color: var(--ag-color-error);
  background: var(--ag-color-error-softer);
}

.ag-input--error:focus {
  box-shadow: var(--ag-shadow-focus-error);
}

/* Textarea */
textarea.ag-input {
  height: auto;
  min-height: 90px;
  resize: vertical;
}

/* Select */
select.ag-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7491' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--ag-space-3) center;
  padding-right: var(--ag-space-8);
}

/* Form field wrapper */
.ag-field {
  margin-bottom: var(--ag-space-lg);
}

.ag-field__label {
  display: block;
  margin-bottom: var(--ag-space-1);
  font-size: var(--ag-font-size-sm);
  font-weight: var(--ag-font-weight-medium);
  color: var(--ag-color-text-heading);
}

.ag-field__label-extra {
  font-size: var(--ag-font-size-xs);
  font-weight: var(--ag-font-weight-normal);
  color: var(--ag-color-text-muted);
  margin-left: var(--ag-space-1);
}

.ag-field__help {
  margin-top: var(--ag-space-1);
  font-size: var(--ag-font-size-xs);
  color: var(--ag-color-text-muted);
}

.ag-field__error {
  margin-top: var(--ag-space-1);
  font-size: var(--ag-font-size-xs);
  color: var(--ag-color-error);
}

/* Field error state */
.ag-field--error .ag-field__label {
  color: var(--ag-color-error);
}

.ag-field--error .ag-input {
  border-color: var(--ag-color-error);
  background: var(--ag-color-error-softer);
}

/* ========================================
 * ALERTS / MESSAGES
 * ======================================== */

/**
 * Alert component
 *
 * Variants: .ag-alert--success, .ag-alert--warning, .ag-alert--error, .ag-alert--info
 */
.ag-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--ag-space-2);
  padding: var(--ag-space-3) var(--ag-space-4);
  font-size: var(--ag-font-size-sm);
  color: var(--ag-color-text-body);
  background: var(--ag-color-bg-surface-alt);
  border: 1px solid var(--ag-color-border);
  border-radius: var(--ag-radius-2xl);
}

.ag-alert__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.ag-alert__content {
  flex: 1;
  min-width: 0;
}

.ag-alert__title {
  margin: 0 0 var(--ag-space-1);
  font-weight: var(--ag-font-weight-semibold);
}

.ag-alert__dismiss {
  flex-shrink: 0;
  padding: var(--ag-space-1);
  background: transparent;
  border: none;
  color: var(--ag-color-text-muted);
  cursor: pointer;
  border-radius: var(--ag-radius-sm);
  transition: var(--ag-transition-colors);
}

.ag-alert__dismiss:hover {
  background: var(--ag-color-interactive-hover);
  color: var(--ag-color-text-body);
}

/* Alert variants */
.ag-alert--success {
  background: var(--ag-color-success-softer);
  border-color: var(--ag-color-success-border-soft);
  color: var(--ag-color-success);
}

.ag-alert--warning {
  background: var(--ag-color-warning-softer);
  border-color: var(--ag-color-warning-border-soft);
  color: var(--ag-color-warning);
}

.ag-alert--error {
  background: var(--ag-color-error-softer);
  border-color: var(--ag-color-error-border);
  color: var(--ag-color-error);
}

.ag-alert--info {
  background: var(--ag-color-brand-primary-softer);
  border-color: var(--ag-color-brand-primary-border);
  color: var(--ag-color-brand-primary);
}

/* Hidden state */
.ag-alert.is-hidden {
  display: none;
}

/* ========================================
 * BADGES
 * ======================================== */

/**
 * Badge component
 *
 * Variants: .ag-badge--success, .ag-badge--warning, .ag-badge--error, .ag-badge--info
 * Sizes: .ag-badge--sm, .ag-badge--lg
 */
.ag-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ag-space-1);
  height: var(--ag-badge-height);
  padding: 0 var(--ag-space-2);
  font-size: var(--ag-badge-font-size);
  font-weight: var(--ag-font-weight-semibold);
  color: var(--ag-color-text-body);
  background: var(--ag-color-bg-page);
  border: 1px solid var(--ag-color-border);
  border-radius: var(--ag-radius-badge);
  white-space: nowrap;
}

/* Badge sizes */
.ag-badge--sm {
  height: 18px;
  padding: 0 var(--ag-space-2);
  font-size: 10px;
}

.ag-badge--lg {
  height: 28px;
  padding: 0 var(--ag-space-3);
  font-size: var(--ag-font-size-sm);
}

/* Badge variants */
.ag-badge--primary {
  background: var(--ag-color-brand-primary-softer);
  border-color: var(--ag-color-brand-primary-border);
  color: var(--ag-color-brand-primary);
}

.ag-badge--success {
  background: var(--ag-color-success-soft);
  border-color: var(--ag-color-success-border);
  color: var(--ag-color-success);
}

.ag-badge--warning {
  background: var(--ag-color-warning-soft);
  border-color: var(--ag-color-warning-border);
  color: var(--ag-color-warning);
}

.ag-badge--error {
  background: var(--ag-color-error-soft);
  border-color: var(--ag-color-error-border);
  color: var(--ag-color-error);
}

.ag-badge--info {
  background: var(--ag-color-info-soft);
  border-color: var(--ag-color-info-border);
  color: var(--ag-color-info);
}

/* Solid variants */
.ag-badge--solid {
  background: var(--ag-color-brand-primary);
  border-color: transparent;
  color: var(--ag-color-text-on-primary);
}

.ag-badge--solid.ag-badge--success {
  background: var(--ag-color-success);
}

.ag-badge--solid.ag-badge--warning {
  background: var(--ag-color-warning);
}

.ag-badge--solid.ag-badge--error {
  background: var(--ag-color-error);
}

/* Status dot badge */
.ag-badge--dot::before {
  content: "";
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
}

/* ========================================
 * AVATARS
 * ======================================== */

/**
 * Avatar component
 *
 * Sizes: .ag-avatar--xs, .ag-avatar--sm, .ag-avatar--lg, .ag-avatar--xl, .ag-avatar--2xl
 */
.ag-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ag-avatar-size-md);
  height: var(--ag-avatar-size-md);
  background: var(--ag-color-brand-primary-soft);
  color: var(--ag-color-brand-primary);
  font-size: var(--ag-font-size-base);
  font-weight: var(--ag-font-weight-semibold);
  border-radius: var(--ag-radius-avatar);
  overflow: hidden;
  flex-shrink: 0;
}

.ag-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Avatar sizes */
.ag-avatar--xs {
  width: var(--ag-avatar-size-xs);
  height: var(--ag-avatar-size-xs);
  font-size: var(--ag-font-size-xs);
}

.ag-avatar--sm {
  width: var(--ag-avatar-size-sm);
  height: var(--ag-avatar-size-sm);
  font-size: var(--ag-font-size-sm);
}

.ag-avatar--lg {
  width: var(--ag-avatar-size-lg);
  height: var(--ag-avatar-size-lg);
  font-size: var(--ag-font-size-lg);
}

.ag-avatar--xl {
  width: var(--ag-avatar-size-xl);
  height: var(--ag-avatar-size-xl);
  font-size: var(--ag-font-size-2xl);
}

.ag-avatar--2xl {
  width: var(--ag-avatar-size-2xl);
  height: var(--ag-avatar-size-2xl);
  font-size: var(--ag-font-size-4xl);
}

/* Square avatar */
.ag-avatar--square {
  border-radius: var(--ag-radius-lg);
}

/* Avatar group */
.ag-avatar-group {
  display: flex;
  align-items: center;
}

.ag-avatar-group .ag-avatar {
  border: 2px solid var(--ag-color-bg-surface);
  margin-left: -8px;
}

.ag-avatar-group .ag-avatar:first-child {
  margin-left: 0;
}

/* ========================================
 * SPINNERS / LOADERS
 * ======================================== */

/**
 * Spinner component
 *
 * Sizes: .ag-spinner--sm, .ag-spinner--lg
 */
.ag-spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 2px solid var(--ag-color-border);
  border-top-color: var(--ag-color-brand-primary);
  border-radius: 50%;
  animation: ag-spin 0.8s linear infinite;
}

.ag-spinner--sm {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

.ag-spinner--lg {
  width: 32px;
  height: 32px;
  border-width: 3px;
}

.ag-spinner--xl {
  width: 48px;
  height: 48px;
  border-width: 4px;
}

/* White spinner (for dark backgrounds) */
.ag-spinner--white {
  border-color: rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
}

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

/* ========================================
 * SKELETONS
 * ======================================== */

/**
 * Skeleton loading placeholders
 */
.ag-skeleton {
  background: var(--ag-color-bg-skeleton);
  background-size: 200% 100%;
  animation: ag-skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--ag-radius-full);
}

.ag-skeleton--text {
  height: 14px;
  width: 100%;
}

.ag-skeleton--text-sm {
  height: 12px;
  width: 60%;
}

.ag-skeleton--heading {
  height: 20px;
  width: 80%;
}

.ag-skeleton--rect {
  border-radius: var(--ag-radius-md);
}

.ag-skeleton--circle {
  border-radius: 50%;
}

/* Skeleton card */
.ag-skeleton-card {
  background: var(--ag-color-bg-surface);
  border: 1px solid rgba(26, 43, 72, 0.08);
  border-radius: var(--ag-radius-card);
  overflow: hidden;
}

.ag-skeleton-card__media {
  aspect-ratio: var(--ag-card-media-ratio);
  background: var(--ag-color-bg-skeleton);
  background-size: 200% 100%;
  animation: ag-skeleton-shimmer 1.4s ease-in-out infinite;
}

.ag-skeleton-card__body {
  padding: var(--ag-space-card);
  display: flex;
  flex-direction: column;
  gap: var(--ag-space-2);
}

@keyframes ag-skeleton-shimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ag-spinner,
  .ag-skeleton,
  .ag-skeleton-card__media {
    animation: none;
  }

  .ag-btn--loading::after {
    animation: none;
  }
}

/* ========================================
 * UTILITY CLASSES
 * ======================================== */

/* Visually hidden (for screen readers) */
.ag-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus visible outline */
.ag-focus-ring:focus-visible {
  outline: 2px solid var(--ag-color-brand-primary);
  outline-offset: 2px;
}

/* Truncate text */
.ag-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Line clamp (multi-line truncate) */
.ag-line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ag-line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ========================================
 * MOBILE OPTIMIZATION (GAP UX-08)
 * ======================================== */

/**
 * Mobile-friendly modals and bottom sheet patterns
 * Transforms modals to full-screen or bottom-sheet on mobile devices
 */

/* Base modal mobile overrides */
@media (max-width: 600px) {
  /* Full-screen modal on mobile by default */
  .ag-modal {
    padding: 0;
    align-items: flex-end;
  }

  .ag-modal__dialog {
    width: 100%;
    max-width: 100%;
    max-height: 100vh;
    min-height: 100vh;
    border-radius: 0;
    animation: ag-modal-slide-up 0.3s ease-out;
  }

  .ag-modal__close {
    top: max(12px, env(safe-area-inset-top, 12px));
    right: 12px;
    z-index: 10;
  }

  /* Ensure modal content is scrollable with safe areas */
  .ag-modal__body,
  .ag-modal__content {
    padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Animation for mobile modal slide up */
@keyframes ag-modal-slide-up {
  from {
    transform: translateY(100%);
    opacity: 0.8;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes ag-modal-slide-down {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(100%);
    opacity: 0.8;
  }
}

/**
 * Bottom Sheet Pattern
 * Apply .bottom-sheet class to modals for slide-up panel behavior on mobile
 */
.bottom-sheet {
  /* Desktop: centered modal */
  display: grid;
  place-items: center;
}

.bottom-sheet .ag-modal__dialog,
.bottom-sheet.ag-modal__dialog {
  /* Desktop styling */
  border-radius: var(--ag-radius-card, 18px);
}

@media (max-width: 600px) {
  .bottom-sheet {
    align-items: flex-end;
    padding: 0;
  }

  .bottom-sheet .ag-modal__dialog,
  .bottom-sheet.ag-modal__dialog {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    min-height: auto;
    border-radius: 24px 24px 0 0;
    animation: ag-bottom-sheet-up 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  }

  /* Bottom sheet drag handle indicator */
  .bottom-sheet .ag-modal__dialog::before,
  .bottom-sheet.ag-modal__dialog::before {
    content: "";
    display: block;
    width: 36px;
    height: 5px;
    background: rgba(0, 0, 0, 0.12);
    border-radius: 3px;
    margin: 12px auto 8px;
    flex-shrink: 0;
  }

  /* Adjust close button for bottom sheet */
  .bottom-sheet .ag-modal__close {
    top: 8px;
    right: 12px;
  }
}

@keyframes ag-bottom-sheet-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes ag-bottom-sheet-down {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}

/* Closing animation class */
.bottom-sheet.is-closing .ag-modal__dialog,
.bottom-sheet.is-closing.ag-modal__dialog {
  animation: ag-bottom-sheet-down 0.25s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}

/**
 * Touch Target Optimization
 * Minimum 44px touch targets for mobile accessibility (WCAG 2.5.5)
 */
@media (max-width: 600px) {
  /* Buttons */
  .ag-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 0 var(--ag-space-4, 16px);
  }

  .ag-btn--sm {
    min-height: 44px;
    padding: 0 var(--ag-space-3, 12px);
  }

  .ag-btn--icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
  }

  .ag-btn--icon.ag-btn--sm {
    width: 44px;
    height: 44px;
  }

  /* Interactive elements */
  .ag-alert__dismiss {
    min-width: 44px;
    min-height: 44px;
    padding: var(--ag-space-2, 8px);
  }

  /* Links and clickable items should have adequate spacing */
  .ag-card--interactive {
    /* Ensure tap area is sufficient */
    padding: max(var(--ag-space-card, 16px), 12px);
  }

  /* Checkbox and radio touch targets */
  input[type="checkbox"],
  input[type="radio"] {
    min-width: 22px;
    min-height: 22px;
  }

  /* Ensure label tap areas are adequate */
  label {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: var(--ag-space-2, 8px);
  }

  /* Form field labels that shouldn't be 44px tall */
  .ag-field__label {
    min-height: auto;
  }
}

/**
 * Form Input Mobile Optimization
 * Larger inputs and better touch interaction on mobile
 */
@media (max-width: 600px) {
  .ag-input {
    height: 48px;
    min-height: 48px;
    font-size: 16px; /* Prevents iOS zoom on focus */
    padding: var(--ag-space-3, 12px) var(--ag-space-4, 16px);
  }

  .ag-input--sm {
    height: 44px;
    min-height: 44px;
    font-size: 16px;
  }

  .ag-input--lg {
    height: 52px;
    min-height: 52px;
    font-size: 17px;
  }

  textarea.ag-input {
    min-height: 120px;
    font-size: 16px;
  }

  select.ag-input {
    font-size: 16px;
    /* Larger touch target for dropdown arrow */
    background-position: right var(--ag-space-4, 16px) center;
    padding-right: var(--ag-space-10, 40px);
  }

  /* Form field spacing */
  .ag-field {
    margin-bottom: var(--ag-space-5, 20px);
  }

  .ag-field__label {
    font-size: var(--ag-font-size-base, 14px);
    margin-bottom: var(--ag-space-2, 8px);
  }

  .ag-field__help,
  .ag-field__error {
    font-size: var(--ag-font-size-sm, 13px);
    margin-top: var(--ag-space-2, 8px);
  }
}

/**
 * Pull-to-Refresh Visual Indicator
 * CSS-only visual indicator (JS handles the actual refresh logic)
 */
.ag-pull-refresh {
  position: relative;
  overflow: visible;
}

.ag-pull-refresh__indicator {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  background: var(--ag-color-bg-surface, #fff);
  border-radius: 50%;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  z-index: 100;
}

.ag-pull-refresh__indicator svg,
.ag-pull-refresh__indicator::before {
  width: 24px;
  height: 24px;
}

/* Arrow indicator (default state) */
.ag-pull-refresh__indicator::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--ag-color-brand-primary, #2563eb);
  border-top-color: transparent;
  border-radius: 50%;
}

/* States controlled by JS via data attributes or classes */
.ag-pull-refresh.is-pulling .ag-pull-refresh__indicator {
  opacity: 1;
  transform: translateX(-50%) translateY(var(--pull-distance, 0px));
}

.ag-pull-refresh.is-refreshing .ag-pull-refresh__indicator {
  opacity: 1;
  transform: translateX(-50%) translateY(60px);
}

.ag-pull-refresh.is-refreshing .ag-pull-refresh__indicator::before {
  animation: ag-pull-refresh-spin 0.8s linear infinite;
}

@keyframes ag-pull-refresh-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Pull threshold reached state */
.ag-pull-refresh.is-threshold .ag-pull-refresh__indicator::before {
  border-color: var(--ag-color-success, #22c55e);
  border-top-color: transparent;
}

/**
 * Route Builder Map Responsive Height
 * Optimized for both desktop and mobile viewing
 */
.ag-route-builder__map {
  width: 100%;
  /* Desktop: 400px+ height */
  min-height: 400px;
  height: 50vh;
  max-height: 600px;
  border-radius: var(--ag-radius-lg, 16px);
  border: 1px solid var(--ag-color-border, rgba(15, 23, 42, 0.12));
  overflow: hidden;
  background: var(--ag-color-bg-page-alt, #f8fafc);
}

@media (max-width: 600px) {
  .ag-route-builder__map {
    /* Mobile: 250px minimum, 50vh preferred */
    min-height: 250px;
    height: 50vh;
    max-height: 400px;
    border-radius: var(--ag-radius-md, 12px);
  }

  /* Route builder tools - stack vertically on mobile */
  .ag-route-builder__tools {
    flex-direction: column;
    align-items: stretch;
    gap: var(--ag-space-3, 12px);
  }

  .ag-route-builder__tools button {
    width: 100%;
    justify-content: center;
  }
}

@media (min-width: 601px) and (max-width: 900px) {
  /* Tablet: balanced height */
  .ag-route-builder__map {
    min-height: 350px;
    height: 45vh;
  }
}

/**
 * Additional Mobile UX Improvements
 */
@media (max-width: 600px) {
  /* Card adjustments for mobile */
  .ag-card__header {
    padding: var(--ag-space-3, 12px) var(--ag-space-4, 16px);
    flex-wrap: wrap;
  }

  .ag-card__body {
    padding: var(--ag-space-4, 16px);
  }

  .ag-card__footer {
    padding: var(--ag-space-3, 12px) var(--ag-space-4, 16px);
    flex-wrap: wrap;
    gap: var(--ag-space-3, 12px);
  }

  /* Alert mobile spacing */
  .ag-alert {
    padding: var(--ag-space-4, 16px);
    gap: var(--ag-space-3, 12px);
  }

  /* Badge touch-friendly sizing */
  .ag-badge {
    min-height: 28px;
    padding: 0 var(--ag-space-3, 12px);
    font-size: var(--ag-font-size-sm, 13px);
  }

  /* Avatar group overlap adjustment */
  .ag-avatar-group .ag-avatar {
    margin-left: -6px;
  }

  /* Ensure horizontal scroll containers don't break layout */
  .ag-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .ag-scroll-x::-webkit-scrollbar {
    display: none;
  }
}

/* Safe area insets for notched devices */
@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 600px) {
    .ag-modal__dialog {
      padding-bottom: env(safe-area-inset-bottom);
    }

    .bottom-sheet .ag-modal__dialog {
      padding-bottom: max(20px, env(safe-area-inset-bottom));
    }

    /* Fixed bottom elements should respect safe area */
    .ag-fixed-bottom {
      padding-bottom: max(16px, env(safe-area-inset-bottom));
    }
  }
}

/* ========================================
 * HASHTAG PILLS
 * ======================================== */
.ag-hashtag-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ag-hashtag-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: rgba(37, 99, 235, 0.08);
  color: #2563eb;
  text-decoration: none;
  transition: background 0.15s ease;
}
.ag-hashtag-pill:hover {
  background: rgba(37, 99, 235, 0.16);
  color: #1d4ed8;
}

/* ========================================
 * VERTICAL ACTION BAR (Reels modal)
 * ======================================== */
.ag-action-bar {
  position: absolute;
  right: 12px;
  bottom: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  z-index: 6;
}
.ag-action-bar__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 0;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
  transition: transform 0.15s ease;
}
.ag-action-bar__btn:hover {
  transform: scale(1.15);
}
.ag-action-bar__btn svg {
  width: 28px;
  height: 28px;
}
.ag-action-bar__btn.is-active svg {
  fill: #ef4444;
  stroke: #ef4444;
}
.ag-action-bar__count {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* ========================================
 * VIDEO PROGRESS BAR
 * ======================================== */
.ag-video-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255,255,255,0.2);
  z-index: 5;
  overflow: hidden;
}
.ag-video-progress__bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #2563eb, #4f46e5);
  transition: width 0.25s linear;
}

/* ========================================
 * SHARE-TO-USER MODAL
 * ======================================== */
.ag-share-modal {
  position: fixed; inset: 0; z-index: 10000;
  display: none; align-items: center; justify-content: center;
}
.ag-share-modal.is-open { display: flex; }
.ag-share-modal__backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,.4);
}
.ag-share-modal__dialog {
  position: relative; background: var(--ag-color-bg-surface, #fff);
  border-radius: 18px; max-width: 420px; width: 90vw; max-height: 80vh;
  box-shadow: 0 24px 56px rgba(2,6,23,.22); display: flex; flex-direction: column;
  overflow: hidden;
}
.ag-share-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 12px; border-bottom: 1px solid var(--ag-color-border, rgba(15,23,42,.1));
}
.ag-share-modal__header h4 {
  font-size: 16px; font-weight: 600; margin: 0;
  color: var(--ag-color-text-heading, #0B1736);
}
.ag-share-modal__close {
  border: none; background: none; font-size: 22px; cursor: pointer;
  color: var(--ag-color-text-muted, #64748b); padding: 0; line-height: 1;
}
.ag-share-modal__search {
  padding: 10px 20px;
}
.ag-share-modal__search input {
  width: 100%; padding: 8px 12px; border: 1px solid var(--ag-color-border, rgba(15,23,42,.1));
  border-radius: 10px; font-size: 13px; outline: none;
  transition: border-color 180ms;
}
.ag-share-modal__search input:focus { border-color: var(--ag-color-brand-primary, #2563eb); }
.ag-share-modal__list {
  flex: 1; overflow-y: auto; padding: 4px 20px 16px;
  max-height: 340px;
}
.ag-share-member {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--ag-color-border-subtle, rgba(15,23,42,.06));
  cursor: pointer;
}
.ag-share-member:last-child { border-bottom: none; }
.ag-share-member:hover { opacity: .85; }
.ag-share-member__avatar {
  width: 36px; height: 36px; border-radius: 50%; background: #e2e8f0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 13px; color: var(--ag-color-brand-primary, #2563eb);
  flex-shrink: 0; overflow: hidden;
}
.ag-share-member__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ag-share-member__info { flex: 1; min-width: 0; }
.ag-share-member__name {
  font-weight: 600; font-size: 13px; color: var(--ag-color-text-heading, #0B1736);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ag-share-member__handle {
  font-size: 11px; color: var(--ag-color-text-muted, #64748b);
}
.ag-share-member__check {
  width: 22px; height: 22px; border: 2px solid var(--ag-color-border, rgba(15,23,42,.2));
  border-radius: 50%; flex-shrink: 0; transition: all 180ms;
  display: flex; align-items: center; justify-content: center;
}
.ag-share-member.is-selected .ag-share-member__check {
  border-color: var(--ag-color-brand-primary, #2563eb); background: var(--ag-color-brand-primary, #2563eb);
}
.ag-share-member.is-selected .ag-share-member__check::after {
  content: "\2713"; color: #fff; font-size: 12px; font-weight: 700;
}
.ag-share-modal__footer {
  padding: 12px 20px; border-top: 1px solid var(--ag-color-border, rgba(15,23,42,.1));
  display: flex; align-items: center; justify-content: space-between;
}
.ag-share-modal__count {
  font-size: 12px; color: var(--ag-color-text-muted, #64748b); font-weight: 600;
}
.ag-share-modal__send {
  padding: 8px 20px; border-radius: 10px; font-size: 13px; font-weight: 600;
  background: var(--ag-gradient-button, linear-gradient(145deg, #2563eb, #4f46e5)); color: #fff;
  border: none; cursor: pointer; transition: opacity 180ms;
}
.ag-share-modal__send:hover { opacity: .85; }
.ag-share-modal__send:disabled { opacity: .4; cursor: not-allowed; }
.ag-share-modal__loading {
  text-align: center; padding: 20px; font-size: 13px;
  color: var(--ag-color-text-muted, #64748b);
}
.ag-share-modal__empty {
  text-align: center; padding: 24px; font-size: 13px;
  color: var(--ag-color-text-muted, #64748b);
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .ag-modal__dialog,
  .bottom-sheet .ag-modal__dialog,
  .ag-pull-refresh__indicator,
  .ag-pull-refresh.is-refreshing .ag-pull-refresh__indicator::before {
    animation: none !important;
    transition: none !important;
  }
}

/* ── Story Ring ────────────────────────────────────────────────────── */
.ag-story-ring {
  position: relative;
  display: inline-block;
  padding: 2px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563eb, #8b5cf6, #ec4899);
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.2);
}
.ag-story-ring.seen {
  background: #e2e8f0;
  box-shadow: none;
  animation: none;
}
.ag-story-ring.no-story {
  display: none;
}
.ag-story-ring .ag-story-ring__inner {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #fff;
  overflow: hidden;
}
.ag-story-ring .ag-story-ring__inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ag-story-ring .ag-story-ring__add {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ag-color-primary, #2563eb);
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
@keyframes ag-story-pulse {
  0%, 100% { opacity: 0.85; box-shadow: 0 0 2px rgba(46,116,184,0.3), 0 0 14px rgba(241,201,174,0.5), 0 0 22px rgba(97,130,185,0.5); }
  50% { opacity: 1; box-shadow: 0 0 4px rgba(46,116,184,0.6), 0 0 28px rgba(241,201,174,0.85), 0 0 42px rgba(97,130,185,0.9); }
}

/* Search results - filter dropdown text */
.btn.btn-outline-secondary.w-100 { color: #fff; }