:root {
      --main-bottom-nav-height: 62px;
      --main-bottom-nav-pad: 5px;
      --main-bottom-shell-pad-top: 10px;
      --main-bottom-shell-pad-bottom: 4px;
      --main-bottom-shell-bg: transparent;
      /* Shell padding + pill nav; used for FAB offset and in-tab scroll padding. */
      --main-bottom-shell-offset: calc(var(--main-bottom-shell-pad-top) + var(--main-bottom-nav-height) + var(--main-bottom-shell-pad-bottom));
      --main-tab-topbar-corner: 44px;
    }
    html:not(.is-desktop-board) {
      /* Half safe-area below the pill — full inset felt too floaty on phone. */
      --main-bottom-shell-safe-inset: calc(env(safe-area-inset-bottom, 0px) * 0.5);
      --float-bottom-h: calc(var(--main-bottom-shell-pad-top) + var(--main-bottom-nav-height) + var(--main-bottom-shell-pad-bottom) + var(--main-bottom-shell-safe-inset));
      --float-top-h: calc(env(safe-area-inset-top, 0px) + var(--topbar-height, 52px) + 4px);
      --main-bottom-shell-offset: var(--float-bottom-h);
    }
    html:not(.is-desktop-board)[data-main-tab] .topbar {
      grid-template-columns: var(--main-tab-topbar-corner) minmax(0, 1fr) var(--main-tab-topbar-corner);
    }
    .topbar-corner {
      position: relative;
      display: grid;
      place-items: center;
      width: var(--main-tab-topbar-corner);
      height: var(--main-tab-topbar-corner);
      min-width: var(--main-tab-topbar-corner);
      min-height: var(--main-tab-topbar-corner);
      pointer-events: none;
    }
    .topbar-corner > .round {
      pointer-events: auto;
    }
    html:not(.is-desktop-board)[data-main-tab] #menuButton:not(.is-back),
    html:not(.is-desktop-board)[data-main-tab] #profileButton:not(.is-chat-more),
    html:not(.is-desktop-board)[data-main-tab] #findableTopButton {
      width: var(--main-tab-topbar-corner);
      height: var(--main-tab-topbar-corner);
      min-width: var(--main-tab-topbar-corner);
      min-height: var(--main-tab-topbar-corner);
    }
    .topbar-left-placeholder {
      display: none;
      position: absolute;
      inset: 0;
      pointer-events: none;
    }
    html:not(.is-desktop-board)[data-main-tab="search"] .topbar-left-placeholder {
      display: block;
    }
    html:not(.is-desktop-board)[data-main-tab="search"] #menuButton:not(.is-back) {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
    html:not(.is-desktop-board)[data-main-tab="home"] #profileButton:not(.is-chat-more),
    html:not(.is-desktop-board)[data-main-tab="chat"] #profileButton:not(.is-chat-more) {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
    html:not(.is-desktop-board)[data-main-tab="search"] #profileButton:not(.is-chat-more) {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
    html:not(.is-desktop-board)[data-main-tab="circle"] #findableTopButton {
      display: none !important;
    }
    html:not(.is-desktop-board)[data-main-tab="circle"] #menuButton:not(.is-back),
    html:not(.is-desktop-board)[data-main-tab="circle"] #profileButton:not(.is-chat-more) {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
    html:not(.is-desktop-board)[data-main-tab="me"] #menuButton:not(.is-back) {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
    .main-bottom-tab.main-bottom-tab-circle svg {
      width: 26px;
      height: 26px;
    }
    /* Friends · Circle · Meet · Me in Circle's colors (dark → blue → teal → yellow → coral):
       grey when not chosen, in color when chosen, with a small pop. */
    .main-bottom-tab.main-bottom-tab-mark svg {
      width: 26px;
      height: 26px;
      margin: -2px 0;
      transition: filter .25s, opacity .25s;
    }
    .main-bottom-tab.main-bottom-tab-mark:not(.active) svg {
      filter: grayscale(1) contrast(1.15) brightness(.9);
      opacity: .78;
    }
    .main-bottom-tab.main-bottom-tab-mark.active svg {
      animation: tab-mark-pop .34s cubic-bezier(.3, 1.5, .5, 1);
    }
    @keyframes tab-mark-pop {
      0% { transform: scale(.7); }
      70% { transform: scale(1.12); }
      100% { transform: scale(1); }
    }
    @media (prefers-reduced-motion: reduce) {
      .main-bottom-tab.main-bottom-tab-mark.active svg { animation: none; }
    }
    /* Friends posted something new: a red dot by the mark. */
    .main-bottom-tab.main-bottom-tab-circle[data-notification]::after {
      top: 8px;
      right: auto;
      left: calc(50% + 6px);
      width: 9px;
      height: 9px;
      border: 2px solid #fff;
      background: #e11d48;
      box-shadow: none;
      box-sizing: border-box;
    }
    #menuButton.is-add-friend:not(.is-back) {
      color: #fff;
      background: #4a515b;
      border: 1px solid #4a515b;
      box-shadow: 0 8px 20px rgba(74, 81, 91, .18);
    }
    #menuButton.is-add-friend:not(.is-back)::after {
      display: none;
    }
    #menuButton.is-add-friend .add-friend-mark {
      font-size: 24px;
      font-weight: 650;
      line-height: 1;
      transform: translateY(-1px);
    }
    .topbar-findable-button {
      position: relative;
      color: #30343a;
      background: #fff;
      border: 1px solid #e8eaed;
      box-shadow: none;
      place-items: center;
    }
    .topbar-findable-button::after {
      display: none;
    }
    .topbar-findable-icon {
      width: 22px;
      height: 22px;
    }
    .topbar-findable-dot {
      position: absolute;
      top: 3px;
      right: 3px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: transparent;
      border: 2px solid #fff;
      box-sizing: border-box;
    }
    .topbar-findable-button.is-on .topbar-findable-dot {
      background: #34c759;
    }
    .main-bottom-shell {
      flex-shrink: 0;
      z-index: 14;
      padding: var(--main-bottom-shell-pad-top) 0 calc(var(--main-bottom-shell-pad-bottom) + var(--main-bottom-shell-safe-inset, env(safe-area-inset-bottom, 0px)));
      background: var(--main-bottom-shell-bg);
      pointer-events: none;
    }
    html:not(.is-desktop-board) .main-bottom-shell {
      position: fixed;
      left: var(--app-left, 0px);
      width: var(--app-width, 100%);
      right: auto;
      bottom: max(0px, calc(100vh - var(--app-top, 0px) - var(--app-height, 100vh)));
      flex-shrink: 0;
      background: transparent;
    }
    .main-bottom-shell:not(.show) {
      display: none;
    }
    html.is-desktop-board .main-bottom-shell {
      display: none !important;
    }
    html.is-keyboard-open .main-bottom-shell {
      display: none !important;
    }
    html.is-chat-room-chrome .main-bottom-shell,
    .app:has(.group-chat-room) .main-bottom-shell,
    .app.circle-composing .main-bottom-shell,
    .app:has(.xc-editor-wrap.is-open) .main-bottom-shell,
    .app:has(.home-purpose-panel-wrap .xc-editor) .main-bottom-shell,
    .app:has(.brain-notes-panel-wrap .xc-editor) .main-bottom-shell,
    .app:has(.find-me-search-ui.is-search-filter-open) .main-bottom-shell {
      display: none !important;
    }
    .app:has(.overlay.show) .main-bottom-shell {
      pointer-events: none;
    }
    .main-bottom-nav {
      pointer-events: auto;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2px;
      box-sizing: border-box;
      width: 92%;
      max-width: 340px;
      margin-inline: auto;
      height: var(--main-bottom-nav-height);
      padding: var(--main-bottom-nav-pad);
      border: 0;
      border-radius: 40px;
      background: #fff;
      box-shadow: 0 6px 24px rgba(0, 0, 0, .08);
    }
    html:not(.is-desktop-board) .main-bottom-nav {
      border: 1px solid rgba(0, 0, 0, .06);
      background: rgba(255, 255, 255, .62);
      box-shadow: 0 6px 24px rgba(0, 0, 0, .08);
      -webkit-backdrop-filter: blur(20px) saturate(1.6);
      backdrop-filter: blur(20px) saturate(1.6);
    }
    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
      html:not(.is-desktop-board) .main-bottom-nav {
        background: rgba(255, 255, 255, .94);
      }
    }
    @media (prefers-reduced-transparency: reduce) {
      html:not(.is-desktop-board) .main-bottom-nav {
        background: #fff;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
      }
    }
    .main-bottom-nav-active-pill {
      position: absolute;
      top: var(--main-bottom-nav-pad);
      left: 0;
      z-index: 0;
      height: calc(var(--main-bottom-nav-height) - 2 * var(--main-bottom-nav-pad));
      width: 0;
      border-radius: 28px;
      background: #eeefec;
      pointer-events: none;
      transform: translateX(0);
      transition:
        transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
        width 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    html:not(.is-desktop-board) .main-bottom-nav-active-pill {
      background: rgba(238, 239, 236, .55);
    }
    .main-bottom-nav-active-pill.is-instant {
      transition: none;
    }
    .main-bottom-shell:not(.show) .main-bottom-nav-active-pill {
      visibility: hidden;
    }
    .main-bottom-nav[data-pager-mode="friendly"] .main-bottom-nav-active-pill,
    .main-bottom-nav[data-pager-mode="global"] .main-bottom-nav-active-pill {
      display: none;
    }
    .main-bottom-nav[data-pager-mode="friendly"] {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0;
      height: auto;
      min-height: 48px;
      padding: 0;
      border-radius: 0;
      border: 0;
      border-top: 1px solid #e8e9eb;
      box-shadow: none;
      background: rgba(255, 255, 255, 0.97);
    }
    .main-bottom-nav[data-pager-mode="global"] {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0;
      height: auto;
      min-height: 48px;
      padding: 0;
      border-radius: 0;
      border: 0;
      border-top: 1px solid #e8e9eb;
      box-shadow: none;
      background: rgba(255, 255, 255, 0.97);
    }
    .main-bottom-tab {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 2px;
      flex: 1;
      min-width: 0;
      height: 52px;
      padding: 0 2px;
      border: 0;
      border-radius: 28px;
      background: transparent;
      color: #6b6f6c;
      font: inherit;
      font-size: 10px;
      line-height: 1.2;
      font-weight: 600;
      cursor: pointer;
      position: relative;
      z-index: 1;
      transition:
        flex 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
        color 0.2s;
    }
    .main-bottom-tab svg {
      width: 22px;
      height: 22px;
      flex-shrink: 0;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .main-bottom-tab .main-bottom-tab-label {
      display: block;
    }
    .main-bottom-tab.active {
      flex: 1;
      background: transparent;
      color: #111;
    }
    .main-bottom-tab.active .main-bottom-tab-label {
      display: inline;
    }
    .main-bottom-tab[data-notification]::after {
      content: "";
      position: absolute;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #ef4052;
      top: 10px;
      right: 18px;
      border: 1px solid #fff;
      box-shadow: 0 0 0 2px rgba(239, 64, 82, 0.12);
    }
    .main-bottom-tab.active[data-notification]::after {
      display: none;
    }
    .main-bottom-nav[data-pager-mode="friendly"] .main-bottom-tab,
    .main-bottom-nav[data-pager-mode="global"] .main-bottom-tab {
      width: 100%;
      height: 44px;
      flex: none;
      border-radius: 0;
      color: #85888d;
      font-size: 12px;
      font-weight: 720;
    }
    .main-bottom-nav[data-pager-mode="friendly"] .main-bottom-tab svg,
    .main-bottom-nav[data-pager-mode="global"] .main-bottom-tab svg {
      display: none;
    }
    .main-bottom-nav[data-pager-mode="friendly"] .main-bottom-tab .main-bottom-tab-label,
    .main-bottom-nav[data-pager-mode="global"] .main-bottom-tab .main-bottom-tab-label {
      display: inline;
    }
    .main-bottom-nav[data-pager-mode="friendly"] .main-bottom-tab.active,
    .main-bottom-nav[data-pager-mode="global"] .main-bottom-tab.active {
      flex: none;
      background: transparent;
      color: #202226;
    }
    .main-bottom-nav[data-pager-mode="friendly"] .main-bottom-tab.active::before,
    .main-bottom-nav[data-pager-mode="global"] .main-bottom-tab.active::before {
      content: "";
      position: absolute;
      right: 17%;
      bottom: -1px;
      left: 17%;
      height: 4px;
      border-radius: 4px 4px 0 0;
      background: #202124;
    }
    @media (prefers-reduced-motion: reduce) {
      .main-bottom-nav-active-pill {
        transition: none;
      }
      .main-bottom-tab {
        transition: color 0.2s;
      }
    }
    .app:has(.main-bottom-shell.show) .pane-chat .composer-wrap {
      padding-bottom: 8px !important;
    }
    .app:has(.main-bottom-shell.show) .pane-chat .main:has(.agent-home, .agent-chat) .composer-wrap {
      padding-bottom: calc(var(--main-bottom-shell-offset) + 8px) !important;
    }
    .app:has(.main-bottom-shell.show) .pane-chat .main:has(.friends-chat-page, .circle-feed-page) .conversation {
      padding-bottom: calc(var(--main-bottom-shell-offset) + 28px);
    }
    .app:has(.main-bottom-shell.show) .pane-chat .main:has(.agent-home, .agent-chat) .conversation {
      padding-bottom: calc(var(--main-bottom-shell-offset) + 72px);
    }
    /* Bottom shell stays in DOM with .show while hidden; drop tab-bar insets when keyboard is up. */
    html.is-keyboard-open .app:has(.main-bottom-shell.show) .pane-chat .main:has(.agent-home, .agent-chat) .composer-wrap {
      padding: 3px 10px 2px 20px !important;
    }
    html.is-keyboard-open .app:has(.main-bottom-shell.show) .pane-chat .composer-wrap {
      padding-bottom: 2px !important;
    }
    html.is-keyboard-open .app:has(.main-bottom-shell.show) .pane-chat .main:has(.agent-home, .agent-chat) .conversation {
      padding-bottom: 12px !important;
    }
    html.is-keyboard-open:not(.is-desktop-board)[data-main-tab="home"] .main:has(.agent-home, .agent-chat) .conversation {
      padding-bottom: 12px !important;
    }
    .main:has(.main-search-page) .conversation {
      flex: 1 1 0%;
      min-height: 0;
      padding: 0;
      overflow: hidden;
      background: #fff;
    }
    .xc-search-wrap.is-main-tab {
      position: relative;
      inset: auto;
      z-index: auto;
      flex: 1 1 auto;
      min-height: 0;
      height: 100%;
      margin: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      background: #fff;
    }
    .xc-search-wrap.is-main-tab .xc-search {
      flex: 1 1 auto;
      min-height: 0;
      max-width: none;
      width: 100%;
      margin: 0;
      display: flex;
      flex-direction: column;
    }
    .xc-search-wrap.is-main-tab .xc-search-tab-pager {
      flex: 1 1 auto;
      min-height: 0;
      overflow: hidden;
    }
    .xc-search-wrap.is-main-tab .xc-search-tab-track {
      display: flex;
      width: 200%;
      height: 100%;
      transform: translateX(0);
      transition: transform 0.28s ease;
    }
    .xc-search-wrap.is-main-tab .xc-search-tab-track.is-findme {
      transform: translateX(-50%);
    }
    @media (prefers-reduced-motion: reduce) {
      .xc-search-wrap.is-main-tab .xc-search-tab-track {
        transition: none;
      }
    }
    .xc-search-wrap.is-main-tab .xc-search-tab-page {
      flex: none;
      width: 50%;
      min-height: 0;
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    .xc-search-wrap.is-main-tab .xc-search-scroll,
    .xc-search-wrap.is-main-tab .xc-search-findme-host {
      flex: 1 1 auto;
      min-height: 0;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }
    .app:has(.main-bottom-shell.show) .xc-search-wrap.is-main-tab .xc-search-scroll,
    .app:has(.main-bottom-shell.show) .xc-search-wrap.is-main-tab .xc-search-findme-host {
      padding-bottom: calc(var(--main-bottom-shell-offset) + 28px);
    }
    .xc-search-wrap.is-main-tab .xc-search-scrim {
      display: none !important;
    }
    .find-me-search-ui.is-main-tab .xc-search-head {
      padding-top: max(8px, env(safe-area-inset-top, 0px));
      padding-left: 20px;
      padding-right: 20px;
    }
    .find-me-search-ui.is-main-tab .xc-search-top {
      display: none;
    }
    .find-me-search-ui.is-main-tab .xc-search-form {
      padding-top: 0;
    }
    /* ☰: opens the Meet menu (Meet · Find people), like on the Meet feed. */
    .find-me-search-ui.is-main-tab .xc-search-menu {
      flex: none;
      width: 40px;
      height: 44px;
      margin-left: -10px;
      padding: 0;
      border: 0;
      background: none;
      color: #20211f;
      display: grid;
      place-items: center;
      cursor: pointer;
    }
    html[data-profile-theme="dark"] .find-me-search-ui.is-main-tab .xc-search-menu { color: #f2f3f5; }
    .main-search-page {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
      height: 100%;
    }
    .chat-hello-requests-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      width: 100%;
      margin: 0 0 14px;
      padding: 16px 18px;
      border: 1px solid #e6e6e4;
      border-radius: 20px;
      background: #f0f0ef;
      color: inherit;
      font: inherit;
      font-size: 13px;
      font-weight: 650;
      text-align: left;
      cursor: pointer;
    }
    .chat-hello-requests-row[hidden] {
      display: none !important;
    }
    .chat-hello-requests-row small {
      font-size: 11px;
      font-weight: 600;
      color: #8a8a8a;
    }
    .chat-hello-requests-count {
      min-width: 21px;
      height: 21px;
      padding: 0 6px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      background: #242424;
      color: #fff;
      font-size: 10px;
      font-weight: 700;
    }

    /* Search tab has no corner buttons: drop the empty top bar row so the search box sits
       at the same height as the corner buttons (Me / menu) on the other tabs. */
    html[data-main-tab="search"] .topbar {
      display: none;
    }
    /* Circle sits under the Friends top row (Chats | Circle); its tag row scrolls with the feed. */
    html:not(.is-desktop-board)[data-main-tab="circle"] .circle-fixed-top {
      position: relative;
      top: 0;
      background: transparent;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      border-bottom: 0;
    }
    html:not(.is-desktop-board)[data-main-tab="circle"] .main:has(.circle-feed-page) .conversation {
      padding-top: var(--float-top-h, 0px);
      padding-bottom: calc(var(--float-bottom-h, var(--main-bottom-shell-offset)) + 12px);
    }
    /* Home chat too (.agent-chat): the first message must start below ☰ / Me. */
    html:not(.is-desktop-board)[data-main-tab="home"] .main:has(.agent-home, .agent-chat) .conversation,
    html:not(.is-desktop-board)[data-main-tab="chat"] .main:has(.friends-chat-page, .main-chat-page) .conversation {
      padding-top: var(--float-top-h, 0px);
      padding-bottom: calc(var(--float-bottom-h, var(--main-bottom-shell-offset)) + 12px);
    }
    html:not(.is-desktop-board)[data-main-tab="home"] .topbar,
    html:not(.is-desktop-board)[data-main-tab="chat"] .topbar,
    html:not(.is-desktop-board)[data-main-tab="circle"] .topbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 13;
      background: transparent;
      pointer-events: none;
    }
    html:not(.is-desktop-board)[data-main-tab="home"] #menuButton:not(.is-back),
    html:not(.is-desktop-board)[data-main-tab="chat"] #menuButton.is-add-friend:not(.is-back) {
      width: var(--main-tab-topbar-corner);
      height: var(--main-tab-topbar-corner);
      min-width: var(--main-tab-topbar-corner);
      min-height: var(--main-tab-topbar-corner);
      border: 1px solid rgba(0, 0, 0, .06);
      box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
      -webkit-backdrop-filter: blur(20px) saturate(1.6);
      backdrop-filter: blur(20px) saturate(1.6);
    }
    html:not(.is-desktop-board)[data-main-tab="home"] #menuButton:not(.is-back),
    html:not(.is-desktop-board)[data-main-tab="chat"] #menuButton.is-add-friend:not(.is-back) {
      background: rgba(255, 255, 255, .62);
      color: #30343a;
      border-color: rgba(0, 0, 0, .06);
    }
    /* The + is white on every main tab, even where it is hidden (Circle, Meet, Me), so coming
       back to Chats never fades it from dark to white; only the press animates. */
    html:not(.is-desktop-board)[data-main-tab] #menuButton:not(.is-back) {
      background: rgba(255, 255, 255, .62);
      color: #30343a;
      border-color: rgba(0, 0, 0, .06);
      box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
      transition: transform .15s;
    }
    html:not(.is-desktop-board) .float-top-hide-target {
      transition: transform 200ms ease;
      will-change: transform;
    }
    html:not(.is-desktop-board) .float-top-hide-target.is-scroll-hidden {
      transform: translateY(calc(-100% - env(safe-area-inset-top, 0px)));
    }
    @media (prefers-reduced-motion: reduce) {
      html:not(.is-desktop-board) .float-top-hide-target {
        transition: none;
      }
    }
    html:not(.is-desktop-board)[data-main-tab="me"] .topbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 13;
      background: transparent;
      pointer-events: none;
    }
    /* The Me page has its own top bar (Scan · QR · Settings) over the cover photo. */
    html:not(.is-desktop-board)[data-main-tab="me"] #profileButton:not(.is-chat-more) {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
    html:not(.is-desktop-board)[data-main-tab="me"] .title {
      visibility: hidden;
      pointer-events: none;
    }
    .main-me-page {
      flex: 1 1 auto;
      min-height: 0;
    }
    .main:has(.main-me-page) .composer-wrap {
      display: none;
    }
    html:not(.is-desktop-board)[data-main-tab="me"] .main:has(.main-me-page) .conversation {
      flex: 1 1 auto;
      min-height: 0;
      /* The cover runs edge to edge from the very top; the page's own top bar floats over it. */
      padding-top: 0;
      padding-left: 0;
      padding-right: 0;
      padding-bottom: calc(var(--float-bottom-h, var(--main-bottom-shell-offset)) + 12px);
      scroll-padding-bottom: calc(var(--float-bottom-h, var(--main-bottom-shell-offset)) + 16px);
    }
    html:not(.is-desktop-board) .app:has(.main-bottom-shell.show) .main > .circle-add-button,
    .app:has(.main-bottom-shell.show) .circle-feed-page .circle-add-button {
      bottom: calc(var(--main-bottom-shell-offset) + 16px);
    }
    .app:has(.main-bottom-shell.show) .me-back-to-top.show {
      --me-tab-bottom-inset: var(--main-bottom-shell-offset);
      bottom: calc(var(--me-tab-bottom-inset, 18px) + 8px);
    }

