/* Spotchati theme overrides (single-theme; tokens.css is source of truth) */
:root {
  --chat-pad-x: 14px;
  --chat-pad-y: 9px;
  --chat-gap: 9px;
  --chat-avatar: 40px;
  --chat-row-minh: 62px;
  --chat-name-size: 15px;
  --chat-snippet-size: 13px;
  --chat-time-size: 10px;
  --chat-name-weight: 760;
  --chat-snippet-weight: 560;
}

#chatsTab,
#nearbyTab,
#roomsTab,
#placesTab{
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Chats-first polish pass: keep layout familiar, improve hierarchy. */
#chatsTab{
  background:
    radial-gradient(circle at top left, rgba(37,211,102,.10), transparent 28%),
    linear-gradient(180deg, #f6fbf5 0%, #ffffff 240px);
}

#chatsTab .chatsStickyHeader{
  background:
    linear-gradient(180deg, rgba(246,251,245,.96) 0%, rgba(255,255,255,.94) 68%, rgba(255,255,255,.99) 100%);
  border-bottom: 1px solid rgba(23,42,31,.06);
  box-shadow: 0 10px 28px rgba(15,23,42,.04);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

#chatsTab .chatsIdentityRow{
  padding: 14px 16px 8px;
  background: transparent;
}

#chatsTab .chatsIdentity{
  gap: 12px;
}

#chatsTab .chatsIdentityLogo{
  width: 44px;
  height: 44px;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

#chatsTab .chatsIdentityLogo svg{
  filter: none;
}

#chatsTab .chatsIdentityTitle{
  font-size: 28px;
  line-height: .96;
  font-weight: 860;
  letter-spacing: -.05em;
  color: #102418;
}

#chatsTab .chatsSearchWrap{
  padding: 0 16px 12px;
  background: transparent;
}

#chatsTab .chatsSearch{
  height: 48px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(22,122,9,.10);
  box-shadow:
    0 10px 24px rgba(15,23,42,.05),
    inset 0 1px 0 rgba(255,255,255,.85);
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

#chatsTab .chatsSearch:focus-within{
  background: #fff;
  border-color: rgba(27,149,11,.24);
  box-shadow:
    0 0 0 4px rgba(27,149,11,.08),
    0 12px 30px rgba(15,23,42,.06);
}

#chatsTab .chatsSearchIcon{
  color: rgba(95,107,98,.86);
}

#chatsTab .chatsSearch input{
  color: #102418;
  font-size: 15px;
  font-weight: 520;
}

#chatsTab .chatsSearch input::placeholder{
  color: #92a296;
}

#chatsTab .chatsFilterRow{
  gap: 12px;
  padding: 0 16px 14px;
  padding-top: 0;
  padding-bottom: 14px;
  background: transparent;
}

#chatsTab #filterChips .chipBtn{
  height: 36px;
  padding: 0 14px;
  border-color: rgba(16,24,40,.08);
  background: rgba(255,255,255,.94);
  color: #52605a;
  font-weight: 760;
  box-shadow:
    0 6px 14px rgba(15,23,42,.04),
    inset 0 1px 0 rgba(255,255,255,.9);
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 80ms ease;
}

#chatsTab #filterChips .chipBtn:active{
  background: #eef5ef;
  transform: translateY(1px);
}

#chatsTab #filterChips .chipBtn.isActive,
#chatsTab #filterChips .chipBtn.active{
  background: linear-gradient(180deg, rgba(37,211,102,.15), rgba(27,149,11,.10));
  border-color: rgba(27,149,11,.14);
  color: #167A09;
  box-shadow:
    0 8px 16px rgba(27,149,11,.10),
    inset 0 1px 0 rgba(255,255,255,.82);
}

#chatsTab .chatsNewChatBtn{
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 14px;
  background: #20B84A;
  box-shadow:
    0 8px 18px rgba(32,184,74,.15),
    inset 0 1px 0 rgba(255,255,255,.22);
}

#chatsTab .chatsNewChatBtn svg{
  width: 19px;
  height: 19px;
  stroke-width: 2.05;
}

#chatsTab .chatsNewChatBtn:active{
  transform: translateY(1px) scale(.98);
  background: #1CA742;
}

#chatsTab .chatsNewChatBtn:focus-visible{
  box-shadow:
    0 0 0 3px var(--brandRing),
    0 12px 24px rgba(32,184,74,.20),
    inset 0 1px 0 rgba(255,255,255,.22);
}

#startNewChatBtn{
  background: #20B84A !important;
  background-image: none !important;
}

#startNewChatBtn:active{
  background: #1CA742 !important;
  background-image: none !important;
}

#chatsTab .chatItem.aiPinned{
  background: transparent;
  box-shadow: none;
}

#chatsTab .chatItem.aiPinned .chatRow{
  padding-left: calc(16px + var(--safe-left));
}

#chatsTab .aiBadge{
  font-size: 10px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(16,24,40,.05);
  border: 1px solid rgba(16,24,40,.08);
  color: #6f7a74;
  font-weight: 800;
  letter-spacing: .02em;
}

#chatsTab .chatAvatar,
#chatsTab .chatItem .avatar{
  width: 44px;
  height: 44px;
  background: linear-gradient(180deg, #fbfcfb, #eef4f0);
  color: #66756d;
  box-shadow:
    0 3px 10px rgba(15,23,42,.05),
    inset 0 0 0 1px rgba(17,24,39,.05);
}

#chatsTab .chatsScrollArea{
  background: linear-gradient(180deg, rgba(246,251,245,.65) 0, #ffffff 120px);
}

#chatsTab .chatsListSurface{
  background: transparent;
}

#chatsTab .aiPinnedLane{
  padding: 0 12px 8px;
  margin: 0;
}

#chatsTab .aiPinnedLane .chatItem.aiPinned{
  border: 1px solid rgba(22,122,9,.10);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(37,211,102,.10), transparent 36%),
    linear-gradient(180deg, rgba(252,255,252,.98), rgba(247,251,247,.96));
  box-shadow:
    0 10px 22px rgba(15,23,42,.045),
    inset 0 1px 0 rgba(255,255,255,.9);
}

#chatsTab .aiPinnedLane .chatItem.aiPinned .chatAvatar{
  background: linear-gradient(180deg, rgba(37,211,102,.18), rgba(27,149,11,.12));
  box-shadow:
    0 8px 16px rgba(27,149,11,.12),
    inset 0 0 0 1px rgba(22,122,9,.08);
}

#chatsTab .aiPinnedLane .chatName{
  font-size: 17px;
  font-weight: 800;
}

#chatsTab .aiPinnedLane .chatSnippet{
  color: #5e6c64;
}

#chatsTab .chatRow{
  min-height: 72px;
  row-gap: 4px;
  padding-top: 14px;
  padding-bottom: 14px;
}

#chatsTab .chatListEntry{
  display: block;
  margin: 0;
}

#chatsTab .chatSwipeRow{
  margin: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#chatsTab .chatSwipeContent{
  border-radius: 0;
  overflow: visible;
  background: #fff;
  box-shadow: none;
}

#chatsTab .chatSwipeRow .chatRow{
  padding-left: calc(16px + var(--safe-left));
  padding-right: calc(16px + var(--safe-right));
}

#chatsTab .chatRow .chatName,
#chatsTab .chatItem .liName{
  color: #111827;
  font-weight: 760;
  font-size: 16px;
  letter-spacing: -.018em;
}

#chatsTab .chatRow .chatSnippet,
#chatsTab .chatItem .liLast{
  color: #66756d;
  font-size: 13.5px;
  font-weight: 560;
}

#chatsTab .chatPreview{
  gap: 6px;
}

#chatsTab .chatRightTop,
#chatsTab .chatRow .chatTime,
#chatsTab .chatItem .liTime{
  color: #90a096;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
}

#chatsTab .chatRow.isUnread .chatName{
  color: #111827;
  font-weight: 820;
}

#chatsTab .chatRow.isUnread .chatSnippet{
  color: #31423a;
  font-weight: 700;
}

#chatsTab .chatRow.isUnread .chatTime,
#chatsTab .chatRow.isUnread .chatRightTop{
  color: #1B950B;
}

#chatsTab .chatRowDivider{
  margin-left: calc(16px + var(--safe-left) + 44px + 18px);
  margin-right: 0;
  border-bottom-color: rgba(17,24,39,.06);
}

#chatsTab .unreadBadge{
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  background: linear-gradient(180deg, #25D366, #1B950B);
  box-shadow: 0 8px 16px rgba(27,149,11,.18);
}

html[data-tab="chats"] .bottomNav{
  background: rgba(255,255,255,.96);
  border-top: 1px solid rgba(17,24,39,.06);
  box-shadow: 0 -8px 24px rgba(15,23,42,.04);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

html[data-tab="chats"] .navItem{
  color: #7b8781;
}

html[data-tab="chats"] .navItem svg{
  opacity: .92;
}

html[data-tab="chats"] #navChats{
  color: #1a8f0f;
}

html[data-tab="chats"] #navChats .label{
  font-weight: 820;
}

html[data-tab="chats"] #navChats{
  color: var(--accent);
}

html[data-tab="chats"] #navChats .label{
  font-weight: 800;
}

/* 1-to-1 chat polish: restrained WhatsApp-style hierarchy and composer behavior. */
#chatOverlay .chatBar{
  min-height: 54px;
  gap: 10px;
  padding-top: calc(4px + var(--safe-top));
  padding-bottom: 4px;
  border-bottom-color: rgba(17,24,39,.08);
  box-shadow: 0 1px 0 rgba(17,24,39,.04);
}

#chatOverlay .chatIconBtn{
  width: var(--icon-btn-size);
  height: var(--icon-btn-size);
  border-radius: 999px;
}

