:root {
  --bg-primary: #eef2f6;
  --bg-surface: #ffffff;
  --bg-elevated: #f8fafc;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --border-color: #e2e8f0;
  --input-border-color: #94a3b8;
  --input-border-focus: #db2777;

  

#story-template-list{display:flex;gap:.5rem;overflow-x:auto;overscroll-behavior-x:contain;padding:.3rem 0 .5rem;scroll-snap-type:x proximity}
#story-template-list[hidden]{display:none}
.story-template-choice{flex:0 0 5rem;max-width:5rem;padding:.2rem;border:2px solid transparent;border-radius:.7rem;color:var(--text-main);background:var(--bg-elevated);scroll-snap-align:start;cursor:pointer}
.story-template-choice[aria-pressed="true"]{border-color:var(--accent-color)}
.story-template-choice img{display:block;width:100%;height:5.5rem;object-fit:cover;border-radius:.45rem}
.story-template-choice span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.3rem .1rem;font-size:.65rem;font-weight:700}
.story-template-choice:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px}

/* Chat preferences share the member's chosen theme and accent. */
.chat-settings-button{display:grid;place-items:center;flex:none;width:2.25rem;height:2.25rem;margin-left:auto;border:1px solid var(--border-color);border-radius:.65rem;color:var(--text-main);background:var(--bg-surface);cursor:pointer}
.chat-community-heading .chat-settings-button svg{width:1.05rem;height:1.05rem;padding:0;border-radius:0;color:inherit;background:none;box-shadow:none}
.chat-settings-button:focus-visible,.chat-composer-settings button:focus-visible{outline:2px solid var(--accent-color);outline-offset:3px}
.chat-composer-settings{box-sizing:border-box;width:min(28rem,calc(100% - 2rem));max-height:calc(100dvh - 2rem);margin:auto;padding:0;overflow:auto;border:1px solid var(--border-color);border-radius:1rem;color:var(--text-main);background:var(--bg-surface);box-shadow:0 18px 65px #0004}
.chat-composer-settings::backdrop{background:#0008;backdrop-filter:blur(3px)}
.chat-composer-settings header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem;border-bottom:1px solid var(--border-color)}
.chat-composer-settings h2{margin:0;font-size:1rem;font-weight:800}
.chat-composer-settings header button{display:grid;place-items:center;flex:none;width:2.25rem;height:2.25rem;border:1px solid var(--border-color);border-radius:.6rem;background:var(--bg-elevated);color:var(--text-main);font-size:1.3rem;cursor:pointer}
.chat-composer-settings-body{padding:1rem}
.chat-composer-setting-row{display:flex;align-items:center;gap:1rem}
.chat-composer-setting-row>div{min-width:0;flex:1}
.chat-composer-setting-row h3{margin:0 0 .4rem;font-size:.9rem;font-weight:750}
.chat-composer-setting-row p,.chat-composer-settings-feedback{margin:0;color:var(--text-muted);font-size:.8rem;line-height:1.6}
.chat-composer-settings-feedback{margin-top:1rem;min-height:1.6em}
.chat-composer-settings .dm-settings-switch:disabled{opacity:.6;cursor:wait}
@media(pointer:coarse){.chat-settings-button,.chat-composer-settings header button{min-width:2.75rem;min-height:2.75rem}.chat-composer-settings .dm-settings-switch{min-height:2rem}}

/* Hệ màu HSL động cho phép kéo vuốt tùy biến mượt mà */
  --accent-h: 330;
  --accent-s: 86%;
  --accent-l: 62%;
  --accent-color: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
  --accent-hover: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - 7%));
  --accent-gradient: linear-gradient(135deg, hsl(var(--accent-h), var(--accent-s), var(--accent-l)), hsl(calc(var(--accent-h) + 18), var(--accent-s), calc(var(--accent-l) - 6%)));
  --accent-soft: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.15);
  --accent-ring: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.35);

  --ui-radius: 1rem;
  --ui-radius-sm: 0.7rem;
  --base-font-size: 15.5px;
  --container-max-width: 1280px;
  --cube-half: 205px;
  --app-visual-height: 100dvh;
  --app-visual-top: 0px;
  --app-keyboard-inset: 0px;
}

body[data-theme="light"] {
  --bg-primary: #eef2f6;
  --bg-surface: #ffffff;
  --bg-elevated: #f8fafc;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --border-color: #e2e8f0;
  --input-border-color: #94a3b8;
  --input-border-focus: #db2777;
}

body[data-theme="dark"] {
  --bg-primary: #090d16;
  --bg-surface: #111827;
  --bg-elevated: #1e293b;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --border-color: #1f2937;
  --input-border-color: #64748b;
  --input-border-focus: #f472b6;
}

body[data-theme="amoled"] {
  --bg-primary: #000000;
  --bg-surface: #0b0b0e;
  --bg-elevated: #15151a;
  --text-main: #ffffff;
  --text-muted: #a1a1aa;
  --border-color: #26262b;
  --input-border-color: #71717a;
  --input-border-focus: #fb7185;
}

body[data-theme="tinted-dark"] {
  --bg-primary: hsl(var(--accent-h), 35%, 7%);
  --bg-surface: hsl(var(--accent-h), 30%, 11%);
  --bg-elevated: hsl(var(--accent-h), 26%, 16%);
  --text-main: #ffffff;
  --text-muted: hsl(var(--accent-h), 20%, 72%);
  --border-color: hsl(var(--accent-h), 25%, 22%);
  --input-border-color: hsl(var(--accent-h), 45%, 48%);
  --input-border-focus: hsl(var(--accent-h), 85%, 72%);
}

body[data-theme="tinted-light"] {
  --bg-primary: hsl(var(--accent-h), 50%, 95%);
  --bg-surface: #ffffff;
  --bg-elevated: hsl(var(--accent-h), 45%, 97%);
  --text-main: hsl(var(--accent-h), 40%, 12%);
  --text-muted: hsl(var(--accent-h), 20%, 42%);
  --border-color: hsl(var(--accent-h), 35%, 86%);
  --input-border-color: hsl(var(--accent-h), 55%, 62%);
  --input-border-focus: hsl(var(--accent-h), 72%, 48%);
}

html, body {
  overscroll-behavior-y: none;
}

html.modal-scroll-locked,
body.modal-scroll-locked {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

body.modal-scroll-locked {
  touch-action: pan-y;
}

html {
  font-size: var(--base-font-size);
}

body {
  background-color: var(--bg-primary);
  color: var(--text-main);
  font-family: 'Plus Jakarta Sans', sans-serif;
  transition: background-color 0.2s ease, color 0.2s ease;
  overflow-x: hidden;
  line-height: 1.45;
}

body.feed-composer-open {
  overflow: hidden !important;
}

#feed-create-modal,
#feed-create-modal > .w-full,
#feed-create-modal .feed-theme-category-scroll,
#feed-create-modal .feed-theme-options,
#feed-create-modal .feed-media-file-list,
#feed-create-modal textarea {
  scrollbar-width: none;
}

#feed-create-modal::-webkit-scrollbar,
#feed-create-modal > .w-full::-webkit-scrollbar,
#feed-create-modal .feed-theme-category-scroll::-webkit-scrollbar,
#feed-create-modal .feed-theme-options::-webkit-scrollbar,
#feed-create-modal .feed-media-file-list::-webkit-scrollbar,
#feed-create-modal textarea::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

#feed-create-modal {
  overscroll-behavior: contain;
}

#feed-create-modal > .w-full {
  border-radius: var(--ui-radius);
  border-color: color-mix(in srgb, var(--accent-color) 20%, var(--border-color));
  box-shadow: 0 24px 70px -22px rgba(15, 23, 42, 0.42);
}

#feed-create-modal > .w-full > div:first-child {
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border-color);
}

#feed-create-modal > .w-full > div:first-child h2 {
  letter-spacing: -0.02em;
}

.feed-composer-subtitle {
  display: block;
  margin-top: 0.2rem;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 700;
}

#feed-composer-form {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-surface) 96%, var(--accent-soft)), var(--bg-surface));
}

#feed-composer-form > .flex.items-center.justify-between {
  padding: 0.65rem;
  border: 1px solid var(--border-color);
  border-radius: var(--ui-radius-sm);
  background: color-mix(in srgb, var(--bg-surface) 88%, var(--accent-soft));
}

#feed-post-tag {
  min-height: 2.25rem;
  max-width: 8.8rem;
  border-color: var(--border-color);
  color: var(--text-main);
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.05);
}

#feed-composer-stage {
  border-radius: var(--ui-radius-sm);
}

#feed-composer-stage textarea {
  min-height: 7.5rem;
  border-color: var(--border-color);
  border-radius: var(--ui-radius-sm);
  background: var(--bg-elevated);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

#feed-composer-stage textarea:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

#feed-bg-controls-wrap {
  padding: 0.7rem;
  border: 1px solid var(--border-color);
  border-radius: var(--ui-radius-sm);
  background: color-mix(in srgb, var(--bg-elevated) 76%, var(--accent-soft));
}

#feed-bg-picker-bar {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
}

.feed-theme-category-scroll {
  display: flex;
  gap: 0.45rem;
  width: 100%;
  overflow-x: auto;
  padding: 0.1rem 0.05rem 0.35rem;
  scroll-snap-type: x proximity;
}

.feed-theme-category-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  flex: 0 0 auto;
  min-height: 2.15rem;
  padding: 0.48rem 0.78rem;
  border: 1px solid var(--border-color);
  border-radius: 9999px;
  background: var(--bg-surface);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 850;
  scroll-snap-align: start;
  transition: color 0.16s ease, background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.feed-theme-category-tab:hover,
.feed-theme-category-tab:focus-visible {
  color: var(--accent-color);
  border-color: var(--accent-color);
  outline: none;
  transform: translateY(-1px);
}

.feed-theme-category-tab.is-active {
  color: #ffffff;
  border-color: var(--accent-color);
  background: var(--accent-gradient);
  box-shadow: 0 5px 14px -5px var(--accent-ring);
}

.feed-theme-options {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: 100%;
  max-height: 12.5rem;
  overflow-y: auto;
  padding: 0.05rem 0.05rem 0.1rem;
}

.feed-theme-option-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--border-color);
  border-radius: 0.8rem;
  background: var(--bg-surface);
  color: var(--text-main);
  text-align: left;
  transition: border-color 0.16s ease, background-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.feed-theme-option-row:hover,
.feed-theme-option-row:focus-visible {
  border-color: var(--accent-color);
  background: color-mix(in srgb, var(--bg-surface) 88%, var(--accent-soft));
  outline: none;
  transform: translateY(-1px);
}

.feed-theme-option-row.is-selected {
  border-color: var(--accent-color);
  background: color-mix(in srgb, var(--bg-surface) 82%, var(--accent-soft));
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.feed-theme-option-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 2.45rem;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0.65rem;
  color: #ffffff;
  font-size: 1.15rem;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.feed-theme-option-copy {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: 0.12rem;
}

.feed-theme-option-copy strong {
  overflow: hidden;
  color: var(--text-main);
  font-size: 0.76rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feed-theme-option-copy small {
  color: var(--text-muted);
  font-size: 0.66rem;
  font-weight: 700;
}

.feed-theme-option-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 1rem;
  font-weight: 900;
}

.feed-theme-option-row.is-selected .feed-theme-option-check {
  color: var(--accent-color);
}

.feed-media-preview-card {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.75rem;
  border-color: color-mix(in srgb, var(--accent-color) 36%, var(--border-color));
  background: color-mix(in srgb, var(--bg-surface) 92%, var(--accent-soft));
}

.feed-media-preview-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.feed-media-preview-heading > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.12rem;
}

.feed-media-preview-heading strong {
  color: var(--accent-color);
  font-size: 0.75rem;
  font-weight: 900;
}

.feed-media-preview-heading small {
  color: var(--text-muted);
  font-size: 0.66rem;
  font-weight: 700;
}

.feed-media-clear-button {
  flex: 0 0 auto;
  color: #e11d48;
  font-size: 0.68rem;
  font-weight: 900;
}

.feed-media-clear-button:hover,
.feed-media-clear-button:focus-visible {
  text-decoration: underline;
  outline: none;
}

.feed-media-file-list {
  display: flex;
  max-height: 10rem;
  flex-direction: column;
  gap: 0.4rem;
  overflow-y: auto;
}

.feed-media-file-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  padding: 0.4rem;
  border: 1px solid var(--border-color);
  border-radius: 0.7rem;
  background: var(--bg-surface);
}

.feed-media-file-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.45rem;
  height: 2.45rem;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 0.55rem;
  background: var(--bg-elevated);
  font-size: 1.15rem;
}

.feed-media-file-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feed-media-file-copy {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.12rem;
}

.feed-media-file-copy strong {
  overflow: hidden;
  color: var(--text-main);
  font-size: 0.72rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feed-media-file-copy small {
  color: var(--text-muted);
  font-size: 0.62rem;
  font-weight: 700;
}

.feed-media-file-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  flex: 0 0 auto;
  border-radius: 9999px;
  color: #e11d48;
  background: color-mix(in srgb, #e11d48 10%, transparent);
  font-size: 1.1rem;
  font-weight: 900;
}

.feed-media-file-remove:hover,
.feed-media-file-remove:focus-visible {
  background: color-mix(in srgb, #e11d48 18%, transparent);
  outline: none;
}

@media (max-width: 639px) {
  #feed-create-modal > .w-full {
    min-height: min(100%, 34rem);
    max-height: 100%;
    border-radius: 0;
  }

  #feed-composer-form > .flex.items-center.justify-between {
    align-items: flex-start;
  }

  #feed-post-tag {
    max-width: 7.5rem;
  }

  .feed-theme-options {
    max-height: 10.5rem;
  }
}

#app-shell,
#login-screen {
  filter: var(--theme-brightness-filter, none);
  transition: filter 0.2s ease;
}

#app-shell {
  filter: none;
}

#app-shell > header,
#app-shell > main {
  filter: var(--theme-brightness-filter, none);
  transition: filter 0.2s ease;
}

/* Header tự ẩn khi vuốt xuống và trượt lại tự nhiên khi vuốt lên. Khoảng
   trống trong flow vẫn được giữ lại để nội dung không bị giật khi header ẩn. */
#app-shell > header {
  position: sticky;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.2s ease;
}

#app-shell > header.header-scroll-hidden {
  transform: translate3d(0, -100%, 0);
}

@media (prefers-reduced-motion: reduce) {
  #app-shell > header {
    transition: none;
  }
}

#mobile-main-nav {
  display: none;
}

.site-footer {
  margin-top: 0;
  border-top: 1px solid var(--border-color);
  background: color-mix(in srgb, var(--bg-surface) 78%, var(--bg-primary));
  color: var(--text-muted);
  border-radius: 0 !important;
}

#app-shell,
#app-shell > main {
  border-radius: 0 !important;
}

.site-footer-inner {
  min-height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding-top: 0;
  padding-bottom: 0.8rem;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
}

.site-footer-brand {
  color: var(--text-main);
  font-weight: 800;
}

.site-footer-copy::before {
  content: '·';
  margin-right: 0.4rem;
  color: var(--accent-color);
}

@media (max-width: 639px) {
  .site-footer-inner {
    flex-wrap: wrap;
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
  }
}

@media (max-width: 767px) {
  body:has(#app-shell:not(.hidden)) #mobile-main-nav {
    display: block;
  }

  #mobile-main-nav {
    position: fixed;
    inset: auto 0 0;
    min-height: 3.5rem;
    padding-bottom: env(safe-area-inset-bottom);
    isolation: isolate;
  }
}

.app-container {
  max-width: var(--container-max-width);
}

@media (max-width: 639px) {
  html[data-keyboard-open],
  html[data-keyboard-open] body {
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  html[data-keyboard-open] #mobile-main-nav {
    display: none !important;
  }

  html[data-keyboard-open] #app-shell,
  html[data-keyboard-open] #app-shell > main,
  html[data-keyboard-open] main.app-container,
  html[data-keyboard-open] #tab-chat,
  html[data-keyboard-open] #tab-messages,
  html[data-keyboard-open] #tab-stranger,
  html[data-keyboard-open] #tab-chat > div:first-child,
  html[data-keyboard-open] #dm-conversation-panel,
  html[data-keyboard-open] #stranger-chat-view {
    min-height: 0 !important;
  }

  html[data-keyboard-open] #app-shell > main {
    padding-bottom: 0 !important;
  }

  html[data-keyboard-open] #tab-chat > div:first-child,
  html[data-keyboard-open] #dm-conversation-panel,
  html[data-keyboard-open] #stranger-chat-view {
    height: calc(var(--app-visual-height, 100dvh) - 3.8rem) !important;
    max-height: none !important;
  }

  html[data-keyboard-open] .chat-panel-composer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--app-keyboard-inset, 0px);
    z-index: 80;
    width: 100%;
    margin: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.14);
  }

  html[data-keyboard-open] #chat-messages-list,
  html[data-keyboard-open] #dm-messages-list,
  html[data-keyboard-open] #stranger-messages-list {
    padding-bottom: calc(var(--chat-composer-height, 4.25rem) + 0.75rem) !important;
  }


}

/* Phòng Chung: ô nhập nằm cố định trên danh sách, tin nhắn chạy từ cũ xuống mới */
.announcement-board {
  flex: 0 0 auto;
  padding: 0.7rem 0.7rem 0.15rem;
  background: color-mix(in srgb, var(--bg-primary) 72%, var(--bg-surface));
  border-bottom: 1px solid var(--border-color);
}

.announcement-board-heading,
.announcement-scope-header,
.announcement-item-meta,
.announcement-composer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

.announcement-board-heading {
  padding: 0 0.25rem 0.55rem;
}

.announcement-board-title {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.08rem;
}

.announcement-board-heading h2 {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  margin: 0.08rem 0 0;
  color: var(--text-main);
  font-size: 1.02rem;
  font-weight: 900;
}

.announcement-board-heading h2 svg {
  width: 1rem;
  height: 1rem;
  color: var(--accent-color);
  filter: drop-shadow(0 2px 5px color-mix(in srgb, var(--accent-color) 35%, transparent));
}

.announcement-board-kicker {
  color: var(--accent-color);
  font-size: 0.59rem;
  font-weight: 900;
  letter-spacing: 0.11em;
}

.announcement-board-note,
.announcement-empty {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 700;
}

.announcement-board-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  max-height: min(34vh, 19rem);
  overflow-y: auto;
  padding: 0 0 0.35rem;
  scrollbar-width: thin;
}

.chat-community-heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.85rem;
  margin-top: 0.55rem;
  padding: 0.62rem 0.9rem 0.58rem;
  border: 1px solid var(--border-color);
  border-bottom: 0;
  border-radius: 0.82rem 0.82rem 0 0;
  color: var(--text-main);
  background: linear-gradient(115deg, color-mix(in srgb, var(--accent-soft) 72%, var(--bg-surface)), var(--bg-elevated));
  box-shadow: 0 5px 16px rgba(15, 23, 42, 0.08);
  font-size: 0.84rem;
  font-weight: 900;
  text-transform: none;
}

.chat-community-heading svg {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  padding: 0.16rem;
  box-sizing: content-box;
  border-radius: 0.48rem;
  color: #fff;
  background: var(--accent-gradient);
  box-shadow: 0 3px 9px color-mix(in srgb, var(--accent-color) 28%, transparent);
}

.chat-community-heading span {
  letter-spacing: 0.01em;
}

.announcement-scope-header-simple {
  display: flex;
  justify-content: flex-end;
  min-height: 1.8rem;
  padding: 0.28rem 0.58rem 0;
  background: transparent;
  border-bottom: 0;
}

.announcement-scope-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-top: 3px solid var(--accent-color);
  border-radius: 0.75rem;
  background: var(--bg-surface);
  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.07);
}

.announcement-scope-manager { border-top-color: #f59e0b; }
.announcement-scope-member { border-top-color: #0ea5e9; }

.announcement-scope-header {
  padding: 0.48rem 0.58rem;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-color);
}

.announcement-scope-title {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 0.35rem;
  color: var(--text-main);
  font-size: 0.72rem;
  font-weight: 900;
}

.announcement-scope-title svg {
  width: 0.92rem;
  height: 0.92rem;
  flex: 0 0 auto;
  color: var(--accent-color);
}

.announcement-scope-manager .announcement-scope-title svg { color: #f59e0b; }
.announcement-scope-member .announcement-scope-title svg { color: #0ea5e9; }

.announcement-add-button,
.announcement-edit-button,
.announcement-composer-submit button {
  border: 0;
  color: var(--accent-color);
  background: transparent;
  font-size: 0.68rem;
  font-weight: 900;
  cursor: pointer;
}

.announcement-add-button:hover,
.announcement-edit-button:hover,
.announcement-composer-submit button:hover,
.announcement-profile-link:hover { text-decoration: underline; }

.announcement-scope-list {
  display: flex;
  flex-direction: column;
}

.announcement-item {
  padding: 0.55rem 0.62rem 0.48rem;
  border-bottom: 1px solid var(--border-color);
}

.announcement-item:last-child { border-bottom: 0; }

.announcement-item-copy {
  color: var(--text-main);
  font-size: 0.77rem;
  font-weight: 650;
  line-height: 1.48;
  overflow-wrap: anywhere;
}

.announcement-item-media > div { max-width: 100%; }
.announcement-item-media img,
.announcement-item-media video { max-height: 8rem; }

.announcement-item-meta {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 0.38rem;
  color: var(--text-muted);
  font-size: 0.61rem;
  font-weight: 700;
}

.announcement-profile-link {
  padding: 0;
  border: 0;
  color: var(--accent-color);
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.announcement-composer {
  display: flex;
  flex-direction: column;
  gap: 0.48rem;
  padding: 0.58rem;
  border-top: 1px solid var(--border-color);
  background: color-mix(in srgb, var(--bg-elevated) 78%, var(--accent-soft));
}

.announcement-composer textarea {
  width: 100%;
  min-height: 4.2rem;
  resize: vertical;
  padding: 0.58rem 0.65rem;
  border: 1px solid var(--input-border-color);
  border-radius: 0.62rem;
  outline: none;
  color: var(--text-main);
  background: var(--bg-surface);
  font-size: 0.75rem;
  font-weight: 650;
}

.announcement-composer textarea:focus { border-color: var(--input-border-focus); box-shadow: 0 0 0 3px var(--accent-soft); }

.announcement-composer-tools,
.announcement-composer-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.announcement-composer-tools button {
  display: inline-flex;
  width: 1.9rem;
  height: 1.9rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  border-radius: 9999px;
  color: var(--text-muted);
  background: var(--bg-surface);
  cursor: pointer;
}

.announcement-composer-tools button:hover { color: var(--accent-color); border-color: var(--accent-color); }
.announcement-composer-tools svg { width: 0.9rem; height: 0.9rem; }
.announcement-composer-submit button:last-child { padding: 0.38rem 0.7rem; border-radius: 0.55rem; color: #fff; background: var(--accent-gradient); }

@media (max-width: 780px) {
  .announcement-board { padding-inline: 0.5rem; }
  .announcement-board-grid { grid-template-columns: 1fr; max-height: 31vh; }
  .announcement-scope-card { border-radius: 0.62rem; }
}

/* Thông báo gọn: một khung duy nhất, không lặp tiêu đề theo vai trò. */
#home-announcements.announcement-board {
  padding: 0.45rem 0.55rem 0.35rem;
  border-bottom: 0;
  background: transparent;
}

#home-announcements .announcement-board-grid {
  display: block;
  max-height: none;
  overflow: visible;
  padding: 0;
}

#home-announcements .announcement-board-frame {
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 0.72rem;
  background: var(--bg-surface);
  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.06);
}

#home-announcements .announcement-scope-list {
  display: flex;
  flex-direction: column;
}

#home-announcements .announcement-scope-form {
  border-bottom: 1px solid var(--border-color);
}

#home-announcements .announcement-scope-form:last-child {
  border-bottom: 0;
}

#home-announcements .announcement-item {
  padding: 0.58rem 0.7rem 0.52rem;
  border-bottom: 0;
}

#home-announcements .announcement-item:last-child { border-bottom: 0; }

#home-announcements .announcement-item-copy {
  line-height: 1.5;
}

#home-announcements .announcement-scope-label,
#home-announcements .announcement-edit-button {
  font-size: 0.66rem;
  font-weight: 800;
}

#home-announcements .announcement-scope-label {
  margin-left: 0.24rem;
  color: var(--text-muted);
  white-space: nowrap;
}

#home-announcements .announcement-edit-button {
  display: inline;
  margin-left: 0.35rem;
  padding: 0;
  border: 0;
  color: var(--accent-color);
  background: transparent;
  cursor: pointer;
  vertical-align: baseline;
}

#home-announcements .announcement-edit-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

#home-announcements .announcement-empty-copy {
  color: var(--text-muted);
}

#home-announcements .announcement-empty {
  margin: 0;
  padding: 0.72rem;
  text-align: center;
}

#public-chat-composer-form {
  order: 1;
  flex: 0 0 auto;
  position: relative;
  z-index: 4;
}

#chat-messages-list {
  order: 2;
}

/* Tin nhắn riêng: ô nhập luôn ở đầu cuộc trò chuyện, danh sách cuộn bên dưới. */
#dm-conversation-panel > #dm-composer-form {
  order: 1;
  flex: 0 0 auto;
  position: relative;
  z-index: 4;
  margin-top: 0;
  margin-bottom: 0.65rem;
}

#dm-conversation-panel > #dm-messages-list {
  order: 2;
}

/* Cuộc trò chuyện mới vẫn cần một vùng nền đầy đủ khi chưa có tin nhắn. */
#dm-conversation-panel:has(#dm-messages-list > [data-dm-empty]) {
  min-height: max(30rem, calc(100dvh - 4.25rem));
}

#dm-conversation-panel:has(#dm-messages-list > [data-dm-empty]) > #dm-messages-list {
  flex: 1 1 auto !important;
  min-height: clamp(18rem, calc(100dvh - 12rem), 36rem) !important;
  background-color: var(--bg-surface);
}

@media (max-width: 767px) {
  #dm-conversation-panel:has(#dm-messages-list > [data-dm-empty]) {
    min-height: calc(100dvh - 4.5rem);
  }

  #dm-conversation-panel:has(#dm-messages-list > [data-dm-empty]) > #dm-messages-list {
    min-height: calc(100dvh - 12rem) !important;
  }
}

@media (max-width: 639px) {
  html[data-keyboard-open] #public-chat-composer-form {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-left: 0;
    border-right: 0;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
  }

  html[data-keyboard-open] #chat-messages-list {
    padding-bottom: 0.75rem !important;
  }

  html[data-keyboard-open] #dm-conversation-panel > #dm-composer-form {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-left: 0;
    border-right: 0;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
  }
}

/* ==========================================
   FULL BỀ NGANG ĐIỆN THOẠI (KHÔNG KHOẢNG CÁCH 2 BÊN)
   ========================================== */
@media (max-width: 639px) {
  .app-container {
    max-width: 100% !important;
    width: 100% !important;
  }

  #app-shell > header,
  #app-shell > main,
  #mobile-main-nav {
    border-radius: 0 !important;
  }

  #app-shell > header,
  #app-shell > main {
    border-left: 0 !important;
    border-right: 0 !important;
  }

  #mobile-main-nav {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  #post-comments-modal .surface-card,
  #viewer-sidebar-panel {
    border-radius: 0 !important;
  }

  main.app-container > section > .surface-card {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
  }
  /* Giữ bo góc cho các modal nổi ở giữa màn hình */
  #login-screen .surface-card,
  #account-switcher-modal .surface-card,
  #create-story-modal .surface-card,
  #media-popup-modal .surface-card,
  #notification-settings-modal .surface-card {
    border-radius: 1rem !important;
    margin: 0 0.5rem;
  }
}

.dm-notification-settings-button {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.65rem;
  color: var(--text-muted);
  background-color: var(--bg-surface);
  transition: color 0.16s ease, background-color 0.16s ease, transform 0.16s ease;
}

.dm-notification-settings-button:hover {
  color: var(--accent-color);
  background-color: var(--accent-soft);
  transform: translateY(-1px);
}

.dm-notification-settings-button.is-enabled {
  color: var(--accent-color);
  background-color: var(--accent-soft);
}

.dm-notification-notice {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--accent-ring);
  border-radius: 0.75rem;
  color: var(--text-main);
  background: linear-gradient(110deg, var(--accent-soft), transparent);
  text-align: left;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.dm-notification-notice:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

.notification-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 0.9rem;
  background-color: var(--bg-elevated);
  cursor: pointer;
  transition: border-color 0.16s ease, opacity 0.16s ease;
}

.notification-setting-row:hover {
  border-color: var(--accent-ring);
}

.notification-switch {
  width: 2.75rem;
  height: 1.55rem;
  appearance: none;
  flex-shrink: 0;
  border: 1px solid var(--border-color);
  border-radius: 9999px;
  background: var(--bg-primary);
  position: relative;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease;
}

.notification-switch::after {
  content: '';
  width: 1.05rem;
  height: 1.05rem;
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform 0.16s ease, background-color 0.16s ease;
}

.notification-switch:checked {
  border-color: var(--accent-color);
  background: var(--accent-soft);
}

.notification-switch:checked::after {
  background: var(--accent-color);
  transform: translateX(1.15rem);
}

.notification-switch:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.header-notification-button {
  position: relative;
  display: inline-flex;
  width: 2.35rem;
  height: 2.35rem;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 9999px;
  transition: color 0.16s ease, background-color 0.16s ease, transform 0.16s ease;
}

.header-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0.2rem;
}

@media (max-width: 639px) {
  .header-actions {
    gap: 0.35rem;
  }
}

.header-notification-button:hover,
.header-notification-button:focus-visible {
  color: var(--accent-color);
  background: var(--accent-soft);
  transform: translateY(-1px);
}

.header-notification-badge {
  position: absolute;
  top: -0.28rem;
  right: -0.28rem;
  min-width: 1.05rem;
  height: 1.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.22rem;
  color: #fff;
  background: #ef4444;
  border: 2px solid var(--bg-surface);
  border-radius: 9999px;
  font-size: 0.55rem;
  font-weight: 900;
  line-height: 1;
}

.notification-center-popover {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  z-index: 60;
  width: min(24rem, calc(100vw - 1.5rem));
  overflow: hidden;
  color: var(--text-main);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 1rem;
  box-shadow: 0 1.5rem 3rem rgba(15, 23, 42, 0.2);
  animation: popIn 0.16s ease-out forwards;
}

.notification-center-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-elevated);
}

.notification-center-header div {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.notification-center-header strong {
  font-size: 1rem;
  font-weight: 900;
}

.notification-center-header span {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.notification-center-mark-read,
.notification-center-more {
  color: var(--accent-color);
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.notification-center-settings {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  color: var(--text-muted);
  border-radius: 50%;
}

.notification-center-settings:hover,
.notification-center-settings:focus-visible {
  color: var(--accent-color);
  background: var(--accent-soft);
}

.notification-center-mark-read:hover,
.notification-center-more:hover {
  text-decoration: underline;
}

.notification-center-list {
  max-height: min(28rem, calc(100vh - 10rem));
  overflow-y: auto;
  padding: 0.35rem;
}

.notification-center-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.62rem;
  color: var(--text-main);
  border-radius: 0.75rem;
  text-align: left;
  transition: background-color 0.16s ease;
}

.notification-center-item:hover,
.notification-center-item:focus-visible {
  background: var(--bg-elevated);
}

.notification-center-item.is-unread {
  background: var(--accent-soft);
}

.notification-center-avatar {
  width: 2.35rem;
  height: 2.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  box-shadow: 0 0.25rem 0.8rem rgba(15, 23, 42, 0.13);
  font-size: 1.15rem;
}

.notification-center-copy {
  min-width: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.18rem;
}

.notification-center-message {
  overflow: hidden;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.35;
  text-overflow: ellipsis;
}

.notification-center-time {
  color: var(--text-muted);
  font-size: 0.7rem;
}

.notification-center-type-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.notification-center-empty {
  min-height: 7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.45rem;
  color: var(--text-muted);
  font-size: 0.8rem;
  text-align: center;
}

.notification-center-empty svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--accent-color);
}

.notification-center-footer {
  min-height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem;
  border-top: 1px solid var(--border-color);
}

.notification-inapp-settings-panel {
  padding: 0.75rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 0.9rem;
}

.notification-setting-row-compact {
  padding: 0.55rem 0.65rem;
  border-radius: 0.7rem;
}

@media (max-width: 480px) {
  .notification-center-popover {
    position: fixed;
    top: 4.2rem;
    right: 0.75rem;
    left: 0.75rem;
    width: auto;
  }
}

/* ==========================================
   8 BỘ FONT CHỮ NGHỆ THUẬT CHO STORY & BẢNG TIN
   ========================================== */
.story-font-jakarta {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  letter-spacing: -0.01em;
}
.story-font-dancing {
  font-family: 'Dancing Script', cursive !important;
  letter-spacing: 0.01em;
  line-height: 1.32 !important;
}
.story-font-playfair {
  font-family: 'Playfair Display', serif !important;
  font-style: italic;
  letter-spacing: 0.01em;
}
.story-font-pacifico {
  font-family: 'Pacifico', cursive !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em;
  line-height: 1.38 !important;
}
.story-font-oswald {
  font-family: 'Oswald', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.story-font-patrick {
  font-family: 'Patrick Hand', cursive !important;
  letter-spacing: 0.02em;
  line-height: 1.35 !important;
}
.story-font-mono {
  font-family: 'Space Mono', monospace !important;
  letter-spacing: -0.02em;
}
.story-font-bevietnam {
  font-family: 'Be Vietnam Pro', sans-serif !important;
  letter-spacing: -0.015em;
}

/* ==========================================
   6 KIỂU HIỆU ỨNG CHỮ (TEXT STYLES) TRÊN STORY
   ========================================== */
.story-tstyle-shadow {
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.85), 0 1px 3px rgba(0, 0, 0, 0.95);
}

.story-tstyle-glass {
  background: rgba(15, 23, 42, 0.58);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 0.55rem 1rem;
  border-radius: 1rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
}

.story-tstyle-solid-box {
  background: rgba(0, 0, 0, 0.86);
  padding: 0.5rem 0.95rem;
  border-radius: 0.75rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
}

.story-tstyle-neon {
  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.9),
    0 0 14px currentColor,
    0 0 28px currentColor,
    0 2px 6px rgba(0, 0, 0, 0.85);
}

.story-tstyle-outline {
  -webkit-text-stroke: 1.2px rgba(0, 0, 0, 0.9);
  text-shadow:
    2px 2px 0 rgba(0, 0, 0, 0.88),
    -1px -1px 0 rgba(0, 0, 0, 0.88),
    1px -1px 0 rgba(0, 0, 0, 0.88),
    -1px 1px 0 rgba(0, 0, 0, 0.88);
}

.story-tstyle-gradient {
  background: linear-gradient(90deg, #fff176 0%, #ff80ab 48%, #80d8ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.85));
}

/* ==========================================
   HIỆU ỨNG NỀN DÀNH CHO STORY & BÀI VIẾT BẢNG TIN
   ========================================== */
.story-bg-aurora,
.feed-bg-aurora {
  background: linear-gradient(135deg, #4f46e5 0%, #ec4899 52%, #f59e0b 100%);
}

.story-bg-sunset,
.feed-bg-sunset {
  background: linear-gradient(135deg, #be123c 0%, #ea580c 52%, #facc15 100%);
}

.story-bg-starlight,
.feed-bg-starlight {
  background:
    radial-gradient(circle at 20% 25%, rgba(255, 255, 255, 0.22) 1px, transparent 1.5px),
    radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.18) 1.5px, transparent 2px),
    radial-gradient(circle at 45% 75%, rgba(255, 255, 255, 0.2) 1px, transparent 1.5px),
    linear-gradient(145deg, #090d16 0%, #1e1b4b 50%, #4c1d95 100%);
  background-size: 90px 90px, 120px 120px, 100px 100px, 100% 100%;
}

.story-bg-cyber,
.feed-bg-cyber {
  background:
    radial-gradient(circle at 85% 15%, rgba(6, 182, 212, 0.45), transparent 45%),
    radial-gradient(circle at 15% 85%, rgba(236, 72, 153, 0.45), transparent 45%),
    linear-gradient(135deg, #0f172a 0%, #3b0764 55%, #083344 100%);
}

.story-bg-ocean,
.feed-bg-ocean {
  background: linear-gradient(135deg, #0369a1 0%, #0d9488 55%, #10b981 100%);
}

.story-bg-sakura,
.feed-bg-sakura {
  background: linear-gradient(135deg, #db2777 0%, #9333ea 55%, #4f46e5 100%);
}

.story-bg-emerald,
.feed-bg-emerald {
  background: linear-gradient(135deg, #064e3b 0%, #059669 55%, #34d399 100%);
}

.story-bg-royal,
.feed-bg-royal {
  background:
    radial-gradient(circle at 50% 0%, rgba(251, 191, 36, 0.35), transparent 55%),
    linear-gradient(145deg, #1c1917 0%, #44403c 48%, #78350f 100%);
}

.story-bg-love,
.feed-bg-love {
  background:
    radial-gradient(circle at 25% 20%, rgba(255, 255, 255, 0.16), transparent 35%),
    linear-gradient(135deg, #e11d48 0%, #db2777 50%, #7e22ce 100%);
}

/* Lớp hạt lấp lánh nhẹ trên nền bài viết / Story */
.story-ambient-sparkles {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.28) 1px, transparent 1.5px),
    radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1.5px);
  background-size: 54px 54px, 78px 78px;
  background-position: 0 0, 24px 28px;
  opacity: 0.45;
  pointer-events: none;
}

/* ==========================================
   THẺ BÀI VIẾT HIỆU ỨNG NỀN TRÊN BẢNG TIN (FEED BACKGROUND POST)
   ========================================== */
.feed-bg-post-card {
  position: relative;
  width: 100%;
  min-height: 255px;
  padding: 2.2rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  user-select: text;
}

@media (min-width: 640px) {
  .feed-bg-post-card {
    min-height: 285px;
    padding: 2.6rem 2.2rem;
  }
}

.feed-bg-post-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 25%, rgba(255, 255, 255, 0.12), transparent 65%);
  pointer-events: none;
}

.feed-bg-post-text {
  position: relative;
  z-index: 5;
  color: #ffffff;
  font-weight: 800;
  line-height: 1.42;
  word-break: break-word;
  white-space: pre-wrap;
  max-width: 94%;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.45);
}

/* Khi đang gõ bài viết có chọn Hiệu ứng nền trong Composer */
.feed-composer-stage.has-bg-effect {
  position: relative;
  border-radius: 0.95rem;
  min-height: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.45);
}

.feed-composer-stage.has-bg-effect textarea {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  text-align: center !important;
  font-weight: 800 !important;
  font-size: 1.28rem !important;
  line-height: 1.4 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
  box-shadow: none !important;
}

.feed-composer-stage.has-bg-effect textarea::placeholder {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* Nút tròn chọn Hiệu Ứng Nền (Swatch) */
.bg-preset-swatch {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 0.6rem;
  flex-shrink: 0;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.22);
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  color: #ffffff;
}

.bg-preset-swatch:hover {
  transform: translateY(-2px) scale(1.05);
}

.bg-preset-swatch.active {
  border-color: #ffffff;
  box-shadow: 0 0 0 2.5px var(--accent-color);
  transform: scale(1.08);
}

/* ==========================================
   ICON GIỚI TÍNH ĐẦU NICK (KHÔNG GHI CHỮ)
   ========================================== */
.gender-prefix-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.92em;
  font-weight: 900;
  line-height: 1;
  margin-right: 0.22rem;
  user-select: none;
  flex-shrink: 0;
}
.gender-prefix-male {
  color: #38bdf8;
}
.gender-prefix-female {
  color: #f472b6;
}
.gender-prefix-other {
  color: #c084fc;
}

/* ==========================================
   ALBUM CARD KIỂU FACEBOOK
   ========================================== */
.fb-album-card {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--ui-radius-sm);
  overflow: hidden;
  background-color: #000;
  border: 1px solid var(--border-color);
  cursor: pointer;
}
.fb-album-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease, filter 0.25s ease;
}
.fb-album-card:hover img {
  transform: scale(1.06);
  filter: brightness(0.9);
}

/* Thao tác trong danh sách bạn bè dùng icon, giữ vùng bấm đủ rộng. */
.friend-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: var(--ui-radius-sm);
  line-height: 1;
}

.friend-action-btn svg {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

.friend-action-btn:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

#friends-content-area .inline-flex {
  display: flex;
}

#friends-content-area .inline-flex > .member-nickname,
#friends-content-area .inline-flex > span:last-child:not(.member-badge) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-wall-stage {
  min-height: 14rem;
  overflow: hidden;
  background-position: center;
  background-size: cover;
}

.profile-wall-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.12), transparent 45%, rgba(15, 23, 42, 0.34));
}

/* Hồ sơ người khác có thể có nhiều nút; giữ tên và giới thiệu không bị bóp trên desktop. */
@media (min-width: 640px) {
  .profile-header-identity {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: .8rem !important;
  }

  .profile-header-identity > :first-child {
    width: 100%;
    min-width: 0;
  }

  .profile-header-identity > :first-child > :last-child,
  #profile-display-name,
  #profile-display-bio {
    min-width: 0;
  }

  #profile-display-name,
  #profile-display-bio {
    overflow-wrap: anywhere;
  }

  .profile-header-actions {
    width: 100%;
    flex-shrink: 1 !important;
    justify-content: flex-end !important;
  }

  .profile-header-actions > button {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

.profile-wall-media-layer {
  z-index: 0;
  background-position: center;
  background-size: cover;
}

.profile-wall-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profile-wall-nav {
  position: absolute;
  z-index: 5;
  top: 50%;
  width: 2.6rem;
  height: 2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 9999px;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(8px);
  font-size: 2rem;
  line-height: 1;
  transition: transform 0.16s ease, background-color 0.16s ease;
}

.profile-wall-nav:hover,
.profile-wall-nav:focus-visible {
  background: var(--accent-color);
  transform: translateY(-50%) scale(1.05);
  outline: none;
}

.profile-wall-nav-prev { left: 0.85rem; }
.profile-wall-nav-next { right: 0.85rem; }

.profile-wall-counter {
  position: absolute;
  z-index: 6;
  bottom: 0.85rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.28rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 9999px;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.58);
  backdrop-filter: blur(8px);
  font-size: 0.7rem;
  font-weight: 900;
}

.profile-avatar-control {
  position: relative;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  cursor: default;
}

.profile-avatar-control.cursor-pointer {
  cursor: pointer;
}

.profile-avatar-control.cursor-pointer:hover {
  transform: scale(1.04);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.25);
}

.profile-media-action-dialog,
.profile-avatar-crop-dialog {
  width: min(92vw, 24rem);
  max-width: 24rem;
  padding: 0;
  color: var(--text-main);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--ui-radius);
  box-shadow: 0 24px 70px -18px rgba(15, 23, 42, 0.5);
}

.profile-media-action-dialog::backdrop,
.profile-avatar-crop-dialog::backdrop {
  background: rgba(15, 23, 42, 0.58);
  backdrop-filter: blur(8px);
}

.profile-media-action-form,
.profile-avatar-crop-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1rem;
}

.profile-media-action-form header,
.profile-avatar-crop-form header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--border-color);
}

.profile-media-action-form h3,
.profile-avatar-crop-form h3 {
  flex: 1;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 900;
}

.profile-media-action-form p,
.profile-avatar-crop-form p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.75rem;
  line-height: 1.5;
}

.profile-media-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  color: var(--accent-color);
  background: var(--accent-soft);
}

.profile-media-action-close {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  color: var(--text-muted);
  background: var(--bg-elevated);
  font-size: 1.1rem;
  font-weight: 900;
}

.profile-media-action-form menu,
.profile-avatar-crop-form menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  margin: 0;
  padding: 0.75rem 0 0;
  border-top: 1px solid var(--border-color);
}

.profile-media-action-primary,
.profile-media-action-secondary,
.profile-media-action-danger {
  min-height: 2.3rem;
  padding: 0.55rem 0.8rem;
  border-radius: var(--ui-radius-sm);
  font-size: 0.73rem;
  font-weight: 900;
}

.profile-media-action-primary { color: #ffffff; background: var(--accent-color); }
.profile-media-action-secondary { color: var(--text-main); background: var(--bg-elevated); }
.profile-media-action-danger { color: #ffffff; background: #e11d48; }

.profile-admin-options-dialog {
  width: min(94vw, 28rem);
  max-width: 28rem;
}

.profile-admin-options-menu {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: stretch !important;
}

.profile-admin-options-menu button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.profile-admin-protected-note {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.55rem 0.7rem;
  border-radius: var(--ui-radius-sm);
  color: var(--text-muted);
  background: var(--bg-elevated);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.4;
}

.profile-admin-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.profile-admin-field small {
  font-weight: 700;
}

.profile-admin-field input,
.profile-admin-field textarea,
.profile-admin-field select {
  width: 100%;
  min-height: 2.35rem;
  padding: 0.55rem 0.7rem;
  color: var(--text-main);
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--ui-radius-sm);
  outline: none;
  font: inherit;
  font-weight: 700;
  resize: vertical;
}

.profile-admin-field input:focus,
.profile-admin-field textarea:focus,
.profile-admin-field select:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.profile-admin-history-list {
  display: flex;
  max-height: 18rem;
  flex-direction: column;
  gap: 0.5rem;
  overflow: auto;
}

.profile-admin-history-item,
.profile-admin-history-empty {
  padding: 0.7rem;
  border: 1px solid var(--border-color);
  border-radius: var(--ui-radius-sm);
  background: var(--bg-elevated);
}

.profile-admin-history-item > div {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.profile-admin-history-item strong {
  color: var(--text-main);
  font-size: 0.78rem;
}

.profile-admin-history-item span,
.profile-admin-history-item small,
.profile-admin-history-empty {
  color: var(--text-muted);
  font-size: 0.7rem;
  line-height: 1.45;
}

/* The attachment chooser is a child overlay of the feed composer. */
body.feed-composer-open #media-popup-modal {
  z-index: 210 !important;
}

/* Popup dài luôn nằm trong vùng nhìn thấy của điện thoại, kể cả có tai thỏ/thanh điều hướng. */
:is(#create-story-modal, #media-popup-modal, #emoji-popup-modal, #post-comments-modal, #reaction-members-modal, #account-switcher-modal, #notification-settings-modal, #password-setup-modal, #feed-create-modal, #login-screen) {
  box-sizing: border-box;
  padding-top: max(0.75rem, env(safe-area-inset-top));
  padding-right: max(0.75rem, env(safe-area-inset-right));
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  padding-left: max(0.75rem, env(safe-area-inset-left));
  overscroll-behavior: contain;
}

:is(#create-story-modal, #media-popup-modal, #emoji-popup-modal, #reaction-members-modal, #account-switcher-modal, #notification-settings-modal, #password-setup-modal, #feed-create-modal, #login-screen) > .surface-card,
#feed-create-modal > .w-full {
  max-height: calc(100dvh - max(0.75rem, env(safe-area-inset-top)) - max(0.75rem, env(safe-area-inset-bottom))) !important;
  margin-top: 0;
  margin-bottom: 0;
  overscroll-behavior: contain;
}

#create-story-modal > .surface-card,
#media-popup-modal > .surface-card,
#account-switcher-modal > .surface-card,
#notification-settings-modal > .surface-card,
#password-setup-modal > .surface-card,
#login-screen > .surface-card,
#feed-create-modal > .w-full {
  overflow-y: auto;
  scrollbar-gutter: stable;
}

#emoji-popup-modal > .surface-card {
  height: min(430px, calc(100dvh - max(0.75rem, env(safe-area-inset-top)) - max(0.75rem, env(safe-area-inset-bottom)))) !important;
}

#post-comments-modal > .surface-card {
  height: min(100%, calc(100dvh - max(0.75rem, env(safe-area-inset-top)) - max(0.75rem, env(safe-area-inset-bottom))));
}

#reaction-members-modal .reaction-members-dialog {
  width: min(100%, 26rem);
  max-height: calc(100dvh - max(0.75rem, env(safe-area-inset-top)) - max(0.75rem, env(safe-area-inset-bottom)));
}

#reaction-members-modal {
  z-index: 96 !important;
}

html[data-keyboard-open] #reaction-members-modal {
  padding-bottom: calc(max(0.75rem, env(safe-area-inset-bottom)) + var(--app-keyboard-inset, 0px));
}

:is(#create-story-modal, #media-popup-modal, #emoji-popup-modal, #account-switcher-modal, #notification-settings-modal, #password-setup-modal, #feed-create-modal) .border-b {
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--bg-surface);
}

#post-comments-modal > .surface-card > .border-b,
#reaction-members-modal .reaction-members-dialog > .border-b {
  position: sticky;
  top: 0;
  z-index: 6;
}

.dm-action-dialog,
.voice-call-dialog,
.profile-media-action-dialog,
.profile-avatar-crop-dialog {
  max-height: calc(100dvh - max(0.75rem, env(safe-area-inset-top)) - max(0.75rem, env(safe-area-inset-bottom)));
}

.dm-action-form,
.profile-media-action-form,
.profile-avatar-crop-form {
  max-height: inherit;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.dm-action-header,
.profile-media-action-form > header,
.profile-avatar-crop-form > header {
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--bg-surface);
}

@media (max-width: 639px) {
  :is(#create-story-modal, #media-popup-modal, #emoji-popup-modal, #post-comments-modal, #reaction-members-modal, #account-switcher-modal, #notification-settings-modal, #password-setup-modal, #feed-create-modal, #login-screen) {
    align-items: flex-start;
  }

  #post-comments-modal {
    align-items: flex-end;
  }

  #post-comments-modal > .surface-card {
    height: calc(100dvh - max(0.75rem, env(safe-area-inset-top)) - max(0.75rem, env(safe-area-inset-bottom)));
  }

  #feed-create-modal > .w-full,
  #create-story-modal > .surface-card {
    width: 100%;
  }
}

.profile-avatar-crop-form canvas {
  width: min(100%, 20rem);
  height: auto;
  align-self: center;
  border-radius: 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
}

.profile-wall-album-card {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: var(--ui-radius-sm);
  background: #0f172a;
  text-align: left;
}

.profile-wall-album-card img,
.profile-wall-album-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease, filter 0.2s ease;
}

.profile-wall-album-card:hover img,
.profile-wall-album-card:hover video {
  transform: scale(1.06);
  filter: brightness(0.88);
}

.profile-wall-album-badge,
.profile-wall-album-name {
  position: absolute;
  left: 0.55rem;
  right: 0.55rem;
  z-index: 2;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  font-size: 0.67rem;
  font-weight: 900;
}

.profile-wall-album-badge { top: 0.55rem; }
.profile-wall-album-name { bottom: 0.55rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================
   THANH STORY TRÊN BẢNG TIN & KHỐI 3D CUBE MƯỢT 60FPS NHƯ FACEBOOK
   ========================================== */
.story-card-item {
  position: relative;
  width: 102px;
  height: 172px;
  border-radius: 0.9rem;
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
  border: 1px solid var(--border-color);
  background-color: #000;
  transition: transform 0.2s ease;
}
.story-card-item:hover {
  transform: translateY(-2px);
}
.story-card-item img,
.story-card-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.story-card-item:hover img,
.story-card-item:hover video {
  transform: scale(1.06);
}
.story-avatar-ring {
  padding: 2px;
  border-radius: 9999px;
  background: var(--accent-gradient);
}

#fb-story-3d-viewer,
#fb-tiktok-media-viewer {
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
}

@media (max-width: 1023px) {
  #fb-tiktok-media-viewer,
  #post-comments-modal,
  #feed-create-modal {
    top: var(--app-visual-top, 0px);
    right: 0;
    bottom: auto;
    left: 0;
    height: var(--app-visual-height, 100dvh);
    min-height: 0;
  }

  #post-comments-modal > .surface-card {
    height: 100%;
    max-height: none;
  }

  #viewer-sidebar-panel {
    bottom: 0;
    height: min(72vh, var(--app-visual-height, 100dvh));
    max-height: var(--app-visual-height, 100dvh);
  }
}

.story-3d-viewport {
  perspective: 1400px;
  touch-action: none;
  overscroll-behavior: none;
}

.story-3d-cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
  transform: translateZ(calc(-1 * var(--cube-half))) rotateY(0deg);
}

.story-3d-cube.is-animating {
  transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

.story-3d-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  background: #090d16;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  will-change: transform;
}

/* 3 mặt của khối hộp 3D ghép sát mép 100% không hở viền */
.story-3d-face.face-active {
  transform: rotateY(0deg) translateZ(var(--cube-half));
}
.story-3d-face.face-next {
  transform: rotateY(90deg) translateZ(var(--cube-half));
}
.story-3d-face.face-prev {
  transform: rotateY(-90deg) translateZ(var(--cube-half));
}

/* Lớp phủ đổ bóng 3D tự động tối/sáng khi xoay khối như Facebook */
.story-face-shade {
  position: absolute;
  inset: 0;
  background: #000;
  pointer-events: none;
  z-index: 30;
  opacity: 0;
  transition: opacity 0.36s ease;
}

.story-3d-cube:not(.is-animating) .story-face-shade {
  transition: none;
}

@media (min-width: 640px) {
  .story-3d-face {
    border-radius: 1rem;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
  }
}

/* ==========================================
   HIỆU ỨNG VUỐT DỌC ĐỔI BÀI & VUỐT NGANG ĐỔI FILE TRONG VIEWER
   ========================================== */
#viewer-touch-area {
  touch-action: none;
  overscroll-behavior: none;
}

#viewer-stage-container {
  will-change: transform, opacity;
}

.viewer-slide-up {
  animation: viewerSlideUp 0.28s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.viewer-slide-down {
  animation: viewerSlideDown 0.28s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.viewer-slide-left {
  animation: viewerSlideLeft 0.26s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.viewer-slide-right {
  animation: viewerSlideRight 0.26s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes viewerSlideUp {
  0% { opacity: 0.35; transform: translate3d(0, 95px, 0) scale(0.96); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes viewerSlideDown {
  0% { opacity: 0.35; transform: translate3d(0, -95px, 0) scale(0.96); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes viewerSlideLeft {
  0% { opacity: 0.4; transform: translate3d(85px, 0, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes viewerSlideRight {
  0% { opacity: 0.4; transform: translate3d(-85px, 0, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ==========================================
   THANH TIẾN TRÌNH & SPINNER LOADING CHUYỂN TAB
   ========================================== */
.tab-top-loader {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--accent-gradient);
  box-shadow: 0 0 10px var(--accent-color);
  z-index: 100;
  opacity: 0;
  transition: width 0.22s ease, opacity 0.2s ease;
  pointer-events: none;
}

.tab-top-loader.loading {
  width: 82%;
  opacity: 1;
}

.tab-top-loader.done {
  width: 100%;
  opacity: 0;
}

/* Thanh tải tab chỉ là một vạch mảnh ở mép trên, không được phủ lên nội dung. */
.modern-top-loader {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1000;
  height: 3px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  background: transparent;
  transition: opacity 0.16s ease;
}

.modern-top-loader.active {
  opacity: 1;
}

.modern-top-loader-bar {
  width: 0;
  height: 100%;
  background: var(--accent-gradient);
  box-shadow: 0 0 10px var(--accent-color);
  transition: width 0.22s ease;
}

.tab-spinner {
  width: 16px;
  height: 16px;
  border: 2.5px solid var(--accent-soft);
  border-top-color: var(--accent-color);
  border-radius: 50%;
  animation: spinLoader 0.55s linear infinite;
}

@keyframes spinLoader {
  to { transform: rotate(360deg); }
}

.surface-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--ui-radius);
  box-shadow: 0 8px 28px -6px rgba(0, 0, 0, 0.28);
}

.surface-elevated {
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--ui-radius-sm);
}

.btn-accent {
  background: var(--accent-gradient);
  color: #ffffff;
  border-radius: var(--ui-radius-sm);
  transition: all 0.18s ease;
  box-shadow: 0 3px 12px -2px var(--accent-ring);
}
.btn-accent:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
}
.btn-accent:active {
  transform: scale(0.97);
}

.accent-text {
  color: var(--accent-color);
}
.accent-bg-soft {
  background-color: var(--accent-soft);
  color: var(--accent-color);
}
.accent-border {
  border-color: var(--accent-color) !important;
}

.muted-text {
  color: var(--text-muted);
}

.mention-link {
  display: inline;
  padding: 0.08rem 0.28rem;
  color: var(--accent-color);
  background: var(--accent-soft);
  border-radius: 0.42rem;
  font-weight: 850;
  cursor: pointer;
  transition: color 0.16s ease, background-color 0.16s ease;
}

.mention-link:hover,
.mention-link:focus-visible {
  color: var(--text-main);
  background: var(--accent-soft-strong, var(--accent-soft));
  outline: none;
  text-decoration: underline;
}

.subtle-border {
  border-color: var(--border-color);
}

/* ==========================================
   MENU TÙY CHỌN TIN NHẮN DÙNG CHUNG
   ========================================== */
.dm-contact-row {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
  width: 100%;
  padding: 0.3rem;
  border-radius: var(--ui-radius-sm);
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.dm-contact-row:hover {
  background: var(--accent-soft);
}

.dm-contact-row.is-selected {
  background: var(--bg-elevated);
  box-shadow: inset 0 0 0 1px var(--accent-color);
}

.dm-contact-main {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.3rem 0.35rem;
  text-align: left;
  border-radius: var(--ui-radius-sm);
}

.dm-options-trigger {
  flex: 0 0 auto;
  align-self: center;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  border: 1px solid transparent;
  border-radius: var(--ui-radius-sm);
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.dm-options-trigger:hover,
.dm-options-trigger:focus-visible {
  color: var(--accent-color);
  background: var(--accent-soft);
  border-color: var(--accent-color);
  outline: none;
}

.dm-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.7rem 0.35rem 0.35rem;
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 800;
}

.dm-pagination button {
  width: 1.9rem;
  height: 1.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  border-radius: 0.6rem;
  color: var(--text-main);
  background: var(--bg-surface);
  font-size: 1.15rem;
  line-height: 1;
}

.dm-pagination button:not(:disabled):hover,
.dm-pagination button:not(:disabled):focus-visible {
  border-color: var(--accent-color);
  color: var(--accent-color);
  background: var(--accent-soft);
  outline: none;
}

.dm-pagination button:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.dm-voice-call-btn {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #10b981;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.dm-voice-call-btn:hover:not(:disabled),
.dm-voice-call-btn:focus-visible:not(:disabled) {
  color: #34d399;
  background: rgba(16, 185, 129, 0.14);
  border-color: #10b981;
  outline: none;
  transform: scale(1.06);
}

.dm-voice-call-btn:disabled {
  pointer-events: none;
}

.dm-active-call-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.58rem 0.7rem;
  color: var(--text-main);
  background: color-mix(in srgb, #10b981 12%, var(--bg-surface));
  border: 1px solid color-mix(in srgb, #10b981 58%, var(--border-color));
  border-radius: 0.8rem;
  box-shadow: 0 8px 20px -16px rgba(16, 185, 129, 0.95);
}

.dm-active-call-bar.hidden {
  display: none !important;
}

.dm-active-call-main,
.dm-active-call-actions {
  display: inline-flex;
  align-items: center;
}

.dm-active-call-main {
  min-width: 0;
  gap: 0.55rem;
}

.dm-active-call-pulse {
  display: inline-flex;
  width: 1.9rem;
  height: 1.9rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: #10b981;
  border-radius: 999px;
  animation: dm-call-pulse 1.6s ease-in-out infinite;
}

.dm-active-call-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.1rem;
}

.dm-active-call-copy strong,
.dm-active-call-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dm-active-call-copy strong {
  font-size: 0.75rem;
  font-weight: 900;
}

.dm-active-call-copy span {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 700;
}

.dm-active-call-actions {
  flex: 0 0 auto;
  gap: 0.3rem;
}

.dm-active-call-button {
  display: inline-flex;
  width: 1.9rem;
  height: 1.9rem;
  align-items: center;
  justify-content: center;
  color: var(--text-main);
  background: var(--accent-soft);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.dm-active-call-button:hover,
.dm-active-call-button:focus-visible {
  color: var(--accent-color);
  background: var(--bg-elevated);
  outline: none;
  transform: scale(1.06);
}

.dm-active-call-button.is-muted {
  color: #f59e0b;
}

.dm-active-call-button.is-end {
  color: #ffffff;
  background: #f43f5e;
  border-color: #f43f5e;
}

@keyframes dm-call-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.3); }
  50% { box-shadow: 0 0 0 0.38rem rgba(16, 185, 129, 0); }
}

.dm-options-menu {
  position: absolute;
  z-index: 60;
  width: min(17rem, calc(100vw - 2rem));
  padding: 0.375rem;
  background: color-mix(in srgb, var(--bg-surface) 94%, transparent);
  border: 1px solid var(--border-color);
  border-radius: var(--ui-radius);
  box-shadow: 0 18px 42px -12px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.dm-options-menu.is-list-menu {
  top: calc(100% - 0.1rem);
  right: 0.25rem;
}

.dm-options-menu.is-header-menu {
  top: calc(100% + 0.4rem);
  right: 0;
}

.dm-options-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.25rem;
  padding: 0.55rem 0.7rem;
  color: var(--text-main);
  text-align: left;
  font-size: 0.75rem;
  font-weight: 800;
  border-radius: calc(var(--ui-radius-sm) - 0.15rem);
  transition: color 0.18s ease, background-color 0.18s ease;
}

.dm-options-item:hover,
.dm-options-item:focus-visible {
  color: var(--accent-color);
  background: var(--accent-soft);
  outline: none;
}

.dm-options-item.is-danger {
  color: #fb7185;
}

.dm-options-item.is-danger:hover,
.dm-options-item.is-danger:focus-visible {
  color: #fda4af;
  background: rgba(244, 63, 94, 0.12);
}

.dm-options-item.is-success {
  color: #34d399;
}

.dm-options-icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}

.dm-options-separator {
  height: 1px;
  margin: 0.25rem 0.45rem;
  background: var(--border-color);
}

.dm-message-bubble {
  border-radius: 1rem;
  margin-bottom: 0.75rem;
}

.dm-floating-reactions {
  position: absolute;
  inset: auto 0 0;
  z-index: 14;
  height: 0;
  pointer-events: none;
  overflow: visible;
}

.dm-floating-reaction {
  position: absolute;
  right: 1.6rem;
  bottom: 0.15rem;
  display: inline-flex;
  width: 1.55rem;
  height: 1.55rem;
  align-items: center;
  justify-content: center;
  animation: dm-reaction-fly 0.95s cubic-bezier(0.2, 0.75, 0.25, 1) both;
  filter: drop-shadow(0 4px 5px rgba(15, 23, 42, 0.22));
}

.dm-floating-reaction-image,
.dm-floating-reaction > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes dm-reaction-fly {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.55) rotate(0deg); }
  14% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--dm-fly-x), -5.6rem, 0) scale(1.28) rotate(var(--dm-fly-rotate)); }
}

@media (prefers-reduced-motion: reduce) {
  .dm-floating-reaction { animation-duration: 0.2s; }
}

.dm-message-tools {
  position: absolute;
  right: 0.35rem;
  bottom: -0.7rem;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.dm-message-bubble:hover .dm-message-tools,
.dm-message-bubble:focus-within .dm-message-tools,
.dm-message-tools:focus-within {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.dm-message-tool-btn {
  width: 1.7rem;
  height: 1.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  box-shadow: 0 5px 14px -7px rgba(0, 0, 0, 0.75);
  font-size: 0.78rem;
  transition: color 0.16s ease, background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.dm-message-tool-btn:hover,
.dm-message-tool-btn:focus-visible {
  color: var(--accent-color);
  background: var(--accent-soft);
  border-color: var(--accent-color);
  outline: none;
  transform: translateY(-1px);
}

.dm-reaction-picker {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.35rem);
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.3rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  box-shadow: 0 12px 26px -10px rgba(0, 0, 0, 0.7);
}

.dm-reaction-picker.hidden {
  display: none;
}

@media (max-width: 639px) {
  /* Giữ bong bóng đủ rộng để nút cảm xúc không bị ép vào mép màn hình. */
  #dm-messages-list .dm-message-bubble {
    min-width: 7rem;
    max-width: min(82vw, 30rem);
  }

  #dm-messages-list .dm-message-tools {
    right: auto;
    left: 0;
  }

  #dm-messages-list .dm-reaction-picker {
    right: auto;
    left: 0;
    max-width: calc(100vw - 1.5rem);
    overflow-x: auto;
    border-radius: 1rem;
  }
}

.reaction-item-btn {
  width: 1.9rem;
  height: 1.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 1rem;
  transition: background-color 0.16s ease, transform 0.16s ease;
}

.reaction-item-btn:hover,
.reaction-item-btn:focus-visible {
  background: var(--accent-soft);
  outline: none;
  transform: scale(1.12);
}

.dm-reaction-summary {
  position: absolute;
  right: 0.55rem;
  bottom: -0.55rem;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.15rem 0.45rem;
  color: var(--text-main);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  box-shadow: 0 4px 12px -8px rgba(0, 0, 0, 0.7);
  font-size: 0.65rem;
  font-weight: 800;
}

.dm-action-dialog {
  width: min(24rem, calc(100vw - 2rem));
  max-width: 100%;
  padding: 0;
  color: var(--text-main);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--ui-radius);
  box-shadow: 0 24px 70px -22px rgba(0, 0, 0, 0.72);
}

.dm-action-dialog::backdrop {
  background: rgba(15, 23, 42, 0.56);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.voice-call-dialog {
  width: min(25rem, calc(100vw - 2rem));
  max-width: 100%;
  padding: 0;
  color: var(--text-main);
  background: transparent;
  border: 0;
  outline: none;
}

.voice-call-dialog::backdrop {
  background: rgba(15, 23, 42, 0.58);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.voice-call-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem;
  background: color-mix(in srgb, var(--bg-surface) 96%, transparent);
  border: 1px solid var(--border-color);
  border-radius: var(--ui-radius);
  box-shadow: 0 24px 70px -22px rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.voice-call-avatar {
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 999px;
  font-size: 1.45rem;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.8);
}

.voice-call-copy {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.voice-call-copy strong,
.voice-call-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-call-copy strong {
  font-size: 0.82rem;
  font-weight: 900;
}

.voice-call-copy span {
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 700;
}

.voice-call-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
}

.voice-call-action {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 1.35rem;
  font-weight: 900;
  transition: transform 0.18s ease, filter 0.18s ease, background-color 0.18s ease;
}

.voice-call-action:hover,
.voice-call-action:focus-visible {
  filter: brightness(1.08);
  outline: none;
  transform: scale(1.06);
}

.voice-call-action.is-accept {
  color: #ffffff;
  background: #10b981;
}

.voice-call-action.is-reject,
.voice-call-action.is-end {
  color: #ffffff;
  background: #f43f5e;
}

.voice-call-action.is-muted {
  color: var(--text-main);
  background: var(--accent-soft);
  border: 1px solid var(--border-color);
}

.dm-action-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1rem;
}

.dm-action-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-color);
}

.dm-action-header h3 {
  min-width: 0;
  flex: 1 1 auto;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 900;
}

.dm-action-icon {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--accent-color);
  background: var(--accent-soft);
  border-radius: 999px;
  font-weight: 900;
}

.dm-action-icon.is-danger {
  color: #f43f5e;
  background: rgba(244, 63, 94, 0.12);
}

.dm-action-close {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border-radius: 999px;
  font-size: 1.1rem;
  font-weight: 900;
}

.dm-action-close:hover,
.dm-action-close:focus-visible {
  color: var(--accent-color);
  outline: none;
}

.dm-action-message {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.76rem;
  line-height: 1.5;
}

.dm-action-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.dm-action-field input,
.dm-action-field select {
  width: 100%;
  min-height: 2.6rem;
  padding: 0.65rem 0.75rem;
  color: var(--text-main);
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--ui-radius-sm);
  outline: none;
  font: inherit;
}

.dm-action-field input:focus,
.dm-action-field select:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.dm-action-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin: 0;
  padding: 0.75rem 0 0;
  border-top: 1px solid var(--border-color);
}

.dm-action-button {
  min-height: 2.35rem;
  padding: 0.55rem 0.85rem;
  border-radius: var(--ui-radius-sm);
  font-size: 0.75rem;
  font-weight: 900;
}

.dm-action-button.is-secondary {
  color: var(--text-main);
  background: var(--bg-elevated);
}

.dm-action-button.is-primary {
  color: #ffffff;
  background: var(--accent-color);
}

.dm-action-button.is-danger {
  color: #ffffff;
  background: #e11d48;
}

.dm-action-button:hover,
.dm-action-button:focus-visible {
  filter: brightness(1.06);
  outline: none;
  transform: translateY(-1px);
}

/* ==========================================
   ẢNH & VIDEO TRÀN VIỀN FULL CHIỀU NGANG NHƯ FACEBOOK
   ========================================== */
.feed-media-bleed {
  position: relative !important;
  isolation: isolate;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background-color: #000000;
  overflow: hidden;
  line-height: 0;
  cursor: pointer;
}

.feed-media-bleed img {
  width: 100%;
  max-height: 620px;
  object-fit: cover;
  display: block;
  border: none;
  border-radius: 0;
  transition: transform 0.25s ease, filter 0.2s ease;
}

.feed-media-bleed:hover img {
  filter: brightness(0.94);
}

.feed-media-bleed video {
  width: 100%;
  max-height: 620px;
  object-fit: cover;
  display: block;
  border: none;
  border-radius: 0;
  background-color: #000;
}

.feed-media-hint-badge {
  position: absolute;
  bottom: 12px;
  right: 12px;
  padding: 0.35rem 0.7rem;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.65);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  pointer-events: none;
  opacity: 0.85;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.feed-media-bleed:hover .feed-media-hint-badge {
  opacity: 1;
  transform: scale(1.04);
}

/* ==========================================
   TRÌNH XEM MEDIA THEATER KIỂU FACEBOOK & TIKTOK
   ========================================== */
.viewer-stage-media {
  max-width: 100%;
  max-height: 92vh;
  object-fit: contain;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75);
}

.viewer-stage-media.zoomed {
  transform: scale(1.65);
  cursor: zoom-out;
}

.viewer-post-content {
  font-size: 1.08rem;
  line-height: 1.55;
}

.viewer-post-content .post-text-body {
  font-weight: 600;
}

/* ==========================================
   HIỆU ỨNG "XEM THÊM / ẨN BỚT"
   ========================================== */
.post-text-body {
  font-size: 0.98rem;
  line-height: 1.52;
  color: var(--text-main);
  word-break: break-word;
}

.post-text-dots {
  color: var(--text-muted);
  font-weight: 500;
  margin-right: 0.15rem;
}

.feed-see-more-inline {
  display: inline;
  background: none;
  border: none;
  padding: 0;
  margin-left: 0.15rem;
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.94rem;
  cursor: pointer;
  transition: color 0.15s ease;
}

.feed-see-more-inline:hover {
  color: var(--text-main);
  text-decoration: underline;
}

.feed-see-less-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-top: 0.35rem;
  padding: 0.1rem 0.45rem;
  border-radius: 0.4rem;
  background-color: var(--bg-elevated);
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.feed-see-less-btn:hover {
  color: var(--accent-color);
  background-color: var(--accent-soft);
}

/* ==========================================
   THANH CHỌN 6 CẢM XÚC
   ========================================== */
.reaction-trigger-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.reaction-popover {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 0.42rem;
  padding: 0.35rem 0.6rem;
  border-radius: 9999px;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.48);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.92);
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 50;
  pointer-events: none;
}

.reaction-popover.comment-popover {
  padding: 0.25rem 0.48rem;
  gap: 0.25rem;
  margin-bottom: 0.3rem;
}

.reaction-popover::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 14px;
}

.reaction-trigger-wrap:hover .reaction-popover,
.reaction-trigger-wrap:focus-within .reaction-popover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.reaction-trigger-wrap.reaction-popover-dismissed .reaction-popover {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(8px) scale(0.92) !important;
  pointer-events: none !important;
}

/* Trên điện thoại menu cảm xúc mở bằng chạm, không phụ thuộc hover. */
.reaction-trigger-wrap.reaction-menu-open .reaction-popover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.reaction-item-btn {
  font-size: 1.55rem;
  line-height: 1;
  padding: 0.15rem;
  cursor: pointer;
  transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.4, 1);
  user-select: none;
  position: relative;
}

@media (max-width: 639px) {
  .reaction-trigger-wrap:hover .reaction-popover,
  .reaction-trigger-wrap:focus-within .reaction-popover {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(8px) scale(0.92) !important;
    pointer-events: none !important;
  }

  .reaction-trigger-wrap.reaction-menu-open .reaction-popover {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
  }

  .reaction-trigger-wrap .reaction-popover {
    max-width: calc(100vw - 1.5rem);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .reaction-trigger-wrap .reaction-popover::-webkit-scrollbar {
    display: none;
  }

  .reaction-trigger-wrap .reaction-item-btn {
    min-width: 2.3rem;
    min-height: 2.3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.28rem;
  }
}

.reaction-popover.comment-popover .reaction-item-btn {
  font-size: 1.28rem;
  padding: 0.12rem;
}

.reaction-item-btn:hover {
  transform: scale(1.38) translateY(-4px);
}

.feed-post-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  min-height: 2.65rem;
}

.feed-post-actions-main {
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.feed-post-card {
  border-radius: 0.85rem;
}

.feed-post-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}

.feed-post-author {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.feed-post-avatar {
  width: 2.35rem;
  height: 2.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  font-size: 1.05rem;
  box-shadow: 0 3px 9px rgba(15, 23, 42, 0.14);
  transition: transform 0.16s ease;
}

.feed-post-avatar:hover {
  transform: scale(1.04);
}

.feed-post-author-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.feed-post-author-line {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.feed-post-tag {
  display: inline-flex;
  align-items: center;
  min-height: 1.25rem;
  padding: 0.1rem 0.45rem;
  color: var(--accent-color);
  background: var(--accent-soft);
  border-radius: 0.35rem;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
}

.feed-post-time {
  color: var(--text-muted);
  font-size: 0.62rem;
  line-height: 1;
}

.feed-post-actions-main > .reaction-trigger-wrap,
.feed-post-actions-main > .feed-action-comment,
.feed-post-actions-main > .share-trigger-wrap {
  flex: 0 0 auto;
  min-width: 0;
}

.feed-action-icon {
  width: auto;
  min-width: 2.25rem;
  height: 2.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0 0.42rem;
  border: 0;
  border-radius: 0.7rem;
  background: transparent;
  color: var(--text-muted);
  line-height: 1;
  transition: background-color 0.16s ease, transform 0.16s ease, color 0.16s ease;
}

.feed-action-icon:hover,
.feed-action-icon:focus-visible,
.feed-action-icon.is-active {
  background: color-mix(in srgb, var(--accent-soft) 72%, transparent);
  color: var(--accent-color);
  outline: none;
}

.feed-action-icon:active {
  transform: scale(0.94);
}

.feed-action-icon-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.8rem;
  height: 1.8rem;
  font-size: 0;
  line-height: 1;
}

.feed-action-icon-svg,
.comment-action-icon-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.38rem;
  height: 1.38rem;
  font-size: 1rem;
  stroke-width: 2.1;
}

.feed-action-icon.feed-action-like.text-blue-400 {
  color: #2563eb;
}

.feed-action-icon.feed-action-like.text-rose-500 {
  color: #ef476f;
}

.feed-action-count {
  min-width: 0.65rem;
  color: currentColor;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
}

.feed-share-trigger-btn {
  width: auto;
  min-width: 2.25rem;
  height: 2.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0 0.42rem;
  color: var(--text-muted);
  border: 0;
  border-radius: 0.7rem;
  background: transparent;
  transition: background-color 0.16s ease, transform 0.16s ease, color 0.16s ease;
}

.feed-share-trigger-btn:hover,
.feed-share-trigger-btn:focus-visible {
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-soft) 72%, transparent);
  outline: none;
}

.feed-share-trigger-btn:active {
  transform: scale(0.94);
}

.feed-reaction-summary {
  display: inline-flex;
  align-items: center;
  min-height: 1.9rem;
  padding-left: 0.35rem;
}

.feed-reaction-summary.is-empty {
  visibility: hidden;
}

.feed-reaction-summary:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 3px;
}

.reaction-members-dialog {
  display: flex;
  width: min(100%, 26rem);
  min-height: 0;
  flex-direction: column;
  max-height: min(80vh, 42rem);
  margin: auto;
}

.reaction-members-body {
  min-height: 0;
  flex: 1 1 auto;
  max-height: none;
  padding: 0.8rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.reaction-members-loading,
.reaction-members-empty {
  padding: 2rem 1rem;
  color: var(--text-muted);
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
}

.reaction-members-group + .reaction-members-group {
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border-color);
}

.reaction-members-group-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0 0.35rem 0.45rem;
  color: var(--text-main);
  font-size: 0.75rem;
  font-weight: 900;
}

.reaction-members-group-title > span:last-child {
  margin-left: auto;
}

.reaction-members-group-icon {
  width: 1.8rem;
  height: 1.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  border-radius: 999px;
}

.reaction-members-group-icon[data-reaction="like"] { background: #1877f2; }
.reaction-members-group-icon[data-reaction="love"] { background: #f04472; }
.reaction-members-group-icon[data-reaction="haha"],
.reaction-members-group-icon[data-reaction="wow"] { background: #f59e0b; }
.reaction-members-group-icon[data-reaction="sad"] { background: #60a5fa; }
.reaction-members-group-icon[data-reaction="angry"] { background: #f97316; }

.reaction-members-list {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.reaction-member-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.45rem 0.5rem;
  color: var(--text-main);
  text-align: left;
  border-radius: var(--ui-radius-sm);
  transition: background-color 0.16s ease, transform 0.16s ease;
}

.reaction-member-item:hover,
.reaction-member-item:focus-visible {
  background: var(--accent-soft);
  outline: none;
  transform: translateX(2px);
}

.reaction-member-avatar {
  width: 2.15rem;
  height: 2.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 999px;
  font-size: 1rem;
  box-shadow: 0 4px 10px -7px rgba(0, 0, 0, 0.7);
}

.reaction-member-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8rem;
  font-weight: 800;
}

.feed-reaction-summary-icon {
  width: 1.55rem;
  height: 1.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: -0.42rem;
  color: #ffffff;
  border: 2px solid var(--bg-surface);
  border-radius: 9999px;
  box-shadow: 0 3px 9px rgba(15, 23, 42, 0.16);
  font-size: 0.9rem;
  line-height: 1;
}

.feed-reaction-summary-icon:first-child {
  margin-left: 0;
}

.feed-reaction-summary-icon[data-reaction="like"] {
  background: #1877f2;
}

.feed-reaction-summary-icon[data-reaction="love"] {
  background: #f04472;
}

.feed-reaction-summary-icon[data-reaction="haha"],
.feed-reaction-summary-icon[data-reaction="wow"] {
  background: #f59e0b;
}

.feed-reaction-summary-icon[data-reaction="sad"] {
  background: #60a5fa;
}

.feed-reaction-summary-icon[data-reaction="angry"] {
  background: #f97316;
}

.feed-reaction-summary-glyph {
  width: 1.05rem;
  height: 1.05rem;
  color: #ffffff;
  stroke-width: 2.8;
}

.comment-bubble-box {
  position: relative;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  transition: opacity 0.15s ease;
}

.comment-bubble-box:hover {
  opacity: 0.82;
}

.comment-avatar {
  width: 2.55rem !important;
  height: 2.55rem !important;
  margin-top: 0 !important;
  font-size: 1rem !important;
}

.comment-author-line {
  display: flex;
  align-items: baseline;
  gap: 0.32rem;
  min-height: 1.25rem;
}

.comment-time {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 700;
}

.comment-content-wrap {
  padding-top: 0.05rem;
}

.comment-content-wrap > .comment-bubble-box p {
  margin-top: 0.12rem;
  font-size: 0.92rem;
  line-height: 1.38;
}

.comment-actions-row {
  display: flex;
  align-items: center;
  gap: 0.58rem;
  min-height: 1.7rem;
  margin: 0.12rem 0 0 0.15rem;
  color: var(--text-muted);
}

.comment-action-like,
.comment-action-reply {
  min-width: auto;
  height: 1.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 0.7rem;
  background: transparent;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, color 0.15s ease;
}

.comment-action-like:hover,
.comment-action-like:focus-visible,
.comment-action-reply:hover,
.comment-action-reply:focus-visible {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent-color) 28%, transparent);
  color: var(--accent-color);
  outline: none;
}

.comment-action-reply {
  color: var(--text-muted);
}

.comment-action-like:active,
.comment-action-reply:active {
  transform: scale(0.92);
}

.comment-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
  height: 1.1rem;
  font-size: 0;
  line-height: 1;
}

.comment-action-icon-svg {
  width: 1.08rem;
  height: 1.08rem;
  font-size: 0.9rem;
}

.comment-reaction-inline-count {
  min-width: 0.8rem;
  font-size: 0.68rem;
  font-weight: 900;
}

.comment-reaction-inline-count.hidden {
  display: none;
}

.comment-reaction-pill {
  position: absolute;
  bottom: -9px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.08rem 0.42rem;
  border-radius: 9999px;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.32);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.1;
  z-index: 5;
}

.comment-thread {
  display: block;
}

.comment-replies {
  margin: 0.28rem 0 0 0.6rem;
  padding-left: 0.55rem;
  border-left: 1px solid color-mix(in srgb, var(--accent-color) 26%, var(--border-color));
}

.comment-replies > .comment-thread {
  margin-bottom: 0.42rem;
}

.share-trigger-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.profile-review-form-heading {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  padding: 0 0.15rem;
}

.viewer-reaction-menu.hidden {
  display: none !important;
}

.viewer-reaction-inline {
  display: inline-flex;
  align-items: center;
}

.viewer-reaction-inline-icon {
  display: inline-flex;
  min-width: 1.8rem;
  height: 1.8rem;
  align-items: center;
  justify-content: center;
  font-size: 1.28rem;
  line-height: 1;
}

.feed-post-comments {
  border-top: 0;
}

.comment-thread-item + .comment-thread-item {
  margin-top: 0.15rem;
}

.comment-sheet-handle {
  display: none;
}

.comment-modal-reaction-summary {
  display: flex;
  align-items: center;
  gap: 0.22rem;
  min-height: 2.6rem;
  padding: 0.55rem 1rem;
  color: var(--text-main);
  border-bottom: 1px solid var(--border-color);
  font-size: 1rem;
  font-weight: 900;
}

.comment-modal-post-preview {
  display: none;
}

.comment-modal-reaction-count {
  margin-left: 0.18rem;
  font-size: 1.05rem;
}

@media (max-width: 1023px) {
  #post-comments-modal {
    align-items: flex-end;
    background: var(--bg-surface);
    backdrop-filter: none;
  }

  #post-comments-modal > .surface-card {
    border-radius: 1.15rem 1.15rem 0 0 !important;
    background: var(--bg-surface);
  }

  #post-comments-modal .comment-sheet-handle {
    display: block;
    width: 3.2rem;
    height: 0.32rem;
    margin: 0.7rem auto 0.35rem;
    background: #8b8f94;
    border-radius: 999px;
    flex: 0 0 auto;
  }

  #post-comments-modal > .surface-card > .border-b {
    padding-top: 0.25rem;
    padding-bottom: 0.6rem;
    border-bottom: 0;
    background: var(--bg-surface);
  }

  #post-comments-modal > .surface-card > .border-b h3 {
    display: none;
  }

  #post-comments-modal .comment-modal-post-preview {
    display: none;
  }

  #post-comments-modal #modal-post-body {
    padding: 0 0 .75rem;
    background: var(--bg-surface);
  }

  #post-comments-modal .comment-modal-comments-list {
    padding: 0.65rem 1rem 0;
  }

  #post-comments-modal .comment-modal-comments-list .comment-thread-item {
    gap: 0.7rem;
  }

  #post-comments-modal .comment-modal-comments-list .comment-content-wrap > .comment-bubble-box p {
    font-size: 1rem;
    line-height: 1.42;
  }


}

#post-comments-modal .surface-card,
#viewer-sidebar-panel {
  border-radius: 1.35rem;
}

.comment-modal-close-button {
  width: 2.25rem !important;
  height: 2.25rem !important;
  min-width: 2.25rem;
  min-height: 2.25rem;
  flex: 0 0 auto;
  border: 1px solid var(--border-color);
  border-radius: 9999px !important;
  color: var(--text-muted);
  background: var(--bg-surface);
  transition: color .16s ease, background-color .16s ease, border-color .16s ease, transform .16s ease;
}

#post-comments-modal .comment-modal-close-button {
  border-radius: 9999px !important;
}

.comment-modal-close-button:hover,
.comment-modal-close-button:focus-visible {
  color: var(--accent-color);
  background: var(--accent-soft);
  border-color: var(--accent-color);
  outline: none;
}

.comment-modal-close-button:active {
  transform: scale(.92);
}

.share-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.6rem;
  border-radius: 0.65rem;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 800;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.share-trigger-btn:hover,
.share-trigger-btn:focus-visible {
  color: var(--accent-color);
  background-color: var(--accent-soft);
}

.share-menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 70;
  min-width: 13rem;
  padding: 0.35rem;
  border: 1px solid var(--border-color);
  border-radius: var(--ui-radius-sm);
  background: var(--bg-surface);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.34);
}

.share-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.65rem;
  border-radius: 0.55rem;
  color: var(--text-main);
  font-size: 0.78rem;
  font-weight: 750;
  text-align: left;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.share-menu-item:hover,
.share-menu-item:focus-visible {
  color: var(--accent-color);
  background-color: var(--accent-soft);
}

.share-popup-card {
  max-height: calc(100dvh - max(1rem, env(safe-area-inset-top)) - max(1rem, env(safe-area-inset-bottom)));
  overflow-y: auto;
  border-radius: 1.2rem;
}

#share-popup-modal {
  box-sizing: border-box;
  padding-top: max(0.75rem, env(safe-area-inset-top));
  padding-right: max(0.75rem, env(safe-area-inset-right));
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  padding-left: max(0.75rem, env(safe-area-inset-left));
  overscroll-behavior: contain;
}

/* Viền ô nhập tách khỏi viền nền để luôn nhìn thấy ở từng giao diện. */
.chat-composer-shell,
.message-composer-shell,
#feed-post-content,
#story-caption-input,
#modal-comment-input,
#viewer-comment-input,
#profile-review-input,
[id^="feed-comment-input-"] {
  border-style: solid !important;
  border-width: 1.5px !important;
  border-color: var(--input-border-color) !important;
}

.chat-composer-shell:focus-within,
.message-composer-shell:focus-within,
#feed-post-content:focus,
#story-caption-input:focus,
#modal-comment-input:focus,
#viewer-comment-input:focus,
#profile-review-input:focus,
[id^="feed-comment-input-"]:focus {
  border-color: var(--input-border-focus) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--input-border-focus) 24%, transparent), 0 4px 16px rgba(0, 0, 0, 0.14) !important;
}

/* Composer Bảng Tin luôn nằm trên header/menu điện thoại, nút X không bị che. */
@media (max-width: 767px) {
  #feed-create-modal:not(.hidden) {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 200 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: stretch !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: none !important;
    padding: max(0.5rem, env(safe-area-inset-top)) 0 max(0.5rem, env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
  }

  #feed-create-modal > .w-full {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  #feed-create-modal > .w-full > div:first-child {
    position: sticky !important;
    top: 0 !important;
    z-index: 12 !important;
    flex: 0 0 auto !important;
    padding-top: 0.7rem !important;
    background: var(--bg-surface) !important;
  }

  #feed-create-modal > .w-full > #feed-composer-form {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important;
  }
}

.share-popup-header {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1rem 0.8rem;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
}

.share-popup-header > div:first-child {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.share-popup-header h3 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 900;
}

.share-popup-header p {
  margin: 0.2rem 0 0;
  color: var(--text-muted);
  font-size: 0.7rem;
}

.share-popup-title-icon {
  display: inline-flex;
  width: 2.2rem;
  height: 2.2rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  color: #fff;
  background: var(--accent-gradient);
  font-size: 1.25rem;
  font-weight: 900;
}

.share-popup-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
}

.share-popup-qr-frame {
  position: relative;
  width: min(70vw, 16rem);
  aspect-ratio: 1;
  padding: 0.55rem;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 1rem;
  box-shadow: 0 16px 35px rgba(15, 23, 42, 0.18);
}

.share-popup-qr-frame > img:first-child {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.share-popup-qr-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  padding: 0.25rem;
  background: #fff;
  border: 3px solid #fff;
  border-radius: 0.8rem;
  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.22);
  transform: translate(-50%, -50%);
}

.share-popup-qr-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.55rem;
}

.share-popup-brand {
  color: var(--accent-color);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.share-popup-link-row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 0.8rem;
}

.share-popup-link-row input {
  min-width: 0;
  flex: 1;
  padding: 0.45rem 0.5rem;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 0.7rem;
  font-weight: 700;
}

.share-popup-copy,
.share-popup-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2.15rem;
  padding: 0.45rem 0.65rem;
  border-radius: 0.65rem;
  color: var(--accent-color);
  background: var(--accent-soft);
  font-size: 0.68rem;
  font-weight: 900;
  white-space: nowrap;
}

.share-popup-download {
  width: 100%;
  color: var(--text-main);
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
}

.share-popup-copy:hover,
.share-popup-download:hover,
.share-popup-copy:focus-visible,
.share-popup-download:focus-visible {
  border-color: var(--accent-color);
  outline: none;
  filter: brightness(1.04);
}

.share-popup-actions {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
  padding-top: 0.25rem;
}

.share-popup-actions button {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 0.28rem;
  color: var(--text-muted);
  font-size: 0.64rem;
  font-weight: 850;
}

.share-popup-actions button span {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border-radius: 0.85rem;
  color: #fff;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  font-size: 1.25rem;
  font-weight: 900;
}

.share-popup-actions button:nth-child(1) span { background: #1877f2; }
.share-popup-actions button:nth-child(2) span { background: #087bea; }
.share-popup-actions button:nth-child(3) span { background: linear-gradient(135deg, #f9ce34, #ee2a7b 55%, #6228d7); }
.share-popup-actions button:nth-child(4) span { background: #229ed9; }
.share-popup-actions button:nth-child(5) span { background: #168aff; }
.share-popup-actions button:nth-child(6) span { background: #20c863; }
.share-popup-actions button:nth-child(7) span { background: var(--accent-color); }

.share-popup-actions button:hover,
.share-popup-actions button:focus-visible {
  color: var(--accent-color);
  outline: none;
  transform: translateY(-1px);
}

#viewer-sidebar-body .post-text-body {
  font-size: 1.05rem;
  line-height: 1.58;
}

/* Keep an open post menu above the next animated post card. */
.feed-post-card:has(.post-actions-menu:not(.hidden)) {
  position: relative;
  z-index: 1;
}

.post-actions-wrap {
  position: relative;
  flex-shrink: 0;
}

.post-actions-trigger {
  width: 2.15rem;
  height: 2.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.7rem;
  color: var(--text-muted);
  transition: color 0.15s ease, background-color 0.15s ease;
}

.post-actions-trigger:hover,
.post-actions-trigger:focus-visible,
.post-actions-trigger[aria-expanded="true"] {
  color: var(--accent-color);
  background-color: var(--accent-soft);
}

.post-actions-menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 72;
  width: min(17rem, calc(100vw - 2rem));
  padding: 0.35rem;
  border: 1px solid var(--border-color);
  border-radius: var(--ui-radius-sm);
  background: var(--bg-surface);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.34);
}

.post-actions-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.62rem 0.7rem;
  border-radius: 0.55rem;
  color: var(--text-main);
  font-size: 0.78rem;
  font-weight: 750;
  text-align: left;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.post-actions-item:hover,
.post-actions-item:focus-visible {
  color: var(--accent-color);
  background-color: var(--accent-soft);
}

.post-actions-item.is-danger {
  color: #fb7185;
}

.post-actions-item.is-danger:hover,
.post-actions-item.is-danger:focus-visible {
  color: #fda4af;
  background-color: rgba(244, 63, 94, 0.14);
}

.viewer-reaction-trigger {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.viewer-reaction-menu {
  position: absolute;
  right: calc(100% + 0.45rem);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 0.22rem;
  padding: 0.35rem 0.48rem;
  border: 1px solid var(--border-color);
  border-radius: 9999px;
  background: var(--bg-surface);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.42);
  z-index: 60;
}

.viewer-reaction-menu .reaction-item-btn {
  font-size: 1.28rem;
}

.reaction-image,
.reaction-option-image,
.dm-reaction-option-image,
.dm-reaction-summary-image,
.reaction-summary-image,
.viewer-reaction-image {
  display: block;
  width: 1.55rem;
  height: 1.55rem;
  object-fit: contain;
}
.reaction-option-image {
  width: 2rem;
  height: 2rem;
}
.dm-reaction-summary-image,
.reaction-summary-image {
  width: 1.15rem;
  height: 1.15rem;
}
.viewer-reaction-image {
  width: 1.85rem;
  height: 1.85rem;
}
.viewer-reaction-inline-icon .viewer-reaction-image {
  width: 1.45rem;
  height: 1.45rem;
}

.viewer-reaction-menu-toggle {
  width: 1.4rem;
  height: 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 0.82rem;
  line-height: 1;
}

.viewer-reaction-menu-toggle:hover,
.viewer-reaction-menu-toggle:focus-visible {
  background: var(--accent-color);
}

/* ==========================================
   Ô NHẬP CHATBOX & NÚT GỬI ĐẸP
   ========================================== */
.chat-composer-shell {
  display: flex;
  align-items: flex-end;
  gap: 0.45rem;
  padding: 0.38rem 0.45rem 0.38rem 0.5rem;
  background-color: var(--bg-surface);
  border: 1.5px solid var(--border-color);
  border-radius: 0.85rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.chat-panel-composer {
  flex-shrink: 0;
  margin: 0.65rem;
  overflow-anchor: none;
}

#tab-chat > div:first-child,
#dm-conversation-panel,
#stranger-chat-view {
  min-height: 0;
}

#chat-messages-list,
#dm-messages-list,
#stranger-messages-list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 0;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  overflow-anchor: none;
}

.chat-composer-shell:focus-within {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3.5px var(--accent-soft), 0 4px 16px rgba(0, 0, 0, 0.14);
}

/* Khung avatar dạng ảnh phủ, giống kiểu frame PNG của gocnho.us. */
.avatar-image-frame {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 5;
  display: block;
  width: calc(100% * var(--avatar-frame-scale, 1.35));
  height: calc(100% * var(--avatar-frame-scale, 1.35));
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
}

.avatar-image-frame img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

/* Chỉ khung ảnh động: dải sáng lướt nhẹ trên chính ảnh khung. */
.avatar-image-frame.avatar-frame-shine::after {
  content: '';
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, 0.78) 49%, transparent 64%);
  transform: translateX(-125%) rotate(8deg);
  opacity: 0;
  animation: avatar-frame-shine 3.8s ease-in-out infinite;
}

@keyframes avatar-frame-shine {
  0%, 54% { transform: translateX(-125%) rotate(8deg); opacity: 0; }
  64% { opacity: 0.72; }
  79%, 100% { transform: translateX(125%) rotate(8deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .avatar-image-frame.avatar-frame-shine::after {
    animation: none;
  }
}

.chat-composer-icon-btn {
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  background-color: var(--bg-elevated);
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.chat-composer-icon-btn:hover {
  color: var(--accent-color);
  background-color: var(--accent-soft);
  transform: scale(1.06);
}

.chat-composer-input {
  flex: 1;
  min-width: 0;
  min-height: 2.7rem;
  max-height: 7rem;
  background: transparent;
  border: none;
  outline: none;
  padding: 0.58rem 0.45rem;
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-main);
  resize: none;
  overflow-y: hidden;
}
.chat-composer-input::placeholder {
  color: var(--text-muted);
  opacity: 1;
  font-weight: 600;
}

/* Chữ trong các ô soạn nội dung phải nổi rõ trên nền sáng/tối. */
#feed-post-content,
#story-caption-input {
  color: var(--text-main);
  font-weight: 600;
}

#feed-post-content::placeholder,
#story-caption-input::placeholder {
  color: var(--text-muted);
  opacity: 1;
  font-weight: 600;
}

.chat-composer-send-btn {
  height: 2.55rem;
  padding: 0 1.15rem 0 1.2rem;
  border-radius: 9999px;
  background: var(--accent-gradient);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  white-space: nowrap;
  box-shadow: 0 3px 10px -1px var(--accent-ring);
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.chat-composer-send-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.chat-composer-send-btn:active {
  transform: scale(0.95);
}

.media-source-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.media-source-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-source-button {
  flex: none;
  padding: 0.3rem 0.6rem;
  white-space: nowrap;
}

@media (max-width: 639px) {
  #feed-create-modal > .w-full {
    height: 100%;
    max-height: none;
  }

  #tab-chat > div:first-child,
  #dm-conversation-panel,
  #stranger-chat-view {
    height: calc(var(--app-visual-height, 100dvh) - 7.4rem) !important;
  }

  .chat-panel-composer {
    margin: 0;
    padding-bottom: max(0.3rem, env(safe-area-inset-bottom));
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }

  .message-composer-shell {
    gap: 0.25rem;
    padding: 0.25rem 0.3rem;
  }

  .message-composer-shell .chat-composer-icon-btn {
    width: 2.45rem;
    height: 2.45rem;
  }

  .message-composer-shell .chat-composer-input {
    min-height: 2.45rem;
    padding: 0.48rem 0.2rem;
    font-size: 0.875rem;
    line-height: 1.3;
  }

  .message-composer-shell .chat-composer-send-btn {
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    justify-content: center;
  }

  .message-composer-shell .chat-composer-send-btn span {
    display: none;
  }

  #media-popup-modal .media-popup-heading,
  #media-popup-modal .media-popup-heading > div:last-child {
    min-width: 0;
  }

  #media-popup-modal .media-popup-hint {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.68rem;
  }

  #media-popup-modal .media-source-row {
    gap: 0.25rem;
  }

  #media-popup-modal .media-source-label {
    font-size: 0.7rem;
  }

  #media-popup-modal .media-source-button {
    padding: 0.3rem 0.42rem;
    font-size: 0.7rem;
  }
}

/* ==========================================
   KHUNG GHÉP ĐÔI GIỮA MÀN HÌNH
   ========================================== */
#tab-stranger {
  width: min(100%, 820px);
  align-self: center;
  min-height: calc(100vh - 8.25rem);
  min-height: min(760px, calc(100dvh - 8.25rem));
  max-height: calc(100vh - 8.25rem);
  max-height: calc(100dvh - 8.25rem);
  margin-inline: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--ui-radius);
  box-shadow: 0 18px 45px rgba(2, 6, 23, 0.18);
}

#stranger-idle-view,
#stranger-searching-view {
  width: min(100%, 620px);
  min-height: min(700px, calc(100vh - 8.25rem));
  min-height: min(700px, calc(100dvh - 8.25rem));
  margin-inline: auto;
}

#stranger-chat-view {
  width: 100%;
  min-height: min(760px, calc(100vh - 8.25rem));
  min-height: min(760px, calc(100dvh - 8.25rem));
  max-height: calc(100vh - 8.25rem);
  max-height: calc(100dvh - 8.25rem);
}

#stranger-chat-view > div:first-child {
  flex-shrink: 0;
}

#stranger-messages-list {
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

@media (max-width: 639px) {
  #tab-stranger {
    width: 100%;
    min-height: calc(100vh - 7rem);
    min-height: calc(100dvh - 7rem);
    max-height: none;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    box-shadow: none;
  }

  #stranger-idle-view,
  #stranger-searching-view {
    width: 100%;
    min-height: calc(100vh - 7rem);
    min-height: calc(100dvh - 7rem);
    padding-inline: 1rem;
  }

  #stranger-chat-view {
    min-height: calc(100vh - 7rem);
    min-height: calc(100dvh - 7rem);
    max-height: none;
    height: calc(100vh - 7rem);
    height: calc(100dvh - 7rem);
  }

  #stranger-chat-view > div:first-child {
    padding-inline: 0.75rem;
  }

  #stranger-chat-view > div:first-child > div:first-child {
    align-items: flex-start;
  }

  #stranger-chat-view > div:first-child > div:first-child > div:last-child {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 0.1rem;
  }

  #stranger-chat-view > div:first-child > div:first-child > div:last-child button {
    flex-shrink: 0;
  }
}

/*
 * Các khu vực chat dùng chung luồng cuộn của trang, giống Bảng tin.
 * Trước đây chúng bị khóa theo chiều cao viewport nên tin nhắn dài bị nhốt
 * trong một ô cuộn riêng và phần thân trang không thể vuốt tiếp xuống.
 */
#tab-chat,
#tab-messages,
#tab-stranger {
  flex: none !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

#tab-chat > div:first-child,
#tab-chat > aside,
#dm-sidebar-panel,
#dm-conversation-panel,
#stranger-chat-view,
#stranger-idle-view,
#stranger-searching-view {
  flex: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

#chat-messages-list,
#dm-contacts-list,
#dm-messages-list,
#stranger-messages-list,
#pc-sidebar-online-list {
  flex: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  overscroll-behavior: auto;
}

@media (max-width: 639px) {
  /* Không khôi phục chiều cao viewport khi bàn phím mở hoặc ở màn hình nhỏ. */
  html[data-keyboard-open] #tab-chat > div:first-child,
  html[data-keyboard-open] #dm-conversation-panel,
  html[data-keyboard-open] #stranger-chat-view,
  #tab-chat > div:first-child,
  #dm-sidebar-panel,
  #dm-conversation-panel,
  #stranger-chat-view {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

/* Ghép đôi là một màn hình độc lập, không kéo dài theo thân trang. */
body:has(#tab-stranger:not(.hidden)) {
  overflow: hidden;
  overscroll-behavior: none;
}

body:has(#tab-stranger:not(.hidden)) #app-shell > main {
  min-height: 0;
  overflow: hidden;
}

body:has(#tab-stranger:not(.hidden)) #site-footer {
  display: none;
}

#tab-stranger {
  flex: 0 0 auto !important;
  height: calc(100dvh - 8.25rem) !important;
  min-height: calc(100dvh - 8.25rem) !important;
  max-height: calc(100dvh - 8.25rem) !important;
  overflow: hidden !important;
  overscroll-behavior: none;
}

#tab-stranger > #stranger-idle-view,
#tab-stranger > #stranger-searching-view,
#tab-stranger > #stranger-chat-view {
  flex: 1 1 auto !important;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}

#tab-stranger > #stranger-chat-view {
  min-height: 0 !important;
}

#tab-stranger #stranger-messages-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

@media (max-width: 639px) {
  #tab-stranger {
    height: calc(var(--app-visual-height, 100dvh) - 7rem) !important;
    min-height: calc(var(--app-visual-height, 100dvh) - 7rem) !important;
    max-height: calc(var(--app-visual-height, 100dvh) - 7rem) !important;
  }
}

.color-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 14px;
  border-radius: 9999px;
  outline: none;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.2);
}
.color-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid var(--accent-color);
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  cursor: grab;
}

.hue-rainbow-track {
  background: linear-gradient(to right,
    hsl(0, 90%, 55%),
    hsl(60, 90%, 55%),
    hsl(120, 90%, 55%),
    hsl(180, 90%, 55%),
    hsl(240, 90%, 55%),
    hsl(300, 90%, 55%),
    hsl(360, 90%, 55%)
  );
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.25);
  border-radius: 9999px;
}

@keyframes popIn {
  0% { opacity: 0; transform: scale(0.98) translateY(3px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.animate-pop {
  animation: popIn 0.16s ease-out forwards;
}

@keyframes radarPulse {
  0% { transform: scale(0.85); opacity: 0.8; }
  70% { transform: scale(1.65); opacity: 0; }
  100% { transform: scale(1.65); opacity: 0; }
}
.radar-ring {
  animation: radarPulse 2s infinite cubic-bezier(0.2, 0.8, 0.4, 1);
}

/* ==========================================
   THỐNG KÊ HỒ SƠ
   ========================================== */
.profile-stat-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.5rem;
  border-radius: var(--ui-radius-sm);
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-color);
  min-width: 72px;
  white-space: nowrap;
}

.dm-notification-bubble-stack {
  position: fixed;
  top: max(0.75rem, env(safe-area-inset-top));
  right: max(0.75rem, env(safe-area-inset-right));
  z-index: 95;
  display: flex;
  width: min(22rem, calc(100vw - 1.5rem));
  flex-direction: column;
  gap: 0.55rem;
  pointer-events: none;
}

.dm-notification-bubble-trash-zone {
  position: fixed;
  left: 50%;
  bottom: max(0.8rem, env(safe-area-inset-bottom));
  z-index: 1;
  display: flex;
  min-width: 10.5rem;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 0.85rem;
  color: #fff;
  background: rgba(225, 29, 72, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  box-shadow: 0 16px 32px rgba(225, 29, 72, 0.32);
  font-size: 0.7rem;
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 1.1rem) scale(0.9);
  transition: opacity 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.dm-notification-bubble-stack.is-dragging .dm-notification-bubble-trash-zone {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.dm-notification-bubble-stack.is-over-trash .dm-notification-bubble-trash-zone {
  background: #be123c;
  transform: translate(-50%, 0) scale(1.06);
}

.dm-notification-bubble {
  display: flex;
  min-height: 4.25rem;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 0.7rem 0.75rem 0.8rem;
  color: var(--text-main);
  background: color-mix(in srgb, var(--bg-surface) 94%, var(--accent-color));
  border: 1px solid var(--accent-ring);
  border-radius: 1rem;
  box-shadow: 0 18px 38px -18px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.04);
  cursor: pointer;
  opacity: 0;
  pointer-events: auto;
  transform: translateY(-0.75rem);
  touch-action: none;
  user-select: none;
  transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.16s ease;
}

.dm-notification-bubble.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.dm-notification-bubble:hover,
.dm-notification-bubble:focus-visible {
  outline: none;
  box-shadow: 0 20px 42px -18px rgba(0, 0, 0, 0.9), 0 0 0 2px var(--accent-ring);
}

.dm-notification-bubble.is-dragging {
  transition: none;
  cursor: grabbing;
}

.dm-notification-bubble.is-dismissing {
  opacity: 0;
  transform: translate3d(0, -0.75rem, 0) scale(0.96);
}

.dm-voice-call-bubble {
  border-color: color-mix(in srgb, #10b981 68%, var(--border-color));
  box-shadow: 0 20px 42px -18px rgba(16, 185, 129, 0.9), 0 0 0 1px rgba(16, 185, 129, 0.35);
  animation: dm-voice-bubble-glow 1.6s ease-in-out infinite;
}

.dm-voice-call-bubble .dm-notification-bubble-name::before {
  content: 'Đang gọi thoại';
  color: #10b981;
}

@keyframes dm-voice-bubble-glow {
  0%, 100% { box-shadow: 0 20px 42px -18px rgba(16, 185, 129, 0.78), 0 0 0 1px rgba(16, 185, 129, 0.28); }
  50% { box-shadow: 0 20px 42px -14px rgba(16, 185, 129, 0.98), 0 0 0 4px rgba(16, 185, 129, 0.08); }
}

.dm-notification-bubble-avatar {
  display: inline-flex;
  width: 2.45rem;
  height: 2.45rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--dm-notification-avatar-color, #ec4899);
  border-radius: 0.8rem;
  font-size: 1.25rem;
  box-shadow: 0 6px 16px -8px var(--dm-notification-avatar-color, #ec4899);
}

.dm-notification-bubble-body {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 0.15rem;
}

.dm-notification-bubble-name,
.dm-notification-bubble-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dm-notification-bubble-name {
  font-size: 0.78rem;
  font-weight: 800;
}

.dm-notification-bubble-name::before {
  content: 'Tin nhắn mới';
  display: block;
  color: var(--accent-color);
  font-size: 0.64rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.dm-notification-bubble-preview {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
}

.dm-notification-bubble-dismiss {
  display: inline-flex;
  width: 1.7rem;
  height: 1.7rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
}

.dm-notification-bubble-dismiss:hover,
.dm-notification-bubble-dismiss:focus-visible {
  color: var(--text-main);
  background: var(--accent-soft);
  outline: none;
}

@media (max-width: 639px) {
  .dm-notification-bubble-stack {
    top: max(0.5rem, env(safe-area-inset-top));
    right: 0.5rem;
    width: calc(100vw - 1rem);
  }

  .dm-notification-bubble-trash-zone {
    bottom: max(0.7rem, env(safe-area-inset-bottom));
  }
}

/* Giữ nút đóng ở đầu popup khi nội dung bên trong cuộn dài. */
#create-story-modal > .surface-card > .flex.items-center.justify-between.border-b,
#media-popup-modal > .surface-card > .flex.items-center.justify-between.border-b,
#emoji-popup-modal > .surface-card > div:first-child,
#account-switcher-modal > .surface-card > .flex.items-center.justify-between.border-b,
#notification-settings-modal > .surface-card > .flex.items-center.justify-between.border-b,
#password-setup-modal > .surface-card > .flex.items-center.justify-between.border-b,
#feed-create-modal > .w-full > div:first-child,
#post-comments-modal > .surface-card > .border-b,
#reaction-members-modal .reaction-members-dialog > .border-b {
  position: sticky !important;
  top: 0;
  z-index: 8;
  background: var(--bg-surface);
}

/* Override cuối để mọi ô nhập luôn có đường viền riêng theo theme. */
.chat-composer-shell,
.message-composer-shell,
#feed-post-content,
#story-caption-input,
#modal-comment-input,
#viewer-comment-input,
#profile-review-input,
[id^="feed-comment-input-"] {
  border-color: var(--input-border-color) !important;
}

.chat-composer-shell:focus-within,
.message-composer-shell:focus-within,
#feed-post-content:focus,
#story-caption-input:focus,
#modal-comment-input:focus,
#viewer-comment-input:focus,
#profile-review-input:focus,
[id^="feed-comment-input-"]:focus {
  border-color: var(--input-border-focus) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--input-border-focus) 24%, transparent), 0 4px 16px rgba(0, 0, 0, 0.14) !important;
}


/* Border alignment for header-touching panels and feed media */
#tab-feed > div:first-child > div:first-child,
#tab-chat > div:first-child,
#dm-sidebar-panel,
#dm-conversation-panel {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

/* Keep post media edges aligned with the outer post border. */
#feed-posts-list .feed-post-card > .feed-media-bleed {
  width: calc(100% + 2px) !important;
  margin-left: -1px !important;
}

/* The private conversation header should not show a divider below the nickname. */
#dm-conversation-panel > div:first-child {
  border-bottom: 0 !important;
  border-bottom-color: transparent !important;
  border-radius: 0 !important;
}

/* Add a small breathing space before the private message composer. */
#dm-conversation-panel > #dm-composer-form {
  margin-top: 0.55rem !important;
}


/* Keep the demo cover size and owner tools; use the original gocnho.us gallery inside. */
#profile-wall-media-layer, #profile-wall-prev, #profile-wall-next, #profile-wall-counter { display: none !important; }
#profile-cover-banner .gn-cover-media { z-index: 1; }
#profile-cover-banner .gn-cover-track { border-radius: inherit; }
#profile-cover-banner #profile-change-cover-btn { z-index: 5; }


/* Private inbox header: square top edge and no bottom divider */
#dm-sidebar-panel > div:first-child {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom: 0 !important;
  border-bottom-color: transparent !important;
}


/* Private message composer: keep side breathing room and soft four-corner radius */
#dm-conversation-panel > #dm-composer-form {
  width: calc(100% - 1.5rem) !important;
  max-width: calc(100% - 1.5rem) !important;
  margin-left: 0.75rem !important;
  margin-right: 0.75rem !important;
  border-radius: 1rem !important;
}

/* Keep the edit-post dialog above feed cards, media viewers and menus. */
#post-edit-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  isolation: isolate !important;
}
#post-edit-modal:not(.hidden) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
#post-edit-modal.hidden {
  display: none !important;
}
#post-edit-modal > * {
  position: relative;
  z-index: 1;
}

/* One compact row of every reaction and a dense, ungrouped member list. */
#reaction-members-modal { z-index: 2147482900 !important; }
#reaction-members-modal .reaction-members-dialog { width: min(100%, 25rem) !important; max-width: 25rem !important; max-height: min(80dvh, 38rem) !important; margin: auto; border: 1px solid var(--border-color); border-radius: 1rem !important; overflow: hidden !important; }
#reaction-members-modal .reaction-members-header { position: relative !important; display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 2.75rem; padding: .45rem .7rem; flex: 0 0 auto; border-bottom: 1px solid var(--border-color); background: var(--bg-surface); color: var(--text-main); }
#reaction-members-modal #reaction-members-title { margin: 0; color: var(--text-main) !important; font-size: .88rem !important; line-height: 1.3; font-weight: 750 !important; letter-spacing: 0; }
#reaction-members-modal .reaction-members-close { position: static !important; z-index: 2; display: grid; place-items: center; flex: 0 0 1.9rem; width: 1.9rem; height: 1.9rem; padding: 0; margin: 0; border: 1px solid var(--border-color); border-radius: 50%; background: var(--bg-elevated); color: var(--text-main); box-shadow: none; cursor: pointer; touch-action: manipulation; }
#reaction-members-modal .reaction-members-close svg { width: 1rem; height: 1rem; pointer-events: none; }
#reaction-members-modal .reaction-members-close:hover { background: var(--accent-soft); color: var(--accent-color); }
#reaction-members-modal .reaction-members-close:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }
#reaction-members-modal .reaction-members-body { display: flex !important; flex-direction: column !important; flex: 1 1 auto; min-height: 0; padding: 0 !important; gap: 0 !important; overflow: hidden !important; }
#reaction-members-modal .reaction-members-summary { display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-start; flex: 0 0 auto; gap: .2rem; padding: .4rem .55rem; margin: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; border-bottom: 1px solid var(--border-color); }
#reaction-members-modal .reaction-members-summary-row { display: inline-flex; align-items: center; justify-content: flex-start; flex: 0 0 auto; min-height: 1.8rem; min-width: 0; width: auto; gap: .2rem; margin: 0; padding: .2rem .3rem; border: 1px solid transparent; border-radius: .5rem; background: var(--accent-soft); white-space: nowrap; }
#reaction-members-modal .reaction-members-summary-row.is-zero { background: transparent; opacity: .68; }
#reaction-members-modal .reaction-members-summary-icon, #reaction-members-modal .reaction-member-reaction { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 1.1rem; width: 1.1rem; min-width: 1.1rem; height: 1.1rem; margin: 0; font-size: 1rem; line-height: 1; }
#reaction-members-modal .reaction-members-glyph, #reaction-members-modal .reaction-members-summary-icon img, #reaction-members-modal .reaction-member-reaction img { display: inline-block; width: 1.1rem; height: 1.1rem; object-fit: contain; font-size: 1rem; line-height: 1.1rem; }
#reaction-members-modal .reaction-members-summary-count { margin: 0; padding: 0; min-width: 0; color: var(--text-main); font-size: .74rem; line-height: 1; font-weight: 750; font-variant-numeric: tabular-nums; text-align: left; }
#reaction-members-modal .reaction-members-flat-list { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; gap: 0; padding: .15rem .4rem .35rem; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
#reaction-members-modal .reaction-member-item { display: flex; align-items: center; flex: 0 0 auto; gap: .5rem; width: 100%; min-height: 2.25rem !important; margin: 0; padding: .2rem .3rem !important; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--border-color) 55%, transparent); border-radius: .4rem !important; background: transparent; color: var(--text-main); }
#reaction-members-modal .reaction-member-item:last-child { border-bottom-color: transparent; }
#reaction-members-modal .reaction-member-item:hover, #reaction-members-modal .reaction-member-item:focus-visible { background: var(--accent-soft); transform: none; }
#reaction-members-modal .reaction-member-avatar { position: relative; flex: 0 0 1.75rem; width: 1.75rem; height: 1.75rem; font-size: .95rem; box-shadow: none; }
#reaction-members-modal .reaction-member-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; line-height: 1.25; font-weight: 650; }
#reaction-members-modal .reaction-member-reaction { margin-left: auto; }
#reaction-members-modal .reaction-members-loading, #reaction-members-modal .reaction-members-empty { padding: 1.5rem .8rem; font-size: .8rem; }
@media (max-width: 640px) {
  #reaction-members-modal { align-items: flex-end !important; padding: 0 !important; padding-top: env(safe-area-inset-top) !important; }
  #reaction-members-modal .reaction-members-dialog { width: 100% !important; max-width: none !important; min-height: 75dvh; height: auto; max-height: calc(100dvh - env(safe-area-inset-top)) !important; margin: 0 !important; border-radius: 1rem 1rem 0 0 !important; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom); }
  #reaction-members-modal .reaction-members-header { padding: .4rem .6rem; }
  #reaction-members-modal .reaction-members-summary { gap: .15rem; padding: .35rem .4rem; }
  #reaction-members-modal .reaction-members-summary-row { padding-inline: .25rem; }
  #reaction-members-modal .reaction-members-flat-list { padding-inline: .35rem; }
  #reaction-members-modal .reaction-member-item { min-height: 2.4rem !important; }
}

#reaction-members-modal .reaction-member-avatar .avatar-image-frame { inset:50% auto auto 50%;width:calc(100% * var(--avatar-frame-scale,1.35));height:calc(100% * var(--avatar-frame-scale,1.35));transform:translate(-50%,-50%); }
#reaction-members-modal .reaction-member-avatar .avatar-image-frame[hidden] { display: none; }

/* Comment header colors use the actual selected surface, including light tones. */
#post-comments-modal { z-index: 69 !important; }
#post-comments-modal #post-comments-header {
  position: relative !important; z-index: 130 !important; isolation: isolate;
  display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto;
  min-height: 3rem !important; gap: .5rem; padding: .55rem .75rem !important;
  color: var(--text-main, #0f172a) !important; background: var(--bg-elevated, #f8fafc) !important;
  border-bottom: 1px solid var(--border-color, #e2e8f0) !important;
}
#post-comments-modal #modal-post-title {
  max-width: calc(100% - 5rem); margin: 0 auto !important; overflow: hidden;
  color: var(--text-main, #0f172a) !important; -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important; mix-blend-mode: normal; filter: none;
  font-size: .92rem !important; font-weight: 800 !important; line-height: 1.25 !important;
  text-align: center; text-overflow: ellipsis; white-space: nowrap;
}
#post-comments-modal #post-comments-close {
  position: relative !important; z-index: 1; display: grid !important; place-items: center;
  width: 2.25rem !important; height: 2.25rem !important; min-width: 2.25rem !important;
  flex: 0 0 2.25rem; margin: 0; padding: 0; pointer-events: auto !important; touch-action: manipulation;
  color: var(--text-main, #0f172a) !important; background: var(--bg-surface, #fff) !important;
  border: 1px solid var(--border-color, #e2e8f0) !important; border-radius: 50% !important;
}
#post-comments-modal #post-comments-close svg { width: 1rem; height: 1rem; pointer-events: none; stroke: currentColor; }
#post-comments-modal #post-comments-close:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }
/* Zoom comments share the inner styling; the panel height is deliberately untouched. */
#viewer-sidebar-header { padding: .55rem .75rem !important; color: var(--text-main, #0f172a); background: var(--bg-elevated, #f8fafc) !important; border-bottom: 1px solid var(--border-color); }
#viewer-sidebar-header > div:first-child { gap: .6rem; }
#viewer-sidebar-header > div:first-child > button { width: 2rem; height: 2rem; font-size: 1rem; box-shadow: none; }
#viewer-sidebar-header button.font-extrabold { font-size: .88rem; line-height: 1.3; }
#viewer-sidebar-header button[onclick*="toggleMobileViewerDrawer"] { line-height: 2rem; text-align: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--border-color); border-radius: 50%; background: var(--bg-surface); color: var(--text-main); }
#viewer-sidebar-body { padding: .45rem .65rem !important; color: var(--text-main); }
#viewer-sidebar-body > div:first-child { padding-bottom: .2rem !important; border-bottom: 1px solid var(--border-color); }
#viewer-sidebar-body > div:first-child > div[class*="border-t"] { min-height: 2.2rem; padding: .3rem 0; margin-top: .25rem; border-top: 1px solid var(--border-color); gap: .4rem; }
#post-comments-modal [data-modal-comments-list], #viewer-sidebar-body [data-viewer-comments-list] { display: flex; flex-direction: column; gap: .35rem !important; }
#post-comments-modal [data-modal-comments-list] > *, #viewer-sidebar-body [data-viewer-comments-list] > * { margin-block: 0 !important; }
#viewer-sidebar-body [data-viewer-comments-list] { padding: .45rem 0; }
#viewer-sidebar-body .comment-bubble-box { color: var(--text-main); border-color: var(--border-color); }
#viewer-sidebar-body .comment-content-wrap > .comment-bubble-box p { font-size: .92rem; line-height: 1.38; }
#post-comments-modal > .surface-card > div:last-child, #viewer-sidebar-panel > div:last-child { padding: .65rem .75rem !important; background: var(--bg-elevated, #f8fafc); border-top-color: var(--border-color); }
#post-comments-modal .chat-composer-shell, #viewer-sidebar-panel .chat-composer-shell { align-items: center; gap: .35rem; padding: .4rem .45rem; border-radius: .9rem; background: var(--bg-surface); }
#post-comments-modal .chat-composer-input, #viewer-sidebar-panel .chat-composer-input { min-width: 0; flex: 1; height: 2.7rem; padding: .55rem .75rem !important; color: var(--text-main); background: var(--bg-elevated, #fff) !important; border: 1px solid var(--border-color) !important; border-radius: .9rem !important; box-shadow: none !important; outline: none; -webkit-appearance: none; appearance: none; }
@media (max-width: 640px) {
  #post-comments-modal #post-comments-header { padding: .5rem .65rem !important; }
  #viewer-sidebar-body .comment-content-wrap > .comment-bubble-box p { font-size: 1rem; line-height: 1.42; }
}

#post-comments-modal #modal-post-body {
  color: var(--text-main) !important;
}
#post-comments-modal #modal-post-body > .comment-modal-post-preview {
  gap: .25rem !important;
  padding-bottom: .2rem !important;
}
#post-comments-modal #modal-post-body > .comment-modal-post-preview > div[class*="border-t"] {
  min-height: 2.2rem !important;
  padding: .3rem .65rem !important;
  border-top: 1px solid var(--border-color) !important;
  border-bottom: 0 !important;
  gap: .4rem !important;
}
#post-comments-modal .comment-modal-reaction-summary {
  display: flex !important;
  align-items: center !important;
  min-height: 2rem !important;
  margin: 0 !important;
  padding: .2rem .65rem !important;
  color: var(--text-main) !important;
  border-bottom: 1px solid var(--border-color) !important;
}
#post-comments-modal .comment-modal-reaction-summary > * {
  color: var(--text-main) !important;
}
#post-comments-modal [data-modal-comments-list] {
  gap: .35rem !important;
  padding: .45rem .65rem !important;
}
#post-comments-modal [data-modal-comments-list] .comment-bubble-box {
  border-color: var(--border-color) !important;
}
@media (max-width: 640px) {
  #post-comments-modal .comment-sheet-handle + div { padding: .5rem .65rem !important; }
  #post-comments-modal #modal-post-title { font-size: .86rem !important; }
}
.button:hras(.block-action-icon) { display:inline-flex; align-items:center; gap:.35rpem;}
.block-action-icon { width: .9rem; height: .9rem; flex: 0 0 auto;}
/* Complete share card: the preview and downloaded PNG use the same image. */
#share-popup-modal .share-popup-card { width: min(100%, 29rem) !important; max-width: 29rem !important; max-height: calc(100dvh - 1.5rem) !important; border: 1px solid var(--border-color); }
#share-popup-modal .share-popup-header { padding: .8rem 1rem !important; background: var(--bg-surface); }
#share-popup-modal .share-popup-header h3 { font-size: .98rem; line-height: 1.3; }
#share-popup-modal .share-popup-header p { font-size: .7rem; font-weight: 500; }
#share-popup-modal .share-popup-close { position: static !important; display: grid; place-items: center; flex: 0 0 2.1rem; width: 2.1rem; height: 2.1rem; margin: 0 0 0 auto; padding: 0; border: 1px solid var(--border-color); border-radius: 50%; background: var(--bg-elevated); color: var(--text-main); box-shadow: none; }
#share-popup-modal .share-popup-close:hover { background: var(--accent-soft); color: var(--accent-color); }
#share-popup-modal .share-popup-close svg { width: 1rem; height: 1rem; }
#share-popup-modal .share-popup-body { gap: .65rem; padding: .8rem 1rem 1rem !important; }
#share-popup-modal .share-popup-qr-frame { width: min(15.25rem, 68vw) !important; aspect-ratio: 7 / 8; margin: 0 auto .15rem !important; padding: 0 !important; overflow: hidden; border: 1px solid #eadcf4 !important; border-radius: 1.1rem !important; background: linear-gradient(135deg, #fff0f5, #eee8ff) !important; box-shadow: 0 .5rem 1.4rem rgba(101, 65, 125, .12) !important; }
#share-popup-modal #share-popup-qr { display: block; width: 100% !important; height: 100% !important; padding: 0 !important; border-radius: 0 !important; background: transparent; box-shadow: none; }
#share-popup-modal .share-popup-qr-frame[data-qr-state="loading"] #share-popup-qr, #share-popup-modal .share-popup-qr-frame[data-qr-state="error"] #share-popup-qr { visibility: hidden; }
#share-popup-qr-status { position: absolute; inset: 0; display: grid; align-content: center; padding: 1.5rem; color: #75456d; font-size: .8rem; text-align: center; }
#share-popup-qr-status.hidden { display: none; }
#share-popup-modal .share-popup-link-row { margin: 0; }
#share-popup-modal .share-popup-copy { font-size: .7rem; }
#share-popup-modal .share-popup-download { min-height: 2.35rem; background: linear-gradient(120deg, #b44385, #7861b9); color: #fff; border: 0; border-radius: .8rem; font-size: .8rem; }
#share-popup-modal .share-popup-download:disabled { opacity: .55; cursor: wait; }
#share-popup-modal .share-popup-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin-top: .15rem; }
#share-popup-modal .share-popup-actions button { min-height: 4.15rem; padding: .45rem .15rem !important; gap: .35rem; border-radius: .85rem !important; background: var(--bg-surface) !important; }
#share-popup-modal .share-popup-actions button small { font-weight: 600; font-size: .65rem; }
#share-popup-modal .share-popup-actions .share-channel-icon { display: grid; place-items: center; width: 2rem; height: 2rem; margin: 0; border-radius: .65rem; color: #fff; box-shadow: none; }
#share-popup-modal .share-channel-icon svg { width: 1.15rem !important; height: 1.15rem !important; fill: currentColor; stroke: none; }
#share-popup-modal .share-channel-icon.facebook { background: #0866ff; }
#share-popup-modal .share-channel-icon.zalo { background: #0068ff; }
#share-popup-modal .share-channel-icon.instagram { background: linear-gradient(35deg, #ffdc80, #f77737 24%, #e1306c 55%, #833ab4 85%); }
#share-popup-modal .share-channel-icon.telegram { background: #26a5e4; }
#share-popup-modal .share-channel-icon.messenger { background: linear-gradient(145deg, #00b2ff, #6a42ff 55%, #ff5d89); }
#share-popup-modal .share-channel-icon.whatsapp { background: #25d366; }
#share-popup-modal .share-channel-icon.native { background: var(--accent-soft); color: var(--accent-color); }
#share-popup-modal .share-channel-icon.native svg { fill: none; stroke: currentColor; stroke-width: 2; }
@media (max-width: 640px) {
  #share-popup-modal { align-items: center !important; padding: .5rem !important; padding-bottom: max(.5rem, env(safe-area-inset-bottom)) !important; }
  #share-popup-modal .share-popup-card { max-height: calc(100svh - 1rem) !important; }
  #share-popup-modal .share-popup-header { padding: .65rem .75rem !important; }
  #share-popup-modal .share-popup-body { padding: .65rem .75rem .75rem !important; gap: .55rem; }
  #share-popup-modal .share-popup-qr-frame { width: min(15rem, 62vw, calc((100svh - 23rem) * .875)) !important; min-width: 9rem; }
  #share-popup-modal .share-popup-actions { gap: .4rem; }
  #share-popup-modal .share-popup-actions button { min-height: 3.8rem; }
}

/* Unified desktop frame for every main tab. */
html { scrollbar-gutter: stable; }
@media (min-width: 768px) {
  main.app-container > section[id^="tab-"] { width: min(100%, 68rem) !important; max-width: 68rem !important; margin-inline: auto !important; box-sizing: border-box; }
  #tab-chat, #tab-messages, #tab-stranger, #tab-feed { min-height: calc(100dvh - 8.75rem); align-content: start; border-radius: 1.25rem; }
  #tab-chat > *, #tab-messages > *, #tab-stranger > *, #tab-feed > * { min-width: 0; }
  #tab-chat, #tab-messages { grid-template-columns: minmax(0, 1fr) !important; }
  #tab-chat > div:first-child, #dm-sidebar-panel, #dm-conversation-panel { grid-column: 1 / -1 !important; width: 100% !important; min-width: 0; }
}
/* Match the visible feed column, including its existing desktop width cap. */
@media (min-width: 1024px) {
  main.app-container > :is(#tab-chat, #tab-messages, #tab-stranger, #tab-feed, #tab-profile) { width: min(66.6667%, 45.3333333333rem) !important; max-width: 45.3333333333rem !important; margin-inline: auto !important; }
  #tab-feed > div:first-child { grid-column: 1 / -1 !important; width: 100% !important; min-width: 0; }
}
@media (max-width: 767px) {
  #tab-chat, #tab-messages, #tab-stranger, #tab-feed, #tab-profile { width: 100%; }
}

/* Profile access is independent from public feed and chat visibility. */
#tab-profile[data-profile-restricted] > :not(#profile-privacy-notice) { display:none !important; }
.profile-privacy-notice[hidden] { display:none !important; }
.profile-privacy-notice { padding:clamp(2rem,7vw,4rem) 1.25rem; text-align:center; border-radius:0 0 1.25rem 1.25rem; }
.profile-privacy-symbol { display:flex; align-items:center; justify-content:center; width:4rem; height:4rem; margin:0 auto 1.15rem; border-radius:50%; background:var(--bg-elevated); color:var(--accent-color); }
.profile-privacy-symbol svg { width:1.8rem; height:1.8rem; }
.profile-privacy-notice h2 { margin:0 0 .65rem; font-size:1.15rem; font-weight:800; color:var(--text-main); }
.profile-privacy-notice p { max-width:25rem; margin:0 auto 1.35rem; line-height:1.65; font-size:.875rem; color:var(--text-muted); }
.profile-privacy-notice button { border:0; border-radius:.85rem; padding:.7rem 1rem; font-size:.8rem; font-weight:800; }
.profile-privacy-setting { display:flex; align-items:center; gap:1rem; padding:1rem; border:1px solid var(--border-color); border-radius:1rem; background:var(--bg-elevated); cursor:pointer; }
.profile-privacy-setting-copy { flex:1; min-width:0; }
.profile-privacy-setting-title { display:flex; align-items:center; gap:.5rem; font-size:.9rem; font-weight:800; }
.profile-privacy-setting-title svg { width:1rem; height:1rem; flex-shrink:0; }
.profile-privacy-setting small { display:block; margin-top:.4rem; line-height:1.6; font-size:.75rem; color:var(--text-muted); }
#profile-privacy-status { display:block; margin-top:.5rem; font-size:.7rem; font-weight:700; color:var(--accent-color); }
.profile-privacy-setting input { flex-shrink:0; }


.dm-privacy-status{display:block;margin-top:.5rem;font-size:.7rem;font-weight:700;color:var(--accent-color)}

/* Comment sheets have one viewport owner and an in-flow composer. */
.comment-sheet-footer {
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
  padding: .55rem .65rem;
  border-top: 1px solid var(--border-color);
  background: var(--bg-surface);
}
.comment-composer { margin: 0; align-items: flex-end; }
.comment-composer textarea.chat-composer-input {
  box-sizing: border-box;
  display: block;
  height: 2.7rem;
  min-height: 2.7rem;
  max-height: 7rem;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 500;
  resize: none;
  overscroll-behavior: contain;
}
#post-comments-modal > .surface-card > .comment-sheet-footer,
#viewer-sidebar-panel > .comment-sheet-footer {
  position: relative;
  inset: auto;
  margin: 0;
  width: 100%;
  box-shadow: none;
}
#modal-post-body, #viewer-sidebar-body {
  min-height: 0;
  overscroll-behavior: contain;
  overflow-anchor: auto;
}
@media (max-width: 1023px) {
  #post-comments-modal, #fb-tiktok-media-viewer {
    position: fixed;
    top: var(--app-visual-top, 0px);
    bottom: auto;
    left: 0;
    right: 0;
    height: var(--app-visual-height, 100dvh);
    min-height: 0;
    max-height: none;
    padding: 0;
    overflow: hidden;
    transform: none;
    animation: none;
    overscroll-behavior: none;
  }
  #post-comments-modal > .surface-card {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    margin: 0;
    border-radius: 1rem 1rem 0 0 !important;
    transform: none;
    animation: none;
  }
  #post-comments-modal #modal-post-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: .75rem;
  }
  #post-comments-modal #post-comments-header {
    flex: 0 0 auto;
    min-height: 2.6rem;
    padding: .2rem .75rem .45rem;
    border-bottom: 1px solid var(--border-color);
  }
  #post-comments-modal #modal-post-title { display: block; font-size: .875rem; }
  #post-comments-modal .comment-sheet-handle { margin: .45rem auto .15rem; height: .25rem; }
  #viewer-sidebar-panel {
    position: absolute;
    inset: auto 0 0;
    height: min(72vh, var(--app-visual-height, 100dvh));
    max-height: 100%;
    min-height: 0;
    transform: none;
  }
  html[data-keyboard-open] #viewer-sidebar-panel { height: 100%; }
  #post-comments-modal > .surface-card > .comment-sheet-footer,
  #viewer-sidebar-panel > .comment-sheet-footer {
    flex: 0 0 auto;
    padding: .5rem .65rem calc(.5rem + env(safe-area-inset-bottom)) !important;
  }
  html[data-keyboard-open] :is(.modal-comment-footer, .viewer-comment-footer) {
    padding-bottom: .5rem !important;
  }
  :is(#post-comments-modal, #viewer-sidebar-panel) .comment-composer {
    position: relative;
    inset: auto;
    width: 100%;
    border: 0;
    padding: .15rem;
    box-shadow: none;
  }
}

/* Mobile DM layout stays the same before, during and after keyboard animation. */
@media (max-width:767px) {
  body:has(#tab-messages[data-dm-chat-open]:not(.hidden)) { overflow:hidden; overscroll-behavior:none; }
  body:has(#tab-messages[data-dm-chat-open]:not(.hidden)) #app-shell > header {
    position:fixed; top:var(--app-visual-top,0px); left:0; right:0;
    transform:none !important; transition:none !important;
  }
  #tab-messages[data-dm-chat-open] #dm-conversation-panel {
    position:fixed; top:calc(var(--app-visual-top,0px) + var(--app-header-height,3.8rem)); left:0; right:0;
    width:100% !important; height:calc(var(--app-visual-height,100dvh) - var(--app-header-height,3.8rem) - var(--app-mobile-nav-height,calc(3.5rem + 2px + env(safe-area-inset-bottom)))) !important;
    min-height:0 !important; max-height:none !important; margin:0;
    overflow:hidden !important; flex-direction:column; transform:none; transition:none;
  }
  html[data-keyboard-open]:has(#tab-messages[data-dm-chat-open]:not(.hidden)) #mobile-main-nav {
    display:none !important;
  }
  html[data-keyboard-open] #tab-messages[data-dm-chat-open] #dm-conversation-panel {
    height:calc(var(--app-visual-height,100dvh) - var(--app-header-height,3.8rem)) !important;
  }
  #tab-messages[data-dm-chat-open] #dm-conversation-panel > div:first-child { flex:0 0 auto; order:0; }
  #tab-messages[data-dm-chat-open] #dm-conversation-panel > #dm-composer-form {
    position:relative !important; inset:auto !important; flex:0 0 auto; order:1;
    width:calc(100% - 1.5rem) !important; margin:.55rem .75rem .65rem !important;
    padding:.35rem .4rem; border:1px solid var(--border-color); border-radius:1rem !important;
    box-shadow:none; transition:none; transform:none;
  }
  #tab-messages[data-dm-chat-open] #dm-conversation-panel > #dm-messages-list {
    order:2; flex:1 1 0 !important; height:auto !important; min-height:0 !important; max-height:none !important;
    overflow-y:auto !important; overscroll-behavior:contain; padding-bottom:.75rem !important;
  }
  #dm-chat-input { font-size:16px; line-height:1.4; }
}
.dm-chat-head-stack { position:fixed; right:max(.75rem,env(safe-area-inset-right)); bottom:calc(5rem + env(safe-area-inset-bottom)); z-index:86; display:flex; flex-direction:column; align-items:flex-end; gap:.7rem; pointer-events:none; }
.dm-chat-head { position:relative; width:3.4rem; height:3.4rem; pointer-events:auto; }
.dm-chat-head-open { position:relative; display:block; width:100%; height:100%; padding:3px; border:2px solid var(--accent-color,#a855f7); border-radius:50%; background:var(--bg-surface,#fff); box-shadow:0 5px 18px #17203330; cursor:pointer; touch-action:manipulation; }
.dm-chat-head-avatar,.dm-quick-chat-avatar { display:grid; place-items:center; overflow:hidden; width:100%; height:100%; border-radius:50%; font-size:1.5rem; }
:is(.dm-chat-head-avatar,.dm-quick-chat-avatar) img { width:100%; height:100%; object-fit:cover; }
.dm-chat-head-badge { position:absolute; top:-.3rem; left:-.25rem; min-width:1.25rem; padding:.1rem .3rem; border:2px solid var(--bg-surface,#fff); border-radius:2rem; background:#e63c65; color:#fff; font:800 .65rem/1.25 system-ui; }
.dm-chat-head-badge[hidden] { display:none; }
.dm-chat-head-close { position:absolute; right:-.4rem; top:-.45rem; width:1.45rem; height:1.45rem; padding:0; border:1px solid var(--border-color); border-radius:50%; background:var(--bg-surface,#fff); color:var(--text-muted,#64748b); font:600 1rem/1 system-ui; cursor:pointer; }
.dm-chat-head-preview { display:none; position:absolute; right:calc(100% + .65rem); bottom:.1rem; width:min(15rem,calc(100vw - 6rem)); padding:.6rem .75rem; border:1px solid var(--border-color); border-radius:.9rem .9rem .3rem .9rem; color:var(--text-main,#172033); background:var(--bg-surface,#fff); box-shadow:0 5px 24px #17203322; pointer-events:none; }
.dm-chat-head.has-preview .dm-chat-head-preview { display:block; }
.dm-chat-head-preview strong { display:block; margin-bottom:.15rem; font-size:.75rem; }
.dm-chat-head-preview > span { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:.75rem; line-height:1.4; overflow-wrap:anywhere; }
.dm-quick-chat-host { position:fixed; top:var(--app-visual-top,0px); left:0; width:100%; height:var(--app-visual-height,100dvh); z-index:87; pointer-events:none; }
.dm-quick-chat-host[hidden] { display:none; }
.dm-quick-chat-panel { position:absolute; right:5rem; bottom:1rem; display:flex; flex-direction:column; width:min(24rem,calc(100% - 6rem)); height:min(32rem,calc(100% - 2rem)); min-height:0; overflow:hidden; border:1px solid var(--border-color); border-radius:1.15rem; background:var(--bg-surface,#fff); color:var(--text-main,#172033); box-shadow:0 15px 55px #17203338; pointer-events:auto; }
.dm-quick-chat-header { display:flex; align-items:center; flex:0 0 auto; gap:.4rem; min-height:3.5rem; padding:.55rem .6rem; border-bottom:1px solid var(--border-color); background:var(--bg-elevated,#f8fafc); }
.dm-quick-chat-avatar { flex:0 0 2.15rem; width:2.15rem; height:2.15rem; font-size:1.25rem; }
.dm-quick-chat-heading { flex:1; min-width:0; }
.dm-quick-chat-heading strong { display:block; font-size:.85rem; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.dm-quick-chat-heading small { display:block; margin-top:.1rem; color:var(--text-muted,#64748b); font-size:.65rem; }
.dm-quick-chat-header button { display:grid; place-items:center; width:1.8rem; height:1.8rem; flex:0 0 auto; border:0; border-radius:50%; color:var(--text-muted,#64748b); background:transparent; cursor:pointer; }
.dm-quick-chat-header button:hover { color:var(--accent-color); background:var(--bg-surface); }
.dm-quick-chat-header svg { width:1rem; height:1rem; }
.dm-quick-chat-messages { display:flex; flex-direction:column; align-items:flex-start; flex:1 1 0; min-height:0; padding:.8rem; gap:.5rem; overflow-y:auto; overscroll-behavior:contain; }
.dm-quick-message { max-width:87%; padding:.5rem .7rem .3rem; border-radius:1rem 1rem 1rem .25rem; color:var(--text-main,#172033); background:var(--bg-elevated,#f1f5f9); font-size:.875rem; overflow-wrap:anywhere; }
.dm-quick-message > span { white-space:pre-wrap; }
.dm-quick-message.is-me { align-self:flex-end; border-radius:1rem 1rem .25rem 1rem; color:#fff; background:var(--accent-color,#8b5cf6); }
.dm-quick-message time { display:block; margin-top:.2rem; opacity:.65; text-align:right; font-size:.6rem; }
.dm-quick-chat-empty { margin:auto; font-size:.8rem; line-height:1.6; text-align:center; color:var(--text-muted,#64748b); }
.dm-quick-chat-status { flex:0 0 auto; margin:0; padding:.45rem .75rem; color:#be123c; background:#fff1f2; font-size:.75rem; }
.dm-quick-chat-status[hidden] { display:none; }
.dm-quick-chat-composer { display:flex; align-items:flex-end; flex:0 0 auto; gap:.45rem; padding:.6rem; border-top:1px solid var(--border-color); background:var(--bg-surface,#fff); }
#dm-quick-chat-input { display:block; height:2.6rem; min-height:2.6rem; max-height:7rem; padding:.5rem .7rem; border:1px solid var(--border-color); border-radius:1rem; background:var(--bg-elevated,#f8fafc); font-size:16px; font-weight:500; line-height:1.4; }
.dm-quick-chat-send { display:grid; place-items:center; width:2.6rem; height:2.6rem; flex:0 0 auto; border:0; border-radius:50%; background:var(--accent-color,#8b5cf6); color:#fff; cursor:pointer; }
.dm-quick-chat-send svg { width:1.1rem; height:1.1rem; }
.dm-quick-chat-send:disabled { opacity:.5; cursor:wait; }
.modal-scroll-locked :is(.dm-chat-head-stack,.dm-quick-chat-host) { visibility:hidden; }
@media(max-width:767px) {
  .dm-quick-chat-panel { right:.5rem; bottom:calc(4.75rem + env(safe-area-inset-bottom)); width:calc(100% - 1rem); height:min(30rem,calc(100% - 5.5rem - env(safe-area-inset-bottom))); }
  html[data-keyboard-open] .dm-quick-chat-panel { bottom:.5rem; height:calc(100% - 1rem); }
  html[data-keyboard-open] .dm-chat-head-stack { visibility:hidden; }
  body:has(.dm-quick-chat-host:not([hidden])) .dm-chat-head-stack { visibility:hidden; }
}

/* Complete call popup. Minimizing changes presentation, never the media session. */
#voice-call-dialog { width:min(31rem,calc(100vw - 2rem)); height:min(38rem,calc(var(--app-visual-height,100dvh) - 2rem)); max-height:calc(var(--app-visual-height,100dvh) - 2rem) !important; padding:0; overflow:hidden; border:0; border-radius:1.7rem; background:var(--bg-surface,#fff); color:var(--text-main,#172033); box-shadow:0 28px 100px #101b4459; }
#voice-call-dialog[open] { display:flex; }
#voice-call-dialog::backdrop { background:rgba(17,24,39,.65); backdrop-filter:blur(12px); }
#voice-call-dialog .voice-call-card { display:flex; flex:1; flex-direction:column; align-items:stretch; gap:0; width:100%; height:100%; min-height:0; padding:1.15rem; border:1px solid var(--border-color); border-radius:inherit; background:radial-gradient(ellipse at 50% 32%,color-mix(in srgb,var(--accent-color,#8b5cf6) 13%,transparent),transparent 65%),var(--bg-surface,#fff); box-shadow:none; }
.voice-call-top { display:flex; flex:0 0 auto; align-items:center; justify-content:space-between; gap:.5rem; }
.voice-call-top > span { display:flex; align-items:center; gap:.45rem; color:var(--text-muted,#64748b); font-size:.78rem; font-weight:700; }
.voice-call-top svg { width:1rem; height:1rem; }
.voice-call-top > button { display:grid; place-items:center; width:2.25rem; height:2.25rem; padding:0; border:1px solid var(--border-color); border-radius:50%; background:var(--bg-surface,#fff); color:var(--text-muted,#64748b); }
.voice-call-stage { display:flex; flex:1 1 auto; min-height:0; flex-direction:column; align-items:center; justify-content:center; padding:1rem .25rem; text-align:center; }
.voice-call-avatar-halo { display:grid; place-items:center; width:8rem; height:8rem; margin:0 0 1.25rem; border:1px solid color-mix(in srgb,var(--accent-color,#8b5cf6) 25%,transparent); border-radius:50%; background:color-mix(in srgb,var(--accent-color,#8b5cf6) 7%,transparent); }
#voice-call-avatar { display:grid; place-items:center; width:6.4rem; height:6.4rem; overflow:hidden; border:4px solid var(--bg-surface,#fff); border-radius:50%; font-size:3rem; box-shadow:0 10px 30px #17203322; }
#voice-call-avatar img { width:100%; height:100%; object-fit:cover; }
#voice-call-title { max-width:100%; margin:0 0 .45rem; color:var(--text-main,#172033); font-size:1.5rem; font-weight:800; line-height:1.3; overflow-wrap:anywhere; }
#voice-call-status { max-width:24rem; min-height:2.5rem; margin:0; color:var(--text-muted,#64748b); font-size:.85rem; line-height:1.5; }
#voice-call-duration { margin-top:.25rem; color:var(--accent-color,#8b5cf6); font-size:1.8rem; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:.08em; }
#voice-call-dialog .voice-call-actions { display:flex; flex:0 0 auto; justify-content:center; align-items:flex-start; gap:1.35rem; width:100%; padding:.75rem 0 1rem; }
.voice-call-actions > div { display:flex; min-width:4rem; flex-direction:column; align-items:center; gap:.55rem; }
.voice-call-actions > div[hidden] { display:none; }
.voice-call-actions > div > span { color:var(--text-muted,#64748b); font-size:.7rem; font-weight:600; }
#voice-call-dialog .voice-call-action { display:grid; place-items:center; width:3.8rem; height:3.8rem; padding:0; border:1px solid var(--border-color); border-radius:50%; background:var(--bg-elevated,#f1f5f9); color:var(--text-main,#172033); box-shadow:0 6px 18px #1720330d; }
#voice-call-dialog .voice-call-action svg { width:1.5rem; height:1.5rem; }
#voice-call-dialog .voice-call-action.is-accept { border-color:#10b981; background:#10b981; color:#fff; }
#voice-call-dialog .voice-call-action:is(.is-reject,.is-end) { border-color:#f43f5e; background:#f43f5e; color:#fff; }
#voice-call-dialog .voice-call-action.is-muted { border-color:var(--accent-color,#8b5cf6); background:var(--accent-color,#8b5cf6); color:#fff; }
#voice-call-dialog .voice-call-action:disabled { opacity:.5; cursor:wait; }
.voice-call-chat-link { display:flex; flex:0 0 auto; align-items:center; justify-content:center; gap:.4rem; padding:.65rem; border:0; border-radius:.8rem; background:transparent; color:var(--accent-color,#8b5cf6); font-size:.8rem; font-weight:700; }
.voice-call-chat-link svg { width:1rem; height:1rem; }
.voice-call-chat-link[hidden] { display:none; }
.voice-call-audio-unlock { display:flex; align-items:center; gap:.4rem; margin-top:.7rem; padding:.45rem .75rem; border:1px solid var(--accent-color); border-radius:2rem; color:var(--accent-color); background:var(--bg-surface); font-size:.75rem; }
.voice-call-audio-unlock.hidden { display:none; }
.voice-call-audio-unlock svg { width:1rem; height:1rem; }
#voice-call-dialog:is([data-call-status=incoming],[data-call-status=outgoing],[data-call-status=preparing]) .voice-call-avatar-halo { animation:voice-halo 2s ease-in-out infinite; }
#voice-call-dialog[data-call-status=error] #voice-call-status { color:#e11d48; }
#voice-call-dialog[data-call-status=error] #voice-call-duration { visibility:hidden; }
@keyframes voice-halo { 50% { box-shadow:0 0 0 .6rem color-mix(in srgb,var(--accent-color,#8b5cf6) 6%,transparent); } }
#dm-active-call-bar { margin:0; gap:.4rem; padding:.5rem .6rem; border-radius:.8rem; }
#dm-active-call-bar.hidden + div { margin-top:0 !important; }
#dm-active-call-bar .dm-active-call-main { flex:1; min-width:0; padding:0; text-align:left; }
#dm-active-call-bar .dm-active-call-copy { flex:1; min-width:0; }
#dm-active-call-bar .dm-active-call-copy strong { font-size:.78rem; }
#dm-active-call-bar .dm-active-call-copy span { font-weight:500; font-variant-numeric:tabular-nums; }
#dm-active-call-bar .dm-active-call-button { flex:0 0 auto; width:2rem; height:2rem; padding:0; }
#dm-active-call-bar .dm-active-call-button svg { width:1rem; height:1rem; }
#dm-active-call-bar .dm-active-call-button[hidden] { display:none; }
#dm-active-call-bar .is-accept { color:#fff; background:#10b981; border-color:#10b981; }
#dm-active-call-hide { color:var(--text-muted); background:transparent; border-color:transparent; }
@media(max-width:767px) {
  #voice-call-dialog { position:fixed; top:var(--app-visual-top,0px); left:0; width:100vw; max-width:100vw; height:var(--app-visual-height,100dvh); max-height:var(--app-visual-height,100dvh) !important; margin:0; border-radius:0; }
  #voice-call-dialog .voice-call-card { padding:calc(.9rem + env(safe-area-inset-top)) 1rem calc(.8rem + env(safe-area-inset-bottom)); border:0; }
  #voice-call-dialog .voice-call-actions { gap:1.15rem; }
}
@media(max-height:480px) {
  .voice-call-stage { padding:.25rem; }
  .voice-call-avatar-halo { width:5rem; height:5rem; margin-bottom:.5rem; }
  #voice-call-avatar { width:4.2rem; height:4.2rem; font-size:2rem; }
  #voice-call-title { font-size:1.1rem; }
  #voice-call-status { min-height:1.4rem; }
  #voice-call-duration { font-size:1.25rem; }
  #voice-call-dialog .voice-call-action { width:2.8rem; height:2.8rem; }
  #voice-call-dialog .voice-call-actions { padding:.25rem 0; }
}
@media(prefers-reduced-motion:reduce) { #voice-call-dialog .voice-call-avatar-halo { animation:none !important; } }

/* Compact post editor: only its body scrolls; controls remain reachable. */
#post-edit-modal { padding:16px; background:#0f172a99; backdrop-filter:blur(5px); align-items:center; justify-content:center; }
#post-edit-card { display:flex; flex-direction:column; width:100%; max-width:480px; max-height:calc(100dvh - 32px); overflow:hidden; border:1px solid var(--border-color); border-radius:18px !important; box-shadow:0 20px 70px #0004; color:var(--text-main); }
#post-edit-form { display:flex; flex:1 1 auto; min-height:0; width:100%; flex-direction:column; max-height:none; margin:0; padding:0; gap:0; }
#post-edit-modal .post-edit-header { display:flex; align-items:center; justify-content:space-between; gap:8px; flex:none; padding:11px 14px; border-bottom:1px solid var(--border-color); }
#post-edit-title { display:flex; align-items:center; gap:8px; margin:0; font-size:15px; font-weight:800; color:var(--text-main) !important; }
#post-edit-title svg { width:18px; height:18px; color:var(--accent-color); }
#post-edit-modal button { cursor:pointer; touch-action:manipulation; }
#post-edit-modal .post-edit-close { display:grid; place-items:center; width:32px; height:32px; padding:7px; background:var(--bg-elevated,var(--bg-surface)); border:1px solid var(--border-color); border-radius:50% !important; color:var(--text-main); flex:none; }
#post-edit-modal .post-edit-close svg { width:17px; height:17px; }
#post-edit-modal .post-edit-body { display:flex; flex-direction:column; gap:11px; padding:12px 14px; overflow-y:auto; min-height:0; overscroll-behavior:contain; }
#post-edit-modal .post-edit-field { display:flex; flex-direction:column; gap:4px; min-width:0; margin:0; }
#post-edit-modal .post-edit-field > span, #post-edit-modal .post-edit-section-heading > span { font-size:12px; font-weight:750; color:var(--text-main); }
#post-edit-modal :is(textarea,select) { width:100%; min-width:0; border:1px solid var(--border-color); border-radius:9px !important; background:var(--bg-surface); color:var(--text-main) !important; outline:none; box-shadow:none; }
#post-edit-content { padding:9px 10px; min-height:84px; max-height:180px; resize:vertical; font-size:14px; line-height:1.5; }
#post-edit-modal select { height:36px; padding:5px 8px; font-size:12px; font-weight:600; }
#post-edit-modal :is(textarea,select,button,summary):focus-visible { outline:2px solid var(--accent-color); outline-offset:2px; }
#post-edit-modal .post-edit-options { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:9px; }
#post-edit-modal .post-edit-section-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:7px; }
#post-edit-media-count { margin-left:4px; font-size:11px; font-weight:600; color:var(--text-muted); }
#post-edit-modal .post-edit-add { display:flex; align-items:center; gap:5px; padding:6px 9px; min-height:30px; background:var(--accent-soft,var(--bg-surface)); border:1px solid var(--border-color); color:var(--accent-color); border-radius:8px !important; font-size:12px; font-weight:750; }
#post-edit-modal .post-edit-add svg { width:15px; height:15px; }
#post-edit-modal .post-edit-media-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; max-height:254px; overflow-y:auto; overscroll-behavior:contain; }
#post-edit-modal .post-edit-media-empty { grid-column:1/-1; margin:0; padding:13px 10px; border:1px dashed var(--border-color); border-radius:10px !important; color:var(--text-muted); font-size:12px; text-align:center; }
#post-edit-modal .post-edit-media-item { position:relative; min-width:0; margin:0; overflow:hidden; background:var(--bg-surface); border:1px solid var(--border-color); border-radius:10px !important; }
#post-edit-modal .post-edit-media-preview { display:flex; align-items:center; justify-content:center; aspect-ratio:1; overflow:hidden; background:#101827; }
#post-edit-modal .post-edit-media-preview :is(img,video) { width:100%; height:100%; object-fit:cover; display:block; margin:0; border:0; border-radius:0 !important; }
#post-edit-modal .post-edit-media-preview video { object-fit:contain; }
#post-edit-modal .post-edit-media-placeholder { padding:8px; color:#fff; font-size:12px; word-break:break-word; }
#post-edit-modal .post-edit-media-remove { position:absolute; top:4px; right:4px; display:grid; place-items:center; width:28px; height:28px; padding:5px; border:1px solid #ffffff50; border-radius:50% !important; background:#111827cc; color:#fff; z-index:1; }
#post-edit-modal .post-edit-media-remove svg { width:15px; height:15px; }
#post-edit-modal .post-edit-media-caption { display:flex; align-items:center; justify-content:space-between; gap:4px; padding:5px 6px; font-size:10px; color:var(--text-muted); }
#post-edit-modal .post-edit-media-caption span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#post-edit-modal .post-edit-media-replace { flex:none; border:0; padding:2px 3px; background:transparent; color:var(--accent-color); font-size:11px; font-weight:750; }
#post-edit-media-note { margin:5px 0 0; color:var(--text-muted); font-size:11px; line-height:1.4; }
#post-edit-modal .post-edit-appearance { margin:0; border-top:1px solid var(--border-color); }
#post-edit-modal .post-edit-appearance summary { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:9px 0 0; color:var(--text-muted); font-size:12px; font-weight:650; cursor:pointer; list-style:none; }
#post-edit-modal .post-edit-appearance summary::-webkit-details-marker { display:none; }
#post-edit-modal .post-edit-appearance summary svg { width:15px; height:15px; transition:transform .15s; }
#post-edit-modal .post-edit-appearance[open] summary svg { transform:rotate(180deg); }
#post-edit-modal .post-edit-appearance .post-edit-options { padding-top:8px; }
#post-edit-modal .post-edit-footer { flex:none; padding:10px 14px; border-top:1px solid var(--border-color); background:var(--bg-surface); }
#post-edit-modal .post-edit-footer > div { display:flex; justify-content:flex-end; gap:7px; }
#post-edit-modal .post-edit-footer button { padding:8px 13px; min-height:36px; border-radius:9px !important; font-size:12px; font-weight:750; }
#post-edit-modal .post-edit-cancel { border:1px solid var(--border-color); color:var(--text-main); background:transparent; }
#post-edit-status { margin:0; color:var(--text-muted); font-size:12px; line-height:1.4; }
#post-edit-status:not(:empty) { margin-bottom:8px; }
#post-edit-status[data-error] { color:#dc2626; }
#post-edit-modal :disabled { opacity:.55; cursor:wait; }
@media(max-width:640px) {
  #post-edit-modal { inset:var(--app-visual-top,0px) 0 auto !important; height:var(--app-visual-height,100dvh); padding:10px max(10px,env(safe-area-inset-right)) 10px max(10px,env(safe-area-inset-left)); }
  #post-edit-card { max-height:100%; border-radius:15px !important; }
  #post-edit-modal .post-edit-header { padding:9px 11px; }
  #post-edit-modal .post-edit-body { padding:10px 11px; gap:10px; }
  #post-edit-modal .post-edit-footer { padding:9px 11px; }
  #post-edit-content { font-size:16px; min-height:78px; }
  #post-edit-modal select { font-size:16px; font-weight:500; }
  #post-edit-modal .post-edit-media-list { grid-template-columns:repeat(3,minmax(0,1fr)); max-height:232px; }
}

/* Mentions must remain readable inside an accent-colored public-chat bubble. */
#chat-messages-list .mention-link {
  --public-mention-text: var(--text-main);
  --public-mention-bg: var(--bg-surface);
  color: var(--public-mention-text);
  -webkit-text-fill-color: currentColor;
  background: var(--public-mention-bg);
  border: 1px solid var(--border-color);
  padding: .03em .24em;
  font-size: inherit;
  line-height: inherit;
  vertical-align: baseline;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .15em;
}
#chat-messages-list .btn-accent .mention-link {
  --public-mention-text: #1e293b;
  --public-mention-bg: #ffffff;
  border-color: #ffffff80;
}
#chat-messages-list .mention-link:hover,
#chat-messages-list .mention-link:focus-visible {
  color: var(--public-mention-text);
  background: var(--public-mention-bg);
}
#chat-messages-list .mention-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Profile activity is visible only after the profile privacy check succeeds. */
.profile-avatar-stack { display:flex; flex-direction:column; align-items:center; gap:7px; }
.profile-avatar-image { position:relative; flex:none; }
#profile-presence-status { display:block; max-width:150px; margin:0; color:var(--text-muted); font-size:11px; line-height:1.4; font-weight:650; text-align:center; overflow-wrap:anywhere; }
#profile-presence-status[data-online="true"] { color:var(--text-main); }
#profile-presence-status[hidden], #profile-avatar-presence-dot[hidden], #tab-profile[data-profile-restricted] #profile-presence-status, #tab-profile[data-profile-restricted] #profile-avatar-presence-dot { display:none !important; }

/* Match the inset, rounded private-message composer on the home chat. */
#tab-chat #public-chat-composer-form,
html[data-keyboard-open] #tab-chat #public-chat-composer-form {
  width: calc(100% - 1.5rem) !important;
  max-width: calc(100% - 1.5rem) !important;
  margin: .55rem .75rem .65rem !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 1rem !important;
  box-shadow: none;
}
#tab-chat #public-chat-composer-form:focus-within {
  border-color: var(--accent-color) !important;
}
@media (max-width:767px) {
  #tab-chat #public-chat-composer-form { padding: .35rem .4rem; }
  #chat-input { font-size:16px; line-height:1.4; }
}

/* Remove only the inner text-field frame; the surrounding composer keeps its border. */
:root .chat-composer-input,
:root :is(#chat-input, #dm-chat-input, #stranger-chat-input, #dm-quick-chat-input, #modal-comment-input, #viewer-comment-input, #profile-review-input, [id^="feed-comment-input-"]) {
  border: 0 !important;
  box-shadow: none !important;
}

/* Two-person conversations need only left/right bubbles, with actions inside. */
#dm-messages-list .dm-message-row { display:flex; width:100%; justify-content:flex-start; align-items:flex-start; }
#dm-messages-list .dm-message-row.is-me { justify-content:flex-end; }
#dm-messages-list .dm-message-column { display:flex; flex-direction:column; min-width:0; max-width:86%; }
#dm-messages-list .dm-message-bubble { min-width:7rem; max-width:100%; margin-bottom:.55rem; }
#dm-messages-list .dm-message-copy { white-space:pre-wrap; overflow-wrap:anywhere; }
#dm-messages-list .dm-message-footer { position:relative; display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:.45rem; min-height:1.25rem; margin-top:.35rem; }
#dm-messages-list .dm-message-time { margin-right:auto; font-size:.67rem; line-height:1.4; font-weight:400; opacity:.7; }
#dm-messages-list .dm-message-delete-link { display:inline; flex:none; width:auto; height:auto; padding:2px 0 2px 5px; border:0; border-radius:0; background:transparent; color:inherit; box-shadow:none; font:inherit; font-size:.72rem; font-weight:600; line-height:1.4; cursor:pointer; touch-action:manipulation; }
#dm-messages-list .dm-message-delete-link:hover { text-decoration:underline; text-underline-offset:2px; }
#dm-messages-list .dm-message-delete-link:focus-visible { outline:2px solid currentColor; outline-offset:3px; border-radius:3px; }
#dm-messages-list .dm-message-footer .dm-message-tools { position:static; inset:auto; z-index:12; gap:.2rem; margin:0; transform:none !important; }
#dm-messages-list .dm-message-footer .dm-message-tool-btn { width:1.5rem; height:1.5rem; padding:3px; background:transparent; border:0; box-shadow:none; color:var(--text-muted); }
#dm-messages-list .dm-message-footer .dm-message-tool-btn:hover { background:var(--accent-soft); color:var(--accent-color); }
#dm-messages-list .dm-message-footer .dm-message-tool-btn :is(svg,img), #dm-messages-list .dm-message-action-icon { width:16px; height:16px; object-fit:contain; }
#dm-messages-list .dm-message-footer .dm-reaction-picker { right:auto; left:0; bottom:calc(100% + .35rem); max-width:min(22rem,calc(100vw - 2.5rem)); }
@media(max-width:639px) {
  #dm-messages-list .dm-message-column { max-width:90%; }
  #dm-messages-list .dm-message-footer .dm-reaction-picker { max-width:calc(100vw - 2.5rem); }
}

/* Hide only the partner being read; other chat heads remain available. */
.dm-chat-head-stack[hidden], .dm-chat-head[hidden] { display:none !important; }
@media(max-width:767px) {
  html[data-keyboard-open] .dm-chat-head-stack { visibility:visible; bottom:calc(var(--app-keyboard-inset,0px) + .75rem); }
  body:has(.dm-quick-chat-host:not([hidden])) .dm-chat-head-stack { visibility:visible; }
  body:has(.dm-quick-chat-host:not([hidden])):has(.dm-chat-head-stack:not([hidden])) .dm-quick-chat-panel { right:4.6rem; width:calc(100% - 5.1rem); }
}
.modal-scroll-locked .dm-chat-head-stack { visibility:hidden !important; }

/* Compact call records inside direct-message bubbles. */
.dm-call-history{display:flex;align-items:center;gap:.65rem;min-width:0;padding:.15rem 0;max-width:100%}
.dm-call-history-icon{display:grid;place-items:center;flex:0 0 2.2rem;width:2.2rem;height:2.2rem;border-radius:50%;background:color-mix(in srgb,currentColor 10%,transparent)}
.dm-call-history-icon svg{width:1.15rem;height:1.15rem}
.dm-call-history-copy{display:flex;flex-direction:column;min-width:0;gap:.2rem}
.dm-call-history-copy strong{font-size:.9rem;line-height:1.4;font-weight:700;overflow-wrap:anywhere}
.dm-call-history-copy small{font-size:.72rem;line-height:1.35;opacity:.78}
.dm-call-history[data-call-status="missed"] .dm-call-history-icon{color:#e54b64;background:color-mix(in srgb,#e54b64 12%,transparent)}
.is-me .dm-call-history[data-call-status="missed"] .dm-call-history-icon{color:inherit;background:rgb(255 255 255 / .15)}
.dm-quick-message .dm-call-history{gap:.5rem;padding:.1rem 0}.dm-quick-message .dm-call-history-icon{flex-basis:1.8rem;width:1.8rem;height:1.8rem}.dm-quick-message .dm-call-history-copy strong{font-size:.8rem}

/* Message content, metadata and controls each keep their own space. */
#chat-messages-list .chat-message-row{min-width:0;width:100%;margin-bottom:.25rem}
#chat-messages-list .chat-message-column{min-width:0;max-width:calc(100% - 2.9rem)}
#chat-messages-list .chat-message-heading{display:flex;align-items:center;gap:.4rem;min-width:0;max-width:100%;flex-wrap:wrap}
#chat-messages-list .chat-message-sender{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;text-align:left}
#chat-messages-list .chat-message-copy{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;min-width:0}
#chat-messages-list :is(.chat-message-bubble,.chat-message-compact-card){min-width:0;max-width:100%}
#chat-messages-list .chat-message-bubble :is(img,video){max-width:100%}
#chat-messages-list .chat-message-meta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.25rem .6rem;width:100%;padding:.25rem .1rem 0;position:static;color:var(--text-muted);font-size:.68rem;line-height:1.4}
#chat-messages-list .chat-message-time{flex:0 0 auto;font-weight:400}
#chat-messages-list .chat-message-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:.2rem .45rem;margin-left:auto;position:static}
#chat-messages-list .chat-message-action{position:static;inset:auto;display:inline-flex;align-items:center;justify-content:center;gap:.2rem;min-height:1.75rem;padding:.2rem .25rem;border:0;background:transparent;color:var(--text-muted);font-size:.7rem;line-height:1.3;font-weight:650;white-space:nowrap;touch-action:manipulation}
#chat-messages-list .chat-message-action svg{width:.9rem;height:.9rem;flex:none}
#chat-messages-list .chat-message-action.is-delete{color:#e34c68}
#chat-messages-list .chat-message-action:hover{color:var(--accent-color)}
#chat-messages-list .chat-message-action:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px;border-radius:.35rem}
#chat-messages-list .chat-message-compact-card .chat-message-meta{margin-top:.15rem;padding-top:.3rem;border-top:1px solid var(--border-color)}

/* The reply/reaction dock straddles the bottom border, clear of the text. */
#dm-messages-list .dm-message-row{margin-bottom:.35rem}
#dm-messages-list .dm-message-bubble.has-message-tools{position:relative;align-self:flex-start;width:fit-content;min-width:8.5rem;padding-bottom:1.5rem;margin-bottom:1.05rem}
#dm-messages-list .dm-message-bubble>.dm-message-tools{position:absolute;inset:auto auto -1rem 50%;z-index:2;display:flex;align-items:center;justify-content:center;gap:.15rem;width:max-content;max-width:100%;height:2rem;margin:0;padding:.1rem .25rem;border:1px solid var(--border-color);border-radius:999px;background:var(--bg-surface);box-shadow:0 3px 8px rgb(15 23 42 / .04);transform:translateX(-50%) !important}
#dm-messages-list .dm-message-bubble>.dm-message-tools .dm-message-tool-btn{position:static;display:inline-flex;align-items:center;justify-content:center;width:1.8rem;height:1.8rem;min-width:1.8rem;padding:.3rem;border:0;border-radius:999px;background:transparent;box-shadow:none;color:var(--text-muted);transform:none;touch-action:manipulation}
#dm-messages-list .dm-message-bubble>.dm-message-tools .dm-message-tool-btn :is(svg,img){width:1.05rem;height:1.05rem;object-fit:contain}
#dm-messages-list .dm-message-bubble>.dm-message-tools .dm-message-tool-btn:hover{background:var(--accent-soft);color:var(--accent-color)}
#dm-messages-list .dm-message-bubble>.dm-message-tools .dm-message-tool-btn:focus-visible{outline:2px solid var(--accent-color);outline-offset:0}
#dm-messages-list .dm-reaction-summary{position:static;inset:auto;display:flex;align-items:center;flex-wrap:wrap;gap:.3rem;max-width:100%;width:max-content;margin:.4rem 0 0;padding:.15rem .4rem;box-shadow:none}
#dm-messages-list .dm-message-footer{min-width:0;gap:.4rem;align-items:center}
#dm-messages-list .dm-message-footer .dm-message-delete-link{position:static;inset:auto;white-space:nowrap;flex:none;transform:none}
#dm-messages-list .dm-message-column>.dm-reaction-picker{position:static;inset:auto;align-self:flex-start;display:flex;flex-wrap:wrap;justify-content:center;gap:.2rem;width:max-content;max-width:100%;margin:0 0 .5rem;padding:.35rem;border-radius:1rem;overflow:visible;box-shadow:0 4px 12px rgb(15 23 42 / .05);transform:none}
#dm-messages-list .dm-message-column>.dm-reaction-picker.hidden{display:none !important}
#dm-messages-list .dm-message-column>.dm-reaction-picker .reaction-item-btn{flex:0 0 2rem;width:2rem;height:2rem}
#dm-messages-list .dm-message-column:has(>.dm-reaction-picker:not(.hidden)){max-width:90%;min-width:min(15.5rem,90%)}
@media(min-width:640px){#chat-messages-list .chat-message-column{max-width:78%}}

/* Each action has its own button; reaction totals live outside the bubble. */
#dm-messages-list .dm-message-content-wrap{display:flex;flex-direction:column;align-self:flex-start;width:fit-content;min-width:0;max-width:100%}
#dm-messages-list .is-me .dm-message-content-wrap{align-self:flex-end}
#dm-messages-list .dm-message-bubble>.dm-message-tools{gap:.5rem;height:2rem;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
#dm-messages-list .dm-message-bubble>.dm-message-tools .dm-message-tool-btn{width:2rem;height:2rem;min-width:2rem;border:1px solid var(--border-color);border-radius:999px;background:var(--bg-surface);box-shadow:0 2px 5px rgb(15 23 42 / .035)}
#dm-messages-list .dm-message-reactions-outside{display:flex;align-self:flex-end;justify-content:flex-end;min-width:0;max-width:100%;margin:.3rem .1rem .45rem 0}
#dm-messages-list .dm-message-reactions-outside:empty{display:none}
#dm-messages-list .dm-message-reactions-outside>.dm-reaction-summary{position:static;inset:auto;margin:0;max-width:100%;padding:.15rem .45rem;background:var(--bg-surface);color:var(--text-main);border:1px solid var(--border-color);border-radius:999px;box-shadow:none}

/* Reaction chips sit on the outer rounded corner, with icons matching the actions. */
#dm-messages-list .dm-message-content-wrap{position:relative;margin-bottom:.55rem}
#dm-messages-list .dm-message-content-wrap>.dm-message-bubble{margin-bottom:0}
#dm-messages-list .dm-message-content-wrap:has(.dm-message-tools),
#dm-messages-list .dm-message-content-wrap:has(>.dm-message-reactions-outside:not(:empty)){margin-bottom:1.25rem}
#dm-messages-list .dm-message-row:has(.dm-message-reactions-outside:not(:empty)) .dm-message-column{max-width:calc(100% - 3rem);min-width:0}
#dm-messages-list .dm-message-content-wrap:has(>.dm-message-reactions-outside:not(:empty))>.dm-message-bubble{padding-bottom:1.5rem}
#dm-messages-list .dm-message-content-wrap:has(>.dm-message-reactions-outside:not(:empty))>.dm-message-bubble.has-message-tools{min-width:11rem}
#dm-messages-list .dm-message-reactions-outside{position:absolute;inset:auto 0 0 auto;display:flex;align-items:center;justify-content:center;align-self:auto;width:max-content;max-width:5.5rem;height:2rem;margin:0;transform:translate(50%,50%);z-index:3}
#dm-messages-list .is-me .dm-message-reactions-outside{left:0;right:auto;transform:translate(-50%,50%)}
#dm-messages-list .dm-message-reactions-outside:empty{display:none}
#dm-messages-list .dm-message-reactions-outside>.dm-reaction-summary{display:inline-flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:.2rem;min-width:2rem;max-width:5.5rem;height:2rem;margin:0;padding:0 .35rem;border-radius:999px;white-space:nowrap;line-height:1}
#dm-messages-list .dm-message-tools .dm-message-tool-btn :is(svg,img),
#dm-messages-list .dm-message-reactions-outside .dm-reaction-summary-image{width:1.05rem;height:1.05rem;flex:none;object-fit:contain}
#dm-messages-list .dm-message-reaction-icons{display:inline-flex;align-items:center;gap:.08rem;flex:none;font-size:1.05rem;line-height:1}
#dm-messages-list .dm-message-reaction-total{min-width:0;font-size:.68rem;line-height:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


/* Relationship details stay near the profile identity, with a compact mobile layout. */
.profile-marriage-card{display:flex;align-items:center;gap:.55rem;flex-wrap:nowrap;margin-top:.75rem;padding:.6rem .7rem;border:1px solid var(--border-color);border-radius:.85rem;background:linear-gradient(120deg,color-mix(in srgb,var(--accent-color) 6%,var(--bg-surface)),var(--bg-surface));color:var(--text-main)}
.profile-marriage-card[hidden]{display:none !important}
.marriage-card-symbol{display:grid;place-items:center;flex:0 0 2rem;width:2rem;height:2rem;border-radius:.65rem;background:var(--accent-soft);color:var(--accent-color);font-size:1.25rem;line-height:1}
.profile-marriage-card.is-married .marriage-card-symbol{background:color-mix(in srgb,#ed6e99 12%,var(--bg-surface))}
.marriage-card-copy{display:flex;flex-direction:column;gap:.1rem;flex:1 1 0;min-width:0}
.marriage-card-copy>small{color:var(--text-muted);font-size:.66rem;font-weight:650;letter-spacing:.025em}
.marriage-card-copy>strong{font-size:.87rem;line-height:1.45;font-weight:750;overflow-wrap:anywhere}
.marriage-partner-link{display:inline;padding:0;border:0;background:transparent;color:var(--accent-color);font:inherit;text-align:left;overflow-wrap:anywhere}
.marriage-partner-link:hover{text-decoration:underline;text-underline-offset:3px}
.marriage-muted{font-size:.68rem;line-height:1.5;color:var(--text-muted)}
.marriage-card-actions{display:flex;flex:0 0 auto;align-items:center;justify-content:flex-end;flex-wrap:nowrap;gap:.3rem;margin-left:0}
.marriage-card-actions:empty{display:none}
.marriage-card-actions .marriage-button{min-height:2.1rem;padding:.4rem .6rem;border-radius:.65rem;font-size:.7rem}
.marriage-button{display:inline-flex;align-items:center;justify-content:center;gap:.25rem;min-height:2.1rem;padding:.45rem .7rem;border:1px solid transparent;border-radius:.7rem;font-size:.72rem;line-height:1.3;font-weight:750;white-space:nowrap;cursor:pointer;touch-action:manipulation}
.marriage-button.is-primary{background:var(--accent-color);color:#fff;border-color:var(--accent-color)}
.marriage-button.is-subtle{background:var(--bg-elevated);color:var(--text-main);border-color:var(--border-color)}
.marriage-button.is-danger{background:color-mix(in srgb,#e34f72 9%,var(--bg-surface));color:#e34f72;border-color:color-mix(in srgb,#e34f72 24%,var(--border-color))}
.marriage-button>b{display:grid;place-items:center;min-width:1.15rem;height:1.15rem;border-radius:999px;background:var(--accent-soft);color:var(--accent-color);font-size:.65rem}
.marriage-button:disabled{opacity:.5;cursor:default}
.marriage-button:focus-visible,.marriage-partner-link:focus-visible,.marriage-person:focus-visible{outline:2px solid var(--accent-color);outline-offset:3px}
.marriage-pending-label{font-size:.69rem;font-weight:650;color:var(--text-muted)}
.marriage-dialog{width:min(34rem,calc(100vw - 1.5rem));max-width:100%;max-height:min(88dvh,43rem);margin:auto;padding:0;border:1px solid var(--border-color);border-radius:1.25rem;background:var(--bg-surface);color:var(--text-main);box-shadow:0 20px 70px rgb(15 23 42 / .25);overflow:hidden}
.marriage-dialog::backdrop{background:rgb(15 23 42 / .5);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.marriage-dialog-shell{display:flex;flex-direction:column;max-height:min(88dvh,43rem);min-height:12rem}
.marriage-dialog-header{display:flex;align-items:center;gap:.7rem;flex:0 0 auto;padding:.9rem 1rem;border-bottom:1px solid var(--border-color)}
.marriage-dialog-heart{display:grid;place-items:center;width:2.5rem;height:2.5rem;flex:none;border-radius:.85rem;background:var(--accent-soft);font-size:1.3rem}
.marriage-dialog-header>div{min-width:0;flex:1}
.marriage-dialog-header h2{margin:0;font-size:1rem;font-weight:800;line-height:1.4}
.marriage-dialog-header p{margin:.15rem 0 0;font-size:.67rem;line-height:1.4;color:var(--text-muted)}
.marriage-close{display:grid;place-items:center;flex:none;width:2rem;height:2rem;margin-left:auto;padding:0;border:0;border-radius:50%;background:var(--bg-elevated);color:var(--text-muted);font-size:1.35rem;line-height:1}
.marriage-close:hover{color:var(--text-main)}
.marriage-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.3rem;flex:0 0 auto;padding:.55rem .75rem;border-bottom:1px solid var(--border-color)}
.marriage-tabs button{display:flex;align-items:center;justify-content:center;gap:.3rem;min-width:0;padding:.55rem .15rem;border-radius:.7rem;background:transparent;color:var(--text-muted);font-size:.7rem;font-weight:750;line-height:1.3}
.marriage-tabs button[aria-selected="true"]{background:var(--accent-soft);color:var(--accent-color)}
.marriage-tabs b{display:grid;place-items:center;min-width:1.1rem;height:1.1rem;padding:0 .2rem;border-radius:999px;background:var(--bg-elevated);color:var(--text-main);font-size:.62rem}
.marriage-dialog-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:.6rem .8rem .85rem}
.marriage-list{display:flex;flex-direction:column;gap:0}
.marriage-request-row{display:flex;align-items:center;justify-content:space-between;gap:.65rem;flex-wrap:wrap;padding:.7rem .15rem;border-bottom:1px solid var(--border-color)}
.marriage-request-row:last-child{border-bottom:0}
.marriage-request-copy{flex:1 1 10rem;min-width:0}
.marriage-person{display:flex;align-items:center;gap:.55rem;min-width:0;max-width:100%;padding:0;border:0;background:none;color:var(--text-main);text-align:left}
.marriage-person strong{min-width:0;font-size:.78rem;line-height:1.4;overflow-wrap:anywhere;font-weight:750}
.marriage-avatar{position:relative;display:grid;place-items:center;flex:none;width:2.2rem;height:2.2rem;border-radius:50%;font-size:1.3rem;line-height:1}
.marriage-avatar img{max-width:100%;max-height:100%;object-fit:cover}
.marriage-request-copy>small{display:block;margin:.3rem 0 0 2.75rem;color:var(--text-muted);font-size:.62rem;line-height:1.5}
.marriage-row-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:.3rem;margin-left:auto}
.marriage-row-actions .marriage-button{min-height:1.95rem;padding:.4rem .55rem;font-size:.67rem}
.marriage-empty{padding:1.6rem .6rem;text-align:center;font-size:.76rem;line-height:1.6;color:var(--text-muted)}
.marriage-search-label{display:block;margin:.25rem 0 .45rem;font-size:.73rem;font-weight:700}
#marriage-user-search{display:block;width:100%;min-height:2.65rem;margin:0 0 .5rem;padding:.65rem .8rem;border:1px solid var(--border-color);border-radius:.75rem;background:var(--bg-elevated);color:var(--text-main);font-size:16px;line-height:1.35;outline:none}
#marriage-user-search:focus{border-color:var(--accent-color);box-shadow:0 0 0 2px var(--accent-soft)}
.marriage-load-more{display:block;margin:.65rem auto 0;padding:.5rem .8rem;border:1px solid var(--border-color);border-radius:.7rem;background:var(--bg-elevated);color:var(--text-main);font-size:.72rem;font-weight:700}
@media(max-width:639px){.profile-marriage-card{gap:.4rem;padding:.55rem .6rem}.marriage-card-symbol{flex-basis:1.75rem;width:1.75rem;height:1.75rem;font-size:1.1rem}.marriage-card-copy>small{font-size:.625rem;line-height:1.35;letter-spacing:0}.marriage-card-copy>strong{font-size:.78rem;line-height:1.4}.marriage-card-actions{width:auto;gap:.25rem}.marriage-card-actions .marriage-button{padding:.4rem .5rem;font-size:.68rem}.marriage-card-actions .marriage-pending-label{max-width:6.5rem;font-size:.62rem;line-height:1.4}.marriage-dialog{width:calc(100vw - 1.25rem);border-radius:1rem}.marriage-dialog-header{padding:.8rem}.marriage-dialog-body{padding:.4rem .65rem .75rem}.marriage-request-row{gap:.55rem}.marriage-row-actions{padding-left:2.7rem}}


/* Unavailable calls remain clickable and explain the current restriction. */
.dm-voice-call-btn[data-call-unavailable="true"]{cursor:pointer;opacity:.58}
.dm-voice-call-btn[data-call-unavailable="true"]:hover,.dm-voice-call-btn[data-call-unavailable="true"]:focus-visible{opacity:1}
.voice-call-notice{width:min(26rem,calc(100vw - 1.5rem));max-height:calc(100dvh - 2rem);margin:auto;padding:0;border:1px solid var(--border-color);border-radius:1.15rem;background:var(--bg-surface);color:var(--text-main);box-shadow:0 20px 70px rgb(15 23 42 / .25);overflow:auto;overscroll-behavior:contain}
.voice-call-notice::backdrop{background:rgb(15 23 42 / .45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.voice-call-notice form{margin:0;padding:1rem}
.voice-call-notice-header{display:flex;align-items:center;gap:.65rem}
.voice-call-notice-icon{display:grid;place-items:center;flex:none;width:2.5rem;height:2.5rem;border-radius:.85rem;background:var(--accent-soft);color:var(--accent-color)}
.voice-call-notice-icon svg{width:1.15rem;height:1.15rem}
.voice-call-notice h2{flex:1;margin:0;font-size:1rem;line-height:1.4;font-weight:800;color:var(--text-main)}
.voice-call-notice-close{display:grid;place-items:center;flex:none;width:2rem;height:2rem;padding:0;border:0;border-radius:50%;background:var(--bg-elevated);color:var(--text-muted);font-size:1.35rem;line-height:1;cursor:pointer}
.voice-call-notice p{margin:.85rem 0 1rem;color:var(--text-muted);font-size:.85rem;line-height:1.65;overflow-wrap:anywhere}
.voice-call-notice footer{display:flex;justify-content:flex-end}
.voice-call-notice-dismiss{min-height:2.4rem;padding:.55rem 1.05rem;border:0;border-radius:.75rem;background:var(--accent-color);color:#fff;font-size:.8rem;line-height:1.4;font-weight:750;cursor:pointer;touch-action:manipulation}
.voice-call-notice button:focus-visible{outline:2px solid var(--accent-color);outline-offset:3px}

@media(max-width:359px){.profile-marriage-card>.marriage-card-symbol{display:none}.marriage-card-actions .marriage-button{padding-inline:.45rem;font-size:.65rem}.marriage-card-actions .marriage-button>b{font-size:.6rem;min-width:1rem;height:1rem}.marriage-card-copy>small{font-size:.6rem}}


/* Compact inbox settings and PIN dialogs. */
.dm-settings-dialog{width:min(32rem,calc(100vw - 1.25rem));max-width:100%;max-height:88dvh;margin:auto;padding:0;border:1px solid var(--border-color);border-radius:1.1rem;background:var(--bg-surface);color:var(--text-main);box-shadow:0 24px 80px rgb(15 23 42 / .26);overflow:hidden}
.dm-settings-dialog::backdrop{background:rgb(15 23 42 / .48);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.dm-settings-shell{display:flex;flex-direction:column;max-height:88dvh;min-height:10rem}
.dm-settings-header{display:flex;align-items:center;gap:.6rem;padding:.85rem 1rem;border-bottom:1px solid var(--border-color);flex:none}
.dm-settings-header h2{flex:1;min-width:0;margin:0;font-size:.95rem;font-weight:800;line-height:1.4;color:var(--text-main)}
.dm-settings-title-icon,.dm-settings-back,.dm-settings-close{display:grid;place-items:center;flex:none;width:2rem;height:2rem;padding:0;border:0;border-radius:.65rem;background:var(--accent-soft);color:var(--accent-color)}
.dm-settings-title-icon svg,.dm-settings-back svg{width:1.05rem;height:1.05rem}
.dm-settings-close{background:var(--bg-elevated);color:var(--text-muted);border-radius:50%;font-size:1.35rem;line-height:1;cursor:pointer}
.dm-settings-back{background:var(--bg-elevated);color:var(--text-main);cursor:pointer}
.dm-settings-body{overflow-y:auto;min-height:0;overscroll-behavior:contain;padding:.45rem .85rem .85rem}
.dm-settings-row{display:flex;align-items:center;gap:.7rem;width:100%;min-height:4.1rem;padding:.7rem .15rem;border:0;border-bottom:1px solid var(--border-color);background:transparent;color:var(--text-main);text-align:left}
button.dm-settings-row{cursor:pointer}.dm-settings-row:last-child{border-bottom:0}
.dm-settings-row-icon{display:grid;place-items:center;flex:none;width:2.2rem;height:2.2rem;border-radius:.75rem;background:var(--bg-elevated);color:var(--accent-color)}
.dm-settings-row-icon svg{width:1.05rem;height:1.05rem}.dm-settings-row>svg{width:1rem;height:1rem;flex:none;color:var(--text-muted)}
.dm-settings-row-copy{display:flex;flex-direction:column;gap:.2rem;flex:1;min-width:0}
.dm-settings-row-copy strong{font-size:.77rem;line-height:1.4;font-weight:750;overflow-wrap:anywhere}.dm-settings-row-copy small{font-size:.64rem;line-height:1.45;color:var(--text-muted)}
.dm-settings-switch{position:relative;flex:none;width:2.6rem;height:1.55rem;padding:.18rem;border:1px solid var(--border-color);border-radius:999px;background:var(--bg-elevated);cursor:pointer}
.dm-settings-switch>span{display:grid;place-items:center;width:1.1rem;height:1.1rem;border-radius:50%;background:var(--text-muted);color:var(--bg-surface);transition:transform .16s}
.dm-settings-switch svg{width:.7rem;height:.7rem}.dm-settings-switch[aria-checked="true"]{background:var(--accent-color);border-color:var(--accent-color)}.dm-settings-switch[aria-checked="true"]>span{transform:translateX(1rem);background:#fff;color:var(--accent-color)}
.dm-settings-description{margin:.6rem 0 .85rem;color:var(--text-main);font-size:.8rem;line-height:1.6}.dm-settings-note{margin:.8rem 0;color:var(--text-muted);font-size:.7rem;line-height:1.65}
.dm-retention-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.45rem}
.dm-retention-option{position:relative;display:flex;align-items:center;justify-content:center;gap:.25rem;min-height:2.65rem;padding:.5rem .2rem;border:1px solid var(--border-color);border-radius:.75rem;background:var(--bg-elevated);font-size:.75rem;font-weight:750;cursor:pointer;white-space:nowrap}
.dm-retention-option input{position:absolute;opacity:0;width:1px;height:1px}.dm-retention-option>svg{display:none;width:.8rem;height:.8rem}.dm-retention-option:has(input:checked){border-color:var(--accent-color);background:var(--accent-soft);color:var(--accent-color)}.dm-retention-option:has(input:checked)>svg{display:block}.dm-retention-option:focus-within{outline:2px solid var(--accent-color);outline-offset:2px}
.dm-settings-primary,.dm-settings-small-button,.dm-settings-danger{display:inline-flex;align-items:center;justify-content:center;min-height:2.35rem;padding:.5rem .8rem;border:1px solid transparent;border-radius:.7rem;background:var(--accent-color);color:#fff;font-size:.75rem;line-height:1.4;font-weight:750;cursor:pointer;touch-action:manipulation}
.dm-settings-save{display:flex;margin-left:auto}.dm-settings-small-button{min-height:2rem;padding:.4rem .65rem;background:var(--bg-elevated);color:var(--text-main);border-color:var(--border-color);font-size:.69rem}.dm-settings-danger{background:color-mix(in srgb,#e34f72 9%,var(--bg-surface));color:#e34f72;border-color:color-mix(in srgb,#e34f72 20%,var(--border-color))}
.dm-settings-dialog button:disabled{opacity:.5;cursor:default}.dm-settings-dialog button:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px}
.dm-settings-blocked-row{display:flex;align-items:center;gap:.6rem;padding:.7rem .1rem;border-bottom:1px solid var(--border-color)}.dm-settings-blocked-row:last-child{border-bottom:0}
.dm-settings-avatar{position:relative;display:grid;place-items:center;flex:none;width:2.25rem;height:2.25rem;border-radius:50%;font-size:1.3rem}.dm-settings-avatar img{width:100%;height:100%;object-fit:cover}.dm-settings-more{display:flex;margin:.8rem auto 0}
.dm-settings-empty{padding:1.5rem .6rem;text-align:center;color:var(--text-muted);font-size:.8rem;line-height:1.6}.dm-settings-empty>svg{width:1.8rem;height:1.8rem;margin:0 auto .5rem;color:var(--accent-color)}
.dm-pin-dialog{width:min(25rem,calc(100vw - 1.25rem))}.dm-pin-form{display:flex;flex-direction:column;gap:.75rem;padding:.2rem 0}
.dm-pin-field{display:flex;flex-direction:column;gap:.4rem}.dm-pin-field>span{font-size:.72rem;font-weight:750}.dm-pin-field input{width:100%;min-height:2.9rem;padding:.6rem .8rem;border:1px solid var(--border-color);border-radius:.75rem;background:var(--bg-elevated);color:var(--text-main);font-size:20px;text-align:center;letter-spacing:.6em;outline:none}.dm-pin-field input:focus{border-color:var(--accent-color);box-shadow:0 0 0 2px var(--accent-soft)}
.dm-pin-error{margin:0;color:#e34f72;font-size:.73rem;line-height:1.5}.dm-pin-error[hidden]{display:none}
.dm-pin-status{display:flex;gap:.7rem;align-items:center;margin:.7rem 0;padding:.8rem;border:1px solid var(--border-color);border-radius:.85rem;background:var(--bg-elevated)}.dm-pin-status>svg{width:1.3rem;height:1.3rem;flex:none;color:var(--accent-color)}.dm-pin-status strong,.dm-pin-deletion strong{font-size:.8rem;font-weight:750}.dm-pin-status p,.dm-pin-deletion p{margin:.3rem 0 0;font-size:.7rem;line-height:1.6;color:var(--text-muted)}
.dm-pin-deletion{margin-top:.8rem;padding:.8rem;border:1px solid var(--border-color);border-radius:.85rem;background:var(--accent-soft)}.dm-pin-deletion button{margin-top:.75rem}
.dm-locked-state{display:flex;flex-direction:column;align-items:center;gap:.65rem;padding:2.5rem 1rem;text-align:center;color:var(--text-muted);font-size:.8rem}.dm-locked-state>svg{width:2rem;height:2rem;color:var(--accent-color)}.dm-locked-state strong{color:var(--text-main)}
@media(max-width:359px){.dm-settings-body{padding-inline:.65rem}.dm-settings-header{padding:.75rem}.dm-settings-row{gap:.5rem}.dm-settings-row-copy strong{font-size:.72rem}.dm-settings-row-copy small{font-size:.61rem}.dm-retention-options{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Put message time/read information immediately after the final text. */
#dm-messages-list .dm-message-footer.is-inline,
.dm-quick-message .dm-message-footer.is-inline{display:inline-flex;position:static;align-items:baseline;justify-content:flex-start;flex-wrap:nowrap;gap:.3rem;min-width:0;min-height:0;margin:0 0 0 .45rem;white-space:nowrap;vertical-align:baseline;line-height:1.4;color:inherit;font-size:.67rem;font-weight:400}
#dm-messages-list .dm-message-footer.is-inline .dm-message-time,
.dm-quick-message .dm-message-footer.is-inline .dm-message-time{display:inline;margin:0;font-size:inherit;line-height:inherit;font-weight:400;opacity:.68;text-align:inherit;white-space:nowrap}
#dm-messages-list .dm-message-footer.is-inline .dm-message-read,
.dm-quick-message .dm-message-read{font-size:inherit;opacity:.75}
#dm-messages-list .dm-message-footer.is-inline .dm-message-delete-link{padding:0;font-size:inherit;line-height:inherit}
#dm-messages-list .dm-message-media-meta{margin-top:.2rem;text-align:right;line-height:1.2}
#dm-messages-list .dm-message-media-meta .dm-message-footer{margin-left:0}
.dm-quick-message>.dm-message-footer.is-inline{white-space:nowrap}

.profile-vip-badge{display:inline-flex;align-items:center;justify-content:center;gap:.18rem;margin-left:.4rem;padding:.15rem .4rem;border:1px solid #d9ab48;border-radius:.45rem;background:#fff3c9;color:#775010;font:800 .62rem/1.2 system-ui;vertical-align:middle;letter-spacing:.04em}
.vip-required-dialog{width:min(27rem,calc(100vw - 1.5rem));max-height:calc(100dvh - 2rem);padding:0;border:1px solid var(--border-color);border-radius:1.2rem;background:var(--bg-surface,#fff);color:var(--text-main,#1e293b);box-shadow:0 18px 70px #15102242;overflow:auto}
.vip-required-dialog::backdrop{background:#0e10216b;backdrop-filter:blur(4px)}
.vip-required-dialog form{padding:1.1rem;margin:0}.vip-required-dialog header{display:flex;align-items:center;gap:.65rem}.vip-prompt-icon{display:grid;place-items:center;width:2.6rem;height:2.6rem;flex:none;border:1px solid #dfb74d;border-radius:.9rem;background:#fff1bd;color:#8c5e12;font-size:1.5rem}
.vip-required-dialog header div{min-width:0;flex:1}.vip-required-dialog small{font-size:.55rem;font-weight:800;letter-spacing:.1em;color:var(--text-muted,#64748b)}.vip-required-dialog h2{margin:.15rem 0 0;font-size:1rem;line-height:1.3;font-weight:800;color:var(--text-main,#1e293b)}
.vip-prompt-close{display:grid;place-items:center;width:2rem;height:2rem;flex:none;padding:0;border:1px solid var(--border-color);border-radius:.65rem;background:var(--bg-elevated,#f7f6fb);color:inherit;font-size:1.3rem;cursor:pointer}.vip-required-dialog p{margin:1rem 0 .8rem;font-size:.85rem;line-height:1.55;color:var(--text-main,#1e293b)}
.vip-prompt-features{display:flex;gap:.3rem;flex-wrap:wrap}.vip-prompt-features span{padding:.3rem .45rem;border:1px solid var(--border-color);border-radius:.5rem;background:var(--bg-elevated,#f7f6fb);font-size:.64rem;font-weight:700}.vip-required-dialog footer{display:flex;align-items:center;gap:.6rem;justify-content:space-between;margin-top:1.1rem}.vip-required-dialog footer>span{max-width:14rem;font-size:.65rem;color:var(--text-muted,#64748b);line-height:1.5}.vip-prompt-confirm{padding:.6rem .8rem;border:0;border-radius:.7rem;background:var(--accent-color,#8868b8);color:#fff;font-size:.76rem;font-weight:800;white-space:nowrap;cursor:pointer}
.profile-frame-preview{display:flex;align-items:center;gap:.8rem;padding:.75rem;border:1px solid var(--border-color);border-radius:1rem;background:var(--bg-elevated);margin-bottom:.65rem}.profile-frame-preview-avatar{display:flex;align-items:center;justify-content:center;position:relative;flex:none;width:4rem;height:4rem;border-radius:50%;font-size:2rem}.profile-frame-preview strong{display:block;font-size:.8rem}.profile-frame-preview small{display:block;margin-top:.2rem;font-size:.68rem;color:var(--text-muted)}
.profile-wall-vip-note{display:flex;align-items:center;gap:.4rem;margin:.55rem 0;font-size:.7rem;color:var(--text-muted);line-height:1.5}

/* Interactive avatar / personal wall cropper. */
#profile-avatar-crop-dialog.profile-image-crop-dialog{width:min(94vw,34rem);max-width:34rem;max-height:calc(100dvh - 1rem);margin:auto;padding:0;border-radius:1.15rem;color:var(--text-main,#182235);background:var(--bg-surface,#fff)}
#profile-avatar-crop-dialog .profile-image-crop-form{box-sizing:border-box;width:100%;gap:.65rem;padding:.9rem;scrollbar-gutter:auto;overflow:auto}
#profile-avatar-crop-dialog .profile-image-crop-form>header{padding:0 0 .65rem;gap:.5rem;background:var(--bg-surface,#fff)}
#profile-avatar-crop-dialog h3{font-size:.94rem;color:var(--text-main,#182235)}
#profile-avatar-crop-dialog .profile-crop-heading-icon{display:grid;place-items:center;width:2rem;height:2rem;border-radius:.65rem;font-size:1.35rem;color:var(--accent-color,#8b5cf6);background:var(--accent-soft,#f1eafb)}
#profile-avatar-crop-dialog .profile-crop-step{font-size:.72rem;color:var(--text-muted,#64748b);white-space:nowrap}
#profile-avatar-crop-dialog .profile-media-action-close{position:static;flex:0 0 2rem;border:1px solid var(--border-color,#e2e8f0);cursor:pointer}
#profile-avatar-crop-dialog .profile-crop-stage{--crop-ratio:1;position:relative;align-self:center;width:min(100%,calc(max(10rem,100dvh - 21rem)*var(--crop-ratio)));aspect-ratio:var(--crop-ratio);flex:0 0 auto;overflow:hidden;border-radius:.85rem;background:#101827;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;outline:none}
#profile-avatar-crop-dialog .profile-crop-stage:focus-visible{outline:2px solid var(--accent-color,#8b5cf6);outline-offset:3px}
#profile-avatar-crop-dialog .profile-crop-stage.is-dragging{cursor:grabbing}
#profile-avatar-crop-dialog .profile-crop-stage canvas{width:100%;height:100%;max-width:none;display:block;border:0;border-radius:0;pointer-events:none}
#profile-avatar-crop-dialog .profile-crop-grid{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,transparent 33.1%,#ffffff65 33.3%,transparent 33.6%,transparent 66.3%,#ffffff65 66.6%,transparent 66.9%),linear-gradient(to bottom,transparent 33.1%,#ffffff65 33.3%,transparent 33.6%,transparent 66.3%,#ffffff65 66.6%,transparent 66.9%);box-shadow:inset 0 0 0 1px #ffffff90}
#profile-avatar-crop-dialog .profile-crop-circle{position:absolute;inset:0;border:1.5px solid #fff;border-radius:50%;box-shadow:0 0 0 100vmax #0007;pointer-events:none}
#profile-avatar-crop-dialog .profile-crop-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
#profile-avatar-crop-dialog .profile-crop-frame[hidden]{display:none}
#profile-avatar-crop-dialog .profile-crop-ratio{display:flex;align-items:center;justify-content:space-between;gap:.7rem;font-size:.76rem;font-weight:700;color:var(--text-muted,#64748b)}
#profile-avatar-crop-dialog select{border:1px solid var(--border-color,#e2e8f0);border-radius:.6rem;padding:.4rem .6rem;background:var(--bg-elevated,#f6f7fb);color:var(--text-main,#182235);font:inherit;font-size:.78rem}
#profile-avatar-crop-dialog .profile-crop-zoom{display:flex;align-items:center;gap:.6rem;padding:.55rem;border:1px solid var(--border-color,#e2e8f0);border-radius:.8rem;background:var(--bg-elevated,#f6f7fb)}
#profile-avatar-crop-dialog .profile-crop-zoom>button{flex:0 0 2rem;width:2rem;height:2rem;padding:0;display:grid;place-items:center;border:1px solid var(--border-color,#e2e8f0);border-radius:.6rem;background:var(--bg-surface,#fff);color:var(--text-main,#182235);font-size:1.3rem;line-height:1;cursor:pointer}
#profile-avatar-crop-dialog .profile-crop-zoom>button:disabled{opacity:.35;cursor:default}
#profile-avatar-crop-dialog .profile-crop-zoom label{flex:1;min-width:0;display:flex;flex-direction:column;gap:.25rem;font-size:.67rem;color:var(--text-muted,#64748b)}
#profile-avatar-crop-dialog .profile-crop-zoom input{width:100%;height:1rem;padding:0;margin:0;border:0;box-shadow:none;background:transparent;accent-color:var(--accent-color,#8b5cf6);cursor:pointer}
#profile-avatar-crop-dialog .profile-crop-zoom output{width:2.7rem;font-size:.72rem;font-weight:800;text-align:right;color:var(--text-main,#182235);font-variant-numeric:tabular-nums}
#profile-avatar-crop-dialog .profile-crop-helper{display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:.67rem;color:var(--text-muted,#64748b)}
#profile-avatar-crop-dialog [data-crop-reset]{border:0;background:transparent;padding:.3rem;color:var(--accent-color,#8b5cf6);font-size:.72rem;font-weight:800;cursor:pointer}
#profile-avatar-crop-dialog menu{padding:.65rem 0 0;gap:.5rem}
#profile-avatar-crop-dialog menu button{position:static;min-height:2.5rem;border-radius:.7rem;cursor:pointer}
#profile-avatar-crop-dialog [data-crop-save]{background:var(--accent-gradient,linear-gradient(135deg,#8b5cf6,#a76bc6));color:#fff;flex:1;border:0}
#profile-avatar-crop-dialog [data-crop-save]:disabled{opacity:.6;cursor:wait}
@media(max-width:380px){#profile-avatar-crop-dialog .profile-image-crop-form{padding:.75rem;gap:.55rem}#profile-avatar-crop-dialog .profile-crop-zoom{gap:.4rem}}

/* Original gocnho.us frame styles, scoped to the imported overlay. */
.gn-source-frame{position:absolute;inset:0;z-index:4;display:block;overflow:visible;pointer-events:none;border-radius:inherit;color:inherit;font:inherit}
.gn-source-frame>.avatar{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;box-sizing:border-box;background:transparent;overflow:visible;display:block;font:inherit}
.gn-source-frame .avatar.has-avatar-frame{
  border: 2px solid var(--avatar-frame);
  box-shadow: inset 0 0 0 2px #090b0e, 0 0 0 2px var(--avatar-frame-accent), 0 0 11px var(--avatar-frame-glow);
}
.gn-source-frame .avatar.has-avatar-frame.avatar-frame-pulse{ animation: gn-src-avatar-frame-pulse 1.55s ease-in-out infinite alternate; }
.gn-source-frame .avatar.has-avatar-frame.avatar-frame-shine{ animation: gn-src-avatar-frame-shine 1.8s ease-in-out infinite; }
.gn-source-frame .avatar.has-avatar-frame.avatar-frame-rainbow{ animation: gn-src-avatar-frame-rainbow 2.4s linear infinite; }
.gn-source-frame .avatar.has-avatar-frame.avatar-theme-skull{ border-style: double; filter: grayscale(.35) contrast(1.1); }
.gn-source-frame .avatar.has-avatar-frame.avatar-theme-bat{ border-radius: 38% 38% 48% 48%; }
.gn-source-frame .avatar.has-avatar-frame.avatar-theme-heart{ border-radius: 50% 50% 45% 45%; }
.gn-source-frame .avatar.has-avatar-frame.avatar-theme-love-vine{ position: relative; overflow: visible; border-color: var(--avatar-frame); border-radius: 15%; isolation: isolate; box-shadow: inset 0 0 0 2px rgba(255,255,255,.28), inset 0 0 12px var(--avatar-frame-glow), 0 0 10px var(--avatar-frame-glow); }
.gn-source-frame .avatar.has-avatar-frame.avatar-theme-love-vine > img{ position: relative; z-index: 1; border-radius: inherit; }
.gn-source-frame .avatar-love-vine{ position: absolute; z-index: 3; inset: -16%; width: 132%; height: 132%; overflow: visible; pointer-events: none; }
.gn-source-frame .avatar-love-vine path{ fill: none; stroke-linecap: round; stroke-linejoin: round; }
.gn-source-frame .avatar-love-vine-shadow{ stroke: rgba(119,18,68,.78); stroke-width: 4.2; }
.gn-source-frame .avatar-love-vine-line{ stroke: var(--avatar-frame); stroke-width: 2.1; filter: drop-shadow(0 0 3px var(--avatar-frame-glow)); }
.gn-source-frame .avatar-love-heart{ position: absolute; z-index: 4; display: block; color: var(--avatar-frame); font-family: Arial,sans-serif; font-size: max(7px,.5em); font-style: normal; line-height: 1; text-shadow: 0 1px #8c204c,0 0 5px var(--avatar-frame-accent); pointer-events: none; animation: gn-src-avatar-love-heart-beat 1.8s ease-in-out infinite alternate; }
.gn-source-frame .avatar-love-heart-one{ top: -13%; left: 14%; transform: rotate(-16deg); }
.gn-source-frame .avatar-love-heart-two{ top: 13%; right: -12%; font-size: max(6px,.42em); animation-delay: -.5s; }
.gn-source-frame .avatar-love-heart-three{ right: 12%; bottom: -13%; transform: rotate(14deg); animation-delay: -.9s; }
.gn-source-frame .avatar-love-heart-four{ bottom: 12%; left: -12%; font-size: max(6px,.4em); animation-delay: -1.25s; }
.gn-source-frame .avatar.has-avatar-frame.avatar-theme-love-vine.avatar-frame-pulse{ animation: gn-src-avatar-love-vine-glow 1.55s ease-in-out infinite alternate; }
.gn-source-frame .avatar.has-avatar-frame.avatar-theme-image-frame{
  position: relative;
  overflow: visible;
  border-color: var(--avatar-frame);
  border-radius: 50%;
  isolation: isolate;
  container-type: inline-size;
  box-shadow: inset 0 0 0 2px var(--avatar-frame-glow), 0 0 0 1px var(--avatar-frame), 0 0 8px var(--avatar-frame-glow);
}
.gn-source-frame .avatar.has-avatar-frame.avatar-theme-image-frame > img{ position: relative; z-index: 1; border-radius: 50%; }
.gn-source-frame .avatar-frame-viewer-avatar.avatar-theme-image-frame .avatar-image-frame{ inset: -36%; width: 172%; height: 172%; }
.gn-source-frame .avatar.has-avatar-frame.avatar-theme-image-frame.avatar-frame-pulse{ animation: gn-src-avatar-image-frame-breathe 2.4s ease-in-out infinite alternate; }
.gn-source-frame .avatar.has-avatar-frame.avatar-theme-image-frame.avatar-frame-shine{ animation-name: gn-src-avatar-image-frame-shine; }
.gn-source-frame .avatar.has-avatar-frame.avatar-theme-image-frame.avatar-frame-rainbow .avatar-image-frame > img{ animation: gn-src-avatar-frame-rainbow 5s linear infinite; }
.gn-source-frame .avatar.has-avatar-frame.avatar-theme-image-frame.avatar-frame-static-artwork,.gn-source-frame .avatar.has-avatar-frame.avatar-theme-image-frame.avatar-frame-static-artwork .avatar-image-frame,.gn-source-frame .avatar.has-avatar-frame.avatar-theme-image-frame.avatar-frame-static-artwork .avatar-image-frame > img{
  animation: none !important;
}
.gn-source-frame .avatar.has-avatar-frame.avatar-theme-dragon-fire{
  position: relative;
  overflow: visible;
  border: 2px solid #ffb52a;
  border-radius: 46% 54% 48% 52%;
  isolation: isolate;
  container-type: inline-size;
  box-shadow: inset 0 0 0 2px #1b0701, inset 0 0 10px #ff5b166b, 0 0 0 1px #7d1e05, 0 0 12px #ff3d00a6;
  transform-style: preserve-3d;
}
.gn-source-frame .avatar.has-avatar-frame.avatar-theme-dragon-fire > img{ position: relative; z-index: 1; border-radius: inherit; }
.gn-source-frame .avatar-dragon-scene{ position: absolute; z-index: 4; inset: -34%; display: block; width: 168%; height: 168%; pointer-events: none; transform-style: preserve-3d; animation: gn-src-avatar-dragon-float 3.4s ease-in-out infinite; }
.gn-source-frame .avatar-dragon-frame{ width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 3px 2px #000b) drop-shadow(0 0 4px #ff4513ad); transform: rotateZ(-2deg) rotateY(-7deg); transform-origin: 50% 50%; }
.gn-source-frame .avatar-dragon-frame path{ stroke-linecap: round; stroke-linejoin: round; }
.gn-source-frame .avatar-dragon-depth,.gn-source-frame .avatar-dragon-body,.gn-source-frame .avatar-dragon-scales,.gn-source-frame .avatar-dragon-tail{ fill: none; }
.gn-source-frame .avatar-dragon-depth{ stroke: #350500; stroke-width: 15; }
.gn-source-frame .avatar-dragon-body{ stroke: #aa2105; stroke-width: 11; }
.gn-source-frame .avatar-dragon-scales{ stroke: #ffd34f; stroke-width: 4.5; stroke-dasharray: .6 8.2; filter: drop-shadow(0 0 2px #ffef91); animation: gn-src-avatar-dragon-scales-flow 2.3s linear infinite; }
.gn-source-frame .avatar-dragon-tail{ stroke: #ff8f16; stroke-width: 7; filter: drop-shadow(0 0 2px #ff3500); }
.gn-source-frame .avatar-dragon-head{ transform-box: fill-box; transform-origin: 35% 70%; animation: gn-src-avatar-dragon-head-sway 1.65s ease-in-out infinite alternate; }
.gn-source-frame .avatar-dragon-neck{ fill: #8f1503; stroke: #4a0700; stroke-width: 2; }
.gn-source-frame .avatar-dragon-face{ fill: #c62a06; stroke: #4a0700; stroke-width: 2.2; filter: drop-shadow(0 0 2px #ff5c16); }
.gn-source-frame .avatar-dragon-horn-back,.gn-source-frame .avatar-dragon-horn-front{ fill: #ffd35c; stroke: #6b2100; stroke-width: 1.5; }
.gn-source-frame .avatar-dragon-brow{ fill: #ffb323; stroke: #721500; stroke-width: 1; }
.gn-source-frame .avatar-dragon-eye{ fill: #fff9b5; stroke: #ff3b00; stroke-width: 1.1; filter: drop-shadow(0 0 2px #fff); animation: gn-src-avatar-dragon-eye-glow .8s ease-in-out infinite alternate; }
.gn-source-frame .avatar-dragon-fang{ fill: #fffbd8; stroke: #712000; stroke-width: .7; }
.gn-source-frame .avatar-dragon-fire{ position: absolute; z-index: 6; top: 42%; right: -16%; width: 38%; height: 22%; display: block; filter: drop-shadow(0 0 4px #ff3d00); transform: rotate(3deg); transform-origin: 0 50%; animation: gn-src-avatar-dragon-fire-breath 1.35s ease-in-out infinite; }
.gn-source-frame .avatar-dragon-fire > i,.gn-source-frame .avatar-dragon-fire > b{ position: absolute; left: 0; top: 50%; display: block; border-radius: 65% 15% 65% 35%; transform: translateY(-50%); transform-origin: 0 50%; }
.gn-source-frame .avatar-dragon-fire > i:nth-child(1){ width: 100%; height: 100%; background: linear-gradient(90deg,#ffdf45,#ff6a00 52%,#ff1600 82%,transparent); clip-path: polygon(0 32%,22% 3%,44% 29%,70% 0,61% 39%,100% 50%,65% 67%,76% 100%,43% 71%,18% 96%,0 66%); }
.gn-source-frame .avatar-dragon-fire > i:nth-child(2){ width: 72%; height: 60%; background: linear-gradient(90deg,#fffbd1,#ffe936 45%,#ff7800 100%); clip-path: polygon(0 25%,35% 0,45% 34%,100% 48%,53% 70%,29% 100%,0 70%); animation: gn-src-avatar-dragon-flame-core .62s ease-in-out infinite alternate; }
.gn-source-frame .avatar-dragon-fire > i:nth-child(3){ left: 8%; width: 42%; height: 27%; background: #fff; box-shadow: 0 0 5px #fff5a5; opacity: .82; }
.gn-source-frame .avatar-dragon-fire > b{ left: 72%; width: 21%; height: 34%; background: #ff5a00; filter: blur(.4px); animation: gn-src-avatar-dragon-flame-tip .75s ease-out infinite; }
.gn-source-frame .avatar-dragon-ember{ position: absolute; z-index: 7; right: -7%; top: 46%; width: max(2px,2.5cqw); height: max(2px,2.5cqw); display: block; border-radius: 50%; background: #ffe94d; box-shadow: 0 0 4px #ff3b00; animation: gn-src-avatar-dragon-ember 1.4s ease-out infinite; }
.gn-source-frame .avatar-dragon-ember.ember-two{ top: 39%; animation-delay: -.48s; }
.gn-source-frame .avatar-dragon-ember.ember-three{ top: 52%; animation-delay: -.92s; }
.gn-source-frame .avatar.has-avatar-frame.avatar-theme-dragon-fire.avatar-frame-shine{ animation: gn-src-avatar-dragon-breathe 2.2s ease-in-out infinite alternate; }
.gn-source-frame .avatar.has-avatar-frame.avatar-theme-princess{ outline: 1px solid color-mix(in srgb, var(--avatar-frame-accent) 70%, transparent); outline-offset: 3px; }
.gn-source-frame .avatar.has-avatar-frame.avatar-theme-paw{ border-style: dotted; }
.gn-source-frame .avatar.has-avatar-frame.avatar-theme-galaxy{ filter: saturate(1.35); }
.gn-source-frame .avatar.has-avatar-frame.avatar-theme-star{ clip-path: polygon(50% 0, 61% 9%, 76% 6%, 82% 20%, 96% 27%, 91% 42%, 100% 55%, 88% 66%, 87% 82%, 70% 84%, 59% 98%, 46% 90%, 31% 98%, 21% 84%, 5% 80%, 10% 63%, 0 51%, 11% 39%, 6% 23%, 23% 18%, 31% 4%); }
.gn-source-frame .avatar.has-avatar-frame.avatar-theme-ocean{ border-bottom-width: 4px; }
.gn-source-frame .avatar.has-avatar-frame.avatar-theme-coral{ border-radius: 42% 58% 46% 54%; }
.gn-source-frame .avatar.has-avatar-frame.avatar-theme-forest{ outline: 2px dotted var(--avatar-frame-accent); outline-offset: 2px; }
.gn-source-frame .avatar.has-avatar-frame.avatar-theme-frost{ border-radius: 18%; }
.gn-source-frame .avatar.has-avatar-frame.avatar-theme-royal{ border-width: 3px; border-radius: 36% 36% 50% 50%; }
@media (prefers-reduced-motion: reduce){.gn-source-frame .avatar.has-avatar-frame.avatar-theme-love-vine,.gn-source-frame .avatar-love-heart,.gn-source-frame .avatar.has-avatar-frame.avatar-theme-image-frame,.gn-source-frame .avatar.has-avatar-frame.avatar-theme-dragon-fire,.gn-source-frame .avatar-dragon-scene,.gn-source-frame .avatar-dragon-scales,.gn-source-frame .avatar-dragon-head,.gn-source-frame .avatar-dragon-eye,.gn-source-frame .avatar-dragon-fire,.gn-source-frame .avatar-dragon-fire > *,.gn-source-frame .avatar-dragon-ember{ animation: none !important; }}
.gn-source-frame .avatar-frame-viewer-card{ width: min(84vw,430px); min-height: min(78vh,520px); display: grid; place-items: center; align-content: center; gap: 5px; overflow: hidden; padding: 42px 28px 25px; border: 1px solid #71320f; border-radius: 18px; background: radial-gradient(circle at 50% 40%,#441305 0,#170905 42%,#060708 74%); color: #fff; text-align: center; box-shadow: inset 0 0 45px #ff4b121f,0 18px 60px #000b; }
.gn-source-frame .avatar-frame-viewer-stage{ width: 100%; min-height: 330px; display: grid; place-items: center; perspective: 700px; }
.gn-source-frame .avatar-frame-viewer-avatar{ width: 190px; height: 190px; font-size: 58px; }
.gn-source-frame .avatar-frame-viewer-card > strong{ margin-top: 7px; color: #fff4df; font-family: Georgia,serif; font-size: 22px; text-shadow: 0 0 8px #ff651f; }
.gn-source-frame .avatar-frame-viewer-card > small{ color: #d7a47d; font-size: 11px; }
.gn-source-frame .avatar-frame-viewer-meta{ display: grid; justify-items: center; gap: 3px; margin-top: 2px; }
.gn-source-frame .avatar-frame-viewer-meta > strong{ color: #f7e7d6; font-size: 12px; line-height: 1.35; }
.gn-source-frame .avatar-frame-viewer-meta > strong:last-child{ color: #e8bd82; font-size: 11px; }
.gn-source-frame .avatar-frame-viewer-card > em{ margin-top: 5px; padding: 5px 10px; border: 1px solid #97410d; border-radius: 999px; background: #381305; color: #ffd75e; font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: .04em; }
.gn-source-frame .avatar-frame-viewer-actions{ width: min(100%,360px); display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin-top: 13px; }
.gn-source-frame .avatar-frame-viewer-actions > button{ min-width: 0; min-height: 43px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 9px; border: 1px solid #654123; border-radius: 9px; background: linear-gradient(145deg,#2b1a10,#17110e); color: #e7c7a1; cursor: pointer; font-size: 11px; font-weight: 850; line-height: 1.25; }
.gn-source-frame .avatar-frame-viewer-actions > button:hover{ border-color: #bd7034; background: linear-gradient(145deg,#4b260f,#21140e); color: #fff0d7; }
.gn-source-frame .avatar-frame-viewer-actions > button:first-child{ border-color: #8c3c4c; background: linear-gradient(145deg,#5d1e2b,#2c141a); color: #ffb3bd; }
.gn-source-frame .avatar-frame-viewer-actions > button:last-child{ border-color: #775e22; background: linear-gradient(145deg,#4c3a12,#241c0d); color: #ffe08a; }
.gn-source-frame .avatar-frame-viewer-actions svg{ flex: 0 0 16px; width: 16px; height: 16px; }
.gn-source-frame .avatar-frame-viewer-actions > button:only-child{ grid-column: 1/-1; justify-self: center; width: min(100%,220px); }
@media (max-width: 520px){.gn-source-frame .avatar-frame-viewer-card{ width: 92vw; min-height: 470px; padding-inline: 16px; }
.gn-source-frame .avatar-frame-viewer-stage{ min-height: 295px; }
.gn-source-frame .avatar-frame-viewer-avatar{ width: 158px; height: 158px; font-size: 48px; }
.gn-source-frame .avatar-frame-viewer-actions{ grid-template-columns: 1fr; }
.gn-source-frame .avatar-frame-viewer-actions > button:only-child{ grid-column: auto; width: 100%; }}
.gn-source-frame .avatar.has-avatar-frame.avatar-theme-donate-g{position:relative;overflow:visible;border:2px solid #f6c84c;border-radius:50%;isolation:isolate;container-type:inline-size;box-shadow:inset 0 0 0 2px #161006,inset 0 0 7px #ffe59a66,0 0 0 1px #7e5008,0 0 10px #c7891991}
.gn-source-frame .avatar.has-avatar-frame.avatar-theme-donate-g>img{position:relative;z-index:1;border-radius:50%}
.gn-source-frame .avatar-donate-g-ring{position:absolute;z-index:3;inset:-18%;width:136%;height:136%;overflow:visible;pointer-events:none}
.gn-source-frame .avatar-donate-g-ring path{fill:none;stroke-linecap:square;stroke-linejoin:bevel}
.gn-source-frame .avatar-donate-g-shadow{stroke:#4e2d03;stroke-width:7}
.gn-source-frame .avatar-donate-g-gold{stroke:url(#avatar-donate-g-gradient);stroke:#f6c84c;stroke-width:3.2;filter:drop-shadow(0 0 2px #ffdd6c)}
.gn-source-frame .avatar-donate-g-logo{position:absolute;z-index:5;left:50%;bottom:-19%;width:38%;height:27%;display:grid;place-items:center;border:1px solid #fff0a0;clip-path:polygon(13% 0,87% 0,100% 28%,88% 100%,12% 100%,0 28%);background:linear-gradient(145deg,#fff2a1 0,#e6ae24 43%,#8e5607 100%);color:#241300;font-family:Georgia,serif;font-size:clamp(7px,16cqw,16px);font-style:normal;font-weight:950;line-height:1;text-shadow:0 1px #fff1a5,0 -1px #6f4100;box-shadow:0 2px 5px #000b,0 0 5px #e9b834;transform:translateX(-50%);pointer-events:none}
.gn-source-frame .avatar.has-avatar-frame.avatar-theme-donate-g.avatar-frame-shine{animation:gn-src-avatar-donate-g-breathe 2.2s ease-in-out infinite alternate}
@media(prefers-reduced-motion:reduce){.gn-source-frame .avatar.has-avatar-frame.avatar-theme-donate-g.avatar-frame-shine{animation:none!important}}
.gn-source-frame .avatar.has-avatar-frame.avatar-theme-mi-da{position:relative;overflow:visible;border:2px solid var(--avatar-frame);border-radius:34% 46% 36% 44%;isolation:isolate;container-type:inline-size;background:#08050b;box-shadow:inset 0 0 0 2px #09050d,inset 0 0 10px #6f3d8f55,0 0 0 1px #3b1d4b,0 0 11px #6f3d8f88}
.gn-source-frame .avatar.has-avatar-frame.avatar-theme-mi-da>img{position:relative;z-index:1;border-radius:inherit}
.gn-source-frame .avatar-mi-da-ring{position:absolute;z-index:4;inset:-18%;width:136%;height:136%;overflow:visible;pointer-events:none;filter:drop-shadow(0 0 2px #6a357f)}
.gn-source-frame .avatar-mi-da-ring path{stroke-linecap:round;stroke-linejoin:round}
.gn-source-frame .avatar-mi-da-ring-shadow{fill:none;stroke:#160a1d;stroke-width:7}
.gn-source-frame .avatar-mi-da-ring-line{fill:none;stroke:var(--avatar-frame);stroke-width:2.5}
.gn-source-frame .avatar-mi-da-vine{fill:#13091a;stroke:var(--avatar-frame-accent);stroke-width:1.15;filter:drop-shadow(0 0 2px var(--avatar-frame-glow))}
.gn-source-frame .avatar-mi-da-flame{fill:#8c55ae;stroke:#e8d5f3;stroke-width:.8;filter:drop-shadow(0 0 4px #9d54c9);transform-box:fill-box;transform-origin:center;animation:gn-src-avatar-mi-da-flame 1.9s ease-in-out infinite alternate}
.gn-source-frame .avatar-mi-da-flame-right{animation-delay:-.9s}
.gn-source-frame .avatar-mi-da-smoke{position:absolute;z-index:3;display:block;width:33%;height:48%;border-radius:50%;background:radial-gradient(ellipse at 50% 75%,#a86bc866 0,#5e347d3d 38%,transparent 72%);filter:blur(2px);opacity:.65;pointer-events:none;animation:gn-src-avatar-mi-da-smoke 3.2s ease-in-out infinite}
.gn-source-frame .avatar-mi-da-smoke-one{top:-28%;left:2%;transform:rotate(-24deg)}
.gn-source-frame .avatar-mi-da-smoke-two{right:-2%;bottom:-28%;transform:rotate(156deg);animation-delay:-1.6s}
.gn-source-frame .avatar-mi-da-gem{position:absolute;z-index:5;top:-16%;left:50%;display:grid;place-items:center;width:21%;aspect-ratio:1;transform:translateX(-50%) rotate(45deg);border:1px solid #e8d9ef;border-radius:3px;background:linear-gradient(145deg,#e5cff0,#71418d 52%,#16091d);color:#f4eafb;font-family:Georgia,serif;font-size:clamp(5px,9cqw,11px);font-style:normal;line-height:1;text-shadow:0 0 4px #fff;box-shadow:0 0 5px #8d54ad;pointer-events:none}
.gn-source-frame .avatar.has-avatar-frame.avatar-theme-mi-da.avatar-frame-shine{animation:gn-src-avatar-mi-da-breathe 2.7s ease-in-out infinite alternate}
@media(prefers-reduced-motion:reduce){.gn-source-frame .avatar.has-avatar-frame.avatar-theme-mi-da.avatar-frame-shine,.gn-source-frame .avatar-mi-da-flame,.gn-source-frame .avatar-mi-da-smoke{animation:none!important}}
.gn-source-frame .avatar-song-ngu-orbit{position:absolute;z-index:6;inset:-22%;display:block;width:144%;height:144%;transform-origin:50% 50%;pointer-events:none;will-change:transform;animation:gn-src-avatar-song-ngu-orbit 14s linear infinite}
.gn-source-frame .avatar-song-ngu-orbit>img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 2px #c8fbff) drop-shadow(0 0 4px #7256ce);user-select:none}
.gn-source-frame .avatar-song-ngu-spark{position:absolute;z-index:2;display:block;width:max(2px,4.4cqw);aspect-ratio:1;border-radius:50%;background:#f5feff;box-shadow:0 0 3px #fff,0 0 7px #7ee9f0;opacity:.88;animation:gn-src-avatar-song-ngu-spark 1.65s ease-in-out infinite}
.gn-source-frame .avatar-song-ngu-spark:after{content:"";position:absolute;inset:35% -80%;background:#dffcff;border-radius:50%;transform:rotate(45deg);opacity:.7}
.gn-source-frame .avatar-song-ngu-spark.spark-a1{top:16%;left:77%}
.gn-source-frame .avatar-song-ngu-spark.spark-a2{top:22%;left:84%;animation-delay:-.55s;scale:.72}
.gn-source-frame .avatar-song-ngu-spark.spark-a3{top:29%;left:88%;animation-delay:-1.1s;scale:.48}
.gn-source-frame .avatar-song-ngu-spark.spark-b1{top:77%;left:17%;animation-delay:-.3s}
.gn-source-frame .avatar-song-ngu-spark.spark-b2{top:83%;left:24%;animation-delay:-.85s;scale:.72}
.gn-source-frame .avatar-song-ngu-spark.spark-b3{top:87%;left:32%;animation-delay:-1.35s;scale:.48}
.gn-source-frame .avatar-song-ngu-cloud{position:absolute;z-index:4;display:block;width:72%;height:28%;border-radius:50%;background:radial-gradient(circle at 19% 64%,#dffcffb8 0 17%,transparent 19%),radial-gradient(circle at 41% 47%,#c9ecfab0 0 24%,transparent 26%),radial-gradient(circle at 67% 60%,#b9d5f1a3 0 22%,transparent 24%),radial-gradient(ellipse at 50% 73%,#a991d88c 0 45%,transparent 68%);filter:blur(max(1px,2cqw));opacity:.34;pointer-events:none;will-change:transform,opacity;animation:gn-src-avatar-song-ngu-cloud 5.6s ease-in-out infinite}
.gn-source-frame .avatar-song-ngu-cloud.cloud-one{top:-24%;left:-20%;transform:rotate(-13deg)}
.gn-source-frame .avatar-song-ngu-cloud.cloud-two{right:-21%;bottom:-23%;transform:rotate(167deg);animation-delay:-2.8s}
.gn-source-frame .avatar.has-avatar-frame.avatar-theme-song-ngu.avatar-frame-shine{animation:gn-src-avatar-song-ngu-halo 3.1s ease-in-out infinite alternate}
@media(max-width:680px){.gn-source-frame .avatar-song-ngu-orbit{animation-duration:13s}
.gn-source-frame .avatar-song-ngu-cloud{animation-duration:5s}}
@media(prefers-reduced-motion:reduce){.gn-source-frame .avatar.has-avatar-frame.avatar-theme-song-ngu.avatar-frame-shine,.gn-source-frame .avatar-song-ngu-orbit,.gn-source-frame .avatar-song-ngu-spark,.gn-source-frame .avatar-song-ngu-cloud{animation:none!important}}
.gn-source-frame .avatar.has-avatar-frame{
  position: relative;
  z-index: 120 !important;
  overflow: visible !important;
}
.gn-source-frame .avatar.has-avatar-frame.avatar-theme-image-frame .avatar-image-frame,.gn-source-frame .avatar.has-avatar-frame.avatar-theme-image-frame .avatar-image-frame > img{
  background:transparent!important;
  box-shadow:none!important
}
.gn-source-frame .avatar.has-avatar-frame.avatar-theme-image-frame .avatar-image-frame > img{
  filter:none!important;
  mix-blend-mode:normal
}
.gn-source-frame .avatar-frame-red-devils .avatar-image-frame{
  isolation:isolate;
  will-change:transform;
  animation:gn-src-red-devils-frame-float 4.8s cubic-bezier(.45,.05,.55,.95) infinite!important
}
.gn-source-frame .avatar-frame-red-devils .avatar-image-frame:before,.gn-source-frame .avatar-frame-red-devils .avatar-image-frame:after{
  content:"";
  position:absolute;
  z-index:7;
  width:16%;
  height:25%;
  clip-path:polygon(50% 0,64% 31%,88% 17%,78% 59%,100% 52%,74% 100%,22% 100%,0 58%,24% 65%,13% 23%,39% 39%);
  background:radial-gradient(ellipse at 50% 82%,#fff3a8 0 9%,#ffc52f 18%,#ff5a16 38%,#dc0909 59%,transparent 73%);
  mix-blend-mode:screen;
  transform-origin:50% 100%;
  pointer-events:none;
  animation:gn-src-red-devils-fire-flicker 1.55s ease-in-out infinite alternate
}
.gn-source-frame .avatar-frame-red-devils .avatar-image-frame:before{
  top:18%;
  left:6%;
  rotate:-19deg
}
.gn-source-frame .avatar-frame-red-devils .avatar-image-frame:after{
  right:7%;
  bottom:15%;
  rotate:24deg;
  animation-delay:-.78s
}
@media(prefers-reduced-motion:reduce){.gn-source-frame .avatar-frame-red-devils .avatar-image-frame,.gn-source-frame .avatar-frame-red-devils .avatar-image-frame:before,.gn-source-frame .avatar-frame-red-devils .avatar-image-frame:after{
    animation:none!important;
    will-change:auto
  }}
@keyframes gn-src-avatar-donate-g-breathe{to{box-shadow:inset 0 0 0 2px #181006,inset 0 0 10px #ffe7a180,0 0 0 2px #d69a22,0 0 15px #e8b637a6;filter:brightness(1.05)}}
@keyframes gn-src-avatar-dragon-breathe{ to { box-shadow: inset 0 0 0 2px #280a02, inset 0 0 14px #ff9b287d, 0 0 0 2px #ffab26, 0 0 20px #ff3d00d1; filter: brightness(1.09) saturate(1.08); } }
@keyframes gn-src-avatar-dragon-ember{ to { opacity: 0; transform: translate(550%,-180%) scale(.2); } }
@keyframes gn-src-avatar-dragon-eye-glow{ to { fill: #fff; filter: drop-shadow(0 0 4px #fff85d); } }
@keyframes gn-src-avatar-dragon-fire-breath{
  0%, 100% { opacity: .76; transform: rotate(3deg) scaleX(.68) scaleY(.82); }
  45%, 70% { opacity: 1; transform: rotate(-2deg) scaleX(1.08) scaleY(1.06); }
}
@keyframes gn-src-avatar-dragon-flame-core{ to { transform: translateY(-50%) scaleX(.83) scaleY(1.22); } }
@keyframes gn-src-avatar-dragon-flame-tip{ to { opacity: 0; transform: translate(90%,-65%) scale(.25); } }
@keyframes gn-src-avatar-dragon-float{
  0%, 100% { transform: translateY(0) rotateZ(-1deg) rotateY(0); }
  50% { transform: translateY(-2%) rotateZ(1.8deg) rotateY(9deg); }
}
@keyframes gn-src-avatar-dragon-head-sway{ to { transform: rotate(5deg) translate(1px,-1px); } }
@keyframes gn-src-avatar-dragon-scales-flow{ to { stroke-dashoffset: -18; } }
@keyframes gn-src-avatar-frame-pulse{
  to { box-shadow: inset 0 0 0 2px #090b0e, 0 0 0 3px var(--avatar-frame-accent), 0 0 17px var(--avatar-frame-glow); }
}
@keyframes gn-src-avatar-frame-rainbow{
  0% { border-color: #ff5f7a; box-shadow: inset 0 0 0 2px #090b0e, 0 0 0 2px #ffd35c, 0 0 13px #ff5f7a; }
  33% { border-color: #55efb4; box-shadow: inset 0 0 0 2px #090b0e, 0 0 0 2px #52dfff, 0 0 13px #55efb4; }
  66% { border-color: #8c6fff; box-shadow: inset 0 0 0 2px #090b0e, 0 0 0 2px #ff75c8, 0 0 13px #8c6fff; }
  100% { border-color: #ff5f7a; box-shadow: inset 0 0 0 2px #090b0e, 0 0 0 2px #ffd35c, 0 0 13px #ff5f7a; }
}
@keyframes gn-src-avatar-frame-shine{
  0%, 100% { box-shadow: inset 0 0 0 2px #090b0e, 0 0 0 2px var(--avatar-frame), 0 0 9px var(--avatar-frame-glow); }
  50% { box-shadow: inset 0 0 0 2px #090b0e, 0 0 0 3px var(--avatar-frame-accent), 0 0 19px var(--avatar-frame-glow); }
}
@keyframes gn-src-avatar-image-frame-breathe{ to { box-shadow: inset 0 0 0 2px var(--avatar-frame-glow),0 0 0 2px var(--avatar-frame-accent),0 0 16px var(--avatar-frame-glow); } }
@keyframes gn-src-avatar-image-frame-shine{
  0%, 100% { border-color: var(--avatar-frame); box-shadow: inset 0 0 0 2px var(--avatar-frame-glow),0 0 0 2px var(--avatar-frame),0 0 10px var(--avatar-frame-glow); }
  50% { border-color: var(--avatar-frame-accent); box-shadow: inset 0 0 0 2px var(--avatar-frame),0 0 0 3px var(--avatar-frame-accent),0 0 19px var(--avatar-frame-glow); }
}
@keyframes gn-src-avatar-love-heart-beat{ to { color: #ffd0e2; filter: brightness(1.18); scale: 1.18; } }
@keyframes gn-src-avatar-love-vine-glow{
  to { box-shadow: inset 0 0 0 2px rgba(255,255,255,.38), inset 0 0 18px var(--avatar-frame-glow), 0 0 16px var(--avatar-frame-glow); filter: brightness(1.08); }
}
@keyframes gn-src-avatar-mi-da-breathe{to{box-shadow:inset 0 0 0 2px #09050d,inset 0 0 15px #8b55a877,0 0 0 2px #8f63a9,0 0 17px #744393aa;filter:brightness(1.06)}}
@keyframes gn-src-avatar-mi-da-flame{to{opacity:.7;transform:scale(.82) translateY(2px);filter:drop-shadow(0 0 2px #9d54c9)}}
@keyframes gn-src-avatar-mi-da-smoke{0%,100%{opacity:.25;scale:.78;translate:0 7%}50%{opacity:.7;scale:1.08;translate:5% -9%}}
@keyframes gn-src-avatar-song-ngu-cloud{0%,100%{opacity:.2;translate:-7% 4%;scale:.92}50%{opacity:.43;translate:10% -6%;scale:1.08}}
@keyframes gn-src-avatar-song-ngu-halo{to{box-shadow:inset 0 0 0 2px #071016,inset 0 0 14px #77eaf063,0 0 0 2px #9c82df,0 0 17px #745bd0b0;filter:brightness(1.05)}}
@keyframes gn-src-avatar-song-ngu-orbit{to{transform:rotate(-360deg)}}
@keyframes gn-src-avatar-song-ngu-spark{0%,100%{opacity:.18;filter:blur(.5px);translate:0 0}45%{opacity:1;filter:none;translate:15% -12%}70%{opacity:.48;translate:32% -24%}}
@keyframes gn-src-red-devils-fire-flicker{
  0%{opacity:.45;transform:translate3d(0,7%,0) scale(.74,1.03)}
  45%{opacity:1;transform:translate3d(2%,-4%,0) scale(1.06,.9)}
  100%{opacity:.68;transform:translate3d(-2%,-9%,0) scale(.87,1.13)}
}
@keyframes gn-src-red-devils-frame-float{
  0%,100%{transform:translate3d(0,0,0) rotate(-1deg) scale(1)}
  50%{transform:translate3d(0,-2.2%,0) rotate(1.4deg) scale(1.025)}
}
#profile-media-action-dialog .profile-media-action-form{box-sizing:border-box;width:100%!important;max-width:100%;overflow-x:hidden}
.profile-frame-browser-tools{display:flex;align-items:center;gap:.5rem;margin:.55rem 0;color:var(--text-muted,#64748b);font-size:.7rem}
.profile-frame-browser-tools input{flex:1;min-width:0;padding:.6rem .7rem;border:1px solid var(--border-color,#dfe4ee);border-radius:.7rem;background:var(--bg-elevated,#f7f8fc);color:var(--text-main,#182235);font:inherit;font-size:16px}
.profile-frame-browser-pagination{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.6rem 0;color:var(--text-muted,#64748b);font-size:.72rem}
.profile-frame-browser-pagination button{padding:.45rem .65rem;border:1px solid var(--border-color,#dfe4ee);border-radius:.6rem;background:var(--bg-elevated,#f7f8fc);color:var(--text-main,#182235);font:inherit;font-weight:800;cursor:pointer}
.profile-frame-browser-pagination button:disabled{opacity:.35;cursor:default}
.admin-frame-search{display:flex;align-items:center;gap:.7rem;margin:.75rem 0}.admin-frame-search input{flex:1;min-width:0;border:1px solid var(--border-color,#334155);border-radius:.65rem;padding:.55rem .7rem;background:var(--bg-elevated,#182235);color:inherit;font:inherit}
.admin-frame-pagination{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin:.7rem 0;font-size:.76rem;color:var(--text-muted,#94a3b8)}.admin-frame-pagination button:disabled{opacity:.3;cursor:default}
.admin-source-frame-preview{width:42px;height:42px;position:relative;display:block;font-size:24px;overflow:visible}
@media(max-width:480px){.admin-frame-search{align-items:stretch;flex-direction:column}.admin-frame-search input{font-size:16px}.admin-frame-pagination{font-size:.68rem}}

/* Reserve space for the complete frame, centered on the avatar. */
.profile-avatar-frame-stage{width:5.2rem;height:5.2rem;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
#profile-media-action-dialog .profile-avatar-frame-tile .profile-avatar-picker-preview{width:2.4rem;height:2.4rem;flex:0 0 2.4rem;font-size:1.55rem}
.profile-frame-preview-stage{width:6.8rem;height:6.8rem;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.profile-frame-preview-stage .profile-frame-preview-avatar{width:3rem;height:3rem;flex:0 0 3rem;font-size:1.8rem}
.profile-avatar-frame-tile .gn-source-frame *,.admin-avatar-frame-preview .gn-source-frame *{animation:none!important}
.profile-avatar-frame-tile .avatar-image-frame:after,.admin-avatar-frame-preview .avatar-image-frame:after{animation:none!important;display:none}

.dm-quick-message{position:relative;overflow:visible}
.dm-quick-reactions{position:absolute;right:-.2rem;bottom:-.45rem;pointer-events:none}
.dm-quick-message:has(.dm-quick-reactions:not(:empty)){margin-bottom:.45rem}
.gn-source-frame>.avatar{background:transparent!important}

/* Profile identity row keeps the existing name input and its unsaved value. */
.profile-edit-basics{display:grid;gap:.75rem}
.profile-edit-identity-row{display:flex;align-items:center;gap:.7rem;min-width:0}
.profile-edit-avatar-button{position:relative;display:flex;align-items:center;justify-content:center;width:6.8rem;height:6.8rem;flex:0 0 6.8rem;padding:.2rem;border:0;background:transparent;color:var(--text-main);border-radius:1rem;cursor:pointer}
.profile-edit-avatar-image{position:relative;display:flex;align-items:center;justify-content:center;width:2.8rem;height:2.8rem;flex:0 0 2.8rem;border-radius:50%;font-size:1.7rem}
.profile-edit-avatar-pencil{position:absolute;z-index:3;right:.15rem;bottom:.25rem;display:grid;place-items:center;width:1.85rem;height:1.85rem;border:2px solid var(--bg-surface,#fff);border-radius:50%;background:var(--accent-color,#ec4899);color:#fff;box-shadow:0 2px 8px #0002}
.profile-edit-avatar-pencil svg{width:1rem;height:1rem}
.profile-edit-name-field{flex:1;min-width:0}.profile-edit-name-field input{font-size:16px}
.profile-edit-avatar-button:focus-visible,.profile-frame-preview-stage:focus-visible{outline:2px solid var(--accent-color);outline-offset:3px}
/* Only the body of the avatar picker scrolls; header and footer stay outside. */
#profile-media-action-dialog{overflow:hidden}
#profile-media-action-dialog form.profile-avatar-action-form{display:flex;flex-direction:column;gap:0;padding:0!important;max-height:min(88dvh,45rem)!important;overflow:hidden!important}
#profile-media-action-dialog .profile-avatar-action-form>header{position:relative!important;top:auto;flex:none;margin:0;padding:.6rem .7rem;background:var(--bg-surface,#fff);border-radius:0;box-shadow:none!important}
#profile-media-action-dialog .profile-avatar-action-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:.55rem .65rem;scrollbar-gutter:stable}
#profile-media-action-dialog .profile-avatar-action-form>menu{flex:none;padding:.55rem .65rem;margin:0;background:var(--bg-surface,#fff)}
#profile-media-action-dialog .profile-avatar-action-body .profile-avatar-tabs{margin:.5rem 0}
#profile-media-action-dialog .profile-frame-preview{gap:.45rem;padding:.3rem;margin-bottom:.35rem;min-width:0}
#profile-media-action-dialog .profile-frame-preview-stage{position:relative;display:flex;align-items:center;justify-content:center;width:8.9rem;height:8.9rem;flex:0 0 8.9rem;padding:0;border:0;border-radius:.8rem;background:transparent;color:var(--text-main);cursor:zoom-in}
#profile-media-action-dialog .profile-frame-preview-avatar{width:3.7rem;height:3.7rem;flex:0 0 3.7rem;font-size:2.2rem}
#profile-media-action-dialog .profile-frame-preview>div{min-width:0}
#profile-media-action-dialog .profile-frame-preview strong{font-size:.78rem;overflow-wrap:anywhere}
#profile-media-action-dialog .profile-frame-preview small{font-size:.65rem;line-height:1.45}
.profile-frame-preview-zoom-icon{position:absolute;right:.05rem;bottom:.05rem;display:grid;place-items:center;width:1.4rem;height:1.4rem;border-radius:50%;background:var(--bg-surface,#fff);border:1px solid var(--border-color);font-size:1rem;color:var(--text-muted)}
#profile-media-action-dialog .profile-avatar-action-body .profile-frame-browser-pagination{padding:.35rem 0}
#profile-media-action-dialog .profile-avatar-action-body .profile-avatar-frame-tile{padding:.25rem .15rem;min-height:6.35rem}
.profile-frame-zoom-dialog{width:min(94vw,30rem);max-width:none;max-height:90dvh;overflow:hidden;padding:0;border:1px solid var(--border-color);border-radius:1rem;background:var(--bg-surface,#fff);color:var(--text-main);box-shadow:0 24px 70px #0006}
.profile-frame-zoom-dialog::backdrop{background:#0f172aaa;backdrop-filter:blur(6px)}
.profile-frame-zoom-header{display:flex;align-items:center;gap:.5rem;padding:.65rem .8rem;border-bottom:1px solid var(--border-color)}
.profile-frame-zoom-header h3{flex:1;min-width:0;margin:0;font-size:.9rem;font-weight:800}
.profile-frame-zoom-body{display:flex;flex-direction:column;align-items:center;gap:.45rem;padding:.5rem .7rem 1rem;max-height:calc(90dvh - 3.5rem);overflow:auto;text-align:center}
.profile-frame-zoom-stage{display:flex;align-items:center;justify-content:center;width:min(76vw,22rem,calc(85dvh - 9rem));aspect-ratio:1;flex:none}
.profile-frame-zoom-avatar{position:relative;display:flex;align-items:center;justify-content:center;width:min(24vw,8.5rem,calc((85dvh - 9rem)/2.4));aspect-ratio:1;flex:none;border-radius:50%;font-size:clamp(2.5rem,12vw,4.5rem)}
.profile-frame-zoom-body>strong{font-size:.9rem}.profile-frame-zoom-body>p{margin:0;font-size:.7rem;color:var(--text-muted)}
/* Opaque title backgrounds cover the padding above and beside sticky headers. */
:is(#create-story-modal,#media-popup-modal,#emoji-popup-modal,#account-switcher-modal,#notification-settings-modal,#password-setup-modal,#feed-create-modal) .border-b,
#post-comments-modal>.surface-card>.border-b,#post-comments-header,#viewer-sidebar-header,
.reaction-members-header,.share-popup-header,.post-edit-header,.notification-center-header,
.dm-action-header,.profile-media-action-form>header,.profile-avatar-crop-form>header,
#profile-avatar-crop-dialog header,.gn-cover-editor-header,.marriage-dialog-header,.dm-settings-header,.vip-required-dialog header,.profile-frame-zoom-header{
  background:var(--bg-surface,#fff)!important;
  color:var(--text-main,#172033);
  isolation:isolate;
  box-shadow:0 -2rem 0 2rem var(--bg-surface,#fff);
}
@media(max-width:359px){.profile-edit-avatar-button{width:6rem;height:6rem;flex-basis:6rem}.profile-edit-avatar-image{width:2.5rem;height:2.5rem;flex-basis:2.5rem}.profile-edit-identity-row{gap:.5rem}#profile-media-action-dialog .profile-avatar-action-body{padding-inline:.5rem}}

/* Badges follow the member's active theme, including custom accents. */
.member-badge{display:inline-flex;align-items:center;gap:.18rem;flex:0 0 auto;vertical-align:middle;margin-inline-start:.3rem;padding:.14rem .38rem;border:1px solid var(--accent-ring);border-radius:.45rem;background:var(--accent-soft);color:var(--text-main);-webkit-text-fill-color:var(--text-main);text-shadow:none;font:800 .64rem/1.15 system-ui,sans-serif;letter-spacing:.01em;white-space:nowrap;max-width:10rem;overflow:hidden;text-overflow:ellipsis}
.member-badge>span{font-size:.72rem}
.profile-badge-section{padding:.7rem;border:1px solid var(--border-color);border-radius:.85rem;background:var(--bg-elevated);color:var(--text-main)}
.profile-badge-label{font-size:.78rem;font-weight:800}.profile-badge-section p,.profile-badge-section small{font-size:.73rem;color:var(--text-muted);margin:.25rem 0 .55rem}.profile-badge-section small{display:block;margin:.5rem 0 0}
.profile-badge-choices{display:flex;flex-wrap:wrap;gap:.4rem}.profile-badge-choice{min-height:2rem;padding:.35rem .55rem;border:1px solid var(--border-color);border-radius:.65rem;background:var(--bg-surface);color:var(--text-main);font-size:.75rem;font-weight:700}.profile-badge-choice{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem}.profile-badge-choice .member-badge{margin:0}.profile-badge-choice>small{font-size:.63rem;line-height:1.4;font-weight:500;color:var(--text-muted)}.profile-badge-choice.is-selected{border-color:var(--accent-color);box-shadow:0 0 0 1px var(--accent-ring);background:var(--accent-soft)}.profile-badge-retry{font-size:.73rem;text-decoration:underline;color:var(--text-main)}
#profile-media-action-dialog .profile-frame-preview{gap:.25rem;padding:.2rem;margin-block:.2rem}
#profile-media-action-dialog .profile-frame-preview-stage{width:var(--profile-preview-size,5.3rem);height:var(--profile-preview-size,5.3rem);flex-basis:var(--profile-preview-size,5.3rem)}
#profile-media-action-dialog .profile-frame-preview small{margin-top:.1rem;line-height:1.25;max-width:13rem}

.stranger-match-view{flex:1;display:flex;align-items:center;justify-content:center;padding:1.1rem;width:100%;min-width:0;box-sizing:border-box}
.stranger-match-view.hidden{display:none}.stranger-match-card{width:100%;max-width:27rem;box-sizing:border-box;padding:1.3rem 1.15rem;border:1px solid var(--border-color);border-radius:1.15rem;background:var(--bg-surface);box-shadow:0 12px 35px #00000008;text-align:center;color:var(--text-main)}
.stranger-match-symbol{display:grid;place-items:center;width:3.8rem;height:3.8rem;margin:0 auto .85rem;border-radius:1.2rem;background:var(--accent-soft);color:var(--accent-color)}.stranger-match-symbol svg{width:2rem;height:2rem}.stranger-match-symbol.is-departed{background:var(--bg-elevated);color:var(--text-muted)}
.stranger-match-card h2{margin:0;font-size:1.12rem;line-height:1.45;font-weight:850;color:var(--text-main);-webkit-text-fill-color:var(--text-main)}.stranger-match-card p{font-size:.84rem;line-height:1.65;color:var(--text-muted);margin:.6rem 0 .85rem}.stranger-match-criteria{display:inline-block;padding:.4rem .65rem;border:1px solid var(--border-color);border-radius:.6rem;font-size:.73rem;color:var(--text-muted);background:var(--bg-elevated)}
.stranger-match-actions{display:flex;gap:.55rem;margin-top:1.1rem}.stranger-match-actions button{flex:1;min-height:2.65rem;padding:.6rem .7rem;border-radius:.75rem;font-size:.85rem;font-weight:800;cursor:pointer}.stranger-match-primary{background:var(--accent-gradient);color:#fff;border:1px solid transparent}.stranger-match-secondary{background:var(--bg-elevated);color:var(--text-main);border:1px solid var(--border-color)}.stranger-match-actions button:disabled{opacity:.55;cursor:default}.stranger-match-actions button:focus-visible{outline:2px solid var(--accent-color);outline-offset:3px}
.stranger-action-error{display:flex;align-items:center;justify-content:space-between;gap:.65rem;margin:.6rem auto;padding:.65rem .8rem;border:1px solid var(--border-color);border-radius:.75rem;background:var(--bg-elevated);color:var(--text-main);font-size:.78rem;max-width:27rem;box-sizing:border-box}.stranger-action-error[hidden]{display:none}.stranger-action-error button{font-weight:800;text-decoration:underline;white-space:nowrap}.stranger-action-error button:disabled{opacity:.5}@media(max-width:420px){.stranger-match-view{padding:.85rem}.stranger-match-card{padding:1.1rem .9rem}.stranger-match-card h2{font-size:1.02rem}}

.gn-inline-link{color:var(--accent-color);font-weight:750;text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere;word-break:break-word}.btn-accent .gn-inline-link,.dm-message.is-me .gn-inline-link{color:inherit}.gn-rich-copy{white-space:pre-wrap;overflow-wrap:anywhere}
.gn-link-previews{display:block;white-space:normal;margin:.55rem 0 .1rem;inline-size:22rem;max-inline-size:100%;min-inline-size:0;text-align:left;font-family:system-ui,sans-serif;font-size:13px;line-height:1.4;letter-spacing:normal;text-shadow:none;-webkit-text-fill-color:initial}
.gn-link-card{display:block;position:relative;overflow:hidden;width:100%;max-width:100%;margin:.45rem 0 0;border:1px solid var(--border-color);border-radius:.9rem;background:var(--bg-surface);color:var(--text-main);text-shadow:none;box-sizing:border-box;font-weight:500}.gn-link-card:first-child{margin-top:0}.gn-link-media{position:relative;display:block;isolation:isolate;background:#0b1220;overflow:hidden}.gn-link-media img{display:block;width:100%;height:100%;object-fit:cover}.gn-link-image button{display:block;border:0;width:100%;padding:0;cursor:zoom-in;background:transparent}.gn-link-image img{height:auto;max-height:24rem;min-height:4rem;object-fit:contain}.gn-link-card.has-media-error .gn-link-image{min-height:4rem}
.gn-link-native video{display:block;width:100%;height:auto;min-height:10rem;max-height:26rem;background:#0b1220}.gn-link-embed{aspect-ratio:16/9;min-height:200px}.gn-link-portrait{aspect-ratio:9/13;min-height:300px;max-height:480px}.gn-link-audio{aspect-ratio:auto;min-height:170px}.gn-link-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--bg-elevated)}
.gn-link-play{position:absolute;inset:0;width:100%;height:100%;display:grid;place-items:center;cursor:pointer;padding:0;border:0;background:linear-gradient(145deg,#1e293b,#0f172a);color:#fff}.gn-link-play[hidden]{display:none}.gn-link-play img{position:absolute;inset:0;opacity:.86}.gn-link-play-label{position:relative;display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1rem;border:1px solid #ffffff30;border-radius:999px;background:#0f172ad9;color:#fff;-webkit-text-fill-color:#fff;font-size:.85rem;font-weight:800;box-shadow:0 6px 25px #0004}.gn-link-play-label>span{display:grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;background:#fff;color:#0f172a;-webkit-text-fill-color:#0f172a;font-size:.8rem}.gn-link-provider-mark{position:absolute;top:22%;opacity:.8;transform:scale(1.6)}
.gn-link-footer{display:flex;align-items:center;gap:.5rem;padding:.55rem .65rem;min-width:0;background:var(--bg-surface);color:var(--text-main);-webkit-text-fill-color:var(--text-main)}.gn-link-footer-copy{display:flex;flex-direction:column;gap:.05rem;min-width:0;flex:1}.gn-link-footer strong{font-size:.76rem;line-height:1.25;font-weight:800;color:var(--text-main)}.gn-link-footer small{font-size:.65rem;color:var(--text-muted);-webkit-text-fill-color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gn-link-footer>a{padding:.3rem .45rem;border:1px solid var(--border-color);border-radius:.5rem;color:var(--text-main);text-decoration:none;font-size:.68rem;font-weight:750;white-space:nowrap}.gn-link-brand{display:grid;place-items:center;flex:none;width:1.8rem;height:1.8rem;border-radius:.5rem;background:var(--accent-soft);color:var(--accent-color);-webkit-text-fill-color:currentColor;font:bold 1.1rem/1 system-ui}.gn-link-brand-youtube{background:#fee2e2;color:#ef4444}.gn-link-brand-tiktok,.gn-link-brand-x{background:#101827;color:#fff}.gn-link-brand-facebook{background:#1877f2;color:#fff}.gn-link-brand-instagram{background:linear-gradient(45deg,#f59e0b,#e11d48,#9333ea);color:#fff}.gn-link-brand-spotify{background:#1db954;color:#082c19}.gn-link-brand-soundcloud{background:#ff7700;color:#fff}.gn-link-brand-vimeo{background:#00adef;color:#fff}.gn-link-brand-zalo{background:#0068ff;color:#fff}.gn-link-brand-telegram{background:#229ed9;color:#fff}
.gn-link-url{display:block;padding:0 .65rem .6rem;color:var(--text-muted);-webkit-text-fill-color:var(--text-muted);font-size:.7rem;overflow-wrap:anywhere;word-break:break-word;max-height:3.9rem;overflow:hidden}.gn-link-status{display:flex;align-items:center;justify-content:space-between;gap:.4rem;padding:.5rem .65rem;border-bottom:1px solid var(--border-color);background:var(--bg-elevated);color:var(--text-main);-webkit-text-fill-color:var(--text-main);font-size:.71rem}.gn-link-status[hidden]{display:none}.gn-link-status button{flex:none;font-weight:800;text-decoration:underline}.gn-link-stop{position:absolute;right:.35rem;top:.35rem;z-index:2;border:1px solid #ffffff45;border-radius:.5rem;background:#0f172acc;color:#fff;-webkit-text-fill-color:#fff;padding:.3rem .45rem;font:700 .65rem system-ui;cursor:pointer}.gn-link-card button:focus-visible,.gn-link-card a:focus-visible{outline:2px solid var(--accent-color);outline-offset:-3px}
.feed-bg-post-card+.gn-link-previews{margin:.55rem auto;width:calc(100% - 1.4rem)}.gn-inline-link,.gn-link-previews{user-select:text}.dm-quick-message .gn-link-previews{inline-size:19rem}.dm-quick-message:has(.gn-link-previews){max-width:100%}
@media(max-width:420px){.gn-link-previews{inline-size:19rem}.gn-link-footer{padding:.5rem}.gn-link-play-label{padding:.6rem .8rem;font-size:.75rem}.gn-link-portrait{max-height:430px}.gn-link-image img{max-height:20rem}}
.gn-link-brand svg{width:1.2rem;height:1.2rem}
.gn-link-more{display:block;width:100%;margin-top:.45rem;padding:.55rem .65rem;border:1px dashed var(--border-color);border-radius:.7rem;background:var(--bg-elevated);color:var(--text-main);-webkit-text-fill-color:var(--text-main);font:750 .72rem/1.4 system-ui;cursor:pointer}

/* Compact, opaque, theme-aware friends directory. */
.header-friends-button{width:35px;height:35px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid var(--border-color);border-radius:50%;color:var(--text-main);background:var(--bg-elevated);cursor:pointer;transition:background .15s,color .15s}
.header-friends-button:hover,.header-friends-button[aria-expanded="true"]{color:var(--accent-color);background:var(--accent-soft);border-color:var(--accent-ring)}
.header-friends-button svg{width:19px;height:19px}
.header-friends-button:focus-visible,.online-friends-dialog button:focus-visible,.online-directory-page button:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px}
dialog.online-friends-dialog{padding:0;margin:auto;width:min(470px,calc(100vw - 24px));max-width:none;max-height:min(78dvh,670px);border:1px solid var(--border-color);border-radius:18px;color:var(--text-main);background:var(--bg-surface);box-shadow:0 20px 70px #0005;overflow:hidden}
.online-friends-dialog::backdrop{background:#070d1999;backdrop-filter:blur(3px)}
.online-friends-dialog [data-online-directory]{display:flex;flex-direction:column;max-height:min(78dvh,670px);min-height:0}
.online-directory-page{border:1px solid var(--border-color);border-radius:0 0 16px 16px;overflow:hidden;background:var(--bg-surface);color:var(--text-main)}
.online-directory-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px;background:var(--bg-surface);flex-shrink:0;border-bottom:1px solid var(--border-color)}
.online-directory-heading{display:flex;align-items:center;gap:9px;min-width:0}
.online-directory-symbol{display:flex;padding:8px;border-radius:12px;color:var(--accent-color);background:var(--accent-soft)}
.online-directory-symbol svg{width:20px;height:20px}
.online-directory-heading h2{font-size:16px;font-weight:800;line-height:1.4;margin:0;color:var(--text-main)}
.online-directory-heading p{font-size:11px;margin:2px 0 0;color:var(--text-muted)}
.online-directory-close,.online-directory-footer button{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border-color);background:var(--bg-elevated);color:var(--text-main);border-radius:50%;flex-shrink:0;cursor:pointer}
.online-directory-close svg,.online-directory-footer svg{width:17px;height:17px}
.online-directory-tabs{display:flex;gap:4px;margin:10px 13px 0;padding:3px;background:var(--bg-elevated);border-radius:11px;flex-shrink:0}
.online-directory-tabs button{flex:1;min-width:0;padding:8px 5px;border:0;border-radius:8px;background:transparent;color:var(--text-muted);font-size:12px;font-weight:750;cursor:pointer}
.online-directory-tabs button[aria-pressed="true"]{color:var(--text-main);background:var(--bg-surface);box-shadow:0 1px 4px #0001}
.online-directory-tools{display:flex;align-items:center;justify-content:space-between;gap:7px;padding:10px 14px 7px;flex-shrink:0;font-size:11px;color:var(--text-muted);background:var(--bg-surface)}
.online-directory-tools strong{display:inline-flex;align-items:center;justify-content:center;min-width:20px;padding:1px 5px;margin-left:3px;border-radius:7px;background:var(--accent-soft);color:var(--text-main);font-size:11px}
.online-directory-tools select{max-width:135px;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-elevated);color:var(--text-main);padding:5px 4px;font:inherit}
.online-directory-body{overflow-y:auto;overscroll-behavior:contain;min-height:0;flex:1;scrollbar-width:thin;background:var(--bg-surface)}
.online-directory-list{padding:1px 12px 6px}
.online-directory-person{display:flex;align-items:center;gap:9px;padding:10px 2px;border-bottom:1px solid var(--border-color)}
.online-directory-person:last-child{border-bottom:0}
.online-directory-person-profile{display:flex;align-items:center;gap:11px;flex:1;min-width:0;text-align:left;border:0;background:transparent;color:var(--text-main);cursor:pointer}
.online-directory-avatar{width:42px;height:42px;position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%;font-size:23px}
.online-directory-dot{position:absolute;right:0;bottom:0;width:10px;height:10px;z-index:2;border-radius:50%;background:#22c55e;border:2px solid var(--bg-surface)}
.online-directory-person-copy{min-width:0;flex:1}
.online-directory-person-copy strong{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:750;color:var(--text-main)}
.online-directory-person-copy strong>span:not(.gender-prefix-icon):not(.member-badge){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.online-directory-person-copy small{display:block;font-size:11px;color:var(--text-muted);margin-top:3px}
.online-directory-person-copy .member-badge{flex-shrink:0}
.online-directory-message{width:34px;height:34px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent-color);border:0;border-radius:11px;cursor:pointer}
.online-directory-message svg{width:17px;height:17px}
.online-directory-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:32px 18px;text-align:center;min-height:145px;font-size:13px;color:var(--text-muted)}
.online-directory-empty>svg{width:31px;height:31px;color:var(--text-muted);opacity:.7}
.online-directory-empty p,.online-directory-error p{margin:0}
.online-directory-spinner{width:22px;height:22px;border:2px solid var(--border-color);border-top-color:var(--accent-color);border-radius:50%;animation:online-directory-spin .8s linear infinite}
@keyframes online-directory-spin{to{transform:rotate(360deg)}}
.online-directory-error{padding:15px;text-align:center;color:var(--text-main);font-size:12px}
.online-directory-error button,.online-directory-empty button{border:1px solid var(--accent-ring);border-radius:9px;padding:7px 12px;margin-top:8px;background:var(--accent-soft);color:var(--text-main);font-size:12px;font-weight:750;cursor:pointer}
.online-directory-footer{padding:8px 13px;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-shrink:0;background:var(--bg-surface);border-top:1px solid var(--border-color);color:var(--text-muted);font-size:11px}
.online-directory-footer>div{display:flex;gap:6px}
.online-directory-footer button:disabled{opacity:.35;cursor:default}
@media(max-width:639px){dialog.online-friends-dialog{margin:auto auto max(12px,env(safe-area-inset-bottom));width:calc(100vw - 20px);max-height:75dvh;border-radius:19px}.online-friends-dialog [data-online-directory]{max-height:75dvh}.online-directory-heading h2{font-size:15px}.online-directory-header{padding:12px}.online-directory-person{padding-top:11px;padding-bottom:11px}}
@media(prefers-reduced-motion:reduce){.online-directory-spinner{animation-duration:1.8s}.header-friends-button{transition:none}}

/* Gentle separators between inbox contacts; message bubbles are unaffected. */
#dm-contacts-list > .dm-contact-row + .dm-contact-row::before,
#dm-stranger-requests > .dm-contact-row + .dm-contact-row::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 10px;
  right: 10px;
  height: 1px;
  background: var(--border-color);
  opacity: .75;
  pointer-events: none;
}

/* Optional profile details stay below the nickname and disappear when unset. */
.profile-name-stack{display:flex;flex-direction:column;align-items:center;gap:.3rem}
.profile-name-stack #profile-display-name{flex-wrap:wrap;justify-content:center;line-height:1.3;max-width:100%;margin:0}
.profile-name-stack #profile-display-mood{display:inline-flex;align-items:center;max-width:100%;margin:0;line-height:1.45;white-space:normal;text-align:center;overflow-wrap:anywhere}
#profile-display-mood[hidden],#profile-interests-tags[hidden]{display:none!important}
.profile-optional-title{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;margin-bottom:.375rem}
.profile-optional-title>label{margin:0;min-width:0}
.profile-optional-title small{font-size:10px;font-weight:500;text-transform:none}
.profile-optional-clear{padding:2px 0;flex-shrink:0;border:0;background:transparent;color:var(--accent-color);font-size:11px;font-weight:750;cursor:pointer}
.profile-optional-clear:hover{text-decoration:underline}
.profile-optional-clear:disabled{color:var(--text-muted);opacity:.55;cursor:default;text-decoration:none}
.profile-optional-clear:focus-visible{outline:2px solid var(--accent-color);outline-offset:3px;border-radius:3px}
@media(min-width:640px){.profile-name-stack{align-items:flex-start}.profile-name-stack #profile-display-name{justify-content:flex-start}.profile-name-stack #profile-display-mood{text-align:left}}


/* Background navigation stays hidden while a popup owns the screen. */
html.modal-scroll-locked #app-shell > header,
body.modal-scroll-locked #app-shell > header {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: none !important;
}
html.modal-scroll-restoring #app-shell > header {
  transition: none !important;
}

/* Shared, scoped toast presentation */
#gn-toast-region.gn-toast-region{position:fixed;inset:calc(var(--gn-toast-vtop,0px) + max(16px,env(safe-area-inset-top))) 18px auto auto;width:360px;max-width:calc(100vw - 28px);max-height:calc(var(--gn-toast-vheight,100dvh) - 28px);display:flex;flex-direction:column;gap:9px;margin:0;padding:0;border:0;background:transparent;color:var(--text-main);overflow:visible;z-index:2147483647;pointer-events:none;isolation:isolate;font-family:inherit}#gn-toast-region.gn-toast-region[hidden]{display:none!important}#gn-toast-region.gn-toast-region::backdrop{background:transparent;pointer-events:none}#gn-toast-region .gn-toast{--gn-toast-tone:var(--accent-color,#ec4899);position:relative;display:grid;grid-template-columns:35px minmax(0,1fr) 27px;gap:10px;align-items:start;flex:none;width:100%;box-sizing:border-box;padding:12px 10px 13px 12px;border:1px solid var(--border-color,#e2e8f0);border-radius:15px;background:var(--bg-surface,#fff);color:var(--text-main,#0f172a);box-shadow:0 10px 35px rgb(15 23 42 / .14),0 2px 6px rgb(15 23 42 / .04);pointer-events:auto;overflow:hidden;touch-action:pan-y;animation:gn-toast-enter .2s ease-out both;transition:opacity .16s ease,transform .16s ease}#gn-toast-region .gn-toast-success{--gn-toast-tone:#059669}#gn-toast-region .gn-toast-warning{--gn-toast-tone:#d97706}#gn-toast-region .gn-toast-error{--gn-toast-tone:#e11d48}#gn-toast-region .gn-toast-icon{display:flex;align-items:center;justify-content:center;width:35px;height:35px;border-radius:11px;color:var(--gn-toast-tone);background:var(--accent-soft,#fce7f3);background:color-mix(in srgb,var(--gn-toast-tone) 12%,var(--bg-surface,#fff))}#gn-toast-region .gn-toast-icon svg{width:20px;height:20px;flex:none}#gn-toast-region .gn-toast-copy{min-width:0;padding-top:1px}#gn-toast-region .gn-toast-heading{display:flex;align-items:center;gap:7px;min-width:0;margin-bottom:3px}#gn-toast-region .gn-toast-title{font-size:12px;line-height:1.4;font-weight:800;color:var(--text-main,#0f172a);overflow-wrap:anywhere}#gn-toast-region .gn-toast-message{margin:0;font-size:12px;font-weight:550;line-height:1.55;color:var(--text-muted,#64748b);white-space:pre-line;overflow-wrap:anywhere;max-height:min(8rem,28vh);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}#gn-toast-region .gn-toast-count{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:21px;padding:1px 5px;border:1px solid var(--border-color);border-radius:6px;background:var(--bg-elevated,#f8fafc);color:var(--text-muted,#64748b);font-size:10px;font-weight:750;line-height:1.4}#gn-toast-region .gn-toast-count[hidden],#gn-toast-region .gn-toast-progress[hidden]{display:none!important}#gn-toast-region .gn-toast-close{display:inline-flex;align-items:center;justify-content:center;width:27px;height:27px;padding:5px;margin:-2px -2px 0 0;border:0;border-radius:9px;background:transparent;color:var(--text-muted,#64748b);cursor:pointer;flex:none;transition:background .15s,color .15s}#gn-toast-region .gn-toast-close svg{width:15px;height:15px;flex:none;pointer-events:none}#gn-toast-region .gn-toast-close:hover{background:var(--bg-elevated,#f8fafc);color:var(--text-main,#0f172a)}#gn-toast-region .gn-toast-close:focus-visible{outline:2px solid var(--gn-toast-tone);outline-offset:1px}#gn-toast-region .gn-toast-progress{position:absolute;inset:auto 0 0;height:2px;background:var(--gn-toast-tone);opacity:.65;transform-origin:left;pointer-events:none}#gn-toast-region .gn-toast.gn-toast-leaving{animation:none;opacity:0;transform:translateY(-6px);pointer-events:none}.gn-toast-fallback{display:block;font-size:12px;padding:13px;border:1px solid var(--border-color,#e2e8f0);border-radius:12px;background:var(--bg-surface,#fff);color:var(--text-main,#0f172a);box-shadow:0 8px 28px #0002}
@keyframes gn-toast-enter{from{opacity:0;transform:translateY(-7px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:639px){#gn-toast-region.gn-toast-region{inset:calc(var(--gn-toast-vtop,0px) + max(10px,env(safe-area-inset-top))) 11px auto;width:auto;max-width:400px;margin-inline:auto;gap:8px}#gn-toast-region .gn-toast{grid-template-columns:34px minmax(0,1fr) 28px;gap:9px;padding:11px 9px 12px 11px;border-radius:15px}#gn-toast-region .gn-toast-icon{width:34px;height:34px}#gn-toast-region .gn-toast-title{font-size:12px}#gn-toast-region .gn-toast-message{font-size:12px}#gn-toast-region .gn-toast-close{width:28px;height:28px}}
@media(prefers-reduced-motion:reduce){#gn-toast-region .gn-toast{animation:none;transition:none}#gn-toast-region .gn-toast-close{transition:none}#gn-toast-region .gn-toast-progress{opacity:.45}}

/* An unset introduction has no visible placeholder or empty quote row. */
#profile-display-bio[hidden]{display:none!important}


/* Compact profile favorites — one focal number, reviews below. */
#profile-reviews-summary-box.profile-favorites-summary {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  overflow: hidden;
  padding: 18px 12px 20px;
  border: 1px solid var(--border-color);
  border-radius: var(--ui-radius);
  background: radial-gradient(ellipse at 50% 0, var(--accent-soft), transparent 72%), var(--bg-surface);
  color: var(--text-main);
  text-align: center;
}
.profile-favorites-summary::after {
  content: '';
  position: absolute;
  inset: 0 25% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
  opacity: .65;
  pointer-events: none;
}
.profile-favorites-emblem {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 2px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-color);
}
.profile-favorites-emblem svg { width: 17px; height: 17px; fill: currentColor; stroke-width: 1.5; }
.profile-favorites-total {
  max-width: 100%;
  color: var(--text-main);
  font-size: clamp(60px, 15vw, 80px);
  font-weight: 850;
  line-height: 1.08;
  letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.profile-favorites-caption { margin: 0; color: var(--text-muted); font-size: 12px; font-weight: 650; letter-spacing: .025em; }
#profile-review-form-container[hidden] { display: none !important; }
.profile-favorites-form { padding: 0; }
.profile-favorites-form .chat-composer-shell { margin: 0; }
.profile-favorites-login {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--ui-radius);
  background: var(--bg-surface);
  color: var(--text-main);
  font-size: 12px;
  font-weight: 650;
  text-align: left;
}
.profile-favorites-login svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--accent-color); }
.profile-favorites-login svg:last-child { margin-left: auto; color: var(--text-muted); }
#profile-reviews-list.profile-favorites-list {
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: var(--ui-radius);
  background: var(--bg-surface);
  color: var(--text-main);
}
.profile-favorites-list-title { margin: 0; padding: 11px 12px 7px; font-size: 12px; font-weight: 750; }
.profile-favorite-review { display: flex; align-items: flex-start; gap: 9px; margin: 0 12px; padding: 11px 0; }
.profile-favorite-review + .profile-favorite-review { border-top: 1px solid var(--border-color); }
.profile-favorite-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 18px;
}
.profile-favorite-review-content { flex: 1; min-width: 0; }
.profile-favorite-review-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 7px; min-height: 18px; }
.profile-favorite-review-name { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; color: var(--text-main); font-size: 12px; font-weight: 750; text-align: left; overflow-wrap: anywhere; }
.profile-favorite-review-time { color: var(--text-muted); font-size: 10px; white-space: nowrap; }
.profile-favorite-review-text { margin: 3px 0 0; color: var(--text-main); font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.profile-favorite-delete { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; margin: -5px -5px -5px auto; border-radius: 8px; color: var(--text-muted); }
.profile-favorite-delete svg { width: 14px; height: 14px; }
.profile-favorite-delete:hover { background: var(--accent-soft); color: var(--accent-color); }
.profile-favorite-delete:focus-visible, .profile-favorites-login:focus-visible, .profile-favorite-review-name:focus-visible, .profile-favorite-avatar:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }
.profile-favorites-empty { margin: 0; padding: 7px 12px 17px; color: var(--text-muted); font-size: 12px; }


/* Reserve the message settings frame before its async data arrives. */
#dm-account-settings-dialog {
  height: min(26rem, 88dvh);
  transition: none;
}
#dm-account-settings-dialog > .dm-settings-shell {
  height: 100%;
  min-height: 0;
  max-height: none;
}
#dm-account-settings-dialog .dm-settings-body {
  flex: 1 1 0;
  scrollbar-gutter: stable;
}
#dm-account-settings-dialog .dm-settings-body.dm-settings-empty {
  display: flex;
  align-items: center;
  justify-content: center;
}


/* Staff nicknames and platform-independent gender marks. */
:root { --staff-nick-color: #dc2626; }
body[data-theme="dark"], body[data-theme="amoled"], body[data-theme="tinted-dark"] { --staff-nick-color: #f87171; }
.member-nickname.is-staff {
  color: var(--staff-nick-color) !important;
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
}
.gender-prefix-icon {
  width: 1em;
  height: 1em;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  vertical-align: -.12em;
}
.gender-prefix-icon svg { display: block; width: 100%; height: 100%; background: transparent !important; fill: none; }


/* Primary navigation labels do not display numeric counters. */
#badge-desk-feed,
#badge-desk-messages,
#badge-mob-feed,
#badge-mob-messages { display: none !important; }


/* Header badges must respect their zero-count hidden state. */
#header-notification-badge[hidden],
#header-notification-badge.hidden,
#header-online-btn [hidden],
#header-online-btn .hidden { display: none !important; }

/* Compact Admin actions on member profiles, using the member's theme. */
#profile-admin-options-dialog{height:fit-content;color:var(--text-main)}
#profile-admin-options-dialog .profile-admin-membership-form{gap:.75rem;padding:1rem}
#profile-admin-options-dialog .profile-admin-membership-form>header{padding-bottom:.6rem}
#profile-admin-options-dialog .profile-admin-membership-form>menu{gap:.5rem;padding-top:.65rem}
#profile-admin-options-dialog .profile-admin-membership-form button:disabled{opacity:.55;cursor:default}
#profile-admin-options-dialog .profile-admin-membership-note{padding:.65rem .75rem;border:1px solid var(--border-color);border-radius:var(--ui-radius-sm);background:var(--bg-elevated);color:var(--text-muted);font-size:.75rem;line-height:1.5}
#profile-admin-options-dialog .profile-admin-membership-form [data-close]{display:inline-flex;align-items:center;justify-content:center}

#media-popup-modal:has(#upload-library)> .surface-card{max-width:34rem}
#upload-library{border-top:1px solid var(--border-color);padding-top:.8rem;color:var(--text-main)}
.upload-library-heading{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.5rem}
.upload-library-heading h4{display:flex;align-items:center;gap:.4rem;margin:0;font-size:.82rem;font-weight:850}
.upload-library-heading h4 svg{width:1rem;height:1rem;color:var(--accent-color)}
.upload-library-heading>button{display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--bg-elevated);color:var(--text-muted)}
.upload-library-heading>button svg{width:.9rem;height:.9rem}
.upload-library-filters{display:flex;align-items:center;gap:.3rem;margin-bottom:.65rem;flex-wrap:wrap}
.upload-library-filters>button{padding:.3rem .55rem;border-radius:999px;background:var(--bg-elevated);color:var(--text-muted);font-size:.69rem;font-weight:800}
.upload-library-filters>button[aria-pressed=true]{color:var(--accent-color);background:var(--accent-soft)}
.upload-library-filters>span{margin-left:auto;font-size:.62rem;color:var(--text-muted)}
.upload-library-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;touch-action:pan-y;overscroll-behavior-x:contain}.upload-library-grid[data-library-swipe]{user-select:none;cursor:grab}.upload-library-grid[data-library-swipe]:focus-visible{outline:2px solid var(--accent-color);outline-offset:3px;border-radius:var(--ui-radius-sm)}#upload-library.is-swiping .upload-library-grid,#upload-library.is-swiping .upload-library-item{cursor:grabbing}.upload-library-swipe-hint{margin:.45rem 0 0;text-align:center;color:var(--text-muted);font-size:.63rem;line-height:1.5}
.upload-library-item{display:flex;flex-direction:column;gap:.22rem;min-width:0;text-align:left;border:1px solid var(--border-color);border-radius:var(--ui-radius-sm);padding:.3rem;background:var(--bg-surface);color:var(--text-main);overflow:hidden}
.upload-library-item:hover,.upload-library-item:focus-visible{border-color:var(--accent-color);outline:2px solid var(--accent-soft);outline-offset:1px}
.upload-library-preview{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:4.4rem;border-radius:calc(var(--ui-radius-sm) * .7);overflow:hidden;background:var(--bg-elevated);color:var(--accent-color)}
.upload-library-preview>img{width:100%;height:100%;object-fit:cover}.upload-library-preview>svg{width:1.7rem;height:1.7rem}
.upload-library-kind{position:absolute;bottom:.2rem;left:.2rem;padding:.05rem .25rem;border-radius:.25rem;background:rgba(15,23,42,.75);color:#fff;font-size:.56rem;line-height:1.4}
.upload-library-item>strong{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%;font-size:.65rem;font-weight:800;line-height:1.5}
.upload-library-item>small{color:var(--text-muted);font-size:.53rem;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}
.upload-library-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;min-height:7rem;padding:.8rem;text-align:center;border:1px dashed var(--border-color);border-radius:var(--ui-radius-sm);color:var(--text-muted);font-size:.75rem}
.upload-library-empty>svg{width:1.6rem;height:1.6rem}.upload-library-empty>button{font-weight:800;color:var(--accent-color)}
.upload-library-pagination{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.65rem;font-size:.7rem;color:var(--text-muted)}
.upload-library-pagination>button{padding:.35rem .6rem;border-radius:999px;background:var(--bg-elevated);color:var(--text-main);font-weight:800}
#upload-library button:disabled{opacity:.45;cursor:default}.upload-library-status{margin:.35rem 0 0;color:var(--text-muted);font-size:.68rem;line-height:1.5}.upload-library-status:empty{display:none}
.upload-library-skeleton{display:block;min-height:6.5rem;border-radius:var(--ui-radius-sm);background:var(--bg-elevated);animation:upload-library-pulse 1s ease-in-out infinite alternate}
@keyframes upload-library-pulse{to{opacity:.4}}@media(prefers-reduced-motion:reduce){.upload-library-skeleton{animation:none}}
@media(max-width:480px){.upload-library-preview{height:4rem}.upload-library-grid{gap:.4rem}.upload-library-filters>span{font-size:.58rem}#upload-library{padding-top:.65rem}}

/* Tiểu Mỹ: theme-aware, compact AI controls. */
.member-ai-badge{font:800 9px/1.3 system-ui,sans-serif;letter-spacing:.03em;vertical-align:middle;padding:2px 5px;white-space:nowrap}
.ai-memory-settings{padding:14px;border-radius:16px;margin-top:12px;color:var(--text-main)}
.ai-memory-settings-title{display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:800}
.ai-memory-settings-title button,.ai-memory-dialog button{color:var(--accent-color,var(--text-main));background:var(--bg-elevated,var(--bg-surface));border:1px solid var(--border-color);border-radius:10px;padding:7px 12px;font-weight:700}
.ai-memory-settings p,.ai-memory-body>p{font-size:12px;line-height:1.65;margin:8px 0 0;color:var(--text-muted)}
.ai-memory-dialog{width:min(92vw,540px);max-height:85dvh;padding:0;border:1px solid var(--border-color);border-radius:20px;color:var(--text-main);background:var(--bg-surface)}
.ai-memory-dialog::backdrop{background:rgb(0 0 0/.55);backdrop-filter:blur(6px)}
.ai-memory-dialog[open]{display:flex;flex-direction:column}.ai-memory-dialog header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;flex:none;background:var(--bg-surface);border-bottom:1px solid var(--border-color)}
.ai-memory-dialog header button{font-size:24px;line-height:24px;padding:1px 8px;border:0;background:transparent;color:var(--text-main)}
.ai-memory-body{padding:14px 16px;overflow:auto;overscroll-behavior:contain}.ai-memory-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;font-weight:700}.ai-memory-toggle input{width:20px;height:20px;accent-color:var(--accent-color)}
.ai-memory-facts{display:grid;gap:9px;margin:14px 0}.ai-memory-facts>div{border:1px solid var(--border-color);border-radius:12px;padding:10px 12px;overflow-wrap:anywhere}.ai-memory-facts strong,.ai-memory-facts small{display:block}.ai-memory-facts small{font-size:10px;color:var(--text-muted);margin-top:3px}.ai-memory-facts blockquote{font-size:12px;border-left:2px solid var(--border-color);padding-left:8px;margin:7px 0 0;color:var(--text-muted)}
.ai-memory-body nav{display:flex;align-items:center;justify-content:center;gap:12px;font-size:12px;margin:12px 0}.ai-memory-dialog .ai-memory-forget{width:100%;color:#e75b73;margin-top:8px}

/* Private conversations grow downwards; the persistent composer stays below. */
#dm-conversation-panel > #dm-messages-list,
#tab-messages[data-dm-chat-open] #dm-conversation-panel > #dm-messages-list { order:1; overflow-anchor:none; }
#dm-conversation-panel > #dm-composer-form,
#tab-messages[data-dm-chat-open] #dm-conversation-panel > #dm-composer-form { order:3; }

/* Menu navigation paints the selected section before its data/render work. */
.app-tab-status{grid-column:1 / -1;display:flex;align-items:center;justify-content:center;gap:.65rem;min-height:8rem;margin:0;padding:1rem;color:var(--text-muted);font-size:.85rem;background:var(--bg-surface);border-radius:0 0 1rem 1rem}
.app-tab-status[hidden]{display:none!important}
[data-tab-placeholder] > :not([data-tab-status]){display:none!important}
.app-tab-spinner{width:1.15rem;height:1.15rem;flex:none;border:2px solid var(--border-color);border-top-color:var(--accent-color);border-radius:50%;animation:app-tab-spin .7s linear infinite}
.app-tab-status.is-error .app-tab-spinner{display:none}.app-tab-status button{padding:.5rem .75rem;border:1px solid var(--border-color);border-radius:.65rem;background:var(--bg-elevated,var(--bg-surface));color:var(--text-main);font:700 .75rem inherit;cursor:pointer}.app-tab-status button[hidden]{display:none}
@keyframes app-tab-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.app-tab-spinner{animation:none}}

/* Prebuilt, image-free loading layouts. Hidden layouts do not animate. */
.app-tab-status.app-tab-skeleton{display:block;min-height:0;padding:0;margin:0;background:transparent;border:0;border-radius:0;grid-column:1 / -1;width:100%;min-width:0}
.app-tab-skeleton .sk-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.sk-layout{--sk-gray:rgba(107,114,128,.35);display:grid;gap:12px;min-width:0;width:100%;pointer-events:none;animation:sk-breathe 1.8s ease-in-out infinite}
@supports(background:color-mix(in srgb,#fff,#000)){.sk-layout{--sk-gray:color-mix(in srgb,#6b7280 35%,var(--bg-surface,#fff))}}
.sk-node{display:block;background:var(--sk-gray);flex:none}
.sk-panel{padding:15px;background:var(--bg-surface,#fff);border:1px solid var(--border-color,#e4e9f0);border-radius:15px;min-width:0;overflow:hidden}
.sk-layout>.sk-panel:first-child{border-top-left-radius:0;border-top-right-radius:0}
.sk-row{display:flex;align-items:center;gap:12px;min-width:0}.sk-lines{display:grid;gap:9px;flex:1;min-width:0}
.sk-line{height:10px;border-radius:999px;max-width:100%}.sk-line.is-title{height:14px}.sk-line.is-small{height:8px}
.sk-w-25{width:25%}.sk-w-35{width:35%}.sk-w-45{width:45%}.sk-w-55{width:55%}.sk-w-65{width:65%}.sk-w-80{width:80%}.sk-w-95{width:95%}
.sk-avatar{width:42px;height:42px;border-radius:50%}.sk-avatar.is-small{width:35px;height:35px}.sk-avatar.is-story{width:48px;height:48px}.sk-avatar.is-large{width:86px;height:86px;border:5px solid var(--bg-surface,#fff);box-sizing:border-box}
.sk-pill{height:30px;border-radius:999px;min-width:0}.sk-input{height:40px;flex:1;border-radius:22px}.sk-square{width:28px;height:28px;border-radius:9px}
.sk-story-strip{display:flex;gap:12px;overflow:hidden}.sk-story{display:grid;justify-items:center;gap:8px;flex:0 0 48px}.sk-story .sk-line{width:36px;height:7px}
.sk-copy{display:grid;gap:10px;margin-top:18px}.sk-media{height:190px;border-radius:10px;margin-top:16px}.sk-actions{display:flex;gap:24px;justify-content:space-between;padding-top:16px;margin-top:14px;border-top:1px solid var(--border-color,#e4e9f0)}.sk-actions .sk-line{height:10px;flex:1;max-width:24%}
.sk-list-header{display:flex;align-items:center;gap:14px;margin:2px 0 18px}.sk-list-header .sk-line{flex:1;max-width:45%;margin-right:auto}.sk-list-row{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--border-color,#e4e9f0)}.sk-list-row:last-child{border:0;padding-bottom:3px}.sk-list-row .sk-avatar{width:46px;height:46px}.sk-list-time{width:30px;height:7px;border-radius:10px;align-self:flex-start;margin-top:7px}
.sk-message{display:flex;gap:10px;align-items:flex-start;margin:20px 0}.sk-message.is-own{flex-direction:row-reverse}.sk-bubble{display:grid;gap:10px;padding:14px;width:68%;border-radius:15px;background:var(--bg-elevated,var(--bg-surface,#fff));border:1px solid var(--border-color,#e4e9f0)}.sk-message.is-own .sk-bubble{width:57%}.sk-message .sk-bubble .sk-line{height:9px}.sk-composer{display:flex;gap:9px;align-items:center;margin-top:20px;padding:9px;border:1px solid var(--border-color,#e4e9f0);border-radius:16px}
.sk-profile-cover{height:150px;margin:-15px -15px 0;border-radius:0}.sk-profile-body{padding-top:0;text-align:center}.sk-profile-body>.sk-avatar{margin:-36px auto 12px;position:relative}.sk-center{justify-items:center}.sk-profile-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}.sk-profile-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:18px 0;border-top:1px solid var(--border-color,#e4e9f0)}.sk-stat{display:grid;justify-items:center;gap:10px}.sk-stat>.sk-line:first-child{height:17px;width:30px}.sk-stat>.sk-line:last-child{height:7px;width:80%}.sk-profile-tabs{display:flex;gap:18px;border-top:1px solid var(--border-color,#e4e9f0);padding:17px 0 2px}.sk-profile-tabs .sk-line{flex:1;height:11px}
.sk-match{padding:28px 20px}.sk-match>.sk-avatar{width:82px;height:82px;margin:4px auto 22px}.sk-match>.sk-lines{justify-items:center;gap:13px}.sk-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:28px auto 20px;max-width:390px}.sk-choice-grid .sk-node{height:39px;border-radius:12px}.sk-match-cta{height:43px;border-radius:14px;max-width:390px;margin:auto}.sk-directory-tabs{display:flex;gap:12px;margin:18px 0}.sk-directory-tabs .sk-pill{width:32%;height:28px}
.sk-messages [data-skeleton-conversation]{display:none}.app-tab-skeleton[data-skeleton-variant="conversation"] .sk-messages [data-skeleton-inbox]{display:none}.app-tab-skeleton[data-skeleton-variant="conversation"] .sk-messages [data-skeleton-conversation]{display:block}
.app-tab-skeleton [data-tab-skeleton][hidden],.app-tab-error[hidden]{display:none!important}.app-tab-error{display:flex;justify-content:center;align-items:center;gap:12px;min-height:8rem;padding:20px;background:var(--bg-surface,#fff);color:var(--text-main,#172033);border:1px solid var(--border-color,#e4e9f0);border-radius:0 0 15px 15px;font-size:.85rem}.app-tab-error button{flex:none}
@keyframes sk-breathe{0%,100%{opacity:1}50%{opacity:.62}}
@media(min-width:768px){.sk-panel{padding:18px}.sk-profile-cover{height:185px;margin:-18px -18px 0}.sk-media{height:245px}.sk-layout{gap:14px}}
@media(prefers-reduced-motion:reduce){.sk-layout{animation:none}}

/* A single compact options button; actions live in the modal top layer. */
.stranger-options-trigger{display:inline-flex;align-items:center;gap:6px;flex:none;padding:8px 11px;border:1px solid var(--border-color,#cbd5e1);border-radius:11px;background:var(--bg-surface,#fff);color:var(--text-main,#172033);font-size:12px;font-weight:800;cursor:pointer}
.stranger-options-trigger svg{width:17px;height:17px}
#stranger-options-dialog{width:min(330px,calc(100vw - 28px));padding:0;border:1px solid var(--border-color,#cbd5e1);border-radius:17px;background:var(--bg-surface,#fff);color:var(--text-main,#172033);box-shadow:0 18px 60px #0003}
#stranger-options-dialog::backdrop{background:#0f172a66}
.stranger-options-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border-color,#cbd5e1);background:var(--bg-surface,#fff)}
.stranger-options-heading h2{margin:0;font-size:14px;font-weight:800;color:inherit}
.stranger-options-close{display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:9px;background:var(--bg-elevated,#f1f5f9);color:inherit;font-size:22px;cursor:pointer}
.stranger-options-actions{display:grid;gap:4px;padding:7px}
.stranger-options-actions>button{display:flex;align-items:center;gap:10px;width:100%;padding:12px 10px;text-align:left;border:0;border-radius:11px;background:transparent;color:inherit;font-size:13px;font-weight:700;cursor:pointer}
.stranger-options-actions>button:hover{background:var(--bg-elevated,#f1f5f9)}
.stranger-options-actions>button svg{width:19px;height:19px;flex:none}
.stranger-options-actions>button.is-danger{color:#e11d48;border-top:1px solid var(--border-color,#cbd5e1);border-radius:0 0 11px 11px;margin-top:3px}
.stranger-options-actions>button:disabled{opacity:.5;cursor:default}
#stranger-connection-status{margin:0;padding:7px 12px;background:var(--bg-elevated,#f1f5f9);color:var(--text-muted,#64748b);font-size:11px;text-align:center}
#stranger-connection-status[hidden]{display:none}
.stranger-profile-card{padding:12px;border:1px solid var(--border-color,#cbd5e1);border-radius:15px;background:var(--bg-surface,#fff);color:var(--text-main,#172033);width:min(280px,100%);min-width:min(220px,100%);box-shadow:0 3px 12px #0f172a09}
.stranger-profile-card small{display:block;font-size:10px;font-weight:800;color:var(--text-muted,#64748b);margin-bottom:5px}
.stranger-profile-card p{margin:5px 0 0;font-size:12px;color:var(--text-muted,#64748b);overflow-wrap:anywhere}
.stranger-profile-card-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}
.stranger-profile-card-actions>button{flex:1;padding:8px 10px;border:1px solid var(--border-color,#cbd5e1);border-radius:9px;font-size:11px;font-weight:800;white-space:nowrap;background:var(--bg-elevated,#f1f5f9);color:var(--text-main,#172033);cursor:pointer}
.stranger-friend-actions{display:inline-flex;gap:7px;align-items:center;flex:none}.stranger-friend-actions>button{border:1px solid var(--border-color);cursor:pointer}.stranger-friend-actions>button:disabled{opacity:.65;cursor:default}.stranger-friend-actions>button:not(.btn-accent){background:var(--bg-elevated);color:var(--text-main)}.stranger-friend-actions>button:not(.btn-accent):hover{background:var(--accent-soft);color:var(--accent-color)}
.stranger-profile-card-actions>button:disabled{opacity:.65;cursor:default}

.dm-appearance-surface{background-image:var(--dm-theme-backdrop,none);background-size:cover;background-position:center;background-repeat:no-repeat}
#dm-messages-list[data-dm-custom-outgoing] .dm-message-row.is-me .dm-message-bubble:not(.italic),.dm-quick-chat-messages[data-dm-custom-outgoing] .dm-quick-message.is-me{background:var(--dm-outgoing-color)!important;color:var(--dm-outgoing-text)!important}
#dm-messages-list[data-dm-custom-incoming] .dm-message-row:not(.is-me) .dm-message-bubble:not(.italic),.dm-quick-chat-messages[data-dm-custom-incoming] .dm-quick-message:not(.is-me){background:var(--dm-incoming-color)!important;color:var(--dm-incoming-text)!important}
.dm-feature-vip{margin-left:auto;padding:2px 5px;border-radius:5px;background:var(--accent-soft,#fce7f3);color:var(--accent-color,#db2777);font-size:9px;font-weight:800}
#dm-appearance-dialog{width:min(440px,calc(100vw - 24px));max-height:min(90dvh,700px);padding:0;border:1px solid var(--border-color,#cbd5e1);border-radius:18px;background:var(--bg-surface,#fff);color:var(--text-main,#172033);box-shadow:0 20px 70px #0004;overflow:hidden}
#dm-appearance-dialog::backdrop{background:#0f172a80}
.dm-style-form{display:flex;flex-direction:column;max-height:inherit;margin:0}
.dm-style-header{display:flex;align-items:center;gap:10px;padding:13px 14px;background:var(--bg-surface,#fff);border-bottom:1px solid var(--border-color,#cbd5e1);flex:none;color:var(--text-main,#172033)}
.dm-style-icon{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:11px;background:var(--accent-soft,#fce7f3);color:var(--accent-color,#db2777)}
.dm-style-header h2{font-size:15px;font-weight:800;line-height:1.4;margin:0;color:inherit}.dm-style-header p{font-size:11px;margin:1px 0 0;color:var(--text-muted,#64748b)}
.dm-style-close{margin-left:auto;width:29px;height:29px;border:0;border-radius:9px;background:var(--bg-elevated,#f1f5f9);color:inherit;font-size:22px;line-height:1;cursor:pointer}
.dm-style-body{display:grid;gap:12px;padding:14px;overflow-y:auto;min-height:0;overscroll-behavior:contain}
.dm-style-preview{display:flex;flex-direction:column;gap:10px;padding:18px 13px;border:1px solid var(--border-color,#cbd5e1);border-radius:13px;background-color:var(--bg-elevated,#f1f5f9);min-height:120px;justify-content:center}
.dm-style-preview-bubble{align-self:flex-start;border-radius:13px 13px 13px 4px;padding:8px 12px;font-size:12px;background:var(--dm-incoming-color,var(--bg-surface,#fff));color:var(--dm-incoming-text,var(--text-main,#172033));box-shadow:0 2px 6px #0001}
.dm-style-preview-bubble.is-own{align-self:flex-end;border-radius:13px 13px 4px 13px;background:var(--dm-outgoing-color,var(--accent-color,#db2777));color:var(--dm-outgoing-text,#fff)}
.dm-style-label{font-size:12px;font-weight:800;margin-bottom:-4px}
.dm-style-presets{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.dm-style-presets button{display:grid;gap:5px;justify-items:center;padding:6px 2px;border:1px solid var(--border-color,#cbd5e1);border-radius:10px;background:var(--bg-surface,#fff);color:inherit;cursor:pointer}
.dm-style-presets button[aria-pressed=true]{border-color:var(--accent-color,#db2777);box-shadow:0 0 0 1px var(--accent-color,#db2777)}
.dm-style-presets i{display:block;width:26px;height:26px;border-radius:50%;border:1px solid #64748b22}.dm-style-presets span{font-size:9px;font-weight:700;white-space:nowrap}
.dm-style-upload-row{display:flex;align-items:center;gap:8px}.dm-style-upload{display:flex;align-items:center;justify-content:center;gap:8px;flex:1;min-width:0;padding:10px;border:1px dashed var(--border-color,#cbd5e1);border-radius:11px;background:var(--bg-elevated,#f1f5f9);color:inherit;font-size:12px;font-weight:700;cursor:pointer}.dm-style-upload span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dm-style-upload svg{width:20px;height:20px;flex:none}.dm-style-remove-image{padding:8px 2px;font-size:11px;color:#e11d48;border:0;background:none;cursor:pointer}.dm-style-remove-image[hidden]{display:none}
.dm-style-colors{display:grid;grid-template-columns:1fr 1fr;gap:10px}.dm-style-color-field{padding:9px;border:1px solid var(--border-color,#cbd5e1);border-radius:11px;min-width:0}.dm-style-color-field label{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700}.dm-style-color-field input{width:28px;height:28px;padding:0;border:0;border-radius:7px;background:transparent;cursor:pointer;flex:none}.dm-style-color-field button{display:block;margin:5px 0 0 35px;padding:0;border:0;background:none;color:var(--text-muted,#64748b);font-size:10px;cursor:pointer}
.dm-style-footer{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:11px 14px;border-top:1px solid var(--border-color,#cbd5e1);background:var(--bg-surface,#fff);flex:none}.dm-style-footer p{margin:0;font-size:11px;line-height:1.45;color:var(--text-muted,#64748b);overflow-wrap:anywhere}.dm-style-footer button{flex:none;border:0;border-radius:10px;padding:9px 16px;font-size:12px;font-weight:800;cursor:pointer}#dm-appearance-dialog :disabled{opacity:.55;cursor:wait}

/* Artwork stays on the scroll surface; palettes inherit across header/composer. */
.dm-appearance-surface,.dm-themed-conversation{--dm-auto-outgoing-color:var(--dm-preset-outgoing,var(--accent-color));--dm-auto-incoming-color:var(--dm-preset-incoming,var(--bg-surface));--dm-auto-outgoing-text:#fff;--dm-auto-incoming-text:#20182b;--dm-wallpaper-shade:#00000000;--dm-chrome-accent:var(--dm-outgoing-color,var(--accent-color));--dm-chrome-bg:color-mix(in srgb,var(--dm-chrome-accent) 12%,var(--bg-surface));--dm-chrome-input:color-mix(in srgb,var(--dm-chrome-accent) 7%,var(--bg-surface));--dm-chrome-border:color-mix(in srgb,var(--dm-chrome-accent) 26%,var(--border-color))}
.dm-appearance-surface{background-image:linear-gradient(var(--dm-wallpaper-shade),var(--dm-wallpaper-shade)),var(--dm-theme-backdrop,none);background-size:cover;background-position:center;background-repeat:no-repeat}
body:is([data-theme="dark"],[data-theme="amoled"],[data-theme="tinted-dark"]) :is(.dm-appearance-surface,.dm-themed-conversation){--dm-auto-outgoing-color:var(--dm-preset-outgoing-dark,var(--accent-color));--dm-auto-incoming-color:var(--dm-preset-incoming-dark,var(--bg-surface));--dm-auto-incoming-text:#fff;--dm-wallpaper-shade:#070a1e72;--dm-chrome-bg:color-mix(in srgb,var(--dm-chrome-accent) 20%,var(--bg-surface));--dm-chrome-input:color-mix(in srgb,var(--dm-chrome-accent) 12%,var(--bg-surface))}
#dm-conversation-panel.dm-themed-conversation[data-dm-chrome="on"],.dm-quick-chat-panel.dm-themed-conversation[data-dm-chrome="on"]{background:var(--dm-chrome-bg);border-color:var(--dm-chrome-border);color:var(--text-main)}
#dm-conversation-panel.dm-themed-conversation[data-dm-chrome="on"]>.surface-elevated:first-child,.dm-themed-conversation[data-dm-chrome="on"] .dm-quick-chat-header{background:var(--dm-chrome-bg)!important;color:var(--text-main);border-color:var(--dm-chrome-border)!important}
.dm-themed-conversation[data-dm-chrome="on"] :is(#dm-composer-form,.dm-quick-chat-composer){background:var(--dm-chrome-input)!important;color:var(--text-main);border-color:var(--dm-chrome-border)!important;box-shadow:0 3px 14px color-mix(in srgb,var(--dm-chrome-accent) 10%,transparent)}
.dm-themed-conversation[data-dm-chrome="on"] :is(#dm-chat-input,#dm-quick-chat-input){background:transparent!important;color:var(--text-main)!important;caret-color:var(--dm-chrome-accent)}
.dm-themed-conversation[data-dm-chrome="on"] :is(#dm-chat-input,#dm-quick-chat-input)::placeholder{color:var(--text-muted);opacity:1}
.dm-themed-conversation[data-dm-chrome="on"] :is(.chat-composer-icon-btn,.dm-voice-call-btn,.dm-options-trigger,.dm-quick-chat-header>button){background:color-mix(in srgb,var(--dm-chrome-accent) 13%,var(--bg-surface));color:var(--text-main);border-color:var(--dm-chrome-border)}
.dm-themed-conversation[data-dm-chrome="on"] :is(.chat-composer-send-btn,.dm-quick-chat-send,.dm-preview-send){background:var(--dm-chrome-accent)!important;color:var(--dm-outgoing-text,var(--dm-auto-outgoing-text))!important;border-color:transparent}
.dm-themed-conversation[data-dm-chrome="on"] #dm-partner-bio{color:var(--text-muted)}
.dm-theme-notice{display:flex;justify-content:center;align-self:stretch;width:100%;margin:10px 0!important;padding:0 8px;box-sizing:border-box;clear:both}
.dm-theme-notice>span{display:inline-flex;align-items:center;justify-content:center;gap:6px;max-width:94%;padding:6px 11px;border:1px solid var(--dm-chrome-border,var(--border-color));border-radius:13px;background:color-mix(in srgb,var(--dm-chrome-bg,var(--bg-surface)) 96%,transparent);color:var(--text-main);font-size:11px;line-height:1.45;text-align:center;overflow-wrap:anywhere;box-shadow:0 2px 8px #0000000b}
.dm-theme-notice svg{width:13px;height:13px;flex:none;color:var(--dm-chrome-accent,var(--accent-color))}
#dm-appearance-dialog{width:min(460px,calc(100vw - 24px));max-height:min(92dvh,780px);border-radius:20px}
.dm-style-body{display:flex;flex-direction:column;gap:11px;padding:12px}.dm-style-body>*{flex-shrink:0}
.dm-style-preview-shell{overflow:hidden;border:1px solid var(--dm-chrome-border,var(--border-color));border-radius:14px;background:var(--dm-chrome-bg,var(--bg-surface));color:var(--text-main)}
.dm-style-preview-heading{display:flex;align-items:center;gap:8px;padding:9px 11px;background:var(--dm-chrome-bg);color:var(--text-main)}
.dm-preview-avatar{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:var(--dm-chrome-accent);color:var(--dm-outgoing-text,var(--dm-auto-outgoing-text));font-size:20px;flex:none}
.dm-style-preview-heading strong{font-size:11px;display:block}.dm-style-preview-heading small{font-size:9px;color:var(--text-muted)}.dm-preview-action{margin-left:auto;color:var(--dm-chrome-accent)}
.dm-style-preview{min-height:140px;padding:18px 11px;gap:12px;border:0;border-radius:0;box-sizing:border-box;background-color:var(--bg-elevated);background-position:center 48%}
.dm-style-preview-bubble{font-size:11px;padding:8px 10px;max-width:88%;box-shadow:0 2px 8px #0002;border:1px solid #ffffff15}
.dm-style-preview-composer{display:flex;align-items:center;gap:9px;margin:8px;padding:6px 8px;border:1px solid var(--dm-chrome-border);border-radius:11px;background:var(--dm-chrome-input);font-size:16px;color:var(--text-main)}
.dm-preview-input{font-size:10px;flex:1;color:var(--text-muted)}.dm-preview-send{display:grid;place-items:center;width:25px;height:25px;border-radius:9px;background:var(--dm-chrome-accent);color:var(--dm-outgoing-text,var(--dm-auto-outgoing-text));font-size:12px}
.dm-style-section-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.dm-style-section-heading>span{font-size:9px;color:var(--text-muted)}.dm-style-label{margin:0}
.dm-theme-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.dm-theme-gallery>button{position:relative;isolation:isolate;min-width:0;height:102px;overflow:hidden;padding:0;border:2px solid transparent;border-radius:12px;background:var(--bg-elevated);color:#fff;cursor:pointer;text-align:left;box-shadow:0 2px 6px #00000012}
.dm-theme-gallery img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 55%;transition:transform .2s ease}
.dm-theme-gallery>button>span{position:absolute;inset:auto 0 0;padding:20px 7px 7px;background:linear-gradient(transparent,#090917bb);font-size:10px;font-weight:750;line-height:1.2;color:#fff;pointer-events:none}
.dm-theme-gallery>button>i{display:none;position:absolute;right:5px;top:5px;width:19px;height:19px;border-radius:50%;background:#fff;color:#172033;font-size:12px;font-weight:900;text-align:center;line-height:19px;font-style:normal}
.dm-theme-gallery>button[aria-pressed="true"]{border-color:var(--accent-color);box-shadow:0 0 0 1px var(--accent-color)}.dm-theme-gallery>button[aria-pressed="true"]>i{display:block}
.dm-theme-gallery>button:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px}
@media(hover:hover){.dm-theme-gallery>button:hover img{transform:scale(1.04)}}
@media(max-width:420px){.dm-theme-gallery>button{height:91px}.dm-style-preview{min-height:145px}.dm-style-section-heading>span{font-size:8px}}
@media(prefers-reduced-motion:reduce){.dm-theme-gallery img{transition:none}}

.home-utilities{box-sizing:border-box;width:100%;min-width:0;margin:.55rem 0 0;padding:0;border:1px solid var(--border-color);border-radius:.82rem;background:var(--bg-surface);color:var(--text-main);box-shadow:0 5px 16px rgba(15,23,42,.08)}
.home-utilities-heading{display:flex;align-items:center;gap:.5rem;min-height:2.85rem;margin:0;padding:.62rem .9rem .58rem;border-bottom:1px solid var(--border-color);border-radius:.82rem .82rem 0 0;background:linear-gradient(115deg,color-mix(in srgb,var(--accent-soft) 72%,var(--bg-surface)),var(--bg-elevated))}.home-utilities-heading h2{display:flex;align-items:center;gap:.5rem;margin:0;font-size:.84rem;font-weight:900;line-height:1.4;color:var(--text-main)}.home-utilities-heading h2 svg{width:1.05rem;height:1.05rem;padding:.16rem;box-sizing:content-box;flex:none;border-radius:.48rem;color:#fff;background:var(--accent-gradient);box-shadow:0 3px 9px color-mix(in srgb,var(--accent-color) 28%,transparent)}
.home-utilities-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:.65rem}
.home-utility-item{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;min-width:0;padding:7px 6px;border:1px solid color-mix(in srgb,var(--border-color) 68%,transparent);border-radius:11px;background:color-mix(in srgb,var(--accent-color) 3%,var(--bg-elevated));color:var(--text-main);font-family:inherit;cursor:pointer;touch-action:manipulation;transition:background-color .16s ease,border-color .16s ease,transform .16s ease}
.home-utility-icon{position:relative;display:grid;place-items:center;width:36px;height:36px;flex:none;border:1px solid color-mix(in srgb,var(--accent-color) 16%,var(--border-color));border-radius:12px;background:linear-gradient(145deg,color-mix(in srgb,var(--accent-color) 14%,var(--bg-surface)),color-mix(in srgb,var(--accent-color) 7%,var(--bg-elevated)));color:var(--accent-color);box-shadow:0 2px 5px color-mix(in srgb,var(--accent-color) 8%,transparent),inset 0 1px 0 #ffffff18}
.home-utility-icon svg{width:21px;height:21px}.home-utility-label{max-width:100%;font-size:11px;font-weight:700;line-height:1.3;text-align:center;white-space:nowrap;color:inherit}
.home-utility-item:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px;background:var(--accent-soft)}.home-utility-item:active{transform:scale(.97);background:var(--accent-soft)}
@media(hover:hover){.home-utility-item:hover{background:color-mix(in srgb,var(--accent-color) 7%,var(--bg-surface));border-color:color-mix(in srgb,var(--accent-color) 20%,var(--border-color))}}
@media(max-width:767px){.home-utilities-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:10px}.home-utility-item{flex-direction:column;padding:6px 1px;gap:4px}.home-utility-icon{width:29px;height:29px;border-radius:10px;box-shadow:none}.home-utility-icon svg{width:18px;height:18px}.home-utility-label{font-size:10.5px}}
@media(max-width:360px){.home-utility-label{font-size:10px}}
@media(prefers-reduced-motion:reduce){.home-utility-item{transition:none}}
/* The three homepage blocks share the same outer edges and spacing. */
#home-announcements.announcement-board{padding:.45rem 0 0}
#home-announcements .announcement-board-heading{padding:0 .9rem .55rem}
#home-announcements .announcement-board-frame{border-radius:.82rem}

.members-page{width:100%;max-width:56rem;min-width:0;margin-inline:auto;position:relative;align-self:center;color:var(--text-main);background:var(--bg-surface);border:1px solid var(--border-color);border-radius:0 0 var(--ui-radius,16px) var(--ui-radius,16px);overflow:visible}.members-page.hidden{display:none!important}
@media(min-width:1024px){main.app-container>#tab-members{width:min(66.6667%,45.3333333333rem)!important;max-width:45.3333333333rem!important;margin-inline:auto!important}}
.members-header{position:relative;z-index:10;display:flex;align-items:center;gap:9px;min-height:75px;padding:13px 14px;border-bottom:1px solid var(--border-color);background:var(--bg-surface);color:var(--text-main)}
.members-heading-icon{display:grid;place-items:center;flex:none;width:35px;height:35px;border-radius:11px;background:var(--accent-soft);color:var(--accent-color)}.members-heading-icon svg{width:20px;height:20px}.members-heading-copy{min-width:0;flex:1}.members-heading-copy h1{margin:0;font-size:17px;font-weight:850;line-height:1.4;color:var(--text-main)}.members-heading-copy p{margin:2px 0 0;font-size:12px;font-weight:500;line-height:1.4;color:var(--text-main)}
.members-home,.members-options-button,.members-footer button{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;min-width:31px;min-height:33px;padding:6px;border:1px solid var(--border-color);border-radius:9px;background:var(--bg-elevated);color:var(--text-main);font:inherit;font-size:12px;font-weight:750;cursor:pointer;touch-action:manipulation}.members-home svg,.members-options-button svg,.members-footer svg{width:17px;height:17px;flex:none}.members-options-button{padding:7px 9px}.members-options-wrap{position:relative;flex:none}
.members-options-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:220px;max-width:calc(100vw - 28px);padding:5px;border:1px solid var(--border-color);border-radius:12px;background:var(--bg-surface);color:var(--text-main);box-shadow:0 12px 35px #0003}.members-options-menu[hidden]{display:none}.members-options-menu button{display:flex;align-items:center;gap:9px;width:100%;padding:10px;border:0;border-radius:8px;background:transparent;color:inherit;font:inherit;font-size:13px;font-weight:700;text-align:left;cursor:pointer}.members-options-menu button svg{width:17px;height:17px;flex:none}.members-options-menu button>i{margin-left:auto;visibility:hidden;color:var(--accent-color);font-style:normal}.members-options-menu [aria-checked=true]{background:var(--accent-soft)}.members-options-menu [aria-checked=true]>i{visibility:visible}
.members-list{min-height:280px;padding:0 14px;background:var(--bg-surface);color:var(--text-main)}.members-person{border-bottom:1px solid var(--border-color)}.members-person:last-child{border-bottom:0}.members-person-profile{display:flex;align-items:center;gap:12px;width:100%;min-width:0;min-height:79px;padding:13px 2px;border:0;background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer}
.members-avatar{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;flex:none;width:43px;height:43px;border-radius:50%;background-position:center;background-size:cover;font-size:24px;line-height:1}.members-person-copy{display:flex;flex-direction:column;align-items:flex-start;gap:3px;flex:1;min-width:0}.members-person-copy>strong{display:flex;align-items:center;gap:4px;flex-wrap:wrap;max-width:100%;font-size:15px;line-height:1.5;font-weight:800;overflow-wrap:anywhere;color:var(--text-main)}.members-person-copy small{font-size:13px;line-height:1.45}.members-registered{color:var(--text-main);font-weight:500}.members-presence{display:inline-flex;align-items:center;gap:5px;color:var(--text-main);font-weight:600}.members-presence[hidden]{display:none}.members-presence:before{content:'';width:6px;height:6px;border-radius:50%;background:var(--text-muted);flex:none}.members-presence[data-online=true]{color:var(--text-main)}.members-presence[data-online=true]:before{background:#22c55e}.members-person-arrow{display:flex;flex:none;color:var(--text-muted)}.members-person-arrow svg{width:17px;height:17px}.members-role{flex:none;padding:3px 6px;border-radius:6px;background:var(--accent-soft);color:var(--accent-color);font-size:11px;font-weight:800}
.members-footer{display:flex;align-items:center;gap:10px;min-height:58px;padding:10px 14px;border-top:1px solid var(--border-color);background:var(--bg-surface);border-radius:0 0 var(--ui-radius,16px) var(--ui-radius,16px);color:var(--text-main);font-size:12px}.members-footer>div{display:flex;gap:6px;margin-left:auto}.members-footer button:disabled{opacity:.35;cursor:default}.members-error{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--accent-soft);color:var(--text-main);font-size:11px;line-height:1.5}.members-error[hidden]{display:none}.members-error span{flex:1}.members-error button{flex:none;border:0;background:none;color:var(--text-main);font-size:11px;font-weight:800;text-decoration:underline;cursor:pointer}.members-empty{display:flex;min-height:280px;align-items:center;justify-content:center;flex-direction:column;gap:10px;padding:30px 14px;color:var(--text-muted);font-size:12px;text-align:center}.members-empty svg{width:35px;height:35px;opacity:.65}
.members-skeleton{padding:0 14px;min-height:400px}.members-skeleton-row{display:flex;align-items:center;gap:12px;height:72px;border-bottom:1px solid var(--border-color)}.members-skeleton-avatar,.members-skeleton-row i{display:block;background:#6b728059;animation:members-skeleton-pulse 1.5s ease-in-out infinite}.members-skeleton-avatar{width:42px;height:42px;border-radius:50%;flex:none}.members-skeleton-row>span:last-child{display:grid;gap:9px;flex:1}.members-skeleton-row i{height:10px;width:54%;border-radius:5px}.members-skeleton-row i:last-child{height:7px;width:32%}
.members-page button:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px}.members-person-profile:hover{background:color-mix(in srgb,var(--accent-color) 4%,var(--bg-surface))}.members-options-menu button:hover{background:var(--accent-soft)}
@media(max-width:420px){.members-header{gap:7px;padding:11px 10px}.members-heading-icon{width:30px;height:30px}.members-home{min-width:27px;padding:4px}.members-heading-copy h1{font-size:16px}.members-heading-copy p{font-size:12px}.members-options-button{padding:7px;font-size:12px}.members-options-button svg{width:15px;height:15px}.members-list{padding-inline:11px}.members-person-profile{gap:10px}.members-role{font-size:10.5px;padding:3px 5px}.members-person-copy>strong{font-size:14px}.members-person-copy small{font-size:12.5px}}
@keyframes members-skeleton-pulse{50%{opacity:.5}}@media(prefers-reduced-motion:reduce){.members-skeleton-avatar,.members-skeleton-row i{animation:none}}

.rankings-page{width:100%;max-width:56rem;min-width:0;margin-inline:auto;position:relative;align-self:center;color:var(--text-main);background:var(--bg-surface);border:1px solid var(--border-color);border-radius:0 0 var(--ui-radius,16px) var(--ui-radius,16px);overflow:visible}.rankings-page.hidden{display:none!important}
@media(min-width:1024px){main.app-container>#tab-rankings{width:min(66.6667%,45.3333333333rem)!important;max-width:45.3333333333rem!important;margin-inline:auto!important}}
.rankings-header{display:flex;align-items:center;gap:10px;min-height:70px;padding:12px 14px;border-bottom:1px solid var(--border-color);background:var(--bg-surface);color:var(--text-main)}.rankings-header>div{min-width:0;flex:1}.rankings-header h1{margin:0;color:var(--text-main);font-size:15px;font-weight:850;line-height:1.5}.rankings-header p{margin:1px 0 0;color:var(--text-muted);font-size:10px}.rankings-heading-icon{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:11px;background:var(--accent-soft);color:var(--accent-color)}.rankings-heading-icon svg{width:21px;height:21px}.rankings-home,.rankings-refresh{display:grid;place-items:center;flex:none;width:32px;height:34px;padding:6px;border:1px solid var(--border-color);border-radius:9px;background:var(--bg-elevated);color:var(--text-main);cursor:pointer}.rankings-home svg,.rankings-refresh svg{width:17px;height:17px}.rankings-refresh:disabled{opacity:.45;cursor:default}
.rankings-tabs{display:flex;gap:5px;padding:9px 12px;border-bottom:1px solid var(--border-color);background:var(--bg-surface)}.rankings-tabs button{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;flex:1;min-height:37px;padding:8px 5px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--text-muted);font:inherit;font-size:12px;font-weight:750;cursor:pointer;touch-action:manipulation}.rankings-tabs svg{width:17px;height:17px;flex:none}.rankings-tabs [aria-selected=true]{border-color:color-mix(in srgb,var(--accent-color) 20%,transparent);background:var(--accent-soft);color:var(--accent-color)}.rankings-tabs button:hover{background:var(--accent-soft)}
.rankings-list{min-height:300px;padding:4px 13px;background:var(--bg-surface)}.rankings-person{border-bottom:1px solid var(--border-color)}.rankings-person:last-child{border:0}.rankings-profile{display:flex;align-items:center;gap:12px;width:100%;min-width:0;min-height:74px;padding:12px 3px;border:0;border-radius:10px;background:transparent;color:var(--text-main);text-align:left;font:inherit;cursor:pointer}.rankings-person[data-rank="1"] .rankings-profile{background:linear-gradient(90deg,var(--accent-soft),transparent)}.rankings-profile:hover{background:var(--accent-soft)}.rankings-place{position:relative;display:grid;place-items:center;flex:none;width:28px;height:31px;color:var(--text-muted);font-size:13px}.rankings-place svg{width:27px;height:27px}.rankings-place small{position:absolute;top:5px;font-size:9px;font-weight:900;line-height:1}.rankings-person[data-rank="1"] .rankings-place{color:#b88912}.rankings-person[data-rank="2"] .rankings-place{color:#8290a7}.rankings-person[data-rank="3"] .rankings-place{color:#b8754e}.rankings-avatar{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;flex:none;width:42px;height:42px;border-radius:50%;background-size:cover;background-position:center;font-size:24px;line-height:1}.rankings-name{display:flex;align-items:center;flex-wrap:wrap;gap:3px;flex:1;min-width:0;overflow-wrap:anywhere;font-size:13px;line-height:1.5;font-weight:800;color:var(--text-main)}.rankings-value{display:flex;align-items:flex-end;flex-direction:column;gap:1px;flex:none;min-width:47px;color:var(--text-main)}.rankings-value>b{font-size:20px;font-weight:900;font-variant-numeric:tabular-nums;line-height:1.2;letter-spacing:-.6px}.rankings-value>small{font-size:9px;color:var(--text-muted)}.rankings-arrow{display:flex;flex:none;color:var(--text-muted)}.rankings-arrow svg{width:15px;height:15px}
.rankings-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:9px 14px;border-top:1px solid var(--border-color);background:var(--bg-surface);border-radius:0 0 var(--ui-radius,16px) var(--ui-radius,16px);color:var(--text-muted);font-size:10px}.rankings-help{position:relative}.rankings-help summary{display:flex;align-items:center;gap:4px;min-height:28px;cursor:pointer;list-style:none;font-size:10px;color:var(--text-main)}.rankings-help summary::-webkit-details-marker{display:none}.rankings-help summary svg{width:15px;height:15px}.rankings-help>div{position:absolute;z-index:20;right:0;bottom:calc(100% + 10px);width:265px;max-width:calc(100vw - 30px);padding:13px 14px;border:1px solid var(--border-color);border-radius:12px;background:var(--bg-surface);color:var(--text-main);box-shadow:0 10px 30px #0003;font-size:11px;line-height:1.6}.rankings-help ul{margin:7px 0;padding-left:17px}.rankings-help p{margin:7px 0 0;color:var(--text-muted);font-size:10px}.rankings-error{display:flex;align-items:center;gap:9px;padding:10px 14px;background:var(--accent-soft);color:var(--text-main);font-size:11px}.rankings-error[hidden]{display:none}.rankings-error>span{flex:1}.rankings-error button{padding:5px;border:0;background:transparent;color:var(--text-main);font:inherit;font-weight:800;text-decoration:underline;cursor:pointer}.rankings-empty{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;min-height:300px;padding:24px 12px;text-align:center;color:var(--text-muted);font-size:12px}.rankings-empty svg{width:35px;height:35px;opacity:.6}.rankings-empty p{margin:0}.rankings-empty small{font-size:10px}.rankings-page button:focus-visible,.rankings-help summary:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px}
.rankings-skeleton>div{display:flex;align-items:center;gap:12px;height:74px;border-bottom:1px solid var(--border-color)}.rankings-skeleton i,.rankings-skeleton b,.rankings-skeleton em{display:block;background:#6b728059;animation:rankings-pulse 1.5s ease-in-out infinite;border-radius:5px}.rankings-skeleton>div>i{width:24px;height:20px;flex:none}.rankings-skeleton b{width:42px;height:42px;border-radius:50%;flex:none}.rankings-skeleton span{display:grid;gap:8px;flex:1}.rankings-skeleton span i{height:9px;width:65%}.rankings-skeleton span i:last-child{width:35%;height:7px}.rankings-skeleton em{width:38px;height:24px;flex:none}
@media(max-width:420px){.rankings-header{gap:8px;padding:11px 10px}.rankings-header h1{font-size:14px}.rankings-heading-icon{width:30px;height:30px}.rankings-list{padding-inline:9px}.rankings-profile{gap:8px;padding:12px 1px}.rankings-name{font-size:12px}.rankings-value>b{font-size:19px}.rankings-avatar{width:38px;height:38px;font-size:23px}.rankings-place{width:25px}.rankings-tabs{padding-inline:10px}.rankings-tabs button{font-size:11px}}
@keyframes rankings-pulse{50%{opacity:.45}}@media(prefers-reduced-motion:reduce){.rankings-skeleton i,.rankings-skeleton b,.rankings-skeleton em{animation:none}}

/* Chat heads can be placed independently with mouse, touch or arrow keys. */
.dm-chat-head.is-positioned{position:fixed;right:auto;bottom:auto;margin:0}
.dm-chat-head-open{touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.dm-chat-head-open img,.dm-chat-head-open .dm-chat-head-avatar{pointer-events:none;user-select:none;-webkit-user-drag:none}
.dm-chat-head.is-dragging{z-index:2}
.dm-chat-head.is-dragging .dm-chat-head-open{cursor:grabbing;box-shadow:0 7px 22px #17203355}
.dm-chat-head.is-dragging .dm-chat-head-preview{display:none}
.dm-chat-head.is-positioned .dm-chat-head-preview{width:var(--dm-head-preview-width,15rem)}
.dm-chat-head.is-on-left .dm-chat-head-preview{left:calc(100% + .65rem);right:auto;border-radius:.9rem .9rem .9rem .3rem}
.dm-chat-head-open:focus-visible{outline:2px solid var(--accent-color,#a855f7);outline-offset:3px}

/* Giữ nền khung nội dung đầy màn hình, kể cả khi danh sách đang trống. */
#app-shell > main {
  --app-content-nav-space: 0px;
  --app-content-min-height: max(0px, calc(var(--app-visual-height, 100dvh) - var(--app-header-height, 3.8rem) - var(--app-content-nav-space)));
}

@media (max-width: 767px) {
  #app-shell > main {
    --app-content-nav-space: var(--app-mobile-nav-height, calc(3.5rem + env(safe-area-inset-bottom)));
  }
}

#app-shell > main > section[id^="tab-"] {
  min-height: var(--app-content-min-height) !important;
  background-color: var(--bg-surface);
  border-radius: 0 0 var(--ui-radius) var(--ui-radius);
}

#app-shell > main > :is(#tab-chat, #tab-messages) {
  align-content: stretch;
  align-items: stretch;
}

#app-shell > main > #tab-chat > .surface-card:first-child,
#app-shell > main > #tab-messages > :is(#dm-sidebar-panel, #dm-conversation-panel) {
  min-height: var(--app-content-min-height) !important;
}

/* Ghép đôi dùng bố cục tin nhắn từ cũ đến mới và ô soạn phía dưới. */
#tab-stranger:has(> #stranger-chat-view:not(.hidden)) {
  height: var(--app-content-min-height) !important;
  min-height: 0 !important;
  max-height: var(--app-content-min-height) !important;
}
#stranger-chat-view > #stranger-messages-list { order: 1; overflow-anchor: none; }
#stranger-chat-view > #stranger-connection-status { order: 2; flex: none; }
#stranger-chat-view > #stranger-composer-form {
  order: 3;
  flex: 0 0 auto;
  width: calc(100% - 1.5rem) !important;
  max-width: calc(100% - 1.5rem) !important;
  margin: .55rem .75rem .65rem !important;
  border-radius: 1rem !important;
}
#stranger-messages-list .dm-message-row { display: flex; width: 100%; justify-content: flex-start; align-items: flex-start; margin-bottom: .35rem; }
#stranger-messages-list .dm-message-row.is-me { justify-content: flex-end; }
#stranger-messages-list .dm-message-column { display: flex; flex-direction: column; min-width: 0; max-width: 86%; }
#stranger-messages-list .dm-message-bubble { align-self: flex-start; width: fit-content; min-width: 7rem; max-width: 100%; margin-bottom: .55rem; }
#stranger-messages-list .is-me .dm-message-bubble { align-self: flex-end; }
#stranger-messages-list .dm-message-copy { white-space: pre-wrap; overflow-wrap: anywhere; }
#stranger-messages-list .dm-message-footer.is-inline { display: inline-flex; position: static; align-items: baseline; gap: .3rem; margin: 0 0 0 .45rem; white-space: nowrap; vertical-align: baseline; line-height: 1.4; color: inherit; font-size: .67rem; font-weight: 400; }
#stranger-messages-list .dm-message-time { opacity: .68; }
#stranger-messages-list .dm-message-media-meta { margin-top: .2rem; text-align: right; line-height: 1.2; }
#stranger-messages-list .dm-message-media-meta .dm-message-footer { margin-left: 0; }
@media (max-width: 767px) {
  body:has(#tab-stranger:not(.hidden) > #stranger-chat-view:not(.hidden)) #app-shell > header {
    position: fixed; top: var(--app-visual-top, 0px); left: 0; right: 0;
    transform: none !important; transition: none !important;
  }
  #tab-stranger > #stranger-chat-view:not(.hidden) {
    position: fixed; top: calc(var(--app-visual-top, 0px) + var(--app-header-height, 3.8rem)); left: 0; right: 0;
    width: 100% !important;
    height: calc(var(--app-visual-height, 100dvh) - var(--app-header-height, 3.8rem) - var(--app-mobile-nav-height, calc(3.5rem + env(safe-area-inset-bottom)))) !important;
    min-height: 0 !important; max-height: none !important;
    margin: 0; background: var(--bg-surface); transform: none; transition: none;
  }
  html[data-keyboard-open]:has(#tab-stranger:not(.hidden) > #stranger-chat-view:not(.hidden)) #mobile-main-nav { display: none !important; }
  html[data-keyboard-open] #tab-stranger > #stranger-chat-view:not(.hidden) {
    height: calc(var(--app-visual-height, 100dvh) - var(--app-header-height, 3.8rem)) !important;
  }
  #stranger-chat-view > #stranger-composer-form {
    padding: .35rem .4rem; border: 1px solid var(--border-color);
    box-shadow: none; transition: none; transform: none;
  }
  #stranger-chat-input { font-size: 16px; line-height: 1.4; }
  #stranger-messages-list .dm-message-column { max-width: 90%; }
}

.vip-upgrade-dialog{width:min(58rem,calc(100vw - 1.5rem));max-height:calc(100dvh - 2rem);padding:0;border:1px solid var(--border-color);border-radius:1.25rem;background:var(--bg-surface);color:var(--text-main);box-shadow:0 20px 80px #10183040;overflow:auto}
.vip-upgrade-dialog::backdrop{background:#10152588;backdrop-filter:blur(5px)}
.vip-dialog-header{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;background:var(--bg-surface);border-bottom:1px solid var(--border-color)}
.vip-dialog-header small{font-size:.6rem;letter-spacing:.1em;color:var(--text-muted)}.vip-dialog-header h1{font-size:1.25rem;font-weight:850}.vip-dialog-header button{width:2.25rem;height:2.25rem;border-radius:50%;background:var(--bg-elevated);font-size:1.5rem}
[data-vip-body]{padding:1.25rem}.vip-hero{display:flex;gap:1rem;align-items:center;padding:1.5rem;border:1px solid #e8bc5545;border-radius:1.1rem;background:linear-gradient(115deg,color-mix(in srgb,#e8b743 14%,var(--bg-surface)),var(--bg-surface))}.vip-crown{font-size:3rem;color:#c6942c}.vip-hero h2{font-size:1.3rem;font-weight:850}.vip-hero p{margin-top:.4rem;color:var(--text-muted);font-size:.8rem;line-height:1.6}.vip-price{flex:none;margin-left:auto;display:flex;flex-direction:column;text-align:right}.vip-price strong{font-size:1.6rem;color:#bd8520}.vip-price span{font-size:.8rem;color:var(--text-muted)}
.vip-benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem;margin:1rem 0}.vip-benefits article,.vip-account-status,.vip-purchase,.vip-payment,.vip-history{padding:1rem;border:1px solid var(--border-color);border-radius:1rem;background:var(--bg-surface);margin-top:.85rem}.vip-benefits article{margin:0;background:var(--bg-elevated)}.vip-benefits article>span{font-size:1.5rem;color:var(--accent-color)}.vip-upgrade-dialog h2,.vip-upgrade-dialog h3{font-weight:800}.vip-benefits h3{font-size:.8rem;margin:.4rem 0}.vip-benefits p,.vip-purchase p,.vip-account-status p,.vip-payment p{font-size:.77rem;line-height:1.65;color:var(--text-muted)}.vip-upgrade-dialog h2{font-size:1rem}.vip-account-status>div{display:flex;justify-content:space-between;gap:.6rem}.vip-account-status strong{font-size:.8rem;color:var(--accent-color)}
.vip-upgrade-dialog dl>div{display:flex;justify-content:space-between;gap:.6rem;padding:.55rem 0;font-size:.76rem}.vip-upgrade-dialog dt{color:var(--text-muted)}.vip-upgrade-dialog dd{text-align:right;font-weight:650;overflow-wrap:anywhere}.vip-primary{display:inline-flex;justify-content:center;min-height:2.9rem;margin-top:1rem;padding:.7rem 1.3rem;background:var(--accent-gradient);color:white;border-radius:.85rem;font-size:.85rem;font-weight:800}.vip-primary:disabled{opacity:.5;cursor:default}.vip-note{margin-top:.6rem}.vip-error{color:#e85c7d!important}.vip-payment{display:grid;grid-template-columns:minmax(0,1fr) 15rem;gap:1rem;background:var(--bg-elevated)}.vip-payment img{width:100%;border-radius:.8rem;background:white}.vip-payment dd{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.4rem;min-width:0}.vip-payment dd button,[data-vip-refresh]{font-size:.7rem;font-weight:700;color:var(--accent-color);padding:.2rem .4rem}.vip-history>div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem;padding:.65rem 0;border-bottom:1px solid var(--border-color);font-size:.75rem}.vip-history small{width:100%;color:var(--text-muted)}
.admin-integration-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.admin-integration-grid label{display:flex;flex-direction:column;gap:.35rem;font-size:.78rem;margin:.7rem 0}.admin-integration-grid input{min-height:2.6rem;width:100%;padding:.55rem .65rem;border:1px solid var(--border-color);border-radius:.65rem;background:var(--bg-elevated);color:var(--text-main)}.admin-integration-grid label:has([type=checkbox]){flex-direction:row;align-items:center}.admin-integration-grid input[type=checkbox]{width:1rem;min-height:1rem}.admin-integration-grid code{overflow-wrap:anywhere;font-size:.7rem}.admin-vip-log{display:grid;gap:.5rem;margin-top:.8rem}.admin-vip-log>div{padding:.7rem;border:1px solid var(--border-color);border-radius:.7rem;font-size:.75rem;overflow-wrap:anywhere}.admin-vip-log small{display:block;color:var(--text-muted);margin-top:.3rem}
@media(max-width:639px){.vip-upgrade-dialog{width:100%;max-width:100%;height:100dvh;max-height:100dvh;margin:0;border-radius:0;border:0}[data-vip-body]{padding:.85rem}.vip-hero{flex-wrap:wrap;padding:1rem;gap:.6rem}.vip-hero>div:first-of-type{flex:1;min-width:10rem}.vip-hero h2{font-size:1.1rem}.vip-price{width:100%;text-align:left;margin-left:0;flex-direction:row;align-items:baseline;gap:.4rem}.vip-benefits{grid-template-columns:1fr 1fr}.vip-payment,.admin-integration-grid{grid-template-columns:1fr}.vip-payment img{max-width:18rem;margin:auto}.vip-primary{width:100%}.vip-account-status>div{flex-wrap:wrap}}

.nearby-page{width:100%;max-width:58rem;margin-inline:auto;color:var(--text-main);overflow:hidden;align-self:center}
.nearby-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.5rem;border-bottom:1px solid var(--border-color);background:linear-gradient(120deg,var(--accent-soft),var(--bg-surface) 75%)}
.nearby-eyebrow{font-size:.6rem;letter-spacing:.13em;color:var(--text-muted)}.nearby-heading h1{display:flex;align-items:center;gap:.5rem;font-size:1.5rem;font-weight:850;margin:.4rem 0}.nearby-heading h1 svg{width:1.5rem;height:1.5rem;color:var(--accent-color)}.nearby-heading p{font-size:.77rem;line-height:1.6;color:var(--text-muted)}
.nearby-options,.nearby-secondary{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:2.5rem;padding:.5rem .85rem;border:1px solid var(--border-color);border-radius:.8rem;background:var(--bg-surface);font-size:.76rem;font-weight:750;white-space:nowrap}.nearby-options svg{width:1rem;height:1rem}
.nearby-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:1rem 1.25rem;border-bottom:1px solid var(--border-color)}.nearby-tabs{display:flex;align-items:center;gap:.3rem;padding:.25rem;background:var(--bg-elevated);border-radius:.85rem}.nearby-tabs button{padding:.6rem .85rem;font-size:.78rem;font-weight:750;border-radius:.65rem}.nearby-tabs button[aria-selected=true]{background:var(--accent-gradient);color:#fff;box-shadow:0 2px 5px var(--accent-ring)}.nearby-count{font-size:.8rem;color:var(--text-muted);overflow-wrap:anywhere}
.nearby-member-list{padding:.15rem 1.25rem}.nearby-member{display:flex;align-items:center;gap:.8rem;padding:1rem .15rem;border-bottom:1px solid var(--border-color)}.nearby-member:last-child{border-bottom:0}.nearby-avatar{position:relative;display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;flex:none;border-radius:50%;font-size:1.5rem}.nearby-avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.nearby-member-copy{flex:1;min-width:0}.nearby-name{display:block;max-width:100%;text-align:left;font-weight:800;font-size:.88rem}.nearby-name>.inline-flex{display:flex;min-width:0;max-width:100%}.nearby-name .member-nickname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.nearby-member-copy p{font-size:.73rem;margin-top:.15rem;color:var(--text-muted)}.nearby-member-copy small{display:flex;align-items:center;gap:.3rem;font-size:.65rem;color:var(--text-muted);margin-top:.2rem}.nearby-online-dot{width:.4rem;height:.4rem;border-radius:50%;background:#22b58c;flex:none}
.nearby-member-actions{display:flex;gap:.45rem;flex:none}.nearby-icon-button{display:flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;border-radius:.75rem;background:var(--bg-elevated);color:var(--text-main);border:1px solid var(--border-color);touch-action:manipulation}.nearby-icon-button svg{width:1.1rem;height:1.1rem}.nearby-icon-button:hover{background:var(--accent-soft);color:var(--accent-color)}.nearby-icon-button:disabled{opacity:.5;cursor:default}.nearby-icon-button.is-friend{color:#19a67b}.nearby-pagination{display:flex;justify-content:center;padding:1.2rem}
.nearby-empty,.nearby-onboarding{max-width:30rem;margin:auto;padding:3rem 1.25rem;text-align:center}.nearby-empty h2,.nearby-onboarding h2{font-weight:850;font-size:1.25rem;margin:.7rem 0}.nearby-empty p,.nearby-onboarding>p{color:var(--text-muted);font-size:.8rem;line-height:1.7;margin:.5rem 0}.nearby-intro-icon{display:inline-flex;align-items:center;justify-content:center;width:3.8rem;height:3.8rem;background:var(--accent-soft);color:var(--accent-color);border-radius:1.25rem}.nearby-intro-icon svg{width:2rem;height:2rem}
.nearby-onboarding form{text-align:left;margin-top:1.3rem}.nearby-onboarding label,.nearby-options-dialog label,.profile-nearby-address label{display:flex;flex-direction:column;gap:.45rem;font-size:.78rem;font-weight:700;margin:.8rem 0}.nearby-onboarding input,.nearby-onboarding select,.nearby-options-dialog input,.nearby-options-dialog select,.profile-nearby-address input,.profile-nearby-address select{width:100%;min-height:2.7rem;padding:.6rem .75rem;background:var(--bg-elevated);color:var(--text-main);border:1px solid var(--input-border-color,var(--border-color));border-radius:.75rem;font-size:.85rem}.nearby-primary{display:inline-flex;align-items:center;justify-content:center;min-height:2.8rem;padding:.7rem 1.2rem;border-radius:.8rem;background:var(--accent-gradient);color:white;font-size:.8rem;font-weight:800;margin-top:.7rem}.nearby-primary:disabled{opacity:.55}.nearby-onboarding .nearby-primary{width:100%}.nearby-empty>.nearby-secondary{display:flex;margin:.8rem auto 0}.nearby-note{font-size:.72rem;font-weight:400;line-height:1.7;color:var(--text-muted)}.nearby-error{font-size:.77rem;color:#e75d7a;margin:.5rem 0}.nearby-inline-error{padding:.8rem 1.25rem;font-size:.8rem;color:#e75d7a}.nearby-inline-error button{font-weight:750;text-decoration:underline}
.nearby-options-dialog{width:min(30rem,calc(100vw - 1.5rem));max-height:calc(100dvh - 2rem);padding:0;border:1px solid var(--border-color);border-radius:1rem;background:var(--bg-surface);color:var(--text-main);overflow:auto;box-shadow:0 15px 60px #10162540}.nearby-options-dialog::backdrop{background:#10152577;backdrop-filter:blur(4px)}.nearby-options-dialog header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.15rem;border-bottom:1px solid var(--border-color);position:sticky;top:0;background:var(--bg-surface);z-index:1}.nearby-options-dialog h2{font-size:1rem;font-weight:850}.nearby-options-dialog header button{width:2rem;height:2rem;border-radius:50%;background:var(--bg-elevated);font-size:1.35rem}.nearby-options-dialog section{padding:1rem 1.15rem;border-bottom:1px solid var(--border-color)}.nearby-options-dialog section h3{font-weight:800;font-size:.86rem}.nearby-options-dialog .nearby-switch,.profile-nearby-address .nearby-switch{flex-direction:row;align-items:center;gap:.65rem}.nearby-switch input[type=checkbox]{width:1.1rem;height:1.1rem;min-height:1.1rem;padding:0;accent-color:var(--accent-color)}.nearby-options-dialog .nearby-secondary{margin-top:.6rem}
.profile-nearby-address{padding:1rem;border:1px solid var(--border-color);border-radius:1rem}.profile-nearby-address h3{font-size:.9rem;font-weight:800}.profile-nearby-address [role=status]{font-size:.73rem;color:var(--text-muted);margin:.45rem 0}.profile-nearby-address fieldset{display:grid;grid-template-columns:1fr 1fr;gap:0 .8rem}.profile-nearby-address .nearby-switch{grid-column:1/-1}.profile-display-province{font-size:.8rem;color:var(--text-muted);margin:.4rem 0}
.nearby-onboarding label{display:block}.nearby-onboarding label>input,.nearby-onboarding label>select{display:block;margin-top:.45rem}
@media(max-width:639px){.nearby-heading{padding:1rem;align-items:flex-start;gap:.5rem}.nearby-heading h1{font-size:1.3rem}.nearby-options{padding:.5rem;min-width:2.4rem}.nearby-options span{display:none}.nearby-toolbar{padding:.75rem;flex-wrap:wrap}.nearby-tabs{width:100%;justify-content:space-between}.nearby-tabs button{flex:1;padding:.6rem .5rem}.nearby-count{padding:.1rem .15rem}.nearby-member-list{padding:0 .75rem}.nearby-member{gap:.65rem}.nearby-avatar{width:2.7rem;height:2.7rem}.nearby-member-actions{gap:.3rem}.nearby-icon-button{width:2.2rem;height:2.2rem}.nearby-onboarding,.nearby-empty{padding:2rem 1rem}.profile-nearby-address fieldset{grid-template-columns:1fr}.nearby-onboarding input,.nearby-onboarding select,.nearby-options-dialog input,.nearby-options-dialog select,.profile-nearby-address input,.profile-nearby-address select{font-size:16px}}

/* Inline smileys share the active user palette and typography. */
.has-inline-smileys { flex-wrap:wrap; }
.has-inline-smileys > .composer-inline-tools { position:static;flex:0 0 100%;width:100%;min-width:0;order:20;margin-top:6px; }
.composer-inline-tools[hidden],#symbol-picker-modal[hidden],#symbol-picker-modal [hidden] { display:none!important; }
#symbol-picker-modal { position:static;inset:auto;z-index:auto;display:block;width:100%;padding:0;background:transparent;color:var(--text-main);font-family:inherit;text-align:left; }
#symbol-picker-modal :is(button,input) { font-family:inherit; }
#symbol-picker-modal button { cursor:pointer; }
#symbol-picker-modal button:disabled { opacity:.4;cursor:default; }
#symbol-picker-modal button:focus-visible { outline:2px solid var(--accent-color);outline-offset:2px; }
#symbol-picker-modal .symbol-picker-card { position:relative;display:flex;flex-direction:column;width:100%;max-height:min(410px,52dvh);overflow:hidden;border:1px solid var(--border-color);border-radius:var(--ui-radius-sm);background:var(--bg-surface);box-shadow:0 6px 18px color-mix(in srgb,var(--text-main) 12%,transparent); }
#symbol-picker-modal .symbol-picker-close { position:absolute;z-index:4;top:10px;right:10px;display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid var(--border-color);border-radius:calc(var(--ui-radius-sm) * .65);background:var(--bg-elevated);color:var(--text-muted);font-size:21px;line-height:1; }
#symbol-picker-modal .symbol-picker-close:hover { border-color:var(--accent-color);background:var(--accent-soft);color:var(--text-main); }
#symbol-picker-modal .symbol-picker-search { position:relative;display:block;flex-shrink:0;margin:10px 48px 8px 10px; }
#symbol-picker-modal .symbol-picker-search > span { position:absolute;top:50%;left:10px;z-index:1;font-size:15px;transform:translateY(-50%);pointer-events:none; }
#symbol-picker-modal .symbol-picker-search input { width:100%;min-height:42px;padding:8px 11px 8px 36px;border:1px solid var(--input-border-color);border-radius:calc(var(--ui-radius-sm) * .8);outline:0;background:var(--bg-elevated);color:var(--text-main);font-size:16px; }
#symbol-picker-modal .symbol-picker-search input::placeholder { color:var(--text-muted);opacity:1; }
#symbol-picker-modal .symbol-picker-search input:focus { border-color:var(--accent-color);box-shadow:0 0 0 3px var(--accent-soft); }
#symbol-picker-modal .symbol-picker-toolbar { display:flex;flex-shrink:0;gap:6px;padding:0 10px 9px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--accent-ring) var(--bg-elevated); }
#symbol-picker-modal .symbol-picker-toolbar button { display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;gap:5px;min-height:34px;padding:5px 9px;border:1px solid var(--border-color);border-radius:calc(var(--ui-radius-sm) * .7);background:var(--bg-elevated);color:var(--text-main);font-size:.68rem;font-weight:800;white-space:nowrap; }
#symbol-picker-modal .symbol-picker-toolbar button:hover:not(:disabled),#symbol-picker-modal .symbol-picker-toolbar button.active { border-color:var(--accent-color);background:var(--accent-soft); }
#symbol-picker-modal .symbol-picker-toolbar [data-smiley-create-category] { border-color:var(--accent-ring);background:var(--accent-soft); }
#symbol-picker-modal .symbol-picker-toolbar .smiley-category-delete { margin-left:auto; }
#symbol-picker-modal .smiley-vip-note { flex-shrink:0;margin:0;padding:0 10px 7px;color:var(--text-muted);font-size:.64rem;line-height:1.4; }
#symbol-picker-modal .symbol-picker-browser { display:grid;grid-template-columns:78px minmax(0,1fr);flex:1 1 auto;min-height:70px;max-height:265px;overflow:hidden;border-top:1px solid var(--border-color);background:var(--bg-surface); }
#symbol-picker-modal .symbol-picker-groups { display:flex;flex-direction:column;align-content:start;align-items:center;gap:5px;min-width:0;min-height:0;margin:0;padding:6px;overflow-x:hidden;overflow-y:auto;border-right:1px solid var(--border-color);background:var(--bg-elevated);scrollbar-width:thin;scrollbar-color:var(--accent-ring) transparent; }
#symbol-picker-modal .symbol-picker-group-item { display:grid;justify-items:center;gap:4px;width:100%; }
#symbol-picker-modal .symbol-picker-group-item > button[data-symbol-group] { display:grid;place-items:center;width:58px;height:58px;min-height:58px;padding:4px;border:1px solid var(--border-color);border-radius:calc(var(--ui-radius-sm) * .85);background:var(--bg-surface);color:var(--text-main);text-align:center; }
#symbol-picker-modal .symbol-picker-group-item > button[data-symbol-group]:hover { border-color:var(--accent-ring);background:var(--accent-soft); }
#symbol-picker-modal .symbol-picker-group-item > button[data-symbol-group].active { border-color:var(--accent-color);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent-ring); }
#symbol-picker-modal .symbol-picker-groups button b { display:grid;place-items:center;width:48px;height:48px;overflow:hidden;border-radius:calc(var(--ui-radius-sm) * .6);font-size:20px;line-height:1; }
#symbol-picker-modal .symbol-picker-groups button b img { display:block;width:100%;height:100%;object-fit:contain; }
#symbol-picker-modal .symbol-picker-group-move { display:grid;grid-template-columns:1fr 1fr;gap:4px;width:58px; }
#symbol-picker-modal .symbol-picker-group-move button { display:grid;place-items:center;width:100%;min-width:0;height:23px;min-height:0;padding:0;border:1px solid var(--border-color);border-radius:4px;background:var(--bg-surface);color:var(--text-main);font-size:.67rem;font-weight:700;line-height:1; }
#symbol-picker-modal .symbol-picker-group-move button:hover:not(:disabled) { border-color:var(--accent-color);background:var(--accent-soft); }
#symbol-picker-modal .symbol-picker-results { display:grid;min-width:0;min-height:0;height:100%;overflow:hidden; }
#symbol-picker-modal .symbol-picker-results > :is(.symbol-picker-grid,.symbol-picker-empty) { grid-area:1 / 1; }
#symbol-picker-modal .symbol-picker-results > .symbol-picker-empty { align-self:center; }
#symbol-picker-modal .symbol-picker-grid { --smiley-cell:56px;display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--smiley-cell),1fr));grid-auto-rows:var(--smiley-cell);align-content:start;justify-content:stretch;gap:4px;min-height:0;height:100%;margin:0;padding:6px;overflow-y:auto;background:var(--bg-surface);scrollbar-width:thin;scrollbar-color:var(--accent-ring) transparent; }
#symbol-picker-modal .smiley-image-entry { position:relative;display:block;width:100%;height:var(--smiley-cell);min-width:0; }
#symbol-picker-modal .smiley-image-button { display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:3px;overflow:hidden;border:1px solid var(--border-color);border-radius:calc(var(--ui-radius-sm) * .65);background:var(--bg-elevated);color:var(--text-main);touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:border-color .16s,background .16s,box-shadow .16s; }
#symbol-picker-modal .smiley-image-button:hover { border-color:var(--accent-color);background:var(--accent-soft); }
#symbol-picker-modal .smiley-image-button.smiley-picked { border-color:var(--accent-color);background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent-ring),0 0 10px var(--accent-ring); }
#symbol-picker-modal .smiley-image-button img { display:block;width:46px;height:46px;max-width:100%;max-height:100%;object-fit:contain; }
#symbol-picker-modal .smiley-delete-button { position:absolute;z-index:2;top:2px;right:2px;display:grid;place-items:center;width:18px;height:18px;min-height:0;padding:0;border:1px solid var(--border-color);border-radius:50%;background:var(--bg-surface);color:var(--text-main);font-size:12px;font-weight:900;line-height:1;box-shadow:0 2px 7px color-mix(in srgb,var(--text-main) 15%,transparent); }
#symbol-picker-modal .smiley-delete-button:hover { border-color:var(--accent-color);background:var(--accent-soft); }
#symbol-picker-modal .symbol-picker-empty { padding:20px 12px;color:var(--text-muted);font-size:.8rem;text-align:center; }
#symbol-picker-modal footer { flex-shrink:0;min-height:8px;padding:4px 10px;border-top:1px solid var(--border-color);background:var(--bg-elevated);color:var(--text-muted);font-size:.68rem;text-align:center; }
#symbol-picker-modal footer .error { color:var(--text-main);font-weight:800; }
#symbol-picker-modal .smiley-create-row { display:flex;flex-shrink:0;gap:5px;min-width:0;padding:5px 10px 10px; }
#symbol-picker-modal .smiley-create-row input { flex:1;width:0;min-width:0;padding:7px;border:1px solid var(--input-border-color);border-radius:calc(var(--ui-radius-sm) * .7);outline:0;background:var(--bg-elevated);color:var(--text-main);font-size:16px; }
#symbol-picker-modal .smiley-create-row input::placeholder { color:var(--text-muted);opacity:1; }
#symbol-picker-modal .smiley-create-row input:focus { border-color:var(--accent-color);box-shadow:0 0 0 2px var(--accent-soft); }
#symbol-picker-modal .smiley-create-row button { padding:5px 9px;border:1px solid var(--accent-ring);border-radius:calc(var(--ui-radius-sm) * .7);background:var(--accent-soft);color:var(--text-main);font-size:.75rem;font-weight:700; }
.message-smiley { display:inline-block!important;width:auto;max-width:120px;max-height:100px;vertical-align:middle;object-fit:contain;margin:1px 2px; }
@media(max-width:620px){
 #symbol-picker-modal .symbol-picker-card{max-height:min(350px,48dvh)}
 #symbol-picker-modal .symbol-picker-browser{grid-template-columns:70px minmax(0,1fr);max-height:220px}
 #symbol-picker-modal .symbol-picker-toolbar{gap:4px;padding:5px 6px}
 #symbol-picker-modal .symbol-picker-toolbar button{min-height:30px;padding:4px 5px;font-size:.64rem}
 #symbol-picker-modal .symbol-picker-grid{--smiley-cell:52px;gap:3px;padding:4px}
 #symbol-picker-modal .symbol-picker-group-item > button[data-symbol-group]{width:54px;height:54px;min-height:54px;padding:3px}
 #symbol-picker-modal .symbol-picker-groups button b{width:46px;height:46px}
 #symbol-picker-modal .symbol-picker-group-move{width:54px}
 .message-smiley{max-width:96px;max-height:88px}
}
@media(max-height:480px){#symbol-picker-modal .symbol-picker-card{max-height:48dvh}#symbol-picker-modal .smiley-vip-note,#symbol-picker-modal footer{display:none}}

.dm-story-reply{box-sizing:border-box;display:flex;align-items:center;gap:.55rem;width:100%;max-width:20rem;margin:0 0 .5rem;padding:.55rem .65rem;border:1px solid currentColor;border-color:color-mix(in srgb,currentColor 18%,transparent);border-left:3px solid currentColor;border-radius:.65rem;background:color-mix(in srgb,currentColor 7%,transparent);color:inherit;text-align:left;font:inherit;cursor:pointer}.dm-story-reply:hover{background:color-mix(in srgb,currentColor 13%,transparent)}.dm-story-reply-thumb{display:grid;place-items:center;flex:0 0 2.3rem;height:2.8rem;overflow:hidden;border-radius:.4rem;background:var(--accent-soft);font-size:1.3rem}.dm-story-reply-thumb img{width:100%;height:100%;object-fit:cover}.dm-story-reply-copy{display:flex;flex-direction:column;gap:.2rem;min-width:0;line-height:1.35}.dm-story-reply-copy strong{font-size:.75rem;font-weight:800}.dm-story-reply-copy>span{font-size:.78rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}.dm-story-reply.is-unavailable{cursor:default;opacity:.8}.dm-story-reply:focus-visible{outline:2px solid currentColor;outline-offset:2px}.dm-quick-message .dm-story-reply{max-width:100%}

.nearby-gps{margin:.9rem 0 1.1rem}.nearby-gps .nearby-gps-button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;width:100%;color:var(--accent-color);background:var(--accent-soft);border-color:var(--accent-color);white-space:normal}.nearby-gps-button svg{width:1.1rem;height:1.1rem;flex:none}.nearby-gps-button:disabled{opacity:.65;cursor:wait}.nearby-gps-button:focus-visible{outline:2px solid var(--accent-color);outline-offset:3px}.nearby-gps-status{font-size:.76rem;line-height:1.6;color:var(--text-muted);margin:.5rem 0 0;min-height:0}.nearby-gps-status.is-error{color:#db4569}.nearby-gps small{display:block;font-size:.65rem;line-height:1.5;margin-top:.35rem;color:var(--text-muted)}.nearby-gps small a{color:var(--accent-color);text-decoration:underline;text-underline-offset:2px}.nearby-location-intro{font-size:.8rem;line-height:1.7;color:var(--text-muted);margin:.5rem 0 .8rem}

.account-security-dialog{width:min(430px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow:auto;padding:0 18px 18px;border:1px solid var(--border-color,#dce1e9);border-radius:20px;background:var(--bg-surface,#fff);color:var(--text-main,#172033);box-shadow:0 20px 90px #0005}.account-security-dialog::backdrop{background:#0c10276b;backdrop-filter:blur(3px)}.account-security-dialog>header{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;background:var(--bg-surface,#fff);padding:14px 0;border-bottom:1px solid var(--border-color,#dce1e9);margin-bottom:12px}.account-security-dialog h2{font-size:17px;font-weight:800;line-height:1.4;margin:0}.account-security-dialog header button{border:0;background:transparent;color:inherit;font-size:24px;padding:0 6px;cursor:pointer}.account-security-dialog p{font-size:13px;line-height:1.6;color:var(--text-muted,#64748b);margin:10px 0}.account-security-dialog label{display:flex;flex-direction:column;gap:6px;margin:14px 0;font-size:13px;font-weight:700}.account-security-dialog input{width:100%;min-width:0;font:inherit;font-size:16px;padding:11px 12px;border:1px solid var(--border-color,#dce1e9);border-radius:12px;background:var(--bg-elevated,#f6f7fa);color:var(--text-main,#172033);outline:none}.account-security-dialog input:focus{border-color:var(--accent-color,#db2777)}.account-security-dialog input[readonly]{opacity:.75}.account-security-dialog button{font:inherit;font-size:13px;cursor:pointer;min-height:40px;border-radius:10px;touch-action:manipulation}.account-security-dialog .security-primary{width:100%;padding:10px 14px;border:0;background:var(--accent-color,#db2777);color:var(--accent-contrast,#fff);font-weight:800}.account-security-dialog button:disabled{opacity:.55;cursor:wait}.account-security-dialog .is-error{color:#dc4564}.account-security-dialog [data-status]{min-height:20px;overflow-wrap:anywhere}.account-security-dialog .security-secondary-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}.security-secondary-actions button{flex:1;padding:7px 10px;border:1px solid var(--border-color,#dce1e9);background:var(--bg-elevated,#f6f7fa);color:var(--text-main,#172033)}.account-security-dialog .security-countdown{color:var(--accent-color,#db2777);font-weight:700}.admin-mail-form{display:grid;gap:10px}.admin-mail-form label{display:grid;gap:5px;font-size:12px;font-weight:700}.admin-mail-form input,.admin-mail-form select{width:100%;min-width:0}.admin-mail-form .admin-mail-actions{display:flex;gap:8px;flex-wrap:wrap}.admin-mail-form [data-mail-feedback]{min-height:20px;overflow-wrap:anywhere}

.admin-mail-form input,.admin-mail-form select{padding:9px 11px;border:1px solid var(--border-color,#dce1e9);border-radius:10px;background:var(--bg-elevated,#f6f7fa);color:var(--text-main,#172033);font-size:14px}.admin-mail-actions button{padding:9px 13px;border:1px solid var(--border-color,#dce1e9);border-radius:10px;background:var(--bg-elevated,#f6f7fa);color:var(--text-main,#172033);font-weight:750;cursor:pointer}.admin-mail-actions button[type="submit"]{background:var(--accent-color,#db2777);color:var(--accent-contrast,#fff);border-color:transparent}.admin-mail-actions button:disabled{opacity:.5;cursor:wait}