/* Swipe-to-close panels: vertical scrolling stays native, sideways moves go to the swipe
   code. Without this iPhone claims slanted swipes as scrolls and cancels the drag. */
.is-right-panel-slide,
.is-left-panel-slide {
  touch-action: pan-y;
}
html:has(.is-right-panel-slide.show, .is-right-panel-slide.on, .is-left-panel-slide.is-open, #homeLeftMenu.is-left-panel-slide.show) .overlay.show,
html:has(.is-right-panel-slide.show, .is-right-panel-slide.on) .xc-search-scrim {
  touch-action: none;
}

/* Home is just the chat with Six (owner 2026-10-15): no Search people box, Find me cards,
   greeting or quick cards. The markup stays (JS hooks); only the content is hidden. */
.agent-home > div {
  display: none !important;
}

    /* Circle page (opened from the Circle row in Friends → Chats): ‹ and "Circle" in the top row. */
    .circle-top[hidden] {
      display: none;
    }
    /* Above the feed: its photos sit on layers up to 30 and painted over the bar. iOS Safari
       also paints a scrolling list over a fixed bar unless the bar has its own layer. */
    html.is-circle-top .topbar {
      z-index: 40;
      background: #fff;
      transform: translateZ(0);
      -webkit-transform: translateZ(0);
    }
    .circle-top {
      touch-action: manipulation;
      position: absolute;
      left: 0;
      right: 0;
      top: calc(var(--safe-top, 0px) + var(--topbar-gap, 2px));
      height: var(--topbar-inner, 44px);
      display: grid;
      grid-template-columns: 56px 1fr 56px;
      align-items: center;
      pointer-events: auto;
    }
    /* The title is a switch: Circle (everyone's posts) ⇄ your avatar + Me (only your posts). */
    .circle-top-title {
      justify-self: center;
      display: grid;
      place-items: center;
      min-width: 120px;
      height: 40px;
      padding: 0 14px;
      border: 0;
      border-radius: 99px;
      background: none;
      color: #20211f;
      font: inherit;
      cursor: pointer;
    }
    .circle-top-title:active { background: #f3f4f6; }
    .circle-top-face {
      grid-area: 1 / 1;
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 17px;
      font-weight: 600;
      opacity: 0;
      pointer-events: none;
    }
    .circle-top-face.is-on { opacity: 1; }
    .circle-top .circle-mark { width: 22px; height: 22px; }
    .circle-top-me {
      display: grid;
      place-items: center;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #e2e8f0 center / cover no-repeat;
      box-shadow: 0 0 0 1.5px #fff, 0 1px 4px rgb(0 0 0 / .2);
      color: #475569;
      font-size: 10px;
      font-weight: 700;
    }
    /* Me: only your posts; the date sits where your avatar was, no name, only the time below. */
    html.is-circle-me .circle-feed-page .circle-private-post.is-circle-other { display: none; }
    html.is-circle-me .circle-feed-page .circle-private-post > .circle-private-head > .circle-private-avatar,
    html.is-circle-me .circle-feed-page .circle-private-post > .circle-private-head > .circle-repost-avatars,
    html.is-circle-me .circle-feed-page .circle-private-post > .circle-private-head > span > strong { display: none; }
    html.is-circle-me .circle-feed-page .circle-private-post > .circle-private-head { min-height: 0; padding: 0; }
    html.is-circle-me .circle-feed-page .circle-private-post > .circle-private-head:has(.circle-edit-post) { min-height: 26px; padding: 0 28px 6px 0; }
    html.is-circle-me .circle-feed-page .circle-private-post > .circle-private-copy { padding-right: 28px; }
    html.is-circle-me .circle-feed-page .circle-private-post > .circle-private-copy:empty { min-height: 22px; }
    .circle-me-date { position: absolute; top: 12px; left: 12px; width: 42px; line-height: 1; }
    .circle-me-date strong { display: block; color: #171717; font-size: 24px; font-weight: 750; letter-spacing: -.5px; }
    .circle-me-date small { display: block; margin-top: 4px; color: #3b4048; font-size: 11.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
    .circle-me-empty { margin: 0; padding: 60px 20px; color: #717171; font-size: 14px; text-align: center; }
    .circle-top-back,
    .circle-top-add {
      justify-self: center;
      width: 44px;
      height: 44px;
      border: 0;
      background: none;
      color: #20211f;
      display: grid;
      place-items: center;
      cursor: pointer;
    }
    /* Circle page on a phone: one white page like Chats, posts split by thin lines (no cards). */
    html:not(.is-desktop-board)[data-main-tab="circle"] .main:has(.circle-feed-page) .conversation {
      background: #fff;
    }
    html:not(.is-desktop-board)[data-main-tab="circle"] .circle-feed-page .circle-private-post {
      border: 0;
      border-bottom: 1px solid #f0efea;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    /* Circle is a tab: leave room for the bottom bar under the last post. */
    html.is-circle-top:not(.is-desktop-board)[data-main-tab="circle"] .main:has(.circle-feed-page) .conversation {
      padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 112px);
    }
    /* Opened from the Circle tab: no ‹ (another tab leaves it). From Chats or Me it stays. */
    html.is-circle-tab .circle-top-back {
      visibility: hidden;
      pointer-events: none;
    }
    /* Pull to refresh on the Circle page shows under the All · Jobs · Lost & Found row. */
    html:not(.is-desktop-board)[data-main-tab="circle"] .main:has(.circle-feed-page) .conversation .pull-refresh-indicator {
      top: calc(var(--float-top-h, 52px) + 49px);
    }
    /* The + lives in the Circle top row on a phone, so the floating one is hidden there. */
    html.is-circle-top:not(.is-desktop-board) .circle-add-button { display: none; }
    /* Refreshing Circle spins the Circle mark instead of the gray ring. */
    html:not(.is-desktop-board)[data-main-tab="circle"] .conversation.is-pull-active .pull-refresh-label::before,
    html:not(.is-desktop-board)[data-main-tab="circle"] .conversation.is-refreshing .pull-refresh-label::before {
      content: "";
      display: inline-block;
      width: 22px;
      height: 22px;
      margin-right: 8px;
      border: 0;
      border-radius: 0;
      vertical-align: -6px;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Ccircle cx='24' cy='24' r='3.6' fill='%23f7a593'/%3E%3Cpath d='M26.0 25.5L25.8 26.1' stroke='%23f7a78e' stroke-width='1.3'/%3E%3Cpath d='M25.8 26.1L25.5 26.8' stroke='%23f7aa89' stroke-width='1.4'/%3E%3Cpath d='M25.5 26.8L24.9 27.3' stroke='%23f7ac84' stroke-width='1.5'/%3E%3Cpath d='M24.9 27.3L24.1 27.8' stroke='%23f7af7f' stroke-width='1.6'/%3E%3Cpath d='M24.1 27.8L23.2 28.0' stroke='%23f7b179' stroke-width='1.7'/%3E%3Cpath d='M23.2 28.0L22.2 28.0' stroke='%23f7b474' stroke-width='1.7'/%3E%3Cpath d='M22.2 28.0L21.1 27.7' stroke='%23f7b66f' stroke-width='1.8'/%3E%3Cpath d='M21.1 27.7L20.1 27.2' stroke='%23f7b96a' stroke-width='1.9'/%3E%3Cpath d='M20.1 27.2L19.2 26.4' stroke='%23f7bb65' stroke-width='2.0'/%3E%3Cpath d='M19.2 26.4L18.5 25.3' stroke='%23f7be60' stroke-width='2.1'/%3E%3Cpath d='M18.5 25.3L18.0 24.0' stroke='%23f7c05b' stroke-width='2.2'/%3E%3Cpath d='M18.0 24.0L17.8 22.6' stroke='%23f7c256' stroke-width='2.3'/%3E%3Cpath d='M17.8 22.6L18.0 21.1' stroke='%23f7c551' stroke-width='2.4'/%3E%3Cpath d='M18.0 21.1L18.6 19.6' stroke='%23f7c74b' stroke-width='2.5'/%3E%3Cpath d='M18.6 19.6L19.6 18.2' stroke='%23f4c94c' stroke-width='2.6'/%3E%3Cpath d='M19.6 18.2L20.8 17.1' stroke='%23e9c957' stroke-width='2.7'/%3E%3Cpath d='M20.8 17.1L22.4 16.2' stroke='%23dfc962' stroke-width='2.7'/%3E%3Cpath d='M22.4 16.2L24.2 15.8' stroke='%23d4c96d' stroke-width='2.8'/%3E%3Cpath d='M24.2 15.8L26.2 15.7' stroke='%23cac978' stroke-width='2.9'/%3E%3Cpath d='M26.2 15.7L28.1 16.2' stroke='%23bfc983' stroke-width='3.0'/%3E%3Cpath d='M28.1 16.2L30.0 17.1' stroke='%23b5c98e' stroke-width='3.1'/%3E%3Cpath d='M30.0 17.1L31.7 18.4' stroke='%23aac899' stroke-width='3.2'/%3E%3Cpath d='M31.7 18.4L33.0 20.2' stroke='%23a0c8a4' stroke-width='3.3'/%3E%3Cpath d='M33.0 20.2L34.0 22.3' stroke='%2396c8af' stroke-width='3.4'/%3E%3Cpath d='M34.0 22.3L34.4 24.6' stroke='%238bc8ba' stroke-width='3.5'/%3E%3Cpath d='M34.4 24.6L34.3 27.0' stroke='%2381c8c5' stroke-width='3.6'/%3E%3Cpath d='M34.3 27.0L33.7 29.5' stroke='%2376c8d0' stroke-width='3.7'/%3E%3Cpath d='M33.7 29.5L32.4 31.7' stroke='%236cc8db' stroke-width='3.7'/%3E%3Cpath d='M32.4 31.7L30.6 33.7' stroke='%2361c8e6' stroke-width='3.8'/%3E%3Cpath d='M30.6 33.7L28.4 35.2' stroke='%235cc1e1' stroke-width='3.9'/%3E%3Cpath d='M28.4 35.2L25.8 36.2' stroke='%2358b6d4' stroke-width='4.0'/%3E%3Cpath d='M25.8 36.2L22.9 36.6' stroke='%2355abc7' stroke-width='4.1'/%3E%3Cpath d='M22.9 36.6L20.0 36.4' stroke='%2351a0ba' stroke-width='4.2'/%3E%3Cpath d='M20.0 36.4L17.1 35.4' stroke='%234d96ad' stroke-width='4.3'/%3E%3Cpath d='M17.1 35.4L14.5 33.8' stroke='%234a8ba0' stroke-width='4.4'/%3E%3Cpath d='M14.5 33.8L12.3 31.5' stroke='%23468093' stroke-width='4.5'/%3E%3Cpath d='M12.3 31.5L10.6 28.8' stroke='%23437586' stroke-width='4.6'/%3E%3Cpath d='M10.6 28.8L9.5 25.7' stroke='%233f6b79' stroke-width='4.7'/%3E%3Cpath d='M9.5 25.7L9.2 22.3' stroke='%233c606b' stroke-width='4.7'/%3E%3Cpath d='M9.2 22.3L9.7 18.9' stroke='%2338555e' stroke-width='4.8'/%3E%3Cpath d='M9.7 18.9L10.9 15.6' stroke='%23354a51' stroke-width='4.9'/%3E%3Cpath d='M10.9 15.6L12.9 12.6' stroke='%23314044' stroke-width='5.0'/%3E%3Cpath d='M12.9 12.6L15.6 10.1' stroke='%232e3537' stroke-width='5.1'/%3E%3Cpath d='M15.6 10.1L18.9 8.3' stroke='%232a2a2a' stroke-width='5.2'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
    }
    html:not(.is-desktop-board)[data-main-tab="circle"] .conversation.is-refreshing .pull-refresh-label::before {
      animation: pull-refresh-spin .9s linear infinite;
    }

/* Switching bottom tabs (phone): the page slides toward the tab you tapped, like Meet's days. Only the
   page moves (its own layer); the tab bar keeps its place on top and everything else switches at once. */
html.is-tab-sliding .pane-chat { view-transition-name: tab-page; }
html.is-tab-sliding .main-bottom-nav { view-transition-name: tab-bar; }
html.is-tab-sliding::view-transition-old(root),
html.is-tab-sliding::view-transition-new(root),
html.is-tab-sliding::view-transition-group(tab-bar),
html.is-tab-sliding::view-transition-old(tab-bar),
html.is-tab-sliding::view-transition-new(tab-bar) { animation: none; }
html.is-tab-sliding::view-transition-old(tab-bar) { display: none; }
/* While the page slides, the bar is shown as a picture of itself, and a picture has nothing behind
   it to blur: it would look see-through (the page sharp under 62% white) and turn frosted again
   at the end. Its stand-in gets the bar's own frosted glass and rounded shape instead (a little
   extra white where a phone can't blur here). */
html.is-tab-sliding:not(.is-desktop-board)::view-transition-group(tab-bar) {
  border-radius: 40px;
  overflow: hidden;
  background: rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
}
html.is-tab-sliding::view-transition-old(tab-page),
html.is-tab-sliding::view-transition-new(tab-page) {
  animation-duration: .3s;
  animation-timing-function: cubic-bezier(.2, .8, .2, 1);
  animation-fill-mode: both;
  mix-blend-mode: normal;
}
html.tab-slide-next::view-transition-old(tab-page) { animation-name: tab-out-left; }
html.tab-slide-next::view-transition-new(tab-page) { animation-name: tab-in-right; }
html.tab-slide-back::view-transition-old(tab-page) { animation-name: tab-out-right; }
html.tab-slide-back::view-transition-new(tab-page) { animation-name: tab-in-left; }
@keyframes tab-out-left { to { transform: translateX(-100%); } }
@keyframes tab-in-right { from { transform: translateX(100%); } }
@keyframes tab-out-right { to { transform: translateX(100%); } }
@keyframes tab-in-left { from { transform: translateX(-100%); } }