/* ------------------------------------------------------------ 0.13: Settings, laid out like WhatsApp's */
.settings-dialog { display: flex; flex-direction: column; width: min(520px, calc(100vw - 24px)); height: min(780px, calc(100dvh - 48px)); padding: 0; overflow: hidden; }
.settings-dialog:not([open]) { display: none; }
.settings-bar { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; min-height: 62px; padding: 8px 10px 8px 6px; border-bottom: 1px solid var(--line); background: var(--surface); }
.settings-bar h2 { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 20px; font-weight: 600; letter-spacing: -.2px; }
/* Each page's title takes the focus (for screen readers) without a ring around it. */
#settings-title:focus { outline: none; }
.settings-search { flex: 0 0 auto; margin: 10px 14px 4px; }
.settings-pages { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.settings-page { padding: 4px 0 28px; }
.settings-page:not(.active) { display: none; }
.settings-page .row-text, .settings-profile .row-text { display: grid; flex: 1; min-width: 0; gap: 2px; }
.settings-profile { display: flex; align-items: center; gap: 16px; width: 100%; padding: 16px 18px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; }
.settings-profile:hover { background: var(--row-hover, #f3f6f4); }
.settings-profile strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 19px; font-weight: 600; }
.settings-profile small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--muted); font-size: 14px; }
.settings-row { display: flex; align-items: center; gap: 20px; width: 100%; min-height: 62px; padding: 11px 18px; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.settings-row:hover { background: var(--row-hover, #f3f6f4); }
.settings-row.static { cursor: default; }
.settings-row.static:hover { background: transparent; }
.settings-row .row-text strong { overflow-wrap: anywhere; font-size: 16px; font-weight: 500; line-height: 1.35; }
.settings-row .row-text small { color: var(--muted); font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.settings-row .row-text small:empty { display: none; }
.row-icon { width: 24px; height: 24px; color: var(--muted); }
.row-end { width: 20px; height: 20px; color: var(--muted); }
.settings-row.danger, .settings-row.danger .row-text strong, .settings-row.danger .row-icon { color: var(--danger); }
.settings-row.flash { animation: settings-flash 1.6s ease; }
@keyframes settings-flash { 0%, 40% { background: var(--accent-soft); } }
.settings-section { padding: 18px 18px 6px; color: var(--muted) !important; font-size: 14px !important; font-weight: 500 !important; }
.settings-note { padding: 6px 18px 10px; color: var(--muted); font-size: 13.5px !important; line-height: 1.55 !important; }
.settings-note.small { font-size: 12px !important; }
.settings-note .text-button { padding: 4px 0; }
.settings-text { display: grid; gap: 10px; padding: 14px 18px 6px; color: var(--body); }
.settings-text p, .settings-text li { font-size: 15px; line-height: 1.6; }
.settings-text ul { display: grid; gap: 6px; margin: 0; padding-left: 22px; }
.settings-text h3 { margin-top: 8px; font-size: 16px; }
.settings-inset { margin: 6px 18px 0 !important; }
.settings-form { display: grid; gap: 10px; padding: 16px 18px; }
.settings-form input { width: 100%; font-size: 16px !important; }
.settings-form .button-row { margin-top: 4px; }
.settings-actions { padding: 0 18px 12px 62px; }
.settings-foot { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 22px 18px 6px; color: var(--muted); font-size: 13px !important; }
.settings-foot .brand-mark { width: 26px; height: 26px; border-radius: 8px; font-size: 16px; }
.primary-button.danger-fill { border-color: var(--danger); background: var(--danger); color: white; }
.primary-button.danger-fill:hover:not(:disabled) { border-color: var(--danger); background: var(--danger); filter: brightness(.92); }

/* On/off switches, as in phone settings. */
.switch { appearance: none; position: relative; flex: 0 0 auto; width: 42px; height: 24px; margin: 0; border-radius: 12px; background: var(--switch-off, #b6c2bd); cursor: pointer; transition: background-color .15s ease; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: white; box-shadow: 0 1px 3px #0000003d; transition: transform .15s ease; }
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(18px); }
.switch:disabled { opacity: .5; cursor: not-allowed; }

/* Choices: one tap picks an option and goes back, like WhatsApp's option dialogs. */
.settings-radios { display: grid; }
.settings-radio { display: flex; align-items: center; gap: 18px; min-height: 56px; padding: 10px 18px; cursor: pointer; }
.settings-radio:hover { background: var(--row-hover, #f3f6f4); }
.settings-radio input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.settings-radio .row-text { display: grid; flex: 1; gap: 2px; }
.settings-radio strong { color: var(--ink); font-size: 16px; font-weight: 500; }
.settings-radio small { color: var(--muted); font-size: 13.5px; }

/* 0.15: Translation → Voice for translations: each voice with a ▶ to hear it. */
.voice-row { display: flex; align-items: center; padding-right: 8px; }
.voice-row .settings-radio { flex: 1; min-width: 0; }
.voice-row .settings-radio strong, .voice-row .settings-radio small { overflow-wrap: anywhere; }
.voice-sample { color: var(--accent); }
.voice-sample svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.voice-sample.playing { background: var(--accent-soft); }
.voice-sample:disabled { visibility: hidden; }
.voice-more { justify-self: start; margin: 2px 18px 8px 56px; }

/* Profile */
.profile-photo { position: relative; width: 148px; height: 148px; margin: 22px auto 4px; }
.photo-edit { position: absolute; right: 0; bottom: 4px; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 3px solid var(--surface); border-radius: 50%; background: var(--accent); color: white; }
.photo-edit svg { width: 21px; height: 21px; }
.profile-photo-actions { margin: 4px 0 10px; }
.profile-photo.busy .avatar { opacity: .55; }
.avatar.xlarge { width: 62px; height: 62px; font-size: 26px; }
.avatar.huge { width: 148px; height: 148px; font-size: 58px; }
.avatar img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.avatar.has-photo { overflow: hidden; background: var(--photo-back, #dfe6e2); }
.settings-page[data-page="profile"] .row-text strong { font-size: 17px; }

/* Wallpaper */
.wallpaper-preview { flex: none !important; gap: 8px !important; height: 180px; min-height: 0 !important; margin: 14px 18px 8px; padding: 18px 16px !important; overflow: hidden !important; border: 1px solid var(--line); border-radius: 14px; }
/* Sample bubbles, styled like messages but not messages (nothing that looks for messages finds them). */
.preview-bubble { position: relative; max-width: 78%; padding: 7px 10px; border-radius: 0 10px 10px; background: white; color: #1f3a30; box-shadow: 0 1px 1.5px #2b3e2e1a; font-size: 14px; line-height: 1.45; }
.preview-bubble.incoming { align-self: flex-start; }
.preview-bubble.outgoing { align-self: flex-end; border-radius: 10px 0 10px 10px; background: #d9f6c8; }
.preview-bubble::before { content: ''; position: absolute; top: 0; border-top: 8px solid white; }
.preview-bubble.incoming::before { left: -7px; border-left: 8px solid transparent; }
.preview-bubble.outgoing::before { right: -7px; border-top-color: #d9f6c8; border-right: 8px solid transparent; }
.wallpaper-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 8px 18px 12px; }
.wallpaper-swatch { display: grid; align-content: end; aspect-ratio: 3 / 4; min-width: 0; padding: 6px; border: 2px solid var(--line); border-radius: 12px; color: #33433c; font-size: 12px; font-weight: 600; text-align: center; }
.wallpaper-swatch[aria-checked='true'] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }

/* Search results and the chats to export. */
.settings-result small { color: var(--accent) !important; }
#export-chat-list .settings-row, #settings-search-results .settings-row { min-height: 58px; }
#export-chat-list .avatar { width: 42px; height: 42px; }

@media (max-width: 760px) {
  .settings-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; border-radius: 0; }
  .settings-bar { padding-top: max(8px, env(safe-area-inset-top)); }
  .settings-pages { padding-bottom: env(safe-area-inset-bottom); }
  .settings-row { gap: 18px; padding: 11px 16px; }
  .wallpaper-grid { gap: 8px; }
}

/* Chat details: a person's photo, About and last seen, as on a WhatsApp contact page. */
.info-person { display: grid; justify-items: center; gap: 4px; margin: -4px 0 12px; text-align: center; }
.info-person .avatar { width: 112px; height: 112px; margin-bottom: 6px; font-size: 44px; }
.info-person strong { color: var(--ink); font-size: 20px; font-weight: 600; }
.info-person small { color: var(--muted); font-size: 14px; }
.info-about { max-width: 100%; margin-top: 4px; padding: 8px 12px; border-radius: 10px; background: var(--accent-soft); color: var(--body); font-size: 14px; overflow-wrap: anywhere; }
.person-copy .person-about { color: var(--muted); font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.conversation-heading p.online { color: var(--accent); }