/**
 * 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;
  }
}

/* ========================================
 * Messenger v4 Task 1.7: SHARE SHEET V2
 * ========================================
 * Reuses the SHARE-TO-USER MODAL chrome above (.ag-share-modal backdrop/
 * z-index/open-close, .ag-share-modal__dialog/header/close/search/list/
 * loading/empty) unchanged -- only this sheet's OWN new elements (the
 * bottom-sheet dialog treatment, the compact preview wrapper, the 4-column
 * people grid, the message+send row, the actions row) get rules here. The
 * preview row's OWN visuals (.ag-conv-card-chip--share) live in
 * conversations.css instead, next to the rest of render.js's renderCard*
 * output -- this file only positions the wrapper around it.
 * ---------------------------------------------------------------------- */

/* Fix round 2, Important 1: share_sheet.js's own JS scroll lock (open()/
   close() saving and restoring document.documentElement/body.style.
   overflow) was silently undone on every catalog listing page (tour,
   activity, stay, flight detail -- anywhere templates/partials/
   media_modal.html's own lightbox viewer is ALSO included next to this
   sheet's trigger). That partial carries its own CSS safety net,
   `html:not(:has(.ag-modal.is-open)) { overflow-y: visible !important; }`
   (and the same for body) -- keyed on `.ag-modal.is-open`, a DIFFERENT
   class from this sheet's own `#agShareSheetV2.is-open`. Since no
   `.ag-modal` is ever open while only THIS sheet is, that `!important`
   rule matched and overrode this sheet's own plain (non-`!important`)
   inline `style.overflow = "hidden"` the instant the browser next
   recalculated style -- measured the PAGE BEHIND the sheet scrolling
   0->3053px at 360x480. A `!important` rule can only lose to another
   `!important` rule (never to a plain inline style, regardless of
   specificity), so the fix has to be CSS, not more JS -- keyed on this
   sheet's own real id+class so it only ever fires while THIS sheet, not
   media_modal.html's OWN modal, is open. Real Chromium supports
   `:has()`; the JS save/restore above stays as the fallback for browsers
   that don't. */
