:root {
  color-scheme: light dark;
  --accent: #36a9f7;
  --bg: #f8fbff;
  --surface: #ffffff;
  --surface-2: #eaf6ff;
  --ink: #0b172a;
  --muted: #4e6077;
  --divider: #d9e7f3;
  --shadow: 0 16px 50px rgba(19, 41, 66, .10);
  --danger: #f06472;
  --success: #33c58e;
  --rail: 360px;
  --sidebar: 260px;
  --center: 690px;
}

html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"], html[data-theme="dim"] { color-scheme: dark; }
html:not(.js) .launch-splash { display: none; }

html[data-theme="dark"] {
  --bg: #000000;
  --surface: #0b0d12;
  --surface-2: #171a20;
  --ink: #f5f9ff;
  --muted: #aebfd3;
  --divider: #2a2e38;
  --shadow: 0 18px 60px rgba(0, 0, 0, .35);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    --bg: #000000;
    --surface: #0b0d12;
    --surface-2: #171a20;
    --ink: #f5f9ff;
    --muted: #aebfd3;
    --divider: #2a2e38;
    --shadow: 0 18px 60px rgba(0, 0, 0, .35);
  }
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", sans-serif;
  font-size: 16px;
}
button, input, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
[hidden] { display: none !important; }

.app-shell {
  width: min(calc(var(--sidebar) + var(--center) + var(--rail)), 100%);
  min-height: 100vh;
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, var(--center)) var(--rail);
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 18px 18px 16px;
  border-right: 1px solid var(--divider);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  z-index: 8;
}
.brand-row { display: flex; align-items: center; gap: 12px; font-size: 21px; padding: 4px 10px 20px; }
.brand-icon { width: 40px; height: 40px; border-radius: 12px; }
.side-nav { display: grid; gap: 5px; }
.nav-item {
  width: 100%;
  min-height: 52px;
  border: 0;
  background: transparent;
  border-radius: 16px;
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 0 12px;
  text-align: left;
  font-weight: 650;
  cursor: pointer;
  transition: background .16s ease, transform .16s ease;
}
.nav-item svg { width: 25px; height: 25px; }
.nav-item:hover { background: var(--surface-2); }
.nav-item:active { transform: scale(.985); }
.nav-item.active { font-weight: 800; }
.nav-item.active [data-icon] svg { fill: currentColor; }
.nav-item.subtle { color: var(--muted); }
.sidebar-bottom { margin-top: auto; display: grid; gap: 4px; }
.badge { background: var(--accent); color: white; font-size: 12px; padding: 2px 7px; border-radius: 999px; }
.mini-profile { display: flex; gap: 10px; align-items: center; padding: 14px 10px 0; min-height: 58px; }

.main-column { min-width: 0; border-right: 1px solid var(--divider); min-height: 100vh; background: var(--bg); }
.feed-tabs {
  height: 64px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  position: sticky;
  top: 0;
  z-index: 6;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(22px) saturate(160%);
  border-bottom: 1px solid var(--divider);
}
.feed-tab {
  position: relative;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 750;
  cursor: pointer;
}
.feed-tab.active { color: var(--ink); }
.feed-tab.active::after { content: ""; position: absolute; left: 28%; right: 28%; bottom: 0; height: 4px; border-radius: 5px 5px 0 0; background: var(--accent); }
.view-header { padding: 22px 22px 12px; border-bottom: 1px solid var(--divider); }
.view-header h1 { margin: 0; font-size: 30px; }
.main-content { min-height: calc(100vh - 64px); }

.feed-state { padding: 56px 24px; text-align: center; color: var(--muted); }
.post-card { padding: 18px 20px 12px; border-bottom: 1px solid var(--divider); background: var(--bg); }
.post-header { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 11px; align-items: start; }
.avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--surface-2); }
.avatar.small { width: 36px; height: 36px; }
.avatar.fallback { display: grid; place-items: center; font-weight: 800; color: white; background: linear-gradient(140deg, var(--accent), #49c5ef); }
.author-line { display: flex; flex-wrap: wrap; gap: 5px; align-items: baseline; }
.author-line strong { font-size: 15px; }
.handle, .timestamp, .muted { color: var(--muted); }
.handle, .timestamp { font-size: 14px; }
.place-label { margin-top: 2px; font-size: 13px; color: var(--muted); }
.post-title { margin: 8px 0 4px 55px; font-size: 18px; line-height: 1.25; }
.post-body { margin: 0 0 12px 55px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.post-media { display: block; width: calc(100% - 55px); max-height: 520px; margin: 10px 0 12px 55px; object-fit: cover; border-radius: 20px; border: 1px solid var(--divider); background: var(--surface); }
.post-actions { margin-left: 55px; display: grid; grid-template-columns: repeat(3, minmax(70px, 1fr)); gap: 8px; max-width: 430px; }
.action-button { border: 0; background: transparent; color: var(--muted); min-height: 38px; padding: 6px 9px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: flex-start; gap: 7px; cursor: pointer; }
.action-button:hover { background: var(--surface-2); color: var(--ink); }
.action-button.liked { color: var(--danger); }
.action-button svg { width: 20px; height: 20px; }
.action-button.icon-only > span:last-child { display: none; }
.action-button.icon-only { min-width: 36px; justify-content: center; }

.right-rail { padding: 12px 18px 30px; }
.rail-sticky { position: sticky; top: 12px; display: grid; gap: 16px; }
.global-search { height: 48px; border: 1px solid var(--divider); border-radius: 999px; padding: 0 16px; display: flex; align-items: center; gap: 10px; background: var(--surface); }
.global-search svg { width: 20px; color: var(--muted); }
.global-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); }
.rail-card { border: 1px solid var(--divider); background: var(--surface); border-radius: 22px; padding: 17px; }
.rail-card h2 { margin: 0 0 13px; font-size: 20px; }
.trend-row { padding: 10px 0; }
.trend-row + .trend-row { border-top: 1px solid var(--divider); }
.trend-row span { display: block; color: var(--muted); font-size: 13px; }
.trend-row strong { display: block; margin-top: 2px; }
.contact-row { display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: center; padding: 8px 0; }
.contact-row .meta { min-width: 0; }
.contact-row .meta strong, .contact-row .meta span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-row .meta span { font-size: 13px; color: var(--muted); }
.web-limits p { color: var(--muted); line-height: 1.45; margin-bottom: 0; }

.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 28px; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 45%), var(--bg); }
.auth-card { width: min(460px, 100%); padding: 30px; border: 1px solid var(--divider); border-radius: 28px; background: var(--surface); box-shadow: var(--shadow); display: grid; gap: 20px; }
.auth-logo { width: 66px; height: 66px; border-radius: 18px; }
.eyebrow { color: var(--accent); font-weight: 800; margin: 0 0 6px; }
.auth-card h1 { margin: 0 0 8px; font-size: 34px; }
.auth-form { display: grid; gap: 14px; }
.auth-form label { display: grid; gap: 7px; font-weight: 650; }
.auth-form input, .comment-form textarea { border: 1px solid var(--divider); border-radius: 15px; background: var(--bg); color: var(--ink); padding: 13px 14px; }
.primary-button { border: 0; border-radius: 16px; min-height: 50px; background: var(--accent); color: white; font-weight: 800; cursor: pointer; padding: 0 18px; }
.primary-button.compact { min-height: 42px; }
.apple-button { border: 0; min-height: 50px; border-radius: 16px; background: #000; color: #fff; font-weight: 760; cursor: pointer; }
.apple-button span { font-size: 22px; margin-right: 7px; }
.link-button { border: 0; background: transparent; color: var(--accent); cursor: pointer; font-weight: 700; padding: 6px; }
.security-note { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 18px); opacity: 0; pointer-events: none; z-index: 50; background: var(--ink); color: var(--bg); border-radius: 999px; padding: 11px 17px; transition: opacity .2s ease, transform .2s ease; box-shadow: var(--shadow); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.dialog-backdrop { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.48); backdrop-filter: blur(8px); }
.dialog-panel { width: min(620px, 100%); max-height: min(780px, 90vh); background: var(--surface); border: 1px solid var(--divider); border-radius: 26px; box-shadow: var(--shadow); overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; }
.dialog-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--divider); }
.dialog-header h2 { margin: 0; }
.icon-button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--surface-2); cursor: pointer; display: grid; place-items: center; }
.icon-button svg { width: 20px; height: 20px; }
.comment-list { overflow: auto; padding: 5px 18px; }
.comment-row { display: grid; grid-template-columns: 38px 1fr; gap: 10px; padding: 14px 0; }
.comment-row + .comment-row { border-top: 1px solid var(--divider); }
.comment-body { white-space: pre-wrap; overflow-wrap: anywhere; margin: 5px 0 8px; }
.comment-meta { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.comment-like { border: 0; background: transparent; color: inherit; padding: 0; cursor: pointer; font-weight: 700; }
.comment-form { border-top: 1px solid var(--divider); padding: 14px 16px; display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
.comment-form textarea { resize: vertical; min-height: 46px; max-height: 120px; }

.list-section { padding: 18px 20px; }
.list-section h2 { margin: 0 0 12px; font-size: 22px; }
.activity-row, .conversation-row, .profile-card { padding: 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--divider); margin-bottom: 10px; }
.conversation-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 11px; align-items: center; }
.conversation-row p { margin: 3px 0 0; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.e2ee-note { margin-top: 18px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--divider)); border-radius: 18px; padding: 15px; color: var(--muted); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.profile-card { display: grid; gap: 14px; }
.profile-hero { display: flex; align-items: center; gap: 16px; }
.profile-hero .avatar { width: 72px; height: 72px; }
.profile-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.stat { background: var(--surface-2); border-radius: 16px; padding: 13px; text-align: center; }
.stat strong, .stat span { display: block; }
.stat span { color: var(--muted); font-size: 12px; margin-top: 3px; }

@media (max-width: 1120px) {
  :root { --sidebar: 88px; --rail: 300px; }
  .brand-row strong, .nav-item > span:nth-child(2), .mini-profile .mini-copy { display: none; }
  .brand-row { justify-content: center; padding-inline: 0; }
  .nav-item { grid-template-columns: 1fr; place-items: center; padding: 0; }
  .nav-item .badge { position: absolute; transform: translate(13px,-14px); }
  .sidebar { padding-inline: 14px; }
}

@media (max-width: 880px) {
  :root { --sidebar: 76px; }
  .app-shell { grid-template-columns: var(--sidebar) minmax(0,1fr); }
  .right-rail { display: none; }
  .main-column { border-right: 0; }
}

@media (max-width: 620px) {
  .app-shell { display: block; padding-bottom: 68px; }
  .sidebar { position: fixed; inset: auto 0 0 0; width: 100%; height: 68px; z-index: 20; padding: 5px 8px max(5px, env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--divider); display: block; }
  .brand-row, .sidebar-bottom { display: none; }
  .side-nav { height: 100%; grid-template-columns: repeat(6,1fr); gap: 0; }
  .nav-item { min-height: 54px; border-radius: 14px; }
  .nav-item svg { width: 23px; height: 23px; }
  .main-column { min-height: calc(100vh - 68px); }
  .feed-tabs { top: 0; height: 56px; }
  .post-card { padding-inline: 14px; }
  .post-title, .post-body, .post-media, .post-actions { margin-left: 0; width: 100%; }
  .post-title { margin-top: 10px; }
  .post-media { max-height: 440px; }
  .auth-shell { padding: 16px; }
  .auth-card { padding: 22px; border-radius: 22px; }
}

/* --- Taymetic Web v2 polish --- */
body.modal-open { overflow: hidden; }

.launch-splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #3996fd;
  opacity: 1;
  transition: opacity .22s ease;
}
.launch-splash.is-leaving { opacity: 0; pointer-events: none; }
.launch-rive,
.launch-fallback-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(86vw, 352px);
  height: min(86vw, 352px);
  transform: translate(-50%, -50%);
}
.launch-rive { display: block; }
.launch-fallback-logo {
  width: min(34vw, 128px);
  height: min(34vw, 128px);
  border-radius: 28px;
  object-fit: cover;
  animation: launchFallbackPulse 1.15s ease-in-out infinite alternate;
  transition: opacity .16s ease;
}
.visual-hidden { opacity: 0 !important; }
.launch-title {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: max(28px, calc(env(safe-area-inset-bottom) + 18px));
  color: #fff;
  font-size: clamp(28px, 4.1vw, 41px);
  font-weight: 800;
  letter-spacing: -.035em;
  text-align: center;
}
@keyframes launchFallbackPulse {
  from { transform: translate(-50%, -50%) scale(.94); opacity: .9; }
  to { transform: translate(-50%, -50%) scale(1.03); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .launch-fallback-logo { animation: none; }
  .launch-splash { transition: none; }
}

/* Use the exact speech-bubble asset from the iOS app. */
.app-bubble-icon {
  display: inline-block;
  width: 25px;
  height: 25px;
  background: currentColor;
  -webkit-mask: url('bubble.svg') center / contain no-repeat;
  mask: url('bubble.svg') center / contain no-repeat;
  flex: 0 0 auto;
}
.nav-item[data-view="chats"].active .app-bubble-icon {
  -webkit-mask-image: url('bubble-filled.svg');
  mask-image: url('bubble-filled.svg');
}
.comment-bubble-icon { width: 20px; height: 20px; }

/* Old Taymetic speech-bubble logo from the app. */
.auth-logo {
  width: 88px;
  height: 88px;
  border-radius: 20px;
}
.brand-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
}

/* Right rail: content sits directly on the page instead of boxed cards. */
.rail-section {
  padding: 6px 4px 10px;
  background: transparent;
  border: 0;
}
.rail-section h2 {
  margin: 0 0 11px;
  font-size: 20px;
}
.rail-section + .rail-section { margin-top: 2px; }
.rail-section .trend-row + .trend-row { border-top: 0; }
.rail-section.web-limits { color: var(--muted); }
.rail-section.web-limits strong { color: var(--ink); }
.rail-section.web-limits p { margin: 7px 0 0; line-height: 1.45; }

/* Feed images can be opened full-screen. */
.post-media {
  cursor: zoom-in;
  transition: filter .16s ease, transform .16s ease;
}
.post-media:hover { filter: brightness(.97); }
.post-media:active { transform: scale(.997); }
.media-viewer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 42px;
  background: rgba(0, 0, 0, .88);
  backdrop-filter: blur(18px);
}
.media-viewer img {
  max-width: min(1400px, 96vw);
  max-height: 92vh;
  object-fit: contain;
  border-radius: 18px;
  box-shadow: 0 30px 100px rgba(0,0,0,.38);
}
.media-close {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,.16);
  color: white;
  backdrop-filter: blur(18px);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.media-close svg { width: 22px; height: 22px; }

/* Conversation rows are now real clickable controls. */
.conversation-button {
  width: 100%;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: background .16s ease, transform .12s ease;
}
.conversation-button:hover { background: var(--surface-2); }
.conversation-button:active { transform: scale(.995); }
.chat-dialog-panel { width: min(650px, 100%); }
.chat-dialog-header { min-height: 72px; }
.chat-dialog-identity { display: flex; align-items: center; gap: 11px; min-width: 0; }
.chat-dialog-identity > div:last-child { min-width: 0; }
.chat-dialog-identity strong,
.chat-dialog-identity span { display: block; }
.chat-dialog-identity span { margin-top: 2px; font-size: 13px; }
.chat-dialog-body {
  padding: 34px 26px 30px;
  text-align: center;
  overflow: auto;
}
.chat-app-mark {
  display: inline-grid;
  place-items: center;
  margin-bottom: 10px;
  color: var(--ink);
}
.chat-app-mark .app-bubble-icon { width: 44px; height: 44px; }
.chat-dialog-body h2 { margin: 2px 0 8px; }
.chat-dialog-body > p { margin: 0 auto 18px; max-width: 480px; }
.chat-e2ee-note { text-align: left; max-width: 520px; margin: 18px auto 0; }

@media (max-width: 620px) {
  .launch-rive { width: min(92vw, 352px); height: min(92vw, 352px); }
  .media-viewer { padding: 16px; }
  .media-viewer img { max-width: 100%; max-height: 86vh; border-radius: 14px; }
}

/* --- Taymetic Web v3: app-faithful feed, comments and profiles --- */
.launch-rive {
  width: min(88vw, 380px);
  height: min(88vw, 380px);
}

/* No launch title or icon: only the original Rive loading animation. */
.launch-title,
.launch-fallback-logo { display: none !important; }

.profile-link,
.profile-name-link,
.profile-link-row { cursor: pointer; }
.profile-name-link:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Mobile-app-like posts: header, edge-to-edge media, then copy and actions. */
.post-card {
  padding: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--divider);
  content-visibility: auto;
  contain-intrinsic-size: 520px;
}
.post-header {
  padding: 10px 16px;
  grid-template-columns: 44px minmax(0,1fr) auto;
  gap: 11px;
  align-items: start;
}
.post-copy {
  padding: 7px 16px 0;
}
.post-title,
.post-body {
  margin-left: 0;
  margin-right: 0;
}
.post-title { margin-top: 0; margin-bottom: 4px; font-size: 18px; }
.post-body { margin-top: 0; margin-bottom: 0; color: var(--muted); }
.post-media {
  display: block;
  width: 100%;
  max-height: none;
  min-height: 260px;
  margin: 0;
  object-fit: cover;
  border: 0;
  border-radius: 0;
  background: var(--surface-2);
}
.post-actions {
  margin: 0;
  max-width: none;
  padding: 4px 16px 14px;
}
.media-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.media-actions .like-summary {
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  min-width: 0;
  flex: 1;
}
.media-action-group {
  display: flex;
  align-items: center;
  gap: 4px;
}
.media-action-group .action-button {
  min-width: 36px;
  width: auto;
  min-height: 36px;
  padding: 6px 7px;
  justify-content: center;
}
.media-action-group .action-button > span:last-child:empty { display: none; }
.text-actions {
  display: flex;
  gap: 12px;
}
.action-button { padding-inline: 6px; }

