/* ═══════════════════════════════════════════════════════
   yAp — Styles
   ═══════════════════════════════════════════════════════ */

/* ── Design Tokens ────────────────────────────────────── */
:root {
  /* Typography */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;

  /* User colors */
  --color-sooim:  #B8D8FF;
  --color-chloe:  #DEC0F8;
  --color-maria:  #FFDEB8;
  --color-lime:   #DFFFB8;
  --user-glow-1:  #B8D8FF;
  --user-glow-2:  #DEC0F8;
  --user-glow-3:  #FFDEB8;
  --user-glow-4:  #DFFFB8;

  /* Waveform */
  --color-wave-active:  #F97878;
  --color-wave-stopped: #8A8A8E;

  /* UI surfaces */
  --bg-gradient: linear-gradient(148deg, #fdfbff 0%, #fff9f5 40%, #f6f8ff 80%, #fdfbff 100%);
  --bg-image: url('https://www.figma.com/api/mcp/asset/8d3d4be8-b608-4198-80ab-f4b09edd4bda');
  --screen-background:
    radial-gradient(circle at top, rgba(255, 233, 205, 0.56), transparent 35%),
    radial-gradient(circle at bottom left, rgba(191, 221, 255, 0.44), transparent 36%),
    linear-gradient(148deg, #fdfbff 0%, #fff9f5 40%, #f6f8ff 80%, #fdfbff 100%);
  --glass-bg:    rgba(255, 255, 255, 0.68);
  --glass-border: rgba(255, 255, 255, 0.88);
  --surface:     rgba(255, 255, 255, 0.92);

  /* Text */
  --text-primary:   #111111;
  --text-secondary: #6b6b6b;
  --text-tertiary:  #aaaaaa;

  /* Radius */
  --r-sm:  0.625rem;
  --r-md:  1.125rem;
  --r-lg:  1.5rem;
  --r-xl:  2rem;
  --r-full: 624.938rem;

  /* Shadows */
  --shadow-card: 0 0.125rem 1.25rem rgba(0, 0, 0, 0.06), 0 0 0 0.062rem rgba(255,255,255,0.7) inset;
  --shadow-sheet: 0 -0.5rem 3rem rgba(0, 0, 0, 0.12);
  --shadow-mic: 0 0.5rem 2rem rgba(0, 0, 0, 0.10), 0 0.125rem 0.5rem rgba(0,0,0,0.06);
  --shadow-glass-btn:
    inset 0 0.062rem 0 rgba(255,255,255,0.96),
    inset 0 -0.625rem 1.375rem rgba(255,255,255,0.22),
    0 0.625rem 1.75rem rgba(220, 221, 230, 0.24);
  --glass-btn-bg:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,0.86) 0%, rgba(255,255,255,0.34) 34%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(247,247,247,0.62) 100%);

  /* Transitions */
  --t-fast:   150ms ease;
  --t-normal: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-spring: 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-slide:  360ms cubic-bezier(0.4, 0, 0.2, 1);
  --app-height: 100vh;
  --layout-height: 100vh;
  --keyboard-inset: 0rem;
  --visual-viewport-bottom-inset: 0rem;
  --compose-sheet-offset: 3.5rem;
  --chat-footer-reserved: calc(var(--mic-size, 6.5rem) + 3.375rem + env(safe-area-inset-bottom, 0rem) + var(--visual-viewport-bottom-inset));
  --footer-rec-control-gap: 0.875rem;
  --glass-nav-secondary-size: 3.375rem;
  --glass-nav-icon-primary: clamp(2.125rem, 12.25vw, 2.75rem);
  --glass-nav-icon-secondary: clamp(1.1875rem, 5.75vw, 1.4375rem);
  /* Pixel stroke for stroked glyphs inside glass nav buttons (consistent across viewBoxes / screens) */
  --glass-nav-icon-stroke-width: 1.6px;
  /* Soft outer glow (slightly lighter than the old create-group-only shadow) */
  --glass-nav-drop-shadow: 0 0.0625rem 0.375rem rgba(0, 0, 0, 0.065);
}

@supports (height: 100svh) {
  :root {
    --app-height: 100svh;
    --layout-height: 100svh;
  }
}

/* ── Reset ────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  height: 100%;
  background: var(--screen-background);
  /* Keep base UI comfortably readable on iPhone/PWA (rem drives most sizing). */
  font-size: clamp(17px, 3vw, 20px);
}

body {
  height: 100%;
  overflow: hidden;
  background: var(--screen-background);
}

body {
  font-family: var(--font);
  font-size: 1rem;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.keyboard-open .screen,
body.keyboard-open .entry-screen,
body.keyboard-open .entry-input {
  transition: none !important;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font);
  outline: none;
  -webkit-appearance: none;
}

/* ── Glass Navigation Button (Consolidated) ────── */
.glassNavButton {
  width: 2.625rem;
  height: 2.625rem;
  border-radius: var(--r-full);
  background: var(--glass-btn-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  backdrop-filter: blur(1.5rem) saturate(150%);
  -webkit-backdrop-filter: blur(1.5rem) saturate(150%);
  box-shadow: var(--shadow-glass-btn);
  filter: drop-shadow(var(--glass-nav-drop-shadow));
  transition: transform var(--t-fast), opacity var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast);
  position: relative;
  overflow: hidden;
  color: rgba(17, 17, 17, 0.92);
}

/* Chat footer + recording sheet: center control is primary (--mic-size); sides use --glass-nav-secondary-size */
.glassNavButton--primary {
  width: var(--mic-size);
  height: var(--mic-size);
}

.glassNavButton--secondary {
  width: var(--glass-nav-secondary-size);
  height: var(--glass-nav-secondary-size);
}

/* Icons: size by primary vs secondary (or default compact = secondary icon); fill/stroke via currentColor in markup */
.glassNavButton svg {
  display: block;
  flex-shrink: 0;
  pointer-events: none;
}

.glassNavButton svg :is(path, circle, line, polyline)[stroke],
.glassNavButton svg rect[stroke] {
  stroke-width: var(--glass-nav-icon-stroke-width);
  vector-effect: non-scaling-stroke;
}

.glassNavButton--primary > svg {
  width: var(--glass-nav-icon-primary);
  height: var(--glass-nav-icon-primary);
}

.glassNavButton--secondary > svg,
.glassNavButton:not(.glassNavButton--primary):not(.nav-back-btn) > svg {
  width: var(--glass-nav-icon-secondary);
  height: var(--glass-nav-icon-secondary);
}

/* Unified back control (chevron + chrome); same look as group settings */
.glassNavButton.nav-back-btn {
  color: #111111;
}

.glassNavButton.nav-back-btn > svg {
  width: 0.562rem;
  height: 0.938rem;
  color: #111111;
}

.glassNavButton.nav-back-btn svg path {
  stroke: #111111;
  fill: none;
}


/* ── App Shell ────────────────────────────────────────── */
#app {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--app-height);
  background: transparent;
  overflow: hidden;
}

/* ── Screens ──────────────────────────────────────────── */
.screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transform: none;
  transition: none;
  isolation: isolate;
  will-change: transform, opacity;
  backface-visibility: hidden;
  contain: layout paint;
  scroll-padding-bottom: calc(var(--keyboard-inset) + 1.5rem);
}

.screen.active {
  opacity: 1;
  pointer-events: all;
  transform: none;
  z-index: 2;
}

/* Profile is a full-width sheet above the chats list during push / swipe */
#screen-profile.active {
  z-index: 3;
}

/* Single chat pushes over the chats list (iOS navigation stack) */
#screen-chat.active {
  z-index: 3;
}

#screen-create-group.active,
#screen-contacts-hub.active,
#recording-overlay.active,
#analysis-overlay.active {
  z-index: 8;
}

/* Utility */
.hidden { display: none !important; }

/* ═══════════════════════════════════════════════════════
   SCREEN: SPLASH
   ═══════════════════════════════════════════════════════ */
#screen-splash {
  display: grid;
  place-items: center;
}

.splash-content {
  text-align: center;
  user-select: none;
}

.splash-logo {
  display: block;
  width: 10.75rem;
  max-width: 100%;
  height: auto;
  margin-bottom: 0.875rem;
}

.splash-tagline {
  font-size: 1.062rem;
  font-weight: 400;
  color: var(--text-secondary);
  letter-spacing: -0.013rem;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════
   SCREEN: ENTRY FLOW
   ═══════════════════════════════════════════════════════ */
#screen-welcome,
#screen-auth-phone,
#screen-auth-verify,
#screen-profile-setup,
#screen-create-group,
#screen-contacts-hub,
#screen-profile,
#screen-group-settings {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--screen-background);
}

/* iOS-style interactive back: previous screen peeks under the current while edge-swiping */
.screen.ios-stack-interactive-under {
  opacity: 1 !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.screen.is-ios-stack-dragging {
  z-index: 4;
}

#screen-auth-phone,
#screen-auth-verify,
#screen-profile-setup,
#screen-welcome {
  overflow: hidden;
}

.entry-screen {
  min-height: 100%;
  min-height: var(--layout-height);
  width: 100%;
  padding:
    max(1.75rem, calc(env(safe-area-inset-top, 0rem) + 1.125rem))
    clamp(1.25rem, 5vw, 1.75rem)
    max(2rem, calc(env(safe-area-inset-bottom, 0rem) + 1.5rem));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  box-sizing: border-box;
  scroll-padding-bottom: calc(var(--keyboard-inset) + 1.5rem);
}

.entry-screen--form {
  justify-content: flex-start;
  gap: clamp(1rem, 2.8vh, 1.75rem);
}

.entry-screen__topbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 3.625rem;
  position: relative;
  z-index: 2;
}

.entry-screen__hero {
  padding-top: clamp(1.25rem, 6vh, 3.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  align-items: flex-start;
}

#screen-auth-phone .entry-screen__hero {
  padding-top: 0;
}

#screen-auth-phone .entry-screen,
#screen-auth-verify .entry-screen,
#screen-profile-setup .entry-screen {
  min-height: var(--layout-height);
  height: var(--layout-height);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  justify-content: flex-start;
  gap: clamp(1rem, 2.6vh, 1.5rem);
  padding:
    max(1.125rem, calc(env(safe-area-inset-top, 0rem) + 0.75rem))
    clamp(1rem, 4.5vw, 1.75rem)
    max(1.125rem, calc(env(safe-area-inset-bottom, 0rem) + 1.125rem));
}

#screen-auth-phone .entry-screen__topbar,
#screen-auth-phone .entry-screen__hero,
#screen-auth-phone .entry-form,
#screen-auth-verify .entry-screen__hero,
#screen-auth-verify .entry-form,
#screen-profile-setup .entry-screen__topbar,
#screen-profile-setup .entry-screen__hero,
#screen-profile-setup .entry-form {
  width: min(100%, 28rem);
  margin-inline: auto;
}

#screen-auth-phone .entry-screen__hero,
#screen-auth-verify .entry-screen__hero,
#screen-profile-setup .entry-screen__hero {
  padding-top: clamp(0.25rem, 1.5vh, 1.125rem);
  gap: 0.625rem;
}

#screen-auth-phone .entry-screen__title,
#screen-auth-verify .entry-screen__title,
#screen-profile-setup .entry-screen__title {
  width: 100%;
  max-width: none;
  font-size: clamp(2rem, 7vw, 2.8rem);
}

#screen-auth-phone .entry-screen__body,
#screen-auth-verify .entry-screen__body,
#screen-profile-setup .entry-screen__body {
  width: 100%;
  max-width: none;
}

.entry-screen__logo {
  width: clamp(8.25rem, 34vw, 10.75rem);
  height: auto;
}

.entry-screen__title {
  width: min(100%, 11ch);
  max-width: 11ch;
  font-size: clamp(2.1rem, 8vw, 3.5rem);
  line-height: 0.95;
  letter-spacing: -0.06em;
  font-weight: 700;
  text-align: left;
}

.entry-screen__body,
.entry-screen__meta {
  width: min(100%, 34ch);
  max-width: 34ch;
  font-size: 0.98rem;
  line-height: 1.45;
  color: rgba(17, 17, 17, 0.68);
  text-align: left;
}

.entry-screen__actions {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.entry-form {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: clamp(1.125rem, 4vw, 1.5rem);
  border-radius: 1.75rem;
  background: rgba(255, 255, 255, 0.74);
  border: 0.062rem solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0.875rem 3rem rgba(76, 76, 92, 0.08);
  backdrop-filter: blur(1.25rem);
  -webkit-backdrop-filter: blur(1.25rem);
}

#screen-auth-phone .entry-form,
#screen-auth-verify .entry-form,
#screen-profile-setup .entry-form {
  flex: 0 0 auto;
}

.entry-label {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: rgba(17, 17, 17, 0.8);
}

.entry-label__optional {
  font-weight: 500;
  color: rgba(17, 17, 17, 0.45);
}

.entry-input {
  width: 100%;
  min-height: 3.375rem;
  border-radius: 1.125rem;
  border: 0.062rem solid rgba(17, 17, 17, 0.08);
  background: rgba(255, 255, 255, 0.92);
  padding: 0 1rem;
  font: inherit;
  color: var(--text-primary);
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}

.entry-input:focus {
  border-color: rgba(83, 111, 255, 0.42);
  box-shadow: 0 0 0 0.25rem rgba(83, 111, 255, 0.1);
}

#screen-profile-setup .entry-input--profile-name {
  border-color: rgba(17, 17, 17, 0.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.9));
  box-shadow:
    inset 0 0.062rem 0 rgba(255,255,255,0.98),
    0 0.625rem 1.625rem rgba(184, 216, 255, 0.16);
}

#screen-profile-setup .entry-input--profile-name::placeholder {
  color: rgba(17, 17, 17, 0.32);
}

#screen-profile-setup .entry-input--profile-name:focus {
  border-color: rgba(17, 17, 17, 0.2);
  box-shadow:
    inset 0 0.062rem 0 rgba(255,255,255,0.98),
    0 0 0 0.25rem rgba(184, 216, 255, 0.22),
    0 0.875rem 1.875rem rgba(184, 216, 255, 0.18);
}

#input-auth-phone:focus,
#input-auth-phone:focus-visible {
  border-color: #000;
  box-shadow: none;
}

.entry-input--code {
  text-align: center;
  font-size: 1.4rem;
  letter-spacing: 0.32em;
  padding-left: calc(1rem + 0.32em);
}

.entry-input--code:focus,
.entry-input--code:focus-visible {
  border-color: #000;
  box-shadow: none;
}

@media (max-width: 430px) {
  .entry-screen {
    padding-inline: 1rem;
  }

  .entry-form {
    padding: 1rem;
    border-radius: 1.5rem;
  }

  .entry-input,
  .entry-btn {
    min-height: 3.25rem;
  }

  .entry-input--code {
    font-size: 1.2rem;
    letter-spacing: 0.24em;
    padding-left: calc(1rem + 0.24em);
  }
}

.entry-btn {
  min-height: 3.375rem;
  border-radius: 62.438rem;
  padding: 0 1.125rem;
  font: inherit;
  font-weight: 700;
  letter-spacing: -0.02em;
  transition: transform var(--t-fast), opacity var(--t-fast), box-shadow var(--t-fast);
}

.entry-btn:active {
  transform: scale(0.985);
}

.entry-btn[disabled] {
  opacity: 0.55;
  cursor: default;
}

.entry-btn--primary {
  color: #fff;
  background: linear-gradient(180deg, #161616 0%, #2a2a2a 100%);
  box-shadow: 0 0.75rem 1.625rem rgba(17, 17, 17, 0.18);
}

#btn-send-code,
#btn-verify-code {
  box-shadow: none;
}

.entry-btn--secondary {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.8);
  border: 0.062rem solid rgba(17, 17, 17, 0.08);
}


.entry-feedback {
  min-height: 1.25rem;
  font-size: 0.9rem;
  line-height: 1.35;
  color: rgba(17, 17, 17, 0.58);
  white-space: pre-line;
}

.entry-feedback:empty {
  display: none;
}

.entry-feedback[data-tone='error'] {
  color: #b42318;
}

.entry-feedback[data-tone='success'] {
  color: #067647;
}

.entry-member-builder {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.375rem;
}

.entry-member-builder__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
}

.entry-member-builder__field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.entry-member-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  min-height: 0;
}

.entry-member-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  border-radius: 1.125rem;
  background: rgba(255, 255, 255, 0.8);
  border: 0.062rem solid rgba(17, 17, 17, 0.06);
}

.entry-member-pill__meta {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.entry-member-pill__name {
  font-size: 0.96rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.entry-member-pill__phone {
  font-size: 0.86rem;
  color: rgba(17, 17, 17, 0.55);
}

.entry-member-pill__remove {
  min-width: 2.25rem;
  min-height: 2.25rem;
  border-radius: 62.438rem;
  background: rgba(17, 17, 17, 0.06);
  color: rgba(17, 17, 17, 0.62);
  font-size: 1rem;
  font-weight: 700;
}

.entry-member-empty {
  padding: 0.875rem 0 0.25rem;
  font-size: 0.92rem;
  line-height: 1.4;
  color: rgba(17, 17, 17, 0.48);
}

.settings-header {
  display: flex;
  justify-content: flex-start;
}

.settings-avatar-card,
.settings-list__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  border-radius: 1.125rem;
  background: rgba(255, 255, 255, 0.82);
  border: 0.062rem solid rgba(17, 17, 17, 0.06);
}

.settings-avatar {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.08);
  background-size: cover;
  background-position: center;
}

.settings-avatar__meta,
.settings-list__meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.settings-avatar__name,
.settings-list__title {
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.settings-avatar__sub,
.settings-list__sub {
  font-size: 0.86rem;
  color: rgba(17, 17, 17, 0.55);
}

.settings-section {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.settings-member-builder {
  margin-top: 0;
}

.settings-section__title {
  font-size: 0.88rem;
  font-weight: 700;
  color: rgba(17, 17, 17, 0.7);
  letter-spacing: -0.02em;
}

.settings-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.settings-list__badge {
  margin-left: auto;
  padding: 0.375rem 0.625rem;
  border-radius: 62.438rem;
  background: rgba(17, 17, 17, 0.06);
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(17, 17, 17, 0.64);
}

.settings-list__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.settings-list__action {
  min-height: 2.125rem;
  padding: 0 0.75rem;
  border-radius: 62.438rem;
  background: rgba(17, 17, 17, 0.06);
  border: 0.062rem solid rgba(17, 17, 17, 0.08);
  color: rgba(17, 17, 17, 0.76);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
}

.settings-list__empty {
  padding: 0.75rem 0 0.25rem;
  font-size: 0.9rem;
  color: rgba(17, 17, 17, 0.48);
}

.chats-search {
  position: relative;
  padding: 0 var(--screen-gutter) 0.875rem;
  margin: 0 0 -0.875rem 0;
  opacity: 0;
  height: 0;
  pointer-events: none;
  transition:
    opacity 220ms ease,
    margin 320ms cubic-bezier(0.32, 0.72, 0, 1),
    height 320ms cubic-bezier(0.32, 0.72, 0, 1);
  overflow: hidden;
}

.chats-search.is-open {
  opacity: 1;
  height: auto;
  margin: 0;
  pointer-events: auto;
}

.chats-search__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.chats-search__field {
  flex: 1 1 auto;
  min-height: 2.625rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.875rem;
  border-radius: 62.438rem;
  background: rgba(255, 255, 255, 0.82);
  border: 0.062rem solid rgba(255, 255, 255, 0.88);
  box-shadow: none;
  backdrop-filter: blur(1.625rem);
  -webkit-backdrop-filter: blur(1.625rem);
  transition: box-shadow var(--t-fast), transform var(--t-fast), opacity var(--t-fast);
}

.chats-search__field:focus-within {
  box-shadow: none;
}

.chats-search__icon {
  color: rgba(17, 17, 17, 0.42);
  flex-shrink: 0;
}

.chats-search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.98rem;
  color: var(--text-primary);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.chats-search__input::placeholder {
  color: rgba(17, 17, 17, 0.42);
}

.chats-search__input::-webkit-search-decoration,
.chats-search__input::-webkit-search-cancel-button,
.chats-search__input::-webkit-search-results-button,
.chats-search__input::-webkit-search-results-decoration {
  display: none;
  -webkit-appearance: none;
}

.chats-search__input::-ms-clear,
.chats-search__input::-ms-reveal {
  display: none;
}

.chats-search__close {
  color: #111111;
  display: inline-flex;
  flex: 0 0 auto;
  -webkit-backdrop-filter: blur(1.5rem) saturate(150%);
  box-shadow: var(--shadow-glass-btn);
  border: 0.062rem solid rgba(255,255,255,0.72);
  transition: transform var(--t-fast), opacity var(--t-fast), box-shadow var(--t-fast);
}

.chats-search__close:active {
  transform: scale(0.95);
}

.chats-search__close svg {
  width: 1.125rem;
  height: 1.125rem;
}

.contacts-hub-intro {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.contacts-hub-intro__title {
  font-size: 1.75rem;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #111111;
}

.contacts-hub-intro__body {
  max-width: 32ch;
  font-size: 0.938rem;
  line-height: 1.4;
  color: rgba(60, 60, 67, 0.74);
}

.contacts-hub-shell {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.contacts-hub-list {
  display: flex;
  flex-direction: column;
  background: transparent;
}

.contacts-hub-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 4.375rem;
  padding: 0.625rem 0.5rem;
  background: transparent;
  border-bottom: 0.031rem solid rgba(60, 60, 67, 0.18);
}

.contacts-hub-row__avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: linear-gradient(180deg, #a9b9e8 0%, #7e8cc6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.08rem;
  font-weight: 600;
  color: #ffffff;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.contacts-hub-row__meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.contacts-hub-row__name {
  font-size: 1.062rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.contacts-hub-row__sub {
  font-size: 0.875rem;
  color: rgba(60, 60, 67, 0.7);
}

.contacts-hub-row__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.contacts-hub-row__status {
  padding: 0;
  border-radius: 62.438rem;
  background: transparent;
  font-size: 0.812rem;
  font-weight: 500;
  color: rgba(60, 60, 67, 0.6);
}

.contacts-hub-row__add {
  min-height: 1.875rem;
  min-width: 3.375rem;
  padding: 0 0.75rem;
  border-radius: 62.438rem;
  background: #f2f2f7;
  border: 0;
  color: #007aff;
  font: inherit;
  font-size: 0.938rem;
  font-weight: 600;
}

.contacts-hub-row__add[disabled] {
  color: rgba(60, 60, 67, 0.42);
}

.contacts-search-bar {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 3.375rem;
  padding: 0 1.125rem;
  border-radius: 1.75rem;
  background: rgba(255,255,255,0.94);
  box-shadow:
    inset 0 0.062rem 0 rgba(255,255,255,0.96),
    0 0.625rem 1.5rem rgba(234, 234, 240, 0.28);
  color: rgba(60, 60, 67, 0.56);
}

.contacts-search-bar__icon,
.contacts-search-bar__mic {
  flex-shrink: 0;
}

.contacts-search-bar__label {
  font-size: 1.062rem;
}

@media (max-width: 420px) {
  .entry-member-builder__row {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════
   SCREEN: CONTACTS PERMISSION
   ═══════════════════════════════════════════════════════ */
#screen-contacts-permission {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.perm-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  filter: blur(0.25rem) brightness(0.92);
  padding: 1.25rem 1.25rem 0;
}

.perm-chats-ghost {
  padding-top: 3.75rem;
}

.perm-ghost-header {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--text-primary);
  padding: 0 0.25rem;
  margin-bottom: 1.25rem;
  letter-spacing: -0.031rem;
}

.perm-ghost-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.perm-ghost-card {
  height: 8.75rem;
  border-radius: var(--r-lg);
  background: var(--glass-bg);
  backdrop-filter: blur(1.25rem);
  -webkit-backdrop-filter: blur(1.25rem);
  border: 0.062rem solid var(--glass-border);
}

.sheet-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.22);
}

.sheet {
  position: relative;
  z-index: 2;
  width: 100%;
  background: white;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 1rem 1.5rem 3rem;
  box-shadow: var(--shadow-sheet);
  animation: sheetUp 0.4s cubic-bezier(0.34, 1.1, 0.64, 1) forwards;
}

@keyframes sheetUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.sheet-handle {
  width: 2.625rem;
  height: 0.25rem;
  border-radius: 0.125rem;
  background: #e0e0e0;
  margin: 0 auto 1.5rem;
}

.perm-app-badge {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--r-md);
  background: var(--text-primary);
  color: white;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.062rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
}

.perm-heading {
  font-size: 1.062rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.45;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.perm-sub {
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: 1.75rem;
  line-height: 1.4;
}

.perm-actions {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.perm-btn {
  width: 100%;
  padding: 1rem;
  border-radius: var(--r-md);
  font-size: 1rem;
  font-weight: 500;
  transition: opacity var(--t-fast), transform var(--t-fast);
}

.perm-btn:active {
  opacity: 0.75;
  transform: scale(0.98);
}

.perm-btn--primary {
  background: #007AFF;
  color: white;
}

.perm-btn--secondary {
  background: rgba(0, 122, 255, 0.1);
  color: #007AFF;
}

.perm-btn--deny {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════
   SCREEN: CHATS LIST
   ═══════════════════════════════════════════════════════ */
#screen-chats {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  position: relative;
  background: var(--screen-background);
}

/* Same chrome layering as #screen-chat .chat-header: overlay + scroll under for backdrop blur */
#screen-chats .top-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--chat-chrome-gradient);
}

.chats-main {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chats-scroll {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding-top: var(--chats-header-reserved);
  scroll-padding-top: var(--chats-header-reserved);
}

#screen-chats .chats-scroll .chats-grid {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
}

.top-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: max(0.75rem, calc(env(safe-area-inset-top) + 0.25rem)) 1rem 0.625rem;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 4;
  isolation: isolate;
  background: var(--chat-chrome-gradient);
  border-bottom: none;
}

.top-bar__title {
  font-size: clamp(2rem, 7vw, 2.45rem);
  font-weight: 700;
  letter-spacing: -0.06em;
  color: var(--text-primary);
  line-height: 0.96;
}

.top-bar__actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 0.75rem;
  padding: 0.312rem;
  border-radius: 62.438rem;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.icon-btn {
  color: var(--text-secondary);
  border: 0.062rem solid rgba(255,255,255,0.72);
  transition: transform var(--t-fast), opacity var(--t-fast), box-shadow var(--t-fast);
  position: relative;
  overflow: hidden;
}

.icon-btn::before,
.back-btn::before,
.mic-btn::before {
  content: "";
  position: absolute;
  inset: 0.062rem;
  border-radius: inherit;
  pointer-events: none;
}

.icon-btn::before,
.back-btn::before {
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,0.86) 0%, rgba(255,255,255,0.36) 36%, rgba(255,255,255,0) 62%);
}

