/*
 * The floating glass bar (Julien, 15 October 2026), the Frame tab's drop-up menu, the phone's top bar without the hamburger and
 * Search's Discover view. Loaded last, so it wins the cascade; the bar is addressed by its id (#pk-tabbar), so no look or Kit
 * rule written for the old edge-docked bar reaches it.
 *
 *   the bar      a dark liquid-glass capsule 12 px in from the sides, floating over the home indicator: what scrolls under it is
 *                blurred and saturated, its rim is lit (brighter along the top, like the app icon's), a faint sheen sits inside
 *                and a soft shadow lifts it. It holds still while the page scrolls (no compacting) and the page ends above it.
 *                Data Saver, reduced transparency, forced colours or an engine without backdrop-filter: an opaque dark capsule.
 *   the current  a soft glass pill behind the icon, never a stroke under or across the label.
 *   the menu     the same glass, rising from the bar over the Frame tab.
 *   the top bar  the magnifier where the hamburger was (top left), the wordmark centred, Chat on the right.
 */

:root {
  --pk-glass-bar-h: 64px;
  --pk-glass-bar-side: 12px;
  /* Above the home indicator: the safe area less the indicator's own margin, never closer than 12 px to the edge. */
  --pk-glass-bar-bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) - 6px));
  --pk-glass-fill: linear-gradient(180deg, rgba(40, 34, 54, .5) 0%, rgba(14, 11, 21, .66) 100%);
  --pk-glass-solid: #15111d;
  --pk-glass-rim: linear-gradient(180deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .16) 32%, rgba(255, 255, 255, .06) 70%, rgba(255, 255, 255, .14) 100%);
  --pk-glass-shadow: 0 22px 44px -14px rgba(0, 0, 0, .72), 0 6px 16px -4px rgba(0, 0, 0, .42);
  --pk-glass-ease: cubic-bezier(.2, .9, .25, 1.12);
}

