/* =============================================================================
   GLIMMER — COMPONENTS
   ============================================================================= */

/* ---------------------------------------------------------------------------
   BASE / RESET
   --------------------------------------------------------------------------- */
.glm {
  font-family: var(--glm-font-body);
  font-size: var(--glm-fs-body);
  line-height: var(--glm-lh-body);
  color: var(--glm-on-surface);
  background: var(--glm-ambience-bg);
  -webkit-font-smoothing: antialiased;
}

.glm *,
.glm *::before,
.glm *::after {
  box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   TYPOGRAPHY
   --------------------------------------------------------------------------- */
.glm-display {
  font: var(--glm-weight-bold) var(--glm-fs-display) / var(--glm-lh-display) var(--glm-font-display);
  letter-spacing: var(--glm-tracking-tight);
  color: var(--glm-on-surface);
}

.glm-heading {
  font: var(--glm-weight-semibold) var(--glm-fs-heading) / var(--glm-lh-heading) var(--glm-font-display);
  letter-spacing: var(--glm-tracking-tight);
  color: var(--glm-on-surface);
}

.glm-title {
  font: var(--glm-weight-semibold) var(--glm-fs-title) / var(--glm-lh-tight) var(--glm-font-display);
  color: var(--glm-on-surface);
}

.glm-subtitle {
  font: var(--glm-weight-medium) var(--glm-fs-subtitle) / var(--glm-lh-tight) var(--glm-font-body);
  color: var(--glm-on-surface-variant);
}

.glm-label {
  font: var(--glm-weight-medium) var(--glm-fs-small) / 1 var(--glm-font-body);
  letter-spacing: var(--glm-tracking-wide);
  text-transform: uppercase;
  color: var(--glm-on-surface-muted);
}

.glm-body {
  font: var(--glm-weight-regular) var(--glm-fs-body) / var(--glm-lh-body) var(--glm-font-body);
  color: var(--glm-on-surface-variant);
}

.glm-caption {
  font: var(--glm-weight-regular) var(--glm-fs-xs) / var(--glm-lh-body) var(--glm-font-body);
  color: var(--glm-on-surface-muted);
}


/* ---------------------------------------------------------------------------
   BUTTON
   --------------------------------------------------------------------------- */
.glm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--glm-space-xs);
  padding: 0.625rem 1.5rem;
  border: none;
  border-radius: var(--glm-radius-pill);
  font: var(--glm-weight-semibold) var(--glm-fs-small) / 1.2 var(--glm-font-body);
  letter-spacing: var(--glm-tracking-wide);
  cursor: pointer;
  transition:
    transform var(--glm-duration-fast) var(--glm-ease-spring),
    box-shadow var(--glm-duration-base) var(--glm-ease-out),
    background-color var(--glm-duration-fast) var(--glm-ease-out);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

/* State layer overlay */
.glm-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--glm-duration-fast) var(--glm-ease-out);
  pointer-events: none;
}

.glm-btn:hover::after { opacity: var(--glm-state-hover); }
.glm-btn:focus-visible::after { opacity: var(--glm-state-focus); }
.glm-btn:active::after { opacity: var(--glm-state-pressed); }

.glm-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--glm-shadow-2);
}

.glm-btn:active {
  transform: translateY(0) scale(0.98);
}

/* Filled (primary) */
.glm-btn--filled {
  background: var(--glm-primary);
  color: var(--glm-on-primary);
  box-shadow: var(--glm-shadow-1);
}

.glm-btn--filled:hover {
  background: var(--glm-primary-hover);
  box-shadow: var(--glm-shadow-3);
}

/* Tonal — vivid: saturated fill, not a pastel tint */
.glm-btn--tonal {
  background: var(--glm-primary-vivid, rgba(0, 85, 255, 0.15));
  color: var(--glm-on-primary-container);
  font-weight: var(--glm-weight-bold);
}

.glm-btn--tonal:hover {
  background: var(--glm-primary-vivid-hover, rgba(0, 85, 255, 0.22));
}

