/* 
  CCUI Bottom Bar Styles 
  Extracted from global-scripts.js for better performance and consistency.
*/

/* Enable smooth MPA transitions if supported */
@view-transition { navigation: auto; }

:root {
  --ccui-max-width: 100%;
  --ccui-bg: #FFFFFF;                        /* Solid White */
  --ccui-border: rgba(230, 238, 248, 0.8);   /* Soft styling border */
  --ccui-text: #64748B;                      /* Slate-500 default */
  --ccui-text-active: #2563EB;               /* Blue-600 active */
  --ccui-pill: #EFF6FF;                      /* Blue-50 pill (optional) */
  --ccui-shadow: 0 -1px 3px rgba(0,0,0,0.05); /* Slight shadow pointing up */
  --cc-bottom-height: 60px;
}

/* Container Wrapper - Full Width Fixed Bottom */
.ccui-container {
  position: fixed; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  z-index: 9999;
  padding: 0;
  padding-bottom: env(safe-area-inset-bottom);
  
  view-transition-name: bottom-bar; /* Persist visually across pages */
  
  background-color: transparent; /* Changed from var(--ccui-bg) to transparent */
  /* border-top removed */
  /* border-radius removed */
  /* box-shadow removed */
  
  font-family: 'Poppins', system-ui, sans-serif;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
  pointer-events: none; /* Let clicks pass through empty areas */
}

.cc-hide-down {
  transform: translateY(100%);
}

.ccui-inner { 
  margin: 0 auto; 
  width: 100%;
  max-width: 640px !important; /* STRICT LIMIT */
  margin: 0 auto !important;   /* STRICT CENTERING */
  height: 64px; /* Standard app bar height */
  padding: 0 8px;
  box-sizing: border-box;
  
  /* Moved styles from container to here */
  background-color: var(--ccui-bg);
  border-top: 1px solid var(--ccui-border);
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  box-shadow: var(--ccui-shadow);
  pointer-events: auto; /* Re-enable clicks for the bar itself */
  
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.ccui-row { 
  display: flex; 
  align-items: center; 
  justify-content: space-around; 
  height: 100%;
}

.ccui-item {
  position: relative;
  display: flex; 
  flex: 1; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center;
  gap: 4px; 
  padding: 4px 0; 
  color: var(--ccui-text); 
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s ease;
}

/* Micro-interaction: Tap/Press */
.ccui-item:active .material-symbols-outlined { 
  transform: scale(0.92); 
  transition-duration: 0.1s;
} 

/* Hover Desktop */
@media (hover: hover) {
  .ccui-item:hover { 
    color: var(--ccui-text-active); 
  }
}

/* The Pill (Background Highlight) */
.ccui-pill {
  position: absolute;
  top: 50%; 
  left: 50%;
  width: 56px;
  height: 40px;
  background: var(--ccui-pill);
  border-radius: 12px;
  transform: translate(-50%, -50%) scale(0.8);
  opacity: 0;
  transition: all 0.2s ease;
  z-index: -1;
}

.ccui-item .material-symbols-outlined {
  font-size: 24px;
  font-variation-settings: 'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24;
  color: currentColor;
  z-index: 1;
  transition: all 0.2s ease;
  margin-bottom: 2px;
}

.ccui-label { 
  font-size: 10px; 
  font-weight: 500; 
  color: currentColor;
  z-index: 1;
}

/* Active State */
.ccui-item.ccui-active { color: var(--ccui-text-active); }
.ccui-item.ccui-active .ccui-pill {
  opacity: 0; /* Set to 1 if you want the pill visible */
  transform: translate(-50%, -50%) scale(1);
}
.ccui-item.ccui-active .material-symbols-outlined {
  font-variation-settings: 'FILL' 1,'wght' 600,'GRAD' 0,'opsz' 24;
  transform: translateY(-1px);
}
.ccui-item.ccui-active .ccui-label {
  font-weight: 600;
}

/* Helper for Tailwind snippets */
/* .ccui-tw-container{ max-width: 100%; } */

@media (prefers-reduced-motion: reduce) {
  .ccui-item, 
  .ccui-item .material-symbols-outlined {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}