#chatOverlay .chatIconBtn svg{
  width: var(--icon-glyph-size-strong);
  height: var(--icon-glyph-size-strong);
  opacity: .86;
}

#chatOverlay .chatBarAvatar{
  width: 38px;
  height: 38px;
  border-color: rgba(17,24,39,.06);
  background: linear-gradient(180deg, #f7f9fb, #eef2f6);
  box-shadow: inset 0 0 0 1px rgba(17,24,39,.03);
}

#chatOverlay .chatTitle{
  gap: 1px;
}

#chatOverlay .chatName{
  font-size: 17px;
  letter-spacing: -0.01em;
}

#chatOverlay .chatMeta{
  font-size: 12px;
  color: #7b818c;
  opacity: 1;
}

#chatOverlay .chatScrollInner{
  padding-top: 12px;
  padding-bottom: 8px;
}

#chatOverlay .msgRow,
#chatOverlay .bubbleRow{
  padding-left: 10px;
  padding-right: 10px;
}

#chatOverlay .bubbleRow:not(.continued){
  margin-top: 6px;
}

#chatOverlay .bubble{
  max-width: min(78%, 360px);
  width: fit-content;
  inline-size: fit-content;
  min-width: min(132px, 100%);
  padding: 7px 11px 6px;
  border-radius: 14px;
  box-shadow: 0 1px 1px rgba(0,0,0,.04);
}

#chatOverlay .bubble.me{
  border-top-right-radius: 7px;
}

#chatOverlay .bubble.them{
  border-top-left-radius: 7px;
}

#chatOverlay .bubbleText{
  font-size: 15.5px;
  line-height: 1.34;
}

#chatOverlay.aiTextOnly .bubbleRow.aiAssistantRow .bubbleWrap{
  max-width: min(94%, 760px);
}

#chatOverlay.aiTextOnly .bubbleRow.aiAssistantRow .bubble{
  max-width: 100%;
  min-width: 0;
  width: auto;
  inline-size: auto;
  padding: 10px 14px 8px;
}

#chatOverlay.aiTextOnly .bubbleRow.aiAssistantRow .bubbleText{
  font-size: 15.5px;
  line-height: 1.52;
}

#chatOverlay.aiTextOnly .bubbleRow.aiAssistantRow .bubbleText.aiRichText{
  white-space: normal;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#chatOverlay.aiTextOnly .bubbleRow.aiAssistantRow .bubbleText.aiRichText > p,
#chatOverlay.aiTextOnly .bubbleRow.aiAssistantRow .bubbleText.aiRichText > ul,
#chatOverlay.aiTextOnly .bubbleRow.aiAssistantRow .bubbleText.aiRichText > ol{
  margin: 0;
}

#chatOverlay.aiTextOnly .bubbleRow.aiAssistantRow .bubbleText.aiRichText > p.aiSectionTitle{
  font-weight: 800;
  letter-spacing: -0.01em;
}

#chatOverlay.aiTextOnly .bubbleRow.aiAssistantRow .bubbleText.aiRichText > ul,
#chatOverlay.aiTextOnly .bubbleRow.aiAssistantRow .bubbleText.aiRichText > ol{
  padding-inline-start: 1.2em;
}

#chatOverlay.aiTextOnly .bubbleRow.aiAssistantRow .bubbleText.aiRichText li + li{
  margin-top: 6px;
}

#chatOverlay .bubbleReplyQuote{
  margin-bottom: 5px;
  padding: 5px 8px 4px;
  border-left-width: 2px;
  border-radius: 7px;
  background: rgba(15,23,42,.028);
  border-left-color: rgba(107,114,128,.34);
  color: #6b7280;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

#chatOverlay .bubbleReplyQuote,
#roomsChatScreen .bubbleReplyQuote{
  display: flex;
  align-items: center;
  gap: 8px;
}

#chatOverlay .bubbleReplyQuoteContent,
#roomsChatScreen .bubbleReplyQuoteContent{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}

#chatOverlay .bubbleReplyQuoteSnippet,
#roomsChatScreen .bubbleReplyQuoteSnippet{
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#chatOverlay .bubbleReplyQuoteThumbWrap,
#roomsChatScreen .bubbleReplyQuoteThumbWrap{
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(15,23,42,.08);
}

#chatOverlay .bubbleReplyQuoteThumb,
#roomsChatScreen .bubbleReplyQuoteThumb{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#chatOverlay .bubble.them .bubbleReplyQuote{
  background: rgba(15,23,42,.028);
  border-left-color: rgba(107,114,128,.34);
}

#chatOverlay .bubble.me .bubbleReplyQuote{
  background: rgba(255,255,255,.30);
  border-left-color: rgba(27,149,11,.36);
  color: #5b665f;
}

#chatOverlay .bubbleReplyQuote:hover{
  background: rgba(15,23,42,.04);
  color: #4b5563;
}

#chatOverlay .bubble.me .bubbleReplyQuote:hover{
  background: rgba(255,255,255,.38);
  color: #4f5d55;
}

#chatOverlay .bubbleMeta{
  margin-top: 3px;
  font-size: 11px;
  gap: 3px;
  color: rgba(15,23,42,.42);
}

#chatOverlay .bubbleTime{
  opacity: 1;
}

#chatOverlay .bubbleRow.aiAssistantRow .bubble.hasLocationCard .bubbleMeta,
#chatOverlay .bubbleRow.aiAssistantRow .bubble.hasFileCard .bubbleMeta,
#chatOverlay .bubbleRow.aiAssistantRow .bubble.aiStructuredBubble .bubbleMeta{
  margin-top: 5px;
  color: rgba(15,23,42,.42);
  text-shadow: none;
  background: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

#chatOverlay .bubbleRow.aiAssistantRow .bubble.hasLocationCard .bubbleTime,
#chatOverlay .bubbleRow.aiAssistantRow .bubble.hasLocationCard .bubbleEdited,
#chatOverlay .bubbleRow.aiAssistantRow .bubble.hasFileCard .bubbleTime,
#chatOverlay .bubbleRow.aiAssistantRow .bubble.hasFileCard .bubbleEdited,
#chatOverlay .bubbleRow.aiAssistantRow .bubble.aiStructuredBubble .bubbleTime,
#chatOverlay .bubbleRow.aiAssistantRow .bubble.aiStructuredBubble .bubbleEdited{
  color: inherit;
  text-shadow: none;
}

#chatOverlay .chatReplyStrip{
  position: relative;
  padding: 8px 12px 8px 16px;
  background: #fff;
  border-top-color: rgba(17,24,39,.06);
}

#chatOverlay .chatReplyStrip::before{
  content: "";
  position: absolute;
  left: 10px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 999px;
  background: rgba(27,149,11,.45);
}

#chatOverlay .chatReplyStripLabel{
  font-size: 11px;
  font-weight: 700;
  color: #667085;
}

#chatOverlay .chatReplyStripSnippet{
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}

#chatOverlay .chatReplyStripClose{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  color: #667085;
}

#chatOverlay .composer{
  background: rgba(255,255,255,.96);
  border-top-color: rgba(17,24,39,.08);
  padding: 7px 8px;
  padding-bottom: calc(7px + env(safe-area-inset-bottom, 0px));
  gap: 8px;
}

#chatOverlay .compIcon{
  width: 42px;
  height: 42px;
  border-color: rgba(148,163,184,.18);
  background: #fff;
  box-shadow: 0 1px 2px rgba(17,24,39,.04);
}

#chatOverlay .compIcon svg{
  width: 20px;
  height: 20px;
  fill: #667085;
}

#chatOverlay #chatTextInput,
#chatOverlay .composer textarea{
  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);
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

#chatOverlay #chatTextInput::placeholder,
#chatOverlay .composer textarea::placeholder{
  color: #98a2b3;
}

#chatOverlay #chatTextInput:focus,
#chatOverlay .composer textarea:focus{
  outline: none;
  border-color: rgba(27,149,11,.26);
  box-shadow: 0 0 0 2px rgba(27,149,11,.12);
}

#chatOverlay .sendBtn{
  width: 46px;
  height: 46px;
  min-height: 46px;
  box-shadow: 0 8px 16px rgba(27,149,11,.16);
}

#chatOverlay .sendBtn.stop{
  box-shadow:
    0 8px 18px rgba(27,149,11,.12),
    inset 0 0 0 1.5px rgba(27,149,11,.22);
}

#chatOverlay .sendBtn svg{
  width: 21px;
  height: 21px;
}

#chatOverlay .sendBtn:disabled{
  opacity: .58;
  box-shadow: none;
}

/* Nearby: keep the screen close to a clean native iOS list. */
#nearbyTab{
  background: #ffffff;
}

#nearbyTab .nearbyStickyHeader{
  background: #ffffff;
  border-bottom: 1px solid rgba(17,24,39,.05);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#nearbyTab .nearbyStickyControls{
  padding-top: 8px;
  padding-bottom: 10px;
  gap: 10px;
  border-bottom-color: rgba(17,24,39,.05);
}

#nearbyTab .nearbySearchRow{
  gap: 8px;
}

#nearbyTab .nearbySearchRow .chatsSearchWrap{
  flex: 1 1 auto;
}

#nearbyTab .nearbySearchRow .chatsSearch{
  height: 44px;
  background: #ffffff;
  border: 1px solid rgba(17,24,39,.08);
  box-shadow: 0 1px 2px rgba(16,24,40,.03);
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

#nearbyTab .nearbySearchRow .chatsSearch:focus-within{
  background: #ffffff;
  border-color: rgba(31,182,21,.26);
  box-shadow:
    0 0 0 4px rgba(31,182,21,.08),
    0 2px 10px rgba(16,24,40,.05);
}