.icon-btn:active {
  opacity: 1;
  transform: scale(0.95);
  box-shadow:
    inset 0 0.062rem 0 rgba(255,255,255,0.86),
    0 0.375rem 1.125rem rgba(220, 221, 230, 0.18);
}

.self-avatar {
  width: 2.625rem;
  height: 2.625rem;
  border-radius: var(--r-full);
  background: var(--glass-btn-bg);
  color: #1a3a5c;
  font-size: 0.875rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--t-fast), opacity var(--t-fast), box-shadow var(--t-fast);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(1.5rem) saturate(150%);
  -webkit-backdrop-filter: blur(1.5rem) saturate(150%);
  border: 0;
  box-shadow: var(--shadow-glass-btn);
}

.self-avatar:active {
  opacity: 1;
  transform: scale(0.95);
}

/* Chats grid */
.chats-grid {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.5rem 1.25rem 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.875rem;
  align-content: start;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

.chat-card {
  aspect-ratio: 1 / 1.05;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  box-shadow: none;
  padding: 0 0.25rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
  position: relative;
  overflow: visible;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.chat-card:active {
  transform: scale(0.97);
  box-shadow: 0 0.062rem 0.625rem rgba(0,0,0,0.04);
}

.chat-card--pressing:active {
  transform: scale(1);
  box-shadow: none;
}

.chat-card:focus,
.chat-card:focus-visible,
.chat-card:focus-within {
  outline: none;
  box-shadow: none;
}

.chat-card--besties {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
}

.chat-card__emoji {
  font-size: 2rem;
  line-height: 1;
}

.chat-card__member-avatars {
  display: flex;
}

.chat-card__member-avatars .mini-avatar {
  width: 2.25rem;
  height: 2rem;
  border-radius: var(--r-full);
  font-size: 0.75rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.125rem solid white;
  margin-left: -0.5rem;
}

.chat-card__member-avatars .mini-avatar:first-child {
  margin-left: 0;
}

.chat-card__footer {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.375rem;
  width: 100%;
}

.chat-card__name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  letter-spacing: -0.02em;
}

/* Name stays centered on the card (same axis as .chat-card__art / besties avatars); trailing is absolutely positioned and does not shift the title */
.chat-card__title-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 1.875rem;
}

.chat-card__title-trailing {
  --chat-card-trailing-icon-w: 0.75rem;
  --chat-card-trailing-icon-h: 1.0625rem;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
  pointer-events: none;
}

.chat-card__unread-alerts-icon,
.chat-card__pin {
  flex-shrink: 0;
  width: var(--chat-card-trailing-icon-w);
  height: var(--chat-card-trailing-icon-h);
}

.chat-card__unread-alerts-icon {
  background-color: #d1d1d6;
  -webkit-mask-image: url('../assets/hide-alerts-fill.svg');
  mask-image: url('../assets/hide-alerts-fill.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.chat-card__name-anchor {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 0;
  width: max-content;
  max-width: min(100%, calc(100% - 2.75rem));
}

.chat-card__title-row .chat-card__name-anchor .chat-badge {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 0.3125rem;
}

.chat-card__title-row .chat-card__name {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-card__pin {
  background-color: #d1d1d6;
  transform: rotate(45deg);
  transform-origin: center;
  -webkit-mask-image: url('../assets/pin-fill.svg');
  mask-image: url('../assets/pin-fill.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Pin just applied: slow rise in the row (pairs with FLIP reorder on the card) */
.chat-card__pin.chat-card__pin--rising {
  animation: chat-card-pin-rise 0.68s cubic-bezier(0.32, 0.72, 0, 1) both;
}

@keyframes chat-card-pin-rise {
  from {
    transform: rotate(45deg) translateY(0.5rem);
    opacity: 0.45;
  }
  to {
    transform: rotate(45deg) translateY(0);
    opacity: 1;
  }
}

.chat-badge {
  width: 0.75rem;
  min-width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--r-full);
  background: #b7d4ff;
  box-shadow: 0 0.125rem 0.375rem rgba(150, 183, 230, 0.22);
  display: inline-block;
  padding: 0;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════
   SCREEN: CHAT
   ═══════════════════════════════════════════════════════ */
#screen-chat {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--screen-background);
  height: var(--app-height);
  min-height: var(--app-height);
}

.chat-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  height: auto;
  min-height: 0;
}

/* Chat header */
.chat-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: flex-start;
  padding: max(0.75rem, calc(env(safe-area-inset-top) + 0.25rem)) 1rem 0.625rem;
  gap: 0.75rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: linear-gradient(to bottom, rgba(255, 233, 205, 0.28), transparent);
  pointer-events: auto;
}

.back-btn {
  color: #111111;
  border: 0.062rem solid rgba(255,255,255,0.72);
}

.back-btn:active {
  opacity: 1;
  transform: scale(0.95);
  box-shadow:
    inset 0 0.062rem 0 rgba(255,255,255,0.86),
    0 0.375rem 1.125rem rgba(220, 221, 230, 0.18);
}

.back-btn svg {
  color: #111111;
}

.back-btn svg path {
  stroke: #111111;
}

#btn-chat-more.glassNavButton > svg {
  width: calc(var(--glass-nav-icon-secondary) * 0.72);
  height: calc(var(--glass-nav-icon-secondary) * 0.72);
}

.chat-header__center {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  min-width: 0;
  justify-self: center;
  max-width: min(22rem, calc(100vw - 9rem));
  text-align: center;
  padding-top: 0.125rem;
}

.chat-member-pips {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
}

.member-pip {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--r-full);
}

.chat-title {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.013rem;
  color: var(--text-primary);
  max-width: 100%;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-view-tabs {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 0.25rem;
  min-width: min(13.75rem, 100%);
  padding: 0.25rem;
  border-radius: 62.438rem;
  background: rgba(233, 237, 244, 0.92);
  box-shadow:
    inset 0 0.062rem 0 rgba(255,255,255,0.86),
    0 0.75rem 1.5rem rgba(216, 221, 233, 0.22);
  backdrop-filter: blur(1.125rem) saturate(145%);
  -webkit-backdrop-filter: blur(1.125rem) saturate(145%);
}

.chat-view-tabs__tab {
  min-height: 1.875rem;
  padding: 0 0.875rem;
  border-radius: 62.438rem;
  font-size: 0.812rem;
  font-weight: 600;
  letter-spacing: -0.011rem;
  color: rgba(32, 38, 48, 0.58);
  transition: background-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}

.chat-view-tabs__tab.is-active {
  color: var(--text-primary);
  background: rgba(255,255,255,0.95);
  box-shadow:
    inset 0 0.062rem 0 rgba(255,255,255,0.86),
    0 0.375rem 1rem rgba(214, 219, 230, 0.28);
}

.chat-view-tabs__tab:active {
  transform: scale(0.98);
}

.chat-header__right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  justify-self: end;
}

/* Chat body */
.chat-body {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: transparent;
}

/* Empty state */
.chat-empty {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.chat-immersive {
  display: none;
}

.floating-avatar {
  position: absolute;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  font-weight: 600;
  color: rgba(0,0,0,0.5);
  cursor: default;
  user-select: none;
  transition: box-shadow 0.6s ease;
}

.floating-avatar--chloe {
  top: 18%;
  left: 12%;
  background: var(--color-chloe);
  box-shadow:
    0 0 0 0.75rem rgba(222, 192, 248, 0.18),
    0 0 0 1.5rem rgba(222, 192, 248, 0.09),
    0 0.75rem 2.5rem rgba(222, 192, 248, 0.45);
  animation: pulse-chloe 3.5s ease-in-out infinite;
}

.floating-avatar--maria {
  bottom: 22%;
  right: 12%;
  background: var(--color-maria);
  box-shadow:
    0 0 0 0.75rem rgba(255, 222, 184, 0.18),
    0 0 0 1.5rem rgba(255, 222, 184, 0.09),
    0 0.75rem 2.5rem rgba(255, 222, 184, 0.45);
  animation: pulse-maria 3.5s ease-in-out 1.2s infinite;
}

@keyframes pulse-chloe {
  0%, 100% {
    box-shadow:
      0 0 0 0.75rem rgba(222, 192, 248, 0.18),
      0 0 0 1.5rem rgba(222, 192, 248, 0.09),
      0 0.75rem 2.5rem rgba(222, 192, 248, 0.45);
  }
  50% {
    box-shadow:
      0 0 0 1rem rgba(222, 192, 248, 0.22),
      0 0 0 2rem rgba(222, 192, 248, 0.10),
      0 1rem 3.5rem rgba(222, 192, 248, 0.55);
  }
}

@keyframes pulse-maria {
  0%, 100% {
    box-shadow:
      0 0 0 0.75rem rgba(255, 222, 184, 0.18),
      0 0 0 1.5rem rgba(255, 222, 184, 0.09),
      0 0.75rem 2.5rem rgba(255, 222, 184, 0.45);
  }
  50% {
    box-shadow:
      0 0 0 1rem rgba(255, 222, 184, 0.22),
      0 0 0 2rem rgba(255, 222, 184, 0.10),
      0 1rem 3.5rem rgba(255, 222, 184, 0.55);
  }
}

/* Topic cards (Phase 3+) */
.chat-topics {
  padding: 1rem 1.125rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  -webkit-overflow-scrolling: touch;
}

/* Processing stub */
.chat-processing {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
}

.processing-pill {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  background: var(--glass-bg);
  backdrop-filter: blur(1.25rem);
  -webkit-backdrop-filter: blur(1.25rem);
  border: 0.062rem solid var(--glass-border);
  border-radius: var(--r-full);
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  box-shadow: var(--shadow-card);
}

.processing-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--r-full);
  background: var(--text-tertiary);
  animation: processingPulse 1.2s ease-in-out infinite;
}

@keyframes processingPulse {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50%       { opacity: 1;   transform: scale(1.1); }
}

/* Chat footer */
.chat-footer {
  padding: 0 0 2.25rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  padding-right: 1rem;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 30;
  pointer-events: auto;
  overflow: visible;
  background: transparent;
}

.mic-btn {
  width: 6.375rem;
  height: 6.375rem;
  border-radius: var(--r-full);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.88) 0%, rgba(247,247,247,0.68) 100%);
  backdrop-filter: blur(1.75rem) saturate(145%);
  -webkit-backdrop-filter: blur(1.75rem) saturate(145%);
  border: 0.062rem solid rgba(255, 255, 255, 0.84);
  box-shadow:
    inset 0 0.062rem 0 rgba(255,255,255,0.98),
    inset 0 -0.625rem 1.75rem rgba(255,255,255,0.20),
    0 0.875rem 2.125rem rgba(222, 223, 231, 0.26);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), color var(--t-fast);
  position: relative;
  overflow: hidden;
}

.mic-btn::before {
  background:
    radial-gradient(circle at 26% 20%, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.58) 30%, rgba(255,255,255,0) 60%),
    radial-gradient(circle at 74% 76%, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0) 52%);
}

.mic-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 0.062rem rgba(255,255,255,0.28),
    inset 0 -1.125rem 1.75rem rgba(238,238,238,0.14);
}

.mic-btn:active {
  transform: scale(0.965);
  box-shadow:
    inset 0 0.062rem 0 rgba(255,255,255,0.94),
    inset 0 -0.5rem 1.375rem rgba(255,255,255,0.16),
    0 0.5rem 1.25rem rgba(222, 223, 231, 0.18);
}

.mic-btn.recording {
  background:
    linear-gradient(180deg, rgba(255,245,245,0.92) 0%, rgba(255,238,238,0.72) 100%);
  border-color: rgba(255, 233, 233, 0.92);
  color: #141414;
}

/* ═══════════════════════════════════════════════════════
   NOW PLAYING BUTTON (footer)
   ═══════════════════════════════════════════════════════ */
.now-playing-btn {
  position: relative;
  visibility: hidden;
  transition: transform var(--t-fast), opacity var(--t-fast);
}

.now-playing-btn:active {
  transform: scale(0.93);
  opacity: 0.8;
}

/* ═══════════════════════════════════════════════════════
   NOW PLAYING OVERLAY
   ═══════════════════════════════════════════════════════ */
.now-playing-overlay {
  position: absolute;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  overflow: hidden;
}

.now-playing-overlay.visible {
  pointer-events: all;
}

.now-playing-sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: var(--screen-background);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.44s cubic-bezier(0.32, 0.72, 0, 1);
  overflow: hidden;
  padding-bottom: max(0rem, env(safe-area-inset-bottom));
}

.now-playing-overlay.visible .now-playing-sheet {
  transform: translateY(0);
}

.now-playing-sheet__handle {
  width: 2.25rem;
  height: 0.25rem;
  border-radius: 0.125rem;
  background: rgba(0,0,0,0.14);
  margin: 0.875rem auto 0;
  flex-shrink: 0;
}

/* Top bar */
.now-playing-topbar {
  display: flex;
  align-items: center;
  padding: 0.75rem 1.25rem 0.25rem;
  flex-shrink: 0;
}

.now-playing-topbar__close {
  flex-shrink: 0;
  transition: opacity var(--t-fast);
}

.now-playing-topbar__close:active {
  opacity: 0.5;
}

#btn-np-close.now-playing-topbar__close {
  transform: rotate(-90deg);
}

#btn-np-close.now-playing-topbar__close:active {
  transform: rotate(-90deg) scale(0.95);
}

.now-playing-topbar__label {
  flex: 1;
  text-align: center;
  font-size: 0.812rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.now-playing-topbar__spacer {
  width: 2.625rem;
  flex-shrink: 0;
}

/* Topic title */
.now-playing-topic-title {
  text-align: center;
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--text-primary);
  padding: 0.5rem 1.5rem 0;
  line-height: 1.2;
  flex-shrink: 0;
  min-height: calc(1.375rem * 1.2 + 0.5rem);
  will-change: transform, opacity;
}

.now-playing-topic-title.is-swiping-out {
  transform: translateX(var(--np-title-out-x, -100%));
  opacity: 0;
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease;
}

.now-playing-topic-title.is-swiping-in {
  transform: translateX(var(--np-title-in-x, 100%));
  opacity: 0;
}

.now-playing-topic-title.is-swiping-in.is-visible {
  transform: translateX(0);
  opacity: 1;
  transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1), opacity 200ms ease;
}

/* Avatar stage */
.now-playing-stage {
  flex: 1;
  position: relative;
  overflow: visible;
  min-height: 0;
}

.now-playing-avatars {
  position: absolute;
  inset: 0;
  transition: opacity 0.22s ease;
}