/* Outlined */
.glm-btn--outlined {
  background: transparent;
  color: var(--glm-primary);
  border: 1.5px solid var(--glm-border-strong);
}

.glm-btn--outlined:hover {
  background: var(--glm-primary-container);
  border-color: var(--glm-primary);
}

/* Ghost */
.glm-btn--ghost {
  background: transparent;
  color: var(--glm-on-primary-container);
}

/* Sizes */
.glm-btn--sm {
  padding: 0.4375rem 1rem;
  font-size: var(--glm-fs-xs);
}

.glm-btn--lg {
  padding: 0.875rem 2rem;
  font-size: var(--glm-fs-body);
}


/* ---------------------------------------------------------------------------
   CARD
   --------------------------------------------------------------------------- */
.glm-card {
  background: var(--glm-surface-lowest);
  border: 1px solid var(--glm-border);
  border-radius: var(--glm-radius-lg);
  padding: var(--glm-space-lg);
  box-shadow: var(--glm-shadow-2), var(--glm-glow, none);
  transition:
    transform var(--glm-duration-base) var(--glm-ease-spring),
    box-shadow var(--glm-duration-base) var(--glm-ease-out);
}

.glm-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--glm-shadow-4), var(--glm-glow, none);
}

.glm-card__header {
  margin-bottom: var(--glm-space-xs);
}

.glm-card__title {
  font: var(--glm-weight-semibold) var(--glm-fs-title) / var(--glm-lh-tight) var(--glm-font-display);
  color: var(--glm-on-surface);
  margin: 0;
}

.glm-card__subtitle {
  font: var(--glm-weight-regular) var(--glm-fs-small) / 1.2 var(--glm-font-body);
  color: var(--glm-on-surface-muted);
  margin: 2px 0 0;
}

.glm-card__body {
  color: var(--glm-on-surface-variant);
}

.glm-card__footer {
  margin-top: var(--glm-space-lg);
  display: flex;
  align-items: center;
  gap: var(--glm-space-sm);
}

/* Elevated variant */
.glm-card--elevated {
  border: none;
  box-shadow: var(--glm-shadow-3), var(--glm-glow, none);
}

.glm-card--elevated:hover {
  box-shadow: var(--glm-shadow-5), var(--glm-glow, none);
}

/* Tonal variant */
.glm-card--tonal {
  background: var(--glm-surface-high);
  border: none;
  box-shadow: none;
}


/* ---------------------------------------------------------------------------
   INPUT
   --------------------------------------------------------------------------- */
.glm-input-group {
  display: flex;
  flex-direction: column;
  gap: var(--glm-space-xs);
}

.glm-input-group__label {
  font: var(--glm-weight-medium) var(--glm-fs-small) / 1 var(--glm-font-body);
  color: var(--glm-on-surface-variant);
}

.glm-input {
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--glm-border);
  border-radius: var(--glm-radius-md);
  background: var(--glm-surface-lowest);
  color: var(--glm-on-surface);
  font: var(--glm-weight-regular) var(--glm-fs-body) / 1.5 var(--glm-font-body);
  outline: none;
  transition:
    border-color var(--glm-duration-fast) var(--glm-ease-out),
    box-shadow var(--glm-duration-fast) var(--glm-ease-out);
}

.glm-input::placeholder {
  color: var(--glm-on-surface-muted);
}

.glm-input:hover {
  border-color: var(--glm-border-strong);
}

.glm-input:focus {
  border-color: var(--glm-primary);
  box-shadow: 0 0 0 3px rgba(0, 85, 255, 0.12);
}


/* ---------------------------------------------------------------------------
   BADGE
   --------------------------------------------------------------------------- */
.glm-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--glm-space-2xs);
  padding: 0.25rem 0.75rem;
  border-radius: var(--glm-radius-pill);
  font: var(--glm-weight-medium) var(--glm-fs-xs) / 1.4 var(--glm-font-body);
  letter-spacing: var(--glm-tracking-wide);
  white-space: nowrap;
}

