/**
 * Bottom Menu Styles - Full-Width Glass Bar
 * Premium glassmorphism design flush to screen edge
 */

.vision-bottom-menu {
  position: fixed;
  /* Use inset for more reliable positioning */
  inset: auto 0 0 0;
  height: calc(60px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9997;
  pointer-events: auto;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;

  /* Full-width glassmorphism bar - darker */
  background: rgba(5, 5, 5, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  /* Halo/shine effect via top border and shadow */
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
}

/* Extend background below menu to cover gap when Chrome/Safari UI collapses */
.vision-bottom-menu::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 100vh; /* Use vh to extend far below */
  background: inherit;
  pointer-events: none;
}

.vision-bottom-menu--hidden {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}

/* Hide bottom menu when blog article modal is active */
.vision-bottom-menu.modal-active {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}

/* Hide when keyboard is visible (input focused) */
.vision-bottom-menu.keyboard-active {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}

.bottom-menu-nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  max-width: 100%;
  height: 100%;
  padding: 0;
  gap: 0;
  position: relative;
  pointer-events: auto;
  background: transparent;
}

.bottom-menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 100%;
  padding: 4px 12px;
  text-decoration: none;
  position: relative;
  flex: 1;
  min-width: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.3s ease;

  /* Idle state: grey color like reference */
  color: #666;
}

/* Menu button on the left - special sizing */
.bottom-menu-item.menu-button {
  flex: 0 0 auto;
  padding: 4px 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.bottom-menu-item:hover:not(.clicked):not(.is-pressing) {
  color: #00f3ff;
}

/* Remove hover state after click/touch */
.bottom-menu-item.clicked {
  color: inherit;
  background: transparent;
  pointer-events: auto;
}

/* Prevent hover on touch devices */
@media (hover: none) and (pointer: coarse) {
  .bottom-menu-item:hover:not(.active) {
    color: inherit;
    background: transparent;
  }
}

.bottom-menu-item:focus-visible {
  outline: 2px solid rgba(0, 243, 255, 0.6);
  outline-offset: 2px;
}

/* Active state: cyan/blue color */
.bottom-menu-item.active {
  color: #00f3ff;
}

/* Active state: top border indicator with glow */
.bottom-menu-item.active::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 2px;
  background: #00f3ff;
  box-shadow: 0 0 15px #00f3ff;
}

/* External links never get active styling */
.bottom-menu-item[data-external="true"] {
  color: #666 !important;
}

.bottom-menu-item[data-external="true"]:hover:not(.clicked):not(.is-pressing) {
  color: #00f3ff !important;
}

.bottom-menu-item[data-external="true"] .bottom-menu-icon .icon-fill {
  color: inherit !important;
}

.bottom-menu-item[data-external="true"] .bottom-menu-label {
  color: inherit !important;
}

/* Remove bottom underbar - using top border instead */
.bottom-menu-item.active::after {
  display: none;
}

/* External links never show active indicator */
.bottom-menu-item[data-external="true"]::after,
.bottom-menu-item[data-external="true"]::before {
  display: none !important;
}

.bottom-menu-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.14s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.14s ease;
  will-change: transform;
}

/* Inline SVG icon styles */
.bottom-menu-icon svg {
  width: 22px;
  height: 22px;
  display: block;
  transition: opacity 0.14s ease, color 0.14s ease;
  color: currentColor;
  fill: currentColor;
}

/* Icon regular/fill switching */
.bottom-menu-icon .icon-regular {
  display: block;
}

.bottom-menu-icon .icon-regular svg {
  /* Idle state: outline icons at 70-80% opacity */
  opacity: 0.75;
}

.bottom-menu-icon .icon-fill {
  display: none;
}

.bottom-menu-icon .icon-fill svg {
  opacity: 1;
}

.bottom-menu-item.active .bottom-menu-icon .icon-regular {
  display: none;
}

.bottom-menu-item.active .bottom-menu-icon .icon-fill {
  display: block;
  color: #00f3ff;
}

/* Hover state icon color */
.bottom-menu-item:hover:not(.active):not(.clicked) .bottom-menu-icon {
  color: #00f3ff;
}

.bottom-menu-item:hover:not(.active):not(.clicked) .bottom-menu-icon svg {
  color: #00f3ff;
}

/* Press animation: 2-4° rotate + 1.02-1.05 scale only while pressing */
.bottom-menu-item.is-pressing .bottom-menu-icon {
  transform: rotate(3deg) scale(1.03);
}

.bottom-menu-item.is-pressing:not(.active) .bottom-menu-icon svg {
  opacity: 0.9;
}

@media (prefers-reduced-motion: reduce) {
  .bottom-menu-item,
  .bottom-menu-icon,
  .bottom-menu-item.is-pressing .bottom-menu-icon {
    transition: none !important;
  }
}

/* Label styling - single word below icon */
.bottom-menu-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-top: 2px;
  color: inherit;
  opacity: 0.85;
  text-transform: capitalize;
  white-space: nowrap;
}

.bottom-menu-item.active .bottom-menu-label {
  opacity: 1;
  color: #00f3ff;
}

/* Hide on desktop */
@media (min-width: 769px) {
  .vision-bottom-menu {
    display: none;
  }
}

/* Adjust for safe area on iOS - flush to bottom with safe area padding */
@supports (padding: max(0px)) {
  .vision-bottom-menu {
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 0px);
  }
}

/* ============================================================================
   VARIANT-A THEME OVERRIDES
   Yellow highlight color instead of cyan for urban/industrial design
   ============================================================================ */

:host([data-theme="variant-a"]) .bottom-menu-item:hover:not(.clicked):not(.is-pressing) {
  color: #DFFF00;
}

:host([data-theme="variant-a"]) .bottom-menu-item.active {
  color: #DFFF00;
}

:host([data-theme="variant-a"]) .bottom-menu-item.active::before {
  background: #DFFF00;
  box-shadow: none;
}

:host([data-theme="variant-a"]) .bottom-menu-item.active .bottom-menu-icon .icon-fill {
  color: #DFFF00;
}

:host([data-theme="variant-a"]) .bottom-menu-item:hover:not(.active):not(.clicked) .bottom-menu-icon,
:host([data-theme="variant-a"]) .bottom-menu-item:hover:not(.active):not(.clicked) .bottom-menu-icon svg {
  color: #DFFF00;
}

:host([data-theme="variant-a"]) .bottom-menu-item.active .bottom-menu-label {
  color: #DFFF00;
}

:host([data-theme="variant-a"]) .bottom-menu-item:focus-visible {
  outline-color: rgba(223, 255, 0, 0.6);
}

:host([data-theme="variant-a"]) .bottom-menu-item[data-external="true"]:hover:not(.clicked):not(.is-pressing) {
  color: #DFFF00 !important;
}