/* Comments mirror the large iOS sheet more closely. */
#commentDialog {
  align-items: end;
  padding: 0;
}
.comment-sheet {
  width: min(690px, 100%);
  height: min(88vh, 820px);
  max-height: none;
  border-radius: 26px 26px 0 0;
  border-bottom: 0;
  background: var(--bg);
}
.comment-sheet-header {
  padding: 14px 16px 10px;
  background: var(--bg);
}
.comment-sheet-header > div:first-child { display: grid; gap: 7px; }
.comment-sheet-header h2 { font-size: 18px; }
.comment-sort {
  width: max-content;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 13px;
  font-weight: 750;
  padding: 0;
  cursor: pointer;
}
.comment-list {
  padding: 8px 16px 18px;
  background: var(--bg);
}
.comment-row {
  grid-template-columns: 34px minmax(0,1fr);
  gap: 10px;
  padding: 8px 0;
}
.comment-row + .comment-row { border-top: 0; }
.comment-content { min-width: 0; }
.comment-body { margin: 4px 0 6px; line-height: 1.4; }
.comment-footer {
  display: flex;
  align-items: flex-start;
  min-height: 34px;
  color: var(--muted);
}
.comment-reply-label {
  padding-top: 3px;
  font-size: 12px;
  font-weight: 700;
}
.app-comment-like {
  margin-left: auto;
  display: grid;
  justify-items: center;
  gap: 1px;
  width: 34px;
  min-height: 34px;
  color: var(--muted);
}
.app-comment-like svg { width: 18px; height: 18px; }
.app-comment-like span { font-size: 11px; }
.app-comment-like.liked { color: var(--danger); }
.comment-form {
  background: var(--bg);
  padding: 10px 16px max(14px, env(safe-area-inset-bottom));
}
.comment-form textarea { border-radius: 18px; }

/* App-style profile rather than a generic web card. */
.mobile-profile-page { padding: 22px 20px 34px; }
.mobile-profile-top {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 5px;
}
.mobile-profile-top .avatar {
  width: 108px;
  height: 108px;
  margin-bottom: 8px;
}
.mobile-profile-top h1 { margin: 0; font-size: 24px; line-height: 1.15; }
.mobile-profile-handle { color: var(--muted); }
.mobile-profile-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 20px 0 18px;
}
.mobile-profile-metric {
  display: grid;
  justify-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}
.metric-dots { display: flex; gap: 5px; }
.metric-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--divider);
}
.metric-dots span.active { background: var(--accent); }
.mobile-profile-actions { display: flex; justify-content: center; gap: 10px; margin: 0 auto 16px; max-width: 520px; }
.profile-follow-button {
  width: max-content;
  max-width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  padding: 0 18px;
  background: var(--accent);
  color: white;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.profile-follow-button.secondary { background: var(--surface-2); color: var(--ink); }
.mobile-profile-bio {
  margin: 0 auto 20px;
  max-width: 560px;
  text-align: center;
  line-height: 1.45;
}
.profile-content-tabs {
  margin: 6px -20px 0;
  height: 48px;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  border-bottom: 1px solid var(--divider);
}
.profile-content-tabs button {
  position: relative;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 750;
  cursor: pointer;
}
.profile-content-tabs button.active { color: var(--ink); }
.profile-content-tabs button.active::after {
  content: '';
  position: absolute;
  left: 28%; right: 28%; bottom: -1px;
  height: 2px;
  background: var(--accent);
  border-radius: 999px;
}
.profile-post-content { margin: 0 -20px -34px; }
.profile-media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--divider);
}
.profile-media-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  cursor: zoom-in;
  background: var(--surface-2);
}
.profile-empty { min-height: 120px; display: grid; place-items: center; color: var(--muted); }

@media (max-width: 620px) {
  .post-header { padding-inline: 14px; }
  .post-copy, .post-actions { padding-left: 14px; padding-right: 14px; }
  .post-media { min-height: 220px; }
  .mobile-profile-page { padding-inline: 16px; }
  .profile-content-tabs, .profile-post-content { margin-left: -16px; margin-right: -16px; }
}

/* --- Taymetic Web v4: app parity for overview/discover + invisible layout separators --- */
.sidebar,
.main-column {
  border-right: 0;
}

/* The two desktop column separator lines should not be visible. */
.sidebar { border-right-color: transparent; }
.main-column { border-right-color: transparent; }

.overview-page,
.discover-page {
  width: 100%;
  min-height: 100%;
}

.overview-top {
  min-height: 62px;
  display: grid;
  place-items: center;
  padding: 10px 18px 6px;
  background: var(--bg);
}
.overview-top h1 {
  margin: 0;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.discover-search {
  height: 44px;
  margin: 10px 16px 12px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 999px;
  background: var(--surface-2);
}
.discover-search [data-icon] { width: 18px; height: 18px; color: var(--muted); display: grid; place-items: center; }
.discover-search svg { width: 18px; height: 18px; }
.discover-search input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
}
.discover-search input::placeholder { color: var(--muted); }

.discover-tabs {
  min-height: 52px;
  display: flex;
  align-items: end;
  gap: 28px;
  padding: 0 16px;
  border-bottom: 0;
}
.discover-tab {
  position: relative;
  min-height: 48px;
  border: 0;
  padding: 0 0 12px;
  background: transparent;
  color: var(--muted);
  font-weight: 650;
  cursor: pointer;
}
.discover-tab.active { color: var(--ink); font-weight: 800; }
.discover-tab.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  border-radius: 999px;
  background: var(--ink);
}

.discover-place-bubbles {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 14px 16px 4px;
  scrollbar-width: none;
}
.discover-place-bubbles::-webkit-scrollbar { display: none; }
.place-bubble,
.place-label,
.trend-place-pill {
  width: max-content;
  max-width: 100%;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--divider);
  color: var(--ink);
}
.place-bubble {
  flex: 0 0 auto;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.place-label {
  display: inline-flex;
  align-items: center;
  margin-top: 5px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
  color: var(--ink);
}

.trend-row {
  display: grid;
  justify-items: start;
  gap: 4px;
}
.trend-place-pill {
  border: 1px solid var(--divider);
  cursor: pointer;
}
.trend-place-pill:hover { background: var(--surface-2); }
.trend-place-pill {
  display: inline-flex !important;
  align-items: center;
  width: max-content;
  max-width: 100%;
  margin-top: 2px !important;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 12px;
  font-size: 13px;
  line-height: 1.4;
}
.legal-links a {
  color: var(--muted);
  text-decoration: none;
}
.legal-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 620px) {
  .sidebar { border-top: 0; }
  .overview-top { min-height: 56px; }
  .discover-search { margin-inline: 14px; }
  .discover-tabs { padding-inline: 14px; gap: 22px; }
  .discover-place-bubbles { padding-inline: 14px; }
}


