/* Settings SPA page (settings.html). Reuses modal.css for the settings-form,
   switches, profile/account cards, and danger buttons; this file adds the
   full-page shell (header with Cancel/Save instead of a "Back to chats" link)
   and the scrolling body. Mirrors the layout of system-prompts.css so the
   #settings page matches #search and #prompts. */
.hidden { display: none !important; }

/* In-app overlay container (index.html). Fetched markup is injected here and
   floated above the app shell so the settings view fully replaces the chat
   view without unmounting it (chat state + scroll are preserved underneath).
   On the standalone settings.html there is no .settings-overlay; .settings-page
   is the page body itself. */
.settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--bg);
  overflow: auto;
}

.settings-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: min(900px, 100%);
  height: 100dvh;
  margin: 0 auto;
  padding: 28px 24px 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
}

/* Desktop: profile card on the left, everything else stacked on the right.
   The profile column is fixed-width and sticks to the top while the right
   column scrolls with the page body. Collapses to a single column on mobile
   (see the max-width block below). */
.settings-form {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  align-items: start;
  gap: 18px 24px;
}
.settings-form > .settings-profile-card {
  position: sticky;
  top: 0;
}
.settings-main {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.settings-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.settings-header h1 { margin: 0; font-size: 22px; text-align: center; }

.settings-header-cancel,
.settings-header-save {
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.settings-header-cancel { justify-self: start; }
.settings-header-save {
  justify-self: end;
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.settings-header-cancel:hover { border-color: var(--accent); }
.settings-header-save:hover { filter: brightness(.96); }
.settings-header-save:disabled { cursor: progress; opacity: .58; }

/* Scroll container for the settings sections. The padding + negative margin
   keep focus outlines from being clipped at the scroll edges. */
.settings-page-body {
  min-height: 0;
  overflow: auto;
  padding: 8px;
  margin: 0 -8px;
  padding-bottom: 28px;
}

/* modal.css scopes input styling to `.modal input`; the account password rows
   on this page need the same treatment outside a modal. */
.settings-page input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  color: var(--text);
  outline: none;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.settings-page input::placeholder { color: var(--placeholder); opacity: 1; }
.settings-page input:focus { border-color: var(--accent); }

@media (max-width: 820px) {
  .settings-page { width: min(620px, 100%); padding: 18px 16px 0; }
  /* Stack profile above the rest on narrow screens (the original layout). */
  .settings-form { grid-template-columns: 1fr; }
  .settings-form > .settings-profile-card { position: static; }
}