/* Liquid Glass Buttons - basic styles reused across UI */

.liquid-glass-button {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
  padding: 8px 12px;
  min-height: 40px;
  box-sizing: border-box;
  cursor: pointer;
  transition:
    transform var(--duration-interaction-quick) var(--curve-interaction-emphasized),
    box-shadow var(--duration-interaction-quick) var(--curve-interaction-emphasized),
    background-color var(--duration-interaction-instant) linear,
    opacity var(--duration-interaction-quick) linear;
  border: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.liquid-glass-button--edge-flat {
  border: 1.5px solid rgba(255, 255, 255, 0.075);
}

/* Standard-mode specular edge (independent from refraction). */
.liquid-glass-button--edge-specular {
  border-color: transparent;
  --lg-specular-top-alpha: 0.16;
  --lg-specular-bottom-alpha: 0.06;
  --lg-specular-rim-alpha: 0.05;
}

.liquid-glass-button--edge-specular::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 1.2px 1.2px rgba(255, 255, 255, var(--lg-specular-top-alpha)),
    inset 0 -0.7px 0.7px rgba(255, 255, 255, var(--lg-specular-bottom-alpha)),
    inset 0 0 0 0.5px rgba(255, 255, 255, var(--lg-specular-rim-alpha));
}

.liquid-glass-button--edge-specular:hover:not(:active) {
  --lg-specular-top-alpha: 0.18;
  --lg-specular-bottom-alpha: 0.07;
  --lg-specular-rim-alpha: 0.06;
}

/* Inner content sits above the glass filter */
.liquid-glass-button .lg-button-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* ============================================
   SHAPE VARIANTS
   ============================================ */

/* Circle - icon-only buttons */
.liquid-glass-button--circle {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  flex: 0 0 auto;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  padding: 0;
  border-radius: 999px;
}

/* Pill - text buttons with rounded ends (default) */
.liquid-glass-button--pill {
  border-radius: 999px;
  padding: 8px 16px;
}

/* Rounded - larger rectangular buttons */
.liquid-glass-button--rounded {
  border-radius: 8px;
  padding: 10px 20px;
}

/* Legacy support */
.liquid-glass-button--text {
  border-radius: var(--radius-md);
  padding: 8px 12px;
}

/* Variants */
.liquid-glass-button--primary {
  color: var(--color-foreground-base);
}
.liquid-glass-button--secondary {
  color: var(--color-foreground-high);
  opacity: 0.95;
}
.liquid-glass-button--ghost {
  color: var(--color-foreground-secondary);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.04);
}

/* Active */
.liquid-glass-button:active {
  transform: translateY(0);
  background: var(--color-glass-border-soft);
  box-shadow: none;
  animation: 0.5s infinite;
}

/* Hover (only when not active) */
.liquid-glass-button:hover:not(:active) {
  transform: translateY(0);
  background: var(--color-glass-highlight-soft);
  box-shadow: none;
  animation: 0.5s infinite;
}

/* Disabled */
.liquid-glass-button[aria-disabled="true"] {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

/* Tooltip positioning for buttons */
.lg-button-wrapper { position: relative; } /* ensure positioning context */

.lg-button-wrapper .glass-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);     /* sits above the button */
  transform: translateX(-50%) translateY(6px);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--duration-tooltip-reveal) ease,
    transform var(--duration-tooltip-reveal) var(--curve-interaction-emphasized);
  z-index: 50;
}

/* Reveal on hover/focus of wrapper (keyboard accessible via focus) */
.lg-button-wrapper:hover .glass-tooltip,
.lg-button-wrapper:focus-within .glass-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* Outer wrapper provides positioning/context but must NOT clip children */
.lg-button-outer {
  position: relative; /* positioning context for tooltip */
  display: inline-block;
  overflow: visible;  /* IMPORTANT: allow tooltip to escape above the button */
}

/* Outer wrapper shape variants (for consistent layout by shape) */
/* Circle: no fixed dimensions — shrink-wraps to the inner button's
   platform-aware inline size (32px macOS / 44px iOS) so flex parents
   can center it accurately. */
.lg-button-outer--circle {
  display: inline-flex;
  flex: 0 0 auto;
  flex-shrink: 0;
}

.lg-button-outer--pill {
  min-height: 32px;
}

.lg-button-outer--rounded {
  min-height: 40px;
}

/* keep existing clipped container for the glass effect */
.lg-container.lg-button-wrapper {
  display: inline-block;
  position: relative;
  overflow: hidden;       /* keep clipping for the glass surface */
  border-radius: 12px;
}

/* Standard-mode wrapper shape variants — match inner button border-radius */
.lg-button-outer--circle .lg-container.lg-button-wrapper {
  border-radius: 999px;
  flex: 0 0 auto;
  flex-shrink: 0;
}

