/**
 * CHAT-ROUTE-R2 — Unified official header visual system.
 * Single token block for Profile + F7 chat route navbars (Common/DM).
 */

:root {
  --app-header-pt: max(10px, env(safe-area-inset-top, 10px));
  --app-header-px: 16px;
  --app-header-pb: 8px;
  --app-header-bg: transparent;
  --app-header-border: rgba(255, 255, 255, 0.07);
  --app-header-title-size: 16px;
  --app-header-title-weight: 700;
  --app-header-title-color: var(--t1, rgba(255, 255, 255, 0.93));
  --app-header-button-size: 38px;
  --app-header-icon-size: 19px;
  --app-header-button-bg: transparent;
  --app-header-button-border: transparent;
  --app-header-back-bg: transparent;
  --app-header-back-border: rgba(255, 255, 255, 0.14);
  --app-header-gap: 8px;
  --app-header-blur: 0;
  --app-header-backdrop-filter: none;
  --app-header-height: calc(
    var(--app-header-pt) + var(--app-header-pb) + var(--app-header-button-size)
  );

  /* Legacy tab header aliases — one knob for hub/tab headers */
  --tab-hdr-pt: var(--app-header-pt);
  --tab-hdr-px: var(--app-header-px);
  --tab-hdr-pb: var(--app-header-pb);
  --tab-hdr-fs: var(--app-header-title-size);
  --tab-hdr-fw: var(--app-header-title-weight);
}

/* ── Custom DOM headers (Profile, etc.) ── */
.app-unified-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--app-header-gap);
  padding: var(--app-header-pt) max(0px, calc(var(--app-header-px) - var(--safe-x-right, 0px)))
    var(--app-header-pb) max(0px, calc(var(--app-header-px) - var(--safe-x-left, 0px)));
  min-height: var(--app-header-height);
  background: var(--app-header-bg);
  border-bottom: 1px solid var(--app-header-border);
  box-sizing: border-box;
}

.app-unified-header__back {
  width: var(--app-header-button-size);
  height: var(--app-header-button-size);
  min-width: var(--app-header-button-size);
  min-height: var(--app-header-button-size);
  border-radius: 50%;
  background: var(--app-header-back-bg);
  border: 1px solid var(--app-header-back-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--app-header-title-color);
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.app-unified-header__back svg {
  width: var(--app-header-icon-size);
  height: var(--app-header-icon-size);
}

.app-unified-header__title {
  font-size: var(--app-header-title-size);
  font-weight: var(--app-header-title-weight);
  color: var(--app-header-title-color);
  letter-spacing: -0.2px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-unified-header__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--app-header-gap);
  flex-shrink: 0;
  margin-left: auto;
}

.app-unified-header__action {
  width: var(--app-header-button-size);
  height: var(--app-header-button-size);
  min-width: var(--app-header-button-size);
  min-height: var(--app-header-button-size);
  border-radius: 50%;
  background: var(--app-header-button-bg);
  border: 1px solid var(--app-header-button-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.72);
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.app-unified-header__action svg {
  width: var(--app-header-icon-size);
  height: var(--app-header-icon-size);
}

.app-unified-header__action--danger {
  background: rgba(255, 80, 80, 0.1);
  border-color: rgba(255, 80, 80, 0.22);
  color: #ff7070;
}

.app-unified-header__action--danger:active {
  background: rgba(255, 80, 80, 0.22);
}

/* ── F7 navbar compatibility (Common + DM chat routes) ── */
#f7-app-root .navbar.app-unified-header {
  --f7-navbar-bg-color: var(--app-header-bg);
  --f7-navbar-text-color: var(--app-header-title-color);
  --f7-navbar-link-color: var(--app-header-title-color);
  background: var(--app-header-bg) !important;
}

#f7-app-root .navbar.app-unified-header .navbar-inner {
  align-items: center;
  gap: var(--app-header-gap);
  padding-top: var(--app-header-pt);
  padding-bottom: var(--app-header-pb);
  padding-left: max(0px, calc(var(--app-header-px) - env(safe-area-inset-left, 0px)));
  padding-right: max(0px, calc(var(--app-header-px) - env(safe-area-inset-right, 0px)));
  min-height: var(--app-header-height);
}

#f7-app-root .navbar.app-unified-header .left {
  margin: 0;
}

#f7-app-root .navbar.app-unified-header .link.back.app-unified-header__back {
  width: var(--app-header-button-size);
  height: var(--app-header-button-size);
  min-width: var(--app-header-button-size);
  min-height: var(--app-header-button-size);
  border-radius: 50%;
  background: var(--app-header-back-bg);
  border: 1px solid var(--app-header-back-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--app-header-title-color);
  margin: 0;
  padding: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#f7-app-root .navbar.app-unified-header .link.back.app-unified-header__back .icon-back {
  font-size: var(--app-header-icon-size);
  line-height: 1;
  color: inherit;
}