.glm-badge--primary {
  background: var(--glm-primary-container);
  color: var(--glm-on-primary-container);
}

.glm-badge--secondary {
  background: var(--glm-secondary-container);
  color: var(--glm-on-secondary-container);
}

.glm-badge--tertiary {
  background: var(--glm-tertiary-container);
  color: var(--glm-on-tertiary-container);
}

/* Status badges — vivid: solid saturated fills, white text */
.glm-badge--success {
  background: #22C55E;
  color: #FFFFFF;
}

.glm-badge--warning {
  background: #F59E0B;
  color: #FFFFFF;
}

.glm-badge--error {
  background: #EF4444;
  color: #FFFFFF;
}

/* Moonlit — status badges stay vivid, slightly adjusted for dark */
[data-ambience="moonlit"] .glm-badge--success {
  background: #16A34A;
  color: #FFFFFF;
}

[data-ambience="moonlit"] .glm-badge--warning {
  background: #D97706;
  color: #FFFFFF;
}

[data-ambience="moonlit"] .glm-badge--error {
  background: #DC2626;
  color: #FFFFFF;
}


/* ---------------------------------------------------------------------------
   AVATAR
   --------------------------------------------------------------------------- */
.glm-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--glm-radius-pill);
  background: var(--glm-primary-container);
  color: var(--glm-on-primary-container);
  font: var(--glm-weight-semibold) var(--glm-fs-small) / 1 var(--glm-font-display);
  overflow: hidden;
  flex-shrink: 0;
}

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

.glm-avatar--sm { width: 32px; height: 32px; font-size: var(--glm-fs-xs); }
.glm-avatar--lg { width: 56px; height: 56px; font-size: var(--glm-fs-subtitle); }

/* Status ring */
.glm-avatar--online { box-shadow: 0 0 0 2.5px var(--glm-surface-lowest), 0 0 0 4.5px var(--glm-success); }
.glm-avatar--busy   { box-shadow: 0 0 0 2.5px var(--glm-surface-lowest), 0 0 0 4.5px var(--glm-error); }
.glm-avatar--away   { box-shadow: 0 0 0 2.5px var(--glm-surface-lowest), 0 0 0 4.5px var(--glm-warning); }


/* ---------------------------------------------------------------------------
   ALERT
   --------------------------------------------------------------------------- */
/* Alerts — tinted background, status dot, readable text */
.glm-alert {
  display: flex;
  align-items: center;
  gap: var(--glm-space-sm);
  padding: var(--glm-space-md) var(--glm-space-lg);
  border-radius: var(--glm-radius-lg);
  font: var(--glm-weight-medium) var(--glm-fs-small) / var(--glm-lh-body) var(--glm-font-body);
  color: var(--glm-on-surface);
}

.glm-alert::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  flex-shrink: 0;
}

.glm-alert--info {
  background: rgba(0, 85, 255, 0.08);
}
.glm-alert--info::before { background: var(--glm-primary); }