/* Individual avatars in now-playing */
.np-avatar {
  --np-accent: var(--chat-avatar-accent, #DFFFB8);
  --np-ring-fill: color-mix(in srgb, var(--np-accent, #DFFFB8) 94%, white 6%);
  --np-ring-track: #D1D1D6;
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  font-weight: 600;
  color: rgba(0,0,0,0.5);
  cursor: default;
  user-select: none;
  transition:
    top 0.44s cubic-bezier(0.32, 0.72, 0, 1),
    left 0.44s cubic-bezier(0.32, 0.72, 0, 1),
    transform 0.44s cubic-bezier(0.32, 0.72, 0, 1),
    opacity 0.28s ease,
    filter 0.44s ease;
}

.np-avatar__ring-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.np-avatar__label,
.floating-avatar__label {
  font-size: clamp(0.875rem, 4vw, 1.125rem);
  line-height: 1;
  padding: clamp(0.5rem, 2.4vw, 0.562rem) clamp(0.875rem, 5vw, 1.375rem);
  border-radius: var(--r-full);
  text-align: center;
  color: #111111;
  white-space: nowrap;
  margin-bottom: -0.625rem;
  position: relative;
}

/* Pill fill + shadow (shared with .floating-avatar__label); --chat-avatar-accent on .np-avatar / .floating-avatar */
.np-avatar__label,
.floating-avatar__label {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--chat-avatar-accent, #dec0f8) 22%, white 78%) 0%,
    color-mix(in srgb, var(--chat-avatar-accent, #dec0f8) 38%, white 62%) 100%
  );
  box-shadow:
    0 0.625rem 1.625rem color-mix(in srgb, var(--chat-avatar-accent, #dec0f8) 32%, transparent),
    inset 0 0.062rem 0 rgba(255,255,255,0.78);
}

.np-avatar__ring-wrap {
  position: relative;
  display: inline-block;
  z-index: 1;
  overflow: visible;
}

.np-avatar__ring {
  position: absolute;
  inset: 0;
  border-radius: 62.438rem;
  /* Segmented track ring (JS sets conic background); mask makes it a thin stroke */
  background: var(--np-ring-track-bg, conic-gradient(var(--np-ring-track, #D1D1D6) 0deg, var(--np-ring-track, #D1D1D6) 360deg));
  /* Keep track + progress perfectly aligned */
  --np-ring-thickness: 0.18rem;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--np-ring-thickness)), #000 calc(100% - var(--np-ring-thickness)));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--np-ring-thickness)), #000 calc(100% - var(--np-ring-thickness)));
  opacity: 0.72;
  pointer-events: none;
  filter: none;
}

/* Rings sit above the photo so same-size (inset: 0) stroke stays visible; mask hole shows the disk below */
.np-avatar__ring--track {
  opacity: 0.72;
  z-index: 2;
}

/* Fallback when JS hasn’t set a segmented gradient; Now Playing uses inline background from _buildNowPlayingSegmentedRingBackground */
.np-avatar__ring--progress {
  z-index: 3;
  background: var(--np-ring-progress-bg, conic-gradient(
    var(--np-ring-fill) 0deg,
    var(--np-ring-fill) var(--np-ring-deg, 0deg),
    transparent var(--np-ring-deg, 0deg),
    transparent 360deg
  ));
}

.np-avatar__photo {
  --np-photo-size: clamp(4.75rem, 24vw, 7rem);
  width: var(--np-photo-size);
  height: var(--np-photo-size);
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  position: relative;
  z-index: 1;
  font-size: calc(var(--np-photo-size) * 0.38);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  /* overflow: visible so shared accent box-shadow is not clipped (background still follows border-radius) */
  overflow: visible;
}

/* One accent halo on all chat avatar disks; set --chat-avatar-accent on the avatar (JS) or alias (e.g. --speaker-accent → immersive). */
.floating-avatar__photo,
.np-avatar__photo,
.chat-art-besties__avatar,
.immersive-cluster__speaker-photo,
.chat-presence__avatar,
.group-details-hero__avatar,
.group-details-person:not(.group-details-person--add) .group-details-person__avatar {
  box-shadow:
    0 0 1.125rem color-mix(in srgb, var(--chat-avatar-accent, #dec0f8) 34%, transparent),
    0 0 2.5rem color-mix(in srgb, var(--chat-avatar-accent, #dec0f8) 28%, transparent);
}

.np-avatar__photo {
  box-shadow:
    0 0 1.5rem color-mix(in srgb, var(--chat-avatar-accent, #dec0f8) 48%, transparent),
    0 0 3.5rem color-mix(in srgb, var(--chat-avatar-accent, #dec0f8) 40%, transparent),
    0 0 5.75rem color-mix(in srgb, var(--chat-avatar-accent, #dec0f8) 28%, transparent);
}

.np-avatar__duration {
  margin-block-start: 0.9375rem;
  font-size: 0.812rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: center;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* Speaking state — show progress ring */
.np-avatar.is-speaking .np-avatar__ring {
  opacity: 1;
}

/* Progress dots */
.now-playing-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.438rem;
  min-height: 1.25rem;
  padding-inline: 1.5rem;
  padding-block-start: 0;
  padding-block-end: 1.875rem;
  flex-shrink: 0;
}

.np-dot {
  position: relative;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #D1D1D6;
  overflow: hidden;
  transition: transform 0.22s ease, background 0.22s ease;
}

.np-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--np-dot-color, var(--color-lime, #DFFFB8));
  transform: scale(var(--np-dot-progress, 0));
  transform-origin: center;
  transition: transform 0.16s linear;
}

.np-dot.is-complete {
  background: var(--np-dot-color, var(--color-lime, #DFFFB8));
}



/* Timeline */
.now-playing-timeline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.5rem;
  padding: 0 0.938rem;
  margin: 0 0 clamp(2.625rem, 8vh, 4.625rem);
  flex-shrink: 0;
  position: relative;
}

.np-timeline__tick {
  min-width: 2.188rem;
  font-size: 0.75rem;
  line-height: 1;
  color: #111111;
  font-variant-numeric: tabular-nums;
}

.np-timeline__tick:last-child {
  text-align: right;
}

.np-timeline__track {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
  height: 0.438rem;
  border-radius: var(--r-full);
  overflow: hidden;
  background: rgba(221, 223, 229, 0.46);
  box-shadow: 0 0 1rem rgba(255, 255, 255, 0.36);
}

.np-timeline__played {
  position: absolute;
  inset: 0;
  width: 100%;
  border-radius: inherit;
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
  overflow: hidden;
  clip-path: inset(0 calc(100% - var(--timeline-progress, 0%)) 0 0 round var(--r-full));
  pointer-events: none;
  z-index: 2;
  transition: clip-path 0.14s linear;
}

.np-timeline__segment {
  min-height: 100%;
  min-width: 0.312rem;
  border-radius: var(--r-full);
  background: rgba(199, 202, 211, 0.72);
  transition: opacity 0.22s ease;
  cursor: pointer;
  opacity: 1;
}

.np-timeline__segment--played {
  flex-shrink: 0;
  background: var(--color-lime, #DFFFB8);
  box-shadow: 0 0 0.75rem rgba(223, 255, 184, 0.92);
  opacity: 1;
  filter: saturate(1.08) contrast(1.02);
}

.np-timeline__segment:hover {
  opacity: 0.8;
}

.np-timeline__segment.is-active {
  opacity: 1;
}

/* Avatar redesign - override old position-based styling */
.np-avatar--current {
  position: absolute !important;
  top: 43% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: auto;
  right: auto;
  bottom: auto;
}

.np-avatar--current .np-avatar__ring-wrap {
  position: relative;
  isolation: isolate;
}

.np-avatar--current .np-avatar__photo {
  --np-photo-size: clamp(7.375rem, 35vw, 9.5rem);
  width: var(--np-photo-size);
  height: var(--np-photo-size);
  z-index: 1;
  /* Tight halo aligned to the photo disk (not the outer chrome ring) */
  box-shadow:
    0 0 1.125rem color-mix(in srgb, var(--chat-avatar-accent, #dec0f8) 34%, transparent),
    0 0 2.5rem color-mix(in srgb, var(--chat-avatar-accent, #dec0f8) 28%, transparent);
}

.np-avatar--current .np-avatar__ring {
  inset: 0;
  opacity: 0.88;
}

.np-avatar--others-container {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.np-avatar--other {
  --np-other-x: 0rem;
  --np-other-y: 0rem;
  --np-float-delay: 0s;
  position: absolute !important;
  top: calc(63% + var(--np-other-y)) !important;
  left: calc(50% + var(--np-other-x)) !important;
  transform: translate(-50%, -50%);
  width: auto;
  opacity: 0.42;
  filter: saturate(0.82);
  animation: np-avatar-float 5.4s ease-in-out infinite;
  animation-delay: var(--np-float-delay);
}

.now-playing-avatars.is-swapping .np-avatar--other {
  animation: none;
}

.np-avatar--other.has-topic-memo {
  opacity: 0.56;
}

.np-avatar--other .np-avatar__photo {
  --np-photo-size: clamp(3.625rem, 18vw, 4.875rem);
  width: var(--np-photo-size);
  height: var(--np-photo-size);
}

.np-avatar--other .np-avatar__ring {
  inset: 0;
  opacity: 0;
}

.np-avatar--other .np-avatar__label {
  display: none;
}

@keyframes np-avatar-float {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(0);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-0.438rem);
  }
}

/* Controls */
.now-playing-controls {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: var(--footer-rec-control-gap);
  padding: 0 0 clamp(1.75rem, 5vh, 3rem);
  flex-shrink: 0;
}

.np-control-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--t-fast), transform var(--t-fast);
}

.np-control-btn:active {
  opacity: 0.5;
  transform: scale(0.9);
}

@media (max-height: 680px) {
  .now-playing-topic-title {
    font-size: 1.25rem;
    padding-top: 0.25rem;
  }

  .np-avatar--current {
    top: 40% !important;
  }

  .np-avatar--current .np-avatar__photo {
    --np-photo-size: clamp(6.125rem, 31vw, 7.75rem);
  }

  .np-avatar--other {
    top: calc(61% + var(--np-other-y)) !important;
  }

  .np-avatar--other .np-avatar__photo {
    --np-photo-size: clamp(3.125rem, 16vw, 4.125rem);
  }
}

/* ═══════════════════════════════════════════════════════
   RECORDING OVERLAY
   ═══════════════════════════════════════════════════════ */
.recording-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease;
}

.recording-overlay.visible {
  pointer-events: all;
  opacity: 1;
}

.recording-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(0.625rem) brightness(0.7);
  -webkit-backdrop-filter: blur(0.625rem) brightness(0.7);
}

.recording-sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(252, 252, 252, 0.97);
  backdrop-filter: blur(2.5rem);
  -webkit-backdrop-filter: blur(2.5rem);
  border-radius: 1.75rem 1.75rem 0 0;
  padding: 0.75rem 1.5rem 3rem;
  box-shadow: 0 -0.25rem 2.5rem rgba(0,0,0,0.14);
  transform: translateY(100%);
  transition: transform 0.38s cubic-bezier(0.34, 1.1, 0.64, 1);
  /* Never exceed viewport; keep sheet pinned to bottom without page scrolling. */
  max-height: calc(100dvh - env(safe-area-inset-top, 0rem));
  overflow: hidden;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
}

.recording-overlay.visible .recording-sheet {
  transform: translateY(0);
}

.recording-sheet__handle {
  width: 2.25rem;
  height: 0.25rem;
  border-radius: 0.125rem;
  background: #e0e0e0;
  margin: 0 auto 1.25rem;
}

/* Timer row */
.rec-row {
  display: flex;
  align-items: center;
}

.rec-row--top {
  justify-content: space-between;
  margin-bottom: 0.375rem;
  height: 2.5rem;
}

.rec-icon-btn {
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: background var(--t-fast), opacity var(--t-fast);
}

.rec-icon-btn:not(.glassNavButton) {
  width: 2.25rem;
  height: 2.25rem;
  background: rgba(0,0,0,0.05);
}

.rec-icon-btn:active { opacity: 0.6; }

.rec-icon-btn.glassNavButton {
  color: rgba(17, 17, 17, 0.92);
}

.rec-timer {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.031rem;
  font-variant-numeric: tabular-nums;
}

.rec-spacer {
  width: var(--glass-nav-secondary-size);
}

/* Waveform */
.waveform-wrap {
  height: 4.5rem;
  margin: 0.75rem 0 1.25rem;
  position: relative;
  overflow: hidden;
}

.waveform-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Actions row */
.rec-row--actions {
  justify-content: center;
  height: 4.5rem;
  gap: 1.5rem;
}

/* Stop button (during recording) — legacy non-glass variant */
.stop-btn:not(.glassNavButton) {
  width: 4rem;
  height: 4rem;
  border-radius: var(--r-full);
  background: rgba(249, 120, 120, 0.10);
  border: 0.125rem solid rgba(249, 120, 120, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--t-fast), background var(--t-fast);
}

.stop-btn:not(.glassNavButton):active {
  transform: scale(0.92);
  background: rgba(249, 120, 120, 0.18);
}

/* Discard / Play / Send buttons (after stop) */
.rec-action-btn {
  width: 3.625rem;
  height: 3.625rem;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--t-fast), opacity var(--t-fast);
}

.rec-action-btn:active {
  transform: scale(0.91);
  opacity: 0.8;
}

.rec-action-btn--discard {
  background: rgba(0, 0, 0, 0.07);
  color: var(--text-secondary);
}

.rec-action-btn--play {
  background: rgba(0, 0, 0, 0.07);
  color: var(--text-primary);
}

.rec-action-btn--send {
  background: var(--color-sooim);
  color: #0a2d52;
  box-shadow: 0 0.25rem 1.25rem rgba(184, 216, 255, 0.6);
}

.rec-action-btn--play.playing {
  background: rgba(0, 0, 0, 0.10);
  color: var(--text-primary);
}

/* Sending animation */
.rec-row--actions .sending-indicator {
  display: flex;
  gap: 0.438rem;
  align-items: center;
  height: 4rem;
}

.sending-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--r-full);
  background: var(--text-tertiary);
}

.sending-dot:nth-child(1) { animation: sendBounce 0.9s ease-in-out 0s infinite; }
.sending-dot:nth-child(2) { animation: sendBounce 0.9s ease-in-out 0.15s infinite; }
.sending-dot:nth-child(3) { animation: sendBounce 0.9s ease-in-out 0.3s infinite; }

@keyframes sendBounce {
  0%, 100% { transform: translateY(0);   opacity: 0.4; }
  40%       { transform: translateY(-0.375rem); opacity: 1; }
}

/* ═══════════════════════════════════════════════════════
   SCROLLBAR SUPPRESSION
   ═══════════════════════════════════════════════════════ */
.chats-grid::-webkit-scrollbar,
.chats-scroll::-webkit-scrollbar,
.chat-topics::-webkit-scrollbar {
  display: none;
}

.chats-grid,
.chats-scroll,
.chat-topics {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ═══════════════════════════════════════════════════════
   SAFE AREA SUPPORT
   ═══════════════════════════════════════════════════════ */
@supports (padding: env(safe-area-inset-bottom)) {
  .chat-footer {
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
  }
  .recording-sheet {
    padding-bottom: calc(2.5rem + env(safe-area-inset-bottom));
  }
  .sheet {
    padding-bottom: calc(2.5rem + env(safe-area-inset-bottom));
  }
}

/* ═══════════════════════════════════════════════════════
   FIGMA FIDELITY OVERRIDES
   ═══════════════════════════════════════════════════════ */
:root {
  --bg-gradient: linear-gradient(180deg, #fbfaf8 0%, #fdfcff 100%);
  --glass-bg: rgba(255, 255, 255, 0.74);
  --glass-border: rgba(255, 255, 255, 0.96);
  --surface: rgba(255, 255, 255, 0.9);
  --shadow-card: 0 1.125rem 3rem rgba(211, 204, 230, 0.18), 0 0.062rem 0 rgba(255,255,255,0.92) inset;
  --shadow-sheet: 0 -1.25rem 3.75rem rgba(146, 144, 164, 0.22);
  --shadow-mic: 0 0.875rem 2.375rem rgba(197, 191, 220, 0.26), 0 0.062rem 0 rgba(255,255,255,0.95) inset;
  --text-secondary: #767676;
  --text-tertiary: #adadad;
  --app-shell-width: 25.125rem;
  --screen-gutter: clamp(0.625rem, 3.2vw, 1.125rem);
  --screen-gutter-wide: clamp(0.875rem, 4vw, 1.625rem);
  --top-safe-pad: max(2.375rem, calc(1.125rem + env(safe-area-inset-top)));
  --compose-sheet-top-pad: max(0.875rem, calc(0.375rem + env(safe-area-inset-top)));
  --header-safe-pad: max(2.25rem, calc(0.875rem + env(safe-area-inset-top)));
  /* Line box for .chat-title (taller on narrow screens via --chat-header-title-line override) */
  --chat-header-title-line: calc(1.062rem * 1.2);
  /* Space for #screen-chat .chat-header: same top pad as .chat-header, then .chat-header__center stack + bottom pad */
  --chat-topics-pad-top: calc(
    max(0.75rem, calc(env(safe-area-inset-top) + 0.25rem))
    + 0.125rem
    + 3.25rem
    + 0.5rem
    + var(--chat-header-title-line)
    + 0.625rem
    + 0.1875rem
  );
  --bottom-safe-pad: max(1.125rem, calc(0.75rem + env(safe-area-inset-bottom)));
  --chat-art-size: min(100%, 12rem);
  --floating-avatar-width: clamp(6.875rem, 34vw, 10rem);
  --floating-avatar-photo: clamp(6.5rem, 33vw, 9.875rem);
  --mic-size: clamp(5.125rem, 25vw, 6.375rem);
  --recording-sheet-inset: clamp(0.5rem, 2.2vw, 0.75rem);
  --recording-sheet-top: clamp(4.5rem, 14vh, 7.875rem);
  --analysis-sheet-top: clamp(4rem, 12vh, 7rem);
  --analysis-sheet-bottom: max(1rem, calc(0.5rem + env(safe-area-inset-bottom)));
  --recording-wave-height: clamp(11.25rem, 32vh, 20.5rem);
  --font-size-ui-lg: 1.062rem;
  --radius-shell: 2.125rem;
  --radius-pill: 62.438rem;
  --size-control-md: 2.625rem;
  /* Matches .top-bar row: safe-area top pad + max(controls, title line) + bottom pad */
  --chats-header-reserved: calc(
    max(0.75rem, calc(env(safe-area-inset-top) + 0.25rem))
    + max(var(--size-control-md), calc(clamp(2rem, 7vw, 2.45rem) * 0.96))
    + 0.625rem
  );
  --size-control-lg: 2.75rem;
  --size-avatar-md: 2.625rem;
  --surface-glass-soft: rgba(255, 255, 255, 0.48);
  --surface-glass-strong: rgba(255, 255, 255, 0.68);
  --border-glass-soft: 0.062rem solid rgba(255,255,255,0.72);
  --border-glass-strong: 0.062rem solid rgba(255,255,255,0.8);
  --control-glass-bg: var(--glass-btn-bg);
  --control-glass-shadow: var(--shadow-glass-btn);
  /* Shared tint for .chat-header / #screen-chat .chat-header / .chat-footer / #screen-chat .chat-footer */
  --chat-chrome-gradient: linear-gradient(
    180deg,
    rgba(184, 216, 255, 0.34) 0%,
    rgba(184, 216, 255, 0.16) 48%,
    rgba(184, 216, 255, 0) 100%
  );
  /* Same stops as --chat-chrome-gradient, strong toward bottom bar / safe area */
  --chat-chrome-gradient-footer: linear-gradient(
    to top,
    rgba(184, 216, 255, 0.34) 0%,
    rgba(184, 216, 255, 0.16) 48%,
    rgba(184, 216, 255, 0) 100%
  );
}

html, body {
  background: var(--screen-background);
}

#app {
  max-width: var(--app-shell-width);
  margin: 0 auto;
  border-radius: var(--radius-shell);
  box-shadow: 0 1.5rem 5rem rgba(82, 75, 113, 0.18);
}

#app::before {
  content: none;
}

.screen:not(#screen-splash)::before {
  content: none;
}

.screen:not(#screen-splash)::after {
  content: none;
}

#screen-splash::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: rotate(180deg) scale(1.06);
  transform-origin: center;
  opacity: 0.84;
  pointer-events: none;
  z-index: 0;
}

#screen-splash {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.625rem;
}

.splash-content {
  text-align: center;
  position: relative;
  z-index: 1;
}

.splash-logo {
  /* Keep splash hero large on iPhone (avoid shrinking with root rem clamp) */
  width: clamp(220px, 62vw, 270px);
  margin-bottom: 0.5rem;
}

.splash-tagline {
  font-size: clamp(17px, 4.6vw, 20px);
  line-height: 1.18;
  font-weight: 400;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  text-align: center;
}

#screen-contacts-permission {
  justify-content: center;
}

.perm-bg {
  filter: none;
  padding: 0;
}

.sheet-overlay {
  display: none;
}

.sheet {
  width: calc(100% - 2.5rem);
  max-width: 18.75rem;
  background: rgba(255,255,255,0.74);
  border-radius: var(--radius-shell);
  padding: 0.875rem 0.875rem 1rem;
  box-shadow: 0 1.125rem 3.5rem rgba(197, 190, 214, 0.20);
  backdrop-filter: blur(2.5rem);
  -webkit-backdrop-filter: blur(2.5rem);
  border: 0.062rem solid rgba(255,255,255,0.62);
  animation: sheetPop 0.34s cubic-bezier(0.34, 1.1, 0.64, 1) forwards;
  z-index: 1;
}

.sheet-handle {
  display: none;
}

.perm-app-badge {
  width: 4.375rem;
  height: 4.375rem;
  margin: 0.125rem 0 0.625rem;
  display: block;
  object-fit: cover;
  background: transparent;
  border-radius: 0;
}

.perm-heading {
  font-size: 1.125rem;
  font-weight: 600;
  text-align: left;
  line-height: 1.25;
  margin-bottom: 0.625rem;
  color: #111;
}

.perm-sub {
  font-size: 0.938rem;
  text-align: left;
  margin-bottom: 1.125rem;
  line-height: 1.38;
  color: rgba(60, 60, 67, 0.6);
}

.perm-btn {
  height: 3rem;
  padding: 0.812rem 1rem;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-ui-lg);
  font-weight: 400;
  letter-spacing: -0.025em;
}

.perm-btn--primary,
.perm-btn--secondary,
.perm-btn--deny {
  background: rgba(120, 120, 128, 0.16);
  color: var(--text-primary);
}

.top-bar--permission {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 0;
}

.icon-btn,
.icon-btn--header {
  width: var(--size-control-md);
  height: var(--size-control-md);
  background: var(--control-glass-bg);
  color: var(--text-primary);
  box-shadow: var(--control-glass-shadow);
}

.self-avatar {
  width: var(--size-avatar-md);
  height: var(--size-avatar-md);
  background-size: cover;
  background-position: center;
  box-shadow: var(--control-glass-shadow);
}

.self-avatar.has-image {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.self-avatar:not(.has-image) {
  background: var(--control-glass-bg);
}

.chats-grid {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  padding: 0.5rem var(--screen-gutter) calc(1.875rem + env(safe-area-inset-bottom));
  gap: 0.75rem clamp(0.25rem, 1.6vw, 0.75rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.chats-empty-state {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem 7.5rem;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.chats-empty-state__cta {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--size-control-md) * 2.05);
  height: calc(var(--size-control-md) * 2.05);
  z-index: 3;
}

/* Same hit target as .chats-empty-state__cta (was half-size; doubled per product request) */
#btn-start-chat.chats-empty-state__cta {
  width: calc(var(--size-control-md) * 2.05);
  height: calc(var(--size-control-md) * 2.05);
}

.chats-empty-state__cta.glassNavButton {
  overflow: visible;
}

.chats-empty-state__cta.glassNavButton > svg {
  width: calc(var(--glass-nav-icon-secondary) * 5);
  height: calc(var(--glass-nav-icon-secondary) * 5);
}

#btn-start-chat.chats-empty-state__cta.glassNavButton > svg {
  width: 26px;
  height: 26px;
}

#screen-chats.has-chats .chats-empty-state__cta {
  left: auto;
  top: auto;
  right: 1.25rem;
  bottom: calc(1.25rem + env(safe-area-inset-bottom));
  transform: none;
}

.chats-empty-state__cta:active {
  transform: translate(-50%, -50%) scale(0.95);
}

#screen-chats.has-chats .chats-empty-state__cta:active {
  transform: scale(0.95);
}

.chats-empty-state__cta-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + 4.5rem));
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #D1D1D6;
  opacity: 0;
  pointer-events: none;
}

#screen-chats:not(.has-chats) .chats-empty-state__cta-label {
  opacity: 1;
  transform: translate(-50%, calc(-50% + 6.625rem));
}

.self-avatar--static {
  cursor: default;
}

.chat-card {
  aspect-ratio: 1 / 1.16;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0 clamp(0.125rem, 1vw, 0.25rem);
  justify-content: flex-start;
  align-items: center;
  min-width: 0;
}

.chat-card__art {
  width: var(--chat-art-size);
  max-width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-card .chat-art-besties__avatar {
  box-shadow: none;
}

.chat-art-besties {
  width: var(--chat-art-size);
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 62.438rem;
  position: relative;
  background: rgba(255, 255, 255, 0.44);
  backdrop-filter: blur(1.5rem) saturate(150%);
  -webkit-backdrop-filter: blur(1.5rem) saturate(150%);
  box-shadow:
    inset 0 0.062rem 0 rgba(255,255,255,0.82),
    0 0.875rem 2.125rem rgba(220, 221, 230, 0.18);
}

.chat-art-besties--bare {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.chat-art-besties--pips {
  --chat-art-size: 3.25rem;
}

.chat-art-besties--hero {
  --chat-art-size: 5.75rem;
}

.chat-art-besties__avatar {
  position: absolute;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: none;
}

.chat-art-besties__avatar.avatar-fallback {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--avatar-accent, #d6e6ff) 86%, white 14%) 0%,
      color-mix(in srgb, var(--avatar-accent, #d6e6ff) 58%, white 42%) 100%);
  color: rgba(17, 17, 17, 0.54);
}

.chat-art-besties__avatar.avatar-fallback .avatar-fallback__icon {
  opacity: 0.52;
  filter: invert(1) brightness(0.22);
}

.chat-art-besties__avatar--main {
  width: 54.2%;
  height: 54.2%;
  left: 9.9%;
  top: 14.1%;
}

.chat-art-besties__avatar--secondary {
  width: 31.25%;
  height: 31.25%;
  left: 55.2%;
  top: 54.7%;
}

.chat-art-besties--single .chat-art-besties__avatar--single {
  inset: 0;
  width: 100%;
  height: 100%;
}

.chat-art-circle {
  width: var(--chat-art-size);
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(4.5rem, 22vw, 7.5rem);
  line-height: 1;
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.44);
  backdrop-filter: blur(1.5rem) saturate(150%);
  -webkit-backdrop-filter: blur(1.5rem) saturate(150%);
  box-shadow:
    inset 0 0.062rem 0 rgba(255,255,255,0.82),
    0 0.875rem 2.125rem rgba(220, 221, 230, 0.18);
}

.chat-art-circle--heart { color: #8f5dc2; }
.chat-art-circle--letters {
  color: #111;
  font-size: clamp(2.75rem, 13vw, 4.5rem);
  font-weight: 700;
}
.chat-art-circle--collage {
  background-color: rgba(255,255,255,0.44);
  background-image: url('https://www.figma.com/api/mcp/asset/9a786041-43ad-46c6-bbd2-e06d9598e266');
  background-size: cover;
  background-position: center;
}
.chat-art-circle--alien { color: #6d8c25; }
.chat-art-circle--mushroom {
  background-color: rgba(255,255,255,0.44);
  background-image: url('https://www.figma.com/api/mcp/asset/f151cf2d-bd6e-48e3-9a1c-7ed8af6f5f1c');
  background-size: cover;
  background-position: center;
}

.chat-art-circle--fallback {
  font-size: clamp(3.25rem, 16vw, 5.375rem);
  font-weight: 700;
  letter-spacing: -0.06em;
  color: rgba(17, 17, 17, 0.52);
}

.chat-art-circle__bubble {
  position: absolute;
  width: 28.1%;
  height: 28.1%;
  border-radius: 50%;
  background: #cdd8fb;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 11.5%;
  bottom: 11.5%;
  font-size: clamp(1rem, 6vw, 1.625rem);
}

.chat-card__footer {
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 0.438rem;
  margin-top: 0.125rem;
  min-height: 1.875rem;
}

.chat-card__name {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-align: center;
  line-height: 1.3;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-card__title-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 1.875rem;
}

.chat-card__name-anchor {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 0;
  width: max-content;
  max-width: min(100%, calc(100% - 2.75rem));
}

.chat-card__title-row .chat-card__name-anchor .chat-badge {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 0.3125rem;
}

.chat-card__title-row .chat-card__name {
  min-width: 0;
  max-width: 100%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-badge {
  position: static;
  width: 0.75rem;
  min-width: 0.75rem;
  height: 0.75rem;
  padding: 0;
  background: #b7d4ff;
}

.chat-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: flex-start;
  gap: 0.75rem;
  padding: max(0.75rem, calc(env(safe-area-inset-top) + 0.25rem)) 1rem 0.625rem;
  position: sticky;
  top: 0;
  z-index: 4;
  isolation: isolate;
  background: var(--chat-chrome-gradient);
  border-bottom: none;
}

.chat-header .back-btn {
  justify-self: start;
}

/* Blur ramps up toward the top; fully clear at the bottom edge (mask alpha → 0). */
.chat-header::before,
.top-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  backdrop-filter: blur(1.125rem) saturate(135%);
  -webkit-backdrop-filter: blur(1.125rem) saturate(135%);
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 58%,
    rgba(0, 0, 0, 0.72) 78%,
    rgba(0, 0, 0, 0.2) 93%,
    rgba(0, 0, 0, 0) 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 58%,
    rgba(0, 0, 0, 0.72) 78%,
    rgba(0, 0, 0, 0.2) 93%,
    rgba(0, 0, 0, 0) 100%
  );
}

.chat-header > *,
.top-bar > * {
  position: relative;
  z-index: 1;
}

.chat-member-pips {
  gap: 0;
  justify-content: center;
}

.member-pip {
  width: 3.25rem;
  height: 3.25rem;
  margin-left: 0;
  background-size: cover;
  background-position: center;
}

.member-pip:not(:first-child) {
  margin-left: -0.875rem;
}

.chat-title {
  font-size: 1.062rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  max-width: 100%;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-header__right {
  width: auto;
  justify-self: end;
}

.floating-avatar {
  --floating-accent: #dec0f8;
  --floating-accent-rgb: 222, 192, 248;
  --chat-avatar-accent: var(--floating-accent);
  width: var(--floating-avatar-width);
  height: calc(var(--floating-avatar-width) * 1.225);
  border-radius: clamp(2.125rem, 11vw, 3.5rem);
  flex-direction: column;
  justify-content: flex-start;
  color: var(--text-primary);
}

.floating-avatar--chloe,
.floating-avatar--primary {
  top: 16%;
  left: 17%;
  background: transparent;
  box-shadow: none;
  animation: besties-float-chloe 8.8s ease-in-out infinite;
}

.floating-avatar--maria,
.floating-avatar--secondary {
  top: 47%;
  right: 13%;
  bottom: auto;
  background: transparent;
  box-shadow: none;
  animation: besties-float-maria 9.6s ease-in-out infinite;
}

.chat-empty.is-single-member .floating-avatar--chloe,
.chat-empty.is-single-member .floating-avatar--primary {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  animation: besties-float-single 8.8s ease-in-out infinite;
}

.floating-avatar__photo {
  width: var(--floating-avatar-photo);
  height: var(--floating-avatar-photo);
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: none;
}

.chat-footer {
  padding: 0.75rem var(--screen-gutter) calc(1.25rem + env(safe-area-inset-bottom));
  flex-direction: row;
  gap: var(--footer-rec-control-gap);
  justify-content: flex-end;
  position: sticky;
  bottom: 0;
  z-index: 3;
  isolation: isolate;
  background: var(--chat-chrome-gradient-footer);
  border-bottom: none;
}

/* Blur ramps down toward the top (clear where it meets the thread); full strength toward the bottom — inverse of .chat-header::before. */
.chat-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  backdrop-filter: blur(1.125rem) saturate(135%);
  -webkit-backdrop-filter: blur(1.125rem) saturate(135%);
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.2) 7%,
    rgba(0, 0, 0, 0.72) 22%,
    rgba(0, 0, 0, 1) 42%,
    rgba(0, 0, 0, 1) 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.2) 7%,
    rgba(0, 0, 0, 0.72) 22%,
    rgba(0, 0, 0, 1) 42%,
    rgba(0, 0, 0, 1) 100%
  );
}

.chat-footer > * {
  position: relative;
  z-index: 1;
}

.chat-presence {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3.375rem;
}

.chat-presence__avatar {
  position: relative;
  width: var(--size-avatar-md);
  height: var(--size-avatar-md);
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 0.188rem solid rgba(255,255,255,0.84);
}

.chat-presence__avatar.is-live {
  border-color: color-mix(in srgb, var(--chat-avatar-accent, #b8d8ff) 24%, white 76%);
}

.chat-presence__avatar.is-recording,
.chat-presence__avatar.is-sending {
  animation: chat-presence-pulse 1.5s ease-in-out infinite;
  box-shadow:
    0 0 1.125rem color-mix(in srgb, var(--chat-avatar-accent, #dec0f8) 34%, transparent),
    0 0 2.5rem color-mix(in srgb, var(--chat-avatar-accent, #dec0f8) 28%, transparent),
    0 0 0 0.375rem color-mix(in srgb, var(--chat-avatar-accent, #b8d8ff) 18%, white 82%),
    0 0.875rem 1.75rem color-mix(in srgb, var(--chat-avatar-accent, #b8d8ff) 28%, rgba(214, 218, 229, 0.3) 72%);
}

.chat-presence__avatar.is-sending {
  animation-duration: 1.1s;
}

.chat-presence__status {
  position: absolute;
  right: -0.062rem;
  bottom: -0.062rem;
  width: 0.688rem;
  height: 0.688rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--chat-avatar-accent, #b8d8ff) 68%, white 32%);
  border: 0.125rem solid rgba(255,255,255,0.95);
  box-shadow: 0 0.25rem 0.625rem rgba(181, 188, 203, 0.28);
}

.chat-presence__avatar.is-recording .chat-presence__status,
.chat-presence__avatar.is-sending .chat-presence__status {
  background: color-mix(in srgb, var(--chat-avatar-accent, #b8d8ff) 88%, white 12%);
}

@keyframes chat-presence-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 0 1.125rem color-mix(in srgb, var(--chat-avatar-accent, #dec0f8) 34%, transparent),
      0 0 2.5rem color-mix(in srgb, var(--chat-avatar-accent, #dec0f8) 28%, transparent),
      0 0 0 0.25rem color-mix(in srgb, var(--chat-avatar-accent, #b8d8ff) 14%, white 86%),
      0 0.75rem 1.5rem color-mix(in srgb, var(--chat-avatar-accent, #b8d8ff) 22%, rgba(214, 218, 229, 0.3) 78%);
  }
  50% {
    transform: scale(1.05);
    box-shadow:
      0 0 1.125rem color-mix(in srgb, var(--chat-avatar-accent, #dec0f8) 34%, transparent),
      0 0 2.5rem color-mix(in srgb, var(--chat-avatar-accent, #dec0f8) 28%, transparent),
      0 0 0 0.5rem color-mix(in srgb, var(--chat-avatar-accent, #b8d8ff) 24%, white 76%),
      0 1rem 1.875rem color-mix(in srgb, var(--chat-avatar-accent, #b8d8ff) 34%, rgba(214, 218, 229, 0.3) 66%);
  }
}

.chat-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--mic-size) minmax(0, 1fr);
  align-items: center;
  justify-content: normal;
  gap: var(--footer-rec-control-gap);
  padding-left: var(--screen-gutter);
  padding-right: var(--screen-gutter);
}

.chat-footer .chat-presence {
  position: absolute;
  left: var(--screen-gutter);
  bottom: calc(1.25rem + env(safe-area-inset-bottom));
}

.chat-footer .now-playing-btn {
  grid-column: 1;
  justify-self: end;
}

.chat-footer .mic-btn {
  grid-column: 2;
  justify-self: center;
}

#screen-chat {
  position: absolute;
  height: var(--app-height);
  min-height: var(--app-height);
}

#screen-chat .chat-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--chat-chrome-gradient);
}

#screen-chat .chat-body {
  position: absolute;
  inset: 0;
  height: auto;
  overflow: visible;
  z-index: 1;
}

#screen-chat .chat-topics {
  position: absolute;
  inset: 0;
  height: auto;
  min-height: 0;
  padding-top: var(--chat-topics-pad-top);
  padding-bottom: var(--chat-footer-reserved);
  scroll-padding-top: var(--chat-topics-pad-top);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  contain: layout paint;
  z-index: 1;
}

#screen-chat .chat-empty,
#screen-chat .chat-processing {
  z-index: 2;
}

#screen-chat .chat-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--visual-viewport-bottom-inset);
  z-index: 40;
  background: var(--chat-chrome-gradient-footer);
}

.icon-btn svg,
.back-btn svg,
.nav-back-btn svg,
.mic-btn svg,
.self-avatar {
  position: relative;
  z-index: 1;
}

@keyframes besties-float-chloe {
  0%, 100% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(0.375rem, -0.5rem, 0); }
  50% { transform: translate3d(0.625rem, 0.25rem, 0); }
  75% { transform: translate3d(-0.25rem, 0.625rem, 0); }
}

@keyframes besties-float-maria {
  0%, 100% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(-0.5rem, 0.375rem, 0); }
  50% { transform: translate3d(-0.625rem, -0.25rem, 0); }
  75% { transform: translate3d(0.25rem, -0.625rem, 0); }
}

@keyframes besties-float-single {
  0%, 100% { transform: translate3d(-50%, -50%, 0); }
  20% { transform: translate3d(calc(-50% + 0.28rem), calc(-50% - 0.36rem), 0); }
  40% { transform: translate3d(calc(-50% + 0.52rem), calc(-50% - 0.06rem), 0); }
  60% { transform: translate3d(calc(-50% + 0.4rem), calc(-50% + 0.32rem), 0); }
  80% { transform: translate3d(calc(-50% - 0.18rem), calc(-50% + 0.48rem), 0); }
}

.recording-backdrop {
  background: rgba(181, 181, 181, 0.52);
  backdrop-filter: blur(0.75rem) brightness(0.92);
  -webkit-backdrop-filter: blur(0.75rem) brightness(0.92);
}

.recording-sheet {
  background: rgba(255, 255, 255, 0.88);
  border-radius: var(--radius-shell) var(--radius-shell) 0 0;
  padding: 1.125rem 1.125rem 2.625rem;
}

#recording-overlay .recording-sheet,
#analysis-overlay .recording-sheet {
  box-shadow: var(--shadow-sheet);
}

.recording-sheet__handle,
.sheet-handle {
  display: none;
}

.rec-row--top {
  margin-bottom: 1.25rem;
}

.rec-icon-btn:not(.glassNavButton) {
  width: var(--size-control-lg);
  height: var(--size-control-lg);
  background: rgba(255,255,255,0.68);
  color: var(--text-primary);
}

.rec-timer {
  font-size: var(--font-size-ui-lg);
  font-weight: 700;
}

.waveform-wrap {
  height: 4.75rem;
  margin-bottom: 1.25rem;
}

.stop-btn:not(.glassNavButton),
.rec-action-btn--play {
  width: 5.125rem;
  height: 5.125rem;
}

.rec-action-btn:not(.glassNavButton) {
  width: 3.75rem;
  height: 3.75rem;
}

.analysis-heading {
  gap: 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
}

.analysis-bars {
  gap: 1rem;
  padding: 0.5rem 0.125rem 0.5rem;
  min-height: 7.5rem;
}

.analysis-bar__label {
  font-size: 0.875rem;
}

.analysis-bar__track {
  height: 0.5rem;
  border-radius: 62.438rem;
  background: rgba(177, 205, 233, 0.46);
}

.analysis-bar__fill {
  border-radius: 62.438rem;
  background: linear-gradient(90deg, rgba(199,221,248,0.95), rgba(170,199,229,0.95));
}

.analysis-bar__dur {
  right: 0;
  top: 0.75rem;
  transform: none;
}

.chat-topics {
  gap: 1rem;
  padding: 1.125rem 1rem 7.375rem;
}

.topic-card {
  border-radius: 1.375rem;
  background: rgba(255,255,255,0.56);
  border: 0.062rem solid rgba(255,255,255,0.72);
  box-shadow: 0 0.625rem 1.75rem rgba(224, 219, 237, 0.16);
}

.topic-card__top {
  padding: 0.875rem 0.75rem 0.625rem;
  gap: 0.75rem;
}

.topic-card__summary {
  gap: 0.25rem;
}

.topic-card__eyebrow {
  font-size: 0.625rem;
}

.topic-card__range {
  padding: 0.188rem 0.438rem;
  background: rgba(255, 255, 255, 0.56);
}

.topic-card__status {
  margin-left: auto;
  padding: 0.25rem 0.5rem;
  border-radius: 62.438rem;
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.topic-card__status--new {
  background: rgba(249, 120, 120, 0.14);
  color: rgba(166, 42, 42, 0.78);
}

.topic-card__title {
  font-size: 1.062rem;
  line-height: 1.12;
}

.topic-card__excerpt {
  font-size: 0.75rem;
  line-height: 1.34;
}

.topic-card__bars {
  gap: 0.625rem;
}

.msg-bar {
  height: 3.25rem;
  border-radius: 1rem;
  padding: 0 0.625rem 0.625rem;
  background: rgba(255,255,255,0.84);
}

.msg-bar::after {
  left: 0.625rem;
  right: 0.625rem;
  bottom: 0.625rem;
  top: auto;
  height: 0.125rem;
  border-radius: 62.438rem;
  background: linear-gradient(90deg, rgba(182,199,220,0.95) 0%, rgba(206,193,228,0.95) 55%, rgba(229,208,183,0.95) 100%);
}

.msg-bar__label {
  color: rgba(0, 0, 0, 0.82);
  max-width: calc(100% - 6.75rem);
}

.msg-bar__leading {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: rgba(246, 246, 248, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.625rem;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.msg-bar__play-icon {
  width: 0;
  height: 0;
  border-top: 0.375rem solid transparent;
  border-bottom: 0.375rem solid transparent;
  border-left: 0.562rem solid #111;
  margin-left: 0.125rem;
}

.msg-bar__meta {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-left: auto;
  margin-right: 0.5rem;
  position: relative;
  z-index: 1;
}

.msg-bar__time {
  font-size: 0.75rem;
  color: rgba(0,0,0,0.64);
  white-space: nowrap;
}

.msg-bar__avatar {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 0.094rem rgba(255,255,255,0.9);
}

.msg-bar__dur {
  color: rgba(0, 0, 0, 0.66);
}

.topic-reply-row {
  justify-content: center;
  padding: 0 0 0.125rem;
}

.reply-chip {
  width: 1.25rem;
  height: 1.25rem;
  background-size: cover !important;
  background-position: center !important;
}

.reply-count {
  font-size: 0.688rem;
}

.topic-thread {
  border-top: 0.062rem solid rgba(0, 0, 0, 0.03);
  padding: 0.5rem 0.75rem 0.75rem;
}

.thread-msg__avatar {
  width: 1.5rem;
  height: 1.5rem;
  background-size: cover !important;
  background-position: center !important;
}

/* ═══════════════════════════════════════════════════════
   ANALYSIS MODAL
   (overlays reuse .recording-overlay / .recording-sheet)
   ═══════════════════════════════════════════════════════ */

/* "✦ Analyzing" header text */
.analysis-heading {
  display: flex;
  align-items: center;
  gap: 0.438rem;
  font-size: 1.062rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.013rem;
}

.analysis-sparkle {
  width: 1.125rem;
  height: 1.125rem;
  object-fit: contain;
  opacity: 0.9;
  flex-shrink: 0;
}

#analysis-overlay.visible .analysis-sparkle {
  animation: analysis-spin 14s linear infinite;
  transform-origin: center;
}

@keyframes analysis-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Segment bars container */
.analysis-bars {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1rem 0 0.5rem;
  min-height: 5rem;
}

/* Individual segment bar */
.analysis-bar {
  display: flex;
  flex-direction: column;
  gap: 0.438rem;
  opacity: 0;
  transform: translateY(0.375rem);
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.analysis-bar.reveal {
  opacity: 1;
  transform: translateY(0);
}

.analysis-bar__label {
  font-size: 0.688rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.62);
  letter-spacing: -0.006rem;
  padding-left: 0.125rem;
}

.analysis-bar__track {
  height: 0.875rem;
  border-radius: 62.438rem;
  background: transparent;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
}

.analysis-bar__track::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 0.25rem;
  transform: translateY(-50%);
  border-radius: 62.438rem;
  background: rgba(171, 199, 232, 0.34);
  box-shadow:
    0 0 0 0.062rem rgba(194, 220, 246, 0.4),
    0 0 0.625rem rgba(185, 209, 237, 0.18);
}

.analysis-bar__fill {
  position: absolute;
  left: 0;
  top: 50%;
  height: 0.25rem;
  width: 0%;
  transform: translateY(-50%);
  border-radius: 62.438rem;
  background:
    linear-gradient(90deg,
      rgba(176, 211, 255, 0.9) 0%,
      rgba(196, 221, 255, 0.95) 52%,
      rgba(222, 236, 255, 0.92) 100%);
  box-shadow:
    0 0 0 0.062rem rgba(220, 234, 255, 0.48),
    0 0 0.75rem rgba(173, 205, 242, 0.42),
    0 0 1.375rem rgba(194, 222, 255, 0.26);
  transition: width 0.62s cubic-bezier(0.32, 0.94, 0.6, 1);
}

.analysis-bar__fill.filled {
  width: 100%;
}

.analysis-bar__dur {
  position: absolute;
  right: 0;
  top: -0.125rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.44);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity 0.24s ease;
}

.analysis-bar.filling .analysis-bar__fill {
  animation: analysis-bar-glow 0.9s ease-in-out infinite alternate;
}

.analysis-bar.settled .analysis-bar__dur {
  opacity: 1;
}

@keyframes analysis-bar-glow {
  from {
    box-shadow:
      0 0 0 0.062rem rgba(220, 234, 255, 0.44),
      0 0 0.625rem rgba(173, 205, 242, 0.32),
      0 0 1rem rgba(194, 222, 255, 0.16);
  }
  to {
    box-shadow:
      0 0 0 0.062rem rgba(226, 238, 255, 0.6),
      0 0 1rem rgba(181, 212, 248, 0.5),
      0 0 1.75rem rgba(206, 230, 255, 0.28);
  }
}

/* ═══════════════════════════════════════════════════════
   TOPIC CARDS
   ═══════════════════════════════════════════════════════ */

/* Override: chat-topics is display flex column, scrollable */
.chat-topics {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1.125rem 6.25rem; /* bottom padding for mic btn clearance */
  overflow-y: auto;
  height: 100%;
  -webkit-overflow-scrolling: touch;
}

.topic-card {
  border-radius: var(--r-lg);
  background: var(--glass-bg);
  border: 0.062rem solid var(--glass-border);
  box-shadow: var(--shadow-card);
  overflow: visible;
  transition: box-shadow var(--t-fast);
}

.topic-card.expanded {
  box-shadow: none;
}

.topic-card__top {
  padding: 0.875rem 0.875rem 0.812rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.topic-card__top:active { opacity: 0.85; }

.topic-card__summary {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.topic-card__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.688rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.38);
}

.topic-card__range {
  padding: 0.25rem 0.438rem;
  border-radius: 62.438rem;
  background: rgba(255, 255, 255, 0.7);
  color: rgba(0, 0, 0, 0.5);
  font-weight: 400;
}

.topic-card__parent {
  font-weight: 400;
}

.topic-card__status {
  margin-left: auto;
  padding: 0.25rem 0.5rem;
  border-radius: 62.438rem;
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.topic-card__status--new {
  background: rgba(249, 120, 120, 0.14);
  color: rgba(166, 42, 42, 0.78);
}

.topic-card__title {
  font-size: 1.125rem;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.84);
}

.topic-card__excerpt {
  font-size: 0.812rem;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.52);
}

.topic-card__bars {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}

/* ── Message bar ─────────────────────────────────────── */
.msg-bar {
  height: 2.75rem;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.812rem;
  position: relative;
  overflow: hidden;
  transition: filter var(--t-fast), transform var(--t-fast);
  min-width: 0;
}

/* Subtle inner "waveform" texture */
.msg-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0rem,
    transparent 0.188rem,
    rgba(255,255,255,0.12) 0.188rem,
    rgba(255,255,255,0.12) 0.25rem
  );
  pointer-events: none;
}

.msg-bar--sooim  { background: var(--color-sooim); }
.msg-bar--chloe  { background: var(--color-chloe); }
.msg-bar--maria  { background: var(--color-maria); }

.msg-bar--playable {
  cursor: pointer;
}

.msg-bar--playable:active {
  filter: brightness(0.94);
  transform: scale(0.99);
}

.msg-bar--playing {
  box-shadow: 0 0 0 0.125rem rgba(0,0,0,0.15);
}

.msg-bar__label {
  font-size: 0.812rem;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.55);
  letter-spacing: -0.006rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 3rem);
  position: relative;
  z-index: 1;
}

.msg-bar__dur {
  font-size: 0.75rem;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.35);
  font-variant-numeric: tabular-nums;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

/* Arriving animation (new reply bar sliding in) */
.msg-bar--arriving {
  opacity: 0;
  transform: translateX(-0.5rem);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ── Reply info row ──────────────────────────────────── */
.topic-reply-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.125rem 0 0;
}

.reply-chips {
  display: flex;
}

.reply-chip {
  width: 1.375rem;
  height: 1.375rem;
  border-radius: var(--r-full);
  font-size: 0.625rem;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.125rem solid white;
  margin-left: -0.312rem;
  color: rgba(0, 0, 0, 0.5);
}

.reply-chip:first-child { margin-left: 0; }

.reply-count {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-tertiary);
}

/* ── Expanded thread ─────────────────────────────────── */
.topic-thread {
  border-top: 0.062rem solid rgba(0, 0, 0, 0.05);
  padding: 0.625rem 0.875rem 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.35);
}

.topic-thread__seed {
  display: flex;
  flex-direction: column;
  gap: 0.312rem;
  padding: 0.125rem 0.125rem 0.25rem;
}

.topic-thread__seed-label {
  font-size: 0.688rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: rgba(0, 0, 0, 0.34);
  font-weight: 400;
}

.topic-thread__seed-text {
  font-size: 0.812rem;
  line-height: 1.45;
  color: rgba(0, 0, 0, 0.58);
}

.thread-msg {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  min-width: 0;
}

.thread-msg__avatar {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--r-full);
  font-size: 0.688rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.thread-msg__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.thread-msg__time {
  font-size: 0.688rem;
  color: var(--text-tertiary);
  padding-left: 0.125rem;
}

/* ═══════════════════════════════════════════════════════
   BESTIES ROW REBUILD
   Screenshots override older stacked-card structure
   ═══════════════════════════════════════════════════════ */

.chat-topics {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.125rem 1.125rem 7.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}

.chat-immersive {
  display: none;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.625rem;
  padding: 1.75rem 1.375rem 8.25rem;
  align-content: start;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 236, 214, 0.34), transparent 26%),
    radial-gradient(circle at 82% 24%, rgba(205, 227, 255, 0.28), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0));
}

.immersive-cluster {
  appearance: none;
  border: 0;
  background: transparent;
  position: relative;
  --immersive-bubble-size: 10.75rem;
  --immersive-ring-size: 11.5rem;
  --immersive-bubble-fill: rgba(233, 237, 244, 0.92);
  min-height: 18.375rem;
  padding: 0.625rem 0.25rem 1.125rem;
  color: #111111;
  text-align: center;
  width: min(100%, 15.25rem);
}

.immersive-cluster:nth-child(4n + 1) {
  justify-self: start;
  margin-top: 0;
  margin-left: 0.25rem;
}

.immersive-cluster:nth-child(4n + 2) {
  justify-self: end;
  margin-top: -1.125rem;
  margin-right: 0.25rem;
}

.immersive-cluster:nth-child(4n + 3) {
  justify-self: start;
  margin-top: -0.375rem;
  margin-left: 1.125rem;
}

.immersive-cluster:nth-child(4n + 4) {
  justify-self: end;
  margin-top: -1.375rem;
  margin-right: 0;
}

.immersive-cluster + .immersive-cluster {
  margin-top: 0;
}

.immersive-cluster__halo,
.immersive-cluster__ring {
  position: absolute;
  inset: 1.625rem 1.125rem 3.875rem;
  border-radius: 62.438rem;
  pointer-events: none;
}

.immersive-cluster__halo {
  opacity: 0;
}

.immersive-cluster__ring {
  background: radial-gradient(circle at center, rgba(255,255,255,0.06), rgba(255,255,255,0));
  box-shadow:
    inset 0 0 0 0.062rem rgba(255,255,255,0.34);
}

.immersive-cluster::after {
  content: none;
}

.immersive-cluster__core::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(var(--immersive-bubble-size) / 2);
  width: var(--immersive-ring-size);
  height: var(--immersive-ring-size);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: conic-gradient(var(--ring-accent, var(--immersive-accent, #b8d8ff)) calc(var(--ring-progress, 0) * 1turn), rgba(255,255,255,0.42) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 0.5rem), #000 calc(100% - 0.438rem));
  mask: radial-gradient(farthest-side, transparent calc(100% - 0.5rem), #000 calc(100% - 0.438rem));
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
  z-index: 2;
}

.immersive-cluster.is-playing .immersive-cluster__core::before {
  opacity: 0.92;
}

.immersive-cluster__core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(100%, 12.375rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  z-index: 2;
}

.immersive-cluster__bubble {
  position: relative;
  width: var(--immersive-bubble-size);
  height: var(--immersive-bubble-size);
  border-radius: 50%;
  background-color: var(--immersive-bubble-fill);
  background-image:
    radial-gradient(circle at 24% 22%, rgba(255,255,255,0.72), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255,0.12));
  background-size: cover, auto, auto;
  background-position: center, center, center;
  background-repeat: no-repeat;
  border: 0.094rem solid rgba(255,255,255,0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  overflow: hidden;
  box-shadow: 0 1.125rem 2.125rem rgba(216, 221, 233, 0.16);
  backdrop-filter: blur(0.875rem) saturate(138%);
  -webkit-backdrop-filter: blur(0.875rem) saturate(138%);
}

.immersive-cluster__bubble-speaker {
  --chat-avatar-accent: var(--speaker-accent, #d8c0f5);
  position: absolute;
  left: 13%;
  top: 18%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  z-index: 3;
}

.immersive-cluster__bubble-speaker .immersive-cluster__speaker-photo {
  position: absolute;
  position: relative;
  width: 3.625rem;
  height: 3.625rem;
}

.immersive-cluster__bubble-speaker .immersive-cluster__speaker-photo.avatar-fallback > span {
  font-size: 1.125rem;
}

.immersive-cluster__bubble::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 24% 22%, rgba(255,255,255,0.38), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.34));
  opacity: 0.92;
  pointer-events: none;
}

.immersive-cluster__subject {
  position: relative;
  z-index: 2;
  max-width: 9ch;
  font-size: 1.125rem;
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.04em;
  text-align: center;
  color: #171717;
  text-shadow: 0 0.062rem 0 rgba(255,255,255,0.42);
}

.immersive-cluster__bubble-initials {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.875rem;
  font-weight: 700;
  letter-spacing: -0.05em;
  color: rgba(17,17,17,0.22);
  z-index: 1;
}

.immersive-cluster__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  gap: 0.375rem;
  width: auto;
  max-width: 100%;
  font-size: 0.688rem;
  font-weight: 600;
  color: rgba(60, 60, 67, 0.56);
  letter-spacing: 0.02em;
}

.immersive-cluster__meta-main {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  justify-content: center;
}

.immersive-cluster__meta-title {
  font-size: 1rem;
  line-height: 1.08;
  font-weight: 700;
  color: rgba(22, 22, 24, 0.9);
  letter-spacing: -0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.immersive-cluster__badge {
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  border-radius: 62.438rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 17, 17, 0.84);
  color: rgba(255,255,255,0.96);
  font-size: 0.688rem;
  font-weight: 700;
  letter-spacing: 0;
  flex-shrink: 0;
}

.immersive-cluster__speaker {
  --chat-avatar-accent: var(--speaker-accent, #d8c0f5);
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  z-index: 3;
  transition: transform 180ms ease, opacity 180ms ease;
}

.immersive-cluster__speaker--top-left { top: 4.375rem; left: 1.125rem; }
.immersive-cluster__speaker--top-right { top: 4.875rem; right: 1rem; }
.immersive-cluster__speaker--bottom-left { bottom: 5.625rem; left: 1.75rem; }
.immersive-cluster__speaker--bottom-right { bottom: 5.125rem; right: 1.5rem; }
.immersive-cluster__speaker--left { left: 0.625rem; top: 50%; transform: translateY(-42%); }
.immersive-cluster__speaker--right { right: 0.625rem; top: 52%; transform: translateY(-36%); }

.immersive-cluster:nth-child(4n + 1) .immersive-cluster__speaker--top-left,
.immersive-cluster:nth-child(4n + 3) .immersive-cluster__speaker--top-left {
  left: 1.75rem;
}

.immersive-cluster:nth-child(4n + 1) .immersive-cluster__speaker--bottom-left,
.immersive-cluster:nth-child(4n + 3) .immersive-cluster__speaker--bottom-left {
  left: 2.625rem;
}

.immersive-cluster:nth-child(4n + 1) .immersive-cluster__speaker--top-right,
.immersive-cluster:nth-child(4n + 3) .immersive-cluster__speaker--top-right {
  right: 0.5rem;
}

.immersive-cluster:nth-child(4n + 1) .immersive-cluster__speaker--bottom-right,
.immersive-cluster:nth-child(4n + 3) .immersive-cluster__speaker--bottom-right {
  right: 0.875rem;
}

.immersive-cluster:nth-child(4n + 2) .immersive-cluster__speaker--top-left,
.immersive-cluster:nth-child(4n + 4) .immersive-cluster__speaker--top-left {
  left: 0.625rem;
}

.immersive-cluster:nth-child(4n + 2) .immersive-cluster__speaker--bottom-left,
.immersive-cluster:nth-child(4n + 4) .immersive-cluster__speaker--bottom-left {
  left: 1.125rem;
}

.immersive-cluster:nth-child(4n + 2) .immersive-cluster__speaker--top-right,
.immersive-cluster:nth-child(4n + 4) .immersive-cluster__speaker--top-right {
  right: 1.75rem;
}

.immersive-cluster:nth-child(4n + 2) .immersive-cluster__speaker--bottom-right,
.immersive-cluster:nth-child(4n + 4) .immersive-cluster__speaker--bottom-right {
  right: 2.125rem;
}

.immersive-cluster__speaker-photo {
  width: 3.625rem;
  height: 3.625rem;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.immersive-cluster__speaker-photo.avatar-fallback > span {
  font-size: 1.125rem;
}

.immersive-cluster__speaker-label {
  max-width: 8.5ch;
  font-size: 0.688rem;
  line-height: 1;
  font-weight: 700;
  text-align: center;
  color: rgba(28, 28, 30, 0.92);
  padding: 0.438rem 0.625rem;
  border-radius: 62.438rem;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--speaker-accent, #d8c0f5) 28%, white 72%) 0%,
    color-mix(in srgb, var(--speaker-accent, #d8c0f5) 44%, white 56%) 100%
  );
  box-shadow:
    0 0.625rem 1.25rem color-mix(in srgb, var(--speaker-accent, #d8c0f5) 28%, rgba(214, 189, 246, 0.22)),
    inset 0 0.062rem 0 rgba(255,255,255,0.82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.immersive-cluster:nth-child(4n + 1) .immersive-cluster__speaker--top-left,
.immersive-cluster:nth-child(4n + 1) .immersive-cluster__speaker--bottom-left,
.immersive-cluster:nth-child(4n + 3) .immersive-cluster__speaker--top-left,
.immersive-cluster:nth-child(4n + 3) .immersive-cluster__speaker--bottom-left {
  align-items: flex-start;
}

.immersive-cluster:nth-child(4n + 1) .immersive-cluster__speaker--top-right,
.immersive-cluster:nth-child(4n + 1) .immersive-cluster__speaker--bottom-right,
.immersive-cluster:nth-child(4n + 3) .immersive-cluster__speaker--top-right,
.immersive-cluster:nth-child(4n + 3) .immersive-cluster__speaker--bottom-right {
  align-items: flex-end;
}

.immersive-cluster:nth-child(4n + 2) .immersive-cluster__speaker--top-left,
.immersive-cluster:nth-child(4n + 2) .immersive-cluster__speaker--bottom-left,
.immersive-cluster:nth-child(4n + 4) .immersive-cluster__speaker--top-left,
.immersive-cluster:nth-child(4n + 4) .immersive-cluster__speaker--bottom-left {
  align-items: flex-start;
}

.immersive-cluster:nth-child(4n + 2) .immersive-cluster__speaker--top-right,
.immersive-cluster:nth-child(4n + 2) .immersive-cluster__speaker--bottom-right,
.immersive-cluster:nth-child(4n + 4) .immersive-cluster__speaker--top-right,
.immersive-cluster:nth-child(4n + 4) .immersive-cluster__speaker--bottom-right {
  align-items: flex-end;
}

.immersive-cluster.is-playing .immersive-cluster__halo {
  animation: immersive-cluster-glow 1.8s ease-in-out infinite;
}

.immersive-cluster__speaker.is-active-speaker .immersive-cluster__speaker-photo,
.immersive-cluster__bubble-speaker.is-active-speaker .immersive-cluster__speaker-photo {
  box-shadow:
    0 0 1.125rem color-mix(in srgb, var(--chat-avatar-accent, #dec0f8) 34%, transparent),
    0 0 2.5rem color-mix(in srgb, var(--chat-avatar-accent, #dec0f8) 28%, transparent),
    inset 0 0.062rem 0 rgba(255,255,255,0.94),
    0 0 0 0.562rem color-mix(in srgb, var(--chat-avatar-accent, #dec0f8) 28%, white 72%),
    0 1.125rem 2.375rem color-mix(in srgb, var(--chat-avatar-accent, #dec0f8) 42%, rgba(225, 227, 235, 0.28) 58%);
  animation: immersive-speaker-pulse 1.45s ease-in-out infinite;
}

.immersive-cluster__speaker.is-active-speaker,
.immersive-cluster__bubble-speaker.is-active-speaker {
  transform: translateY(-0.125rem) scale(1.03);
}

@keyframes immersive-cluster-glow {
  0%, 100% { transform: scale(0.98); opacity: 0.82; }
  50% { transform: scale(1.04); opacity: 1; }
}

@keyframes immersive-speaker-pulse {
  0%, 100% {
    box-shadow:
      0 0 1.125rem color-mix(in srgb, var(--chat-avatar-accent, #dec0f8) 34%, transparent),
      0 0 2.5rem color-mix(in srgb, var(--chat-avatar-accent, #dec0f8) 28%, transparent),
      inset 0 0.062rem 0 rgba(255,255,255,0.94),
      0 0 0 0.375rem color-mix(in srgb, var(--chat-avatar-accent, #dec0f8) 20%, white 80%),
      0 0.875rem 1.875rem color-mix(in srgb, var(--chat-avatar-accent, #dec0f8) 30%, rgba(225, 227, 235, 0.28) 70%);
  }
  50% {
    box-shadow:
      0 0 1.125rem color-mix(in srgb, var(--chat-avatar-accent, #dec0f8) 34%, transparent),
      0 0 2.5rem color-mix(in srgb, var(--chat-avatar-accent, #dec0f8) 28%, transparent),
      inset 0 0.062rem 0 rgba(255,255,255,0.94),
      0 0 0 0.688rem color-mix(in srgb, var(--chat-avatar-accent, #dec0f8) 32%, white 68%),
      0 1.125rem 2.375rem color-mix(in srgb, var(--chat-avatar-accent, #dec0f8) 44%, rgba(225, 227, 235, 0.28) 56%);
  }
}

.topic-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  contain: layout style;
}

.topic-card__surface {
  width: 100%;
  border-radius: 1.125rem;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 0.375rem 1.125rem rgba(229, 224, 235, 0.18);
  border: 0.062rem solid rgba(232, 230, 238, 0.85);
  padding: 0 0.875rem;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
  cursor: default;
}

.topic-card__surface:has(.topic-card__reply-summary) {
  pointer-events: auto;
  cursor: pointer;
}

.topic-card.expanded .topic-card__surface,
.topic-card__surface.is-expanded {
  box-shadow:
    0 0 0 0.094rem rgba(184, 216, 255, 0.4),
    0 0.25rem 1.75rem rgba(0, 0, 0, 0.08),
    0 0.625rem 1.625rem rgba(214, 212, 228, 0.24);
  gap: 0;
  flex: 1 1 auto;
  min-height: 100%;
  margin-block-end: 0;
  padding-block-end: 0.875rem;
}

.topic-row,
.reply-row {
  width: 100%;
  border: 0;
  background: rgba(255, 255, 255, 0.58);
  border-radius: 1.125rem;
  padding: 0.875rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-align: left;
  box-shadow: 0 0.5rem 1.25rem rgba(224, 219, 237, 0.12);
  border: 0.062rem solid rgba(255, 255, 255, 0.68);
  cursor: default;
  appearance: none;
  -webkit-appearance: none;
}

.topic-row__play.is-playing {
  box-shadow: 0 0.5rem 1.375rem rgba(208, 214, 238, 0.28);
}

/* Reply-row selected/playing: match topic-card selected chrome exactly */
.reply-row.is-playing,
.reply-row.is-playback-session {
  box-shadow:
    0 0 0 0.094rem rgba(184, 216, 255, 0.4),
    0 0.25rem 1.75rem rgba(0, 0, 0, 0.08),
    0 0.625rem 1.625rem rgba(214, 212, 228, 0.24);
}

.topic-row__play.is-playable.is-playing {
  box-shadow:
    inset 0 0.062rem 0 rgba(255, 255, 255, 0.88),
    0 0.5rem 1.125rem rgba(216, 221, 233, 0.22),
    0 0.1875rem 0.625rem rgba(18, 24, 38, 0.12),
    0 0.5rem 1.5rem rgba(18, 24, 38, 0.08),
    0 0.5rem 1.375rem rgba(208, 214, 238, 0.28);
}

.topic-row__header,
.reply-row__header {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.topic-row__play,
.reply-row__play {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 62.438rem;
  background: rgba(245, 246, 248, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  box-shadow:
    inset 0 0.062rem 0 rgba(255,255,255,0.88),
    0 0.5rem 1rem rgba(216, 221, 233, 0.18);
  backdrop-filter: blur(0.75rem);
  -webkit-backdrop-filter: blur(0.75rem);
  cursor: pointer;
  pointer-events: auto;
  color: rgba(17, 17, 17, 0.92);
}

.topic-row__play {
  box-shadow:
    inset 0 0.062rem 0 rgba(255, 255, 255, 0.88),
    0 0.5rem 1.125rem rgba(216, 221, 233, 0.22),
    0 0.1875rem 0.625rem rgba(18, 24, 38, 0.12),
    0 0.5rem 1.5rem rgba(18, 24, 38, 0.08);
}

/* Same chrome + drop shadow as #btn-chat-more / .glassNavButton */
.glassNavButton.topic-row__play {
  overflow: visible;
  background: var(--glass-btn-bg);
  backdrop-filter: blur(1.5rem) saturate(150%);
  -webkit-backdrop-filter: blur(1.5rem) saturate(150%);
  border: var(--border-glass-soft);
  box-shadow: var(--shadow-glass-btn);
  filter: drop-shadow(var(--glass-nav-drop-shadow));
}

/* Reply-row play icon should match glassNavButton chrome + drop shadow */
.reply-row__play {
  overflow: visible;
  background: var(--glass-btn-bg);
  backdrop-filter: blur(1.5rem) saturate(150%);
  -webkit-backdrop-filter: blur(1.5rem) saturate(150%);
  border: var(--border-glass-soft);
  box-shadow: var(--shadow-glass-btn);
  filter: drop-shadow(var(--glass-nav-drop-shadow));
}

.glassNavButton.topic-row__play.is-playing {
  box-shadow: var(--shadow-glass-btn);
  filter: drop-shadow(var(--glass-nav-drop-shadow));
}

.glassNavButton.topic-row__play.is-playable.is-playing {
  box-shadow:
    var(--shadow-glass-btn),
    0 0.5rem 1.375rem rgba(208, 214, 238, 0.28);
  filter: drop-shadow(var(--glass-nav-drop-shadow));
}

.topic-row__header {
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  gap: 0.75rem;
}

.topic-row__play-icon {
  display: block;
  flex-shrink: 0;
  pointer-events: none;
}

.glassNavButton.topic-row__play > .topic-row__play-icon {
  width: calc(var(--glass-nav-icon-secondary) * 0.62);
  height: calc(var(--glass-nav-icon-secondary) * 0.62);
}

/* Reply rows: slightly larger icon for thumb taps */
.reply-row__play .topic-row__play-icon {
  width: calc(var(--glass-nav-icon-secondary) * 0.72);
  height: calc(var(--glass-nav-icon-secondary) * 0.72);
}

.topic-row__play-icon-pause {
  display: none;
}

.glassNavButton.topic-row__play .topic-row__play-icon-play,
.reply-row__play .topic-row__play-icon-play {
  transform: scale(0.58);
  transform-origin: 50% 50%;
  transform-box: fill-box;
}

.topic-row__play.is-playing .topic-row__play-icon-play,
.reply-row.is-playing .topic-row__play-icon-play {
  display: none;
}

.topic-row__play.is-playing .topic-row__play-icon-pause,
.reply-row.is-playing .topic-row__play-icon-pause {
  display: block;
}

/* Pause bars slightly smaller than default; tuned vs. play triangle on glass control */
.glassNavButton.topic-row__play.is-playing .topic-row__play-icon-pause {
  transform: scale(0.6);
  transform-origin: 50% 50%;
  transform-box: fill-box;
}

.topic-row__title,
.reply-row__title {
  font-size: 0.812rem;
  line-height: 1.2;
  font-weight: 600;
  color: rgba(18, 18, 18, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topic-row__title {
  font-size: 1.062rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.reply-row__title {
  font-weight: 700;
  letter-spacing: 0;
}

.topic-row__meta,
.reply-row__meta {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}

.topic-row__time,
.reply-row__time,
.topic-row__tick {
  font-size: 0.688rem;
  color: rgba(34, 34, 34, 0.58);
  font-variant-numeric: tabular-nums;
}

.topic-row__avatar,
.reply-row__avatar,
.topic-card__avatar {
  width: 1.062rem;
  height: 1.062rem;
  border-radius: 62.438rem;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.topic-row__trackline,
.reply-row__trackline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.375rem;
}

.topic-row__track {
  position: relative;
  height: 0.125rem;
  border-radius: 62.438rem;
  background: transparent;
  display: flex;
  align-items: stretch;
  overflow: visible;
  gap: 0.375rem;
  /* Same radii/stops as .floating-avatar__photo; --topic-track-glow set from JS for the active speaker */
  box-shadow:
    0 0 1.125rem color-mix(in srgb, var(--topic-track-glow, transparent) 34%, transparent),
    0 0 2.5rem color-mix(in srgb, var(--topic-track-glow, transparent) 28%, transparent);
}

.topic-row__segment-cell {
  position: relative;
  height: 100%;
  border-radius: 62.438rem;
  flex: 1 1 0;
  min-width: 0.125rem;
  background: #D1D1D6;
  overflow: hidden;
}

.topic-row__segment-progress {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--segment-fill, transparent);
  transform-origin: left center;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity var(--t-fast);
}

.topic-row.is-playback-session .topic-row__segment-progress,
.topic-row:has(.topic-row__play.is-playing) .topic-row__segment-progress,
.reply-row.is-playing .topic-row__segment-progress,
.reply-row.is-playback-session .topic-row__segment-progress {
  /* Subtle speaker-tinted halo under the playing segment bar */
  box-shadow:
    0 0 0.75rem color-mix(in srgb, var(--topic-track-glow, transparent) 28%, transparent),
    0 0 1.5rem color-mix(in srgb, var(--topic-track-glow, transparent) 18%, transparent);
}

.topic-row:has(.topic-row__play.is-playing) .topic-row__segment-progress,
.topic-row.is-playback-session .topic-row__segment-progress,
.reply-row.is-playing .topic-row__segment-progress,
.reply-row.is-playback-session .topic-row__segment-progress {
  opacity: 1;
}

.topic-card__reply-summary,
.topic-card__participants,
.topic-thread__toggle {
  align-self: center;
  border: 0;
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: rgba(70, 70, 70, 0.58);
  font-size: 0.688rem;
  font-weight: 400;
  cursor: default;
  margin: 0 auto;
}

.topic-card__participants {
  pointer-events: none;
}

.topic-card__avatars {
  display: flex;
  align-items: center;
}

.topic-card__avatar {
  width: 1.25rem;
  height: 1.25rem;
  margin-left: -0.312rem;
  box-shadow: 0 0 0 0.125rem rgba(255, 255, 255, 0.95);
}

.topic-card__avatar:first-child {
  margin-left: 0;
}

.topic-card__avatar.avatar-fallback,
.reply-row__avatar.avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(17, 17, 17, 0.55);
}

.topic-thread {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0.125rem 0 0;
  background: transparent;
  border-top: 0;
  overflow: visible;
}

.topic-thread__replies {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.topic-thread__reply-btn {
  min-height: 2.875rem;
  border-radius: 1rem;
  padding: 0 0.875rem;
  background: rgba(255, 255, 255, 0.9);
  border: 0.062rem solid rgba(232, 230, 238, 0.9);
  color: rgba(17, 17, 17, 0.88);
  font: inherit;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.reply-row {
  background: rgba(255, 255, 255, 0.98);
  border: 0.062rem solid rgba(232, 230, 238, 0.9);
  padding: 0.625rem 0.625rem 0.5rem;
  cursor: pointer;
}

/* Match chat-topics pressed chrome (subtle blue stroke + lifted shadow) */
.reply-row.is-playable:active {
  border-color: rgba(184, 216, 255, 0.6);
  box-shadow:
    0 0 0 0.094rem rgba(184, 216, 255, 0.4),
    0 0.25rem 1.75rem rgba(0, 0, 0, 0.08),
    0 0.625rem 1.625rem rgba(214, 212, 228, 0.24);
}

/* ═══════════════════════════════════════════════════════
   GLOBAL TYPE + BACKGROUND FINAL OVERRIDES
   ═══════════════════════════════════════════════════════ */

body,
button,
input,
textarea,
select,
.perm-sub,
.perm-btn,
.chats-empty-state__label,
.chat-card__name,
.floating-avatar__label,
.analysis-bar__label,
.analysis-bar__dur,
.topic-card__eyebrow,
.topic-card__range,
.topic-card__parent,
.topic-card__status,
.topic-card__excerpt,
.msg-bar__label,
.msg-bar__dur,
.reply-count,
.topic-thread__seed-label,
.topic-thread__seed-text,
.thread-msg__time,
.topic-row__time,
.reply-row__time,
.topic-row__tick,
.topic-card__reply-summary,
.topic-card__participants,
.topic-thread__toggle {
  font-weight: 400;
}

.np-avatar__label,
.floating-avatar__label {
  font-weight: 600;
}

.splash-logo,
.perm-heading,
.top-bar__title,
.chat-title,
.topic-card__title,
.analysis-heading {
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════
   RECORDING SCREEN FINAL OVERRIDES
   ═══════════════════════════════════════════════════════ */

.back-btn:not(.nav-back-btn),
.icon-btn,
.icon-btn--header,
.rec-icon-btn:not(.glassNavButton) {
  background: var(--control-glass-bg);
  backdrop-filter: blur(1.5rem) saturate(150%);
  -webkit-backdrop-filter: blur(1.5rem) saturate(150%);
  border: var(--border-glass-soft);
  box-shadow: var(--control-glass-shadow);
}

#recording-overlay .recording-backdrop {
  background: rgba(118, 118, 118, 0.28);
  backdrop-filter: blur(0.625rem) brightness(0.86);
  -webkit-backdrop-filter: blur(0.625rem) brightness(0.86);
}

#recording-overlay .recording-sheet {
  position: absolute;
  left: var(--recording-sheet-inset);
  right: var(--recording-sheet-inset);
  top: var(--recording-sheet-top);
  /* Anchor to the real viewport bottom across Safari/PWA/keyboard states */
  bottom: var(--visual-viewport-bottom-inset);
  max-height: calc(var(--app-height) - var(--recording-sheet-top) - var(--visual-viewport-bottom-inset));
  border-radius: calc(var(--radius-shell) + 0.625rem) calc(var(--radius-shell) + 0.625rem) 2.25rem 2.25rem;
  padding: clamp(1.5rem, 5vw, 2.75rem) clamp(0.875rem, 4vw, 1.25rem) calc(1.375rem + env(safe-area-inset-bottom) + var(--visual-viewport-bottom-inset));
  background: rgba(239, 238, 242, 0.92);
  backdrop-filter: blur(2rem);
  -webkit-backdrop-filter: blur(2rem);
  box-shadow: 0 1.25rem 4rem rgba(129, 124, 148, 0.24);
  transform: translateY(0.875rem) scale(0.985);
  opacity: 0;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

#recording-overlay.visible .recording-sheet {
  transform: translateY(0) scale(1);
  opacity: 1;
}

#recording-overlay .recording-sheet__handle {
  display: none;
}

#recording-overlay .rec-row--top {
  justify-content: space-between;
  margin-bottom: 0.875rem;
  height: 2.75rem;
}

#recording-overlay .rec-icon-btn,
#analysis-overlay .rec-icon-btn {
  color: var(--text-primary);
  position: relative;
  overflow: hidden;
}

#recording-overlay .rec-timer {
  font-size: var(--font-size-ui-lg);
  font-weight: 600;
  color: #111;
  letter-spacing: -0.01em;
}

#recording-overlay .waveform-wrap {
  position: relative;
  height: clamp(17.5rem, 48vh, 26.25rem);
  margin: 0.5rem calc(clamp(0.875rem, 4vw, 1.25rem) * -1) clamp(1rem, 4vw, 1.375rem);
  overflow: hidden;
  border-radius: 0;
  background: transparent;
}

#recording-overlay .waveform-video {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150%;
  height: 150%;
  object-fit: cover;
  transform: translate3d(calc(-50% + var(--video-drift-x, 0rem)), calc(-50% + var(--video-drift-y, 0rem)), 0) rotate(90deg) scale(var(--video-scale, 0.9));
  filter:
    brightness(var(--video-brightness, 1))
    saturate(var(--video-saturate, 1))
    contrast(1.14)
    blur(var(--video-blur, 0rem));
  mix-blend-mode: darken;
  opacity: 0.82;
  transition: transform 120ms linear, filter 120ms linear;
  box-shadow: 0 0 3rem rgba(255, 255, 255, var(--video-glow, 0));
}

#recording-overlay .waveform-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.waveform-aura {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.2;
  filter: blur(1.5rem);
  mix-blend-mode: screen;
}

.waveform-aura--left {
  background:
    radial-gradient(circle at 12% 44%, rgba(255, 180, 79, 0.82) 0%, rgba(255, 103, 44, 0.62) 10%, rgba(163, 73, 255, 0.42) 20%, rgba(163, 73, 255, 0) 34%);
}

.waveform-aura--right {
  background:
    radial-gradient(circle at 84% 50%, rgba(122, 242, 255, 0.48) 0%, rgba(122, 242, 255, 0.24) 11%, rgba(122, 242, 255, 0) 26%),
    radial-gradient(circle at 58% 64%, rgba(244, 121, 255, 0.24) 0%, rgba(244, 121, 255, 0) 24%);
}

#recording-overlay .rec-live-transcript {
  margin: 0 0 clamp(1.5rem, 9vw, 3.625rem) clamp(0.5rem, 3vw, 1rem);
  min-height: 1.5rem;
  font-size: 1.062rem;
  line-height: 1.35;
  color: #1a1a1a;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  text-align: right;
  padding-right: 0;
  mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.18) 12%, rgba(0,0,0,0.92) 28%, rgba(0,0,0,1) 100%);
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.18) 12%, rgba(0,0,0,0.92) 28%, rgba(0,0,0,1) 100%);
}

#recording-overlay .rec-live-transcript.is-placeholder {
  margin-left: 0;
  text-align: center;
  mask-image: none;
  -webkit-mask-image: none;
}

#recording-overlay .rec-row--actions {
  height: auto;
  gap: var(--footer-rec-control-gap);
  align-items: center;
}

/* Same grid as .chat-footer: primary centered on screen; secondary in side column, end-aligned (only gap between discard & stop) */
#recording-overlay #rec-actions-recording {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--mic-size) minmax(0, 1fr);
  align-items: center;
  justify-content: normal;
  gap: var(--footer-rec-control-gap);
  width: 100%;
}

#recording-overlay #rec-actions-recording #btn-discard-recording {
  grid-column: 1;
  justify-self: end;
}

#recording-overlay #rec-actions-recording #btn-stop {
  grid-column: 2;
  justify-self: center;
}

#recording-overlay #rec-actions-stopped {
  justify-content: center;
}

/* Match .floating-avatar--primary .floating-avatar__label: strong 0.98 / 0.92 gradient stops + soft tinted shadow */
#recording-overlay .glassNavButton--send {
  background: linear-gradient(
    180deg,
    rgba(232, 241, 255, 0.98) 0%,
    rgba(210, 228, 255, 0.92) 100%
  );
  box-shadow:
    var(--shadow-glass-btn),
    0 0.625rem 1.625rem rgba(184, 216, 255, 0.34),
    inset 0 0.062rem 0 rgba(255, 255, 255, 0.78);
}

#recording-overlay #btn-play.playing {
  box-shadow:
    inset 0 0.062rem 0 rgba(255,255,255,0.96),
    inset 0 -0.625rem 1.375rem rgba(255,255,255,0.22),
    0 0.625rem 1.75rem rgba(220, 221, 230, 0.24),
    0 0 0 0.125rem rgba(184, 216, 255, 0.62);
}

/* ═══════════════════════════════════════════════════════
   IOS SETTINGS
   ═══════════════════════════════════════════════════════ */
.ios-settings-screen {
  height: 100%;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--screen-background);
}

.ios-settings-nav {
  display: grid;
  grid-template-columns: 2.625rem 1fr 2.625rem;
  align-items: center;
  gap: 0.5rem;
  padding: max(0.75rem, calc(env(safe-area-inset-top) + 0.25rem)) 1rem 0.625rem;
  position: sticky;
  top: 0;
  z-index: 4;
  background:
    linear-gradient(180deg, rgba(184, 216, 255, 0.34) 0%, rgba(184, 216, 255, 0.16) 48%, rgba(184, 216, 255, 0) 100%);
  backdrop-filter: blur(1.125rem) saturate(135%);
  -webkit-backdrop-filter: blur(1.125rem) saturate(135%);
  border-bottom: 0;
  flex-shrink: 0;
}

.ios-settings-nav__title {
  text-align: center;
  font-size: 1.062rem;
  font-weight: 600;
  color: #111111;
}

.ios-settings-nav__btn {
  font: inherit;
  font-size: 1.062rem;
  line-height: 1.2;
  color: #007aff;
  padding: 0.375rem 0.25rem;
}

.ios-settings-nav__btn--done {
  justify-self: end;
  font-weight: 600;
  width: 2.625rem;
  height: 2.625rem;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #111111;
  background: rgba(255,255,255,0.84);
  box-shadow:
    inset 0 0.062rem 0 rgba(255,255,255,0.95),
    0 0.75rem 1.75rem rgba(229, 228, 238, 0.24);
  font-size: 0.75rem;
  letter-spacing: -0.01em;
}

.ios-settings-nav__spacer {
  justify-self: end;
  width: 2.625rem;
  height: 2.625rem;
}

/* Profile: match chat settings header layout (hero + edit in nav) */
#screen-profile .ios-settings-nav--profile {
  /* Keep hero perfectly centered even when Edit ↔ Done button width changes */
  grid-template-columns: 2.625rem minmax(0, 1fr) 3.625rem;
  align-items: start;
}

#screen-profile .profile-details-hero {
  grid-column: 2;
  align-self: start;
  justify-self: center;
  min-width: 0;
  padding: 0 0.375rem 0.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

#screen-profile .profile-details-hero .ios-profile-photo-button {
  justify-self: center;
}

#screen-profile .profile-details-hero .group-details-hero__name {
  /* Match group settings title field behavior inside profile header */
  max-width: 12ch;
  margin-inline: auto;
}

.ios-settings-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem 0 calc(1.375rem + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
  scroll-padding-bottom: calc(var(--keyboard-inset) + 1.5rem);
}

#screen-group-settings .ios-settings-scroll {
  padding-block: 0;
}

.ios-settings-section {
  margin: 0 0 1.125rem;
}

#screen-profile .ios-settings-scroll {
  padding-block: 0;
}

#screen-profile .ios-settings-section {
  margin: 0;
}

.ios-settings-section__label {
  padding: 0 1.25rem 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(60, 60, 67, 0.72);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ios-settings-card {
  margin: 0 1rem;
  background: #ffffff;
  border-radius: 62.438rem;
  box-shadow: none;
  overflow: hidden;
}

.ios-settings-card--hero {
  padding: 1.375rem 1.125rem 1.125rem;
  border-radius: 1.875rem;
}

.ios-settings-card--list {
  display: flex;
  flex-direction: column;
}

/* (intentionally left blank) */

.ios-profile-hero,
.ios-group-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.settings-avatar--xl,
.ios-group-hero__avatar {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
}

.ios-profile-hero__name,
.ios-group-hero__name {
  font-size: 1.375rem;
  line-height: 1.1;
  font-weight: 600;
  color: #111111;
  text-align: center;
}

.ios-profile-hero__name-input {
  width: min(100%, 12ch);
  border: 0;
  background: transparent;
  padding: 0;
  outline: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  caret-color: #111111;
}

.ios-profile-hero__name-input:focus,
.ios-profile-hero__name-input:focus-visible {
  outline: none;
  box-shadow: none;
}

.ios-profile-hero__sub,
.ios-group-hero__caption {
  font-size: 0.812rem;
  color: rgba(60, 60, 67, 0.68);
  text-align: center;
}

.ios-group-hero__avatars {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ios-group-hero__avatars .ios-group-hero__avatar {
  margin-left: -0.625rem;
  border: 0.125rem solid #ffffff;
  font-size: 1.25rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ios-group-hero__avatars .ios-group-hero__avatar:first-child {
  margin-left: 0;
}

.ios-group-hero__name-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  align-items: center;
}

.ios-group-hero__name {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: center;
  padding: 0;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.ios-settings-row {
  min-height: 3.125rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1rem;
  position: relative;
  background: #ffffff;
  border-radius: 62.438rem;
}

.ios-settings-card--list > .ios-settings-row + .ios-settings-row,
.ios-settings-card--list > .ios-settings-row + .settings-list__empty,
.ios-settings-card--list > .ios-settings-row--member + .ios-settings-row--member {
  border-top: 0.062rem solid rgba(60, 60, 67, 0.14);
}

.ios-settings-row--input {
  justify-content: space-between;
}

.ios-settings-row--secondary {
  min-height: 3rem;
}

.ios-settings-row--action {
  justify-content: center;
}

.ios-settings-row--member {
  min-height: 4rem;
}

.ios-settings-row--destructive {
  justify-content: center;
}

.ios-settings-row__title {
  font-size: 1.062rem;
  color: #111111;
}

.ios-settings-row--destructive .ios-settings-row__title {
  color: #D46464;
}

.ios-settings-row__field {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 1.062rem;
  color: #111111;
  text-align: right;
  padding: 0.75rem 0;
}

.ios-settings-row__field::placeholder {
  color: rgba(60, 60, 67, 0.42);
}

.ios-settings-row__stack {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.062rem;
}

.ios-settings-row__sub {
  font-size: 0.812rem;
  color: rgba(60, 60, 67, 0.56);
}

.ios-settings-row__aside {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ios-settings-row__badge {
  font-size: 0.812rem;
  color: rgba(60, 60, 67, 0.56);
}

.ios-settings-row__action {
  font-size: 0.938rem;
  font-weight: 500;
}

.ios-settings-row--invite .settings-avatar.avatar-fallback > span {
  font-size: 1.375rem;
  color: rgba(60, 60, 67, 0.5);
}

.ios-settings-section__inline-label {
  padding: 0.625rem 1rem 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(60, 60, 67, 0.62);
  border-top: 0.062rem solid rgba(60, 60, 67, 0.08);
  background: #ffffff;
}

.ios-settings-row__action,
.ios-settings-row__chevron {
  font-size: 1.062rem;
  color: #007aff;
}

.ios-settings-row__chevron {
  margin-left: auto;
  color: rgba(60, 60, 67, 0.48);
}

.ios-settings-feedback {
  margin: 0 1.25rem;
}

.group-details-topbar {
  display: grid;
  grid-template-columns: 2.625rem minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.5rem;
  padding: max(0.75rem, calc(env(safe-area-inset-top) + 0.25rem)) 1rem 0.625rem;
  position: sticky;
  top: 0;
  z-index: 4;
  background:
    linear-gradient(180deg, rgba(184, 216, 255, 0.34) 0%, rgba(184, 216, 255, 0.16) 48%, rgba(184, 216, 255, 0) 100%);
  backdrop-filter: blur(1.125rem) saturate(135%);
  -webkit-backdrop-filter: blur(1.125rem) saturate(135%);
}

.group-details-topbar__pill {
  appearance: none;
  border: 0;
  border-radius: 62.438rem;
  color: #111111;
  background: var(--control-glass-bg);
  backdrop-filter: blur(1.5rem) saturate(150%);
  -webkit-backdrop-filter: blur(1.5rem) saturate(150%);
  border: var(--border-glass-soft);
  box-shadow: var(--control-glass-shadow);
  grid-column: 3;
  align-self: start;
  justify-self: end;
  width: auto;
  min-width: 3.625rem;
  height: 2.625rem;
  padding: 0 0.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.062rem;
  font-weight: 400;
}

/* Icon-only profile edit state uses done.svg */
#btn-profile-edit img {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
}

/* When showing done.svg, turn the pill into the circular nav control */
#btn-profile-edit.is-icon-only {
  min-width: 2.625rem;
  width: 2.625rem;
  padding: 0;
  border-radius: 50%;
}

/* Ensure the action column alignment doesn't reflow hero centering */
#screen-profile #btn-profile-edit {
  justify-self: end;
}

.group-details-topbar > .nav-back-btn {
  grid-column: 1;
  align-self: start;
  justify-self: start;
}

.group-details-topbar__pill.is-disabled {
  opacity: 0.45;
}

.group-details-hero {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  min-width: 0;
  padding: 0 0.375rem 0.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  isolation: isolate;
}

.group-details-hero::before {
  content: "";
  position: absolute;
  inset: 7rem 1.125rem -2.25rem;
  border-radius: 2.375rem;
  background:
    radial-gradient(circle at 18% 24%, rgba(194, 228, 255, 0.62), transparent 28%),
    radial-gradient(circle at 78% 54%, rgba(182, 230, 255, 0.52), transparent 34%),
    linear-gradient(180deg, rgba(197, 233, 255, 0.22), rgba(197, 233, 255, 0.08));
  filter: blur(0.75rem);
  z-index: -1;
  opacity: 0.9;
}

.group-details-hero__avatars {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 5.75rem;
}

.group-details-hero__avatar {
  width: 5.75rem;
  height: 5.75rem;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.125rem;
  font-weight: 700;
}

.group-details-hero__avatars .group-details-hero__avatar + .group-details-hero__avatar {
  margin-left: -1.375rem;
}

.group-details-hero__name-wrap {
  width: 100%;
}

.group-details-hero__name-wrap[for="input-group-settings-name"] {
  color: #000;
}

.group-details-hero__name-wrap[for="input-group-settings-name"] .group-details-hero__name {
  color: #000;
  -webkit-text-fill-color: #000;
}

.group-details-hero__name {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: center;
  font-size: clamp(1.75rem, 7.6vw, 2.125rem);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.05em;
  color: #000;
  outline: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  caret-color: #000;
}

.group-details-hero__name:read-only {
  pointer-events: none;
}

.group-details-hero__name:focus,
.group-details-hero__name:focus-visible {
  outline: none;
  box-shadow: none;
}

.group-details-tabs {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem;
  border-radius: 62.438rem;
  background: rgba(197, 233, 255, 0.46);
  box-shadow: 0 1.125rem 2.5rem rgba(180, 217, 255, 0.18);
  backdrop-filter: blur(1.125rem);
  -webkit-backdrop-filter: blur(1.125rem);
}

.group-details-tab {
  appearance: none;
  border: 0;
  min-height: 2.75rem;
  padding: 0 1rem;
  border-radius: 62.438rem;
  font-size: 1rem;
  color: #5796ce;
  font-weight: 400;
}

.group-details-tab.is-active {
  background: rgba(235, 255, 251, 0.95);
  color: #07111f;
  font-weight: 600;
}

.group-details-panel {
  padding: 0.125rem 1rem 0;
}

.group-details-summary-card,
.group-details-card {
  border-radius: 1.75rem;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 0.75rem 1.875rem rgba(184, 211, 243, 0.12);
  overflow: hidden;
}

.group-details-summary-card {
  padding: 1.375rem 1.25rem 1.25rem;
  margin-bottom: 1rem;
  background:
    radial-gradient(circle at 16% 18%, rgba(194, 228, 255, 0.64), transparent 32%),
    radial-gradient(circle at 84% 78%, rgba(255, 231, 191, 0.56), transparent 34%),
    linear-gradient(145deg, rgba(236, 246, 255, 0.96), rgba(255, 250, 241, 0.88));
}

.group-details-summary-card__eyebrow {
  font-size: 0.812rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(60, 60, 67, 0.62);
}

.group-details-summary-card__title {
  margin-top: 0.5rem;
  max-width: 18ch;
  font-size: 1.438rem;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #111111;
}

.group-details-summary-grid {
  margin-top: 1.125rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.group-details-summary-metric {
  min-height: 5.75rem;
  padding: 0.875rem 0.75rem;
  border-radius: 1.375rem;
  background: rgba(255,255,255,0.72);
  box-shadow: inset 0 0.062rem 0 rgba(255,255,255,0.94);
}

.group-details-summary-metric__value {
  font-size: 1.875rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #111111;
}

.group-details-summary-metric__label {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: rgba(60, 60, 67, 0.74);
}

.group-details-people-strip {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: 0 0.125rem 1rem;
  margin-bottom: 0;
  -webkit-overflow-scrolling: touch;
}

.group-details-person {
  min-width: 5.875rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: #111111;
}

.group-details-person__avatar {
  width: 6.125rem;
  height: 6.125rem;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.375rem;
  font-weight: 700;
}

.group-details-person--add .group-details-person__avatar {
  display: grid;
  place-items: center;
  background: #EFEEF2;
  color: #111111;
  font-size: 3.625rem;
  font-weight: 300;
  line-height: 1;
}

.group-details-person__name {
  font-size: 0.938rem;
  text-align: center;
  color: rgba(28, 28, 30, 0.76);
}

.group-details-person__status {
  margin-top: -0.25rem;
  font-size: 0.812rem;
  text-align: center;
  color: rgba(60, 60, 67, 0.56);
}

.group-details-contact-value {
  margin-left: auto;
  font-size: 0.938rem;
  color: rgba(28, 28, 30, 0.76);
}

.group-details-card {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
}

.group-details-card--list > .ios-settings-row + .ios-settings-row,
.group-details-card--list > .ios-settings-row + .settings-list__empty,
.group-details-card--list > .ios-settings-row--member + .ios-settings-row--member {
  border-top: 0.062rem solid rgba(60, 60, 67, 0.14);
}

.group-details-card--toggles {
  padding: 0 1rem;
}

.group-details-edit-block.is-hidden {
  display: none;
}

.group-details-toggle-row {
  min-height: 3.125rem;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(255,255,255,0.92);
  position: relative;
}

.group-details-toggle-row + .group-details-toggle-row {
  border-top: 0.062rem solid rgba(60,60,67,0.12);
}

.group-details-toggle-row__title {
  font-size: 1.062rem;
  color: #111111;
}

.group-details-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.group-details-toggle__ui {
  margin-left: auto;
  width: 4.375rem;
  height: 1.75rem;
  border-radius: 62.438rem;
  background: #d1d1d6;
  position: relative;
  transition: background 160ms ease;
}

.group-details-toggle__ui::after {
  content: "";
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 2.5rem;
  height: 1.5rem;
  border-radius: 62.438rem;
  background: #ffffff;
  box-shadow: 0 0.062rem 0.125rem rgba(0,0,0,0.16);
  transition: transform 160ms ease;
}

.group-details-toggle:checked + .group-details-toggle__ui {
  background: #34c759;
}

.group-details-toggle:checked + .group-details-toggle__ui::after {
  transform: translateX(1.625rem);
}

.group-details-footnote {
  padding: 0.875rem 1.125rem 1.125rem;
  font-size: 0.812rem;
  line-height: 1.4;
  color: rgba(60,60,67,0.76);
}

.group-details-background-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem 0.625rem;
  padding: 0.5rem 0.25rem 1.25rem;
}

.group-details-background-option {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
}

.group-details-background-option__swatch {
  width: 5.125rem;
  height: 5.125rem;
  border-radius: 50%;
  box-shadow: 0 0.5rem 1.125rem rgba(179, 202, 233, 0.18);
  border: 0.188rem solid transparent;
  background: #eef3fb;
}

.group-details-background-option.is-selected .group-details-background-option__swatch {
  border-color: #0a84ff;
}

.group-details-background-option__label {
  font-size: 0.938rem;
  color: #111111;
}

.group-details-background-option.is-none .group-details-background-option__swatch {
  background: linear-gradient(180deg, rgba(245,246,250,0.9), rgba(226,233,244,0.88));
}

.group-details-background-option.is-photo .group-details-background-option__swatch {
  background: linear-gradient(180deg, #a0c6ff 0%, #6876cc 100%);
}

.group-details-background-option.is-color .group-details-background-option__swatch {
  background: linear-gradient(135deg, #ffbf47 0%, #ffc2e7 48%, #ffd800 100%);
}

.group-details-background-option.is-playground .group-details-background-option__swatch {
  background: conic-gradient(from 180deg at 50% 50%, #3dbfff, #e95cff, #ff9b53, #3dbfff);
}

.group-details-background-option.is-sky .group-details-background-option__swatch {
  background: linear-gradient(180deg, #27418f 0%, #90b6f6 50%, #ff8d49 100%);
}

.group-details-background-option.is-water .group-details-background-option__swatch {
  background: linear-gradient(180deg, #d9edf8 0%, #88caef 52%, #8eb8d8 100%);
}

.group-details-background-option.is-aurora .group-details-background-option__swatch {
  background: linear-gradient(180deg, #0f3f7a 0%, #0bb4a4 45%, #4252c8 100%);
}

.group-details-suggestions__title {
  padding: 0.125rem 0.25rem 0.875rem;
  font-size: 1.375rem;
  font-weight: 700;
  color: #000;
}

.group-details-suggestions__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.group-details-suggestion-card {
  appearance: none;
  border: 0;
  min-height: 13.75rem;
  border-radius: 1.75rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0.875rem 2rem rgba(178, 206, 243, 0.18);
}

.group-details-suggestion-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,0.55), transparent 34%),
    radial-gradient(circle at 68% 74%, rgba(180, 223, 255, 0.48), transparent 38%);
}

.group-details-suggestion-card__title {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  font-size: 1.062rem;
  font-weight: 600;
  color: #111111;
}

.group-details-suggestion-card--sky {
  background: linear-gradient(180deg, #ffe8df 0%, #bfdcff 55%, #f7f8fc 100%);
}

.group-details-suggestion-card--water {
  background: linear-gradient(180deg, #f0f6fb 0%, #d6eef8 50%, #cce3ff 100%);
}

.group-details-suggestion-card--aurora {
  background: linear-gradient(180deg, #dff3ff 0%, #c7f0f2 46%, #dbecff 100%);
}

.group-details-suggestion-card--color {
  background: linear-gradient(135deg, #fff4c8 0%, #ffd5ec 44%, #d6ecff 100%);
}

.group-details-media-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.125rem;
  overflow: hidden;
  border-radius: 1.375rem;
}

.group-details-media-tile {
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}

.group-details-media-tile--fallback {
  background: var(--tile-accent, #d7e8ff);
}

.group-details-media-tile__badge {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--badge-accent, #9fb3f0);
  border: 0.125rem solid rgba(255,255,255,0.96);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
}

.group-details-media-tile__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.625rem;
  font-weight: 700;
  color: rgba(255,255,255,0.94);
}

.group-details-links-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem;
}

.group-details-link-card {
  min-height: 12.75rem;
  border-radius: 1.5rem;
  overflow: hidden;
  background: rgba(244,244,247,0.94);
  box-shadow: 0 0.75rem 1.5rem rgba(178, 206, 243, 0.12);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}

.group-details-person {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
}

.group-details-link-card__thumb {
  flex: 1;
  min-height: 7.75rem;
  padding: 0.875rem;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,0.38), transparent 30%),
    linear-gradient(135deg, var(--card-accent, #b8d8ff), rgba(255,255,255,0.72));
}

.group-details-link-card__avatar {
  width: 2.625rem;
  height: 2.625rem;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.group-details-link-card__avatar--fallback {
  background: rgba(255,255,255,0.82);
  color: #5b6fb4;
  font-size: 1rem;
  font-weight: 700;
}

.group-details-link-card__body {
  padding: 0.875rem;
}

.group-details-link-card__title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.22;
  color: #111111;
}

.group-details-link-card__host {
  margin-top: 0.375rem;
  font-size: 0.875rem;
  color: rgba(60,60,67,0.7);
}

#screen-group-settings[data-group-background="sky"] .group-details-summary-card,
#screen-group-settings[data-group-background="sky"] .group-details-card,
#screen-group-settings[data-group-background="sky"] .group-details-links-grid .group-details-link-card {
  background-color: rgba(248, 250, 255, 0.94);
}

#screen-group-settings[data-group-background="water"] .group-details-summary-card,
#screen-group-settings[data-group-background="water"] .group-details-card,
#screen-group-settings[data-group-background="water"] .group-details-links-grid .group-details-link-card {
  background-color: rgba(243, 249, 252, 0.94);
}

#screen-group-settings[data-group-background="aurora"] .group-details-summary-card,
#screen-group-settings[data-group-background="aurora"] .group-details-card,
#screen-group-settings[data-group-background="aurora"] .group-details-links-grid .group-details-link-card {
  background-color: rgba(240, 248, 255, 0.94);
}

@media (max-width: 430px) {
  .group-details-hero__avatar,
  .group-details-person__avatar {
    width: 5.5rem;
    height: 5.5rem;
  }

  .group-details-tab {
    padding: 0 0.75rem;
    font-size: 1rem;
  }

  .group-details-background-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .group-details-links-grid,
  .group-details-suggestions__grid {
    grid-template-columns: 1fr;
  }
}

.profile-photo-picker {
  margin-bottom: 1.125rem;
}

.profile-photo-picker__button,
.ios-profile-photo-button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
}

.profile-photo-picker__avatar {
  width: 5.75rem;
  height: 5.75rem;
  border-radius: 50%;
  box-shadow:
    inset 0 0.062rem 0 rgba(255,255,255,0.96),
    0 1rem 2.125rem rgba(210, 222, 237, 0.32);
}

.profile-photo-picker__avatar > span {
  font-size: 1.75rem;
  font-weight: 700;
}

.profile-photo-picker__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.profile-photo-picker__title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111111;
}

.profile-photo-picker__action,
.ios-profile-photo-button__label {
  font-size: 1.062rem;
  font-weight: 500;
  color: #007aff;
}

.ios-profile-photo-button {
  width: auto;
  gap: 0;
}

.ios-profile-photo-button .settings-avatar--xl {
  width: 2.625rem;
  height: 2.625rem;
  min-width: 2.625rem;
  background-size: cover;
  background-position: center;
  box-shadow:
    inset 0 0.062rem 0 rgba(255,255,255,0.96),
    0 1rem 2.125rem rgba(210, 222, 237, 0.28);
}

.profile-avatar-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    max(1rem, env(safe-area-inset-top))
    max(1rem, env(safe-area-inset-right))
    max(1rem, env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));
  margin: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(0.5rem);
  -webkit-backdrop-filter: blur(0.5rem);
  cursor: pointer;
}

.profile-avatar-preview-overlay[hidden] {
  display: none;
}

.profile-avatar-preview-overlay__close {
  position: absolute;
  top: max(0.75rem, env(safe-area-inset-top));
  right: max(0.75rem, env(safe-area-inset-right));
  z-index: 1;
  cursor: pointer;
}

.profile-avatar-preview-overlay__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.profile-avatar-preview-overlay .profile-avatar-preview-stage {
  width: min(72vmin, 20rem);
  height: min(72vmin, 20rem);
  min-width: 0;
  min-height: 0;
  font-size: clamp(2.5rem, 12vmin, 5rem);
  cursor: default;
}

.profile-avatar-preview-overlay .profile-avatar-preview-stage.avatar-fallback img.avatar-fallback__icon {
  width: 42%;
  height: 42%;
}

.ios-settings-card--members .settings-list__empty,
.ios-settings-card--list .settings-list__empty {
  padding: 1rem;
  font-size: 0.938rem;
  color: rgba(60,60,67,0.65);
}

#analysis-overlay .recording-sheet {
  top: var(--analysis-sheet-top);
  bottom: var(--analysis-sheet-bottom);
  max-height: calc(var(--app-height) - var(--analysis-sheet-top) - var(--analysis-sheet-bottom));
  min-height: 20rem;
}

.ios-alert-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(0.875rem);
  -webkit-backdrop-filter: blur(0.875rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.ios-alert-overlay.visible {
  opacity: 1;
  pointer-events: all;
}

.ios-alert {
  width: min(16.875rem, calc(100vw - 2.5rem));
  border-radius: 0.875rem;
  overflow: hidden;
  background: rgba(242, 242, 247, 0.96);
  box-shadow: 0 1.125rem 3rem rgba(0, 0, 0, 0.22);
}

.ios-alert__body {
  padding: 1.125rem 1rem 1rem;
  text-align: center;
}

.ios-alert__title {
  font-size: 1.062rem;
  line-height: 1.3;
  font-weight: 600;
  color: #000;
}

.ios-alert__message {
  margin-top: 0.375rem;
  font-size: 0.812rem;
  line-height: 1.36;
  color: rgba(60, 60, 67, 0.92);
}

.ios-alert__action {
  width: 100%;
  min-height: 2.75rem;
  border-top: 0.031rem solid rgba(60, 60, 67, 0.29);
  background: transparent;
  font-size: 1.062rem;
  font-weight: 600;
  color: #007aff;
}

.ios-alert__action:active {
  background: rgba(60, 60, 67, 0.08);
}

#analysis-overlay .recording-backdrop {
  background:
    radial-gradient(circle at 50% 16%, rgba(196, 219, 246, 0.22), transparent 36%),
    rgba(18, 20, 27, 0.3);
  backdrop-filter: blur(1.125rem);
  -webkit-backdrop-filter: blur(1.125rem);
}

#analysis-overlay .recording-sheet--analysis {
  gap: 0;
  padding: 1.25rem 1.125rem var(--analysis-sheet-bottom, 1rem);
  overflow-x: visible;
  overflow-y: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.985) 0%, rgba(250,251,255,0.96) 48%, rgba(244,248,252,0.98) 100%);
}

#analysis-overlay .recording-sheet--analysis::before {
  content: '';
  position: absolute;
  inset: -10% -16% auto;
  height: 16.25rem;
  background:
    radial-gradient(circle at 18% 28%, rgba(205, 226, 255, 0.88), transparent 28%),
    radial-gradient(circle at 78% 22%, rgba(235, 215, 255, 0.72), transparent 26%),
    radial-gradient(circle at 52% 60%, rgba(255, 230, 201, 0.62), transparent 28%);
  opacity: 0.94;
  pointer-events: none;
  z-index: 0;
}

.recording-sheet--analysis > * {
  position: relative;
  z-index: 1;
}

#analysis-overlay .rec-row--top {
  position: sticky;
  top: 0;
  z-index: 5;
  background: transparent;
}

.analysis-heading,
#analysis-label {
  color: var(--text-primary);
}

.analysis-hero,
.analysis-status-strip,
.analysis-bars {
  position: relative;
  z-index: 1;
}

.analysis-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.875rem;
  padding: 0.5rem 0 0;
  width: 100%;
  max-width: 100%;
}

.analysis-visual-field {
  /* Driven by AnalysisModal: looping memo → analyser → --analysis-level / --analysis-glow-mul */
  --analysis-level: 0.32;
  --analysis-glow-mul: 1;
  /* Bleed past analysis sheet horizontal padding so waves reach card edges */
  width: calc(100% + 2.25rem);
  max-width: none;
  margin-left: -1.125rem;
  margin-right: -1.125rem;
  min-height: 0;
  height: clamp(10.5rem, 24vh, 16.25rem);
  position: relative;
  margin-top: 0.25rem;
  margin-bottom: 0.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 56.25rem;
  transform-style: preserve-3d;
  overflow: visible;
}

/* Short mobile heights: keep sheet fully on-screen with no internal scrolling. */
@media (max-height: 740px) {
  .analysis-visual-field {
    height: clamp(9rem, 22vh, 13.75rem);
  }
  .analysis-hero {
    gap: 0.75rem;
  }
}

.analysis-waveform-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 1;
  pointer-events: none;
  border-radius: 0;
  z-index: 5;
  mix-blend-mode: normal;
}

/* Orbital ribbons are still in DOM for rollback/experiments. Keep hidden by default. */
.analysis-ribbon {
  display: none;
}

/* Opt-in: show legacy orbital ribbons if the visual field requests it. */
.analysis-visual-field.analysis-visual-field--orbital .analysis-ribbon {
  display: block;
}

/* The older wave cluster is kept for rollback but stays off. */
.analysis-wave-cluster {
  display: none;
}

#analysis-overlay[data-phase='segments'] .analysis-visual-field {
  display: flex;
  min-height: 12.5rem;
  opacity: 0.92;
}

.analysis-visual-field__glow,
.analysis-ribbon,
.analysis-core,
.analysis-wave-cluster {
  position: absolute;
  pointer-events: none;
}

.analysis-visual-field__glow {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 62.438rem;
  filter: blur(1.5rem);
  opacity: calc(0.74 * var(--analysis-glow-mul, 1));
  z-index: 0;
}

.analysis-core {
  z-index: 1;
  left: 50%;
  top: 50%;
}

/* Large outer halo: soft radial glow + pulse (core stays static). */
.analysis-visual-field__glow--one {
  width: 20rem;
  height: 20rem;
  background:
    radial-gradient(
      circle at 50% 48%,
      rgba(230, 244, 255, 0.72) 0%,
      rgba(186, 222, 255, 0.42) 22%,
      rgba(222, 206, 255, 0.28) 42%,
      rgba(255, 228, 210, 0.14) 62%,
      rgba(255, 255, 255, 0) 72%
    );
  filter: blur(2.35rem);
  opacity: calc(0.82 * var(--analysis-glow-mul, 1));
  animation: analysis-outer-glow-pulse calc(3.4s / (0.82 + var(--analysis-level, 0.32) * 0.35)) ease-in-out infinite;
}

/* Softer secondary rings, centered (no drift) so the outer read stays one halo. */
.analysis-visual-field__glow--two {
  width: 14.5rem;
  height: 14.5rem;
  background:
    radial-gradient(circle at 46% 44%, rgba(236, 214, 255, 0.42) 0%, rgba(236, 214, 255, 0.12) 48%, rgba(255, 255, 255, 0) 68%);
  filter: blur(1.85rem);
  opacity: calc(0.42 * var(--analysis-glow-mul, 1));
  animation: none;
}

.analysis-visual-field__glow--three {
  width: 12.5rem;
  height: 12.5rem;
  background:
    radial-gradient(circle at 54% 56%, rgba(255, 232, 203, 0.38) 0%, rgba(255, 220, 190, 0.1) 50%, rgba(255, 255, 255, 0) 70%);
  filter: blur(1.65rem);
  opacity: calc(0.36 * var(--analysis-glow-mul, 1));
  animation: none;
}

.analysis-ribbon {
  left: 50%;
  top: 50%;
  width: 92%;
  height: 2.75rem;
  border-radius: 62.438rem;
  transform:
    translate(-50%, -50%)
    rotate(var(--swirl-start, 0deg))
    translate3d(0, var(--swirl-radius, -4.75rem), var(--swirl-depth, 0rem))
    rotateX(var(--swirl-tilt, 58deg))
    rotateZ(var(--swirl-roll, 0deg))
    scaleX(var(--swirl-scale, 1));
  transform-origin: center;
  background: transparent;
  animation-name: analysis-ribbon-swirl;
  animation-duration: calc(var(--swirl-duration, 7.4s) / (0.66 + var(--analysis-level, 0.32) * 1.2));
  animation-timing-function: cubic-bezier(0.42, 0.02, 0.58, 0.98);
  animation-iteration-count: infinite;
  animation-delay: var(--swirl-delay, 0s);
  filter: none;
}

.analysis-ribbon::before,
.analysis-ribbon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

/* Crisp “stroke” */
.analysis-ribbon::before {
  inset: 0.2rem 0;
  background:
    linear-gradient(90deg,
      rgba(167, 208, 255, 0) 0%,
      rgba(180, 221, 255, 0.92) 18%,
      rgba(216, 207, 255, 0.98) 52%,
      rgba(255, 214, 190, 0.72) 84%,
      rgba(255, 214, 190, 0) 100%);
  box-shadow:
    0 0 1.25rem rgba(193, 214, 255, 0.22),
    0 0 2.25rem rgba(226, 214, 255, 0.18);
  filter: blur(0.015rem);
}

/* Outer gradient border / glow */
.analysis-ribbon::after {
  inset: -0.25rem -0.75rem;
  background:
    linear-gradient(90deg,
      rgba(167, 208, 255, 0) 0%,
      rgba(180, 221, 255, 0.62) 20%,
      rgba(216, 207, 255, 0.66) 52%,
      rgba(255, 214, 190, 0.46) 84%,
      rgba(255, 214, 190, 0) 100%);
  opacity: 0.9;
  filter: blur(0.45rem);
}

.analysis-ribbon--one { --swirl-start: -18deg; --swirl-radius: -5.75rem; --swirl-depth: 1.125rem; --swirl-tilt: 62deg; --swirl-roll: -8deg; --swirl-scale: 0.9; --swirl-duration: 5.8s; opacity: 0.74; }
.analysis-ribbon--two { --swirl-start: 74deg; --swirl-radius: -4.5rem; --swirl-depth: 2.625rem; --swirl-tilt: 68deg; --swirl-roll: 8deg; --swirl-scale: 0.78; --swirl-duration: 4.9s; --swirl-delay: -1.2s; opacity: 0.98; width: 80%; }
.analysis-ribbon--three { --swirl-start: 168deg; --swirl-radius: -5.375rem; --swirl-depth: -1.125rem; --swirl-tilt: 55deg; --swirl-roll: -12deg; --swirl-scale: 1.02; --swirl-duration: 6.2s; --swirl-delay: -2.1s; opacity: 0.82; width: 100%; }
.analysis-ribbon--four { --swirl-start: 248deg; --swirl-radius: -4.125rem; --swirl-depth: -2.125rem; --swirl-tilt: 72deg; --swirl-roll: 14deg; --swirl-scale: 0.7; --swirl-duration: 5.2s; --swirl-delay: -3s; opacity: 0.64; width: 74%; }

.analysis-visual-field .analysis-core.glassNavButton {
  position: absolute;
  width: 11.125rem;
  height: 11.125rem;
  border-radius: 50%;
  display: block;
  flex-shrink: 0;
  transition: none;
  transform: translate(-50%, -50%);
  background: var(--glass-btn-bg);
  backdrop-filter: blur(1.5rem) saturate(150%);
  -webkit-backdrop-filter: blur(1.5rem) saturate(150%);
  box-shadow: var(--shadow-glass-btn);
  filter: drop-shadow(var(--glass-nav-drop-shadow));
  overflow: hidden;
  color: transparent;
  pointer-events: none;
  /* Pulse lives on .analysis-visual-field__glow--one; core stays visually still. */
  animation: none;
}

.analysis-visual-field .analysis-core.glassNavButton::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.12) 38%, rgba(255,255,255,0) 58%);
  pointer-events: none;
}

.analysis-wave-cluster {
  width: min(100%, 20rem);
  height: 13.75rem;
  transform-style: preserve-3d;
}

.analysis-wave {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 3.25rem;
  border-radius: 62.438rem;
  transform:
    translate(-50%, -50%)
    rotate(var(--wave-start, 0deg))
    translate3d(0, var(--wave-radius, -4rem), var(--wave-depth, 0rem))
    rotateX(var(--wave-tilt, 66deg))
    rotateZ(var(--wave-roll, 0deg))
    scaleX(var(--wave-scale, 1));
  transform-origin: center;
  background: transparent;
  filter: none;
  animation-name: analysis-wave-swirl;
  animation-duration: calc(var(--wave-duration, 7.2s) / (0.66 + var(--analysis-level, 0.32) * 1.2));
  animation-timing-function: cubic-bezier(0.42, 0.02, 0.58, 0.98);
  animation-iteration-count: infinite;
  animation-delay: var(--wave-delay, 0s);
}

.analysis-wave::before,
.analysis-wave::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.analysis-wave::before {
  inset: 0.22rem 0;
  background:
    linear-gradient(90deg,
      rgba(167, 208, 255, 0) 0%,
      rgba(203, 228, 255, 0.94) 20%,
      rgba(223, 212, 255, 0.94) 55%,
      rgba(255, 221, 196, 0.62) 82%,
      rgba(255, 221, 196, 0) 100%);
  box-shadow:
    0 0 1.25rem rgba(191, 220, 255, 0.24),
    0 0 2.35rem rgba(233, 219, 255, 0.16);
  filter: blur(0.01rem);
}

.analysis-wave::after {
  inset: -0.25rem -0.85rem;
  background:
    linear-gradient(90deg,
      rgba(167, 208, 255, 0) 0%,
      rgba(203, 228, 255, 0.62) 20%,
      rgba(223, 212, 255, 0.6) 55%,
      rgba(255, 221, 196, 0.38) 82%,
      rgba(255, 221, 196, 0) 100%);
  opacity: 0.88;
  filter: blur(0.5rem);
}

.analysis-wave--one { width: 96%; --wave-start: 16deg; --wave-radius: -4.75rem; --wave-depth: 2.125rem; --wave-tilt: 64deg; --wave-roll: -8deg; --wave-scale: 1; --wave-duration: 4.7s; opacity: 0.96; }
.analysis-wave--two { width: 76%; --wave-start: 104deg; --wave-radius: -3.625rem; --wave-depth: 3.625rem; --wave-tilt: 70deg; --wave-roll: 10deg; --wave-scale: 0.76; --wave-duration: 5.4s; --wave-delay: -1.1s; opacity: 0.86; }
.analysis-wave--three { width: 90%; --wave-start: 202deg; --wave-radius: -4.375rem; --wave-depth: -1.25rem; --wave-tilt: 58deg; --wave-roll: -14deg; --wave-scale: 0.94; --wave-duration: 5.1s; --wave-delay: -2.4s; opacity: 0.7; }
.analysis-wave--four { width: 64%; --wave-start: 292deg; --wave-radius: -3.125rem; --wave-depth: -2.75rem; --wave-tilt: 74deg; --wave-roll: 16deg; --wave-scale: 0.62; --wave-duration: 4.4s; --wave-delay: -3.1s; opacity: 0.56; }

@keyframes analysis-wave-swirl {
  0% {
    transform:
      translate(-50%, -50%)
      translateX(0)
      rotate(var(--wave-start, 0deg))
      translate3d(0, var(--wave-radius, -4rem), var(--wave-depth, 0rem))
      rotateX(var(--wave-tilt, 66deg))
      rotateZ(var(--wave-roll, 0deg))
      scaleX(var(--wave-scale, 1));
  }
  25% {
    transform:
      translate(-50%, -50%)
      translateX(calc(0.42rem + var(--analysis-level, 0.32) * 0.35rem))
      rotate(calc(var(--wave-start, 0deg) + 90deg))
      translate3d(0, calc(var(--wave-radius, -4rem) - 0.28rem), var(--wave-depth, 0rem))
      rotateX(calc(var(--wave-tilt, 66deg) - 3deg))
      rotateZ(calc(var(--wave-roll, 0deg) + 90deg))
      scaleX(calc(var(--wave-scale, 1) * (1.01 + var(--analysis-level, 0.32) * 0.04)));
  }
  50% {
    transform:
      translate(-50%, -50%)
      translateX(0)
      rotate(calc(var(--wave-start, 0deg) + 180deg))
      translate3d(0, calc(var(--wave-radius, -4rem) - 0.55rem), var(--wave-depth, 0rem))
      rotateX(calc(var(--wave-tilt, 66deg) - 5deg))
      rotateZ(calc(var(--wave-roll, 0deg) + 180deg))
      scaleX(calc(var(--wave-scale, 1) * (1.03 + var(--analysis-level, 0.32) * 0.06)));
  }
  75% {
    transform:
      translate(-50%, -50%)
      translateX(calc(-0.42rem - var(--analysis-level, 0.32) * 0.35rem))
      rotate(calc(var(--wave-start, 0deg) + 270deg))
      translate3d(0, calc(var(--wave-radius, -4rem) - 0.28rem), var(--wave-depth, 0rem))
      rotateX(calc(var(--wave-tilt, 66deg) - 3deg))
      rotateZ(calc(var(--wave-roll, 0deg) + 270deg))
      scaleX(calc(var(--wave-scale, 1) * (1.01 + var(--analysis-level, 0.32) * 0.04)));
  }
  100% {
    transform:
      translate(-50%, -50%)
      translateX(0)
      rotate(calc(var(--wave-start, 0deg) + 360deg))
      translate3d(0, var(--wave-radius, -4rem), var(--wave-depth, 0rem))
      rotateX(var(--wave-tilt, 66deg))
      rotateZ(calc(var(--wave-roll, 0deg) + 360deg))
      scaleX(var(--wave-scale, 1));
  }
}

@keyframes analysis-ribbon-swirl {
  0% {
    transform:
      translate(-50%, -50%)
      translateX(0)
      rotate(var(--swirl-start, 0deg))
      translate3d(0, var(--swirl-radius, -4.75rem), var(--swirl-depth, 0rem))
      rotateX(var(--swirl-tilt, 58deg))
      rotateZ(var(--swirl-roll, 0deg))
      scaleX(var(--swirl-scale, 1));
  }
  25% {
    transform:
      translate(-50%, -50%)
      translateX(calc(0.38rem + var(--analysis-level, 0.32) * 0.32rem))
      rotate(calc(var(--swirl-start, 0deg) + 90deg))
      translate3d(0, calc(var(--swirl-radius, -4.75rem) - 0.32rem), var(--swirl-depth, 0rem))
      rotateX(calc(var(--swirl-tilt, 58deg) - 4deg))
      rotateZ(calc(var(--swirl-roll, 0deg) + 90deg))
      scaleX(calc(var(--swirl-scale, 1) * (1.015 + var(--analysis-level, 0.32) * 0.035)));
  }
  50% {
    transform:
      translate(-50%, -50%)
      translateX(0)
      rotate(calc(var(--swirl-start, 0deg) + 180deg))
      translate3d(0, calc(var(--swirl-radius, -4.75rem) - 0.65rem), var(--swirl-depth, 0rem))
      rotateX(calc(var(--swirl-tilt, 58deg) - 6deg))
      rotateZ(calc(var(--swirl-roll, 0deg) + 180deg))
      scaleX(calc(var(--swirl-scale, 1) * (1.035 + var(--analysis-level, 0.32) * 0.055)));
  }
  75% {
    transform:
      translate(-50%, -50%)
      translateX(calc(-0.38rem - var(--analysis-level, 0.32) * 0.32rem))
      rotate(calc(var(--swirl-start, 0deg) + 270deg))
      translate3d(0, calc(var(--swirl-radius, -4.75rem) - 0.32rem), var(--swirl-depth, 0rem))
      rotateX(calc(var(--swirl-tilt, 58deg) - 4deg))
      rotateZ(calc(var(--swirl-roll, 0deg) + 270deg))
      scaleX(calc(var(--swirl-scale, 1) * (1.015 + var(--analysis-level, 0.32) * 0.035)));
  }
  100% {
    transform:
      translate(-50%, -50%)
      translateX(0)
      rotate(calc(var(--swirl-start, 0deg) + 360deg))
      translate3d(0, var(--swirl-radius, -4.75rem), var(--swirl-depth, 0rem))
      rotateX(var(--swirl-tilt, 58deg))
      rotateZ(calc(var(--swirl-roll, 0deg) + 360deg))
      scaleX(var(--swirl-scale, 1));
  }
}

@keyframes analysis-core-breathe {
  0%, 100% {
    transform: translate(-50%, -50%) scale(calc(0.94 + var(--analysis-level, 0.32) * 0.04));
    opacity: calc(0.84 + var(--analysis-level, 0.32) * 0.14);
  }
  50% {
    transform: translate(-50%, -50%) scale(calc(1.05 + var(--analysis-level, 0.32) * 0.1));
    opacity: 1;
  }
}

@keyframes analysis-outer-glow-pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(0.88);
    opacity: calc(0.52 * var(--analysis-glow-mul, 1));
    filter: blur(2.1rem);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.06);
    opacity: calc(0.98 * var(--analysis-glow-mul, 1));
    filter: blur(2.65rem);
  }
}