#f7-app-root .navbar.app-unified-header .title.app-unified-header__title {
  font-size: var(--app-header-title-size);
  font-weight: var(--app-header-title-weight);
  color: var(--app-header-title-color);
  letter-spacing: -0.2px;
  text-align: left;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#f7-app-root .navbar.app-unified-header .right.app-unified-header__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--app-header-gap);
  flex-shrink: 0;
  margin-left: auto;
}

#f7-app-root .navbar.app-unified-header .app-unified-header__action {
  width: var(--app-header-button-size);
  height: var(--app-header-button-size);
  min-width: var(--app-header-button-size);
  min-height: var(--app-header-button-size);
}

/* Disable uncontrolled glass on unified chat route navbars */
body.f7-chat-route-active.f7-shell-settled #f7-app-root .page.chat-page .navbar.app-unified-header .navbar-bg {
  background: var(--app-header-bg) !important;
  backdrop-filter: var(--app-header-backdrop-filter) !important;
  -webkit-backdrop-filter: var(--app-header-backdrop-filter) !important;
  border-bottom: 1px solid var(--app-header-border) !important;
  box-shadow: none !important;
}

body.f7-chat-route-active.f7-shell-settled
  #f7-app-root
  .page.chat-page
  .navbar.app-unified-header
  .navbar-bg::before,
body.f7-chat-route-active.f7-shell-settled
  #f7-app-root
  .page.chat-page
  .navbar.app-unified-header
  .navbar-bg::after {
  display: none !important;
}

body.f7-chat-route-active.f7-shell-settled #f7-app-root .page.chat-page .navbar.app-unified-header .link.back {
  min-width: var(--app-header-button-size);
  min-height: var(--app-header-button-size);
}

/* CHAT-ROUTE-R3 — neutralize F7 iOS navbar segment pills (merged bell/search, back double-layer) */
#f7-app-root .navbar.app-unified-header .left,
#f7-app-root .navbar.app-unified-header .right {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  height: auto !important;
}

#f7-app-root .navbar.app-unified-header .right.app-unified-header__actions {
  gap: var(--app-header-gap);
}

#f7-app-root .navbar.app-unified-header .app-unified-header__action + .app-unified-header__action {
  margin-left: 0 !important;
}

/* F7 iOS default navbar-bg blur layers — unified header only */
#f7-app-root .navbar.app-unified-header .navbar-bg::before,
#f7-app-root .navbar.app-unified-header .navbar-bg::after {
  display: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: none !important;
  opacity: 0 !important;
}

/* f7-glass-navbar + DM scrim + ios-translucent-bars — unified header only */
body.f7-chat-route-active.f7-shell-settled #f7-app-root .page.chat-dm-page .navbar.app-unified-header .navbar-bg,
body.f7-chat-route-active.f7-shell-settled #f7-app-root .page.chat-common-page .navbar.app-unified-header .navbar-bg,
html.ios-translucent-bars
  body.f7-chat-route-active.f7-shell-settled
  #f7-app-root
  .page.chat-page
  .navbar.app-unified-header
  .navbar-bg {
  background: var(--app-header-bg) !important;
  backdrop-filter: var(--app-header-backdrop-filter) !important;
  -webkit-backdrop-filter: var(--app-header-backdrop-filter) !important;
  border-bottom: 1px solid var(--app-header-border) !important;
  box-shadow: none !important;
}

html.ios-translucent-bars
  body.f7-chat-route-active.f7-shell-settled
  #f7-app-root
  .page.chat-page
  .navbar.app-unified-header
  .navbar-bg::before,
html.ios-translucent-bars
  body.f7-chat-route-active.f7-shell-settled
  #f7-app-root
  .page.chat-page
  .navbar.app-unified-header
  .navbar-bg::after {
  display: none !important;
}

/* Unified back — beat f7-glass-navbar 44px and chat-pages DM 44px hit target */
body.f7-chat-route-active #f7-app-root .page.chat-page .navbar.app-unified-header .left .link.back.app-unified-header__back,
#f7-app-root .page.chat-page .navbar.app-unified-header .left .link.back.app-unified-header__back {
  min-width: var(--app-header-button-size) !important;
  min-height: var(--app-header-button-size) !important;
  width: var(--app-header-button-size) !important;
  height: var(--app-header-button-size) !important;
  padding: 0 !important;
}