:root {
  --pd-ink: #20243a;
  --pd-muted: #7c86a1;
  --pd-brand: #6755df;
  --pd-brand-2: #8d78ed;
  --pd-surface: #ffffff;
  --pd-wash: #f7f7fc;
  --pd-line: rgba(76, 82, 118, .12);
}

/* Selected Product Design direction: cinematic companion home. */
#view-personas .topbar {
  min-height: 58px;
  padding: 12px 18px;
  background: #f7f6ff;
  border-bottom: 0;
}
#view-personas .topbar .name {
  color: var(--pd-ink);
  font-size: 24px;
  font-weight: 820;
  letter-spacing: -.03em;
}
#view-personas .topbar .pts { display: none; }
#view-personas .topbar .btn-icon {
  margin-left: 8px;
  padding: 7px 10px;
  border: 1px solid var(--pd-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .74);
  color: #545b73;
  font-size: 12px;
}
#view-personas .scroll {
  padding: 0;
  background: var(--pd-wash);
}
.companion-hero {
  position: sticky;
  top: 10px;
  z-index: 2;
  height: clamp(340px, 48svh, 460px);
  margin: 10px 14px 0;
  border-radius: 28px;
  overflow: hidden;
  background: #d9d8ef;
  color: #fff;
  box-shadow: 0 18px 42px rgba(46, 42, 95, .16);
  transition: height .22s linear;
}
.companion-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(21, 21, 40, .58), rgba(30, 27, 55, .08) 58%),
    linear-gradient(0deg, rgba(18, 17, 35, .35), transparent 54%);
  pointer-events: none;
}
.companion-hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
}
.companion-hero-copy {
  position: absolute;
  z-index: 1;
  left: 24px;
  bottom: 28px;
  width: 58%;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .14s linear, transform .22s linear;
}
.companion-hero-copy h2 {
  margin: 0 0 8px;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -.035em;
}
.companion-presence {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  color: #d9d3ff;
  font-size: 12px;
  font-weight: 700;
  max-height: 24px;
  overflow: hidden;
  opacity: 1;
  transform: translateY(0);
}
.companion-presence::before {
  content: "";
  width: 7px;
  height: 7px;
  border: 2px solid #b7aaff;
  border-radius: 50%;
}
.companion-hero-line {
  margin: 0 0 18px;
  color: rgba(255, 255, 255, .9);
  font-size: 14px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  max-height: 66px;
  opacity: 1;
  transform: translateY(0);
}
.companion-hero.is-collapsed {
  height: 144px;
}
.companion-hero.is-collapsed .companion-hero-image { object-position: 58% center; }
.companion-hero.is-collapsed .companion-hero-copy {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}
.companion-hero-compact {
  position: absolute;
  z-index: 1;
  left: 18px;
  bottom: 18px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .14s linear, transform .22s linear;
}
.companion-hero-compact h2 {
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: -.035em;
}
.companion-hero-compact .companion-resume {
  padding: 8px 13px;
  border-radius: 11px;
  font-size: 12px;
  box-shadow: none;
}
.companion-hero.is-collapsed .companion-hero-compact {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.companion-resume,
.companion-new {
  border: 0;
  border-radius: 14px;
  font-weight: 800;
}
.companion-resume {
  padding: 11px 20px;
  background: linear-gradient(135deg, var(--pd-brand), var(--pd-brand-2));
  color: #fff;
  box-shadow: 0 10px 26px rgba(78, 62, 190, .3);
}
.companion-recent {
  padding: 20px 18px 88px;
  background: var(--pd-surface);
}
.companion-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 10px;
}
.companion-section-head h2 {
  margin: 0;
  color: var(--pd-ink);
  font-size: 18px;
  letter-spacing: -.02em;
}
.companion-new {
  padding: 7px 10px;
  border: 1px solid #d8d2ff;
  background: #faf9ff;
  color: #5d50ca;
  font-size: 12px;
}
.companion-list { border-top: 1px solid var(--pd-line); }
.companion-list .sess {
  margin: 0;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--pd-line);
  border-radius: 0;
  box-shadow: none;
}
.companion-list .sess:hover { background: transparent; }
.companion-list .sess-avatar {
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 50%;
  background: #e8e5fa;
}
.companion-list .sess-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.companion-list .sess-name { color: var(--pd-ink); font-size: 15px; font-weight: 800; }
.companion-list .sess-time { color: #9aa1b6; }
.companion-list .sess-last { color: var(--pd-muted); }
.companion-list .sess-model { color: #a3a9ba; }
#view-personas > .fab { display: none; }

/* Selected Product Design direction 4: immersive fog-harbor route map. */
body.world-product-page {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: linear-gradient(135deg, #eef0ff, #f8f5ff 48%, #eef8f7);
}
#groupExperience { width: 100%; }
.world-home {
  position: relative;
  width: min(100%, 430px);
  height: min(820px, calc(100dvh - 44px));
  min-height: 0;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 30px;
  background: #07101d;
  color: #f4f0ff;
  box-shadow: 0 18px 55px rgba(45, 38, 79, .18);
  isolation: isolate;
}
.world-home[hidden] { display: none; }
.world-home > .world-story-image {
  position: absolute;
  z-index: -3;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
  filter: saturate(.78) brightness(.62) contrast(1.07);
}
.world-atmosphere {
  position: absolute;
  z-index: -2;
  inset: 0;
  background: rgba(3, 8, 17, .12);
  box-shadow: inset 0 -190px 150px rgba(3, 6, 14, .64), inset 0 120px 100px rgba(5, 12, 24, .22);
  pointer-events: none;
}
.world-product-bar {
  position: absolute;
  z-index: 6;
  top: max(30px, env(safe-area-inset-top));
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 0 28px;
  background: transparent;
}
.world-product-bar h1 {
  margin: 0;
  color: #f4efff;
  font-family: "Noto Serif SC", "Songti SC", SimSun, serif;
  font-size: 31px;
  font-weight: 500;
  letter-spacing: .12em;
  text-shadow: 0 0 18px rgba(153, 122, 255, .45);
}
.world-profile {
  width: 36px;
  height: 36px;
  display: block;
  overflow: hidden;
  border: 2px solid #9d7aff;
  border-radius: 50%;
  background: #18152b;
  box-shadow: 0 0 0 2px rgba(5, 7, 17, .7), 0 0 16px rgba(131, 92, 255, .45);
}
.world-profile img { width: 100%; height: 100%; object-fit: cover; object-position: 72% center; }
.world-story-hero {
  position: absolute;
  z-index: 3;
  top: 18.1%;
  left: 28px;
  right: 18px;
  height: 27.5%;
  color: #fff;
}
.world-story-orbit {
  position: absolute;
  left: 0;
  top: 0;
  width: min(50vw, 205px);
  aspect-ratio: 1;
  overflow: hidden;
  padding: 6px;
  border: 1px solid #9c77ff;
  border-radius: 50%;
  background: rgba(13, 16, 34, .42);
  box-shadow: 0 0 0 4px rgba(116, 76, 235, .13), 0 0 28px rgba(113, 70, 240, .32), inset 0 0 18px rgba(160, 130, 255, .24);
}
.world-story-orbit img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 47%;
  border-radius: 50%;
  filter: saturate(.8) contrast(1.08);
}
.world-story-copy {
  position: absolute;
  left: 56%;
  right: 0;
  top: 22%;
}
.world-story-copy h2 {
  margin: 0 0 7px;
  font-family: "Noto Serif SC", "Songti SC", SimSun, serif;
  font-size: clamp(18px, 4.7vw, 21px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .03em;
  white-space: nowrap;
  text-shadow: 0 2px 16px rgba(0,0,0,.7);
}
.world-story-copy p {
  margin: 0 0 14px;
  color: rgba(240, 236, 255, .82);
  font-size: 9px;
  line-height: 1.5;
  white-space: nowrap;
}
.world-story-copy button {
  min-width: 110px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 11px;
  border: 1px solid #a37fff;
  border-radius: 999px;
  background: rgba(69, 41, 148, .62);
  color: #f5f0ff;
  font-family: "Noto Serif SC", "Songti SC", SimSun, serif;
  font-size: 14px;
  box-shadow: 0 0 20px rgba(121, 76, 244, .38), inset 0 0 14px rgba(176, 147, 255, .16);
  backdrop-filter: blur(6px);
}
.world-story-copy button i { color: #c1a8ff; font-size: 10px; }
.world-route {
  position: absolute;
  z-index: 4;
  top: 43%;
  left: 0;
  right: 0;
  bottom: 96px;
}
.world-route-trail {
  position: absolute;
  width: 1px;
  border-left: 1px dashed rgba(164, 127, 255, .85);
  transform-origin: 0 0;
  filter: drop-shadow(0 0 5px rgba(126, 83, 255, .8));
}
.world-route-trail-one {
  top: calc(3.5% + 33px);
  left: calc(20.8% + 33px);
  height: 26.2%;
  transform: rotate(-18deg);
}
.world-route-trail-two {
  top: calc(28.5% + 33px);
  left: calc(29% + 33px);
  height: 27%;
  transform: rotate(18deg);
}
.world-route-trail-three {
  top: calc(54.3% + 33px);
  left: calc(20.8% + 33px);
  height: 28.2%;
  transform: rotate(-19deg);
}
.world-route-node {
  position: absolute;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f2edff;
  text-align: left;
}
.world-route-group { top: 3.5%; padding-left: 20.8%; }
.world-route-relationship { top: 28.5%; padding-left: 29%; }
.world-route-tabletop { top: 54.3%; padding-left: 20.8%; }
.world-route-create { top: 81.3%; padding-left: 30%; }
.world-route-art {
  position: relative;
  width: 66px;
  height: 66px;
  flex: 0 0 66px;
  margin-bottom: 8px;
  display: grid;
  place-items: center;
  overflow: visible;
}
.world-route-image {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #9370f5;
  border-radius: 50%;
  clip-path: circle(50% at 50% 50%);
  background: rgba(24, 23, 55, .72);
  box-shadow: 0 0 0 3px rgba(94, 55, 205, .11), 0 0 18px rgba(111, 71, 235, .24), inset 0 0 14px rgba(142, 110, 255, .12);
}
.world-route-image > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
}
.world-route-image > .ph-compass-rose {
  color: #8f74dd;
  font-size: 42px;
}
.world-route-art > .ph-map-pin {
  position: absolute;
  left: 50%;
  bottom: -9px;
  padding: 2px;
  border-radius: 50%;
  background: #6047c8;
  color: #efe9ff;
  font-size: 13px;
  transform: translateX(-50%);
  box-shadow: 0 0 9px #8f6cff;
}
.world-route-copy b,
.world-route-copy span { display: block; }
.world-route-copy b {
  font-family: "Noto Serif SC", "Songti SC", SimSun, serif;
  font-size: clamp(19px, 5.4vw, 24px);
  font-weight: 500;
  letter-spacing: .05em;
  text-shadow: 0 2px 14px rgba(0,0,0,.8);
}
.world-route-copy span {
  margin-top: 5px;
  color: rgba(231, 226, 245, .72);
  font-size: 10px;
}
.world-route-create .world-route-copy span { display: none; }
.world-route-node:hover .world-route-image,
.world-route-node:focus-visible .world-route-image,
.world-story-orbit:hover,
.world-story-orbit:focus-visible {
  border-color: #c2acff;
  box-shadow: 0 0 0 4px rgba(142, 99, 255, .16), 0 0 28px rgba(131, 88, 255, .48), inset 0 0 18px rgba(181, 154, 255, .2);
}
.world-route-node:focus-visible,
.world-story-orbit:focus-visible,
.world-story-copy button:focus-visible { outline: 2px solid #d1c0ff; outline-offset: 4px; }
.world-route-node:active,
.world-story-copy button:active,
.world-story-orbit:active { transform: scale(.98); }
.world-route-node,
.world-story-copy button,
.world-story-orbit { transition: transform .18s ease, filter .18s ease, box-shadow .18s ease; }
.world-route-node:hover { filter: brightness(1.12); }
.world-route-node.is-coming-soon {
  cursor: default;
  filter: saturate(.72) brightness(.86);
}
.world-route-node.is-coming-soon .world-route-copy span {
  color: #bca9f5;
  letter-spacing: .08em;
}
.world-route-node.is-coming-soon:hover { filter: saturate(.72) brightness(.86); }
}
.world-preview-toast {
  position: absolute;
  z-index: 20;
  left: 50%;
  bottom: 104px;
  transform: translateX(-50%);
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(16, 15, 35, .94);
  color: #fff;
  font-size: 12px;
}
.world-home .world-bottom-nav {
  position: absolute;
  z-index: 18;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 86px;
  min-height: 86px;
  padding: 9px 8px max(10px, env(safe-area-inset-bottom));
  border-top-color: rgba(143, 110, 228, .2);
  background: rgba(4, 7, 15, .9);
  backdrop-filter: blur(16px);
}

@media (max-width: 650px) {
  #view-personas .topbar .name { font-size: 22px; }
  .companion-hero { height: 48svh; }
  .companion-hero.is-collapsed { height: 144px; }
  .companion-hero-copy { left: 22px; bottom: 24px; }
  body.world-product-page { padding: 0; background: #050913; }
  .world-home { width: 100%; height: 100dvh; border-radius: 0; }
}

@media (max-height: 740px) {
  .world-product-bar { top: max(10px, env(safe-area-inset-top)); }
  .world-story-hero { top: 15%; height: 27%; }
  .world-route { top: 40.5%; }
  .world-route-art { width: 62px; height: 62px; flex-basis: 62px; }
  .world-route-copy b { font-size: 20px; }
  .world-home .world-bottom-nav { height: 74px; min-height: 74px; padding-top: 6px; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
}

/* 2026-08-23 selected direction: rainy-night full-screen companion home. */
#view-personas {
  position: relative;
  isolation: isolate;
  background: #05080d;
}
#view-personas > .topbar { display: none; }
#view-personas > #session-list {
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: #05080d;
}
.companion-stage {
  --violet: #a891ff;
  position: relative;
  min-height: 100%;
  overflow: hidden;
  background-color: #05080d;
  color: #eeeaff;
}
.companion-stage-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.companion-stage-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2,5,9,.82) 0, rgba(2,5,9,.38) 22%, transparent 55%),
    linear-gradient(0deg, rgba(3,5,10,.9) 0, rgba(3,5,10,.16) 42%, rgba(3,5,10,.16) 76%, rgba(3,5,10,.5) 100%);
  pointer-events: none;
}
.companion-brand {
  position: absolute;
  z-index: 2;
  top: clamp(17px, 3.2vh, 29px);
  left: 24px;
  color: #cabaff;
  font-family: Georgia, "Songti SC", serif;
  font-size: 20px;
  font-style: italic;
  font-weight: 700;
  letter-spacing: .04em;
  text-shadow: 0 0 18px rgba(137,106,255,.45);
}
.companion-brand i,
.companion-identity h1 i {
  margin-left: 3px;
  color: var(--violet);
  font-size: .56em;
  vertical-align: top;
}
.companion-rail {
  position: absolute;
  z-index: 3;
  top: clamp(96px, 14vh, 126px);
  left: 10px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: calc(100% - 390px);
}
.companion-rail-list {
  display: grid;
  gap: 14px;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 4px 6px 18px;
  margin: -4px -6px 0;
  overscroll-behavior: contain;
  scroll-snap-type: y proximity;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 18px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 18px), transparent 100%);
}
.companion-rail-list::-webkit-scrollbar {
  display: none;
}
.companion-rail-avatar {
  width: 52px;
  height: 66px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(208,199,255,.28);
  border-radius: 24px;
  background: rgba(7,10,17,.72);
  color: #c9bdff;
  box-shadow: 0 8px 22px rgba(0,0,0,.32);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  scroll-snap-align: start;
}
.companion-rail-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 20%;
}
.companion-rail-avatar span {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  font-size: 20px;
}
.companion-rail-avatar:hover,
.companion-rail-avatar:focus-visible { transform: translateX(2px); }
.companion-rail-avatar.is-selected {
  border: 2px solid #8c6cff;
  box-shadow: 0 0 0 2px rgba(139,106,255,.24), 0 0 22px rgba(126,91,255,.58);
}
.companion-rail-add {
  flex: none;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(208,199,255,.3);
  border-radius: 50%;
  font-size: 19px;
  background: rgba(8,10,19,.84);
  box-shadow: 0 -10px 22px rgba(3,5,10,.58), inset 0 0 0 1px rgba(130,100,255,.06), 0 8px 22px rgba(0,0,0,.34);
}
.companion-rail-add i {
  color: #cbbfff;
  filter: drop-shadow(0 0 7px rgba(139,106,255,.72));
}
.companion-rail-add:hover,
.companion-rail-add:focus-visible {
  border-color: rgba(151,119,255,.78);
  box-shadow: 0 -10px 22px rgba(3,5,10,.58), 0 0 0 2px rgba(139,106,255,.14), 0 0 20px rgba(126,91,255,.42);
}
.companion-identity {
  position: absolute;
  z-index: 2;
  top: auto;
  bottom: 180px;
  left: 68px;
  max-width: 230px;
  text-shadow: 0 3px 20px rgba(0,0,0,.78);
}
.companion-identity h1 {
  margin: 0 0 6px;
  color: #d8d0ff;
  font-family: "Songti SC", "STSong", Georgia, serif;
  font-size: clamp(27px, 7.2vw, 34px);
  font-weight: 600;
  letter-spacing: .02em;
}
.companion-identity p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: rgba(221,214,255,.86);
  font-size: 13px;
  letter-spacing: .08em;
}
.companion-identity p span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9c82ff;
  box-shadow: 0 0 12px #9c82ff;
}
.companion-world-entry {
  position: absolute;
  z-index: 3;
  top: 31%;
  right: -1px;
  display: grid;
  gap: 10px;
  justify-items: center;
  width: 50px;
  min-width: 50px;
  padding: 18px 4px 18px 7px;
  border: 1px solid rgba(147,116,255,.68);
  border-right: 0;
  border-radius: 999px 0 0 999px;
  background: rgba(10,12,23,.32);
  color: #d7d0ff;
  text-decoration: none;
  box-shadow: -6px 0 25px rgba(101,70,236,.16), inset 1px 0 rgba(255,255,255,.1);
  backdrop-filter: blur(4px);
}
.companion-world-entry span { font-size: 15px; line-height: 1.45; letter-spacing: .08em; }
.companion-world-entry i { font-size: 20px; }
.companion-actions {
  position: absolute;
  z-index: 3;
  left: 24px;
  right: 24px;
  bottom: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px;
  gap: 8px 10px;
  align-items: center;
}
.companion-message {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 58px;
  padding: 12px 15px;
  border: 1px solid rgba(210,201,255,.28);
  border-radius: 24px 24px 6px 24px;
  background: rgba(25,26,43,.68);
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 14px 30px rgba(0,0,0,.22);
  backdrop-filter: blur(16px);
}
.companion-message i { flex: 0 0 auto; color: #9677ff; font-size: 22px; }
.companion-message p {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: rgba(235,231,255,.86);
  font-size: 13px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.companion-days { color: #d9d2ff; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.companion-days span,
.companion-days b { display: block; }
.companion-days span { font-size: 11px; }
.companion-days b { margin-top: 2px; font-size: 13px; font-weight: 500; }
.companion-primary-action {
  grid-column: 1;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 13px 20px;
  border: 1px solid #8f70ff;
  border-radius: 999px;
  background: linear-gradient(104deg, rgba(76,55,175,.9), rgba(92,67,204,.64));
  color: #f6f2ff;
  box-shadow: inset 0 1px rgba(255,255,255,.16), 0 0 26px rgba(109,73,255,.28);
  backdrop-filter: blur(14px);
  font-family: "Songti SC", "STSong", Georgia, serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .06em;
}
.companion-primary-action i { position: absolute; right: 26px; font-size: 22px; }
.companion-primary-action:hover,
.companion-primary-action:focus-visible { filter: brightness(1.1); transform: translateY(-1px); }
.app-bottom-nav {
  position: relative;
  z-index: 5;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  min-height: 86px;
  padding: 9px 8px max(10px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(185,169,255,.32);
  background: rgba(6,8,14,.93);
  box-shadow: 0 -14px 30px rgba(0,0,0,.28);
  backdrop-filter: blur(22px);
}
.app-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  padding: 4px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: #aaa9b8;
  text-decoration: none;
  box-shadow: none;
  font-size: 13px;
  font-weight: 500;
}
.app-nav-item i { font-size: 27px; }
.app-nav-item.is-active { color: #a98cff; }
.app-nav-item:hover,
.app-nav-item:focus-visible { color: #c9b9ff; background: rgba(141,112,255,.08); }

/* "我的" uses the same immersive visual system as the selected companion home. */
#view-profile {
  min-height: 0;
  background: #070910;
  color: #efecff;
}
.profile-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  scroll-padding-bottom: 24px;
  background: #090b13;
}
.profile-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
.profile-hero {
  position: relative;
  min-height: 260px;
  overflow: hidden;
  background: #05080d;
}
.profile-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 31%;
  filter: saturate(.78) brightness(.62);
}
.profile-hero-shade {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 12, .48);
  box-shadow: inset 0 -120px 90px rgba(7, 9, 16, .96);
}
.profile-brand {
  position: absolute;
  top: 18px;
  left: 22px;
  color: #cabaff;
  font-family: Georgia, "Songti SC", serif;
  font-size: 19px;
  font-style: italic;
  font-weight: 700;
  text-shadow: 0 0 18px rgba(137,106,255,.45);
}
.profile-brand i { margin-left: 3px; font-size: 11px; vertical-align: top; }
.profile-settings-shortcut {
  position: absolute;
  top: 22px;
  right: 20px;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(216, 205, 255, .3);
  border-radius: 50%;
  background: rgba(10, 12, 23, .62);
  color: #ddd5ff;
  font-size: 21px;
  line-height: 1;
  backdrop-filter: blur(12px);
}
.profile-account {
  position: absolute;
  z-index: 2;
  left: 22px;
  right: 22px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 13px;
}
.profile-avatar {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(194, 180, 255, .5);
  border-radius: 20px;
  background: rgba(42, 35, 74, .84);
  color: #c9bbff;
  box-shadow: 0 0 24px rgba(125, 88, 255, .26);
  font-size: 27px;
}
.profile-account h1 { margin: 0; color: #f0ecff; font: 600 23px/1.3 "Songti SC", "STSong", Georgia, serif; text-shadow: 0 2px 16px rgba(0,0,0,.82); }
.profile-account p { margin: 5px 0 0; color: #a9a2ba; font-size: 11px; letter-spacing: .04em; }
.profile-content { padding: 0 16px 34px; }
.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 0 14px;
  overflow: hidden;
  border: 1px solid rgba(177, 157, 255, .17);
  border-radius: 20px;
  background: #11131e;
}
.profile-stats div { position: relative; padding: 15px 8px; text-align: center; }
.profile-stats div + div::before { content: ""; position: absolute; top: 15px; bottom: 15px; left: 0; width: 1px; background: rgba(255,255,255,.07); }
.profile-stats b,
.profile-stats span { display: block; }
.profile-stats b { color: #dcd4ff; font-size: 20px; font-weight: 650; }
.profile-stats span { margin-top: 3px; color: #858091; font-size: 10px; }
.profile-section {
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid rgba(177, 157, 255, .14);
  border-radius: 20px;
  background: #11131e;
}
.profile-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 15px 8px;
}
.profile-section-title span { color: #dcd6ef; font-size: 13px; font-weight: 650; }
.profile-section-title small { color: #716c7b; font-size: 9px; }
.profile-row,
.profile-data-note {
  width: 100%;
  min-height: 62px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border: 0;
  border-top: 1px solid rgba(255,255,255,.055);
  background: transparent;
  color: #ded9eb;
  text-align: left;
}
.profile-row > i:first-child,
.profile-data-note > i:first-child { color: #a88eff; font-size: 21px; }
.profile-row > i:last-child { color: #696474; font-size: 16px; }
.profile-row span,
.profile-data-note span { min-width: 0; }
.profile-row b,
.profile-row small,
.profile-data-note b,
.profile-data-note small { display: block; }
.profile-row b,
.profile-data-note b { font-size: 13px; font-weight: 580; }
.profile-row small,
.profile-data-note small { margin-top: 4px; color: #817b8d; font-size: 10px; line-height: 1.45; }
.profile-row:hover,
.profile-row:focus-visible { background: rgba(141,112,255,.08); }
.profile-row:disabled { opacity: 1; cursor: default; }
.profile-row.is-complete > i:first-child { color: #66c7a1; }
.profile-data-note { grid-template-columns: 34px minmax(0, 1fr); background: rgba(116, 93, 202, .08); }
.profile-row-danger { color: #dca5ad; }
.profile-row-danger > i:first-child { color: #c87987; }

/* 独立设置页：保留真实偏好与关系共识功能，不再使用嵌套弹窗。 */
#view-settings { min-height: 0; background: #090b13; color: #efecff; }
.settings-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  background: #090b13;
}
.settings-scroll::-webkit-scrollbar,
.settings-consent #rule-list::-webkit-scrollbar { display: none; width: 0; height: 0; }
.settings-hero { position: relative; min-height: 238px; overflow: hidden; background: #05080d; }
.settings-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 31%; filter: saturate(.72) brightness(.52); }
.settings-hero-shade { position: absolute; inset: 0; background: rgba(4,6,12,.48); box-shadow: inset 0 -112px 86px rgba(9,11,19,.98); }
.settings-back {
  position: absolute;
  z-index: 2;
  top: 22px;
  left: 20px;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(216,205,255,.3);
  border-radius: 50%;
  background: rgba(10,12,23,.62);
  color: #ddd5ff;
  font-size: 20px;
  line-height: 1;
  backdrop-filter: blur(12px);
}
.settings-brand { position: absolute; z-index: 2; top: 20px; right: 22px; color: #cabaff; font: italic 700 18px/1 Georgia, "Songti SC", serif; text-shadow: 0 0 18px rgba(137,106,255,.45); }
.settings-brand i { margin-left: 3px; font-size: 10px; vertical-align: top; }
.settings-title { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 24px; }
.settings-title small { color: #a68fff; font-size: 9px; letter-spacing: .18em; }
.settings-title h1 { margin: 6px 0 5px; color: #f1edff; font: 600 27px/1.2 "Songti SC", "STSong", Georgia, serif; text-shadow: 0 2px 16px rgba(0,0,0,.82); }
.settings-title p { color: #aaa3b8; font-size: 11px; }
.settings-content { padding: 0 16px 22px; }
.settings-signin {
  min-height: 74px;
  display: grid;
  grid-template-columns: 38px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(157,132,255,.18);
  border-radius: 20px;
  background: #151827;
}
.settings-signin > i { color: #71d2ad; font-size: 23px; }
.settings-signin b,
.settings-signin small { display: block; }
.settings-signin b { color: #e5e0f2; font-size: 13px; }
.settings-signin small { margin-top: 4px; color: #827c8e; font-size: 9px; line-height: 1.4; }
.settings-signin button { min-height: 34px; padding: 0 12px; border: 1px solid rgba(173,150,255,.45); border-radius: 999px; background: #5843ad; color: #f5f1ff; font-size: 10px; }
.settings-card { margin-top: 12px; overflow: hidden; border: 1px solid rgba(177,157,255,.14); border-radius: 20px; background: #11131e; }
.settings-section-title { min-height: 65px; display: flex; align-items: center; justify-content: space-between; padding: 13px 15px 10px; }
.settings-section-title small { color: #817a90; font-size: 9px; letter-spacing: .08em; }
.settings-section-title h2 { margin: 4px 0 0; color: #ded8ef; font-size: 14px; font-weight: 620; }
.settings-section-title > i { color: #a88eff; font-size: 22px; }
.settings-option-row { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 15px; border-top: 1px solid rgba(255,255,255,.055); }
.settings-option-row span,
.settings-option-row b,
.settings-option-row small { display: block; }
.settings-option-row b { color: #ded9eb; font-size: 13px; font-weight: 580; }
.settings-option-row small { margin-top: 4px; color: #817b8d; font-size: 10px; line-height: 1.45; }
.settings-switch-input { width: 42px; height: 22px; flex: 0 0 auto; accent-color: #8e70ff; cursor: pointer; }
.settings-proactive-gate { min-height: 62px; display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 10px; margin: 0 14px 12px; padding: 10px 12px; border: 1px solid rgba(157,132,255,.18); border-radius: 15px; background: linear-gradient(135deg,rgba(132,92,229,.13),rgba(14,16,27,.88)); }
.settings-proactive-gate > i { color: #b49cff; font-size: 19px; }
.settings-proactive-gate span,
.settings-proactive-gate b,
.settings-proactive-gate small { display: block; }
.settings-proactive-gate b { color: #ded9eb; font-size: 11px; font-weight: 600; }
.settings-proactive-gate small { margin-top: 4px; color: #888095; font-size: 9px; line-height: 1.4; }
.settings-proactive-gate strong { min-width: 72px; color: #c5b4ff; font-size: 13px; text-align: right; }
.settings-push-row { margin-top: -5px; }
.settings-push-button { flex: 0 0 auto; min-width: 74px; padding: 8px 11px; border: 1px solid rgba(157,132,255,.28); border-radius: 999px; background: rgba(113,78,191,.12); color: #b9a7f4; font-size: 10px; cursor: pointer; }
.settings-push-button.is-enabled { border-color: rgba(107,222,180,.34); background: rgba(62,171,133,.12); color: #79dfba; }
.settings-push-button:disabled { cursor: default; opacity: .55; }
.settings-consent { padding-bottom: 14px; }
.settings-consent-copy { margin: 0 15px 11px; color: #8f8999; font-size: 10px; line-height: 1.65; }
.settings-consent-copy strong { color: #c4b8ee; font-weight: 600; }
.settings-consent #rule-list { max-height: 132px; overflow-y: auto; scrollbar-width: none; margin: 0 14px 10px; padding: 9px 11px; border: 1px solid rgba(255,255,255,.06); border-radius: 13px; background: #0d0f18; color: #bbb4c8; font-size: 10px; line-height: 1.8; }
.settings-rule-empty { padding: 8px 2px; color: #777180; text-align: center; }
.settings-rule-row { display: grid; grid-template-columns: 18px minmax(0,1fr) auto; align-items: start; gap: 7px; padding: 7px 0; border-top: 1px solid rgba(255,255,255,.05); }
.settings-rule-row:first-child { border-top: 0; }
.settings-rule-row > i { margin-top: 2px; color: #a88eff; font-size: 14px; }
.settings-rule-row > span { min-width: 0; color: #bbb4c8; }
.settings-rule-row > button { min-height: 24px; padding: 2px 5px; border: 0; border-radius: 7px; background: transparent; color: #c87987; font-size: 9px; font-weight: 500; }
.settings-rule-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 14px 10px; }
.settings-rule-chips button { min-height: 30px; padding: 6px 9px; border: 1px solid rgba(151,124,255,.22); border-radius: 999px; background: #211c39; color: #bcaeff; font-size: 9px; font-weight: 500; }
.settings-rule-input { display: flex; gap: 7px; margin: 0 14px; }
.settings-rule-input input { flex: 1; min-width: 0; padding: 10px 11px; border: 1px solid rgba(255,255,255,.09); border-radius: 13px; outline: 0; background: #0c0e16; color: #e3deec; font-size: 10px; }
.settings-rule-input input:focus { border-color: rgba(166,140,255,.5); }
.settings-rule-input button { min-width: 58px; padding: 0 12px; border: 0; border-radius: 13px; background: #5843ad; color: #fff; font-size: 10px; }
.settings-actions { flex: 0 0 auto; display: grid; grid-template-columns: minmax(0,1fr) 104px; gap: 9px; padding: 12px 16px max(14px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(177,157,255,.15); background: rgba(7,9,16,.98); }
.settings-actions button { min-height: 46px; border-radius: 999px; font-size: 12px; }
.settings-save { display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid #8f73ff; background: #5843ad; color: #f6f2ff; }
.settings-save i { font-size: 16px; }
.settings-cancel { border: 1px solid rgba(157,132,255,.25); background: transparent; color: #918b9b; }

.scene-evidence-modal {
  position: absolute;
  inset: 0;
  z-index: 70;
  align-items: flex-end;
  justify-content: center;
  padding: 24px 14px max(18px, env(safe-area-inset-bottom));
  background: rgba(3,5,12,.72);
  backdrop-filter: blur(12px);
}

.first-event-modal {
  position: absolute;
  inset: 0;
  z-index: 72;
  align-items: flex-end;
  justify-content: center;
  padding: 24px 14px max(18px, env(safe-area-inset-bottom));
  background: rgba(3,5,12,.76);
  backdrop-filter: blur(14px);
}
.first-event-panel {
  width: min(100%, 430px);
  padding: 21px 20px 18px;
  border: 1px solid rgba(163,137,255,.24);
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(24,24,40,.98), rgba(10,11,22,.99));
  color: #eeeaf7;
  box-shadow: 0 22px 70px rgba(0,0,0,.48), 0 0 34px rgba(91,55,196,.18);
}
.first-event-panel > small { color: #a78cff; font: 9px/1.2 Arial, sans-serif; letter-spacing: .2em; }
.first-event-panel h2 { margin: 7px 0 11px; font: 24px/1.3 "Songti SC", "STSong", Georgia, serif; }
.first-event-panel > p { margin: 0; color: #d7d1e3; font-size: 12px; line-height: 1.8; white-space: pre-line; }
.first-event-note { display: flex; gap: 8px; margin-top: 15px; padding: 10px 11px; border-radius: 14px; background: rgba(143,115,255,.08); color: #9892a7; font-size: 9px; line-height: 1.55; }
.first-event-note i { flex: 0 0 auto; margin-top: 1px; color: #9f83ff; font-size: 14px; }
.first-event-actions { display: grid; grid-template-columns: 1fr 1.25fr; gap: 9px; margin-top: 16px; }
.first-event-actions button { min-height: 44px; border-radius: 15px; font-size: 12px; }
.first-event-later { border: 1px solid rgba(166,145,255,.2); background: transparent; color: #aaa4b8; }
.first-event-enter { border: 1px solid #9778ff; background: linear-gradient(135deg, #473291, #6747cb); color: #fff; box-shadow: 0 8px 24px rgba(79,47,177,.32); }
.daily-life-actions { display: grid; grid-template-columns: .9fr 1fr 1.2fr; gap: 7px; margin-top: 16px; }
.daily-life-actions button { min-height: 42px; padding: 8px 7px; border-radius: 14px; font-size: 11px; }
.daily-life-reject,
.daily-life-defer { border: 1px solid rgba(166,145,255,.2); background: transparent; color: #aaa4b8; }
.daily-life-participate { border: 1px solid #9778ff; background: linear-gradient(135deg, #473291, #6747cb); color: #fff; box-shadow: 0 8px 24px rgba(79,47,177,.32); }
.daily-life-close { display: block; width: 100%; min-height: 44px; margin-top: 8px; border: 0; background: transparent; color: #bbb3ce; font-size: 12px; line-height: 30px; }
.daily-life-actions button:disabled,
.daily-life-step-actions button:disabled { opacity: .5; cursor: wait; }
.daily-life-panel { max-height: min(86vh, 720px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.daily-life-progress { min-width: 0; margin-top: 15px; padding: 13px; border: 1px solid rgba(166,145,255,.16); border-radius: 16px; background: rgba(8,9,19,.55); }
.daily-life-progress[hidden],
.daily-life-actions[hidden] { display: none !important; }
.daily-life-progress-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #b9afd2; font-size: 10px; }
.daily-life-progress-head small { min-width: 0; color: #7f788e; overflow-wrap: anywhere; text-align: right; }
.daily-life-progress-track { height: 4px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.07); }
.daily-life-progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8564ed, #b497ff); transition: width .2s ease; }
.daily-life-progress h3 { margin: 13px 0 5px; color: #eee9f8; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.daily-life-progress > p { margin: 0; color: #b8b1c4; font-size: 11px; line-height: 1.65; overflow-wrap: anywhere; }
.daily-life-persona-action { display: flex; min-width: 0; gap: 7px; margin-top: 10px; padding: 9px 10px; border-radius: 12px; background: rgba(135,103,235,.09); color: #a79eb8; font-size: 10px; line-height: 1.55; }
.daily-life-persona-action i { flex: 0 0 auto; margin-top: 1px; color: #9f83ff; }
.daily-life-persona-action span { min-width: 0; overflow-wrap: anywhere; }
.daily-life-step-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 12px; }
.daily-life-step-actions button { min-width: 0; min-height: 42px; padding: 8px; border: 1px solid rgba(166,145,255,.2); border-radius: 13px; background: rgba(15,15,29,.78); color: #c9c1d8; font-size: 10px; line-height: 1.35; overflow-wrap: anywhere; }
.daily-life-step-action-advance { border-color: rgba(151,120,255,.65) !important; background: linear-gradient(135deg, rgba(71,50,145,.9), rgba(103,71,203,.88)) !important; color: #fff !important; }
.daily-life-step-action-fail { border-color: rgba(220,112,133,.28) !important; color: #caa5af !important; }

.memory-journal-modal {
  position: absolute;
  inset: 0;
  z-index: 68;
  align-items: flex-end;
  justify-content: center;
  padding: 24px 14px max(18px, env(safe-area-inset-bottom));
  background: rgba(3,5,12,.74) !important;
  backdrop-filter: blur(12px) !important;
}
#mem-modal .memory-journal-panel {
  width: min(100%, 430px) !important;
  max-height: 84% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border: 1px solid rgba(172,149,255,.3) !important;
  border-radius: 26px !important;
  background: linear-gradient(160deg, rgba(21,22,38,.98), rgba(8,10,19,.98)) !important;
  color: #eeeaff !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.06) !important;
}
.memory-journal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 6px; }
.memory-journal-head small { color: #9c83ff; font: 9px/1.2 Arial, sans-serif; letter-spacing: .2em; }
.memory-journal-head h2 { margin: 4px 0 0; font: 22px/1.25 "Songti SC", "STSong", Georgia, serif; }
#mem-modal .memory-journal-head button { width: 36px; height: 36px; padding: 0; border: 0 !important; border-radius: 50% !important; background: rgba(255,255,255,.06) !important; color: #d8d2ec !important; font-size: 25px; }
.memory-journal-note { margin: 0; padding: 0 20px 13px; color: #aaa4bc; font-size: 10px; line-height: 1.55; }
.memory-journal-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 16px 18px; font-size: 12px; }
.memory-journal-section { margin-top: 10px; padding: 13px 14px; border: 1px solid rgba(255,255,255,.07); border-radius: 18px; background: rgba(255,255,255,.035); }
.memory-journal-section h3 { margin: 0 0 8px; color: #cbbfff; font-size: 11px; font-weight: 600; letter-spacing: .08em; }
.memory-anniversary { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 9px; align-items: center; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.05); }
.memory-anniversary:first-of-type { border-top: 0; }
.memory-anniversary > i { color: #9d80ff; font-size: 18px; }
.memory-anniversary div { display: grid; gap: 3px; }
.memory-anniversary b { color: #e9e4f7; font-weight: 500; }
.memory-anniversary small { color: #8f899e; font-size: 9px; }
.memory-diary-item { display: grid; grid-template-columns: minmax(0,1fr) 30px; gap: 8px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.05); }
.memory-diary-item:first-of-type { border-top: 0; }
.memory-diary-copy { min-width: 0; display: grid; gap: 4px; }
.memory-diary-copy small { color: #9d80ff; font-size: 9px; }
.memory-diary-copy b { color: #ded9eb; font-weight: 500; line-height: 1.55; }
.memory-diary-copy span { overflow: hidden; color: #827c90; font-size: 9px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
#mem-modal .memory-diary-item button { align-self: center; width: 28px; height: 28px; padding: 0; border: 0 !important; border-radius: 50% !important; background: transparent !important; color: #8f899e !important; }
.memory-journal-empty { padding: 34px 12px; color: #aaa4bc; text-align: center; line-height: 1.8; }
.memory-journal-empty small { color: #746f80; }
.scene-evidence-panel {
  width: min(100%, 430px);
  max-height: 86%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(172,149,255,.32);
  border-radius: 26px;
  background: linear-gradient(160deg, rgba(21,22,38,.98), rgba(8,10,19,.98));
  color: #eeeaff;
  box-shadow: 0 28px 80px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.06);
}
.scene-evidence-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 10px;
  font-family: "Songti SC", "STSong", Georgia, serif;
  font-size: 22px;
}
.scene-evidence-kicker { margin-bottom: 4px; color: #9c83ff; font: 10px/1.2 Arial, sans-serif; letter-spacing: .2em; }
.scene-evidence-close { width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255,255,255,.06); color: #d8d2ec; font-size: 26px; }
.scene-evidence-note { padding: 0 20px 13px; color: #aaa4bc; font-size: 11px; line-height: 1.55; }
.scene-evidence-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 16px 16px; }
.scene-evidence-loading,
.scene-empty { padding: 28px 12px; color: #aaa4bc; text-align: center; font-size: 12px; }
.scene-decision { display: grid; gap: 5px; margin-bottom: 12px; padding: 13px 14px; border-radius: 16px; font-size: 12px; line-height: 1.5; }
.scene-decision b { font-size: 14px; }
.scene-decision span { color: rgba(244,241,255,.72); }
.scene-decision.allow { border: 1px solid rgba(94,218,164,.34); background: rgba(35,130,90,.15); }
.scene-decision.rewrite { border: 1px solid rgba(236,190,93,.38); background: rgba(160,110,32,.16); }
.scene-decision.block { border: 1px solid rgba(237,112,132,.38); background: rgba(150,47,67,.16); }
.scene-evidence-section { margin-top: 11px; padding: 13px 14px; border: 1px solid rgba(255,255,255,.07); border-radius: 18px; background: rgba(255,255,255,.035); }
.scene-evidence-section h3 { margin: 0 0 10px; color: #cbbfff; font-size: 12px; font-weight: 600; letter-spacing: .06em; }
.scene-fact { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 9px; padding: 6px 0; border-top: 1px solid rgba(255,255,255,.045); font-size: 11px; line-height: 1.5; }
.scene-fact:first-of-type { border-top: 0; }
.scene-fact span { color: #8f899e; }
.scene-fact b { color: #dfdbec; font-weight: 500; }
.scene-source-row { display: grid; gap: 3px; padding: 7px 0; border-top: 1px solid rgba(255,255,255,.05); font-size: 11px; line-height: 1.45; }
.scene-source-row:first-of-type { border-top: 0; }
.scene-source-row b { color: #a997ff; font-weight: 500; }
.scene-source-row span { color: #bbb5c8; }
.scene-prompt { margin-top: 11px; padding: 12px 14px; border: 1px solid rgba(143,112,255,.24); border-radius: 16px; background: rgba(86,61,174,.09); color: #c9bdff; font-size: 11px; }
.scene-prompt pre { margin: 10px 0 0; white-space: pre-wrap; color: #c8c2d4; font: 11px/1.65 "PingFang SC", sans-serif; }
.scene-evidence-actions { display: grid; grid-template-columns: 1fr 80px; gap: 9px; padding: 12px 16px 16px; border-top: 1px solid rgba(255,255,255,.07); }
.scene-evidence-actions button { min-height: 42px; border: 1px solid rgba(166,143,255,.42); border-radius: 999px; background: rgba(90,65,190,.34); color: #eeeaff; font-size: 12px; }
.scene-evidence-actions button:last-child { background: rgba(255,255,255,.04); color: #aaa4bc; }
.scene-evidence-actions button:disabled { opacity: .38; cursor: not-allowed; }

/* 聊天关系里程碑：保持单行轻提示，不挤压消息流。 */
#milestone-bar:empty { display: none; }
#milestone-bar {
  flex: 0 0 auto;
  min-width: 0;
  overflow: hidden;
  border-bottom: 1px solid rgba(113, 91, 191, .08);
  background: linear-gradient(90deg, rgba(251, 249, 255, .96), rgba(246, 243, 255, .78));
}
.milestone-strip {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  padding: 6px 12px;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.milestone-strip::-webkit-scrollbar { display: none; }
.milestone-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  max-width: min(72vw, 260px);
  min-height: 28px;
  overflow: hidden;
  padding: 4px 10px;
  border: 1px solid rgba(119, 91, 218, .15);
  border-radius: 999px;
  background: rgba(119, 91, 218, .055);
  color: #74658d;
  font-size: 11px;
  line-height: 18px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.milestone-chip i { color: #a383e8; font-size: 12px; }

@media (max-width: 650px) {
  body { padding: 0; background: #05080d; }
  #phone {
    width: 100%;
    height: var(--chat-viewport-height, 100dvh);
    max-height: none;
    border: 0;
    border-radius: 0;
  }
  .companion-stage-image { object-position: center 40%; }
}

@media (max-height: 720px) {
  .companion-rail { top: 78px; gap: 9px; max-height: calc(100% - 350px); }
  .companion-rail-list { gap: 9px; }
  .companion-rail-avatar { width: 46px; height: 56px; }
  .companion-identity { top: auto; bottom: 160px; left: 68px; }
  .companion-actions { bottom: 18px; }
  .companion-message { min-height: 50px; }
  .companion-primary-action { min-height: 50px; font-size: 17px; }
  .app-bottom-nav { min-height: 74px; }
  .profile-hero { min-height: 220px; }
  .profile-content { padding-bottom: 28px; }
  .settings-hero { min-height: 210px; }
}

/* Product Design option 1: immersive persona previewer. */
#view-pick {
  position: relative;
  min-height: 0;
  background: #05080d;
  color: #f5f1ff;
}
.persona-picker-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  background: #05080d;
}
.persona-picker-image {
  position: absolute;
  z-index: -3;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: opacity .22s ease, transform .55s ease;
}
.persona-picker-shade {
  position: absolute;
  z-index: -2;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2, 5, 12, .92) 0, rgba(3, 7, 15, .56) 22%, rgba(3, 7, 15, .1) 58%, rgba(2, 5, 12, .28) 100%),
    linear-gradient(0deg, rgba(3, 5, 12, .98) 0, rgba(3, 5, 12, .88) 21%, rgba(3, 5, 12, .12) 59%, rgba(3, 5, 12, .38) 100%);
}
.persona-picker-header {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  right: 0;
  min-height: 78px;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: max(18px, env(safe-area-inset-top)) 18px 10px;
}
.persona-picker-header h1 {
  position: absolute;
  top: max(25px, env(safe-area-inset-top));
  left: 70px;
  margin: 0;
  color: #eee8ff;
  font-family: "Songti SC", "STSong", Georgia, serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .08em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}
.persona-picker-back,
.persona-picker-import,
.persona-picker-next,
.persona-picker-avatar,
.persona-picker-action {
  -webkit-tap-highlight-color: transparent;
}
.persona-picker-back {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #cdbfff;
  font-size: 24px;
}
.persona-picker-import {
  grid-column: 3;
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 13px;
  border: 1px solid rgba(183, 162, 255, .34);
  border-radius: 999px;
  background: rgba(10, 11, 24, .5);
  color: #ded6ff;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .02em;
  backdrop-filter: blur(14px);
}
.persona-picker-import i { color: #a98dff; font-size: 14px; }
.persona-picker-rail {
  position: absolute;
  z-index: 4;
  top: 88px;
  bottom: 30px;
  left: 12px;
  width: 62px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 44px;
  gap: 10px;
}
.persona-picker-rail-list {
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  padding: 5px 5px 18px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  overscroll-behavior: contain;
  mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}
.persona-picker-rail-list::-webkit-scrollbar { display: none; }
.persona-picker-avatar {
  position: relative;
  flex: 0 0 auto;
  width: 50px;
  min-width: 50px;
  height: 60px;
  min-height: 60px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(220, 214, 241, .22);
  border-radius: 22px;
  background: rgba(7, 9, 17, .72);
  opacity: .64;
  filter: saturate(.72) brightness(.72);
  transform: scale(.92);
  transition: opacity .18s ease, filter .18s ease, transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.persona-picker-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 20%;
}
.persona-picker-avatar span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.persona-picker-avatar.is-selected {
  border-color: #a17cff;
  opacity: 1;
  filter: none;
  transform: scale(1);
  box-shadow: 0 0 0 2px rgba(133, 94, 255, .28), 0 0 24px rgba(120, 78, 255, .72);
}
.persona-picker-avatar:focus-visible,
.persona-picker-back:focus-visible,
.persona-picker-import:focus-visible,
.persona-picker-next:focus-visible,
.persona-picker-action:focus-visible {
  outline: 2px solid #c3b2ff;
  outline-offset: 3px;
}
.persona-picker-next {
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  display: grid;
  place-items: center;
  justify-self: center;
  padding: 0;
  border: 1px solid rgba(190, 175, 238, .3);
  border-radius: 50%;
  background: rgba(8, 10, 20, .65);
  color: #c5b9ec;
  font-size: 17px;
  backdrop-filter: blur(12px);
}
.persona-picker-copy {
  position: absolute;
  z-index: 3;
  right: 30px;
  bottom: max(26px, env(safe-area-inset-bottom));
  left: 104px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .68);
}
.persona-picker-eyebrow {
  margin-bottom: 8px;
  color: #ad98f9;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .24em;
}
.persona-picker-title-row {
  display: grid;
  grid-template-columns: max-content 22px;
  align-items: start;
  column-gap: 3px;
}
.persona-picker-title-row h2 {
  margin: 0;
  font-family: "Songti SC", "STSong", Georgia, serif;
  font-size: clamp(31px, 9vw, 38px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: .03em;
}
.persona-picker-name-spark {
  align-self: flex-start;
  margin: 2px -2px 0 -3px;
  color: #a988ff;
  font-size: 17px;
}
.persona-picker-title-row span {
  grid-column: 1 / -1;
  display: block;
  margin-top: 7px;
  color: rgba(231, 225, 249, .68);
  font-size: 11px;
  white-space: nowrap;
}
.persona-picker-hook {
  min-height: 39px;
  margin: 12px 0 11px;
  color: rgba(236, 232, 247, .78);
  font-family: "Songti SC", "STSong", Georgia, serif;
  font-size: 13px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.persona-picker-tags {
  min-height: 27px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 17px;
}
.persona-picker-details { margin: 0 0 10px; color: #eee8ff; font-size: 12px; line-height: 1.6; }
.persona-picker-details summary { cursor: pointer; min-height: 28px; padding: 4px 0; color: #d2c2ff; }
.persona-picker-details summary:focus-visible { outline: 2px solid #d2c2ff; outline-offset: 3px; }
.persona-picker-details[open] { padding: 8px 12px; border: 1px solid rgba(182,159,255,.32); border-radius: 12px; background: rgba(20,18,39,.94); }
.persona-picker-details p { margin: 5px 0; max-height: 100px; overflow-y: auto; overflow-wrap: anywhere; }
.persona-picker-details small { display: block; color: #c6bed9; font-size: 11px; }
.world-availability { position: absolute; z-index: 5; top: calc(max(30px, env(safe-area-inset-top)) + 46px); left: 22px; right: 22px; margin: 0; color: #eee8ff; background: rgba(20,18,39,.92); border: 1px solid rgba(182,159,255,.32); border-radius: 12px; padding: 6px 9px; font-size: 11px; line-height: 1.5; }
.world-availability a { color: #d2c2ff; text-decoration: underline; }
@media (max-height: 740px) { .world-availability { top: calc(max(10px, env(safe-area-inset-top)) + 46px); } }
.persona-picker-tags span {
  padding: 5px 10px;
  border: 1px solid rgba(182, 159, 255, .32);
  border-radius: 999px;
  background: rgba(99, 69, 183, .16);
  color: #cfc1ff;
  font-size: 10px;
  line-height: 1.2;
  backdrop-filter: blur(9px);
}
.persona-picker-action {
  width: 100%;
  min-height: 52px;
  display: grid;
  grid-template-columns: 24px 1fr 24px;
  align-items: center;
  padding: 0 19px;
  border: 1px solid rgba(145, 105, 255, .96);
  border-radius: 999px;
  background: linear-gradient(112deg, rgba(52, 34, 112, .78), rgba(58, 37, 126, .64));
  color: #fbf9ff;
  font-family: "Songti SC", "STSong", Georgia, serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .12em;
  box-shadow: 0 0 18px rgba(101, 59, 232, .42), 0 8px 24px rgba(25, 13, 72, .3), inset 0 1px rgba(255, 255, 255, .08);
  backdrop-filter: blur(14px);
}
.persona-picker-action i { justify-self: center; color: rgba(147, 106, 255, .82); font-size: 12px; }
.persona-picker-action:active { transform: scale(.985); }

@media (max-height: 720px) {
  .persona-picker-header { min-height: 66px; padding-top: max(12px, env(safe-area-inset-top)); }
  .persona-picker-rail { top: 72px; bottom: 20px; }
  .persona-picker-rail-list { gap: 9px; }
  .persona-picker-avatar { width: 44px; min-width: 44px; height: 52px; min-height: 52px; border-radius: 19px; }
  .persona-picker-copy { right: 22px; left: 92px; bottom: max(18px, env(safe-area-inset-bottom)); }
  .persona-picker-title-row h2 { font-size: 30px; }
  .persona-picker-hook { margin: 8px 0; font-size: 12px; }
  .persona-picker-tags { margin-bottom: 11px; }
  .persona-picker-action { min-height: 50px; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .persona-picker-image,
  .persona-picker-avatar { transition: none; }
  .persona-picker-rail-list { scroll-behavior: auto; }
}

/* Daily invitations share the existing companion palette and stay within reach. */
.daily-companion-entry { grid-column: 1 / -1; width: 100%; min-width: 0; min-height: 64px; display: flex; align-items: center; gap: 10px; padding: 10px 13px; border: 1px solid rgba(166,145,255,.4); border-radius: 17px; color: #eee8ff; background: rgba(20,18,39,.94); text-align: left; cursor: pointer; }
.daily-companion-entry > i { flex: 0 0 auto; color: #c8b7ff; font-size: 20px; }
.daily-companion-entry > span { min-width: 0; flex: 1; }
.daily-companion-entry small, .daily-companion-entry b { display: block; overflow-wrap: anywhere; }
.daily-companion-entry small { font-size: 12px; color: #c6bed9; }
.daily-companion-entry b { margin-top: 3px; font-size: 14px; line-height: 1.4; }
.daily-companion-entry em { flex: 0 0 auto; max-width: 74px; font-style: normal; font-size: 12px; color: #d1c5ed; }
.companion-stage.has-daily-entry .companion-identity { bottom: 264px; }
#chat-daily-entry { flex: 0 0 auto; padding: 8px 12px 0; }
#chat-daily-entry[hidden], .daily-life-chat[hidden], .experience-source[hidden] { display: none !important; }
.daily-companion-entry.in-chat { min-height: 54px; padding: 8px 12px; background: #f5f1ff; color: #413263; border-color: #d8cafa; }
.daily-companion-entry.in-chat small, .daily-companion-entry.in-chat em, .daily-companion-entry.in-chat > i { color: #69518f; }
.experience-source { margin-top: 8px; font-size: 12px; line-height: 1.6; }
.experience-source > summary { min-height: 36px; display: list-item; padding: 8px 0; cursor: pointer; color: inherit; }
.experience-source p, .experience-source small, .experience-source span { overflow-wrap: anywhere; white-space: pre-wrap; }
.event-status-card .experience-source [data-event-receipt-id] { padding: 8px 0; border-top: 1px solid #ded6ed; }
.relationship-flow-status > summary { min-height: 36px; padding: 6px 0; cursor: pointer; }
.daily-life-chat { display: block; width: 100%; min-height: 48px; margin-top: 14px; padding: 10px 14px; border: 1px solid #ad93ff; border-radius: 14px; color: #fff; background: #6345b5; font-size: 14px; cursor: pointer; }
.daily-life-panel .experience-source { color: #c6bed9; }
.daily-companion-entry:focus-visible, .daily-life-chat:focus-visible, .experience-source > summary:focus-visible { outline: 3px solid #b9a1ff; outline-offset: 3px; }
@media (max-height: 700px) { .companion-stage.has-daily-entry .companion-identity { bottom: 234px; } .daily-companion-entry { min-height: 54px; padding-top: 7px; padding-bottom: 7px; } }