/**
 * Mobile bottom tab bar — the phone layout's primary navigation.
 *
 * Two hosts share one look: `.mobile-tab-bar--page` floats over the Feed page,
 * `.mobile-tab-bar--drawer` is pinned inside the sidebar drawer. Everything is
 * scoped under `.mobile-tab-bar` or the `mobile-tabbar-*` body flags, which only
 * exist on the phone layout (`body.mobile-standalone`).
 */

/* Nothing renders outside the phone layout. */
.mobile-tab-bar {
    display: none;
}

body.mobile-standalone.mobile-tabbar-enabled .mobile-tab-bar.is-active {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0px) * 0.4 + 6px);
    z-index: 900;
    pointer-events: none; /* only the pill and button take touches */
    transition: transform 0.28s ease, opacity 0.28s ease;
}

/* Over the drawer: as wide as the drawer (same width rule as the sidebar in
   mobile-chat.css), above it, with "New" overhanging the drawer's right edge
   onto the scrim. The bar is a body child because the sidebar clips overflow. */
body.mobile-standalone.mobile-tabbar-enabled .mobile-tab-bar--drawer.is-active {
    left: 0;
    right: auto;
    width: min(90vw, 420px);
    box-sizing: border-box;
    padding: 0 12px;
    z-index: 3100;
}

body.mobile-standalone.mobile-tabbar-enabled .mobile-tab-bar--drawer .mobile-tab-bar__new {
    margin-right: -38px;
}

/* Rides away with the header on scroll-down, back on scroll-up. */
body.mobile-standalone.mobile-tabbar-enabled .mobile-tab-bar--page.is-scroll-hidden {
    transform: translateY(calc(100% + env(safe-area-inset-bottom, 0px) + 16px));
    opacity: 0;
}

/* Over the full-screen notifications sheet: above the app header (z 1000), which
   is the stacking level the sheet lives in, and never scroll-hidden behind it.
   The sheet's list keeps clear of the bar. */
body.mobile-standalone.mobile-tabbar-notif-open .mobile-tab-bar--page.is-active {
    z-index: 1100;
}

body.mobile-standalone.mobile-tabbar-notif-open .mobile-tab-bar--page.is-scroll-hidden {
    transform: none;
    opacity: 1;
}

body.mobile-standalone.mobile-tabbar-notif-open .chat-notif-dropdown {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) * 0.4 + 76px);
}

/* Over the Calendar modal (z 10020) and the dialogs opened from it (10040+):
   the bar stays on screen as the way out to the other destinations. The
   calendar surfaces keep clear of it with `--tabbar-clear`. */
body.mobile-standalone.mobile-tabbar-cal-open {
    --tabbar-clear: calc(env(safe-area-inset-bottom, 0px) * 0.4 + 82px);
}

body.mobile-standalone.mobile-tabbar-cal-open .mobile-tab-bar--page.is-active {
    z-index: 10060;
}

body.mobile-standalone.mobile-tabbar-cal-open .mobile-tab-bar--page.is-scroll-hidden {
    transform: none;
    opacity: 1;
}

body.mobile-standalone.mobile-tabbar-cal-open .mobile-menu.mobile-menu--from-tab-bar {
    z-index: 10070;
}

/* A soft keyboard owns the bottom edge. */
body.mobile-standalone.keyboard-open .mobile-tab-bar {
    display: none !important;
}