@keyframes analysis-float-one {
  0%, 100% { transform: translate(-2.125rem, -1.125rem) scale(0.94); }
  50% { transform: translate(1rem, 0.75rem) scale(1.08); }
}

@keyframes analysis-float-two {
  0%, 100% { transform: translate(2.375rem, -1.5rem) scale(0.9); }
  50% { transform: translate(-0.75rem, 1.125rem) scale(1.1); }
}

@keyframes analysis-float-three {
  0%, 100% { transform: translate(-0.375rem, 2.125rem) scale(0.92); }
  50% { transform: translate(1.375rem, -0.75rem) scale(1.08); }
}

.analysis-hero__title {
  max-width: 12ch;
  font-size: 1.938rem;
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.05em;
  color: #111111;
}

.analysis-status-strip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  margin: 0.875rem auto 0.75rem;
  min-height: 2.375rem;
  padding: 0 1.125rem;
  border-radius: 62.438rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(28, 28, 30, 0.75);
}

/* Match .glassNavButton chrome + drop shadow (strip overrides compact nav size). */
#analysis-overlay .analysis-status-strip.glassNavButton {
  display: inline-flex;
  width: max-content;
  max-width: calc(100% - 1.5rem);
  height: auto;
  min-height: 2.375rem;
  position: relative;
  overflow: hidden;
  background: var(--glass-btn-bg);
  backdrop-filter: blur(1.5rem) saturate(150%);
  -webkit-backdrop-filter: blur(1.5rem) saturate(150%);
  box-shadow: var(--shadow-glass-btn);
  filter: drop-shadow(var(--glass-nav-drop-shadow));
  transition: none;
}

