/* ============================================================
 * SkyFlow — style.css
 * Glassmorphism, animations, and custom UI components
 * ============================================================ */

    @layer base {
      html, body { margin: 0; padding: 0; }
      body { overscroll-behavior: none; }
    }

    /* Visible focus ring for keyboard users only */
    :focus-visible {
      outline: 2px solid rgba(0, 219, 233, 0.8);
      outline-offset: 2px;
      border-radius: 0.5rem;
    }
    /* Do not show focus ring on mouse click */
    :focus:not(:focus-visible) {
      outline: none;
    }

    ::-webkit-scrollbar { display: none; }
    .no-scrollbar::-webkit-scrollbar { display: none; }
    .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
    .hud-glass {
      background: rgba(12, 16, 24, 0.32);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.35);
    }
    .hud-subglass {
      background: rgba(10, 14, 22, 0.25);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.08);
    }
    .text-cinematic {
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8), 0 1px 3px rgba(0, 0, 0, 0.9);
    }
    .text-cinematic-soft {
      text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
    }
    .hud-hidden {
      opacity: 0 !important;
      pointer-events: none !important;
      transform: translateY(16px) scale(0.98);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .chat-bubble-bot {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.15);
      color: #f0f3fa;
    }
    .chat-bubble-user {
      background: linear-gradient(135deg, rgba(0, 219, 233, 0.9) 0%, rgba(5, 102, 217, 0.9) 100%);
      color: #ffffff;
    }

    /* Mobile-first collapsible Telemetry Matrix panel */
    @media (max-width: 1023px) {
      #hud-right-dock-wrapper {
        display: grid;
        grid-template-rows: 0fr;
        opacity: 0;
        visibility: hidden;
        margin-top: 0;
        margin-bottom: 0;
        transform: translateY(-8px);
        transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.35s ease,
                    visibility 0.35s ease,
                    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                    margin 0.35s ease;
        pointer-events: none;
        width: 100%;
        overflow: hidden;
      }
      #hud-right-dock-wrapper.panel-open {
        grid-template-rows: 1fr;
        opacity: 1;
        visibility: visible;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
        transform: translateY(0);
        pointer-events: auto;
      }
      #hud-right-dock-wrapper > .panel-inner {
        min-height: 0;
        overflow: hidden;
      }
      #hud-right-dock {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        z-index: 25 !important;
      }
    }

    @media (min-width: 1024px) {
      #hud-right-dock-wrapper {
        display: contents;
      }
      #hud-right-dock {
        position: fixed;
        top: 4rem;
        right: 1rem;
        bottom: 3.5rem;
        width: 20rem;
        z-index: 30;
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
        transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      }
      #hud-right-dock.desktop-dock-hidden {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateX(24px) scale(0.98) !important;
      }
    }

    /* Reduced motion global override */
    .reduced-motion * {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
    }

    /* Settings Drawer */
    #settings-drawer {
      transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    @media (min-width: 1024px) {
      #settings-drawer.settings-drawer-closed {
        transform: translateX(100%);
        pointer-events: none;
      }
      #settings-drawer.settings-drawer-open {
        transform: translateX(0);
        pointer-events: auto;
      }
    }
    @media (max-width: 1023px) {
      #settings-drawer.settings-drawer-closed {
        transform: translateY(100%);
        pointer-events: none;
      }
      #settings-drawer.settings-drawer-open {
        transform: translateY(0);
        pointer-events: auto;
      }
    }

    /* ============================================================
     * LOADING SKELETONS
     * ============================================================ */
    .skyflow-skeleton {
      background: linear-gradient(
        90deg,
        rgba(255,255,255,0.06) 0%,
        rgba(255,255,255,0.14) 50%,
        rgba(255,255,255,0.06) 100%
      );
      background-size: 200% 100%;
      animation: skyflow-shimmer 1.6s ease-in-out infinite;
      border-radius: 0.5rem;
    }
    @keyframes skyflow-shimmer {
      0%   { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }
    .reduced-motion .skyflow-skeleton {
      animation: none;
    }

    /* ============================================================
     * TOAST NOTIFICATIONS
     * ============================================================ */

    /* Slide-up enter */
    @keyframes toast-slide-in {
      from { opacity: 0; transform: translateY(10px) scale(0.97); }
      to   { opacity: 1; transform: translateY(0)   scale(1);    }
    }
    /* Slide-down exit */
    @keyframes toast-slide-out {
      from { opacity: 1; transform: translateY(0)   scale(1);    }
      to   { opacity: 0; transform: translateY(10px) scale(0.97); }
    }
    .toast-enter { animation: toast-slide-in  0.22s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
    .toast-exit  { animation: toast-slide-out 0.18s ease-in forwards; }

    /* ============================================================
     * LOCATION BUTTON
     * ============================================================ */
    @keyframes skyflow-loc-pulse {
      0%   { box-shadow: 0 0 0 0   rgba(0, 219, 233, 0.55); }
      70%  { box-shadow: 0 0 0 8px rgba(0, 219, 233, 0);    }
      100% { box-shadow: 0 0 0 0   rgba(0, 219, 233, 0);    }
    }
    #location-btn.is-locating {
      animation: skyflow-loc-pulse 1.4s ease-out infinite;
    }
    .reduced-motion #location-btn.is-locating {
      animation: none;
    }
    #location-btn[disabled] {
      opacity: 0.55;
      pointer-events: none;
    }
    /* 44px minimum touch target on mobile */
    @media (max-width: 1023px) {
      #location-btn  {
        min-width:  44px;
        min-height: 44px;
      }
      #favorite-btn  { min-width: 44px; min-height: 44px; }
      .fav-remove    { min-width: 44px; min-height: 44px;
                       display: inline-flex; align-items: center;
                       justify-content: center; }
    }

/* ============================================================
 * RECENT SEARCHES DROPDOWN
 * ============================================================ */
.recent-search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 60;
  max-height: 20rem;
  overflow-y: auto;
  border-radius: 0.75rem;
}
.recent-search-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  min-height: 44px;
  text-align: left;
}
.recent-search-row:hover { background: rgba(255,255,255,0.08); }
.recent-name    { font-weight: 600; color: #fff; }
.recent-country { color: rgba(255,255,255,0.6); font-size: 0.75rem; }
.recent-clear   {
  width: 100%;
  padding: 0.5rem 0.75rem;
  min-height: 44px;
  text-align: center;
  color: rgba(255,255,255,0.6);
  font-size: 0.75rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  background: transparent;
  cursor: pointer;
}
.recent-search-row,
.recent-clear {
  background: transparent;
  border: none;
  cursor: pointer;
  color: inherit;
}

/* Dynamic Canvas Crossfade Duration */
#weather-bg-a,
#weather-bg-b {
  transition-duration: var(--skyflow-crossfade, 1000ms);
}