#nearbyTab .nearbySearchRow .chatsSearchIcon{
  color: #98a2b3;
}

#nearbyTab .nearbySearchRow .chatsSearch input{
  color: #101828;
  font-size: 16px;
}

#nearbyTab .nearbySearchRow .chatsSearch input::placeholder{
  color: #98a2b3;
}

#nearbyTab .nearbySearchActions{
  gap: 4px;
}

#nearbyTab .nearbySearchActions .chatsIconBtn{
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 12px;
  color: #667085;
  background: transparent;
  border: 0;
  box-shadow: none;
}

#nearbyTab .nearbySearchActions .chatsIconBtn:active{
  background: rgba(17,24,39,.06);
}

#nearbyTab #nearbyLocationIconBtn{
  color: #98a2b3;
}

#nearbyTab #nearbyLocationIconBtn.isOn{
  color: #1FB615;
  border-color: transparent;
  background: transparent;
}

#nearbyTab #nearbyLocationIconBtn.isOn::after{
  right: 5px;
  bottom: 5px;
  width: 7px;
  height: 7px;
}

#nearbyTab #nearbyFilterBtn,
#nearbyTab #nearbyRefreshIconBtn{
  color: #667085;
}

#nearbyTab #nearbyInlineFilters{
  gap: 10px;
  margin-top: 0;
}

#nearbyTab #nearbyInlineFilters .waChip{
  min-height: 52px;
  border-color: rgba(17,24,39,.08);
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(16,24,40,.03);
  font-weight: 700;
  color: #344054;
}

#nearbyTab #nearbyInlineFilters .chipK{
  color: #667085;
  font-weight: 700;
}

#nearbyTab #nearbyDistanceVal,
#nearbyTab #nearbyLastSeenVal{
  color: #111827;
  font-weight: 750;
}

#nearbyTab #nearbyInlineFilters .chipChevron{
  color: #98a2b3;
}

#nearbyTab .aiPinnedLane{
  background: transparent;
  padding: 0 0 6px;
}

#nearbyTab .aiPinnedLane .nearbyRow{
  background:
    radial-gradient(circle at top right, rgba(31,182,21,.07), transparent 36%),
    #fcfffc;
  border: 1px solid rgba(31,182,21,.10);
  border-radius: 18px;
  box-shadow: 0 4px 16px rgba(15,23,42,.04);
}

#nearbyTab .nearbyRow{
  min-height: 72px;
  padding-top: 11px;
  padding-bottom: 11px;
  gap: 12px;
}

#nearbyTab .nearbyRow::after{
  background: rgba(17,24,39,.06);
}

#nearbyTab .nearbyAvatar{
  width: 46px;
  height: 46px;
  flex-basis: 46px;
  background: linear-gradient(180deg, #fbfcfb, #eef2f6);
  color: #667085;
  box-shadow:
    0 1px 4px rgba(16,24,40,.04),
    inset 0 0 0 1px rgba(17,24,39,.04);
}

#nearbyTab .aiPinnedLane .nearbyAvatar{
  background: transparent;
  box-shadow: none;
}

#nearbyTab .nearbyName{
  font-size: var(--chat-name-size);
  font-weight: 760;
  line-height: 1.15;
  color: #111827;
  letter-spacing: -0.015em;
}

#nearbyTab .nearbySubtitle{
  min-width: 0;
}

#nearbyTab .nearbyAbout{
  font-size: 15px;
  color: #667085;
  line-height: 1.25;
}

#nearbyTab .nearbyDistance,
#nearbyTab .nearbyLastSeen{
  font-size: 14px;
  color: #98a2b3;
  font-weight: 600;
  letter-spacing: 0;
}

#nearbyTab .nearbyLastSeen{
  color: #98a2b3;
}

#nearbyTab .nearbyPill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.08);
  background: rgba(17,24,39,.05);
  color: #667085;
  font-size: 10px;
  font-weight: 800;
}

#nearbyTab .nearbyRow:active{
  background: rgba(17,24,39,.03);
}

#nearbyTab .nearbyRow.pressable.isPressed{
  background: rgba(17,24,39,.06);
}

/* Rooms-first polish pass: stronger row hierarchy, calmer tabs. */
#roomsTab{
  background:
    radial-gradient(circle at top left, rgba(37,211,102,.07), transparent 24%),
    linear-gradient(180deg, #f7fbf6 0%, #ffffff 230px);
}

html[data-tab="rooms"] #topbar{
  background:
    radial-gradient(circle at top left, rgba(37,211,102,.07), transparent 28%),
    linear-gradient(180deg, rgba(252,254,252,.98), rgba(247,250,247,.94));
  border-bottom: 1px solid rgba(17,24,39,.05);
  box-shadow:
    0 8px 20px rgba(15,23,42,.03),
    inset 0 1px 0 rgba(255,255,255,.86);
  padding-top: calc(4px + var(--safe-top));
  padding-bottom: 4px;
  min-height: calc(52px + var(--safe-top));
}

html[data-tab="rooms"] #topbar .brand{
  gap: 10px;
}

html[data-tab="rooms"] #topbar .brandText{
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -0.015em;
}

html[data-tab="rooms"] #topbar .appLogo{
  width: 30px;
  height: 30px;
  border-radius: 11px;
  box-shadow: 0 8px 16px rgba(27,149,11,.12);
}

html[data-tab="rooms"] #topbar .topIcon{
  background: transparent;
  border: 0;
  box-shadow: none;
}

html[data-tab="rooms"] #topbar .topIcon:active{
  background: rgba(17,24,39,.06);
}

#roomsTab .roomsScroll{
  padding-top: 4px;
}

#roomsTab .roomsTabsBar{
  padding: 6px var(--pad-r) 6px var(--pad-l);
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#roomsTab .roomsTabSeg{
  min-height: 38px;
  padding: 0 15px;
  border-radius: 11px;
  color: #728077;
  font-size: 14px;
  font-weight: 760;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(17,24,39,.045);
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 80ms ease;
}

#roomsTab .roomsTabSeg.isActive{
  color: #102418;
  background: rgba(255,255,255,.96);
  box-shadow:
    0 4px 10px rgba(15,23,42,.035),
    inset 0 1px 0 rgba(255,255,255,.86);
}

#roomsTab .roomsSectionLabel{
  padding: 11px var(--pad-l) 7px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .08em;
  color: #a1ada6;
}

#roomsTab .roomsRow{
  gap: 12px;
  padding: 10px var(--pad-r) 10px var(--pad-l);
  min-height: 66px;
  margin: 0 12px 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,251,249,.95));
  border: 1px solid rgba(17,24,39,.05);
  border-radius: 18px;
  box-shadow:
    0 10px 22px rgba(15,23,42,.035),
    inset 0 1px 0 rgba(255,255,255,.88);
  position: relative;
}

#roomsTab .roomsRow::after{
  display: none;
}

#roomsTab .roomsRow:active{
  background:
    linear-gradient(180deg, rgba(247,250,247,.98), rgba(243,247,243,.96));
}

#roomsTab .roomsRowAvatar{
  width: 42px;
  height: 42px;
  background: linear-gradient(180deg, #fbfcfb, #eef4f0);
  box-shadow:
    0 3px 10px rgba(15,23,42,.04),
    inset 0 0 0 1px rgba(17,24,39,.04);
}

#roomsTab .roomsRowAvatarLetter{
  font-size: 17px;
  font-weight: 760;
  color: #66756d;
}

#roomsTab .roomsRowBody{
  gap: 3px;
}

#roomsTab .roomsRowTitle{
  font-size: var(--chat-name-size);
  font-weight: 760;
  letter-spacing: -0.015em;
  color: #111827;
}

#roomsTab .roomsRowTitleUnread{
  font-weight: 800;
}

#roomsTab .roomsRowMineBadge{
  font-size: 9px;
  font-weight: 800;
  min-height: 16px;
  padding: 0 6px;
  background: rgba(27,149,11,.10);
  border-color: rgba(27,149,11,.12);
  color: #228114;
}

#roomsTab .roomsRowPreview{
  font-size: var(--chat-snippet-size);
  color: #617067;
}

#roomsTab .roomsRowPreviewUnread{
  color: #344054;
  font-weight: 600;
}

#roomsTab .roomsRowMeta{
  font-size: var(--chat-snippet-size);
  color: #8b9990;
}

#roomsTab .roomsRowTime{
  font-size: var(--chat-time-size);
  color: #9aa69f;
  font-weight: 700;
  letter-spacing: .03em;
}

#roomsTab .roomsRowUnreadBadge{
  min-width: 18px;
  height: 18px;
  font-size: 11px;
  font-weight: 800;
  background: linear-gradient(180deg, #25D366, #1B950B);
  box-shadow: 0 8px 16px rgba(27,149,11,.18);
}

#roomsTab .roomsRowMenuBtn{
  width: 32px;
  height: 32px;
  color: #a8b3ad;
  border-radius: 11px;
  background: rgba(247,249,247,.9);
  border: 1px solid rgba(17,24,39,.05);
}

#roomsTab .roomsRowMenuBtn:hover{
  background: rgba(17,24,39,.05);
  color: #90a096;
}

#roomsTab .roomsRowActionChip{
  min-height: 34px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 760;
}

#roomsTab .roomsDiscoveryToolbar{
  padding-top: 8px;
  gap: 8px;
  background:
    linear-gradient(180deg, rgba(250,252,250,.98), rgba(255,255,255,.98));
  box-shadow:
    0 10px 20px rgba(15,23,42,.04),
    0 1px 0 rgba(17,24,39,.06);
}

