/*
 * 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;
  }
}

/* Shared top-navigation geometry, including feature and title-only headers. */
body.tp-journey {
  --tp-unified-header-height: var(--tp-header-height-desktop);
  --tp-unified-logo-width: var(--tp-shell-logo-desktop-width);
  --tp-unified-logo-height: var(--tp-shell-logo-desktop-height);
}
@media (max-width: 1023px) {
  body.tp-journey {
    --tp-appbar-height: 56px;
    --tp-unified-header-height: calc(var(--tp-appbar-height) + var(--tp-shell-safe-top));
    --tp-unified-logo-width: 96px;
    --tp-unified-logo-height: 34px;
  }
}
body.tp-journey :is(.tp-appbar, .tp-desktop-header, .tp-stage4-topbar, .tp-auth-topbar, .tp-comm-titlebar, .tp-profile-edit-bar) {
  box-sizing: border-box !important;
  height: var(--tp-unified-header-height) !important;
  min-height: var(--tp-unified-header-height) !important;
  max-height: var(--tp-unified-header-height) !important;
  padding-block: 0 !important;
  align-items: center;
}
body.tp-journey :is(.tp-appbar, .tp-desktop-header, .tp-stage4-topbar, .tp-auth-topbar) .logo-img {
  display: block;
  width: var(--tp-unified-logo-width) !important;
  height: var(--tp-unified-logo-height) !important;
  min-width: 0 !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain;
  object-position: center;
}
@media (max-width: 1023px) {
  body.tp-journey :is(.tp-appbar, .tp-stage4-topbar, .tp-auth-topbar, .tp-comm-titlebar, .tp-profile-edit-bar) {
    padding-top: var(--tp-shell-safe-top) !important;
  }
}
/* Keep the unread message count attached to the Inbox icon on every route. */
body.tp-journey .tp-bottom-nav > [data-im-inbox] { position: relative; }
body.tp-journey .tp-bottom-nav > [data-im-inbox] > .im-unread-counter {
  position: absolute;
  top: 0;
  left: calc(50% + 5px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  box-sizing: border-box;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #ff6354;
  color: #fff;
  font: 700 10px/1 Arial, sans-serif;
  pointer-events: none;
}

.tp-drawer-nav .tp-drawer-explore-copy { display:block; min-width:0; }
.tp-drawer-nav .tp-drawer-explore-copy small { display:inline; margin:0; font-size:9px; font-weight:400; color:#536581; }
.tp-drawer-nav .tp-drawer-explore-copy small i { font-size:8px; }
.tp-drawer-nav [data-tp-drawer-destination][hidden] { display:none!important; }

/* Cover-backed identity panel in the main menu. */
body.tp-journey .tp-drawer--profile-cover { padding:0 14px max(28px,var(--tp-shell-safe-bottom,0px))!important; }
.tp-drawer-user-panel { position:relative; isolation:isolate; overflow:hidden; margin:0 -14px 16px; padding:12px 14px 14px; background:linear-gradient(135deg,#bfdef8,#e9f6ff 75%); }
.tp-drawer-user-cover { position:absolute; z-index:-3; inset:0 0 auto; width:100%; height:145px; object-fit:cover; }
.tp-drawer-user-waves { position:absolute; z-index:-2; pointer-events:none; inset:0; overflow:hidden; }
.tp-drawer-user-waves::before,.tp-drawer-user-waves::after { content:""; position:absolute; width:170%; height:220px; left:-35%; top:88px; border-radius:50% 50% 0 0; background:linear-gradient(#fff,#e8f5ff); transform:rotate(-8deg); }
.tp-drawer-user-waves::before { top:58px; left:-10%; opacity:.45; transform:rotate(15deg); }
.tp-drawer-user-panel.has-cover .tp-drawer-user-waves::after { top:115px; }
.tp-drawer-user-panel.has-cover .tp-drawer-user-waves::before { opacity:0; }
.tp-drawer-user-panel .tp-drawer__topbar { position:relative; margin:0 0 12px; padding-top:var(--tp-shell-safe-top,0px); }
.tp-drawer-user-panel .tp-drawer__topbar button,.tp-drawer-cover-camera { display:flex; align-items:center; justify-content:center; width:34px; height:34px; min-width:34px!important; min-height:34px!important; border-radius:50%; background:rgba(255,255,255,.86); color:#075bea; }
.tp-drawer-cover-camera { position:absolute; top:calc(12px + var(--tp-shell-safe-top,0px)); right:14px; z-index:2; box-shadow:0 2px 8px #16386622; }
body.tp-journey .tp-drawer-user-panel .tp-drawer-profile { display:flex; flex-direction:column; gap:5px; margin:0 0 14px; text-align:center; }
body.tp-journey .tp-drawer-user-panel .tp-drawer-profile img { width:72px; height:72px; border:3px solid #fff; box-sizing:border-box; }
.tp-drawer-user-panel .tp-drawer-profile__identity { flex-direction:column; gap:4px; }
.tp-drawer-user-panel .tp-drawer-profile strong { overflow-wrap:anywhere; }
.tp-drawer-user-panel .tp-drawer-profile small { font-size:11px; }
.tp-drawer-user-panel .tp-role-switch { position:relative; margin:0; }
.tp-drawer-user-panel .tp-role-switch > div { background:#fff; }

.tp-drawer-cover-camera { cursor:pointer; overflow:hidden; }
.tp-drawer-cover-camera input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.tp-drawer-cover-camera[hidden] { display:none!important; }
.tp-drawer-cover-status { position:relative; display:block; color:#173966; font-size:11px; }
.tp-drawer-cover-status:empty { display:none; }