/* HUMANIDAD — Mobile Invite Ready V1
 * Final phone hardening for family invitations.
 * Presentation only: no auth, Supabase, RLS, family-state or privacy rules.
 */

@media (max-width: 680px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  body.internal-product-v1-ready .account-modal.open:not(.auth-only),
  body.internal-product-v1-ready .account-modal.open:not(.auth-only) .social-app,
  body.internal-product-v1-ready .account-modal.open:not(.auth-only) .social-main,
  body.internal-product-v1-ready .hrc-account-content,
  body.internal-product-v1-ready .account-view.active {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.internal-product-v1-ready .account-modal.open:not(.auth-only) .social-main {
    width: 100vw !important;
    overflow-x: hidden !important;
    overscroll-behavior-x: none !important;
  }

  /* Mobile dock: always fully inside the live viewport, including iPhone safe area. */
  html body.internal-product-v1-ready .account-modal.open:not(.auth-only):has(.account-view.active) .social-sidebar {
    left: 8px !important;
    right: 8px !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    height: 72px !important;
    min-height: 72px !important;
    padding: 6px !important;
    border-radius: 24px !important;
    box-shadow: 0 18px 52px rgba(0,0,0,.56) !important;
  }

  body.internal-product-v1-ready .account-modal:not(.auth-only) .social-nav button,
  body.internal-product-v1-ready #hrcMobileNavMore {
    min-height: 58px !important;
    border-radius: 17px !important;
  }

  /* Explore sheet: one compact, deliberate layer instead of a huge panel. */
  body.internal-product-v1-ready .hrc-mas-sheet-backdrop {
    background: rgba(1,4,10,.70) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
  }

  body.internal-product-v1-ready .hrc-mas-sheet {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(88px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-height: min(60dvh, 460px) !important;
    padding: 14px 14px 15px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    border-radius: 22px !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(217,192,138,.06), transparent 38%),
      linear-gradient(180deg,#0b1420,#050a12 72%) !important;
    box-shadow: 0 -18px 62px rgba(0,3,10,.62), inset 0 1px rgba(255,255,255,.03) !important;
  }

  body.internal-product-v1-ready .hrc-mas-sheet-head {
    position: sticky;
    top: -14px;
    z-index: 2;
    margin: -14px -14px 10px !important;
    padding: 14px 14px 9px !important;
    background: linear-gradient(180deg,#0b1420 76%,rgba(11,20,32,0));
  }

  body.internal-product-v1-ready .hrc-mas-sheet-head h2 {
    font-size: 16px !important;
  }

  body.internal-product-v1-ready .hrc-mas-sheet-grid {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 6px !important;
  }

  body.internal-product-v1-ready .hrc-mas-sheet-grid button {
    min-height: 68px !important;
    padding: 8px 5px !important;
    gap: 5px !important;
    border-radius: 15px !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
  }

  body.internal-product-v1-ready .hrc-mas-sheet-grid button:last-child {
    grid-column: 2;
  }

  body.internal-product-v1-ready .hrc-mas-sheet-grid button span {
    display: grid !important;
    place-items: center !important;
    width: 25px !important;
    height: 25px !important;
    font-size: 0 !important;
  }

  body.internal-product-v1-ready .hrc-mas-sheet-grid button span svg {
    width: 22px !important;
    height: 22px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.6 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }

  body:has(.hrc-mas-sheet.is-open) .social-main {
    overflow: hidden !important;
  }

  /* Tree header: keep the family title and selector inside one clean mobile row. */
  body.internal-product-v1-ready .account-view[data-view="tree"].active .tree-social-head {
    display: grid !important;
    grid-template-columns: minmax(0,.9fr) minmax(132px,1.1fr) !important;
    align-items: center !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 6px 10px !important;
    overflow: hidden !important;
    gap: 8px !important;
  }

  body.internal-product-v1-ready #familyView .account-view[data-view="tree"].active .tree-social-head h2#familyTreeName {
    max-width: none !important;
    font-size: 12.5px !important;
    line-height: 1.15 !important;
  }

  body.internal-product-v1-ready .account-view[data-view="tree"].active .tree-head-actions,
  body.internal-product-v1-ready .account-view[data-view="tree"].active .tree-selector-wrap {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body.internal-product-v1-ready .account-view[data-view="tree"].active .tree-selector-wrap select {
    width: 100% !important;
    max-width: 100% !important;
    height: 32px !important;
    min-height: 32px !important;
    padding-inline: 9px 26px !important;
    border-radius: 11px !important;
    font-size: 9px !important;
    text-overflow: ellipsis !important;
  }

  /* One mobile tree. Never flash the old technical pedigree while the modern renderer boots. */
  body.internal-product-v1-ready .account-view[data-view="tree"].active .pedigree-canvas.genealogy-canvas {
    display: none !important;
  }

  .humanidad-tree-boot-state {
    display: grid !important;
    grid-template-columns: 38px minmax(0,1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    width: min(360px,calc(100% - 28px)) !important;
    margin: 32px auto !important;
    padding: 18px !important;
    border: 1px solid rgba(217,192,138,.15) !important;
    border-radius: 20px !important;
    background: linear-gradient(160deg,rgba(16,24,34,.92),rgba(7,12,19,.94)) !important;
    color: #f2ead6 !important;
    box-shadow: 0 22px 60px rgba(0,0,0,.28) !important;
  }

  .humanidad-tree-boot-state.is-error {
    grid-template-columns: 38px minmax(0,1fr) auto !important;
  }

  .humanidad-tree-boot-mark {
    display: grid !important;
    place-items: center !important;
    width: 38px !important;
    height: 38px !important;
    border: 1px solid rgba(217,192,138,.24) !important;
    border-radius: 50% !important;
    color: #e4ca8d !important;
    background: rgba(217,192,138,.055) !important;
    font-size: 16px !important;
  }

  .humanidad-tree-boot-state strong {
    display: block !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  .humanidad-tree-boot-state p {
    margin: 5px 0 0 !important;
    color: #8995a2 !important;
    font-size: 10.5px !important;
    line-height: 1.45 !important;
  }

  .humanidad-tree-boot-retry {
    min-height: 36px !important;
    padding: 0 11px !important;
    border: 1px solid rgba(217,192,138,.28) !important;
    border-radius: 999px !important;
    background: rgba(217,192,138,.08) !important;
    color: #ead7a8 !important;
    font-size: 10px !important;
    font-weight: 750 !important;
  }

  /* Compact family navigator: it helps orientation without stealing half the phone. */
  body.internal-product-v1-ready .account-view[data-view="tree"].active .hpx-navigator {
    margin: 0 !important;
    padding: 10px 12px 9px !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.045) !important;
    background: linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012)) !important;
  }

  body.internal-product-v1-ready .account-view[data-view="tree"].active .hpx-nav-focus {
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    margin: 0 0 7px !important;
    min-width: 0 !important;
  }

  body.internal-product-v1-ready .account-view[data-view="tree"].active .hpx-nav-kicker {
    flex: none;
    font-size: 8px !important;
    letter-spacing: .16em !important;
  }

  body.internal-product-v1-ready .account-view[data-view="tree"].active .hpx-nav-name {
    min-width: 0 !important;
    overflow: hidden !important;
    font-size: 18px !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.internal-product-v1-ready .account-view[data-view="tree"].active .hpx-nav-rail {
    gap: 12px !important;
    padding: 1px 0 2px !important;
  }

  body.internal-product-v1-ready .account-view[data-view="tree"].active .hpx-nav-group {
    gap: 5px !important;
  }

  body.internal-product-v1-ready .account-view[data-view="tree"].active .hpx-nav-label {
    font-size: 8px !important;
  }

  body.internal-product-v1-ready .account-view[data-view="tree"].active .hpx-nav-chips {
    gap: 6px !important;
  }

  body.internal-product-v1-ready .account-view[data-view="tree"].active .hpx-navigator .hpx-chip {
    gap: 7px !important;
    max-width: 160px !important;
    padding: 4px 10px 4px 4px !important;
  }

  body.internal-product-v1-ready .account-view[data-view="tree"].active .hpx-navigator .hpx-portrait {
    --hpx-size: 34px !important;
  }

  body.internal-product-v1-ready .account-view[data-view="tree"].active .hpx-navigator .hpx-chip-name {
    font-size: 12px !important;
  }

  body.internal-product-v1-ready .account-view[data-view="tree"].active .hpx-navigator .hpx-chip-sub {
    font-size: 10px !important;
  }

  /* Tree toolbar: only navigation decisions on phone, technical controls disappear. */
  body.internal-product-v1-ready .account-view[data-view="tree"].active .humanidad-f3-toolbar,
  body.internal-product-v1-ready .account-view[data-view="tree"].active .f3-toolbar-v1 {
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 4px 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-padding-inline: 8px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.internal-product-v1-ready .account-view[data-view="tree"].active .f3-nav-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-width: max-content !important;
  }

  body.internal-product-v1-ready .account-view[data-view="tree"].active .humanidad-f3-toolbar .f3-btn {
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 10px !important;
    font-size: 9px !important;
  }

  body.internal-product-v1-ready .account-view[data-view="tree"].active .f3-right-controls,
  body.internal-product-v1-ready .account-view[data-view="tree"].active .f3-zoom-group {
    display: none !important;
  }

  body.internal-product-v1-ready #familyView .account-view[data-view="tree"].active .humanidad-f3-shell {
    height: calc(100dvh - 82px - env(safe-area-inset-bottom)) !important;
    min-height: 500px !important;
    max-height: none !important;
    margin: 6px 0 calc(84px + env(safe-area-inset-bottom)) !important;
    border-radius: 16px 16px 0 0 !important;
  }

  body.internal-product-v1-ready .account-view[data-view="tree"].active .humanidad-f3-stage {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
  }

  body.internal-product-v1-ready .account-view[data-view="tree"].active #HumanidadFamilyChart .humanidad-f3-card.hpx-card {
    width: 132px !important;
    height: 112px !important;
    border-radius: 21px !important;
  }

  /* Trust & Safety / Configuración: no horizontal clipping and no desktop badge geometry. */
  body.internal-product-v1-ready .account-view[data-view="settings"].active,
  body.internal-product-v1-ready .account-view[data-view="settings"].active .humanidad-safety-settings,
  body.internal-product-v1-ready .account-view[data-view="settings"].active .settings-card,
  body.internal-product-v1-ready .account-view[data-view="settings"].active .humanity-policy-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  body.internal-product-v1-ready .account-view[data-view="settings"].active {
    padding-inline: 0 !important;
    padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
  }

  body.internal-product-v1-ready .account-view[data-view="settings"].active .settings-card,
  body.internal-product-v1-ready .account-view[data-view="settings"].active .humanity-policy-card {
    margin-inline: 0 !important;
    padding: 18px 16px !important;
    border-radius: 18px !important;
  }

  body.internal-product-v1-ready .account-view[data-view="settings"].active .safety-card-head {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 9px !important;
  }

  body.internal-product-v1-ready .account-view[data-view="settings"].active .safety-doc-badge,
  body.internal-product-v1-ready .account-view[data-view="settings"].active .safety-state-pill {
    justify-self: start !important;
    max-width: 100% !important;
  }

  body.internal-product-v1-ready .account-view[data-view="settings"].active .safety-card-head h3 {
    max-width: 100% !important;
    font-size: clamp(22px,7vw,28px) !important;
    line-height: 1.08 !important;
    overflow-wrap: anywhere !important;
  }

  body.internal-product-v1-ready .account-view[data-view="settings"].active .account-copy,
  body.internal-product-v1-ready .account-view[data-view="settings"].active .safety-policy-grid p,
  body.internal-product-v1-ready .account-view[data-view="settings"].active .safety-tools-grid p,
  body.internal-product-v1-ready .account-view[data-view="settings"].active .safety-content-note p {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  body.internal-product-v1-ready .account-view[data-view="settings"].active .safety-policy-grid,
  body.internal-product-v1-ready .account-view[data-view="settings"].active .safety-tools-grid {
    grid-template-columns: minmax(0,1fr) !important;
    gap: 10px !important;
  }

  body.internal-product-v1-ready .account-view[data-view="settings"].active .safety-content-note {
    grid-template-columns: 48px minmax(0,1fr) !important;
    gap: 12px !important;
    padding: 14px !important;
  }

  body.internal-product-v1-ready .account-view[data-view="settings"].active .safety-content-note > span {
    width: 44px !important;
    height: 44px !important;
  }

  body.internal-product-v1-ready .account-view[data-view="settings"].active .safety-accept {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;
    white-space: normal !important;
  }

  body.internal-product-v1-ready .account-view[data-view="settings"].active .safety-enforcement-flow {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 8px !important;
  }

  body.internal-product-v1-ready .account-view[data-view="settings"].active .safety-enforcement-flow span {
    min-width: 0 !important;
    padding: 10px 8px !important;
    text-align: center !important;
  }

  body.internal-product-v1-ready .account-view[data-view="settings"].active .safety-enforcement-flow i {
    display: none !important;
  }
}

@media (max-width: 390px) {
  body.internal-product-v1-ready .hrc-mas-sheet {
    left: 8px !important;
    right: 8px !important;
  }

  body.internal-product-v1-ready .hrc-mas-sheet-grid button {
    min-height: 64px !important;
    font-size: 9.5px !important;
  }

  body.internal-product-v1-ready .account-view[data-view="tree"].active .tree-social-head {
    grid-template-columns: minmax(0,.78fr) minmax(130px,1.22fr) !important;
  }

  body.internal-product-v1-ready .account-view[data-view="tree"].active .humanidad-f3-toolbar .f3-btn {
    padding-inline: 8px !important;
  }

  .humanidad-tree-boot-state.is-error {
    grid-template-columns: 34px minmax(0,1fr) !important;
  }

  .humanidad-tree-boot-state.is-error .humanidad-tree-boot-retry {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.internal-product-v1-ready .hrc-mas-sheet,
  body.internal-product-v1-ready .hrc-mas-sheet-backdrop,
  .humanidad-tree-boot-state {
    transition: none !important;
    animation: none !important;
  }
}

/* =========================================================
   BETA 21 — DARK LIQUID GLASS V1
   Mobile dock + Explorar safe-area treatment.
   Presentation only: no product, auth, data or routing logic.
   ========================================================= */
@media (max-width: 680px) {
  body.internal-product-v1-ready {
    --b21-glass: rgba(7, 13, 22, .72);
    --b21-glass-deep: rgba(4, 9, 16, .84);
    --b21-glass-line: rgba(255, 255, 255, .085);
    --b21-glass-gold: rgba(215, 183, 107, .30);
    --b21-glass-highlight: rgba(255, 255, 255, .055);
  }

  html body.internal-product-v1-ready .account-modal.open:not(.auth-only):has(.account-view.active) .social-sidebar {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(6px + env(safe-area-inset-bottom)) !important;
    height: 68px !important;
    min-height: 68px !important;
    padding: 5px !important;
    overflow: hidden !important;
    border: 1px solid var(--b21-glass-line) !important;
    border-radius: 23px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.045), transparent 34%),
      linear-gradient(145deg, rgba(12,21,33,.78), var(--b21-glass-deep)) !important;
    -webkit-backdrop-filter: blur(26px) saturate(138%) !important;
    backdrop-filter: blur(26px) saturate(138%) !important;
    box-shadow:
      0 18px 46px rgba(0,0,0,.52),
      inset 0 1px 0 var(--b21-glass-highlight),
      0 0 0 .5px rgba(215,183,107,.09) !important;
  }

  body.internal-product-v1-ready .account-modal:not(.auth-only) .social-nav button,
  body.internal-product-v1-ready #hrcMobileNavMore {
    min-height: 56px !important;
    border: 1px solid transparent !important;
    border-radius: 17px !important;
    background: transparent !important;
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease !important;
  }

  body.internal-product-v1-ready .account-modal:not(.auth-only) .social-nav button.active,
  body.internal-product-v1-ready .account-modal:not(.auth-only) .social-nav button[aria-current="page"],
  body.internal-product-v1-ready #hrcMobileNavMore[aria-expanded="true"] {
    border-color: rgba(215,183,107,.19) !important;
    color: #ead9ab !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.045), transparent 48%),
      rgba(215,183,107,.075) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045) !important;
  }

  body.internal-product-v1-ready .hrc-mas-sheet-backdrop {
    background: rgba(1,4,10,.48) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    backdrop-filter: blur(5px) !important;
  }

  /* Keep the sheet visually connected to the floating dock on real iPhones.
     The safe area is counted once; only a 6px visual breathing gap remains. */
  body.internal-product-v1-ready .hrc-mas-sheet {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(80px + env(safe-area-inset-bottom)) !important;
    max-height: min(62dvh, 500px) !important;
    padding: 14px 14px 16px !important;
    border: 1px solid var(--b21-glass-line) !important;
    border-radius: 23px !important;
    background:
      radial-gradient(circle at 50% -10%, rgba(215,183,107,.10), transparent 38%),
      linear-gradient(180deg, rgba(255,255,255,.035), transparent 28%),
      var(--b21-glass) !important;
    -webkit-backdrop-filter: blur(30px) saturate(142%) !important;
    backdrop-filter: blur(30px) saturate(142%) !important;
    box-shadow:
      0 22px 64px rgba(0,0,0,.56),
      inset 0 1px 0 rgba(255,255,255,.055),
      0 0 0 .5px rgba(215,183,107,.08) !important;
  }

  body.internal-product-v1-ready .hrc-mas-sheet-head {
    top: -14px !important;
    background:
      linear-gradient(180deg, rgba(9,16,26,.96) 70%, rgba(9,16,26,0)) !important;
    -webkit-backdrop-filter: blur(18px) saturate(130%) !important;
    backdrop-filter: blur(18px) saturate(130%) !important;
  }

  body.internal-product-v1-ready .hrc-mas-sheet-grid button {
    border: 1px solid rgba(255,255,255,.055) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.025), transparent 55%),
      rgba(255,255,255,.018) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
  }

  body.internal-product-v1-ready .hrc-mas-sheet-grid button:hover,
  body.internal-product-v1-ready .hrc-mas-sheet-grid button:focus-visible {
    border-color: rgba(215,183,107,.19) !important;
    background: rgba(215,183,107,.065) !important;
  }
}

