/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Pull-to-Refresh Indicator */
.pull-to-refresh-indicator {
  position: fixed;
  top: env(safe-area-inset-top, 0);
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  transform: translateY(-100%);
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 9999;
  pointer-events: none;
}

.pull-to-refresh-spinner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(30, 41, 59, 0.95);
  border: 1px solid rgba(100, 116, 139, 0.3);
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  color: #e2e8f0;
  font-size: 14px;
}

.spinner-icon {
  width: 20px;
  height: 20px;
  color: #22c55e;
  transition: transform 0.3s ease;
}

/* Text visibility states */
.pull-text,
.release-text,
.loading-text {
  display: none;
}

.pull-to-refresh-indicator .pull-text {
  display: inline;
}

.pull-to-refresh-indicator.ready .pull-text {
  display: none;
}

.pull-to-refresh-indicator.ready .release-text {
  display: inline;
}

.pull-to-refresh-indicator.loading .pull-text,
.pull-to-refresh-indicator.loading .release-text {
  display: none;
}

.pull-to-refresh-indicator.loading .loading-text {
  display: inline;
}

/* Spinner animation when loading */
.pull-to-refresh-indicator.loading .spinner-icon {
  animation: ptr-spin 1s linear infinite;
}

@keyframes ptr-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Icon rotation on ready state */
.pull-to-refresh-indicator.ready .spinner-icon {
  transform: rotate(180deg);
}

/* Body states during pull */
[data-controller~="pull-to-refresh"].pulling {
  overflow: hidden;
}

[data-controller~="pull-to-refresh"].refreshing {
  pointer-events: none;
}

/* ==========================================================================
   Mobile Bottom Navigation (PWA Standalone Mode)
   ========================================================================== */

/* Bottom navigation - hidden by default */
.bottom-nav {
  display: none;
}

