/* Drop 9b: settings in the style of a modern chat app. Search box, profile header, section cards, and on phones a list that opens pages. */
.fs-me { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; margin-bottom: 8px; border-radius: 8px; text-align: left; }
.fs-me:hover { background: var(--c-hover, rgba(255, 255, 255, .06)); }
.fs-me .avatar { width: 40px; height: 40px; flex: none; }
.fs-me-t { display: grid; min-width: 0; }
.fs-me-name { font-weight: 700; color: var(--c-strong, #f2f3f5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-me-sub { font-size: 12px; color: var(--c-muted, #b5bac1); }
.fs-search { width: 100%; box-sizing: border-box; margin: 0 0 8px; padding: 8px 10px; border: 0; border-radius: 6px; background: var(--c-darkest); color: var(--c-text, #dbdee1); font-size: 14px; }
.fs-search:focus { outline: 2px solid var(--c-accent); }
.fs-none { padding: 8px 10px; color: var(--c-muted, #b5bac1); font-size: 14px; }
.fs-back, .fs-mclose { display: none; }

.set-sec { margin: 0 0 28px; }
.set-h { margin: 0 0 10px; font-size: 18px; font-weight: 700; color: var(--c-strong, #f2f3f5); }
.set-box { background: var(--c-darkest); border-radius: 10px; padding: 6px 16px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; }
.set-row + .set-row { border-top: 1px solid rgba(255, 255, 255, .06); }
.set-row-t { min-width: 0; }
.set-val { color: var(--c-strong, #f2f3f5); font-size: 15px; overflow-wrap: anywhere; }
.acct { position: relative; margin-bottom: 24px; }
.acct-edit { position: absolute; right: 16px; top: 112px; }

@media (max-width: 900px) {
  /* Phone / tablet: first a list, tap an item to open its page, tap Back to return. */
  .fs { padding-top: env(safe-area-inset-top); }
  .fs-nav { flex: 1 1 auto; justify-content: stretch; overflow-x: hidden; overflow-y: auto; background: var(--c-chat); }
  .fs-nav-in { display: block; width: 100%; padding: 8px 14px calc(40px + env(safe-area-inset-bottom)); }
  .fs-heading { display: block; }
  .fs-label { display: block; padding: 18px 4px 6px; }
  .fs-sep { display: block; }
  .fs-item { display: flex; width: 100%; min-height: 48px; margin: 0 0 2px; padding: 0 14px; font-size: 16px; background: var(--c-side); border-radius: 0; }
  .fs-me { min-height: 64px; background: var(--c-side); border-radius: 12px; }
  .fs-search { min-height: 44px; font-size: 16px; }
  .fs-mclose { display: grid; place-items: center; width: 44px; height: 44px; margin-left: auto; color: var(--c-muted, #b5bac1); }
  .fs-mclose svg { width: 24px; height: 24px; }
  .fs:not(.m-page) .fs-main { display: none; }
  .fs.m-page .fs-nav { display: none; }
  .fs-main { flex-direction: column; flex: 1 1 auto; min-height: 0; }
  .fs-back { display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 14px; color: var(--c-strong, #f2f3f5); font-weight: 600; font-size: 16px; flex: none; }
  .fs-back span:first-child { font-size: 28px; line-height: 1; margin-top: -3px; }
  .fs-close { display: none; }
  .fs-content { flex: 1 1 auto; min-height: 0; padding: 4px 14px calc(60px + env(safe-area-inset-bottom)); }
  .set-row { flex-wrap: wrap; }
  .set-row .cbtn { min-height: 40px; }
  .acct-edit { top: 108px; }
}