/* --- Taymetic Web v5: compact actions, public legal links and cookie notice --- */
.bot-field {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.profile-legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px 12px;
  margin: -2px auto 18px;
  max-width: 560px;
  font-size: 13px;
}
.profile-legal-links a { color: var(--muted); text-decoration: none; }
.profile-legal-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.auth-legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px 12px;
  padding-top: 2px;
  font-size: 13px;
  line-height: 1.4;
}
.auth-legal-links a,
.cookie-banner a {
  color: var(--muted);
  text-decoration: none;
}
.auth-legal-links a:hover,
.cookie-banner a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* The notice follows the reference: dark dialog, scrolling copy, fixed actions. */
.cookie-banner {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: rgba(0, 0, 0, .64);
}
.cookie-panel {
  width: min(548px, 100%);
  max-height: min(660px, 92vh);
  max-height: min(660px, calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #30343b;
  border-radius: 24px;
  background: #212328;
  color: #f5f5f7;
  color-scheme: dark;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .35);
}
.cookie-banner-copy {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #8b8c90 transparent;
  padding: 42px 24px 24px;
  font-size: 14px;
  line-height: 1.4;
}
.cookie-banner-copy h2 {
  margin: 0 0 14px;
  font-size: clamp(22px, 4.5vw, 25px);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -.02em;
  text-align: center;
}
.cookie-banner-copy p { margin: 0 0 16px; }
.cookie-details { margin: 0 0 16px; padding-left: 22px; }
.cookie-details li + li { margin-top: 14px; }
.cookie-banner a,
.cookie-banner a:visited { color: #70b2ff; text-decoration: none; }
.cookie-banner a:hover { color: #a9d1ff; text-decoration: underline; text-underline-offset: 3px; }
.cookie-info { border-top: 1px solid #30343b; padding-top: 14px; }
.cookie-info h3 { margin: 0 0 12px; font-size: 16px; }
.cookie-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cookie-info-grid a { display: grid; gap: 6px; padding: 14px 12px; border: 1px solid #30343b; border-radius: 14px; }
.cookie-info-grid strong { color: #f5f5f7; }
.cookie-info-grid span { color: #c0c3c9; font-size: 12px; }
.cookie-actions { flex: 0 0 auto; border-top: 1px solid #30343b; }
.cookie-accept,
.cookie-banner .cookie-more {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}
.cookie-accept { color: #70aaff; font-weight: 750; }
.cookie-banner .cookie-more { border-top: 1px solid #30343b; color: #f5f5f7; }
.cookie-accept:hover,
.cookie-banner .cookie-more:hover { background: #2b2e34; text-decoration: none; }
.cookie-panel :focus-visible { outline: 2px solid #70b2ff; outline-offset: -4px; }
.cookie-panel h2:focus { outline: none; }
body.cookie-notice-open { overflow: hidden; }
@media (max-width: 380px) {
  .cookie-banner-copy { padding: 28px 18px 18px; }
  .cookie-info-grid { grid-template-columns: 1fr; }
}
.legal-page-shell {
  min-height: 100vh;
  padding: 28px 16px;
  display: grid;
  place-items: start center;
}
.legal-page-card {
  width: min(760px, 100%);
  border: 1px solid var(--divider);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: clamp(22px, 4vw, 36px);
}
.legal-page-card h1 { margin: 0 0 10px; font-size: clamp(30px, 5vw, 42px); }
.legal-page-card h2 { margin: 26px 0 8px; font-size: 19px; }
.legal-page-card p, .legal-page-card li { color: var(--muted); line-height: 1.6; }
.legal-page-card ul { padding-left: 20px; }
.legal-page-card .legal-links { margin-top: 24px; }
.legal-back { display: inline-flex; margin-bottom: 18px; color: var(--accent); text-decoration: none; font-weight: 750; }

/* --- Taymetic Web v6: app accents, aligned headers, cleaner feed and app-style chats --- */
html[data-theme="dim"] {
  --bg: #121214;
  --surface: #1c1c1f;
  --surface-2: #27272b;
  --ink: #f7f7f8;
  --muted: #a8a8b0;
  --divider: #37373d;
  --shadow: 0 18px 60px rgba(0, 0, 0, .32);
}

:root { --topline-height: 84px; }

/* Keep the main desktop control on the same visual baseline as the Taymetic brand. */
.overview-top {
  height: var(--topline-height);
  min-height: var(--topline-height);
  padding: 0 18px;
}
.discover-search {
  margin: 20px 16px;
}
.right-rail {
  padding-top: 18px;
}
.rail-sticky { top: 18px; }

/* Entdecken already has its own app-style search; don't duplicate it in the right rail. */
.app-shell[data-view="discover"] .right-rail .global-search {
  display: none;
}

/* iOS feed cards do not need desktop divider rules between posts. */
.post-card,
.feed-results > .post-card,
.profile-post-content > .post-card {
  border-bottom: 0 !important;
}

/* Match the compact iOS author header: name, badge, relative timestamp. */
.post-header {
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
}
.post-header > .avatar {
  width: 38px;
  height: 38px;
}
.app-author-line {
  align-items: center;
  gap: 5px;
  min-height: 38px;
}
.app-author-line strong { font-size: 15px; }
.app-post-time {
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
}
.account-seal {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.26);
}
.account-seal.compact { width: 15px; height: 15px; font-size: 9px; }
.account-seal[data-kind="team"] { background: var(--accent); }
.account-seal[data-kind="tourism"] { background: #9a78e8; }
.account-seal[data-kind="school"] { background: #16b364; }
.account-seal[data-kind="company"] { background: #6d7582; }
.account-seal[data-kind="creator"] { background: #555b66; }

/* Appearance / accent picker from the app. */
.appearance-panel { width: min(520px, 100%); }
.appearance-body { display: grid; gap: 24px; padding: 4px 20px 24px; }
.appearance-body h3 { margin: 0 0 10px; font-size: 15px; color: var(--muted); }
.theme-choice-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 8px;
}
.appearance-choice {
  min-height: 44px;
  border: 1px solid var(--divider);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
}
.appearance-choice.active {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}
.accent-choice-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}
.accent-choice {
  min-height: 58px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: transparent;
  color: var(--ink);
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.accent-choice > span {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.accent-choice.active {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--divider));
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}

/* App-style conversations. */
.chats-page {
  min-height: 100vh;
  background: var(--bg);
}
.chats-topbar {
  height: var(--topline-height);
  display: flex;
  align-items: center;
  padding: 0 20px;
}
.chats-topbar h1 {
  margin: 0;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -.035em;
}
.chats-body { padding-bottom: 28px; }
.pinned-chats-strip { padding: 0 0 8px 20px; overflow: hidden; }
.pinned-chats-scroller {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 2px 20px 4px 0;
  scrollbar-width: none;
}
.pinned-chats-scroller::-webkit-scrollbar { display: none; }
.pinned-chat {
  width: 74px;
  flex: 0 0 74px;
  border: 0;
  background: transparent;
  padding: 0;
  display: grid;
  justify-items: center;
  gap: 8px;
  cursor: pointer;
}
.pinned-chat-name {
  width: 74px;
  justify-content: center;
  gap: 3px;
  min-width: 0;
}
.pinned-chat-name strong {
  max-width: 58px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
.presence-avatar {
  position: relative;
  width: var(--avatar-size);
  height: var(--avatar-size);
  flex: 0 0 var(--avatar-size);
}
.presence-avatar > .avatar {
  width: 100%;
  height: 100%;
  display: block;
}
.presence-dot {
  position: absolute;
  right: 0;
  bottom: 1px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  background: var(--muted);
}
.presence-dot.online { background: var(--success); }
.presence-dot.idle { background: #f28c28; }
.presence-dot.offline { background: var(--muted); }
.pinned-unread-dot {
  position: absolute;
  top: 0;
  right: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  background: var(--accent);
}
.conversation-list { display: grid; }
.app-conversation-row {
  width: 100%;
  display: grid;
  grid-template-columns: 54px minmax(0,1fr) auto;
  gap: 13px;
  align-items: center;
  margin: 0;
  padding: 7px 20px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.app-conversation-row:hover { background: color-mix(in srgb, var(--surface-2) 58%, transparent); }
.conversation-copy { min-width: 0; display: grid; gap: 5px; }
.chat-name-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}
.chat-name-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 17px;
  font-weight: 650;
}
.app-conversation-row.unread .chat-name-row strong { font-weight: 800; }
.conversation-preview-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 14px;
}
.app-conversation-row.unread .conversation-preview-row { color: var(--ink); }
.conversation-preview {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conversation-muted { font-size: 11px; transform: rotate(-15deg); }
.conversation-meta {
  min-width: 44px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
}
.conversation-time { color: var(--muted); font-size: 12px; white-space: nowrap; }
.chat-unread-badge {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
.conversation-pin { width: 16px; height: 16px; color: var(--muted); }
.conversation-pin svg { width: 16px; height: 16px; }
.chat-empty-list,
.chat-list-hint {
  min-height: 160px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 24px;
  color: var(--muted);
  text-align: center;
}
.chat-empty-list > span:first-child { width: 32px; height: 32px; color: var(--accent); }
.chat-empty-list strong { color: var(--ink); font-size: 18px; }

/* Open conversation: app-like header, message area and composer. */
.chat-detail-page {
  height: 100vh;
  min-height: 620px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--bg);
  overflow: hidden;
}
.chat-detail-header {
  min-height: 58px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 4px;
  padding: 6px 12px 7px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter: blur(22px) saturate(150%);
  border-bottom: .5px solid var(--divider);
  z-index: 3;
}
.chat-back-button,
.chat-call-button,
.chat-composer-circle {
  border: 0;
  background: transparent;
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.chat-back-button,
.chat-call-button { width: 40px; height: 40px; border-radius: 50%; }
.chat-back-button:hover,
.chat-call-button:hover { background: var(--surface-2); }
.chat-back-button svg,
.chat-call-button svg { width: 23px; height: 23px; }
.chat-detail-identity {
  min-width: 0;
  width: max-content;
  max-width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  cursor: pointer;
}
.chat-detail-identity > .avatar { width: 30px; height: 30px; flex: 0 0 30px; }
.chat-detail-name strong { font-size: 16px; }
.chat-message-scroller {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 14px 24px;
}
.chat-message-list { display: grid; gap: 5px; }
.chat-message-row { display: flex; width: 100%; }
.chat-message-row.incoming { justify-content: flex-start; }
.chat-message-row.outgoing { justify-content: flex-end; }
.chat-message-bubble {
  max-width: min(78%, 460px);
  padding: 9px 12px 6px;
  border-radius: 18px;
  background: var(--surface-2);
  display: grid;
  gap: 5px;
  overflow: hidden;
}
.chat-message-row.outgoing .chat-message-bubble {
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 6px;
}
.chat-message-row.incoming .chat-message-bubble { border-bottom-left-radius: 6px; }
.chat-message-bubble img {
  width: calc(100% + 24px);
  max-height: 420px;
  object-fit: cover;
  margin: -9px -12px 2px;
  cursor: zoom-in;
}
.chat-message-bubble audio { max-width: 100%; }
.chat-message-text { line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-message-text.encrypted { font-style: italic; opacity: .78; }
.chat-message-time {
  justify-self: end;
  font-size: 10px;
  color: var(--muted);
}
.chat-message-row.outgoing .chat-message-time { color: rgba(255,255,255,.78); }
.chat-empty-state {
  min-height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 36px 20px;
  text-align: center;
}
.chat-empty-state h2 { margin: 6px 0 0; }
.chat-empty-state p { margin: 0; color: var(--muted); }
.chat-encryption-note {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
}
.chat-composer {
  display: grid;
  grid-template-columns: 40px minmax(0,1fr) 40px;
  align-items: end;
  gap: 9px;
  padding: 9px 12px max(12px, env(safe-area-inset-bottom));
  border-top: .5px solid var(--divider);
  background: color-mix(in srgb, var(--bg) 96%, transparent);
}
.chat-composer-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}
.chat-composer-circle svg { width: 19px; height: 19px; }
.chat-composer-input {
  width: 100%;
  min-height: 40px;
  max-height: 150px;
  resize: none;
  border: 0;
  outline: 0;
  border-radius: 18px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--ink);
  line-height: 1.35;
}
.chat-composer-input::placeholder { color: var(--muted); }

@media (max-width: 620px) {
  :root { --topline-height: 58px; }
  .overview-top { height: 58px; min-height: 58px; }
  .discover-search { margin: 7px 14px; }
  .right-rail { padding-top: 12px; }
  .theme-choice-grid, .accent-choice-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .chats-topbar { height: 64px; padding-inline: 16px; align-items: end; padding-bottom: 6px; }
  .chats-topbar h1 { font-size: 32px; }
  .pinned-chats-strip { padding-left: 16px; }
  .app-conversation-row { padding-inline: 16px; }
  .chat-detail-page { height: calc(100dvh - 68px); min-height: 0; }
  .chat-message-bubble { max-width: 84%; }
}

/* v6 secure web chat + outgoing encrypted call surface */
.chat-composer-circle.send-ready {
  background: var(--accent);
  color: #fff;
}
.chat-composer-circle:disabled,
.chat-composer-input:disabled {
  opacity: .6;
  cursor: wait;
}
.web-call-overlay {
  position: fixed;
  z-index: 1200;
  right: 22px;
  top: 22px;
  width: min(300px, calc(100vw - 32px));
  padding: 18px;
  border: 1px solid var(--divider);
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--shadow);
  backdrop-filter: blur(24px) saturate(150%);
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 48px;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 3px 12px;
}
.web-call-avatar {
  grid-row: 1 / span 2;
}
.web-call-name {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 16px;
}
.web-call-status {
  grid-column: 2;
  color: var(--muted);
  font-size: 13px;
}
.web-call-hangup {
  grid-column: 3;
  grid-row: 1 / span 2;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--danger);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.web-call-hangup svg { width: 25px; height: 25px; }
.web-call-audio-host {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: .001;
  pointer-events: none;
}
.web-call-audio-host audio { width: 1px; height: 1px; }

@media (max-width: 620px) {
  .web-call-overlay {
    top: max(12px, env(safe-area-inset-top));
    right: 12px;
    left: 12px;
    width: auto;
  }
}

/* --- Taymetic Web v32: clean split login, built from real page elements --- */
.auth-shell {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0;
  display: block;
  background: var(--bg);
}
.auth-layout {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 56%) minmax(430px, 44%);
  gap: 0;
  align-items: stretch;
}
.auth-showcase {
  position: relative;
  min-width: 0;
  min-height: 100%;
  padding: clamp(34px, 4.5vw, 72px);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 24px;
  overflow: hidden;
  background: var(--bg);
}
.auth-showcase::before,
.auth-showcase::after {
  content: none;
}
.auth-brand-lockup {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 13px;
}
.auth-logo {
  width: 58px;
  height: 58px;
  border-radius: 0;
  box-shadow: none;
  object-fit: contain;
}
.auth-brand-subline,
.auth-lead,
.auth-feature-list {
  display: none;
}
.auth-showcase-content {
  align-self: center;
  justify-self: center;
  width: min(100%, 720px);
  padding: 18px 0 clamp(24px, 6vh, 68px);
  display: grid;
  justify-items: center;
  gap: 0;
  text-align: center;
}
.auth-copy {
  display: block;
  max-width: 700px;
}
.auth-copy h1 {
  margin: 0;
  font-size: clamp(40px, 4.25vw, 68px);
  line-height: 1.16;
  letter-spacing: -.045em;
  font-weight: 560;
  text-wrap: balance;
}
.accent-gradient {
  background: linear-gradient(100deg, #0064e0 0%, #2589f4 58%, #55b6ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 620;
}
.auth-panel {
  position: relative;
  min-width: 0;
  min-height: 100%;
  padding: clamp(52px, 7vw, 112px) clamp(42px, 5vw, 88px) clamp(108px, 12vh, 138px);
  border-left: 1px solid var(--divider);
  display: grid;
  place-items: center;
  background: var(--bg);
}
.auth-card {
  width: min(100%, 610px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  display: grid;
  gap: 22px;
}
.auth-panel-copy {
  display: block;
}
.auth-panel-copy h2 {
  margin: 0;
  font-size: clamp(24px, 2vw, 30px);
  line-height: 1.2;
  letter-spacing: -.025em;
  font-weight: 760;
}
.auth-panel-copy .eyebrow,
.auth-panel-copy .muted {
  display: none;
}
.auth-form {
  display: grid;
  gap: 16px;
}
.auth-form label { display: block; }
.auth-field {
  position: relative;
  min-width: 0;
}
.auth-field .field-label {
  position: absolute;
  top: 50%;
  left: 20px;
  z-index: 1;
  max-width: calc(100% - 40px);
  color: var(--muted);
  font-size: 16px;
  font-weight: 520;
  line-height: 1;
  transform: translateY(-50%);
  transform-origin: left top;
  pointer-events: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: top .16s ease, transform .16s ease, font-size .16s ease, color .16s ease;
}
.auth-form input {
  width: 100%;
  min-height: 68px;
  padding: 0 20px;
  border: 1px solid color-mix(in srgb, var(--divider) 88%, var(--ink));
  border-radius: 22px;
  background: var(--bg);
  color: var(--ink);
  caret-color: var(--ink);
  font-size: 16px;
  font-weight: 560;
  outline: 0;
  transition: border-color .16s ease, box-shadow .16s ease, padding .16s ease;
}
.auth-form input::placeholder {
  color: transparent;
}
.auth-form input:focus {
  border-color: color-mix(in srgb, var(--ink) 72%, var(--divider));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent);
  background: var(--bg);
}
.auth-field input:focus,
.auth-field input:not(:placeholder-shown) {
  padding-top: 19px;
  padding-bottom: 5px;
}
.auth-field input:focus + .field-label,
.auth-field input:not(:placeholder-shown) + .field-label {
  top: 12px;
  color: var(--muted);
  font-size: 12px;
  transform: none;
}
.auth-password-field input { padding-right: 60px; }
.auth-password-field .field-label { max-width: calc(100% - 78px); }
.password-toggle {
  position: absolute;
  top: 50%;
  right: 12px;
  z-index: 2;
  width: 42px;
  height: 42px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.password-toggle[hidden] { display: none; }
.password-toggle:hover,
.password-toggle:focus-visible {
  color: var(--ink);
  background: var(--surface-2);
  outline: 0;
}
.password-toggle svg { width: 23px; height: 23px; }
.password-toggle path,
.password-toggle circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.password-toggle[aria-pressed="true"] .eye-slash { display: none; }
.primary-button,
.apple-button {
  width: 100%;
  min-height: 58px;
  border-radius: 999px;
  padding: 0 22px;
  font-size: 17px;
  font-weight: 720;
  box-shadow: none;
}
.auth-form .primary-button {
  margin-top: 4px;
  background: #0064e0;
}
.auth-form .primary-button:hover {
  filter: brightness(1.04);
}
.auth-form .primary-button:disabled {
  background: #0064e0;
  opacity: .42;
  cursor: not-allowed;
  filter: none;
}
.apple-button {
  border: 1px solid var(--divider);
  background: var(--surface-2);
  color: var(--ink);
}
.apple-button span {
  margin-right: 8px;
}
.app-account-note {
  margin: 0;
  color: var(--muted);
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
}
.app-account-note strong {
  color: var(--ink);
  font-weight: 720;
}
.auth-legal-links {
  position: absolute;
  left: clamp(30px, 4vw, 72px);
  right: clamp(30px, 4vw, 72px);
  bottom: max(26px, env(safe-area-inset-bottom));
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 9px 18px;
}
.auth-legal-links a,
.auth-legal-links a:visited {
  color: var(--muted);
  font-size: 13px;
}

/* Legal pages use the same quiet, unboxed footer navigation as the login. */
.legal-help-footer {
  margin-top: 50px;
  padding: 26px 0 8px;
  border-top: 0;
  background: transparent;
  box-shadow: none;
}
.legal-help-footer .legal-footer-links {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 9px 18px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.legal-help-footer .legal-footer-links a,
.legal-help-footer .legal-footer-links a:visited {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  text-decoration: none;
}
.legal-help-footer .legal-footer-links a:hover,
.legal-help-footer .legal-footer-links a:focus-visible {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 1080px) {
  .auth-layout {
    grid-template-columns: minmax(0, 52%) minmax(420px, 48%);
  }
  .auth-showcase {
    padding: 34px;
  }
  .auth-copy h1 {
    font-size: clamp(38px, 5vw, 54px);
  }
  .auth-panel {
    padding-inline: 38px;
  }
}

@media (max-width: 820px) {
  .auth-layout {
    grid-template-columns: 1fr;
  }
  .auth-showcase {
    min-height: auto;
    padding: 28px 24px 34px;
    border-bottom: 1px solid var(--divider);
    gap: 22px;
  }
  .auth-brand-lockup {
    gap: 10px;
  }
  .auth-logo {
    width: 48px;
    height: 48px;
  }
  .auth-showcase-content {
    width: 100%;
    padding: 0;
    grid-template-columns: 1fr;
    align-items: center;
    justify-items: start;
    gap: 0;
    text-align: left;
  }
  .auth-copy h1 {
    max-width: none;
    font-size: clamp(31px, 7.5vw, 44px);
    line-height: 1.1;
    text-wrap: pretty;
  }
  .auth-panel {
    min-height: 590px;
    padding: 52px 24px 104px;
    border-left: 0;
  }
  .auth-card {
    width: min(100%, 560px);
  }
}

@media (max-width: 520px) {
  .auth-showcase {
    padding: 20px 18px 25px;
    gap: 18px;
  }
  .auth-logo {
    width: 42px;
    height: 42px;
  }
  .auth-showcase-content {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .auth-copy h1 {
    font-size: clamp(28px, 8.8vw, 38px);
  }
  .auth-panel {
    min-height: 570px;
    padding: 42px 18px 102px;
  }
  .auth-card {
    gap: 18px;
  }
  .auth-panel-copy h2 {
    font-size: 25px;
  }
  .auth-form {
    gap: 13px;
  }
  .auth-form input {
    min-height: 60px;
    border-radius: 19px;
  }
  .primary-button,
  .apple-button {
    min-height: 54px;
    font-size: 16px;
  }
  .auth-legal-links {
    left: 18px;
    right: 18px;
    gap: 8px 14px;
  }
}

/* Accent values are attribute-driven so the strict CSP does not need inline styles. */
html[data-accent="standard"] { --accent: #36a9f7; }
html[data-accent="green"] { --accent: #16b364; }
html[data-accent="purple"] { --accent: #9a78e8; }
html[data-accent="yellow"] { --accent: #b8860b; }
html[data-accent="pink"] { --accent: #e26e9f; }
html[data-accent="orange"] { --accent: #f28c28; }
html[data-accent="cyan"] { --accent: #2db8b0; }
html[data-accent="red"] { --accent: #e65f5c; }
.accent-choice[data-accent-choice="standard"] > span { background: #36a9f7; }
.accent-choice[data-accent-choice="green"] > span { background: #16b364; }
.accent-choice[data-accent-choice="purple"] > span { background: #9a78e8; }
.accent-choice[data-accent-choice="yellow"] > span { background: #b8860b; }
.accent-choice[data-accent-choice="pink"] > span { background: #e26e9f; }
.accent-choice[data-accent-choice="orange"] > span { background: #f28c28; }
.accent-choice[data-accent-choice="cyan"] > span { background: #2db8b0; }
.accent-choice[data-accent-choice="red"] > span { background: #e65f5c; }
.presence-avatar.size-54 { --avatar-size: 54px; }
.presence-avatar.size-58 { --avatar-size: 58px; }
.presence-avatar.size-64 { --avatar-size: 64px; }
.presence-avatar.size-72 { --avatar-size: 72px; }


/* --- Taymetic Web v7: stable chat avatars, encrypted image composer and legal content --- */
.presence-avatar > .avatar.fallback {
  display: grid;
  place-items: center;
  line-height: 1;
  font-size: calc(var(--avatar-size) * .38);
}

.chat-composer-shell {
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  border-top: .5px solid var(--divider);
}
.chat-composer-shell .chat-composer { border-top: 0; }
.chat-image-picker {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}
.chat-pending-media {
  position: relative;
  width: max-content;
  max-width: calc(100% - 24px);
  margin: 10px 12px 0;
}
.chat-pending-media[hidden] { display: none; }
.chat-pending-media img {
  display: block;
  width: auto;
  max-width: min(220px, 58vw);
  max-height: 132px;
  object-fit: contain;
  border-radius: 16px;
  background: var(--surface-2);
  border: 1px solid var(--divider);
}
.chat-pending-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.62);
  color: #fff;
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}
.chat-image-loading {
  min-width: min(230px, 60vw);
  min-height: 116px;
  display: grid;
  place-items: center;
  padding: 18px;
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.action-button:disabled { opacity: .72; cursor: default; }

.legal-page-card.legal-wide { width: min(980px, 100%); }
.legal-page-card .legal-updated {
  display: inline-flex;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.legal-page-card .legal-intro {
  margin: 0 0 26px;
  font-size: 16px;
}
.legal-page-card .legal-content section {
  scroll-margin-top: 24px;
  padding-top: 2px;
}
.legal-page-card .legal-content h2 { margin-top: 30px; }
.legal-page-card .legal-content h3 { margin: 18px 0 6px; font-size: 16px; }
.legal-page-card .legal-content address {
  color: var(--muted);
  font-style: normal;
  line-height: 1.65;
}
.legal-page-card .legal-content a { color: var(--accent); }
.legal-page-card .legal-content code {
  padding: 2px 5px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--ink);
}
.legal-page-card .notice {
  margin: 14px 0;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--surface-2);
  color: var(--muted);
  line-height: 1.55;
}
.legal-page-card .notice strong { display: block; color: var(--ink); margin-bottom: 4px; }
.legal-page-card .data-table-wrap { overflow-x: auto; margin: 14px 0; }
.legal-page-card .data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.legal-page-card .data-table th,
.legal-page-card .data-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--divider);
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}
.legal-page-card .data-table th { color: var(--ink); font-size: 13px; }
.legal-page-card .data-table td { color: var(--muted); }
.legal-page-card .legal-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 26px;
}
.legal-page-card .legal-toc a {
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
}
.legal-page-card .legal-toc a:hover { color: var(--ink); }
.legal-page-card .legal-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--divider);
  font-size: 13px;
}
.legal-page-card .legal-footer-links a { color: var(--muted); text-decoration: none; }
.legal-page-card .legal-footer-links a:hover { color: var(--ink); text-decoration: underline; }


/* V7 launch screen: local Taymetic mark, no external animation runtime. */
#launchSplash .v7-launch-logo {
  display: block !important;
  width: min(32vw, 112px);
  height: min(32vw, 112px);
  border-radius: 26px;
  object-fit: cover;
  animation: launchFallbackPulse 1.05s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  #launchSplash .v7-launch-logo { animation: none; }
}

/* --- Taymetic Web v8: fixed left navigation + contextual desktop comments --- */
.app-account-note {
  margin: -2px 0 0;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.sidebar-legal-links {
  display: grid;
  gap: 5px;
  margin: 10px 10px 0 54px;
  font-size: 12px;
  line-height: 1.25;
}
.sidebar-legal-links a {
  width: max-content;
  max-width: 100%;
  color: var(--muted);
  text-decoration: none;
}
.sidebar-legal-links a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.nav-item:active { transform: none; }

.comments-rail { min-width: 0; }
.comments-sticky {
  top: 18px;
  width: min(440px, 100%);
}
.side-comments-panel {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(80px, auto) auto;
}
.side-comments-header {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px 10px;
}
.side-comments-header h2 {
  margin: 0;
  font-size: 20px;
  letter-spacing: -.02em;
}
.side-comment-list {
  max-height: calc(100dvh - 170px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-right: 5px;
}
.side-comment-row {
  padding: 12px 2px;
  grid-template-columns: 36px minmax(0,1fr);
}
.side-comment-row .avatar.small { width: 36px; height: 36px; }
.side-comment-empty {
  padding: 18px 2px;
  color: var(--muted);
  font-size: 14px;
}
.side-comment-loading { padding: 24px 2px; text-align: left; }
.side-comment-form {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 8px;
  align-items: end;
  padding-top: 12px;
}
.side-comment-form textarea {
  width: 100%;
  min-height: 44px;
  max-height: 120px;
  resize: vertical;
  border: 0;
  outline: 0;
  border-radius: 18px;
  padding: 11px 13px;
  background: var(--surface-2);
  color: var(--ink);
}
.post-card.comment-selected { background: color-mix(in srgb, var(--accent) 2.5%, var(--bg)); }

.web-call-incoming-actions {
  grid-column: 3;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  gap: 8px;
}
.web-call-accept,
.web-call-decline {
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  cursor: pointer;
}
.web-call-accept { background: var(--success); }
.web-call-decline { background: var(--danger); }
.web-call-accept svg,
.web-call-decline svg { width: 24px; height: 24px; }
.incoming-call-overlay { width: min(360px, calc(100vw - 32px)); grid-template-columns: 64px minmax(0,1fr) auto; }

@media (min-width: 881px) {
  .app-shell {
    width: 100%;
    max-width: none;
    margin: 0;
    grid-template-columns: var(--sidebar) minmax(0, var(--center)) minmax(260px, 1fr);
    align-items: start;
  }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar);
    height: 100dvh;
    z-index: 20;
  }
  .main-column {
    grid-column: 2;
    min-width: 0;
    width: 100%;
    max-width: var(--center);
  }
  .right-rail {
    grid-column: 3;
    min-width: 0;
    width: 100%;
    max-width: 500px;
    padding: 18px 18px 30px 26px;
  }
}

@media (min-width: 1121px) {
  :root { --sidebar: 238px; }
  .sidebar { padding: 16px 10px 14px 4px; }
  .brand-row { padding-left: 8px; }
  .nav-item { padding-left: 10px; padding-right: 10px; }
}

@media (min-width: 881px) and (max-width: 1120px) {
  .sidebar-legal-links { display: none; }
}

@media (max-width: 880px) {
  .sidebar-legal-links { display: none; }
}

@media (max-width: 620px) {
  .side-comments-panel { display: none; }
  .side-nav { grid-template-columns: repeat(5, 1fr); }
  .incoming-call-overlay { grid-template-columns: 56px minmax(0,1fr) auto; }
  .web-call-incoming-actions { gap: 6px; }
  .web-call-accept, .web-call-decline { width: 42px; height: 42px; }
}

/* Keep the full labeled desktop menu stable instead of collapsing at laptop widths. */
@media (min-width: 881px) {
  :root { --sidebar: 220px; }
  .brand-row strong,
  .nav-item > span:nth-child(2),
  .mini-profile .mini-copy { display: block; }
  .brand-row { justify-content: flex-start; padding: 4px 8px 20px; }
  .nav-item {
    grid-template-columns: 30px minmax(0,1fr) auto;
    place-items: initial;
    align-items: center;
    padding: 0 10px;
  }
  .nav-item .badge { position: static; transform: none; }
  .sidebar { padding: 16px 10px 14px 4px; }
  .sidebar-legal-links { display: grid; }
}
@media (min-width: 1121px) { :root { --sidebar: 238px; } }

/* --- Taymetic Web v9: balanced desktop workspace + image-aligned comments --- */
@media (min-width: 881px) {
  :root {
    --sidebar: 238px;
    --center: 690px;
    --desktop-edge-gap: 10px;
  }

  /* A little breathing room from the viewport edge, without returning to the
     large desktop inset from earlier versions. */
  .sidebar {
    left: 0;
    padding: 16px 10px 14px var(--desktop-edge-gap);
  }
  .brand-row {
    padding-left: 8px;
    padding-right: 8px;
  }
  .nav-item {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* The workspace after the fixed navigation is centered against the whole
     remaining viewport, not pinned to the navigation edge. */
  .app-shell {
    position: relative;
    display: block;
    width: 100%;
    max-width: none;
    min-height: 100vh;
    margin: 0;
  }
  .main-column {
    position: relative;
    width: min(var(--center), calc(100vw - var(--sidebar) - 40px));
    max-width: var(--center);
    min-height: 100vh;
    margin-left: calc(var(--sidebar) + max(20px, (100vw - var(--sidebar) - var(--center)) / 2));
  }

  /* Overview and Discover inherit the centered main-column. Keep their own
     controls symmetrically aligned inside that column. */
  .overview-top,
  .discover-page {
    width: 100%;
  }
  .overview-top {
    padding-left: 18px;
    padding-right: 18px;
  }
  .discover-search {
    width: calc(100% - 32px);
    margin-left: 16px;
    margin-right: 16px;
  }
  .discover-tabs,
  .discover-place-bubbles {
    width: 100%;
  }

  /* Legal links are compact like the former right-side link group: two
     columns / three short rows rather than six stacked rows. */
  .sidebar-legal-links {
    display: grid;
    grid-template-columns: max-content max-content;
    justify-content: start;
    column-gap: 10px;
    row-gap: 5px;
    margin: 10px 8px 0 50px;
    width: auto;
    max-width: calc(100% - 58px);
    font-size: 11.5px;
    line-height: 1.25;
  }
  .sidebar-legal-links a {
    width: auto;
    white-space: nowrap;
  }

  /* Comments live in the free space to the right of the centered feed. Their
     vertical position is provided by JS and follows the selected/visible
     image instead of sticking to the top of the page. */
  .comments-rail {
    --comments-top: 0px;
    position: absolute;
    top: var(--comments-top);
    left: calc(var(--sidebar) + (100vw - var(--sidebar) - var(--center)) / 2 + var(--center) + 20px);
    width: min(360px, calc((100vw - var(--sidebar) - var(--center)) / 2 - 36px));
    max-width: 360px;
    min-width: 0;
    padding: 0;
    z-index: 5;
  }
  .comments-sticky {
    position: static;
    top: auto;
    width: 100%;
  }
  .side-comments-panel {
    width: 100%;
  }
  .side-comments-header {
    min-height: 38px;
    padding-top: 0;
  }
  .side-comment-list {
    max-height: min(520px, calc(100dvh - 170px));
  }

  .app-shell:not([data-view="home"]):not([data-view="discover"]) .comments-rail {
    display: none;
  }
}

/* At narrower desktop widths the feed still stays centered; the side comments
   fall back to the existing comment sheet instead of becoming cramped. */
@media (min-width: 881px) and (max-width: 1279px) {
  .comments-rail { display: none !important; }
}

@media (max-width: 880px) {
  .sidebar-legal-links { display: none; }
}
@media (min-width: 1320px) {
  .comments-rail {
    left: calc(var(--sidebar) + (100vw - var(--sidebar) - var(--center)) / 2 + var(--center) + 8px);
    width: min(360px, calc((100vw - var(--sidebar) - var(--center)) / 2 - 16px));
  }
}
@media (min-width: 881px) and (max-width: 1319px) {
  .comments-rail { display: none !important; }
}
/* Keep side comments comfortably readable; below this width the existing
   comment sheet is used instead. */
@media (min-width: 1320px) and (max-width: 1359px) {
  .comments-rail { display: none !important; }
}

/* --- Taymetic Web v10: real Rive splash, balanced media/comments, compact legal, split chats --- */
.launch-title {
  display: block !important;
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: max(28px, calc(env(safe-area-inset-bottom) + 18px));
  text-align: center;
  color: #fff;
  font-size: clamp(28px, 4.1vw, 41px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.035em;
}
.launch-rive { display: block !important; }

.side-comment-form {
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 10px;
  align-items: center;
  padding-top: 12px;
}
.side-comment-form textarea {
  min-height: 46px;
  max-height: 112px;
  resize: none;
  border-radius: 23px;
  padding: 12px 15px;
}
.side-comment-send {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}
.side-comment-send:hover { filter: brightness(.97); }
.side-comment-send:active { transform: scale(.97); }
.side-comment-send svg { width: 21px; height: 21px; }

@media (min-width: 881px) {
  :root {
    --sidebar: 238px;
    --center: 690px;
    --comments-width: 400px;
    --workspace-gap: 22px;
    --desktop-edge-gap: 14px;
  }

  .sidebar {
    left: 0;
    padding: 16px 10px 14px var(--desktop-edge-gap);
  }
  .brand-row { padding-left: 8px; padding-right: 8px; }
  .nav-item { padding-left: 10px; padding-right: 10px; }

  /* The legal block belongs directly above Appearance. Keep it compact and
     aligned to the same left edge as the navigation selection area. */
  .sidebar-bottom { gap: 4px; }
  .sidebar-legal-links {
    order: -1;
    display: grid;
    grid-template-columns: repeat(3, max-content);
    grid-template-rows: repeat(2, auto);
    justify-content: start;
    column-gap: 8px;
    row-gap: 5px;
    width: auto;
    max-width: calc(100% - 20px);
    margin: 0 10px 8px;
    padding: 0;
    font-size: 10.5px;
    line-height: 1.2;
  }
  .sidebar-legal-links a { width: max-content; white-space: nowrap; }

  /* Views without contextual comments are centered in the whole area to the
     right of the fixed navigation. */
  .app-shell:not([data-view="home"]):not([data-view="discover"]):not([data-view="chats"]) .main-column {
    width: min(var(--center), calc(100vw - var(--sidebar) - 40px));
    max-width: var(--center);
    margin-left: calc(var(--sidebar) + max(20px, (100vw - var(--sidebar) - var(--center)) / 2));
  }

  /* Chat gets a true desktop split view instead of replacing the list. */
  .app-shell[data-view="chats"] .main-column {
    width: calc(100vw - var(--sidebar) - 28px);
    max-width: none;
    margin-left: calc(var(--sidebar) + 14px);
    min-height: 100vh;
  }
  .chat-split-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(310px, 380px) minmax(0, 1fr);
    background: var(--bg);
  }
  .chat-list-pane {
    min-width: 0;
    height: 100vh;
    overflow-y: auto;
    border-right: .5px solid var(--divider);
    background: var(--bg);
  }
  .chat-list-search {
    height: 42px;
    margin: 0 16px 10px;
    padding: 0 13px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--surface-2);
  }
  .chat-list-search > span { width: 18px; height: 18px; color: var(--muted); display: grid; place-items: center; }
  .chat-list-search svg { width: 18px; height: 18px; }
  .chat-list-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
  }
  .chat-list-search input::placeholder { color: var(--muted); }
  .chat-split-detail {
    min-width: 0;
    height: 100vh;
    overflow: hidden;
    background: var(--bg);
  }
  .chat-split-placeholder {
    height: 100%;
    min-height: 520px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    padding: 28px;
    text-align: center;
    color: var(--muted);
  }
  .chat-split-placeholder > span:first-child { width: 48px; height: 48px; color: var(--accent); }
  .chat-split-placeholder .app-bubble-icon { width: 48px; height: 48px; }
  .chat-split-placeholder strong { color: var(--ink); font-size: 20px; }
  .chat-detail-page.embedded { height: 100vh; min-height: 0; }
  .chat-detail-page.embedded .chat-back-button { display: none; }
  .chat-detail-page.embedded .chat-detail-header {
    grid-template-columns: minmax(0, 1fr) 40px;
    padding-left: 18px;
  }
  .app-conversation-row.selected { background: color-mix(in srgb, var(--accent) 10%, transparent); }
  .pinned-chat.selected .presence-avatar { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 50%; }
}

/* With side comments visible, treat the image/feed and comment pane as one
   centered desktop workspace. The left edge of the media and the right edge
   of comments therefore have matching visual breathing room. */
@media (min-width: 1440px) {
  .app-shell[data-view="home"] .main-column,
  .app-shell[data-view="discover"] .main-column {
    width: var(--center);
    max-width: var(--center);
    margin-left: calc(
      var(--sidebar) + max(
        24px,
        (100vw - var(--sidebar) - var(--center) - var(--workspace-gap) - var(--comments-width)) / 2
      )
    );
  }

  .comments-rail {
    display: block;
    --comments-top: 0px;
    position: absolute;
    top: var(--comments-top);
    left: calc(
      var(--sidebar) + max(
        24px,
        (100vw - var(--sidebar) - var(--center) - var(--workspace-gap) - var(--comments-width)) / 2
      ) + var(--center) + var(--workspace-gap)
    );
    width: var(--comments-width);
    max-width: var(--comments-width);
    padding: 0;
  }
  .app-shell:not([data-view="home"]):not([data-view="discover"]) .comments-rail { display: none !important; }
  .comments-sticky,
  .side-comments-panel { width: 100%; }

  /* The Discover divider spans the same centered workspace as feed + comments.
     The only strong underline remains the active tab. */
  .app-shell[data-view="discover"] .discover-tabs {
    position: relative;
    border-bottom: 0 !important;
  }
  .app-shell[data-view="discover"] .discover-tabs::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: calc(100% + var(--workspace-gap) + var(--comments-width));
    height: .5px;
    background: color-mix(in srgb, var(--divider) 55%, transparent);
    pointer-events: none;
  }
  .app-shell[data-view="discover"] .discover-tab { z-index: 1; }
}

@media (min-width: 881px) and (max-width: 1439px) {
  .app-shell[data-view="home"] .main-column,
  .app-shell[data-view="discover"] .main-column {
    width: min(var(--center), calc(100vw - var(--sidebar) - 40px));
    max-width: var(--center);
    margin-left: calc(var(--sidebar) + max(20px, (100vw - var(--sidebar) - var(--center)) / 2));
  }
  .comments-rail { display: none !important; }
  .discover-tabs { border-bottom: 0 !important; }
}

/* Text-only Discover cards should sit visually under the centered search,
   rather than looking attached to the left side of the feed column. */
.discover-page .text-post-card {
  width: min(560px, calc(100% - 32px));
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 880px) {
  .launch-title { font-size: clamp(28px, 10.2vw, 41px); }
  .chat-split-shell { display: block; }
  .chat-split-detail { display: none; }
  .chat-list-search {
    height: 42px;
    margin: 0 14px 8px;
    padding: 0 13px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--surface-2);
  }
  .chat-list-search > span { width: 18px; height: 18px; color: var(--muted); display: grid; place-items: center; }
  .chat-list-search svg { width: 18px; height: 18px; }
  .chat-list-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); }
}
@media (min-width: 881px) {
  .sidebar-legal-links { margin: 0 0 8px 2px; max-width: calc(100% - 2px); }
}


/* --- Taymetic Web v11: sidebar profile, even legal spacing, true content centering --- */

/* The active comment target must never tint the post. Its top and bottom
   areas use the exact same app background as the surrounding feed. */
.post-card,
.post-card.comment-selected,
.post-card .post-header,
.post-card .post-copy,
.post-card .post-actions {
  background: var(--bg) !important;
}

/* Profile identity lives where the profile navigation icon used to be. */
.nav-profile-avatar {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
}
.nav-profile-avatar > [data-icon] {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
}
.nav-profile-avatar > [data-icon] svg {
  width: 25px;
  height: 25px;
}
.nav-profile-avatar .nav-profile-avatar-image,
.nav-profile-avatar .avatar {
  width: 25px !important;
  height: 25px !important;
  min-width: 25px;
  min-height: 25px;
  font-size: 11px;
  line-height: 1;
}

@media (min-width: 881px) {
  /* Six legal links, identical horizontal/vertical gaps, no artificial left
     indentation. They stay compact directly above Appearance. */
  .sidebar-legal-links {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    grid-template-rows: repeat(2, auto);
    justify-content: start;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px 0;
    padding: 0;
    max-width: 100%;
    width: max-content;
    font-size: 10.5px;
    line-height: 1.2;
  }
  .sidebar-legal-links a {
    margin: 0;
    padding: 0;
    width: max-content;
    white-space: nowrap;
  }
}

/* At wide desktop sizes media + comments remain one centered workspace, while
   page-level controls and text-only posts are centered in the complete area
   from the navigation boundary to the right viewport edge. */
@media (min-width: 1440px) {
  .app-shell[data-view="home"] .overview-top,
  .app-shell[data-view="discover"] .discover-search {
    position: relative;
    left: calc((var(--workspace-gap) + var(--comments-width)) / 2);
  }

  .app-shell[data-view="home"] .text-post-card,
  .app-shell[data-view="discover"] .text-post-card {
    width: min(560px, calc(100% - 32px));
    margin-left: auto;
    margin-right: auto;
    position: relative;
    left: calc((var(--workspace-gap) + var(--comments-width)) / 2);
  }
}

/* On ordinary desktop widths the main column itself is already centered in
   the available space, so text posts only need a narrower centered measure. */
@media (min-width: 881px) and (max-width: 1439px) {
  .app-shell[data-view="home"] .text-post-card,
  .app-shell[data-view="discover"] .text-post-card {
    width: min(560px, calc(100% - 32px));
    margin-left: auto;
    margin-right: auto;
  }
}

/* --- Taymetic Web v12: legacy text layout, equal legal rhythm, moderation/share/friends --- */

@media (min-width: 881px) {
  .sidebar-legal-links {
    display: grid;
    grid-template-columns: none;
    grid-template-rows: none;
    gap: 6px;
    width: max-content;
    max-width: calc(100% - 12px);
    margin-left: 0;
    margin-right: 0;
  }
  .sidebar-legal-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: max-content;
  }
  .sidebar-legal-row a {
    display: inline-block;
    flex: 0 0 auto;
    margin: 0 !important;
  }

  /* Restore the pre-v11 layout for overview text-only posts. */
  .app-shell[data-view="home"] .text-post-card {
    width: auto;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    position: static;
    left: auto;
  }
}

.post-header-actions {
  min-width: 36px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.post-more-button,
.message-report-button,
.chat-header-action {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.post-more-button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.post-more-button:hover,
.message-report-button:hover,
.chat-header-action:hover { background: var(--surface-2); color: var(--ink); }
.post-more-button svg { width: 19px; height: 19px; }

.transient-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0,0,0,.42);
  backdrop-filter: blur(8px);
}
.transient-dialog-panel {
  width: min(520px, 100%);
  max-height: min(720px, calc(100dvh - 40px));
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid var(--divider);
  background: var(--bg);
  box-shadow: 0 24px 70px rgba(0,0,0,.24);
  display: flex;
  flex-direction: column;
}
.transient-dialog-header {
  min-height: 62px;
  padding: 10px 14px 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--divider);
}
.transient-dialog-header h2 { margin: 0; font-size: 20px; }
.transient-dialog-copy { margin: 0; padding: 15px 20px 4px; color: var(--muted); line-height: 1.45; font-size: 14px; }
.transient-dialog-body { overflow: auto; padding: 14px 18px 18px; }
.report-reason-list { display: grid; gap: 7px; }
.report-reason-button {
  width: 100%;
  min-height: 50px;
  border: 0;
  border-radius: 15px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}
.report-reason-button:hover { filter: brightness(.98); }
.report-reason-button span:last-child { color: var(--muted); font-size: 24px; font-weight: 400; }
.transient-empty { padding: 30px 12px; text-align: center; color: var(--muted); }
.transient-empty.compact { padding: 12px 0; text-align: left; }

.share-contact-search {
  width: 100%;
  height: 44px;
  border: 0;
  outline: 0;
  border-radius: 999px;
  padding: 0 15px;
  margin-bottom: 10px;
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
}
.share-contact-list { display: grid; gap: 4px; }
.share-contact-row {
  width: 100%;
  min-height: 60px;
  border: 0;
  border-radius: 16px;
  padding: 7px 10px;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto;
  align-items: center;
  gap: 11px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.share-contact-row:hover { background: var(--surface-2); }
.share-contact-row .avatar { width: 42px; height: 42px; }
.share-contact-row > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.share-contact-row strong,
.share-contact-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-contact-row small { color: var(--muted); font-size: 12px; }
.share-row-arrow { color: var(--muted); font-size: 24px; }

.message-report-button {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  align-self: center;
  margin-left: 4px;
  border-radius: 50%;
  opacity: .5;
}
.message-report-button svg { width: 17px; height: 17px; }
.chat-message-row:hover .message-report-button,
.message-report-button:focus-visible { opacity: 1; }
.legacy-media-note { color: var(--muted); font-style: italic; }
.shared-post-message { display: grid; gap: 6px; min-width: min(290px, 65vw); }
.shared-post-message > span { font-size: 12px; opacity: .72; }
.shared-post-message > strong { line-height: 1.3; }
.shared-post-message img { width: 100%; max-height: 220px; object-fit: cover; border-radius: 12px; margin-top: 3px; }

.chats-topbar { justify-content: space-between; }
.chats-header-actions { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.chat-header-action {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--ink);
  background: var(--surface-2);
}
.chat-header-action.prominent { background: var(--accent); color: #fff; }
.chat-header-action svg { width: 19px; height: 19px; }
.chat-header-badge {
  position: absolute;
  top: -3px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  border: 2px solid var(--bg);
}
.friend-add-form { display: grid; gap: 14px; }
.friend-username-field {
  min-height: 52px;
  border: 1px solid var(--divider);
  border-radius: 16px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  color: var(--muted);
}
.friend-username-field input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; }
.friend-request-section + .friend-request-section { margin-top: 20px; }
.friend-request-section h3 { margin: 0 0 7px; font-size: 14px; color: var(--muted); }
.friend-request-row {
  min-height: 62px;
  display: grid;
  grid-template-columns: 46px minmax(0,1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 7px 0;
}
.friend-request-row .avatar { width: 46px; height: 46px; }
.friend-request-row > div:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.friend-request-row > div:nth-child(2) span { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-request-actions { display: flex; gap: 7px; align-items: center; }
.friend-request-circle {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
}
.friend-request-circle.secondary { background: var(--surface-2); color: var(--ink); }
.friend-request-text-button { border: 0; background: transparent; color: var(--accent); font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; }

@media (max-width: 880px) {
  .message-report-button { opacity: 1; }
  .transient-dialog-backdrop { align-items: end; padding: 0; }
  .transient-dialog-panel { width: 100%; max-height: 82dvh; border-radius: 24px 24px 0 0; border-bottom: 0; }
}

@media (min-width: 881px) {
  /* Revert Discover text-only cards to the V10 position as well: centered
     inside the feed column, without the later workspace offset. */
  .app-shell[data-view="discover"] .text-post-card {
    width: min(560px, calc(100% - 32px));
    margin-left: auto;
    margin-right: auto;
    position: static;
    left: auto;
  }
}

/* --- Taymetic Web v13: discover/search naming, accent notification dots,
   reliable media reporting and help-center legal pages --- */

.nav-icon-shell {
  position: relative;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
}
.nav-icon-shell > [data-icon] {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
}
.nav-notification-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--accent);
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
  pointer-events: none;
}
.nav-item:hover .nav-notification-dot,
.nav-item.active .nav-notification-dot {
  border-color: color-mix(in srgb, var(--surface-2) 80%, var(--bg));
}

.post-header-actions {
  align-self: center;
}
.media-post-card .post-more-button {
  opacity: .82;
}
.media-post-card .post-more-button:hover,
.media-post-card .post-more-button:focus-visible {
  opacity: 1;
}
.post-more-button.is-reported {
  color: var(--accent);
  opacity: 1;
}

.activity-row.unread {
  position: relative;
  padding-right: 38px;
}
.activity-new-dot {
  position: absolute;
  right: 15px;
  bottom: 15px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}

/* Legal/help center: intentionally spacious and documentation-like, inspired
   by the user's reference without copying third-party branding. */
.legal-help-body {
  min-height: 100vh;
  background: var(--surface);
}
.legal-help-header {
  min-height: 104px;
  padding: 24px clamp(24px, 4vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  background: var(--surface);
}
.legal-help-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.legal-help-brand img {
  width: 38px;
  height: 38px;
  border-radius: 11px;
}
.legal-help-brand > span {
  font-size: 20px;
  font-weight: 850;
}
.legal-help-brand > strong {
  padding-left: 12px;
  border-left: 1px solid var(--divider);
  font-size: 18px;
  font-weight: 780;
  overflow: hidden;
  text-overflow: ellipsis;
}
.legal-help-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(16px, 2.2vw, 34px);
}
.legal-help-nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 15px;
  font-weight: 650;
  white-space: nowrap;
}
.legal-help-nav a:hover { color: var(--ink); }
.legal-help-nav .legal-help-contact {
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--divider);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  color: var(--ink);
}

.legal-help-shell {
  width: min(1380px, calc(100% - 48px));
  margin: 0 auto;
  padding: 34px 0 72px;
}
.legal-help-hero {
  width: min(900px, 100%);
  padding: 12px 0 62px;
}
.legal-help-back {
  display: none;
  color: var(--accent);
  text-decoration: none;
  font-weight: 720;
}
.legal-help-hero h1 {
  margin: 0;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -.04em;
}
.legal-help-accent {
  display: block;
  width: 86px;
  height: 7px;
  margin: 28px 0 25px;
  border-radius: 999px;
  background: var(--accent);
}
.legal-help-hero p {
  max-width: 850px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.55;
}
.legal-help-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(48px, 8vw, 120px);
  padding: 8px 0 72px;
}
.legal-help-overview h2 {
  margin: 0 0 22px;
  font-size: clamp(25px, 2.2vw, 34px);
  line-height: 1.08;
  letter-spacing: -.025em;
}
.legal-help-overview p {
  max-width: 610px;
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
}
.legal-help-quicklinks,
.legal-help-topics .legal-toc {
  display: grid;
  justify-items: start;
  gap: 8px;
}
.legal-help-quicklinks a,
.legal-help-topics .legal-toc a {
  color: var(--accent);
  text-decoration: none;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 600;
}
.legal-help-quicklinks a:hover,
.legal-help-topics .legal-toc a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-help-document {
  border-top: 1px solid var(--divider);
  padding-top: 42px;
}
.legal-help-document .legal-updated {
  display: block;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}
.legal-help-document .legal-content {
  width: min(980px, 100%);
}
.legal-help-document .legal-content section {
  scroll-margin-top: 24px;
  padding: 20px 0 28px;
}
.legal-help-document .legal-content section + section {
  border-top: 1px solid color-mix(in srgb, var(--divider) 72%, transparent);
}
.legal-help-document .legal-content h2 {
  margin: 0 0 13px;
  font-size: 25px;
  line-height: 1.2;
}
.legal-help-document .legal-content h3 {
  margin: 22px 0 7px;
  font-size: 17px;
}
.legal-help-document .legal-content p,
.legal-help-document .legal-content li,
.legal-help-document .legal-content address {
  color: var(--muted);
  line-height: 1.65;
}
.legal-help-document .legal-content a { color: var(--accent); }
.legal-help-footer {
  margin-top: 50px;
  padding-top: 26px;
  border-top: 1px solid var(--divider);
}
.legal-help-footer .legal-footer-links {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
}

@media (max-width: 900px) {
  .legal-help-header { min-height: auto; padding: 18px 20px; }
  .legal-help-brand > strong { display: none; }
  .legal-help-nav { display: none; }
  .legal-help-shell { width: min(100% - 36px, 760px); padding-top: 16px; }
  .legal-help-back { display: inline-flex; margin-bottom: 24px; }
  .legal-help-hero { padding-bottom: 44px; }
  .legal-help-overview { grid-template-columns: 1fr; gap: 42px; padding-bottom: 52px; }
}

@media (max-width: 560px) {
  .legal-help-brand img { width: 34px; height: 34px; }
  .legal-help-brand > span { font-size: 18px; }
  .legal-help-shell { width: calc(100% - 28px); }
  .legal-help-hero h1 { font-size: 38px; }
  .legal-help-accent { width: 68px; height: 6px; margin: 22px 0; }
  .legal-help-document .legal-content h2 { font-size: 22px; }
  .legal-help-document .data-table { min-width: 720px; }
}

/* --- Taymetic Web v14: mobile legal stability, reporting, composer and threaded comments --- */

/* Keep the viewport width stable while the splash disappears / the vertical
   scrollbar appears. This prevents the desktop UI from visibly sliding. */
html {
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-gutter: stable;
  background: var(--bg);
}
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
.launch-splash { width: 100%; max-width: 100vw; }

/* Image-post report controls stay clickable and visibly aligned with the
   timestamp even when the media below is a large click target. */
.post-header { position: relative; }
.post-header-actions { position: relative; z-index: 6; }
.media-post-card .post-more-button {
  opacity: 1;
  pointer-events: auto;
  touch-action: manipulation;
}

/* Reporting from another user's profile. */
.mobile-profile-page { position: relative; }
.profile-report-button {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 4;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.profile-report-button:hover,
.profile-report-button:focus-visible { background: var(--surface-2); color: var(--ink); }
.profile-report-button svg { width: 20px; height: 20px; }
.profile-media-tile {
  position: relative;
  min-width: 0;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--surface-2);
}
.profile-media-tile > img { height: 100%; }
.profile-media-report {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 3;
  width: 34px;
  height: 34px;
  color: #fff;
  background: rgba(0,0,0,.34);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.profile-media-report:hover,
.profile-media-report:focus-visible { background: rgba(0,0,0,.55); color: #fff; }

/* Comment replies mirror the app: "Antworten" is an actual control, reply
   context is visible above the composer, and replies are indented one level. */
.comment-reply-label {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 3px 0 0;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.comment-reply-label:hover { color: var(--ink); }
.comment-replies-toggle {
  margin: 2px 0 6px 0;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.comment-replies-toggle::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 1px;
  margin: 0 7px 3px 0;
  background: color-mix(in srgb, var(--muted) 38%, transparent);
}
.comment-replies-list { display: grid; gap: 2px; }
.comment-reply-row { margin-left: 30px; grid-template-columns: 29px minmax(0,1fr); }
.comment-reply-row .avatar.small { width: 29px; height: 29px; }
.comment-replies-loading { margin: 4px 0 8px 30px; color: var(--muted); font-size: 12px; }
.comment-reply-context {
  grid-column: 1 / -1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 4px 7px;
  color: var(--muted);
  font-size: 12px;
}
.comment-reply-context[hidden] { display: none !important; }
.comment-reply-context span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comment-reply-context button {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
}
.comment-input-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
}
.side-comment-form,
.comment-form { grid-template-columns: 1fr; }
.side-comment-form textarea,
.comment-form textarea { resize: none !important; width: 100%; }
.comment-form .side-comment-send { align-self: end; }

/* Public legal/help pages must never pan sideways on phones. Tables collapse
   into the available width instead of forcing the entire page wider. */
.legal-help-body,
.legal-help-header,
.legal-help-shell,
.legal-help-hero,
.legal-help-overview,
.legal-help-document,
.legal-help-document .legal-content,
.legal-help-footer {
  max-width: 100%;
  min-width: 0;
}
.legal-help-body { overflow-x: hidden; }
.legal-help-document .data-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
.legal-help-document .data-table {
  width: 100%;
  max-width: 100%;
  min-width: 0 !important;
  table-layout: fixed;
  border-collapse: collapse;
}
.legal-help-document .data-table th,
.legal-help-document .data-table td {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.legal-help-document img,
.legal-help-document video,
.legal-help-document iframe { max-width: 100%; height: auto; }

@media (max-width: 560px) {
  html { overflow-y: auto; scrollbar-gutter: auto; }
  .legal-help-header { width: 100%; padding-inline: 14px; }
  .legal-help-shell { width: 100%; padding: 14px 14px 52px; }
  .legal-help-hero { padding-inline: 0; }
  .legal-help-overview { width: 100%; gap: 34px; }
  .legal-help-quicklinks a,
  .legal-help-topics .legal-toc a { max-width: 100%; overflow-wrap: anywhere; }
  .legal-help-document { width: 100%; }
  .legal-help-document .legal-content { width: 100%; }
  .legal-help-document .data-table { font-size: 12px; }
  .legal-help-document .data-table th,
  .legal-help-document .data-table td { padding: 8px 6px; }
  .whats-new-card { width: calc(100% - 28px); }
}
.legal-help-body {
  overscroll-behavior-x: none;
  touch-action: pan-y pinch-zoom;
}
.legal-help-document .legal-content,
.legal-help-document .legal-content a,
.legal-help-document .legal-content code,
.legal-help-document .legal-content address {
  overflow-wrap: anywhere;
  word-break: break-word;
}
@media (max-width: 560px) {
  .legal-help-hero h1 { overflow-wrap: anywhere; word-break: break-word; }
}


/* --- Taymetic Web v15: compact media/comments + activity alignment --- */

/* The left rail keeps only the app icon at the top; no duplicate wordmark. */
.brand-row { gap: 0; }

/* Desktop image posts should fit comfortably into one viewport. Tall photos
   are contained rather than cropped, so the comment composer is reachable
   without scrolling through an oversized image. */
@media (min-width: 881px) {
  .media-post-card .post-media {
    min-height: 0;
    max-height: calc(100dvh - 190px);
    height: auto;
    object-fit: contain;
    background: var(--surface-2);
  }
}

/* On wide desktops the comment panel uses the exact visible image height.
   Its composer therefore ends on the same horizontal line as the image. */
@media (min-width: 1440px) {
  .comments-rail {
    height: var(--comments-height, auto);
    max-height: var(--comments-height, none);
  }
  .comments-sticky,
  .side-comments-panel {
    height: 100%;
    min-height: 0;
  }
  .side-comments-panel {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  .side-comment-list {
    min-height: 0;
    max-height: none;
    overflow-y: auto;
  }
  .side-comment-form { align-self: end; }
}

/* Activity uses the same understated underline language as Search, but the
   label itself stays left-aligned. Notification cards remain centered. */
.activity-page {
  width: 100%;
  min-height: 100%;
}
.activity-tabs {
  min-height: 52px;
  display: flex;
  align-items: end;
  justify-content: flex-start;
  padding: 0 16px;
}
.activity-tab {
  position: relative;
  min-height: 48px;
  display: inline-flex;
  align-items: flex-end;
  padding: 0 0 12px;
  color: var(--muted);
  font-weight: 650;
}
.activity-tab.active {
  color: var(--ink);
  font-weight: 800;
}
.activity-tab.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  border-radius: 999px;
  background: var(--ink);
}
.activity-stream {
  width: min(560px, calc(100% - 32px));
  margin: 18px auto 0;
}
.activity-list-section { padding: 0; }
.activity-stream .feed-state { padding-left: 0; padding-right: 0; }

@media (max-width: 620px) {
  .activity-tabs { padding-inline: 14px; }
  .activity-stream { width: calc(100% - 28px); margin-top: 14px; }
}

/* --- Taymetic Web v16: viewport-fit media + app-style settings --- */

/* A media post must show the complete picture on desktop. JS computes the
   exact rendered box from the image aspect ratio and the available viewport;
   these rules are the no-JS/fallback guardrails. */
@media (min-width: 881px) {
  .media-post-card .post-media {
    display: block;
    width: auto;
    max-width: 100%;
    min-height: 0;
    max-height: calc(100dvh - 150px);
    height: auto;
    margin-left: auto;
    margin-right: auto;
    object-fit: contain;
    background: var(--bg);
  }
}

/* The comment rail receives the image's measured height inline. Keep the
   composer pinned to the final grid row so its bottom is exactly the image
   bottom, while only the comments list itself scrolls. */
@media (min-width: 1440px) {
  .comments-rail,
  .comments-sticky,
  .side-comments-panel {
    min-height: 0;
  }
  .side-comments-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
  }
  .side-comment-list {
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .side-comment-form {
    align-self: end;
    margin: 0;
    padding-bottom: 0;
  }
}

/* Sidebar setting follows the app's naming. "Modern" is deliberately a
   subtle visual variant; it does not move the fixed navigation geometry. */
html[data-menu-style="modern"] .sidebar .nav-item {
  border-radius: 999px;
}
html[data-menu-style="classic"] .sidebar .nav-item {
  border-radius: 14px;
}

.settings-page {
  width: min(680px, calc(100% - 28px));
  margin: 0 auto;
  padding: 24px 0 64px;
}
.settings-title {
  margin: 0 0 18px;
  font-size: clamp(28px, 3vw, 36px);
  letter-spacing: -.035em;
}
.settings-identity {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  margin-bottom: 26px;
  border-radius: 18px;
  background: var(--surface);
}
.settings-identity .avatar {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
}
.settings-identity > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.settings-identity strong {
  font-size: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-identity span {
  color: var(--muted);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-section {
  margin: 0 0 24px;
}
.settings-section > h2 {
  margin: 0 0 8px 14px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .01em;
}
.settings-group {
  overflow: hidden;
  border-radius: 18px;
  background: var(--surface);
}
.settings-row {
  appearance: none;
  width: 100%;
  min-height: 62px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 10px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  font: inherit;
}
.settings-row + .settings-row {
  border-top: .5px solid var(--divider);
}
.settings-row.interactive {
  cursor: pointer;
}
.settings-row.interactive:hover {
  background: var(--surface-2);
}
.settings-row-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.settings-row-icon svg {
  width: 18px;
  height: 18px;
}
.settings-row-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.settings-row-copy strong {
  font-size: 15px;
  font-weight: 700;
}
.settings-row-detail {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.3;
}
.settings-row-chevron {
  width: 20px;
  height: 20px;
  color: var(--muted);
}
.settings-row-chevron svg {
  width: 18px;
  height: 18px;
}
.settings-row-trailing {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.settings-inline-select {
  max-width: 122px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.settings-switch {
  position: relative;
  width: 44px;
  height: 26px;
  display: inline-flex;
}
.settings-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.settings-switch span {
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: var(--surface-2);
  transition: background .18s ease;
}
.settings-switch span::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
  transition: transform .18s ease;
}
.settings-switch input:checked + span {
  background: var(--accent);
}
.settings-switch input:checked + span::after {
  transform: translateX(18px);
}
.settings-row.danger .settings-row-icon,
.settings-row.danger .settings-row-copy strong {
  color: var(--danger);
}
.settings-row.danger .settings-row-icon {
  background: color-mix(in srgb, var(--danger) 11%, transparent);
}
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 880px) {
  .settings-page {
    width: 100%;
    padding: 18px 14px 84px;
  }
  .settings-title { margin-left: 4px; }
  .settings-identity,
  .settings-group { border-radius: 16px; }
}

.nav-item.subtle.active { color: var(--ink); }


/* --- Taymetic Web v17: supplied penguin icon + left-aligned media workspace --- */

/* The uploaded Taymetic penguin is the actual product mark. Keep its alpha
   edges intact in the fixed navigation instead of placing it in a fake tile. */
.brand-icon,
.auth-logo,
.legal-help-brand img {
  object-fit: contain;
  background: transparent;
}
.brand-icon { border-radius: 0; }

/* Media begins exactly below the author's name column. JS refines the width
   from the real image ratio so the complete picture stays in the viewport. */
@media (min-width: 881px) {
  .media-post-card .post-media {
    width: auto;
    max-width: calc(100% - 55px);
    margin-left: 55px;
    margin-right: 0;
    object-fit: contain;
  }
}

/* On wide desktop, the comments rail is positioned by JS from the image's
   actual right edge. This keeps comments directly beside landscape as well
   as portrait posts while retaining the exact image-height composer sync. */
@media (min-width: 1440px) {
  .comments-rail {
    transition: none;
  }
}

/* --- Taymetic Web v18: transparent brand icon and stacked media post layout --- */
.brand-row .brand-icon {
  background: transparent !important;
  border-radius: 0 !important;
  object-fit: contain;
  display: block;
  box-shadow: none !important;
}

/* Desktop media posts: header and action row track the exact media width so the
   author block sits above the image and share/like do not extend beyond it. */
@media (min-width: 881px) {
  .media-post-card .post-header,
  .media-post-card .post-copy,
  .media-post-card .post-actions {
    box-sizing: border-box;
  }
  .media-post-card .post-copy {
    padding-top: 10px;
  }
  .media-post-card .post-actions.media-actions {
    justify-content: space-between;
  }
}

/* --- Taymetic Web v19: exact media-edge alignment and stable launch --- */
@media (min-width: 881px) {
  /* Center the transparent brand mark on the exact same x-axis as nav icons. */
  .brand-row {
    padding-left: 5px !important;
    padding-right: 0 !important;
    justify-content: flex-start !important;
  }
  .brand-row .brand-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    object-position: center;
    background: transparent !important;
    border-radius: 0 !important;
  }

  /* Every visible element belonging to a media post follows the rendered
     image edges. The avatar begins exactly where the image begins; the share
     and like controls finish exactly where the image finishes. */
  .media-post-card .post-header {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .media-post-card .post-copy {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .media-post-card .post-actions.media-actions {
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: space-between;
  }
  .media-post-card .media-actions .like-summary {
    margin-left: 0;
    padding-left: 0;
  }
  .media-post-card .media-action-group {
    margin-left: auto;
    margin-right: 0;
  }

  /* Feed starts immediately with content; the navigation already names the
     current section, so a second 'Entdecken' heading is unnecessary. */
  .overview-page-no-title { padding-top: 0; }
}

/* Comment hearts intentionally have no public like counter. */
.app-comment-like > span { display: none !important; }

/* --- Taymetic Web v20: shared post edge, content menus and moderation --- */
@media (min-width: 881px) {
  /* Text posts use the very same left content edge as image posts. */
  .app-shell[data-view="home"] .text-post-card,
  .app-shell[data-view="discover"] .text-post-card {
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: static !important;
    left: auto !important;
  }
  .text-post-card .post-header,
  .text-post-card .post-copy,
  .text-post-card .post-actions {
    box-sizing: border-box;
    width: calc(100% - 55px);
    margin-left: 55px;
    margin-right: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

.text-summary-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.text-summary-actions .like-summary {
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  min-width: 0;
  flex: 1;
}
.text-summary-actions .media-action-group {
  margin-left: auto;
}

.post-more-button {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.comment-content .author-line {
  width: 100%;
  min-width: 0;
  flex-wrap: nowrap;
  align-items: center;
}
.comment-content .author-line .timestamp {
  white-space: nowrap;
}
.comment-more-button {
  margin-left: auto;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
}
.comment-more-button:hover,
.comment-more-button:focus-visible {
  background: var(--surface-2);
  color: var(--ink);
}
.comment-more-button.is-reported { color: var(--accent); }
.comment-more-button svg { width: 18px; height: 18px; }

.confirm-action-row,
.moderation-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.secondary-button,
.danger-button,
.moderation-button {
  min-height: 40px;
  border-radius: 999px;
  padding: 0 16px;
  border: 1px solid var(--divider);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
.danger-button,
.moderation-button.danger {
  border-color: color-mix(in srgb, var(--danger) 30%, var(--divider));
  color: var(--danger);
}
.secondary-button:disabled,
.danger-button:disabled,
.moderation-button:disabled { opacity: .55; cursor: default; }

.activity-body { white-space: pre-line; }
.activity-row.activity-moderation-result {
  position: relative;
  padding-left: 58px;
  border-color: color-mix(in srgb, var(--accent) 20%, var(--divider));
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--surface));
}
.activity-row.activity-moderation-result::before {
  content: '✓';
  position: absolute;
  left: 16px;
  top: 16px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 13%, var(--surface));
  color: var(--accent);
  font-size: 15px;
  font-weight: 900;
}
.activity-row.activity-moderation-result > strong { display: block; margin-bottom: 5px; }
.activity-row.activity-moderation-result .activity-body { margin: 0 0 7px; line-height: 1.5; }

.moderation-overview {
  display: grid;
  gap: 12px;
}
.moderation-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 22px;
  min-height: 164px;
  padding: 22px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--divider));
  border-radius: 24px;
  background:
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--accent) 16%, transparent) 0 18%, transparent 19%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, var(--surface)), var(--surface));
}
.moderation-hero::after {
  content: '';
  position: absolute;
  width: 180px;
  height: 180px;
  right: -76px;
  bottom: -118px;
  border-radius: 999px;
  border: 26px solid color-mix(in srgb, var(--accent) 8%, transparent);
  pointer-events: none;
}
.moderation-hero-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 7px;
  max-width: 520px;
}
.moderation-hero-eyebrow {
  width: max-content;
  padding: 5px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.moderation-hero-copy > strong {
  font-size: clamp(20px, 3vw, 28px);
  line-height: 1.08;
  letter-spacing: -.025em;
}
.moderation-hero-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}
.moderation-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
.moderation-stat-card {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 15px;
  border: 1px solid var(--divider);
  border-radius: 18px;
  background: var(--surface);
}
.moderation-stat-card > strong {
  min-width: 38px;
  font-size: 25px;
  line-height: 1;
  letter-spacing: -.03em;
}
.moderation-stat-card > div { display: grid; gap: 2px; min-width: 0; }
.moderation-stat-card span { font-size: 13px; font-weight: 780; }
.moderation-stat-card small { color: var(--muted); font-size: 11.5px; line-height: 1.25; }

.moderation-page { display: grid; gap: 18px; }
.moderation-page-top {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  gap: 10px;
  align-items: start;
}
.moderation-back {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.moderation-back:hover { background: var(--surface-2); }
.moderation-back svg { width: 22px; height: 22px; }
.moderation-subtitle {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.moderation-tabs {
  display: flex;
  gap: 18px;
  border-bottom: 1px solid var(--divider);
}
.moderation-tabs button {
  position: relative;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 10px 2px 12px;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
.moderation-tabs button.active { color: var(--ink); }
.moderation-tabs button.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 999px;
  background: var(--accent);
}
.moderation-list { display: grid; gap: 12px; }
.moderation-card {
  display: grid;
  gap: 11px;
  padding: 18px;
  border-radius: 20px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 28%, var(--surface)), var(--surface));
  border: 1px solid var(--divider);
  box-shadow: 0 8px 26px color-mix(in srgb, var(--ink) 4%, transparent);
}
.moderation-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.moderation-status {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--divider));
  font-size: 11px;
  font-weight: 850;
}
.moderation-meta { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.moderation-card .moderation-actions {
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--divider) 72%, transparent);
}
.moderation-excerpt { margin: 0; line-height: 1.45; }
.moderation-post-image {
  width: min(100%, 520px);
  max-height: 260px;
  object-fit: cover;
  border-radius: 14px;
  background: var(--surface-2);
}

@media (max-width: 620px) {
  .moderation-page-top { grid-template-columns: 36px minmax(0,1fr); }
  .moderation-hero { grid-template-columns: minmax(0,1fr) 86px; gap: 12px; padding: 18px; min-height: 150px; }
  .moderation-stats { grid-template-columns: 1fr; }
  .moderation-stat-card { min-height: 64px; }
  .moderation-back { width: 34px; height: 34px; }
  .comment-content .author-line { flex-wrap: wrap; }
  .comment-more-button { margin-left: auto; }
}

/* --- Taymetic Web v21: user-provided search icon --- */
.taymetic-search-icon {
  overflow: visible;
  fill: none !important;
}
.taymetic-search-icon .taymetic-search-stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.24px;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke-width .14s ease;
  vector-effect: non-scaling-stroke;
}
.nav-item[data-view="discover"]:active .taymetic-search-icon .taymetic-search-stroke,
.nav-item[data-view="discover"].active .taymetic-search-icon .taymetic-search-stroke {
  stroke-width: 2.85px;
}


/* --- Taymetic Web v22: dedicated Taymetic Plus seal --- */
.account-seal[data-kind="plus"] {
  width: 16px;
  height: 16px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.account-seal.compact[data-kind="plus"] {
  width: 15px;
  height: 15px;
}
.taymetic-plus-seal {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --- Taymetic Web v23: dedicated business/company seal --- */
.account-seal[data-kind="company"] {
  width: 16px;
  height: 16px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.account-seal.compact[data-kind="company"] {
  width: 15px;
  height: 15px;
}
.taymetic-business-seal {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/* --- Taymetic Web v24: dedicated tourism seal --- */
.account-seal[data-kind="tourism"] {
  width: 16px;
  height: 16px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.account-seal.compact[data-kind="tourism"] {
  width: 15px;
  height: 15px;
}
.taymetic-tourism-seal {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/* --- Taymetic Web v25: dedicated creator seal --- */
.account-seal[data-kind="creator"] {
  width: 16px;
  height: 16px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.account-seal.compact[data-kind="creator"] {
  width: 15px;
  height: 15px;
}
.taymetic-creator-seal {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --- Taymetic Web v27: compact anchored actions + iPhone-style mobile tabs --- */
.mobile-profile-tab-icon { display: none; }

.anchored-action-layer {
  position: fixed;
  inset: 0;
  z-index: 4100;
  background: transparent;
}
.anchored-action-popover {
  position: fixed;
  width: min(218px, calc(100vw - 16px));
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--divider) 86%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: 0 12px 38px rgba(0,0,0,.18);
  backdrop-filter: blur(18px) saturate(150%);
}
.anchored-action-title {
  padding: 5px 7px 8px;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 760;
  color: var(--ink);
}
.anchored-action-buttons {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}
.anchored-action-cancel,
.anchored-action-delete {
  min-height: 34px;
  border: 0;
  border-radius: 9px;
  padding: 0 11px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 720;
}
.anchored-action-cancel {
  background: var(--surface-2);
  color: var(--ink);
}
.anchored-action-delete {
  background: color-mix(in srgb, var(--danger) 13%, var(--surface));
  color: var(--danger);
}
.anchored-action-cancel:hover,
.anchored-action-cancel:focus-visible { filter: brightness(.98); }
.anchored-action-delete:hover,
.anchored-action-delete:focus-visible { background: color-mix(in srgb, var(--danger) 19%, var(--surface)); }
.anchored-action-cancel:disabled,
.anchored-action-delete:disabled { opacity: .55; cursor: default; }

@media (max-width: 620px) {
  .app-shell {
    padding-bottom: calc(58px + env(safe-area-inset-bottom));
  }
  .sidebar {
    height: calc(58px + env(safe-area-inset-bottom));
    padding: 2px 8px env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    backdrop-filter: blur(24px) saturate(165%);
  }
  .side-nav {
    height: 56px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
  }
  .side-nav > .nav-item[data-view="activity"] { order: 1; }
  .side-nav > .nav-item[data-view="discover"] { order: 2; }
  .side-nav > .nav-item[data-view="home"] { order: 3; }
  .side-nav > .nav-item[data-view="chats"] { order: 4; }
  .side-nav > .nav-item[data-view="profile"] { order: 5; }

  .sidebar .nav-item {
    min-height: 52px;
    height: 52px;
    padding: 0;
    border-radius: 0 !important;
    background: transparent !important;
    font-weight: 650;
    transform: none !important;
    -webkit-tap-highlight-color: transparent;
  }
  .sidebar .nav-item:hover,
  .sidebar .nav-item:active,
  .sidebar .nav-item.active {
    background: transparent !important;
  }
  .sidebar .nav-item.active [data-icon] svg {
    fill: none !important;
  }
  .sidebar .nav-item.active [data-icon] svg path,
  .sidebar .nav-item.active [data-icon] svg circle,
  .sidebar .nav-item.active [data-icon] svg line,
  .sidebar .nav-item.active [data-icon] svg rect,
  .sidebar .nav-item.active [data-icon] svg polyline {
    stroke-width: 2.7px !important;
  }
  .sidebar .nav-item[data-view="discover"].active .taymetic-search-icon .taymetic-search-stroke {
    stroke-width: 2.8px !important;
  }
  .sidebar .nav-item[data-view="chats"].active .app-bubble-icon {
    -webkit-mask-image: url('bubble-bold.svg');
    mask-image: url('bubble-bold.svg');
  }
  .nav-profile-avatar .nav-profile-avatar-image,
  .nav-profile-avatar .avatar {
    display: none !important;
  }
  .nav-profile-avatar .mobile-profile-tab-icon {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
  }
  .nav-profile-avatar .mobile-profile-tab-icon svg {
    width: 25px;
    height: 25px;
  }
  .main-column {
    min-height: calc(100dvh - 58px - env(safe-area-inset-bottom));
  }
  .nav-notification-dot {
    right: -2px;
    bottom: -2px;
    border-color: var(--bg) !important;
  }

  .anchored-action-popover {
    width: min(210px, calc(100vw - 16px));
    border-radius: 13px;
  }
}

/* --- Taymetic Web v29: exact supplied settings gear; same icon fills on active --- */
.app-settings-nav-svg {
  width: 25px;
  height: 25px;
  display: block;
  overflow: visible;
  flex: 0 0 auto;
}
.app-settings-nav-svg .settings-gear-shape,
.app-settings-nav-svg .settings-gear-center {
  fill: none;
  stroke: currentColor;
  stroke-width: 1px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: fill .14s ease, stroke .14s ease;
}
.nav-item[data-view="settings"].active .app-settings-nav-svg .settings-gear-shape,
.nav-item[data-view="settings"].active .app-settings-nav-svg .settings-gear-center {
  fill: currentColor;
  stroke: currentColor;
}
/* Mobile rules make ordinary active icons outline-only. Settings deliberately
   keeps the requested chat-style solid state whenever this nav item is shown. */
.sidebar .nav-item[data-view="settings"].active [data-icon] .app-settings-nav-svg .settings-gear-shape,
.sidebar .nav-item[data-view="settings"].active [data-icon] .app-settings-nav-svg .settings-gear-center {
  fill: currentColor !important;
}


/* --- Taymetic Web v30: exact supplied logout icon; outline -> solid while pressed --- */
.app-logout-svg {
  width: 25px;
  height: 25px;
  display: block;
  overflow: visible;
  flex: 0 0 auto;
}
.app-logout-svg path,
.app-logout-svg line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: fill .14s ease, stroke .14s ease, stroke-width .14s ease;
}
/* Logout is an action rather than a persistent view. Its pressed/loading state
   mirrors the solid chat/settings treatment without inventing a second icon. */
#logoutButton:active,
#logoutButton.is-logging-out {
  color: var(--ink);
}
#logoutButton:active .app-logout-svg .logout-solid-shape,
#logoutButton.is-logging-out .app-logout-svg .logout-solid-shape,
.settings-row[data-action="logout"]:active .app-logout-svg .logout-solid-shape,
.settings-row[data-action="logout"].is-logging-out .app-logout-svg .logout-solid-shape {
  fill: currentColor;
  stroke: currentColor;
}
#logoutButton:active .app-logout-svg line,
#logoutButton.is-logging-out .app-logout-svg line,
.settings-row[data-action="logout"]:active .app-logout-svg line,
.settings-row[data-action="logout"].is-logging-out .app-logout-svg line {
  stroke-width: 1.2px;
}
/* Keep the logout glyph itself black/ink while pressed, even inside the red
   destructive settings row; the label can remain red as a danger cue. */
.settings-row[data-action="logout"]:active .settings-row-icon,
.settings-row[data-action="logout"].is-logging-out .settings-row-icon {
  color: var(--ink);
}


/* --- Taymetic Web v31 legacy auth rules (superseded by v32 above) --- */
@media (max-width: 0px) and (min-width: 1px) {
.auth-shell {
  min-height: 100vh;
  padding: 32px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 12% 14%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 30%),
    radial-gradient(circle at 78% 16%, color-mix(in srgb, #49c5ef 14%, transparent), transparent 26%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 82%, var(--bg)) 0%, var(--bg) 100%);
}

.auth-layout {
  width: min(1160px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 470px);
  gap: clamp(28px, 5vw, 68px);
  align-items: center;
}
.auth-showcase {
  position: relative;
  display: grid;
  gap: 28px;
  padding: clamp(18px, 3vw, 34px) 4px clamp(18px, 2vw, 26px) 4px;
}
.auth-showcase::before,
.auth-showcase::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  filter: blur(22px);
  opacity: .6;
  pointer-events: none;
}
.auth-showcase::before {
  width: 180px;
  height: 180px;
  right: 3%;
  top: 2%;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}
.auth-showcase::after {
  width: 110px;
  height: 110px;
  left: 8%;
  bottom: 4%;
  background: color-mix(in srgb, #49c5ef 26%, transparent);
}
.auth-brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.auth-logo {
  width: 74px;
  height: 74px;
  border-radius: 22px;
  box-shadow: 0 18px 36px rgba(57,150,253,.18);
}
.auth-brand-subline {
  display: block;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
}
.auth-copy {
  display: grid;
  gap: 16px;
  max-width: 620px;
}
.auth-copy h1 {
  margin: 0;
  font-size: clamp(42px, 5.7vw, 72px);
  line-height: .98;
  letter-spacing: -.04em;
}
.accent-gradient {
  background: linear-gradient(135deg, #ff4fa2 0%, #ff8a52 55%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.auth-lead {
  margin: 0;
  max-width: 560px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.55;
}
.auth-feature-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 760px;
}
.auth-feature-pill {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--divider) 88%, transparent);
  border-radius: 24px;
  padding: 17px 16px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: blur(18px) saturate(130%);
  box-shadow: 0 16px 30px rgba(15, 23, 42, .06);
}
.auth-feature-pill strong {
  display: block;
  font-size: 15px;
  margin-bottom: 5px;
}
.auth-feature-pill span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.auth-panel {
  display: grid;
  gap: 16px;
}
.auth-card {
  width: 100%;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid color-mix(in srgb, var(--divider) 92%, transparent);
  border-radius: 32px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 26px 52px rgba(15, 23, 42, .08);
  display: grid;
  gap: 18px;
}
.auth-panel-copy { display: grid; gap: 8px; }
.auth-panel-copy h2 {
  margin: 0;
  font-size: clamp(28px, 3vw, 38px);
  letter-spacing: -.03em;
}
.auth-panel-copy .muted { margin: 0; font-size: 15px; line-height: 1.5; }
.eyebrow { color: var(--accent); font-weight: 800; margin: 0; letter-spacing: .01em; }
.auth-form {
  display: grid;
  gap: 14px;
}
.auth-form label {
  display: grid;
  gap: 8px;
  font-size: 14px;
  font-weight: 720;
  color: var(--ink);
}
.auth-form input,
.comment-form textarea {
  min-height: 60px;
  border: 1px solid color-mix(in srgb, var(--divider) 94%, transparent);
  border-radius: 20px;
  background: color-mix(in srgb, var(--bg) 90%, var(--surface));
  color: var(--ink);
  padding: 0 18px;
  font-size: 16px;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.auth-form input::placeholder { color: color-mix(in srgb, var(--muted) 86%, transparent); }
.auth-form input:focus,
.comment-form textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 48%, var(--divider));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
  background: var(--surface);
}
.primary-button,
.apple-button {
  min-height: 56px;
  border-radius: 999px;
  padding: 0 22px;
  font-size: 18px;
}
.primary-button {
  background: linear-gradient(135deg, var(--accent) 0%, #6aa9ff 100%);
  box-shadow: 0 18px 30px rgba(57,150,253,.22);
}
.primary-button:hover { filter: brightness(1.02); }
.apple-button {
  background: color-mix(in srgb, var(--surface-2) 92%, var(--surface));
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--divider) 92%, transparent);
}
.apple-button span { font-size: 22px; margin-right: 8px; }
.app-account-note,
.security-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}
.auth-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  justify-content: flex-start;
  padding: 0 6px;
}
.auth-legal-links a,
.auth-legal-links a:visited {
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
}
.auth-legal-links a:hover,
.auth-legal-links a:focus-visible {
  color: var(--ink);
  text-decoration: underline;
}

@media (max-width: 980px) {
  .auth-layout {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .auth-showcase {
    padding: 10px 2px 0;
    gap: 22px;
  }
  .auth-copy h1 {
    max-width: 11ch;
  }
  .auth-feature-list {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
  .auth-panel {
    width: min(520px, 100%);
  }
}
@media (max-width: 620px) {
  .auth-shell {
    padding: 18px 14px 24px;
    min-height: 100dvh;
  }
  .auth-layout {
    gap: 20px;
  }
  .auth-logo {
    width: 64px;
    height: 64px;
    border-radius: 18px;
  }
  .auth-copy h1 {
    font-size: clamp(34px, 10vw, 46px);
    line-height: 1.02;
  }
  .auth-lead {
    font-size: 16px;
  }
  .auth-card {
    padding: 22px 18px;
    border-radius: 26px;
    gap: 16px;
  }
  .auth-panel-copy h2 {
    font-size: 28px;
  }
  .auth-form input {
    min-height: 56px;
    border-radius: 18px;
  }
  .primary-button,
  .apple-button {
    min-height: 54px;
    font-size: 17px;
  }
  .auth-legal-links {
    gap: 8px 14px;
    padding: 0 2px;
  }
}
}

/* Keep the v32 login note typographic; v8 styled the same element as a card. */
.auth-panel .app-account-note {
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
}

/* Login appearance uses the same persisted setting as the signed-in app.
   The system media query also responds to live operating-system changes. */
.auth-theme-control {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
}
.auth-theme-control select {
  min-height: 40px;
  max-width: 160px;
  padding: 6px 10px;
  border: 1px solid var(--divider);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.auth-theme-control select:focus-visible {
  outline: 2px solid #0064e0;
  outline-offset: 2px;
}

/* --- Taymetic Web v34: final legal footer override --- */
.legal-help-footer {
  margin-top: 50px;
  padding: 26px 0 8px;
  border-top: 0;
  background: transparent;
  box-shadow: none;
}
.legal-help-footer .legal-footer-links {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 9px 18px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.legal-help-footer .legal-footer-links a,
.legal-help-footer .legal-footer-links a:visited {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  text-decoration: none;
}
.legal-help-footer .legal-footer-links a:hover,
.legal-help-footer .legal-footer-links a:focus-visible {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* v35: cover the browser's autofill paint without changing the field color.
   Separate rules keep the standard and WebKit selectors independently usable. */
.auth-field input:autofill {
  padding-top: 19px;
  padding-bottom: 5px;
  background: var(--bg) !important;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  box-shadow: inset 0 0 0 1000px var(--bg);
}
.auth-field input:-webkit-autofill,
.auth-field input:-webkit-autofill:hover,
.auth-field input:-webkit-autofill:focus,
.auth-field input:-webkit-autofill:active {
  padding-top: 19px;
  padding-bottom: 5px;
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  -webkit-box-shadow: inset 0 0 0 1000px var(--bg);
  box-shadow: inset 0 0 0 1000px var(--bg);
}
.auth-field input:autofill + .field-label {
  top: 12px;
  color: var(--muted);
  font-size: 12px;
  transform: none;
}
.auth-field input:-webkit-autofill + .field-label {
  top: 12px;
  color: var(--muted);
  font-size: 12px;
  transform: none;
}

/* v37: the download card appears only in the desktop login column. */
.auth-showcase { grid-template-rows: auto 1fr auto; }
.auth-showcase-content { padding-bottom: 18px; }
.auth-download-card {
  width: 180px;
  justify-self: start;
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid #343434;
  border-radius: 16px;
  background: #151515;
  color: #f5f5f5;
  text-align: center;
  text-decoration: none;
}
.auth-download-card:hover { border-color: #666; }
.auth-download-card:focus-visible { outline: 2px solid #70b2ff; outline-offset: 4px; }
.auth-download-label { color: #c4c4c4; font-size: 13px; font-weight: 650; line-height: 1.3; }
.auth-download-qr { display: block; width: 144px; height: 144px; border-radius: 8px; }
.auth-download-url { color: #f5f5f5; font-size: 12px; font-weight: 600; line-height: 1.3; }
.auth-download-url span { margin-left: 4px; color: #b4b4b4; }
@media (max-width: 820px) {
  .auth-showcase { grid-template-rows: auto auto; }
  .auth-download-card { display: none; }
}
.comment-form button:disabled,
.side-comment-form button:disabled { opacity: .5; cursor: wait; }

/* The download fallback is visible only if automatic navigation cannot run. */
.download-shell { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.download-copy { width: min(440px, 100%); text-align: center; }
.download-copy img { width: 58px; height: 58px; object-fit: contain; }
.download-copy h1 { font-size: 28px; line-height: 1.2; }
.download-copy p { color: var(--muted); line-height: 1.5; }
.download-links { display: grid; gap: 14px; margin-top: 24px; }
.download-links a { color: var(--ink); text-underline-offset: 3px; }

/* v37: both composers grow with their content up to five visible lines. */
.comment-input-row {
  min-width: 0;
  align-items: end;
}
.comment-input-row textarea {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 0;
  height: 46px;
  min-height: 46px;
  max-height: 126px;
  padding: 12px 15px;
  border: 1px solid var(--divider);
  border-radius: 23px;
  font-size: 16px;
  line-height: 20px;
  resize: none;
  overflow-x: hidden;
  overflow-y: hidden;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.comment-input-row .side-comment-send { align-self: end; margin-bottom: 2px; }


/* --- Taymetic Web v40: persistent feed splash, compact profile grid and like label --- */
.feed-state-behind-splash { visibility: hidden; }

/* Empty grid columns must remain the normal page background when a profile has
   only one or two image posts. Separators belong to the tiles, not the grid. */
.profile-media-grid { background: transparent; }
.profile-media-tile { box-shadow: inset 0 0 0 .5px var(--divider); }

/* Like text now lives inside the heart button exactly like the share label. */
.media-actions { justify-content: flex-end; }
.media-action-group { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.media-action-group .action-button { gap: 7px; white-space: nowrap; }

/* --- Taymetic Web v41: filled activity heart when selected --- */
/* Match the Chats tab behaviour: the activity/like heart stays outlined while
   inactive and becomes solid when the Activities navigation item is active. */
.nav-item[data-view="activity"].active [data-icon="heart"] svg path {
  fill: currentColor !important;
  stroke: currentColor !important;
}


/* --- Taymetic Web v42: real profile avatar in mobile bottom navigation --- */
@media (max-width: 880px) {
  .nav-profile-avatar .nav-profile-avatar-image {
    display: block !important;
    width: 25px !important;
    height: 25px !important;
    border-radius: 50%;
    object-fit: cover;
  }
  .nav-profile-avatar .avatar.fallback {
    display: grid !important;
    place-items: center;
  }
  .nav-profile-avatar .mobile-profile-tab-icon {
    display: none !important;
  }
}


/* --- Taymetic Web v44: action alignment + media save deterrence --- */
/* Keep labels optically centered on the same horizontal axis as their icons. */
.action-button > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.action-button > span:first-child {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
}
.action-button > span:first-child svg {
  display: block;
  width: 20px;
  height: 20px;
}
.action-button > span:last-child {
  min-height: 20px;
  line-height: 20px;
}

/* A website cannot block OS-level screenshots, but these rules remove the
   common browser save/drag affordances without breaking taps/clicks. */
img,
.post-media,
.media-viewer img,
.chat-media img,
.chat-message img {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
}


/* --- Taymetic Web v46: calmer moderation, report post previews and text threads --- */
/* The moderation hero uses the brand penguin instead of a percentage ring.
   Progress remains concrete in the three server-backed counters below. */
.moderation-penguin-graphic {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 7px;
  min-width: 118px;
}
.moderation-penguin-halo {
  width: 104px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 28px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 15%, var(--divider));
  box-shadow: 0 12px 32px color-mix(in srgb, var(--ink) 7%, transparent);
  transform: rotate(2deg);
}
.moderation-penguin-halo img {
  display: block;
  width: 70px;
  height: 70px;
  object-fit: contain;
  transform: rotate(-2deg);
}
.moderation-penguin-graphic > span {
  padding: 4px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 13%, var(--divider));
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .02em;
}
/* A report shows the target in a compact feed-style preview so moderators can
   judge the content without mentally reconstructing it from a plain excerpt. */
.moderation-report-preview {
  display: grid;
  gap: 7px;
  margin-top: 2px;
}
.moderation-preview-kicker {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.moderation-preview-shell {
  overflow: hidden;
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--divider) 88%, transparent);
  background: var(--bg);
}
.moderation-preview-head {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr);
  gap: 9px;
  align-items: center;
}
.moderation-preview-head .avatar.small { width: 34px; height: 34px; }
.moderation-preview-identity { min-width: 0; }
.moderation-preview-image {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: 14px;
  background: var(--surface-2);
}
.moderation-preview-title { font-size: 15px; line-height: 1.3; }
.moderation-preview-body {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Text-post conversation prototype: keep image-post comments untouched. The
   original author and the reply avatars share a quiet vertical conversation
   rail, inspired by familiar social thread patterns. */
.text-thread-list {
  position: relative;
  padding-top: 6px;
}
.text-thread-origin {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr);
  gap: 10px;
  padding: 6px 0 13px;
}
.text-thread-avatar-rail {
  position: relative;
  display: flex;
  justify-content: center;
  z-index: 2;
}
.text-thread-avatar-rail::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 34px;
  bottom: -18px;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 24%, var(--divider));
}
.text-thread-origin-content { min-width: 0; padding-top: 1px; }
.text-thread-origin-body {
  margin: 5px 0 0;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.text-thread-replies {
  position: relative;
  display: grid;
}
.text-thread-replies::before {
  content: '';
  position: absolute;
  top: -2px;
  bottom: 25px;
  left: 16px;
  width: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 24%, var(--divider));
  pointer-events: none;
}
.text-thread-comment {
  position: relative;
  z-index: 1;
  padding: 9px 0 11px;
}
.text-thread-comment > .avatar.small {
  position: relative;
  z-index: 2;
  box-shadow: 0 0 0 4px var(--bg);
}
.text-thread-comment:last-child > .avatar.small::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 1000px;
  transform: translateX(-50%);
  background: var(--bg);
  z-index: -1;
}
.text-thread-empty {
  position: relative;
  z-index: 2;
  margin-left: 44px;
  padding: 7px 0 12px;
  color: var(--muted);
  font-size: 13px;
}
.side-comment-list.text-thread-list .text-thread-origin,
.side-comment-list.text-thread-list .text-thread-comment {
  grid-template-columns: 31px minmax(0,1fr);
}
.side-comment-list.text-thread-list .text-thread-origin .avatar.small,
.side-comment-list.text-thread-list .text-thread-comment > .avatar.small {
  width: 31px;
  height: 31px;
}
.side-comment-list.text-thread-list .text-thread-replies::before { left: 14.5px; }

@media (max-width: 620px) {
  .moderation-hero { grid-template-columns: minmax(0,1fr) 88px; }
  .moderation-penguin-graphic { min-width: 80px; }
  .moderation-penguin-halo { width: 76px; border-radius: 22px; }
  .moderation-penguin-halo img { width: 52px; height: 52px; }
  .moderation-penguin-graphic > span { font-size: 10px; padding: 3px 7px; }
  .moderation-preview-shell { padding: 12px; }
}

/* --- Taymetic Web v47: inline text conversations + cleaner moderation --- */
/* Text posts never open the desktop comment rail. Their conversation expands
   beneath the post and keeps reply avatars connected by a quiet vertical line. */
.inline-text-thread {
  position: relative;
  box-sizing: border-box;
  width: calc(100% - 55px);
  margin: 2px 0 12px 55px;
  padding: 4px 0 2px;
}
.inline-text-thread[hidden] { display: none !important; }
.inline-text-thread-list {
  position: relative;
  display: grid;
}
.inline-text-thread-list::before {
  content: '';
  position: absolute;
  left: 17px;
  top: -12px;
  bottom: 18px;
  width: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 22%, var(--divider));
  pointer-events: none;
}
.inline-thread-comment-row {
  position: relative;
  z-index: 1;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  padding: 9px 0 11px;
  background: var(--bg);
}
.inline-thread-comment-row > .avatar.small {
  position: relative;
  z-index: 2;
  box-shadow: 0 0 0 4px var(--bg);
}
.inline-thread-comment-row.comment-reply-row {
  margin-left: 26px;
  grid-template-columns: 30px minmax(0, 1fr);
}
.inline-thread-comment-row.comment-reply-row > .avatar.small {
  width: 30px;
  height: 30px;
}
.inline-thread-empty,
.inline-thread-loading {
  position: relative;
  z-index: 2;
  padding: 10px 0 13px 46px;
  color: var(--muted);
  font-size: 13px;
  background: var(--bg);
}
.inline-text-thread-form {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 7px;
  margin-top: 3px;
  padding: 10px 0 1px 46px;
  border-top: 1px solid color-mix(in srgb, var(--divider) 72%, transparent);
  background: var(--bg);
}
.inline-text-thread-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  gap: 8px;
  align-items: end;
}
.inline-text-thread-input {
  box-sizing: border-box;
  width: 100%;
  min-height: 40px;
  max-height: 128px;
  padding: 9px 12px;
  resize: none;
  border: 1px solid var(--divider);
  border-radius: 15px;
  outline: 0;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  line-height: 1.35;
}
.inline-text-thread-input:focus {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--divider));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 8%, transparent);
}
.inline-thread-send {
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 999px;
}
.inline-thread-reply-context { margin: 0; }

/* The moderation summary is intentionally plain: no penguin, percentage ring,
   halo, decorative circle or right-side ornament. The useful counters remain. */
.moderation-hero {
  display: block;
  min-height: 0;
  padding: 20px 22px;
  border-color: var(--divider);
  background: var(--surface);
}
.moderation-hero::after { display: none !important; }
.moderation-hero-copy { max-width: none; }
.moderation-penguin-graphic,
.moderation-penguin-halo { display: none !important; }

@media (max-width: 880px) {
  .inline-text-thread {
    width: auto;
    margin-left: 16px;
    margin-right: 16px;
  }
}
@media (max-width: 620px) {
  .moderation-hero { display: block; min-height: 0; padding: 18px; }
  .inline-text-thread-form { padding-left: 46px; }
}

/* Continue the text-post conversation rail from the original author's avatar
   down into the inline replies, instead of visually starting a second panel. */
.text-post-card.inline-thread-open { position: relative; }
.text-post-card.inline-thread-open::after {
  content: '';
  position: absolute;
  z-index: 0;
  left: 73px;
  top: 47px;
  bottom: 64px;
  width: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 22%, var(--divider));
  pointer-events: none;
}
.text-post-card.inline-thread-open .post-header,
.text-post-card.inline-thread-open .post-copy,
.text-post-card.inline-thread-open .post-actions,
.text-post-card.inline-thread-open .inline-text-thread { position: relative; z-index: 1; }
/* The article-level rail already provides the continuous line. */
.text-post-card.inline-thread-open .inline-text-thread-list::before { display: none; }

@media (max-width: 880px) {
  .text-post-card.inline-thread-open::after { left: 34px; }
}

/* --- Taymetic Web v48: always-open text threads + calmer reply composer --- */
/* Text conversations are a visible continuation of the main text post. The
   main author and the replies share one quiet vertical conversation rail. */
.inline-text-thread,
.inline-text-thread[hidden] {
  display: block !important;
}
.text-post-card.inline-thread-open {
  position: relative !important;
}
.text-post-card.inline-thread-open::after {
  display: none;
}
.text-post-card.inline-thread-open.has-thread-replies::after {
  display: block;
  left: 94px;
  top: 48px;
  bottom: 76px;
  width: 2px;
  background: color-mix(in srgb, var(--muted) 28%, var(--divider));
}
.text-post-card.inline-thread-open .post-body {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.52;
}
.inline-text-thread {
  width: calc(100% - 55px);
  margin: 0 0 10px 55px;
  padding: 0;
}
.inline-text-thread-list {
  position: relative;
  display: grid;
}
.inline-text-thread-list::before { display: none !important; }
.inline-thread-comment-row,
.inline-thread-comment-row + .inline-thread-comment-row {
  position: relative;
  z-index: 1;
  padding: 11px 0 12px;
  border-top: 0;
  background: transparent;
}
.inline-thread-comment-row > .avatar.small {
  z-index: 2;
  box-shadow: 0 0 0 4px var(--bg);
}
.inline-thread-empty,
.inline-thread-loading {
  padding: 8px 0 10px 46px;
  background: transparent;
  font-size: 13px;
}

/* Use the same clean compose language as the normal comment field: one soft
   pill input and the same circular upward send button. */
.inline-text-thread-form {
  margin-top: 0;
  padding: 9px 0 2px 46px;
  border-top: 0;
  background: transparent;
  gap: 7px;
}
.inline-text-thread-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 10px;
  align-items: end;
}
.inline-text-thread-input {
  height: 46px;
  min-height: 46px;
  max-height: 126px;
  padding: 12px 15px;
  border: 1px solid var(--divider);
  border-radius: 23px;
  background: var(--surface-2);
  font-size: 16px;
  line-height: 20px;
  resize: none;
  overflow-x: hidden;
  overflow-y: hidden;
  box-shadow: none;
}
.inline-text-thread-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 48%, var(--divider));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent);
  background: var(--surface);
}
.inline-thread-send {
  width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border-radius: 50%;
}
.inline-thread-send svg { width: 21px; height: 21px; }
.inline-thread-reply-context { margin: 0; }

/* A little settings cleanup: controls read as controls without adding another
   heavy card inside each row. */
.settings-inline-select {
  min-height: 34px;
  max-width: 132px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--divider) 92%, transparent);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink);
}
.settings-row.interactive:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 52%, transparent);
  outline-offset: -2px;
}

