/* ═══════════════════════════════════════
   pages.css — Inner page view styles v1
   ═══════════════════════════════════════ */

/* ── SHARED PAGE SCROLL BODY ── */
.page-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; }
.page-section {
  background: var(--glass); border: 1px solid var(--border);
  border-radius: var(--r-lg); margin-bottom: 12px; overflow: hidden;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.page-section-head {
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text3);
  display: flex; align-items: center; gap: 8px;
}
.page-section-head svg { width: 14px; height: 14px; }
.page-section-body { padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }

/* ── CUSTOMIZE PAGE ── */
/* Background preview */
.bg-preview {
  width: 100%; height: 140px; border-radius: var(--r-md);
  background: var(--surface2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative; margin-bottom: 8px;
}
.bg-preview img,.bg-preview video {
  width:100%; height:100%; object-fit:cover; border-radius: var(--r-md);
}
.bg-preview-empty { font-size:13px; color:var(--text3); }
.bg-preview-label {
  position: absolute; bottom: 6px; right: 8px;
  font-size: 10px; color: rgba(255,255,255,0.5);
  background: rgba(0,0,0,0.5); padding: 2px 6px; border-radius: var(--r-pill);
}

/* Blur slider */
.blur-row { display:flex; align-items:center; gap:10px; }
.blur-row label { font-size:12px; color:var(--text2); flex-shrink:0; }
.blur-slider {
  flex:1; -webkit-appearance:none; height:3px;
  background: var(--border2); border-radius:2px; outline:none; border:none;
  background-image: linear-gradient(var(--text2), var(--text2));
  background-size: 50% 100%; background-repeat: no-repeat;
}
.blur-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:16px; height:16px; border-radius:50%;
  background:var(--text); cursor:pointer;
}
.blur-value { font-size:12px; color:var(--text2); width:32px; text-align:right; }

/* Action buttons in customize */
.page-action-btn {
  width:100%; padding:12px 14px; border-radius:var(--r-md);
  background:var(--surface2); border:1px solid var(--border);
  display:flex; align-items:center; gap:10px;
  font-size:13px; font-weight:600; color:var(--text);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.page-action-btn:hover { background:var(--surface3); border-color:var(--border2); }
.page-action-btn svg { width:16px; height:16px; color:var(--text2); flex-shrink:0; }

.page-danger-btn { border-color:rgba(248,113,113,0.25); color:var(--red); }
.page-danger-btn:hover { background:rgba(248,113,113,0.08); border-color:rgba(248,113,113,0.4); }

/* ── MODELS PAGE ── */
.model-card {
  padding: 14px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
  transition: background var(--t-fast), border-color var(--t-fast);
  cursor: pointer;
}
.model-card:hover { background: var(--surface2); border-color: var(--border2); }
.model-card.selected { border-color: var(--border3); background: var(--surface2); }
.model-card-radio {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--border2); background: transparent;
  display: flex; align-items: center; justify-content: center;
}
.model-card.selected .model-card-radio::after {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--text);
}
.model-card-info { flex: 1; min-width: 0; }
.model-card-name { font-size: 13px; font-weight: 700; }
.model-card-desc { font-size: 11px; color: var(--text3); margin-top: 2px; }
.model-card-badge { font-size: 10px; padding: 2px 7px; border-radius: var(--r-pill); background: var(--surface2); border: 1px solid var(--border); color: var(--text3); flex-shrink: 0; }

/* Provider section headers */
.provider-head {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text3); padding: 6px 0 4px; margin-top: 6px;
}

/* ── SETTINGS PAGE ── */
.settings-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 0; border-bottom: 1px solid var(--border);
}
.settings-toggle-row:last-child { border-bottom: none; }
.settings-toggle-label { font-size: 13px; font-weight: 500; }
.settings-toggle-sub   { font-size: 11px; color: var(--text3); margin-top: 2px; }

/* Toggle switch */
.toggle-track {
  width: 36px; height: 20px; border-radius: 10px;
  background: var(--surface3); border: 1px solid var(--border2);
  padding: 2px; flex-shrink: 0; transition: background 0.2s;
}
.toggle-track.on { background: var(--text); border-color: var(--text); }
.toggle-thumb {
  width: 14px; height: 14px; border-radius: 50%; background: var(--bg);
  transition: transform 0.22s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.toggle-track.on .toggle-thumb { transform: translateX(16px); }
.toggle-track:not(.on) .toggle-thumb { background: var(--text2); }

/* ── ABOUT PAGE ── */
.about-logo-wrap { text-align: center; padding: 28px 0 20px; }
.about-logo-box {
  display: inline-flex; width: 70px; height: 70px; border-radius: 20px;
  background: var(--surface2); border: 1px solid var(--border2);
  align-items: center; justify-content: center;
  font-size: 36px; font-weight: 900; color: var(--text); margin: 0 auto 12px;
}
.about-name { font-size: 22px; font-weight: 800; }
.about-version { font-size: 12px; color: var(--text3); margin-top: 4px; }

.about-link-row {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 0; border-bottom: 1px solid var(--border);
  font-size: 13px; color: var(--text2);
}
.about-link-row:last-child { border-bottom: none; }
.about-link-row svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Chats view — conversation list */
.conv-list-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background var(--t-fast);
}
.conv-list-item:hover { background: var(--surface); }
.conv-list-item.active { background: var(--surface2); }
.conv-avatar {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: var(--surface2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.conv-info { flex: 1; min-width: 0; }
.conv-title { font-size: 13px; font-weight: 600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conv-preview { font-size: 11px; color: var(--text3); margin-top: 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conv-meta { font-size: 10px; color: var(--text3); flex-shrink:0; }
.conv-actions-row { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.conv-action-btn { width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--border);color:var(--text3); }
.conv-action-btn:hover { color:var(--text); background:var(--surface2); }
.conv-action-btn svg { width:13px;height:13px; }

.empty-state { text-align:center; padding:40px 20px; color:var(--text3); font-size:13px; }
.empty-state-icon { font-size:36px; margin-bottom:12px; }