:root{
  --profile-wall-light: url("/chat-light.webp");
  --profile-wall-harbor: url("/chat-harbor.webp");
  --profile-wall-default: var(--profile-wall-light);
}
html[data-theme="harbor"]{ --profile-wall-default: var(--profile-wall-harbor); }

/* ── Profile page (full-screen settings) ── */
.profile-panel{
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  transform: translateX(100%);
  opacity: 0;
  transition: transform .34s var(--ease-soft), opacity .26s ease;
}
.profile-panel.open{ transform: none; opacity: 1; pointer-events: auto; }
.resident-system-panel{
  position:absolute; inset:0; z-index:3;
  pointer-events:none; transform:translateX(100%); opacity:0;
  transition:transform .32s var(--ease-soft), opacity .24s ease;
}
.resident-system-panel.open{ transform:none; opacity:1; pointer-events:auto; }
/* own wallpaper layer so the chat behind is fully covered, theme-matched */
.profile-page{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--bg);
  background-image: var(--profile-wall-default);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.profile-page::before{
  content:""; position:absolute; inset:0; background: var(--scrim); pointer-events:none;
}
.profile-topbar{
  position: relative; z-index:1;
  flex: 0 0 auto;
  display:flex; align-items:center; gap:10px;
  height: calc(56px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--side-pad) 0;
}
.profile-back{
  width:40px; height:40px; flex:none;
  border:0; border-radius:50%; padding:0; margin-left:-6px;
  background: transparent; color: var(--text);
  display:grid; place-items:center; cursor:pointer;
  transition: transform .15s ease;
}
.profile-back:active{ transform: scale(.9); }
.profile-back svg{ width:24px; height:24px; display:block; }
.profile-scroll{
  position: relative; z-index:1;
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 10px var(--side-pad) calc(30px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:24px;
}
.profile-scroll::-webkit-scrollbar{ width:0; height:0; }
.resident-system-topbar{ border-bottom:1px solid var(--card-line); }
.resident-system-heading{ min-width:0; }
.resident-system-heading p{
  margin:0 0 2px; color:var(--text-faint); font-size:10px;
  font-family:var(--font-en),var(--font-cn); letter-spacing:.12em; text-transform:uppercase;
}
.resident-system-heading h2{
  margin:0; color:var(--text); font-size:17px; font-weight:500;
  font-family:var(--font-en),var(--font-cn);
}
.resident-system-scroll{ gap:16px; }
.resident-system-intro{ padding:4px 4px 2px; }
.resident-system-intro h1{
  margin:2px 0 7px; color:var(--text); font-size:clamp(28px,5vw,38px);
  font-family:var(--font-en),var(--font-cn); font-weight:500; line-height:1.1;
}
.resident-system-intro>p:last-child,
.resident-system-note{ margin:0; color:var(--text-soft); font-size:12.5px; line-height:1.65; }
.resident-system-kicker{
  margin:0; color:var(--text-faint); font-size:10px; letter-spacing:.14em;
  font-family:var(--font-en),var(--font-cn); text-transform:uppercase;
}
.resident-system-card{ display:flex; flex-direction:column; gap:12px; }
.resident-card-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.resident-card-head h3{ margin:0; color:var(--text); font-size:16px; font-weight:500; }
.resident-status-list{ margin:0; }
.resident-status-list>div{
  display:grid; grid-template-columns:minmax(7em,auto) 1fr; gap:16px;
  padding:10px 0; border-top:1px solid var(--card-line);
}
.resident-status-list>div:first-child{ border-top:0; padding-top:0; }
.resident-status-list>div:last-child{ padding-bottom:0; }
.resident-status-list dt{ color:var(--text-soft); font-size:13px; }
.resident-status-list dd{ margin:0; color:var(--text); font-size:13px; text-align:right; }
.resident-system-unavailable{ color:var(--text-faint); font-size:12px; }
.resident-system-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.resident-board-link{
  position:relative; min-height:92px; padding:16px 36px 16px 16px;
  border:1px solid var(--card-line); border-radius:16px; background:var(--card-bg);
  box-shadow:var(--card-shadow); color:var(--text); text-align:left; cursor:pointer;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  transition:background .18s ease,transform .12s ease;
}
.resident-board-link:active{ background:var(--row-press); transform:scale(.992); }
.resident-board-link b{ display:block; margin-bottom:7px; font-size:14.5px; font-weight:500; }
.resident-board-link span{ display:block; color:var(--text-soft); font-size:12px; line-height:1.5; }
.resident-board-link i{ position:absolute; right:16px; top:50%; transform:translateY(-50%); color:var(--text-faint); font-size:20px; font-style:normal; }
.resident-placeholder-list{ display:grid; gap:8px; }
.resident-placeholder-list p{
  display:flex; justify-content:space-between; gap:14px; margin:0; padding:9px 0;
  border-top:1px solid var(--card-line); color:var(--text-soft); font-size:13px;
}
.resident-placeholder-list p:first-child{ border-top:0; padding-top:0; }
.resident-system-form{ display:grid; gap:10px; }
.resident-system-form label{ display:grid; gap:6px; color:var(--text-soft); font-size:12px; }
.resident-system-form input,.resident-system-form select{
  width:100%; min-height:40px; border:1px solid var(--card-line); border-radius:12px;
  padding:8px 11px; background:var(--seg-track); color:var(--text-soft); font:inherit;
}
.resident-system-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.resident-system-chip{
  min-height:38px; border:1px solid var(--card-line); border-radius:12px;
  padding:8px 13px; background:var(--seg-track); color:var(--text-soft); font:inherit;
  font-size:12px; cursor:pointer;
}
.resident-system-empty{
  min-height:72px; display:grid; place-items:center; padding:16px;
  border:1px dashed var(--card-line); border-radius:13px; color:var(--text-faint); font-size:12px;
}
.resident-emotion-table{ overflow:hidden; border:1px solid var(--card-line); border-radius:12px; }
.resident-emotion-table>div{ display:grid; grid-template-columns:1fr .7fr .7fr 1.4fr; gap:8px; padding:10px 12px; color:var(--text-soft); font-size:11.5px; }
.resident-emotion-table>div+div{ border-top:1px solid var(--card-line); }
.resident-emotion-table b{ color:var(--text); font-weight:500; }
.resident-heartline{
  position:relative;
  min-height:96px; display:flex; align-items:center; justify-content:space-around;
  padding:16px; border:1px solid var(--card-line); border-radius:13px; overflow:hidden;
  background:linear-gradient(180deg,transparent,rgba(112,137,158,.06));
}
.resident-heartline::before{
  content:""; position:absolute; left:0; right:0; height:1px; background:var(--card-line);
}
.resident-heartline i{
  position:relative; width:8px; height:8px; border-radius:50%;
  background:var(--text-faint); box-shadow:0 0 0 5px rgba(112,137,158,.07);
}

/* identity */
.profile-identity{
  display:grid;
  grid-template-columns: auto 1fr;
  gap:18px; align-items:center;
  padding: 4px 4px 16px;
}
.profile-avatar{
  width:78px; height:78px; border-radius:50%;
  border:0; padding:0; overflow:hidden;
  -webkit-appearance:none; appearance:none;
  background-color:transparent;
  background-image: var(--avatar-default);
  background-size:cover; background-position:center;
  box-shadow: 0 12px 28px rgba(24,46,67,0.16);
  cursor:pointer; transition: transform .15s ease;
}
.profile-avatar:active{ transform: scale(.96); }
.profile-id-copy{ min-width:0; }
.profile-name-row{ display:flex; align-items:center; gap:9px; margin:0 0 5px; }
.profile-name-row h3,
#profileNameInput{
  margin:0;
  font-family: var(--font-en), var(--font-cn);
  font-size:23px; font-weight:500; letter-spacing:0;
  color: var(--text); line-height:1.1;
}
#profileNameInput{
  width:6.6em; max-width:62%;
  border:0; border-radius:10px;
  background: var(--seg-track); outline:none;
  padding:3px 11px; margin:-3px 0;
}
.profile-name-edit{
  width:26px; height:26px; flex:none;
  border:0; border-radius:50%; padding:0;
  background:transparent; color: var(--text-soft);
  display:grid; place-items:center; cursor:pointer;
  transition: color .2s ease, transform .15s ease;
}
.profile-name-edit:active{ transform: scale(.88); }
.profile-name-edit svg{ width:15px; height:15px; display:block; }
.profile-handle{
  display:flex; align-items:center; gap:7px; margin:0 0 8px;
  color: var(--text-soft);
  font-family: var(--font-en), var(--font-cn); font-size:13.5px;
}
.profile-bio{ margin:0; color: var(--text-soft); font-size:13px; line-height:1.55; }