#roomsTab .roomsDiscoverySearch{
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(17,24,39,.06);
  box-shadow:
    0 6px 14px rgba(15,23,42,.035),
    inset 0 1px 0 rgba(255,255,255,.82);
}

#roomsTab .roomsDiscoveryRadiusGroup{
  gap: 8px;
}

#roomsTab .roomsDiscoveryRadiusOption{
  min-height: 38px;
  padding: 0 13px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(17,24,39,.05);
  color: #6a776f;
  box-shadow:
    0 6px 14px rgba(15,23,42,.025),
    inset 0 1px 0 rgba(255,255,255,.82);
}

#roomsTab .roomsDiscoveryRadiusOption:has(input:checked),
#roomsTab .roomsDiscoveryRadiusOption.isActive{
  background: linear-gradient(180deg, #25D366, #1B950B);
  border-color: rgba(27,149,11,.18);
  box-shadow: 0 8px 18px rgba(27,149,11,.18);
}

#roomsTab .roomsDiscoverySortHint{
  color: #8b9990;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
  padding-top: 4px;
}

#roomsTab .roomsSkeleton{
  padding: 4px 12px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#roomsTab .roomsSkelCard{
  height: 86px;
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(244,247,244,.96) 20%, rgba(233,238,234,.98) 50%, rgba(244,247,244,.96) 80%);
  background-size: 200% 100%;
  border: 1px solid rgba(17,24,39,.04);
  box-shadow:
    0 8px 18px rgba(15,23,42,.03),
    inset 0 1px 0 rgba(255,255,255,.78);
}

#roomsTab .roomsDiscoveryEmpty{
  padding-top: 8px;
}

#roomsLocationIconBtn{
  color: #98a2b3;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 12px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(16,24,40,.06);
  box-shadow: 0 6px 14px rgba(15,23,42,.035);
}

#roomsLocationIconBtn:active{
  background: #eef5ef;
}

#roomsLocationIconBtn.isOn{
  color: #1B950B;
  border-color: transparent;
  background: transparent;
}

#roomsLocationIconBtn.isOn::after{
  right: 5px;
  bottom: 5px;
  width: 7px;
  height: 7px;
}

/* Places-first polish pass: cleaner control chrome, keep map-first layout. */
#placesTab{
  background:
    radial-gradient(circle at top left, rgba(37,211,102,.07), transparent 24%),
    linear-gradient(180deg, #f7fbf6 0%, #ffffff 250px);
}

#placesTab .placesSearchSticky{
  background:
    linear-gradient(180deg, rgba(251,253,251,.97), rgba(247,250,247,.93));
  border-bottom: 1px solid rgba(17,24,39,.05);
  box-shadow:
    0 8px 20px rgba(15,23,42,.03),
    inset 0 1px 0 rgba(255,255,255,.86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

#placesTab .placesControls{
  padding-top: 8px;
  padding-bottom: 8px;
  gap: 8px;
}

#placesTab .placesHeaderRow{
  gap: 8px;
}

#placesTab .placesSearchWrap.chatsSearch{
  height: 42px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(17,24,39,.06);
  box-shadow:
    0 6px 14px rgba(15,23,42,.035),
    inset 0 1px 0 rgba(255,255,255,.82);
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

#placesTab .placesSearchWrap.chatsSearch:focus-within{
  background: #fff;
  border-color: rgba(27,149,11,.28);
  box-shadow: 0 0 0 4px rgba(27,149,11,.10);
}

#placesTab .placesSearchWrap .searchIconBtn{
  color: rgba(107,114,128,.88);
}

#placesTab #placesSearch{
  color: #111827;
}

#placesTab #placesSearch::placeholder{
  color: #9aa4b2;
}

#placesTab #placesLocationIconBtn,
#placesTab #placesGeoBtn{
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(17,24,39,.05);
  background: rgba(255,255,255,.9);
  color: #667085;
  box-shadow:
    0 6px 14px rgba(15,23,42,.035),
    inset 0 1px 0 rgba(255,255,255,.84);
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 80ms ease;
}

#placesTab #placesLocationIconBtn:active,
#placesTab #placesGeoBtn:active{
  background: #eef5ef;
  transform: none;
}

#placesTab #placesLocationIconBtn.isOn,
#placesTab #placesGeoBtn.isOn{
  border-color: transparent;
  background: transparent;
  color: #1B950B;
  box-shadow: none;
}

#placesTab #placesLocationIconBtn.isOn::after{
  right: 5px;
  bottom: 5px;
  width: 7px;
  height: 7px;
}

#placesTab .placesQuickRow{
  gap: 10px;
  margin-top: 0;
}

#placesTab .placesRadiusPill{
  height: 38px;
  padding: 0 13px;
  border-radius: 13px;
  border-color: #e5e7eb;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 80ms ease;
}

#placesTab .placesRadiusPill:active{
  background: #f2f4f7;
  transform: translateY(1px);
}

#placesTab .placesRadiusPill .chipK{
  color: #667085;
  font-size: 13.5px;
}

#placesTab .placesRadiusPill #placesRadiusVal{
  color: #111827;
  letter-spacing: -0.01em;
}

#placesTab .placesRadiusPill .chipChevron{
  color: #98a2b3;
}

#placesTab .placesCats{
  gap: 8px;
  padding: 2px 0 2px;
}

#placesTab .placeCat{
  width: 42px;
  height: 42px;
  border-radius: 13px;
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,.95);
  border-color: rgba(17,24,39,.06);
  color: #4b5563;
  box-shadow:
    0 6px 14px rgba(15,23,42,.03),
    inset 0 1px 0 rgba(255,255,255,.82);
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 80ms ease;
}

#placesTab .placeCat::before{
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 10px;
  background: transparent;
  transition: background-color 160ms ease;
}

#placesTab .placeCat .ico{
  position: relative;
  z-index: 1;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  opacity: 1;
  transition: transform 160ms ease, opacity 160ms ease;
}

#placesTab .placeCat .ico svg{
  width: 20px;
  height: 20px;
  display: block;
  stroke: currentColor;
  stroke-width: 2.05;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#placesTab .placeCat.active{
  background: rgba(27,149,11,.10);
  border-color: rgba(27,149,11,.22);
  color: #167A09;
  box-shadow:
    0 6px 14px rgba(27,149,11,.08),
    inset 0 1px 0 rgba(255,255,255,.72);
}

#placesTab .placeCat.active::before{
  background: rgba(27,149,11,.06);
}

#placesTab .placeCat.active .ico{
  opacity: 1;
  transform: scale(1.03);
}

#placesTab .placeCat.placeCatWiki{
  color: #4b5563;
}

#placesTab .placeCat.placeCatWiki .ico svg{
  opacity: 1;
}

#placesTab .placesPage .placesModeToggle{
  gap: 4px;
  padding: 4px;
  background: rgba(244,247,244,.9);
  border: 1px solid rgba(17,24,39,.05);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86),
    0 6px 16px rgba(15,23,42,.025);
}

#placesTab .placesPage .placesModeBtn{
  height: 40px;
  border-radius: 13px;
  border: 1px solid transparent;
  background: transparent;
  color: #728077;
  font-weight: 760;
  font-size: 14px;
  box-shadow: none;
}

#placesTab .placesPage .placesModeBtn[aria-selected="true"],
#placesTab .placesPage .placesModeBtn.isActive{
  color: #102418;
  border-color: rgba(17,24,39,.05);
  background: rgba(255,255,255,.96);
  box-shadow:
    0 8px 16px rgba(15,23,42,.04),
    inset 0 1px 0 rgba(255,255,255,.88);
}

#placesTab .placesPage .placesModeBtn:focus-visible{
  box-shadow:
    0 0 0 3px rgba(27,149,11,.14),
    0 8px 16px rgba(15,23,42,.04),
    inset 0 1px 0 rgba(255,255,255,.88);
}

#placesTab .placeCat.placeCatWiki.active{
  color: #167A09;
}

#placesTab .placeCat:active{
  transform: translateY(1px) scale(.98);
}

#placesTab .placesModeToggle{
  height: 40px;
  padding: 3px;
  border-radius: 16px;
  background: #f3f4f6;
  border: 1px solid #e4e7ec;
  gap: 4px;
}

#placesTab .placesModeBtn{
  height: 34px;
  border-radius: 13px;
  border: 0;
  background: transparent;
  color: #667085;
  font-size: 14px;
  font-weight: 760;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 80ms ease;
}

#placesTab .placesModeBtn[aria-selected="true"],
#placesTab .placesModeBtn.isActive{
  background: #fff;
  color: #111827;
  box-shadow: 0 1px 2px rgba(16,24,40,.08);
}

#placesTab .placesModeBtn:focus-visible{
  box-shadow: 0 0 0 3px rgba(27,149,11,.16), 0 1px 2px rgba(16,24,40,.08);
}

#placesTab .placesMapWrap{
  border-top: 1px solid rgba(17,24,39,.04);
}

#placesTab #placesMsg.msg.ok{
  margin-top: 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: #8b95a3 !important;
}

#placesTab .placeRow{
  min-height: 68px;
  padding-top: 10px;
  padding-bottom: 10px;
}

#placesTab .placeAvatar{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f7f9fb, #eef2f6);
  color: #667085;
  box-shadow: inset 0 0 0 1px rgba(17,24,39,.04);
}

#placesTab .placeAvatar svg{
  width: 19px;
  height: 19px;
  display: block;
  stroke: currentColor;
  stroke-width: 1.95;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#placesTab .placeAvatar--pharmacy,
#placesTab .placeAvatar--hospital{
  color: #176f3d;
  background: linear-gradient(180deg, #f4fbf6, #edf7f0);
}

