/* Settings: a quiet directory beside a focused editor. Uses the app's theme tokens. */
#settingsModalRoot .settings-shell {
  grid-template-columns: 260px minmax(0, 1fr);
}
#settingsModalRoot .settings-sidebar {
  padding: 30px 18px 28px;
  justify-content: stretch;
  border-right: 1px solid var(--border);
}
#settingsModalRoot .settings-sidebar-inner { width: 100%; min-width: 0; }
.settings-sidebar-heading {
  padding: 0 10px 22px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.5px;
  color: var(--text-bright);
}
.settings-search { margin-bottom: 18px; }
.settings-search-field {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 11px;
  min-height: 42px;
  background: var(--bg-input);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.settings-search-field:focus-within { border-color: var(--accent); }
.settings-search-field > svg { flex: none; }
.settings-search-field input.settings-search-input {
  min-width: 0;
  width: 100%;
  padding: 10px 0;
  margin: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--text);
  font-size: 13px;
}
.settings-search-field input.settings-search-input:focus-visible { outline: none; }
.settings-search-empty { margin: 14px 4px 4px; color: var(--muted); font-size: 13px; }
:is(#settingsModalRoot, .mobile-you-screen) [hidden] { display: none !important; }
:is(#settingsModalRoot, .mobile-you-screen) .settings-nav-section { margin: 0 0 15px; }
:is(#settingsModalRoot, .mobile-you-screen) .settings-nav-group {
  padding: 10px 10px 7px;
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  font-weight: 650;
  letter-spacing: .06em;
  color: var(--muted);
  text-transform: none;
}
#settingsModalRoot .settings-nav-item {
  min-height: 38px;
  padding: 8px 10px;
  gap: 11px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
#settingsModalRoot .settings-nav-item:hover { transform: translateX(2px); }
#settingsModalRoot .settings-nav-item.active:hover { transform: none; }
#settingsModalRoot .settings-nav-item .sn-icon { color: var(--muted); }
#settingsModalRoot .settings-nav-item.active {
  background: var(--bg-4);
  color: var(--text-bright);
  font-weight: 650;
  box-shadow: inset 3px 0 var(--accent);
}
#settingsModalRoot .settings-nav-item.active .sn-icon { color: var(--text-bright); }
#settingsModalRoot .settings-nav-item.danger { color: var(--danger); margin-top: 14px; }
#settingsModalRoot .settings-nav-sep { margin: 18px 10px; }
#settingsModalRoot .settings-content { padding: 32px 56px 40px; }
#settingsModalRoot .settings-content-inner { max-width: 720px; margin: 0 auto; }
#settingsModalRoot .settings-close {
  position: fixed;
  top: 22px;
  right: 22px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
  z-index: 3;
}
#settingsModalRoot .settings-title {
  margin-bottom: 26px;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -.5px;
  outline: none;
}
:is(#settingsModalRoot, .mobile-settings-screen) .settings-panel {
  font-size: 14px;
  line-height: 1.55;
  animation: none;
}
/* Desktop section navigation; mobile already animates its enclosing screen. */
#settingsModalRoot .settings-panel {
  animation: panel-in var(--dur-ui) var(--ease-out);
}
:is(#settingsModalRoot, .mobile-settings-screen) .settings-panel > h4 {
  margin: 28px 0 10px !important;
  font-size: 14px;
  color: var(--text-bright);
  letter-spacing: 0;
  text-transform: none;
}
:is(#settingsModalRoot, .mobile-settings-screen) .settings-panel h4 { text-transform: none; letter-spacing: 0; }
:is(#settingsModalRoot, .mobile-settings-screen) .settings-panel > label:not(.check-row) {
  display: block;
  margin: 18px 0 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
:is(#settingsModalRoot, .mobile-settings-screen) .settings-panel > :is(input, select, textarea) {
  width: 100%;
  max-width: none;
  min-height: 42px;
  border-radius: var(--radius);
}
:is(#settingsModalRoot, .mobile-settings-screen) .settings-panel > textarea { min-height: 90px; resize: vertical; }
:is(#settingsModalRoot, .mobile-settings-screen) .settings-hint,
:is(#settingsModalRoot, .mobile-settings-screen) .muted-text { line-height: 1.55; text-wrap: pretty; }
.settings-profile-intro { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; }
.settings-profile-intro > div { min-width: 0; }
.settings-profile-intro > .avatar { flex: none; }
.settings-profile-intro > .avatar-edit-actions { flex: none; margin-left: auto; }
.settings-profile-intro .avatar-edit-actions button { white-space: nowrap; }
.settings-profile-intro strong { display: block; font-size: 19px; color: var(--text-bright); overflow-wrap: anywhere; }
.settings-profile-intro p { margin: 5px 0 0; max-width: 420px; color: var(--muted); font-size: 13px; }
.settings-disclosure { margin-top: 16px; border-top: 1px solid var(--border); }
.settings-disclosure > summary {
  padding: 16px 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-bright);
}
.settings-disclosure > summary::marker { color: var(--muted); }
.settings-disclosure > h4 { margin: 22px 0 10px; }
.settings-disclosure > label { display: block; margin: 4px 0 12px; }
:is(#settingsModalRoot, .mobile-settings-screen) .acct-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
:is(#settingsModalRoot, .mobile-settings-screen) .acct-row { padding: 14px 0; }
:is(#settingsModalRoot, .mobile-settings-screen) .acct-label { font-size: 12px; letter-spacing: 0; text-transform: none; }
:is(#settingsModalRoot, .mobile-settings-screen) .acct-val { min-width: 0; overflow-wrap: anywhere; }
.settings-savebar {
  position: sticky;
  bottom: -1px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 30px;
  padding: 16px 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.settings-savebar > button { flex: none; min-height: 42px; padding: 10px 20px; border-radius: var(--radius); }
.settings-save-state { font-size: 12px; color: var(--muted); }
:is(#settingsModalRoot, .mobile-settings-screen) .settings-panel .check-row {
  min-height: 52px;
  gap: 14px;
  padding: 13px 0;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  align-items: center;
  font-size: 14px;
}
:is(#settingsModalRoot, .mobile-settings-screen) .check-row input { flex: none; accent-color: var(--accent); }
:is(#settingsModalRoot, .mobile-settings-screen) .check-row + .check-row::before { display: none; }
:is(#settingsModalRoot, .mobile-settings-screen) .settings-section {
  padding: 24px 0;
  margin: 0;
  background: transparent;
  border-radius: 0;
  animation: none;
}
:is(#settingsModalRoot, .mobile-settings-screen) .settings-section-head { gap: 16px; flex-wrap: wrap; }
:is(#settingsModalRoot, .mobile-settings-screen) .settings-section-head h4 { font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--text-bright); }
:is(#settingsModalRoot, .mobile-settings-screen) :is(.sec-card, .session-card, .blocked-row) {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 16px 0;
}
:is(#settingsModalRoot, .mobile-settings-screen) .session-card.current { background: transparent; }
:is(#settingsModalRoot, .mobile-settings-screen) .sec-card-actions { flex-wrap: wrap; }
:is(#settingsModalRoot, .mobile-settings-screen) .density-preview { border-radius: var(--radius); box-shadow: none; }
:is(#settingsModalRoot, .mobile-settings-screen) .theme-row { gap: 10px; }
:is(#settingsModalRoot, .mobile-settings-screen) .theme-swatch { border-radius: var(--radius); box-shadow: none; }
:is(#settingsModalRoot, .mobile-settings-screen) .theme-swatch.active { background: var(--bg-4); color: var(--text-bright); outline: 2px solid var(--accent); outline-offset: -2px; border-color: transparent; }
:is(#settingsModalRoot, .mobile-settings-screen) .orn-cell { border-radius: var(--radius); }
:is(#settingsModalRoot, .mobile-settings-screen) .banner-edit-preview { background-image: none; background-color: var(--bg-3); }

@media (min-width: 801px) and (max-width: 1050px) {
  #settingsModalRoot .settings-shell { grid-template-columns: 234px minmax(0, 1fr); }
  #settingsModalRoot .settings-sidebar { padding-inline: 12px; }
  #settingsModalRoot .settings-content { padding: 42px 36px 48px; }
}
@media (max-width: 800px) {
  #settingsModalRoot .settings-shell { grid-template-columns: 1fr; }
  .mobile-you-screen .mobile-you-scroll { padding: 8px 20px 30px; }
  .mobile-you-screen .mobile-you-profile {
    padding: 16px 0 24px;
    margin: 0 0 8px;
    background: transparent;
    border: 0;
    border-radius: 0;
  }
  .mobile-you-screen .mobile-you-profile .avatar.large { width: 56px; min-width: 56px; height: 56px; }
  .mobile-you-screen .mobile-you-name { font-size: 21px; }
  .mobile-you-screen .settings-search { margin-bottom: 10px; }
  .mobile-you-screen .settings-search-field { min-height: 44px; }
  .mobile-you-screen .settings-search-input { font-size: 16px; }
  .mobile-you-screen .settings-nav-group { padding: 16px 0 7px; }
  .mobile-you-screen .mobile-settings-row { padding: 13px 4px; min-height: 49px; border-radius: var(--radius-sm); }
  .mobile-you-screen .mobile-settings-label { font-size: 14px; font-weight: 500; }
  .mobile-you-screen .mobile-settings-icon { width: 24px; }
  .mobile-you-screen .mobile-row-chevron { font-size: 20px; }
  .mobile-settings-screen > .settings-panel { padding: 0 20px 30px; }
  .main .mobile-settings-screen header.mobile-settings-titlebar {
    margin: 0 -20px 22px;
    padding: 8px 20px;
    background: var(--bg);
  }
  .mobile-settings-titlebar h1 { font-size: 19px; }
  .mobile-settings-screen .settings-profile-intro { gap: 14px; margin-bottom: 24px; }
  .mobile-settings-screen .settings-profile-intro { flex-wrap: wrap; }
  .mobile-settings-screen .settings-profile-intro > div:not(.avatar):not(.avatar-edit-actions) { flex: 1; }
  .mobile-settings-screen .settings-profile-intro > .avatar-edit-actions { flex-direction: row; width: 100%; margin-left: 0; }
  .mobile-settings-screen .settings-profile-intro p { font-size: 12px; }
  .mobile-settings-screen .settings-panel :is(input, textarea, select) { font-size: 16px; }
  .mobile-settings-screen .settings-savebar { padding: 14px 0; gap: 10px; }
  .mobile-settings-screen .settings-savebar > button { padding-inline: 14px; }
  .mobile-settings-screen .acct-row { align-items: flex-start; flex-wrap: wrap; gap: 5px 14px; }
  .mobile-settings-screen .acct-val { text-align: left; }
  .mobile-settings-screen .acct-email { justify-content: flex-start; }
  .mobile-settings-screen .sec-card { flex-wrap: wrap; }
  .mobile-settings-screen .sec-card-actions { width: 100%; }
}

/* Profile labels and controls share a scan line without extra card surfaces. */
.settings-profile-fields { display: grid; gap: 18px; }
.settings-profile-field { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; align-items: start; }
.settings-profile-field > label { padding-top: 11px; font-size: 13px; font-weight: 600; color: var(--text); }
.settings-profile-field > :is(input, textarea, select) { width: 100%; max-width: none; min-width: 0; min-height: 42px; margin: 0; border-radius: var(--radius); }
.settings-profile-field > textarea { min-height: 96px; resize: vertical; }
:is(#settingsModalRoot, .mobile-settings-screen) .settings-profile-intro { padding-bottom: 24px; border-bottom: 1px solid var(--border); }
:is(#settingsModalRoot, .mobile-settings-screen) .theme-swatch { background: transparent; border-color: transparent; min-height: 82px; }
:is(#settingsModalRoot, .mobile-settings-screen) .accent-swatch { border-radius: 8px; }
:is(#settingsModalRoot, .mobile-settings-screen) .settings-panel .check-row { border-bottom: 0; }
:is(#settingsModalRoot, .mobile-settings-screen) :is(.settings-disclosure > summary, .theme-swatch, .accent-swatch):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 800px) {
  .settings-profile-field { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .settings-profile-field > label { padding-top: 0; }
  .settings-profile-field > :is(input, textarea, select) { min-height: 44px; }
  .mobile-settings-screen .avatar-edit-actions > button { min-height: 44px; }
}

/* Controls belong to their setting: label on the left, one aligned control column. */
.settings-control-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(0, 340px);
  align-items: center;
  gap: 16px 24px;
  min-height: 64px;
}
.settings-control-row > :is(label, span) { color: var(--text); font-size: 14px; font-weight: 500; }
.settings-control-row > :is(select, .slider-row) { width: 100%; min-width: 0; margin: 0; }
.settings-control-row > button { justify-self: end; min-height: 40px; margin: 0; }
.settings-device-fields { margin-bottom: 10px; }
.settings-media-test { margin-top: 8px; }
.settings-media-test .mic-meter { width: min(340px, 100%); margin: 0 0 12px auto; }
.settings-media-test .cam-preview { margin-left: auto; max-width: 340px; }
:is(#settingsModalRoot, .mobile-settings-screen) .settings-panel select {
  min-height: 42px;
  padding: 10px 38px 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background-color: var(--bg-2);
  color: var(--text-bright);
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
  text-overflow: ellipsis;
}
.settings-profile-field > select { max-width: 260px; justify-self: start; }
:is(#settingsModalRoot, .mobile-settings-screen) .settings-panel select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: none;
}
/* Keep native mobile pickers and native fallback in older desktop engines. */
@media (min-width: 801px) {
  @supports (appearance: base-select) {
    #settingsModalRoot .settings-panel select,
    #settingsModalRoot .settings-panel select::picker(select) { appearance: base-select; }
    #settingsModalRoot .settings-panel select { background-image: none; padding-right: 12px; gap: 16px; }
    #settingsModalRoot .settings-panel select::picker-icon { color: var(--muted); margin-left: auto; }
    #settingsModalRoot .settings-panel select::picker(select) {
      margin-top: 6px;
      padding: 5px;
      background: var(--bg-2);
      color: var(--text-bright);
      border: 1px solid var(--border-strong);
      border-radius: 10px;
      box-shadow: var(--shadow-lg);
      max-height: min(320px, 60dvh);
      overflow-y: auto;
    }
    #settingsModalRoot .settings-panel select option {
      padding: 10px 12px;
      min-height: 40px;
      border-radius: 6px;
      gap: 10px;
      font-size: 14px;
      overflow-wrap: anywhere;
      white-space: normal;
    }
    #settingsModalRoot .settings-panel select option:checked { background: var(--bg-4); font-weight: 600; }
    #settingsModalRoot .settings-panel select option:is(:hover, :focus) { background: var(--bg-3); outline: none; }
    #settingsModalRoot .settings-panel select option::checkmark { color: var(--text-bright); }
  }
}
@media (max-width: 800px) {
  .settings-control-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px 0; }
  .settings-control-row > button { justify-self: start; min-height: 44px; }
  .settings-profile-field > select { max-width: none; justify-self: stretch; }
  :is(#settingsModalRoot, .mobile-settings-screen) .settings-panel select { min-height: 44px; font-size: 16px; }
  .settings-media-test :is(.mic-meter, .cam-preview) { margin-left: 0; width: 100%; max-width: none; }
}

.settings-control-row .slider-row input { min-width: 0; }

/* Emoji-aware profile text fields (bio, status text, typing indicator text). */
.profile-emoji-field { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.profile-emoji-field > :is(input, textarea) { flex: 1; width: 100%; max-width: none; min-width: 0; min-height: 42px; margin: 0; border-radius: var(--radius); }
.profile-emoji-field > textarea { min-height: 96px; resize: vertical; }
.profile-emoji-field > .profile-emoji-btn { flex: none; width: 42px; height: 42px; min-height: 42px; padding: 0; margin: 0; display: grid; place-items: center; border-radius: var(--radius); color: var(--muted); }
.profile-emoji-field > .profile-emoji-btn:hover { color: var(--text); }
.typing-text-editor { display: grid; gap: 6px; min-width: 0; }
.typing-text-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 12px; }
.typing-text-count { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
.typing-text-preview-wrap { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; background: var(--bg-2); border-radius: var(--radius); }
.typing-text-preview-label { flex: none; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.typing-text-preview-wrap .typing { flex: 1; min-width: 0; padding: 0; min-height: 18px; }
@media (max-width: 800px) {
  .profile-emoji-field > :is(input, textarea) { min-height: 44px; font-size: 16px; }
  .profile-emoji-field > textarea { min-height: 96px; }
  .profile-emoji-field > .profile-emoji-btn { width: 44px; height: 44px; min-height: 44px; }
  .typing-text-meta { flex-direction: column; gap: 2px; }
}