.analysis-status-copy {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}

.analysis-status-copy--no-dots .analysis-status-copy__dots {
  display: none;
}

.analysis-status-copy__dots {
  display: inline-flex;
  letter-spacing: 0;
}

.analysis-status-copy__dot {
  display: inline-block;
  width: 0.35em;
  text-align: center;
  opacity: 0.22;
  animation: analysis-status-dot 1.05s ease-in-out infinite;
}

.analysis-status-copy__dot:nth-child(1) {
  animation-delay: 0ms;
}

.analysis-status-copy__dot:nth-child(2) {
  animation-delay: 180ms;
}

.analysis-status-copy__dot:nth-child(3) {
  animation-delay: 360ms;
}

@keyframes analysis-status-dot {
  0%,
  100% {
    opacity: 0.18;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-0.06em);
  }
  55% {
    opacity: 0.35;
    transform: translateY(0);
  }
}

.analysis-status-strip--hero {
  margin: 0.5rem auto 0;
}

#analysis-overlay .analysis-bars {
  gap: 0.875rem;
  padding: 0.5rem 0 0.125rem;
  min-height: 9.75rem;
}

#analysis-overlay .analysis-bar {
  padding: 0.875rem 0.875rem 0.75rem;
  border-radius: 1.25rem;
  background: rgba(255,255,255,0.78);
  box-shadow:
    inset 0 0.062rem 0 rgba(255,255,255,0.98),
    0 0.625rem 1.625rem rgba(210, 218, 228, 0.2);
}