.glm-alert--success {
  background: rgba(34, 197, 94, 0.08);
}
.glm-alert--success::before { background: #22C55E; }

.glm-alert--warning {
  background: rgba(245, 158, 11, 0.08);
}
.glm-alert--warning::before { background: #F59E0B; }

.glm-alert--error {
  background: rgba(239, 68, 68, 0.08);
}
.glm-alert--error::before { background: #EF4444; }

[data-ambience="moonlit"] .glm-alert--info    { background: rgba(107, 159, 255, 0.10); }
[data-ambience="moonlit"] .glm-alert--success { background: rgba(34, 197, 94, 0.10); }
[data-ambience="moonlit"] .glm-alert--warning { background: rgba(245, 158, 11, 0.10); }
[data-ambience="moonlit"] .glm-alert--error   { background: rgba(239, 68, 68, 0.10); }


/* ---------------------------------------------------------------------------
   CHIP
   --------------------------------------------------------------------------- */
.glm-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--glm-space-2xs);
  padding: 0.375rem 0.875rem;
  border: 1.5px solid var(--glm-border);
  border-radius: var(--glm-radius-pill);
  background: transparent;
  color: var(--glm-on-surface-variant);
  font: var(--glm-weight-medium) var(--glm-fs-small) / 1 var(--glm-font-body);
  cursor: pointer;
  transition:
    background-color var(--glm-duration-fast) var(--glm-ease-out),
    border-color var(--glm-duration-fast) var(--glm-ease-out),
    transform var(--glm-duration-fast) var(--glm-ease-spring);
}

.glm-chip:hover {
  background: var(--glm-surface-high);
  border-color: var(--glm-border-strong);
}

/* Active chip — vivid: solid primary fill */
.glm-chip--active {
  background: var(--glm-primary);
  border-color: var(--glm-primary);
  color: var(--glm-on-primary);
}

.glm-chip:active {
  transform: scale(0.96);
}


/* ---------------------------------------------------------------------------
   AMBIENCE SWITCHER
   --------------------------------------------------------------------------- */
.glm-ambience-switcher {
  position: fixed;
  bottom: var(--glm-space-xl);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--glm-space-xs);
  padding: var(--glm-space-xs) var(--glm-space-sm);
  background: var(--glm-surface-lowest);
  border: 1px solid var(--glm-border);
  border-radius: var(--glm-radius-pill);
  box-shadow: var(--glm-shadow-4);
  z-index: 1000;
  transition: background-color 800ms cubic-bezier(0.4, 0, 0.2, 1);
}