@media (max-width: 390px) {
  body.internal-product-v1-ready .hrc-mas-sheet {
    left: 8px !important;
    right: 8px !important;
  }

  html body.internal-product-v1-ready .account-modal.open:not(.auth-only):has(.account-view.active) .social-sidebar {
    left: 8px !important;
    right: 8px !important;
  }
}

/* =========================================================
   BETA 21 — WEB VISUAL CLOSEOUT V1
   Evidence-driven mobile cleanup from production screenshots.
   ========================================================= */
@media (max-width: 680px) {
  /* The previous 46px hard cap clipped the family title + selector on phones.
     Use two deliberate rows instead of forcing both controls into one line. */
  body.internal-product-v1-ready .account-view[data-view="tree"].active .tree-social-head {
    grid-template-columns: minmax(0,1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: stretch !important;
    height: auto !important;
    min-height: 82px !important;
    max-height: none !important;
    padding: 10px 12px !important;
    overflow: visible !important;
    gap: 8px !important;
  }

  body.internal-product-v1-ready #familyView .account-view[data-view="tree"].active .tree-social-head h2#familyTreeName {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  body.internal-product-v1-ready .account-view[data-view="tree"].active .tree-head-actions,
  body.internal-product-v1-ready .account-view[data-view="tree"].active .tree-selector-wrap {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.internal-product-v1-ready .account-view[data-view="tree"].active .tree-selector-wrap select {
    height: 36px !important;
    min-height: 36px !important;
    font-size: 10px !important;
  }

  /* Nearest-family chips may exceed a phone width. Preserve them as one
     horizontal rail instead of letting the final relation clip off-screen. */
  body.internal-product-v1-ready .account-view[data-view="tree"].active .hpx-nav-rail,
  body.internal-product-v1-ready .account-view[data-view="tree"].active .hpx-nav-chips {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.internal-product-v1-ready .account-view[data-view="tree"].active .hpx-nav-rail {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 1px 10px 5px 0 !important;
    scroll-padding-inline: 10px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.internal-product-v1-ready .account-view[data-view="tree"].active .hpx-nav-rail::-webkit-scrollbar {
    display: none !important;
  }

  body.internal-product-v1-ready .account-view[data-view="tree"].active .hpx-nav-group {
    flex: 0 0 auto !important;
  }

  body.internal-product-v1-ready .account-view[data-view="tree"].active .hpx-navigator .hpx-chip {
    max-width: 148px !important;
  }

  /* Keep the tree itself clear of the floating dock after the taller header. */
  body.internal-product-v1-ready #familyView .account-view[data-view="tree"].active .humanidad-f3-shell {
    height: calc(100dvh - 118px - env(safe-area-inset-bottom)) !important;
    margin-top: 8px !important;
  }
}

@media (max-width: 390px) {
  body.internal-product-v1-ready .account-view[data-view="tree"].active .tree-social-head {
    min-height: 86px !important;
    padding-inline: 10px !important;
  }
}