/* ══════════════════════════════════════════════════════════════════════════
   AI Chat Console — Account / Settings pages (account.php)
   Moved out of account.php's former ~610-line inline <style> block, plus the
   2026 modern pass at the bottom of this file.
   Load order: tokens.css → app.css → ui.css → settings.css
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Color theme picker — mini preview cards ─────── */
.theme-card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; }
.theme-card {
  border-radius:12px; border:2px solid var(--border);
  overflow:hidden; cursor:pointer; font-family:inherit;
  background:none; padding:0; text-align:left;
  transition:border-color .15s, transform .1s, box-shadow .15s;
}
.theme-card:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.12); }
.theme-card:active { transform:scale(.97); }
.theme-card.selected { border-color:var(--tc,var(--primary)); box-shadow:0 0 0 3px hsl(var(--th,var(--primary-h)) var(--ts,var(--primary-s)) var(--tl,var(--primary-l)) / .2); }
/* Mini app preview inside each card */
.tc-preview { height:56px; display:flex; overflow:hidden; }
.tc-sidebar {
  width:30%; display:flex; flex-direction:column; gap:3px; padding:6px 4px;
  border-right:1px solid;
}
.tc-main { flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:3px; padding:5px; }
.tc-session { height:6px; border-radius:3px; }
.tc-ai-msg { height:7px; border-radius:3px; width:70%; align-self:flex-start; }
.tc-user-msg { height:7px; border-radius:3px; width:55%; align-self:flex-end; }
/* Card footer */
.tc-footer {
  display:flex; align-items:center; justify-content:space-between;
  padding:5px 8px; border-top:1px solid rgba(0,0,0,.07);
  font-size:.72rem; font-weight:600; color:var(--text);
}
.tc-check { width:15px; height:15px; border-radius:50%; background:var(--tc,var(--primary)); color:#fff; display:none; align-items:center; justify-content:center; font-size:9px; }
.theme-card.selected .tc-check { display:flex; }

/* ── Provider cards (API Keys tab) ──────────────── */
.pk-card { background:var(--surface); border:1.5px solid var(--border); border-radius:14px; overflow:hidden; transition:border-color .2s; margin-bottom:10px; }
.pk-card.is-connected { border-color:var(--primary); }
.pk-header { display:flex; align-items:center; gap:14px; padding:14px 18px; cursor:pointer; user-select:none; }
.pk-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.85rem; color:#fff; flex-shrink:0; }
.pk-info { flex:1; min-width:0; }
.pk-info h3 { font-size:.95rem; font-weight:600; color:var(--text); margin:0; }
.pk-info p  { font-size:.75rem; color:var(--muted); margin:2px 0 0; }
.pk-badge { font-size:.7rem; font-weight:700; padding:3px 10px; border-radius:20px; flex-shrink:0; }
.pk-badge.on  { background:#dcfce7; color:#166534; }
.pk-badge.off { background:var(--bg); color:var(--muted); border:1px solid var(--border); }
[data-theme="dark"] .pk-badge.on { background:#14532d; color:#86efac; }
.pk-toggle { position:relative; width:42px; height:22px; flex-shrink:0; }
.pk-toggle input { opacity:0; width:0; height:0; position:absolute; }
.pk-track { position:absolute; inset:0; background:var(--border); border-radius:22px; cursor:pointer; transition:background .2s; }
.pk-track::after { content:''; position:absolute; width:16px; height:16px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform .2s; box-shadow:0 1px 4px rgba(0,0,0,.2); }
.pk-toggle input:checked + .pk-track { background:var(--primary); }
.pk-toggle input:checked + .pk-track::after { transform:translateX(20px); }
.pk-body { display:none; padding:0 18px 18px; border-top:1px solid var(--border); animation:pkSlide .18s ease; }
.pk-body.open { display:block; }
@keyframes pkSlide { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:translateY(0)} }

.pk-field { margin-top:14px; }
.pk-field > label { display:block; font-size:.78rem; font-weight:600; color:var(--text); margin-bottom:5px; }
.pk-key-row { display:flex; gap:8px; }
.pk-key-row input { flex:1; font-family:'Fira Code','Consolas',monospace; font-size:.83rem; }
.pk-eye { width:36px; height:36px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--bg); border:1px solid var(--border); border-radius:8px; cursor:pointer; color:var(--muted); transition:background .15s; }
.pk-eye:hover { background:var(--border); color:var(--text); }
.pk-hint { display:flex; justify-content:space-between; margin-top:5px; }
.pk-hint span { font-size:.73rem; color:var(--muted); }
.pk-hint a { font-size:.73rem; color:var(--primary); text-decoration:none; font-weight:600; }
.pk-model-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:6px; }
.pk-model-opt { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1.5px solid var(--border); border-radius:8px; cursor:pointer; font-size:.8rem; color:var(--text); transition:border-color .15s,background .15s; font-family:inherit; background:none; width:100%; text-align:left; }
.pk-model-opt:hover, .pk-model-opt.checked { border-color:var(--primary); background:var(--primary-light); font-weight:600; }
.pk-model-group-label { grid-column:1/-1; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); padding:6px 2px 2px; }
.pk-or-info { padding:10px 12px; background:var(--bg); border-radius:8px; border:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px; }
.pk-or-info-text { font-size:.82rem; }
.pk-or-info-text small { display:block; font-size:.72rem; color:var(--muted); margin-top:1px; }
.pk-disconnect { margin-top:12px; font-size:.75rem; color:var(--danger); background:none; border:none; cursor:pointer; padding:0; font-family:inherit; text-decoration:underline; }