.mobile-tab-bar .mobile-tab-bar__pill {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    padding: 5px 4px;
    border-radius: 26px;
    background: color-mix(in srgb, var(--sidebar-bg, #fff) 2%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.26);
    pointer-events: auto;
}

.mobile-tab-bar .mobile-tab-bar__item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 5px 2px 5px;
    border: none;
    border-radius: 22px;
    background: none;
    color: var(--icon-color, #555);
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.mobile-tab-bar .mobile-tab-bar__item:active {
    background: color-mix(in srgb, var(--icon-color, #555) 14%, transparent);
}

/* Adaptive contrast: the pill is see-through, so the icon colour follows what
   is actually behind each item (mobile-tab-bar-contrast.js). Between the two
   thresholds the theme's own colour stays. */
.mobile-tab-bar .mobile-tab-bar__item {
    transition: color 0.18s ease;
}

.mobile-tab-bar .mobile-tab-bar__item.is-on-dark {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.mobile-tab-bar .mobile-tab-bar__item.is-on-light {
    color: #2b2f33;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

.mobile-tab-bar .mobile-tab-bar__icon {
    position: relative;
    font-size: 20px;
    line-height: 1.2;
}

.mobile-tab-bar .mobile-tab-bar__label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10.5px;
    font-weight: 600;
}

.mobile-tab-bar .mobile-tab-bar__badge {
    position: absolute;
    top: -7px;
    left: 12px;
    min-width: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #e5484d;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

/* Detached round "New" button — beside the pill, not a slot in it. */
.mobile-tab-bar .mobile-tab-bar__new {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: var(--tm-accent, #2f5d8a);
    color: #fff;
    font-size: 19px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
    pointer-events: auto;
    cursor: pointer;
}

/* ── Space the bar needs ─────────────────────────────────────────────────── */

/* The Feed's last card must scroll clear of the floating bar. */
body.mobile-standalone.mobile-tabbar-page #panel-teams .space-feed__scroller {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) * 0.4 + 76px);
}

/* Settings and Tasks scroll under the same floating bar. */
body.mobile-standalone.mobile-tabbar-page #settingsPageContent,
body.mobile-standalone.mobile-tabbar-page #panel-tasks {
    box-sizing: border-box;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) * 0.4 + 76px);
}

/* The drawer keeps its list above the bar; border-box so the padding is part
   of the drawer's 100dvh instead of pushing the bar off-screen. */
body.mobile-standalone.mobile-tabbar-enabled .sidebar {
    box-sizing: border-box;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) * 0.4 + 70px);
}

/* The bar's "New" replaces the drawer's floating compose button. */
body.mobile-standalone.mobile-tabbar-enabled .sidebar .teams-new-convo-fab {
    display: none !important;
}

/* "More" reuses the header's ⋮ menu, opened upward from the bar and as wide as
   the screen's dock area (it is a list of full-width rows, not a corner popover). */
body.mobile-standalone .mobile-menu.mobile-menu--from-tab-bar {
    top: auto;
    left: 12px;
    right: 12px;
    min-width: 0;
    bottom: calc(env(safe-area-inset-bottom, 0px) * 0.4 + 62px);
    max-height: calc(100dvh - 142px);
    overflow-y: auto;
    z-index: 3100;
}

/* Larger rows, aligned labels, and the Notifications dot beside its title. */
body.mobile-standalone .mobile-menu.mobile-menu--from-tab-bar .mobile-menu-item {
    padding: 15px 20px;
    gap: 16px;
    font-size: 15px;
}

body.mobile-standalone .mobile-menu.mobile-menu--from-tab-bar .mobile-menu-item i {
    flex: 0 0 26px;
    font-size: 19px;
    text-align: center;
}

body.mobile-standalone .mobile-menu.mobile-menu--from-tab-bar .mobile-menu-label {
    gap: 16px;
}

body.mobile-standalone .mobile-menu.mobile-menu--from-tab-bar .mobile-menu-dot {
    margin-left: 0;
    width: 10px;
    height: 10px;
}

/* ── The bar replaces the header and the separate Catch-up button ─────────── */

/* Collapsed, not display:none: the header still hosts the notifications bell
   the "More" menu pops open (see mobile-chat.css), and display:none would make
   it unrenderable. Same collapse the Teams tab uses for scroll-hide. */
/* Boot state: the tab bar mounts from JS, so until it does the page has no way
   to know the header is about to collapse, and a reload painted the full header
   for the length of the module load before snapping it away. Start collapsed
   (the same box the headerless rule below produces) and let the mount decide.

   The fallback keyframes put the header back after 4s if the bar never mounts —
   without a tab bar the header is the only navigation there is. */
body.mobile-standalone:not(.mobile-tabbar-enabled) .chat-header {
    height: 0;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
    overflow: hidden;
    visibility: hidden;
    transition: none;
    animation: mobile-tabbar-boot-fallback 0s linear 4s forwards;
}

@keyframes mobile-tabbar-boot-fallback {
    to {
        height: auto;
        min-height: 50px;
        padding-top: calc(var(--safe-top, 0px) + 12px);
        padding-bottom: 10px;
        border-width: 1px;
        overflow: visible;
        visibility: visible;
    }
}

/* No transition at the moment of mount: the header goes from the boot box to the
   collapsed box, which are the same size, and an inherited height transition
   would otherwise replay the collapse in view. */
body.mobile-standalone.mobile-tabbar-enabled.mobile-tabbar-headerless .chat-header {
    transition: none;
}

/* Ask AI's fresh-session screen was laid out under the 72px app header
   (welcome block 70px below it). With the header collapsed that block sits 72px
   too high; give the room back. The status-bar inset is already on .chat-area. */
body.mobile-standalone.mobile-tabbar-headerless #chatMessages .welcome-container {
    margin-top: 142px !important;
}

body.mobile-standalone.mobile-tabbar-headerless .chat-header {
    height: 0;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
    overflow: hidden;
    transform: none;
}

/* Edge-to-edge (native shell): with the header collapsed, the first thing at the
   top of every tab is its own content, which would sit under the clock. Push the
   area down by the status-bar inset; the scrim in mobile-chat.css paints the band.
   The Feed is excluded: its header floats and carries the inset itself, below, so
   posts can still scroll up under the status bar. The inset is 0 in a browser. */
body.mobile-standalone.mobile-tabbar-headerless:not(.mobile-tabbar-feed-panel) .chat-area {
    box-sizing: border-box;
    padding-top: var(--safe-top, 0px);
}

body.mobile-standalone.mobile-tabbar-enabled .teams-catch-up-trigger {
    display: none !important;
}

/* ── Feed: translucent header with the posts scrolling underneath ──────────── */

/* Tune the header's opacity here (or override it on <body>): 100% is solid. */
body.mobile-standalone.mobile-tabbar-feed-panel {
    --feed-header-opacity: 55%;
}

body.mobile-standalone.mobile-tabbar-feed-panel .spaces-panel .spaces-panel__body {
    position: relative;
}

/* Lifted out of the column so the scroller can run beneath it. */
body.mobile-standalone.mobile-tabbar-feed-panel .spaces-panel .spaces-panel__context {
    position: absolute;
    padding-top: var(--safe-top, 0px);
    top: 0;
    left: 0;
    right: 0;
    z-index: 6;
    background: color-mix(in srgb, var(--tm-bg, #fff) var(--feed-header-opacity), transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(18px) saturate(5);
}

body.mobile-standalone.mobile-tabbar-feed-panel .spaces-panel .spaces-panel__context .teams-conversation__header {
    background: transparent;
}

/* The first card starts below the header (its height is measured by
   mobile-tab-bar.js into --feed-header-h); it no longer needs a fade-in at the
   top, only at the bottom. */
body.mobile-standalone.mobile-tabbar-feed-panel .spaces-panel .space-feed__scroller {
    padding-top: calc(var(--feed-header-h, 62px) + 12px);
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 30px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 30px), transparent 100%);
}

/* ── The secondary header follows the old app header's scroll rules ─────────── */
/* Scroll down → it leaves, scroll up (or settle near the top) → it returns.
   `.mobile-tabbar-scrolled` mirrors the `.scroll-hidden` state the scroll logic
   already maintains, so there is still exactly one set of rules. */

/* Feed: the header floats over the posts, so it simply slides away. */
body.mobile-standalone.mobile-tabbar-feed-panel .spaces-panel .spaces-panel__context {
    transition: transform 0.28s ease;
}

body.mobile-standalone.mobile-tabbar-feed-panel.mobile-tabbar-scrolled .spaces-panel .spaces-panel__context {
    transform: translateY(-100%);
}

/* The header's drop shadow leaves with it: slid up by its own height, the shadow
   lands under the status-bar scrim (or off-screen in a browser). This stand-in
   fades in at the top edge — just below the status bar — so the posts still
   read as passing under something. Below the header (z 6) so it slides back
   over the stand-in on scroll-up. */
body.mobile-standalone.mobile-tabbar-feed-panel .spaces-panel .spaces-panel__body::after {
    content: "";
    position: absolute;
    top: var(--safe-top, 0px);
    left: 0;
    right: 0;
    height: 24px;
    background: linear-gradient(to bottom, rgba(31, 38, 44, 0.2), transparent);
    opacity: 0;
    transition: opacity 0.28s ease;
    pointer-events: none;
    z-index: 5;
}

body.mobile-standalone.mobile-tabbar-feed-panel.mobile-tabbar-scrolled .spaces-panel .spaces-panel__body::after {
    opacity: 1;
}

/* Conversation: the header is in the flow, so it collapses and the transcript
   grows into the room. Overflow is clipped ONLY while collapsed — the ⋮ menu
   opens outside the header's box and must not be cut off the rest of the time. */
body.mobile-standalone.mobile-tabbar-headerless .teams-panel .teams-conversation-view .teams-conversation__header {
    max-height: 160px;
    transition: max-height 0.28s ease, padding 0.28s ease, opacity 0.2s ease;
}

body.mobile-standalone.mobile-tabbar-headerless.mobile-tabbar-scrolled .teams-panel .teams-conversation-view .teams-conversation__header {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    opacity: 0;
    border-width: 0;
}

/* ── Floating feed controls follow the dock ─────────────────────────────── */
/* "N new posts" and back-to-top are anchored to the bottom of the feed, which is
   where the bar floats. While the bar is showing they sit above it (dock height
   + its offset + gap); when the bar slides away on scroll-down they drop back to
   the bottom edge, and rise again with it on scroll-up. */
body.mobile-standalone.mobile-tabbar-feed-panel .spaces-panel .space-feed__new,
body.mobile-standalone.mobile-tabbar-feed-panel .spaces-panel .space-feed__dock {
    bottom: calc(env(safe-area-inset-bottom, 0px) * 0.4 + 82px);
    transition: bottom 0.28s ease;
}

body.mobile-standalone.mobile-tabbar-feed-panel.mobile-tabbar-scrolled .spaces-panel .space-feed__new,
body.mobile-standalone.mobile-tabbar-feed-panel.mobile-tabbar-scrolled .spaces-panel .space-feed__dock {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}