#placesTab .placeAvatar--grocery,
#placesTab .placeAvatar--restaurant{
  color: #6a5b12;
  background: linear-gradient(180deg, #fdfbf1, #f7f3df);
}

#placesTab .placeAvatar--coffee{
  color: #7a4b2b;
  background: linear-gradient(180deg, #fcf7f2, #f6ede4);
}

#placesTab .placeAvatar--atm{
  color: #1e5bb8;
  background: linear-gradient(180deg, #f3f7fe, #e9f0fd);
}

#placesTab .placeName{
  font-size: 15px;
  font-weight: 760;
  color: #111827;
  letter-spacing: -0.01em;
}

#placesTab .placeSubtitle{
  font-size: 12.5px;
  color: #667085;
}

#placesTab .placeRightTop{
  font-size: 11px;
  color: #98a2b3;
  font-weight: 700;
  letter-spacing: .01em;
}

#placesTab .placeRightBottom{
  font-size: 11px;
  color: #98a2b3;
  font-weight: 700;
}

#placesTab .placeDivider{
  border-bottom-color: rgba(17,24,39,.08);
}

/* Me-first polish pass: improve hierarchy and identity without redesigning structure. */
#meTab{
  background:
    radial-gradient(circle at top right, rgba(77,182,89,.14), transparent 24%),
    radial-gradient(circle at top left, rgba(16,185,129,.08), transparent 18%),
    linear-gradient(180deg, #f7f8fa 0%, #f3f5f7 42%, #edf2f6 100%);
}

#meTab .pageBody{
  display: block;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  touch-action: pan-y;
  box-sizing: border-box;
  padding-top: calc(var(--safe-top) + 8px);
  scroll-padding-bottom: calc(var(--page-body-pad-b) + var(--safe-bottom) + 18px);
  padding-bottom: calc(var(--page-body-pad-b) + var(--safe-bottom) + 18px);
}

#meTab #meContent{
  display: block;
  min-height: auto;
}

#meTab #meContent > .meSection{
  min-height: auto;
}

#meTab .meSection{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
  padding-bottom: 2px;
}

#meTab .meProfileCard{
  margin-top: 8px;
  position: relative;
  overflow: hidden;
  padding: 10px 12px 11px;
  border: 1px solid rgba(17,24,39,.045);
  border-radius: 19px;
  background:
    radial-gradient(circle at 100% 0%, rgba(77,182,89,.09), rgba(77,182,89,0) 34%),
    radial-gradient(circle at 0% 100%, rgba(16,185,129,.07), rgba(16,185,129,0) 32%),
    linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(249,251,249,.98) 100%);
  box-shadow:
    0 11px 20px rgba(16,24,40,.038),
    inset 0 1px 0 rgba(255,255,255,.88);
}

#meTab .meProfileCard::before{
  content: "";
  position: absolute;
  top: -34px;
  right: -22px;
  width: 126px;
  height: 126px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(77,182,89,.10) 0%, rgba(77,182,89,0) 70%);
  pointer-events: none;
}

#meTab .meProfileCard::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
  pointer-events: none;
}

#meTab .meProfileCard:active{
  transform: translateY(1px);
}

#meTab .profileRow{
  gap: 10px;
  align-items: flex-start;
}

#meTab .profileAvatar{
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  margin-top: 4px;
  border: 2px solid rgba(255,255,255,.92);
  background: linear-gradient(180deg, #edf2f6, #dde5ec);
  box-shadow:
    0 7px 14px rgba(16,24,40,.08),
    inset 0 0 0 1px rgba(17,24,39,.04);
}

#meTab .profileMeta{
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#meTab .profileMeta .name{
  font-size: 20px;
  font-weight: 810;
  line-height: 1.03;
  letter-spacing: -0.025em;
  color: #111827;
}

#meTab .meIdentityMetaRow{
  margin-top: 5px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

#meTab .meProfileHandle{
  margin-top: 0;
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  max-width: 100%;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(77,182,89,.12);
  background: rgba(77,182,89,.075);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.76);
  color: #2f8a21;
  font-size: 10.5px;
  font-weight: 745;
  letter-spacing: .01em;
}

#meTab #meProfileMetaLine{
  margin-top: 2px;
  font-size: 11.25px;
  line-height: 1.2;
  font-weight: 690;
  letter-spacing: .01em;
  color: #6b7788;
  white-space: normal;
}

#meTab .meIdRow{
  margin-top: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}

#meTab .meIdBadge{
  max-width: 100%;
  gap: 5px;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.045);
  background: rgba(248,250,252,.72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.76),
    0 3px 7px rgba(16,24,40,.022);
}

#meTab .meIdBadgeText{
  color: #98a2b3;
  font-size: 8.75px;
  font-weight: 800;
  letter-spacing: .1em;
}

#meTab .meIdBadgeVal{
  min-width: 0;
  color: #667285;
  font-size: 10.5px;
  font-weight: 740;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#meTab .meHeroActions{
  width: 100%;
  margin-top: 7px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#meTab .meActionsRow{
  width: 100%;
  gap: 6px;
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#meTab .meIdBtn{
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 735;
  box-shadow: 0 4px 10px rgba(16,24,40,.034);
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 80ms ease, filter 160ms ease;
}

#meTab .meShareBtn{
  width: 100%;
  justify-content: center;
  color: #566375;
  border-color: rgba(17,24,39,.065);
  background: rgba(255,255,255,.88);
  box-shadow: 0 2px 8px rgba(16,24,40,.02);
}

#meTab .meShareBtn:hover{
  background: #f8fafc;
}

#meTab .meEditBtn{
  width: 100%;
  height: 31px;
  justify-content: center;
  background: linear-gradient(180deg, #1fb615, #1b950b);
  border-color: #1b950b;
  box-shadow: 0 8px 14px rgba(27,149,11,.14);
}

#meTab .meHeroActions::before{
  content: "";
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(17,24,39,0), rgba(17,24,39,.045) 18%, rgba(17,24,39,.045) 82%, rgba(17,24,39,0));
  margin-bottom: 0;
}

#meTab .meQrBtn{
  width: 100%;
  justify-content: center;
  color: #3d7f35;
  border-color: rgba(77,182,89,.15);
  background: rgba(77,182,89,.085);
  box-shadow: 0 2px 8px rgba(16,24,40,.02);
}

#meTab .meQrBtn:hover{
  background: rgba(77,182,89,.13);
}

#meTab .meEditBtn:focus-visible{
  box-shadow: 0 0 0 3px var(--brandRing), 0 10px 20px rgba(27,149,11,.18);
}

#meTab .meGroupLabel{
  margin: 2px 8px 2px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #98a2af;
}

#meTab .settingsGroup{
  margin-top: 0;
  border-radius: 18px;
  border: 1px solid rgba(17,24,39,.04);
  background: rgba(255,255,255,.9);
  box-shadow: 0 8px 18px rgba(16,24,40,.028);
  overflow: hidden;
}

#meTab .settingsRow{
  min-height: 52px;
  padding: 10px 13px;
  gap: 11px;
}

#meTab .settingsRow + .settingsRow::before{
  left: 64px;
  background: rgba(17,24,39,.05);
}

#meTab .settingsIcon{
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: linear-gradient(180deg, #f7f9fb, #eef2f6);
  color: #667085;
  box-shadow: inset 0 0 0 1px rgba(17,24,39,.035);
}

#meTab .settingsIcon svg{
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#meTab .settingsTitle{
  font-size: 14px;
  font-weight: 770;
  letter-spacing: -0.01em;
  color: #111827;
}

#meTab .settingsSub{
  margin-top: 2px;
  font-size: 11px;
  color: #6e7989;
}

#meTab .settingsChevron{
  color: #b0b8c4;
}

#meTab #meNavAccount .settingsIcon{
  background: linear-gradient(180deg, rgba(59,130,246,.12), rgba(59,130,246,.05));
  color: #3b82f6;
}

#meTab #meNavPrivacy .settingsIcon{
  background: linear-gradient(180deg, rgba(34,197,94,.13), rgba(34,197,94,.05));
  color: #229954;
}

#meTab #meNavNotifications .settingsIcon{
  background: linear-gradient(180deg, rgba(245,158,11,.15), rgba(245,158,11,.05));
  color: #d38b00;
}

#meTab .meLegalGroup{
  border-color: rgba(17,24,39,.03);
  background: rgba(255,255,255,.58);
  box-shadow: 0 4px 12px rgba(16,24,40,.016);
}

#meTab .meLegalGroup .legalRow{
  min-height: 46px;
}

#meTab .meLegalGroup .settingsIcon{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(148,163,184,.1), rgba(148,163,184,.04));
  color: #95a0ad;
}

#meTab #meNavInviteFriend .settingsIcon{
  background: linear-gradient(180deg, rgba(77,182,89,.11), rgba(77,182,89,.035));
  color: #3f9a33;
  box-shadow: inset 0 0 0 1px rgba(63,154,51,.08);
}

#meTab #meNavInviteFriend .settingsIcon svg{
  width: 22px;
  height: 22px;
  stroke-width: 2.05;
}

#meTab .meLegalGroup .settingsTitle{
  font-size: 13px;
  font-weight: 690;
  color: #475467;
}

#meTab .meLegalGroup .settingsSub{
  font-size: 10.25px;
  color: #a3acb8;
}

#meTab .meFooter{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: -2px;
  padding-top: 0;
  padding-bottom: 0;
}

#meTab .meFooterLabel{
  display: none;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #a0a8b5;
}

#meTab .meVersionBadge{
  min-width: 72px;
  min-height: 20px;
  padding: 0 6px;
  border-color: rgba(17,24,39,.03);
  background: transparent;
  color: #a7b0bb;
  font-size: 9px;
  font-weight: 670;
  letter-spacing: .01em;
  box-shadow: none;
  opacity: .86;
}