.lg-button-outer--pill .lg-container.lg-button-wrapper {
  border-radius: 999px;
}

.lg-button-outer--rounded .lg-container.lg-button-wrapper {
  border-radius: 8px;
}

/* Tooltip positioning and reveal (use outer wrapper for hover/focus) */
.lg-button-outer .glass-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--duration-tooltip-reveal) ease,
    transform var(--duration-tooltip-reveal) var(--curve-interaction-emphasized);
  z-index: 50;
}

.lg-button-outer:hover .glass-tooltip,
.lg-button-outer:focus-visible .glass-tooltip {
  opacity: 1;
}

/* ============================================
   REFRACTION MODE - Real liquid glass with backdrop-filter
   Uses layered structure like the dock: glass + shine + content
   ============================================ */

.lg-button-refraction {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  isolation: isolate; /* Stacking context for glass layers */
}

/* ============================================
   REFRACTION SHAPE VARIANTS
   ============================================ */

/* Circle - icon-only buttons */
.lg-button-refraction--circle {
  border-radius: 999px;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  flex: 0 0 auto;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  padding: 0;
}

/* Pill - text buttons with rounded ends (default) */
.lg-button-refraction--pill {
  border-radius: 999px;
  min-height: 40px;
  padding: 0;
}

/* Rounded - larger rectangular buttons */
.lg-button-refraction--rounded {
  border-radius: 8px;
  min-height: 40px;
  padding: 0;
}

/* Glass layer - receives backdrop-filter from JS engine */
.lg-button-glass {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  /* Tint gradient — subtle dark tint for readability (matches dock behavior) */
  background: var(--lg-btn-tint, linear-gradient(135deg, rgba(30, 30, 35, 0.12), rgba(40, 40, 50, 0.08)));
  /* Fallback blur for non-Chromium (JS injects real refraction on Chromium) */
  backdrop-filter: blur(var(--lg-blur, 20px)) saturate(var(--lg-saturation, 1.6)) brightness(var(--lg-brightness, 1.05));
  -webkit-backdrop-filter: blur(var(--lg-blur, 20px)) saturate(var(--lg-saturation, 1.6)) brightness(var(--lg-brightness, 1.05));
  transition: transform var(--duration-interaction-quick) var(--curve-interaction-emphasized);
}

/* Refraction intensity tuning for LiquidGlassButton */
.lg-button-refraction--subtle .lg-button-glass {
  --lg-blur: 8px;
  --lg-saturation: 1.35;
  --lg-brightness: 1.02;
  --lg-btn-tint: linear-gradient(135deg, rgba(30, 30, 35, 0.10), rgba(40, 40, 50, 0.06));
}

.lg-button-refraction--medium .lg-button-glass {
  --lg-blur: 12px;
  --lg-saturation: 1.5;
  --lg-brightness: 1.05;
  --lg-btn-tint: linear-gradient(135deg, rgba(30, 30, 35, 0.14), rgba(40, 40, 50, 0.10));
}

.lg-button-refraction--strong .lg-button-glass {
  --lg-blur: 16px;
  --lg-saturation: 1.7;
  --lg-brightness: 1.08;
  --lg-btn-tint: linear-gradient(135deg, rgba(30, 30, 35, 0.18), rgba(40, 40, 50, 0.14));
}

/* Shine layer - edge highlights and border */
.lg-button-shine {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  border: 0.5px solid rgba(255, 255, 255, 0.2);
  box-shadow: 
    inset 0 1px 1px rgba(255,255,255,0.12),
    inset 0 -0.5px 0.5px rgba(255,255,255,0.04);
}

/* Content layer - icon/label on top */
.lg-button-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  color: var(--color-foreground-high);
  transition: opacity var(--duration-fast) ease;
  pointer-events: none; /* Let clicks pass through to the button */
}

.lg-button-refraction--circle .lg-button-content {
  padding: 0;
}

/* Variant: primary */
.lg-button-refraction--primary .lg-button-content {
  color: var(--color-foreground-base);
}

/* Variant: secondary */
.lg-button-refraction--secondary .lg-button-content {
  color: var(--color-foreground-secondary);
}

/* Variant: ghost */
.lg-button-refraction--ghost .lg-button-glass {
  background: transparent;
}
.lg-button-refraction--ghost .lg-button-shine {
  border-color: rgba(255, 255, 255, 0.08);
}

/* Hover state */
.lg-button-refraction:hover .lg-button-content {
  opacity: 0.75;
}

/* ============================================
   PLATFORM PRIMARY ACTIONS
   Shared visual speech for project platform buttons in header + chrome.
   ============================================ */

.platform-primary-action.liquid-glass-button {
  background: var(--platform-action-bg) !important;
  color: var(--platform-action-foreground) !important;
}

