/* Final public mobile shell. Loaded last so the shared header and Router agree on one viewport model. */

html,
body.router-page,
.router-page .router-page-surface,
.router-page .app,
.router-page .hero {
  max-width: 100%;
}

html {
  overflow-x: clip;
}

body.router-page {
  width: 100%;
  overflow-x: clip !important;
}

.app-header-nav-backdrop {
  display: none;
}

@media (max-width: 920px) {
  html.mobile-nav-open,
  body.mobile-nav-open {
    height: 100%;
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  body.mobile-nav-open .app-header {
    position: fixed !important;
    top: 0;
    right: 0;
    left: 0;
  }

  .app-header {
    z-index: 260;
    overflow: visible !important;
  }

  .app-header-shell {
    position: relative;
    z-index: 261;
    overflow: visible !important;
    padding-right: max(14px, env(safe-area-inset-right));
    padding-left: max(14px, env(safe-area-inset-left));
  }

  .app-header-center {
    position: fixed !important;
    top: calc(62px + max(8px, env(safe-area-inset-top))) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    left: max(10px, env(safe-area-inset-left)) !important;
    z-index: 1001 !important;
    display: none !important;
    width: auto !important;
    max-width: none;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transform: none !important;
  }

  .app-header-center.open,
  body.mobile-nav-open .app-header-center {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .app-header-links,
  .app-header-links.open {
    position: relative;
    z-index: 1002;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    width: 100%;
    max-height: calc(100dvh - 82px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    margin: 0;
    padding: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid rgba(154, 234, 220, 0.2);
    border-radius: 18px;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    background: rgba(3, 11, 13, 0.995);
    box-shadow: 0 26px 80px rgba(0, 0, 0, 0.66), inset 0 1px rgba(255, 255, 255, 0.045);
    transform: none !important;
    -webkit-overflow-scrolling: touch;
    isolation: isolate;
    animation: coco-mobile-menu-in 170ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .app-header-links a {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    min-height: 48px;
    align-items: center;
    justify-content: flex-start;
    padding: 0 15px;
    border-radius: 12px;
    color: var(--muted-2, #c2cdcb) !important;
    font-size: 0.9rem;
    line-height: 1.15;
    text-align: left;
    white-space: normal;
    pointer-events: auto !important;
    touch-action: manipulation;
  }

  .app-header-links a:hover,
  .app-header-links a:focus-visible,
  .app-header-links a:active {
    color: var(--text, #f5f7f7) !important;
    background: rgba(113, 221, 201, 0.08);
  }

  .app-header-links a.active {
    color: var(--text, #f5f7f7) !important;
    background: rgba(113, 221, 201, 0.1);
  }

  .app-header-links a.active::after {
    right: auto;
    bottom: 7px;
    left: 15px;
    width: 24px;
  }

  .app-header-nav-backdrop {
    position: fixed;
    inset: 62px 0 0;
    z-index: 900;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: rgba(0, 4, 5, 0.66);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: opacity 160ms ease, visibility 160ms ease;
  }

  body.mobile-nav-open .app-header-nav-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .app-header-toggle {
    position: relative;
    z-index: 1003;
    touch-action: manipulation;
  }

  .app-header-toggle[aria-expanded="true"] span:first-child {
    transform: translateY(2.5px) rotate(45deg);
  }

  .app-header-toggle[aria-expanded="true"] span:last-child {
    transform: translateY(-2.5px) rotate(-45deg);
  }
}

@media (max-width: 760px) {
  :root {
    --coco-mobile-browser-clearance: clamp(76px, 20vw, 98px);
  }

  .router-page-surface,
  .router-page .app,
  .router-page .hero,
  .router-page .hero-head,
  .router-page .hero-title,
  .router-page .terminal,
  .router-page .composer {
    min-width: 0;
  }

  .router-page .hero {
    width: min(100% - 28px, 720px);
    min-height: calc(100dvh - 62px);
    align-content: start;
    gap: 16px;
    padding-top: 20px;
    padding-bottom: calc(var(--coco-mobile-browser-clearance) + env(safe-area-inset-bottom));
  }

  .router-page .hero-head,
  .router-page .hero-title {
    width: 100%;
  }

  .router-page .hero-title h1,
  .router-page .hero-title .production-page-title {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow: visible;
    font-size: clamp(2.75rem, 13.2vw, 4rem) !important;
    line-height: 0.92 !important;
    letter-spacing: -0.055em !important;
    overflow-wrap: normal;
    word-break: normal;
    white-space: normal !important;
    text-wrap: balance;
  }

  .router-page .hero-brand-line {
    margin-bottom: 9px;
    font-size: 0.68rem;
    line-height: 1.15;
    letter-spacing: 0.17em;
  }

  .router-page .hero-summary {
    width: 100%;
    max-width: 36rem;
    margin-top: 14px;
    font-size: 0.98rem;
    line-height: 1.48;
    letter-spacing: -0.015em;
    overflow-wrap: anywhere;
  }

  .router-page .terminal {
    width: 100%;
    height: clamp(430px, 64dvh, 560px);
    max-height: none;
    border-radius: 13px;
  }

  .router-page .history {
    min-height: 0;
    max-height: none;
    padding: 17px 13px 15px;
  }

  .router-page .composer {
    padding: 13px 13px calc(15px + env(safe-area-inset-bottom));
    scroll-margin-bottom: var(--coco-mobile-browser-clearance);
  }

  .router-page .hero-foot {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

@media (max-width: 390px) {
  .app-header-center {
    right: max(10px, env(safe-area-inset-right)) !important;
    left: max(10px, env(safe-area-inset-left)) !important;
    width: auto !important;
  }

  .app-header-links a {
    min-height: 46px;
    padding-inline: 13px;
    font-size: 0.84rem;
  }

  .router-page .hero {
    width: calc(100% - 20px);
  }

  .router-page .hero-title h1,
  .router-page .hero-title .production-page-title {
    font-size: clamp(2.5rem, 13vw, 3.3rem) !important;
  }
}

@keyframes coco-mobile-menu-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-header-links {
    animation: none !important;
  }

  .app-header-nav-backdrop {
    transition: none !important;
  }
}