@media (max-width: 380px){
  #meTab .meProfileCard{
    padding: 12px 12px 12px;
  }

  #meTab .profileAvatar{
    width: 42px;
    height: 42px;
  }

  #meTab .profileMeta .name{
    font-size: 17px;
  }

  #meTab .meHeroActions{
    display: flex;
    flex-direction: column;
  }

  #meTab .meActionsRow{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #meTab #meContent{
    min-height: calc(100% - (var(--page-body-pad-b) + var(--safe-bottom) + 22px));
  }
}

/* Profile details pass: improve form hierarchy without changing flow. */
#meDetailsOverlay{
  background: #f6f7f9;
}

#meDetailsOverlay .chatBar{
  background: #fff;
  border-bottom: 1px solid rgba(17,24,39,.06);
}

#meDetailsOverlay .chatName{
  color: #111827;
  font-weight: 780;
  letter-spacing: -0.01em;
}

#meDetailsOverlay .chatMeta{
  color: #98a2b3;
  font-size: 12px;
  font-weight: 600;
}

#meDetailsOverlay .meOverlayBody{
  padding-top: 14px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

#meDetailsOverlay #meDetailsContent.card{
  border-radius: 24px;
  border: 1px solid rgba(17,24,39,.05);
  background:
    radial-gradient(circle at 50% 0%, rgba(77,182,89,.12), rgba(77,182,89,0) 34%),
    linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
  box-shadow: 0 18px 42px rgba(16,24,40,.055);
  padding: 16px;
  overflow: hidden;
}

#meDetailsOverlay .profileDetailsHero{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  margin-bottom: 16px;
  border-radius: 20px;
  border: 1px solid rgba(77,182,89,.12);
  background:
    radial-gradient(circle at 0% 0%, rgba(77,182,89,.13), rgba(77,182,89,0) 42%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.92));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 10px 26px rgba(15,23,42,.04);
}

#meDetailsOverlay .profileDetailsHeroAvatar{
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,.96);
  box-shadow: 0 10px 24px rgba(15,23,42,.14);
}

#meDetailsOverlay .profileDetailsHeroText{
  min-width: 0;
  flex: 1;
}

#meDetailsOverlay .profileDetailsHeroAction{
  flex-shrink: 0;
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(27,149,11,.10);
  color: #1b950b;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

#meDetailsOverlay .profileDetailsHeroAction:active{
  background: rgba(27,149,11,.16);
}

#meDetailsOverlay .profileDetailsHeroEyebrow{
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #2f9e44;
}

#meDetailsOverlay .profileDetailsHeroName{
  margin-top: 4px;
  color: #101828;
  font-size: 22px;
  font-weight: 860;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

#meDetailsOverlay .profileDetailsHeroNote{
  margin-top: 5px;
  color: #667085;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
}

#meDetailsOverlay .profileDetailsSectionTitle{
  margin: 16px 2px 8px;
  color: #98a2b3;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}

#meDetailsOverlay .profileDetailsHero + .profileDetailsSectionTitle{
  margin-top: 0;
}

#meDetailsOverlay .profileDetailsList{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#meDetailsOverlay .profileDetailsRow{
  width: 100%;
  min-height: 72px;
  padding: 14px 16px;
  border: 1px solid rgba(17,24,39,.05);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.94));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 10px 24px rgba(15,23,42,.035);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  cursor: pointer;
}

#meDetailsOverlay .profileDetailsRow:active{
  background: linear-gradient(180deg, rgba(248,250,252,.98), rgba(241,245,249,.96));
}

#meDetailsOverlay .profileDetailsRowCopy{
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#meDetailsOverlay .profileDetailsRowLabel{
  color: #111827;
  font-size: 15px;
  font-weight: 760;
  letter-spacing: -0.01em;
}

#meDetailsOverlay .profileDetailsRowValue{
  color: #667085;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

#meDetailsOverlay .profileDetailsRowValue.isPlaceholder{
  color: #98a2b3;
}

#meDetailsOverlay .profileDetailsRowChevron{
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #98a2b3;
}

#meDetailsOverlay .profileDetailsRowChevron svg{
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#meDetailsOverlay .profileDetailsGalleryRow{
  min-height: 68px;
}

#meDetailsOverlay label{
  margin-top: 12px;
  margin-bottom: 7px;
  font-size: 11.5px;
  font-weight: 760;
  letter-spacing: .02em;
  color: #667085;
}

#meDetailsOverlay label:first-child{
  margin-top: 0;
}

#meDetailsOverlay input,
#meDetailsOverlay select,
#meDetailsOverlay textarea{
  border: 1px solid #e4e7ec;
  background: #fff;
  border-radius: 16px;
  color: #111827;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

#meDetailsOverlay input,
#meDetailsOverlay select{
  min-height: 46px;
  padding: 0 14px;
}

#meDetailsOverlay textarea{
  min-height: 106px;
  padding: 12px 14px;
  resize: vertical;
}

#meDetailsOverlay input::placeholder,
#meDetailsOverlay textarea::placeholder{
  color: #9aa4b2;
}

#meDetailsOverlay input:focus,
#meDetailsOverlay select:focus,
#meDetailsOverlay textarea:focus,
#meDetailsOverlay input:focus-visible,
#meDetailsOverlay select:focus-visible,
#meDetailsOverlay textarea:focus-visible{
  background: #fff;
  border-color: rgba(27,149,11,.22);
  box-shadow: 0 0 0 3px rgba(27,149,11,.08);
}

#meDetailsOverlay #profileAboutCount{
  margin-top: 5px;
  text-align: right;
  font-size: 11px;
  font-weight: 700;
  color: #98a2b3;
  opacity: 1;
}

#meDetailsOverlay .meDetailsSwitchRow{
  margin-top: 0;
  min-height: 60px;
  padding: 0 14px;
  border: 1px solid rgba(17,24,39,.06);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    0 8px 20px rgba(15,23,42,.03);
}

#meDetailsOverlay .meDetailsSwitchRow:active{
  background: #f8fafc;
}

#meDetailsOverlay .meDetailsSwitchLabel{
  font-size: 15px;
  font-weight: 760;
  letter-spacing: -0.01em;
  color: #111827;
}

#meDetailsOverlay .meDetailsHelp{
  margin-top: 7px;
  padding: 0 2px;
  font-size: 12px;
  color: #667085;
  line-height: 1.45;
}

#meDetailsOverlay #saveProfileBtn{
  width: 100%;
  min-height: 48px;
  margin-top: 14px;
  border: 1px solid #1b950b;
  border-radius: 18px;
  background: linear-gradient(180deg, #25d366, #1b950b);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 14px 26px rgba(27,149,11,.18);
  transition: transform 80ms ease, filter 160ms ease, box-shadow 160ms ease;
}

#meDetailsOverlay #saveProfileBtn:active:not(:disabled){
  transform: translateY(1px) scale(.99);
  filter: brightness(.96);
}

#meDetailsOverlay #saveProfileBtn:disabled{
  background: linear-gradient(180deg, #d6e8ce, #c7ddb9);
  border-color: #c7ddb9;
  color: #f8fffa;
  box-shadow: none;
  opacity: 1;
}

#meDetailsOverlay #meMsg{
  margin-top: 8px;
}

#profileFieldEditorSheet{
  max-width: 560px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

#profileFieldEditorSheet .sheetHeader{
  padding-bottom: 10px;
}

#profileFieldEditorSheet .sheetTitle{
  font-size: 20px;
  font-weight: 860;
  letter-spacing: -0.02em;
}

#profileFieldEditorSheet .sheetPreview{
  color: #667085;
  font-size: 13px;
  line-height: 1.45;
}

#profileFieldEditorSheet .profileFieldEditorBody{
  padding: 0 16px 4px;
  overflow: auto;
}

#profileFieldEditorSheet .profileFieldEditorTextWrap{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#profileFieldEditorSheet .profileFieldEditorTextWrap.hidden,
#profileFieldEditorSheet .profileFieldEditorOptions.hidden{
  display: none;
}

#profileFieldEditorSheet input,
#profileFieldEditorSheet textarea,
#profileFieldEditorSheet select{
  width: 100%;
  min-height: 50px;
  border: 1.5px solid #cfd8e3;
  border-radius: 16px;
  background: #f8fafc;
  color: #111827;
  font-size: 16px;
  padding: 0 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

#profileFieldEditorSheet textarea{
  min-height: 132px;
  padding: 14px;
  resize: none;
  line-height: 1.45;
}

#profileFieldEditorSheet input::placeholder,
#profileFieldEditorSheet textarea::placeholder{
  color: #98a2b3;
}

#profileFieldEditorSheet input:focus,
#profileFieldEditorSheet textarea:focus,
#profileFieldEditorSheet select:focus{
  border-color: rgba(27,149,11,.22);
  box-shadow: 0 0 0 3px rgba(27,149,11,.08);
}

#profileFieldEditorSheet .charCount{
  text-align: right;
  font-size: 11px;
  font-weight: 700;
  color: #98a2b3;
}

#profileFieldEditorSheet .profileFieldEditorOptions{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#profileFieldEditorSheet .profileFieldEditorOption{
  width: 100%;
  min-height: 58px;
  padding: 12px 14px;
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 16px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  cursor: pointer;
}

#profileFieldEditorSheet .profileFieldEditorOption:active{
  background: rgba(0,0,0,.03);
}

#profileFieldEditorSheet .profileFieldEditorOption.isSelected{
  border-color: rgba(27,149,11,.30);
  background: rgba(27,149,11,.06);
}

