/* Tokens live in ./styles/tokens.css */
      /* Reset + phone-shell layout live in ./styles/global.css */

.statusbarSpacer{
  /* Legacy spacer: keep disabled now that `.topbar` is safe-area padded. */
  display: none;
  height: 0;
  background: var(--surface);
  flex:none;
}

      /* Top bar (WhatsApp-like: compact, sticky, icon + title) */
      .topbar{
        position: sticky;
        top: 0;
        z-index: 60;
        background: #fff;
        color: var(--wa-text);
        border-bottom: 1px solid var(--wa-divider);
        box-shadow: none;
        /* 56px app bar + safe-area inset (iOS) */
        padding: calc(6px + var(--safe-top)) var(--pad-r) 6px var(--pad-l);
        min-height: calc(56px + var(--safe-top));
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
      }
      .topLeft{
        display:flex;
        align-items:center;
        min-width:0;
      }
      .brand{
        /* Title: 20px semibold */
        font-weight: 600;
        font-size: 20px;
        letter-spacing: 0;
        line-height: 1.2;
        color: var(--text);
        display:flex;
        align-items:center;
        gap:8px;
        min-width: 0;
      }
      .brandText{
        font-weight: 600;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
      }
      .brand .appLogo{
  width: 30px;
  height: 30px;
  display:block;
  flex: 0 0 auto;
  border-radius: 0;
  overflow: visible;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}
.appLogo.big{
  width: 96px;
  height: 96px;
  display:block;
  border-radius: 0;
  overflow: visible;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.18));
}
      /* Optional connection state (kept compact; doesn't add a second row) */
      .brandStatus{
        /* Chats List app bar should be clean: hide subtitle by default. */
        display:none;
      }
      .topRight{
        display:flex;
        align-items:center;
        gap:8px;
        flex:0 0 auto;
      }
      .apiPill{
        font-size: 12px;
        padding: 6px 10px;
        border-radius: 999px;
        background: rgba(15,23,42,0.04);
        border: 1px solid rgba(15,23,42,0.06);
        color: var(--muted);
        white-space:nowrap;
      }

      .topIcon{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        /* iOS-modern: invisible button at rest (hit area stays 44x44) */
        width: var(--icon-btn-size);
        height: var(--icon-btn-size);
        border: none;
        background: transparent;
        border-radius: 12px; /* radius matters only when pressed */
        color: var(--text);
        cursor:pointer;
        outline: none;
        transition: background-color 120ms ease, box-shadow 160ms ease;
      }
      .topIcon:active{
        background: rgba(15,23,42,0.06);
      }
      .topIcon:focus-visible{
        outline: none;
        box-shadow: 0 0 0 3px var(--brandRing);
      }
      .topIcon svg{ width: var(--icon-glyph-size-strong); height: var(--icon-glyph-size-strong); fill: currentColor; opacity:.92; }
      /* Chats UX: do not show logout as a primary top action */
      #logoutBtnTop{ display:none !important; }

      /* Top-right overflow menu (⋮) */
      .topMoreMenu{
        position: absolute;
        right: 10px;
        top: calc(100% - 4px);
        background: var(--surface);
        border: 1px solid rgba(15,23,42,0.08);
        border-radius: 14px;
        box-shadow: 0 10px 28px rgba(0,0,0,.16);
        padding: 6px;
        min-width: 172px;
        z-index: 80;
      }
      .topMoreMenu.hidden{ display:none !important; }
      .topMoreItem{
        width: 100%;
        display:flex;
        align-items:center;
        justify-content:flex-start;
        gap:10px;
        padding: 10px 12px;
        border-radius: 12px;
        font-weight: 800;
        font-size: 13px;
        color: var(--text);
        cursor: pointer;
        touch-action: pan-y;
      }
      .topMoreItem:active{ background: rgba(15,23,42,0.06); }
      .topMoreItem svg{ width: 18px; height: 18px; fill: currentColor; opacity: .9; }
      .topMoreBackdrop{
        /* Constrain overlay to the app frame (no desktop full-viewport stretch). */
        position: fixed;
        top: 0;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: min(100%, var(--app-max-w));
        background: transparent;
        z-index: 70;
      }
      .topMoreBackdrop.hidden{ display:none !important; }
      body.authOnly #topbar{
        display:none !important;
      }

      #publicLinkView{
        display: flex;
        align-items: center;
        justify-content: center;
        padding: calc(var(--safe-top) + 24px) 20px calc(var(--safe-bottom) + 28px);
        background:
          radial-gradient(circle at top center, rgba(27,149,11,.16), transparent 34%),
          radial-gradient(circle at bottom left, rgba(80,118,255,.06), transparent 28%),
          linear-gradient(180deg, #f8fcf9 0%, #f4f7f4 52%, #eef2f5 100%);
      }
      #publicLinkView.hidden{ display: none !important; }
      .publicLinkCard{
        width: min(100%, 540px);
        margin: auto 0;
        padding: 30px 22px 22px;
        border-radius: 32px;
        border: 1px solid rgba(190,231,196,.95);
        background:
          linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,248,.96)),
          rgba(255,255,255,.96);
        box-shadow:
          0 20px 48px rgba(15,23,42,.10),
          inset 0 1px 0 rgba(255,255,255,.94);
        backdrop-filter: blur(20px);
      }
      .publicLinkCard .authBrand{
        gap: 10px;
        padding: 0;
        flex-direction: column;
        align-items: center;
        text-align: center;
      }
      .publicLinkCard .appLogo.big{
        width: 86px;
        height: 86px;
        filter: drop-shadow(0 16px 28px rgba(27,149,11,.18));
      }
      .publicLinkBrandName{
        font-size: 14px;
        font-weight: 900;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--accent-pressed);
      }
      .publicLinkBadge{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        align-self:center;
        padding:7px 13px;
        border-radius:999px;
        background: linear-gradient(180deg, rgba(27,149,11,0.10), rgba(27,149,11,0.05));
        border: 1px solid rgba(27,149,11,0.08);
        color: rgba(22,122,9,.84);
        font-size: 10px;
        font-weight: 900;
        letter-spacing: .14em;
        text-transform: uppercase;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.76);
      }
      .publicLinkCard .authTitle{
        margin-top: 8px;
        font-size: 31px;
        line-height: 1.05;
        letter-spacing: -.04em;
      }
      .publicLinkHint{
        margin: 12px auto 0;
        text-align: center;
        max-width: 34ch;
        font-size: 15px;
        line-height: 1.58;
        color: var(--muted);
      }
      .publicLinkMeta{
        margin-top: 22px;
        padding: 18px 18px;
        border-radius: 22px;
        background: linear-gradient(180deg, rgba(27,149,11,0.08), rgba(27,149,11,0.03));
        border: 1px solid rgba(27,149,11,0.12);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
      }
      .publicLinkMetaLabel{
        font-size: 11px;
        font-weight: 900;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--muted);
      }
      .publicLinkMetaValue{
        margin-top: 6px;
        font-size: 22px;
        font-weight: 900;
        letter-spacing: .06em;
        color: var(--text);
      }
      .publicLinkButtons{
        display:flex;
        flex-direction:column;
        gap:12px;
        margin-top: 22px;
      }
      .publicLinkButtons .btn{
        width:100%;
        margin-top: 0;
        min-height: 56px;
        border-radius: 18px;
        font-size: 16px;
        font-weight: 900;
        display:flex;
        align-items:center;
        justify-content:center;
        text-align:center;
        text-decoration:none;
      }
      .publicLinkButtons .btnPrimary{
        background: linear-gradient(180deg, #1fc321 0%, #17960b 100%);
        color: #fff;
        box-shadow: 0 14px 28px rgba(27,149,11,.20);
      }
      .publicLinkSecondary{
        background: rgba(255,255,255,.98);
        color: var(--text);
        border:1px solid rgba(15,23,42,0.08);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.84), 0 6px 16px rgba(15,23,42,.05);
      }
      .publicLinkSecondary:active{
        background: rgba(15,23,42,0.04);
      }
      .publicLinkGhost{
        background: transparent;
        color: rgba(17,24,39,.62);
        border:1px solid rgba(15,23,42,0.06);
        min-height: 46px !important;
        font-size: 14px !important;
        font-weight: 800 !important;
      }
      .publicLinkActionsNote{
        margin-top: 14px;
        text-align: center;
        font-size: 13px;
        line-height: 1.45;
        color: rgba(17,24,39,.54);
      }
      .publicLinkMsg{
        margin-top: 10px;
        text-align: center;
        font-size: 13px;
      }
      @media (max-width: 480px){
        .publicLinkCard{
          padding: 24px 18px 18px;
          border-radius: 28px;
        }
        .publicLinkCard .authTitle{
          font-size: 26px;
        }
        .publicLinkMetaValue{
          font-size: 20px;
        }
      }

      .main{
        flex: 1 1 auto;
        min-height: 0;
        display:flex;
        flex-direction:column;
        background: var(--wa-bg);
        overflow:hidden;
      }
      .view{
        flex:1;
        overflow:auto;
        /* Global gutters: never touch the 4 edges (safe-area aware). */
        padding-top: var(--pad);
        padding-right: var(--pad-r);
        padding-bottom: calc(var(--pad) + var(--kb, 0px) + var(--safe-bottom));
        padding-left: var(--pad-l);
        /* Keep content reachable when the mobile keyboard opens */
        scroll-padding-bottom: calc(var(--pad) + var(--kb, 0px) + var(--safe-bottom));
        /* Scroll polish */
        -webkit-overflow-scrolling: touch; /* iOS momentum scrolling */
        overscroll-behavior-y: contain; /* calmer bounce / no parent scroll chaining */
        scroll-behavior: smooth; /* programmatic scrolls only */
      }
      html.is-native-app.keyboard-open .view{
        padding-bottom: var(--pad);
        scroll-padding-bottom: var(--pad);
      }

      /* App view: main scroll container (used by pull-to-refresh logic) */
      #appView.view{
        overflow: auto;
        padding: 0;
        padding-bottom: calc(var(--tabbar-total-h) + var(--safe-bottom));
        scroll-padding-bottom: calc(var(--page-body-pad-b) + var(--safe-bottom) + var(--kb, 0px));
        /* STEP 6: make the scroll "screen surface" white */
        background: #fff;
        /* Let the active tab stretch to full height without nested scrolling */
        display: flex;
        flex-direction: column;
        /* Critical for flex + overflow scrolling */
        min-height: 0;
      }
      html.is-native-app.keyboard-open #appView.view{
        scroll-padding-bottom: var(--page-body-pad-b);
      }
      html[data-tab="chats"] #appView.view{
        overflow: hidden;
      }
      html[data-tab="nearby"] #appView.view{
        overflow: hidden;
      }
      html[data-tab="places"] #appView.view{
        overflow: hidden;
      }
      html[data-tab="me"] #appView.view{
        overflow: hidden;
      }
      html[data-tab="rooms"] #appView.view{
        overflow: hidden;
      }

      /* STEP 6: Tabs should visually fill the full scroll viewport */
      #appView > #chatsDesktopWrap,
      #appView > #chatsTab,
      #appView > #nearbyTab,
      #appView > #roomsTab,
      #appView > #roomsTab,
      #appView > #placesTab,
      #appView > #meTab{
        flex: 1 0 auto;
        min-height: 100%;
      }
      #appView > #roomsTab{ position: relative; }
      #appView > #nearbyTab{
        display: flex;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
      }

      /* STEP 6: Ensure tab body surfaces stay white down to the tab bar */
      #chatsTab .pageBody,
      #nearbyTab .pageBody,
      #roomsTab .pageBody,
      #placesTab .pageBody{
        background: #fff;
        flex: 1 0 auto;
      }

      .pageHeader{
        position: sticky;
        top: 0;
        z-index: 20;
        flex: 0 0 auto;
      }
      .pageHeaderInner{
        padding-left: var(--pad-l);
        padding-right: var(--pad-r);
      }
      .pageBody{
        min-height: 0;
        padding-left: var(--pad-l);
        padding-right: var(--pad-r);
        padding-bottom: calc(var(--page-body-pad-b) + var(--safe-bottom));
      }
      .hidden{ display:none !important; }
      html.is-touch body{
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
      }
      html.is-touch input,
      html.is-touch textarea,
      html.is-touch select,
      html.is-touch option,
      html.is-touch [contenteditable="true"]{
        -webkit-user-select: text;
        user-select: text;
        -webkit-touch-callout: default;
      }
      html.is-native-app,
      html.is-native-app body,
      html.is-native-app .appShell,
      html.is-native-app .appFrame,
      html.is-native-app #appView,
      html.is-native-app #authView,
      html.is-native-app #topbar{
        -webkit-tap-highlight-color: transparent;
      }
      html.is-native-app.is-touch #appView,
      html.is-native-app.is-touch #appView *:not(input):not(textarea):not(select):not(option):not([contenteditable="true"]){
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: transparent !important;
      }
      html.booting.is-native-app .appShell,
      html.booting.is-native-app .appFrame,
      html.booting.is-native-app #authView,
      html.booting.is-native-app #authView *:not(input):not(textarea):not(select):not(option):not([contenteditable="true"]),
      html.booting.is-native-app #topbar,
      html.booting.is-native-app #topbar *:not(input):not(textarea):not(select):not(option):not([contenteditable="true"]),
      html.launch-touch-guard.is-native-app .appShell,
      html.launch-touch-guard.is-native-app .appFrame,
      html.launch-touch-guard.is-native-app #authView,
      html.launch-touch-guard.is-native-app #authView *:not(input):not(textarea):not(select):not(option):not([contenteditable="true"]),
      html.launch-touch-guard.is-native-app #topbar,
      html.launch-touch-guard.is-native-app #topbar *:not(input):not(textarea):not(select):not(option):not([contenteditable="true"]),
      html.booting.is-native-app,
      html.booting.is-native-app body,
      html.booting.is-native-app #appView,
      html.booting.is-native-app #appView *:not(input):not(textarea):not(select):not(option):not([contenteditable="true"]),
      html.launch-touch-guard.is-native-app,
      html.launch-touch-guard.is-native-app body,
      html.launch-touch-guard.is-native-app #appView,
      html.launch-touch-guard.is-native-app #appView *:not(input):not(textarea):not(select):not(option):not([contenteditable="true"]){
        -webkit-user-select: none !important;
        user-select: none !important;
        -webkit-touch-callout: none !important;
        -webkit-tap-highlight-color: transparent !important;
      }
      body.modalOpen{
        overflow: hidden !important;
        height: 100% !important;
      }

      /* Auth boot: prevent login form flash while session is checked */
      html.booting #authView #loginForm,
      html.booting #authView #signupForm{
        display:none !important;
      }
      html.booting #authView #authChecking{
        display:block !important;
      }

      .fileInputOffscreen{
        position: fixed;
        left: -10000px;
        top: -10000px;
        width: 1px;
        height: 1px;
        opacity: 0;
      }
      .clickable{ cursor:pointer; }

      /* Card */
      .card{
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--rLg);
        box-shadow: none;
        padding: 9px 12px;
      }
      #authView{
        display:flex;
        align-items:center;
        justify-content:center;
        background:
          radial-gradient(circle at 14% 4%, rgba(37,211,102,.20), transparent 24%),
          radial-gradient(circle at 88% 0%, rgba(37,211,102,.12), transparent 22%),
          linear-gradient(180deg, #f5f8f4 0%, #edf2f6 100%);
      }
      #authView .authCard{
        position: relative;
        overflow: hidden;
        width: min(100%, 392px);
        margin: auto 0;
        padding: 18px 18px 18px;
        border-radius: 32px;
        border: 1px solid rgba(255,255,255,.84);
        background:
          linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,252,249,.96)),
          rgba(255,255,255,.985);
        box-shadow:
          0 22px 48px rgba(15,23,42,.08),
          0 1px 0 rgba(255,255,255,.92) inset;
      }
      #authView .authCard::before{
        content:"";
        position:absolute;
        inset:-120px auto auto -70px;
        width: 240px;
        height: 240px;
        border-radius: 999px;
        background: radial-gradient(circle, rgba(37,211,102,.18) 0%, rgba(37,211,102,0) 72%);
        pointer-events:none;
      }
      #authView .authCard::after{
        content:"";
        position:absolute;
        inset:auto -80px -110px auto;
        width: 220px;
        height: 220px;
        border-radius: 999px;
        background: radial-gradient(circle, rgba(15,23,42,.05) 0%, rgba(15,23,42,0) 72%);
        pointer-events:none;
      }
      html.booting #authView .authCard{
        width: min(100%, 180px);
        max-width: 180px;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        margin: auto;
      }
      html.booting #authView{
        align-items: center;
        justify-content: center;
        padding-top: 0;
        padding-bottom: 0;
      }
      html.is-native-app.booting #authView{
        opacity: 0;
        pointer-events: none;
      }
      html.is-native-app.booting body{
        background:
          radial-gradient(circle at 14% 4%, rgba(37,211,102,.20), transparent 24%),
          radial-gradient(circle at 88% 0%, rgba(37,211,102,.12), transparent 22%),
          linear-gradient(180deg, #f5f8f4 0%, #edf2f6 100%);
      }
      .authHero{
        position: relative;
        margin: -2px -2px 12px;
        padding: 8px 8px 0;
        text-align: center;
      }
      .authHero::before{
        content:"";
        position:absolute;
        inset:0 8px auto;
        height: 148px;
        border-radius: 28px;
        background: linear-gradient(180deg, rgba(37,211,102,.12), rgba(255,255,255,0));
        pointer-events:none;
      }
      .authBrand{
        display:flex;
        flex-direction:column;
        align-items:center;
        gap: 0;
        padding: 2px 0 0;
        position: relative;
        z-index: 1;
      }
      html.booting #authView .authBrand{
        gap: 14px;
        padding-top: 0;
      }
      html.booting #authView .appLogo.big{
        width: 92px;
        height: 92px;
        filter: drop-shadow(0 18px 28px rgba(27,149,11,.12));
        animation: halaBootMark 1.7s ease-in-out infinite;
      }
      #authView .appLogo.big{
        width: 78px;
        height: 78px;
        padding: 0;
        border-radius: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
        filter: drop-shadow(0 12px 24px rgba(27,149,11,.10));
      }
      .authKicker{
        display: none;
      }
      html.booting #authView .authKicker{
        display: none;
      }
      .authBrand .tagline{
        display: none;
      }
      html.booting #authView .authBrand .tagline{
        display: none;
      }
      .authBootVersion{
        display: none;
      }
      html.booting #authView .authBootVersion{
        display: block;
        text-align: center;
        color: rgba(60,60,67,.62);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .01em;
      }
      .authTitle{
        position: relative;
        z-index: 1;
        text-align:center;
        font-size: 30px;
        font-weight: 980;
        letter-spacing: -.03em;
        line-height: 1.05;
        margin: 18px 0 0;
        color: var(--text);
        text-wrap: balance;
      }
      .authSubtitle{
        position: relative;
        z-index: 1;
        margin: 9px auto 0;
        max-width: 248px;
        text-align: center;
        color: rgba(15,23,42,.58);
        font-size: 13.5px;
        font-weight: 600;
        line-height: 1.42;
        text-wrap: balance;
      }
      html.booting #authView .authSubtitle{
        display: none;
      }
      html.booting #authView .authTitle{
        display: none;
      }
      #authChecking{
        margin-top: 0;
        min-height: 0;
      }
      .authBootLead{
        display: none;
      }
      .authBootProgress{
        display: none;
      }
      .authBootProgress::before{
        display: none;
      }
      .authBootRows{
        display: none;
      }
      @keyframes authBootProgressSlide{
        0%{ transform: translateX(0%); }
        55%{ transform: translateX(110%); }
        100%{ transform: translateX(0%); }
      }
      @keyframes halaBootMark{
        0%, 100%{ transform: scale(1); opacity: 1; }
        50%{ transform: scale(1.03); opacity: .96; }
      }
      .authSwitch{
        margin-top: 14px;
        text-align:center;
        font-size: 13px;
        color: rgba(60,60,67,.72);
        line-height: 1.45;
      }
      .authLegal{
        margin-top: 10px;
        text-align:center;
        font-size: 12px;
        color: rgba(60,60,67,.68);
        line-height: 1.45;
      }
      .authLegal a{
        color: inherit;
        text-decoration: underline;
        text-underline-offset: 2px;
      }
      .authLinkBtn{
        border: 0;
        background: transparent;
        padding: 0;
        font: inherit;
        color: var(--wa-green-2);
        font-weight: 900;
        cursor: pointer;
        position: relative;
        touch-action: pan-y;
      }
      /* Increase tap target to >=48px without changing layout */
      .authLinkBtn::before{
        content:"";
        position:absolute;
        left:-8px; right:-8px;
        top:-6px; bottom:-24px;
      }
      .authLinkBtn:active{ text-decoration: underline; opacity: .88; }
      .authLinkBtn:focus-visible{
        outline: none;
        border-radius: 10px;
        box-shadow: 0 0 0 3px var(--brandRing);
      }

      /* Secondary auth links (e.g., Forgot password?) */
      .authSecondaryLinkBtn{
        border: 0;
        background: transparent;
        padding: 0;
        font: inherit;
        color: var(--wa-muted);
        font-weight: 800;
        cursor: pointer;
        position: relative;
        touch-action: pan-y;
        text-decoration: none;
      }
      /* Tap target >= 44px without changing layout */
      .authSecondaryLinkBtn::before{
        content:"";
        position:absolute;
        left:-8px; right:-8px;
        top:-10px; bottom:-24px;
      }
      .authSecondaryLinkBtn:hover{ color: var(--wa-green-2); text-decoration: underline; text-underline-offset: 2px; }
      .authSecondaryLinkBtn:active{ opacity: .88; text-decoration: underline; }
      .authSecondaryLinkBtn:focus-visible{
        outline: none;
        border-radius: 10px;
        box-shadow: 0 0 0 3px var(--brandRing);
      }

      .authSubRow{
        display:flex;
        justify-content:flex-end;
        margin-top: 8px;
        min-height: 44px;
        align-items:center;
      }

      /* Login-only: keep "Forgot password?" + "I have a reset code" readable */
      .authSubRow.loginLinksRow{
        justify-content: flex-start;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        min-height: 0;
        margin-top: 10px;   /* space from password field */
        margin-bottom: 2px; /* space before login button area */
      }
      .loginLinksRow .authSecondaryLinkBtn{
        width: 100%;
        text-align: left;
        padding: 6px 0;
        transition: color 0.15s ease, opacity 0.15s ease;
      }
      /* Link hierarchy: primary help link first, secondary link second */
      .loginLinksRow .loginHelpPrimary{
        color: var(--wa-green-2);
        font-weight: 900;
        font-size: 14px;
      }
      .loginLinksRow .loginHelpSecondary{
        color: var(--wa-muted);
        font-weight: 800;
        font-size: 13px;
      }
      /* Mobile-first: no hover-based UI for login links */
      .loginLinksRow .authSecondaryLinkBtn:hover{
        color: currentColor;
        text-decoration: none;
      }
      /* Tap feedback: clear active state on mobile */
      .loginLinksRow .authSecondaryLinkBtn:active{
        color: var(--wa-green-2);
        text-decoration: underline;
        text-underline-offset: 2px;
        opacity: .92;
      }

      /* Login-only: password visibility toggle */
      .passwordWrap{
        position: relative;
        width: 100%;
      }
      .passwordWrap input{
        padding-right: 52px; /* room for the eye button */
      }
      .passwordToggle{
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        border: 0;
        background: transparent;
        padding: 8px;
        min-width: 40px;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: rgba(60,60,67,.66);
        cursor: pointer;
        border-radius: 12px;
        touch-action: pan-y;
      }
      .passwordToggle svg{
        width: 20px;
        height: 20px;
        display:block;
      }
      /* Mobile-first: no hover-based UI for login toggle */
      .passwordToggle:hover{ color: var(--wa-muted); }
      .passwordToggle:active{ opacity: .88; }
      .passwordToggle:focus-visible{
        outline: none;
        box-shadow: 0 0 0 3px var(--brandRing);
      }

      .legalFooter{
        margin-top: 14px;
        margin-bottom: 0;
        text-align: center;
        font-size: 12px;
        color: rgba(60,60,67,.62);
        line-height: 1.55;
      }
      .legalFooter p{
        margin: 0;
        max-width: 296px;
        margin-left: auto;
        margin-right: auto;
      }
      .legalFooter a{
        color: rgba(60,60,67,.82);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        padding: 6px 4px;
        min-height: 36px;
        position: relative;
        transition: color 0.15s ease;
        font-weight: 700;
      }
      .legalFooter a:hover{
        color: var(--wa-green-2);
        text-decoration: underline;
        text-underline-offset: 2px;
      }
      .legalFooter a:focus-visible{
        outline: none;
        color: var(--wa-green-2);
        box-shadow: 0 0 0 3px var(--brandRing);
        border-radius: var(--rSm);
      }
      .legalFooter a:active{
        opacity: 0.88;
      }
      #signupForm .legalFooter p{
        max-width: 280px;
      }
      #signupForm .legalFooter a{
        display:inline;
        min-height: 0;
        padding: 0;
        white-space: nowrap;
      }

      .muted{ color: rgba(60,60,67,.62); font-size: 13px; }
      /* Base form controls are normalized in ./styles/global.css */

      .row2{ display:flex; gap:10px; margin-top: 12px; }
      /* Signup: mobile-first phone row (country picker + local number) */
      .phoneRow{ align-items: stretch; }
      .phoneRow .phoneLocalInput{ flex: 1 1 auto; min-width: 0; }
      .countryBtn{
        flex: 0 0 44%;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap: 8px;
        padding: 14px 12px;
        min-height: 56px;
        border-radius: 18px;
        border: 1px solid rgba(15,23,42,.10);
        background: rgba(255,255,255,.96);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
        color: var(--text);
        font-size: 14px;
        font-weight: 850;
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        transition: border-color 160ms ease, box-shadow 160ms ease, transform 120ms ease, opacity 120ms ease;
      }
      .countryBtn:active:not(:disabled){
        transform: scale(.985);
        opacity: .96;
      }
      .countryBtn:focus-visible{
        outline: none;
        border-color: rgba(37,211,102,.45);
        box-shadow: 0 0 0 3px rgba(37,211,102,.14);
      }
      .countryBtn:disabled{
        opacity: .55;
        cursor: default;
        transform: none !important;
      }
      .countryBtnText{
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .countryBtnDial{
        flex: 0 0 auto;
        font-weight: 950;
        color: var(--wa-muted);
      }
      .countryBtnCaret{
        flex: 0 0 auto;
        color: var(--wa-muted);
        font-weight: 900;
      }
      /* Button base styles live in ./styles/global.css */

      /* Auth submit skeletons (inside button, no layout redesign) */
      #loginSubmitBtn, #signupSubmitBtn{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:8px;
      }
      /* Login-only: loading state should dim slightly (still disabled) */
      #loginSubmitBtn.loading:disabled{
        opacity: .86;
      }

      /* Auth: spacing + micro-interactions (subtle, fast) */
      #authView form{
        margin-top: 8px;
        transition: opacity 160ms ease-out, transform 160ms ease-out;
      }
      #authView form.authForm{
        margin-top: 0;
        position: relative;
        z-index: 1;
        padding: 16px 15px 14px;
        border-radius: 24px;
        background: rgba(255,255,255,.70);
        border: 1px solid rgba(255,255,255,.72);
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,.86),
          0 8px 18px rgba(15,23,42,.03);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
      }
      #authView form.authForm > label:first-child{
        margin-top: 0;
      }
      #authView form.authForm label{
        margin-top: 12px;
        margin-bottom: 8px;
        color: rgba(15,23,42,.76);
        font-size: 13px;
        font-weight: 750;
        letter-spacing: 0;
        text-transform: none;
      }
      #authView form.authForm input,
      #authView form.authForm select,
      #authView form.authForm textarea{
        min-height: 56px;
        padding: 14px 15px;
        border-radius: 18px;
        border-color: rgba(15,23,42,.10);
        background: rgba(255,255,255,.96);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
      }
      #authView form.authForm input::placeholder,
      #authView form.authForm textarea::placeholder{
        color: rgba(60,60,67,.42);
      }
      #authView form.authForm input:focus,
      #authView form.authForm select:focus,
      #authView form.authForm textarea:focus,
      #authView form.authForm input:focus-visible,
      #authView form.authForm select:focus-visible,
      #authView form.authForm textarea:focus-visible{
        border-color: rgba(37,211,102,.45);
        box-shadow: 0 0 0 2px rgba(37,211,102,.12);
      }
      #authView .row2{
        margin-top: 0;
      }
      #authView form.authEnterFrom{
        opacity: 0;
        transform: translateY(6px);
      }
      #authView .btn{
        margin-top: 16px;
        min-height: 54px;
        border-radius: 18px;
        font-size: 16px;
      }
      #authView .btnPrimary{
        background: linear-gradient(180deg, var(--accent) 0%, var(--accent-pressed) 100%);
        box-shadow: 0 16px 28px rgba(27,149,11,.18);
      }
      #authView .btnPrimary:active:not(:disabled){
        box-shadow: 0 8px 16px rgba(27,149,11,.16);
      }
      .authRecoveryPanel{
        margin-top: 12px;
        padding: 11px 12px 10px;
        border-radius: 20px;
        border: 1px solid rgba(255,255,255,.62);
        background: rgba(250,252,250,.62);
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,.82),
          0 3px 10px rgba(15,23,42,.02);
      }
      .authInfoPanel{
        padding-bottom: 14px;
        text-align: left;
      }
      .authRecoveryTitle{
        font-size: 12.5px;
        font-weight: 850;
        letter-spacing: -.01em;
        color: rgba(15,23,42,.84);
      }
      .authRecoveryText{
        margin-top: 4px;
        font-size: 12px;
        line-height: 1.45;
        color: rgba(60,60,67,.62);
        text-wrap: balance;
      }
      .authRecoveryPanel .btn{
        width: 100%;
        margin-top: 12px;
        min-height: 46px;
        border-radius: 16px;
      }
      .authRecoveryPanel .btn.btnSecondary{
        background: rgba(255,255,255,.88);
        border: 1px solid rgba(15,23,42,.08);
        color: var(--wa-green-2);
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,.82),
          0 1px 2px rgba(15,23,42,.03);
        font-size: 15px;
        font-weight: 850;
      }
      .authRecoveryPanel .btn.btnSecondary:active:not(:disabled){
        background: rgba(37,211,102,.06);
      }
      .authPhoneSummary{
        margin-top: 6px;
        padding-bottom: 14px;
      }
      .authPhoneSummaryLabel{
        font-size: 11px;
        font-weight: 900;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: rgba(60,60,67,.56);
      }
      .authPhoneSummaryValue{
        margin-top: 6px;
        font-size: 17px;
        font-weight: 950;
        letter-spacing: -.02em;
        color: var(--text);
      }
      .authPhoneSummary .authSecondaryLinkBtn{
        margin-top: 10px;
        color: var(--wa-green-2);
        font-weight: 900;
      }
      #authView .btn:disabled{
        opacity: 1;
        background: linear-gradient(180deg, rgba(91,181,86,.74), rgba(77,160,75,.72));
        color: rgba(255,255,255,.98);
        box-shadow: 0 8px 16px rgba(27,149,11,.10);
      }
      @media (prefers-reduced-motion: reduce){
        #authView form,
        input, select, textarea,
        .btn,
        .authLinkBtn{
          transition: none !important;
        }
      }
      .btnSkel{
        display:none;
        width: 18px;
        height: 18px;
        border-radius: 999px;
        flex: 0 0 auto;
      }
      #loginSubmitBtn.loading .btnSkel,
      #signupSubmitBtn.loading .btnSkel{
        display:inline-block;
      }

      /* Inline field error (used on Login password) */
      .fieldErr{
        margin-top: 6px;
        font-size: 13px;
        color: var(--danger);
        line-height: 1.25;
      }
      /* Login-only: keep space stable for error */
      #loginPassErr{
        min-height: 18px;
      }
      /* Signup: keep space stable for phone error */
      #signupPhoneErr{
        min-height: 18px;
      }

      .charCount{
        margin-top: 6px;
        text-align: right;
        user-select: none;
      }
      .charCount.danger{
        color: #b00020;
        font-weight: 900;
      }
      .inputInvalid{
        border-color: rgba(176,0,32,.85) !important;
        box-shadow: 0 0 0 3px rgba(176,0,32,.10) !important;
      }

      .msg{
        margin-top: 10px;
        font-size: 13px;
        white-space: pre-wrap;
      }
      @media (max-width: 480px){
        #authView{
          align-items: flex-start;
          justify-content: stretch;
          padding-top: max(20px, calc(var(--safe-top) + 14px));
        }
        #authView .authCard{
          width: 100%;
          max-width: none;
          border-radius: 26px;
          margin: 0;
          padding: 18px 16px 18px;
        }
        html.booting #authView{
          align-items: center;
          justify-content: center;
          padding-top: 0;
          padding-bottom: 0;
        }
        html.booting #authView .authCard{
          width: min(100%, 180px);
          max-width: 180px;
          border-radius: 0;
          margin: auto;
        }
      }
      .ok{ color:#0a7a2f; }
      .err{ color:#b00020; }

      /* Inline status row (message + optional action) */
      .msgRow{
        margin-top: 10px;
        display:flex;
        align-items:flex-start;
        justify-content:space-between;
        gap:10px;
      }
      .msgRow .msg{ margin-top: 0; flex: 1; min-width: 0; }
      .msgRow .smallBtn{ flex: 0 0 auto; }

      /* Bottom nav */
      :root{
        --pad: 16px;
        --brand-green: var(--wa-green);

        /* Safe-area insets (iOS notch / home indicator) */
        --safe-top: env(safe-area-inset-top, 0px);
        --safe-right: env(safe-area-inset-right, 0px);
        --safe-bottom: env(safe-area-inset-bottom, 0px);
        --safe-left: env(safe-area-inset-left, 0px);

        /* Final gutters used everywhere */
        --pad-l: calc(var(--pad) + var(--safe-left));
        --pad-r: calc(var(--pad) + var(--safe-right));

        /* One source of truth for tab bar sizing (used by scroll surfaces too). */
        --tabbar-h: 56px;
        --tabbar-pad-top: 4px;
        --tabbar-pad-bottom: 4px;
        --tabbar-total-h: calc(var(--tabbar-h) + var(--tabbar-pad-top) + var(--tabbar-pad-bottom));
        --page-body-pad-b: var(--tabbar-total-h);
      }
      .bottomNav{
        background: #fff;
        border-top: 1px solid var(--wa-divider);
        box-shadow: none;
        display:flex;
        min-height: var(--tabbar-h);
        flex: 0 0 auto;
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
        width: min(100%, var(--app-max-w));
        z-index: 200; /* above .meOverlay (58) and content so tab bar is always visible */
        padding-left: var(--pad-l);
        padding-right: var(--pad-r);
        padding-top: var(--tabbar-pad-top);
        padding-bottom: calc(var(--tabbar-pad-bottom) + env(safe-area-inset-bottom, 0px));
      }
      .bottomNav.navPressGuard{
        pointer-events: none !important;
      }
      @supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))){
        .bottomNav{
          -webkit-backdrop-filter: none;
          backdrop-filter: none;
        }
      }
      .navItem{
        flex:1;
        min-width: 0;
        border:0;
        background:transparent;
        padding: 8px 8px 10px;
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:6px;
        cursor:pointer;
        color: var(--navInactive);
        font-weight: 650;
        outline: none;
        -webkit-tap-highlight-color: transparent;
        -webkit-appearance: none;
        appearance: none;
        position: relative;
      }
      .navItem::before{
        content:"";
        position:absolute;
        left: 50%;
        top: 6px;
        transform: translateX(-50%);
        width: 48px;
        height: 34px;
        border-radius: 17px;
        background: transparent;
        transition: background-color 160ms ease, transform 160ms ease;
        display: none; /* No pill highlight on active tab (per spec) */
      }
      .navItem:focus{
        outline: none;
      }
      /* Show focus ring only for keyboard/fine-pointer use (avoid "selected box" on mobile). */
      @media (hover:hover) and (pointer:fine){
        .navItem:focus-visible{
          outline: none;
          box-shadow: 0 0 0 3px var(--brandRing);
          border-radius: 12px;
        }
      }
      .navItem svg{
        width:22px; height:22px;
        fill: currentColor;
        opacity:.95;
        position: relative;
        z-index: 1;
      }
      .bottomNavIcon{
        position: relative;
        overflow: visible;
        display: inline-flex;
      }
      .bottomNavBadge{
        position: absolute;
        top: -6px;
        right: -10px;
        min-width: 21px;
        height: 21px;
        padding: 0 6px;
        border-radius: 999px;
        background: #138a0d;
        color: #fff;
        border: 2px solid #fff;
        font-size: 11px;
        line-height: 1;
        font-weight: 900;
        letter-spacing: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 5px 12px rgba(19,138,13,.24);
        pointer-events: none;
        transform: translateZ(0);
        transform-origin: 100% 0%;
        z-index: 1;
      }
      .bottomNavBadge.hidden{ display:none !important; }
	      /* Me tab avatar (WhatsApp-style) */
      #navMe .navAvatar{
        width:22px;
        height:22px;
        border-radius: 999px;
        object-fit: cover;
        display:none;
        position: relative;
        z-index: 1;
      }
      #navMe.hasPhoto .navAvatar{ display:block; }
      #navMe.hasPhoto svg{ display:none; }
      .navItem .label{
        font-size: 11px;
        line-height:1;
        max-width: 100%;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        position: relative;
        z-index: 1;
      }
      /* Active: subtle pill behind icon area (modern + clear). */
      .navItem.active{ color: var(--accent); background: transparent; box-shadow: none; }
      .navItem.active::before{
        background: transparent;
      }
      .navItem:active::before{
        background: transparent;
      }

      /* Pull to refresh */
      .ptrWrap{
        margin: -12px -12px 10px;
        padding: 0 12px;
      }
      .ptrBar{
        height: 0px;
        overflow:hidden;
        transition: height .18s ease;
        display:flex;
        align-items:flex-end;
        justify-content:center;
      }
      .ptrInner{
        width:100%;
        display:flex;
        align-items:center;
        justify-content:center;
        gap:8px;
        padding: 10px 0 8px;
        color: var(--wa-muted);
        font-weight: 900;
        font-size: 12px;
      }
      /* Skeleton indicator instead of spinner */
      .ptrSkel{
        display:none;
        width: 14px;
        height: 14px;
        border-radius: 999px;
        flex: 0 0 auto;
      }

	      /* Accessible helper */
      .srOnly{
        position:absolute !important;
        width:1px !important;
        height:1px !important;
        padding:0 !important;
        margin:-1px !important;
        overflow:hidden !important;
        clip: rect(0,0,0,0) !important;
        white-space: nowrap !important;
        border:0 !important;
      }

      /* WhatsApp-like typing/thinking dots */
      .typingDots{
        display:inline-flex;
        align-items:center;
        gap:3px;
        height: 12px;
      }
      .typingDots span{
        width:4px;
        height:4px;
        border-radius:999px;
        background: rgba(0,0,0,.50);
        opacity:.28;
        transform: translateY(0px);
        animation: typingBounce 1.0s infinite ease-in-out;
      }
      .typingDots span:nth-child(2){ animation-delay: .15s; }
      .typingDots span:nth-child(3){ animation-delay: .30s; }
      @keyframes typingBounce{
        0%, 80%, 100%{ opacity:.24; transform: translateY(0px); }
        40%{ opacity:.75; transform: translateY(-2px); }
      }

      /* Search bar */
      .searchWrap{
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 999px;
        padding: 6px 10px;
        min-height: 40px;
        display:flex;
        align-items:center;
        gap:8px;
        margin-bottom: 8px;
        transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
      }
      .searchWrap.isActive{
        background: var(--surface);
        border-color: var(--border);
      }
      .searchWrap:focus-within{
        border-color: var(--brand);
        box-shadow: none;
      }
      /* Keep focus ring for keyboard/fine pointer use */
      @media (pointer: fine){
        .searchWrap:focus-within{
          box-shadow: 0 0 0 3px var(--brandRing);
        }
      }
      .searchWrap svg{ width:16px; height:16px; fill: var(--wa-muted); }
      .searchWrap input{
        border:0;
        padding:0;
        border-radius:0;
        box-shadow:none !important;
        background: transparent;
        flex:1;
        min-width:0;
        font-size: 14px;
        line-height: 1.2;
      }
      .searchWrap input::placeholder{ color: var(--wa-muted); }
      .searchClear{
        display:none; /* shown only when active (focus) */
        align-items:center;
        justify-content:center;
        width: var(--icon-btn-size-compact);
        height: var(--icon-btn-size-compact);
        min-width: var(--icon-btn-size-compact);
        min-height: var(--icon-btn-size-compact);
        border:0;
        background: transparent;
        border-radius: 999px;
        color: var(--wa-muted);
        font-size: var(--icon-glyph-size-compact);
        line-height: 1;
        cursor:pointer;
        flex: 0 0 auto;
      }
      .searchWrap.isActive .searchClear{ display:inline-flex; }
      .searchClear:active{ background: rgba(0,0,0,.06); }
      .searchIconBtn{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width: var(--icon-btn-size-compact);
        height: var(--icon-btn-size-compact);
        min-width: var(--icon-btn-size-compact);
        min-height: var(--icon-btn-size-compact);
        border: 0;
        background: transparent;
        border-radius: 999px;
        cursor:pointer;
        flex: 0 0 auto;
        padding: 0;
      }
      .searchIconBtn svg{
        width: var(--icon-glyph-size-compact);
        height: var(--icon-glyph-size-compact);
        display:block;
      }
      .searchIconBtn:active{ background: rgba(0,0,0,.06); }
      .searchIconBtn:disabled{ opacity: .35; cursor: default; }

      /* Filter chips */
      .chips{
        display:flex;
        gap:8px;
        overflow:auto;
        padding-bottom: 6px;
        margin: 2px 0 8px;
      }
      .chipBtn{
        flex: 0 0 auto;
        border: 1px solid rgba(15,23,42,0.08);
        background: rgba(15,23,42,0.035);
        border-radius: 16px;
        /* WhatsApp-like: light pills, not chunky buttons */
        padding: 6px 12px;
        min-height: 32px;
        font-weight: 800;
        font-size: 13px;
        color: var(--text);
        cursor:pointer;
        box-shadow: none;
        transition: background-color 160ms ease, border-color 160ms ease, transform 80ms ease;
      }
      .chipBtn .chipK{ color:#4b5563; font-weight: 700; }
      .chipBtn .chipChevron{ margin-left: 6px; color:#6b7280; font-weight: 900; }
      .chipBtn.active{
        background: var(--accent-soft);
        color: var(--accent);
        border-color: var(--accent-border);
        box-shadow: none;
      }
      .chipBtn.active .chipK{ color: var(--accent); opacity: .85; }
      .chipBtn.active .chipChevron{ color: var(--accent); }
      .chipBtn:focus-visible{
        outline: none;
        box-shadow: 0 0 0 3px var(--brandRing);
      }

      /* List (chat list) */
      .list{
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--rLg);
        box-shadow: none;
        overflow:hidden;
      }
      /* Chats: full-width list (no card container) */
      #chatsList.list{
        background: transparent;
        border: 0;
        border-radius: 0;
        overflow: visible;
      }
      .listItem{
        display:flex;
        gap:12px;
        padding: 10px 12px;
        border-bottom: 1px solid var(--divider);
        cursor:pointer;
        align-items:center;
        user-select:none;
		background: var(--surface);
        border-radius: 0;
      }
      .listItem:last-child{ border-bottom:0; }
	  .listItem:active{ background: var(--surface2); }

      /* AI pinned lane: always visible, never mixed with user rows */
      .aiPinnedLane{
        position: sticky;
        top: 0;
        z-index: 6;
        padding: 4px 0 2px;
        /* Prevent underlying rows peeking through during scroll */
        background: #fff;
      }
      /* Chats: sticky header (Search + Tabs + pinned AI row) */
      .chatsStickyHeader{
        /* Sits under the app bar; stays visible while the list scrolls */
        position: sticky;
        top: 0;
        z-index: 100;
        background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(252,253,252,.98));
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: 0;
        border-bottom: 1px solid rgba(17,24,39,.05);
        display:flex;
        flex-direction:column;
        flex: 0 0 auto;
      }
      /* Chats: dedicated search mode (WhatsApp-like) */
      .chatsSearchBar{
        display:flex;
        align-items:center;
        gap:8px;
        padding: 2px 0 6px;
        overflow:hidden;
        max-height: 0px;
        opacity: 0;
        transform: translateY(-6px);
        transition: max-height 160ms ease, opacity 160ms ease, transform 160ms ease;
      }
      #chatsTab.searchMode .chatsSearchBar{
        max-height: 48px;
        opacity: 1;
        transform: translateY(0);
      }
      .chatsSearchInputWrap{
        flex: 1 1 auto;
        min-width: 0;
        display:flex;
        align-items:center;
        gap:6px;
        padding: 6px 10px;
        min-height: 40px;
        border-radius: 999px;
        border: 1px solid rgba(15,23,42,0.08);
        background: rgba(15,23,42,0.035);
      }
      .chatsSearchInputWrap svg{ width:16px; height:16px; fill: var(--wa-muted); flex:0 0 auto; }
      .chatsSearchInputWrap input{
        border:0;
        padding:0;
        background: transparent;
        box-shadow:none !important;
        flex: 1 1 auto;
        min-width: 0;
        font-size: 14px;
        line-height: 1.2;
      }
      .chatsSearchInputWrap input::placeholder{ color: var(--wa-muted); }
      .chatsSearchClear{
        width: 40px;
        height: 40px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        border-radius: 999px;
        color: var(--wa-muted);
        font-size: 16px;
        line-height: 1;
        opacity: .0;
        pointer-events:none;
      }
      #chatsTab.searchMode .chatsSearchClear.hasValue{
        opacity: 1;
        pointer-events:auto;
      }
      .chatsSearchClear:active{ background: rgba(0,0,0,.06); }
      .chatsSearchCancel{
        flex: 0 0 auto;
        min-height: 40px;
        padding: 8px 10px;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 600;
        color: var(--wa-green);
      }
      .chatsSearchCancel:active{ background: rgba(15,23,42,0.06); }
      /* Search mode hides chips (cleaner focus) */
      #chatsTab.searchMode .chatsFilterRow{ display:none; }
      @media (prefers-reduced-motion: reduce){
        .chatsSearchBar{ transition: none; }
      }

      /* Chats filter row: chips + compact new chat */
      #chatsTab .chatsIdentityRow{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap: 12px;
        padding: 8px var(--pad-r) 1px var(--pad-l);
        background: #fff;
      }
      #chatsTab .chatsIdentity{
        display:flex;
        align-items:center;
        gap: 10px;
        min-width: 0;
      }
      #chatsTab .chatsIdentityLogo{
        width: 44px;
        height: 44px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        flex: 0 0 auto;
      }
      #chatsTab .chatsIdentityLogo svg{
        width: 100%;
        height: 100%;
        display:block;
        filter: none;
      }
      #chatsTab .chatsIdentityTitle{
        font-size: 17px;
        line-height: 1.05;
        font-weight: 800;
        letter-spacing: -.02em;
        color: #111827;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      #chatsTab .chatsFilterRow{
        display:flex;
        align-items:center;
        gap: 10px;
        padding: 4px var(--pad-r) 8px var(--pad-l);
        background: #fff;
      }
      #chatsTab #filterChips{
        margin: 0;
        background: transparent;
        border: 0;
      }
      #chatsTab .waSegmented{
        display:flex;
        align-items:center;
        gap: 2px;
        padding: 2px;
        border-radius: 14px;
        background: rgba(60,60,67,.12);
        border: 1px solid rgba(60,60,67,.16);
      }
      /* ========================= */
      /* Chats (mobile-first)      */
      /* ========================= */

      /* Chats: edge-to-edge (override .view padding) */
      #chatsTab{
        margin: 0;
        display:flex;
        flex-direction:column;
        flex: 1 1 auto;
        min-height: 0;
        height: 100%;
        overflow: hidden;
        background: #fff;
        --chats-row-left-inset: calc(var(--chat-pad-x) - 6px);
      }
      html[data-tab="chats"] #appView > #chatsDesktopWrap{
        flex: 1 1 auto;
        min-height: 0;
      }

      /* Chats: fixed header + scrolling list area */
      #chatsTab .chatsScrollArea{
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        background: #fff;
      }

      /* Pull-to-refresh wrapper should not add spacing */
      #chatsTab .ptrWrap{ margin: 0; padding: 0; }

      /* Chats header (clean iOS-style, single row) */
      #chatsTab .chatsHeader,
      #nearbyTab .chatsHeader,
      #meTab .chatsHeader{
        background: #fff;
        border-bottom: 1px solid var(--wa-divider);
        padding-top: var(--safe-top);
        position: sticky;
        top: 0;
        z-index: 20;
      }
      #chatsTab .chatsHeader{ border-bottom: 1px solid var(--chat-divider); }
      #chatsTab .chatsHeaderInner,
      #nearbyTab .chatsHeaderInner,
      #meTab .chatsHeaderInner{
        height: 48px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding-top: 0;
        padding-bottom: 0;
        padding-left: var(--pad-l);
        padding-right: var(--pad-r);
        gap: 10px;
      }
      #chatsTab .chatsHeaderLeft,
      #nearbyTab .chatsHeaderLeft,
      #meTab .chatsHeaderLeft{
        display:flex;
        align-items:center;
        gap: 10px;
        min-width: 0;
        flex: 1 1 auto;
      }
      #chatsTab .chatsHeaderRight,
      #nearbyTab .chatsHeaderRight,
      #meTab .chatsHeaderRight{
        display:flex;
        align-items:center;
        /* Slightly tighter now that camera icon is removed */
        gap: 8px;
        flex: 0 0 auto;
      }
      #chatsTab .chatsTitle,
      #nearbyTab .chatsTitle,
      #meTab .chatsTitle{
        font-size: 32px;
        line-height: 1.1;
        font-weight: 800;
        letter-spacing: -0.25px;
        color: #000;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      #chatsTab .chatsHeaderInner{ height: var(--icon-btn-size); min-height: var(--icon-btn-size); }
      #chatsTab .chatsTitle{ font-size: 36px; line-height: 1.05; }
      #chatsTab .chatsIconBtn,
      #nearbyTab .chatsIconBtn,
      #meTab .chatsIconBtn{
        /* Mobile-friendly hit target (>=44x44) without changing header height */
        width: var(--icon-btn-size);
        height: var(--icon-btn-size);
        min-width: var(--icon-btn-size);
        min-height: var(--icon-btn-size);
        border-radius: 999px;
        display:grid;
        place-items:center;
        cursor:pointer;
        user-select:none;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        color: rgba(17,17,17,.92);
        border: 0;
        background: transparent;
        transition: background-color 120ms ease;
      }
      #chatsTab .chatsIconBtn svg,
      #nearbyTab .chatsIconBtn svg,
      #meTab .chatsIconBtn svg,
      #placesTab .chatsIconBtn svg{
        width: var(--icon-glyph-size);
        height: var(--icon-glyph-size);
        fill: currentColor;
        display:block;
      }
      #chatsTab .chatsIconBtn:active,
      #nearbyTab .chatsIconBtn:active,
      #meTab .chatsIconBtn:active{
        /* WhatsApp-fast press feedback */
        background: rgba(0,0,0,0.06);
      }

      /* New chat (+) button polish (keep layout; just improve feel) */
      #chatsTab #waPlusBtn,
      #nearbyTab #waPlusBtn{
        color: #111;
      }
      #chatsTab #waPlusBtn:active,
      #nearbyTab #waPlusBtn:active{
        background: #F2F2F7;
      }
      @media (hover: hover){
        #chatsTab #waPlusBtn:hover,
        #nearbyTab #waPlusBtn:hover{
          background: #F2F2F7;
        }
      }

      /* Chats-only "More" menu */
      #chatsTab .waMoreBackdrop,
      #nearbyTab .waMoreBackdrop{
        /* Constrain overlay to the app frame (no desktop full-viewport stretch). */
        position: fixed;
        top: 0;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        background: transparent;
        z-index: 80;
      }
      #chatsTab .waMoreBackdrop.hidden,
      #nearbyTab .waMoreBackdrop.hidden{ display:none !important; }
      #chatsTab .waMoreMenu,
      #nearbyTab .waMoreMenu{
        position: absolute;
        left: var(--pad-l);
        top: calc(var(--safe-top) + 48px);
        background: #fff;
        border: 1px solid var(--wa-divider);
        border-radius: 14px;
        box-shadow: 0 10px 28px rgba(0,0,0,.16);
        padding: 6px;
        min-width: 172px;
        z-index: 90;
      }
      #chatsTab .waMoreMenu{
        top: calc(var(--safe-top) + 44px);
      }
      #chatsTab .waMoreMenu.hidden,
      #nearbyTab .waMoreMenu.hidden{ display:none !important; }
      #chatsTab .waMoreItem,
      #nearbyTab .waMoreItem{
        width: 100%;
        display:flex;
        align-items:center;
        justify-content:flex-start;
        padding: 10px 12px;
        border-radius: 12px;
        font-weight: 750;
        font-size: 13px;
        color: #111;
        cursor: pointer;
        touch-action: manipulation;
      }
      #chatsTab .waMoreItem:active,
      #nearbyTab .waMoreItem:active{ background: rgba(0,0,0,.06); }

      /* Search (primary interaction) */
      #chatsTab .chatsSearchWrap{
        padding-top: 4px;
        padding-bottom: 6px;
        padding-left: var(--pad-l);
        padding-right: var(--pad-r);
        background: #fff;
      }
      #chatsTab .chatsNewChatBtn{
        width: 46px;
        height: 46px;
        min-width: 46px;
        min-height: 46px;
        border-radius: 13px;
        display:grid;
        place-items:center;
        background: #20B84A;
        color: #fff;
        border: 0;
        flex: 0 0 auto;
        margin-left: auto;
        cursor: pointer;
        box-shadow:
          0 8px 18px rgba(32,184,74,.20),
          inset 0 1px 0 rgba(255,255,255,.22);
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
      }
      #chatsTab .chatsNewChatBtn svg{
        width: 22px;
        height: 22px;
        stroke: currentColor;
        stroke-width: 2.35;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      #chatsTab .chatsNewChatBtn:active{
        transform: translateY(1px) scale(.98);
        background: #1CA742;
        box-shadow:
          0 4px 10px rgba(32,184,74,.18),
          inset 0 1px 0 rgba(255,255,255,.18);
      }
      #chatsTab .chatsNewChatBtn:focus-visible{
        outline: none;
        box-shadow:
          0 0 0 3px rgba(27,149,11,.18),
          0 8px 18px rgba(27,149,11,.20),
          inset 0 1px 0 rgba(255,255,255,.22);
      }
      /* Shared search field (used by Chats / Nearby / Places) */
      .chatsSearch{
        height: 44px;
        border-radius: 999px;
        background: #f4f7f4;
        display:flex;
        align-items:center;
        gap: 8px;
        padding: 0 14px;
        border: 1px solid #e5ebe6;
        width: 100%;
        transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
      }
      .chatsSearch:focus-within{
        border-color: rgba(27,149,11,.14);
        box-shadow: 0 0 0 3px rgba(27,149,11,.06);
        background: #fff;
      }
      .chatsSearchIcon{
        width: 17px;
        height: 17px;
        display:block;
        color: #98a19c;
        stroke: currentColor;
        stroke-width: 2.2;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex: 0 0 auto;
      }
      .chatsSearch input{
        border: 0;
        outline: none;
        background: transparent;
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
        width:100%;
        font-size: 14px;
        line-height: 1.2;
        color:#111;
      }
      .chatsSearch input:focus,
      .chatsSearch input:focus-visible{
        outline: none;
        border: 0;
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
      }
      #chatsTab .chatsSearch{
        height: 44px;
        border-radius: 999px;
      }
      #chatsTab .chatsSearch input{ font-size: 15px; }
      .chatsSearch input::placeholder{ color: #98a39d; }

      /* Nearby: use the same search bar look, but without Chats-specific padding blocks */
      #nearbyTab .chatsSearchWrap{ padding: 0; background: transparent; }

      /* Filter chips (minimal) */
      #chatsTab #filterChips{
        flex: 1 1 auto;
        min-width: 0;
        display:flex;
        align-items:center;
        gap: 9px;
        overflow-x:auto;
        -webkit-overflow-scrolling: touch;
        padding: 2px 0;
        background: transparent;
      }
      #chatsTab #filterChips::-webkit-scrollbar{ display:none; }
      #chatsTab #filterChips .chipBtn{
        height: 34px;
        padding: 0 14px;
        border-radius: 999px;
        border: 1px solid #e2e8e3;
        background: #fff;
        font-size: 13px;
        font-weight: 700;
        color: #6c7671;
        white-space: nowrap;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
      }
      #chatsTab #filterChips .chipBtn:active{ background: rgba(60,60,67,.10); }
      #chatsTab #filterChips .chipBtn.isActive,
      #chatsTab #filterChips .chipBtn.active{
        background: rgba(27,149,11,.09);
        border-color: rgba(27,149,11,.10);
        color: #167a09;
      }

      /* Pinned AI row: should look like a normal pinned chat (not a banner/card) */
      #chatsTab .chatItem.aiPinned{
        border-radius: 0;
        border: 0;
        background: #fff;
      }
      #chatsTab .chatItem.aiPinned:active{
        background: rgba(60,60,67,.10);
      }

      /* App tabs use in-screen headers: hide the global top bar. */
      html[data-tab="chats"] #topbar,
      html[data-tab="nearby"] #topbar,
      html[data-tab="places"] #topbar,
      html[data-tab="me"] #topbar{
        display:none !important;
      }

      /* Chats: legacy search mode DOM is kept for existing handlers; always hidden in this design */
      #chatsTab .chatsSearchBar{ display:none !important; }

      /* Chats list surface */
      #chatsTab .chatsListSurface{
        background: #fff;
        border: 0;
        margin: 0;
        box-shadow: none;
        overflow: visible;
        padding-bottom: 0;
      }
      #chatsTab .chatsListSurface #chatsList{
        background: #fff;
        overflow: visible;
        padding-bottom: calc(var(--page-body-pad-b) + var(--safe-bottom));
        min-height: 100%;
      }

      /* Chats: inline + action lives in the chips row */
      /* Chats list UX: keep non-WhatsApp rows out of this screen */
      #chatsTab #blockedRow{ display:none !important; }
      /* Reduce extra top whitespace on Chats */
      #chatsTab .spacer8{ display:none; }
      /* Chats: pinned AI lane should be consistent with chat rows */
      #chatsTab .aiPinnedLane{
        position: static;
        top: auto;
        z-index: auto;
        padding: 0;
        background: transparent;
        margin: 0;
      }
      #chatsTab .aiPinnedLane .chatItem.aiPinned{
        margin: 0;
        border-bottom: 1px solid #eef2ef;
      }
      #chatsTab .aiPinnedLane .chatRow{
        min-height: 66px;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: calc(var(--chats-row-left-inset) + var(--safe-left));
      }
      #chatsTab .aiPinnedLane .chatName{
        font-size: 16px;
      }
      #chatsTab .aiPinnedLane .chatSnippet{
        font-size: 14px;
      }
      .aiCard{
        /* Override list separators: AI should read as a single, distinct card */
        border-bottom: 0 !important;
        border: 1px solid var(--border);
        border-radius: var(--rLg);
        background: var(--surface);
        box-shadow: var(--shadowSm);
      }
      .aiPinnedLane .aiCard{
        margin: 0 0 6px;
      }
      /* Nearby: match Chats (flat white, same padding rhythm) */
      #nearbyTab{
        /* Edge-to-edge (override .view padding) like Chats */
        margin: 0;
        display:flex;
        flex-direction:column;
        overflow: visible;
        background: #fff;
        /* Step 10: slightly tighter gutters on Nearby (mobile-first) */
        --nearby-pad: 14px;
        --nearby-pad-l: calc(var(--nearby-pad) + var(--safe-left));
        --nearby-pad-r: calc(var(--nearby-pad) + var(--safe-right));
        --nearby-results-bottom-clearance: calc(var(--tabbar-total-h) + var(--safe-bottom) + 18px);
      }
      #nearbyTab .nearbyScroll{
        display:flex;
        flex-direction:column;
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        overflow-y: hidden;
        background: #fff;
        padding: 0;
      }

      /* Large title + header feel */
      .waPageHeader{
        padding: calc(8px + var(--safe-top)) var(--pad-r) 6px var(--pad-l);
        display:flex;
        align-items:center;
        justify-content:space-between;
      }
      .waTitle{
        margin: 0 var(--pad-r) 10px var(--pad-l);
        font-size: var(--title, 34px);
        line-height: calc(var(--title, 34px) + 4px);
        font-weight: 850;
        letter-spacing: -0.5px;
        color:#0B0B0C;
      }
      /* Nearby: standard page padding + rhythm */
      #nearbyTab .waPageHeader{
        padding: calc(8px + var(--safe-top)) var(--nearby-pad-r) 6px var(--nearby-pad-l);
      }
      #nearbyTab .waTitle{
        margin: 0 var(--nearby-pad-r) 12px var(--nearby-pad-l);
      }
      /* Places: match Nearby (flat, 16px horizontal padding) */
      #placesTab .waPageHeader{
        padding: calc(8px + var(--safe-top)) var(--pad-r) 6px var(--pad-l);
      }
      #placesTab .waTitle{
        /* Slightly tighter than Nearby to fit results above-the-fold */
        margin: 0 var(--pad-r) 8px var(--pad-l);
      }

      /* Shared: "controls card" + "sheet" surfaces for tabs */
      .waControlsCard{
        margin: 0 var(--pad-r) 12px var(--pad-l);
        padding: 12px;
        background: rgba(255,255,255,.92);
        border: 1px solid var(--wa-divider);
        border-radius: var(--radius-sheet, 18px);
        box-shadow: var(--shadow-sheet);
      }
      @supports ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))){
        .waControlsCard{
          -webkit-backdrop-filter: saturate(160%) blur(14px);
          backdrop-filter: saturate(160%) blur(14px);
        }
      }
      .waControlsCard .waSearchWrap{ padding: 0; }
      .waControlsCard .waChipRow{ padding: 0; }

      /* Nearby controls: no "big card", just stacked blocks */
      #nearbyTab .nearbyStickyHeader{
        position: sticky;
        top: 0;
        z-index: 100;
        background: #fff;
        padding-top: env(safe-area-inset-top, 0px);
      }
      #nearbyTab .nearbyControls{
        margin: 0 var(--nearby-pad-r) 0 var(--nearby-pad-l);
        padding: 0;
      }
      #nearbyTab .nearbyControls > * + *{ margin-top: 12px; }
      /* Nearby (Step 5): keep search + filters sticky while scrolling results */
      #nearbyTab .nearbyStickyControls{
        position: static;
        background: #fff;
        padding: 8px 0 10px;
        border-bottom: 1px solid rgba(0,0,0,.04);
        display:flex;
        flex-direction:column;
        gap: 10px;
      }
      #nearbyTab .nearbySearchRow{
        display:flex;
        align-items:center;
        gap: 10px;
      }
      #nearbyTab .nearbySearchRow .chatsSearchWrap{
        flex: 1 1 auto;
        min-width: 0;
      }
      #nearbyTab .nearbySearchActions{
        display:flex;
        align-items:center;
        gap: 6px;
        flex: 0 0 auto;
      }
      #nearbyTab .nearbyCtaCard{
        padding: 14px 14px;
        border-radius: 18px;
        border: 1px solid var(--wa-divider);
        background: #fff;
        box-shadow: var(--wa-shadow-soft);
      }
      #nearbyTab .nearbyCtaCard.hidden{ display:none !important; }
      #nearbyTab .nearbyCtaTitle{
        font-size: 16px;
        font-weight: 850;
        letter-spacing: -0.2px;
        color: rgba(0,0,0,.93);
      }
      #nearbyTab .nearbyCtaSub{
        margin-top: 6px;
        font-size: 13px;
        color: var(--wa-muted);
      }
      #nearbyTab .nearbyCtaActions{
        margin-top: 12px;
        display:flex;
        flex-direction:column;
        gap: 10px;
        align-items:stretch;
      }
      #nearbyTab .nearbyCtaActions .btn{
        width: 100%;
      }
      #nearbyTab .nearbyLinkBtn{
        width: 100%;
        min-height: 44px;
        border: 0;
        background: transparent;
        color: var(--wa-green-2);
        font-weight: 800;
        border-radius: 14px;
        cursor: pointer;
      }
      #nearbyTab .nearbyLinkBtn:active{ background: rgba(37,211,102,.12); }
      #nearbyTab .nearbyLinkBtn:focus-visible{
        outline: none;
        box-shadow: 0 0 0 3px var(--brandRing);
      }
      .waSheet{
        margin: 0 12px 12px;
        background: var(--wa-surface);
        border: 1px solid var(--wa-divider);
        border-radius: var(--radius-sheet, 18px);
        overflow: hidden;
        box-shadow: var(--shadow-sheet);
      }

      /* Search */
      #nearbyTab .waSearchWrap{ padding: 0; }
      #nearbyTab .waSearch{
        height: 40px;
        border-radius: 12px;
        background: #fff;
        border: 1px solid var(--wa-divider);
        display:flex;
        align-items:center;
        gap: 6px;
        padding: 0 10px;
      }
      #nearbyTab .waSearchIcon{
        font-size: 14px;
        line-height: 1;
        color: var(--wa-muted);
        flex: 0 0 auto;
      }
      #nearbyTab .waSearch input{
        border:0;
        outline:none;
        background: transparent;
        width:100%;
        font-size: 14px;
        line-height: 1.2;
        color:#111;
      }
      #nearbyTab .waSearch input::placeholder{ color: var(--wa-muted); }

      /* Chips */
      #nearbyTab .waChipRow{
        display:flex;
        gap: 12px;
        padding: 0;
        flex-wrap: wrap;
        overflow: visible;
      }
      #nearbyTab .waChip{
        height: 36px;
        padding: 0 14px;
        border-radius: 18px;
        border: 1px solid var(--wa-chipBorder);
        background: #fff;
        font-size: 14px;
        font-weight: 650;
        color: rgba(0,0,0,.82);
        white-space: nowrap;
        display:flex;
        align-items:center;
        gap: 8px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
      }
      #nearbyTab .waChip:active{ background: rgba(60,60,67,.10); }
      #nearbyTab .waChip:disabled,
      #nearbyTab .waChip[aria-disabled="true"]{
        opacity: .6;
        pointer-events: none;
      }
      #nearbyTab .waChip.isActive,
      #nearbyTab .waChip.active{
        background: var(--accent-soft);
        border-color: rgba(27,149,11,.18);
        color:#0B0B0C;
      }

      /* Nearby filters: render as clean, aligned "filter chips" (2-up grid like Chats rhythm) */
      #nearbyTab #nearbyInlineFilters{
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-top: 8px;
      }
      @media (max-width: 360px){
        #nearbyTab #nearbyInlineFilters{ grid-template-columns: 1fr; }
      }
      #nearbyTab #nearbyInlineFilters .waChip{
        width: 100%;
        min-height: 52px;
        padding: 0 14px;
        border-radius: 18px;
        justify-content: flex-start;
        display: flex;
        align-items: center;
        gap: 8px;
        background: #ffffff;
      }
      #nearbyTab #nearbyInlineFilters .chipK{
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0;
        color: #667085;
        white-space: nowrap;
      }
      #nearbyTab #nearbyInlineFilters #nearbyDistanceVal,
      #nearbyTab #nearbyInlineFilters #nearbyLastSeenVal{
        min-width: 0;
        font-size: 16px;
        font-weight: 750;
        letter-spacing: -.01em;
        color: #111827;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      #nearbyTab #nearbyInlineFilters .chipChevron{
        margin-left: auto;
        font-size: 12px;
        line-height: 1;
        color: #98a2b3;
      }

      /* Nearby: advanced filters sheet */
      #nearbyFilterSheet.bottomSheet{
        padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
      }
      html.is-native-app.keyboard-open #nearbyFilterSheet.bottomSheet.show{
        max-height: calc(var(--vvh, 100dvh) - 12px);
      }
      #nearbyFilterSheet .nearbyFilterBody{
        padding: 0 12px 10px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
      }
      #nearbyFilterSheet .nearbyFilterSwitch{
        width: 100%;
        padding: 10px 12px;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--surface);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        text-align: left;
        cursor: pointer;
      }
      #nearbyFilterSheet .nearbyFilterSwitch:active{ background: rgba(0,0,0,.03); }
      #nearbyFilterSheet .nearbyFilterSwitchLabel{
        font-size: 14px;
        font-weight: 700;
        color: var(--text);
      }
      #nearbyFilterSheet .nearbyFilterGrid{
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }
      @media (max-width: 360px){
        #nearbyFilterSheet .nearbyFilterGrid{ grid-template-columns: 1fr; }
      }
      #nearbyFilterSheet .nearbyFilterField{
        display: flex;
        flex-direction: column;
        gap: 6px;
      }
      #nearbyFilterSheet label{
        font-size: 12px;
        font-weight: 600;
        color: var(--wa-muted);
      }
      #nearbyFilterSheet input,
      #nearbyFilterSheet select,
      #nearbyFilterSheet .nearbyFilterPickerBtn{
        min-height: 40px;
        padding: 8px 10px;
        font-size: 14px;
        border-radius: 12px;
        border: 1px solid var(--border);
        background: #fff;
        color: var(--text);
      }
      #nearbyFilterSheet .nearbyFilterPickerBtn{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        text-align: left;
        cursor: pointer;
        touch-action: manipulation;
      }
      #nearbyFilterSheet .nearbyFilterPickerValue{
        flex: 1 1 auto;
      }
      #nearbyFilterSheet .nearbyFilterPickerChevron{
        flex: 0 0 auto;
        font-size: 16px;
        font-weight: 800;
        color: var(--wa-muted);
      }
      #nearbyFilterSheet input:focus,
      #nearbyFilterSheet select:focus,
      #nearbyFilterSheet .nearbyFilterPickerBtn:focus,
      #nearbyFilterSheet input:focus-visible,
      #nearbyFilterSheet select:focus-visible,
      #nearbyFilterSheet .nearbyFilterPickerBtn:focus-visible{
        outline: none;
        box-shadow: 0 0 0 3px var(--brandRing);
        border-color: var(--border);
      }
      #nearbyFilterSheet .nearbyFilterActions{
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding: 10px 12px 12px;
        background: linear-gradient(to top, #fff 76%, rgba(255,255,255,.92));
        flex: 0 0 auto;
      }
      @media (max-width: 360px){
        #nearbyFilterSheet .nearbyFilterActions{ grid-template-columns: 1fr; }
      }
      #nearbyFilterSheet .nearbyFilterActions .btn{ width: 100%; }

      /* Nearby quick filter sheet (Distance / Last seen – WhatsApp-style) */
      #nearbyQuickSheetCard.bottomSheet{
        padding-bottom: 0;
      }
      #nearbyQuickSheetCard .sheetHeader{
        padding: 8px 16px 10px;
      }
      #nearbyQuickSheetCard .sheetTitle{
        font-size: 17px;
        font-weight: 800;
        letter-spacing: -.02em;
      }
      #nearbyQuickSheetCard .sheetPreview{
        margin-top: 4px;
        font-size: 14px;
        color: #667085;
      }
      .nearbyQuickSheetOptions{
        display: flex;
        flex-direction: column;
        margin: 0 16px;
        max-height: min(44vh, 320px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        border-radius: 20px;
        border: 1px solid rgba(15,23,42,.06);
        background: #ffffff;
        box-shadow: 0 2px 8px rgba(15,23,42,.03);
      }
      .nearbyQuickSheetOption{
        width: 100%;
        min-height: 56px;
        padding: 0 16px;
        border: 0;
        background: #ffffff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: left;
        cursor: pointer;
        color: #111;
      }
      .nearbyQuickSheetOption + .nearbyQuickSheetOption{ border-top: 1px solid rgba(0,0,0,.06); }
      .nearbyQuickSheetOption:active{ background: rgba(15,23,42,.04); }
      .nearbyQuickSheetOption:focus-visible{
        outline: none;
        box-shadow: inset 0 0 0 1px rgba(15,23,42,.08);
      }
      .nearbyQuickSheetOption.isSelected{
        background: rgba(31,182,21,.08);
        box-shadow: inset 0 0 0 1px rgba(31,182,21,.14);
      }
      .nearbyQuickSheetOptionCopy{
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 0;
        padding-right: 10px;
      }
      .nearbyQuickSheetOptionLabel{
        font-size: 16px;
        line-height: 1.25;
        font-weight: 700;
        letter-spacing: -.01em;
        color: #111827;
      }
      .nearbyQuickSheetOptionHint{
        display: none;
      }
      .nearbyQuickSheetOption.isSelected .nearbyQuickSheetCheck{ opacity: 1; }
      .nearbyQuickSheetCheck{
        width: 18px;
        height: 18px;
        fill: #1FB615;
        opacity: 0;
        flex-shrink: 0;
      }
      .nearbyQuickSheetActions{
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        background: #ffffff;
      }
      .nearbyQuickSheetSecondary,
      .nearbyQuickSheetPrimary{
        min-height: 48px;
        border-radius: 14px;
        border: 1px solid rgba(15,23,42,.08);
        font-size: 16px;
        font-weight: 750;
        letter-spacing: -.01em;
      }
      .nearbyQuickSheetSecondary{
        background: #fff;
        color: #667085;
      }
      .nearbyQuickSheetSecondary:disabled{
        opacity: .45;
        cursor: default;
      }
      .nearbyQuickSheetPrimary{
        background: #1FB615;
        border-color: #1FB615;
        color: #ffffff;
        box-shadow: none;
      }
      .nearbyQuickSheetSecondary:active:not(:disabled),
      .nearbyQuickSheetPrimary:active{
        transform: scale(.992);
      }

      /* Nearby uses a single refresh entry point: search row icon */
      /* Refresh feedback: rotate icon while loading (no layout shift) */
      #nearbyTab #nearbyRefreshIconBtn.isLoading svg{
        animation: netSpin .9s linear infinite;
        transform-origin: 50% 50%;
      }
      #nearbyTab #nearbyRefreshIconBtn.isLoading{
        pointer-events: none;
        opacity: .7;
      }
      #nearbyTab #nearbyRefreshIconBtn:disabled{ opacity: .7; }
      #nearbyTab #nearbyLocationIconBtn{ color: var(--wa-muted); position: relative; }
      #nearbyTab #nearbyLocationIconBtn.isOn{ color: var(--wa-green); }
      #nearbyTab #nearbyLocationIconBtn.isOn::after{
        content:"";
        position:absolute;
        right: 10px;
        bottom: 10px;
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: var(--wa-green);
        box-shadow: 0 0 0 2px #fff;
      }
      #nearbyTab #nearbyLocationIconBtn:disabled{ opacity: .7; }
      /* Rooms top bar: same location icon styling (grey OFF, green ON) */
      #roomsLocationIconBtn{ color: var(--wa-muted); position: relative; }
      #roomsLocationIconBtn.isOn{ color: var(--wa-green); }
      #roomsLocationIconBtn.isOn::after{
        content:"";
        position:absolute;
        right: 10px;
        bottom: 10px;
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: var(--wa-green);
        box-shadow: 0 0 0 2px #fff;
      }
      /* Slightly larger action icons on Nearby */
      #nearbyTab .chatsIconBtn svg{ width: var(--icon-glyph-size-strong); height: var(--icon-glyph-size-strong); }

      /* Nearby results: full-width like Chats; smooth scroll, no horizontal */
      #nearbyResultsSurface{
        background: #fff;
        border: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        flex: 1 1 0%;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: hidden;
        padding-bottom: 0;
        box-sizing: border-box;
      }
      #nearbyResultsSurface{
        border-radius: 0;
        box-shadow: none;
      }
      @media (max-width: 430px){
        #nearbyTab, #nearbyTab .nearbyScroll, #nearbyResultsSurface{ overflow-x: hidden; max-width: 100%; }
      }
      #nearbyTab .aiPinnedLane{
        position: static;
        top: auto;
        z-index: auto;
        padding: 0;
        background: transparent;
        margin: 0;
        flex: 0 0 auto;
      }
      #nearbyList{
        flex: 1 1 auto;
        min-height: 0;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        touch-action: auto;
        padding-bottom: var(--nearby-results-bottom-clearance);
        scroll-padding-bottom: calc(var(--nearby-results-bottom-clearance) + var(--kb, 0px));
        box-sizing: border-box;
      }

      /* Rows (WhatsApp-like density + indented dividers) */
      #nearbyTab .listItem.nearbyRow{
        display:flex;
        align-items:center;
        gap: 12px;
        padding: 10px var(--pad-r) 10px var(--pad-l);
        min-height: 76px;
        background:#fff;
        position: relative;
      }
      #nearbyTab .listItem.nearbyRow:active{ background: rgba(0,0,0,.04); }
      #nearbyTab .listItem.nearbyRow::after{
        content:"";
        position:absolute;
        left: calc(var(--pad-l) + 52px + 12px);
        right: 0;
        bottom: 0;
        height:1px;
        background: var(--wa-divider);
      }
      #nearbyTab .listItem.nearbyRow:last-child::after{ display:none; }
      #nearbyTab .avatar{
        width: 52px;
        height: 52px;
        border-radius: 999px;
        background: #E5E7EB;
        flex: 0 0 auto;
      }
      #nearbyTab .waRowBody{ flex:1; min-width:0; }
      #nearbyTab .waRowTop{
        display:grid;
        grid-template-columns: 1fr auto;
        align-items:center;
        gap:10px;
        min-width: 0;
      }
      #nearbyTab .waName{
        font-size: var(--chat-name-size);
        font-weight: 600;
        line-height: 1.15;
        color:#000;
        min-width: 0;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
      }
      #nearbyTab .waMetaRight{
        font-size: 13px;
        color: var(--wa-muted);
        white-space:nowrap;
      }
      #nearbyTab .waSub{
        margin-top: 3px;
        font-size: var(--chat-snippet-size);
        line-height: 1.2;
        color: var(--wa-muted);
        min-width: 0;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
      }
      #nearbyTab .waOnlineDot{
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: var(--wa-green);
        display:inline-block;
        margin-right: 6px;
        vertical-align: middle;
      }

      /* Ask Spotchati AI badge */
      #nearbyTab .waAiBadge{
        font-size: 12px;
        font-weight: 700;
        padding: 2px 7px;
        border-radius: 999px;
        background: rgba(37,211,102,.18);
        color: #0F7A3A;
        margin-left: 8px;
      }

      /* Nearby pinned AI lane: use the same chat-row style as Chats (not a separate card) */
      #nearbyTab .aiPinnedLane .listItem.chatItem{
        padding: 10px var(--pad-r) 10px var(--pad-l);
        min-height: 72px;
        border-bottom: 0; /* use indented divider */
        background: #fff;
        position: relative;
      }
      #nearbyTab .aiPinnedLane .listItem.chatItem::after{
        content:"";
        position:absolute;
        left: calc(var(--pad-l) + 48px + 12px); /* left padding + avatar + gap */
        right: 0;
        bottom: 0;
        height: 1px;
        background: var(--wa-divider);
      }
      #nearbyTab .aiPinnedLane .listItem.chatItem:last-child::after{ display:none; }
      #nearbyTab .aiPinnedLane .listItem.chatItem:active,
      #nearbyTab .aiPinnedLane .listItem.chatItem.isPressed{ background: rgba(60,60,67,.10); }

      /* Nearby users list: render rows like Chats chat list */
      #nearbyTab #nearbyList .listItem.chatItem{
        padding: 10px var(--pad-r) 10px var(--pad-l);
        min-height: 72px;
        border-bottom: 0;
        background: #fff;
        position: relative;
      }
      #nearbyTab #nearbyList .listItem.chatItem::after{
        content:"";
        position:absolute;
        left: calc(var(--pad-l) + 48px + 12px);
        right: 0;
        bottom: 0;
        height: 1px;
        background: var(--wa-divider);
      }
      #nearbyTab #nearbyList .listItem.chatItem:last-child::after{ display:none; }
      #nearbyTab #nearbyList .listItem.chatItem:active,
      #nearbyTab #nearbyList .listItem.chatItem.isPressed{ background: rgba(60,60,67,.10); }

      /* Nearby (Step 5): turn user rows into scannable, actionable "cards" */
      #nearbyTab #nearbyResultsSurface{
        background: #fff;
      }
      #nearbyTab #nearbyList{
        padding: 0 0 var(--nearby-results-bottom-clearance);
        box-sizing: border-box;
      }
      /* Nearby list: WhatsApp-quality contact rows (Step 10) */
      #nearbyTab .nearbyRow{
        display:flex;
        gap:12px;
        padding:12px var(--nearby-pad-r) 12px var(--nearby-pad-l);
        background:#fff;
        align-items:center;
        min-height: 72px;
        position: relative;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        touch-action: pan-y;
      }
      #nearbyTab .nearbyRow:active{ background: rgba(0,0,0,.04); }
      #nearbyTab .nearbyRow.pressable.isPressed{ background: rgba(60,60,67,.08); }
      #nearbyTab .nearbyRow:focus-visible{
        outline: none;
        box-shadow: inset 0 0 0 2px var(--wa-green-2);
      }
      /* Divider starts after avatar (WhatsApp pattern) */
      #nearbyTab .nearbyRow::after{
        content:"";
        position:absolute;
        left: calc(var(--nearby-pad-l) + 48px + 12px);
        right: 0;
        bottom: 0;
        height:1px;
        background: var(--wa-divider);
      }
      #nearbyTab #nearbyList .nearbyRow:last-child::after{ display:none; }

      #nearbyTab .nearbyAvatar{
        width:48px;
        height:48px;
        border-radius:999px;
        flex: 0 0 48px;
        background: #E5E7EB;
        display:flex;
        align-items:center;
        justify-content:center;
        font-weight: 850;
        color: rgba(0,0,0,.78);
        overflow: visible;
        position: relative;
      }
      #nearbyTab .nearbyAvatar .avatarLetter{
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        text-align: center;
      }
      #nearbyTab .nearbyAvatar.hasPhoto{ background: #E5E7EB; }
      #nearbyTab .nearbyAvatar img{ width:100%; height:100%; object-fit: cover; }

      #nearbyTab .nearbyMain{ flex: 1 1 auto; min-width: 0; }
      #nearbyTab .nearbyTop{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap: 10px;
        min-width: 0;
      }
      #nearbyTab .nearbyName{
        font-size: var(--chat-name-size);
        font-weight: var(--chat-name-weight);
        line-height: 1.12;
        color: #111827;
        letter-spacing: -0.01em;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        min-width: 0;
      }
      #nearbyTab .nearbyMeta{
        flex: 0 0 auto;
        display:flex;
        align-items:center;
        gap: 8px;
        white-space: nowrap;
      }
      #nearbyTab .nearbyDistance{
        font-size: var(--chat-time-size);
        color: #98a2b3;
        font-weight: 700;
        letter-spacing: .02em;
      }
      #nearbyTab .nearbyChevron{
        font-size: 18px;
        line-height: 1;
        color: rgba(0,0,0,.28);
        margin-left: 2px;
      }
      #nearbyTab .nearbyBottom{
        margin-top: 2px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap: 10px;
        min-width: 0;
      }
      #nearbyTab .nearbyAbout{
        font-size: var(--chat-snippet-size);
        line-height: 1.2;
        color: rgba(0,0,0,.55);
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        min-width: 0;
        flex: 1 1 auto;
      }
      #nearbyTab .nearbyLastSeen{
        flex: 0 0 auto;
        font-size: var(--chat-time-size);
        color: #98a2b3;
        font-weight: 700;
        letter-spacing: .02em;
        white-space: nowrap;
      }

      /* Nearby empty state: WhatsApp-style, centered in scroll surface, lightweight */
      #nearbyTab #nearbyList.nearbyEmpty{
        background: transparent;
        border: 0;
        box-shadow: none;
        border-radius: 0;
        overflow: visible;
        margin: 0;
        padding-bottom: 0;
      }
      #nearbyTab .nearbyEmptyWrap{
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: min(100%, calc(100vh - 280px));
        min-height: min(100%, calc(100dvh - 280px));
        padding: 24px calc(16px + var(--safe-right)) calc(var(--tabbar-total-h) + var(--safe-bottom) + 24px) calc(16px + var(--safe-left));
        width: 100%;
        box-sizing: border-box;
      }
      #nearbyTab .nearbyEmptyCard{
        width: 100%;
        max-width: 320px;
        background: transparent;
        border: 0;
        border-radius: 0;
        padding: 0;
        box-shadow: none;
        text-align: center;
        box-sizing: border-box;
      }
      #nearbyTab .nearbyEmptyIcon{
        width: 40px;
        height: 40px;
        border-radius: 999px;
        background: rgba(60,60,67,.06);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 12px;
        color: rgba(0,0,0,.5);
      }
      #nearbyTab .nearbyEmptyIcon svg{ width: 22px; height: 22px; fill: currentColor; }
      #nearbyTab .nearbyEmptyTitle{
        font-weight: 800;
        color: var(--text);
        font-size: 17px;
        line-height: 1.25;
      }
      #nearbyTab .nearbyEmptySubtitle{
        margin-top: 6px;
        color: var(--wa-muted);
        font-size: 14px;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      #nearbyTab .nearbyEmptyActions{
        margin-top: 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
      }
      #nearbyTab .nearbyEmptyActions .btn{
        width: 100%;
        max-width: 280px;
        min-height: 44px;
        padding: 0 16px;
        font-size: 15px;
      }
      #nearbyTab .nearbyEmptyActions .btnPrimary{
        background: #1FB615;
        border-color: #1FB615;
        box-shadow: 0 12px 24px rgba(31,182,21,.18);
      }
      #nearbyTab .nearbyEmptyActions .btnPrimary:active:not(:disabled){
        background: #1AA70F;
        border-color: #1AA70F;
        box-shadow: 0 8px 16px rgba(31,182,21,.14);
      }

      /* ROOMS TAB - mobile-first, no horizontal overflow */
      #appView > #roomsTab{
        flex: 1 1 auto;
        min-height: 0;
        height: 100%;
        position: relative;
      }
      #roomsTab{
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        min-height: 0;
        position: relative;
      }
      #roomsListWrap{
        position: absolute;
        inset: 0;
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
      }
      #roomsTab .pageBody,
      #roomsTab .roomsScroll{
        background: #fff;
        flex: 1 1 0%;
        min-height: 0;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
      }
      #roomsTab .roomsScroll{
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        touch-action: auto;
        padding-top: 0;
        padding-bottom: calc(var(--pad) + var(--safe-bottom));
      }
      #roomsTab .roomsSkeleton{
        padding: 0;
      }
      #roomsTab .roomsSkelCard{
        height: 56px;
        margin-bottom: 0;
        border-radius: 0;
        background: linear-gradient(90deg, rgba(0,0,0,.05) 25%, rgba(0,0,0,.08) 50%, rgba(0,0,0,.05) 75%);
        background-size: 200% 100%;
        animation: roomsSkelShine 1.2s ease-in-out infinite;
      }
      #roomsTab .roomsSkelCard:last-child{ margin-bottom: 0; }
      @keyframes roomsSkelShine{
        0%{ background-position: 200% 0; }
        100%{ background-position: -200% 0; }
      }
      #roomsTab .roomsContent{
        padding: 0;
      }
      #roomsTab .roomsEmptyState,
      #roomsTab .roomsOwnedState,
      #roomsTab .roomsErrorState{
        display: flex;
        justify-content: center;
        align-items: flex-start;
        min-height: min(280px, 40vh);
      }
      #roomsTab .roomsEmptyState.hidden,
      #roomsTab .roomsOwnedState.hidden,
      #roomsTab .roomsErrorState.hidden{ display: none !important; }
      #roomsTab .roomsEmptyCard,
      #roomsTab .roomsOwnedCard,
      #roomsTab .roomsErrorCard{
        width: 100%;
        max-width: 420px;
        background: #fff;
        border: 1px solid rgba(0,0,0,0.08);
        border-radius: 18px;
        padding: 18px 16px;
        box-shadow: 0 8px 20px rgba(0,0,0,0.06);
        box-sizing: border-box;
      }
      #roomsTab .roomsEmptyIcon{
        width: var(--icon-btn-size);
        height: var(--icon-btn-size);
        border-radius: 999px;
        background: rgba(60,60,67,.08);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 12px;
        color: rgba(0,0,0,.72);
      }
      #roomsTab .roomsEmptyIcon svg{ width: 22px; height: 22px; fill: currentColor; }
      #roomsTab .roomsEmptyTitle{
        font-weight: 800;
        color: var(--text);
        font-size: 18px;
        line-height: 1.2;
        text-align: center;
      }
      #roomsTab .roomsEmptySub{
        margin-top: 6px;
        color: var(--wa-muted);
        font-size: 13px;
        line-height: 1.4;
        text-align: center;
      }
      #roomsTab .roomsEmptyActions{
        margin-top: 14px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
      }
      #roomsTab .roomsEmptyActions .btn{
        min-height: 44px;
        width: 100%;
        max-width: 320px;
        padding: 0 16px;
        font-size: 15px;
      }
      #roomsTab .roomsOwnedName{
        font-weight: 700;
        font-size: 17px;
        color: var(--text);
        margin: 0 0 4px;
      }
      #roomsTab .roomsOwnedDesc{
        font-size: 14px;
        color: var(--wa-muted);
        line-height: 1.35;
        margin: 0 0 8px;
      }
      #roomsTab .roomsOwnedDesc:empty{ display: none; }
      #roomsTab .roomsOwnedMeta{
        font-size: 12px;
        color: var(--wa-muted);
        margin: 0 0 12px;
      }
      #roomsTab .roomsOwnedActions{
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      #roomsTab .roomsOwnedActions .btn{ min-height: 44px; padding: 0 16px; font-size: 15px; }
      #roomsTab .roomsErrorText{
        color: var(--text);
        font-size: 14px;
        margin: 0 0 12px;
      }
      #roomsTab .roomsErrorCard .btn{ min-height: 44px; }
      #roomsTab .roomsSkeleton.hidden{ display: none !important; }
      #roomsTab .roomsList{ display: block; }
      #roomsTab .roomsList.hidden{ display: none !important; }
      /* Compact WhatsApp-style room rows - full-width, no overflow */
      #roomsTab .roomsRow{
        position: relative;
        display: flex;
        align-items: center;
        gap: 11px;
        margin: 0 var(--pad-r) 8px var(--pad-l);
        padding: 11px 13px;
        min-height: 66px;
        background: rgba(255,255,255,.99);
        border: 1px solid rgba(17,24,39,.06);
        border-radius: 18px;
        box-sizing: border-box;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
        width: auto;
        max-width: none;
        align-self: stretch;
        min-width: 0;
        overflow: hidden;
        background-clip: padding-box;
        box-shadow: none;
      }
      #roomsTab .roomsRow:active{
        transform: scale(.996);
        background: rgba(247,250,248,.98);
        border-color: rgba(27,149,11,.08);
        box-shadow: none;
      }
      #roomsTab .roomsRow:last-child{ border-bottom: 0; }
      #roomsTab .roomsOwnedManageCard{
        background: rgba(255,255,255,.99);
        border-color: rgba(27,149,11,.10);
        box-shadow: none;
      }
      #roomsTab .roomsRow.roomsRowCreate{
        color: var(--color-text, #111);
      }
      #roomsTab .roomsRowCreate:active{
        background: linear-gradient(180deg, rgba(247,250,248,.99), rgba(241,246,243,.98));
      }
      #roomsTab .roomsRowAvatar{
        width: 42px;
        height: 42px;
        flex-shrink: 0;
        border-radius: 50%;
        background: linear-gradient(180deg, rgba(244,246,245,.98), rgba(236,240,238,.96));
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), 0 2px 6px rgba(15,23,42,.05);
      }
      #roomsTab .roomsRowAvatar.hasPhoto{ background: transparent; position: relative; }
      #roomsTab .roomsRowAvatar.hasPhoto img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
      #roomsTab .roomsRowAvatar.hasPhoto .roomsRowAvatarLetter{ position: relative; z-index: 1; }
      #roomsTab .roomsRowAvatar.roomsRowAvatarWithImg{ position: relative; }
      #roomsTab .roomsRowAvatar.roomsRowAvatarWithImg img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
      #roomsTab .roomsRowAvatar.roomsRowAvatarWithImg .roomsRowAvatarLetter{ position: relative; z-index: 1; }
      #roomsTab .roomsRowAvatar img{ width: 100%; height: 100%; object-fit: cover; }
      #roomsTab .roomsRowAvatarLetter{
        font-weight: 600;
        font-size: 18px;
        color: var(--wa-muted, rgba(0,0,0,.6));
      }
      #roomsTab .roomsRowCreateIcon .roomsRowAvatarLetter{ font-size: 22px; color: var(--color-brand-500, #1B950B); }
      #roomsTab .roomsRowBody{
        flex: 1 1 0;
        min-width: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        gap: 3px;
      }
      #roomsTab .roomsRowTitle{
        font-weight: 700;
        font-size: 15px;
        line-height: 1.18;
        color: var(--text);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      #roomsTab .roomsRowTitleLine{
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
      }
      #roomsTab .roomsRowTitleLine .roomsRowTitle{
        flex: 1 1 auto;
        min-width: 0;
      }
      #roomsTab .roomsRowMetaLine{
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
      }
      #roomsTab .roomsRowMetaLine .roomsRowMeta{
        flex: 1 1 auto;
        min-width: 0;
      }
      #roomsTab .roomsRowMineBadge{
        flex-shrink: 0;
        font-size: 11px;
        font-weight: 800;
        padding: 2px 8px;
        border-radius: 999px;
        background: rgba(27,149,11,.09);
        color: var(--color-brand-500, #1B950B);
        border: 1px solid rgba(27,149,11,.12);
        line-height: 1.2;
      }
      #roomsTab .roomsRowStatusBadge{
        flex-shrink: 0;
        font-size: 11px;
        font-weight: 800;
        padding: 2px 8px;
        border-radius: 999px;
        background: rgba(17,24,39,.07);
        color: #6b7280;
        border: 1px solid rgba(17,24,39,.08);
        line-height: 1.2;
      }
      #roomsTab .roomsRowMeta{
        font-size: 12px;
        line-height: 1.25;
        color: rgba(17,24,39,.46);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      #roomsTab .roomsRowPreview{ font-size: 13px; line-height: 1.22; color: rgba(17,24,39,.66); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      #roomsTab .roomsRowTime{ font-size: 11px; color: rgba(17,24,39,.40); flex-shrink: 0; white-space: nowrap; font-weight: 700; }
      #roomsTab .roomsRowTitleUnread{ font-weight: 800; }
      #roomsTab .roomsRowPreviewUnread{ font-weight: 700; color: var(--text); }
      #roomsTab .roomsRowIndicators{
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-left: 12px;
        flex-shrink: 0;
      }
      #roomsTab .roomsRowIndicator{
        position: relative;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        background: rgba(27,149,11,.08);
        color: #7a8698;
        box-shadow: inset 0 0 0 1px rgba(17,24,39,.04);
      }
      #roomsTab .roomsRowIndicator.hidden{ display: none !important; }
      #roomsTab .roomsRowIndicatorIcon{
        width: 18px;
        height: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      #roomsTab .roomsRowIndicatorIcon svg{ width: 18px; height: 18px; }
      #roomsTab .roomsRowIndicatorBadge{
        position: absolute;
        top: -3px;
        right: -3px;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 999px;
        background: var(--color-brand-500, #1B950B);
        color: #fff;
        font-size: 11px;
        font-weight: 800;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 2px solid #fff;
        box-shadow: 0 4px 10px rgba(27,149,11,.22);
      }
      #roomsTab .roomsRowUnreadIndicator{
        background: rgba(27,149,11,.11);
        color: var(--color-brand-500, #1B950B);
      }
      #roomsTab .roomsRowUnreadDot{ width: 10px; height: 10px; border-radius: 50%; background: var(--color-brand-500, #1B950B); flex-shrink: 0; }
      #roomsTab .roomsRowUnreadDot.hidden{ display: none !important; }
      #roomsTab .roomsRowCaret{
        font-size: 18px;
        color: var(--wa-muted);
        flex-shrink: 0;
      }
      #roomsTab .roomsRowActionChip{
        flex-shrink: 0;
        min-height: 32px;
        min-width: 64px;
        padding: 0 10px;
        font-size: 13px;
        font-weight: 600;
        border: none;
        border-radius: 8px;
        background: var(--color-brand-500, #1B950B);
        color: #fff;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: opacity .15s, background .15s;
      }
      #roomsTab .roomsRowActionChip:active:not(:disabled){ opacity: 0.9; }
      #roomsTab .roomsRowActionChip.roomsRowActionChipSecondary{
        background: #fff;
        color: var(--wa-text);
        border: 1px solid rgba(15,23,42,.10);
        box-shadow: 0 1px 2px rgba(15,23,42,.04);
      }
      #roomsTab .roomsRowActionChip.roomsRowActionChipPending{
        background: rgba(0,0,0,.12);
        color: var(--wa-muted);
        cursor: default;
        opacity: 0.8;
      }
      #roomsTab .roomsListCard{ /* legacy class for event delegation */ }
      #roomsTab .roomsSectionLabel{
        font-size: 11px; font-weight: 800; color: rgba(17,24,39,.46);
        padding: 0 var(--pad-l) 2px; text-transform: uppercase; letter-spacing: .08em;
      }
      #roomsTab .roomsList > .roomsSectionLabel:first-child{
        margin-top: -3px;
      }
      #roomsTab .roomsSectionHint{
        font-size: 12px;
        color: rgba(17,24,39,.44);
        padding: 0 var(--pad-l) 1px;
        line-height: 1.35;
      }
      #roomsTab .roomsJoinedEmpty{
        margin: 8px var(--pad-r) 0 var(--pad-l);
        padding: 2px 2px 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 7px;
        width: calc(100% - var(--pad-l) - var(--pad-r));
        max-width: calc(100% - var(--pad-l) - var(--pad-r));
        align-self: center;
        box-sizing: border-box;
      }
      #roomsTab .roomsJoinedEmptyHeader{
        display: flex;
        flex-direction: column;
        gap: 2px;
      }
      #roomsTab .roomsJoinedEmptyEyebrow{
        display: none;
      }
      #roomsTab .roomsJoinedEmptyTitle{
        font-size: 14px;
        line-height: 1.18;
        font-weight: 650;
        color: var(--text);
      }
      #roomsTab .roomsJoinedEmptyText{
        font-size: 12px;
        line-height: 1.34;
        color: rgba(17,24,39,.48);
        max-width: 40ch;
      }
      #roomsTab .roomsJoinedEmptyActions{
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
      }
      #roomsTab .roomsJoinedEmptyAction,
      #roomsTab .roomsJoinedEmptyShortcut{
        min-height: 32px;
        border-radius: 999px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: transform .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease;
      }
      #roomsTab .roomsJoinedEmptyAction{
        flex: 0 0 auto;
        padding: 0 12px;
        border: 1px solid rgba(27,149,11,.12);
        background: rgba(27,149,11,.08);
        color: var(--color-brand-500, #1B950B);
        box-shadow: none;
        font-size: 11px;
        font-weight: 800;
      }
      #roomsTab .roomsJoinedEmptyShortcut{
        padding: 0 10px;
        border: 1px solid rgba(17,24,39,.08);
        background: rgba(255,255,255,.96);
        color: rgba(17,24,39,.68);
        font-size: 11px;
        font-weight: 700;
        box-shadow: none;
      }
      #roomsTab .roomsJoinedEmptyAction:active,
      #roomsTab .roomsJoinedEmptyShortcut:active{
        transform: scale(.985);
      }
      #roomsTab .roomsJoinedEmptyAction:active{
        background: rgba(27,149,11,.14);
      }
      #roomsTab .roomsJoinedEmptyShortcut:active{
        background: rgba(248,249,250,.98);
        border-color: rgba(27,149,11,.12);
      }
      #roomsTab .roomsRowRequestsBtn{
        position: relative;
        width: 36px;
        height: 36px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        background: rgba(27,149,11,.08);
        border-radius: 50%;
        color: #7a8698;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background .15s, color .15s, transform .15s, box-shadow .15s;
        box-shadow: inset 0 0 0 1px rgba(17,24,39,.04);
      }
      #roomsTab .roomsRowRequestsBtn.hasPending{
        background: rgba(27,149,11,.14);
        color: var(--color-brand-500, #1B950B);
      }
      #roomsTab .roomsRowRequestsBtn:active{ transform: scale(.97); }
      #roomsTab .roomsRowRequestsBtn:hover{ background: rgba(27,149,11,.12); color: var(--text); }
      #roomsTab .roomsRowRequestsBtn:focus-visible{ outline: none; box-shadow: 0 0 0 2px var(--brandRing); }
      #roomsTab .roomsRowRequestsIcon{
        width: 18px;
        height: 18px;
        display:flex;
        align-items:center;
        justify-content:center;
      }
      #roomsTab .roomsRowRequestsIcon svg{ width: 18px; height: 18px; }
      #roomsTab .roomsRowRequestsBadge{ position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--color-brand-500, #1B950B); color: #fff; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #fff; box-shadow: 0 4px 10px rgba(27,149,11,.22); }

      #roomsTab .roomsTabsBar{
        position: sticky;
        top: 0;
        z-index: 100;
        display: flex;
        gap: 4px;
        padding: 4px;
        margin: 6px var(--pad-r) 0 var(--pad-l);
        background: rgba(243,245,246,.98);
        border: 1px solid rgba(17,24,39,.04);
        border-radius: 18px;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.88);
        overflow: hidden;
        flex-shrink: 0;
      }
      #roomsTab .roomsTabsBar::before{
        content: none;
      }
      #roomsTab .roomsTabSeg{
        position: relative;
        z-index: 1;
        flex: 1;
        min-height: 44px;
        padding: 9px 14px;
        font-size: 16px;
        font-weight: 700;
        color: rgba(17,24,39,.56);
        background: transparent;
        border: none;
        border-radius: 14px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: color .16s ease, transform .16s ease, opacity .16s ease, background .16s ease, box-shadow .16s ease;
      }
      #roomsTab .roomsTabSeg:active{
        transform: scale(.985);
      }
      #roomsTab .roomsTabSeg:focus-visible{
        outline: none;
        box-shadow: 0 0 0 3px rgba(27,149,11,.18);
      }
      #roomsTab .roomsTabSeg.isActive,
      #roomsTab .roomsTabSeg[aria-selected="true"]{
        color: rgba(15,23,42,.94);
        background: rgba(255,255,255,.98);
        box-shadow: 0 2px 6px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.94);
      }
      #roomsTab .roomsTabSeg:not(.isActive):not([aria-selected="true"]){
        box-shadow: none;
        color: rgba(17,24,39,.54);
        opacity: 1;
      }
      #roomsTab .roomsPanel{
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
      }
      #roomsTab .roomsPanel.hidden{ display: none !important; }
      #roomsTab .roomsDiscoveryToolbar{
        position: relative;
        z-index: 12;
        padding: 10px var(--pad-r) 12px var(--pad-l);
        background: #fff;
        display: flex;
        flex-direction: column;
        gap: 10px;
        border-bottom: 1px solid rgba(17,24,39,.06);
        box-shadow: 0 10px 20px rgba(15,23,42,.04);
        isolation: isolate;
      }
      #roomsTab .roomsDiscoveryToolbarRow{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
      #roomsTab .roomsDiscoveryToolbarRow .roomsDiscoverySearch{ flex: 1; min-width: 120px; }
      #roomsTab .roomsDiscoverySearch{
        width: 100%;
        box-sizing: border-box;
        padding: 11px 14px;
        font-size: 15px;
        border: 1px solid rgba(17,24,39,.08);
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 1px 4px rgba(15,23,42,.03);
      }
      #roomsTab .roomsDiscoveryRadiusGroup{
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        min-width: 0;
        margin: 0;
        padding: 0;
        border: none;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
      #roomsTab .roomsDiscoveryRadiusOption{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 36px;
        padding: 0 12px;
        font-size: 12px;
        font-weight: 700;
        color: rgba(17,24,39,.72);
        background: rgba(17,24,39,.05);
        border: 1px solid transparent;
        border-radius: 999px;
        cursor: pointer;
        white-space: nowrap;
        flex-shrink: 0;
      }
      #roomsTab .roomsDiscoveryRadiusOption input{ position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
      #roomsTab .roomsDiscoveryRadiusOption:has(input:checked),
      #roomsTab .roomsDiscoveryRadiusOption.isActive{
        background: var(--color-brand-500, #1B950B);
        color: #fff;
        border-color: rgba(27,149,11,.16);
      }
      #roomsTab .roomsDiscoveryRadiusOption:active{ opacity: 0.9; }
      #roomsTab .roomsDiscoveryList{
        padding: 12px var(--pad-r) var(--pad) var(--pad-l);
        width: 100%;
        overflow: visible;
        box-sizing: border-box;
      }
      #roomsTab .roomsDiscoverySortHint{ font-size: 11px; color: rgba(17,24,39,.42); padding: 0; margin-top: -2px; }
      #roomsTab .roomsDiscoveryEmpty{ padding: var(--pad); }
      #roomsTab .roomsDiscoveryViewport{
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        touch-action: auto;
        background: #fff;
        padding-bottom: calc(var(--pad) + var(--safe-bottom));
      }
      @media (max-width: 430px){
        #roomsTab .roomsRow{ gap: 10px; margin-bottom: 8px; padding: 10px 12px; min-height: 64px; }
        #roomsTab .roomsRowAvatar{ width: 42px; height: 42px; }
        #roomsTab .roomsDiscoveryToolbar{ padding: 10px 12px; }
        #roomsTab .roomsRowActionChip{ min-width: 64px; padding: 0 10px; font-size: 13px; }
        #roomsTab .roomsJoinedEmpty{ padding: 2px 0 0; }
        #roomsTab .roomsJoinedEmptyTitle{ font-size: 14px; }
        #roomsTab .roomsJoinedEmptyText{ max-width: none; }
        #roomsTab .roomsJoinedEmptyActions{ gap: 8px; }
        #roomsTab .roomsTabsBar{ padding: 4px; border-radius: 18px; }
        #roomsTab .roomsTabSeg{ min-height: 44px; padding: 9px 12px; font-size: 16px; }
        #roomsTab .roomsDiscoveryRadiusGroup{ gap: 6px; overflow-x: visible; }
        #roomsTab .roomsDiscoveryRadiusOption{ flex: 1 1 0; min-width: 0; padding: 0 8px; }
      }

      /* Room Chat full-screen (WhatsApp-like) */
      #roomsTab{ overflow-x: hidden; }
      #roomsListWrap{ display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }
      #roomsListWrap.hidden{ display: none !important; }
      .roomsChatScreen{
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        background: #fff;
        z-index: 55;
        /* match 1-1 chat: no extra safe-top padding */
        min-height: 0;
        overflow: hidden;
      }

      /* critical mobile fix:
         Rooms chat must IGNORE the app tabbar padding and be a true overlay on small screens,
         otherwise we get the big white empty area at the bottom.
      */
      @media (max-width: 900px){
        .roomsChatScreen{
          position: fixed;
          inset: 0;
          width: 100vw;
          height: var(--vvh, 100dvh);
          max-height: var(--vvh, 100dvh);
        }
      }
      html.is-native-app #roomsChatScreen{
        padding-bottom: 0;
        height: 100dvh;
        max-height: 100dvh;
      }
      html.is-native-app.keyboard-open #roomsChatScreen{
        padding-bottom: var(--kb, 0px);
      }
      html.is-ios-app.keyboard-open #roomsChatScreen{
        padding-bottom: calc(var(--kb, 0px) + 28px);
      }
      .roomsChatScreen.hidden{ display: none !important; }
      .roomsChatHeader{
        flex-shrink: 0; display: flex; align-items: center; gap: 10px;
        min-height: 52px; padding: 4px 4px 4px 0;
        border-bottom: 1px solid var(--wa-divider, rgba(0,0,0,.08));
        position: sticky; top: 0; z-index: 5; background: #fff;
      }
      .roomsChatBackBtn{
        min-width: 44px; min-height: 44px; width: 44px; height: 44px;
        display: flex; align-items: center; justify-content: center;
        border: 0; background: transparent; border-radius: 50%;
        color: var(--color-brand-500, #1B950B); cursor: pointer;
        -webkit-tap-highlight-color: transparent; flex-shrink: 0;
      }
      .roomsChatBackBtn:hover{ background: rgba(0,0,0,.06); }
      .roomsChatBackBtn:focus-visible{ outline: none; box-shadow: 0 0 0 2px var(--brandRing); }
      .roomsChatHeaderAvatar{
        width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
        background: var(--color-surface-2, rgba(0,0,0,.06));
        display: flex; align-items: center; justify-content: center; overflow: hidden;
      }
      .roomsChatHeaderAvatar.hasPhoto{ background: transparent; }
      .roomsChatHeaderAvatar img{ width: 100%; height: 100%; object-fit: cover; }
      .roomsChatHeaderAvatarLetter{ font-weight: 600; font-size: 16px; color: var(--wa-muted); }
      .roomsChatHeaderTitles{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; }
      .roomsChatRoomName{ margin: 0; font-weight: 700; font-size: 17px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .roomsChatSubtitle{ margin: 0; font-size: 13px; color: var(--wa-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .roomsChatMenuBtn{
        min-width: 44px; min-height: 44px; width: 44px; height: 44px; flex-shrink: 0;
        display: flex; align-items: center; justify-content: center; padding: 0;
        border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent;
      }
      .roomsChatMenuBtn:hover{ background: rgba(0,0,0,.06); }
      .roomsChatMenuBtn:focus-visible{ outline: none; box-shadow: 0 0 0 2px var(--brandRing); }
      .roomsChatReconnectBanner{
        flex-shrink: 0; padding: 8px 12px; font-size: 13px; color: var(--wa-muted);
        background: rgba(0,0,0,.04); text-align: center;
      }
      .roomsChatReconnectBanner.hidden{ display: none !important; }
      .roomsChatBodyWrap{
        position: relative;
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
      }
      .roomsChatBody{
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 12px 12px 8px;
        background: #e5ddd4;
      }
      .roomsChatSkeleton{ display: flex; flex-direction: column; gap: 12px; padding: 8px 0; }
      .roomsChatSkeleton.hidden{ display: none !important; }
      .roomsChatSkelBubble{
        height: 48px; border-radius: 18px; max-width: 75%;
        background: linear-gradient(90deg, rgba(0,0,0,.06) 25%, rgba(0,0,0,.12) 50%, rgba(0,0,0,.06) 75%);
        background-size: 200% 100%; animation: roomsSkelShine 1.2s ease-in-out infinite;
      }
      .roomsChatSkelBubble:nth-child(odd){ align-self: flex-end; }
      .roomsChatMessagesList{ display: flex; flex-direction: column; gap: 0; min-height: 60px; }
      .roomsChatMsgRow{
        display:flex;
        width: 100%;
        box-sizing: border-box;
        padding: 0 14px;
        justify-content:flex-start;
        margin-top: 6px;
        overflow: visible;
      }
      .roomsChatMsgRow.me{ justify-content:flex-end; }
      .roomsChatBubbleWrap{
        display:flex;
        flex-direction:column;
        gap: 3px;
        max-width: min(74%, 420px);
        min-width: 0;
        position: relative;
        overflow: visible;
      }
      .roomsChatMsgRow.me .roomsChatBubbleWrap{ align-items: flex-end; }
      .roomsChatSenderName{ font-size: 11px; font-weight: 600; color: var(--wa-muted, rgba(60,60,67,.55)); margin-left: 4px; margin-bottom: 1px; }
      .roomsChatBubble{
        max-width: 100%;
        width: fit-content;
        inline-size: fit-content;
        min-width: min(96px, 100%);
        padding: 8px 12px;
        border-radius: 16px;
        font-size: 16px;
        line-height: 1.38;
        word-break: break-word;
        background: #FFFFFF; color: var(--text); border: 1px solid rgba(0,0,0,.06);
        box-shadow: 0 1px 2px rgba(0,0,0,.06);
        position: relative;
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        align-self: flex-start;
        box-sizing: border-box;
        touch-action: manipulation;
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
        overflow: visible;
        --reply-swipe-offset: 0px;
        --reply-swipe-progress: 0;
        transform: translate3d(var(--reply-swipe-offset), 0, 0);
        transition: transform 180ms ease;
      }
      .roomsChatBubble.fromMe{ background: #DCF8C6; color: #111; border-color: transparent; box-shadow: 0 1px 2px rgba(0,0,0,.06); align-self: flex-end; border-top-right-radius: 6px; }
      .roomsChatBubble:not(.fromMe){ border-top-left-radius: 6px; }
      .roomsChatBubble--image,
      .roomsChatBubble--video{
        min-width: 0;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        gap: 0;
      }
      .roomsChatBubble--image.fromMe,
      .roomsChatBubble--video.fromMe{
        background: transparent;
        box-shadow: none;
      }
      .roomsChatMsgRow--removedUser{
        margin: 2px 0;
      }
      .roomsChatBubble--removedUser{
        min-width: 0;
        max-width: min(72vw, 220px);
        padding: 7px 10px 6px;
        gap: 3px;
        border-radius: 14px;
        background: rgba(255,255,255,.76);
        border: 1px solid rgba(15,23,42,.06);
        box-shadow: none;
      }
      .roomsChatBubble--removedUser .roomsChatBubbleMeta{
        font-size: 11px;
        opacity: .52;
      }
      .roomsChatBubbleSender{ font-size: 12px; font-weight: 600; color: var(--wa-muted, rgba(60,60,67,.6)); margin-bottom: 2px; }
      .roomsChatBubbleBody{
        margin: 0;
        display: block;
        max-width: 100%;
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
      }
      .roomsChatBubbleText{
        display: block;
        max-width: 100%;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        word-break: break-word;
        font-size: 16px;
        line-height: 1.32;
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
      }
      .roomsChatBubble--emojiOnly{
        min-width: 0;
        padding: 4px 0 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        gap: 4px;
        align-items: flex-start;
      }
      .roomsChatBubble--emojiOnly.fromMe{
        background: transparent;
        box-shadow: none;
      }
      .roomsChatBubbleText--emojiOnly{
        font-size: 72px;
        line-height: .94;
        letter-spacing: -.02em;
        overflow: visible;
        white-space: nowrap;
      }
      .roomsChatBubble--emojiOnly.emojiCount2 .roomsChatBubbleText--emojiOnly{
        font-size: 62px;
      }
      .roomsChatBubble--emojiOnly.emojiCount3 .roomsChatBubbleText--emojiOnly{
        font-size: 54px;
      }
      .roomsChatBubbleText--removedUser{
        font-size: 13px;
        line-height: 1.2;
        font-weight: 600;
        font-style: italic;
        color: rgba(60,60,67,.72);
        letter-spacing: .01em;
      }
      .roomsChatBubbleMeta{
        position: static;
        display: inline-flex;
        gap: 3px;
        align-items: flex-end;
        justify-content: flex-end;
        width: auto;
        margin: 0;
        text-align: right;
        font-size: 11px;
        line-height: 1.1;
        font-weight: 400;
        letter-spacing: 0;
        font-variant-numeric: tabular-nums;
        color: var(--chat-meta-muted);
        flex-wrap: nowrap;
        white-space: nowrap;
        min-width: max-content;
        align-self: flex-end;
      }
      .roomsChatBubble--emojiOnly .roomsChatBubbleMeta{
        position: static;
        width: auto;
        margin: 0;
        color: var(--chat-meta-muted);
        text-shadow: none;
        background: none;
        padding: 0;
        border-radius: 0;
        align-self: flex-end;
      }
      .roomsChatBubble--emojiOnly.fromMe .roomsChatBubbleMeta{
        color: var(--chat-meta-outgoing-emoji);
      }
      .roomsChatBubbleTime{
        white-space: nowrap;
        opacity: 1;
        color: inherit;
        font-variant-numeric: tabular-nums;
      }
      .roomsChatDateSeparator{ display: flex; justify-content: center; margin: 8px 0; }
      .roomsChatDateSeparator span{ padding: 4px 12px; border-radius: 999px; background: rgba(0,0,0,.06); font-size: 12px; color: var(--wa-muted); }
      .roomsChatSystemRow{ display:flex; justify-content:center; margin: 8px 0; padding: 0 12px; }
      .roomsChatSystemPill{
        max-width: 88%;
        padding: 6px 12px;
        border-radius: 999px;
        background: rgba(255,255,255,.72);
        border: 1px solid rgba(0,0,0,.06);
        color: var(--wa-muted);
        font-size: 12px;
        line-height: 1.35;
        text-align: center;
        box-shadow: 0 1px 2px rgba(0,0,0,.04);
      }
      .roomsChatOlderPlaceholder span{ font-size: 11px; }
      .roomsChatBubbleRetry{ display: block; margin-top: 4px; font-size: 11px; opacity: .8; text-decoration: underline; cursor: pointer; }
      .roomsChatMsgRow.sendFailed .roomsChatBubble{ border-color: var(--color-error, #c00); }
      .roomsChatNewMessagesChip{ position: absolute; bottom: calc(12px + var(--roomChatBottomOffset, 72px)); left: 50%; transform: translateX(-50%); z-index: 5;
        padding: 8px 16px; border-radius: 999px; background: var(--color-brand-500, #1B950B); color: #fff; font-size: 13px; font-weight: 600;
        cursor: pointer; box-shadow: 0 2px 12px rgba(0,0,0,.15); -webkit-tap-highlight-color: transparent; }
      .roomsChatNewMessagesChip.hidden{ display: none !important; }
      .roomsChatScrollDownBtn{ position: absolute; bottom: calc(20px + var(--roomChatBottomOffset, 72px)); right: 16px; z-index: 5;
        width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid rgba(0,0,0,.1);
        box-shadow: 0 2px 12px rgba(0,0,0,.12); display: flex; align-items: center; justify-content: center;
        cursor: pointer; -webkit-tap-highlight-color: transparent; color: var(--wa-muted); }
      .roomsChatScrollDownBtn svg{ width: 24px; height: 24px; }
      .roomsChatScrollDownBtn.hidden{ display: none !important; }
      .roomsChatNoAccess{
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 16px; padding: 24px; text-align: center; min-height: 120px;
      }
      .roomsChatNoAccess.hidden{ display: none !important; }
      .roomsChatNoAccessText{ margin: 0; font-size: 15px; color: var(--wa-muted); }
      #roomsChatNoAccessBackBtn{ min-height: 44px; min-width: 44px; }
      #roomsChatComposerWrap{
        background: #fff;
        border-top: 1px solid rgba(15,23,42,.08);
        padding: 0;
      }
      html.is-native-app #roomsChatComposerWrap{
        margin-bottom: 0;
        padding-bottom: 0;
      }
      html.is-native-app.keyboard-open #roomsChatComposerWrap{
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
      }
      .roomsChatPreviewBar{
        display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-bottom: 6px;
        background: var(--wa-composer-bg, rgba(0,0,0,.06)); border-radius: 12px; min-height: 52px;
      }
      .roomsChatPreviewBar.hidden{ display: none !important; }
      .roomsChatPreviewThumb{ width: 44px; height: 44px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
      .roomsChatPreviewMain{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
      .roomsChatPreviewName{ font-size: 14px; color: var(--wa-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .roomsChatPreviewCaption{ width: 100%; box-sizing: border-box; border: 0; background: transparent; font-size: 14px; color: var(--text); padding: 2px 0; }
      .roomsChatPreviewCaption::placeholder{ color: var(--wa-muted); }
      .roomsChatPreviewCaption:focus{ outline: none; }
      .roomsChatPreviewRemove{ width: 40px; height: 40px; min-width: 40px; min-height: 40px; border: 0; border-radius: 50%; background: rgba(0,0,0,.1); color: var(--text); font-size: var(--icon-glyph-size-compact); line-height: 1; cursor: pointer; flex-shrink: 0; -webkit-tap-highlight-color: transparent; display:flex; align-items:center; justify-content:center; }
      .roomsChatPreviewRemove:hover{ background: rgba(0,0,0,.15); }
      .roomsChatComposer{
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 44px;
      }
      .roomsChatTextInput{
        flex: 1;
        min-width: 0;
        min-height: 40px;
        border-radius: 999px;
        padding: 9px 14px;
        border: 1px solid rgba(0,0,0,.08);
        background: #fff;
        font-size: 16px;
        color: var(--text);
      }
      .roomsChatTextInput::placeholder{ color: var(--wa-muted); }
      .roomsChatTextInput:focus{ outline: none; }
      .roomsChatSendBtn{
        min-width: 44px; min-height: 44px; width: 44px; height: 44px;
        display: flex; align-items: center; justify-content: center;
        border: 0; border-radius: 50%; background: var(--color-brand-500, #1B950B);
        color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent;
      }
      .roomsChatSendBtn:focus-visible{ outline: none; box-shadow: 0 0 0 2px var(--brandRing); }
      .roomsChatComposer .roomsChatAttachBtn{ flex-shrink: 0; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; color: var(--wa-muted); -webkit-tap-highlight-color: transparent; display: flex; align-items: center; justify-content: center; }
      .roomsChatComposer .roomsChatAttachBtn svg{ width: 22px; height: 22px; fill: currentColor; }
      .roomsChatComposer .roomsChatAttachBtn:disabled{ opacity: .55; }
      html.is-native-app #roomsChatComposer{
        margin-bottom: 0;
      }
      #roomsChatComposer{
        background: rgba(255,255,255,.96);
        border-top: 0;
        box-sizing: border-box;
        padding: 2px 8px 8px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        gap: 8px;
        align-items: flex-end;
      }
      html.is-native-app.keyboard-open #roomsChatComposer{
        padding: 2px 8px 8px;
      }
      #roomsChatComposer #roomsChatTextInput{
        min-height: 42px;
        padding: 10px 14px 9px;
        line-height: 19px;
        border-radius: 22px;
        border-color: rgba(148,163,184,.28);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
      }
      #roomsChatComposer #roomsChatTextInput::placeholder{
        color: #98a2b3;
      }
      #roomsChatComposer #roomsChatTextInput:focus{
        border-color: rgba(27,149,11,.26);
        box-shadow: 0 0 0 2px rgba(27,149,11,.12);
      }
      .roomsChatMediaWrap{ display: inline-flex; flex-direction: column; align-items: flex-start; max-width: 100%; padding: 0; margin: 0; gap: 6px; position: relative; }
      .roomsChatMediaImg.chat-media{ cursor: pointer; -webkit-tap-highlight-color: transparent; }
      .roomsChatMediaImg{ max-width: 240px; max-height: 200px; width: auto; height: auto; border-radius: 16px; display: block; vertical-align: top; border: 1px solid rgba(0,0,0,.10); background: rgba(0,0,0,.06); }
      .roomsChatMediaImg--loading{
        width: min(240px, 62vw);
        max-width: 240px;
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        color: transparent;
        border-color: rgba(0,0,0,.06);
        background:
          linear-gradient(110deg, rgba(255,255,255,.12) 18%, rgba(255,255,255,.42) 28%, rgba(255,255,255,.12) 38%),
          linear-gradient(180deg, #ece5d8 0%, #e4dccd 100%);
        background-size: 180% 100%, 100% 100%;
        animation: roomMediaSkeletonShimmer 1.2s ease-in-out infinite;
      }
      .roomsChatMediaImg--loading + .roomsChatBubbleMeta{
        opacity: 0;
      }
      @keyframes roomMediaSkeletonShimmer{
        0%{ background-position: 180% 0, 0 0; }
        100%{ background-position: -40% 0, 0 0; }
      }
      .roomsChatBubble--sticker{
        padding: 0 4px 18px 4px;
        border: 0;
        background: transparent;
        box-shadow: none;
        margin-inline: 0;
      }
      .roomsChatBubble--sticker.fromMe{
        background: transparent;
        box-shadow: none;
      }
      .roomsChatStickerWrap{
        align-items: flex-start;
        gap: 2px;
        overflow: visible;
        padding-inline: 0;
        box-sizing: border-box;
        width: fit-content;
        inline-size: fit-content;
        max-width: min(208px, calc(100vw - 120px));
        margin-inline-start: 10px;
        margin-inline-end: 0;
      }
      .roomsChatMsgRow.me .roomsChatStickerWrap{
        align-items: flex-end;
        margin-inline-start: 0;
        margin-inline-end: 14px;
      }
      .roomsChatStickerImg{
        display: block;
        max-width: min(204px, calc(100vw - 128px));
        max-height: 264px;
        width: auto;
        height: auto;
        object-fit: contain;
        border-radius: 14px;
        background: transparent;
        border: 0;
        margin: 0 auto;
      }
      .roomsChatMediaVid{ max-width: 240px; max-height: 180px; width: auto; height: auto; border-radius: 16px; display: block; vertical-align: top; border: 1px solid rgba(0,0,0,.10); background: rgba(0,0,0,.06); }
      .roomsChatBubble.fromMe .roomsChatMediaImg,
      .roomsChatBubble.fromMe .roomsChatMediaVid{
        border-color: rgba(255,255,255,.18);
        background: rgba(0,0,0,.12);
      }
      .roomsChatMediaWrap .roomsChatBubbleMeta{
        position: absolute;
        right: 8px;
        bottom: 8px;
        z-index: 4;
        pointer-events: none;
        gap: 3px;
        margin: 0;
        color: var(--chat-meta-on-media);
        background: transparent;
        box-shadow: none;
        padding: 0;
        font-weight: 500;
        text-shadow: var(--chat-meta-shadow-media);
      }
      .roomsChatBubble--sticker{
        padding: 0 0 18px 0;
      }
      .roomsChatStickerWrap .roomsChatBubbleMeta{
        position: static;
        align-self: flex-start;
        display: inline-flex;
        width: auto;
        min-width: 0;
        max-width: max-content;
        justify-content: flex-start;
        gap: 2px;
        margin-top: 1px;
        color: var(--chat-meta-muted);
        background: none;
        box-shadow: none;
        padding: 0;
        border-radius: 0;
        text-shadow: none;
      }
      .roomsChatMsgRow.me .roomsChatStickerWrap .roomsChatBubbleMeta{
        align-self: flex-end;
        justify-content: flex-end;
        color: var(--chat-meta-outgoing-emoji);
      }
      .roomsChatStickerWrap .roomsChatBubbleTime{
        color: inherit;
        text-shadow: none;
      }
      .roomsChatMediaWrap .roomsChatBubbleTime{
        opacity: 1;
        color: #fff;
        text-shadow: inherit;
      }
      .roomsChatDocWrap{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
      .roomsChatDocWrap .roomsChatBubbleMeta{
        margin-left: auto;
        color: var(--chat-meta-on-media);
        text-shadow: var(--chat-meta-shadow-media);
        background: rgba(0,0,0,.28);
        padding: 2px 6px;
        border-radius: 999px;
      }
      .roomsChatDocWrap .roomsChatBubbleTime{
        color: #fff;
        text-shadow: inherit;
      }
      .roomsChatLocationWrap .roomsChatBubbleMeta{
        margin-left: auto;
        color: var(--chat-meta-on-media);
        text-shadow: var(--chat-meta-shadow-media);
        background: rgba(0,0,0,.28);
        padding: 2px 6px;
        border-radius: 999px;
      }
      .roomsChatLocationWrap .roomsChatBubbleTime{
        color: #fff;
        text-shadow: inherit;
      }
      .roomsChatAudioWrap .roomsChatBubbleMeta{
        color: var(--chat-meta-muted);
        text-shadow: none;
        background: none;
        padding: 0;
        border-radius: 0;
      }
      .roomsChatAudioWrap .roomsChatBubbleTime{
        color: inherit;
        text-shadow: none;
      }
      .roomsChatDocName{ font-weight: 600; }
      .roomsChatDocSize{ font-size: 12px; opacity: .9; }
      .roomsChatDocOpen{ font-size: 13px; padding: 4px 10px; border-radius: 8px; border: 1px solid rgba(0,0,0,.15); background: rgba(0,0,0,.06); cursor: pointer; }
      .roomsChatBubble.fromMe .roomsChatDocOpen{ border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.2); }
      .roomsChatLocationWrap{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
      .roomsChatLocationLabel{ font-weight: 600; }
      .roomsChatLocationOpen{ display: inline-block; font-size: 13px; font-weight: 600; color: #1a73e8; text-decoration: underline; padding: 4px 10px; border-radius: 999px; background: rgba(26, 115, 232, .12); -webkit-tap-highlight-color: transparent; }
      .roomsChatBubble.fromMe .roomsChatLocationOpen{ color: #fff; text-decoration: none; background: rgba(255,255,255,.28); }
      .roomsChatBubble.fromMe .roomsChatLocationOpen:hover{ background: rgba(255,255,255,.35); }
      .roomsChatLocationInvalid{ font-size: 12px; opacity: .7; font-style: italic; }
      .roomsChatAudioWrap{ display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; }
      .roomsChatAudioEl{ max-width: 220px; height: 36px; vertical-align: middle; }

      .roomsDetailBackdrop{
        position: fixed;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        bottom: calc(var(--tabbar-total-h) + var(--safe-bottom));
        width: min(100%, var(--app-max-w));
        background: transparent;
        z-index: 90;
      }
      .roomsDetailBackdrop.hidden{ display: none !important; }
      .roomsDetailBackdrop.coverTabBar{ bottom: 0; }
      .roomsDetailSheet{
        position: fixed; top: 0; left: 50%; right: auto; transform: translateX(-50%); bottom: calc(var(--tabbar-total-h) + var(--safe-bottom)); width: min(100%, var(--app-max-w)); height: auto; max-width: var(--app-max-w);
        max-height: none; border-radius: 0; box-sizing: border-box; z-index: 91;
        background: var(--surface, #fff); display: flex; flex-direction: column; box-shadow: 0 0 0 1px var(--wa-divider, rgba(0,0,0,.08));
        padding-bottom: 12px;
      }
      .roomsDetailSheet.hidden{ display: none !important; }
      .roomsDetailSheet.coverTabBar{ bottom: 0; }
      .roomsDetailSheet.isManageView{
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        padding-bottom: 0;
      }
      .roomsDetailHeader{
        position: sticky; top: 0; z-index: 2; background: var(--surface, #fff);
        display: flex; align-items: center; gap: 10px; flex-shrink: 0;
        padding: calc(8px + env(safe-area-inset-top, 0)) 14px 8px 8px;
        border-bottom: 1px solid var(--wa-divider, rgba(0,0,0,.08));
        box-shadow: 0 1px 0 rgba(15,23,42,.03);
      }
      .roomsDetailHeaderAvatar{
        width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%;
        background:
          radial-gradient(120px 90px at 30% 35%, rgba(76,175,80,.10), transparent 62%),
          linear-gradient(180deg, rgba(148,163,184,.12), rgba(148,163,184,.06));
        border: 1px solid rgba(15,23,42,.08);
        display: flex; align-items: center; justify-content: center;
        overflow: hidden;
        box-shadow: 0 6px 16px rgba(15,23,42,.06);
      }
      .roomsDetailHeaderAvatar.hasPhoto{ background: transparent; }
      .roomsDetailHeaderAvatar.loading{ opacity: 0.7; pointer-events: none; }
      .roomsDetailHeaderAvatar img{ width: 100%; height: 100%; object-fit: cover; }
      .roomsDetailHeaderAvatar .roomsDetailHeaderAvatarLetter{ font-weight: 700; font-size: 18px; color: rgba(17,24,39,.7); }
      .roomsDetailHeaderText{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
      .roomsDetailCloseBtn{
        width: var(--icon-btn-size); height: var(--icon-btn-size); min-width: var(--icon-btn-size); min-height: var(--icon-btn-size); display: flex; align-items: center; justify-content: center;
        border: 0; background: transparent; border-radius: 50%; font-size: var(--icon-glyph-size-prominent); color: var(--text);
        cursor: pointer; -webkit-tap-highlight-color: transparent; flex-shrink: 0; order: -1;
      }
      .roomsDetailCloseBtn:hover{ background: rgba(0,0,0,.06); color: var(--text); }
      .roomsDetailCloseBtn:focus-visible{ outline: none; box-shadow: 0 0 0 2px var(--brandRing); }
      .roomsDetailTitle{ font-weight: 750; font-size: 18px; letter-spacing: -.01em; color: var(--text); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .roomsDetailHeaderMeta{ font-size: 13px; color: rgba(17,24,39,.56); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .roomsDetailMetaBar{ flex-shrink: 0; padding: 0 16px 8px; display: none; align-items: center; gap: 8px; flex-wrap: wrap; }
      .roomsDetailMeta{ font-size: 12px; color: var(--wa-muted); margin: 0; }
      .roomsDetailPrivacyChip{ display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
      .roomsDetailPrivacyChip.public{ background: rgba(0, 80, 200, .12); color: #06c; }
      .roomsDetailPrivacyChip.private{ background: rgba(120, 60, 0, .15); color: #b35c00; }
      .roomsDetailRequestsPreview{ flex-shrink: 0; padding: 10px 16px; border-bottom: 1px solid var(--wa-divider, rgba(0,0,0,.08)); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
      .roomsDetailRequestsPreview.hidden{ display: none !important; }
      .roomsDetailRequestsPreviewText{ font-size: 14px; color: var(--wa-muted); margin: 0; }
      .roomsDetailTabs{
        display: flex; gap: 0; flex-shrink: 0;
        padding: 0 16px; border-bottom: 1px solid var(--wa-divider, rgba(0,0,0,.08));
      }
      .roomsDetailTab{
        padding: 12px 16px; border: 0; background: transparent; font-size: 14px; font-weight: 600; color: var(--wa-muted);
        cursor: pointer; -webkit-tap-highlight-color: transparent; border-bottom: 2px solid transparent; margin-bottom: -1px;
      }
      .roomsDetailTab:hover{ color: var(--text); }
      .roomsDetailTab.isActive{ color: var(--color-text, #111); border-bottom-color: var(--color-brand-500, #1B950B); }
      .roomsDetailTab:focus-visible{ outline: none; box-shadow: inset 0 -2px 0 0 var(--brandRing); }
      .roomsDetailPanels{ flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 16px; -webkit-overflow-scrolling: touch; }
      .roomsDetailSheet.isManageView #roomsDetailContentWrap{
        flex: 0 0 auto;
        min-height: auto;
        overflow: visible;
        justify-content: flex-start;
      }
      .roomsDetailSheet.isManageView .roomsDetailPanels{
        flex: 0 0 auto;
        min-height: auto;
        overflow: visible;
        padding: 10px 16px 6px;
      }
      .roomsDetailPanel{ display: block; }
      .roomsDetailPanel.hidden{ display: none !important; }
      .roomsDetailSheet.isManageView .roomsDetailPanel::before{
        content: "MEMBERS";
        display: block;
        padding: 0 4px 8px;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .08em;
        color: rgba(17,24,39,.42);
        text-transform: uppercase;
      }
      .roomsDetailDesc{ font-size: 14px; color: var(--wa-muted); line-height: 1.4; margin: 0 0 12px; }
      .roomsDetailDesc:empty{ display: none; }
      .roomsDetailAboutMeta{ font-size: 12px; color: var(--wa-muted); margin: 0; }
      .roomsDetailSkeleton{ display: flex; flex-direction: column; gap: 10px; }
      .roomsDetailSkeleton.hidden{ display: none !important; }
      .roomsDetailSkelLine{ height: 44px; border-radius: 12px; background: linear-gradient(90deg, rgba(0,0,0,.06) 25%, rgba(0,0,0,.12) 50%, rgba(0,0,0,.06) 75%); background-size: 200% 100%; animation: roomsSkelShine 1.2s ease-in-out infinite; }
      .roomsDetailMembersSearchWrap{ flex-shrink: 0; padding: 6px 0 10px; }
      .roomsDetailMembersSearch{ width: 100%; min-height: 46px; padding: 11px 14px; font-size: 15px; border-radius: 14px; border: 1px solid rgba(15,23,42,.08); background: linear-gradient(180deg, rgba(247,249,251,.95), rgba(239,243,247,.92)); color: var(--text); box-shadow: inset 0 1px 0 rgba(255,255,255,.92); }
      .roomsDetailMembersSearch::placeholder{ color: var(--wa-muted); }
      .roomsDetailMembersSearch:focus{ outline: none; border-color: rgba(76,175,80,.38); box-shadow: 0 0 0 3px rgba(76,175,80,.14); }
      .roomsDetailMembersList, .roomsDetailRequestsList{ display: flex; flex-direction: column; gap: 10px; }
      .roomsDetailMembersList.hidden, .roomsDetailRequestsList.hidden{ display: none !important; }
      .roomsDetailSheet.isManageView .roomsDetailMembersSearchWrap.hidden{ display: none !important; }
      .roomsDetailSheet.isManageView .roomsDetailMembersList{
        gap: 0;
        border: 1px solid rgba(15,23,42,.07);
        border-radius: 16px;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 1px 0 rgba(255,255,255,.9), 0 8px 20px rgba(15,23,42,.035);
      }
      .roomsDetailMemberRow, .roomsDetailRequestRow{
        display: flex; align-items: center; gap: 12px;
        padding: 12px 12px; border-radius: 16px; min-height: 58px;
        border: 1px solid rgba(15,23,42,.06);
        background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.92));
        box-shadow: 0 1px 0 rgba(255,255,255,.9), 0 10px 24px rgba(15,23,42,.04);
      }
      .roomsDetailMemberRow.isInteractive, .roomsDetailRequestRow.isInteractive, .roomsBlockedRow.isInteractive{ cursor: pointer; -webkit-tap-highlight-color: transparent; }
      .roomsDetailMemberRow.isInteractive:active, .roomsDetailRequestRow.isInteractive:active, .roomsBlockedRow.isInteractive:active{
        transform: translateY(1px);
        box-shadow: 0 1px 0 rgba(255,255,255,.9), 0 6px 16px rgba(15,23,42,.05);
      }
      .roomsDetailSheet.isManageView .roomsDetailMemberRow{
        border: 0;
        border-bottom: 1px solid rgba(15,23,42,.06);
        border-radius: 0;
        background: #fff;
        box-shadow: none;
        min-height: 62px;
      }
      .roomsDetailSheet.isManageView .roomsDetailMemberRow.isInteractive:active{
        transform: none;
        box-shadow: none;
        background: rgba(15,23,42,.035);
      }
      .roomsDetailMemberRow:last-child, .roomsDetailRequestRow:last-child{ border-bottom: 1px solid rgba(15,23,42,.06); }
      .roomsDetailSheet.isManageView .roomsDetailMemberRow:last-child{
        border-bottom: 0;
      }
      .roomsDetailMemberRow .memberAvatar{ width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(180deg, #f7f9fb, #eef2f6); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: #667085; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(17,24,39,.04); }
      .roomsDetailMemberRow .memberAvatar.hasPhoto{ background: transparent; }
      .roomsDetailMemberRow .memberAvatar img{ width: 100%; height: 100%; object-fit: cover; }
      .roomsDetailRequestRow .requestAvatar, .roomsBlockedRow .blockedAvatar{ width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(180deg, #f7f9fb, #eef2f6); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: #667085; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(17,24,39,.04); }
      .roomsDetailRequestRow .requestAvatar.hasPhoto, .roomsBlockedRow .blockedAvatar.hasPhoto{ background: transparent; }
      .roomsDetailRequestRow .requestAvatar img, .roomsBlockedRow .blockedAvatar img{ width: 100%; height: 100%; object-fit: cover; }
      .roomsDetailMemberRow .memberInfo, .roomsDetailRequestRow .requestInfo{ flex: 1; min-width: 0; }
      .roomsBlockedRow .blockedInfo{ flex: 1; min-width: 0; }
      .roomsDetailMemberRow .memberName, .roomsDetailRequestRow .requestName{ font-weight: 700; font-size: 15px; letter-spacing: -.01em; color: var(--text); margin: 0 0 3px; }
      .roomsBlockedRow .blockedName{ font-weight: 700; font-size: 15px; letter-spacing: -.01em; color: var(--text); margin: 0 0 3px; }
      .roomsDetailMemberRow .memberUsername{ font-size: 13px; color: rgba(17,24,39,.54); margin: 0; }
      .roomsDetailMemberRow .memberRoleWrap{ flex-shrink: 0; }
      .roomsDetailMemberRow .memberRole{ font-size: 12px; color: var(--wa-muted); margin: 0; }
      .roomsDetailMemberRow .memberChevron{
        flex-shrink: 0;
        color: rgba(17,24,39,.30);
        font-size: 22px;
        line-height: 1;
        margin-left: -2px;
      }
      .roomsDetailRequestRow .requestMeta{ font-size: 12px; color: var(--wa-muted); margin: 0; }
      .roomsBlockedRow .blockedMeta{ font-size: 12px; color: var(--wa-muted); margin: 0; }
      .roomsDetailMemberRow .memberActions, .roomsDetailRequestRow .requestActions, .roomsBlockedRow .blockedActions{ display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
      .roomsDetailMemberRow .memberActions .btn, .roomsDetailRequestRow .requestActions .btn{ min-height: 36px; padding: 0 12px; font-size: 13px; }
      .roomsBlockedRow .blockedActions .btn{ min-height: 36px; padding: 0 12px; font-size: 13px; }
      .roomsDetailActionDangerLite{
        color: #c43c30;
        border-color: rgba(196,60,48,.18);
        background: linear-gradient(180deg, rgba(255,250,250,.98), rgba(254,241,241,.96));
      }
      .roomsDetailManageBtn{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
      }
      .roomsDetailManageBtnIcon{
        display: inline-flex;
        width: 18px;
        height: 18px;
        color: rgba(17,24,39,.66);
      }
      .roomsDetailManageBtnIcon svg{ width: 100%; height: 100%; display: block; }
      .roomsDetailManageBtnCount{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 22px;
        height: 22px;
        padding: 0 6px;
        border-radius: 999px;
        background: rgba(148,163,184,.14);
        color: rgba(17,24,39,.68);
        font-size: 12px;
        font-weight: 800;
      }
      .roomsDetailManageBtnCount.hidden{ display: none !important; }
      .roomRoleBadge{ display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
      .roomRoleBadge.owner{ background: rgba(76,175,80,.14); color: #3f8f2a; border: 1px solid rgba(76,175,80,.18); }
      .roomRoleBadge.admin{ background: rgba(59,130,246,.10); color: #2563eb; border: 1px solid rgba(59,130,246,.14); }
      .roomRoleBadge.member{ background: rgba(148,163,184,.10); color: rgba(17,24,39,.48); border: 1px solid rgba(148,163,184,.12); }
      .roomsDetailStickyFooter{
        flex-shrink: 0; padding: 14px 16px max(24px, calc(18px + env(safe-area-inset-bottom, 0px)));
        border-top: 1px solid var(--wa-divider, rgba(0,0,0,.08)); background: #fff;
        box-shadow: 0 -8px 24px rgba(15,23,42,.04);
      }
      .roomsDetailSheet.isManageView .roomsDetailStickyFooter{
        flex: 0 0 auto;
        padding: 6px 16px max(24px, calc(18px + env(safe-area-inset-bottom, 0px)));
        border-top: 0;
        box-shadow: none;
        background: transparent;
      }
      .roomsDetailSheet.isManageView .roomsDetailStickyFooter::before{
        content: "ROOM ACTIONS";
        display: block;
        padding: 0 4px 8px;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .08em;
        color: rgba(17,24,39,.42);
        text-transform: uppercase;
      }
      .roomsDetailSheet.isManageView.isOwnerRoom .roomsDetailStickyFooter::before{
        content: "MANAGE ROOM";
      }
      .roomsDetailActions{ display: flex; flex-direction: column; gap: 8px; }
      .roomsDetailActions .btn{ min-height: 44px; min-width: 44px; }
      .roomsDetailActions .btn.roomsBtnPending{ opacity: 0.7; pointer-events: none; }
      .roomsDetailOneRoomNote{
        order: 90;
        margin: 4px 10px -2px;
        padding: 0 8px;
        color: rgba(17,24,39,.50);
        font-size: 12px;
        line-height: 1.35;
        text-align: center;
      }
      .roomsDetailOneRoomNote.hidden{ display: none !important; }
      #roomsDetailLeaveBtn{
        border-color: rgba(15,23,42,.08);
        background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
      }
      #roomsDetailDeleteBtn{ order: 100; }
      .roomsDetailEmpty{ font-size: 14px; color: var(--wa-muted); padding: 16px 0; text-align: center; }
      .roomsDetailEmpty.hidden{ display: none !important; }
      .roomsDetailError{ padding: 16px 0; text-align: center; }
      .roomsDetailError.hidden{ display: none !important; }
      .roomsDetailErrorText{ font-size: 14px; color: var(--wa-muted); margin: 0 0 12px; }
      .roomsDetailError .btn{ min-height: 40px; }
      .roomsDetailLoadView{ flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; padding: 24px 16px; }
      .roomsDetailLoadView.hidden{ display: none !important; }
      .roomsDetailLoadError{ text-align: center; }
      .roomsDetailLoadErrorText{ font-size: 14px; color: var(--wa-muted); margin: 0 0 12px; }
      .roomsDetailLoadError .btn{ min-height: 44px; }
      #roomsDetailContentWrap{ flex: 1; min-height: 0; display: flex; flex-direction: column; }
      #roomsDetailContentWrap.hidden{ display: none !important; }
      .roomsRequestsPage{
        position: fixed;
        top: 0;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        bottom: calc(var(--tabbar-total-h) + var(--safe-bottom));
        width: min(100%, var(--app-max-w));
        display: flex;
        flex-direction: column;
        background: var(--surface, #fff);
        z-index: 230;
      }
      .roomsRequestsPage.hidden{ display: none !important; }
      .roomsRequestsPage.coverTabBar{ bottom: 0; }
      .roomsRequestsAppBar{
        position: sticky;
        top: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: calc(56px + var(--safe-top, 0px));
        padding: calc(6px + var(--safe-top, 0px)) 14px 10px 8px;
        background: #fff;
        border-bottom: 1px solid var(--wa-divider, rgba(0,0,0,.08));
        box-shadow: 0 1px 0 rgba(15,23,42,.03);
      }
      .roomsRequestsBackBtn{
        width: var(--icon-btn-size);
        height: var(--icon-btn-size);
        border: 0;
        background: transparent;
        font-size: var(--icon-glyph-size-prominent);
        color: var(--text);
        cursor: pointer;
        border-radius: 50%;
        -webkit-tap-highlight-color: transparent;
        flex-shrink: 0;
      }
      .roomsRequestsTitleWrap{ flex: 1; min-width: 0; }
      .roomsRequestsTitle{ margin: 0; font-size: 17px; font-weight: 700; color: var(--text); }
      .roomsRequestsMeta{ margin: 2px 0 0; font-size: 13px; color: var(--wa-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .roomsRequestsCount{
        min-width: 28px;
        height: 28px;
        padding: 0 10px;
        border-radius: 999px;
        background: rgba(27,149,11,.12);
        color: var(--color-brand-500, #1B950B);
        border: 1px solid rgba(27,149,11,.16);
        font-size: 13px;
        font-weight: 800;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .roomsRequestsBody{
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 14px 16px max(24px, calc(18px + env(safe-area-inset-bottom, 0px)));
        -webkit-overflow-scrolling: touch;
      }
      .roomsRequestsLead{
        margin: 0 0 16px;
        font-size: 14px;
        color: var(--wa-muted);
        line-height: 1.45;
      }
      .roomsRequestsListPage{ display: flex; flex-direction: column; gap: 12px; }
      .roomsRequestsListPage.hidden{ display: none !important; }
      .roomsRequestsSkeleton{ display: flex; flex-direction: column; gap: 10px; }
      .roomsRequestsSkeleton.hidden{ display: none !important; }
      .roomsRequestsEmpty, .roomsRequestsError{
        font-size: 14px;
        color: var(--wa-muted);
        padding: 20px 0;
        text-align: center;
      }
      .roomsRequestsEmpty.hidden, .roomsRequestsError.hidden{ display: none !important; }
      .roomsRequestsError .btn{ min-height: 40px; margin-top: 12px; }
      .roomsRequestsListPage .roomsRequestsPageRow{
        display: grid;
        grid-template-columns: 46px minmax(0, 1fr);
        grid-template-areas:
          "avatar info"
          "actions actions";
        align-items: center;
        column-gap: 12px;
        row-gap: 12px;
        padding: 12px;
        border-radius: 18px;
        border: 1px solid rgba(15,23,42,.07);
        background: #fff;
        box-shadow: 0 1px 0 rgba(255,255,255,.9), 0 10px 26px rgba(15,23,42,.045);
      }
      .roomsRequestsListPage .roomsRequestsPageRow .requestAvatar{
        grid-area: avatar;
        width: 46px;
        height: 46px;
      }
      .roomsRequestsListPage .roomsRequestsPageRow .requestInfo{
        grid-area: info;
        min-width: 0;
      }
      .roomsRequestsListPage .roomsRequestsPageRow .requestName{
        font-size: 16px;
        margin-bottom: 4px;
      }
      .roomsRequestsListPage .roomsRequestsPageRow .requestMeta{
        font-size: 13px;
      }
      .roomsRequestsListPage .roomsRequestsPageRow .requestActions{
        grid-area: actions;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        width: 100%;
      }
      .roomsRequestsListPage .roomsRequestsPageRow .requestActions .btn{
        min-height: 42px;
        width: 100%;
        border-radius: 14px;
        font-size: 14px;
        padding: 0 12px;
      }
      /* Invites section (My Rooms) */
      .roomsInvitesSection{ padding: 0 16px 12px; }
      .roomsInvitesSection.hidden{ display: none !important; }
      .roomsInvitesHeader{ display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
      .roomsInvitesHeaderText{ min-width: 0; }
      .roomsInvitesSectionSub{ font-size: 13px; color: var(--wa-muted); margin: 2px 0 0; }
      .roomsInvitesCount{ min-width: 24px; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--brand, #25D366); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
      .roomsInvitesCount.hidden{ display: none !important; }
      .roomsInvitesList{ display: flex; flex-direction: column; gap: 8px; }
      .roomsInviteRow{ display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 14px; background: #F7FBF7; border: 1px solid rgba(37, 211, 102, .16); }
      .roomsInviteRow .roomsInviteRowBody{ flex: 1; min-width: 0; }
      .roomsInviteRow .roomsInviteRowRoom{ display: block; font-weight: 700; font-size: 15px; color: var(--text); margin: 0 0 4px; }
      .roomsInviteRow .roomsInviteRowMeta{ display: block; font-size: 12px; color: var(--wa-muted); margin: 0; line-height: 1.4; }
      .roomsInviteRow .roomsInviteRowActions{ display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; min-width: 88px; }
      .roomsInviteRow .roomsInviteAcceptBtn,
      .roomsInviteRow .roomsInviteDeclineBtn{ min-height: 34px; padding: 0 12px; font-size: 13px; font-weight: 600; white-space: nowrap; }
      /* Invite members modal */
      .roomsInviteBackdrop{ position: fixed; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%, var(--app-max-w)); background: rgba(0,0,0,.42); z-index: 260; }
      .roomsInviteBackdrop.hidden{ display: none !important; }
      .roomsInviteSheet{ position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: var(--app-max-w); height: 86vh; height: min(86vh, calc(var(--vvh, 100vh) - 18px)); max-height: calc(var(--vvh, 100vh) - 18px); background: #fff; border-radius: 24px 24px 0 0; box-shadow: 0 -18px 44px rgba(15,23,42,.18); z-index: 261; display: flex; flex-direction: column; padding-bottom: max(12px, env(safe-area-inset-bottom, 0)); }
      .roomsInviteSheet.hidden{ display: none !important; }
      .roomsInviteSheet::before{ content:""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 38px; height: 4px; border-radius: 999px; background: rgba(15,23,42,.14); }
      html.is-native-app.keyboard-open #roomsInviteSheet:not(.hidden){
        bottom: var(--kb, 0px);
        height: calc(var(--vvh, 100vh) - var(--kb, 0px) - 10px);
        max-height: calc(var(--vvh, 100vh) - var(--kb, 0px) - 10px);
      }
      .roomsInviteTitle{ margin: 0; padding: 26px 48px 4px 16px; font-size: 18px; font-weight: 800; color: var(--text); }
      .roomsInviteSubtitle{ margin: 0; padding: 0 48px 14px 16px; font-size: 13px; line-height: 1.35; color: var(--wa-muted); }
      .roomsInviteCloseBtn{ position: absolute; top: 12px; right: 8px; width: var(--icon-btn-size); height: var(--icon-btn-size); border: 0; background: transparent; font-size: var(--icon-glyph-size-prominent); color: var(--wa-muted); cursor: pointer; line-height: 1; border-radius: 50%; }
      .roomsInviteCloseBtn:hover{ background: rgba(0,0,0,.06); color: var(--text); }
      .roomsInviteBody{ padding: 0 16px 20px; overflow-y: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
      .roomsInviteLabel{ display: block; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--wa-muted); margin: 0; }
      .roomsInviteInput{ width: 100%; box-sizing: border-box; min-height: 48px; padding: 12px 14px; font-size: 16px; border-radius: 14px; border: 1px solid var(--wa-divider, rgba(0,0,0,.12)); background: var(--wa-searchBg, #F2F3F5); margin: 0; }
      .roomsInviteSearchResults{ display: flex; flex-direction: column; gap: 8px; max-height: none; overflow: visible; margin: 0; }
      .roomsInviteSearchResults:empty{ display: none; }
      .roomsInviteSearchResultRow{ display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--wa-divider, rgba(0,0,0,.08)); background: #fff; cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; box-shadow: 0 1px 2px rgba(15,23,42,.03); }
      .roomsInviteSearchResultRow:active{ background: var(--wa-searchBg, #EFEFF4); }
      .roomsInviteSearchResultRow .roomsInviteSearchAvatar{ width: 44px; height: 44px; border-radius: 50%; background: var(--color-surface-2, rgba(0,0,0,.06)); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: var(--wa-muted); flex-shrink: 0; overflow: hidden; }
      .roomsInviteSearchResultText{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
      .roomsInviteSearchResultRow .roomsInviteSearchName{ flex: 1; min-width: 0; font-weight: 700; font-size: 15px; color: var(--text); }
      .roomsInviteSearchResultRow .roomsInviteSearchUsername{ font-size: 13px; color: var(--wa-muted); margin: 0; }
      .roomsInviteAddPill{ flex-shrink: 0; min-width: 52px; height: 32px; border-radius: 999px; background: rgba(27,149,11,.10); color: var(--brand, #168A0A); font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
      .roomsInviteEmpty{ font-size: 14px; color: var(--wa-muted); padding: 12px 0; text-align: center; }
      .roomsInviteEmpty.hidden{ display: none !important; }
      .roomsInviteSelectedLabel{ font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--wa-muted); margin: 2px 0 0; }
      .roomsInviteSelectedList{ display: flex; flex-direction: column; gap: 8px; max-height: none; overflow: visible; margin: 0; }
      .roomsInviteSelectedList:empty{ display: none; }
      .roomsInviteSelectedRow{ display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 8px 12px; border-radius: 14px; border: 1px solid rgba(27,149,11,.14); background: rgba(27,149,11,.06); }
      .roomsInviteSelectedRow .roomsInviteSelectedAvatar{ width: 36px; height: 36px; border-radius: 50%; background: var(--color-surface-2, rgba(0,0,0,.06)); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: var(--wa-muted); flex-shrink: 0; }
      .roomsInviteSelectedRow .roomsInviteSelectedName{ flex: 1; min-width: 0; font-size: 15px; font-weight: 700; color: var(--text); }
      .roomsInviteSelectedRow .roomsInviteSelectedRemove{ flex-shrink: 0; width: 40px; height: 40px; min-width: 40px; min-height: 40px; border: 0; background: rgba(0,0,0,.1); border-radius: 50%; font-size: var(--icon-glyph-size-compact); line-height: 1; cursor: pointer; color: var(--text); display:flex; align-items:center; justify-content:center; }
      .roomsInviteSendBtn{ width: 100%; position: sticky; bottom: 0; z-index: 2; margin: 2px 0 10px; min-height: 48px; box-shadow: 0 -8px 18px rgba(255,255,255,.96); }
      .roomsInviteSendBtn:disabled{ opacity: 0.6; cursor: not-allowed; }
      .roomsInviteFromChatsLabel{ font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--wa-muted); margin: 2px 0 0; }
      .roomsInviteFromChatsList{ display: flex; flex-direction: column; gap: 8px; max-height: none; overflow: visible; padding-bottom: 8px; }
      .roomsInviteChatRow{ display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--wa-divider, rgba(0,0,0,.08)); background: #fff; cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; box-shadow: 0 1px 2px rgba(15,23,42,.03); }
      .roomsInviteChatRow:active{ background: var(--wa-searchBg, #EFEFF4); }
      .roomsInviteChatRow.isSelected{ background: rgba(27,149,11,.06); border-color: rgba(27,149,11,.18); }
      .roomsInviteChatRow .roomsInviteChatAvatar{ width: 44px; height: 44px; border-radius: 50%; background: var(--color-surface-2, rgba(0,0,0,.06)); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: var(--wa-muted); flex-shrink: 0; overflow: hidden; }
      .roomsInviteChatText{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
      .roomsInviteChatRow .roomsInviteChatName{ flex: 1; min-width: 0; font-weight: 700; font-size: 15px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .roomsInviteChatSub{ font-size: 13px; color: var(--wa-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

      /* Edit room full-page */
      .roomsEditPage{ position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--surface, #fff); z-index: 90; }
      .roomsEditPage.hidden{ display: none !important; }
      .roomsEditAppBar{ display: flex; align-items: center; gap: 12px; padding: calc(8px + var(--safe-top, 0)) 8px 12px 8px; border-bottom: 1px solid var(--wa-divider, rgba(0,0,0,.08)); flex-shrink: 0; }
      .roomsEditBackBtn{ width: var(--icon-btn-size); height: var(--icon-btn-size); border: 0; background: transparent; font-size: var(--icon-glyph-size-prominent); color: var(--text); cursor: pointer; border-radius: 50%; -webkit-tap-highlight-color: transparent; }
      .roomsEditBackBtn:hover{ background: rgba(0,0,0,.06); }
      .roomsEditTitle{ flex: 1; margin: 0; font-size: 17px; font-weight: 700; color: var(--text); }
      .roomsEditSaveBtn{ flex-shrink: 0; min-height: 36px; padding: 0 16px; }
      .roomsEditSaveText{ background: none; border: none; color: var(--brand, #25D366); font-size: 16px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; }
      .roomsEditSaveText:hover:not(:disabled){ opacity: 0.9; }
      .roomsEditSaveText:disabled{ opacity: 0.5; cursor: not-allowed; }
      .roomsEditScroll{ flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 24px 16px; padding-bottom: max(24px, env(safe-area-inset-bottom, 0)); }
      .roomsEditAvatarWrap{ display: flex; justify-content: center; margin-bottom: 24px; }
      .roomsEditAvatar{ width: 96px; height: 96px; border-radius: 50%; background: var(--color-surface-2, rgba(0,0,0,.06)); display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: visible; position: relative; -webkit-tap-highlight-color: transparent; }
      .roomsEditAvatar.hasPhoto{ background: transparent; }
      .roomsEditAvatar img{ width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
      .roomsEditAvatarLetter{ font-weight: 600; font-size: 36px; color: var(--wa-muted); }
      .roomsEditAvatar.loading{ opacity: 0.85; pointer-events: none; }
      .roomsEditAvatarSpinner{ display: none; position: absolute; inset: 0; background: rgba(0,0,0,.25); border-radius: 50%; align-items: center; justify-content: center; pointer-events: none; }
      .roomsEditAvatarSpinner::after{ content: ""; width: 28px; height: 28px; border: 3px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: roomsEditSpinner 0.7s linear infinite; }
      .roomsEditAvatar.loading .roomsEditAvatarSpinner{ display: flex; }
      @keyframes roomsEditSpinner{ to{ transform: rotate(360deg); } }
      .roomsEditAvatarCamera{ position: absolute; right: -3px; bottom: -3px; width: 32px; height: 32px; border-radius: 50%; background: var(--brand, #25D366); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; pointer-events: none; border: 3px solid var(--surface, #fff); box-shadow: 0 4px 10px rgba(0,0,0,.16); }
      .roomsEditAvatarCameraIcon{ flex-shrink: 0; }
      .roomsEditAvatar:not(.canChangePhoto) .roomsEditAvatarCamera{ display: none; }
      .roomsEditForm{ display: flex; flex-direction: column; gap: 8px; }
      .roomsEditDescInput{ width: 100%; box-sizing: border-box; padding: 12px 14px; font-size: 16px; border-radius: 10px; border: 1px solid var(--wa-divider, rgba(0,0,0,.12)); background: #fff; margin: 0 0 12px; resize: vertical; min-height: 80px; font-family: inherit; }
      /* Leave room confirm */
      .roomsLeaveBackdrop{ position: fixed; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%, var(--app-max-w)); background: rgba(0,0,0,.42); z-index: 260; }
      .roomsLeaveBackdrop.hidden{ display: none !important; }
      .roomsLeaveConfirm{
        position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: var(--app-max-w);
        background: #fff; border-radius: 22px 22px 0 0; padding: 20px 16px; padding-bottom: max(20px, env(safe-area-inset-bottom, 0)); z-index: 261;
        box-shadow: 0 -18px 44px rgba(15,23,42,.18);
      }
      .roomsLeaveConfirm.hidden{ display: none !important; }
      .roomsLeaveConfirmTitle{ font-size: 18px; font-weight: 700; margin: 0 0 8px; }
      .roomsLeaveConfirmSub{ font-size: 14px; color: var(--wa-muted); margin: 0 0 16px; line-height: 1.4; }
      .roomsLeaveConfirmActions{ display: flex; gap: 12px; justify-content: flex-end; }
      .roomsLeaveConfirmActions .btn{ min-height: 44px; min-width: 44px; }

      /* Create room sheet (bottom-sheet: above bottom nav, internal scroll, safe-area) */
      .roomsCreateBackdrop{
        position: fixed;
        top: 0; bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: min(100%, var(--app-max-w));
        background: rgba(0,0,0,.4);
        z-index: 210;
        display: none;
        transition: opacity 180ms ease;
      }
      .roomsCreateBackdrop:not(.hidden){ display: block; opacity: 0; pointer-events: none; }
      .roomsCreateBackdrop.open{ opacity: 1; pointer-events: auto; }
      .roomsCreateBackdrop.hidden{ display: none !important; }
      /* Sheet: fixed bottom, max-height keeps header context; fallback vh for old browsers */
      .roomsCreateSheet{
        --roomsCreateFooterSpace: calc(96px + env(safe-area-inset-bottom, 0px));
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        max-width: var(--app-max-w);
        max-height: min(88vh, calc(100vh - 16px));
        background: var(--surface);
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -4px 24px rgba(0,0,0,.12);
        z-index: 211;
        display: none;
        flex-direction: column;
        padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
        overflow: hidden;
        transition: transform 180ms ease, opacity 180ms ease;
      }
      @supports (height: 1dvh){
        .roomsCreateSheet{ max-height: min(88dvh, calc(100dvh - 16px)); }
      }
      .roomsCreateSheet:not(.hidden){ display: flex; transform: translateY(100%); pointer-events: none; }
      .roomsCreateSheet.open{ transform: translateY(0); pointer-events: auto; }
      .roomsCreateSheet.hidden{ display: none !important; }
      @media (prefers-reduced-motion: reduce){
        .roomsCreateSheet{ transition: none; }
        .roomsCreateBackdrop{ transition: none; }
      }
      .roomsCreateSheetHeader{
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
        padding: 16px var(--pad-r) 12px var(--pad-l);
        border-bottom: 1px solid var(--wa-divider, rgba(0,0,0,.08));
      }
      .roomsCreateSheetTitle{
        font-size: 18px;
        font-weight: 700;
        margin: 0;
        color: var(--text);
      }
      .roomsCreateSheetClose{
        width: var(--icon-btn-size);
        height: var(--icon-btn-size);
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        background: transparent;
        border-radius: 50%;
        font-size: var(--icon-glyph-size-strong);
        font-weight: 500;
        color: var(--wa-muted, rgba(0,0,0,.6));
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
      }
      .roomsCreateSheetClose:hover{ background: rgba(0,0,0,.06); color: var(--text); }
      .roomsCreateSheetClose:focus-visible{ outline: none; box-shadow: 0 0 0 2px var(--brandRing); }
      .roomsCreateSheetForm{
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
      }
      .roomsCreateSheetBody{
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        flex: 1;
        min-height: 0;
        padding: 16px var(--pad-r) calc(20px + var(--roomsCreateFooterSpace)) var(--pad-l);
        scroll-padding-bottom: calc(20px + var(--roomsCreateFooterSpace));
      }
      .roomsCreateSheetFooter{
        position: sticky;
        bottom: 0;
        flex-shrink: 0;
        background: var(--surface);
        border-top: 1px solid var(--wa-divider, rgba(0,0,0,.08));
        padding: 12px var(--pad-r) 0 var(--pad-l);
        padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
      }
      @media (max-width: 640px){
        .roomsCreateSheet{
          top: 0;
          bottom: 0;
          height: 100vh;
          max-height: 100vh;
          border-radius: 0;
          box-shadow: none;
          padding-bottom: 0;
        }
        @supports (height: 1dvh){
          .roomsCreateSheet{
            height: 100dvh;
            max-height: 100dvh;
          }
        }
        .roomsCreateSheetBody{
          overflow-y: auto;
          flex: 1;
          padding-top: 14px;
          padding-bottom: calc(18px + var(--roomsCreateFooterSpace));
          scroll-padding-bottom: calc(18px + var(--roomsCreateFooterSpace));
        }
        .roomsCreateSheetFooter{
          position: sticky;
          bottom: 0;
          border-top: 1px solid var(--wa-divider, rgba(0,0,0,.08));
          margin-top: auto;
          padding-top: 12px;
          padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
          box-shadow: 0 -10px 24px rgba(15,23,42,.08);
        }
      }
      .roomsCreateLabel{
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: var(--text);
        margin: 0 0 6px;
      }
      .roomsCreateInput{
        width: 100%;
        box-sizing: border-box;
        padding: 12px 14px;
        border: 1px solid rgba(0,0,0,.12);
        border-radius: 12px;
        font-size: 16px;
        margin-bottom: 14px;
      }
      .roomsCreateTextarea{
        resize: vertical;
        min-height: 72px;
        max-height: 160px;
      }
      .roomsCreatePhotoRow{
        width: 100%;
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0 0 14px;
        padding: 12px;
        border: 1px solid rgba(0,0,0,.10);
        border-radius: 16px;
        background: #fff;
        text-align: left;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
      }
      .roomsCreatePhotoRow:active{ background: rgba(0,0,0,.03); }
      .roomsCreatePhotoRow:focus-visible{
        outline: none;
        border-color: rgba(34,197,94,.45);
        box-shadow: 0 0 0 3px rgba(34,197,94,.14);
      }
      .roomsCreatePhotoPreview{
        width: 56px;
        height: 56px;
        flex: 0 0 56px;
        border-radius: 18px;
        background: linear-gradient(180deg, #f7f9fb, #eef2f6);
        box-shadow: inset 0 0 0 1px rgba(17,24,39,.06);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        color: #667085;
        font-size: 20px;
        font-weight: 800;
        position: relative;
      }
      .roomsCreatePhotoPreview img{
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: none;
      }
      .roomsCreatePhotoPreview.hasPhoto img{ display: block; }
      .roomsCreatePhotoPreview.hasPhoto .roomsCreatePhotoInitial{ display: none; }
      .roomsCreatePhotoCopy{
        min-width: 0;
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        gap: 3px;
      }
      .roomsCreatePhotoTitle{
        font-size: 15px;
        font-weight: 760;
        color: var(--text);
        line-height: 1.2;
      }
      .roomsCreatePhotoHint{
        font-size: 13px;
        color: var(--wa-muted);
        line-height: 1.35;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .roomsCreatePhotoRemove{
        flex: 0 0 auto;
        min-height: 34px;
        padding: 0 12px;
        border: 0;
        border-radius: 999px;
        appearance: none;
        -webkit-appearance: none;
        background: rgba(176,0,32,.08);
        color: var(--danger, #b00020);
        font-size: 13px;
        font-weight: 800;
        cursor: pointer;
      }
      .roomsCreatePhotoRemove.hidden{ display: none !important; }
      .roomsFormSwitchInput{
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
      }
      .roomsFormSwitchRow{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 12px 0 14px;
        padding: 14px;
        border: 1px solid rgba(0,0,0,.12);
        border-radius: 14px;
        background: #fff;
        text-align: left;
        cursor: pointer;
        transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
      }
      .roomsFormSwitchRow:focus-visible{
        outline: none;
        border-color: rgba(34,197,94,.45);
        box-shadow: 0 0 0 3px rgba(34,197,94,.14);
      }
      .roomsFormSwitchRow.isOn{
        border-color: rgba(34,197,94,.25);
        background: rgba(34,197,94,.04);
      }
      .roomsFormSwitchText{
        flex: 1 1 auto;
        min-width: 0;
      }
      .roomsFormSwitchTitle{
        display: block;
        font-size: 15px;
        font-weight: 700;
        color: var(--text);
        line-height: 1.2;
      }
      .roomsFormSwitchSub{
        display: block;
        margin-top: 3px;
        font-size: 13px;
        line-height: 1.35;
        color: var(--wa-muted);
      }
      .roomsCreateError{
        font-size: 13px; color: var(--color-error, #dc3545); margin: 0 0 10px; line-height: 1.4;
      }
      .roomsCreateError.hidden{ display: none !important; }
      .roomsCreateActions{
        display: flex;
        gap: 12px;
        justify-content: flex-end;
        margin-top: 0;
        padding-bottom: 4px;
      }
      .roomsCreateActions .btn{ min-height: 44px; min-width: 44px; }
      @media (max-width: 640px){
        .roomsCreateSheetHeader{
          padding-top: calc(16px + env(safe-area-inset-top, 0px));
        }
        .roomsCreateSheetTitle{
          font-size: 20px;
        }
        .roomsCreateSheetClose{
          width: var(--icon-btn-size);
          height: var(--icon-btn-size);
        }
        .roomsCreateLabel{
          font-size: 14px;
        }
        .roomsCreateInput{
          min-height: 52px;
          border-radius: 14px;
          margin-bottom: 16px;
        }
        .roomsCreatePhotoRow{
          padding: 13px;
          border-radius: 18px;
        }
        .roomsFormSwitchRow{
          margin-top: 8px;
          margin-bottom: 16px;
          padding: 15px 14px;
          border-radius: 16px;
        }
        .roomsCreateActions{
          gap: 10px;
          padding-bottom: 0;
        }
        .roomsCreateActions .btn{
          flex: 1 1 0;
          min-height: 50px;
          border-radius: 16px;
        }
      }
      /* Delete confirm */
      .roomsDeleteBackdrop{
        position: fixed;
        top: 0; bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: min(100%, var(--app-max-w));
        background: rgba(0,0,0,.42);
        z-index: 260;
      }
      .roomsDeleteBackdrop.hidden{ display: none !important; }
      .roomsDeleteConfirm{
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: 400px;
        background: var(--surface);
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -18px 44px rgba(15,23,42,.18);
        padding: 20px var(--pad-r) calc(20px + var(--safe-bottom)) var(--pad-l);
        z-index: 261;
        bottom: 0;
      }
      html.is-native-app.keyboard-open .roomsDeleteConfirm:not(.hidden){
        bottom: calc(var(--kb, 0px) + 44px);
        max-height: calc(var(--vvh, 100vh) - var(--kb, 0px) - 72px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 18px;
        padding-bottom: 20px;
      }
      .roomsDeleteConfirm.hidden{ display: none !important; }
      .roomsDeleteConfirmTitle{ font-size: 18px; font-weight: 700; margin: 0 0 16px; }
      .roomsDeleteConfirmActions{ display: flex; gap: 12px; justify-content: flex-end; margin-top: 16px; }
      .roomsDeleteConfirmActions .btn{ min-height: 44px; min-width: 44px; }
      .roomsDeleteConfirmSub{ font-size: 14px; color: var(--wa-muted); margin: 0 0 16px; line-height: 1.4; }
      .roomsDeleteConfirmLabel{ display: block; font-size: 14px; color: var(--text); margin: 0 0 8px; }
      .roomsDeleteConfirmInput{ width: 100%; box-sizing: border-box; padding: 12px 14px; font-size: 16px; border-radius: 10px; border: 1px solid var(--wa-divider, rgba(0,0,0,.12)); margin: 0 0 16px; }
      .roomsDeleteConfirmInput:focus{ outline: none; border-color: var(--color-brand-500, #1B950B); }
      .roomsRemoveMemberBackdrop{ position: fixed; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%, var(--app-max-w)); background: rgba(0,0,0,.44); z-index: 260; backdrop-filter: blur(2px); }
      .roomsRemoveMemberBackdrop.hidden{ display: none !important; }
      .roomsRemoveMemberConfirm{
        position: fixed; left: 50%; transform: translateX(-50%);
        width: 100%; max-width: 400px; background: var(--surface);
        border-radius: 24px 24px 0 0; box-shadow: 0 -10px 36px rgba(0,0,0,.16);
        padding: 14px var(--pad-r) calc(20px + var(--safe-bottom)) var(--pad-l);
        z-index: 261; bottom: 0;
      }
      .roomsRemoveMemberConfirm.hidden{ display: none !important; }
      .roomsRemoveMemberHandle{
        width: 42px; height: 5px; border-radius: 999px; background: rgba(0,0,0,.12);
        margin: 0 auto 14px;
      }
      .roomsRemoveMemberConfirmTitle{ font-size: 22px; font-weight: 900; margin: 0 0 8px; letter-spacing: -.02em; }
      .roomsRemoveMemberConfirmSub{ font-size: 14px; color: var(--wa-muted); margin: 0 0 16px; line-height: 1.45; }
      .roomsRemoveMemberPreview{
        display:flex; align-items:center; gap: 12px;
        padding: 12px; border-radius: 18px;
        background: linear-gradient(180deg, rgba(246,247,243,.92), rgba(255,255,255,.98));
        border: 1px solid rgba(27,149,11,.10);
        margin: 0 0 16px;
      }
      .roomsRemoveMemberPreviewAvatar{
        width: 48px; height: 48px; border-radius: 50%;
        background: var(--surface2); color: var(--text);
        display:flex; align-items:center; justify-content:center;
        font-size: 19px; font-weight: 800; overflow:hidden; flex-shrink: 0;
      }
      .roomsRemoveMemberPreviewAvatar img{
        width:100%; height:100%; object-fit:cover; display:block;
      }
      .roomsRemoveMemberPreviewName{ font-size: 16px; font-weight: 800; color: var(--text); margin: 0; }
      .roomsRemoveMemberPreviewMeta{ font-size: 13px; color: var(--wa-muted); margin: 2px 0 0; }
      .roomsRemoveMemberConfirmActions{ display: flex; flex-direction: column; gap: 10px; }
      .roomsRemoveMemberConfirmActions .btn{ width: 100%; min-height: 48px; min-width: 44px; border-radius: 16px; }
      .roomsRemoveMemberConfirmBtn{
        background: rgba(205, 55, 55, .10);
        border-color: rgba(205, 55, 55, .16);
        color: #c23a3a;
      }
      .roomsRemoveMemberConfirmBtn:hover{ background: rgba(205, 55, 55, .14); }
      .roomsRemoveMemberCancelBtn{
        background: #fff;
      }
      .roomsPersonSheetHeader{
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 2px 2px 8px;
      }
      .roomsPersonSheetAvatar{
        width: 52px;
        height: 52px;
        border-radius: 50%;
        flex-shrink: 0;
        background: linear-gradient(180deg, #f7f9fb, #eef2f6);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: 18px;
        color: #667085;
        overflow: hidden;
        box-shadow: inset 0 0 0 1px rgba(17,24,39,.04);
      }
      .roomsPersonSheetAvatar.hasPhoto{ background: transparent; }
      .roomsPersonSheetAvatar img{ width: 100%; height: 100%; object-fit: cover; }
      .roomsPersonSheetMetaWrap{ flex: 1; min-width: 0; }
      .roomsPersonSheetName{
        font-size: 17px;
        font-weight: 800;
        color: var(--text);
        letter-spacing: -.02em;
        line-height: 1.2;
      }
      .roomsPersonSheetSub{
        margin-top: 3px;
        font-size: 13px;
        line-height: 1.35;
        color: var(--wa-muted);
      }
      .roomsPersonSheetActions{
        display: flex;
        flex-direction: column;
      }
      .roomsPersonSheetActions .sheetBtn{ margin: 5px 0; }
      .roomsPersonSheetActions .sheetBtn.hidden{ display: none !important; }
      .roomsPersonSheetActions .sheetBtn.roomsPersonSecondaryDanger{
        background: rgba(255,250,250,.98);
        border-color: rgba(176,0,32,.14);
        color: var(--danger);
      }
      #roomsPersonSheetBackdrop{
        z-index: 300;
        background: rgba(15,23,42,.34);
        backdrop-filter: blur(2px);
      }
      #roomsPersonSheet{
        z-index: 301;
        width: min(372px, calc(100% - 28px));
        bottom: max(14px, env(safe-area-inset-bottom, 0px));
        border-radius: 26px;
        padding: 12px;
        box-shadow: 0 24px 54px rgba(15,23,42,.26);
        max-height: min(74vh, calc(var(--vvh, 100vh) - 28px));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }
      #roomsPersonSheet.show{
        display: flex;
        flex-direction: column;
      }
      #roomsPersonSheet::before{
        content: "";
        width: 42px;
        height: 5px;
        border-radius: 999px;
        background: rgba(15,23,42,.14);
        align-self: center;
        margin: 2px 0 12px;
      }
      #roomsPersonSheet .roomsPersonSheetHeader{
        padding: 0 4px 12px;
        border-bottom: 1px solid rgba(15,23,42,.08);
        margin-bottom: 8px;
      }
      #roomsPersonSheet .roomsPersonSheetActions{
        gap: 8px;
      }
      #roomsPersonSheet .roomsPersonSheetActions .sheetBtn{
        min-height: 50px;
        margin: 0;
        border-radius: 16px;
        font-weight: 800;
        text-align: center;
      }
      #roomsPersonSheet .roomsPersonSheetActions .sheetBtn:not(.danger):not(.roomsPersonSecondaryDanger){
        background: rgba(248,250,252,.98);
      }
      #roomsPersonSheet .roomsPersonCancelBtn{
        margin-top: 4px;
        background: #fff;
        color: rgba(17,24,39,.72);
      }
      @media (max-width: 430px){
        #roomsPersonSheet{
          width: calc(100% - 20px);
          bottom: max(10px, env(safe-area-inset-bottom, 0px));
        }
      }

      /* Calm, intentional row interactions */
      .listItem.pressable{
        -webkit-tap-highlight-color: transparent;
        touch-action: pan-y; /* allow smooth vertical scroll; prevent accidental taps while scrolling */
        transition: background-color .12s ease;
      }
      .listItem.pressable.isPressed{ background: var(--surface2); }
      .listItem.pressable:focus-visible{
        outline: none;
        box-shadow: inset 0 0 0 2px var(--brandRing);
      }
      @media (prefers-reduced-motion: reduce){
        .listItem.pressable{ transition: none; }
      }

      /* Chat row quality (Chats tab only) */
      .chatItem .avatar{
        width: var(--chat-avatar);
        height: var(--chat-avatar);
      }
      .chatItem .liName{
        font-weight: var(--chat-name-weight);
        font-size: var(--chat-name-size);
        color: rgba(0,0,0,.92);
      }
      .chatItem .liLast{
        font-size: var(--chat-snippet-size);
        line-height: 1.2;
        color: var(--chat-muted);
      }
      .chatItem .liTime{
        font-size: var(--chat-time-size);
        font-weight: 700;
        color: var(--chat-muted2);
        opacity: 1;
      }

      /* WhatsApp-like Chats row layout (structure-driven) */
      .chatRow{
        display:grid;
        grid-template-columns: calc(var(--chat-avatar) + 14px) 1fr auto;
        grid-template-rows: auto auto;
        column-gap: var(--chat-gap);
        row-gap: 3px;
        padding: 13px calc(var(--chat-pad-x) + var(--safe-right)) 13px calc(var(--chat-pad-x) + var(--safe-left));
        background:#fff;
        cursor:pointer;
        align-items:center;
        min-height: 74px;
      }
      .chatSwipeRow{
        position: relative;
        overflow: hidden;
        background: #fff;
        --chat-swipe-offset: 0px;
        --chat-swipe-info-width: 56px;
        --chat-swipe-archive-width: 74px;
        --chat-swipe-delete-width: 74px;
      }
      .chatSwipeActions{
        position: absolute;
        inset: 0 0 0 auto;
        width: calc(var(--chat-swipe-info-width) + var(--chat-swipe-archive-width) + var(--chat-swipe-delete-width));
        display: flex;
        justify-content: flex-end;
        align-items: stretch;
        pointer-events: none;
        z-index: 0;
      }
      .chatSwipeRow.isOpen .chatSwipeActions,
      .chatSwipeRow.isDragging .chatSwipeActions,
      .chatSwipeRow.isAnimating .chatSwipeActions{
        pointer-events: auto;
      }
      .chatSwipeContent{
        position: relative;
        z-index: 1;
        background: #fff;
        -webkit-clip-path: inset(0 var(--chat-swipe-offset, 0px) 0 0);
        clip-path: inset(0 var(--chat-swipe-offset, 0px) 0 0);
        transition: clip-path 200ms cubic-bezier(.22, 1, .36, 1), -webkit-clip-path 200ms cubic-bezier(.22, 1, .36, 1);
        will-change: clip-path;
        touch-action: pan-y;
      }
      .chatSwipeRow.isDragging .chatSwipeContent{ transition: none; }
      .chatSwipeRow .listItem.chatItem{
        margin: 0;
        border-bottom: 0;
      }
      .chatListEntry{
        display: block;
      }
      .chatSwipeAction{
        border: 0;
        color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 0 4px;
        font-size: 10px;
        font-weight: 760;
        line-height: 1.05;
        text-align: center;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
      }
      .chatSwipeAction:focus-visible{
        outline: none;
        box-shadow: inset 0 0 0 3px rgba(255,255,255,.35);
      }
      .chatSwipeAction:active{ filter: brightness(.96); }
      .chatSwipeAction.info{
        width: var(--chat-swipe-info-width);
        background: #798188;
      }
      .chatSwipeAction.archive{
        width: var(--chat-swipe-archive-width);
        background: #2aa062;
      }
      .chatSwipeAction.delete{
        width: var(--chat-swipe-delete-width);
        background: #d95a4e;
      }
      .chatSwipeActionIcon{
        width: 16px;
        height: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
      }
      .chatSwipeActionIcon svg{
        width: 16px;
        height: 16px;
        display: block;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .chatSwipeActionLabel{
        display: inline-block;
        max-width: 100%;
        white-space: nowrap;
        letter-spacing: -.01em;
        text-transform: none;
      }
      #roomsTab .roomSwipeRow{
        margin: 0 var(--pad-r) 8px var(--pad-l);
        border-radius: 18px;
      }
      #roomsTab .roomSwipeRow .chatSwipeActions{
        border-radius: 18px;
        overflow: hidden;
      }
      #roomsTab .roomSwipeRow .chatSwipeContent{
        border-radius: 18px;
        overflow: hidden;
      }
      #roomsTab .roomSwipeRow .roomsRow{
        margin: 0;
        width: 100%;
      }
      #roomsTab .roomSwipeRow .roomsOwnedManageCard{
        border-color: rgba(27,149,11,.10);
      }
      #roomsTab .roomSwipeRow.isDragging .roomsRow:active,
      #roomsTab .roomSwipeRow.isOpen .roomsRow:active{
        transform: none;
      }
      .chatAvatar{
        grid-column: 1;
        grid-row: 1 / span 2;
        width: 46px;
        height: 46px;
        border-radius: 999px;
        overflow: visible;
        display:flex;
        align-items:center;
        justify-content:center;
        background: linear-gradient(180deg, #f1f4f2, #e8edea);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.92);
      }
      .chatRow .chatName{
        grid-column: 2;
        grid-row: 1;
        font-size: 17px;
        font-weight: 750;
        line-height: 1.1;
        color: #0f172a;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        min-width: 0;
      }
      .chatRightTop{
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        align-self: center;
        display:flex;
        align-items:center;
        justify-content:flex-end;
        gap: 6px;
        font-size: 13px;
        color: #98a19c;
        font-weight: 700;
        white-space: nowrap;
      }
      .chatPreview{
        grid-column: 2;
        grid-row: 2;
        display:flex;
        align-items:center;
        gap: 7px;
        min-width: 0;
      }
      .chatRow .chatSnippet{
        font-size: 15px;
        font-weight: 500;
        color: #67716c;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        line-height: 1.2;
        min-width: 0;
      }
      .chatRow .chatTicks{
        font-size: 13px;
        color: #98a19c;
        font-weight: 800;
        flex: 0 0 auto;
      }
      .chatRow .chatTicks.green{ color: var(--hala-green); }
      .chatVoicePreview{
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
        overflow: hidden;
        max-width: 100%;
      }
      .chatVoiceIcon{
        width: 15px;
        height: 15px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #808884;
        flex: 0 0 auto;
      }
      .chatVoiceIcon svg{
        width: 15px;
        height: 15px;
        fill: currentColor;
      }
      .chatVoiceText{
        display: inline-flex;
        align-items: baseline;
        gap: 4px;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .chatVoiceLabel,
      .chatVoiceDuration{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .chatVoiceDuration{
        color: #7c8681;
        font-variant-numeric: tabular-nums;
      }
      .chatRightBottom{
        grid-column: 3;
        grid-row: 2;
        justify-self: end;
        align-self: center;
        display:flex;
        justify-content:flex-end;
        min-width: 22px;
      }
      .chatRow:active{
        background: rgba(17,24,39,.035);
      }
      .chatRow.isUnread .chatRightTop{ color: var(--brand-green); font-weight: 900; }
      .chatRow.isUnread .chatSnippet{ color: rgba(0,0,0,.85); font-weight: 800; }
      .chatRow.isUnread .chatVoiceIcon,
      .chatRow.isUnread .chatVoiceDuration{ color: rgba(17,17,17,.62); }
      .chatBadgeWrap,
      .chatBadges{
        display:flex;
        align-items:center;
        justify-content:flex-end;
        gap: 8px;
        min-height: 18px;
        width: 100%;
      }
      /* Blocked chats: keep visible but de-emphasized */
      .chatItem.blocked{
        opacity: .55;
        filter: grayscale(.15);
      }
      .chatItem.blocked .unreadBadge{ opacity: .55; }
      .chatItem.blocked .chatSnippet{ color: #6B7280; }

      /* Thread banner (inside chat) */
      .threadBanner{
        margin: 10px 12px 6px;
        padding: 10px 12px;
        border-radius: 14px;
        background: rgba(0,0,0,.05);
        color: #111;
        font-size: 13px;
        display:flex;
        align-items:center;
        justify-content: space-between;
        gap: 10px;
      }
      .threadBanner .threadBannerText{ color:#111; font-weight: 650; }
      .threadBanner .threadBannerBtn{
        border: 0;
        background: rgba(27,149,11,.14);
        color: #0b5c15;
        font-weight: 900;
        padding: 8px 10px;
        border-radius: 12px;
      }
      .threadBanner .threadBannerBtn:active{ background: rgba(27,149,11,.22); }
      /* Optional-safe: subtle divider under pinned AI row (no behavior change) */
      .chatItem.aiPinnedDivider{
        margin-bottom: 6px;
      }
      .unreadDot{
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: var(--wa-green);
        box-shadow: 0 0 0 2px rgba(255,255,255,.9);
      }
      .unreadBadge{
        min-width: 24px;
        height: 24px;
        padding: 0 8px;
        border-radius: 999px;
        background: var(--brand-green);
        color: #fff;
        font-weight: 800;
        font-size: 13px;
        line-height: 1;
        display:flex;
        align-items:center;
        justify-content:center;
        box-shadow: 0 2px 6px rgba(27,149,11,.14);
        flex-shrink: 0;
        letter-spacing: 0.01em;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
      }
      .unreadIndicatorSpacer{
        height: 16px;
        width: 16px;
        opacity: 0;
      }

      /* Chats: thumb-friendly rows + floating new-chat CTA */
      #chatsTab .listItem.chatItem{
        /* Row spacing handled by .chatRow; keep legacy class for behavior hooks */
        border-bottom: 0;
        background: #fff;
        position: relative;
      }
      #chatsTab .chatSwipeRow{
        background: #fff;
      }
      #chatsTab .chatRow{
        padding-left: calc(var(--chats-row-left-inset) + var(--safe-left));
      }
      #chatsTab .listItem.chatItem::after{
        /* Legacy divider; disabled when using .chatRowDivider nodes */
        content:"";
        display:none;
      }
      #chatsTab .listItem.chatItem:last-child::after{ display:none; }
      #chatsTab .listItem.chatItem:active,
      #chatsTab .listItem.chatItem.isPressed{ background: rgba(17,24,39,.035); }

      /* Divider line aligned after avatar (not full-width) */
      .chatRowDivider{
        margin-left: calc(var(--chat-pad-x) + var(--safe-left) + 46px + 18px);
        height: 0;
        border-bottom: 1px solid #eef2ef;
        pointer-events: none;
      }
      #chatsTab .chatRowDivider{
        margin-left: calc(var(--chats-row-left-inset) + var(--safe-left) + 46px + 18px);
      }

      /* Chats list should fill + scroll like a mobile chat app */
      #chatsList{
        flex: 1 1 auto;
        min-height: 0;
        overflow: visible;
        background: #fff;
        padding-bottom: calc(var(--page-body-pad-b) + var(--safe-bottom));
      }
      /* Center empty state vertically in list area (no extra CTA) */
      #chatsList.isEmpty{
        display:flex;
        flex-direction:column;
        justify-content:flex-start;
        align-items:stretch;
        /* Prevent a huge “dead band” below the card on tall screens. */
        padding-bottom: calc(16px + var(--safe-bottom));
      }
      #chatsList.isEmpty .listItem{
        border-bottom: 0;
        background: transparent;
      }
      #chatsTab .emptyInline{ padding: 12px var(--pad-r) 12px var(--pad-l); }
      .chatsEmpty{
        padding: 12px var(--pad-r) 12px var(--pad-l);
        text-align:center;
        max-width: 300px;
        color: var(--wa-muted);
      }
      .chatsEmptyIcon{
        width: var(--icon-btn-size);
        height: var(--icon-btn-size);
        margin: 0 auto 8px;
        border-radius: 999px;
        display:grid;
        place-items:center;
        background: rgba(15,23,42,0.035);
        border: 1px solid rgba(15,23,42,0.06);
      }
      .chatsEmptyIcon svg{ width: 22px; height: 22px; fill: rgba(15,23,42,0.45); }
      .chatsEmptyTitle{
        font-size: 14px;
        font-weight: 600;
        color: rgba(15,23,42,0.78);
        margin-bottom: 2px;
      }
      .chatsEmptySub{
        font-size: 13px;
        line-height: 1.35;
      }
      .chatsEmptyActions{
        margin-top: 14px;
        display:flex;
        flex-direction:column;
        gap: 10px;
        width: 100%;
      }

      /* Chats list: hide legacy archived lane row (chips handle it) */
      #chatsTab #archivedRow{ display:none !important; }

      /* Ask Spotchati: AI badge should be subtle + WhatsApp-like */
      #chatsTab .aiBadge{
        font-size: 12px;
        padding: 2px 7px;
        border-radius: 999px;
        background: rgba(17,24,39,.05);
        border: 1px solid rgba(17,24,39,.07);
        color: #7b8580;
        font-weight: 800;
        line-height: 1;
        margin-left: 0;
      }

      /* Chats: Search bottom sheet (lightweight WhatsApp-like search mode) */
      #chatSearchBackdrop{
        background: rgba(0,0,0,.45);
      }
      #chatSearchSheet.bottomSheet{
        padding-bottom: var(--safe-bottom);
        max-height: 92vh;
      }
      #chatSearchSheet .sheetHeader{
        padding: 10px 14px 12px;
        border-bottom: 1px solid var(--divider);
      }
      #chatSearchSheet .sheetPreview{ margin-top: 4px; }
      #chatSearchSheet #chatSearchWrap{
        margin-top: 10px;
        background: rgba(15,23,42,0.04);
        border-color: rgba(15,23,42,0.06);
        min-height: 42px;
        padding: 8px 10px;
        gap: 8px;
      }
      #chatSearchSheet #chatSearchWrap svg{ width:16px; height:16px; }
      #chatSearchSheet #chatSearchWrap:focus-within{
        background: var(--surface);
        border-color: var(--brand);
      }
      #chatSearchSheet .chatSearchContent{
        flex: 1 1 auto;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        background: var(--wa-app-bg);
      }
      #chatSearchSheet #chatSearchList.list{
        background: transparent;
        border: 0;
        border-radius: 0;
        overflow: visible;
      }
      #chatSearchSheet #chatSearchList{
        padding-bottom: 16px;
      }
      #chatSearchSheet #chatSearchList.isEmpty{
        display:flex;
        flex-direction:column;
        justify-content:center;
      }
      #chatSearchSheet #chatSearchList.isEmpty .listItem{
        border-bottom: 0;
        background: transparent;
      }
      #chatSearchSheet .listItem.chatItem{
        /* Row spacing handled by .chatRow (shared with Chats tab) */
        border-bottom: 0;
        background: var(--surface);
        position: relative;
      }
      #chatSearchSheet .listItem.chatItem::after{
        /* Legacy divider; disabled when using .chatRowDivider nodes */
        content:"";
        display:none;
      }
      #chatSearchSheet .listItem.chatItem:last-child::after{ display:none; }
      #chatSearchSheet .aiPinnedLane{
        position: static;
        top: auto;
        z-index: auto;
        padding: 0;
        background: transparent;
        margin: 0;
      }

      /* Shared sheet header helpers (used by search sheet, etc.) */
      .sheetTopRow{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
      }
      .sheetCloseBtn{
        width: var(--icon-btn-size);
        height: var(--icon-btn-size);
        border: 0;
        background: transparent;
        border-radius: 12px;
        cursor: pointer;
        color: var(--text);
        font-size: var(--icon-glyph-size-prominent);
        line-height: 1;
        flex: 0 0 auto;
      }
      .sheetCloseBtn:active{ background: rgba(0,0,0,.06); }
      .sheetCloseBtn:focus-visible{ outline: none; box-shadow: 0 0 0 3px var(--brandRing); }

      /* New chat picker (WhatsApp-style, scoped) */
      .newChatOverlay{
        /* Constrain overlay to the app frame (no desktop full-viewport stretch). */
        position: fixed;
        top: 0;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: min(100%, var(--app-max-w));
        z-index: 9999;
        background: rgba(0,0,0,.28);
        -webkit-tap-highlight-color: transparent;
        opacity: 0;
        pointer-events: none;
        transition: opacity 200ms ease;
      }
      @supports ((backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))){
        .newChatOverlay{
          backdrop-filter: blur(6px);
          -webkit-backdrop-filter: blur(6px);
        }
      }
      .newChatOverlay.show{
        opacity: 1;
        pointer-events: auto;
      }

      .newChatPanel{
        /* Panel is positioned within the constrained overlay; never exceed app frame. */
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: 100%;
        max-width: var(--app-max-w);
        background: #fff;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        height: auto;
        min-height: 0;
        max-height: min(72vh, 540px);
        max-height: min(72dvh, 540px);
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -12px 40px rgba(0,0,0,.22);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transform: translateY(18px);
        opacity: 0;
        transition: transform 200ms ease, opacity 200ms ease;
        will-change: transform, opacity;
      }
      .newChatOverlay.show .newChatPanel{
        transform: translateY(0);
        opacity: 1;
      }
      html.is-native-app.keyboard-open .newChatOverlay.show .newChatPanel{
        bottom: var(--kb, 0px);
        max-height: calc(var(--vvh, 100dvh) - 12px);
      }
      .newChatHandle{
        width: 42px;
        height: 5px;
        border-radius: 999px;
        background: rgba(60,60,67,.18);
        margin: 10px auto 2px;
      }

      .newChatHeader{
        padding: 10px 16px 6px;
      }
      .newChatCloseBtn{
        justify-self: start;
        min-width: 44px;
        min-height: 44px;
        padding: 0 10px;
        border: 0;
        background: transparent;
        color: var(--brand);
        font-weight: 800;
        border-radius: 12px;
        cursor: pointer;
      }
      .newChatCloseBtn:active{ background: rgba(0,0,0,.06); }
      .newChatCloseBtn:focus-visible{ outline: none; box-shadow: 0 0 0 3px var(--brandRing); }
      .newChatHeaderTitle{
        font-size: 18px;
        font-weight: 950;
        color: #0B0B0F;
        letter-spacing: -0.01em;
      }
      .newChatHeaderSub{
        margin-top: 4px;
        font-size: 12px;
        line-height: 1.35;
        color: rgba(60,60,67,.62);
        font-weight: 600;
      }

      .newChatSearchBar{
        box-sizing: border-box;
        background: #fff;
        padding: 0 16px 6px;
      }
      .newChatList{
        flex: 0 0 auto;
        min-height: 0;
        overflow: visible;
        background: #fff;
        padding: 0 16px 2px;
      }

      .newChatSearch{
        min-height: 46px;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0 14px;
        border-radius: 16px;
        background: #F2F2F7;
        border: 1px solid rgba(229,231,235,.95);
        transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
      }
      .newChatSearch:focus-within{
        background: #fff;
        border-color: rgba(77,182,89,.28);
        box-shadow: 0 0 0 2px rgba(77,182,89,.10);
      }
      .newChatSearch svg{
        width: 16px;
        height: 16px;
        fill: rgba(60,60,67,.6);
        flex: 0 0 auto;
      }
      .newChatSearch input{
        flex: 1 1 auto;
        min-height: 44px;
        border: 0;
        background: transparent;
        outline: none;
        appearance: none;
        -webkit-appearance: none;
        border-radius: 0;
        box-shadow: none;
        font-size: 15px;
        line-height: 1.2;
        color: #0B0B0F;
      }
      .newChatSearch input::placeholder{ color: rgba(60,60,67,.6); }
      .newChatIdError{
        min-height: 16px;
        margin-top: 4px;
        color: #B42318;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.35;
      }
      .newChatQuickActions{
        display:flex;
        align-items:center;
        gap:10px;
        padding: 0 16px 10px;
      }
      .newChatQuickBtn{
        min-height: 40px;
        padding: 0 14px;
        border-radius: 14px;
        border: 1px solid rgba(15,23,42,.1);
        background: #fff;
        color: #0B0B0F;
        font-size: 13px;
        font-weight: 800;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
      }
      .newChatQuickBtn svg{
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex: 0 0 auto;
      }
      .newChatQuickBtn.primary{
        color: var(--brand);
        border-color: rgba(77,182,89,.22);
        background: rgba(77,182,89,.08);
      }
      .newChatQuickBtn:active{
        transform: translateY(1px);
      }
      .newChatQrPanel{
        display:none;
        flex-direction: column;
        gap: 10px;
        padding: 0 16px calc(20px + env(safe-area-inset-bottom, 0px));
      }
      .newChatQrPanel.show{
        display:flex;
      }
      .newChatQrPanel.hasResolvedResult .newChatQrViewport,
      .newChatQrPanel.hasResolvedResult .newChatQrStatus{
        display:none;
      }
      .newChatQrPanel.isResolving .newChatQrEmptySub{
        display:none;
      }
      .newChatPanel.isQrMode{
        max-height: min(78vh, 600px);
        overflow-y: auto;
        overscroll-behavior: contain;
      }
      .newChatPanel.isQrMode .newChatQrPanel{
        flex: 0 0 auto;
        min-height: auto;
      }
      .newChatPanel.isQrMode .newChatList,
      .newChatPanel.isQrMode .newChatStartBtn{
        display:none;
      }
      .newChatQrViewport{
        position: relative;
        width: 100%;
        height: clamp(220px, 33vh, 286px);
        min-height: 220px;
        border-radius: 24px;
        overflow: hidden;
        background:
          radial-gradient(circle at 50% 12%, rgba(77,182,89,.18), rgba(77,182,89,0) 45%),
          linear-gradient(180deg, #091117 0%, #111827 100%);
        border: 1px solid rgba(15,23,42,.08);
        box-shadow:
          0 12px 28px rgba(15,23,42,.12),
          inset 0 0 0 1px rgba(255,255,255,.08);
      }
      .newChatQrViewport.isIdle{
        background:
          radial-gradient(circle at 50% 12%, rgba(77,182,89,.16), rgba(77,182,89,0) 46%),
          linear-gradient(180deg, #F7FCF7 0%, #EFF8EF 100%);
        box-shadow: inset 0 0 0 1px rgba(77,182,89,.12);
      }
      .newChatQrVideo{
        width: 100%;
        height: 100%;
        object-fit: cover;
        display:block;
        opacity: 1;
        transition: opacity 160ms ease;
        background: #0b1120;
      }
      .newChatQrViewport.isIdle .newChatQrVideo{
        opacity: 0;
        pointer-events: none;
      }
      .newChatQrFrame{
        position: absolute;
        inset: 50%;
        width: min(62vw, 210px);
        height: min(62vw, 210px);
        max-width: 68%;
        max-height: 68%;
        transform: translate(-50%, -50%);
        border-radius: 26px;
        box-shadow:
          0 0 0 9999px rgba(0,0,0,.28),
          0 0 0 1px rgba(255,255,255,.18) inset;
        pointer-events: none;
      }
      .newChatQrFrame::before,
      .newChatQrFrame::after{
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
      }
      .newChatQrFrame::before{
        box-shadow: inset 0 0 0 2px rgba(255,255,255,.22);
      }
      .newChatQrFrame::after{
        inset: 12px;
        border-radius: 18px;
        border: 1px dashed rgba(255,255,255,.42);
      }
      .newChatQrViewport.isIdle .newChatQrFrame{
        box-shadow:
          0 0 0 9999px rgba(255,255,255,.1),
          0 0 0 1px rgba(77,182,89,.16) inset;
      }
      .newChatQrViewport.isIdle .newChatQrFrame::before{
        box-shadow: inset 0 0 0 2px rgba(77,182,89,.22);
      }
      .newChatQrViewport.isIdle .newChatQrFrame::after{
        border-color: rgba(77,182,89,.26);
      }
      .newChatQrEmpty{
        position:absolute;
        inset: 0;
        display:none;
        padding: 26px;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: #1F2937;
      }
      .newChatQrViewport.isIdle .newChatQrEmpty{
        display:flex;
      }
      .newChatQrEmptyInner{
        max-width: 270px;
      }
      .newChatQrEmptyIcon{
        width: 60px;
        height: 60px;
        border-radius: 20px;
        margin: 0 auto 14px;
        display:flex;
        align-items:center;
        justify-content:center;
        background: rgba(77,182,89,.12);
        color: var(--brand);
      }
      .newChatQrEmptyIcon svg{
        width: 28px;
        height: 28px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .newChatQrEmptyTitle{
        font-size: 18px;
        font-weight: 900;
        color: #0B0B0F;
      }
      .newChatQrEmptySub{
        margin-top: 8px;
        font-size: 13px;
        line-height: 1.45;
        color: rgba(60,60,67,.72);
      }
      .newChatQrStatus{
        min-height: 18px;
        font-size: 12px;
        line-height: 1.45;
        font-weight: 700;
        color: rgba(60,60,67,.72);
      }
      .newChatQrStatus.isError{
        color: #B42318;
      }
      .newChatQrStatus.isSuccess{
        color: var(--brand);
      }
      .newChatQrResult{
        display:none;
      }
      .newChatQrResult.show{
        display:block;
      }
      .newChatQrResultCard{
        background: linear-gradient(180deg, rgba(248,250,252,.98), rgba(255,255,255,.98));
        border: 1px solid rgba(15,23,42,.08);
        border-radius: 22px;
        padding: 16px;
        box-shadow: 0 16px 40px rgba(15,23,42,.08);
      }
      .newChatQrResultHead{
        display:flex;
        align-items:center;
        gap: 12px;
      }
      .newChatQrAvatar{
        width: 56px;
        height: 56px;
        border-radius: 999px;
        flex: 0 0 auto;
      }
      .newChatQrMeta{
        min-width: 0;
        flex: 1 1 auto;
      }
      .newChatQrResultLabel{
        font-size: 11px;
        font-weight: 900;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: rgba(77,182,89,.86);
      }
      .newChatQrResultName{
        margin-top: 4px;
        font-size: 18px;
        font-weight: 900;
        color: #0B0B0F;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .newChatQrResultSub{
        margin-top: 4px;
        font-size: 13px;
        line-height: 1.45;
        color: rgba(60,60,67,.74);
      }
      .newChatQrResultBadge{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        min-height: 26px;
        padding: 0 10px;
        border-radius: 999px;
        background: rgba(77,182,89,.10);
        color: var(--brand);
        font-size: 11px;
        font-weight: 900;
        white-space: nowrap;
      }
      .newChatQrResultButtons{
        display:grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 14px;
      }
      .newChatQrResultButtons.single{
        grid-template-columns: minmax(0, 1fr);
      }
      .newChatQrResultBtn{
        min-height: 46px;
        border-radius: 16px;
        border: 1px solid rgba(15,23,42,.12);
        background: #fff;
        color: #0B0B0F;
        font-size: 14px;
        font-weight: 800;
        cursor: pointer;
      }
      .newChatQrResultBtn.primary{
        border-color: var(--brand);
        background: var(--brand);
        color: #fff;
      }
      .newChatQrResultBtn:active{
        transform: translateY(1px);
      }

      .newChatIdRow{
        width: 100%;
        min-height: 44px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap: 10px;
        padding: 10px 14px;
        border: 0;
        background: #fff;
        text-align: left;
        cursor: pointer;
        color: rgba(60,60,67,.85);
        font-size: 14px;
        font-weight: 800;
      }
      .newChatIdRow:active{ background: #F2F2F7; }
      .newChatIdRow span{ color: var(--brand); font-weight: 950; }

      .newChatStartBtn{
        align-self: stretch;
        width: auto;
        min-height: 50px;
        padding: 14px 16px;
        margin: 6px 16px 16px;
        border-radius: 16px;
        font-weight: 700;
        font-size: 15px;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        color: #fff;
        box-sizing: border-box;
        overflow: visible;
        text-align: center;
      }
      .newChatStartBtn:disabled{
        background: #D4E4C8;
        color: rgba(255,255,255,.96);
        opacity: 1;
      }

      .newChatRows{
        padding-bottom: 0;
      }
      .newChatRow{
        width: 100%;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
        min-height: 70px;
        border: 0;
        background: #fff;
        text-align: left;
        cursor: pointer;
        position: relative;
      }
      .newChatRow:active,
      .newChatRow.isPressed{
        background: #F2F2F7;
      }
      .newChatRow::after{
        content:"";
        position:absolute;
        left: calc(12px + 48px + 12px);
        right: 0;
        bottom: 0;
        height: 1px;
        background: #E9E9EC;
      }
      .newChatRow:last-child::after{ display:none; }
      .newChatRow:focus-visible{ outline: none; box-shadow: inset 0 0 0 3px var(--brandRing); border-radius: 14px; }
      .newChatIdResults{
        padding: 0;
      }
      .newChatIdResults .newChatRow{
        border-radius: 16px;
        border: 1px solid #E9E9EC;
      }
      .newChatIdResults .newChatRow::after{ display:none; }
      .newChatPreviewCard{
        margin-top: 2px;
        box-shadow: 0 8px 20px rgba(16,24,40,.04);
      }
      .newChatRowMeta{
        flex: 0 0 auto;
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        font-weight: 700;
        color: rgba(60,60,67,.55);
        white-space: nowrap;
      }
      .newChatRowChevron{
        font-size: 14px;
        line-height: 1;
      }
      .newChatAvatar{
        width: var(--icon-btn-size);
        height: var(--icon-btn-size);
        border-radius: 999px;
        flex: 0 0 auto;
      }
      .newChatText{
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
      }
      .newChatName{
        font-size: 16px;
        font-weight: 900;
        color: #0B0B0F;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .newChatSub{
        font-size: 13px;
        color: rgba(60,60,67,.6);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .newChatPreviewBadge{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 24px;
        padding: 0 9px;
        border-radius: 999px;
        background: rgba(77, 182, 89, .08);
        color: var(--brand);
        font-size: 11px;
        font-weight: 900;
        white-space: nowrap;
      }

      /* New chat: numeric ID dialog (small, centered) */
      .newChatIdDialog{
        position: absolute;
        inset: 0;
        display:flex;
        align-items:center;
        justify-content:center;
        padding: 18px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 160ms ease;
      }
      .newChatIdDialog.show{
        opacity: 1;
        pointer-events: auto;
      }
      .newChatIdCard{
        width: min(420px, 100%);
        border-radius: 16px;
        background: #fff;
        box-shadow: var(--shadowMd);
        border: 1px solid rgba(0,0,0,.06);
        padding: 14px;
      }
      .newChatIdTitle{
        font-size: 16px;
        font-weight: 950;
        color: #0B0B0F;
        margin-bottom: 10px;
      }
      .newChatIdHint{
        color: rgba(60,60,67,.62);
        font-size: 13px;
        margin-top: -6px;
        margin-bottom: 10px;
      }
      .newChatIdActions{
        margin-top: 12px;
        display:flex;
        justify-content:flex-end;
        gap: 10px;
      }
      .newChatIdBtn{
        min-height: 44px;
        padding: 0 14px;
        border-radius: 12px;
        border: 0;
        background: #F2F2F7;
        color: #0B0B0F;
        font-weight: 900;
        cursor: pointer;
      }
      .newChatIdBtn:active{ opacity: .92; }
      .newChatIdBtn.primary{
        background: var(--brand);
        color: #fff;
      }

      /* Full-screen fallback on very small heights */
      @media (max-height: 650px){
        .newChatPanel{
          top: 0;
          bottom: 0;
          height: 100dvh;
          max-height: 100dvh;
          border-radius: 0;
          padding-top: env(safe-area-inset-top, 0px);
        }
        .newChatPanel.isQrMode{
          max-height: 100dvh;
        }
        .newChatPanel.isQrMode .newChatQrViewport{
          height: min(30vh, 238px);
          min-height: 190px;
        }
      }
      @media (max-width: 430px){
        .newChatPanel.isQrMode .newChatQrViewport{
          height: min(31vh, 250px);
          min-height: 200px;
          border-radius: 22px;
        }
        .newChatQrPanel{
          gap: 9px;
          padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
        }
        .newChatQrStatus{
          min-height: 16px;
        }
      }

      /* Skeleton rows (loading state) */
      .newChatSkeletonRow{
        display:flex;
        align-items:center;
        gap: 12px;
        padding: 12px 12px;
        min-height: 68px;
        position: relative;
        background: #fff;
      }
      .newChatSkeletonRow::after{
        content:"";
        position:absolute;
        left: calc(12px + 48px + 12px);
        right: 0;
        bottom: 0;
        height: 1px;
        background: #E9E9EC;
      }
      .newChatSkeletonRow:last-child::after{ display:none; }
      .newChatSkAvatar{
        width: 48px;
        height: 48px;
        border-radius: 999px;
      }
      .newChatSkText{
        flex: 1 1 auto;
        min-width: 0;
        display:flex;
        flex-direction:column;
        gap: 8px;
      }
      .newChatSkLine{
        height: 12px;
        border-radius: 999px;
        width: 62%;
      }
      .newChatSkLine.small{
        height: 10px;
        width: 42%;
      }
      .newChatSkAvatar,
      .newChatSkLine{
        background: linear-gradient(90deg, rgba(15,23,42,.06) 0%, rgba(15,23,42,.10) 50%, rgba(15,23,42,.06) 100%);
        background-size: 240% 100%;
        animation: newChatShimmer 1100ms ease-in-out infinite;
      }
      @keyframes newChatShimmer{
        0%{ background-position: 0% 0%; }
        100%{ background-position: 200% 0%; }
      }
      @media (prefers-reduced-motion: reduce){
        .newChatOverlay,
        .newChatPanel{
          transition: none !important;
        }
        .newChatSkAvatar,
        .newChatSkLine{
          animation: none !important;
          background: rgba(15,23,42,.08) !important;
        }
      }

      .avatar{
        width:40px; height:40px;
        border-radius: 999px;
        background: #DFE5E7;
        color: #54656f;
        display:flex;
        align-items:center;
        justify-content:center;
        font-weight: 900;
        border: 0;
        flex:0 0 auto;
        position: relative;
        overflow: visible;
      }
      .avatar img{
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
        object-fit:cover;
        border-radius: 999px;
        overflow: hidden;
        display:block;
		opacity: 0;
        z-index: 2;
      }
      .avatarLetter{ position:relative; z-index:1; }
      .avatar.hasPhoto img{ opacity: 1; }
      .hasPhoto .avatarLetter{ display: none; }
      /* Step 10: Nearby rows use `.nearbyAvatar` (same avatar loader) */
      .nearbyAvatar img{ display:block; opacity: 0; z-index: 2; border-radius: 999px; }
      .nearbyAvatar.hasPhoto img{ opacity: 1; }
      .presenceDot{
        position:absolute;
        right:-1px;
        bottom:-1px;
        width: 12px;
        height: 12px;
        background: var(--wa-green-2, #25D366);
        border: 2px solid #fff;
        border-radius: 999px;
        display:none;
		z-index: 5;
      }
      .nearbyAvatar .presenceDot{
        width: 12px;
        height: 12px;
        border: 2px solid #fff;
        background: var(--wa-green-2, #25D366);
      }
      .avatar.online .presenceDot{ display:block; }
      .nearbyAvatar.online .presenceDot{ display:block; }

      .liBody{ flex:1; min-width:0; }
      .liTop{
        display:grid;
        grid-template-columns: 1fr auto;
        align-items:flex-start;
        gap:10px;
        min-width: 0;
      }

      .liName{
        font-weight: 800;
        font-size: 15px;
        min-width: 0;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
      }
	      .liNameWrap{
        display:flex;
        align-items:center;
        gap:6px;
        min-width:0;
      }
      .liNameWrap .liName{ flex:1; min-width:0; }
      .aiBadge{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        font-size: 12px;
        padding: 2px 7px;
        border-radius: 999px;
        background: rgba(60,60,67,.12);
        border: 1px solid rgba(60,60,67,.16);
        color: rgba(0,0,0,.78);
        font-weight: 700;
        line-height: 1;
        flex: 0 0 auto;
      }

      .liTimeRow{
        display:flex;
        align-items:center;
        justify-content:flex-end;
        gap:6px;
      }

      .liMetaCol{
        display:flex;
        flex-direction:column;
        align-items:flex-end;
        gap:2px;
        flex:0 0 auto;
        /* Slight inset so the time isn't glued to the screen edge (keep right-aligned). */
        padding-right: 4px;
      }
      .liTime{
        color: var(--wa-muted);
        font-size: 12px;
        white-space:nowrap;
		opacity: .9;
      }

      /* Unread chats: WhatsApp-like emphasis */
      .chatRow.isUnread .chatName{ font-weight: 800; }
      .chatRow:not(.isUnread):not(.archived) .chatName{ font-weight: 600; }
      .chatRow.isUnread .chatTime{ color: var(--brand-green); font-weight: 900; }
      .chatRow.isUnread .chatSnippet{ font-weight: 800; color: rgba(0,0,0,.85); }
      .chatRow:not(.isUnread) .chatSnippet{ color: var(--chat-muted); font-weight: var(--chat-snippet-weight); }
      .chatRow .chatTime{ font-weight: 700; color: var(--chat-muted2); }
      /* Archived chats: muted; never show unread emphasis in the list */
      .chatItem.archived{ opacity: .58; }
      .chatItem.archived .liName{ font-weight: 500; }
      .chatItem.archived .chatSnippet{ color: var(--wa-muted); font-weight: 400; }
      .chatItem.archived .chatTime{ color: var(--wa-muted); font-weight: 400; }

      .presenceTxt{
        font-size: 11px;
        white-space:nowrap;
        color: var(--wa-muted);
      }
      .presenceTxt.online{
        color: var(--wa-muted);
        font-weight: 600;
      }

      .liBottom{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
        margin-top: 2px;
        min-width: 0;
      }
      .liLast{
        color: var(--wa-muted);
        font-weight: 400;
        min-width: 0;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
      }
	      /* Chat list ticks (WhatsApp-style):
         - outgoing only
         - ✓ (muted gray) for sent
         - ✓✓ (muted gray) for delivered
         - ✓✓ (read-receipt blue) for read
        */
      .liLast .ticks{
        color: var(--wa-muted2);
        opacity: 1;
        display:inline-block;
        margin-right: 4px;
        /* Keep single-check sent state readable; double checks tighten via .double */
        letter-spacing: 0;
        font-weight: 700;
        font-size: 14px;
      }
      .liLast .ticks.double{ letter-spacing: -1.35px; }
      /* Chats list: read receipts show WhatsApp-like blue. */
      .liLast .ticks.green{ color: var(--wa-read-blue); }

      .badge{
        min-width: 22px;
        padding: 3px 7px;
        border-radius: 999px;
        background: var(--surface2);
        color: var(--text);
        font-weight: 700;
        font-size: 12px;
        text-align:center;
        white-space:nowrap;
      }

      /* Archived row */
      .archRow{
        --chat-row-pad-h: 14px;
        --chat-right-col: 72px;
        background: var(--surface);
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 12px calc(var(--chat-row-pad-h) + var(--safe-right)) 12px calc(var(--chat-row-pad-h) + var(--safe-left));
        border-bottom: 1px solid var(--divider);
        display:none;
        align-items:center;
        gap:12px;
        cursor:pointer;
        margin-bottom: 0;
        min-height: 72px;
      }
      .archRow:active{ background: var(--surface2); }
      .archIcon{
        width:48px; height:48px;
        border-radius: 12px;
        background: rgba(60,60,67,.12);
        border: 0;
        display:flex;
        align-items:center;
        justify-content:center;
        flex:0 0 48px;
      }
      .archIcon svg{ width:22px; height:22px; fill:#54656f; }
      .archText{ flex:1; min-width:0; }
      .archRight{
        flex: 0 0 var(--chat-right-col);
        min-width: var(--chat-right-col);
        display:flex;
        align-items:center;
        justify-content:flex-end;
        text-align:right;
      }
      .archTitle{
        font-weight: 800;
        font-size: 16px;
        color: rgba(0,0,0,.92);
      }
      .archSub{ color: var(--wa-muted); font-size: 13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

      /* Toast */
      .toast{
        position:absolute;
        left:50%;
        transform: translateX(-50%);
        bottom: calc(var(--toast-bottom-offset, 14px) + env(safe-area-inset-bottom, 0px));
        background: rgba(17,24,39,.92);
        color:#fff;
        padding: 11px 16px;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 900;
        display:none;
        z-index: 240;
        max-width: 90%;
        text-align:center;
        box-shadow: 0 10px 28px rgba(15,23,42,.24);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
      }
      .toast.show{ display:block; }

      /* Chat overlay — constrained to app frame (absolute), not viewport (fixed) */
      .chatOverlay{
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        background: var(--wa-bg);
        z-index: 55;
        display: none;
        flex-direction: column;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        /* Critical: allow the message list to size + scroll inside flex layout */
        min-height: 0;
        overflow: visible;
        isolation: isolate;
      }
      html.is-native-app .chatOverlay{
        padding-bottom: 0;
      }
      html.is-native-app.keyboard-open .chatOverlay{
        padding-bottom: var(--kb, 0px);
      }
      .chatOverlay.show{ display:flex; }

      /* Chats: mobile-first single-pane inside the app shell (WhatsApp mobile UX) */
      .chatsDesktopWrap{
        display:flex;
        flex-direction:column;
        flex:1 1 auto;
        min-height:0;
        overflow:hidden;
      }

      /* List always fills the app frame */
      #chatsTab{
        flex:1 1 auto;
        width:100%;
        max-width:100%;
        min-height:0;
      }

      /*
        CRITICAL FIX:
        The right pane MUST NOT exist in layout by default (prevents "Select a chat…" stealing width)
        It will ONLY appear when a chat is open (overlay), or when the APP FRAME is truly wide (container query).
      */
      .chatsDesktopRight{
        display: none;
        position: absolute;
        inset: 0;
        background: #fff;
        z-index: 55;
        min-width: 0;
        overflow: hidden;
      }
      .chatsDesktopRight.hasChat{
        display: flex;
      }

      /* Hide placeholder when a chat is open */
      .chatsDesktopRight.hasChat .chatsDesktopPlaceholder{
        display:none;
      }

      /* Chat overlay inside right pane: fill the app frame, not the viewport */
      .chatsDesktopRight .chatOverlay{
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
        box-shadow: none;
        display: none;
        flex-direction: column;
        background: var(--wa-bg);
      }
      .chatsDesktopRight .chatOverlay.show{ display:flex; }

      .chatsDesktopRight .chatOverlay .chatHeader{
        position:sticky;
        top:0;
        z-index:2;
        background:var(--wa-surface);
        padding-top:env(safe-area-inset-top);
      }
      .chatsDesktopRight .chatOverlay .chatBody{
        flex:1 1 auto;
        overflow:auto;
        -webkit-overflow-scrolling:touch;
      }
      .chatsDesktopRight .chatOverlay .chatComposer{
        position:sticky;
        bottom:0;
        background:var(--wa-surface);
        padding-bottom:env(safe-area-inset-bottom);
        z-index:2;
      }

      /* Optional split-view: ONLY when the APP FRAME itself is wide enough (NOT the browser viewport) */
      @container (min-width: 900px){
        .chatsDesktopWrap{
          flex-direction:row;
        }
        #chatsTab{
          flex:0 0 360px;
          width:auto;
          max-width:none;
          border-right:1px solid var(--wa-divider);
        }
        .chatsDesktopRight{
          display:flex;
          position:relative;
          inset:auto;
          z-index:auto;
          flex:1 1 auto;
          overflow:hidden;
          background:var(--wa-bg);
        }
        .chatsDesktopRight .chatsDesktopPlaceholder{
          display:flex;
          align-items:center;
          justify-content:center;
          padding:24px;
          color:var(--wa-muted);
          font-size:14px;
          text-align:center;
        }
        .chatsDesktopRight.hasChat .chatsDesktopPlaceholder{
          display:none;
        }
        .chatsDesktopRight .chatOverlay{
          position:relative;
          top:auto;
          left:auto;
          right:auto;
          height:100%;
        }
      }

      /* Peer profile overlay */
      .profileOverlay{
        position:absolute;
        inset:0;
        background: var(--bg);
        display:none;
        flex-direction:column;
        z-index: 140;
      }
      #blockedOverlay{
        z-index: 175;
        background: #f6f7f9;
      }
      #blockedOverlay .chatBar{
        background: #fff;
        border-bottom: 1px solid rgba(15,23,42,.06);
      }
      #blockedOverlay .profileBody{
        padding: 14px 14px calc(18px + env(safe-area-inset-bottom, 0px));
        display:flex;
        flex-direction:column;
        gap: 12px;
      }
      #blockedOverlay .blockedUsersSummary{
        background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,250,251,.96));
        border: 1px solid rgba(15,23,42,.06);
        border-radius: 20px;
        padding: 14px 16px;
        box-shadow: 0 8px 24px rgba(15,23,42,.05);
      }
      #blockedOverlay .blockedUsersSummaryTitle{
        font-size: 15px;
        font-weight: 850;
        color: #111827;
        line-height: 1.2;
      }
      #blockedOverlay .blockedUsersSummarySub{
        margin-top: 4px;
        font-size: 13px;
        line-height: 1.35;
        color: #6B7280;
      }
      #blockedOverlay .blockedUsersList{
        background: #fff;
        border: 1px solid rgba(15,23,42,.06);
        border-radius: 22px;
        overflow: hidden;
        box-shadow: 0 10px 28px rgba(15,23,42,.05);
      }
      #blockedOverlay .blockedUserRow{
        display:flex;
        align-items:center;
        gap: 12px;
        padding: 14px 16px;
        background: #fff;
      }
      #blockedOverlay .blockedUserRow + .blockedUserRow{
        border-top: 1px solid rgba(15,23,42,.06);
      }
      #blockedOverlay .blockedUserAvatar{
        width: 44px;
        height: 44px;
        border-radius: 999px;
        background: rgba(15,23,42,.06);
        display:flex;
        align-items:center;
        justify-content:center;
        overflow:hidden;
        color: #111827;
        font-weight: 900;
        flex: 0 0 auto;
      }
      #blockedOverlay .blockedUserMeta{
        flex: 1;
        min-width: 0;
      }
      #blockedOverlay .blockedUserName{
        font-size: 15px;
        line-height: 1.2;
        font-weight: 850;
        color: #111827;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      #blockedOverlay .blockedUserSub{
        margin-top: 4px;
        font-size: 12px;
        line-height: 1.3;
        color: #6B7280;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      #blockedOverlay .blockedUserAction{
        min-width: 96px;
        min-height: 40px;
        border-radius: 999px;
        border: 1px solid rgba(15,23,42,.08);
        background: #fff;
        color: #111827;
        font-size: 13px;
        font-weight: 800;
        padding: 0 14px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        flex: 0 0 auto;
      }
      #blockedOverlay .blockedUserAction:disabled{
        opacity: .68;
      }
      #blockedOverlay .blockedUserAction.isPending{
        color: #6B7280;
      }
      #blockedOverlay .blockedUsersEmpty{
        background: #fff;
        border: 1px solid rgba(15,23,42,.06);
        border-radius: 22px;
        padding: 18px 16px;
      }
      .profileOverlay.show{ display:flex; }
      .profileOverlay .card{
        background: transparent;
        border: 0;
        padding: 0;
      }
	      .profileBody{
	        flex:1;
	        overflow:auto;
	        padding: 10px 14px 14px;
	      }
	      .profileLayoutCompact .profileBody{
	        padding: 12px 14px calc(24px + env(safe-area-inset-bottom, 0px));
	        background:
	          linear-gradient(180deg, rgba(255,255,255,.74), rgba(242,242,247,0) 120px),
	          var(--bg);
	      }
	      .profileLayoutCompact #profileContent{
	        display:flex;
	        flex-direction:column;
	        gap: 10px;
	      }
	      .profileBig{
	        display:flex;
	        flex-direction:column;
	        align-items:center;
	        gap: 4px;
      }
      .profileBigAvatar{
        width: 72px;
        height: 72px;
        border-radius: 999px;
        background:
          radial-gradient(120px 90px at 30% 35%, var(--accent-soft), transparent 62%),
          linear-gradient(180deg, rgba(148,163,184,.12), rgba(148,163,184,.06));
        border:1px solid var(--divider);
        display:flex;
        align-items:center;
        justify-content:center;
        font-weight: 900;
        color: var(--text);
        overflow:hidden;
		position: relative;
        box-shadow: var(--shadowSm);
      }
      .profileBigAvatar img{
		position:absolute;
        inset:0;
        width:100%;
        height:100%;
        object-fit:cover;
        border-radius:999px;
        display:block;
		opacity: 0;
        transition: opacity .16s ease;
      }
	  .profileBigAvatar.hasPhoto img{ opacity: 1; }
      .profileBigName{
        font-weight: 700;
        font-size: 22px;
        line-height: 1.2;
        text-align:center;
      }
	      .profileInfoCard{
	        width:100%;
	        background: var(--surface);
	        border:1px solid rgba(15,23,42,0.08);
	        border-radius: var(--radius);
	        padding: 8px 12px;
	        margin-top: 6px;
	      }
	      .profileLayoutCompact .profileInfoCard{
	        margin-top: 0;
	        border-radius: 22px;
	        border-color: rgba(60,60,67,.10);
	        box-shadow: 0 1px 1px rgba(0,0,0,.04);
	      }
	      .profileHeaderCard{
	        margin-top: 0;
	        padding: 14px 14px 12px;
	      }
	      .profileLayoutCompact .profileHeaderCard{
	        padding: 18px 16px 16px;
	      }
	      .profileLayoutCompact .profileHeaderCard .profileBig{
	        gap: 5px;
	      }
	      .profileLayoutCompact .profileHeaderCard .profileBigAvatar{
	        width: 82px;
	        height: 82px;
	        border-color: rgba(60,60,67,.14);
	        box-shadow: 0 8px 22px rgba(15,23,42,.08);
	      }
	      .profileLayoutCompact .profileHeaderCard .profileBigName{
	        margin-top: 2px;
	        font-size: 22px;
	        font-weight: 850;
	        letter-spacing: -.02em;
	      }
      .profileHeaderMeta{
        width:100%;
        margin-top: 2px;
        display:flex;
        flex-direction:column;
        gap: 8px;
        align-items: center;
      }
      .profileLastSeenInline{
        font-size: 14px;
        font-weight: 500;
        color: rgba(0,0,0,0.55);
        text-align:center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .profileHalaRow{
        align-items:center;
        align-self: center;
        width: auto;
        max-width: 100%;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
      }
      .profileHalaIdValue{
        font-weight: 700;
        font-variant-numeric: tabular-nums;
      }
      .profileHalaMeta{
        display:flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
        max-width: 100%;
        white-space: nowrap;
        line-height: 1.2;
      }
      .profileHalaMeta .profileInfoLabel{
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .01em;
        text-transform: none;
        color: rgba(0,0,0,0.42);
      }
      .profileHalaMeta .profileInfoLabel::after{ content: ""; }
      .profileHalaMeta .profileInfoValue{
        width: auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 24px;
        padding: 0 10px;
        border-radius: 999px;
        border: 1px solid rgba(76,175,80,.18);
        background: linear-gradient(180deg, rgba(250,252,251,.98), rgba(244,248,245,.94));
        box-shadow: inset 0 1px 0 rgba(255,255,255,.96);
        font-size: 14px;
        font-weight: 800;
        color: #111827;
      }
      .profileInfoCompact{
        padding: 4px 14px;
      }
      .profileGalleryGrid{
        display:grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
      }
      .profileGalleryTile{
        position: relative;
        width: 100%;
        aspect-ratio: 1 / 1;
        border: 1px solid rgba(15,23,42,.08);
        border-radius: 16px;
        overflow: hidden;
        background: linear-gradient(180deg, rgba(248,250,252,.96), rgba(241,245,249,.92));
        padding: 0;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
      }
      .profileGalleryTile img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      .profileGalleryTile:active{
        transform: scale(.985);
      }
      .profileGalleryTile:focus-visible{
        outline: none;
        box-shadow: 0 0 0 3px var(--brandRing);
      }
      .profileAboutRow{
        gap: 6px;
      }
      .profileAboutRow .profileInfoLabel,
      .profileSecondaryRow .profileInfoLabel{
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .04em;
        text-transform: uppercase;
      }
      .profileAboutRow .profileInfoValue{
        font-size: 17px;
        font-weight: 600;
        line-height: 1.45;
        color: #111827;
      }
      .profileSecondaryRow .profileInfoValue{
        font-size: 15px;
        font-weight: 600;
        color: rgba(17,24,39,.88);
      }
      .profileDangerZone{
        width:100%;
        background: var(--surface);
        border:1px solid var(--divider);
        border-radius: var(--radius);
        padding: 12px 14px;
        margin-top: 10px;
      }
      .profileDangerZoneTitle{
        color: var(--muted);
        font-size: 12px;
        font-weight: 900;
        letter-spacing: .04em;
      }
      .profileSectionTitle{
        color: var(--muted);
        font-size: 12px;
        font-weight: 900;
        letter-spacing: .04em;
        margin-bottom: 4px;
      }
      .profileChatActionBtn{
        margin-top: 0;
        border: 0;
        background: transparent;
        padding: 12px 0;
        width: 100%;
        text-align: left;
        font-size: 15px;
        font-weight: 600;
        color: var(--text);
        cursor: pointer;
        line-height: 1.25;
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        justify-content:center;
        min-height: 44px;
        gap: 2px;
      }
      .profileChatActionBtn:active{ opacity: .7; }
      .profileChatActionBtn:focus-visible{
        outline: none;
        border-radius: 10px;
        box-shadow: 0 0 0 3px var(--brandRing);
      }
      .profileChatActionBtn:disabled{
        opacity: .5;
        cursor: default;
      }
      .profileInfoRow{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:2px;
        padding: 8px 0;
      }
      .profileInfoRow.hasAction{
        flex-direction:row;
        align-items:center;
        justify-content:space-between;
        gap: 8px;
        width: 100%;
      }
      .profileInfoRow + .profileInfoRow{
        border-top: 1px solid rgba(15,23,42,0.06);
      }
      .profileInfoRow.profileHalaRow{
        padding: 2px 0 2px;
      }
      .profileInfoLabel{
        color: var(--muted);
        font-size: 12px;
        font-weight: 600;
      }
      .profileHalaMeta .profileInfoLabel::after{ content: ":"; }
      .profileInfoValue{
        font-size: 16px;
        font-weight: 500;
        color: var(--text);
        text-align: left;
        width:100%;
        line-height: 1.3;
      }
      .profileWorkValue{
        display:flex;
        align-items:center;
        gap: 8px;
        flex-wrap: wrap;
        row-gap: 6px;
      }
      .profileWorkStatus{
        margin-left: 0;
      }
      .workBadge{
        display: inline-flex;
        align-items: center;
        min-height: 24px;
        padding: 0 8px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 700;
        color: var(--success);
        background: var(--accent-soft);
        border: 1px solid var(--accent-border);
        line-height: 1.2;
      }
      .workStatusMuted{
        color: var(--muted);
        font-size: 12px;
        font-weight: 600;
      }
      .profileInfoAction{
        width: 36px;
        height: 36px;
        padding: 0;
        border: 0;
        background: transparent;
        position: relative;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        cursor:pointer;
        color: var(--text);
        transition: background-color 140ms ease, box-shadow 160ms ease, transform 80ms ease;
      }
      .profileInfoAction::before{
        content:"";
        position:absolute;
        width: 30px;
        height: 30px;
        border-radius: 8px;
        border: 1px solid var(--divider);
        background: var(--surface);
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
      .profileInfoAction svg{
        width: 15px;
        height: 15px;
        fill: currentColor;
        position: relative;
        z-index: 1;
      }
      .profileInfoAction:active{ transform: translateY(1px); }
      .profileInfoAction:active::before{ background: rgba(15,23,42,0.06); }
      .profileInfoAction:focus-visible{
        outline: none;
      }
      .profileInfoAction:focus-visible::before{
        box-shadow: 0 0 0 3px var(--brandRing);
      }
      .profileLine{
        width:100%;
        background: var(--surface);
        border:1px solid var(--divider);
        border-radius: var(--radius);
        padding: 10px;
        margin-top: 8px;
      }
      .profileLine .k{ color: var(--muted); font-size: 12px; font-weight:900; letter-spacing: .06em; }
      .profileLine .v{ margin-top:4px; font-size: 15px; font-weight: 750; color: var(--text); white-space:pre-wrap; }
	      .profileActions{
	        margin-top: 2px;
	        width:100%;
	        display:grid;
	        grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
	        gap:4px;
	      }
	      .profileLayoutCompact .profileActions{
	        margin-top: 0;
	        gap: 8px;
	      }
	      .profileActionsCompact{
	        grid-template-columns: 1fr;
	      }
      .profileActions + .profileInfoCard{
        margin-top: 6px;
      }
      .profileActionBtn{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:6px;
        padding: 2px 10px;
        min-height: 40px;
        height: 40px;
        border-radius: 14px;
        border: 1px solid var(--divider);
        background: transparent;
        color: var(--text);
        font-size: 15px;
        font-weight: 600;
        cursor:pointer;
        transition: background-color 140ms ease, box-shadow 160ms ease, transform 80ms ease;
        -webkit-appearance: none;
        appearance: none;
      }
      .profileActionBtn svg{
        width: 16px;
        height: 16px;
        stroke: currentColor;
        flex: 0 0 auto;
      }
      .profileActionBtn:active{
        transform: translateY(1px);
        background: rgba(15,23,42,0.06);
      }
      .profileActionBtn:focus-visible{
        outline: none;
        box-shadow: 0 0 0 3px var(--brandRing);
      }
      .profileActionBtn:disabled{
        opacity: .6;
        cursor: default;
        transform: none;
      }
      .profileActionBtn.danger{
        background: transparent;
        border-color: rgba(176,0,32,.35);
        color: var(--danger);
      }
      .profileActionBtn.danger:active{
        background: rgba(176,0,32,.08);
      }
      .profileActionBtn.neutral{
        color: var(--muted);
        border-color: rgba(148,163,184,.45);
      }
	      .profileActionBtn.neutral:active{
	        background: rgba(148,163,184,.14);
	      }
	      .profileLayoutCompact #profileChatBtn{
	        min-height: 50px;
	        height: 50px;
	        border: 0;
	        border-radius: 16px;
	        background: linear-gradient(180deg, var(--accent), var(--accent-pressed));
	        color: #fff;
	        font-size: 16px;
	        font-weight: 850;
	        letter-spacing: -.01em;
	        box-shadow: 0 10px 22px rgba(27,149,11,.18);
	      }
	      .profileLayoutCompact #profileChatBtn::before{
	        content: "";
	        width: 18px;
	        height: 18px;
	        flex: 0 0 auto;
	        border-radius: 6px;
	        background: currentColor;
	        clip-path: polygon(8% 13%, 92% 13%, 92% 68%, 61% 68%, 38% 88%, 42% 68%, 8% 68%);
	        opacity: .95;
	      }
	      .profileLayoutCompact #profileChatBtn:active{
	        background: var(--accent-pressed);
	        box-shadow: 0 6px 14px rgba(27,149,11,.16);
	      }
	      .profileLayoutCompact #profileChatBtn:disabled{
	        opacity: .45;
	        box-shadow: none;
	      }
	      .profileChatActionsCard{
	        padding: 8px 12px;
	        margin-top: 6px;
	      }
      .profileChatActionsTitle{
        color: var(--muted);
        font-size: 12px;
        font-weight: 600;
        margin-bottom: 6px;
      }
      .profileChatActionsList{
        display:flex;
        flex-direction:column;
      }
      .profileChatActionRow{
        position: relative;
        padding: 0;
        min-height: 0;
      }
      .profileChatActionRow.hasChevron > .profileChatActionBtn{ padding-right: 18px; }
      .profileChatActionRow.hasChevron::after{
        content: "›";
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        font-size: 18px;
        color: var(--muted);
        pointer-events: none;
      }
      .profileChatActionRow + .profileChatActionRow{
        border-top: 1px solid rgba(15,23,42,0.06);
      }
      .profileChatActionRow.danger .profileChatActionBtn{
        color: var(--danger);
      }
      .profileChatActionLabel{
        display:block;
      }
      .profileChatActionSub{
        font-size: 12px;
        color: var(--muted);
        margin-top: 2px;
        line-height: 1.2;
      }
      .profileSafetySection{
        padding: 8px 12px;
        margin-top: 6px;
      }
      .profileSafetyTitle{
        margin-bottom: 6px;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .02em;
        text-transform: none;
      }
      .profileSafetyList{
        display:flex;
        flex-direction:column;
      }
      .profileSafetyRow{
        position: relative;
        padding: 0;
        min-height: 0;
      }
      .profileSafetyRow + .profileSafetyRow{
        border-top: 1px solid rgba(15,23,42,0.06);
      }
      .profileSafetyBtn{
        margin-top: 0;
        border: 0;
        background: transparent;
        padding: 10px 0;
        width: 100%;
        text-align: left;
        font-size: 15px;
        font-weight: 600;
        color: var(--text);
        cursor: pointer;
        line-height: 1.2;
        display:flex;
        align-items:center;
        gap: 10px;
        min-height: 44px;
      }
      .profileSafetyBtn svg{
        width: 18px;
        height: 18px;
        flex: 0 0 auto;
      }
      .profileSafetyBtn:active{ opacity: .7; }
      .profileSafetyBtn:focus-visible{
        outline: none;
        border-radius: 10px;
        box-shadow: 0 0 0 3px var(--brandRing);
      }
      .profileSafetyText{
        display:flex;
        flex-direction:column;
        gap: 2px;
        min-width: 0;
      }
      .profileSafetyLabel{
        display:block;
      }
      .profileSafetySub{
        font-size: 12px;
        color: var(--muted);
        font-weight: 500;
      }
      .profileSafetyRow.danger .profileSafetyBtn{
        color: var(--danger);
      }
      .profileSafetyRow.danger .profileSafetySub{
        color: var(--muted);
      }

      .chatBar{
        background: #fff;
        color: var(--text);
        border-bottom: 1px solid rgba(60,60,67,.14);
        box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 1.5px 6px rgba(0,0,0,.05);
        /* WhatsApp-like header height + sticky behavior */
        position: sticky;
        top: 0;
        z-index: 4;
        min-height: 56px;
        padding: 6px var(--pad-r) 6px var(--pad-l);
        padding-top: calc(6px + var(--safe-top));
        display:flex;
        align-items:center;
        gap:8px;
        box-sizing: border-box;
      }
      #chatOverlay .chatBar,
      #roomsChatScreen .chatBar{
        position: relative;
        top: auto;
        flex: 0 0 auto;
        z-index: 6;
      }
      .chatMeta:empty{
        display:none;
      }
      .chatIconBtn{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        /* Thumb-friendly (>=44px) */
        width: var(--icon-btn-size);
        height: var(--icon-btn-size);
        border-radius: var(--rPill);
        border: 0;
        background: transparent;
        cursor:pointer;
        outline: none;
        transition: background-color 140ms ease, box-shadow 160ms ease, transform 80ms ease;
      }
      .chatIconBtn:active{ transform: translateY(1px); background: rgba(15,23,42,0.06); }
      .chatIconBtn:focus-visible{
        outline: none;
        box-shadow: 0 0 0 3px var(--brandRing);
      }
      .chatIconBtn svg{ width: var(--icon-glyph-size-strong); height: var(--icon-glyph-size-strong); fill: var(--text); opacity: .92; }
      .chatHeaderAction svg{ opacity: .82; }
      .chatHeaderAction[data-mode="clear"] svg{
        opacity: .9;
      }
      .chatHeaderAction[data-mode="clear"] svg[data-icon="clear"]{
        width: 21px;
        height: 21px;
        fill: none;
        stroke: rgba(15,23,42,.88);
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      /* Chat thread connection indicator (header spinner; no layout shift) */
      .chatConnIcon{
        width: 44px;
        height: 44px;
        border-radius: var(--rPill);
        display:inline-flex;
        align-items:center;
        justify-content:center;
        flex: 0 0 auto;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transition: opacity 140ms ease;
      }
      .chatConnIcon.show{
        visibility: visible;
        opacity: .9;
      }
      .chatConnSpin{
        width: 14px;
        height: 14px;
        border-radius: 999px;
        border: 2px solid rgba(15,23,42,.18);
        border-top-color: rgba(15,23,42,.60);
        opacity: 0;
        animation: none;
      }
      .chatConnIcon.isConnecting .chatConnSpin{
        opacity: 1;
        animation: chatConnSpin 900ms linear infinite;
      }
      .chatConnIcon.isConnected .chatConnSpin{
        opacity: 1;
        animation: none;
        border-color: rgba(34,197,94,.5);
        border-top-color: rgba(34,197,94,.9);
      }
      .chatConnIcon.isError .chatConnSpin{
        opacity: 1;
        animation: none;
        border-color: rgba(239,68,68,.4);
        border-top-color: rgba(239,68,68,.9);
      }
      @keyframes chatConnSpin{
        to{ transform: rotate(360deg); }
      }

      /* Chat thread retry (non-blocking; overlay; tap-to-retry) */
      .chatRetryPill{
        position: absolute;
        left: 50%;
        top: calc(56px + env(safe-area-inset-top, 0px) + 10px);
        transform: translateX(-50%);
        z-index: 9;
        display:inline-flex;
        align-items:center;
        gap: 8px;
        padding: 8px 10px;
        border-radius: 999px;
        border: 1px solid rgba(0,0,0,.08);
        background: rgba(255,255,255,.96);
        box-shadow: 0 10px 26px rgba(0,0,0,.10);
        color: var(--text);
        font-size: 12px;
        font-weight: 900;
        letter-spacing: .1px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        max-width: 92%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .chatRetryPill.hidden{ display:none; }
      .chatRetryIcon{
        width: 18px;
        height: 18px;
        border-radius: 999px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        flex: 0 0 auto;
        color: rgba(15,23,42,.72);
      }
      .chatRetryText{
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .chatBarAvatar{
        width: 40px;
        height: 40px;
        border-radius: 999px;
        background: rgba(15,23,42,0.05);
        border: 1px solid rgba(15,23,42,0.08);
        color: var(--text);
        display:flex;
        align-items:center;
        justify-content:center;
        font-weight: 900;
        position:relative;
        overflow:hidden;
        cursor:pointer;
      }
      .chatBarAvatar img{
		position:absolute;
        inset:0;
        width:100%;
        height:100%;
        object-fit:cover;
        border-radius:999px;
        display:block;
        opacity: 0;
        transition: opacity .16s ease;
      }
	  .chatBarAvatar.hasPhoto img{ opacity: 1; }
      .chatTitle{
        flex:1;
        min-width:0;
        display:flex;
        flex-direction:column;
        gap:2px;
        cursor:pointer;
      }
      .chatName{
        font-weight: 900;
        display:flex;
        align-items:center;
        gap:6px;
        min-width:0;
        line-height:1.1;
      }
      .chatNameText{
        display:block;
        min-width:0;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
      }
      .chatMeta{
        font-size: 12px;
        color: var(--wa-muted);
        opacity:.92;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        line-height:1.1;
      }

      .chatBody{
        /* Critical: message list must never collapse to height:0 in flex column */
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        /* Full-width chat wallpaper (no inset panel) */
        padding: 0;
        background-color: #efeae2;
        /* Subtle WhatsApp-like wallpaper pattern (no external assets) */
        background-image:
          radial-gradient(circle at 12px 12px, rgba(255,255,255,.16) 0 1px, transparent 1.25px),
          radial-gradient(circle at 30px 30px, rgba(0,0,0,.025) 0 1px, transparent 1.25px);
        background-size: 42px 42px;
        background-position: 0 0, 0 0;
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
      }
      .chatBody.dmBottomFollowActive,
      .chatScrollInner.dmBottomFollowActive{
        overflow-anchor: none;
      }
      .chatScrollInner{
        min-height: 100%;
        display:flex;
        flex-direction:column;
        justify-content:flex-end; /* When few messages: sit near bottom */
        gap: 0;
        padding: 16px 0 calc(12px + var(--chatBottomOverlayReserve, 0px));
        scroll-padding-bottom: calc(12px + var(--chatBottomOverlayReserve, 0px));
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
      }

      .chatShortcutDock{
        flex: 0 0 auto;
        position: relative;
        z-index: 7;
        padding: 7px 10px 0;
        background:
          linear-gradient(180deg, rgba(255,255,255,.985) 0%, rgba(255,255,255,.94) 68%, rgba(255,255,255,0) 100%);
      }
      .chatShortcutDock.hidden{
        display:none;
      }
      .aiShortcutCard{
        position: relative;
        align-self: stretch;
        margin: 0;
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }
      .aiShortcutDockCard{
        position: relative;
        display:block;
      }
      .aiShortcutCompactBar{
        display:flex;
        align-items:center;
        gap: 8px;
        min-height: 44px;
        padding: 5px 7px;
        border-radius: 18px;
        background:
          linear-gradient(180deg, rgba(255,255,255,.985), rgba(247,249,244,.95));
        border: 1px solid rgba(79,101,66,.10);
        box-shadow:
          0 10px 24px rgba(15,23,42,.06),
          0 1px 0 rgba(255,255,255,.85) inset;
        backdrop-filter: blur(14px) saturate(1.04);
        -webkit-backdrop-filter: blur(14px) saturate(1.04);
      }
      .aiShortcutAreaBtn{
        flex: 1 1 auto;
        min-width: 0;
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap: 1px;
        padding: 2px 2px 2px 1px;
        border: 0;
        background: transparent;
        text-align:left;
        cursor:pointer;
        -webkit-appearance:none;
        appearance:none;
      }
      .aiShortcutAreaBtn:disabled{
        cursor: default;
        opacity: .72;
      }
      .aiShortcutAreaTitle{
        max-width: 100%;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        font-size: 14px;
        line-height: 1.2;
        font-weight: 850;
        color: #15212f;
        letter-spacing: -.015em;
      }
      .aiShortcutAreaMeta{
        max-width: 100%;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        font-size: 10.75px;
        line-height: 1.25;
        font-weight: 800;
        color: rgba(48,71,37,.64);
      }
      .aiShortcutMenuBtn{
        flex: 0 0 auto;
        display:flex;
        align-items:center;
        justify-content:center;
        gap: 6px;
        min-height: 34px;
        padding: 0 12px;
        border-radius: 999px;
        border: 1px solid rgba(27,149,11,.14);
        background:
          linear-gradient(135deg, rgba(248,252,245,.98), rgba(236,247,231,.98));
        color: #16301d;
        font-size: 11.75px;
        font-weight: 800;
        letter-spacing: -.01em;
        cursor:pointer;
        -webkit-appearance:none;
        appearance:none;
        box-shadow:
          0 1px 0 rgba(255,255,255,.85) inset,
          0 6px 14px rgba(34,91,21,.08);
        transition: background-color 140ms ease, transform 80ms ease, box-shadow 160ms ease, border-color 160ms ease;
      }
      .aiShortcutMenuBtn:active{
        transform: translateY(1px);
        background: rgba(236,244,232,.98);
      }
      .aiShortcutMenuBtn:focus-visible,
      .aiShortcutAreaBtn:focus-visible,
      .aiShortcutLocationBtn:focus-visible,
      .aiShortcutStatusBtn:focus-visible,
      .aiShortcutAction:focus-visible{
        outline:none;
        box-shadow: 0 0 0 3px var(--brandRing);
      }
      .aiShortcutMenuChevron{
        font-size: 14px;
        line-height: 1;
        transform: translateY(-1px);
        transition: transform 160ms ease;
      }
      .aiShortcutMenuBtn.isOpen .aiShortcutMenuChevron{
        transform: rotate(180deg) translateY(1px);
      }
      .aiShortcutStatusRow{
        margin-top: 6px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap: 8px;
        padding: 7px 10px;
        border-radius: 14px;
        background: rgba(15,23,42,.04);
        border: 1px solid rgba(15,23,42,.05);
      }
      .aiShortcutStatusRow[data-tone="offline"]{
        background: rgba(245,158,11,.11);
        border-color: rgba(245,158,11,.15);
      }
      .aiShortcutStatusRow[data-tone="error"]{
        background: rgba(239,68,68,.08);
        border-color: rgba(239,68,68,.12);
      }
      .aiShortcutStatusText{
        flex: 1 1 auto;
        min-width: 0;
        font-size: 11.5px;
        line-height: 1.3;
        font-weight: 700;
        color: rgba(15,23,42,.72);
      }
      .aiShortcutStatusBtn,
      .aiShortcutLocationBtn{
        flex: 0 0 auto;
        min-height: 28px;
        padding: 0 10px;
        border-radius: 999px;
        border: 1px solid rgba(15,23,42,.08);
        background: rgba(255,255,255,.92);
        color: #15212f;
        font-size: 11.5px;
        font-weight: 800;
        letter-spacing: -.01em;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
        transition: background-color 140ms ease, transform 80ms ease, box-shadow 160ms ease;
      }
      .aiShortcutStatusBtn:active,
      .aiShortcutLocationBtn:active{
        transform: translateY(1px);
        background: rgba(255,255,255,.82);
      }
      .aiShortcutLocationBtn:disabled{
        opacity: .62;
        cursor: default;
        transform: none;
      }
      .aiShortcutMenuPanel{
        position:absolute;
        right: 0;
        left: auto;
        top: calc(100% + 8px);
        width: min(292px, calc(100vw - 20px));
        max-width: calc(100vw - 20px);
        max-height: min(340px, calc(100vh - 140px));
        overflow: auto;
        padding: 10px;
        border-radius: 18px;
        background:
          linear-gradient(180deg, rgba(255,255,255,.99), rgba(249,250,247,.975));
        border: 1px solid rgba(79,101,66,.10);
        box-shadow:
          0 22px 44px rgba(15,23,42,.11),
          0 1px 0 rgba(255,255,255,.92) inset;
        backdrop-filter: blur(16px) saturate(1.04);
        -webkit-backdrop-filter: blur(16px) saturate(1.04);
      }
      .aiShortcutMenuPanel.hidden{ display:none; }
      .aiShortcutMenuHeader{
        margin-top: 0;
        display:flex;
        flex-direction:column;
        gap: 2px;
      }
      .aiShortcutDockTitle{
        font-size: 13px;
        line-height: 1.16;
        font-weight: 850;
        letter-spacing: -.02em;
        color: #15212f;
      }
      .aiShortcutDockSub{
        font-size: 10px;
        line-height: 1.25;
        color: rgba(15,23,42,.56);
      }
      .aiShortcutMenuMetaRow{
        margin-top: 0;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap: 8px;
        padding: 9px 10px;
        border-radius: 14px;
        background:
          linear-gradient(180deg, rgba(246,249,243,.98), rgba(242,246,239,.92));
        border: 1px solid rgba(79,101,66,.08);
      }
      .aiShortcutMenuMetaBlock{
        min-width: 0;
        flex: 1 1 auto;
        display:flex;
        flex-direction:column;
        gap: 2px;
      }
      .aiShortcutMenuEyebrow{
        font-size: 10px;
        line-height: 1.15;
        font-weight: 900;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: rgba(44,92,30,.66);
      }
      .aiShortcutMenuMeta{
        display:block;
        min-width: 0;
        font-size: 10.75px;
        line-height: 1.25;
        font-weight: 800;
        color: rgba(15,23,42,.62);
      }
      .aiShortcutMenuList{
        margin-top: 8px;
        display:flex;
        flex-direction:column;
        gap: 7px;
      }
      .aiShortcutAction{
        width: 100%;
        min-height: 54px;
        padding: 9px 10px;
        border-radius: 15px;
        border: 1px solid rgba(15,23,42,.06);
        background:
          linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,250,248,.94));
        display:flex;
        align-items:center;
        gap: 8px;
        text-align:left;
        cursor:pointer;
        -webkit-appearance:none;
        appearance:none;
        box-shadow:
          0 8px 18px rgba(15,23,42,.04),
          0 1px 0 rgba(255,255,255,.84) inset;
        transition: background-color 140ms ease, transform 80ms ease, box-shadow 160ms ease, border-color 160ms ease;
      }
      .aiShortcutAction:active{
        transform: translateY(1px);
        background: rgba(255,255,255,.94);
      }
      .aiShortcutAction:focus-visible{
        outline:none;
        box-shadow: 0 0 0 3px var(--brandRing);
      }
      .aiShortcutAction:hover{
        border-color: rgba(27,149,11,.18);
        box-shadow:
          0 12px 24px rgba(15,23,42,.07),
          0 1px 0 rgba(255,255,255,.84) inset;
      }
      .aiShortcutActionPrimary{
        border-color: rgba(27,149,11,.18);
        background:
          linear-gradient(180deg, rgba(245,251,240,.98), rgba(238,247,233,.95));
      }
      .aiShortcutActionPrimary:hover{
        border-color: rgba(27,149,11,.24);
        background:
          linear-gradient(180deg, rgba(241,249,236,.99), rgba(234,245,228,.96));
      }
      .aiShortcutAction:disabled,
      .aiShortcutAction.isDisabled{
        opacity: .62;
        cursor: default;
        transform: none;
        border-color: rgba(15,23,42,.05);
        background: rgba(247,248,247,.84);
      }
      .aiShortcutActionCopy{
        flex: 1 1 auto;
        min-width: 0;
        display:flex;
        flex-direction:column;
        gap: 2px;
      }
      .aiShortcutLabelRow{
        display:flex;
        align-items:center;
        gap: 5px;
        min-width: 0;
        flex-wrap: wrap;
      }
      .aiShortcutMiniPill{
        flex: 0 0 auto;
        padding: 2px 6px;
        border-radius: 999px;
        background: rgba(27,149,11,.10);
        color: #0f6f07;
        font-size: 9.25px;
        line-height: 1.1;
        font-weight: 900;
        letter-spacing: .01em;
      }
      .aiShortcutIcon{
        display:grid;
        place-items:center;
        width: 32px;
        height: 32px;
        border-radius: 11px;
        background: rgba(27,149,11,.07);
        font-size: 15px;
        line-height: 1;
        flex: 0 0 auto;
        box-shadow: 0 1px 0 rgba(255,255,255,.78) inset;
      }
      .aiShortcutToneNow .aiShortcutIcon{
        background: linear-gradient(180deg, rgba(208,242,193,.95), rgba(231,247,222,.95));
      }
      .aiShortcutToneEat .aiShortcutIcon{
        background: linear-gradient(180deg, rgba(255,233,204,.96), rgba(255,245,227,.95));
      }
      .aiShortcutToneWeather .aiShortcutIcon{
        background: linear-gradient(180deg, rgba(255,234,180,.95), rgba(255,245,215,.95));
      }
      .aiShortcutTonePlaces .aiShortcutIcon{
        background: linear-gradient(180deg, rgba(233,244,255,.96), rgba(244,248,255,.95));
      }
      .aiShortcutLabel{
        font-size: 12.5px;
        line-height: 1.22;
        font-weight: 850;
        letter-spacing: -.01em;
        color: #15212f;
      }
      .aiShortcutSub{
        font-size: 10.25px;
        line-height: 1.25;
        color: rgba(15,23,42,.52);
      }
      .aiShortcutActionArrow{
        flex: 0 0 auto;
        align-self: center;
        font-size: 18px;
        line-height: 1;
        color: rgba(15,23,42,.28);
        transform: translateX(-1px);
      }
      .aiShortcutActionPrimary .aiShortcutActionArrow{
        color: rgba(15,111,7,.55);
      }
      @media (max-width: 360px){
        .chatShortcutDock{
          padding-left: 8px;
          padding-right: 8px;
        }
        .aiShortcutMenuPanel{
          right: 0;
          width: calc(100vw - 16px);
          max-width: calc(100vw - 16px);
        }
        .aiShortcutAreaTitle{
          font-size: 13px;
        }
        .aiShortcutLabel{
          font-size: 12px;
        }
      }

      .daySep{
        display:flex;
        justify-content:center;
        margin: 10px auto 8px;
      }
      .daySep span{
        background: rgba(255,255,255,.75);
        border: 1px solid rgba(0,0,0,.06);
        box-shadow: 0 1px 2px rgba(0,0,0,.06);
        padding: 6px 12px;
        border-radius: 999px;
        font-size: 12px;
        color: rgba(15,23,42,.55);
        font-weight: 800;
      }

      .unreadSep{
        display:flex;
        justify-content:center;
        margin: 10px 0;
      }
      .unreadSep span{
        background: rgba(246,247,249,.92);
        border: 1px solid rgba(0,0,0,.06);
        padding: 6px 12px;
        border-radius: 999px;
        font-size: 12px;
        color: #6b7a86;
        font-weight: 700;
      }

      /* Chat perf: keep long histories smooth (IC10) */
      @supports (content-visibility: auto){
        html:not(.is-ios-app) .bubbleRow{
          content-visibility: auto;
          contain-intrinsic-size: 80px;
        }
      }

      .chatOlderRow{
        display:flex;
        justify-content:center;
        margin: 8px 0 10px;
      }
      .chatOlderBtn{
        background: rgba(246,247,249,.92);
        border: 1px solid rgba(0,0,0,.08);
        border-radius: 999px;
        padding: 8px 12px;
        font-size: 12.5px;
        font-weight: 800;
        color: #38505e;
      }
      .chatOlderBtn:active{ transform: translateY(1px); }

      /* WhatsApp-like message rows */
      .msgRow,
      .bubbleRow{
        display:flex;
        padding: 0 14px;
        margin-top: 0;
        overflow: visible;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
      }
      /* Tighter spacing when sender/time-group continues; a bit more air on breaks */
      .bubbleRow.continued{ margin-top: 4px; }
      .bubbleRow:not(.continued){ margin-top: 8px; }
      .msgRow.incoming,
      .bubbleRow.them{ justify-content:flex-start; }
      .msgRow.outgoing,
      .bubbleRow.me{ justify-content:flex-end; }

      .bubbleWrap{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        position:relative;
        gap: 3px;
        max-width:min(78%, 420px);
        min-width:0;
        overflow:visible;
      }
      .bubbleWrap.hasVoice{
        max-width:min(92%, 440px);
      }
      .bubbleRow.aiAssistantRow .bubbleWrap.aiKnowledgeBubbleWrap{
        max-width:min(96%, 760px);
      }
      .bubbleRow.me .bubbleWrap{ align-items:flex-end; }

      .bubble{
        max-width: 100%;
        width: fit-content;
        inline-size: fit-content;
        min-width: min(132px, 100%);
        padding: 8px 12px;
        border-radius: 16px;
        border: 1px solid rgba(0,0,0,.06);
        box-shadow: 0 1px 1px rgba(0,0,0,.06);
        position:relative;
        margin-top: 0;
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        touch-action: manipulation;
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
        overflow: visible;
        box-sizing: border-box;
        --reply-swipe-offset: 0px;
        --reply-swipe-progress: 0;
        transform: translate3d(var(--reply-swipe-offset), 0, 0);
        transition: transform 180ms ease;
      }
      .bubble.replySwipeActive,
      .roomsChatBubble.replySwipeActive{
        z-index: 2;
      }
      .bubble.replySwipeAnimating,
      .roomsChatBubble.replySwipeAnimating{
        transition: transform 180ms ease;
      }
      .bubble::before,
      .roomsChatBubble::before{
        content: "↩";
        position: absolute;
        left: -30px;
        top: 50%;
        width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: rgba(255,255,255,.96);
        border: 1px solid rgba(15,23,42,.08);
        box-shadow: 0 6px 14px rgba(15,23,42,.08);
        color: rgba(18,28,36,.72);
        font-size: 13px;
        font-weight: 900;
        line-height: 1;
        opacity: 0;
        pointer-events: none;
        transform: translate3d(-8px, -50%, 0) scale(.9);
        transition: opacity 150ms ease, transform 180ms ease;
      }
      .bubble.replySwipeActive::before,
      .roomsChatBubble.replySwipeActive::before{
        opacity: calc(.28 + (var(--reply-swipe-progress, 0) * .72));
        transform: translate3d(0, -50%, 0) scale(calc(.9 + (var(--reply-swipe-progress, 0) * .12)));
      }
      .bubble.me{
        /* WhatsApp-like outgoing bubble tint */
        background: #d9fdd3;
        color:#111;
        border-color: rgba(0,0,0,.04);
        border-top-right-radius: 6px; /* WhatsApp corner effect */
      }
      .bubble.me.aiUserFollowUpBubble{
        background:
          linear-gradient(180deg, rgba(227,250,219,.98), rgba(217,246,210,.98));
        border-color: rgba(49,128,63,.10);
      }
      .bubble.them{
        background: #fff;
        color: var(--text);
        border-top-left-radius: 6px; /* WhatsApp corner effect */
      }
      /* Cleaner bubbles: no tails */
      .bubble.me::after,
      .bubble.them::after{ content:none; }

      /* Grouping: continued messages lose the "notch" corner */
      .bubbleRow.continued.me .bubble{ border-top-right-radius: 12px; }
      .bubbleRow.continued.them .bubble{ border-top-left-radius: 12px; }

      .bubbleText{
        display:block;
        white-space: pre-wrap;
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: normal;
        max-width: 100%;
        font-size: 16px;
        line-height: 1.34;
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
      }
      .aiUserFollowUpBadge{
        display:inline-flex;
        align-items:center;
        max-width:100%;
        min-height: 22px;
        padding: 0 9px;
        margin-bottom: 6px;
        border-radius: 999px;
        background: rgba(255,255,255,.74);
        border: 1px solid rgba(37,118,54,.10);
        color: #427154;
        font-size: 11px;
        line-height: 1.1;
        font-weight: 850;
        letter-spacing: -.01em;
      }
      .bubbleText.aiRichText{
        white-space: normal;
        line-height: 1.42;
      }
      .bubbleText.aiRichText p,
      .bubbleText.aiRichText ul,
      .bubbleText.aiRichText ol{
        margin: 0;
      }
      .bubbleText.aiRichText p + p,
      .bubbleText.aiRichText p + ul,
      .bubbleText.aiRichText p + ol,
      .bubbleText.aiRichText ul + p,
      .bubbleText.aiRichText ol + p,
      .bubbleText.aiRichText ul + ul,
      .bubbleText.aiRichText ol + ol,
      .bubbleText.aiRichText ul + ol,
      .bubbleText.aiRichText ol + ul{
        margin-top: 10px;
      }
      .bubbleText.aiRichText ul,
      .bubbleText.aiRichText ol{
        padding-inline-start: 1.15em;
        list-style-position: inside;
      }
      .bubbleText.aiRichText li + li{
        margin-top: 6px;
      }
      .bubbleText.aiRichText strong{
        font-weight: 850;
        color: #15212f;
      }
      .bubbleText.aiRichText .aiSectionTitle{
        font-size: 15px;
        line-height: 1.28;
        font-weight: 900;
        color: #15212f;
      }
      .bubbleText.aiRichText .aiMetaLine,
      .bubbleText.aiRichText .aiNoteLine{
        font-size: 13px;
        line-height: 1.38;
        color: #667781;
      }
      .bubbleText.aiRichText .aiMetaLine + .aiMetaLine,
      .bubbleText.aiRichText .aiMetaLine + .aiLinkLine,
      .bubbleText.aiRichText .aiSectionTitle + .aiMetaLine,
      .bubbleText.aiRichText .aiSectionTitle + .aiLinkLine,
      .bubbleText.aiRichText .aiNoteLine + .aiMetaLine,
      .bubbleText.aiRichText .aiNoteLine + .aiLinkLine{
        margin-top: 4px;
      }
      .bubbleText.aiRichText .aiNoteLine{
        color: #5f6f7b;
      }
      .bubbleText.aiRichText .aiLinkLine{
        font-size: 14px;
        line-height: 1.36;
      }
      .bubbleText.aiRichText .aiInlineLink,
      .bubbleText.aiRichText a{
        color: #0b63ce;
        text-decoration: underline;
        text-decoration-thickness: 1.5px;
        text-underline-offset: 2px;
        word-break: break-word;
      }
      .bubble.aiStructuredBubble{
        width: min(100%, 100%);
        min-width: min(220px, 100%);
        padding: 7px 7px 9px;
        border-radius: 18px;
      }
      .bubble.aiStructuredBubble.aiStructuredBubble--knowledge{
        width: 100%;
        min-width: 0;
        padding: 8px 8px 10px;
      }
      .bubbleText.aiRichText.aiStructuredText{
        width: 100%;
      }
      .aiAskCard{
        display:flex;
        flex-direction:column;
        gap: 10px;
        width: 100%;
        min-width: 0;
      }
      .aiAskHeader{
        display:flex;
        flex-direction:column;
        gap: 5px;
      }
      .aiAskHeaderTop{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap: 8px;
      }
      .aiAskEyebrow{
        font-size: 10px;
        line-height: 1.1;
        font-weight: 900;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: rgba(52,101,60,.72);
      }
      .aiAskFollowUpBadge{
        flex: 0 0 auto;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        min-height: 22px;
        padding: 0 9px;
        border-radius: 999px;
        background: rgba(36, 126, 58, .09);
        border: 1px solid rgba(36, 126, 58, .12);
        color: rgba(27, 96, 44, .92);
        font-size: 11px;
        line-height: 1;
        font-weight: 800;
        letter-spacing: -.01em;
        white-space: nowrap;
      }
      .aiAskRefinementChips{
        display:flex;
        flex-wrap:wrap;
        gap: 6px;
        margin-top: -2px;
      }
      .aiAskRefinementChip{
        display:inline-flex;
        align-items:center;
        min-height: 23px;
        padding: 0 8px;
        border-radius: 999px;
        background: rgba(242, 248, 241, .94);
        border: 1px solid rgba(54, 124, 67, .10);
        color: rgba(38, 93, 49, .86);
        font-size: 11px;
        line-height: 1.1;
        font-weight: 820;
        letter-spacing: -.01em;
      }
      .aiAskTitle{
        font-size: 15.5px;
        line-height: 1.24;
        font-weight: 900;
        color: #14212b;
        letter-spacing: -.015em;
      }
      .aiAskTrailLead{
        font-size: 12.5px;
        line-height: 1.34;
        font-weight: 700;
        color: rgba(58, 93, 67, .82);
        letter-spacing: -.01em;
      }
      .aiAskIntro{
        margin: 0;
        font-size: 13px;
        line-height: 1.36;
        color: #5e6b76;
      }
      .aiAskKnowledgeBody{
        display:flex;
        flex-direction:column;
        gap: 8px;
      }
      .aiAskEvidence{
        display:flex;
        flex-direction:column;
        gap: 6px;
        padding-top: 2px;
      }
      .aiAskEvidenceLabel{
        font-size: 10.5px;
        line-height: 1.1;
        font-weight: 900;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: rgba(82, 99, 111, .78);
      }
      .aiAskSources{
        display:flex;
        flex-direction:column;
        gap: 6px;
        padding-top: 2px;
      }
      .aiAskSourcesLabel{
        font-size: 10.5px;
        line-height: 1.1;
        font-weight: 900;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: rgba(82, 99, 111, .78);
      }
      .aiAskSourcesRow{
        display:flex;
        flex-wrap:wrap;
        gap: 7px;
      }
      .aiAskSourceChip{
        display:inline-flex;
        align-items:center;
        gap: 7px;
        min-height: 25px;
        max-width: 100%;
        padding: 0 10px;
        border-radius: 999px;
        background: rgba(246, 248, 249, .96);
        border: 1px solid rgba(93, 111, 124, .14);
        color: #536370;
        font-size: 11.5px;
        line-height: 1.2;
        font-weight: 760;
        letter-spacing: -.01em;
        text-decoration: none;
      }
      .aiAskSourceChip--reference{
        background: rgba(246, 248, 249, .96);
        border-color: rgba(93, 111, 124, .14);
        color: #536370;
      }
      .aiAskSourceChip--public-data{
        background: rgba(240, 248, 244, .98);
        border-color: rgba(91, 146, 113, .18);
        color: #2d5e42;
      }
      .aiAskSourceChip--public-health{
        background: rgba(239, 248, 247, .98);
        border-color: rgba(88, 146, 153, .18);
        color: #2b5d63;
      }
      .aiAskSourceChip--research{
        background: rgba(243, 244, 251, .98);
        border-color: rgba(96, 104, 171, .18);
        color: #46508d;
      }
      .aiAskSourceChip--official{
        background: rgba(250, 247, 238, .98);
        border-color: rgba(175, 141, 76, .18);
        color: #6d5523;
      }
      a.aiAskSourceChip{
        color: #335565;
      }
      a.aiAskSourceChip.aiAskSourceChip--public-data{
        color: #2d5e42;
      }
      a.aiAskSourceChip.aiAskSourceChip--public-health{
        color: #2b5d63;
      }
      a.aiAskSourceChip.aiAskSourceChip--research{
        color: #46508d;
      }
      a.aiAskSourceChip.aiAskSourceChip--official{
        color: #6d5523;
      }
      .aiAskSourceKind{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        min-height: 18px;
        padding: 0 7px;
        border-radius: 999px;
        background: rgba(255,255,255,.78);
        font-size: 10px;
        line-height: 1;
        font-weight: 900;
        letter-spacing: .01em;
        white-space: nowrap;
      }
      .aiAskSourceKind--reference{
        color: rgba(83, 99, 112, .85);
      }
      .aiAskSourceKind--public-data{
        color: rgba(45, 94, 66, .88);
      }
      .aiAskSourceKind--public-health{
        color: rgba(43, 93, 99, .88);
      }
      .aiAskSourceKind--research{
        color: rgba(70, 80, 141, .88);
      }
      .aiAskSourceKind--official{
        color: rgba(109, 85, 35, .88);
      }
      .aiAskSourceText{
        min-width: 0;
      }
      .aiAskKnowledgeBody p,
      .aiAskKnowledgeBody ul,
      .aiAskKnowledgeBody ol{
        margin: 0;
      }
      .aiAskSection{
        display:flex;
        flex-direction:column;
        gap: 9px;
      }
      .aiAskSectionTitle{
        font-size: 12px;
        line-height: 1.2;
        font-weight: 900;
        letter-spacing: -.01em;
        color: #213240;
      }
      .aiAskPlaces{
        display:flex;
        flex-direction:column;
        gap: 8px;
      }
      .aiAskPlaceCard{
        display:flex;
        flex-direction:column;
        gap: 7px;
        padding: 10px 10px;
        border-radius: 15px;
        background:
          linear-gradient(180deg, rgba(248,250,248,.98), rgba(243,246,244,.96));
        border: 1px solid rgba(79,101,66,.11);
        box-shadow:
          0 1px 0 rgba(255,255,255,.86) inset,
          0 6px 16px rgba(15,23,42,.04);
      }
      .aiAskPlaceCard.isPrimary{
        background:
          linear-gradient(180deg, rgba(243,249,239,.99), rgba(236,245,233,.97));
        border-color: rgba(39,124,52,.15);
      }
      .aiAskPlaceTop{
        display:flex;
        align-items:flex-start;
        gap: 8px;
        min-width: 0;
      }
      .aiAskPlaceIndex,
      .aiAskPlaceSlot{
        flex: 0 0 auto;
        min-width: 26px;
        height: 26px;
        padding: 0 8px;
        border-radius: 999px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        background: rgba(27,149,11,.10);
        color: #0f6f07;
        font-size: 11px;
        line-height: 1;
        font-weight: 900;
        letter-spacing: -.01em;
      }
      .aiAskPlaceHeading{
        min-width: 0;
        flex: 1 1 auto;
      }
      .aiAskPlaceName{
        font-size: 14.5px;
        line-height: 1.26;
        font-weight: 900;
        color: #15212f;
        letter-spacing: -.012em;
      }
      .aiAskPlaceReason{
        margin: 0;
        font-size: 13px;
        line-height: 1.36;
        color: #526470;
      }
      .aiAskPlaceLead,
      .aiAskPlaceHint{
        margin: 0;
      }
      .aiAskPlaceLead{
        font-size: 12.9px;
        line-height: 1.34;
        color: #233440;
        font-weight: 800;
      }
      .aiAskPlaceHint{
        font-size: 12.35px;
        line-height: 1.32;
        color: #586872;
        font-weight: 700;
      }
      .aiAskPromotedSignals{
        display:flex;
        flex-wrap:wrap;
        gap: 6px;
      }
      .aiAskPromotedSignal{
        display:inline-flex;
        align-items:center;
        min-height: 23px;
        padding: 0 8px;
        border-radius: 999px;
        background: rgba(233,243,230,.92);
        border: 1px solid rgba(57,129,70,.10);
        color: rgba(35,94,47,.88);
        font-size: 11px;
        line-height: 1.1;
        font-weight: 840;
        letter-spacing: -.01em;
      }
      .aiAskContrastSignals{
        display:flex;
        flex-wrap:wrap;
        gap: 6px;
      }
      .aiAskContrastSignal{
        display:inline-flex;
        align-items:center;
        min-height: 22px;
        padding: 0 8px;
        border-radius: 999px;
        background: rgba(255,255,255,.82);
        border: 1px solid rgba(96,114,96,.10);
        color: rgba(71,90,76,.82);
        font-size: 10.75px;
        line-height: 1.1;
        font-weight: 780;
        letter-spacing: -.01em;
      }
      .aiAskMetaChips{
        display:flex;
        flex-wrap:wrap;
        gap: 6px;
      }
      .aiAskMetaChip{
        display:inline-flex;
        align-items:center;
        min-height: 24px;
        padding: 0 8px;
        border-radius: 999px;
        background: rgba(255,255,255,.9);
        border: 1px solid rgba(15,23,42,.07);
        color: #304251;
        font-size: 11.5px;
        line-height: 1.15;
        font-weight: 800;
      }
      .aiAskAddress{
        font-size: 12.5px;
        line-height: 1.34;
        color: #5b6a74;
      }
      .aiAskActions{
        display:flex;
        flex-wrap:wrap;
        gap: 8px;
      }
      .aiAskQuickActions{
        display:flex;
        flex-direction:column;
        gap: 8px;
        padding-top: 2px;
      }
      .aiAskQuickActionsLabel{
        font-size: 10.5px;
        line-height: 1.1;
        font-weight: 900;
        letter-spacing: .045em;
        text-transform: uppercase;
        color: rgba(62,84,71,.62);
      }
      .aiAskQuickActionsRow{
        display:flex;
        flex-wrap:wrap;
        gap: 8px;
      }
      .aiAskQuickChip{
        appearance:none;
        -webkit-appearance:none;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        min-height: 31px;
        padding: 0 12px;
        border-radius: 999px;
        border: 1px solid rgba(45,122,54,.16);
        background:
          linear-gradient(180deg, rgba(252,255,252,.98), rgba(246,251,246,.96));
        color: #386347;
        font-size: 12px;
        line-height: 1.1;
        font-weight: 850;
        letter-spacing: -.01em;
        box-shadow:
          0 1px 0 rgba(255,255,255,.82) inset,
          0 3px 10px rgba(31,85,39,.05);
        cursor:pointer;
        font-family:inherit;
      }
      .aiAskQuickChip:active{
        transform: translateY(1px);
        box-shadow:
          0 1px 0 rgba(255,255,255,.82) inset,
          0 2px 6px rgba(31,85,39,.05);
      }
      .aiAskLinkBtn{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        min-height: 30px;
        padding: 0 11px;
        border-radius: 999px;
        border: 1px solid rgba(27,149,11,.14);
        background: rgba(255,255,255,.96);
        color: #1062c8;
        font-size: 11.75px;
        line-height: 1.1;
        font-weight: 900;
        letter-spacing: -.01em;
        text-decoration: none !important;
        box-shadow: 0 1px 0 rgba(255,255,255,.82) inset;
      }
      .aiAskActionBtn{
        appearance: none;
        -webkit-appearance: none;
        cursor: pointer;
        font-family: inherit;
      }
      .aiAskCard--location .aiAskActions{
        padding-top: 2px;
      }
      .aiAskCard--location .aiAskActionBtn{
        width: 100%;
        min-height: 38px;
        padding: 0 16px;
        border-color: rgba(39,124,52,.34);
        background:
          linear-gradient(180deg, rgba(100,205,95,.98), rgba(64,178,60,.98));
        color: #ffffff;
        font-size: 13px;
        box-shadow:
          0 9px 18px rgba(61,156,65,.18),
          0 1px 0 rgba(255,255,255,.16) inset;
      }
      .aiAskCard--location .aiAskActionBtn:active{
        transform: translateY(1px);
        box-shadow:
          0 5px 12px rgba(61,156,65,.16),
          0 1px 0 rgba(255,255,255,.12) inset;
      }
      .aiAskInfoStack{
        display:flex;
        flex-direction:column;
        gap: 7px;
      }
      .aiAskInfoRow{
        display:flex;
        flex-direction:column;
        gap: 4px;
        padding: 9px 10px;
        border-radius: 14px;
        background:
          linear-gradient(180deg, rgba(247,249,247,.98), rgba(242,245,243,.96));
        border: 1px solid rgba(79,101,66,.09);
        box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
      }
      .aiAskInfoRow--recommendation{
        background:
          linear-gradient(180deg, rgba(243,249,239,.99), rgba(236,245,233,.97));
        border-color: rgba(39,124,52,.16);
      }
      .aiAskInfoRow--timing{
        background:
          linear-gradient(180deg, rgba(248,249,247,.99), rgba(243,245,242,.97));
      }
      .aiAskInfoRow--weather{
        background:
          linear-gradient(180deg, rgba(245,248,250,.99), rgba(240,244,247,.97));
        border-color: rgba(80,102,124,.10);
      }
      .aiAskInfoRow--health{
        background:
          linear-gradient(180deg, rgba(241,249,238,.99), rgba(234,245,230,.97));
        border-color: rgba(54,131,66,.16);
      }
      .aiAskInfoRow--data{
        background:
          linear-gradient(180deg, rgba(240,248,244,.99), rgba(233,244,237,.97));
        border-color: rgba(58,126,88,.16);
      }
      .aiAskInfoRow--official{
        background:
          linear-gradient(180deg, rgba(250,247,238,.99), rgba(246,241,229,.97));
        border-color: rgba(161,129,72,.16);
      }
      .aiAskInfoRow--fit{
        background:
          linear-gradient(180deg, rgba(243,248,242,.99), rgba(237,244,238,.97));
        border-color: rgba(68,126,92,.14);
      }
      .aiAskInfoLabel{
        font-size: 10.5px;
        line-height: 1.1;
        font-weight: 900;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: rgba(48,78,56,.72);
      }
      .aiAskInfoText{
        font-size: 13px;
        line-height: 1.36;
        color: #1f2e39;
        font-weight: 700;
      }
      .aiAskFoodSummary{
        display:flex;
        flex-direction:column;
        gap: 6px;
        padding: 1px 1px 0;
      }
      .aiAskFoodSummaryRow{
        display:flex;
        flex-direction:column;
        gap: 2px;
        padding-bottom: 6px;
      }
      .aiAskFoodSummaryRow + .aiAskFoodSummaryRow{
        border-top: 1px solid rgba(84,104,84,.09);
        padding-top: 6px;
      }
      .aiAskFoodSummaryLabel{
        font-size: 10px;
        line-height: 1.1;
        font-weight: 900;
        letter-spacing: .045em;
        text-transform: uppercase;
        color: rgba(52,78,58,.66);
      }
      .aiAskFoodSummaryText{
        font-size: 12.8px;
        line-height: 1.34;
        color: #23333f;
        font-weight: 800;
      }
      .aiAskFoodSummaryText--lead{
        font-size: 13.3px;
        line-height: 1.35;
        color: #22323e;
        font-weight: 850;
      }
      .aiAskFoodSummaryRow--timing .aiAskFoodSummaryText{
        color: #53636e;
        font-weight: 700;
      }
      .aiAskFoodSummaryRow--health .aiAskFoodSummaryLabel{
        color: rgba(46,110,58,.72);
      }
      .aiAskFoodSummaryRow--health .aiAskFoodSummaryText{
        color: #29573a;
        font-weight: 760;
      }
      .aiAskFoodSummaryRow--fit .aiAskFoodSummaryLabel{
        color: rgba(58,113,84,.72);
      }
      .aiAskFoodSummaryRow--fit .aiAskFoodSummaryText{
        color: #335244;
        font-weight: 730;
      }
      .aiAskReasonRow{
        display:flex;
        flex-direction:column;
        gap: 3px;
        padding: 7px 9px 7px 11px;
        border-left: 3px solid rgba(39,124,52,.18);
        border-radius: 12px;
        background: rgba(255,255,255,.58);
      }
      .aiAskReasonRow--backup{
        border-left-color: rgba(109,128,146,.18);
        background: rgba(255,255,255,.46);
      }
      .aiAskReasonRow--fit{
        border-left-color: rgba(39,124,52,.18);
        background: rgba(255,255,255,.62);
      }
      .aiAskReasonRow--health{
        border-left-color: rgba(61,141,74,.28);
        background: rgba(241,249,238,.82);
      }
      .aiAskReasonRow--calorie{
        border-left-color: rgba(214,155,38,.26);
        background: rgba(255,249,238,.82);
      }
      .aiAskReasonRow--service{
        border-left-color: rgba(86,108,129,.22);
        background: rgba(245,248,251,.82);
      }
      .aiAskReasonRow--signals{
        border-left-color: rgba(88,117,78,.16);
        background: none;
      }
      .aiAskReasonLabel{
        font-size: 10px;
        line-height: 1.1;
        font-weight: 900;
        letter-spacing: .045em;
        text-transform: uppercase;
        color: rgba(52,78,58,.7);
      }
      .aiAskReasonText{
        font-size: 12.75px;
        line-height: 1.35;
        color: #22313d;
        font-weight: 700;
      }
      .aiAskSignalChips{
        display:flex;
        flex-wrap:wrap;
        gap: 6px;
      }
      .aiAskSignalChip{
        display:inline-flex;
        align-items:center;
        min-height: 24px;
        padding: 0 8px;
        border-radius: 999px;
        background: rgba(255,255,255,.92);
        border: 1px solid rgba(84,104,84,.11);
        color: #3a4a43;
        font-size: 11.25px;
        line-height: 1.15;
        font-weight: 800;
      }
      .aiAskFooter{
        font-size: 11.5px;
        line-height: 1.35;
        color: #6a7882;
      }
      .aiAskCard--eat{
        gap: 6px;
      }
      .aiAskCard--eat .aiAskHeader{
        gap: 4px;
      }
      .aiAskCard--eat .aiAskEyebrow{
        font-size: 9.5px;
        letter-spacing: .06em;
      }
      .aiAskCard--eat .aiAskTitle{
        font-size: 15px;
        line-height: 1.22;
      }
      .aiAskCard--eat .aiAskFoodSummary{
        gap: 5px;
      }
      .aiAskCard--eat .aiAskFoodSummaryRow--recommendation{
        padding-bottom: 4px;
      }
      .aiAskCard--eat .aiAskFoodSummaryText{
        font-size: 12.5px;
        line-height: 1.3;
      }
      .aiAskCard--eat .aiAskFoodSummaryText--lead{
        font-size: 13.15px;
        line-height: 1.32;
      }
      .aiAskCard--eat .aiAskInfoRow{
        padding: 8px 10px;
        border-radius: 12px;
      }
      .aiAskCard--eat .aiAskInfoText{
        font-size: 12.5px;
        line-height: 1.32;
      }
      .aiAskCard--eat .aiAskPlaceCard{
        gap: 6px;
        padding: 9px 10px;
      }
      .aiAskCard--eat .aiAskPlaceCard.isCompact{
        gap: 5px;
        padding: 8px 10px;
        background:
          linear-gradient(180deg, rgba(253,254,252,.98), rgba(249,251,248,.96));
      }
      .aiAskCard--eat .aiAskPlaceSlot{
        min-width: 0;
        padding: 0 9px;
        font-size: 10.5px;
      }
      .aiAskCard--eat .aiAskPlaceLead{
        font-size: 12.7px;
        line-height: 1.32;
      }
      .aiAskCard--eat .aiAskPlaceHint{
        font-size: 12.1px;
        line-height: 1.3;
      }
      .aiAskCard--eat .aiAskPlaceCard.isCompact .aiAskPlaceLead{
        font-size: 12.45px;
        line-height: 1.3;
      }
      .aiAskCard--eat .aiAskPlaceCard.isCompact .aiAskPlaceHint{
        display:none;
      }
      .aiAskCard--eat .aiAskPromotedSignal{
        background: rgba(236,245,231,.96);
      }
      .aiAskCard--eat .aiAskContrastSignal{
        background: rgba(250,252,248,.94);
      }
      .aiAskCard--eat .aiAskReasonRow{
        gap: 2px;
        padding: 6px 0 0;
        border-left: 0;
        border-radius: 0;
        background: none;
      }
      .aiAskCard--eat .aiAskReasonRow + .aiAskReasonRow{
        margin-top: 1px;
        padding-top: 7px;
        border-top: 1px solid rgba(84,104,84,.11);
      }
      .aiAskCard--eat .aiAskReasonLabel{
        font-size: 9.5px;
        letter-spacing: .055em;
      }
      .aiAskCard--eat .aiAskReasonText{
        font-size: 12.4px;
        line-height: 1.3;
      }
      .aiAskCard--eat .aiAskSignalChip{
        min-height: 22px;
        padding: 0 7px;
        font-size: 10.9px;
      }
      .aiAskCard--eat .aiAskPlaceCard.isCompact .aiAskSignalChips{
        gap: 5px;
      }
      .aiAskCard--eat .aiAskPlaceCard.isCompact .aiAskSignalChip{
        min-height: 21px;
        font-size: 10.6px;
      }
      .aiAskCard--eat .aiAskReasonRow--signals .aiAskReasonLabel{
        display:none;
      }
      .aiAskCard--eat .aiAskReasonRow--signals{
        padding-top: 4px;
      }
      .aiAskCard--eat .aiAskMetaChip{
        font-size: 11.1px;
      }
      .aiAskCard--eat .aiAskPlaceCard.isCompact .aiAskMetaChip{
        min-height: 22px;
        font-size: 10.8px;
      }
      .aiAskCard--eat .aiAskAddress{
        font-size: 12px;
        line-height: 1.3;
      }
      .aiAskCard--eat .aiAskQuickActions{
        padding-top: 0;
      }
      .aiAskCard--eat .aiAskQuickChip{
        color: #335743;
        border-color: rgba(64,132,67,.18);
        background:
          linear-gradient(180deg, rgba(251,255,251,.98), rgba(244,250,244,.96));
      }
      .aiAskCard--eat .aiAskPlaceCard.isCompact .aiAskAddress{
        font-size: 11.8px;
        color: #66747d;
      }
      .aiAskCard--eat .aiAskFooter{
        font-size: 11px;
        line-height: 1.3;
      }
      .bubble.them .aiAskLinkBtn:focus-visible{
        outline:none;
        box-shadow: 0 0 0 3px var(--brandRing);
      }
      .bubble.them .aiAskQuickChip:focus-visible{
        outline:none;
        box-shadow:
          0 0 0 3px var(--brandRing),
          0 1px 0 rgba(255,255,255,.82) inset,
          0 3px 10px rgba(31,85,39,.05);
      }
      .bubble.emojiOnly{
        min-width: 0;
        padding: 4px 0 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        gap: 4px;
        overflow: visible;
        align-items: flex-start;
      }
      .bubble.emojiOnly.me,
      .bubble.emojiOnly.them{
        background: transparent;
        border-color: transparent;
        box-shadow: none;
      }
      .bubble.emojiOnly .bubbleText{
        font-size: 72px;
        line-height: .94;
        letter-spacing: -.02em;
        overflow: visible;
        white-space: nowrap;
      }
      .bubble.emojiOnly.emojiCount2 .bubbleText{
        font-size: 62px;
      }
      .bubble.emojiOnly.emojiCount3 .bubbleText{
        font-size: 54px;
      }
      .bubble.textOnly{
        min-width: 0;
        max-width: min(84vw, 360px);
        overflow: hidden;
      }
      .bubble.textOnly .bubbleText{
        hyphens: manual;
      }
      .bubble.textOnly .bubbleMeta{
        margin-top: 2px;
      }
      .bubbleText[dir="rtl"],
      .roomsChatBubbleText[dir="rtl"]{
        direction: rtl;
        text-align: right;
      }
      .bubbleText[dir="ltr"],
      .roomsChatBubbleText[dir="ltr"]{
        direction: ltr;
        text-align: left;
      }

      .bubbleReplyQuote{
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        align-self: stretch;
        padding: 6px 10px;
        margin-bottom: 4px;
        border-left: 3px solid var(--muted);
        background: var(--surface2);
        border-radius: 6px;
        font-size: 13px;
        color: var(--muted);
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        box-sizing: border-box;
      }
      .bubbleReplyQuote:hover{ background: var(--surface); color: var(--text); }
      .bubbleReplyQuoteSnippet{
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      /* Smaller, subtler AI thinking bubble */
      .bubble.thinking{
        padding: 7px 9px 6px;
        border-radius: 14px;
        box-shadow: none;
      }
      .bubble.thinking.them{
        background: var(--surface2);
      }
      .bubble.thinking .bubbleText{
        line-height: 1.1;
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .bubble.thinking .typingDots{
        height: 12px;
      }
      .bubble.thinking .typingLabel{
        font-size: 12px;
        color: var(--wa-muted);
      }
      .bubble.thinking.me::after,
      .bubble.thinking.them::after{
        width: 10px;
        height: 10px;
        bottom: 8px;
      }
      .bubble.thinking.me::after{ right:-5px; }
      .bubble.thinking.them::after{
        left:-5px;
        background: #f2f2f7;
      }
      .bubbleMeta{
        margin-top: 0;
        font-size: 11px;
        line-height: 1.1;
        font-weight: 400;
        letter-spacing: 0;
        font-variant-numeric: tabular-nums;
        color: var(--chat-meta-muted);
        display:flex;
        justify-content:flex-end;
        gap:3px;
        align-items:flex-end;
        flex-wrap: nowrap;
        white-space: nowrap;
        user-select: none;
        align-self: flex-end;
        min-width: max-content;
      }
      .bubble.emojiOnly .bubbleMeta{
        position: static;
        margin: 0;
        color: var(--chat-meta-muted);
        text-shadow: none;
        background: none;
        padding: 0;
        border-radius: 0;
        align-self: flex-end;
      }
      .bubble.emojiOnly.me .bubbleMeta{
        color: var(--chat-meta-outgoing-emoji);
      }
      .bubbleStar{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        color: #d4a017;
        font-size: 11px;
        line-height: 1;
        transform: translateY(-.5px);
      }
      .bubbleEdited{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        color: inherit;
        font-size: 10px;
        font-weight: 400;
        line-height: 1;
        text-transform: lowercase;
        letter-spacing: 0;
      }
      .bubbleTime{
        opacity: 1;
        color: inherit;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
      }
      .bubbleTicks{ display:inline-flex; align-items:center; }
      @keyframes bubbleUploadSpin { to { transform: rotate(360deg); } }
      .bubbleUploadState{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width: 24px;
        height: 24px;
        min-width: 24px;
        min-height: 24px;
        padding: 0;
        border-radius: 999px;
        flex: 0 0 24px;
        font-size: 0;
        line-height: 0;
        color: transparent;
        overflow: hidden;
        background: linear-gradient(180deg, #57b6ff 0%, #0a84ff 100%);
        box-shadow: 0 7px 16px rgba(10,132,255,.28);
      }
      .bubbleUploadState::before{
        content:"";
        width: 12px;
        height: 12px;
        border-radius: 999px;
        border: 2px solid rgba(255,255,255,.28);
        border-top-color: rgba(255,255,255,.98);
        animation: bubbleUploadSpin .72s linear infinite;
        flex: 0 0 auto;
      }
      .bubble.hasVisualMedia.visualMediaOverlay .mediaBubbleFrame::after{
        content:none;
      }
      .bubble.hasVisualMedia.visualMediaOverlay .bubbleMeta{
        position: absolute;
        right: 6px;
        bottom: 6px;
        z-index: 4;
        pointer-events: none;
        margin: 0;
        gap: 3px;
        color: var(--chat-meta-on-media);
        background: none;
        box-shadow: none;
        padding: 0;
        border-radius: 0;
        min-height: 0;
        backdrop-filter: none;
        font-weight: 500;
      }
      .bubble.hasFileCard .bubbleMeta{
        color: var(--chat-meta-on-media);
        text-shadow: var(--chat-meta-shadow-media);
        background: rgba(0,0,0,.28);
        padding: 2px 6px;
        border-radius: 999px;
      }
      .bubble.hasFileCard .bubbleTime,
      .bubble.hasLocationCard .bubbleTime,
      .bubble.hasFileCard .bubbleEdited{
        color: #fff;
        text-shadow: inherit;
      }
      .bubble.hasLocationCard .bubbleMeta{
        color: var(--chat-meta-on-media);
        text-shadow: var(--chat-meta-shadow-media);
        background: rgba(0,0,0,.28);
        padding: 2px 6px;
        border-radius: 999px;
      }
      .bubble.hasLocationCard .bubbleEdited{
        color: inherit;
        text-shadow: inherit;
      }
      .bubble.hasVisualMedia:not(.stickerMedia){
        width: min(84vw, 340px);
        inline-size: min(84vw, 340px);
        max-width: min(84vw, 340px);
        min-width: min(220px, 72vw);
      }
      .bubble.hasVisualMedia .bubbleText{
        width: 100%;
      }
      .bubble.hasVisualMedia.visualMediaOverlay .bubbleTime{
        opacity: 1;
        color: #fff;
        font-size: 11px;
        text-shadow: var(--chat-meta-shadow-media);
      }
      .bubble.hasVisualMedia.visualMediaOverlay .bubbleTicks{
        gap: 1px;
        line-height: 1;
      }
      .bubble.hasVisualMedia.visualMediaOverlay .bubbleTicks .ticks{
        color: var(--chat-meta-on-media);
        opacity: 1;
        font-size: 11px;
        letter-spacing: 0;
        text-shadow: var(--chat-meta-shadow-media);
        transform: translateY(-.2px);
      }
      .bubble.hasVisualMedia.visualMediaOverlay .bubbleTicks .ticks.double{
        letter-spacing: -1.2px;
      }
      .bubble.hasVisualMedia.visualMediaOverlay .bubbleTicks .ticks.green{
        color: var(--wa-read-blue);
      }
      .bubble.hasVisualMedia.visualMediaOverlay .bubbleTicks .ticks.pending{
        color: rgba(255,255,255,.82);
      }
      .bubble.hasVisualMedia.visualMediaOverlay .msgStateClock path{
        stroke: rgba(255,255,255,.92);
      }
      .bubble.hasVisualMedia.visualMediaOverlay .retryBtn{
        color: rgba(255,255,255,.92);
      }
      .bubble.hasVisualMedia.visualMediaOverlay .bubbleUploadState{
        width: 18px;
        height: 18px;
        min-width: 18px;
        min-height: 18px;
        flex: 0 0 18px;
        background: rgba(255,255,255,.18);
        box-shadow: none;
      }
      .bubble.hasVisualMedia.visualMediaOverlay .bubbleUploadState::before{
        width: 10px;
        height: 10px;
        border-width: 1.7px;
      }
      .bubble.hasVisualMedia.visualMediaCaptioned .bubbleMeta{
        position: static;
        right: auto;
        bottom: auto;
        z-index: auto;
        pointer-events: none;
        margin-top: 2px;
        gap: 3px;
        color: var(--chat-meta-muted);
        background: none;
        box-shadow: none;
        padding: 0;
        border-radius: 0;
        min-height: 0;
        backdrop-filter: none;
        align-self: flex-end;
      }
      .bubble.hasVisualMedia.visualMediaCaptioned .bubbleTime{
        color: inherit;
        font-size: 11px;
        text-shadow: none;
      }
      .bubble.hasVisualMedia.visualMediaCaptioned .bubbleTicks .ticks{
        font-size: 11px;
        letter-spacing: 0;
        text-shadow: none;
      }
      .bubble.hasVisualMedia.visualMediaCaptioned .bubbleTicks .ticks.double{
        letter-spacing: -1.3px;
      }
      .bubble.hasVisualMedia.visualMediaCaptioned .msgStateClock path{
        stroke: currentColor;
      }
      .bubble.hasVisualMedia.visualMediaCaptioned .bubbleUploadState{
        width: 16px;
        height: 16px;
        min-width: 16px;
        min-height: 16px;
        flex: 0 0 16px;
        background: rgba(15,23,42,.12);
        box-shadow: none;
      }
      .ticks{
        font-weight: 700;
        letter-spacing: 0;
        opacity:.85;
      }
      .ticks.double{ letter-spacing: -1.35px; }
      .ticks.green{ color: var(--wa-read-blue); opacity: 1; }
      /* WhatsApp-like message lifecycle */
      .ticks.pending{ color: #9aa0a6; opacity: 1; }
      /* Message state icon (subtle; no animation) */
      .msgStateSpinner,
      .msgStateClock{
        display:inline-flex;
        width: 14px;
        height: 14px;
        align-items:center;
        justify-content:center;
        opacity: .70;
        transform: translateY(1px); /* visually align with text baseline */
      }
      .msgStateSpinner svg,
      .msgStateClock svg{ width: 14px; height: 14px; display:block; }
      .msgStateSpinner path,
      .msgStateClock path{
        stroke: #9aa0a6;
        stroke-width: 2.2;
        fill: none;
        stroke-linecap: round;
      }
      .retryBtn{
        border: 0;
        background: transparent;
        padding: 0;
        margin: 0;
        cursor: pointer;
        font-size: 13px;
        line-height: 1;
        color: rgba(17,17,17,.48);
        opacity: .95;
      }
      .retryText{
        display:none;
      }
      .bubble.pending{ opacity: .9; }
      .bubble.failed{
        /* Subtle, recoverable failure state (no loud red blocks) */
        box-shadow: 0 0 0 2px rgba(245, 158, 11, .22);
      }

      /* No reactions yet (DM bubbles stay clean) */
      .msgActionTarget{
        position: relative;
        z-index: 10000;
      }
      .msgActionTarget .bubble,
      .msgActionTarget .roomsChatBubble{
        box-shadow: 0 0 0 1px rgba(17, 177, 78, .28), 0 16px 36px rgba(11, 28, 21, .18);
        transform: translateY(-1px);
      }


      /* Location / attachment cards inside bubble */
      .waCard{
        margin-top: 8px;
        border-radius: var(--rLg);
        border: 1px solid var(--border);
        background: var(--surface);
        overflow:hidden;
        box-shadow: 0 1px 2px rgba(15,23,42,.05);
      }
      .bubble.me .waCard{
        background: rgba(255,255,255,.94);
        border-color: rgba(15,23,42,.08);
      }
      .waCard .waCardTop{
        padding: 10px 10px 0;
        font-weight: 900;
      }
      .waCard .waCardBody{
        padding: 8px 10px 10px;
        color: #334;
        font-size: 13px;
      }
      .waCardBtn{
        width: 100%;
        border: 0;
        border-top: 1px solid var(--border);
        background: var(--surface);
        padding: 10px;
        font-weight: 900;
        cursor:pointer;
        color: var(--brand);
      }
      .waCardBtn:focus-visible{
        outline: none;
        box-shadow: 0 0 0 3px var(--brandRing);
      }

      /* Media bubbles (WhatsApp/Telegram-like) */
      .bubble.media{
        padding: 0;
        border: 0;
        background: transparent;
      }
      .bubble.media.me{ background: transparent; }
      .bubble.media.them{ background: transparent; }

      .mediaBubble{
        border: 0;
        padding: 0;
        margin: 0;
        background: transparent;
        cursor: pointer;
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        text-align: left;
      }
      .bubbleText + .mediaBubble{ margin-top: 8px; }
      .mediaBubble:focus-visible{
        outline: none;
        box-shadow: 0 0 0 3px var(--brandRing);
        border-radius: 18px;
      }

      /* Voice message bubbles */
      .voiceMsg{
        width: clamp(232px, 72vw, 316px);
        max-width: min(82vw, 316px);
        min-width: min(232px, 100%);
        display:flex;
        align-items:center;
        gap: 9px;
        border: 0;
        padding: 8px 10px;
        border-radius: 16px;
        cursor: pointer;
        background: rgba(255,255,255,.72);
        box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset;
        -webkit-tap-highlight-color: transparent;
        box-sizing: border-box;
      }
      .bubble.me .voiceMsg{
        background: transparent;
        box-shadow: none;
      }
      .bubble.hasVoice{
        --voice-wave-trailing-gap: 74px;
        width: auto;
        inline-size: auto;
        max-width: min(92vw, 340px);
        max-inline-size: min(92vw, 340px);
        min-width: 0;
        min-inline-size: 0;
        box-sizing: border-box;
        gap: 1px;
        padding: 8px 10px 13px;
        border-radius: 16px;
        overflow: hidden;
      }
      .bubble.me.hasVoice{
        --voice-wave-trailing-gap: 94px;
        background: #d9fdd3;
        border-color: rgba(0,0,0,.02);
        border-top-right-radius: 6px;
        box-shadow: none;
      }
      .bubble.hasVoice .voiceMsg{
        padding: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        position: relative;
        display:flex;
        align-items:center;
        gap: 10px;
      }
      .voiceMsg:disabled,
      .voiceMsg.disabled{
        cursor: default;
        opacity: .72;
      }
      .voiceMsg .voicePlay{
        width: 30px;
        height: 30px;
        border-radius: 999px;
        display:flex;
        align-items:center;
        justify-content:center;
        font-weight: 900;
        font-size: 10px;
        background: rgba(255,255,255,.58);
        color: rgba(29,38,48,.88);
        flex: 0 0 auto;
        position: relative;
        margin-top: 0;
        box-shadow: inset 0 0 0 1px rgba(15,23,42,.04);
      }
      .bubble.me .voiceMsg .voicePlay{
        background: rgba(255,255,255,.52);
        color: rgba(27,38,34,.92);
        box-shadow: inset 0 0 0 1px rgba(27,149,11,.06);
      }
      .voiceMain{
        min-width: 0;
        flex: 1;
        display:flex;
        flex-direction:column;
        gap: 2px;
        padding-top: 0;
      }

      @keyframes voiceSpin { to { transform: rotate(360deg); } }
      @keyframes voiceWaveLoading {
        0% { background-position: 180% 0; }
        100% { background-position: -40% 0; }
      }
      .voiceMsg[data-voice-state="loading"] .voicePlay::after{
        content:"";
        width: 24px;
        height: 24px;
        border-radius: 999px;
        background: conic-gradient(
          from 0deg,
          rgba(55,176,84,0) 0deg 54deg,
          rgba(27,149,11,.98) 54deg 210deg,
          rgba(55,176,84,.24) 210deg 360deg
        );
        -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
        mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
        animation: voiceSpin .72s linear infinite;
        position:absolute;
        transform-origin: center;
        will-change: transform;
      }
      .voiceMsg[data-voice-state="loading"] .voicePlay::before{
        content:"";
        position:absolute;
        inset: 6.5px;
        border-radius: 999px;
        background: rgba(255,255,255,.96);
      }
      .voiceMsg[data-voice-state="loading"] .voicePlay{
        background: linear-gradient(180deg, #fff, #f4faf3);
      }
      .voiceMsg[data-voice-state="loading"] .voicePlay{ color: transparent; }
      .voiceMsg[data-voice-state="loading"] .voiceWave{
        opacity: 1;
        background: transparent;
        animation: none;
      }
      .voiceMsg[data-voice-state="loading"] .voiceWave::before{
        width: var(--voiceProgressPct, 0%);
        background: rgba(17,17,17,.09);
      }
      .voiceMsg[data-voice-state="loading"] .voiceWave::after{
        opacity: 0;
      }
      .voiceMsg[data-voice-state="loading"] .voiceBar{
        background: rgba(17,17,17,.19);
      }
      .voiceMsg[data-voice-state="loading"] .voiceDur{
        color: rgba(17,17,17,.62);
      }
      .voiceMsg[data-voice-state="loading"] .voiceRate{
        display: none;
      }

      .voiceWave{
        min-width:0;
        width: 100%;
        height: 14px;
        display:flex;
        align-items:center;
        position: relative;
        border-radius: 999px;
        overflow: hidden;
        padding: 0;
        opacity: .96;
        background: transparent;
        cursor: pointer;
        touch-action: none;
        box-sizing: border-box;
        padding-left: 1px;
        padding-right: var(--voice-wave-trailing-gap, 14px);
      }
      /* Subtle progress wash over the bars */
      .voiceWave::before{
        content:"";
        position:absolute;
        left: var(--voiceTrackPadLeftPx, 0px);
        top: 0;
        bottom: 0;
        width: var(--voiceProgressSpanPx, var(--voiceProgressPct, 0%));
        background: rgba(17,17,17,.10);
        pointer-events:none;
      }
      .bubble.me .voiceWave::before{
        background: rgba(0,0,0,.11);
      }
      .voiceWave::after{
        content:"";
        position:absolute;
        left: var(--voiceProgressDotXPx, var(--voiceProgressPct, 0%));
        top: 50%;
        width: 7px;
        height: 7px;
        border-radius: 999px;
        background: rgba(17,17,17,.92);
        box-shadow: 0 0 0 1px rgba(255,255,255,.70);
        transform: translate(-50%, -50%);
        opacity: 0;
        pointer-events:none;
        z-index: 2;
        transition: opacity .16s ease, transform .16s ease;
      }
      .bubble.me .voiceWave::after{
        background: rgba(17,17,17,.92);
      }
      .voiceMsg[data-voice-state="playing"] .voiceWave::after,
      .voiceMsg[data-voice-state="paused"] .voiceWave::after,
      .voicePreview.playing .voiceWave::after,
      .voiceWave.scrubbing::after{
        opacity: 1;
      }
      .voiceWave.scrubbing::after{
        transform: translate(-50%, -50%) scale(1.06);
      }
      .voiceMetaRow{
        display:flex;
        align-items:center;
        justify-content:flex-start;
        gap: 8px;
        min-height: 12px;
        padding-right: calc(var(--voice-wave-trailing-gap, 14px) + 4px);
      }
      .voiceBars{
        position: relative;
        width: 100%;
        display:flex;
        align-items:center;
        justify-content: space-between;
        gap: 1px;
        z-index: 1;
      }
      .voiceBar{
        flex: 1 1 0;
        min-width: 2px;
        max-width: 2px;
        border-radius: 999px;
        background: rgba(17,17,17,.14);
      }
      .bubble.me .voiceBar{ background: rgba(89,112,83,.40); }

      .voiceDur{
        flex: 0 0 auto;
        font-size: 9px;
        line-height: 1;
        font-weight: 600;
        color: rgba(17,17,17,.40);
        font-variant-numeric: tabular-nums;
        min-width: 0;
        text-align: left;
        letter-spacing: -.01em;
      }
      .bubble.me .voiceDur{ color: rgba(17,17,17,.42); }
      .voiceRate{
        flex: 0 0 auto;
        min-width: 28px;
        height: 18px;
        padding: 0 6px;
        display:none;
        align-items:center;
        justify-content:center;
        border-radius: 999px;
        background: rgba(17,17,17,.05);
        color: rgba(17,17,17,.64);
        font-size: 10px;
        font-weight: 900;
        letter-spacing: -.01em;
        font-variant-numeric: tabular-nums;
        user-select: none;
        -webkit-user-select: none;
      }
      .bubble.me .voiceRate{
        background: rgba(255,255,255,.36);
        color: rgba(0,0,0,.78);
      }
      .voiceMsg[data-voice-state="playing"] .voiceRate,
      .voiceMsg[data-voice-state="paused"] .voiceRate{
        display:flex;
      }
      .voiceMsg[data-voice-state="playing"] .voiceRate{
        background: rgba(55,176,84,.12);
        color: rgba(27,149,11,.84);
      }
      .bubble.hasVoice .bubbleMeta{
        position: absolute;
        right: 10px;
        bottom: 6px;
        margin: 0;
        padding: 0;
        z-index: 2;
        color: var(--chat-meta-muted);
        text-shadow: none;
        background: none;
        border-radius: 0;
      }
      .bubble.hasVoice .bubbleTime,
      .bubble.hasVoice .bubbleEdited{
        color: inherit;
        text-shadow: none;
      }
      .bubble.hasVoice .bubbleTicks .ticks{
        text-shadow: none;
      }
      .bubble.hasVoice .bubbleUploadState{
        width: 18px;
        height: 18px;
        min-width: 18px;
        min-height: 18px;
        flex: 0 0 18px;
        box-shadow: 0 4px 10px rgba(10,132,255,.20);
      }
      .bubble.hasVoice .bubbleUploadState::before{
        width: 8px;
        height: 8px;
        border-width: 1.6px;
      }

      /* Error state: keep it calm, but clearly retry-able */
      .voiceMsg[data-voice-state="error"] .voicePlay{
        background: rgba(245, 158, 11, .14);
        color: rgba(17,17,17,.82);
      }
      .bubble.me .voiceMsg[data-voice-state="error"] .voicePlay{
        background: rgba(245, 158, 11, .22);
        color: rgba(17,17,17,.92);
      }

      .mediaBubbleFrame{
        width: 100%;
        aspect-ratio: 4 / 3;
        border-radius: 16px;
        overflow: hidden;
        position: relative;
        background: rgba(0,0,0,.06);
        border: 1px solid rgba(0,0,0,.10);
        max-height: 260px; /* cap giant images */
      }
      .mediaBubbleFrame.uploading .mediaBubbleImg,
      .mediaBubbleFrame.uploading .mediaBubbleVid{
        filter: saturate(.985) brightness(.978);
      }
      .bubble.me .mediaBubbleFrame{
        border-color: rgba(255,255,255,.18);
        background: rgba(0,0,0,.12);
      }

      .mediaBubbleImg,
      .mediaBubbleVid{
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        background: transparent;
      }

      .bubble.stickerMedia{
        min-width: 0;
        padding: 0 2px 16px 2px;
        border: 0;
        background: transparent;
        box-shadow: none;
        margin-inline: 0;
      }
      .bubble.stickerMedia.me,
      .bubble.stickerMedia.them{
        background: transparent;
      }
      .stickerMediaBubble{
        width: fit-content;
        inline-size: fit-content;
        max-width: min(208px, calc(100vw - 120px));
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        cursor: default;
        overflow: visible;
        padding-inline: 0;
        box-sizing: border-box;
        margin-inline-start: 10px;
        margin-inline-end: 0;
      }
      .bubbleRow.me .stickerMediaBubble{
        align-items: flex-end;
        margin-inline-start: 0;
        margin-inline-end: 14px;
      }
      .stickerMediaFrame{
        width: auto;
        min-width: 96px;
        min-height: 96px;
        max-width: min(208px, calc(100vw - 120px));
        max-height: 264px;
        aspect-ratio: auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        background: transparent;
        overflow: visible;
        padding: 1px 2px;
        box-sizing: border-box;
      }
      .bubble.stickerMedia .stickerMediaFrame,
      .bubble.stickerMedia.me .stickerMediaFrame,
      .bubble.stickerMedia.them .stickerMediaFrame{
        border: 0;
        background: transparent;
        box-shadow: none;
        overflow: visible;
      }
      .stickerMediaImg{
        display: block;
        width: auto;
        height: auto;
        max-width: min(204px, calc(100vw - 128px));
        max-height: 256px;
        object-fit: contain;
        border-radius: 14px;
        margin: 0 auto;
      }
      .bubble.stickerMedia .stickerMediaImg{
        width: auto;
        height: auto;
        object-fit: contain;
        background: transparent;
      }
      .bubble.stickerMedia .bubbleMeta{
        position: static;
        align-self: flex-start;
        display: inline-flex;
        width: auto;
        min-width: 0;
        max-width: max-content;
        justify-content: flex-start;
        gap: 2px;
        margin-top: 1px;
        color: var(--chat-meta-muted);
        background: none;
        box-shadow: none;
        padding: 0;
        border-radius: 0;
        text-shadow: none;
      }
      .bubbleRow.me .bubble.stickerMedia .bubbleMeta{
        align-self: flex-end;
        justify-content: flex-end;
        color: var(--chat-meta-outgoing-emoji);
      }
      .bubble.stickerMedia .bubbleTime,
      .bubble.stickerMedia .bubbleEdited{
        color: inherit;
        text-shadow: none;
      }
      .bubble.stickerMedia .bubbleTicks .ticks{
        text-shadow: none;
      }
      .bubble.stickerMedia .bubbleTicks .ticks.green{
        color: var(--wa-read-blue);
      }

      .mediaBubbleOverlay{
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
      }
      .mediaBubbleFrame.failed .mediaBubbleOverlayPlay{ display:none; }
      .mediaBubblePlay{
        width: 56px;
        height: 56px;
        border-radius: 999px;
        background: rgba(0,0,0,.45);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        font-weight: 900;
        box-shadow: var(--shadowSm);
      }

      .mediaBubblePlaceholder{
        position: absolute;
        inset: 0;
        display: none;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 8px;
        background:
          radial-gradient(120px 90px at 30% 35%, rgba(255,255,255,.10), rgba(255,255,255,0) 60%),
          linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.06));
      }
      .mediaBubbleFrame.loading .mediaBubblePlaceholder{ display: flex; }
      .mediaBubbleFrame.loading.streaming .mediaBubblePlaceholder{
        opacity: 0;
        pointer-events: none;
        transition: opacity .16s ease;
      }
      .mediaBubbleFrame.loading .mediaBubbleRetry,
      .mediaBubbleFrame.loading .mediaBubbleRetryText{ display: none; }
      .mediaBubbleRetry{
        width: 44px;
        height: 44px;
        border-radius: 999px;
        background: rgba(0,0,0,.40);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        font-weight: 900;
      }
      .mediaBubbleRetryText{
        font-size: 12px;
        font-weight: 800;
        color: rgba(255,255,255,.92);
        letter-spacing: .1px;
      }
      .mediaBubbleFrame.loaded .mediaBubblePlaceholder{ display: none; }
      .mediaBubbleFrame.failed .mediaBubblePlaceholder{ display: flex; }
      .mediaBubbleFrame.failed .mediaBubbleImg,
      .mediaBubbleFrame.failed .mediaBubbleVid{ display: none; }

      /* Network status (WhatsApp-like): subtle overlay pill; never pushes content */
      .netBanner{
        position: absolute;
        left: 50%;
        top: calc(56px + env(safe-area-inset-top, 0px) + 8px);
        transform: translateX(-50%);
        z-index: 8;
        padding: 0;
        background: transparent;
        border: 0;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        pointer-events: none;
        max-width: 92%;
      }
      .netBanner.hidden{ display:none; }
      .netBanner .netPill{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap: 8px;
        padding: 7px 10px;
        border-radius: 999px;
        background: rgba(0,0,0,.55);
        color: rgba(255,255,255,.96);
        font-size: 12px;
        font-weight: 900;
        letter-spacing: .1px;
        box-shadow: 0 8px 24px rgba(0,0,0,.14);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .netBanner .netSpin{
        width: 12px;
        height: 12px;
        border-radius: 999px;
        border: 2px solid rgba(255,255,255,.35);
        border-top-color: rgba(255,255,255,.92);
        animation: netSpin 900ms linear infinite;
        flex: 0 0 auto;
      }
      @keyframes netSpin{
        to{ transform: rotate(360deg); }
      }

      .waThumbWrap{
        margin-top: 8px;
        border-radius: 12px;
        overflow:hidden;
        border: 1px solid rgba(0,0,0,.08);
        background: rgba(0,0,0,.03);
      }
      .waThumb{
        width:100%;
        max-height: 260px;
        object-fit: cover;
        display:block;
      }
      .waSmall{
        font-size: 12px;
        color: var(--wa-muted);
        margin-top: 6px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
      }
      /* Friendly Shared Location card (never show coords) */
      .waLocTop{
        display:flex;
        gap:10px;
        padding: 12px 12px 8px;
        align-items:flex-start;
      }
      .waLocIcon{
        width: 32px;
        height: 32px;
        border-radius: 12px;
        background: rgba(52, 168, 83, .10);
        display:flex;
        align-items:center;
        justify-content:center;
        flex:0 0 auto;
        font-size: 16px;
        line-height: 1;
      }
      .bubble.me .waLocIcon{
        background: rgba(52, 168, 83, .12);
      }
      .waLocTitle{
        font-weight: 900;
        color: var(--text);
        line-height: 1.2;
        font-size: 15px;
      }
      .waLocSub{
        margin-top: 2px;
        font-size: 13px;
        color: var(--muted);
        line-height: 1.2;
      }
      .waLocHint{
        padding: 0 12px 12px;
        font-size: 12px;
        color: var(--wa-muted);
      }


      /* Composer (WhatsApp-like) */
      .composer{
        background: var(--surface);
        border-top: 1px solid var(--divider);
        padding: 8px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        display:flex;
        gap:10px;
        align-items:flex-end;
        position: relative; /* anchor floating recording overlay */
      }
      html.is-native-app .composer{
        background: #fff;
        border-top: 0;
        padding: 6px 8px;
        gap: 8px;
      }
      html.is-native-app.keyboard-open .composer{
        background: #fff;
        border-top: 0;
        padding: 6px 8px;
        gap: 8px;
      }
      /* Chat bottom stack: footer msg + attachment preview + composer (IC0 layout stability) */
      .chatBottom{
        flex: 0 0 auto;
        display:flex;
        flex-direction:column;
        min-height: 0;
      }
      .chatBottom,
      #roomsChatComposerWrap{
        transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
      }
      .chatBottom .composer,
      #roomsChatComposer{
        transition: padding 180ms ease, gap 180ms ease, background-color 180ms ease;
      }
      .chatBottom.hasReply .chatReplyStrip,
      #roomsChatComposerWrap.hasReply .chatReplyStrip{
        background: linear-gradient(180deg, rgba(27,149,11,.045) 0%, rgba(255,255,255,.98) 100%);
        border-top-color: rgba(27,149,11,.10);
      }
      .chatBottom.hasAssist .composerAssist,
      #roomsChatComposerWrap.hasAssist .composerAssist{
        padding-top: 6px;
      }
      .chatBottom.hasPreview .composer,
      #roomsChatComposerWrap.hasPreview .composer{
        padding-top: 6px;
      }
      .chatBottom.inputFocused:not(.recordingActive),
      #roomsChatComposerWrap.inputFocused{
        border-top-color: rgba(27,149,11,.14);
        box-shadow: 0 -10px 24px rgba(15,23,42,.04);
      }
      html.is-native-app .chatBottom.inputFocused:not(.recordingActive),
      html.is-native-app #roomsChatComposerWrap.inputFocused{
        box-shadow: 0 -6px 18px rgba(15,23,42,.035);
      }
      .chatBottom.canSend .sendBtn:not(:disabled),
      #roomsChatComposerWrap.canSend .sendBtn:not(:disabled){
        box-shadow: 0 12px 24px rgba(55,176,84,.22);
      }
      html.is-native-app .chatBottom.canSend .sendBtn:not(:disabled),
      html.is-native-app #roomsChatComposerWrap.canSend .sendBtn:not(:disabled){
        box-shadow: 0 8px 18px rgba(55,176,84,.18);
      }
      .composerAssist{
        display:flex;
        justify-content:flex-end;
        align-items:center;
        min-height: 18px;
        padding: 4px 14px 0;
        background: #fff;
      }
      .composerAssist.hidden{ display:none !important; }
      .composerAssistText{
        font-size: 11px;
        line-height: 1.25;
        font-weight: 700;
        letter-spacing: .01em;
        color: rgba(60,60,67,.58);
      }
      .composerAssist[data-tone="warn"] .composerAssistText{
        color: #946200;
      }
      .composerAssist[data-tone="danger"] .composerAssistText{
        color: #c62828;
      }
      html.is-native-app .chatBottom{
        background: #fff;
        border-top: 1px solid rgba(15,23,42,.08);
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }
      .chatBottom.recordingActive .composerAssist{
        display:none !important;
      }
      .chatBottom.editingMessage .composerAssist{
        display:none !important;
      }
      .chatBottom.recordingActive .composer{
        min-height: 56px;
        padding: 0 8px calc(8px + env(safe-area-inset-bottom, 0px));
        border-top: 0;
        background: #fff;
        align-items: center;
      }
      .chatBottom.editingMessage .composer{
        min-height: 52px;
        align-items: center;
      }
      html.is-native-app .chatBottom.recordingActive .composer,
      html.is-native-app.keyboard-open .chatBottom.recordingActive .composer{
        padding: 0 8px calc(8px + env(safe-area-inset-bottom, 0px));
      }
      html.is-native-app .chatBottom.editingMessage .composer,
      html.is-native-app.keyboard-open .chatBottom.editingMessage .composer{
        padding: 6px 8px;
        gap: 8px;
      }
      .chatBottom.recordingActive .composer > :not(.recOverlay){
        display: none !important;
      }
      .chatBottom.recordingActive .recOverlay{
        bottom: calc(env(safe-area-inset-bottom, 0px) + 4px);
      }
      html.is-native-app .composerAssist{
        background: #fff;
      }
      .aiRetryRow{
        display:flex;
        align-items:center;
        justify-content: space-between;
        gap: 10px;
        padding: 8px 10px;
        background: var(--surface);
        border-top: 1px solid var(--divider);
      }
      .aiRetryText{
        font-size: 13px;
        color: var(--wa-muted);
      }
      .aiRetryBtn{
        border: 1px solid rgba(15,23,42,0.08);
        background: rgba(15,23,42,0.04);
        border-radius: 999px;
        padding: 6px 12px;
        font-weight: 800;
        font-size: 12px;
        cursor:pointer;
      }
      .aiRetryBtn:active{ background: rgba(15,23,42,0.08); }
      .aiRetryBtn:focus-visible{
        outline: none;
        box-shadow: 0 0 0 3px var(--brandRing);
      }
      .compIcon{
        width: 44px;
        height: 44px;
        border-radius: 999px;
        border: 1px solid rgba(0,0,0,.06);
        background: rgba(255,255,255,.88);
        cursor:pointer;
        display:flex;
        align-items:center;
        justify-content:center;
        flex:0 0 auto;
      }
      html.is-native-app .compIcon{
        width: 40px;
        height: 40px;
        border-color: rgba(15,23,42,.08);
        background: #fff;
        box-shadow: none;
      }
      .composerEditCancelBtn{
        background: rgba(246,247,249,.96);
        border-color: rgba(60,60,67,.14);
      }
      .composerEditCancelBtn svg{
        width: 18px;
        height: 18px;
        fill: none;
        stroke: rgba(60,60,67,.72);
        stroke-width: 2.15;
        stroke-linecap: round;
      }
      html.is-native-app .compIcon svg{ width:20px; height:20px; }
      .compIcon svg{ width:22px; height:22px; fill: var(--muted); }
      #chatOverlay.aiTextOnly .composer{
        gap: 10px;
        padding-left: 10px;
        padding-right: 10px;
      }
      #chatOverlay.aiTextOnly .composer .compPlusBtn,
      #chatOverlay.aiTextOnly .composer .voiceBtn{
        display: none;
      }
      #chatOverlay.aiTextOnly .composer textarea{
        min-height: 40px;
      }
      .composer textarea{
        flex:1;
        border-radius: 999px;
        min-height: 40px;
        max-height: 140px;
        padding: 9px 14px;
        resize:none;
        overflow-y:auto;
        overflow-x:hidden;
        line-height: 20px;
        background: #fff;
        border: 1px solid rgba(0,0,0,.08);
        text-align: start;
        unicode-bidi: plaintext;
        user-select: text;
        -webkit-user-select: text;
        -webkit-touch-callout: default;
      }
      html.is-native-app .composer textarea{
        min-height: 38px;
        padding: 8px 14px;
        border-color: rgba(60,60,67,.12);
        box-shadow: none;
      }
      .chatBottom.editingMessage .composer textarea{
        border-color: rgba(27,149,11,.18);
        box-shadow: inset 0 0 0 1px rgba(27,149,11,.08);
      }
      html.is-native-app .chatBottom.editingMessage .composer textarea{
        border-color: rgba(27,149,11,.18);
        box-shadow: inset 0 0 0 1px rgba(27,149,11,.08);
      }
      .composer textarea:focus,
      .composer textarea:focus-visible{
        outline: none;
        border-color: rgba(27,149,11,.26);
        box-shadow: 0 0 0 2px rgba(27,149,11,.08);
      }
      html.is-native-app .composer textarea:focus,
      html.is-native-app .composer textarea:focus-visible{
        border-color: rgba(60,60,67,.22);
        box-shadow: 0 0 0 1px rgba(60,60,67,.10);
      }
      .composer textarea::placeholder{
        color: rgba(60,60,67,.55);
      }
      .roomsChatPreviewCaption,
      .photoSendCaption,
      .mediaComposerInput{
        text-align: start;
        user-select: text;
        -webkit-user-select: text;
        -webkit-touch-callout: default;
      }
      .composer textarea[dir="rtl"],
      .roomsChatPreviewCaption[dir="rtl"],
      .photoSendCaption[dir="rtl"],
      .mediaComposerInput[dir="rtl"]{
        direction: rtl;
        text-align: right;
      }
      .composer textarea[dir="ltr"],
      .roomsChatPreviewCaption[dir="ltr"],
      .photoSendCaption[dir="ltr"],
      .mediaComposerInput[dir="ltr"]{
        direction: ltr;
        text-align: left;
      }
      .sendBtn{
        width: 48px;
        height: 48px;
        min-height: 48px;
        border-radius: 999px;
        border:0;
        padding: 0;
        font-weight: 900;
        cursor:pointer;
        background: var(--accent);
        color:#fff;
        box-shadow: var(--shadowSm);
        display:flex;
        align-items:center;
        justify-content:center;
        transition: background-color 160ms ease, box-shadow 160ms ease, transform 120ms ease;
      }
      html.is-native-app .sendBtn{
        width: 44px;
        height: 44px;
        min-height: 44px;
        box-shadow: none;
      }
      html.is-native-app .sendBtn svg{ width:20px; height:20px; }
      .sendBtn svg{ width: 22px; height: 22px; fill: #fff; transform: translateX(1px); }
      .sendBtn .stopIcon{
        display:none;
        align-items:center;
        justify-content:center;
        width: 16px;
        height: 16px;
      }
      .sendBtn .editConfirmIcon{
        display:none;
        align-items:center;
        justify-content:center;
        width: 18px;
        height: 18px;
      }
      .sendBtn .editConfirmIcon svg{
        width: 18px;
        height: 18px;
        fill: none;
        stroke: #fff;
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
        transform: none;
      }
      .sendBtn .stopIcon svg{
        width: 16px;
        height: 16px;
        fill: none;
        transform: none;
      }
      .sendBtn.saveEdit{
        background: #34c759;
      }
      .sendBtn.saveEdit .sendIcon,
      .sendBtn.saveEdit .stopIcon{
        display:none;
      }
      .sendBtn.saveEdit .editConfirmIcon{
        display:flex;
      }
      .sendBtn.saveEdit:active{
        background: #2fb350;
      }
      .sendBtn.stop{
        background: linear-gradient(180deg, #ffffff 0%, #f7fbf6 100%);
        box-shadow:
          0 8px 18px rgba(27,149,11,.12),
          inset 0 0 0 1.5px rgba(27,149,11,.22);
      }
      .sendBtn.stop .sendIcon{ display:none; }
      .sendBtn.stop .stopIcon{ display:flex; }
      .sendBtn.sending{ opacity: .88; }
      .sendBtn:active{
        background: var(--accent-pressed);
        transform: scale(.97);
      }
      .sendBtn.stop:active{
        background: #eef8eb;
      }
      .sendBtn:disabled{
        opacity:.55;
        cursor:not-allowed;
      }
      .sendBtn:focus-visible{
        outline: none;
        box-shadow: 0 0 0 3px var(--brandRing);
      }
      .compIcon:disabled{
        opacity:.55;
        cursor:not-allowed;
      }
      .voiceBtn{
        touch-action: none; /* allow slide-to-cancel gesture */
        user-select: none;
        -webkit-user-select: none;
      }
      textarea:disabled{
        opacity:.65;
        cursor:not-allowed;
      }

      /* Empty chat state (subtle WhatsApp-like hint) */
      .chatEmptyState{
        align-self: center;
        margin: auto 18px;
        text-align: center;
        pointer-events: none;
      }
      .chatEmptyTitle{
        display:inline-block;
        padding: 8px 12px;
        border-radius: 999px;
        background: rgba(255,255,255,.78);
        border: 1px solid rgba(0,0,0,.06);
        box-shadow: 0 1px 2px rgba(0,0,0,.06);
        font-weight: 800;
        font-size: 13px;
        color: rgba(15,23,42,.72);
      }
      .chatEmptySub{
        margin-top: 8px;
        font-size: 12px;
        font-weight: 700;
        color: rgba(15,23,42,.48);
      }
      .chatLoadingState{
        align-self: center;
        margin: auto 18px;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        border-radius: 999px;
        background: rgba(255,255,255,.82);
        border: 1px solid rgba(0,0,0,.06);
        box-shadow: 0 1px 2px rgba(0,0,0,.06);
        color: rgba(15,23,42,.62);
      }
      .chatLoadingLabel{
        font-size: 13px;
        font-weight: 800;
        line-height: 1;
      }
      .chatLoadingDots{
        display: inline-flex;
        align-items: center;
        gap: 4px;
      }
      .chatLoadingDots span{
        width: 6px;
        height: 6px;
        border-radius: 999px;
        background: rgba(38,171,51,.55);
        animation: chatLoadingPulse 1.1s ease-in-out infinite;
      }
      .chatLoadingDots span:nth-child(2){ animation-delay: .15s; }
      .chatLoadingDots span:nth-child(3){ animation-delay: .3s; }
      @keyframes chatLoadingPulse{
        0%, 80%, 100%{ opacity: .35; transform: scale(.9); }
        40%{ opacity: 1; transform: scale(1); }
      }

      /* Voice note "hold to record" overlay (must NOT push layout) */
      .recOverlay{
        position:absolute;
        left: 7px;
        right: 7px;
        width: auto;
        transform: none;
        bottom: 3px;
        z-index: 60;
        display:none;
        align-items:center;
        gap:10px;
        padding: 9px 12px;
        border-radius: 20px;
        background: rgba(15,23,42,.90);
        border: 1px solid rgba(255,255,255,.08);
        color:#fff;
        box-shadow: 0 10px 24px rgba(15,23,42,.16);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        pointer-events:none;
      }
      .recOverlay.show{
        display:flex;
        pointer-events:auto;
      }
      .recOverlay.cancel{
        background: rgba(45,24,24,.92);
      }
      .recDot{
        width:9px;
        height:9px;
        border-radius:999px;
        background:#ff3b30;
        box-shadow: 0 0 0 3px rgba(255,59,48,.18);
        flex: 0 0 auto;
      }
      .recOverlay.cancel .recDot{
        background:#b0b0b0;
        box-shadow:none;
      }
      .recMain{
        display:flex;
        flex-direction:column;
        gap:2px;
        min-width:0;
        flex:1;
      }
      .recTop{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
      }
      .recLabel{
        font-weight: 900;
        font-size: 13px;
      }
      .recTime{
        font-variant-numeric: tabular-nums;
        font-weight: 900;
        font-size: 13px;
      }
      .recHint{
        font-size: 11px;
        color: rgba(255,255,255,.70);
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
      }
      .recActions{
        display:none;
        gap:6px;
        margin-top: 1px;
      }
      .recOverlay.locked .recActions{ display:flex; }
      .recOverlay:not(.locked) .recActBtn.send{ display:none; }
      .recActBtn{
        border: 1px solid rgba(255,255,255,.14);
        background: rgba(255,255,255,.10);
        color:#fff;
        padding: 6px 11px;
        min-height: 34px;
        border-radius: 13px;
        font-weight: 900;
        font-size: 11px;
        cursor:pointer;
      }
      .recActBtn:disabled{
        opacity:.55;
        cursor:not-allowed;
      }
      .recActBtn.send{
        border: 0;
        background: var(--brand);
        color:#fff;
        box-shadow: var(--shadowSm);
      }

      /* Attachment preview strip */
      .attachPreview{
        display:none;
        gap:10px;
        align-items:center;
        padding: 10px 12px 12px;
        background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,249,.96));
        border-top: 1px solid var(--divider);
      }
      .attachPreviewCard{
        flex:1;
        min-width: 0;
        display:flex;
        align-items:center;
        gap: 12px;
        border: 1px solid var(--controlBorderSoft);
        background: var(--surface2);
        border-radius: 18px;
        padding: 10px 12px;
        box-shadow: 0 1px 2px rgba(15,23,42,.04);
      }
      .attachPreviewThumb{
        width: 64px;
        height: 64px;
        object-fit: cover;
        border-radius: 16px;
        flex: 0 0 auto;
        background: rgba(15,23,42,.06);
        border: 1px solid rgba(15,23,42,.06);
      }
      .attachPreviewIcon{
        width: 48px;
        height: 48px;
        border-radius: 14px;
        display:flex;
        align-items:center;
        justify-content:center;
        flex: 0 0 auto;
        background: rgba(55,176,84,.10);
        color: var(--brand);
        font-size: 22px;
        font-weight: 900;
      }
      .attachPreviewMeta{
        flex: 1;
        min-width: 0;
        display:flex;
        flex-direction:column;
        gap: 3px;
      }
      .attachPreviewTitle{
        font-size: 14px;
        font-weight: 900;
        color: var(--text);
        line-height: 1.2;
      }
      .attachPill{
        font-size: 12px;
        color: var(--wa-muted);
        line-height: 1.35;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:normal;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient: vertical;
      }
      .attachCancel{
        width: 48px;
        height: 48px;
        border-radius: 14px;
        border: 1px solid var(--controlBorder);
        background: var(--surface);
        cursor:pointer;
        font-weight: 900;
      }

      #photoSendBackdrop{
        background: rgba(0,0,0,.58);
        backdrop-filter: blur(3px) saturate(120%);
      }
      #photoSendSheet.photoSendSheet{
        width: min(var(--app-max-w), 100%);
        max-width: var(--app-max-w);
        height: min(100dvh, var(--vvh, 100dvh));
        max-height: min(100dvh, var(--vvh, 100dvh));
        background:
          radial-gradient(circle at top, rgba(68,180,96,.12), transparent 34%),
          linear-gradient(180deg, #121716 0%, #0c100f 100%);
        color: #fff;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
      }
      #photoSendSheet .countryPickerHandleWrap{
        display: none;
      }
      #photoSendSheet .countryPickerHandle{
        width: 38px;
        height: 4px;
        border-radius: 999px;
        background: rgba(255,255,255,.24);
      }
      .photoSendHeader{
        position: absolute;
        top: max(8px, env(safe-area-inset-top, 0px));
        left: 0;
        right: 0;
        z-index: 4;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 14px 16px;
        border-bottom: 0;
        background: linear-gradient(180deg, rgba(5,8,8,.72), rgba(5,8,8,.22) 72%, rgba(5,8,8,0));
      }
      .photoSendBackBtn{
        width: 42px;
        height: 42px;
        border-radius: 999px;
        border: 0;
        background: rgba(255,255,255,.12);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        backdrop-filter: blur(8px) saturate(140%);
      }
      .photoSendBackBtn svg{
        width: 20px;
        height: 20px;
        fill: currentColor;
      }
      .photoSendHeaderText{
        min-width: 0;
        flex: 1 1 auto;
      }
      .photoSendTitle{
        font-size: 17px;
        font-weight: 800;
        color: #fff;
        line-height: 1.15;
      }
      .photoSendSub{
        margin-top: 2px;
        font-size: 11px;
        color: rgba(255,255,255,.62);
      }
      .photoSendCount{
        padding: 7px 10px;
        border-radius: 999px;
        background: rgba(255,255,255,.12);
        color: rgba(255,255,255,.92);
        font-size: 12px;
        font-weight: 800;
        flex: 0 0 auto;
        backdrop-filter: blur(8px) saturate(140%);
      }
      .photoSendBody{
        position: relative;
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: 0;
        background:
          radial-gradient(circle at top, rgba(68,180,96,.10), transparent 34%),
          linear-gradient(180deg, #121716 0%, #0c100f 100%);
        padding: 0 0 calc(146px + env(safe-area-inset-bottom, 0px));
        overflow: hidden;
      }
      .photoSendStage{
        position: relative;
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        border-radius: 0;
        background: transparent;
        border: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: calc(76px + env(safe-area-inset-top, 0px)) 14px 0;
        overflow: hidden;
        box-sizing: border-box;
      }
      .photoSendStage img{
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        border-radius: 18px;
        box-shadow: 0 18px 44px rgba(0,0,0,.28);
        background: transparent;
      }
      .photoSendThumbs{
        position: absolute;
        left: 0;
        right: 0;
        bottom: calc(74px + env(safe-area-inset-bottom, 0px));
        z-index: 4;
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 0 14px;
        scrollbar-width: none;
      }
      .photoSendThumbs::-webkit-scrollbar{
        display: none;
      }
      .photoSendThumb{
        position: relative;
        width: 56px;
        height: 56px;
        border-radius: 16px;
        border: 2px solid transparent;
        background: rgba(255,255,255,.08);
        overflow: hidden;
        flex: 0 0 auto;
        padding: 0;
        box-shadow: 0 8px 18px rgba(0,0,0,.18);
      }
      .photoSendThumb.active{
        border-color: rgba(255,255,255,.96);
        box-shadow: 0 0 0 2px rgba(255,255,255,.18), 0 10px 22px rgba(0,0,0,.24);
      }
      .photoSendThumb img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      .photoSendThumb.addMore{
        border-style: dashed;
        border-color: rgba(255,255,255,.28);
        background: rgba(255,255,255,.08);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .photoSendThumbAddIcon{
        width: 26px;
        height: 26px;
        border-radius: 999px;
        background: rgba(255,255,255,.16);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: 800;
      }
      .photoSendThumbIndex{
        position: absolute;
        top: 6px;
        right: 6px;
        min-width: 18px;
        height: 18px;
        border-radius: 999px;
        background: rgba(0,0,0,.64);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        font-weight: 800;
        padding: 0 4px;
      }
      .photoSendComposer{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 5;
        display: flex;
        align-items: flex-end;
        gap: 10px;
        padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
        border-top: 0;
        background: linear-gradient(180deg, rgba(6,9,9,0), rgba(6,9,9,.72) 28%, rgba(6,9,9,.96));
      }
      html.is-native-app .photoSendComposer{
        padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
      }
      .photoSendCaption{
        flex: 1;
        min-width: 0;
        min-height: 46px;
        max-height: 108px;
        border-radius: 22px;
        border: 1px solid rgba(255,255,255,.10);
        background: rgba(18,24,23,.78);
        color: #fff;
        padding: 11px 16px;
        font-size: 15px;
        line-height: 1.35;
        resize: none;
        overflow-y: hidden;
        field-sizing: content;
        backdrop-filter: blur(8px) saturate(140%);
      }
      .photoSendCaption::placeholder{
        color: rgba(255,255,255,.56);
      }
      .photoSendCaption:focus{
        outline: none;
        border-color: rgba(92,205,117,.72);
        box-shadow: 0 0 0 3px rgba(55,176,84,.12);
      }
      .photoSendSendBtn{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 0;
        background: var(--brand);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        box-shadow: 0 10px 24px rgba(27,149,11,.26);
      }
      .photoSendSendBtn:disabled{
        opacity: .58;
      }
      .photoSendSendBtn svg{
        width: 22px;
        height: 22px;
        fill: currentColor;
      }

      /* Reply preview strip (when replying to a message) */
      .chatReplyStrip{
        display: none;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        background: var(--surface2);
        border-top: 1px solid var(--divider);
        font-size: 13px;
        transition: background-color 180ms ease, border-color 180ms ease, padding 180ms ease;
      }
      .chatReplyStrip:not(.hidden){
        display: flex;
      }
      .chatReplyStripLabel{
        color: var(--muted);
        flex-shrink: 0;
      }
      .chatReplyStripSnippet{
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--text);
      }
      .chatReplyStripClose{
        flex-shrink: 0;
        width: 32px;
        height: 32px;
        border: none;
        background: transparent;
        cursor: pointer;
        color: var(--muted);
        font-size: 16px;
        border-radius: 8px;
      }
      .chatReplyStripClose:hover{ color: var(--text); background: var(--surface); }

      /* Pending voice preview strip (local-only) */
      .voicePreview{
        display:none;
        gap:10px;
        align-items:center;
        padding: 6px 10px;
        padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
        background: transparent;
        border-top: 0;
      }
      html.is-native-app .voicePreview{
        padding: 6px 10px calc(8px + env(safe-area-inset-bottom, 0px));
        background: transparent;
      }
      html.is-native-app.keyboard-open .voicePreview{
        padding: 6px 10px;
      }
      .voicePreview .voicePlay{
        width: 40px;
        height: 40px;
        border-radius: 999px;
        border: 1px solid rgba(15,23,42,.08);
        background: rgba(255,255,255,.96);
        cursor:pointer;
        font-weight: 900;
        flex: 0 0 auto;
        box-shadow: 0 4px 14px rgba(15,23,42,.08);
      }
      .voicePill{
        flex:1;
        border: 1px solid rgba(15,23,42,.08);
        background: rgba(255,255,255,.96);
        border-radius: 999px;
        min-height: 46px;
        padding: 0 12px;
        font-size: 13px;
        color: var(--text);
        display:flex;
        align-items:center;
        gap: 10px;
        min-width: 0;
        box-shadow: 0 8px 20px rgba(15,23,42,.08);
      }
      .voicePreview .attachCancel,
      .voicePreview .voiceSendBtn{
        flex: 0 0 auto;
      }
      html.is-native-app .voicePreview .voicePlay,
      html.is-native-app .voicePreview .attachCancel,
      html.is-native-app .voicePreview .voiceSendBtn{
        width: 40px;
        height: 40px;
        min-height: 40px;
      }
      .voicePreview .attachCancel{
        border-radius: 999px;
        border: 1px solid rgba(15,23,42,.08);
        background: rgba(255,255,255,.96);
        color: rgba(17,17,17,.64);
        box-shadow: 0 6px 20px rgba(15,23,42,.08);
      }
      .voicePreview .voiceSendBtn{
        width: 48px;
        height: 48px;
        min-height: 48px;
        border-radius: 999px;
        box-shadow: 0 12px 24px rgba(55,176,84,.22);
      }
      .voicePreview .voiceWave{
        height: 20px;
      }
      .voicePreview .voiceWave::after{
        width: 10px;
        height: 10px;
        background: rgba(55,65,81,.88);
        box-shadow: 0 0 0 2px rgba(255,255,255,.85);
      }
      .voicePreview .voiceBar{
        background: rgba(17,17,17,.24);
      }
      .voicePreview .voiceDur{
        color: rgba(17,17,17,.70);
        min-width: 42px;
      }
      .voiceStatus{
        display:none;
        font-size: 12px;
        font-weight: 700;
        color: var(--muted);
      }
      .voicePreview.uploading .voiceWave,
      .voicePreview.uploading .voiceDur{
        display:none;
      }
      .voicePreview.uploading .voiceStatus{
        display:block;
      }
      .chatBottom.voiceDraftActive{
        background: #fff;
      }
      .chatBottom.voiceDraftActive .voicePreview{
        padding-top: 8px;
        padding-left: 8px;
        padding-right: 8px;
      }
      .chatBottom.voiceDraftActive .composer{
        display:none;
      }
      /* Scroll-to-bottom button */
      .scrollDownBtn{
        position:absolute;
        right: 14px;
        /* Offset above the bottom stack; updated via JS to stay keyboard-safe (IC0). */
        bottom: calc(12px + var(--chatBottomOffset, 86px) + env(safe-area-inset-bottom, 0px));
        width: 48px;
        height: 48px;
        border-radius: 999px;
        border: 1px solid var(--controlBorder);
        background: var(--surface);
        box-shadow: var(--shadowSm);
        display:none;
        align-items:center;
        justify-content:center;
		gap:8px;
        cursor:pointer;
        z-index: 20;
      }
      .scrollDownBtn svg{ width:22px; height:22px; fill: var(--muted); }
      .scrollDownBtn.show{ display:flex; }
		.scrollDownBtn.hasNew{
        width:auto;
        padding: 0 12px 0 10px;
        justify-content:flex-start;
      }
      .scrollLabel{
        display:none;
        font-size: 12px;
        font-weight: 900;
        color: var(--muted);
        white-space:nowrap;
      }
      .scrollDownBtn.hasNew .scrollLabel{ display:block; }
      .scrollCount{
        position:absolute;
        top: -7px;
        right: -7px;
        width: 22px;
        height: 22px;
        border-radius: 999px;
        background: var(--wa-accent);
        border: 1.5px solid var(--bg);
        color:#062c1a;
        display:none;
        align-items:center;
        justify-content:center;
        font-weight: 900;
        font-size: 12px;
      }

      .spacer8{ height:8px; }
      .spacer12{ height:12px; }
      .titleRow{
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:10px;
      }
      .titleActions{
        display:flex;
        align-items:center;
        gap:8px;
        flex: 0 0 auto;
      }
      .h2{
        margin:0;
        font-size: 16px;
        font-weight: 900;
      }
      .smallBtn{
        border: 1px solid var(--border);
        background: var(--surface);
        border-radius: var(--rLg);
        padding: 10px 12px;
        min-height: 48px;
        font-weight: 900;
        cursor:pointer;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:8px;
        color: var(--text);
        transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 80ms ease;
      }
      .smallBtn:active{ transform: scale(.99); background: var(--surface2); }
      .smallBtn:focus-visible{
        outline: none;
        box-shadow: 0 0 0 3px var(--brandRing);
      }

      /* Clickable file picker button (label) */
      .photoPick{ position:relative; overflow:hidden; }
      .photoPick input{
        position:absolute;
        inset:0;
        opacity:0;
        cursor:pointer;
      }

      details.card summary{
        cursor:pointer;
        font-weight: 900;
        list-style:none;
      }
      details.card summary::-webkit-details-marker{ display:none; }
      details.card summary::after{
        content:"▾";
        float:right;
        color: var(--wa-muted);
      }
      details.card[open] summary::after{ content:"▴"; }

      .tiny{
        font-size:12px;
        color: var(--wa-muted);
        margin-top: 10px;
        line-height:1.35;
      }

      /* Me tab profile */
      #meTab{
        margin: 0; /* edge-to-edge (app view has no padding) */
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
        padding-bottom: 0;
        /* Soft app background (cards sit on top) */
        background: #F6F7F8;
        /* Match Places' subtle separators for a clean white header */
        --wa-divider: rgba(0,0,0,0.06);
        --divider: rgba(0,0,0,0.06);
      }
      #meTab .pageBody{
        padding-top: var(--safe-top);
        position: relative;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        padding-bottom: calc(var(--page-body-pad-b) + var(--safe-bottom));
      }
      /* Keep comfortable insets for Me content */
      #meTab{
        --pad-l: calc(14px + var(--safe-left));
        --pad-r: calc(14px + var(--safe-right));
      }
      #meTab .meSection{ padding: 0 0 12px; }
      .profileRow{
        display:flex;
        gap:12px;
        align-items:flex-start;
      }
      #meTab .profileCardRight{
        flex: 0 0 auto;
        display:flex;
        align-items:flex-start;
        gap: 10px;
        margin-left: 8px;
        padding-top: 2px;
      }
      #meTab .profileEditPill{
        font-size: 13px;
        font-weight: 800;
        color: var(--wa-green-2, var(--brand));
        padding: 0 12px;
        min-height: 36px;
        border-radius: 999px;
        background: rgba(34,197,94,.10);
        border: 1px solid rgba(34,197,94,.18);
        line-height: 1;
        pointer-events: none; /* whole card is tappable */
        white-space: nowrap;
        display:inline-flex;
        align-items:center;
        gap: 6px;
      }
      #meTab .profileEditPill svg{
        width: 14px;
        height: 14px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      /* WhatsApp Settings-style profile row */
      #meTab .meProfileCard{
        margin: 7px var(--pad-r) 0 var(--pad-l);
        background: #fff;
        border: 1px solid rgba(0,0,0,.035);
        border-radius: 14px;
        box-shadow: none;
        padding: 12px;
        position: relative;
      }
      #meTab .meProfileCard:active{ background: rgba(0,0,0,.03); }

      #meTab .profileRow{
        align-items:flex-start;
      }
      #meTab .profileAvatar{
        --avatarProgress: 0;
        width:52px;height:52px;border-radius:999px;
        background: #E9EEF2;
        border: 0;
        box-shadow: none;
        display:flex;align-items:center;justify-content:center;
        color: #5B6673;
        overflow:hidden;
        flex:0 0 auto;
        position: relative;
        order: 2;

      }
      #meTab .profileAvatar .avatarLetter{
        font-size: 20px;
        font-weight: 700;
        color: #5B6673;
        line-height: 1;
      }
      #meTab .profileAvatar img{
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
        object-fit:cover;
        border-radius:999px;
        display:block;
        opacity: 0;
        transition: opacity .16s ease;
        z-index: 2; /* safety: photo stays topmost */
      }
      #meTab .profileAvatar.hasPhoto img{ opacity: 1; }

      /* Premium avatar upload progress ring (no spinner, avatar always visible) */
      .profileAvatar .avatarProgressRing{
        position:absolute;
        inset:-4px;
        width: calc(100% + 8px);
        height: calc(100% + 8px);
        display:none;
        pointer-events:none;
        z-index: 4;
      }
      .profileAvatar.avatarUploading .avatarProgressRing{ display:block; }
      .profileAvatar.avatarUploading{
        box-shadow:
          0 0 0 2px rgba(34,197,94,.22),
          0 2px 10px rgba(0,0,0,.10);
      }
      .profileAvatar .avatarProgressRing .track{
        stroke: rgba(0,0,0,.08);
        stroke-width: 6;
        fill: none;
      }
      .profileAvatar .avatarProgressRing .prog{
        stroke: var(--wa-green-2);
        stroke-width: 6;
        fill: none;
        stroke-linecap: round;
        transform: rotate(-90deg);
        transform-origin: 50% 50%;
        stroke-dasharray: 283;
        stroke-dashoffset: calc(283 - (283 * var(--avatarProgress) / 100));
        transition: stroke-dashoffset .12s linear;
      }

      /* Upload failed: keep preview, show “Tap to retry” affordance */
      .profileAvatar .avatarRetryHint{
        position:absolute;
        left: 50%;
        bottom: 6px;
        transform: translateX(-50%);
        padding: 5px 8px;
        border: 0;
        border-radius: 999px;
        background: rgba(17,17,17,.85);
        color: #fff;
        font-size: 11px;
        font-weight: 950;
        line-height: 1;
        display:none;
        z-index: 5;
        white-space:nowrap;
        cursor: pointer;
      }
      .profileAvatar.avatarFailed{
        box-shadow:
          0 0 0 2px rgba(220,38,38,.22),
          0 2px 10px rgba(0,0,0,.10);
      }
      .profileAvatar.avatarFailed .avatarRetryHint{ display:block; }
      .profileAvatar.avatarFailed .avatarProgressRing{ display:none; }

      /* Legacy spinner element is kept for compatibility but never shown */
      .profileAvatar .avatarUploadSpin{ display:none !important; }
      #meTab .profileMeta{
        flex:1;
        min-width:0;
        order: 1;
      }
      #meTab .profileMeta .name{
        font-size: 19px;
        font-weight: 800;
        color: #0B0B0B;
        line-height: 1.15;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
      }
      #meTab .meIdRow{
        margin-top: 6px;
        display: block;
        align-items: center;
        width: 100%;
        min-width: 0;
      }
      #meTab .idRow{
        display:flex;
        align-items:center;
        justify-content:flex-start;
        gap:8px;
        margin-top:8px;
        min-width: 0;
        flex-wrap:nowrap;
      }
      #meTab .meActionsRow{
        display:flex;
        align-items:center;
        justify-content:flex-start;
        gap:8px;
        flex-wrap:nowrap;
        margin-top:8px;
      }
      #meTab .meActionsRight{
        display:flex;
        align-items:center;
        gap:10px;
      }
      .meGalleryCard{
        margin: 0;
        padding: 14px;
      }
      .meGalleryHeader{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap: 10px;
        margin-bottom: 12px;
      }
      .meGalleryTitle{
        font-size: 15px;
        font-weight: 800;
        color: #0B0B0B;
      }
      .meGalleryCount{
        font-size: 12px;
        font-weight: 800;
        color: #6B7280;
      }
      .meGalleryGrid{
        display:grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
      }
      .meGalleryTile,
      .meGalleryAddTile{
        position: relative;
        width: 100%;
        aspect-ratio: 1 / 1;
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid rgba(15,23,42,.08);
        background: linear-gradient(180deg, rgba(248,250,252,.96), rgba(241,245,249,.92));
      }
      .meGalleryTile{
        padding: 0;
        -webkit-tap-highlight-color: transparent;
      }
      .meGalleryTile:active,
      .meGalleryAddTile:active{
        transform: scale(.985);
      }
      .meGalleryOpenBtn{
        position: absolute;
        inset: 0;
        border: 0;
        background: transparent;
        padding: 0;
        cursor: pointer;
      }
      .meGalleryTile img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      .meGalleryRemoveBtn{
        position: absolute;
        top: 8px;
        right: 8px;
        width: 40px;
        height: 40px;
        border: 0;
        border-radius: 999px;
        background: rgba(17,24,39,.78);
        color: #fff;
        font-size: var(--icon-glyph-size-compact);
        font-weight: 900;
        display:flex;
        align-items:center;
        justify-content:center;
        cursor: pointer;
        box-shadow: 0 6px 18px rgba(15,23,42,.22);
      }
      .meGalleryRemoveBtn:active{
        transform: scale(.96);
      }
      .meGalleryAddTile{
        padding: 0;
        display:flex;
        align-items:center;
        justify-content:center;
        flex-direction: column;
        gap: 6px;
        color: #3c8f2d;
        background: linear-gradient(180deg, rgba(76,175,80,.08), rgba(76,175,80,.03));
        cursor: pointer;
      }
      .meGalleryAddTile:disabled{
        opacity: .6;
        cursor: default;
      }
      .meGalleryAddIcon{
        width: 34px;
        height: 34px;
        border-radius: 999px;
        background: rgba(255,255,255,.92);
        border: 1px solid rgba(76,175,80,.16);
        display:flex;
        align-items:center;
        justify-content:center;
        font-size: 22px;
        font-weight: 700;
        line-height: 1;
      }
      .meGalleryAddLabel{
        font-size: 12px;
        font-weight: 800;
      }
      .meGalleryHelp{
        margin-top: 10px;
        font-size: 12px;
        line-height: 1.4;
        color: #6B7280;
      }
      #meTab .meUserIdPill{
        display:inline-flex;
        align-items:center;
        gap:8px;
        border:1px solid rgba(27,149,11,.25);
        background:#fff;
        border-radius:999px;
        padding:10px 14px;
        font-weight:600;
        color:#2b2b2b;
        cursor:pointer;
        -webkit-tap-highlight-color: transparent;
        flex:0 1 auto;
        min-width:0;
        white-space:nowrap;
      }
      #meTab .meUserIdPill:active{ opacity:.85; }
      #meTab .meActionBtn{
        display:inline-flex;
        align-items:center;
        gap:8px;
        border:1px solid rgba(27,149,11,.25);
        background:#eaf7ea;
        border-radius:999px;
        padding:10px 14px;
        font-weight:700;
        cursor:pointer;
        white-space:nowrap;
        flex-shrink:0;
      }
      #meTab .idText{
        font-size: 13px;
        color:#6B7280;
        font-weight: 600;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 1 1 auto;
      }
      #meTab .idVal{
        color:#111827;
        font-weight: 700;
      }
      #meTab .meIdBadge{
        min-width: 0;
        width: auto;
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        font-size: 12px;
        line-height: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      #meTab .meIdBadge{
        padding: 0;
        gap: 4px;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: #6B7280;
        font-weight: 500;
      }
      #meTab .meIdBadgeText{
        color: #6B7280;
        font-weight: 500;
        font-size: 10px;
        line-height: 1;
        flex-shrink: 0;
        text-transform: uppercase;
        letter-spacing: .03em;
      }
      #meTab .meIdBadgeVal{
        font-variant-numeric: tabular-nums;
        font-weight: 600;
        font-size: 11px;
        line-height: 1;
        min-width: 1ch;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: normal;
        color: #4B5563;
      }
      #meTab .meIdBadgeLabel{
        color:#6B7280;
        font-weight: 600;
      }
      #meTab .meIdActions,
      #meTab .idActions{
        margin-left:0;
        display:flex;
        gap:8px;
        flex: 0 0 auto;
        white-space: nowrap;
        align-items:center;
      }
      #meTab .meIdLabel{
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0;
        text-transform: none;
        color: currentColor;
      }
      #meTab .meIdBtn{
        min-width: 0;
        height: 34px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 12px;
        line-height: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border: 1px solid rgba(34,197,94,.25);
        background: #fff;
        color: var(--wa-green-2, var(--brand));
        font-weight: 700;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        width: auto;
        flex: 0 0 auto;
      }
      #meTab .meShareBtn{
        height: 32px;
        padding: 0 10px;
        font-size: 12px;
        font-weight: 600;
        color: #4B5563;
        border-color: rgba(15,23,42,0.12);
        background: #fff;
      }
      #meTab .meShareBtn:hover{ background: rgba(15,23,42,0.04); }
      #meTab .meShareBtn:active{ background: rgba(15,23,42,0.08); transform: translateY(1px); }
      #meTab .meEditBtn{
        height: 34px;
        padding: 0 12px;
        font-size: 12px;
        background: var(--wa-green-2, var(--brand));
        border: 1px solid var(--wa-green-2, var(--brand));
        color: #fff;
        font-weight: 800;
      }
      #meTab .meEditBtn:hover{ filter: brightness(.96); }
      #meTab .meEditBtn:active{ filter: brightness(.9); transform: translateY(1px); }
      #meTab .meQrBtn{
        height: 32px;
        padding: 0 11px;
        font-size: 12px;
        font-weight: 700;
        color: var(--brand);
        border-color: rgba(77,182,89,.22);
        background: rgba(77,182,89,.08);
      }
      #meTab .meQrBtn:hover{ background: rgba(77,182,89,.12); }
      #meTab .meQrBtn:active{ background: rgba(77,182,89,.16); transform: translateY(1px); }
      #meTab .meIdBtn:active{ background: rgba(15,23,42,0.06); }
      #meTab .meIdBtn:focus-visible{
        outline: none;
        box-shadow: 0 0 0 3px var(--brandRing);
      }
      #meTab .meIdBtn .meIdIcon{
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      #meTab .meIdBtn .meIdLabel{
        font-weight: 700;
        font-size: 12px;
      }
      @media (max-width: 360px){
        #meTab .meIdBtn .meIdLabel{ display:none; }
        #meTab .meIdBadgeLabel{ display:none; }
      }
      @media (max-width: 380px){
        #meTab .meIdBadge{
          padding: 0;
        }
        #meTab .meIdBadgeText{ font-size: 10px; }
        #meTab .meIdBadgeVal{ font-size: 10px; }
        #meTab .meIdBtn{
          height: 30px;
          font-size: 11px;
          padding: 0 8px;
        }
      }
      #meTab .profileMeta .about{
        font-size: 13px;
        color: #6B7280;
        margin-top: 2px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        line-height: 1.25;
      }
      #meTab .profileMeta .about:empty{
        display:none;
        margin-top: 0;
      }
      #meTab .profileMeta .about + .about{ margin-top: 2px; }

      .meSection{ display:flex; flex-direction:column; gap: 0; }
      #meTab .meFooter{
        display:flex;
        justify-content:center;
        margin-top: 18px;
        padding: 4px 0 calc(22px + env(safe-area-inset-bottom, 0px));
      }
      #meTab .meVersionBadge{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        min-width: 116px;
        min-height: 36px;
        padding: 0 18px;
        border-radius: 999px;
        border: 1px solid rgba(15,23,42,.08);
        background: rgba(255,255,255,.92);
        color: #6B7280;
        font-size: 13px;
        font-weight: 800;
        letter-spacing: .02em;
      }

      .textBtn{
        border: 0;
        background: var(--accent-soft);
        border: 1px solid rgba(27,149,11,.18);
        padding: 8px 12px;
        min-height: 36px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        border-radius: 999px;
        font-weight: 900;
        color: var(--brand);
        cursor: pointer;
        white-space:nowrap;
      }
      .textBtn:active{ background: rgba(27,149,11,.18); }
      .textBtn:focus-visible{
        outline: none;
        box-shadow: 0 0 0 3px var(--brandRing);
      }

      .settingsGroup{
        background: var(--surface);
        border: 1px solid var(--wa-divider);
        border-radius: var(--rLg);
        box-shadow: var(--shadow-sheet);
        overflow:hidden;
      }

      /* Standardized settings row (WhatsApp-like) */
      .settingsRow{
        width: 100%;
        display:flex;
        align-items:center;
        gap: 12px;
        padding: 12px 14px;
        min-height: 56px;
        border: 0;
        background: transparent;
        cursor: pointer;
        text-align:left;
        position: relative;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
      }
      .settingsRow + .settingsRow::before{
        content:"";
        position:absolute;
        left: 66px; /* 14px padding + 40px icon + 12px gap */
        right: 0;
        top: 0;
        height: 1px;
        background: rgba(0,0,0,.06);
      }
      .settingsRow:active{ background: rgba(0,0,0,.03); }

      .settingsIcon{
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: rgba(0,0,0,.04);
        display:flex;
        align-items:center;
        justify-content:center;
        flex:0 0 auto;
      }
      .settingsIcon svg{ width: 22px; height: 22px; fill: #5B6673; }
      .settingsIcon.danger{
        background: rgba(176,0,32,.08);
        border: 1px solid rgba(176,0,32,.12);
      }
      .settingsIcon.danger svg{ fill: var(--danger); }

      .settingsText{ flex:1; min-width:0; }
      .settingsTitle{
        font-size: 16px;
        font-weight: 800;
        color: #0B0B0B;
      }
      .settingsSub{
        font-size: 13px;
        color: #6B7280;
        margin-top: 2px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
      }
      .settingsChevron{
        width: 22px;
        height: 22px;
        display:flex;
        align-items:center;
        justify-content:center;
        flex:0 0 auto;
        opacity: .45;
        color: #5B6673;
        pointer-events: none;
      }
      .settingsChevron svg{ width: 22px; height: 22px; fill: currentColor; }
      .settingsRight{ display:flex; align-items:center; gap: 10px; flex: 0 0 auto; }
      .settingsRow.dangerRow .settingsTitle{ color: var(--danger); }
      .settingsRow.dangerRow:active{ background: rgba(176,0,32,.06); }

      /* Me tab menu: match new clean list style */
      #meTab .settingsGroup{
        margin: 16px var(--pad-r) 0 var(--pad-l);
        background: #fff;
        border: 1px solid rgba(0,0,0,.035);
        border-radius: 16px;
        overflow: hidden;
        box-shadow: none;
      }
      #meTab .settingsRow{
        width: 100%;
        display:flex;
        align-items:center;
        gap: 12px;
        padding: 12px 14px;
        min-height: 56px;
        border: 0;
        background: transparent;
        cursor: pointer;
        text-align:left;
        position: relative;
        touch-action: manipulation;
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
      }
      /* Divider between rows (indented under text, not under icon) */
      #meTab .settingsRow + .settingsRow::before{
        content:"";
        position:absolute;
        left: 70px; /* 14px padding + 44px icon + 12px gap */
        right: 0;
        top: 0;
        height: 1px;
        background: rgba(0,0,0,.04);
      }
      #meTab .settingsRow:active{ background: rgba(0,0,0,.03); }

      #meTab .settingsIcon{
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: rgba(0,0,0,.035);
        display:flex;
        align-items:center;
        justify-content:center;
        flex:0 0 auto;
        color: #6B7280;
      }
      /* Danger row icon (Delete account) */
      #meTab .settingsIcon.danger{
        background: rgba(176,0,32,.08);
        border: 1px solid rgba(176,0,32,.12);
      }
      #meTab .settingsIcon.danger svg{ fill: var(--danger); }
      #meTab .settingsIcon svg{
        width: 22px;
        height: 22px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      #meTab .settingsText{ flex:1; min-width:0; }
      #meTab .settingsTitle{
        font-size: 16px;
        font-weight: 800;
        color: #0B0B0B;
      }
      #meTab .settingsSub{
        font-size: 13px;
        color: #6B7280;
        margin-top: 2px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
      }
      #meTab .settingsChevron{
        width: 22px;
        height: 22px;
        border-radius: 0;
        display:flex;
        align-items:center;
        justify-content:center;
        flex:0 0 auto;
        opacity: 1;
        color: #9CA3AF;
        pointer-events: none; /* chevron is visual only; button row handles clicks */
      }
      #meTab .settingsChevron svg{
        width: 22px;
        height: 22px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      #meTab .settingsRow.dangerRow .settingsTitle{ color: var(--danger); }
      #meTab .settingsRow.dangerRow:active{ background: rgba(176,0,32,.06); }

      /* Me tab: hide redundant section labels on profile */
      #meTab .meGroupLabel{
        display: none;
      }

      /* Legal docs (Privacy/Terms) — document layout (WhatsApp-like) */
      .legalOverlay{
        background: #fff;
      }
      .legalTopBar{
        background: #fff;
        border-bottom: 1px solid #eee;
        position: sticky;
        top: 0;
        z-index: 4;
        min-height: 56px;
        display:flex;
        align-items:center;
        padding: calc(6px + env(safe-area-inset-top, 0px)) 8px 6px;
        flex: 0 0 auto;
      }
      .legalBackBtn{
        width: 44px;
        height: 44px;
        border-radius: 12px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        border: 0;
        background: transparent;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
      }
      .legalBackBtn:active{ background: rgba(0,0,0,.04); }
      .legalBackBtn svg{ width: 24px; height: 24px; fill: #111; }
      .legalTopTitle{
        flex: 1 1 auto;
        font-size: 18px;
        font-weight: 700;
        color: #111;
        line-height: 1.2;
        min-width: 0;
      }
      .legalOpenBtn{
        flex: 0 0 auto;
        border: 0;
        background: transparent;
        cursor: pointer;
        padding: 8px 10px;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 800;
        color: var(--brand);
        -webkit-tap-highlight-color: transparent;
        white-space: nowrap;
      }
      .legalOpenBtn:active{ background: rgba(27,149,11,0.08); }
      .legalOpenBtn:focus-visible{ outline: none; box-shadow: 0 0 0 3px var(--brandRing); }
      .legalOverlayBody{
        flex: 1;
        overflow: auto;
        background: #fff;
        padding: 16px;
      }
      /* Reusable doc typography class used by Privacy + Terms (and standalone pages). */
      .legalDoc{
        max-width: var(--app-max-w);
        margin: 0 auto;
        color: #111;
        font-size: 15px;
        line-height: 1.6;
        word-wrap: break-word;
        overflow-wrap: break-word;
      }
      .legalDoc p{ margin: 0 0 12px; }
      .legalDoc .legalUpdated{
        margin: 0 0 14px;
        font-size: 13px;
        color: #6B7280;
      }
      .legalDoc h1{
        margin: 0 0 10px;
        font-size: 18px;
        font-weight: 700;
        color: #111;
        line-height: 1.25;
      }
      .legalDoc h2{
        margin: 20px 0 10px;
        font-size: 16px;
        font-weight: 700;
        color: #111;
        line-height: 1.25;
      }
      .legalDoc ul{
        margin: 0 0 12px;
        padding-left: 18px;
      }
      .legalDoc li{
        margin: 0 0 8px;
      }
      .legalDoc a{
        color: var(--accent);
        text-decoration: none;
      }
      .legalDoc a:hover{ text-decoration: underline; }
      .legalDoc .legalLink{
        margin-top: 14px;
        font-size: 13px;
        color: #6B7280;
      }
      .settingsValue{
        flex:0 1 auto;
        max-width: 42%;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        font-size: 13px;
        font-weight: 950;
        color: var(--wa-muted);
        text-align:right;
        padding-left: 8px;
      }
      /* Privacy: make the right-side value read as secondary (not a label) */
      .settingsValueSecondary{
        font-size: 12px;
        font-weight: 600;
      }

      /* Privacy sub-screen radio rows */
      .privacyRadioRow{
        width: 100%;
        display:flex;
        align-items:center;
        gap: 12px;
        padding: 12px 12px;
        min-height: 52px;
        cursor: pointer;
        user-select: none;
      }
      .privacyRadioRow + .privacyRadioRow{ border-top: 1px solid var(--divider); }
      .privacyRadioRow:active{ background: var(--surface2); }
      .privacyRadioText{ flex:1; min-width:0; }
      .privacyRadioTitle{ font-weight: 950; color: var(--text); }

      /* ============================================================
       * Me → Privacy (Manage visibility) — WhatsApp-like settings list
       * Fixes giant chevron/triangle artifacts by using dedicated row styles.
       * ============================================================ */
      #mePrivacyOverlay{
        background: #fff;
      }
      #mePrivacyOverlay .chatBar{
        border-bottom: 1px solid #eee;
      }
      #mePrivacyOverlay .meOverlayBody{
        padding: 0;
        background: #fff;
      }
      #mePrivacyOverlay .privacyIntro{
        font-size: 13px;
        color: #6B7280;
        padding: 12px var(--pad-r) 12px var(--pad-l);
        line-height: 1.35;
      }
      #mePrivacyOverlay .privacyCard{
        margin: 12px var(--pad-r) 12px var(--pad-l);
        background: #fff;
        border: 1px solid rgba(0,0,0,.08);
        border-radius: 16px;
        overflow: hidden;
      }
      #mePrivacyOverlay .privacyRow{
        width: 100%;
        display:flex;
        align-items:center;
        gap: 12px;
        padding: 12px var(--pad-r) 12px var(--pad-l);
        min-height: 56px;
        border: 0;
        background: transparent;
        text-align:left;
        cursor: pointer;
        position: relative;
        -webkit-tap-highlight-color: transparent;
      }
      #mePrivacyOverlay .privacyRow:active{ background: rgba(0,0,0,.04); }
      /* Divider between rows (indented, after icon) */
      #mePrivacyOverlay .privacyRow + .privacyRow::before{
        content:"";
        position:absolute;
        left: calc(var(--pad-l) + 36px + 12px); /* left padding + icon + gap */
        right: 0;
        top: 0;
        height: 1px;
        background: rgba(0,0,0,.06);
      }
      #mePrivacyOverlay .privacyIcon{
        width: 36px;
        height: 36px;
        border-radius: 999px;
        background: rgba(0,0,0,.04);
        display:flex;
        align-items:center;
        justify-content:center;
        flex: 0 0 auto;
      }
      #mePrivacyOverlay .privacyIcon svg{
        width: 22px;
        height: 22px;
        fill: #5B6673;
      }
      #mePrivacyOverlay .privacyText{ flex:1; min-width:0; }
      #mePrivacyOverlay .privacyLabel{
        font-size: 16px;
        font-weight: 800;
        color: #111;
        line-height: 1.15;
      }
      #mePrivacyOverlay .privacyValue{
        font-size: 13px;
        color: #6B7280;
        margin-top: 2px;
        line-height: 1.2;
      }
      #mePrivacyOverlay .privacyChevron{
        flex: 0 0 auto;
        display:flex;
        align-items:center;
        justify-content:center;
        opacity: .55;
        color: rgba(17,17,17,.55);
      }
      #mePrivacyOverlay .privacyChevron svg{
        width: 18px;
        height: 18px;
        fill: currentColor;
      }

      /* Privacy screen: grouped settings list (Visibility / Safety) */
      #mePrivacyOverlay .meGroupLabel{
        margin: 24px var(--pad-r) 8px var(--pad-l);
        font-size: 12px;
        font-weight: 900;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: #6B7280;
      }
      #mePrivacyOverlay .settingsGroup{
        margin: 0 var(--pad-r) 0 var(--pad-l);
        background: #fff;
        border: 1px solid rgba(0,0,0,.06);
        border-radius: 16px;
        overflow: hidden;
        box-shadow: none;
      }
      #mePrivacyOverlay .settingsRow{
        width: 100%;
        display:flex;
        align-items:center;
        gap: 12px;
        padding: 12px 14px;
        min-height: 56px;
        border: 0;
        background: transparent;
        cursor: pointer;
        text-align:left;
        position: relative;
        -webkit-tap-highlight-color: transparent;
      }
      #mePrivacyOverlay .settingsRow + .settingsRow::before{
        content:"";
        position:absolute;
        left: 70px; /* 14px padding + 44px icon + 12px gap */
        right: 0;
        top: 0;
        height: 1px;
        background: rgba(0,0,0,.06);
      }
      #mePrivacyOverlay .settingsRow:active{ background: rgba(0,0,0,.04); }
      #mePrivacyOverlay .settingsIcon{
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: rgba(0,0,0,.04);
        display:flex;
        align-items:center;
        justify-content:center;
        flex:0 0 auto;
      }
      #mePrivacyOverlay .settingsIcon svg{ width: 22px; height: 22px; fill: #5B6673; }
      #mePrivacyOverlay .settingsText{ flex:1; min-width:0; }
      #mePrivacyOverlay .settingsTitle{
        font-size: 16px;
        font-weight: 800;
        color: #0B0B0B;
      }
      #mePrivacyOverlay .settingsSub{
        font-size: 13px;
        color: #6B7280;
        margin-top: 2px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
      }
      #mePrivacyOverlay .settingsRight{
        display:flex;
        align-items:center;
        gap: 10px;
        flex: 0 0 auto;
      }
      #mePrivacyOverlay .settingsChevron{
        width: 22px;
        height: 22px;
        display:flex;
        align-items:center;
        justify-content:center;
        flex:0 0 auto;
        opacity: .45;
        color: #5B6673;
        pointer-events: none; /* chevron is visual only; row handles clicks */
      }
      #mePrivacyOverlay .settingsChevron svg{ width: 22px; height: 22px; fill: currentColor; }

      /* Settings toggle (used in Privacy) */
      .waSwitch{
        width: 46px;
        height: 28px;
        border-radius: 999px;
        background: rgba(0,0,0,.15);
        position: relative;
        flex: 0 0 auto;
        transition: background-color 160ms ease;
      }
      .waSwitch::after{
        content:"";
        position:absolute;
        top: 3px;
        left: 3px;
        width: 22px;
        height: 22px;
        border-radius: 999px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(0,0,0,.2);
        transition: transform 160ms ease;
      }
      .waSwitch.isOn{
        background: rgba(34,197,94,.55);
      }
      .waSwitch.isOn::after{
        transform: translateX(18px);
      }

      /* Privacy visibility picker (bottom sheet) */
      .privacySheetHandleWrap{
        padding: 10px 0 2px;
        display:flex;
        justify-content:center;
        flex: 0 0 auto;
        touch-action: none;
      }
      .privacySheetHandle{
        width: 38px;
        height: 4px;
        border-radius: 999px;
        background: rgba(15,23,42,.20);
      }
      .privacyCancel{
        margin: 10px 16px 12px;
        border: 1px solid rgba(0,0,0,.10);
        border-radius: 14px;
        min-height: 48px;
        background: #fff;
        font-weight: 900;
        cursor:pointer;
        -webkit-tap-highlight-color: transparent;
      }
      .privacyCancel:active{ background: rgba(0,0,0,.04); }
      #privacyVisibilityBackdrop{
        background: rgba(0,0,0,.35);
      }
      #privacyVisibilitySheet{
        background: #fff;
        padding-bottom: env(safe-area-inset-bottom, 0px);
      }
      #privacyVisibilitySheet .privacySheetHandleWrap{
        padding: 10px 0 2px;
        display:flex;
        justify-content:center;
        flex: 0 0 auto;
        touch-action: none;
      }
      #privacyVisibilitySheet .privacySheetHandle{
        width: 38px;
        height: 4px;
        border-radius: 999px;
        background: rgba(15,23,42,.20);
      }
      #privacyVisibilitySheet .sheetHeader{
        padding: 6px 16px 10px;
      }
      #privacyVisibilitySheet .sheetTitle{
        font-size: 16px;
        font-weight: 950;
      }
      #privacyVisibilitySheet .privacyOptions{
        display:flex;
        flex-direction:column;
      }
      #privacyVisibilitySheet .privacyOption{
        width: 100%;
        min-height: 52px;
        padding: 0 16px;
        border: 0;
        background: transparent;
        display:flex;
        align-items:center;
        justify-content:space-between;
        text-align:left;
        cursor: pointer;
      }
      #privacyVisibilitySheet .privacyOption + .privacyOption{
        border-top: 1px solid rgba(0,0,0,.06);
      }
      #privacyVisibilitySheet .privacyOption:active{ background: rgba(0,0,0,.04); }
      #privacyVisibilitySheet .privacyOptionLabel{
        font-size: 15px;
        font-weight: 800;
        color: #111;
      }
      #privacyVisibilitySheet .privacyOptionCheck{
        width: 20px;
        height: 20px;
        fill: var(--accent);
        opacity: 0;
      }
      #privacyVisibilitySheet .privacyOption.isSelected .privacyOptionCheck{
        opacity: 1;
      }
      #privacyVisibilitySheet .privacyCancel{
        margin: 10px 16px 12px;
        border: 1px solid rgba(0,0,0,.10);
        border-radius: 14px;
        min-height: 48px;
        background: #fff;
        font-weight: 900;
        cursor:pointer;
      }
      #privacyVisibilitySheet .privacyCancel:active{ background: rgba(0,0,0,.04); }

      /* Me overlays (Profile details / Account / Privacy) */
      .meOverlay{
        position:absolute;
        inset:0;
        background: var(--bg);
        display:none;
        flex-direction:column;
        z-index: 150; /* above .chatsStickyHeader (100), below bottom nav (200) */
      }
      /* Profile details & Account: do not cover tab bar so it stays visible and tappable */
      .meOverlay.keepTabBarVisible{
        bottom: calc(var(--tabbar-total-h) + var(--safe-bottom));
      }
      .meOverlay.show{ display:flex; }
      #meAccountOverlay{ z-index: 150; }
      #meDetailsOverlay{ z-index: 160; }
      #meGalleryOverlay{ z-index: 165; }
      #mePhotoOverlay{ z-index: 170; }
      .meOverlayBody{
        flex:1;
        overflow:auto;
        padding: 12px;
      }
      #meTab .meOverlayBody input:not([type="radio"]):not([type="checkbox"]),
      #meTab .meOverlayBody select,
      #meTab .meOverlayBody textarea{
        min-height: 40px;
        padding: 8px 10px;
        font-size: 13px;
      }
      #meDetailsOverlay label{
        font-size: 12px;
        font-weight: 600;
        color: var(--wa-muted);
      }
      #meDetailsOverlay input,
      #meDetailsOverlay select,
      #meDetailsOverlay textarea{
        font-size: 15px;
        border-color: var(--border);
      }
      #meDetailsOverlay #profileAboutInput{
        min-height: 52px;
        max-height: 140px;
        overflow-y: hidden;
        resize: none;
      }
      #meDetailsOverlay input:focus,
      #meDetailsOverlay select:focus,
      #meDetailsOverlay textarea:focus,
      #meDetailsOverlay input:focus-visible,
      #meDetailsOverlay select:focus-visible,
      #meDetailsOverlay textarea:focus-visible{
        border-color: var(--border);
        box-shadow: 0 0 0 3px var(--brandRing);
      }
      #meDetailsOverlay #profileAboutCount{
        font-size: 11px;
        opacity: .75;
      }
      #meDetailsOverlay .meDetailsSwitchRow{
        width: 100%;
        margin-top: 10px;
        padding: 10px 12px;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--surface);
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap: 12px;
        text-align:left;
        cursor: pointer;
      }
      #meDetailsOverlay .meDetailsSwitchRow:active{
        background: rgba(0,0,0,.03);
      }
      #meDetailsOverlay .meDetailsSwitchRow:disabled{
        cursor: default;
        opacity: .6;
      }
      #meDetailsOverlay .meDetailsSwitchLabel{
        font-size: 14px;
        font-weight: 700;
        color: var(--text);
      }
      #meDetailsOverlay .meDetailsSwitchText{
        display:flex;
        flex-direction:column;
        gap:2px;
        min-width:0;
      }
      #meDetailsOverlay .meDetailsSwitchSub{
        font-size: 11px;
        line-height: 1.25;
        color: var(--wa-muted);
        font-weight: 600;
      }
      #meDetailsOverlay .meDetailsHelp{
        margin-top: 6px;
        font-size: 12px;
        color: var(--wa-muted);
        line-height: 1.35;
      }
      #meDetailsOverlay .profileGalleryManageCard{
        width:100%;
        margin-top: 12px;
        padding: 12px 14px;
        border:1px solid var(--border);
        border-radius: 16px;
        background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
        text-align:left;
        cursor:pointer;
      }
      #meDetailsOverlay .profileGalleryManageCard:active{
        transform: scale(.995);
        background: rgba(0,0,0,.015);
      }
      #meQrOverlay .meOverlayBody{
        padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px));
        gap: 14px;
      }
      .meQrCodeCard{
        background: #fff;
        border-radius: 28px;
        border: 1px solid rgba(77,182,89,.12);
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,.92),
          0 16px 40px rgba(15,23,42,.07);
        background:
          radial-gradient(circle at 50% 0%, rgba(77,182,89,.14), rgba(77,182,89,0) 38%),
          linear-gradient(180deg, #FCFEFC 0%, #FFFFFF 100%);
        padding: 14px;
      }
      .meQrCompactTop{
        display:flex;
        align-items:flex-start;
        gap: 12px;
        margin-bottom: 12px;
      }
      .meQrIdentityText{
        flex:1;
        min-width:0;
      }
      .meQrTitleRow{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap: 10px;
      }
      .meQrAvatar{
        width: 56px;
        height: 56px;
        border-radius: 999px;
        border: 3px solid rgba(255,255,255,.94);
        box-shadow: 0 10px 24px rgba(15,23,42,.12);
        flex-shrink:0;
      }
      .meQrTitle{
        font-size: 22px;
        font-weight: 900;
        color: #0B0B0F;
        letter-spacing: -.02em;
        line-height: 1.1;
        text-align:left;
      }
      .meQrSubtitle{
        margin-top: 5px;
        font-size: 12px;
        line-height: 1.45;
        color: rgba(60,60,67,.7);
        text-align:left;
      }
      .meQrIdPill{
        margin-top: 10px;
        display:inline-flex;
        align-items:center;
        gap: 8px;
        padding: 9px 12px;
        border-radius: 999px;
        background: rgba(255,255,255,.82);
        border: 1px solid rgba(77,182,89,.14);
        color: #166534;
        font-size: 12px;
        font-weight: 900;
        box-shadow: 0 8px 18px rgba(15,23,42,.04);
      }
      .meQrIdPill span:first-child{
        letter-spacing: .08em;
        text-transform: uppercase;
        font-size: 10px;
        color: rgba(22,101,52,.7);
      }
      .meQrStageBadge{
        flex-shrink:0;
        padding: 7px 10px;
        border-radius: 999px;
        background: rgba(77,182,89,.08);
        color: #1f7a37;
        font-size: 10px;
        font-weight: 900;
        letter-spacing: .08em;
        text-transform: uppercase;
      }
      .meQrCanvasWrap{
        display:flex;
        align-items:center;
        justify-content:center;
        padding: 12px;
        border-radius: 24px;
        background:
          radial-gradient(circle at 50% 0%, rgba(77,182,89,.16), rgba(77,182,89,0) 52%),
          linear-gradient(180deg, #F8FCF8 0%, #FFFFFF 100%);
        border: 1px solid rgba(77,182,89,.14);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
      }
      .meQrCanvas{
        width: min(100%, 320px);
        height: auto;
        display:block;
        border-radius: 20px;
        background: #fff;
      }
      .meQrCodeHint{
        margin-top: 10px;
        display:flex;
        align-items:center;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 16px;
        background: rgba(77,182,89,.06);
        border: 1px solid rgba(77,182,89,.08);
        font-size: 12px;
        line-height: 1.45;
        text-align:left;
        color: rgba(28,75,45,.78);
      }
      .meQrCodeHint svg{
        width: 18px;
        height: 18px;
        flex-shrink:0;
        color: #2F9E44;
      }
      .meQrActionGrid{
        display:grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin-top: 12px;
      }
      .meQrActionTile{
        min-height: 54px;
        border: 1px solid rgba(15,23,42,.08);
        border-radius: 18px;
        background: #fff;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap: 5px;
        padding: 8px 6px;
        color: #111827;
        font-size: 12px;
        font-weight: 800;
        box-shadow: 0 10px 24px rgba(15,23,42,.04);
      }
      .meQrActionTile.isPrimary{
        background: linear-gradient(180deg, #4DB659 0%, #2F9E44 100%);
        color: #fff;
        border-color: rgba(47,158,68,.26);
        box-shadow: 0 14px 28px rgba(47,158,68,.22);
      }
      .meQrActionTile:disabled{
        opacity:.55;
        box-shadow:none;
      }
      .meQrActionTile:active{
        transform: scale(.992);
      }
      .meQrActionTile svg{
        width: 18px;
        height: 18px;
        color: #2F9E44;
      }
      .meQrActionTile.isPrimary svg{
        color: #fff;
      }
      .meQrActionLabel{
        line-height:1.05;
        text-align:center;
      }
      .meQrEmptyState{
        display:flex;
        align-items:center;
        justify-content:center;
        min-height: 220px;
        text-align:center;
        color: rgba(60,60,67,.7);
      }
      .meQrEmptyState strong{
        display:block;
        color: #0B0B0F;
        font-size: 17px;
        font-weight: 900;
        margin-bottom: 6px;
      }
      @media (max-width: 420px){
        .meQrCodeCard{ padding: 12px; }
        .meQrAvatar{ width: 52px; height: 52px; }
        .meQrTitle{ font-size: 20px; }
        .meQrActionTile{
          min-height: 50px;
          font-size: 11px;
          padding: 7px 4px;
        }
      }
      #meDetailsOverlay .profileGalleryManageTop{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
      }
      #meDetailsOverlay .profileGalleryManageTitle{
        font-size: 14px;
        font-weight: 800;
        color: var(--text);
      }
      #meDetailsOverlay .profileGalleryManageSub{
        margin-top: 3px;
        font-size: 12px;
        color: var(--wa-muted);
        line-height: 1.3;
      }
      #meDetailsOverlay .profileGalleryManageRight{
        display:flex;
        align-items:center;
        gap:6px;
        flex-shrink:0;
      }
      #meDetailsOverlay .profileGalleryManageCount{
        min-width: 36px;
        padding: 4px 9px;
        border-radius: 999px;
        background: rgba(15,23,42,.06);
        color: #6B7280;
        font-size: 12px;
        font-weight: 900;
        text-align:center;
      }
      #meDetailsOverlay .profileGalleryManageChevron{
        width: 16px;
        height: 16px;
        color: #9CA3AF;
      }
      #meDetailsOverlay .profileGalleryManageChevron svg{
        width:100%;
        height:100%;
        fill:none;
        stroke:currentColor;
        stroke-width:2;
        stroke-linecap:round;
        stroke-linejoin:round;
      }
      /* Account screen sections */
      .accountSection{ margin-bottom: 14px; }
      .accountSectionHeader{
        font-size: 12px;
        font-weight: 1000;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--wa-muted);
        padding: 2px 4px 8px;
      }
      .accountHelper{
        margin-top: 6px;
        color: var(--wa-muted);
        font-size: 12px;
        line-height: 1.35;
      }
      /* Account screen: username helper + softer permissions copy */
      .meKv .vWrap{ flex: 1; min-width: 0; }
      .meKvHelp{
        margin-top: 4px;
        color: var(--wa-muted);
        font-size: 12px;
        font-weight: 600;
        line-height: 1.3;
      }
      .accountPermissionsCard .accountHelper{
        font-size: 11px;
        color: var(--wa-muted);
        opacity: .92;
      }
      .accountSection .card .btn{ width: 100%; }
      .accountActions{
        margin-top: 10px;
        display:flex;
        flex-direction:column;
        gap: 10px;
      }
      .meKvActions{
        margin-top: 8px;
        display:flex;
      }
      .meKvActions .btn{
        width: auto;
        min-height: 44px;
        padding: 10px 12px;
      }
      .dangerZone{
        margin-top: 18px;
        padding-top: 6px;
      }
      .dangerZone .accountSectionHeader{ color: #b42318; }
      .dangerCard{
        background: var(--surface);
        border-color: rgba(176,0,32,.18);
      }
      .dangerText{
        margin-top: 10px;
        color: #b42318;
        font-size: 12px;
        line-height: 1.35;
      }
      .confirmActions{
        margin-top: 12px;
        display:flex;
        gap: 10px;
      }
      .confirmActions .btn{ flex: 1; }
      .meDetailsTop{
        display:flex;
        justify-content:center;
        padding: 6px 0 6px;
      }
      .meKv{
        display:flex;
        gap: 12px;
        padding: 10px 0;
        border-top: 1px solid var(--divider);
      }
      .meKv:first-child{ border-top: 0; }
      .meKv .k{
        width: 86px;
        color: var(--muted);
        font-weight: 950;
        font-size: 12px;
        text-transform: uppercase;
      }
      .meKv .v{
        flex: 1;
        color: var(--text);
        font-size: 14px;
        font-weight: 900;
        word-break: break-word;
      }

      /* Me: Profile photo dedicated screen */
      .mePhotoScreen{
        display:flex;
        flex-direction:column;
        align-items:center;
        gap: 10px;
        padding-top: 8px;
      }
      .mePhotoAvatarWrap{
        display:flex;
        justify-content:center;
        width: 100%;
        padding: 8px 0 2px;
      }
      .mePhotoAvatarBig{
        width: 144px;
        height: 144px;
        border-radius: 999px;
        background:
          radial-gradient(128px 104px at 34% 28%, rgba(255,255,255,.58), transparent 56%),
          linear-gradient(180deg, rgba(234,238,243,.92), rgba(220,226,233,.72));
        border:1px solid rgba(17,24,39,.08);
        display:flex;
        align-items:center;
        justify-content:center;
        font-weight: 900;
        color: var(--text);
        overflow:hidden;
        position: relative;
        user-select: none;
        box-shadow:
          0 14px 28px rgba(15,23,42,.06),
          inset 0 1px 0 rgba(255,255,255,.68);
      }
      .mePhotoAvatarBig img{
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
        object-fit:cover;
        object-position:center 24%;
        border-radius:999px;
        display:block;
        opacity: 0;
        transform: scale(1.02);
        filter: none;
        transition: opacity .16s ease, transform .18s ease, filter .18s ease;
        z-index:1;
      }
      .mePhotoAvatarBig.isGenerated img{
        object-position:center 22%;
        transform: scale(1.04);
        filter: grayscale(1) contrast(1.08) brightness(.96);
      }
      .mePhotoAvatarBig.hasPhoto img{ opacity: 1; }
      .mePhotoAvatarBig .avatarLetter{
        position:relative;
        z-index:1;
        font-size: 44px;
        font-weight: 860;
        color: #7b8794;
      }
      .mePhotoHelper{
        text-align:center;
        max-width: 320px;
        padding: 0 8px;
      }
      .mePhotoActions{
        width: 100%;
        display:flex;
        flex-direction:column;
        gap: 10px;
      }
      .mePhotoAvatarNote{
        text-align:center;
        max-width: 320px;
        margin: 2px auto 0;
        padding: 0 8px;
      }
      .mePhotoAltAction.hidden{ display:none !important; }
      .mePhotoConfirm{
        width: 100%;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 12px;
      }
      .mePhotoConfirmText{ font-weight: 950; color: var(--text); }
      .mePhotoConfirmSub{ margin-top: 4px; }
      .mePhotoConfirmActions{
        margin-top: 10px;
        display:flex;
        gap: 10px;
      }
    
      /* Fullscreen photo viewer (WhatsApp-like) */
      .mediaOverlay{
        /* Constrain full-screen overlays to the app frame. */
        position: fixed;
        top: 0;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        background: rgba(0,0,0,var(--mediaBg, .92));
        display:none;
        flex-direction:column;
        z-index: 10000;
        overscroll-behavior: contain;
      }
      .mediaOverlay.show{ display:flex; }

      .mediaTop{
        min-height: 56px;
        display:flex;
        align-items:center;
        gap:10px;
        padding: calc(10px + env(safe-area-inset-top, 0px)) 10px 10px;
        color:#fff;
      }
      .mediaBtn{
        width: 48px;
        height: 48px;
        border-radius: 14px;
        border: 1px solid rgba(255,255,255,.18);
        background: rgba(255,255,255,.10);
        color:#fff;
        font-weight: 900;
        cursor:pointer;
        display:flex;
        align-items:center;
        justify-content:center;
        text-decoration:none;
      }
      .mediaBtn:active{ transform: translateY(1px); }
      .mediaTitle{
        flex:1;
        min-width:0;
        font-weight: 900;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
      }
      .mediaStage{
        position: relative;
        flex:1;
        overflow:hidden;
        display:flex;
        align-items:center;
        justify-content:center;
        padding: 10px;
        touch-action: none; /* enables pinch + prevents page pan/zoom */
        user-select: none;
        -webkit-user-select: none;
      }
      #mediaImg{
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        border-radius: 14px;
        box-shadow: var(--shadowMd);
        cursor: zoom-in;
        touch-action: none;
        will-change: transform;
        transform-origin: center center;
        transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(var(--ms, 1));
        transition: transform .18s ease;
      }
      #mediaImg.isInteracting{
        transition: none;
      }
      .mediaNavBtn{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
        width: 44px;
        height: 44px;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,.18);
        background: rgba(0,0,0,.28);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26px;
        font-weight: 700;
        box-shadow: 0 10px 24px rgba(0,0,0,.18);
      }
      .mediaNavBtn.prev{ left: 14px; }
      .mediaNavBtn.next{ right: 14px; }
      .mediaNavBtn:disabled{ opacity: .38; cursor: default; }
      .mediaNavBtn.hidden{ display: none !important; }
      .mediaHint{
        padding: 10px;
        color: rgba(255,255,255,.78);
        font-size: 12px;
        text-align:center;
      }
      .mediaComposer{
        display: none;
        align-items: flex-end;
        gap: 10px;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
        background: rgba(10,14,12,.88);
        backdrop-filter: blur(16px);
        border-top: 1px solid rgba(255,255,255,.08);
      }
      .mediaComposer.show{
        display: flex;
      }
      .mediaComposerInput{
        flex: 1;
        min-width: 0;
        min-height: 46px;
        max-height: 108px;
        border-radius: 22px;
        border: 1px solid rgba(255,255,255,.14);
        background: rgba(255,255,255,.1);
        color: #fff;
        padding: 11px 16px;
        font-size: 15px;
        line-height: 1.35;
        resize: none;
        overflow-y: hidden;
        field-sizing: content;
      }
      .mediaComposerInput::placeholder{
        color: rgba(255,255,255,.64);
      }
      .mediaComposerInput:focus{
        outline: none;
        border-color: rgba(55,176,84,.62);
        box-shadow: 0 0 0 3px rgba(55,176,84,.18);
      }
      .mediaComposerSend{
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: 0;
        background: var(--brand);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        box-shadow: var(--shadowSm);
      }
      .mediaComposerSend:disabled{
        opacity: .58;
      }
      .mediaComposerSend svg{
        width: 22px;
        height: 22px;
        fill: currentColor;
      }

      /* Fullscreen video viewer (simple + reliable) */
      .videoOverlay{
        /* Constrain full-screen overlays to the app frame. */
        position: fixed;
        top: 0;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        background: rgba(0,0,0,.92);
        display: none;
        z-index: 10001; /* above image viewer */
        overscroll-behavior: contain;
      }
      .videoOverlay.show{ display: block; }

      /* Fullscreen map viewer (privacy-forward) */
      .mapOverlay{
        /* Constrain full-screen overlays to the app frame. */
        position: fixed;
        top: 0;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        background: rgba(0,0,0,.92);
        display: none;
        z-index: 10002; /* above video viewer */
        overscroll-behavior: contain;
      }
      .mapOverlay.show{ display: block; }
      .mapTop{
        min-height: 56px;
        display:flex;
        align-items:center;
        gap:10px;
        padding: calc(10px + env(safe-area-inset-top, 0px)) 10px 10px;
        color:#fff;
      }
      .mapStage{
        position: absolute;
        left: 0;
        right: 0;
        top: calc(56px + env(safe-area-inset-top, 0px) + 10px);
        bottom: calc(34px + env(safe-area-inset-bottom, 0px));
        padding: 0 10px;
      }
      #mapFrame{
        width: 100%;
        height: 100%;
        border: 0;
        border-radius: 16px;
        background: #0b0b0b;
        box-shadow: var(--shadowMd);
      }
      .mapHint{
        position: absolute;
        left: 0;
        right: 0;
        bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        padding: 8px 10px;
        color: rgba(255,255,255,.78);
        font-size: 12px;
        text-align: center;
        pointer-events: none;
      }

      .videoStage{
        position: relative;
        width: 100%;
        height: 100%;
        background: #000;
      }

      #videoEl{
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        background: #000;
        /* Let taps hit the stage for "tap to hide controls" */
        pointer-events: none;
      }

      .videoControls{
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        pointer-events: none; /* only bars are interactive */
        opacity: 1;
        transition: opacity .18s ease;
      }
      .videoControls.hidden{
        opacity: 0;
      }
      .videoControls.hidden .videoTop,
      .videoControls.hidden .videoBottom{
        pointer-events: none;
      }

      .videoTop{
        display:flex;
        align-items:center;
        gap:10px;
        padding: calc(10px + env(safe-area-inset-top, 0px)) 10px 10px;
        color:#fff;
        pointer-events: auto;
      }

      .videoBottom{
        display:flex;
        align-items:center;
        gap: 10px;
        padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
        pointer-events: auto;
        background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
      }

      .videoPlayBtn{
        width: 44px;
        height: 44px;
        border-radius: 14px;
        border: 1px solid rgba(255,255,255,.18);
        background: rgba(255,255,255,.10);
        color:#fff;
        font-weight: 950;
        cursor:pointer;
        display:flex;
        align-items:center;
        justify-content:center;
        flex: 0 0 auto;
      }
      .videoPlayBtn:active{ transform: translateY(1px); }

      .videoSeek{
        flex: 1;
        min-width: 0;
        height: 28px;
      }

      .videoTime{
        flex: 0 0 auto;
        color: rgba(255,255,255,.86);
        font-weight: 900;
        font-size: 12px;
        white-space: nowrap;
        min-width: 92px;
        text-align: right;
      }

    
      /* Message action sheet + info modal (WhatsApp-like) */
      /* Message long-press menu (small popover; PHASE IC8) */
      .msgMenuBackdrop{
        position: fixed;
        top: 0;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        background: rgba(6, 10, 20, .12);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        opacity: 0;
        pointer-events: none;
        transition: opacity .16s ease;
        z-index: 9998;
      }
      .msgMenuBackdrop.show{ opacity: 1; pointer-events: auto; }
      .msgMenu{
        position: fixed;
        left: -9999px;
        top: -9999px;
        display: none;
        align-items: center;
        gap: 4px;
        padding: 5px;
        max-width: min(calc(100% - 24px), 360px);
        background: rgba(255,255,255,.985);
        border: 1px solid rgba(60,60,67,.12);
        border-radius: 20px;
        box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        will-change: transform, opacity;
        z-index: 10001;
      }
      .msgMenu.show{
        display: inline-flex;
        animation: msgMenuPop 180ms cubic-bezier(.22, 1, .36, 1);
      }
      .msgMenu[aria-hidden="true"]{ display: none; }
      .msgReactionBtn{
        width: 40px;
        height: 40px;
        border-radius: 12px;
        border: 0;
        background: transparent;
        font-size: 23px;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        transition: transform 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
      }
      .msgReactionBtn:active{ transform: scale(.94); background: rgba(17,177,78,.08); }
      .msgReactionBtn.active{ background: rgba(17,177,78,.12); box-shadow: inset 0 0 0 1px rgba(17,177,78,.18); }
      .msgReactionBtn:disabled{ opacity: .45; cursor: default; }
      .msgReactionBtn:focus-visible{
        outline: none;
        box-shadow: 0 0 0 3px var(--brandRing);
      }
      .sheetBackdrop{
        position: fixed;
        top: 0;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        background: rgba(0,0,0,.25);
        opacity: 0; pointer-events: none;
        transition: opacity .15s ease;
        z-index: 9998;
      }
      .sheetBackdrop.show{ opacity: 1; pointer-events: auto; }

      .actionSheet{
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        width: min(280px, calc(100% - 28px));
        background: rgba(255,255,255,.98);
        border: 1px solid rgba(0,0,0,.08);
        border-radius: 22px;
        box-shadow: 0 18px 40px rgba(15, 23, 42, .2);
        padding: 10px;
        display: none;
        z-index: 10001;
      }
      .actionSheet.show{ display: block; }
      .messageActionsSheet{
        left: -9999px;
        top: -9999px;
        bottom: auto;
        transform: none;
        width: min(264px, calc(100% - 24px));
        max-width: calc(100% - 24px);
        max-height: min(480px, calc(var(--vvh, 100dvh) - 96px));
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 6px;
        border-radius: 18px;
        border-color: rgba(60,60,67,.12);
        box-shadow: 0 12px 28px rgba(15, 23, 42, .12);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        will-change: transform, opacity;
      }
      .messageActionsSheet.show{
        animation: msgSheetPop 200ms cubic-bezier(.22, 1, .36, 1);
      }
      .messageActionsSheet .sheetHeader{
        padding: 2px 8px 7px;
      }
      .messageActionsSheet .sheetTitle{
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }
      .messageActionsSheet .sheetPreview{
        margin-top: 0;
        padding: 8px 12px;
        border-radius: 12px;
        background: rgba(60,60,67,.06);
        border: 0;
        color: rgba(15,23,42,.78);
        font-weight: 600;
        line-height: 1.32;
        max-height: 4.1em;
      }
      .sheetHeader{ padding: 6px 10px 10px; }
      .sheetTitle{ font-weight: 900; font-size: 14px; color: var(--text); letter-spacing: -.01em; }
      .sheetPreview{
        margin-top: 6px;
        font-size: 13px;
        color: var(--wa-muted);
        line-height: 1.3;
        max-height: 3.6em;
        overflow: hidden;
        word-break: break-word;
      }
      .sheetMeta{
        margin-top: 10px;
        padding: 11px 14px;
        border-radius: 16px;
        background: rgba(27,149,11,.07);
        border: 1px solid rgba(27,149,11,.12);
        color: var(--text);
        font-weight: 900;
        font-size: 16px;
        line-height: 1.25;
        text-align: center;
        letter-spacing: -.01em;
        word-break: break-word;
      }
      .sheetBtn{
        width: 100%;
        text-align: left;
        padding: 12px 14px;
        border: 0;
        border-radius: 12px;
        background: transparent;
        margin: 0;
        font-weight: 760;
        cursor: pointer;
        min-height: 44px;
        color: var(--text);
        transition: background-color 160ms ease, color 160ms ease, transform 80ms ease;
      }
      .messageActionsSheet .sheetBtn + .sheetBtn{
        border-top: 1px solid rgba(60,60,67,.08);
      }
      .sheetBtn:active{ transform: scale(.99); background: rgba(17,177,78,.07); }
      .sheetBtn:disabled{
        opacity: .46;
        pointer-events: none;
      }
      .sheetBtnInner{
        display:flex;
        align-items:center;
        gap:11px;
      }
      .sheetBtnIcon{
        width: 20px;
        text-align:center;
        font-size: 15px;
        line-height: 1;
        color: rgba(60,60,67,.62);
      }
      .sheetBtnText{
        flex: 1;
        min-width: 0;
      }
      @keyframes msgMenuPop{
        from{
          opacity: 0;
          transform: translateY(10px) scale(.94);
        }
        to{
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }
      @keyframes msgSheetPop{
        from{
          opacity: 0;
          transform: translateY(12px) scale(.97);
        }
        to{
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }
      body.msgActionOpen,
      body.msgActionOpen *{
        -webkit-user-select: none !important;
        user-select: none !important;
        -webkit-touch-callout: none !important;
      }
      .forwardPickerSheet{
        width: min(380px, calc(100% - 24px));
        padding: 0;
        overflow: hidden;
      }
      .forwardPickerHeader{
        padding: 14px 16px 8px;
        border-bottom: 1px solid rgba(0,0,0,.06);
      }
      .forwardPickerTop{
        display:flex;
        align-items:flex-start;
        gap: 12px;
        justify-content: space-between;
      }
      .forwardPickerClose{
        width: var(--icon-btn-size-compact);
        height: var(--icon-btn-size-compact);
        min-width: var(--icon-btn-size-compact);
        min-height: var(--icon-btn-size-compact);
        border: 0;
        border-radius: 999px;
        background: rgba(15,23,42,.06);
        color: var(--text);
        font-size: var(--icon-glyph-size-compact);
        display:flex;
        align-items:center;
        justify-content:center;
      }
      .forwardPickerSearchWrap{
        padding: 12px 16px 8px;
      }
      .forwardPickerSearch{
        width: 100%;
        min-height: 46px;
        border-radius: 16px;
        border: 1px solid rgba(0,0,0,.08);
        background: rgba(247,248,250,.95);
        padding: 0 14px;
        font-size: 15px;
      }
      .forwardPickerList{
        padding: 0 10px 10px;
        max-height: min(58vh, 420px);
        overflow: auto;
      }
      .forwardPickerSectionLabel{
        padding: 10px 8px 6px;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--wa-muted);
      }
      .forwardPickerRow{
        width: 100%;
        display:flex;
        align-items:center;
        gap: 12px;
        padding: 12px 12px;
        border: 0;
        border-radius: 18px;
        background: transparent;
        text-align: left;
      }
      .forwardPickerRow:active{
        background: rgba(17,177,78,.08);
      }
      .forwardPickerRow.selected{
        background: rgba(17,177,78,.09);
      }
      .forwardPickerAvatar{
        width: 44px;
        height: 44px;
        border-radius: 999px;
        overflow: hidden;
        background: rgba(15,23,42,.08);
        color: var(--text);
        font-weight: 800;
        display:flex;
        align-items:center;
        justify-content:center;
        flex: 0 0 auto;
      }
      .forwardPickerAvatar img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        display:block;
      }
      .forwardPickerMeta{
        min-width: 0;
        flex: 1;
      }
      .forwardPickerName{
        font-size: 15px;
        font-weight: 800;
        color: var(--text);
        line-height: 1.2;
      }
      .forwardPickerSub{
        margin-top: 3px;
        font-size: 12px;
        color: var(--wa-muted);
        line-height: 1.3;
      }
      .forwardPickerCheck{
        width: 24px;
        height: 24px;
        border-radius: 999px;
        border: 1px solid rgba(0,0,0,.12);
        display:flex;
        align-items:center;
        justify-content:center;
        color: transparent;
        flex: 0 0 auto;
        transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
      }
      .forwardPickerRow.selected .forwardPickerCheck{
        background: var(--brand);
        border-color: var(--brand);
        color: #fff;
      }
      .forwardPickerEmpty{
        padding: 28px 18px 22px;
        text-align:center;
        color: var(--wa-muted);
        font-size: 14px;
      }
      .forwardPickerFooter{
        display:flex;
        gap: 10px;
        padding: 10px 16px calc(16px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid rgba(0,0,0,.06);
        background: rgba(255,255,255,.98);
      }
      .forwardPickerFooter .btn{
        flex: 1 1 0;
        min-height: 48px;
      }
      .sheetBtn:focus-visible{
        outline: none;
        box-shadow: 0 0 0 3px var(--brandRing);
      }
      .sheetBtn[disabled]{ opacity: .45; cursor: default; }
      .sheetBtn[disabled]:active{ transform:none; background: transparent; }
      .messageActionsSheet .sheetBtn.danger{
        background: transparent;
        color: var(--danger);
      }
      .messageActionsSheet .sheetBtn.danger .sheetBtnIcon{
        color: currentColor;
      }
      .sheetBtn.danger{ background: var(--dangerBg); color: var(--danger); }
      #uiConfirmSheet .sheetBtn.danger{
        background: #fff;
        border-color: rgba(176,0,32,.14);
        color: var(--danger);
        box-shadow: none;
      }
      #uiConfirmSheet .sheetBtn.danger:active{
        background: rgba(176,0,32,.05);
      }
      .deleteMessageSheet{
        width: min(420px, calc(100% - 16px));
        padding: 0 6px calc(8px + env(safe-area-inset-bottom, 0px));
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        overflow: visible;
      }
      .deleteMessageSheet .countryPickerHandleWrap{
        display: none;
      }
      .deleteMessageSheet .sheetHeader{
        padding: 12px 18px 11px;
        background: rgba(250,250,250,.98);
        border: 1px solid rgba(60,60,67,.15);
        border-bottom: 0;
        border-radius: 14px 14px 0 0;
        text-align: center;
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
      }
      .deleteMessageSheet .sheetTitle{
        font-size: 13px;
        font-weight: 800;
        letter-spacing: -.01em;
      }
      .deleteMessageSheet .sheetPreview{
        margin-top: 4px;
        font-size: 13px;
        line-height: 1.36;
        color: rgba(60,60,67,.74);
        max-height: none;
        text-wrap: balance;
      }
      .deleteMessageActions{
        background: rgba(250,250,250,.98);
        border: 1px solid rgba(60,60,67,.15);
        border-top: 0;
        border-radius: 0 0 14px 14px;
        overflow: hidden;
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
      }
      .deleteMessageSheet .sheetBtn{
        min-height: 57px;
        padding: 0 18px;
        border-radius: 0;
        justify-content: center;
      }
      .deleteMessageSheet .sheetBtn:active{
        transform: none;
        background: rgba(60,60,67,.06);
      }
      .deleteMessageSheet .sheetBtn + .sheetBtn{
        border-top: 1px solid rgba(60,60,67,.13);
      }
      .deleteSheetBtnInner{
        width: 100%;
        justify-content: center;
        gap: 0;
      }
      .deleteSheetBtnCopy{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        min-width: 0;
        flex: 1;
        text-align: center;
      }
      .deleteMessageSheet .sheetBtnIcon{
        display: none;
      }
      .deleteMessageSheet .sheetBtnText{
        flex: 0 0 auto;
        font-size: 17px;
        font-weight: 500;
      }
      .deleteMessageSheet .sheetBtn:focus-visible{
        outline: none;
        box-shadow: none;
        background: rgba(60,60,67,.05);
      }
      .sheetBtnSub{
        font-size: 12px;
        line-height: 1.35;
        font-weight: 600;
        color: rgba(60,60,67,.74);
      }
      .deleteMessageSheet .sheetBtnSub:empty{
        display: none;
      }
      .deleteMessageSheet .sheetBtn.danger{
        background: transparent;
        color: var(--danger);
      }
      .deleteMessageSheet .sheetBtn.danger:active{
        background: rgba(176,0,32,.06);
      }
      .deleteMessageCancelWrap{
        margin-top: 8px;
      }
      .deleteMessageCancelWrap .sheetBtn{
        background: rgba(255,255,255,.98);
        border: 1px solid rgba(60,60,67,.16);
        border-radius: 14px;
        text-align: center;
        justify-content: center;
        min-height: 57px;
        font-size: 17px;
        font-weight: 700;
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
      }
      .deleteMessageCancelWrap .sheetBtn:active{
        transform: none;
        background: rgba(60,60,67,.05);
      }
      .deleteMessageCancelWrap .sheetBtn:focus-visible{
        outline: none;
        box-shadow: none;
        background: rgba(60,60,67,.05);
      }
      #deleteMessageBackdrop{
        background: rgba(15,23,42,.36);
        backdrop-filter: blur(7px);
        -webkit-backdrop-filter: blur(7px);
      }
      body.deleteMessageSheetOpen .chatBottom{
        opacity: 0;
        transform: translateY(14px);
        pointer-events: none;
        transition: opacity .14s ease, transform .18s ease;
      }
      #uiConfirmSheet.isAuthPhone{
        width: min(340px, calc(100% - 24px));
        padding: 10px 10px 10px;
        border-radius: 26px;
      }
      #uiConfirmSheet.isAuthPhone .sheetHeader{
        padding: 10px 14px 14px;
      }
      #uiConfirmSheet.isAuthPhone .sheetTitle{
        font-size: 19px;
        font-weight: 950;
        letter-spacing: -.02em;
      }
      #uiConfirmSheet.isAuthPhone .sheetPreview{
        margin-top: 7px;
        font-size: 15px;
        line-height: 1.45;
        color: rgba(15,23,42,.62);
        text-wrap: balance;
        max-height: none;
      }
      #uiConfirmSheet.isAuthPhone.hasMeta .sheetPreview{
        margin-bottom: 0;
      }
      #uiConfirmSheet.isAuthPhone .sheetMeta{
        margin-top: 14px;
        padding: 14px 16px;
        border-radius: 18px;
        font-size: 18px;
        letter-spacing: -.02em;
        background: linear-gradient(180deg, rgba(27,149,11,.09) 0%, rgba(27,149,11,.06) 100%);
        border-color: rgba(27,149,11,.14);
      }
      #uiConfirmSheet.isAuthPhone #uiConfirmYesBtn{
        margin-top: 4px;
        background: var(--brand);
        color: #fff;
        text-align: center;
        box-shadow: 0 10px 22px rgba(27,149,11,.18);
      }
      #uiConfirmSheet.isAuthPhone #uiConfirmYesBtn:active{
        background: var(--accent-pressed);
      }
      #uiConfirmSheet.isAuthPhone #uiConfirmCancelBtn{
        margin-top: 2px;
        text-align: center;
        background: transparent;
        color: rgba(15,23,42,.72);
        font-weight: 850;
        min-height: 44px;
      }
      #uiConfirmSheet.isAuthPhone #uiConfirmCancelBtn:active{
        background: rgba(15,23,42,.05);
      }

      /* Attachment menu sheet */
      .attachSheet{
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,250,249,.98) 100%);
      }
      .attachSheet .countryPickerHandleWrap{
        padding: 12px 0 8px;
        display: flex;
        justify-content: center;
        flex: 0 0 auto;
        touch-action: none; /* enables swipe-down */
      }
      .attachSheet .countryPickerHandle{
        width: 40px;
        height: 4px;
        border-radius: 999px;
        background: rgba(15,23,42,.30);
      }
      .attachSheet .attachMenuList{
        display:flex;
        flex-direction:column;
        gap:10px;
        max-height: min(60vh, 440px);
        overflow-y:auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 10px calc(16px + env(safe-area-inset-bottom, 0px));
      }
      .attachMenuItem{
        width:100%;
        text-align:left;
        display:flex;
        align-items:center;
        gap:12px;
        padding: 11px 14px;
        min-height: 54px;
        border: 1px solid rgba(15,23,42,.06);
        border-radius: 18px;
        background: rgba(255,255,255,.96);
        color: var(--text);
        cursor:pointer;
        box-shadow: 0 6px 16px rgba(15,23,42,.035);
        transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 80ms ease;
      }
      .attachMenuItem:active{
        transform: scale(.99);
        background: #f8fafc;
      }
      .attachMenuItem:focus-visible{
        outline: none;
        box-shadow: 0 0 0 3px var(--brandRing);
      }
      .attachMenuItem:disabled{
        opacity: .5;
        cursor: not-allowed;
      }
      .attachMenuIcon{
        width: 42px;
        height: 42px;
        border-radius: 14px;
        background: rgba(11,92,255,.10);
        color: var(--accent);
        display:flex;
        align-items:center;
        justify-content:center;
        flex: 0 0 auto;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
      }
      .attachMenuIcon svg{
        width: 20px;
        height: 20px;
        fill: currentColor;
      }
      .attachMenuText{
        display:flex;
        flex-direction:column;
        gap:2px;
        min-width:0;
      }
      .attachMenuLabel{
        font-weight: 900;
        font-size: 14px;
        line-height: 1.2;
      }
      .attachMenuSub{
        font-size: 12px;
        color: var(--wa-muted);
        line-height: 1.2;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
      }
      #attachMenuPhotos .attachMenuIcon{
        background: rgba(79,70,229,.12);
        color: #4f46e5;
      }
      #attachMenuCamera .attachMenuIcon{
        background: rgba(8,145,178,.12);
        color: #0891b2;
      }
      #attachMenuDocument .attachMenuIcon{
        background: rgba(37,99,235,.12);
        color: #2563eb;
      }
      #attachMenuLocation .attachMenuIcon{
        background: rgba(22,163,74,.12);
        color: #16a34a;
      }
      #attachMenuAiImage .attachMenuIcon{
        background: rgba(132,204,22,.14);
        color: #65a30d;
      }

      #roomsCreatePhotoSourceSheet.bottomSheet,
      #meGalleryAddSheet.bottomSheet,
      #mePhotoAddSheet.bottomSheet{
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        background: linear-gradient(180deg, rgba(255,255,255,.985) 0%, rgba(248,250,249,.985) 100%);
      }
      #roomsCreatePhotoSourceSheet .sheetHeader,
      #meGalleryAddSheet .sheetHeader,
      #mePhotoAddSheet .sheetHeader{
        padding: 4px 12px 10px;
      }
      #roomsCreatePhotoSourceSheet .sheetTitle,
      #meGalleryAddSheet .sheetTitle,
      #mePhotoAddSheet .sheetTitle{
        font-size: 16px;
      }
      #roomsCreatePhotoSourceSheet .sheetPreview,
      #meGalleryAddSheet .sheetPreview,
      #mePhotoAddSheet .sheetPreview{
        margin-top: 5px;
      }
      #roomsCreatePhotoSourceSheet .attachMenuList,
      #meGalleryAddSheet .attachMenuList,
      #mePhotoAddSheet .attachMenuList{
        padding-bottom: 6px;
      }
      #roomsCreatePhotoSourceFiles.hidden{
        display: none;
      }
      #meGalleryAddFiles.hidden{
        display: none;
      }
      #mePhotoAddFiles.hidden{
        display: none;
      }

      /* Share location sheet */
      #shareLocationBackdrop{
        background: rgba(0,0,0,.42);
      }
      #shareLocationSheet.bottomSheet{
        padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        background: var(--surface);
      }
      #shareLocationSheet .countryPickerHandleWrap{
        padding: 10px 0 4px;
        display: flex;
        justify-content: center;
        flex: 0 0 auto;
      }
      #shareLocationSheet .countryPickerHandle{
        width: 38px;
        height: 4px;
        border-radius: 999px;
        background: rgba(15,23,42,.22);
      }
      #shareLocationSheet .sheetHeader{
        padding: 4px 16px 10px;
      }
      #placePreviewBackdrop,
      #placeShareBackdrop{
        background: rgba(0,0,0,.38);
      }
      #placePreviewSheet.bottomSheet,
      #placeShareSheet.bottomSheet{
        padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        background: var(--surface);
      }
      #placePreviewSheet .countryPickerHandleWrap,
      #placeShareSheet .countryPickerHandleWrap{
        padding: 10px 0 4px;
        display: flex;
        justify-content: center;
        flex: 0 0 auto;
      }
      #placePreviewSheet .countryPickerHandle,
      #placeShareSheet .countryPickerHandle{
        width: 38px;
        height: 4px;
        border-radius: 999px;
        background: rgba(15,23,42,.22);
      }
      #placePreviewSheet .sheetHeader,
      #placeShareSheet .sheetHeader{
        padding: 4px 16px 10px;
      }
      .placePreviewBody,
      .placeShareBody{
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 0 16px 4px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        max-height: min(68vh, 560px);
      }
      .placeSheetSummary{
        border: 1px solid rgba(39,174,96,.16);
        border-radius: 20px;
        background:
          radial-gradient(circle at top center, rgba(55,176,84,.08), transparent 58%),
          linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,248,.98));
        box-shadow: 0 8px 24px rgba(15,23,42,.05);
        padding: 14px;
      }
      .placeShareList{
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding-bottom: 4px;
      }
      .placeShareEmpty{
        padding: 16px 14px;
        border: 1px dashed rgba(15,23,42,.12);
        border-radius: 18px;
        background: rgba(248,250,249,.92);
        color: var(--wa-muted);
        font-size: 13px;
        line-height: 1.4;
        text-align: center;
      }
      .placeShareContact{
        width: 100%;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        min-height: 58px;
        border: 1px solid rgba(15,23,42,.08);
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(15,23,42,.04);
        cursor: pointer;
        text-align: left;
        color: var(--text);
      }
      .placeShareContact:active{
        transform: translateY(1px);
      }
      .placeShareContact:focus-visible{
        outline: none;
        box-shadow: 0 0 0 3px var(--brandRing);
      }
      .placeShareAvatar{
        width: 42px;
        height: 42px;
        border-radius: 50%;
        overflow: hidden;
        flex: 0 0 auto;
        background: var(--surface2);
      }
      .placeShareMeta{
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
      }
      .placeShareName{
        font-size: 15px;
        font-weight: 900;
        color: var(--text);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .placeShareHint{
        font-size: 12px;
        color: var(--wa-muted);
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .placeShareChevron{
        color: rgba(15,23,42,.34);
        font-size: 18px;
        font-weight: 900;
        flex: 0 0 auto;
      }
      .shareLocationBody{
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 0 16px 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }
      .shareLocationMapCard{
        border: 1px solid rgba(39,174,96,.16);
        border-radius: 20px;
        background:
          radial-gradient(circle at top center, rgba(55,176,84,.10), transparent 56%),
          linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,248,.98));
        box-shadow: 0 8px 24px rgba(15,23,42,.06);
        overflow: hidden;
      }
      .shareLocationMapWrap{
        position: relative;
        aspect-ratio: 16 / 9;
        min-height: 180px;
        background: linear-gradient(180deg, #eaf7ee 0%, #f7fbf8 100%);
      }
      #shareLocationMapFrame{
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
        background: transparent;
      }
      .shareLocationMapPlaceholder{
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 18px;
        text-align: center;
        color: var(--wa-muted);
        background:
          radial-gradient(circle at center, rgba(255,255,255,.88), rgba(255,255,255,.94));
      }
      .shareLocationMapPlaceholder.hidden{
        display: none;
      }
      .shareLocationMapPin{
        width: 54px;
        height: 54px;
        border-radius: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(55,176,84,.14);
        color: var(--accent);
        box-shadow: inset 0 0 0 1px rgba(55,176,84,.10);
      }
      .shareLocationMapPin svg{
        width: 26px;
        height: 26px;
        fill: currentColor;
      }
      .shareLocationMapStatus{
        font-size: 13px;
        font-weight: 700;
        line-height: 1.35;
        color: var(--text);
      }
      .shareLocationMeta{
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 14px 16px 16px;
      }
      .shareLocationBadge{
        align-self: flex-start;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 28px;
        padding: 0 12px;
        border-radius: 999px;
        background: rgba(55,176,84,.12);
        color: var(--accent);
        font-size: 12px;
        font-weight: 900;
        letter-spacing: .12em;
        text-transform: uppercase;
      }
      .shareLocationLabel{
        font-size: 20px;
        line-height: 1.15;
        font-weight: 950;
        color: var(--text);
      }
      .shareLocationAccuracy{
        font-size: 13px;
        line-height: 1.4;
        color: var(--wa-muted);
      }
      .shareLocationAccuracy.isApproximate{
        color: #8a5a0a;
      }
      .shareLocationNote{
        font-size: 13px;
        line-height: 1.45;
        color: var(--wa-muted);
        padding: 0 2px;
      }
      .shareLocationError{
        border: 1px solid rgba(176,0,32,.12);
        border-radius: 16px;
        background: rgba(176,0,32,.05);
        color: var(--danger);
        padding: 12px 14px;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.4;
      }
      .shareLocationActions{
        display: flex;
        gap: 10px;
        padding-bottom: 2px;
      }
      .shareLocationActionBtn{
        flex: 1 1 0;
        min-height: 50px;
        border-radius: 16px;
        border: 1px solid var(--border);
        background: #fff;
        color: var(--text);
        font-size: 15px;
        font-weight: 900;
        cursor: pointer;
        transition: transform 80ms ease, background-color 160ms ease, border-color 160ms ease, opacity 160ms ease;
      }
      .shareLocationActionBtn:active{
        transform: scale(.99);
      }
      .shareLocationActionBtn:focus-visible{
        outline: none;
        box-shadow: 0 0 0 3px var(--brandRing);
      }
      .shareLocationActionBtn.primary{
        background: var(--brand);
        border-color: transparent;
        color: #fff;
        box-shadow: var(--shadowSm);
      }
      .shareLocationActionBtn:disabled{
        opacity: .55;
        cursor: not-allowed;
        transform: none;
      }
      @media (max-width: 480px){
        .shareLocationLabel{
          font-size: 18px;
        }
        .shareLocationMapWrap{
          min-height: 168px;
        }
      }

      /* Location prompt: native-style bottom sheet */
      .locBackdrop{
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.35);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
        z-index: 10020;
      }
      .locBackdrop.show{ opacity: 1; pointer-events: auto; }
      .locSheet{
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
        border-radius: 24px 24px 0 0;
        box-shadow: 0 -10px 30px rgba(0,0,0,.18);
        padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        max-height: 70vh;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        opacity: 0;
        transform: translateY(12px);
        transition: transform .22s ease, opacity .22s ease;
        z-index: 10021;
        pointer-events: none;
      }
      .locSheet.show{
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
      }
      .locHandle{
        width: 36px;
        height: 4px;
        border-radius: 999px;
        background: rgba(60,60,67,.24);
        margin: 2px auto 8px;
      }
      .locCloseBtn{
        position: absolute;
        top: 6px;
        right: 6px;
        width: 44px;
        height: 44px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: var(--icon-glyph-size-compact);
        color: rgba(0,0,0,.6);
        cursor: pointer;
      }
      .locCloseBtn:active{ background: rgba(0,0,0,.06); }
      .locCloseBtn:focus-visible{
        outline: none;
        box-shadow: 0 0 0 3px var(--brandRing);
      }
      .locSheet.isNativeStrict .locCloseBtn{
        display: none;
      }
      .locHeader{
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 4px 4px 10px;
      }
      .locIcon{
        width: 36px;
        height: 36px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(37,211,102,.12);
        font-size: 18px;
        flex: 0 0 36px;
      }
      .locTitle{
        font-size: 17px;
        font-weight: 900;
        color: #0B0B0C;
        line-height: 1.25;
      }
      .locSubtitle{
        margin-top: 4px;
        font-size: 13px;
        color: var(--wa-muted);
        line-height: 1.3;
      }
      .locActions{
        display:flex;
        flex-direction: column;
        gap: 10px;
        padding-top: 2px;
      }
      .locActions .btn{ min-height: 46px; }
      @media (prefers-reduced-motion: reduce){
        .locSheet{ transition: none; }
        .locBackdrop{ transition: none; }
      }
      @media (min-width: 520px){
        .locSheet{
          left: 50%;
          right: auto;
          width: min(480px, 100%);
          transform: translateX(-50%) translateY(12px);
        }
        .locSheet.show{
          transform: translateX(-50%) translateY(0);
        }
      }

      /* ============================================================
       * Mobile-native bottom sheet (used by Signup country picker)
       * - Full width on mobile
       * - Rounded top corners only
       * - No desktop card shadow
       * - Max ~85% viewport height + internal scrolling
       * ============================================================ */
      :root{
        /* iOS keyboard-safe bottom-sheet offset (set from visualViewport) */
        --vvBottom: 0px;
        --sheetKeyboardOffset: 0px;
      }
      #countryPickerBackdrop{
        background: rgba(0,0,0,.45);
      }
      .bottomSheet{
        /* Keep mounted so transform can animate. */
        display: flex;
        flex-direction: column;
        left: 50%;
        right: auto;
        bottom: 0;
        /* Constrain to app frame width with sheet gutters (~12px per side). */
        width: min(var(--app-max-w), calc(100% - 24px));
        max-width: var(--app-max-w);
        max-height: 85vh;
        border-radius: 18px 18px 0 0;
        border-top: 1px solid var(--divider);
        box-shadow: none;
        padding: 0;
        overflow: hidden;

        /* Slide from bottom */
        opacity: 0;
        pointer-events: none;
        --sheetKeyboardOffset: max(var(--vvBottom, 0px), var(--kb, 0px));
        --sheetTranslateY: calc(100% + 16px + var(--sheetDrag, 0px) - var(--sheetKeyboardOffset, 0px));
        transform: translateX(-50%) translateY(var(--sheetTranslateY, 0px));
        transition: transform .22s ease, opacity .18s ease;
        will-change: transform;
      }
      .bottomSheet.show{
        display: flex; /* override .actionSheet.show */
        opacity: 1;
        pointer-events: auto;
        --sheetTranslateY: calc(var(--sheetDrag, 0px) - var(--sheetKeyboardOffset, 0px));
        transform: translateX(-50%) translateY(var(--sheetTranslateY, 0px));
      }
      .bottomSheet.dragging{ transition: none !important; }
      @media (prefers-reduced-motion: reduce){
        .bottomSheet{ transition: none !important; }
      }
      /* Country picker: safe-area padding + native spacing */
      #countryPickerSheet.bottomSheet{
        padding-bottom: env(safe-area-inset-bottom, 0px);
      }
      #countryPickerSheet .countryPickerHandleWrap{
        padding: 10px 0 2px;
        display: flex;
        justify-content: center;
        flex: 0 0 auto;
        touch-action: none; /* enables swipe-down */
      }
      #countryPickerSheet .countryPickerHandle{
        width: 38px;
        height: 4px;
        border-radius: 999px;
        background: rgba(15,23,42,.20);
      }
      #countryPickerSheet .sheetHeader{
        padding: 6px 14px 10px;
      }
      #countryPickerSheet .sheetTitle{
        font-size: 16px;
        font-weight: 950;
      }
      #countryPickerSheet .sheetPreview{
        margin-top: 4px;
        font-size: 13px;
      }
      #countryPickerSheet .countryPickerControls{
        padding: 0 14px 10px;
        flex: 0 0 auto;
      }
      #countryPickerSheet #countryPickerSearch{
        width: 100%;
        min-height: 48px;
        padding: 12px 12px;
        border-radius: 14px;
        border: 1px solid var(--border);
        background: var(--surface2);
        font-size: 16px; /* prevent iOS zoom */
      }
      #countryPickerSheet #countryPickerBackBtn{
        margin: 0 0 8px;
        background: transparent;
        border: 0;
        padding: 8px 0;
        min-height: 44px;
        font-weight: 900;
        color: var(--text);
      }
      #countryPickerSheet #countryPickerBackBtn:active{ opacity: .86; transform: none; }
      #countryPickerSheet .countryPickerContent{
        flex: 1 1 auto;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 0 0 calc(10px + env(safe-area-inset-bottom, 0px));
      }
      #countryPickerSheet .countryPickerSectionLabel{
        color: var(--wa-muted);
        font-size: 12px;
        font-weight: 900;
        letter-spacing: .02em;
        padding: 6px 14px 8px;
      }
      #countryPickerSheet .countryPickerList{
        padding: 0;
        margin: 0;
      }
      #countryPickerSheet .countryRowBtn{
        /* override .sheetBtn card look */
        margin: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        padding: 14px 14px;
        min-height: 52px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        font-weight: 900;
        transform: none;
        border-top: 1px solid var(--divider);
      }
      #countryPickerSheet .countryRowBtn:first-child{ border-top: 0; }
      #countryPickerSheet .countryRowBtn:active{ background: rgba(15,23,42,0.04); transform: none; }
      #countryPickerSheet .countryRowName{
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      #countryPickerSheet .countryRowDial{
        flex: 0 0 auto;
        color: var(--wa-muted);
        font-weight: 850;
      }
      #countryPickerSheet #countryPickerOtherBtn{
        margin: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        padding: 14px 14px;
        min-height: 52px;
        font-weight: 950;
        color: var(--accent);
        border-top: 1px solid var(--divider);
      }
      #countryPickerSheet #countryPickerOtherBtn:active{ background: rgba(27,149,11,0.08); transform: none; }

      /* Places: Wikipedia info sheet */
      #wikiSheet.bottomSheet{
        padding-bottom: env(safe-area-inset-bottom, 0px);
      }
      #wikiSheet .countryPickerHandleWrap{
        padding: 10px 0 2px;
        display: flex;
        justify-content: center;
        flex: 0 0 auto;
        touch-action: none; /* enable swipe-down */
      }
      #wikiSheet .wikiSheetBody{
        padding: 0 16px 12px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex: 1 1 auto;
      }
      #wikiSheet .wikiSheetFooter{
        padding: 8px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        font-size: 12px;
        color: var(--wa-muted);
        border-top: 1px solid rgba(233,233,236,.65);
      }
      .wikiSheetStatus{
        background: var(--surface2);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 12px;
        font-size: 14px;
        line-height: 1.4;
      }
      .wikiStatusTitle{ font-weight: 800; margin-bottom: 4px; }
      .wikiStatusSub{ color: var(--wa-muted); font-size: 13px; margin-bottom: 10px; }
      .wikiStatusActions{ display:flex; gap: 8px; flex-wrap: wrap; }
      .wikiStatusDivider{ text-align:center; color: var(--wa-muted); font-size:12px; margin: 10px 0; }
      .wikiStatusInput{ display:flex; gap: 8px; }
      .wikiStatusInput input{
        flex: 1;
        min-height: 42px;
        padding: 8px 10px;
        border-radius: 12px;
        border: 1px solid var(--border);
        background: var(--surface);
        font-size: 15px;
      }
      .wikiStatusInput .btn{ min-height: 42px; padding: 0 12px; }
      .wikiSheetSkeleton .skelLine{ margin-top: 10px; }
      .wikiSection{
        padding: 10px 0 12px;
        border-bottom: 1px solid rgba(233,233,236,.65);
      }
      .wikiSection:last-child{ border-bottom: 0; }
      .wikiSectionHeader{
        display:flex;
        align-items:center;
        justify-content: space-between;
        gap: 12px;
      }
      .wikiSectionTitle{ font-weight: 800; font-size: 15px; }
      .wikiThumb{
        width: 46px;
        height: 46px;
        border-radius: 12px;
        object-fit: cover;
        border: 1px solid rgba(0,0,0,.06);
        flex: 0 0 auto;
      }
      .wikiExtract{
        margin-top: 8px;
        font-size: 14px;
        line-height: 1.45;
        color: var(--text);
        display: -webkit-box;
        -webkit-line-clamp: 6;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .wikiFacts{
        margin-top: 6px;
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
      .wikiFactRow{
        display:flex;
        gap: 6px;
        font-size: 12px;
        color: var(--wa-muted);
      }
      .wikiFactLabel{ font-weight: 700; color: var(--text); }
      .wikiOpenBtn{ margin-top: 10px; width: 100%; }
      .wikiCountrySection{ padding-top: 6px; }
      .wikiCountryToggle{
        width: 100%;
        display:flex;
        align-items:center;
        justify-content: space-between;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 10px 12px;
        font-weight: 800;
      }
      .wikiCountryToggle:active{ transform: translateY(1px); }
      .wikiChevron{ transition: transform .2s ease; }
      .wikiCountryBody{ margin-top: 8px; display:none; }
      .wikiCountrySection.expanded .wikiCountryBody{ display:block; }
      .wikiCountrySection.expanded .wikiChevron{ transform: rotate(180deg); }

      /* AI Image bottom sheet */
      #aiImageSheet.bottomSheet{
        padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
      }
      html.is-native-app.keyboard-open #aiImageSheet.bottomSheet.show{
        max-height: calc(var(--vvh, 100dvh) - 12px);
      }
      .aiImageSheet .aiImageBody{
        padding: 0 12px 12px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
      }
      .aiImagePrompt{
        width: 100%;
        min-height: 72px;
        padding: 10px 12px;
        border-radius: 14px;
        border: 1px solid var(--border);
        background: var(--surface2);
        color: var(--text);
        font: inherit;
        font-size: 16px; /* prevent iOS zoom */
        resize: none;
      }
      .aiImageStatus{
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        color: var(--wa-muted);
      }
      .aiImageSpinner{
        width: 16px;
        height: 16px;
      }
      .aiImagePreview{
        border: 1px solid var(--divider);
        border-radius: 14px;
        background: #f8fafc;
        overflow: hidden;
      }
      .aiImagePreview img{
        display: block;
        width: 100%;
        max-height: 280px;
        object-fit: contain;
        background: #f8fafc;
      }
      .aiImageActions{
        display: flex;
        gap: 10px;
        position: sticky;
        bottom: 0;
        padding-top: 2px;
        background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.98) 35%);
      }
      .aiImageActions .btn{
        flex: 1;
        min-height: 44px;
      }
      .aiImageActions .btn:disabled{ opacity: .5; }

      /* Generic confirm + input sheets (used instead of alert/confirm/prompt) */
      .uiSheetBody{
        padding: 0 12px 10px;
        flex: 1 1 auto;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
      }
      .uiSheetField{
        width: 100%;
        min-height: 48px;
        padding: 12px 12px;
        border-radius: 14px;
        border: 1px solid var(--border);
        background: var(--surface2);
        color: var(--text);
        font: inherit;
        font-size: 16px; /* prevent iOS zoom */
        resize: none;
      }
      #uiPromptSheet.bottomSheet{
        padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
      }
      html.is-native-app.keyboard-open #uiPromptSheet.bottomSheet.show{
        max-height: calc(var(--vvh, 100dvh) - 12px);
      }
      #uiPromptField.uiSheetField{
        min-height: 96px;
        max-height: min(30vh, 180px);
      }
      .uiSheetHint{
        margin-top: 8px;
        font-size: 12px;
        color: var(--wa-muted);
        line-height: 1.35;
      }

      /* Report user bottom sheet */
      #reportSheet{
        padding-bottom: env(safe-area-inset-bottom, 0px);
      }
      #reportSheet .sheetHeader{
        padding: 8px 16px 6px;
      }
      #reportSheet .sheetTitle{
        font-size: 16px;
      }
      #reportSheet .sheetPreview{
        margin-top: 4px;
        font-size: 13px;
      }
      #reportSheet .reportReasons{
        margin: 6px 16px 8px;
        border: 1px solid var(--divider);
        border-radius: 14px;
        background: var(--surface);
        overflow: hidden;
        display: flex;
        flex-direction: column;
      }
      #reportSheet .reportReason{
        width: 100%;
        min-height: 48px;
        padding: 10px 14px;
        border: 0;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        text-align: left;
        cursor: pointer;
        color: var(--text);
        font-weight: 700;
        font-size: 15px;
        -webkit-tap-highlight-color: transparent;
      }
      #reportSheet .reportReason + .reportReason{
        border-top: 1px solid var(--divider);
      }
      #reportSheet .reportReason:active{ background: rgba(0,0,0,.03); }
      #reportSheet .reportReason:focus-visible{
        outline: none;
        box-shadow: inset 0 0 0 2px var(--brand);
        border-radius: 12px;
      }
      #reportSheet .reportReasonLabel{
        flex: 1;
      }
      #reportSheet .reportReasonRadio{
        width: 18px;
        height: 18px;
        border-radius: 999px;
        border: 2px solid rgba(15,23,42,.25);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: border-color 150ms ease;
        flex: 0 0 auto;
      }
      #reportSheet .reportReasonRadio::after{
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: var(--brand);
        opacity: 0;
        transform: scale(.4);
        transition: opacity 150ms ease, transform 150ms ease;
      }
      #reportSheet .reportReason.isSelected .reportReasonRadio{
        border-color: var(--brand);
      }
      #reportSheet .reportReason.isSelected .reportReasonRadio::after{
        opacity: 1;
        transform: scale(1);
      }
      #reportSheet .reportDetails{
        padding: 0 16px 8px;
      }
      #reportSheet .reportDetailsField{
        min-height: 84px;
        padding: 10px 12px;
      }
      #reportSheet .sheetBtn{
        width: calc(100% - 32px);
        margin: 6px 16px;
      }
      #reportSheet .sheetBtn.primary{
        background: var(--brand);
        border-color: var(--brand);
        color: #fff;
        box-shadow: var(--shadowSm);
      }
      #reportSheet .sheetBtn.primary:active:not(:disabled){
        background: var(--brandDark);
      }
      #reportSheet .sheetBtn:disabled{
        opacity: .55;
        cursor: default;
        transform: none;
      }

      .infoModal{
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: min(var(--app-max-w), calc(100% - 24px));
        background: var(--surface);
        border-radius: 18px;
        box-shadow: var(--shadowMd);
        padding: 12px;
        display: none;
        z-index: 9999;
      }
      .infoModal.show{ display: block; }
      .infoHeader{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px 6px 12px;
      }
      .iconBtn{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        border: 1px solid var(--border);
        background: var(--surface2);
        color: var(--text);
        cursor: pointer;
        padding: 0;
        font-size: var(--icon-glyph-size-strong);
        line-height: 1;
      }
      .iconBtn:active{ transform: translateY(1px); }
      .iconBtn:focus-visible{
        outline: none;
        box-shadow: 0 0 0 3px var(--brandRing);
      }
      .infoTitle{ font-weight: 950; font-size: 16px; }
      .infoBody{ padding: 0 6px 6px; }
      .infoRow{
        display: flex;
        gap: 12px;
        padding: 10px 0;
        border-top: 1px solid var(--divider);
      }
      .infoRow:first-child{ border-top: 0; }
      .infoRow .k{
        width: 86px;
        color: var(--muted);
        font-weight: 900;
        font-size: 12px;
        text-transform: uppercase;
      }
      .infoRow .v{
        flex: 1;
        color: var(--text);
        font-size: 13px;
        white-space: pre-wrap;
        word-break: break-word;
      }


/* --- Reactions --- */
.bubbleRow.hasReacts,
.roomsChatMsgRow.hasReacts{ margin-bottom: 8px; }
.bubbleReacts{
  position: static;
  display:flex;
  align-items:center;
  gap:3px;
  flex-wrap: wrap;
  max-width: 100%;
  margin-top: 2px;
  pointer-events:auto;
  z-index: 1;
  align-self: flex-start;
  min-height: 16px;
}
.bubbleRow.me .bubbleReacts,
.roomsChatMsgRow.me .bubbleReacts{
  justify-content: flex-end;
  align-self: flex-end;
}
.bubbleReacts .reactPill{
  background: transparent;
  border-radius: 999px;
  border: 0;
  padding: 0;
  font-size: 11px;
  line-height: 1;
  display:inline-flex;
  align-items:center;
  justify-content: center;
  gap:1px;
  min-height: 0;
  box-shadow: none;
}
.bubbleReacts .reactPill.mine{
  background: transparent;
  border-color: transparent;
}
.bubbleReacts .reactEmoji{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  height:auto;
  border:0;
  background:transparent;
  border-radius:0;
  font-size:15px;
  line-height:1;
  box-shadow:none;
}
.bubbleReacts .reactCount{ font-size: 9px; font-weight: 700; opacity: 0.72; }
.reactRow{
  display:flex;
  gap:10px;
  padding: 10px 12px 12px;
  justify-content: center;
  align-items: center;
}
.reactRow .reactEmoji{
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid var(--controlBorderSoft);
  background: var(--surface);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.reactRow .reactEmoji.active{
  border-color: rgba(18,140,126,0.25);
  box-shadow: none;
}


.chatOverlay .chatFooterMsg{
  padding:10px;
  background: var(--surface);
  border-top:1px solid var(--divider);
  flex: 0 0 auto;
}
    
  /* Chats: show "Start a new chat" helper when list is empty */


      .avatar.aiAvatar{
        /* Ask Spotchati AI: use the green Spotchati logo (rounded-square). */
        background: transparent !important;
        border: 0 !important;
        color: rgba(0,0,0,.92) !important;
        display: grid;
        place-items: center;
        box-shadow: none !important;
        border-radius: 14px !important;
      }
      .avatar.aiAvatar svg{
        width: 100%;
        height: 100%;
        display: block;
      }
      .nearbyAvatar.aiAvatar{
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        color: rgba(0,0,0,.92) !important;
      }
      .nearbyAvatar.aiAvatar svg{
        width: 100%;
        height: 100%;
        display: block;
      }
	      /* Chat header uses .chatBarAvatar (not .avatar) */
      .chatBarAvatar.aiAvatar{
        background: transparent !important;
        border: 0 !important;
        color: rgba(0,0,0,.92) !important;
        display: grid;
        place-items: center;
        border-radius: 12px !important;
      }
      .chatBarAvatar.aiAvatar svg{
        width: 100%;
        height: 100%;
        display: block;
      }
      /* Safety: AI avatar should never show a loaded <img> */
      .chatBarAvatar.aiAvatar img,
      .avatar.aiAvatar img{
        display: none !important;
      }
	
      /* Places tab */
      #appView > #placesTab{
        flex: 1 1 auto;
        min-height: 0;
      }
      #placesTab{
        margin: 0; /* edge-to-edge (app view has no padding) */
        background: #fff;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        min-height: 0;
        /* Stable viewport height on mobile (avoids nested scroll / collapse) */
        min-height: 100vh;
        /* Places spec: subtle separators (lighter than iOS default) */
        --wa-divider: rgba(0,0,0,0.06);
        --divider: rgba(0,0,0,0.06);
        --places-header-h: 0px;
        --places-map-h: min(560px, 62vh);
      }
      @supports (height: 100dvh){
        #placesTab{ min-height: 100dvh; }
      }
      /* Places: quick controls (Radius + categories) */
      .placesQuickRow{
        display:block;
        padding: 0;
        margin-top: 3px;
        /* Align with the same inset as search + toggle */
        margin-left: 0;
        margin-right: 0;
      }

      .placesRadiusPill{
        flex: 0 0 auto;
        height: 34px;
        padding: 0 11px;
        border-radius: 11px;
        border: 1px solid rgba(0,0,0,.09);
        background: #fff;
        font-size: 13px;
        font-weight: 700;
        display:flex;
        align-items:center;
        gap: 6px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
      }
      .placesRadiusPill:active{ background: rgba(60,60,67,.10); }
      .placesRadiusPill:focus-visible{
        outline: none;
        box-shadow: 0 0 0 3px var(--brandRing);
      }
      .placesRadiusPill .chipK{
        font-size: 12px;
        font-weight: 700;
        color: var(--wa-muted);
        flex: 0 0 auto;
      }
      .placesRadiusPill #placesRadiusVal{
        font-weight: 800;
        color: #111;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .placesRadiusPill .chipChevron{
        margin-left: auto;
        font-size: 12px;
        line-height: 1;
        color: var(--wa-muted);
        font-weight: 900;
        flex: 0 0 auto;
      }

      .placesCats{
        width: 100%;
        display:flex;
        flex-wrap: nowrap;
        justify-content:flex-start;
        align-items:center;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 1px 1px;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
      }

      .placesCats::-webkit-scrollbar{ display: none; }

      /* quick category chips */
      .placeCat{
        width: 38px;
        height: 38px;
        border-radius: 11px;
        border: 1px solid rgba(0,0,0,.10);
        background: rgba(255,255,255,.98);
        display:inline-flex;
        align-items:center;
        justify-content:center;
        padding: 0;
        cursor: pointer;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        line-height: 1;
      }

      .placeCat.active{
        background: var(--brandSoft); /* brand green tint */
        border-color: rgba(27,149,11,.28);
        color: var(--accent);
      }
      .placeCat:focus{ outline: none; }
      .placeCat:focus-visible{
        outline: none;
        box-shadow: 0 0 0 3px var(--brandRing);
      }

      .placeCat:active{ transform: scale(0.98); }

      .placeCat .ico{ font-size: 20px; line-height: 1; display: block; }
      .placeCat .ico svg{
        width: 17px;
        height: 17px;
        display: block;
        fill: currentColor;
      }
      .placeCat.placeCatWiki{ color: #111; }
      .placeCat.placeCatWiki.active{ color: #111; }
      .placeCatWiki .ico{
        font-size: 0;
        width: 24px;
        height: 24px;
        display: grid;
        place-items: center;
      }
      .placeCatWiki .ico svg{
        width: 24px;
        height: 24px;
        fill: #111;
      }
      .placeCat .txt{ display: none; }

      /* smaller screens: tighten spacing */
      @media (max-width: 360px){
        .placesQuickRow{ gap: 4px; }
        .placesRadiusPill{ padding: 0 10px; font-size: 12.5px; }
        .placesCats{ gap: 6px; }
      }

      /* Places search: compact + always available above results */
      #placesTab .placesSearchSticky{
        position: sticky;
        top: 0;
        z-index: 100;
        background: #fff;
        padding-top: env(safe-area-inset-top, 0px);
        margin: 0;
        border-bottom: 0;
        flex: 0 0 auto;
      }
      #placesTab .placesScroll{
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding-bottom: calc(var(--tabbar-total-h) + var(--safe-bottom));
      }
      /* Places header row: search + top-right locate (match Nearby pattern) */
      #placesTab .placesHeaderRow{
        display: flex;
        align-items: center;
        gap: 5px;
        min-height: 0;
      }
      #placesTab .placesHeaderRow .placesSearchWrap{ flex: 1 1 auto; min-width: 0; }
      #placesTab #placesLocationIconBtn{
        flex: 0 0 auto;
        color: #198f0d;
        position: relative;
        width: var(--icon-btn-size);
        min-width: var(--icon-btn-size);
        height: var(--icon-btn-size);
        min-height: var(--icon-btn-size);
        padding: 0;
        border-radius: 999px;
        border: 1px solid rgba(27,149,11,.16);
        background: rgba(27,149,11,.08);
        display: grid;
        place-items: center;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
      }
      #placesTab #placesLocationIconBtn svg{ width: var(--icon-glyph-size-strong); height: var(--icon-glyph-size-strong); }
      #placesTab #placesLocationIconBtn.isOn{ color: var(--wa-green); }
      #placesTab #placesLocationIconBtn.isOn::after{
        content:"";
        position:absolute;
        right: 10px;
        bottom: 10px;
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: var(--wa-green);
        box-shadow: 0 0 0 2px #fff;
      }
      #placesTab #placesLocationIconBtn:active{ background: rgba(27,149,11,.13); }
      #placesTab #placesLocationIconBtn:focus-visible{ outline: none; box-shadow: 0 0 0 3px var(--brandRing); }
      #placesTab #placesGeoBtn{
        flex: 0 0 auto;
        width: var(--icon-btn-size);
        min-width: var(--icon-btn-size);
        height: var(--icon-btn-size);
        min-height: var(--icon-btn-size);
        padding: 0;
        border-radius: 999px;
        border: 0;
        background: transparent;
        color: var(--wa-muted);
        display: grid;
        place-items: center;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
      }
      #placesTab #placesGeoBtn svg{ width: var(--icon-glyph-size-strong); height: var(--icon-glyph-size-strong); }
      #placesTab #placesGeoBtn.isOn{ color: var(--wa-green); }
      #placesTab #placesGeoBtn:active{ background: rgba(0,0,0,0.06); }
      #placesTab #placesGeoBtn:focus-visible{ outline: none; box-shadow: 0 0 0 3px var(--brandRing); }
      #placesGeoBtn{ display: none !important; }
      /* Floating locate button visible on all viewports; position above tab bar + safe area */
      /* Places controls: flat stacked blocks (like Nearby) */
      #placesTab .placesControls{
        padding: 3px var(--pad-r) 4px var(--pad-l);
        margin: 0;
        display:flex;
        flex-direction:column;
        /* Reduce vertical gaps: search -> filters -> categories -> toggle */
        gap: 4px;
        background: transparent;
        border: 0;
      }
      .placesSearchWrap{
        /* Use the exact same search field system as Chats/Nearby */
        margin: 0;
        box-sizing: border-box;
      }
      #placesTab .placesSearchWrap.chatsSearch{
        height: 40px;
        border-radius: 20px;
        padding: 0 11px;
      }
      #placesTab .placesSearchWrap input{
        font-size: 14px;
      }
      /* Make the Places search icon match Chats/Nearby sizing/spacing */
      .placesSearchWrap .searchIconBtn{
        width: var(--icon-btn-size-compact);
        height: var(--icon-btn-size-compact);
        min-width: var(--icon-btn-size-compact);
        min-height: var(--icon-btn-size-compact);
        padding: 0;
        border-radius: 999px;
        background: transparent;
        display:grid;
        place-items:center;
        flex: 0 0 auto;
        color: var(--wa-muted);
      }
      .placesSearchWrap .searchIconBtn svg{
        width: var(--icon-glyph-size-compact);
        height: var(--icon-glyph-size-compact);
        display:block;
        stroke: currentColor;
        stroke-width: 2.2;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
        opacity: 1;
      }
      .placesSearchWrap .searchIconBtn:active{ background: rgba(0,0,0,0.06); }
      .placesSearchWrap .searchIconBtn:focus-visible{
        outline: none;
        box-shadow: 0 0 0 3px var(--brandRing);
      }
      .placesSearchWrap .searchClear{
        width: var(--icon-btn-size-compact);
        height: var(--icon-btn-size-compact);
        min-width: var(--icon-btn-size-compact);
        min-height: var(--icon-btn-size-compact);
      }
      /* Clear (X) should appear only when text exists */
      .placesSearchWrap.isActive .searchClear{ display:none; }
      .placesSearchWrap.hasValue .searchClear{ display:inline-flex; }
      .placesSearchWrap.hasValue .searchClear{ opacity: 1 !important; }

      .placesGeoHint{
        padding: 0;
        margin: 0;
        color: var(--wa-subtext);
        font-size: 12px;
        line-height: 1.25;
      }

      /* Places: location CTA card (shown when location not enabled) */
      .placesLocationCard{
        margin: 10px 0 0;
        padding: 12px;
        border-radius: 16px;
        border: 1px solid rgba(60,60,67,.14);
        background: rgba(60,60,67,.06);
      }
      .placesLocationTitle{
        font-size: 14px;
        font-weight: 850;
        color: #0B0B0C;
        line-height: 1.25;
      }
      .placesLocationSub{
        margin-top: 4px;
        font-size: 13px;
        color: var(--wa-muted);
        line-height: 1.25;
      }
      .placesLocationActions{
        margin-top: 10px;
        display:flex;
        flex-direction:column;
        gap: 10px;
      }

      .placesEmpty{
        margin: 0;
        padding: 0 16px;
        background: transparent;
        border: 0;
        text-align: center;
        color: var(--wa-muted);
        font-size: 13px;
        line-height: 1.25;
        white-space: normal;
      }
      /* Avoid blank bands when containers have no content */
      .placesPage #placesEmpty:empty{ display:none; }
      .placesPage #placesMsg:empty{ display:none; }
      /* Places: subtle loading/status line (no bright green) */
      .placesPage #placesMsg{
        margin-top: 10px; /* keep consistent spacing with other status lines */
      }
      .placesPage #placesMsg[data-kind="searching"]{
        display:flex;
        align-items:center;
        gap: 8px;
        font-size: 12.5px;
        font-weight: 700;
        color: rgba(0,0,0,.55) !important;
      }
      .placesPage #placesMsg[data-kind="searching"]::before{
        content:"";
        width: 12px;
        height: 12px;
        border-radius: 999px;
        border: 2px solid rgba(0,0,0,.18);
        border-top-color: rgba(0,0,0,.55);
        animation: placesSpin .75s linear infinite;
        flex: 0 0 auto;
      }
      @keyframes placesSpin{
        to{ transform: rotate(360deg); }
      }
      /* When empty hint is shown, keep it close to controls */
      .placesPage #placesEmpty:not(:empty){
        margin-top: 8px;
      }
      /* Places: compact empty state (Nearby-like, non-dominating) */
      .placesEmptyMini{
        display:flex;
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap: 6px;
        padding: 12px 8px 6px;
        color: var(--wa-muted);
      }
      .placesEmptyMiniIcon{
        width: 32px;
        height: 32px;
        border-radius: 999px;
        background: rgba(60,60,67,.10);
        display:grid;
        place-items:center;
        color: rgba(0,0,0,.55);
      }
      .placesEmptyMiniIcon svg{
        width: 18px;
        height: 18px;
        fill: currentColor;
        opacity: .9;
      }
      .placesEmptyMiniTitle{
        font-size: 15px;
        font-weight: 750;
        color: rgba(0,0,0,.92);
        line-height: 1.2;
      }
      .placesEmptyMiniSub{
        font-size: 13px;
        line-height: 1.25;
      }
      .placesEmptyActions{
        margin-top: 10px;
        display:flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content:center;
      }
      .placesEmptyAction{
        height: 36px;
        padding: 0 12px;
        border-radius: 14px;
        border: 1px solid rgba(0,0,0,0.08);
        background: #fff;
        color: rgba(0,0,0,.86);
        font-size: 14px;
        font-weight: 650;
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
      }
      .placesEmptyAction:active{ background: rgba(60,60,67,.10); }
      .placesEmptyAction.primary{
        background: var(--accent-soft);
        border-color: var(--accent-border);
        color: var(--accent);
      }
      .placesEmptyAction:focus-visible{
        outline: none;
        box-shadow: 0 0 0 3px var(--brandRing);
      }
      .placesEmptyCenter{
        display:flex;
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap: 6px;
        padding: 16px 8px 10px;
        color: var(--wa-subtext);
      }
      .placesEmptyIcon{
        width: 40px;
        height: 40px;
        border-radius: 999px;
        background: rgba(17,24,39,.05);
        display:grid;
        place-items:center;
        color: var(--wa-subtext);
      }
      .placesEmptyIcon svg{
        width: 20px;
        height: 20px;
        fill: currentColor;
        opacity: .9;
      }
      .placesEmptyTitle{
        font-size: 16px;
        font-weight: 700;
        color: var(--wa-text);
        line-height: 1.2;
      }
      .placesEmptySub{
        font-size: 13px;
        line-height: 1.25;
      }

      .placesResultsTitle{
        /* Bring first results closer to the controls */
        margin: 6px 16px 8px;
        font-weight: 950;
        font-size: 13px;
        color: var(--text);
      }

      .placesResultsWrap{
        margin: 0;
        background: #fff;
        border: 0;
        border-radius: 0;
        overflow: hidden;
        position: relative;
        max-height: 0px;
        opacity: 0;
        transition: max-height 220ms ease, opacity 180ms ease;
        will-change: max-height, opacity;
      }
      /* Subtle non-blocking refresh shimmer (keeps list visible during chip refetch) */
      .placesRefreshOverlay{
        position:absolute;
        inset: 0;
        z-index: 3;
        pointer-events: none;
        opacity: 0;
        transition: opacity 160ms ease;
      }
      .placesRefreshOverlay.show{ opacity: 1; }
      .placesRefreshOverlay::before{
        content:"";
        position:absolute;
        inset: 0;
        background:
          linear-gradient(
            90deg,
            rgba(255,255,255,0.00) 0%,
            rgba(240,242,245,0.55) 45%,
            rgba(255,255,255,0.00) 100%
          );
        background-size: 200% 100%;
        animation: placesRefreshShimmer 1.15s ease-in-out infinite;
      }
      /* Small "Refreshing…" hint (keeps cached results visible) */
      .placesRefreshOverlay::after{
        content: "Refreshing…";
        position: absolute;
        top: 10px;
        right: 12px;
        font-size: 12px;
        font-weight: 650;
        color: rgba(60,60,67,.75);
        background: rgba(255,255,255,.78);
        border: 1px solid rgba(0,0,0,.06);
        border-radius: 999px;
        padding: 6px 10px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 2px 10px rgba(0,0,0,.08);
      }
      @keyframes placesRefreshShimmer{
        0%{ background-position: 200% 0; }
        100%{ background-position: -200% 0; }
      }
      .placesResultsWrap.expanded{
        opacity: 1;
      }

      #placesResults{
        display:flex;
        flex-direction:column;
        gap: 0;
      }

      /* Places: List/Map segmented switch (no green fill) */
      .placesPage .placesModeToggle{
        display:flex;
        gap: 4px;
        padding: 0;
        margin-top: 0;
        background: transparent;
        border: 0;
      }
      .placesPage .placesModeBtn{
        flex: 1 1 0;
        height: 36px;
        border-radius: 12px;
        border: 1px solid rgba(0,0,0,.10);
        background: #fff; /* always white */
        color: rgba(0,0,0,.78);
        font-weight: 700;
        font-size: 14px;
        display:flex;
        align-items:center;
        justify-content:center;
        -webkit-tap-highlight-color: transparent;
        transition: transform 80ms ease, box-shadow 160ms ease, border-color 160ms ease, color 160ms ease;
      }
      .placesPage .placesModeBtn[aria-selected="true"],
      .placesPage .placesModeBtn.isActive{
        color: var(--accent);
        border-color: rgba(0,0,0,.16);
        box-shadow: inset 0 -2px 0 var(--accent); /* indicator line instead of fill */
        background: #fff; /* ensure no green fill */
      }
      .placesPage .placesModeBtn:active{ transform: translateY(1px); }
      .placesPage .placesModeBtn:focus-visible{
        outline: none;
        box-shadow: 0 0 0 3px var(--brandRing), inset 0 -2px 0 var(--accent);
      }

      .placesMapWrap{
        background: var(--surface);
        border: 0;
        border-radius: 0;
        box-shadow: none;
        overflow:hidden;
        height: var(--places-map-h, min(560px, 62vh));
        position: relative;
      }
      #placesMap{
        width: 100%;
        height: 100%;
        min-height: 0;
        background: var(--bg);
      }
      .placesMapSummary{
        position: absolute;
        left: 50%;
        bottom: 12px;
        transform: translateX(-50%);
        padding: 6px 12px;
        border-radius: 999px;
        border: 1px solid rgba(0,0,0,.10);
        background: rgba(255,255,255,.92);
        color: rgba(0,0,0,.75);
        font-size: 12.5px;
        font-weight: 700;
        box-shadow: 0 8px 20px rgba(0,0,0,.12);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        max-width: calc(100% - 24px);
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .placesMapSummary.hidden{ display:none; }
      .placesLocateBtn{
        position: absolute;
        right: calc(14px + env(safe-area-inset-right, 0px));
        bottom: calc(-2px + var(--tabbar-total-h, 70px) + env(safe-area-inset-bottom, 0px));
        width: 48px;
        height: 48px;
        border-radius: 999px;
        border: 0;
        background: #fff;
        color: #1a73e8;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 6px 18px rgba(0,0,0,.18);
        z-index: 1005;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: transform 80ms ease, box-shadow 160ms ease;
        touch-action: manipulation;
      }
      .placesLocateBtn svg{
        width: 22px;
        height: 22px;
        fill: currentColor;
        stroke: none;
      }
      .placesLocateBtn.isUnavailable{
        opacity: 0.7;
      }
      .placesLocateBtn:active{
        transform: translateY(1px);
        box-shadow: 0 4px 12px rgba(0,0,0,.18);
      }
      .placesLocateBtn:focus-visible{
        outline: none;
        box-shadow: 0 0 0 3px var(--brandRing), 0 6px 18px rgba(0,0,0,.18);
      }
      @media (max-width: 520px){
        #placesTab{
          --places-map-h: min(380px, 46vh);
        }
      }
      @supports (height: 100dvh){
        @media (max-width: 520px){
          #placesTab{ --places-map-h: min(380px, 50dvh); }
        }
      }
      .placesMapSkeleton{
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 200px;
      }
      /* Leaflet: keep typography consistent */
      .leaflet-container{
        font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
      }
      .leaflet-control-attribution{
        font-size: 10.5px;
        line-height: 1.25;
        padding: 3px 8px 4px !important;
        border-top-left-radius: 10px;
        background: rgba(255,255,255,.88) !important;
        color: rgba(35,44,60,.72) !important;
        box-shadow: 0 6px 18px rgba(0,0,0,.08);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
      }
      .leaflet-control-attribution a{
        color: rgba(35,44,60,.78) !important;
        text-decoration: none;
      }
      .leaflet-control-attribution a:hover{
        text-decoration: underline;
      }
      .placeCard{
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: none;
        padding: 12px 12px 10px;
        transition: background-color 180ms ease, transform 120ms ease, opacity 180ms ease;
      }
      /* Places list rows (WhatsApp-quality) */
      .placeCard.placeRow{
        border: 0;
        border-radius: 0;
        padding: 12px var(--pad-r) 12px var(--pad-l);
        display:grid;
        grid-template-columns: auto 1fr auto;
        align-items:center;
        gap: 12px;
        min-height: 72px;
        background: #fff;
        position: relative;
      }
      /* WhatsApp-like indented divider (starts after avatar) */
      .placeCard.placeRow::after{
        content:"";
        position:absolute;
        left: calc(var(--pad-l) + 48px + 12px);
        right: 0;
        bottom: 0;
        height: 1px;
        background: var(--divider);
        opacity: .85;
      }
      .placeCard.placeRow:active{
        background: rgba(17,24,39,.04);
      }
      .placeRowIcon{
        width: 48px;
        height: 48px;
        border-radius: 999px;
        background: rgba(60,60,67,.10);
        display:grid;
        place-items:center;
        color: rgba(0,0,0,.62);
        flex: 0 0 auto;
      }
      .placeRowIcon .placeAvatarEmoji{
        font-size: 18px;
        line-height: 1;
      }
      .placeSkelIcon{
        width: 48px;
        height: 48px;
        border-radius: 999px;
      }
      .placeRowBody{
        min-width: 0;
        overflow: hidden;
      }
      .placeRowTitle{
        font-size: 16px;
        font-weight: 650;
        color: #111;
        line-height: 1.2;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .placeRowSubtitle{
        margin-top: 4px;
        font-size: 14px;
        font-weight: 600;
        color: var(--wa-muted);
        line-height: 1.25;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .placeRowMeta{
        flex: 0 0 auto;
        display:flex;
        flex-direction: column;
        align-items:flex-end;
        justify-content:center;
        gap: 6px;
        min-width: 64px;
      }
      .placeRowDistance{
        font-size: 13px;
        font-weight: 650;
        color: var(--wa-muted);
        line-height: 1.1;
        white-space: nowrap;
      }
      .placeRowBadge{
        font-size: 12px;
        font-weight: 750;
        padding: 4px 8px;
        border-radius: 999px;
        line-height: 1;
        white-space: nowrap;
        border: 1px solid transparent;
      }
      .placeRowBadge.open{
        background: rgba(27,149,11,0.14);
        color: var(--accent);
        border-color: rgba(27,149,11,0.25);
      }
      .placeRowBadge.closed{
        background: rgba(176,0,32,.10);
        color: var(--danger);
        border-color: rgba(176,0,32,.18);
      }
      .placeCard.enter{
        animation: placeEnter 160ms ease both;
      }
      @keyframes placeEnter{
        from{ opacity: 0; transform: translateY(2px); }
        to{ opacity: 1; transform: translateY(0); }
      }
      .placeCard.pressable{
        cursor: pointer;
        user-select: none;
      }
      .placeCard.pressable:active{ transform: translateY(1px); background: var(--surface2); }
      .placeCard.pressable:focus-visible{
        outline: none;
        box-shadow: 0 0 0 3px var(--brandRing);
      }
      .placeTop{
        display:flex;
        align-items:flex-start;
        justify-content:space-between;
        gap: 12px;
      }
      .placeName{
        font-weight: 950;
        font-size: 15px;
        line-height: 1.2;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .placeDistance{
        flex: 0 0 auto;
        color: var(--wa-muted);
        font-weight: 900;
        font-size: 12px;
        line-height: 1.2;
        margin-top: 2px;
        white-space: nowrap;
      }
      .placeMetaRow{
        margin-top: 6px;
        display:flex;
        align-items:center;
        flex-wrap:wrap;
        gap: 6px;
        color: var(--wa-muted);
        font-size: 12px;
        font-weight: 800;
        line-height: 1.2;
      }
      .placeSep{ opacity: .75; }
      .placeAddr{
        margin-top: 8px;
        color: #35424a;
        font-size: 13px;
        line-height: 1.25;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .placeActions{
        margin-top: 10px;
        display:flex;
        gap: 10px;
        flex-wrap: wrap;
      }
      .placeActionBtn{
        flex: 1 1 140px;
        border: 0;
        border-radius: var(--rLg);
        min-height: 48px;
        padding: 12px 12px;
        font-weight: 900;
        cursor:pointer;
        background: var(--surface);
        border: 1px solid var(--border);
        color: var(--text);
      }
      .placeActionBtn:active{ transform: translateY(1px); }
      .placeActionBtn.primary{
        background: var(--brand);
        border-color: transparent;
        color: #fff;
        box-shadow: var(--shadowSm);
      }
      .placeActionBtn:focus-visible{
        outline: none;
        box-shadow: 0 0 0 3px var(--brandRing);
      }

      /* Simple skeletons */
      .skel{
        background: linear-gradient(90deg, #f2f4f5 0%, #e9edef 50%, #f2f4f5 100%);
        background-size: 200% 100%;
        animation: skelMove 1.1s ease-in-out infinite;
        border-radius: 10px;
      }
      @keyframes skelMove{
        0%{ background-position: 200% 0; }
        100%{ background-position: -200% 0; }
      }
      .skelLine{ height: 12px; }
      .skelLine.big{ height: 16px; border-radius: 12px; }
      .skelRow{ display:flex; gap: 10px; margin-top: 10px; }
      .skelRow .skel{ flex: 1; height: 48px; border-radius: 14px; }

      /* Accessibility: respect reduced motion (no shimmer/animation) */
      @media (prefers-reduced-motion: reduce){
        .skel{
          animation: none !important;
          background: #e9edef !important;
        }
        .chatLoadingDots span{
          animation: none !important;
          opacity: .6;
          transform: none;
        }
        .placeCard.enter{ animation: none !important; }
      }

      /* Empty states (friendly + consistent) */
      .emptySlot{
        /* Avoid tall “dead” areas while still feeling centered. */
        height: min(280px, 34vh);
        display:flex;
        align-items:center;
        justify-content:center;
        padding: 14px var(--pad-r) 14px var(--pad-l);
      }
      /* Screen-specific tuning: keep empty states compact under controls. */
      #nearbyTab .emptySlot{ height: min(220px, 26vh); }
      #placesTab .emptySlot{ height: min(240px, 28vh); }
      .emptyState{
        width: 100%;
        max-width: 340px;
        margin: 0 auto;
        background: var(--surface);
        border: 1px solid rgba(15,23,42,0.08);
        border-radius: var(--rLg);
        box-shadow: var(--shadowSoft);
        padding: 16px 14px;
        text-align:center;
      }
      .emptyIcon{
        width: 44px;
        height: 44px;
        border-radius: 999px;
        background: rgba(60,60,67,.08);
        display:flex;
        align-items:center;
        justify-content:center;
        margin: 0 auto 10px;
        color: rgba(0,0,0,.72);
      }
      .emptyIcon svg{ width: 22px; height: 22px; fill: currentColor; }
      .emptyTitle{
        font-weight: 950;
        color: var(--text);
        font-size: 16px;
        line-height: 1.2;
      }
      .emptyHelper{
        margin-top: 6px;
        color: var(--wa-muted);
        font-size: 13px;
        line-height: 1.35;
      }
      .emptyActions{
        margin-top: 12px;
        display:flex;
        justify-content:center;
        gap: 10px;
        flex-wrap: wrap;
        width: 100%;
      }
      .emptyActions .btn{
        width: 100%;
        max-width: 240px;
        min-width: 0;
      }
      @media (min-width: 380px){
        .emptyActions .btn{ width: auto; min-width: 160px; }
      }
      #chatsTab.welcomeEmpty .chatsFilterRow{ display:none; }
      #chatsTab.welcomeEmpty .emptySlot{
        height: auto;
        min-height: 0;
        align-items: flex-start;
        padding-top: 10px;
      }
      .chatsWelcomeCard{
        width: 100%;
        max-width: 360px;
        margin: 0 auto;
        background:
          radial-gradient(circle at top center, rgba(38, 171, 51, 0.12), transparent 54%),
          linear-gradient(180deg, rgba(255,255,255,1), rgba(248,250,248,1));
        border: 1px solid rgba(15,23,42,0.08);
        border-radius: 24px;
        box-shadow: 0 16px 44px rgba(15,23,42,0.08);
        padding: 18px 16px 16px;
        text-align: center;
      }
      .chatsWelcomeArt{
        position: relative;
        width: 108px;
        height: 74px;
        margin: 0 auto 10px;
      }
      .chatsWelcomeOrb{
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        color: #1B950B;
        box-shadow: 0 10px 24px rgba(27,149,11,0.14);
      }
      .chatsWelcomeOrb svg{ width: 22px; height: 22px; fill: currentColor; }
      .chatsWelcomeOrbMain{
        left: 50%;
        top: 0;
        width: 58px;
        height: 58px;
        transform: translateX(-50%);
        background: linear-gradient(180deg, rgba(226,247,224,1), rgba(212,240,207,1));
      }
      .chatsWelcomeOrbLeft{
        left: 8px;
        bottom: 4px;
        width: 38px;
        height: 38px;
        background: rgba(255,255,255,0.98);
        color: rgba(15,23,42,0.7);
      }
      .chatsWelcomeOrbRight{
        right: 6px;
        bottom: 0;
        width: 34px;
        height: 34px;
        background: linear-gradient(180deg, rgba(44,181,70,1), rgba(27,149,11,1));
        color: #fff;
      }
      .chatsWelcomeEyebrow{
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: rgba(27,149,11,0.78);
      }
      .chatsWelcomeTitle{
        margin-top: 8px;
        font-size: 22px;
        line-height: 1.08;
        font-weight: 950;
        color: var(--text);
      }
      .chatsWelcomeBody{
        margin-top: 8px;
        font-size: 14px;
        line-height: 1.45;
        color: var(--wa-muted);
      }
      .chatsWelcomePrimary{
        margin-top: 16px;
      }
      .chatsWelcomePrimary .btn{
        width: 100%;
        max-width: none;
      }
      .chatsWelcomeQuickGrid{
        margin-top: 12px;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
      }
      .chatsWelcomeQuickGrid.hasProfileAction{
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .chatsWelcomeQuickAction{
        min-height: 84px;
        border-radius: 18px;
        border: 1px solid rgba(15,23,42,0.08);
        background: rgba(255,255,255,0.92);
        padding: 12px 10px 10px;
        text-align: left;
        box-shadow: 0 8px 22px rgba(15,23,42,0.04);
        transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
      }
      .chatsWelcomeQuickAction:active{
        transform: scale(.985);
        box-shadow: 0 4px 14px rgba(15,23,42,0.05);
      }
      .chatsWelcomeQuickActionIcon{
        width: 32px;
        height: 32px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 12px;
        background: rgba(27,149,11,0.10);
        color: #1B950B;
      }
      .chatsWelcomeQuickActionIcon svg{ width: 18px; height: 18px; fill: currentColor; }
      .chatsWelcomeQuickActionTitle{
        font-size: 13px;
        font-weight: 850;
        color: var(--text);
        line-height: 1.2;
      }
      .chatsWelcomeQuickActionSub{
        margin-top: 4px;
        font-size: 11px;
        line-height: 1.3;
        color: var(--wa-muted);
      }
      .emptyInline{
        /* Inline (list-embedded) empty state should still feel intentional. */
        max-width: 340px;
        margin: 0 auto;
        border: 1px solid rgba(60,60,67,.14);
        border-radius: 16px;
        padding: 14px 14px;
        background: rgba(60,60,67,.06);
        box-shadow: none;
      }
      .emptyInline .emptyIcon{
        width: 36px;
        height: 36px;
        border-radius: 999px;
        margin: 0 auto 8px;
      }
      .emptyInline .emptyIcon svg{ width: 18px; height: 18px; }

      /* Hide helpers visually while keeping layout stable */
      .visuallyHidden{
        position:absolute !important;
        width:1px !important;
        height:1px !important;
        padding:0 !important;
        margin:-1px !important;
        overflow:hidden !important;
        clip: rect(0,0,0,0) !important;
        white-space:nowrap !important;
        border:0 !important;
      }
      .disabled{
        opacity: 0.55 !important;
        pointer-events: none !important;
      }

/* --- App shell fallback: prevents left-stuck layout if global.css fails to load --- */
.appShell{
  height: var(--vvh, 100vh);
  min-height: 0;
  display:flex;
  justify-content:center;
  align-items: stretch;
  padding: 12px;
  background: var(--wa-bg, #F2F2F7);
  overflow: hidden;
}
@supports (height: 100dvh){
  .appShell{ height: var(--vvh, 100dvh); }
}
.appFrame{
  width:100%;
  max-width: var(--app-max-w, 430px);
  flex: 1;
  min-height: 0;
  background:#fff;
  position:relative;
  display:flex;
  flex-direction:column;
  border-radius: 18px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  container-type: inline-size;
}
html.swipe-back-active,
html.swipe-back-active body{
  overscroll-behavior-x: contain;
}
html.swipe-back-active #chatsTab,
html.swipe-back-active #roomsTab,
html.swipe-back-active #bottomNav,
html.swipe-back-active #topbar{
  pointer-events: none;
}
html.swipe-back-preview-chat #chatsStickyHeader,
html.swipe-back-preview-chat #chatsStickyHeader.hidden{
  display: flex !important;
}
html.swipe-back-preview-chat #chatsStickyHeader{
  visibility: visible !important;
  opacity: 1 !important;
}
html.swipe-back-preview-chat #startNewChatBtn,
html.swipe-back-preview-chat #startNewChatBtn.hidden{
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
html.swipe-back-preview-chat #bottomNav,
html.swipe-back-preview-chat #bottomNav.hidden{
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
html.swipe-back-preview-room #roomsListWrap,
html.swipe-back-preview-room #roomsListWrap.hidden{
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
html.swipe-back-preview-room #topbar,
html.swipe-back-preview-room #topbar.hidden{
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
html.swipe-back-preview-room #bottomNav,
html.swipe-back-preview-room #bottomNav.hidden{
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.swipeBackCurrent{
  will-change: transform;
  backface-visibility: hidden;
}
.swipeBackUnderlay{
  will-change: transform, opacity;
  transform-origin: left center;
  backface-visibility: hidden;
}
html.is-touch,
html.is-touch body,
html.is-native-app,
html.is-native-app body{
  background:#fff;
}
html.is-touch .appShell,
html.is-native-app .appShell{
  padding: 0;
  background:#fff;
}
html.is-touch .appFrame,
html.is-native-app .appFrame{
  max-width: none;
  border-radius: 0;
  box-shadow: none;
}
@media (max-width: 768px){
  :root{
    --app-max-w: 100vw;
  }
  .appShell{ padding: 0; }
  .appFrame{ max-width: none; border-radius: 0; box-shadow: none; }
}