/* ── ZDR row ─────────────────────────────────────── */
.pk-zdr-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0 0; border-top:1px solid var(--border); margin-top:14px; }
.pk-zdr-info { flex:1; min-width:0; }
.pk-zdr-label { display:flex; align-items:center; gap:7px; margin-bottom:4px; flex-wrap:wrap; }
.pk-zdr-label strong { font-size:.82rem; font-weight:700; color:var(--text); }
.pk-zdr-note { font-size:.73rem; color:var(--muted); line-height:1.5; }
.pk-zdr-note code { font-size:.71rem; background:var(--bg); border:1px solid var(--border); border-radius:3px; padding:1px 4px; color:var(--text); }
.pk-zdr-badge { display:inline-flex; align-items:center; gap:4px; font-size:.65rem; font-weight:700; padding:2px 8px; border-radius:20px; white-space:nowrap; letter-spacing:.04em; text-transform:uppercase; }
.pk-zdr-full    { background:rgba(16,185,129,.1);  color:#059669; }
.pk-zdr-limited { background:rgba(245,158,11,.1);  color:#d97706; }
.pk-zdr-none    { background:rgba(100,116,139,.1); color:var(--muted); }
.pk-toggle-disabled { opacity:.4; cursor:not-allowed; pointer-events:none; }

/* ── Shortcuts ───────────────────────────────────── */
.sc-toolbar { display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.sc-toolbar-left { display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.sc-count-badge { display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:22px; padding:0 6px; background:var(--primary); color:#fff;
  border-radius:20px; font-size:.7rem; font-weight:800; }
.sc-search { position:relative; flex:1; max-width:260px; }
.sc-search svg { position:absolute; left:9px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; }
.sc-search input { width:100%; padding:7px 10px 7px 30px; font-size:.82rem;
  border:1px solid var(--border); border-radius:8px; background:var(--bg); color:var(--text); }
.sc-search input:focus { outline:none; border-color:var(--primary); }

.sc-list { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.sc-card { background:var(--surface); border:1.5px solid var(--border); border-radius:12px;
  overflow:hidden; transition:border-color .15s, box-shadow .15s; }
.sc-card:hover { border-color:var(--primary); box-shadow:0 2px 12px rgba(0,0,0,.06); }
.sc-card.sc-editing { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent); }
.sc-card-header { display:flex; align-items:center; gap:10px; padding:13px 16px; cursor:pointer; }
.sc-card-trigger { font-family:'Fira Code','Consolas',monospace; font-size:.8rem; font-weight:700;
  color:var(--primary); background:var(--primary-light); padding:3px 8px; border-radius:6px;
  flex-shrink:0; white-space:nowrap; }
.sc-card-label { font-size:.9rem; font-weight:700; color:var(--text); flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sc-card-actions { display:flex; align-items:center; gap:4px; flex-shrink:0; }
.sc-btn { display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border:none;
  border-radius:7px; font-size:.75rem; font-weight:600; font-family:inherit; cursor:pointer;
  transition:background .15s, color .15s; white-space:nowrap; }
.sc-btn-edit  { background:var(--bg); color:var(--text); border:1px solid var(--border); }
.sc-btn-edit:hover  { background:var(--primary-light); color:var(--primary); border-color:var(--primary); }
/* Advanced had no rule of its own, so it fell back to .sc-btn's `border:none`
   and rendered as a bare grey slab beside three bordered buttons. Same neutral
   treatment as Edit; only the hover accent differs. */
.sc-btn-adv   { background:var(--bg); color:var(--text); border:1px solid var(--border); }
.sc-btn-adv:hover   { background:var(--primary-light); color:var(--primary); border-color:var(--primary); }
.sc-btn-dupe  { background:var(--bg); color:var(--text); border:1px solid var(--border); }
.sc-btn-dupe:hover  { background:#f0fdf4; color:#16a34a; border-color:#86efac; }
.sc-btn-del   { background:var(--bg); color:var(--muted); border:1px solid var(--border); }
.sc-btn-del:hover   { background:#fff1f2; color:#dc2626; border-color:#fca5a5; }
.sc-card-preview { padding:0 16px 13px; font-size:.78rem; color:var(--muted); line-height:1.5;
  border-top:1px solid var(--border); padding-top:10px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; max-height:calc(2em * 2); }

/* inline editor panel */
/* Height is animated in JS (_scSlideOpen / _scSlideClose in account.php) —
   scrollHeight is measured per panel, because an inline editor is a few rows
   while the advanced panel can be many hundreds of pixels and no single
   max-height suits both. The keyframe here only handles the inner settle, so
   the CONTENT eases in rather than being fully drawn the instant the container
   starts opening. */
.sc-editor { border-top:1px solid var(--border); padding:16px; background:var(--bg); }
.sc-editor > *, .sc-add-panel > * { animation:scSettle .26s cubic-bezier(.4,0,.2,1) both; }
@keyframes scSettle { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:translateY(0)} }
/* Anyone who has asked the OS for less motion gets the state change with no
   movement at all — the JS height transition is inert here too, since a 0s
   duration still fires transitionend. */
@media (prefers-reduced-motion: reduce) {
  .sc-editor > *, .sc-add-panel > * { animation:none; }
  .sc-editor, .sc-add-panel { transition-duration:.01ms !important; }
}
.sc-editor-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.sc-editor > label,
.sc-editor .sc-editor-grid label { display:block; font-size:.75rem; font-weight:700; color:var(--text); margin-bottom:4px; }
.sc-editor input:not([type="radio"]):not([type="checkbox"]) { width:100%; }
.sc-editor textarea { width:100%; min-height:90px; resize:vertical; font-size:.85rem; }
.sc-editor-footer { display:flex; align-items:center; justify-content:space-between; margin-top:12px; gap:8px; flex-wrap:wrap; }
.sc-char-count { font-size:.72rem; color:var(--muted); }
.sc-char-count.warn { color:#d97706; }
.sc-char-count.over { color:#dc2626; font-weight:700; }
.sc-editor-btns { display:flex; gap:8px; }

/* new shortcut inline panel (add-at-bottom) */
.sc-add-panel { background:var(--surface); border:1.5px dashed var(--border); border-radius:12px;
  padding:16px; margin-top:4px; display:none; }
.sc-add-panel.open { display:block; }
.sc-add-panel-title { font-size:.9rem; font-weight:700; color:var(--text); margin-bottom:14px; display:flex; align-items:center; gap:8px; }
/* Type toggle */
.sc-type-toggle { display:inline-flex; border:1.5px solid var(--border); border-radius:8px; overflow:hidden; margin-bottom:14px; }
.sc-type-btn { padding:5px 16px; font-size:.78rem; font-weight:600; background:none; border:none; cursor:pointer;
  color:var(--muted); font-family:inherit; transition:background .15s,color .15s; }
.sc-type-btn.active { background:var(--primary); color:#fff; }
/* Fix: .sc-editor input catches radio buttons — exclude them */
.sc-editor input:not([type="radio"]):not([type="checkbox"]) { width:100%; }

/* Image-specific fields */
.sc-image-fields { display:none; border-top:1px solid var(--border); margin-top:14px; padding-top:14px; }
.sc-image-fields.visible { display:block; }
.sc-image-section-label { font-size:.7rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:var(--muted); margin-bottom:10px; }
.sc-image-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin-bottom:4px; }
.sc-field-group { margin-bottom:14px; }
.sc-field-group > label { display:block !important; font-size:.75rem; font-weight:700;
  color:var(--text); margin-bottom:5px; }
/* Inputs, selects, textareas — match the rest of the settings page */
.sc-field-group select,
.sc-field-group input[type="text"],
.sc-field-group input[type="number"],
.sc-field-group textarea {
  width:100%; box-sizing:border-box;
  padding:8px 10px; font-size:.83rem; font-family:inherit;
  border:1px solid var(--border); border-radius:8px;
  background:var(--bg); color:var(--text);
  transition:border-color .15s; outline:none; }
.sc-field-group select:focus,
.sc-field-group input[type="text"]:focus,
.sc-field-group input[type="number"]:focus,
.sc-field-group textarea:focus { border-color:var(--primary); }
.sc-field-group textarea { min-height:70px; resize:vertical; font-family:'Fira Code','Consolas',monospace; font-size:.8rem; line-height:1.5; }
.sc-field-hint { font-size:.7rem; color:var(--muted); margin-top:4px; line-height:1.4; }
.sc-field-hint code { background:var(--bg); border:1px solid var(--border); border-radius:3px; padding:0 4px; font-size:.95em; }

/* ── Advanced shortcut editor (delivery / variables / overrides / steps) ──── */
.sc-field-label {
  display:block; font-size:.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted); margin-bottom:6px;
}
.sc-sub-label { display:block; font-size:.7rem; color:var(--muted); margin-bottom:3px; }
.sc-delivery-mode { flex-wrap:wrap; gap:10px; }
.sc-rec {
  font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--primary); background:color-mix(in srgb, var(--primary) 12%, transparent);
  border-radius:10px; padding:1px 6px; margin-left:4px;
}
.sc-grid-2 { display:grid; grid-template-columns:2fr 1fr; gap:10px; }
.sc-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
@media (max-width:640px) {
  .sc-grid-2, .sc-grid-3 { grid-template-columns:1fr; }
}

.sc-vars-list { display:flex; flex-direction:column; gap:8px; }
.sc-var-row {
  display:grid; grid-template-columns:auto 1fr auto auto; gap:8px; align-items:center;
  background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:8px 10px;
}
/* The options box only appears for "Choices", so it spans its own row rather
   than squeezing the four controls above into a fifth column. */
.sc-var-row .sc-var-options { grid-column:1 / -1; }
.sc-var-key { font-size:.72rem; color:var(--primary); white-space:nowrap; }
.sc-var-req { display:flex; align-items:center; gap:4px; font-size:.7rem; color:var(--muted); white-space:nowrap; }
.sc-var-req input { margin:0; }
@media (max-width:640px) {
  .sc-var-row { grid-template-columns:1fr; }
}

.sc-steps-list { display:flex; flex-direction:column; gap:8px; margin-bottom:8px; }
.sc-step-row { background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:8px 10px; }
.sc-step-head { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.sc-step-head .sc-step-label { flex:1; }
.sc-step-del {
  background:none; border:0; color:var(--muted); font-size:1.1rem; line-height:1;
  cursor:pointer; padding:0 4px; border-radius:4px;
}
.sc-step-del:hover { color:#ef4444; background:color-mix(in srgb,#ef4444 10%,transparent); }
/* Prompt mode radios */
.sc-prompt-mode { display:flex; gap:18px; flex-wrap:wrap; }
.sc-prompt-mode label { display:flex !important; align-items:center; gap:6px;
  font-size:.82rem; font-weight:500; color:var(--text); cursor:pointer;
  margin-bottom:0 !important; }
.sc-prompt-mode input[type="radio"] { width:auto !important; accent-color:var(--primary); }
/* Auto-run checkbox row */
.sc-autorun-row { display:flex; align-items:center; gap:8px; margin-bottom:0; }
.sc-autorun-row input[type="checkbox"] { width:auto !important; accent-color:var(--primary); flex-shrink:0; }
.sc-autorun-row label { font-size:.82rem; font-weight:500; color:var(--text);
  cursor:pointer; margin-bottom:0 !important; }
/* Card badges */
.sc-badge { display:inline-flex; align-items:center; gap:3px; padding:1px 7px; border-radius:99px;
  font-size:.68rem; font-weight:700; background:color-mix(in srgb,var(--primary) 12%,transparent);
  color:var(--primary); margin-left:6px; }
.sc-card-preview.is-image { font-style:italic; color:var(--muted); }
@media (max-width:600px) { .sc-image-grid { grid-template-columns:1fr 1fr; } }

/* empty state */
.sc-empty { text-align:center; padding:40px 20px; color:var(--muted); }
.sc-empty svg { opacity:.25; margin-bottom:12px; }
.sc-empty p { font-size:.88rem; margin-bottom:16px; }

@media (max-width:600px) {
  .sc-editor-grid { grid-template-columns:1fr; }
  /* Labels are dropped to fit four buttons on a narrow row — but not Edit's.
     Four unlabelled icons in a line are indistinguishable, and Edit is the one
     people are actually reaching for, so it keeps its word and the destructive
     and secondary actions go icon-only. */
  .sc-card-actions .sc-btn span { display:none; }
  .sc-card-actions .sc-btn-edit span { display:inline; }
  .sc-card-actions .sc-btn-edit { padding:5px 12px; }
  .sc-search { max-width:100%; }
}

/* ── Section cards ───────────────────────────────── */
.acct-section { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:22px; margin-bottom:16px; }
.acct-section h2 { font-size:1rem; font-weight:700; margin-bottom:16px; color:var(--text); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-group { margin-bottom:14px; }
.form-group label { display:block; font-size:.78rem; font-weight:600; color:var(--text); margin-bottom:5px; }
.acct-info { display:flex; gap:20px; margin-bottom:20px; }
.stat-box { flex:1; text-align:center; padding:14px; background:var(--bg); border-radius:10px; border:1px solid var(--border); }
.stat-box strong { display:block; font-size:1.4rem; font-weight:800; color:var(--primary); }
.stat-box span { font-size:.72rem; color:var(--muted); }
.danger-zone { border-color:#ef4444 !important; }
.danger-zone h2 { color:#ef4444; }

/* ── Page wrapper ────────────────────────────────── */
.settings-h1 { font-size:1.25rem; font-weight:700; margin-bottom:4px; color:var(--text); }
.settings-h1-sub { font-size:.82rem; color:var(--muted); margin-bottom:20px; }

/* ── Mobile ──────────────────────────────────────── */
@media (max-width:700px) {
  .settings-wrap { flex-direction:column; height:100dvh; overflow:hidden; }
  .settings-sidebar { display:flex!important; width:100%!important; min-width:unset!important; height:auto!important; flex-direction:row!important; overflow-x:auto!important; overflow-y:hidden!important; padding:6px 8px!important; border-right:none!important; border-bottom:1px solid var(--border)!important; position:sticky; top:0; z-index:10; gap:4px!important; scrollbar-width:none; }
  .settings-sidebar::-webkit-scrollbar { display:none; }
  .settings-sidebar > div[style*="flex:1"] { display:none!important; }
  .settings-nav-link { white-space:nowrap!important; margin:0!important; flex-shrink:0!important; padding:7px 12px!important; font-size:.78rem!important; width:auto!important; border-radius:8px; }
  .settings-main, .settings-main-panel { height:auto!important; flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .settings-main > div, .settings-main-panel > div { padding:14px!important; }
  .form-row { grid-template-columns:1fr; }
  .acct-info { gap:8px; }
  .pk-model-grid { grid-template-columns:1fr; }
}

/* ── Chat history ─────────────────────────────────────────────────────────── */
.hist-toolbar {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:14px 18px; border-bottom:1px solid var(--border);
  background:var(--surface);
}
.hist-search-wrap {
  position:relative; flex:1; min-width:180px; max-width:320px;
}
.hist-search-wrap svg {
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  color:var(--muted); pointer-events:none;
}
#hist-search {
  width:100%; padding:7px 11px 7px 32px;
  border:1px solid var(--border); border-radius:8px;
  background:var(--bg); color:var(--text); font-size:.82rem;
  outline:none; transition:border-color .15s;
}
#hist-search:focus { border-color:var(--primary); }
/* Time filter pills */
.hist-pills { display:flex; gap:5px; flex-wrap:wrap; }
.hist-pill {
  padding:5px 12px; border-radius:20px; font-size:.75rem; font-weight:600;
  border:1px solid var(--border); background:var(--bg); color:var(--muted);
  cursor:pointer; white-space:nowrap; transition:all .12s;
}
.hist-pill:hover { border-color:var(--primary); color:var(--primary); }
.hist-pill.active { background:var(--primary); border-color:var(--primary); color:#fff; }
/* Items */
.hist-item {
  display:flex; align-items:center; gap:12px;
  padding:12px 18px; border-bottom:1px solid var(--border);
  transition:background .12s; cursor:default;
}
.hist-item:last-child { border-bottom:none; }
.hist-item:hover { background:color-mix(in srgb,var(--primary) 4%,var(--bg)); }
.hist-item.hist-selected { background:color-mix(in srgb,var(--primary) 7%,transparent); }
.hist-item.hidden { display:none; }
/* Checkbox */
.hist-check {
  appearance:none; -webkit-appearance:none;
  width:15px; height:15px; min-width:15px; flex-shrink:0;
  border:1.5px solid var(--border); border-radius:4px;
  background:var(--bg); cursor:pointer;
  transition:background .12s, border-color .12s; position:relative;
}
.hist-check:checked { background:var(--primary); border-color:var(--primary); }
.hist-check:checked::after {
  content:''; position:absolute; left:3px; top:1px;
  width:5px; height:8px; border:2px solid #fff;
  border-top:none; border-left:none; transform:rotate(45deg);
}
/* Main content */
.hist-content { flex:1; min-width:0; }
.hist-title {
  font-size:.86rem; font-weight:600; color:var(--text);
  text-decoration:none; display:block;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.hist-title:hover { color:var(--primary); }
.hist-subtitle {
  display:flex; align-items:center; gap:10px;
  font-size:.72rem; color:var(--muted); margin-top:3px;
}
.hist-subtitle-sep { opacity:.35; }
/* Pin icon */
.hist-pin { color:var(--primary); flex-shrink:0; }
/* Right side */
.hist-actions { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.hist-del-btn, .hist-rename-btn {
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:7px;
  background:none; border:1px solid transparent; color:var(--muted);
  cursor:pointer; transition:all .12s; flex-shrink:0;
}
.hist-del-btn:hover { color:#ef4444; background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.2); }
.hist-rename-btn:hover { color:var(--primary); background:color-mix(in srgb,var(--primary) 8%,transparent); border-color:color-mix(in srgb,var(--primary) 25%,transparent); }
.hist-title-wrap { display:flex; align-items:center; flex:1; min-width:0; }
.hist-rename-input {
  flex:1; min-width:0; width:100%; font-size:.88rem; font-family:inherit;
  background:var(--bg); border:1.5px solid var(--primary); border-radius:6px;
  padding:2px 7px; color:var(--text); outline:none;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 15%,transparent);
}
/* Bulk bar */
.hist-bulk-bar {
  display:none; align-items:center; gap:10px; flex-wrap:wrap;
  padding:9px 18px; background:color-mix(in srgb,var(--primary) 8%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--primary) 20%,transparent);
  font-size:.8rem; color:var(--primary); font-weight:600;
}
.hist-bulk-bar.visible { display:flex; }
.hist-bulk-count { flex:1; min-width:60px; }
.hist-bulk-select-all {
  background:none; border:none; font-size:.78rem; color:var(--primary);
  cursor:pointer; padding:3px 8px; border-radius:5px; font-family:inherit;
  font-weight:500; transition:background .12s;
}
.hist-bulk-select-all:hover { background:color-mix(in srgb,var(--primary) 12%,transparent); }
.hist-bulk-del {
  background:#ef4444; color:#fff; border:none; border-radius:7px;
  padding:5px 14px; font-size:.78rem; font-weight:600;
  cursor:pointer; font-family:inherit; transition:opacity .15s;
}
.hist-bulk-del:hover { opacity:.88; }
.hist-bulk-del:disabled { opacity:.4; cursor:not-allowed; }
/* Empty state */
.hist-empty {
  display:flex; flex-direction:column; align-items:center;
  padding:48px 20px; color:var(--muted); text-align:center;
}
/* Pagination — 50 chats/page (account.php?tab=data) */
.hist-pagination {
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin-top:16px;
}
.hist-pagination .disabled { opacity:.4; pointer-events:none; }
.hist-pagination-info { font-size:.78rem; color:var(--muted); white-space:nowrap; }

@keyframes spin{to{transform:rotate(360deg)}}

/* ── Memory tab ────────────────────────────────────────────────────────── */
.mem-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:18px; }
.mem-stat-card { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:14px 16px; }
.mem-stat-val { font-size:1.5rem; font-weight:700; color:var(--text); line-height:1; }
.mem-stat-label { font-size:.72rem; color:var(--muted); margin-top:4px; }
.mem-token-bar { margin-bottom:20px; }
.mem-token-bar-row { display:flex; align-items:center; justify-content:space-between; font-size:.75rem; color:var(--muted); margin-bottom:5px; }
.mem-token-track { height:6px; background:var(--bg); border-radius:3px; overflow:hidden; }
.mem-token-fill { height:100%; background:var(--primary); border-radius:3px; transition:width .3s; }
.mem-toolbar { display:flex; align-items:center; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.mem-search { display:flex; align-items:center; gap:7px; flex:1; min-width:160px; background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:0 10px; }
.mem-search input { flex:1; border:none; background:transparent; outline:none; font-size:.82rem; color:var(--text); padding:7px 0; font-family:inherit; }
.mem-cat-pills { display:flex; gap:5px; flex-wrap:wrap; }
.mem-cat-pill { padding:4px 11px; border-radius:20px; font-size:.73rem; font-weight:500; border:1px solid var(--border); background:var(--surface); color:var(--muted); cursor:pointer; transition:all .15s; }
.mem-cat-pill.active { background:var(--primary); border-color:var(--primary); color:#fff; }
.mem-list { border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--surface); }
.mem-list-empty { padding:40px; text-align:center; color:var(--muted); font-size:.83rem; }
.mem-item { display:flex; align-items:flex-start; gap:10px; padding:12px 16px; border-bottom:1px solid var(--border); transition:background .12s; }
.mem-item.hidden { display:none; }
.mem-item:last-child { border-bottom:none; }
.mem-item:hover { background:var(--bg); }
.mem-item.mem-disabled { opacity:.5; }
.mem-item.mem-editing { background:color-mix(in srgb,var(--primary) 4%,transparent); }
.mem-toggle { position:relative; display:inline-block; width:32px; height:18px; flex-shrink:0; margin-top:1px; }
.mem-toggle input { opacity:0; width:0; height:0; }
.mem-toggle-slider { position:absolute; inset:0; background:var(--border); border-radius:9px; cursor:pointer; transition:background .2s; }
.mem-toggle-slider::before { content:''; position:absolute; width:12px; height:12px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform .2s; }
.mem-toggle input:checked + .mem-toggle-slider { background:var(--primary); }
.mem-toggle input:checked + .mem-toggle-slider::before { transform:translateX(14px); }
.mem-content-wrap { flex:1; min-width:0; }
.mem-content-text { font-size:.83rem; color:var(--text); line-height:1.5; word-break:break-word; }
.mem-item-meta { display:flex; align-items:center; gap:10px; margin-top:5px; }
.mem-cat-badge { font-size:.67rem; font-weight:600; padding:2px 7px; border-radius:4px; text-transform:uppercase; letter-spacing:.03em; background:color-mix(in srgb,var(--primary) 12%,transparent); color:var(--primary); }
.mem-cat-badge.personal { background:color-mix(in srgb,#22c55e 12%,transparent); color:#16a34a; }
.mem-cat-badge.work { background:color-mix(in srgb,#f59e0b 12%,transparent); color:#b45309; }
.mem-cat-badge.preferences { background:color-mix(in srgb,#8b5cf6 12%,transparent); color:#7c3aed; }
.mem-cat-badge.technical { background:color-mix(in srgb,#0ea5e9 12%,transparent); color:#0369a1; }
.mem-cat-badge.instruction { background:color-mix(in srgb,#e11d48 11%,transparent); color:#be123c; }
.mem-tokens { font-size:.7rem; color:var(--muted); }
.mem-date { font-size:.7rem; color:var(--muted); margin-left:auto; }
.mem-item-actions { display:flex; gap:4px; flex-shrink:0; opacity:0; transition:opacity .15s; }
.mem-item:hover .mem-item-actions, .mem-item.mem-editing .mem-item-actions { opacity:1; }
.mem-act-btn { display:flex; align-items:center; justify-content:center; width:26px; height:26px; border:none; background:transparent; color:var(--muted); border-radius:6px; cursor:pointer; transition:color .12s,background .12s; }
.mem-act-btn:hover { color:var(--text); background:var(--bg); }
.mem-act-btn.danger:hover { color:var(--danger,#ef4444); background:rgba(239,68,68,.08); }
.mem-inline-editor { background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:10px; margin-top:8px; }
.mem-inline-editor textarea { width:100%; border:1px solid var(--border); border-radius:6px; padding:7px 10px; font-size:.82rem; font-family:inherit; color:var(--text); background:var(--surface); resize:vertical; min-height:60px; outline:none; box-sizing:border-box; }
.mem-inline-editor textarea:focus { border-color:var(--primary); }
.mem-inline-editor-row { display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap; }
.mem-inline-editor select { border:1px solid var(--border); border-radius:6px; padding:4px 8px; font-size:.75rem; font-family:inherit; color:var(--text); background:var(--surface); outline:none; cursor:pointer; }
.mem-inline-char { font-size:.72rem; color:var(--muted); flex:1; }
.mem-add-panel { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px; margin-top:16px; }
.mem-add-panel-title { font-size:.88rem; font-weight:600; color:var(--text); margin-bottom:12px; display:flex; align-items:center; gap:7px; }
.mem-add-row { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:flex-start; }
.mem-add-row textarea { border:1px solid var(--border); border-radius:8px; padding:9px 12px; font-size:.83rem; font-family:inherit; color:var(--text); background:var(--bg); resize:vertical; min-height:68px; outline:none; width:100%; box-sizing:border-box; }
.mem-add-row textarea:focus { border-color:var(--primary); }
.mem-add-footer { display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap; }
.mem-add-char { font-size:.72rem; color:var(--muted); }
.mem-preview-panel { background:var(--bg); border:1px solid var(--border); border-radius:10px; margin-top:16px; overflow:hidden; }
.mem-preview-header { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid var(--border); cursor:pointer; user-select:none; }
.mem-preview-title { font-size:.78rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.mem-preview-body { padding:12px 14px; font-size:.78rem; font-family:monospace; color:var(--muted); white-space:pre-wrap; word-break:break-word; max-height:200px; overflow-y:auto; line-height:1.55; }
.mem-io-panel { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px; margin-top:16px; }
.mem-io-title { font-size:.88rem; font-weight:600; color:var(--text); margin-bottom:10px; }
.mem-io-row { display:flex; gap:8px; align-items:flex-start; flex-wrap:wrap; }
.mem-pause-toggle { display:flex; align-items:center; gap:8px; padding:10px 14px; background:color-mix(in srgb,#f59e0b 8%,transparent); border:1px solid color-mix(in srgb,#f59e0b 25%,transparent); border-radius:8px; margin-bottom:16px; font-size:.82rem; color:var(--text); }
.mem-pause-toggle.paused { background:color-mix(in srgb,var(--danger,#ef4444) 8%,transparent); border-color:color-mix(in srgb,var(--danger,#ef4444) 25%,transparent); }
@media(max-width:640px){
  .mem-stats { grid-template-columns:repeat(2,1fr); }
  .mem-toolbar { flex-direction:column; align-items:stretch; }
  .mem-add-row { grid-template-columns:1fr; }
}

/* ── Personas tab ──────────────────────────────────────────────────────── */
.per-item { display:flex; align-items:flex-start; gap:12px; padding:12px 16px; border-bottom:1px solid var(--border); transition:background .12s; }
.per-item:last-child { border-bottom:none; }
.per-item:hover { background:var(--bg); }
.per-item.per-editing { background:color-mix(in srgb,var(--primary) 4%,transparent); }
.per-item-icon { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0; }
.per-item-body { flex:1; min-width:0; }
.per-item-name { font-size:.88rem; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.per-item-preview { font-size:.77rem; color:var(--muted); margin-top:2px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.45; }
.per-item-meta { display:flex; align-items:center; gap:7px; margin-top:6px; flex-wrap:wrap; }
.per-badge { font-size:.67rem; font-weight:600; padding:2px 7px; border-radius:4px; text-transform:uppercase; letter-spacing:.03em; }
.per-badge-cat { background:color-mix(in srgb,var(--primary) 12%,transparent); color:var(--primary); }
.per-badge-coding { background:color-mix(in srgb,#818CF8 12%,transparent); color:#4f46e5; }
.per-badge-writing { background:color-mix(in srgb,#34D399 12%,transparent); color:#059669; }
.per-badge-analysis { background:color-mix(in srgb,#F472B6 12%,transparent); color:#db2777; }
.per-badge-creative { background:color-mix(in srgb,#FB923C 12%,transparent); color:#ea580c; }
.per-badge-custom { background:color-mix(in srgb,#94A3B8 12%,transparent); color:#475569; }
.per-badge-model { background:var(--bg); border:1px solid var(--border); color:var(--muted); text-transform:none; letter-spacing:0; font-weight:400; }
.per-badge-temp { background:var(--bg); border:1px solid var(--border); color:var(--muted); text-transform:none; letter-spacing:0; font-weight:400; }
.per-tok-label { font-size:.7rem; color:var(--muted); }
.per-item-actions { display:flex; gap:4px; flex-shrink:0; opacity:0; transition:opacity .15s; margin-top:2px; }
.per-item:hover .per-item-actions, .per-item.per-editing .per-item-actions { opacity:1; }
.per-inline-editor { background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:14px; margin-top:10px; }
.per-inline-cfg { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-top:10px; }
.per-inline-field { display:flex; flex-direction:column; gap:4px; }
.per-inline-label { font-size:.69rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.per-inline-select { border:1px solid var(--border); border-radius:6px; padding:5px 8px; font-size:.78rem; font-family:inherit; color:var(--text); background:var(--surface); outline:none; cursor:pointer; width:100%; }
.per-inline-select:focus { border-color:var(--primary); }
.per-color-row { display:flex; gap:7px; flex-wrap:wrap; }
.per-swatch { width:22px; height:22px; border-radius:50%; cursor:pointer; border:2.5px solid transparent; transition:transform .12s; }
.per-swatch:hover { transform:scale(1.15); }
.per-swatch.per-swatch-sel { border-color:var(--text); }
.per-tok-bar { height:4px; background:var(--surface); border:1px solid var(--border); border-radius:2px; overflow:hidden; margin:6px 0; }
.per-tok-fill { height:100%; background:var(--primary); border-radius:2px; transition:width .3s; }
.per-toggle-row { display:flex; align-items:center; justify-content:space-between; padding:9px 12px; background:var(--surface); border:1px solid var(--border); border-radius:8px; margin-top:8px; }
.per-toggle-row + .per-toggle-row { border-top:none; border-radius:0 0 8px 8px; margin-top:0; }
.per-cat-pills { display:flex; gap:5px; flex-wrap:wrap; }
.per-cat-pill { padding:4px 11px; border-radius:20px; font-size:.73rem; font-weight:500; border:1px solid var(--border); background:var(--surface); color:var(--muted); cursor:pointer; transition:all .15s; }
.per-cat-pill.active { background:var(--primary); border-color:var(--primary); color:#fff; }
.per-add-panel { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px; margin-top:16px; }
.per-add-panel-title { font-size:.88rem; font-weight:600; color:var(--text); margin-bottom:12px; display:flex; align-items:center; gap:7px; }
.per-tmpl-panel { background:var(--bg); border:1px solid var(--border); border-radius:10px; margin-top:16px; overflow:hidden; }
.per-tmpl-header { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid var(--border); cursor:pointer; user-select:none; }
.per-tmpl-title { font-size:.78rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.per-tmpl-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:14px; }
.per-tmpl { padding:12px 14px; border:1px solid var(--border); border-radius:10px; cursor:pointer; background:var(--surface); }
.per-tmpl:hover { border-color:var(--primary); background:color-mix(in srgb,var(--primary) 3%,transparent); }
.per-tmpl-name { font-size:.83rem; font-weight:600; display:flex; align-items:center; gap:7px; color:var(--text); }
.per-tmpl-desc { font-size:.72rem; color:var(--muted); margin-top:3px; }
.per-tmpl-meta { display:flex; gap:6px; margin-top:6px; }
.per-tmpl-badge { font-size:.65rem; padding:2px 6px; border-radius:4px; background:color-mix(in srgb,var(--primary) 10%,transparent); color:var(--primary); font-weight:500; }
@media(max-width:640px){
  .per-inline-cfg { grid-template-columns:1fr; }
  .per-tmpl-grid { grid-template-columns:1fr; }
}

/* ── Profile hero card ───────────────────────────── */
.profile-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 24px;
  background: linear-gradient(135deg, var(--primary) 0%, hsl(var(--primary-h) var(--primary-s) calc(var(--primary-l) - 18%)) 100%);
  border-radius: 16px;
  margin-bottom: 16px;
  color: #fff;
}
.profile-hero-avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(255,255,255,.22);
  border: 2.5px solid rgba(255,255,255,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 800;
  flex-shrink: 0;
  letter-spacing: -1px;
}
.profile-hero-meta { flex: 1; min-width: 0; }
.profile-hero-name {
  font-size: 1.25rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}
.profile-hero-badge {
  font-size: .65rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  background: rgba(255,255,255,.25);
  letter-spacing: .04em;
  text-transform: capitalize;
}
.profile-hero-badge.admin { background: rgba(255,215,0,.3); }
.profile-hero-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: .82rem;
  opacity: .9;
}
.profile-hero-sub svg { opacity: .75; flex-shrink: 0; }
.profile-hero-sep { opacity: .45; }

/* ── Profile info grid ───────────────────────────── */
.profile-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.profile-info-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 13px 15px;
}
.pii-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .69rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin-bottom: 5px;
}
.pii-label svg { opacity: .7; }
.pii-value {
  font-size: .92rem;
  font-weight: 700;
  color: var(--text);
  word-break: break-all;
}
.pii-status-active   { color: #16a34a; }
.pii-status-pending  { color: #d97706; }
.pii-status-suspended{ color: #dc2626; }

/* ── Icon-prefixed inputs ────────────────────────── */
.input-icon-wrap { position: relative; }
.input-icon-wrap svg {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
  flex-shrink: 0;
}
.input-icon-wrap input { padding-left: 34px; }
.field-hint {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-top: 6px;
  font-size: .74rem;
  color: var(--muted);
  line-height: 1.45;
}
.field-hint svg { flex-shrink: 0; margin-top: 1px; opacity: .6; }
.req { color: #ef4444; font-weight: 700; }

/* ── Profile details form ────────────────────────── */
.profile-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width:600px) {
  .profile-hero { gap: 14px; padding: 16px; }
  .profile-hero-avatar { width: 54px; height: 54px; font-size: 1.2rem; }
  .profile-form-row { grid-template-columns: 1fr; }
  .profile-info-grid { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2026 REDESIGN — settings modern pass (appended last, token-based)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Settings content cards */
.settings-section-card {
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--t-base) ease;
}
.settings-section-card:hover { box-shadow: var(--shadow-2); }

/* Settings nav rail (includes/settings_nav.php) */
.settings-sidebar { gap: 2px; }
.settings-nav-link {
  border-radius: var(--r-sm);
  transition: background-color var(--t-fast) ease, color var(--t-fast) ease;
}
.settings-nav-link:hover { background: var(--accent-softer); color: var(--primary); }
.settings-nav-link.active {
  background: var(--accent-soft); color: var(--primary);
  font-weight: var(--fw-semibold);
}

/* Form controls inside settings get the modern focus ring */
.settings-main input[type="text"]:focus,
.settings-main input[type="email"]:focus,
.settings-main input[type="password"]:focus,
.settings-main input[type="number"]:focus,
.settings-main input[type="url"]:focus,
.settings-main select:focus,
.settings-main textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* Headline polish */
.settings-h1 { letter-spacing: -.02em; color: var(--text-strong); }