#profileFieldEditorSheet .profileFieldEditorOptionCopy{
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#profileFieldEditorSheet .profileFieldEditorOptionLabel{
  color: #111827;
  font-size: 15px;
  font-weight: 760;
}

#profileFieldEditorSheet .profileFieldEditorOptionSub{
  color: #667085;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

#profileFieldEditorSheet .profileFieldEditorOptionCheck{
  color: #1b950b;
  font-size: 18px;
  font-weight: 900;
  opacity: 0;
}

#profileFieldEditorSheet .profileFieldEditorOption.isSelected .profileFieldEditorOptionCheck{
  opacity: 1;
}

#profileFieldEditorSheet #profileFieldEditorMsg{
  margin-top: 10px;
}

#profileFieldEditorSheet .profileFieldEditorActions{
  display: flex;
  gap: 10px;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
}

#profileFieldEditorSheet .profileFieldEditorActions .btn{
  flex: 1;
  min-height: 48px;
}

html.is-native-app.keyboard-open #profileFieldEditorSheet.bottomSheet.show{
  max-height: calc(var(--vvh, 100vh) - 12px);
}

#meGalleryOverlay{
  background: #f6f7f9;
}

#meGalleryOverlay .chatBar{
  background: #fff;
  border-bottom: 1px solid rgba(17,24,39,.06);
}

#meGalleryOverlay .chatName{
  color: #111827;
  font-weight: 780;
  letter-spacing: -0.01em;
}

#meGalleryOverlay .chatMeta{
  color: #98a2b3;
  font-size: 12px;
  font-weight: 600;
}

#meGalleryOverlay .meOverlayBody{
  padding-top: 14px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

#meGalleryOverlay .meGalleryCard{
  border-radius: 24px;
  border: 1px solid rgba(17,24,39,.05);
  background:
    radial-gradient(circle at 50% 0%, rgba(77,182,89,.12), rgba(77,182,89,0) 36%),
    linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
  box-shadow: 0 18px 40px rgba(16,24,40,.05);
  padding: 16px;
}

#meGalleryOverlay .meGalleryTitle{
  font-size: 17px;
  font-weight: 860;
  color: #101828;
}

#meGalleryOverlay .meGalleryCount{
  min-width: 40px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15,23,42,.06);
  color: #667085;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

#meGalleryOverlay .meGalleryGrid{
  gap: 12px;
}

#meGalleryOverlay .meGalleryTile,
#meGalleryOverlay .meGalleryAddTile{
  border-radius: 20px;
  border-color: rgba(15,23,42,.06);
  box-shadow: 0 10px 24px rgba(15,23,42,.04);
}

#meGalleryOverlay .meGalleryAddTile{
  border: 1px dashed rgba(27,149,11,.22);
  background:
    radial-gradient(circle at 50% 0%, rgba(77,182,89,.16), rgba(77,182,89,0) 52%),
    linear-gradient(180deg, rgba(76,175,80,.08), rgba(76,175,80,.03));
}

#meGalleryOverlay .meGalleryAddIcon{
  width: 40px;
  height: 40px;
  font-size: 24px;
  border-color: rgba(76,175,80,.2);
  box-shadow: 0 6px 16px rgba(15,23,42,.06);
}

#meGalleryOverlay .meGalleryAddLabel{
  font-size: 12.5px;
  font-weight: 850;
}

#meGalleryOverlay .meGalleryHelp{
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.05);
  background: rgba(255,255,255,.72);
  color: #667085;
  line-height: 1.5;
}

/* Account page pass: calmer sections, tighter rows, and consistent icon language. */
#meAccountOverlay{
  background:
    radial-gradient(circle at top center, rgba(120, 214, 144, .10) 0%, rgba(120, 214, 144, 0) 28%),
    linear-gradient(180deg, #f8faf8 0%, #f6f7f9 18%, #f6f7f9 100%);
}

#meAccountOverlay .chatBar{
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(1.12) blur(10px);
  border-bottom: 1px solid rgba(17,24,39,.06);
}

#meAccountOverlay .chatName{
  color: #111827;
  font-weight: 780;
  letter-spacing: -0.01em;
}

#meAccountOverlay .chatMeta{
  color: #98a2b3;
  font-size: 12px;
  font-weight: 600;
}

#meAccountOverlay .meOverlayBody{
  padding-top: 6px;
}

#meAccountOverlay .settingsPage{
  --row-minh: 54px;
  --row-gap: 12px;
  --title: 15.5px;
  --sub: 12.5px;
  --meta: 12px;
  background: transparent;
  padding-top: 0;
  padding-bottom: 8px;
}

#meAccountOverlay .settingsSectionTitle{
  margin: 14px 15px 6px;
  font-size: 11px;
  letter-spacing: .16em;
  font-weight: 800;
  color: #98a2b3;
}

#meAccountOverlay .settingsCard{
  margin: 0 14px;
  border-radius: 16px;
  border: 1px solid rgba(17,24,39,.045);
  background: #fff;
  box-shadow: 0 8px 18px rgba(16,24,40,.032);
}

#meAccountOverlay .settingsRow{
  min-height: 54px;
  padding: 10px 14px;
  gap: 12px;
}

#meAccountOverlay .settingsRow:active{
  background: #f8fafc;
}

#meAccountOverlay .settingsIcon{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(180deg, #f7f9fb, #eef2f6);
  color: #667085;
  box-shadow: inset 0 0 0 1px rgba(17,24,39,.035);
}

#meAccountOverlay .settingsIcon svg{
  width: 22px;
  height: 22px;
  display: block;
  stroke: currentColor;
  stroke-width: 1.9;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#meAccountOverlay .settingsMainTitle{
  color: #111827;
  font-weight: 770;
  letter-spacing: -0.01em;
}

#meAccountOverlay .settingsMainSub{
  margin-top: 1px;
  color: #6b7280;
  font-weight: 600;
  line-height: 1.22;
}

#meAccountOverlay #accountMessageSoundValue{
  color: #98a2b3;
  font-weight: 700;
}

#meAccountOverlay #accountMessageSoundRow{
  min-height: 52px;
}

#meAccountOverlay #accountMessageSoundRow .settingsMainSub{
  font-size: 12px;
}

#meAccountOverlay .settingsRight{
  color: #98a2b3;
  gap: 10px;
}

#meAccountOverlay .settingsChevron{
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b0b8c4;
  font-size: 0;
}

#meAccountOverlay .settingsChevron svg{
  width: 20px;
  height: 20px;
  display: block;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#meAccountOverlay .settingsDivider{
  margin-left: 69px;
  border-bottom-color: rgba(17,24,39,.055);
}

#meAccountOverlay .settingsFooter{
  margin-top: 16px;
  color: #98a2b3;
  font-size: 11.5px;
  font-weight: 700;
}

/* Security page pass: clearer safe actions and a more deliberate danger zone. */
#meSecurityOverlay{
  background: #f6f7f9;
}

#meSecurityOverlay .chatBar{
  background: #fff;
  border-bottom: 1px solid rgba(17,24,39,.06);
}

#meSecurityOverlay .chatName{
  color: #111827;
  font-weight: 780;
  letter-spacing: -0.01em;
}

#meSecurityOverlay .meOverlayBody{
  padding-top: 12px;
}

#meSecurityOverlay .accountSection{
  margin: 0 14px 14px;
}

#meSecurityOverlay .accountSectionHeader{
  padding: 0 2px 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  color: #98a2b3;
}

#meSecurityOverlay .card{
  border-radius: 18px;
  border: 1px solid rgba(17,24,39,.045);
  background: #fff;
  box-shadow: 0 8px 20px rgba(16,24,40,.035);
}

#meSecurityOverlay .accountActions{
  margin-top: 0;
  gap: 10px;
  padding: 10px;
}

#meSecurityOverlay .accountActions .btn{
  min-height: 44px;
  border-radius: 14px;
  font-size: 14.5px;
  font-weight: 770;
  box-shadow: 0 1px 2px rgba(16,24,40,.03);
}

#meSecurityOverlay #accountLogoutBtn,
#meSecurityOverlay #accountLogoutAllBtn{
  background: linear-gradient(180deg, #fbfcfd, #f7f9fb);
  border: 1px solid #e6eaf0;
  color: #111827;
}

#meSecurityOverlay #accountLogoutBtn:active:not(:disabled),
#meSecurityOverlay #accountLogoutAllBtn:active:not(:disabled){
  background: #f3f6f8;
}

#meSecurityOverlay .accountHelper{
  margin-top: 0;
  padding: 0 14px 10px;
  font-size: 12px;
  line-height: 1.5;
  color: #667085;
}

#meSecurityOverlay .dangerZone{
  margin-top: 2px;
  padding-top: 0;
}

#meSecurityOverlay .dangerZone .accountSectionHeader{
  color: #b42318;
}

#meSecurityOverlay .dangerCard{
  border-color: rgba(176,0,32,.14);
  background: linear-gradient(180deg, #fffafa 0%, #fffefe 100%);
  box-shadow: 0 8px 18px rgba(176,0,32,.03);
}

#meSecurityOverlay .dangerCard .accountHelper:first-child{
  padding-top: 14px;
  padding-bottom: 2px;
  color: #8a2f22;
}

#meSecurityOverlay .dangerCard .accountActions{
  margin-top: 8px;
  padding-top: 0;
  padding-bottom: 8px;
}

#meSecurityOverlay #accountDeleteBtn{
  min-height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(176,0,32,.14);
  background: rgba(176,0,32,.05);
  color: #b42318;
  font-size: 14.5px;
  font-weight: 790;
  box-shadow: none;
}

#meSecurityOverlay #accountDeleteBtn:active:not(:disabled){
  background: rgba(176,0,32,.08);
}