@media (max-width: 880px) {
  .text-post-card.inline-thread-open.has-thread-replies::after {
    left: 34px;
    top: 48px;
    bottom: 76px;
  }
  .inline-text-thread {
    width: auto;
    margin-left: 16px;
    margin-right: 16px;
  }
}


/* --- Taymetic Web v49: cleaner inline text threads --- */
/* Text-post replies stay visibly attached to the original post, but the rail
   is now just one clean vertical line without circular cut-outs or decorative
   joints. */
.text-thread-avatar-rail::after,
.text-thread-replies::before,
.text-thread-comment:last-child > .avatar.small::after {
  display: none !important;
}

.text-post-card.inline-thread-open.has-thread-replies::after {
  display: block;
  left: 94px;
  top: 50px;
  bottom: 68px;
  width: 1.5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 26%, var(--divider));
}

.inline-text-thread {
  width: calc(100% - 55px);
  margin: 2px 0 10px 55px;
  padding: 0;
}
.inline-text-thread-list {
  display: grid;
  gap: 0;
}
.inline-thread-comment-row,
.inline-thread-comment-row + .inline-thread-comment-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 0 12px;
  border-top: 0;
  background: transparent;
}
.inline-thread-comment-row > .avatar.small {
  position: relative;
  z-index: 2;
  box-shadow: none !important;
  background: var(--bg);
}
.inline-thread-comment-row.comment-reply-row {
  margin-left: 24px;
  grid-template-columns: 30px minmax(0, 1fr);
}
.inline-thread-comment-row.comment-reply-row > .avatar.small {
  width: 30px;
  height: 30px;
}
.inline-thread-empty,
.inline-thread-loading {
  padding: 8px 0 10px 46px;
  color: var(--muted);
  font-size: 13px;
  background: transparent;
}
.inline-text-thread-form {
  margin-top: 0;
  padding: 8px 0 2px 46px;
  border-top: 0;
  background: transparent;
}
.inline-text-thread-input {
  background: var(--surface);
}
.inline-text-thread-input:focus {
  background: var(--surface);
}