.glm-ambience-switcher__btn {
  position: relative;
  width: 36px;
  height: 36px;
  border: 2px solid transparent;
  border-radius: var(--glm-radius-pill);
  cursor: pointer;
  transition:
    transform var(--glm-duration-fast) var(--glm-ease-spring),
    border-color var(--glm-duration-fast) var(--glm-ease-out),
    box-shadow var(--glm-duration-fast) var(--glm-ease-out);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.glm-ambience-switcher__btn:hover {
  transform: scale(1.15);
}

.glm-ambience-switcher__btn:active {
  transform: scale(0.95);
}

.glm-ambience-switcher__btn--active {
  border-color: var(--glm-primary);
  box-shadow: 0 0 0 2px rgba(0, 85, 255, 0.2);
  transform: scale(1.1);
}

/* Ambience preview colors */
.glm-ambience-switcher__btn[data-target="morning"]  { background: linear-gradient(135deg, #F2F4F8, #FFFFFF); }
.glm-ambience-switcher__btn[data-target="dawn"]     { background: linear-gradient(135deg, #FFE9DA, #FFF6EF); }
.glm-ambience-switcher__btn[data-target="dusk"]     { background: linear-gradient(135deg, #D6CFE5, #F1ECF8); }
.glm-ambience-switcher__btn[data-target="oceanic"]   { background: linear-gradient(135deg, #CEDFE6, #EFF8FA); }
.glm-ambience-switcher__btn[data-target="moonlit"]   { background: linear-gradient(135deg, #0C1018, #2C3545); }
.glm-ambience-switcher__btn[data-target="aurora"]    { background: linear-gradient(135deg, #DFE5F8, #F6F8FF, #EDE8FF); }

/* Tooltip */
.glm-ambience-switcher__btn::after {
  content: attr(data-target);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 0.25rem 0.625rem;
  border-radius: var(--glm-radius-sm);
  background: var(--glm-on-surface);
  color: var(--glm-surface-lowest);
  font: var(--glm-weight-medium) 0.6875rem / 1.2 var(--glm-font-body);
  letter-spacing: var(--glm-tracking-wide);
  text-transform: capitalize;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--glm-duration-fast) var(--glm-ease-out),
    transform var(--glm-duration-fast) var(--glm-ease-spring);
}

.glm-ambience-switcher__btn:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


/* ---------------------------------------------------------------------------
   FONT SWITCHER
   --------------------------------------------------------------------------- */
.glm-font-switcher {
  position: fixed;
  top: var(--glm-space-xl);
  right: var(--glm-space-xl);
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--glm-surface-lowest);
  border: 1px solid var(--glm-border);
  border-radius: var(--glm-radius-lg);
  padding: var(--glm-space-2xs);
  box-shadow: var(--glm-shadow-3);
  z-index: 1000;
  transition: background-color 800ms cubic-bezier(0.4, 0, 0.2, 1);
}

.glm-font-switcher__btn {
  padding: 8px 14px;
  border: none;
  border-radius: var(--glm-radius-sm);
  background: transparent;
  color: var(--glm-on-surface-variant);
  font: var(--glm-weight-medium) var(--glm-fs-xs) / 1.2 var(--glm-font-body);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition:
    background-color var(--glm-duration-fast) var(--glm-ease-out),
    color var(--glm-duration-fast) var(--glm-ease-out);
}

.glm-font-switcher__btn:hover {
  background: var(--glm-surface-high);
}

.glm-font-switcher__btn--active {
  background: var(--glm-primary-vivid, rgba(0, 85, 255, 0.12));
  color: var(--glm-primary);
  font-weight: var(--glm-weight-bold);
}

.glm-font-switcher__label {
  padding: 4px 14px 6px;
  font: var(--glm-weight-medium) 0.625rem / 1 var(--glm-font-body);
  letter-spacing: var(--glm-tracking-caps);
  text-transform: uppercase;
  color: var(--glm-on-surface-muted);
}

.glm-font-switcher__btn-sub {
  display: block;
  font: var(--glm-weight-regular) 0.625rem / 1.3 var(--glm-font-body);
  color: var(--glm-on-surface-muted);
  margin-top: 2px;
}


/* ---------------------------------------------------------------------------
   AGENT STATUS CARD (domain-specific)
   --------------------------------------------------------------------------- */
.glm-agent-card {
  display: flex;
  align-items: center;
  gap: var(--glm-space-md);
  padding: var(--glm-space-lg);
  background: var(--glm-surface-lowest);
  border: 1px solid var(--glm-border);
  border-radius: var(--glm-radius-lg);
  box-shadow: var(--glm-shadow-1), var(--glm-glow, none);
  transition:
    transform var(--glm-duration-base) var(--glm-ease-spring),
    box-shadow var(--glm-duration-base) var(--glm-ease-out);
}

.glm-agent-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--glm-shadow-3), var(--glm-glow, none);
}

.glm-agent-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--glm-radius-lg);
  background: var(--glm-primary-container);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.glm-agent-card__info {
  flex: 1;
  min-width: 0;
}

.glm-agent-card__name {
  font: var(--glm-weight-semibold) var(--glm-fs-body) / var(--glm-lh-tight) var(--glm-font-display);
  color: var(--glm-on-surface);
}

.glm-agent-card__task {
  font: var(--glm-weight-regular) var(--glm-fs-small) / var(--glm-lh-body) var(--glm-font-body);
  color: var(--glm-on-surface-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.glm-agent-card__status {
  flex-shrink: 0;
}


/* ---------------------------------------------------------------------------
   LAYOUT HELPERS
   --------------------------------------------------------------------------- */
.glm-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--glm-space-xl);
}

.glm-grid {
  display: grid;
  gap: var(--glm-space-lg);
}

.glm-grid--2 { grid-template-columns: repeat(2, 1fr); }
.glm-grid--3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 768px) {
  .glm-grid--2,
  .glm-grid--3 { grid-template-columns: 1fr; }
}

.glm-stack {
  display: flex;
  flex-direction: column;
  gap: var(--glm-space-md);
}

.glm-row {
  display: flex;
  align-items: center;
  gap: var(--glm-space-sm);
  flex-wrap: wrap;
}