html:has(#agShareSheetV2.is-open),
html:has(#agShareSheetV2.is-open) body {
  /* overflow-y only: media_modal.html keeps `overflow-x: clip` on purpose
     (position: sticky depends on it), so never force the x axis. */
  overflow-y: hidden !important;
}

/* Approved-spec layout (controller carries, "Spec alignment"): a centred
   dialog by default (desktop/tablet -- the base .ag-share-modal__dialog
   rule above already centers and caps it at 420px/90vw), becoming a
   full-width BOTTOM sheet with a grab handle under the phone breakpoint.
   `align-self` (not the parent's `align-items`) does the repositioning, so
   the two OLD share modals -- which reuse the exact same .ag-share-modal
   parent and never opt into `.ag-share-sheet-v2__dialog` -- are completely
   unaffected. */
.ag-share-sheet-v2__dialog {
  display: flex;
  flex-direction: column;
  padding-block-end: 8px;
}

.ag-share-sheet-v2__grab {
  display: none;
}

@media (max-width: 767.98px) {
  .ag-share-sheet-v2__dialog {
    align-self: flex-end;
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    border-radius: 22px 22px 0 0;
  }

  .ag-share-sheet-v2__grab {
    display: block;
    flex-shrink: 0;
    width: 36px;
    height: 5px;
    border-radius: 3px;
    background: var(--ag-color-border, #D5DBE5);
    margin: 10px auto 0;
  }
}

.ag-share-sheet-v2__preview {
  padding-inline: 20px;
  margin-block-start: 10px;
}

/* The plain title/url shown for the instant the live preview fetch is in
   flight (render.PreviewCard/renderCardChip replaces this once a real card
   or reelCard is available) -- its OWN class, never the sitewide
   `.ag-card__title` (a different, unrelated component in this same file)
   nor `.ag-conv-card__title` (render.js's full-card title -- this is not a
   full card). */
/* Fix round 2, Important 2: an 837-character Reel caption (no length
   limit at all, unlike a Reel's own `.title` field, model-capped at 120)
   used to wrap unbounded here -- measured the whole preview at 430px
   tall, squeezing the people grid to 20px and pushing Send off-screen.
   Clamped to 2 lines regardless of source length -- this placeholder
   renders for ANY payload with no card/reelCard yet (a link whose
   unfurl hasn't resolved, or one that came back 204/429), not just a
   Reel, so the safety net has to hold for arbitrary text, not just the
   one call site media_modal.js now also caps at the source. */
.ag-share-sheet-v2__preview-placeholder {
  font-size: 13px;
  font-weight: 600;
  color: var(--ag-color-text-heading, #1E284A);
  padding: 7px 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.ag-share-sheet-v2__count {
  display: block;
  padding-inline: 20px;
  margin-block-start: 6px;
  font-size: 11px;
  color: var(--ag-color-text-muted, #6B7491);
}

/* People grid (controller carries: "People in a 4-column grid: avatar plus
   name, with a check badge on selected avatars") -- stacked onto the SAME
   #agShareSheetList element as the base `.ag-share-modal__list` rule above
   (flex/scroll/max-height/padding), which this only adds a grid layout to. */
.ag-share-sheet-v2__people {
  display: grid;
  /* Fix round 1, Important 1: a bare `1fr` track has an AUTOMATIC minimum
     size equal to its content's min-content -- a 40-character name with
     no natural break point (nowhere for it to wrap or shrink) widened its
     OWN column past the other three, measured 231/44/148/44px at 360px
     with the grid itself scrolling sideways by 159px. `minmax(0, 1fr)`
     caps each track's minimum at 0, letting `.ag-share-sheet-v2__person`'s
     own `min-width: 0` (below) hand control back to the name's existing
     `white-space: nowrap; overflow: hidden; text-overflow: ellipsis`. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 4px;
  overscroll-behavior: contain; /* fix round 1, Important 3 */
}

/* A loading/empty status message (setStatusMessage in share_sheet.js)
   still renders as a single child of the grid -- span every column so it
   reads as one centred line, not a single 1-of-4 cell. Scoped to this
   grid only: `grid-column` is inert wherever `.ag-share-modal__empty`/
   `__loading` render outside a grid container (the two OLD modals), so
   this cannot affect them. */
.ag-share-sheet-v2__people .ag-share-modal__empty,
.ag-share-sheet-v2__people .ag-share-modal__loading {
  grid-column: 1 / -1;
}

/* Fix round 1, Important 5: a real, keyboard-reachable <button> (native
   tab order + Space/Enter both fire a plain "click" event, which is all
   the existing delegated listener in share_sheet.js's wireOnce() ever
   needed -- no separate keydown handling required), not a <div> with a
   click listener and no way to reach it from the keyboard at all. Resets
   every UA/global button default -- styles.css's sitewide `button {
   height: 38px; padding: 0 14px; border: solid .1px white; background:
   var(--button-gradient); color: #fff; border-radius: 12px }` is a much
   bigger reset than a single `padding` line: measured this cell's own
   height collapsing to that fixed 38px (SHORTER than its own 44px avatar
   child, clipping the name below it entirely) before `height: auto` was
   added here -- a real, real-browser-caught bug, not a hypothetical. */
.ag-share-sheet-v2__person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0; /* fix round 1, Important 1 -- see .ag-share-sheet-v2__people's own comment */
  height: auto;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.ag-share-sheet-v2__person:focus-visible {
  outline: none;
  border-radius: var(--ag-radius-sm, 6px);
  box-shadow: var(--ag-shadow-focus, 0 0 0 4px rgba(46, 116, 184, 0.16));
}

.ag-share-sheet-v2__person-avatar {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ag-color-bg-muted, #EEF1F8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 15px;
  color: var(--ag-color-brand-primary, #2563eb);
}
.ag-share-sheet-v2__person-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.ag-share-sheet-v2__person-name {
  max-width: 100%;
  font-size: 11px;
  color: var(--ag-color-text-body, #1E284A);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

/* The check badge (controller carries: "a check badge on selected
   avatars") -- logical inset properties so it mirrors to the opposite
   visual corner in RTL, matching this task's own "use logical properties
   throughout" ruling. */
.ag-share-sheet-v2__person-check {
  position: absolute;
  inset-inline-end: -2px;
  inset-block-end: -2px;
  width: 16px;
  height: 16px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--ag-color-bg-surface, #fff);
  background: var(--ag-color-brand-primary, #2563eb);
  color: #fff;
  font-size: 9px;
  line-height: 1;
}
.ag-share-sheet-v2__person.is-selected .ag-share-sheet-v2__person-check {
  display: flex;
}

/* "An 'Add a message…' field plus a 'Send · N' button" (controller
   carries) -- one row, matching the approved spec's `.sh-msg` shape,
   rather than the brief's own full-width-textarea-then-footer-below-the-
   list draft. `align-items: flex-end` keeps the pill-shaped Send button
   aligned to the message field's own bottom edge. */
.ag-share-sheet-v2__send-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding-inline: 20px;
  margin-block-start: 10px;
}
.ag-share-sheet-v2__message {
  flex: 1;
  min-width: 0;
  min-height: 38px;
  max-height: 76px;
  resize: none;
  border: 1px solid var(--ag-color-border, #D9E1EE);
  border-radius: var(--ag-radius-md, 10px);
  padding: 8px 12px;
  font: inherit;
  font-size: 13px;
  color: var(--ag-color-text-body, #1E284A);
  outline: none;
}
.ag-share-sheet-v2__message:focus {
  border-color: var(--ag-color-brand-primary, #2563eb);
}
.ag-share-sheet-v2__send-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.ag-share-sheet-v2__row {
  display: flex;
  gap: 8px;
  padding-inline: 20px;
  margin-block: 10px 16px;
}
.ag-share-sheet-v2__secondary {
  flex: 1;
  padding: 8px;
  border: 1px solid var(--ag-color-border, #D9E1EE);
  border-radius: var(--ag-radius-md, 10px);
  background: var(--ag-color-bg-surface, #fff);
  color: var(--ag-color-text-body, #1E284A);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.ag-share-sheet-v2__secondary:hover {
  opacity: .85;
}

/* Fix round 1, Important 4 / Minor 1 (fix round 2, Minor 5 revised the
   ARIA contract -- see the template's own header comment for the "why"):
   one element for both outcomes of a send -- success ("Sent",
   role="status", implicitly polite) and error ("Couldn't send. Try
   again.", role="alert", the assertive live-region a failure deserves
   that a mere confirmation doesn't). Always RENDERED now, never
   `hidden` -- `:empty` (below) hides it visually with no text in it,
   which is a plain CSS/layout concern; the element itself staying in the
   DOM (rather than toggling `hidden`) is what fix round 2 asked for on
   the ARIA/announcement side. */
.ag-share-sheet-v2__status {
  margin-inline: 20px;
  margin-block-start: 8px;
  padding: 8px 12px;
  border-radius: var(--ag-radius-md, 10px);
  font-size: 12px;
  font-weight: 600;
}
.ag-share-sheet-v2__status:empty {
  display: none;
  margin: 0;
  padding: 0;
}

.ag-share-sheet-v2__status--success {
  background: var(--ag-color-success-bg, #E3F4EC);
  color: var(--ag-color-success-text, #1F8A5F);
}
.ag-share-sheet-v2__status--error {
  background: var(--ag-color-danger-bg, #FDECEC);
  color: var(--ag-color-danger-text, #C0392B);
}

/* Measured in a real browser (Playwright, task report): at a short
   landscape phone height (640x360 -- one of this task's own three
   required measurement viewports), the dialog's non-scrolling chrome
   (grab + header + preview + search + count + send-row + actions-row)
   alone summed to ~370px, taller than the 92vh (331px) budget even with
   the people grid already shrunk to a sliver -- invisible with
   `.ag-share-modal__dialog`'s own `overflow: hidden` at rest, but exposed
   the instant a real tap (or this harness's own `.focus()`) on the
   message field triggers the browser's native scroll-focused-input-into-
   view behavior against that hidden overflow, which scrolled the grab
   handle and header off the TOP of the visible box. Every selector below
   is scoped to `.ag-share-sheet-v2__dialog`/`.ag-share-sheet-v2__*`, so
   none of it can ever reach the two OLD share modals (they never carry
   this class). Scoped to height, not width -- a normal-height phone in
   portrait keeps the full-size spec chrome regardless of how narrow it
   is. */
@media (max-height: 420px) {
  /* Fix round 1, Minor 10: the FIRST pass at this breakpoint squeezed
     `.ag-share-sheet-v2__people` (flex:1 inherited from the base
     `.ag-share-modal__list` rule) down to a 43px strip -- less than one
     avatar tall, so nobody could see who they were even about to select.
     Review ruling: let the whole DIALOG scroll instead, with the grid at
     its natural height (at least one full row always shown) -- reachable
     by scrolling, same as Send below it, rather than invisible-and-
     squeezed. `overflow-y: auto` on the dialog (overriding the base
     `.ag-share-modal__dialog`'s own `overflow: hidden`, scoped to this
     class so the two OLD modals -- centred, never this short -- are
     untouched) replaces the earlier hidden-overflow-that-silently-
     scrolls-on-focus behavior with a REAL, visible scrollbar/gesture. */
  .ag-share-sheet-v2__dialog {
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .ag-share-sheet-v2__people {
    flex: none;
    overflow: visible;
    max-height: none;
    min-height: 76px; /* ~one row: 44px avatar + gap + the name's own line */
  }
  .ag-share-sheet-v2__grab {
    display: none;
  }
  .ag-share-sheet-v2__dialog .ag-share-modal__header {
    padding: 8px 20px 6px;
  }
  .ag-share-sheet-v2__preview {
    margin-block-start: 4px;
  }
  .ag-share-sheet-v2__dialog .ag-share-modal__search {
    padding: 6px 20px;
  }
  .ag-share-sheet-v2__dialog .ag-share-modal__search input {
    padding-block: 6px;
  }
  .ag-share-sheet-v2__count {
    margin-block-start: 2px;
  }
  .ag-share-sheet-v2__send-row {
    margin-block-start: 6px;
  }
  .ag-share-sheet-v2__message {
    min-height: 32px;
  }
  .ag-share-sheet-v2__dialog .ag-share-modal__send {
    padding-block: 6px;
  }
  .ag-share-sheet-v2__row {
    margin-block: 6px 10px;
  }
  .ag-share-sheet-v2__secondary {
    padding-block: 6px;
  }
}

/* ── 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; }

/* Messenger v4 Task 1.13: the sound-settings card on templates/notifications/
   preferences.html. Every sibling card on that page (#pref-push-card,
   #pref-email-card, #pref-quiet-card, #pref-cap-card, ...) reaches this
   exact look via an inline style="" attribute -- a pre-existing CSP
   report-only violation on that page this task does not touch or fix, but
   must not ADD to (carries item 8: "the settings card uses no inline
   style=''"). Matches those siblings' own border/radius values exactly so
   the new card reads as one family with them. */
#pref-sounds-card {
  border: 1px solid var(--ag-color-border);
  border-radius: 12px;
}