#analysis-overlay .analysis-bar__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.625rem;
}

#analysis-overlay .analysis-bar__label {
  font-size: 1.062rem;
  line-height: 1.2;
  font-weight: 700;
  color: #111111;
  padding-left: 0;
}

#analysis-overlay .analysis-bar__dur {
  position: static;
  opacity: 1;
  flex-shrink: 0;
  font-size: 0.812rem;
  font-weight: 600;
  color: rgba(60,60,67,0.64);
}

#analysis-overlay .analysis-bar__track {
  height: 0.75rem;
  margin-bottom: 0;
}

#analysis-overlay .analysis-bar__track::before,
#analysis-overlay .analysis-bar__fill {
  height: 0.75rem;
  top: 0;
  transform: none;
}

#analysis-overlay .analysis-bar__excerpt {
  display: none;
}

@media (max-width: 480px) {
  html, body {
    /* iOS PWA safe-area uses page background; keep the universal gradient */
    background: var(--screen-background);
  }

  #app {
    max-width: none;
    border-radius: 0;
    box-shadow: none;
  }

  #screen-splash {
    padding: 0 var(--screen-gutter-wide);
  }

  .sheet {
    width: min(100% - (var(--screen-gutter-wide) * 2), 20rem);
  }
}

@media (max-width: 390px) {
  :root {
    --chat-art-size: min(100%, 10.5rem);
    --floating-avatar-width: clamp(6.125rem, 33vw, 8.25rem);
    --floating-avatar-photo: clamp(5.75rem, 30vw, 7.875rem);
    /* .chat-title max 1.5rem × line-height 1.2 — keep topics scroll clear of header */
    --chat-header-title-line: 1.8rem;
  }

  .top-bar__title {
    font-size: clamp(2rem, 9vw, 2.375rem);
  }

  .chat-title {
    font-size: clamp(1.25rem, 6vw, 1.5rem);
    line-height: 1.2;
  }

  .chat-card__name {
    font-size: 0.9375rem;
    line-height: 1.25;
  }

  .chat-badge {
    width: 0.6875rem;
    min-width: 0.6875rem;
    height: 0.6875rem;
  }

  .topic-card__surface {
    padding: 0.688rem 0.625rem 0.562rem;
  }

  .topic-card.expanded .topic-card__surface,
  .topic-card__surface.is-expanded {
    padding-block-end: 0.75rem;
  }

  .topic-row__header,
  .reply-row__header {
    grid-template-columns: 1.875rem minmax(0, 1fr) auto;
    gap: 0.5rem;
  }

  .topic-row__play,
  .reply-row__play {
    width: 1.875rem;
    height: 1.875rem;
  }

  .reply-row {
    padding: 0.562rem 0.562rem 0.5rem;
  }
}

