/**
 * TeleDNS — reusable Liquid Glass surfaces
 */

.glass,
.glass-sm,
.glass-chrome,
.glass-panel,
.glass-chip {
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-border-highlight);
  box-shadow: var(--shadow-inset-top), var(--shadow-soft);
  transition:
    background var(--duration-normal) var(--ease),
    border-color var(--duration-fast) var(--ease),
    transform var(--duration-fast) var(--ease),
    box-shadow var(--duration-normal) var(--ease);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: linear-gradient(165deg, var(--glass-tint), var(--glass-bg-medium));
    backdrop-filter: blur(var(--glass-blur-chrome)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur-chrome)) saturate(var(--glass-saturate));
    border-radius: var(--radius-xl);
  }

  .glass-sm {
    background: linear-gradient(165deg, var(--glass-tint), var(--glass-bg-small));
    backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate));
    border-radius: var(--radius-lg);
  }

  .glass-panel {
    background: linear-gradient(165deg, var(--glass-tint), var(--glass-bg-large));
    backdrop-filter: blur(var(--glass-blur-chrome)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur-chrome)) saturate(var(--glass-saturate));
    border-radius: var(--radius-xl);
  }

  .glass-chrome {
    background: linear-gradient(165deg, var(--glass-tint), var(--glass-bg-medium));
    backdrop-filter: blur(var(--glass-blur-chrome)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur-chrome)) saturate(var(--glass-saturate));
    border-radius: var(--radius-xxl);
  }

  .glass-chip {
    background: var(--glass-bg-small);
    backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur-md)) saturate(var(--glass-saturate));
    border-radius: var(--radius-pill);
  }
}

/* Fallback when backdrop-filter unsupported */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass,
  .glass-sm,
  .glass-panel,
  .glass-chrome {
    background: var(--bg-secondary);
  }

  .glass-chip {
    background: var(--bg-tertiary);
  }
}

.glass:hover,
.glass-sm:hover {
  border-color: color-mix(in srgb, var(--brand) 35%, var(--glass-border));
}

.glass-interactive {
  cursor: pointer;
}

.glass-interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-inset-top), 0 14px 36px rgba(0, 0, 0, 0.4);
}

.glass-interactive:active {
  transform: scale(0.985);
}