@media (max-width: 880px) {
  .text-post-card.inline-thread-open.has-thread-replies::after {
    left: 34px;
    top: 50px;
    bottom: 68px;
  }
  .inline-text-thread {
    width: auto;
    margin-left: 16px;
    margin-right: 16px;
  }
}


/* --- Taymetic Web v50: release-pass text conversation layout --- */
/* Main post and replies share one visual axis. The thread rail is measured from
   the real avatar positions in JS, so it starts below the main avatar and ends
   at the final visible reply instead of hanging into the composer. */
.text-post-card.inline-thread-open {
  position: relative !important;
}
.text-post-card.inline-thread-open::after,
.text-post-card.inline-thread-open.has-thread-replies::after {
  content: '';
  position: absolute;
  z-index: 0;
  display: none;
  left: var(--thread-rail-left, 0px);
  top: var(--thread-rail-top, 0px);
  width: 1.5px;
  height: var(--thread-rail-height, 0px);
  border-radius: 999px;
  transform: translateX(-50%);
  background: color-mix(in srgb, var(--muted) 26%, var(--divider));
  pointer-events: none;
}
.text-post-card.inline-thread-open.has-thread-replies::after {
  display: block;
}

/* Remove all legacy rail fragments/cut-outs. There is exactly one line. */
.inline-text-thread-list::before,
.text-thread-avatar-rail::after,
.text-thread-replies::before,
.text-thread-comment:last-child > .avatar.small::after {
  display: none !important;
}