@media (max-width: 360px) {
  :root {
    --screen-gutter: 0.625rem;
    --screen-gutter-wide: 0.875rem;
    --chat-art-size: min(100%, 9.375rem);
    --recording-sheet-top: clamp(3.5rem, 10vh, 5.75rem);
    --analysis-sheet-top: clamp(3.25rem, 9vh, 5.25rem);
  }

  .chats-grid {
    gap: 0.625rem 0.125rem;
  }

  .chat-art-circle {
    font-size: clamp(3.625rem, 20vw, 5.25rem);
  }

.floating-avatar--chloe,
.floating-avatar--primary {
  left: 10%;
}

.floating-avatar--maria,
.floating-avatar--secondary {
  right: 8%;
}

  #recording-overlay .rec-live-transcript {
    font-size: 0.938rem;
  }
}

@media (max-height: 780px) {
  :root {
    --recording-sheet-top: clamp(3.5rem, 10vh, 6rem);
    --analysis-sheet-top: clamp(3.25rem, 9vh, 5.5rem);
    --recording-wave-height: clamp(9.375rem, 27vh, 15rem);
    --floating-avatar-width: clamp(6rem, 28vw, 8rem);
    --floating-avatar-photo: clamp(5.5rem, 26vw, 7.5rem);
  }

  .chat-footer {
    gap: 0;
  }

  .chat-presence {
    min-height: 2.625rem;
  }

  .chat-presence__avatar {
    width: 2.125rem;
    height: 2.125rem;
  }

  .chat-topics {
    padding-bottom: var(--chat-footer-reserved);
  }
}

@media (max-height: 680px) {
.floating-avatar--chloe,
.floating-avatar--primary {
  top: 12%;
}

.floating-avatar--maria,
.floating-avatar--secondary {
  top: 42%;
}

  #recording-overlay .rec-row--top {
    margin-bottom: 0.625rem;
  }

  #recording-overlay .waveform-wrap {
    margin-bottom: 0.875rem;
  }

  #recording-overlay .rec-live-transcript {
    margin-bottom: 1.125rem;
  }
}

.topic-thread__seed,
.topic-thread__seed-label,
.topic-thread__seed-text {
  display: none;
}

/* Original memo seed stays hidden in thread UI */

/* ═══════════════════════════════════════════════════════
   DYNAMIC AVATAR COMPATIBILITY
   Keeps the restored visual system while honoring
   the current JS-driven member/avatar logic.
   ═══════════════════════════════════════════════════════ */

.avatar-fallback {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--avatar-accent, #d6e6ff) 88%, white 12%) 0%,
      color-mix(in srgb, var(--avatar-accent, #d6e6ff) 62%, white 38%) 100%);
  color: rgba(17, 17, 17, 0.56);
}

.avatar-fallback > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-weight: 700;
  letter-spacing: -0.05em;
}

.avatar-fallback__icon {
  width: 58%;
  height: 58%;
  display: block;
  object-fit: contain;
}

.settings-avatar.avatar-fallback > span,
.chat-presence__avatar.avatar-fallback > span,
.contacts-hub-row__avatar.avatar-fallback > span,
.chat-art-besties__avatar.avatar-fallback > span {
  font-size: 1.1rem;
}

.floating-avatar__photo.avatar-fallback {
  --avatar-accent: var(--floating-accent);
  background: var(--floating-accent);
}

.floating-avatar__photo.avatar-fallback > span {
  font-size: clamp(2.2rem, 9vw, 3.45rem);
  color: rgba(17, 17, 17, 0.48);
}

.floating-avatar__label {
  z-index: 1;
}

/* Above .np-avatar__ring-wrap / photo so the name pill stacks on the avatar disk */
.np-avatar__label {
  z-index: 3;
}

/* ═══════════════════════════════════════════════════════
   IMESSAGE-STYLE NEW GROUP FLOW
   Keeps the existing frame language while restructuring
   the new chat flow around a Messages-like composer.
   ═══════════════════════════════════════════════════════ */

.compose-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  min-height: 4rem;
  position: sticky;
  top: 0;
  z-index: 4;
  padding-bottom: 0.5rem;
  background: linear-gradient(180deg, rgba(249, 247, 244, 0.94) 0%, rgba(249, 247, 244, 0.8) 75%, rgba(249, 247, 244, 0) 100%);
  backdrop-filter: blur(1.5rem) saturate(150%);
  -webkit-backdrop-filter: blur(1.5rem) saturate(150%);
}

.compose-nav-btn,
.compose-close-btn {
  width: 3.625rem;
  height: 3.625rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.84);
  box-shadow:
    inset 0 0.062rem 0 rgba(255,255,255,0.95),
    0 0.75rem 1.75rem rgba(229, 228, 238, 0.32);
  color: #111111;
}

.compose-nav-btn:active,
.compose-close-btn:active {
  opacity: 0.72;
}

.compose-close-btn {
  width: 2.5rem;
  height: 2.5rem;
}

.compose-close-btn svg {
  width: 1.125rem;
  height: 1.125rem;
}

.compose-header__spacer {
  width: 3.625rem;
  height: 3.625rem;
}

.compose-header__title {
  text-align: center;
  font-size: 1.062rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.entry-screen--compose {
  gap: 1.125rem;
  background: transparent;
  justify-content: flex-start;
  padding-top: max(0.75rem, calc(env(safe-area-inset-top, 0rem) + 0.25rem));
}

.entry-screen--compose .entry-feedback {
  margin-top: 0.5rem;
}

.compose-form,
.compose-shell,
.compose-recipients,
.compose-group-meta {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.compose-form,
.compose-shell,
.compose-actions,
.compose-group-meta,
.compose-bottom-bar {
  position: relative;
  z-index: 2;
}

.compose-shell {
  border-top: 0;
  gap: 0.875rem;
}

.compose-recipients__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.625rem;
  min-height: 4.875rem;
  padding: 0 0.875rem 0 1.125rem;
  background: rgba(255,255,255,0.92);
  border-radius: 1.75rem;
  box-shadow:
    inset 0 0.062rem 0 rgba(255,255,255,0.96),
    0 0.875rem 2.25rem rgba(234, 234, 240, 0.44);
  position: relative;
  z-index: 2;
  transition: box-shadow var(--t-fast), transform var(--t-fast), background var(--t-fast);
}

.compose-recipients__row:focus-within {
  background: rgba(255,255,255,0.98);
  box-shadow:
    inset 0 0.062rem 0 rgba(255,255,255,0.98),
    0 1.125rem 2.625rem rgba(224, 224, 233, 0.36);
  transform: translateY(-0.062rem);
}

.compose-recipients__label {
  font-size: 1.125rem;
  font-weight: 400;
  color: rgba(60, 60, 67, 0.62);
}

.compose-recipients__field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  min-height: 3.375rem;
  padding: 0.375rem 0;
  cursor: text;
}

.compose-recipients__input {
  flex: 1 1 10rem;
  min-width: 7.5rem;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 1.188rem;
  line-height: 1.4;
  padding: 0.25rem 0;
  outline: none;
}

.compose-recipients__input::placeholder {
  color: rgba(60, 60, 67, 0.42);
}

.compose-recipients__plus {
  width: 3.125rem;
  height: 3.125rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 17, 17, 0.08);
  color: #111111;
  position: relative;
  z-index: 3;
  transition: transform var(--t-fast), background var(--t-fast), opacity var(--t-fast);
}

.compose-recipients__row:focus-within .compose-recipients__plus {
  background: rgba(17, 17, 17, 0.12);
}

.compose-recipients__plus:active {
  transform: scale(0.94);
}

.compose-actions--list,
.compose-group-meta {
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.94);
  border-radius: 62.438rem;
  overflow: hidden;
  box-shadow:
    inset 0 0.062rem 0 rgba(255,255,255,0.96),
    0 0.875rem 2.125rem rgba(236, 236, 242, 0.34);
}

.compose-list-row {
  min-height: 3.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1.125rem;
  background: transparent;
  border-bottom: 0.031rem solid rgba(60, 60, 67, 0.14);
  position: relative;
  z-index: 2;
  border-radius: 62.438rem;
}

.compose-list-row__title {
  font-size: 1.062rem;
  color: #111111;
}

.compose-list-row__chevron {
  margin-left: auto;
  font-size: 1.125rem;
  color: rgba(60, 60, 67, 0.38);
}

.compose-list-row--field {
  justify-content: space-between;
}

.compose-list-row__field-input {
  min-width: 0;
  flex: 1;
  border: 0;
  background: transparent;
  text-align: right;
  font: inherit;
  font-size: 1.062rem;
  color: #111111;
  outline: none;
}

.compose-list-row__field-input::placeholder {
  color: rgba(60, 60, 67, 0.42);
}

.entry-member-list--inline {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-height: 1.5rem;
}

.entry-member-list--inline .entry-member-empty {
  padding: 0.5rem 0;
  font-size: 1.188rem;
  color: rgba(60, 60, 67, 0.42);
}

.entry-member-list--inline .entry-member-pill {
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem 0.375rem 0.75rem;
  border-radius: 62.438rem;
  background: #dbe9ff;
  border: 0;
}

.entry-member-list--inline .entry-member-pill__name {
  font-size: 0.938rem;
  font-weight: 500;
}

.entry-member-list--inline .entry-member-pill__remove {
  min-width: 1.375rem;
  min-height: 1.375rem;
  width: 1.375rem;
  height: 1.375rem;
  font-size: 0.85rem;
  background: rgba(255,255,255,0.82);
}

.compose-bottom-bar {
  margin-top: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 0 0;
  position: sticky;
  bottom: 0;
  z-index: 4;
  background: linear-gradient(180deg, rgba(249, 247, 244, 0) 0%, rgba(249, 247, 244, 0.82) 24%, rgba(249, 247, 244, 0.96) 100%);
  backdrop-filter: blur(1.75rem) saturate(150%);
  -webkit-backdrop-filter: blur(1.75rem) saturate(150%);
}

.compose-bottom-bar__icon {
  width: 3.375rem;
  height: 3.375rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.94);
  color: #111111;
  box-shadow:
    inset 0 0.062rem 0 rgba(255,255,255,0.96),
    0 0.625rem 1.5rem rgba(234, 234, 240, 0.28);
  position: relative;
  z-index: 2;
}

.compose-bottom-bar__field {
  height: 3.375rem;
  border-radius: 1.75rem;
  background: rgba(255,255,255,0.94);
  box-shadow:
    inset 0 0.062rem 0 rgba(255,255,255,0.96),
    0 0.625rem 1.5rem rgba(234, 234, 240, 0.24);
  position: relative;
}

.compose-bottom-bar__field::before {
  content: '';
  position: absolute;
  inset: 0.75rem 1.125rem;
  border-radius: 62.438rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.56) 0%, rgba(245,245,248,0.72) 100%);
  opacity: 0.88;
}

.create-chat-picker {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  min-height: 100%;
  padding: 0.25rem 0 calc(7.5rem + env(safe-area-inset-bottom));
}

.create-chat-picker::before,
.create-chat-picker::after {
  content: '';
  position: absolute;
  left: 1.125rem;
  right: 1.125rem;
  height: 2.5rem;
  border-radius: 1.75rem 1.75rem 0 0;
  background: rgba(255,255,255,0.58);
  box-shadow: 0 0.75rem 1.875rem rgba(216, 213, 226, 0.14);
  pointer-events: none;
}

.create-chat-picker::before {
  top: -0.75rem;
  z-index: 0;
}

.create-chat-picker::after {
  top: -1.5rem;
  left: 2rem;
  right: 2rem;
  background: rgba(255,255,255,0.38);
  z-index: 0;
}

.create-chat-picker > * {
  position: relative;
  z-index: 1;
}

.create-chat-picker__header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  min-height: 3.875rem;
  padding-top: 0.5rem;
  position: relative;
}

.create-chat-picker__title {
  text-align: center;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  flex: 0 0 auto;
}

.create-chat-picker__close {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2.625rem;
  height: 2.625rem;
  border-radius: var(--r-full);
  background: var(--glass-btn-bg);
  color: #111111;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  backdrop-filter: blur(1.5rem) saturate(150%);
  -webkit-backdrop-filter: blur(1.5rem) saturate(150%);
  box-shadow: var(--shadow-glass-btn);
  border: 0.062rem solid rgba(255,255,255,0.72);
  transition: transform var(--t-fast), opacity var(--t-fast), box-shadow var(--t-fast);
}

.create-chat-picker__close img {
  width: 0.562rem;
  height: 0.938rem;
}

.create-chat-picker__helper-text {
  padding: 0.75rem 1rem;
  font-size: 0.938rem;
  color: rgba(17, 17, 17, 0.52);
  text-align: center;
  transition: opacity var(--t-fast);
  max-width: 19rem;
  margin: 0 auto;
  line-height: 1.4;
}

.create-chat-picker__helper-text.is-hidden {
  display: none;
}

.create-chat-picker__search-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
}

.create-chat-picker__search {
  min-height: 3.5rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.625rem;
  padding: 0 1rem;
  border-radius: 1.25rem;
  background: rgba(241, 239, 236, 0.92);
  box-shadow: inset 0 0.062rem 0 rgba(255,255,255,0.94);
  color: rgba(17, 17, 17, 0.42);
}

.create-chat-picker__search-input {
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 1.125rem;
  color: var(--text-primary);
  outline: none;
}

.create-chat-picker__search-input::placeholder {
  color: rgba(17, 17, 17, 0.42);
}

.create-chat-picker__search-clear {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 17, 17, 0.16);
  color: #ffffff;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast);
}

.create-chat-picker__search-wrap.is-searching .create-chat-picker__search-clear {
  opacity: 1;
  pointer-events: auto;
}

.create-chat-picker__cancel {
  padding: 0 0.125rem;
  font: inherit;
  font-size: 1.125rem;
  color: var(--text-primary);
}

.create-chat-picker__selected[hidden],
.create-chat-picker__result[hidden] {
  display: none !important;
}