/* Focus states for bottom nav links */
.bottom-nav a:focus-visible {
  outline: 2px solid var(--color-tactical-accent, #f59e0b);
  outline-offset: -2px;
  border-radius: 0.375rem;
}

/* PWA Standalone Mode - Show bottom nav, hide top nav on mobile */
@media (display-mode: standalone) {
  @media (max-width: 640px) {
    .bottom-nav {
      display: flex;
    }

    .top-nav {
      display: none;
    }

    /* Add padding to body to account for bottom nav height + safe area */
    body {
      padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    }
  }
}

/* JavaScript fallback for iOS Safari PWA detection */
@media (max-width: 640px) {
  html.pwa-standalone .bottom-nav {
    display: flex;
  }

  html.pwa-standalone .top-nav {
    display: none;
  }

  html.pwa-standalone body {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
}

/* ==========================================================================
   PWA Splash Screen
   ========================================================================== */

.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1a1a1a;
  transition: opacity 300ms ease-out;
}

.splash-screen.hidden {
  opacity: 0;
  pointer-events: none;
}

.splash-content {
  text-align: center;
}

.splash-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

.splash-icon {
  width: 120px;
  height: 120px;
  border-radius: 24px;
  overflow: hidden;
}

.splash-title {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #d4d4d4;
  margin: 0 0 1.5rem 0;
}

.splash-loader {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.splash-dot {
  width: 10px;
  height: 10px;
  background-color: #f59e0b;
  border-radius: 50%;
  animation: splash-pulse 1.4s ease-in-out infinite;
}

.splash-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.splash-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes splash-pulse {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .splash-dot {
    animation: none;
    opacity: 1;
  }

  .splash-screen {
    transition: none;
  }
}

/* Only show splash in PWA standalone mode */
@media not all and (display-mode: standalone) {
  .splash-screen {
    display: none;
  }
}

/* JavaScript fallback for iOS Safari PWA detection */
html:not(.pwa-standalone) .splash-screen {
  display: none;
}

html.pwa-standalone .splash-screen {
  display: flex;
}

/* ==========================================================================
   PWA Fixed Header Navigation
   ========================================================================== */

/* PWA Header - hidden by default */
.pwa-header {
  display: none;
}

/* Show PWA header in standalone mode on mobile.
   PWA header is 56px content height. Parent padding includes safe-area-inset-top
   (applied to <main> element, not the header itself). */
@media (max-width: 640px) {
  html.pwa-standalone .pwa-header {
    display: block;
  }

  html.pwa-standalone main {
    padding-top: calc(56px + env(safe-area-inset-top, 0px));
  }
}

/* Back button visibility toggle via CSS */
.pwa-header [data-pwa-navigation-target="backButton"].hidden + [data-pwa-navigation-target="backButtonSpacer"] {
  display: flex;
}

.pwa-header [data-pwa-navigation-target="backButton"]:not(.hidden) + [data-pwa-navigation-target="backButtonSpacer"] {
  display: none;
}

/* Page transition animations - hint to browser for GPU acceleration */
@media (max-width: 640px) {
  html.pwa-standalone main {
    will-change: transform, opacity;
  }
}

/* Reduced motion preference - disable animations */
@media (prefers-reduced-motion: reduce) {
  html.pwa-standalone main {
    transition: none !important;
    transform: none !important;
    will-change: auto;
  }
}

/* Focus states for PWA header buttons */
.pwa-header button:focus-visible {
  outline: 2px solid var(--color-tactical-accent, #f59e0b);
  outline-offset: -2px;
  border-radius: 0.5rem;
}

/* ==========================================================================
   Kent Chat - PWA Layout Adjustments
   ========================================================================== */

/* Fix chat container height in PWA standalone mode.
   Default h-[calc(100dvh-4rem)] assumes the desktop top nav (64px).
   In PWA mode, actual chrome is: PWA header (56px + safe-area-inset-top)
   + bottom nav (80px + safe-area-inset-bottom). */
@media (max-width: 640px) {
  html.pwa-standalone .kent-chat-container {
    height: calc(100dvh - 56px - env(safe-area-inset-top, 0px) - 80px - env(safe-area-inset-bottom, 0px));
    padding-bottom: 0;
  }

  /* When chat input is focused: hide nav, recalculate height without nav.
     Uses :has() instead of JS class toggling because:
     - Avoids state leaking across Turbo navigations (class cleanup would be needed)
     - Pure CSS solution, no controller coordination required
     - Automatically reacts to focus/blur without event handlers */
  html.pwa-standalone body:has(.kent-chat-container textarea:focus) .bottom-nav {
    display: none !important;
  }
  html.pwa-standalone body:has(.kent-chat-container textarea:focus) {
    padding-bottom: 0 !important;
  }
  html.pwa-standalone .kent-chat-container:has(textarea:focus) {
    height: calc(100dvh - 56px - env(safe-area-inset-top, 0px));
  }
}

/* Native display-mode query (for browsers with full standalone mode support).
   Currently only Chromium-based browsers support this on iOS. */
@media (display-mode: standalone) {
  @media (max-width: 640px) {
    .kent-chat-container {
      height: calc(100dvh - 56px - env(safe-area-inset-top, 0px) - 80px - env(safe-area-inset-bottom, 0px));
      padding-bottom: 0;
    }

    body:has(.kent-chat-container textarea:focus) .bottom-nav {
      display: none !important;
    }
    body:has(.kent-chat-container textarea:focus) {
      padding-bottom: 0 !important;
    }
    .kent-chat-container:has(textarea:focus) {
      height: calc(100dvh - 56px - env(safe-area-inset-top, 0px));
    }
  }
}

/* Hide content Back links in PWA mode (PWA header provides navigation) */
/* Use native display-mode query to avoid FOUC (flash of unstyled content) */
@media (display-mode: standalone) and (max-width: 640px) {
  .pwa-hide-in-standalone {
    display: none !important;
  }
}

/* JS fallback for browsers that don't support display-mode query */
@media (max-width: 640px) {
  html.pwa-standalone .pwa-hide-in-standalone {
    display: none !important;
  }
}