/* setting card */
.settings-card{
  background: var(--card-bg);
  border: 1px solid var(--card-line);
  border-radius:18px;
  box-shadow: var(--card-shadow);
  padding:15px 16px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.settings-label{
  display:flex; align-items:center; gap:6px;
  color: var(--text-soft); font-size:12.5px;
  margin-bottom:11px; letter-spacing:.01em;
}
.info-i{
  width:14px; height:14px; flex:none; border-radius:50%;
  border:1px solid var(--info-ring); color: var(--text-faint);
  display:inline-grid; place-items:center;
  font-size:9px; font-style:normal; line-height:1;
  font-family: var(--font-en), var(--font-cn);
  cursor:help; user-select:none;
}
.push-hint{
  margin-top:9px; font-size:11.5px; line-height:1.55;
  color: var(--text-faint); letter-spacing:.01em;
}

/* segmented control */
.segmented{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  gap:3px; background: var(--seg-track);
  border-radius:13px; padding:3px;
}
.segmented button{
  border:0; background:transparent; color: var(--text-soft);
  border-radius:10px; padding:8px 3px;
  font: inherit; font-size: clamp(10.5px, 2.9vw, 12.5px);
  letter-spacing:0; white-space:nowrap; cursor:pointer;
  transition: background .22s ease, color .22s ease, box-shadow .22s ease;
}
.segmented button.active{
  background: var(--seg-thumb); color: var(--text);
  box-shadow: var(--seg-thumb-shadow); font-weight:500;
}

/* context slider */
.context-slider-wrap{ padding:4px 2px 2px; }
.context-slider{
  -webkit-appearance:none; appearance:none;
  width:100%; height:4px; border-radius:999px;
  background: var(--slider-track);
  outline:none; cursor:pointer; margin:6px 0;
}
.context-slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:21px; height:21px; border-radius:50%;
  background: var(--slider-thumb);
  border:2.5px solid var(--card-bg);
  box-shadow: 0 3px 10px rgba(24,46,67,.26); cursor:pointer;
}
.context-slider::-moz-range-thumb{
  width:21px; height:21px; border-radius:50%;
  background: var(--slider-thumb);
  border:2.5px solid var(--card-bg);
  box-shadow: 0 3px 10px rgba(24,46,67,.26); cursor:pointer;
}
.context-scale{
  display:flex; justify-content:space-between; margin-top:9px;
  color: var(--text-faint);
  font-family: var(--font-en), var(--font-cn); font-size:11.5px;
}