@media (max-width: 759px) {
  /* ---------------------------------------------------------------- the bar */
  html body.pk-obsidian #pk-tabbar {
    --bb-w: 1; --bb-k: 1; --bb-create: 1; --bb-avatar: 1; --bb-drop: 0px; --bb-p: 0;
    position: fixed;
    z-index: var(--pk-layer-nav, 40);
    left: max(var(--pk-glass-bar-side), env(safe-area-inset-left, 0px));
    right: max(var(--pk-glass-bar-side), env(safe-area-inset-right, 0px));
    bottom: var(--pk-glass-bar-bottom);
    top: auto;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) 64px repeat(2, minmax(0, 1fr));
    align-items: center;
    width: auto;
    max-width: 560px;
    height: var(--pk-glass-bar-h);
    min-height: var(--pk-glass-bar-h);
    margin: 0 auto;
    padding: 6px;
    border: 0;
    border-radius: 32px;
    background: var(--pk-glass-fill);
    -webkit-backdrop-filter: blur(24px) saturate(185%) brightness(1.06);
    backdrop-filter: blur(24px) saturate(185%) brightness(1.06);
    box-shadow: var(--pk-glass-shadow) !important;
    isolation: isolate;
    overflow: visible;
  }
  /* Scrolling down the capsule draws itself smaller (to 85 %, from its bottom centre) and keeps its icons only; scrolling up or
     reaching the top it grows back. --ng-p is bottom-bar.js's own progress (0 open … 1 small): it follows the hand while the
     hand is on the page (data-tb-scroll) and settles on a spring when it lifts (the compact class). Transform and opacity only. */
  html body.pk-obsidian #pk-tabbar {
    --ng-p: 0;
    transform: scale(calc(1 - .15 * var(--ng-p)));
    transform-origin: 50% 100%;
    transition: transform 560ms var(--pk-glass-ease);
  }
  html body.pk-obsidian #pk-tabbar.pk-bar-compact { --ng-p: 1; }
  html[data-tb-scroll] body.pk-obsidian #pk-tabbar { --ng-p: var(--tb-progress, 0); }
  html[data-tb-live] body.pk-obsidian #pk-tabbar { transition-duration: 90ms; }
  html body.pk-obsidian #pk-tabbar.pk-bar-compact,
  html[data-tb-scroll] body.pk-obsidian #pk-tabbar { border-radius: 32px; }
  /* The lit rim: a 1 px gradient border, bright along the top and the shoulders, a faint return along the bottom. */
  html body.pk-obsidian #pk-tabbar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    padding: 1px;
    border: 0;
    border-radius: inherit;
    background: var(--pk-glass-rim);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events: none;
    opacity: 1;
    transform: none;
  }
  /* The sheen: a soft light caught in the upper half, the way light sits in a glass lozenge. */
  html body.pk-obsidian #pk-tabbar::after {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: 0;
    display: block;
    border-radius: inherit;
    background:
      radial-gradient(120% 90% at 50% -30%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .05) 45%, transparent 70%),
      linear-gradient(180deg, rgba(255, 255, 255, .07) 0%, transparent 46%);
    pointer-events: none;
    opacity: 1;
    transform: none;
  }

  /* Five places on one line: the icon over a one-line label, 52 px tall. */
  html body.pk-obsidian #pk-tabbar > a {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 52px;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 26px;
    background: transparent;
    box-shadow: none;
    color: rgba(245, 242, 241, .74);
    text-decoration: none;
    transform: none;
    -webkit-tap-highlight-color: transparent;
  }
  html body.pk-obsidian #pk-tabbar > a:not(.pk-mobile-create) > :is(.pk-ico, .pk-mobile-avatar) {
    position: relative; z-index: 1; width: 24px; height: 24px; margin: 0;
    transform: translateY(calc(8px * var(--ng-p)));
    transition: transform 560ms var(--pk-glass-ease);
  }
  html body.pk-obsidian #pk-tabbar > a:not(.pk-mobile-create) > span:not(.pk-mobile-avatar) {
    position: relative;
    z-index: 1;
    display: block;
    max-width: 100%;
    height: 13px;
    overflow: hidden;
    font-size: 11px;
    font-weight: 600;
    line-height: 13px;
    letter-spacing: .01em;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* The words show at the top of a page, for a first look, and fade as it scrolls: the capsule rests on icons alone. */
    opacity: clamp(0, calc(1 - 1.8 * var(--ng-p)), 1);
    transform: translateY(calc(6px * var(--ng-p)));
    transition: opacity 240ms var(--pk-ease-quick, ease), transform 560ms var(--pk-glass-ease);
  }
  /* No stroke under or across a label, in any look. */
  html body.pk-obsidian #pk-tabbar > a::after,
  html body.pk-obsidian #pk-tabbar > a:not(.pk-mobile-create) > span::after { content: none; display: none; }

  /* The current place: its own ink and a soft glass pill behind the icon. */
  html body.pk-obsidian #pk-tabbar > a[aria-current="page"] { color: var(--pk-ink, #f5f2f1); background: transparent; }
  html body.pk-obsidian #pk-tabbar > a[aria-current="page"] > .pk-ico { color: var(--pk-accent-ink, #ffd27a); }
  html body.pk-obsidian #pk-tabbar > a:not(.pk-mobile-create)::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: calc(3px + 8px * var(--ng-p));
    left: 50%;
    width: 50px;
    height: 30px;
    margin-left: -25px;
    border-radius: 15px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .08));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 4px 10px -4px rgba(0, 0, 0, .5);
    opacity: 0;
    transform: scale(.82);
    transition: opacity var(--pk-dur-base, 200ms) var(--pk-ease-quick, ease), transform var(--pk-dur-base, 200ms) var(--pk-glass-ease), top 560ms var(--pk-glass-ease);
    pointer-events: none;
  }
  /* Markers are a small gold dot, never a number. */
  html body.pk-obsidian #pk-tabbar .pk-count-badge:not([hidden]) {
    position: absolute; z-index: 2; top: calc(6px + 8px * var(--ng-p)); left: calc(50% + 9px); right: auto;
    width: 8px; min-width: 0; height: 8px; padding: 0; border: 0; border-radius: 50%;
    background: #f5c451; box-shadow: 0 0 0 2px rgba(14, 11, 21, .7), 0 0 8px rgba(245, 196, 81, .55);
    color: transparent; font-size: 0; line-height: 0; overflow: hidden;
    transition: top 560ms var(--pk-glass-ease);
  }
  html body.pk-obsidian #pk-tabbar > a[aria-current="page"]:not(.pk-mobile-create)::before,
  html body.pk-obsidian #pk-tabbar > a.pk-mobile-profile[aria-expanded="true"]::before { opacity: 1; transform: none; }
  html body.pk-obsidian #pk-tabbar > a:not(.pk-mobile-create):active::before { opacity: .7; transform: scale(.94); }
  html body.pk-obsidian #pk-tabbar > a:focus-visible { outline: 2px solid var(--pk-focus, #ffd27a); outline-offset: -2px; }

  /* The Frame's face: the painted avatar in the icon's 24 px box; current or open, a thin lit ring. */
  html body.pk-obsidian #pk-tabbar .pk-mobile-avatar { border-radius: 50%; font-size: 12px; line-height: 24px; }
  html body.pk-obsidian #pk-tabbar .pk-mobile-profile[aria-current="page"] .pk-mobile-avatar::after,
  html body.pk-obsidian #pk-tabbar .pk-mobile-profile[aria-expanded="true"] .pk-mobile-avatar::after {
    content: ""; position: absolute; inset: -2px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .85); pointer-events: none;
  }

  /* The + keeps its painted dab (paint-stroke.js); it sits in the capsule, a 48 px round target on the bar's axis. */
  html body.pk-obsidian #pk-tabbar > .pk-mobile-create {
    justify-self: center;
    align-self: center;
    width: 52px;
    height: 52px;
    min-width: 48px;
    min-height: 48px;
    border-radius: 50%;
    color: #fff;
    transform: none;
  }
  html body.pk-obsidian #pk-tabbar > .pk-mobile-create:active { transform: scale(.94); }

  /* The page ends above the capsule: its last item is never under it. */
  html body.pk-obsidian:has(#pk-tabbar) .pk-stage { padding-bottom: calc(var(--pk-glass-bar-h) + var(--pk-glass-bar-bottom) + 20px); }
  html body.pk-obsidian:has(#pk-tabbar) .pk-foot { margin-bottom: calc(var(--pk-glass-bar-h) + var(--pk-glass-bar-bottom) + 12px); }

  /* ---------------------------------------------------------------- the Frame menu */
  html body.pk-obsidian #pk-frame-menu {
    position: fixed;
    z-index: calc(var(--pk-layer-nav, 40) + 1);
    right: max(var(--pk-glass-bar-side), env(safe-area-inset-right, 0px));
    bottom: calc(var(--pk-glass-bar-bottom) + var(--pk-glass-bar-h) + 10px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: min(244px, calc(100vw - 2 * var(--pk-glass-bar-side)));
    max-height: calc(100dvh - var(--pk-glass-bar-h) - var(--pk-glass-bar-bottom) - 96px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px;
    border-radius: 24px;
    background: var(--pk-glass-fill);
    -webkit-backdrop-filter: blur(26px) saturate(185%) brightness(1.04);
    backdrop-filter: blur(26px) saturate(185%) brightness(1.04);
    box-shadow: var(--pk-glass-shadow), inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(255, 255, 255, .09);
    transform-origin: calc(100% - 36px) calc(100% + 40px);
    animation: pk-frame-menu-rise var(--pk-dur-base, 200ms) var(--pk-glass-ease) both;
  }
  html body.pk-obsidian #pk-frame-menu[hidden] { display: none; }
  html body.pk-obsidian #pk-frame-menu > :is(a, button) {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    margin: 0;
    padding: 0 14px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: var(--pk-ink, #f5f2f1);
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    text-decoration: none;
  }
  html body.pk-obsidian #pk-frame-menu > [hidden] { display: none; }
  html body.pk-obsidian #pk-frame-menu > :is(a, button):focus-visible { outline: 2px solid var(--pk-focus, #ffd27a); outline-offset: -2px; background: rgba(255, 255, 255, .08); }
  html body.pk-obsidian #pk-frame-menu > :is(a, button):active { background: rgba(255, 255, 255, .1); }
  html body.pk-obsidian #pk-frame-menu > a[aria-current="page"] { background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .07)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); }
  html body.pk-obsidian #pk-frame-menu > .pk-frame-menu-self { font-weight: 700; }
  html body.pk-obsidian #pk-frame-menu > .pk-frame-menu-brand { margin-top: 4px; color: var(--pk-muted, #b9b2bd); font-weight: 500; background: linear-gradient(rgba(255, 255, 255, .08), rgba(255, 255, 255, .08)) top / calc(100% - 32px) 1px no-repeat; }
  html body.pk-obsidian #pk-frame-menu > .pk-frame-menu-brand { font-size: 14px; }
  html body.pk-obsidian #pk-frame-menu > .pk-frame-menu-brand img { width: 20px; height: 20px; border-radius: 6px; }
  html body.pk-obsidian #pk-frame-menu > .pk-frame-menu-brand strong { color: var(--pk-ink, #f5f2f1); }
  html:not(.pk-app) body.pk-obsidian #pk-frame-menu > .pk-app-only { display: none; }

  /* ---------------------------------------------------------------- the top bar: magnifier left, wordmark centred, Chat right */
  html body.pk-obsidian .pk-top > .pk-search-open {
    position: absolute;
    top: 8px;
    left: max(6px, env(safe-area-inset-left, 0px));
    right: auto;
    margin: 0;
    order: -1;
  }
  html body.pk-obsidian .pk-top > :is(.pk-header-inbox, .pk-header-chat, .pk-join-menu) { margin-left: auto; }
  html body.pk-obsidian .pk-top > .pk-header-inbox ~ .pk-header-chat { margin-left: 4px; }
  html body.pk-obsidian .pk-top > .pk-wordmark {
    position: absolute;
    top: 0;
    left: 50%;
    right: auto;
    width: max-content;
    margin: 0;
    transform: translateX(-50%);
  }
  html.pk-bars-compact body.pk-obsidian .pk-top > .pk-wordmark { transform: translateX(-50%) translateY(var(--tb-drop, 6px)); }
  /* No drawer on a phone: the rail is the desktop's sidebar only. */
  html body.pk-obsidian .pk-frame > .pk-rail { display: none; }
}

/* Every other way the glass cannot be: an opaque dark capsule and menu. */
@media (max-width: 759px) {
  html[data-save="1"] body.pk-obsidian :is(#pk-tabbar, #pk-frame-menu),
  html.pk-save-data body.pk-obsidian :is(#pk-tabbar, #pk-frame-menu) { background: var(--pk-glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (max-width: 759px) and (prefers-reduced-transparency: reduce) {
  html body.pk-obsidian :is(#pk-tabbar, #pk-frame-menu) { background: var(--pk-glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (max-width: 759px) { html body.pk-obsidian :is(#pk-tabbar, #pk-frame-menu) { background: var(--pk-glass-solid); } }
}
@media (max-width: 759px) and (forced-colors: active) {
  html body.pk-obsidian :is(#pk-tabbar, #pk-frame-menu) { border: 1px solid CanvasText; background: Canvas; -webkit-backdrop-filter: none; backdrop-filter: none; }
  html body.pk-obsidian #pk-tabbar::before, html body.pk-obsidian #pk-tabbar::after { content: none; }
  html body.pk-obsidian #pk-tabbar > a[aria-current="page"] { outline: 2px solid Highlight; outline-offset: -4px; }
}
/* Still: the bar keeps its size and words, the menu appears, nothing rises or springs. */
@media (prefers-reduced-motion: reduce) {
  html body.pk-obsidian #pk-tabbar, html body.pk-obsidian #pk-tabbar.pk-bar-compact, html[data-tb-scroll] body.pk-obsidian #pk-tabbar { --ng-p: 0; transition: none; }
  html body.pk-obsidian #pk-frame-menu { animation: none; }
  html body.pk-obsidian #pk-tabbar > a::before { transition: none; }
}
html[data-save="1"] body.pk-obsidian #pk-frame-menu { animation: none; }
html[data-save="1"] body.pk-obsidian #pk-tabbar, html[data-save="1"] body.pk-obsidian #pk-tabbar * { transition: none; }
html[data-save="1"] body.pk-obsidian #pk-tabbar > a::before { transition: none; }

@keyframes pk-frame-menu-rise {
  from { opacity: 0; transform: translateY(10px) scale(.94); }
  to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- Search's Discover view (search-suggest.js)
   New faces as a row of painted frames, Clubs your people are in, today's Same Time, recent searches (this device only). */
.pk-sx-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
#suggest-results .pk-sx-strip {
  display: flex;
  gap: 4px;
  margin: 0 -4px 6px;
  padding: 2px 4px 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
#suggest-results .pk-sx-strip::-webkit-scrollbar { display: none; }
#suggest-results .pk-sx-strip > .pk-suggest-row.pk-sx-person {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 84px;
  min-height: 44px;
  padding: 6px 2px;
  border-radius: 18px;
  text-align: center;
  scroll-snap-align: start;
}
#suggest-results .pk-sx-person .pk-sx-face { width: 64px; height: 64px; }
#suggest-results .pk-sx-person strong { display: block; max-width: 80px; overflow: hidden; font-size: 13px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
#suggest-results .pk-sx-person small { display: -webkit-box; max-width: 80px; overflow: hidden; color: var(--pk-muted, #b9b2bd); font-size: 11px; line-height: 1.25; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pk-sx-face { position: relative; display: inline-block; flex: none; width: 40px; height: 40px; }
.pk-sx-face > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pk-sx-face .pk-sx-a { stroke: var(--pa, #ffb43f); }
.pk-sx-face .pk-sx-b { stroke: var(--pb, #ff4b3a); }
.pk-sx-face .pk-sx-c { stroke: var(--pc, #ffb43f); opacity: .85; }
.pk-sx-face .pk-sx-ground { fill: var(--pd, #3a1830); }
.pk-sx-face .pk-sx-glow { fill: var(--pb, #ff4b3a); opacity: .55; }
.pk-sx-face .pk-sx-initial { fill: #fff8f0; font: 700 26px/1 Commissioner, system-ui, sans-serif; }
#suggest-results .pk-sx-clock { display: inline-flex; flex: none; }
#suggest-results .pk-sx-clock > .pk-sx-face { width: 34px; height: 34px; }
#suggest-results .pk-sx-clock > .pk-sx-face + .pk-sx-face { margin-left: -12px; }
#suggest-results .pk-sx-now { margin-left: 6px; color: var(--pk-accent-ink, #ffd27a); font-weight: 700; }
@media (hover: hover) {
  #suggest-results .pk-sx-strip > .pk-suggest-row.pk-sx-person:hover { background: rgba(255, 255, 255, .06); }
}
#suggest-results .pk-sx-strip > .pk-suggest-row.pk-sx-person { color: var(--pk-ink, #f5f2f1); text-decoration: none; -webkit-tap-highlight-color: transparent; }
#suggest-results .pk-sx-strip > .pk-suggest-row.pk-sx-person.is-active { background: rgba(255, 255, 255, .08); outline: none; }
#suggest-results .pk-sx-strip > .pk-suggest-row.pk-sx-person:focus-visible { outline: 2px solid var(--pk-focus, #ffd27a); outline-offset: -2px; }
#suggest-results .pk-sx-person strong { color: var(--pk-ink, #f5f2f1); font-weight: 700; }
#suggest-results .pk-sx-person .pk-sx-face { transition: transform var(--pk-dur-base, 200ms) var(--pk-glass-ease); }
#suggest-results .pk-sx-person:active .pk-sx-face { transform: scale(.95); }
#suggest-results .pk-suggest-text mark { margin: 0; padding: 0; border-radius: 0; background: transparent; color: var(--pk-accent-ink, #ffd27a); }
@media (prefers-reduced-motion: reduce) { #suggest-results .pk-sx-person .pk-sx-face { transition: none; } }