/*
 * TripoPal navigation contract.
 *
 * This file is intentionally loaded after route-level styles. Headers and
 * bottom navigation may vary in content, but their geometry is global.
 */

:root {
  --tp-shell-safe-top: env(safe-area-inset-top, 0px);
  --tp-shell-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* The Android wrapper owns system-bar clearance. Override its injected inline
   margins as well as duplicate web navigation insets; browsers keep safe areas. */
html.tp-native-insets {
  --tp-shell-safe-top: 0px;
  --tp-shell-safe-bottom: 0px;
}

html.tp-native-insets body.tp-journey {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

[data-tp-back] {
  color: var(--tp-navy-950, #0b1b4c) !important;
}

.tp-desktop-header {
  min-height: var(--tp-header-height-desktop);
  gap: 28px;
}

.tp-desktop-header .logo-img {
  width: var(--tp-shell-logo-desktop-width);
  height: var(--tp-shell-logo-desktop-height);
}

.tp-desktop-actions {
  gap: var(--tp-shell-action-gap);
}

.tp-desktop-actions .tp-icon-button,
.tp-desktop-actions .tp-menu-button {
  width: var(--tp-shell-action-size);
  height: var(--tp-shell-action-size);
  font-size: var(--tp-shell-icon-size);
}

.tp-desktop-actions .tp-avatar-link {
  width: 40px;
  height: 40px;
}

.tp-browser-footer .tp-container {
  min-height: var(--tp-browser-footer-height);
  gap: var(--tp-space-6);
}

.tp-browser-footer nav {
  gap: 10px var(--tp-space-5);
}

@media (max-width: 1023px) {
  .tp-site-header {
    border-block-end: 0 !important;
    box-shadow: inset 0 -1px var(--tp-border);
  }

  .tp-site-header .tp-appbar,
  .tp-site-header .tp-appbar.tp-appbar--standard,
  .tp-stage8-tours .tp-site-header .tp-appbar.tp-appbar--standard,
  .tp-stage9 .tp-site-header .tp-appbar,
  .tp-stage10 .tp-site-header .tp-appbar,
  .tp-stage10-not-found .tp-site-header .tp-appbar {
    min-height: calc(var(--tp-appbar-height) + var(--tp-shell-safe-top)) !important;
    height: auto !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--tp-shell-action-gap);
    padding: var(--tp-shell-safe-top) var(--tp-shell-padding-inline) 0 !important;
  }

  .tp-appbar__leading {
    grid-column: 1;
    justify-self: start;
  }

  .tp-appbar__title,
  .tp-appbar__brand,
  .tp10-appbar__wordmark {
    grid-column: 2;
  }

  .tp-appbar__actions {
    grid-column: 3;
    justify-self: end;
    gap: var(--tp-shell-action-gap) !important;
  }

  .tp-appbar__leading .logo-img,
  .tp-discovery-home .tp-appbar__brand .logo-img,
  .tp-site-header .tp-appbar--standard .tp-appbar__brand .logo-img,
  .tp-stage8-tours .tp-site-header .tp-appbar--standard .tp-appbar__brand .logo-img,
  .tp-stage9 .tp-appbar__brand .logo-img {
    display: block;
    width: var(--tp-shell-logo-mobile-width) !important;
    height: var(--tp-shell-logo-mobile-height) !important;
    object-fit: contain;
  }

  .tp-appbar .tp-icon-button,
  .tp-appbar .tp-menu-button,
  .tp-stage4-icon,
  .tp-site-header .tp-appbar--standard .tp-back-button,
  .tp-site-header .tp-appbar--standard .tp-notification-link,
  .tp-stage8-tours .tp-site-header .tp-appbar--standard .tp-menu-button,
  .tp-stage9 .tp-menu-button,
  .tp-stage9 .tp-back-button,
  .tp-stage10 .tp-back-button {
    width: var(--tp-shell-action-size) !important;
    height: var(--tp-shell-action-size) !important;
    font-size: var(--tp-shell-icon-size) !important;
  }

  .tp-appbar .tp-avatar-link,
  .tp-site-header .tp-appbar--standard .tp-avatar-link,
  .tp-stage8-tours .tp-site-header .tp-appbar--standard .tp-avatar-link {
    display: block;
    width: var(--tp-shell-avatar-size) !important;
    height: var(--tp-shell-avatar-size) !important;
  }

  .tp-appbar__title,
  .tp-stage10 .tp-appbar__title,
  .tp10-appbar__wordmark,
  .tp-stage10-not-found .tp10-appbar__wordmark {
    max-width: min(52vw, 285px);
    overflow: hidden;
    font-family: var(--tp-font-display);
    font-size: var(--tp-appbar-title-size) !important;
    line-height: var(--tp-appbar-title-line-height) !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Feature top bars use the same geometry as the shared app bar. */
  .tp-stage4-topbar,
  .tp-auth-topbar,
  .tp-comm-titlebar,
  .tp-stage8-screen .im-file-messages .im-chat-header,
  body.im-chat-page.tp-stage8-screen .im-file-messages .im-chat-header {
    min-height: calc(var(--tp-appbar-height) + var(--tp-shell-safe-top)) !important;
    height: auto !important;
    padding-block: var(--tp-shell-safe-top) 0 !important;
    padding-inline: var(--tp-shell-padding-inline) !important;
  }

  body.im-chat-page.tp-stage8-screen .im-file-messages .im-chat-header {
    padding-top: calc(var(--tp-shell-safe-top) + 8px) !important;
  }

  .tp-stage4-topbar {
    grid-template-columns: var(--tp-shell-action-size) minmax(0, 1fr) auto;
  }

  .tp-stage4-brand .logo-img,
  .tp-auth-brand img {
    width: var(--tp-shell-logo-mobile-width) !important;
    height: var(--tp-shell-logo-mobile-height) !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain;
  }

  .tp-stage4-actions {
    gap: var(--tp-shell-action-gap);
  }

  .tp-stage4-avatar {
    width: var(--tp-shell-avatar-size);
    height: var(--tp-shell-avatar-size);
  }

  .tp-auth-topbar,
  .tp-comm-titlebar {
    grid-template-columns: var(--tp-shell-action-size) minmax(0, 1fr) var(--tp-shell-action-size) !important;
  }

  .tp-auth-back,
  .tp-comm-icon {
    width: var(--tp-shell-action-size) !important;
    height: var(--tp-shell-action-size) !important;
    font-size: var(--tp-shell-icon-size) !important;
  }

  .tp-comm-titlebar h1 {
    font-family: var(--tp-font-display);
    font-size: var(--tp-appbar-title-size) !important;
    line-height: var(--tp-appbar-title-line-height) !important;
  }

  .tp-auth-layout {
    padding-top: var(--tp-appbar-height);
  }

  /* One bottom-navigation contract for every route and role. */
  .tp-bottom-nav,
  .tp-bottom-nav--notifications {
    height: calc(var(--tp-bottom-nav-height) + var(--tp-shell-safe-bottom));
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 7px max(4px, env(safe-area-inset-right)) var(--tp-shell-safe-bottom) max(4px, env(safe-area-inset-left));
  }

  .tp-bottom-nav > a,
  .tp-bottom-nav > button {
    min-height: var(--tp-bottom-nav-item-height);
    gap: var(--tp-bottom-nav-item-gap);
    font-size: var(--tp-bottom-nav-label-size);
    line-height: var(--tp-bottom-nav-label-line-height);
  }

  .tp-bottom-nav > a > i,
  .tp-bottom-nav > button > i,
  .tp-bottom-nav .tp9-nav-icon > i,
  .tp-bottom-nav__primary-icon {
    font-size: var(--tp-bottom-nav-icon-size);
  }
}

@media (max-width: 480px) {
  /* The profile remains available in the drawer. Removing it from compact
     app bars prevents the centered logo from colliding with right actions. */
  .tp-appbar .tp-avatar-link,
  .tp-stage4-avatar {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .tp-stage10 .tp-site-header .tp-appbar {
    min-height: var(--tp-header-height-desktop) !important;
  }

  .tp-stage4-topbar,
  .tp-auth-topbar,
  .tp-comm-titlebar,
  .tp-stage8-screen .im-file-messages .im-chat-header {
    min-height: var(--tp-header-height-desktop) !important;
  }

  .tp-stage4-brand .logo-img,
  .tp-auth-brand img {
    width: var(--tp-shell-logo-desktop-width) !important;
    height: var(--tp-shell-logo-desktop-height) !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain;
  }

  .tp-stage4-actions {
    gap: var(--tp-shell-action-gap);
  }

  .tp-stage4-icon,
  .tp-auth-back,
  .tp-comm-icon {
    width: var(--tp-shell-action-size) !important;
    height: var(--tp-shell-action-size) !important;
    font-size: var(--tp-shell-icon-size) !important;
  }

  .tp-stage4-avatar {
    width: 40px;
    height: 40px;
  }
}