/* The text-post actions belong to the conversation, not to the far right edge. */
.text-post-card .text-summary-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding-top: 7px;
  padding-bottom: 9px;
}
.text-post-card .text-summary-actions .media-action-group {
  margin-left: 0 !important;
  margin-right: 0;
  justify-content: flex-start;
  gap: 14px;
}
.text-post-card .text-summary-actions .action-button {
  min-width: 0;
  min-height: 34px;
  padding: 4px 0;
  justify-content: flex-start;
  gap: 7px;
}

/* Replies use a dedicated avatar rail column. The avatar masks the single line
   naturally; no fake circles, nodes, borders or connector bubbles are added. */
.inline-text-thread {
  padding: 0;
}
.inline-text-thread-list {
  display: grid;
  gap: 0;
}
.inline-thread-comment-row,
.inline-thread-comment-row + .inline-thread-comment-row {
  position: relative;
  z-index: 1;
  display: grid;
  border-top: 0;
  background: transparent;
}
.inline-thread-comment-row > .avatar.small {
  position: relative;
  z-index: 2;
  justify-self: center;
  box-shadow: none !important;
}
.inline-thread-comment-row .comment-body {
  margin: 5px 0 7px;
  font-size: 15px;
  line-height: 1.45;
}
.inline-thread-comment-row .comment-footer {
  min-height: 28px;
  align-items: center;
  gap: 17px;
}
.inline-thread-comment-row .comment-reply-label {
  padding-top: 0;
  font-size: 12px;
}
.inline-thread-comment-row .app-comment-like {
  margin-left: 0 !important;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
}
.inline-thread-comment-row .app-comment-like svg {
  width: 18px;
  height: 18px;
}