.platform-primary-action.liquid-glass-button:not(.liquid-glass-button--edge-specular) {
  border-color: var(--platform-action-border) !important;
}

.platform-primary-action.liquid-glass-button:hover:not(:active) {
  background: var(--platform-action-bg-hover) !important;
}

.platform-primary-action.liquid-glass-button:active {
  background: var(--platform-action-bg-active) !important;
}

.platform-primary-action.liquid-glass-button:active:not(.liquid-glass-button--edge-specular) {
  border-color: var(--platform-action-border-active) !important;
}

.platform-primary-action.lg-button-refraction .lg-button-glass {
  background: var(--platform-action-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.platform-primary-action.lg-button-refraction .lg-button-shine {
  border-color: var(--platform-action-border) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.14),
    inset 0 -0.5px 0.5px var(--color-glass-border-faint);
}

.platform-primary-action.lg-button-refraction .lg-button-content {
  color: var(--platform-action-foreground) !important;
}

.platform-primary-action.lg-button-refraction:hover .lg-button-glass {
  background: var(--platform-action-bg-hover) !important;
}

.platform-primary-action.lg-button-refraction:active .lg-button-glass {
  background: var(--platform-action-bg-active) !important;
}

.platform-primary-action.lg-button-refraction:active .lg-button-shine {
  border-color: var(--platform-action-border-active) !important;
}

/* iOS header variant: keep 44px tap target, render slightly lighter 40px visual pill */
.window--ios .platform-primary-action--header.lg-button-refraction {
  min-height: 44px;
}

.window--ios .platform-primary-action--header.lg-button-refraction .lg-button-glass,
.window--ios .platform-primary-action--header.lg-button-refraction .lg-button-shine {
  top: 2px;
  bottom: 2px;
}

.window--ios .platform-primary-action--header.lg-button-refraction .lg-button-content {
  min-height: 40px;
  padding-top: 0;
  padding-bottom: 0;
}

/* iOS header variant for standard mode (refraction: none):
   preserve 44px tap target while visually insetting to 40px. */
.window--ios .platform-primary-action--header.liquid-glass-button {
  --platform-primary-header-inset-x: 0px;
  --platform-primary-header-inset-y: 2px;
  --platform-primary-header-bg: var(--platform-action-bg);
  min-height: 44px !important;
  background: transparent !important;
  padding-top: 0;
  padding-bottom: 0;
}

.window--ios .platform-primary-action--header.liquid-glass-button.liquid-glass-button--circle {
  --platform-primary-header-inset-x: 2px;
  --platform-primary-header-inset-y: 2px;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
}

.window--ios .platform-primary-action--header.liquid-glass-button::before {
  z-index: 2;
  left: var(--platform-primary-header-inset-x);
  right: var(--platform-primary-header-inset-x);
  top: var(--platform-primary-header-inset-y);
  bottom: var(--platform-primary-header-inset-y);
}

.window--ios .platform-primary-action--header.liquid-glass-button::after {
  content: '';
  position: absolute;
  left: var(--platform-primary-header-inset-x);
  right: var(--platform-primary-header-inset-x);
  top: var(--platform-primary-header-inset-y);
  bottom: var(--platform-primary-header-inset-y);
  border-radius: inherit;
  background: var(--platform-primary-header-bg);
  pointer-events: none;
  z-index: 0;
}

.window--ios .platform-primary-action--header.liquid-glass-button .lg-button-inner {
  min-height: 40px;
  padding-top: 0;
  padding-bottom: 0;
  z-index: 3;
}

.window--ios .platform-primary-action--header.liquid-glass-button:hover:not(:active) {
  --platform-primary-header-bg: var(--platform-action-bg-hover);
  background: transparent !important;
}

.window--ios .platform-primary-action--header.liquid-glass-button:active {
  --platform-primary-header-bg: var(--platform-action-bg-active);
  background: transparent !important;
}

/* Active state */
.lg-button-refraction:active .lg-button-content {
  opacity: 0.5;
}
.lg-button-refraction:active .lg-button-glass {
  transform: scale(0.96);
}

/* Disabled state — opacity only on content/shine, NOT on the wrapper.
   Putting opacity < 1 on the wrapper creates a compositing group that
   traps .lg-button-glass inside it, which prevents Chrome from correctly
   resolving backdrop-filter: url(#id) on the glass layer. */
.lg-button-refraction--disabled {
  cursor: default;
  pointer-events: none;
}
.lg-button-refraction--disabled .lg-button-content,
.lg-button-refraction--disabled .lg-button-shine {
  opacity: 0.5;
}

/* Icon sizing within refraction buttons */
.lg-button-refraction .lg-button-content img,
.lg-button-refraction .lg-button-content svg {
  display: block;
  width: 16px;
  height: 16px;
}

/* Inner content wrapper */
.lg-button-refraction .lg-button-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}