/* action rows */
.action-row{
  display:flex; align-items:center; gap:13px;
  width:100%; text-align:left;
  background: var(--card-bg);
  border:1px solid var(--card-line);
  border-radius:16px; box-shadow: var(--card-shadow);
  padding:13px 16px; color: var(--text); font: inherit; cursor:pointer;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: background .18s ease, transform .12s ease;
}
button.action-row:active{ background: var(--row-press); transform: scale(.992); }
.action-icon{ width:21px; height:21px; flex:none; color: var(--accent); display:grid; place-items:center; }
.action-icon svg{ width:19px; height:19px; display:block; }
.action-name{ font-family: var(--font-en), var(--font-cn); font-size:14.5px; color: var(--text); flex:none; }
.action-value{
  margin-left:auto; color: var(--text-soft); font-size:12.5px;
  text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.action-chevron{ flex:none; color: var(--text-faint); display:grid; place-items:center; margin-left:2px; }
.action-chevron svg{ width:16px; height:16px; display:block; }
.action-row.status{ cursor:default; }
.action-row.status .status-main{ margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:2px; min-width:0; }
.status-used{ color: var(--text); font-family: var(--font-en), var(--font-cn); font-size:13px; }
.status-sid{ display:flex; align-items:center; gap:6px; color: var(--text-faint); font-size:11.5px; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.status-copy{
  width:24px; height:24px; flex:none; border:0; border-radius:8px; padding:0;
  background:transparent; color: var(--text-soft);
  display:grid; place-items:center; cursor:pointer;
  transition: color .2s ease, transform .15s ease;
}
.status-copy:active{ transform: scale(.85); }
.status-copy svg{ width:15px; height:15px; display:block; }

@media (max-width: 520px){
  .profile-identity{ gap:15px; padding-bottom:14px; }
  .profile-avatar{ width:72px; height:72px; }
  .profile-name-row h3, #profileNameInput{ font-size:21px; }
  .profile-handle{ font-size:13px; }
  .profile-bio{ font-size:12.5px; }
  .settings-card{ padding:14px 15px; }
  .action-row{ padding:12px 15px; }
  .profile-scroll{ gap:22px; }
  .resident-system-scroll{ gap:14px; }
  .profile-scroll{ padding-bottom:calc(86px + env(safe-area-inset-bottom)); }
  .resident-system-grid{ grid-template-columns:1fr; }
  .resident-board-link{ min-height:78px; }
  .resident-status-list>div{ grid-template-columns:minmax(6.5em,auto) 1fr; gap:10px; }
  .resident-emotion-table>div{ grid-template-columns:1fr .7fr .7fr; }
  .resident-emotion-table>div>*:last-child{ display:none; }
}