.inline-text-thread-form {
  border-top: 0;
  background: transparent;
}
.inline-text-thread-input-row {
  align-items: center;
}
.inline-text-thread-input {
  background: var(--bg);
  border-color: color-mix(in srgb, var(--divider) 88%, transparent);
  box-shadow: none;
}
.inline-text-thread-input:focus {
  background: var(--bg);
  border-color: color-mix(in srgb, var(--accent) 48%, var(--divider));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 8%, transparent);
}

@media (min-width: 881px) {
  /* Larger original author avatar, then use its text column for body/actions. */
  .text-post-card .post-header {
    box-sizing: border-box;
    grid-template-columns: 50px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    width: calc(100% - 55px) !important;
    margin-left: 55px !important;
    margin-right: 0 !important;
    padding: 12px 0 4px !important;
  }
  .text-post-card .post-header > .avatar {
    width: 50px !important;
    height: 50px !important;
  }
  .text-post-card .app-author-line {
    min-height: 50px;
    align-content: center;
  }
  .text-post-card .post-copy,
  .text-post-card .post-actions {
    box-sizing: border-box;
    width: calc(100% - 117px) !important;
    margin-left: 117px !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .text-post-card .post-copy {
    padding-top: 0 !important;
  }
  .text-post-card .post-body {
    margin-top: 1px;
    font-size: 16px;
    line-height: 1.5;
  }
  .inline-text-thread {
    box-sizing: border-box;
    width: calc(100% - 55px) !important;
    margin: 1px 0 10px 55px !important;
  }
  .inline-thread-comment-row,
  .inline-thread-comment-row + .inline-thread-comment-row {
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 12px;
    padding: 11px 0 13px;
  }
  .inline-thread-comment-row > .avatar.small {
    width: 40px;
    height: 40px;
  }
  .inline-thread-comment-row.comment-reply-row {
    margin-left: 62px;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
  }
  .inline-thread-comment-row.comment-reply-row > .avatar.small {
    width: 32px;
    height: 32px;
  }
  .inline-thread-empty,
  .inline-thread-loading,
  .inline-text-thread-form {
    padding-left: 62px !important;
  }
  .inline-text-thread-form {
    padding-top: 8px !important;
    padding-bottom: 3px !important;
  }
}

@media (max-width: 880px) {
  .text-post-card .post-header {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
    padding: 11px 14px 4px !important;
  }
  .text-post-card .post-header > .avatar {
    width: 48px !important;
    height: 48px !important;
  }
  .text-post-card .app-author-line {
    min-height: 48px;
    align-content: center;
  }
  .text-post-card .post-copy,
  .text-post-card .post-actions {
    box-sizing: border-box;
    width: auto !important;
    margin-left: 72px !important;
    margin-right: 14px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .text-post-card .post-copy { padding-top: 0 !important; }
  .text-post-card .post-body {
    font-size: 16px;
    line-height: 1.48;
  }
  .inline-text-thread {
    width: auto !important;
    margin: 1px 14px 10px 14px !important;
  }
  .inline-thread-comment-row,
  .inline-thread-comment-row + .inline-thread-comment-row {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
    padding: 10px 0 12px;
  }
  .inline-thread-comment-row > .avatar.small {
    width: 38px;
    height: 38px;
  }
  .inline-thread-comment-row.comment-reply-row {
    margin-left: 58px;
    grid-template-columns: 34px minmax(0, 1fr);
  }
  .inline-thread-comment-row.comment-reply-row > .avatar.small {
    width: 30px;
    height: 30px;
  }
  .inline-thread-empty,
  .inline-thread-loading,
  .inline-text-thread-form {
    padding-left: 58px !important;
  }
  .text-post-card .text-summary-actions .media-action-group {
    gap: 12px;
    flex-wrap: wrap;
  }
  .text-post-card .text-summary-actions .action-button {
    font-size: 13px;
  }
}

/* --- Taymetic Web v51: release discussion model for text posts --- */
/* Text discussions are collapsed by default. Readers opt in to the thread;
   image-post comments keep the existing comment UI unchanged. */
.inline-thread-discussion-toggle {
  width: max-content;
  max-width: 100%;
  min-height: 34px;
  margin: 2px 0 4px;
  padding: 5px 0;
  border: 0;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}
.inline-thread-discussion-toggle:hover {
  color: var(--ink);
}
.inline-thread-discussion-toggle:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 42%, transparent);
  outline-offset: 3px;
}
.inline-thread-discussion-icon {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  flex: 0 0 18px;
}
.inline-thread-discussion-icon svg {
  width: 18px;
  height: 18px;
}
.inline-thread-discussion-chevron {
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  transform: translateY(-1px);
  transition: transform .16s ease;
}
.inline-thread-discussion-toggle.is-expanded .inline-thread-discussion-chevron {
  transform: rotate(180deg) translateY(1px);
}