.create-chat-picker__selected {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.create-chat-picker__selected-label,
.create-chat-picker__section-label,
.create-chat-picker__block-title,
.create-chat-picker__letter {
  font-size: 0.812rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: rgba(17, 17, 17, 0.46);
}

.create-chat-picker__selected-list {
  min-height: 2.75rem;
}

.create-chat-picker__selected-list .entry-member-pill {
  background: rgba(184, 216, 255, 0.78);
  box-shadow: inset 0 0.062rem 0 rgba(255,255,255,0.72);
}

.create-chat-picker__result {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.create-chat-picker__result-card {
  min-height: 5.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 1.5rem;
  background: rgba(255,255,255,0.94);
  box-shadow:
    inset 0 0.062rem 0 rgba(255,255,255,0.96),
    0 0.875rem 2.125rem rgba(236, 236, 242, 0.28);
  font-size: 1.125rem;
  color: rgba(17, 17, 17, 0.48);
}

.create-chat-picker__result-note {
  font-size: 1.062rem;
  line-height: 1.42;
  color: rgba(17, 17, 17, 0.82);
}

.create-chat-picker__inline-link {
  margin-left: 0.25rem;
  color: #2d9f6b;
  font-weight: 700;
}

.create-chat-picker__permission-card {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  padding: 1.625rem 1.125rem 1.125rem;
  border-radius: 1.75rem;
  background: rgba(255,255,255,0.96);
  box-shadow:
    inset 0 0.062rem 0 rgba(255,255,255,0.98),
    0 1.125rem 2.625rem rgba(224, 224, 233, 0.24);
  text-align: center;
}

.create-chat-picker__permission-title {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.create-chat-picker__permission-body {
  font-size: 1.062rem;
  line-height: 1.4;
  color: rgba(17, 17, 17, 0.76);
}

.create-chat-picker__permission-action {
  min-height: 3.5rem;
  border-radius: 62.438rem;
  padding: 0 1.375rem;
  background: linear-gradient(180deg, rgba(182, 216, 255, 0.98) 0%, rgba(153, 203, 255, 0.92) 100%);
  color: #0f365e;
  font: inherit;
  font-size: 1.125rem;
  font-weight: 700;
  box-shadow:
    0 1rem 2.125rem rgba(184, 216, 255, 0.3),
    inset 0 0.062rem 0 rgba(255,255,255,0.74);
}

.create-chat-picker__actions {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.create-chat-picker__action-card,
.create-chat-picker__contact-card {
  overflow: hidden;
  border-radius: 1.75rem;
  background: rgba(255,255,255,0.96);
  box-shadow:
    inset 0 0.062rem 0 rgba(255,255,255,0.98),
    0 1.125rem 2.625rem rgba(224, 224, 233, 0.2);
}

.create-chat-picker__action-row,
.create-chat-picker__contact-row {
  width: 100%;
  min-height: 4.875rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 0 1.125rem;
  border-bottom: 0.031rem solid rgba(60, 60, 67, 0.12);
  text-align: left;
}

.create-chat-picker__action-row:last-child,
.create-chat-picker__contact-row:last-child {
  border-bottom: 0;
}

.create-chat-picker__action-icon {
  width: 2.125rem;
  text-align: center;
  color: #2d9f6b;
  font-family: "SF Pro Display", var(--font);
  font-size: 1.375rem;
  font-weight: 600;
}

.create-chat-picker__action-text {
  font-size: 1.062rem;
  color: var(--text-primary);
}

.create-chat-picker__contacts {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.create-chat-picker__contact-group {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.create-chat-picker__contact-row {
  min-height: 5.75rem;
}

.create-chat-picker__contact-row.is-added {
  background: linear-gradient(90deg, rgba(184, 216, 255, 0.18) 0%, rgba(255,255,255,0.96) 32%);
}

.create-chat-picker__contact-avatar {
  width: 3.625rem;
  height: 3.625rem;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  box-shadow:
    inset 0 0.062rem 0 rgba(255,255,255,0.82),
    0 0.625rem 1.5rem rgba(220, 221, 230, 0.14);
}

.create-chat-picker__contact-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
}

.create-chat-picker__contact-name-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: 0;
  width: 100%;
}

.create-chat-picker__contact-name {
  font-size: 1.188rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.create-chat-picker__contact-sub {
  font-size: 0.875rem;
  color: rgba(17, 17, 17, 0.5);
}

.create-chat-picker__contact-badge {
  flex-shrink: 0;
  min-height: 1.375rem;
  padding: 0 0.5rem;
  border-radius: 62.438rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  font-size: 0.688rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.create-chat-picker__contact-badge--self {
  background: rgba(184, 216, 255, 0.72);
  color: #0f365e;
}

.create-chat-picker__contact-badge--registered {
  background: #E9EEF6;
  color: #111111;
}

.create-chat-picker__contact-badge--invite {
  background: rgba(17, 17, 17, 0.08);
  color: rgba(17, 17, 17, 0.62);
}

.create-chat-picker__contact-action {
  min-width: 3.625rem;
  min-height: 2rem;
  padding: 0 0.75rem;
  border-radius: 62.438rem;
  background: rgba(45, 159, 107, 0.12);
  color: #2d9f6b;
  font: inherit;
  font-size: 0.938rem;
  font-weight: 700;
}

.create-chat-picker__contact-action[disabled] {
  color: rgba(17, 17, 17, 0.42);
  background: rgba(17, 17, 17, 0.08);
}

.create-chat-picker__alpha {
  position: fixed;
  right: max(0.5rem, env(safe-area-inset-right));
  top: 34%;
  transform: translateY(-8%);
  display: flex;
  flex-direction: column;
  gap: 0.188rem;
  align-items: center;
  color: #2d9f6b;
  font-size: 0.688rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  pointer-events: none;
}

.create-chat-picker__bottom-bar {
  grid-template-columns: minmax(0, 1fr) auto;
  margin-top: 0.5rem;
}

.create-chat-picker__bottom-field {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 1.125rem;
}

.create-chat-picker__bottom-field::before {
  display: none;
}

.create-chat-picker__bottom-meta {
  font-size: 0.938rem;
  color: rgba(17, 17, 17, 0.5);
}

.compose-bottom-bar__action {
  min-width: 4.125rem;
  height: 2.5rem;
  padding: 0 1rem;
  border-radius: 62.438rem;
  background: #007aff;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  position: relative;
  z-index: 2;
}

.compose-bottom-bar__action:disabled {
  background: rgba(120, 120, 128, 0.18);
  color: rgba(60, 60, 67, 0.42);
}

.create-chat-picker {
  gap: 1.375rem;
  min-height: 100%;
  padding: 0.5rem 0 0;
}

.create-chat-picker::before,
.create-chat-picker::after {
  display: none;
}

.create-chat-picker__header {
  min-height: 4.5rem;
  padding-top: 0.125rem;
}

.create-chat-picker__title {
  font-size: 1.95rem;
  font-weight: 700;
  letter-spacing: -0.055em;
}

.create-chat-picker__close {
  width: 4rem;
  height: 4rem;
  color: rgba(17, 17, 17, 0.86);
  background: rgba(255,255,255,0.9);
  box-shadow:
    inset 0 0.062rem 0 rgba(255,255,255,0.96),
    0 1rem 2.125rem rgba(228, 225, 236, 0.24);
}

.create-chat-picker__recipient-shell {
  margin-top: 0.125rem;
}

.create-chat-picker__recipient-row {
  min-height: 5.125rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.875rem;
  padding: 0.625rem 0.875rem 0.625rem 1.125rem;
  border-radius: 1.75rem;
  background: rgba(255,255,255,0.92);
  box-shadow:
    inset 0 0.062rem 0 rgba(255,255,255,0.96),
    0 1.125rem 2.625rem rgba(224, 224, 233, 0.18);
}

.create-chat-picker__recipient-label {
  font-size: 1.1rem;
  color: rgba(17, 17, 17, 0.48);
  letter-spacing: -0.02em;
}

.create-chat-picker__recipient-field {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0;
}

.create-chat-picker__selected-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-height: auto;
}

.create-chat-picker__selected-list[hidden] {
  display: none !important;
}

.create-chat-picker__selected-list .entry-member-pill {
  margin: 0;
  min-height: 2rem;
  padding: 0.25rem 0.625rem;
  background: rgba(184, 216, 255, 0.54);
  box-shadow: inset 0 0.062rem 0 rgba(255,255,255,0.76);
}

.create-chat-picker__recipient-input {
  flex: 1 1 8.75rem;
  min-width: 7.5rem;
  height: 2.25rem;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 1.1rem;
  color: var(--text-primary);
  outline: none;
  padding: 0;
}

.create-chat-picker__recipient-input::placeholder {
  color: rgba(17, 17, 17, 0.34);
}

.create-chat-picker__recipient-add {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(233, 233, 237, 0.92);
  color: rgba(17, 17, 17, 0.92);
  box-shadow: inset 0 0.062rem 0 rgba(255,255,255,0.94);
}

.create-chat-picker__contacts {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 0.25rem;
}

.create-chat-picker__contacts[hidden] {
  display: none !important;
}

.create-chat-picker__contact-card {
  border-radius: 1.5rem;
  box-shadow:
    inset 0 0.062rem 0 rgba(255,255,255,0.98),
    0 1rem 2.375rem rgba(224, 224, 233, 0.18);
}

.create-chat-picker__contact-row {
  min-height: 4.75rem;
  padding: 0 1rem;
}

.create-chat-picker__contact-avatar {
  width: 3rem;
  height: 3rem;
}

.create-chat-picker__contact-name {
  font-size: 1.05rem;
}

.create-chat-picker__contact-sub {
  font-size: 0.84rem;
}

.create-chat-picker__contact-action {
  min-width: 3.375rem;
  min-height: 1.875rem;
  font-size: 0.88rem;
}

.create-chat-picker__empty {
  padding: 1rem 0.25rem 0;
  text-align: center;
  font-size: 0.95rem;
  color: rgba(17, 17, 17, 0.42);
}

.create-chat-picker__bottom-bar {
  display: none !important;
}

#screen-create-group .entry-screen--compose {
  width: 100%;
  min-height: 0;
  height: calc(var(--layout-height) - var(--compose-sheet-top-pad));
  max-height: calc(var(--layout-height) - var(--compose-sheet-top-pad));
  min-width: 0;
  margin-top: var(--compose-sheet-top-pad);
  gap: 0.75rem;
  padding:
    max(1rem, calc(env(safe-area-inset-top, 0rem) + 0.75rem))
    0
    0;
  justify-content: flex-start;
  background: #ffffff;
  border-radius: 2.25rem 2.25rem 0 0;
  box-shadow: none;
  overflow: hidden;
  transform: translate3d(0, 100%, 0);
  transition: transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

#screen-create-group .compose-form {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
}

#screen-create-group .create-chat-picker {
  width: 100%;
  min-height: 0;
  height: 100%;
  gap: 0.75rem;
  padding: 0 0 env(safe-area-inset-bottom);
  background: #ffffff;
  overflow: hidden;
}

#screen-create-group .create-chat-picker__header {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 3.25rem;
  padding-top: 0;
  margin: 0;
  padding-inline: 4.5rem;
}

#screen-create-group .create-chat-picker__recipient-shell {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 1rem;
}

#screen-create-group .create-chat-picker__title {
  font-size: 1.2rem;
  letter-spacing: -0.04em;
}

#screen-create-group .create-chat-picker__close {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  width: 2.625rem;
  height: 2.625rem;
  color: #111111;
}

#screen-create-group .create-chat-picker__recipient-row {
  flex: 1 1 auto;
  min-height: 2.625rem;
  gap: 0.5rem;
  margin: 0;
  padding: 0.5rem 0.875rem;
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.82);
  border: 0.062rem solid rgba(255, 255, 255, 0.88);
  box-shadow: 0 0.875rem 2.125rem rgba(197, 190, 214, 0.16);
  backdrop-filter: blur(1.625rem);
  -webkit-backdrop-filter: blur(1.625rem);
}

#screen-create-group .create-chat-picker__recipient-label {
  font-size: 0.98rem;
}

#screen-create-group .create-chat-picker__recipient-field {
  gap: 0.375rem;
  padding: 0;
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 0.375rem;
  min-width: 0;
}

#screen-create-group .create-chat-picker__recipient-input {
  flex: 1 1 6rem;
  min-width: 4.5rem;
  height: 1.625rem;
  font-size: 0.98rem;
  appearance: none;
  -webkit-appearance: none;
}

#screen-create-group .create-chat-picker__recipient-input::-webkit-search-decoration,
#screen-create-group .create-chat-picker__recipient-input::-webkit-search-cancel-button,
#screen-create-group .create-chat-picker__recipient-input::-webkit-search-results-button,
#screen-create-group .create-chat-picker__recipient-input::-webkit-search-results-decoration {
  display: none;
  -webkit-appearance: none;
}

#screen-create-group .create-chat-picker__recipient-input::-ms-clear,
#screen-create-group .create-chat-picker__recipient-input::-ms-reveal {
  display: none;
}

#screen-create-group .create-chat-picker__selected-list {
  display: contents;
  gap: 0.375rem;
}

#screen-create-group .create-chat-picker__selected-list .entry-member-pill {
  min-height: 2.125rem;
  padding: 0.25rem 0.375rem 0.25rem 0.75rem;
  gap: 0.625rem;
  border-radius: 62.438rem;
  background: #e9eef5;
  border: 0;
  box-shadow: none;
  justify-content: flex-start;
}

#screen-create-group .create-chat-picker__selected-list .entry-member-pill__name {
  font-size: 0.84rem;
  font-weight: 500;
  color: #111111;
  letter-spacing: -0.02em;
}

#screen-create-group .create-chat-picker__selected-list .entry-member-pill__remove {
  min-width: 1.625rem;
  min-height: 1.625rem;
  width: 1.625rem;
  height: 1.625rem;
  margin-left: auto;
  border-radius: 62.438rem;
  background: #ffffff;
  color: rgba(17, 17, 17, 0.58);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
}

#screen-create-group .create-chat-picker__recipient-add {
  width: 2.625rem;
  height: 2.625rem;
  border-radius: 62.438rem;
  background: rgba(230, 239, 255, 0.88);
  color: rgba(17, 17, 17, 0.72);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-shadow:
    inset 0 0.062rem 0 rgba(255,255,255,0.96),
    0 0.75rem 1.75rem rgba(202, 212, 235, 0.22);
  transition: transform var(--t-fast), opacity var(--t-fast), box-shadow var(--t-fast);
}

#screen-create-group .create-chat-picker__recipient-add-icon {
  width: 0.75rem;
  height: 0.75rem;
  display: block;
}

#screen-create-group .create-chat-picker__contacts {
  gap: 0.625rem;
  padding: 0 1rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

#screen-create-group .create-chat-picker__contact-card {
  width: 100%;
  border-radius: 1.5rem;
  overflow: hidden;
  background: #ffffff;
}

#screen-create-group .create-chat-picker__contact-row {
  min-height: 4.125rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.75rem;
  padding: 0 0.875rem;
  cursor: pointer;
}

#screen-create-group .create-chat-picker__contact-meta {
  justify-content: center;
}

#screen-create-group .create-chat-picker__contact-avatar {
  width: 2.625rem;
  height: 2.625rem;
}

#screen-create-group .create-chat-picker__contact-name {
  font-size: 0.98rem;
}

#screen-create-group .create-chat-picker__contact-sub {
  font-size: 0.78rem;
  color: rgba(17, 17, 17, 0.44);
}

#screen-create-group .create-chat-picker__contact-badge {
  min-height: 1.125rem;
  padding: 0 0.375rem;
  font-size: 0.625rem;
  align-self: center;
}

#screen-create-group .create-chat-picker__contact-placeholder {
  width: 1.125rem;
  height: 1.125rem;
  display: block;
  opacity: 0.72;
}

#screen-create-group .entry-feedback {
  margin: 0.25rem 1rem 0;
}

#screen-create-group .create-chat-create-bar {
  position: sticky;
  bottom: 0;
  padding: 0.75rem 1rem calc(1rem + env(safe-area-inset-bottom, 0rem));
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 32%);
}

#screen-create-group .create-chat-create-btn {
  width: 100%;
  height: 3.25rem;
  border-radius: 62.438rem;
  background: #111111;
  color: #ffffff;
  font-size: 1.062rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

#screen-create-group .create-chat-create-btn.is-busy {
  position: relative;
  opacity: 0.92;
}

#screen-create-group .create-chat-create-btn.is-busy::after {
  content: '';
  display: inline-block;
  width: 1.35em;
  margin-left: 0.18em;
  text-align: left;
  animation: yap-loading-dots 1.1s steps(4, end) infinite;
}

@keyframes yap-loading-dots {
  0% {
    content: '';
  }
  25% {
    content: '.';
  }
  50% {
    content: '..';
  }
  75%,
  100% {
    content: '...';
  }
}

#screen-create-group {
  align-items: stretch;
  justify-content: flex-end;
  background: transparent;
  overflow: hidden;
}

#screen-create-group.active .entry-screen--compose {
  transform: translate3d(0, 0, 0);
}

#screen-create-group.screen-sheet-closing .entry-screen--compose {
  transform: translate3d(0, calc(100% + var(--compose-sheet-offset)), 0);
}

@media (prefers-reduced-motion: reduce) {
  .screen,
  .entry-screen--compose,
  #screen-create-group.active .entry-screen--compose,
  #screen-create-group.screen-sheet-closing .entry-screen--compose {
    transition: none !important;
  }
}

@media (max-width: 420px) {
  .compose-header__back,
  .compose-header__action {
    min-width: 3.375rem;
  }

  .compose-recipients__row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .compose-recipients__add {
    grid-column: 2;
    justify-self: start;
  }
}

/* ── Chat Context Menu ────────────────────────────────── */
.chat-context-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  pointer-events: none;
}

.chat-context-menu[hidden] {
  display: none;
}

.chat-context-menu.active {
  pointer-events: auto;
}

.chat-context-menu__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(0.125rem);
  -webkit-backdrop-filter: blur(0.125rem);
}

.chat-context-menu__content {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: max(5.75rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
  pointer-events: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.chat-context-menu__preview {
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  min-height: 26rem;
  max-height: min(44rem, 74vh);
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 1.625rem;
  background:
    radial-gradient(circle at bottom left, rgba(184, 216, 255, 0.20), transparent 44%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(250, 251, 255, 0.92));
  box-shadow:
    0 1.75rem 3.5rem rgba(26, 27, 36, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  overflow: hidden;
  pointer-events: auto;
  animation: chatContextPreviewIn 0.52s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
}

.chat-context-preview-card {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  min-height: 5.5rem;
  margin: 0 0 0.625rem;
  padding: 0.875rem 0.875rem 0.75rem;
  border: 1px solid rgba(210, 223, 242, 0.78);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.86);
  box-shadow:
    0 0.75rem 1.75rem rgba(86, 96, 115, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.chat-context-preview-card__header,
.chat-context-preview-card__track {
  display: flex;
  align-items: center;
}

.chat-context-preview-card__header {
  gap: 0.75rem;
}

.chat-context-preview-card__play {
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
  width: 2.125rem;
  height: 2.125rem;
  place-items: center;
  border-radius: 50%;
  background: rgba(246, 248, 252, 0.92);
}

.chat-context-preview-card__play::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 0.125rem;
  border-top: 0.3125rem solid transparent;
  border-bottom: 0.3125rem solid transparent;
  border-left: 0.5rem solid #111;
}

.chat-context-preview-card__title {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-context-preview-card__time,
.chat-context-preview-card__track {
  color: rgba(17, 17, 17, 0.48);
  font-size: 0.6875rem;
  line-height: 1;
}

.chat-context-preview-card__track {
  gap: 0.375rem;
}

.chat-context-preview-card__line {
  position: relative;
  flex: 1 1 auto;
  height: 0.125rem;
  overflow: hidden;
  border-radius: var(--r-full);
  background: rgba(209, 216, 229, 0.7);
}

.chat-context-preview-card__line > span {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  border-radius: inherit;
  background: rgba(184, 216, 255, 0.92);
}

.chat-context-preview-card__avatars {
  display: flex;
  justify-content: center;
  min-height: 1.5rem;
  margin-top: -0.125rem;
}

.chat-context-preview-card__avatar {
  display: inline-flex;
  width: 1.375rem;
  height: 1.375rem;
  margin-left: -0.375rem;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background-position: center;
  background-size: cover;
  color: rgba(17, 17, 17, 0.72);
  font-size: 0.5rem;
  font-weight: 700;
}

.chat-context-preview-card__avatar:first-child {
  margin-left: 0;
}

.chat-context-preview-empty {
  position: relative;
  flex: 1 1 auto;
  min-height: 14rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 0;
}

.chat-context-preview-empty__floating {
  --floating-avatar-width: 7.25rem;
  --floating-avatar-photo: 6.75rem;
}

/* .floating-avatar is position:absolute with chat-empty corner offsets; center in preview instead */
.chat-context-preview-empty__floating.floating-avatar--primary {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  margin: 0;
  /* Match chat empty-state motion: slower + smoother to avoid jitter. */
  animation: besties-float-single 8.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  will-change: transform;
  backface-visibility: hidden;
}

.chat-context-preview-empty__photo {
  width: 6.25rem;
  height: 6.25rem;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.125rem;
  font-weight: 700;
  color: rgba(17, 17, 17, 0.72);
}

.chat-context-menu__popover {
  position: relative;
  flex: 0 0 auto;
  width: min(15.625rem, 100%);
  /* Left edge flush with preview (column cross-start); width capped to column */
  align-self: flex-start;
  padding-block: 0.375rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.54);
  border-radius: 1.625rem;
  background: rgba(248, 250, 255, 0.78);
  backdrop-filter: blur(1.25rem);
  -webkit-backdrop-filter: blur(1.25rem);
  box-shadow:
    0 1.25rem 2.75rem rgba(32, 37, 50, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.64);
  pointer-events: auto;
  animation: popoverIn 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes chatContextPreviewIn {
  from {
    opacity: 0;
    transform: translateY(0.75rem) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes popoverIn {
  from {
    opacity: 0;
    transform: translateY(0.75rem) scale(0.93);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.chat-context-menu__item {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  min-height: 2.625rem;
  padding: 0.625rem 1.25rem;
  border: none;
  background: none;
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.chat-context-menu__item:active {
  background-color: rgba(0, 0, 0, 0.06);
}

.chat-context-menu__item--delete {
  color: #FF3B30;
}

.chat-context-menu__icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  background: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}

.chat-context-menu__icon-img {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
  pointer-events: none;
}

.chat-context-menu__icon.chat-context-menu__icon--unread {
  mask-image: url("../assets/mark-as-unread.svg");
  -webkit-mask-image: url("../assets/mark-as-unread.svg");
}

.chat-context-menu__icon.chat-context-menu__icon--alerts {
  mask-image: url("../assets/hide-alerts.svg");
  -webkit-mask-image: url("../assets/hide-alerts.svg");
}

.chat-context-menu__icon--delete {
  mask-image: url("../assets/delete.svg");
  -webkit-mask-image: url("../assets/delete.svg");
}

.chat-context-menu__icon.chat-context-menu__icon--read {
  mask-image: url("../assets/mark-as-read.svg");
  -webkit-mask-image: url("../assets/mark-as-read.svg");
}

.chat-context-menu__icon.chat-context-menu__icon--show-alerts {
  mask-image: url("../assets/show-alerts.svg");
  -webkit-mask-image: url("../assets/show-alerts.svg");
}

/* Delete sheet: white card (not glass popover chrome) */
.chat-context-delete-confirm.chat-context-menu__popover {
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  background: #ffffff;
  border: none;
  border-radius: 1.75rem;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 0.375rem 1.25rem rgba(0, 122, 255, 0.12);
}

.chat-context-delete-confirm[hidden],
.chat-context-delete-confirm[hidden].chat-context-menu__popover {
  display: none !important;
}

/* Swap: hide only the actions popover; preview + overlay stay as-is */
.chat-context-menu--delete-confirm .chat-context-menu__actions {
  display: none !important;
}

.chat-context-menu--delete-confirm .chat-context-delete-confirm:not([hidden]) {
  display: flex !important;
}

.chat-context-delete-confirm__inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 1.25rem 1.125rem 1.125rem;
}

.chat-context-delete-confirm__message {
  margin: 0;
  padding: 0;
  text-align: left;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  color: #000000;
}

.chat-context-delete-confirm__actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.chat-context-delete-confirm__btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 62.438rem;
  background: #e8e8ed;
  color: #ff3b30;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

.chat-context-delete-confirm__btn:active {
  opacity: 0.92;
  background: #dcdce3;
}

#ctx-delete-cancel-btn.chat-context-delete-confirm__btn {
  color: var(--text-primary);
}

@media (max-height: 43rem) {
  .chat-context-menu__content {
    padding-top: max(4.5rem, env(safe-area-inset-top));
  }

  .chat-context-menu__preview {
    max-height: 62vh;
    min-height: 20rem;
  }
}

@media (max-height: 36rem) {
  .chat-context-menu__content {
    gap: 0.5rem;
    padding-top: max(3.5rem, env(safe-area-inset-top));
  }

  .chat-context-menu__preview {
    max-height: 56vh;
    min-height: 16.5rem;
    padding: 0.75rem;
  }

  .chat-context-preview-card {
    min-height: 4.875rem;
    padding: 0.75rem;
  }

  .chat-context-menu__item {
    min-height: 2.375rem;
    padding-block: 0.5rem;
  }
}

/* ── Date Headers ─────────────────────────────────────── */
.topics-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.topics-date-header {
  font-size: 0.812rem;
  font-weight: 600;
  color: rgba(34, 34, 34, 0.58);
  text-transform: none;
  padding: 1rem 0 0 0;
  margin-bottom: 0.25rem;
  letter-spacing: 0;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════ */
/* Other Users Recording Indicators in Thread */
/* ═══════════════════════════════════════════════════════ */

/* Avatar glow animation when recording */
@keyframes avatar-glow {
  0%, 100% {
    box-shadow: 0 0 0 2px currentColor;
    opacity: 0.4;
  }
  50% {
    box-shadow: 0 0 0 6px currentColor;
    opacity: 0.7;
  }
}

/* Container for avatars of others recording */
.others-recording-avatars {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  background-color: rgba(0, 0, 0, 0.02);
}

/* Individual recording avatar in thread */
.recording-avatar-float {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.recording-avatar-float__avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.recording-avatar-float[data-state="recording"] .recording-avatar-float__avatar {
  animation: avatar-glow 1.5s ease-in-out infinite;
}

.recording-avatar-float[data-state="sending"] .recording-avatar-float__avatar {
  animation: avatar-glow 1s ease-in-out infinite;
}

.recording-avatar-float__label {
  font-size: 0.75rem;
  color: rgba(0, 0, 0, 0.6);
  text-align: center;
  max-width: 3rem;
  word-break: break-word;
}