#meSecurityOverlay #accountDeleteLearnMoreBtn{
  font-size: 12.5px;
  font-weight: 760;
  color: #7a8798;
}

/* Help & Support sheet pass: stronger action hierarchy, quieter legal row. */
#supportSheet{
  padding: 8px 12px 10px;
}

#supportSheet .sheetHeader{
  padding: 8px 6px 8px;
}

#supportSheet .sheetTitle{
  font-size: 15px;
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.01em;
}

#supportSheet .sheetPreview{
  margin-top: 4px;
  font-size: 13px;
  color: #667085;
}

#supportSheet .sheetBtn{
  margin: 5px 0;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 16px;
  background: #fff;
  border-color: #e4e7ec;
  box-shadow: 0 1px 2px rgba(16,24,40,.03);
  font-size: 15px;
  font-weight: 770;
  color: #111827;
  text-decoration: none;
  display: flex;
  align-items: center;
}

#supportSheet .sheetBtn:active{
  transform: scale(.99);
  background: #f8fafc;
}

#supportContactBtn,
#supportReportBtn{
  background: linear-gradient(180deg, #fbfcfd, #f6f9fb);
  border-color: #dde4eb;
  color: #111827;
}

#supportCopyEmailBtn{
  color: #475467;
  font-weight: 720;
  min-height: 46px;
  background: #fcfcfd;
}

#supportSheet .sheetHeader + .sheetBtn{
  margin-top: 2px;
}

#supportSheet .sheetHeader .sheetPreview{
  margin-bottom: 0;
}

#supportSheet [data-legal]{
  min-height: 38px;
  padding: 0 12px;
  border-radius: 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: #7b8794;
  background: #fff;
  box-shadow: none;
}

#supportSheet #supportCloseBtn{
  margin: 10px 0 0;
  min-height: 48px;
  border-radius: 16px;
  border-color: rgba(17,24,39,.10);
  background: #fff;
  font-size: 15px;
  font-weight: 800;
  box-shadow: none;
}

/* Privacy page pass: softer section rhythm and clearer value hierarchy. */
#mePrivacyOverlay{
  background:
    radial-gradient(circle at top center, rgba(120, 214, 144, .08) 0%, rgba(120, 214, 144, 0) 26%),
    linear-gradient(180deg, #f9fbf9 0%, #f6f7f9 18%, #f6f7f9 100%);
}

#mePrivacyOverlay .chatBar{
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(1.12) blur(10px);
  border-bottom: 1px solid rgba(17,24,39,.06);
}

#mePrivacyOverlay .chatName{
  color: #111827;
  font-weight: 780;
  letter-spacing: -0.01em;
}

#mePrivacyOverlay .chatMeta{
  color: #98a2b3;
  font-size: 12px;
  font-weight: 600;
}

#mePrivacyOverlay .meOverlayBody{
  padding-top: 10px;
}

#mePrivacyOverlay .meGroupLabel{
  margin: 14px 15px 7px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  color: #98a2b3;
}

#mePrivacyOverlay .settingsGroup{
  margin: 0 14px;
  border-radius: 18px;
  border: 1px solid rgba(17,24,39,.045);
  background: #fff;
  box-shadow: 0 10px 24px rgba(16,24,40,.032);
}

#mePrivacyOverlay #mePrivacyContent > .settingsGroup:first-of-type{
  border-color: rgba(108, 177, 119, .08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(249, 252, 249, .98) 100%);
}

#mePrivacyOverlay .settingsRow{
  min-height: 56px;
  padding: 11px 14px;
  gap: 13px;
}

#mePrivacyOverlay .settingsRow + .settingsRow::before{
  left: 70px;
  background: rgba(17,24,39,.055);
}

#mePrivacyOverlay .settingsRow:active{
  background: #f8fafc;
}

#mePrivacyOverlay .settingsIcon{
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: linear-gradient(180deg, #f7f9fb, #eef2f6);
  box-shadow: inset 0 0 0 1px rgba(17,24,39,.035);
}

#mePrivacyOverlay .settingsIcon svg{
  width: 22px;
  height: 22px;
  fill: #667085;
}

#mePrivacyOverlay .settingsTitle{
  color: #111827;
  font-size: 15px;
  font-weight: 770;
  letter-spacing: -0.01em;
}

#mePrivacyOverlay .settingsSub{
  margin-top: 2px;
  color: #6b7280;
  font-size: 12.5px;
  font-weight: 600;
}

#mePrivacyOverlay .settingsRight{
  gap: 10px;
}

#mePrivacyOverlay .settingsChevron{
  color: #b0b8c4;
  opacity: 1;
}

#mePrivacyOverlay .settingsChevron svg{
  width: 20px;
  height: 20px;
  fill: currentColor;
}

#mePrivacyOverlay #privacyBlockedCount{
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: #f2f4f7;
  color: #667085;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#mePrivacyOverlay #privacySafetyGroup{
  background: linear-gradient(180deg, #ffffff 0%, #fcfdfc 100%);
}

/* Privacy visibility sheet pass: clearer selected state and tighter hierarchy. */
#privacyVisibilitySheet{
  padding: 8px 12px 10px;
  background: #fff;
}

#privacyVisibilitySheet .privacySheetHandleWrap{
  padding: 10px 0 4px;
}

#privacyVisibilitySheet .privacySheetHandle{
  background: rgba(15,23,42,.16);
}

#privacyVisibilitySheet .sheetHeader{
  padding: 8px 6px 8px;
}

#privacyVisibilitySheet .sheetTitle{
  font-size: 15px;
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.01em;
}

#privacyVisibilitySheet .sheetPreview{
  margin-top: 4px;
  font-size: 12.5px;
  color: #98a2b3;
}

#privacyVisibilitySheet .privacyOptions{
  gap: 0;
  border-radius: 18px;
  border: 1px solid rgba(17,24,39,.06);
  background: #fff;
  box-shadow: 0 4px 14px rgba(16,24,40,.03);
  overflow: hidden;
}

#privacyVisibilitySheet .privacyOption{
  min-height: 54px;
  padding: 0 16px;
  transition: background-color 160ms ease, color 160ms ease;
}

#privacyVisibilitySheet .privacyOption + .privacyOption{
  border-top-color: rgba(17,24,39,.06);
}

#privacyVisibilitySheet .privacyOption:active{
  background: #f8fafc;
}

#privacyVisibilitySheet .privacyOptionLabel{
  font-size: 15px;
  font-weight: 760;
  color: #111827;
}

#privacyVisibilitySheet .privacyOptionCheck{
  width: 20px;
  height: 20px;
  fill: #1b950b;
  opacity: 0;
}

#privacyVisibilitySheet .privacyOption.isSelected{
  background: rgba(27,149,11,.06);
}

#privacyVisibilitySheet .privacyOption.isSelected .privacyOptionLabel{
  color: #167a09;
  font-weight: 800;
}

#privacyVisibilitySheet .privacyOption.isSelected .privacyOptionCheck{
  opacity: 1;
}

#privacyVisibilitySheet .privacyCancel{
  margin: 10px 0 0;
  min-height: 48px;
  border-radius: 16px;
  border-color: rgba(17,24,39,.10);
  background: #fff;
  font-size: 15px;
  font-weight: 800;
  color: #111827;
  box-shadow: none;
}

/* Notifications page pass: align with polished settings overlays and clarify disabled state. */
#meNotificationsOverlay{
  background: #f6f7f9;
}

#meNotificationsOverlay .chatBar{
  background: #fff;
  border-bottom: 1px solid rgba(17,24,39,.06);
}

#meNotificationsOverlay .chatName{
  color: #111827;
  font-weight: 780;
  letter-spacing: -0.01em;
}

#meNotificationsOverlay .chatMeta{
  color: #98a2b3;
  font-size: 12px;
  font-weight: 600;
}

#meNotificationsOverlay .meOverlayBody{
  padding-top: 12px;
}

#meNotificationsOverlay .accountSection{
  margin: 0 14px 14px;
}

#meNotificationsOverlay .accountSectionHeader{
  padding: 0 2px 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  color: #98a2b3;
}

#meNotificationsOverlay .card{
  border-radius: 18px;
  border: 1px solid rgba(17,24,39,.045);
  background: #fff;
  box-shadow: 0 8px 20px rgba(16,24,40,.035);
  overflow: hidden;
}

#meNotificationsOverlay .settingsRow{
  min-height: 58px;
  padding: 12px 14px;
  gap: 13px;
}

#meNotificationsOverlay .settingsRow + .settingsRow{
  border-top: 1px solid rgba(17,24,39,.055);
}

#meNotificationsOverlay .settingsRow:active{
  background: #f8fafc;
}

#meNotificationsOverlay .settingsIcon{
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: linear-gradient(180deg, #f7f9fb, #eef2f6);
  color: #667085;
  box-shadow: inset 0 0 0 1px rgba(17,24,39,.035);
}

#meNotificationsOverlay .settingsTitle{
  color: #111827;
  font-size: 15.5px;
  font-weight: 770;
  letter-spacing: -0.01em;
}

#meNotificationsOverlay .settingsSub{
  margin-top: 2px;
  color: #667085;
  font-size: 12.5px;
  font-weight: 600;
}

#meNotificationsOverlay #pushNotificationsRow[aria-disabled="true"]{
  background: linear-gradient(180deg, #fdfdfd, #fafbfc);
}

#meNotificationsOverlay #pushNotificationsRow[aria-disabled="true"] .settingsTitle{
  color: #344054;
}

#meNotificationsOverlay #pushNotificationsRow[aria-disabled="true"] .settingsSub{
  color: #98a2b3;
}

#meNotificationsOverlay #pushNotificationsRow[aria-disabled="true"] .waSwitch{
  opacity: .72;
}