/* One continuous rail for every visible level of a text discussion. Nested
   replies are not rendered with the legacy comment indentation or mini-lines. */
.inline-thread-nested-replies {
  grid-column: 1 / -1;
  min-width: 0;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
}
.inline-thread-nested-replies .inline-thread-comment-row.comment-reply-row {
  margin-left: 0 !important;
  background: transparent;
}
.inline-thread-nested-replies .inline-thread-comment-row > .avatar.small,
.inline-thread-comment-row > .avatar.small {
  background: var(--bg);
  border-radius: 50%;
}
.inline-thread-replies-toggle {
  margin: 3px 0 1px;
  padding: 3px 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.inline-thread-replies-toggle::before {
  display: none !important;
}
.inline-thread-replies-toggle:hover {
  color: var(--ink);
}
.inline-thread-replying-to {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

/* Hide the composer until the discussion itself is open, then keep it on the
   same content axis as the replies. */
.inline-text-thread:not(.is-expanded) .inline-text-thread-list,
.inline-text-thread:not(.is-expanded) .inline-text-thread-form {
  display: none !important;
}
.inline-text-thread.is-expanded .inline-text-thread-list {
  display: grid;
}
.inline-text-thread.is-expanded .inline-text-thread-form {
  display: grid;
}

@media (min-width: 881px) {
  .inline-thread-discussion-toggle {
    margin-left: 62px;
  }
  .inline-thread-nested-replies .inline-thread-comment-row.comment-reply-row {
    grid-template-columns: 50px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 10px 0 12px;
  }
  .inline-thread-nested-replies .inline-thread-comment-row.comment-reply-row > .avatar.small {
    width: 34px;
    height: 34px;
    justify-self: center;
  }
}

@media (max-width: 880px) {
  .inline-thread-discussion-toggle {
    margin-left: 58px;
  }
  .inline-thread-nested-replies .inline-thread-comment-row.comment-reply-row {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 9px 0 11px;
  }
  .inline-thread-nested-replies .inline-thread-comment-row.comment-reply-row > .avatar.small {
    width: 32px;
    height: 32px;
    justify-self: center;
  }
}


/* --- Taymetic Web v52: user-supplied centered action icons --- */
.taymetic-search-icon,
.action-button > span:first-child svg,
.app-comment-like svg {
  transform: none !important;
  transform-origin: 50% 50%;
}
.action-button > span:first-child,
.inline-thread-discussion-icon {
  display: inline-grid;
  place-items: center;
}
.app-bubble-icon {
  vertical-align: middle;
  -webkit-mask-position: center;
  mask-position: center;
}


/* --- Taymetic Web v53: one optical center for every sidebar icon --- */
/* All desktop navigation glyphs now occupy the exact same 30x30 slot. This
   fixes the previous 2-3px drift where direct SVG spans were aligned to the
   start of the grid cell while notification icons were already centered. */
.sidebar .nav-item {
  grid-template-columns: 30px minmax(0, 1fr) auto;
}
.sidebar .nav-item > .nav-icon-shell,
.sidebar .nav-item > .nav-profile-avatar {
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  justify-self: center;
  align-self: center;
  display: grid;
  place-items: center;
  line-height: 0;
}
.sidebar .nav-icon-shell > [data-icon],
.sidebar .nav-profile-avatar > [data-icon] {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  line-height: 0;
}
.sidebar .nav-icon-shell > [data-icon] > svg,
.sidebar .nav-profile-avatar > [data-icon] > svg,
.sidebar .nav-icon-shell .app-bubble-icon {
  display: block;
  width: 25px;
  height: 25px;
  margin: 0;
}
.sidebar .nav-profile-avatar .nav-profile-avatar-image,
.sidebar .nav-profile-avatar .avatar {
  justify-self: center;
  align-self: center;
}

@media (max-width: 880px) {
  .sidebar .nav-item {
    grid-template-columns: 1fr;
  }
  .sidebar .nav-item > .nav-icon-shell,
  .sidebar .nav-item > .nav-profile-avatar {
    justify-self: center;
  }
}


/* --- Taymetic Web v54: supplied Requests + Add icons in Chats header --- */
.chats-header-actions .chat-header-action {
  display: grid;
  place-items: center;
}
.chats-header-actions .chat-header-action svg {
  display: block;
  width: 22px;
  height: 22px;
  overflow: visible;
}
.chats-header-actions .chat-header-action .taymetic-request-icon,
.chats-header-actions .chat-header-action .taymetic-add-icon {
  transform: none;
}


/* --- Taymetic Web v55: custom camera + microphone glyphs --- */
.chat-composer-circle .taymetic-camera-icon,
.chat-composer-circle .taymetic-microphone-icon {
  display: block;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
}


/* --- Taymetic Web v56: cleaner settings icon language --- */
/* Settings rows use plain icons only. The colored rounded tile behind each
   icon is intentionally removed so the list matches the sidebar language. */
.settings-row-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 0;
  background: transparent !important;
}
.settings-row-icon svg,
.settings-row-icon .app-settings-nav-svg {
  width: 22px;
  height: 22px;
  display: block;
}
.settings-row.danger .settings-row-icon {
  background: transparent !important;
}
/* Menu style and chat/accent intentionally reuse the exact same gear geometry
   as the left-hand Settings navigation item. */
.settings-row-icon .app-settings-nav-svg .settings-gear-shape,
.settings-row-icon .app-settings-nav-svg .settings-gear-center {
  fill: none;
  stroke: currentColor;
  stroke-width: 1px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}


/* --- Taymetic Web v58: refreshed account badges + camera/microphone icons --- */
.taymetic-plus-seal, .taymetic-tourism-seal, .taymetic-creator-seal { display:block; width:100%; height:100%; object-fit:contain; }
.chat-composer-circle .taymetic-camera-icon, .chat-composer-circle .taymetic-microphone-icon { transform:none; vertical-align:middle; }


/* --- Taymetic Web v59: profile badge + compact text discussion action --- */
.mobile-profile-name-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
}
.mobile-profile-name-line h1 { margin: 0; }
.mobile-profile-name-line .profile-account-seal {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
}
.inline-thread-discussion-toggle { display: none !important; }
.inline-text-thread:not(.is-expanded) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
}
.inline-text-thread .comment-replies-toggle::before { display: none; }
.inline-text-thread .comment-replies-toggle { margin-left: 0; }


/* --- Taymetic Web v60: dedicated admin + moderator badges --- */
.account-seal[data-kind="admin"],
.account-seal[data-kind="moderator"] {
  width: 16px;
  height: 16px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.account-seal.compact[data-kind="admin"],
.account-seal.compact[data-kind="moderator"] {
  width: 15px;
  height: 15px;
}
.taymetic-team-seal {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}