/* public/hub.css — Pherson 2.12.20
   ---------------------------------------------------------------------------
   The Chats hub, the character tabs (Chats / Memories / Director), the memory
   album, the rebranded home, and the bottom nav.

   Everything here is namespaced .ph-* and lives in its own file so it can never
   collide with the 20k lines of style.css it sits beside. Two palettes:

     DARK  — chats, memories, director, chat. Near-black, one purple.
     WARM  — home only. Cream + glass, so opening the app feels like daylight
             and going into a conversation feels like stepping into a room.
   --------------------------------------------------------------------------- */

:root {
  --ph-bg:        #0a0812;
  --ph-bg-2:      #100c1c;
  --ph-card:      #15101f;
  --ph-card-2:    #1b1528;
  --ph-line:      rgba(167,139,250,.13);
  --ph-line-soft: rgba(255,255,255,.06);
  --ph-ink:       #efeaf7;
  --ph-ink-2:     #b3aac6;
  --ph-mute:      #7d7591;
  --ph-purple:    #a78bfa;
  --ph-purple-2:  #8b5cf6;
  --ph-glow:      rgba(139,92,246,.30);
  --ph-rose:      #f0abfc;
  --ph-green:     #4ade80;

  --ph-warm:      #efe6dc;
  --ph-warm-2:    #f7f1ea;
  --ph-warm-ink:  #2a2338;
  --ph-warm-mute: #6f6780;

  --ph-r:         18px;
  --ph-r-lg:      24px;
  --ph-nav-h:     78px;
}

/* ===========================================================================
   SHARED
   =========================================================================== */
.ph-screen {
  position: fixed; inset: 0;
  background: var(--ph-bg);
  color: var(--ph-ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--ph-nav-h) + env(safe-area-inset-bottom, 0px) + 14px);
  z-index: 40;
  display: none;
}
.ph-screen.is-on { display: block; }
.ph-screen::-webkit-scrollbar { width: 0; }

.ph-wrap { max-width: 720px; margin: 0 auto; padding: 0 16px; }

.ph-title { font-size: 30px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.ph-sub   { font-size: 13.5px; color: var(--ph-mute); margin: 5px 0 0; }
.ph-h2    { font-size: 15px; font-weight: 600; margin: 0; letter-spacing: -.01em; }

.ph-icobtn {
  width: 42px; height: 42px; flex: 0 0 42px;
  display: grid; place-items: center;
  border-radius: 13px; border: 1px solid var(--ph-line);
  background: var(--ph-card); color: var(--ph-ink-2);
  cursor: pointer; transition: .18s;
}
.ph-icobtn:hover { background: var(--ph-card-2); color: var(--ph-ink); }
.ph-icobtn svg { width: 19px; height: 19px; }

/* tab strip — Chats / Director / Memories */
.ph-tabs {
  display: flex; gap: 4px; position: relative;
  border-bottom: 1px solid var(--ph-line-soft);
  margin: 18px 0 0;
}
.ph-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 13px 6px 14px; background: none; border: 0;
  color: var(--ph-mute); font: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer; position: relative; transition: color .18s;
}
.ph-tab svg { width: 16px; height: 16px; }
.ph-tab.is-on { color: var(--ph-purple); }
.ph-tab.is-on::after {
  content: ''; position: absolute; left: 12%; right: 12%; bottom: -1px; height: 2px;
  background: var(--ph-purple); border-radius: 2px;
}

.ph-empty {
  text-align: center; color: var(--ph-mute);
  font-size: 13.5px; line-height: 1.65; padding: 52px 26px;
}
.ph-empty b { display: block; color: var(--ph-ink-2); font-size: 15px; margin-bottom: 7px; font-weight: 600; }

.ph-skel {
  height: 82px; border-radius: var(--ph-r); margin-bottom: 10px;
  background: linear-gradient(100deg, var(--ph-card) 30%, var(--ph-card-2) 50%, var(--ph-card) 70%);
  background-size: 220% 100%; animation: ph-sh 1.25s linear infinite;
}
@keyframes ph-sh { to { background-position: -120% 0; } }

/* ===========================================================================
   CHATS HUB — the character list
   =========================================================================== */
.ph-hub-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 22px) 0 0;
}
.ph-hub-head > div { flex: 1; min-width: 0; }

.ph-listhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 22px 0 12px;
}
.ph-sortwrap { display: flex; align-items: center; gap: 8px; }
.ph-sortlab { font-size: 12px; color: var(--ph-mute); }
.ph-sort {
  appearance: none; -webkit-appearance: none;
  background: var(--ph-card) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3aac6' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center/13px;
  border: 1px solid var(--ph-line); color: var(--ph-ink);
  font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 8px 30px 8px 12px; border-radius: 11px; cursor: pointer;
}

.ph-crow {
  display: flex; align-items: center; gap: 13px;
  padding: 14px; margin-bottom: 10px;
  background: var(--ph-card); border: 1px solid var(--ph-line-soft);
  border-radius: var(--ph-r); cursor: pointer;
  transition: transform .16s, border-color .16s, background .16s;
}
.ph-crow:active { transform: scale(.985); }
.ph-crow:hover { background: var(--ph-card-2); border-color: var(--ph-line); }
.ph-crow.is-top {
  border-color: rgba(167,139,250,.42);
  background: linear-gradient(135deg, rgba(139,92,246,.14), var(--ph-card) 62%);
  box-shadow: 0 0 0 1px rgba(167,139,250,.10), 0 10px 30px -18px var(--ph-glow);
}

.ph-av {
  position: relative; width: 54px; height: 54px; flex: 0 0 54px; border-radius: 50%;
  background: var(--ph-card-2) center/cover no-repeat;
  display: grid; place-items: center;
  font-weight: 700; font-size: 19px; color: var(--ph-purple);
  overflow: visible;
}
.ph-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.ph-av .ph-heart {
  position: absolute; right: -2px; bottom: -2px;
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--ph-purple-2); border: 2.5px solid var(--ph-bg);
  display: grid; place-items: center; font-size: 9.5px; line-height: 1;
}
.ph-av .ph-unread {
  position: absolute; left: -2px; bottom: 2px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--ph-purple); border: 2px solid var(--ph-bg);
}

.ph-crow-body { flex: 1; min-width: 0; }
.ph-crow-name { font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; }
.ph-crow-tag {
  font-size: 12.5px; color: var(--ph-mute); margin: 2px 0 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ph-pills { display: flex; flex-wrap: wrap; gap: 7px; }
.ph-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; color: var(--ph-ink-2);
  background: rgba(255,255,255,.045); border: 1px solid var(--ph-line-soft);
  padding: 4px 9px; border-radius: 8px; white-space: nowrap;
}
.ph-pill svg { width: 12px; height: 12px; opacity: .8; }
.ph-pill.is-live { color: var(--ph-green); background: rgba(74,222,128,.10); border-color: rgba(74,222,128,.22); }
.ph-pill.is-mem  { color: var(--ph-purple); background: rgba(167,139,250,.10); border-color: rgba(167,139,250,.22); }
.ph-crow-go { color: var(--ph-mute); flex: 0 0 auto; }
.ph-crow-go svg { width: 19px; height: 19px; }

.ph-newchat {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; margin: 8px 0 4px; padding: 17px;
  background: linear-gradient(135deg, rgba(139,92,246,.16), rgba(139,92,246,.05));
  border: 1px solid rgba(167,139,250,.26); border-radius: var(--ph-r);
  color: var(--ph-purple); font: inherit; font-size: 14.5px; font-weight: 700;
  cursor: pointer; transition: .18s;
}
.ph-newchat:hover { background: linear-gradient(135deg, rgba(139,92,246,.24), rgba(139,92,246,.09)); }
.ph-newchat svg { width: 17px; height: 17px; }

/* ===========================================================================
   CHARACTER SCREEN — Chats / Memories / Director
   =========================================================================== */
.ph-char-top {
  display: flex; align-items: center; gap: 11px;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 0 4px;
  position: sticky; top: 0; z-index: 3;
  background: linear-gradient(var(--ph-bg) 72%, transparent);
}
.ph-char-top .ph-av { width: 42px; height: 42px; flex-basis: 42px; font-size: 15px; }
.ph-char-id { flex: 1; min-width: 0; }
.ph-char-name { font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.ph-char-meta { font-size: 12px; color: var(--ph-mute); margin-top: 1px; }

.ph-back {
  width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center;
  background: none; border: 0; color: var(--ph-ink); cursor: pointer; border-radius: 12px;
}
.ph-back:hover { background: var(--ph-card); }
.ph-back svg { width: 21px; height: 21px; }

.ph-panel { display: none; padding-top: 16px; }
.ph-panel.is-on { display: block; animation: ph-fade .22s ease; }
@keyframes ph-fade { from { opacity: 0; transform: translateY(6px); } }

/* the banner at the top of each panel */
.ph-banner {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 14px;
  padding: 20px; border-radius: var(--ph-r-lg);
  background: linear-gradient(120deg, rgba(139,92,246,.20), rgba(139,92,246,.05) 58%, transparent);
  border: 1px solid var(--ph-line); margin-bottom: 14px;
}
.ph-banner h3 {
  margin: 0 0 5px; font-size: 21px; font-weight: 700; letter-spacing: -.02em;
  background: linear-gradient(92deg, var(--ph-purple), var(--ph-rose));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ph-banner p { margin: 0; font-size: 13px; color: var(--ph-ink-2); line-height: 1.5; max-width: 30ch; }
.ph-banner-art { font-size: 46px; line-height: 1; margin-left: auto; filter: drop-shadow(0 6px 18px var(--ph-glow)); }

/* album meter */
.ph-meter {
  padding: 16px 18px; border-radius: var(--ph-r);
  background: var(--ph-card); border: 1px solid var(--ph-line-soft); margin-bottom: 14px;
}
.ph-meter-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ph-meter-lab { font-size: 14.5px; font-weight: 700; }
.ph-meter-num { font-size: 12.5px; color: var(--ph-mute); margin-top: 3px; }
.ph-meter-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.07); margin-top: 13px; overflow: hidden; }
.ph-meter-bar i {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--ph-purple-2), var(--ph-rose));
  transition: width .5s cubic-bezier(.2,.8,.2,1);
}
.ph-meter-bar.is-full i { background: linear-gradient(90deg, #f97316, #ef4444); }
.ph-slotbtn {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 9px 14px; border-radius: 100px;
  background: rgba(139,92,246,.16); border: 1px solid rgba(167,139,250,.30);
  color: var(--ph-purple); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  transition: .18s;
}
.ph-slotbtn:hover { background: rgba(139,92,246,.26); }
.ph-slotbtn:disabled { opacity: .5; cursor: default; }

/* category chips */
.ph-chips {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 16px 14px;
  margin: 0 -16px; scrollbar-width: none;
}
.ph-chips::-webkit-scrollbar { display: none; }
.ph-chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 9px 14px; border-radius: 100px;
  background: var(--ph-card); border: 1px solid var(--ph-line-soft);
  color: var(--ph-ink-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: .16s;
}
.ph-chip:hover { border-color: var(--ph-line); }
.ph-chip.is-on {
  background: rgba(139,92,246,.16); border-color: rgba(167,139,250,.42); color: var(--ph-purple);
}

/* memory cards */
.ph-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 400px) { .ph-cards { grid-template-columns: 1fr; } }

.ph-mcard {
  position: relative; overflow: hidden; cursor: pointer;
  padding: 16px 15px 14px; border-radius: var(--ph-r);
  background: var(--ph-card); border: 1px solid var(--ph-line-soft);
  transition: transform .18s, border-color .18s;
  display: flex; flex-direction: column; min-height: 176px;
}
.ph-mcard::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 62%;
  background: linear-gradient(transparent, rgba(139,92,246,.055));
  pointer-events: none;
}
.ph-mcard:active { transform: scale(.985); }
.ph-mcard:hover { border-color: rgba(167,139,250,.30); }
.ph-mcard-t {
  font-size: 14.5px; font-weight: 700; line-height: 1.32; letter-spacing: -.01em;
  padding-right: 26px; margin-bottom: 9px;
}
.ph-mcard-b {
  font-size: 12.5px; line-height: 1.58; color: var(--ph-ink-2);
  font-style: italic; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.ph-mcard-f {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 11px; font-size: 11px; color: var(--ph-mute);
}
.ph-mcard-reads { display: inline-flex; align-items: center; gap: 4px; }
.ph-mcard-reads svg { width: 12px; height: 12px; }
.ph-ribbon {
  position: absolute; top: 0; right: 13px; width: 20px; height: 27px;
  background: var(--ph-purple-2);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
  display: grid; place-items: start center; padding-top: 4px;
  font-size: 9px; color: #fff;
}
.ph-mcard-menu {
  position: absolute; top: 12px; right: 40px;
  width: 24px; height: 24px; display: grid; place-items: center;
  background: none; border: 0; color: var(--ph-mute); cursor: pointer; border-radius: 7px;
}
.ph-mcard-menu:hover { background: rgba(255,255,255,.07); color: var(--ph-ink); }
.ph-mcard-menu svg { width: 15px; height: 15px; }

/* upsell strip */
.ph-upsell {
  display: flex; align-items: center; gap: 13px; margin-top: 16px;
  padding: 15px 16px; border-radius: var(--ph-r);
  background: linear-gradient(120deg, rgba(139,92,246,.13), transparent 70%);
  border: 1px solid var(--ph-line);
}
.ph-upsell svg.ph-lock { width: 21px; height: 21px; color: var(--ph-purple); flex: 0 0 auto; }
.ph-upsell-t { font-size: 13.5px; font-weight: 700; color: var(--ph-purple); }
.ph-upsell-s { font-size: 12px; color: var(--ph-mute); margin-top: 2px; }
.ph-upsell-btn {
  margin-left: auto; flex: 0 0 auto;
  padding: 10px 17px; border-radius: 100px; border: 0;
  background: linear-gradient(120deg, var(--ph-purple-2), var(--ph-rose));
  color: #fff; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}

/* chat threads */
.ph-thread {
  display: flex; align-items: center; gap: 13px; cursor: pointer;
  padding: 15px; margin-bottom: 10px;
  background: var(--ph-card); border: 1px solid var(--ph-line-soft);
  border-radius: var(--ph-r); transition: .16s;
}
.ph-thread:hover { background: var(--ph-card-2); }
.ph-thread:active { transform: scale(.985); }
.ph-thread.is-top { border-color: rgba(167,139,250,.38); background: linear-gradient(135deg, rgba(139,92,246,.11), var(--ph-card) 62%); }
.ph-thread-em { font-size: 22px; line-height: 1; flex: 0 0 auto; }
.ph-thread-b { flex: 1; min-width: 0; }
.ph-thread-t {
  font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  display: flex; align-items: center; gap: 8px;
}
.ph-tag-main {
  font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ph-purple); background: rgba(167,139,250,.14);
  border: 1px solid rgba(167,139,250,.26); padding: 2px 6px; border-radius: 5px;
}
.ph-thread-p {
  font-size: 12.5px; color: var(--ph-mute); margin: 4px 0 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* director scenes */
.ph-scene {
  padding: 17px; margin-bottom: 12px; cursor: pointer;
  background: var(--ph-card); border: 1px solid var(--ph-line-soft);
  border-radius: var(--ph-r); transition: .16s;
}
.ph-scene:hover { border-color: rgba(167,139,250,.28); }
.ph-scene-h { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 9px; }
.ph-scene-t { flex: 1; font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.ph-scene-d { font-size: 11px; color: var(--ph-mute); flex: 0 0 auto; padding-top: 3px; }
.ph-scene-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ph-scene-x {
  font-size: 11px; font-weight: 600; color: var(--ph-ink-2);
  background: rgba(255,255,255,.05); border: 1px solid var(--ph-line-soft);
  padding: 3px 8px; border-radius: 7px;
}
.ph-scene-p {
  font-size: 13px; line-height: 1.62; color: var(--ph-ink-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ph-scene.is-open .ph-scene-p { -webkit-line-clamp: unset; display: block; white-space: pre-wrap; }
.ph-scene-more { font-size: 12px; font-weight: 700; color: var(--ph-purple); margin-top: 9px; }

/* ===========================================================================
   READER — full memory / full scene
   =========================================================================== */
.ph-reader {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(5,4,10,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  display: none; align-items: flex-end; justify-content: center;
}
.ph-reader.is-on { display: flex; }
.ph-reader-card {
  width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto;
  background: linear-gradient(175deg, #1a1428, var(--ph-bg-2) 55%);
  border: 1px solid var(--ph-line); border-bottom: 0;
  border-radius: 26px 26px 0 0; padding: 26px 24px calc(30px + env(safe-area-inset-bottom, 0px));
  animation: ph-up .3s cubic-bezier(.2,.9,.25,1);
}
@keyframes ph-up { from { transform: translateY(38px); opacity: 0; } }
.ph-reader-grab { width: 38px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.18); margin: 0 auto 20px; }
.ph-reader-cat {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ph-purple); background: rgba(167,139,250,.12);
  border: 1px solid rgba(167,139,250,.24); padding: 5px 11px; border-radius: 100px;
}
.ph-reader-t {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 27px; font-weight: 600; letter-spacing: -.015em; line-height: 1.22; margin: 0 0 18px;
}
.ph-reader-b {
  font-size: 16px; line-height: 1.78; color: #dcd4ec; font-style: italic;
  white-space: pre-wrap; margin-bottom: 22px;
}
.ph-reader-sig {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 16px; color: var(--ph-purple); font-style: italic;
  text-align: right; margin-bottom: 22px;
}
.ph-reader-f {
  display: flex; align-items: center; gap: 10px;
  padding-top: 18px; border-top: 1px solid var(--ph-line-soft);
  font-size: 12px; color: var(--ph-mute);
}
.ph-reader-act {
  margin-left: auto; display: flex; gap: 8px;
}
.ph-rbtn {
  padding: 9px 15px; border-radius: 100px; cursor: pointer;
  background: var(--ph-card); border: 1px solid var(--ph-line-soft);
  color: var(--ph-ink-2); font: inherit; font-size: 12.5px; font-weight: 600;
}
.ph-rbtn:hover { background: var(--ph-card-2); color: var(--ph-ink); }
.ph-rbtn.is-danger { color: #f87171; }
.ph-rbtn.is-danger:hover { background: rgba(248,113,113,.12); }

/* ===========================================================================
   MEMORY OFFER — she wrote something down
   =========================================================================== */
.ph-offer {
  position: fixed; left: 50%; transform: translate(-50%, 130%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 108px);
  width: min(430px, calc(100vw - 28px)); z-index: 88;
  background: linear-gradient(160deg, #221a34, #16111f);
  border: 1px solid rgba(167,139,250,.36); border-radius: 20px;
  padding: 17px 18px 16px;
  box-shadow: 0 24px 60px -18px rgba(0,0,0,.75), 0 0 0 1px rgba(167,139,250,.08);
  transition: transform .46s cubic-bezier(.2,.9,.25,1);
}
.ph-offer.is-on { transform: translate(-50%, 0); }
.ph-offer-k {
  display: flex; align-items: center; gap: 7px; margin-bottom: 11px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ph-purple);
}
.ph-offer-k .ph-beat { animation: ph-beat 1.6s ease-in-out infinite; display: inline-block; }
@keyframes ph-beat { 0%,100% { transform: scale(1); } 18% { transform: scale(1.22); } 36% { transform: scale(1); } }
.ph-offer-t { font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 7px; }
.ph-offer-b {
  font-size: 13px; line-height: 1.6; color: var(--ph-ink-2); font-style: italic;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 15px;
}
.ph-offer-row { display: flex; gap: 9px; }
.ph-offer-save {
  flex: 1; padding: 12px; border-radius: 100px; border: 0;
  background: linear-gradient(120deg, var(--ph-purple-2), var(--ph-rose));
  color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.ph-offer-save:disabled { opacity: .6; }
.ph-offer-skip {
  padding: 12px 17px; border-radius: 100px; cursor: pointer;
  background: none; border: 1px solid var(--ph-line);
  color: var(--ph-mute); font: inherit; font-size: 13px; font-weight: 600;
}
.ph-offer-warn { font-size: 11px; color: var(--ph-mute); margin-top: 10px; text-align: center; }

/* ===========================================================================
   CHAT QUICK BAR — random / change scene / memories / chats
   =========================================================================== */
.ph-qbar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
  z-index: 46; display: none; gap: 6px; padding: 6px;
  background: rgba(18,14,28,.82); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--ph-line); border-radius: 100px;
  box-shadow: 0 14px 40px -16px rgba(0,0,0,.8);
  max-width: calc(100vw - 24px); overflow-x: auto; scrollbar-width: none;
}
.ph-qbar::-webkit-scrollbar { display: none; }
body.ph-on.in-chat .ph-qbar { display: flex; }
body.cine-playing .ph-qbar { display: none; }
.ph-q {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 9px 14px; border-radius: 100px; border: 0; background: none;
  color: var(--ph-ink-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: .16s;
}
.ph-q:hover, .ph-q:active { background: rgba(167,139,250,.16); color: var(--ph-purple); }
.ph-q svg { width: 15px; height: 15px; }
.ph-q .ph-qdot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ph-purple);
  box-shadow: 0 0 0 3px rgba(167,139,250,.22);
}

/* ===========================================================================
   BOTTOM NAV
   =========================================================================== */
.ph-nav {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
  width: min(430px, calc(100vw - 24px)); height: 64px; z-index: 60;
  display: flex; align-items: center; justify-content: space-around;
  background: rgba(16,12,26,.86); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--ph-line); border-radius: 100px;
  box-shadow: 0 16px 44px -18px rgba(0,0,0,.8);
}
body.ph-on.in-chat .ph-nav { display: none; }
body.ph-warm-nav .ph-nav {
  background: rgba(255,255,255,.72);
  border-color: rgba(0,0,0,.06);
  box-shadow: 0 16px 44px -22px rgba(80,60,120,.5);
}
.ph-n {
  position: relative; flex: 1; height: 100%;
  display: grid; place-items: center; background: none; border: 0;
  color: var(--ph-mute); cursor: pointer; transition: color .18s;
}
.ph-n svg { width: 23px; height: 23px; }
.ph-n.is-on { color: var(--ph-purple); }
body.ph-warm-nav .ph-n { color: #9a92ab; }
body.ph-warm-nav .ph-n.is-on { color: var(--ph-purple-2); }
.ph-n .ph-ndot {
  position: absolute; top: 13px; right: 22%;
  width: 8px; height: 8px; border-radius: 50%; background: var(--ph-rose);
}
.ph-n-fab {
  flex: 0 0 62px; width: 62px; height: 62px; margin-top: -20px;
  border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--ph-purple-2), var(--ph-rose));
  border: 3px solid var(--ph-bg); color: #fff; cursor: pointer;
  box-shadow: 0 10px 28px -8px var(--ph-glow);
  transition: transform .18s;
}
body.ph-warm-nav .ph-n-fab { border-color: rgba(255,255,255,.85); }
.ph-n-fab:active { transform: scale(.93); }
.ph-n-fab svg { width: 25px; height: 25px; }

/* ===========================================================================
   HOME — the warm one
   =========================================================================== */
.ph-home { background: var(--ph-warm); color: var(--ph-warm-ink); }
.ph-home .ph-stage {
  position: relative; min-height: 78vh;
  display: flex; flex-direction: column;
}
.ph-home-art {
  position: absolute; inset: 0; background: #cfc4b8 center 18%/cover no-repeat;
}
.ph-home-art video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.ph-home-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(255,250,244,.42) 0%, rgba(255,250,244,.06) 26%, transparent 46%),
    linear-gradient(0deg, var(--ph-warm) 2%, rgba(239,230,220,.55) 16%, transparent 42%);
}

.ph-home-top {
  position: relative; z-index: 2;
  display: flex; align-items: flex-start; gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px 0;
}
.ph-me { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ph-me-av {
  width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%;
  background: rgba(255,255,255,.6) center/cover no-repeat;
  border: 2px solid rgba(255,255,255,.8); display: grid; place-items: center;
  font-weight: 700; color: var(--ph-purple-2);
  box-shadow: 0 6px 18px -8px rgba(80,60,120,.5);
}
.ph-me-hi { font-size: 17px; font-weight: 700; letter-spacing: -.015em; display: flex; align-items: center; gap: 5px; }
.ph-me-lv { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.ph-me-lvt { font-size: 11.5px; color: var(--ph-warm-mute); font-weight: 600; white-space: nowrap; }
.ph-me-lvbar { width: 84px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.65); overflow: hidden; }
.ph-me-lvbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--ph-purple-2), var(--ph-rose)); }

.ph-home-hud { margin-left: auto; display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.ph-gem {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 8px 9px 13px; border-radius: 100px; cursor: pointer;
  background: rgba(255,255,255,.78); border: 1px solid rgba(255,255,255,.9);
  color: var(--ph-warm-ink); font: inherit; font-size: 14px; font-weight: 700;
  box-shadow: 0 8px 22px -12px rgba(80,60,120,.55);
}
.ph-gem svg { width: 17px; height: 17px; color: var(--ph-purple-2); }
.ph-gem i {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(139,92,246,.14); color: var(--ph-purple-2); font-style: normal; font-size: 15px; line-height: 1;
}
.ph-bell {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.78); border: 1px solid rgba(255,255,255,.9);
  color: var(--ph-warm-ink); cursor: pointer; position: relative;
  box-shadow: 0 8px 22px -12px rgba(80,60,120,.55);
}
.ph-bell svg { width: 19px; height: 19px; }

/* glass stat cards */
.ph-glass {
  position: relative; z-index: 2;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.7); border-radius: 20px;
  box-shadow: 0 12px 30px -18px rgba(80,60,120,.6);
}
.ph-stats { position: relative; z-index: 2; width: 60%; max-width: 250px; margin: 18px 0 0 16px; }
.ph-stat { padding: 13px 15px; margin-bottom: 11px; }
.ph-stat-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ph-stat-lab {
  font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ph-warm-mute); display: flex; align-items: center; gap: 6px;
}
.ph-stat-val { font-size: 13px; font-weight: 700; }
.ph-stat-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.8); margin-top: 9px; overflow: hidden; }
.ph-stat-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--ph-purple-2), var(--ph-rose)); }
.ph-stat-next { font-size: 15px; font-weight: 700; }

.ph-quest { padding: 14px 15px; }
.ph-quest-h { display: flex; align-items: flex-start; gap: 10px; }
.ph-quest-t { flex: 1; font-size: 14px; font-weight: 700; line-height: 1.32; letter-spacing: -.01em; }
.ph-quest-t b { color: var(--ph-purple-2); }
.ph-quest-art { font-size: 26px; line-height: 1; }
.ph-quest-go {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; margin-top: 12px; padding: 9px 12px; border-radius: 100px; cursor: pointer;
  background: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.9);
  color: var(--ph-warm-ink); font: inherit; font-size: 13px; font-weight: 700;
}
.ph-quest-go svg { width: 15px; height: 15px; }
.ph-quest-go span { display: inline-flex; align-items: center; gap: 5px; }

/* hero name block */
.ph-hero {
  position: relative; z-index: 2; margin-top: auto;
  padding: 0 18px 22px; text-align: right;
}
.ph-hero-n {
  font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1;
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  text-shadow: 0 2px 20px rgba(255,255,255,.55);
}
.ph-hero-on {
  display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px;
  font-size: 13px; font-weight: 600; color: #3f8f5f; margin-top: 7px;
}
.ph-hero-on::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ph-green); }
.ph-hero-cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  padding: 15px 26px; border-radius: 100px; border: 0; cursor: pointer;
  background: linear-gradient(115deg, #b58bf6, #f0abfc);
  color: #fff; font: inherit; font-size: 16px; font-weight: 700;
  box-shadow: 0 14px 34px -12px rgba(160,90,220,.65);
  transition: transform .16s;
}
.ph-hero-cta:active { transform: scale(.96); }
.ph-hero-cta svg { width: 17px; height: 17px; }

/* the sheet below the art */
.ph-home-sheet { position: relative; z-index: 2; background: var(--ph-warm); padding: 4px 0 14px; }
.ph-rowhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 0 16px; margin-bottom: 12px;
}
.ph-rowhead h3 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.ph-viewall {
  display: inline-flex; align-items: center; gap: 4px; background: none; border: 0;
  color: var(--ph-warm-mute); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.ph-viewall svg { width: 14px; height: 14px; }

.ph-rail {
  display: flex; gap: 11px; overflow-x: auto; padding: 2px 16px 16px;
  scrollbar-width: none; scroll-snap-type: x mandatory;
}
.ph-rail::-webkit-scrollbar { display: none; }
.ph-rcard {
  position: relative; flex: 0 0 116px; height: 158px; border-radius: 18px; overflow: hidden;
  background: #d6ccc2 center/cover no-repeat; cursor: pointer; scroll-snap-align: start;
  border: 2px solid transparent; transition: transform .18s;
}
.ph-rcard:active { transform: scale(.96); }
.ph-rcard.is-on { border-color: var(--ph-purple); box-shadow: 0 0 0 3px rgba(167,139,250,.24); }
.ph-rcard.is-locked { filter: grayscale(.85) brightness(.72); }
.ph-rcard-v { position: absolute; inset: 0; background: linear-gradient(transparent 34%, rgba(20,14,30,.86)); }
.ph-rcard-m { position: absolute; left: 9px; right: 9px; bottom: 9px; color: #fff; }
.ph-rcard-n { font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
.ph-rcard-s { font-size: 10px; opacity: .78; margin-top: 2px; }
.ph-rcard-t { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; margin-top: 3px; opacity: .9; }
.ph-rcard-t::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ph-green); }
.ph-rcard-h {
  position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,.9); display: grid; place-items: center; font-size: 11px;
}
.ph-rcard-lock { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.ph-rcard-lock svg { width: 22px; height: 22px; }

.ph-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 4px 16px 22px; }
.ph-tile {
  position: relative; overflow: hidden; text-align: left; cursor: pointer;
  padding: 17px 16px 15px; border-radius: 22px;
  background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 12px 30px -20px rgba(80,60,120,.6);
  transition: transform .18s;
}
.ph-tile:active { transform: scale(.975); }
.ph-tile-h { display: flex; align-items: flex-start; gap: 8px; }
.ph-tile-t { flex: 1; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.ph-tile-art { font-size: 26px; line-height: 1; }
.ph-tile-s { font-size: 12.5px; line-height: 1.45; color: var(--ph-warm-mute); margin: 7px 0 14px; }
.ph-tile-go {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(139,92,246,.13); color: var(--ph-purple-2);
}
.ph-tile-go svg { width: 15px; height: 15px; }
.ph-tile-badge {
  position: absolute; top: 14px; right: 14px;
  min-width: 21px; height: 21px; padding: 0 6px; border-radius: 100px;
  background: var(--ph-purple-2); color: #fff;
  font-size: 11px; font-weight: 700; display: grid; place-items: center;
}

/* toast */
.ph-toast {
  position: fixed; left: 50%; transform: translate(-50%, 24px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
  z-index: 120; padding: 12px 20px; border-radius: 100px;
  background: rgba(24,18,36,.95); border: 1px solid var(--ph-line);
  color: var(--ph-ink); font-size: 13.5px; font-weight: 600;
  opacity: 0; pointer-events: none; transition: .28s;
  box-shadow: 0 14px 36px -14px rgba(0,0,0,.8);
}
.ph-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* desktop: keep the phone shape, centred */
@media (min-width: 860px) {
  .ph-screen { padding-bottom: calc(var(--ph-nav-h) + 24px); }
  .ph-home .ph-stage { min-height: 70vh; }
  .ph-home-top, .ph-stats, .ph-hero, .ph-rowhead, .ph-rail, .ph-tiles {
    max-width: 720px; margin-left: auto; margin-right: auto;
  }
  .ph-stats { margin-left: auto; }
}

/* ===========================================================================
   STANDING DOWN THE OLD CHROME
   The previous bottom nav and the Jupian home are replaced by .ph-nav and
   #phHome. Kept as CSS rather than deletions so nothing in style.css or
   chat.js has to be unpicked to ship this.
   =========================================================================== */
body.ph-on .bottom-nav { display: none !important; }
body.ph-warm-nav .chat-back-btn { display: none !important; }

/* ===========================================================================
   LEFTOVER CHROME
   Two things were still drawing over the new layer: the old Jupian home button
   (a floating circle, bottom right) and .limit-pop, whose own rules beat the
   `hidden` attribute so it rendered as a dark bar above the nav. The [hidden]
   rule below is the general fix — this codebase hides things with the
   attribute, so honouring it everywhere is the correct behaviour, not a patch.
   =========================================================================== */
body.ph-on [hidden] { display: none !important; }
body.ph-on #jupHomeBtn { display: none !important; }
body.ph-warm-nav .chat-back-btn { display: none !important; }

/* ===========================================================================
   CHAT — rebranded
   Boxless dialogue over the scene, stage directions in her colour, one pill for
   the composer. The tap-to-reveal cinematic engine underneath is untouched:
   this only changes how the same DOM looks.
   =========================================================================== */

/* header: back · avatar · name/online · memories, director, more */
body.ph-on.in-chat .chat-char-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 44;
  display: flex !important; align-items: center; gap: 11px;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 14px 12px 58px;
  background: linear-gradient(rgba(10,8,18,.82), rgba(10,8,18,.42) 62%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 0;
}
body.ph-on.in-chat .cch-avatar {
  width: 40px !important; height: 40px !important; flex: 0 0 40px;
  border-radius: 50%; border: 1.5px solid rgba(167,139,250,.5);
  overflow: hidden; background-size: cover; background-position: center;
}
body.ph-on.in-chat .cch-avatar img { width: 100%; height: 100%; object-fit: cover; }
body.ph-on.in-chat .cch-text { flex: 1; min-width: 0; }
body.ph-on.in-chat .cch-name {
  font-size: 17px !important; font-weight: 700; letter-spacing: -.015em;
  color: var(--ph-ink); display: flex; align-items: center; gap: 6px;
}
body.ph-on.in-chat .cch-name::after { content: '\1F49C'; font-size: 14px; }
body.ph-on.in-chat .cch-tagline {
  display: flex !important; align-items: center; gap: 6px;
  font-size: 12.5px !important; color: var(--ph-green) !important;
  margin-top: 2px; white-space: nowrap; overflow: hidden;
}
body.ph-on.in-chat .cch-tagline::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ph-green); flex: 0 0 7px;
}
.ph-chead-acts { display: flex; gap: 8px; margin-left: auto; flex: 0 0 auto; }
.ph-chead-btn {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(30,24,46,.72); border: 1px solid var(--ph-line);
  color: var(--ph-ink-2); cursor: pointer; transition: .16s;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.ph-chead-btn:active { transform: scale(.92); }
.ph-chead-btn:hover { color: var(--ph-purple); border-color: rgba(167,139,250,.4); }
.ph-chead-btn svg { width: 18px; height: 18px; }

/* the back arrow, folded into that same bar */
body.ph-on.in-chat .chat-back-btn {
  position: fixed !important; z-index: 46;
  top: calc(env(safe-area-inset-top, 0px) + 12px) !important; left: 12px !important;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(30,24,46,.72); border: 1px solid var(--ph-line);
  color: var(--ph-ink); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}

body.ph-on.in-chat .chat-scroll { padding-top: 74px; }

/* dialogue: no boxes. Her lines sit on the scene. */
body.ph-on.in-chat .msg { margin-bottom: 20px; }
body.ph-on.in-chat .msg.pherson .bubble {
  background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; max-width: 92%;
  font-size: 17px; line-height: 1.52; color: #f6f1fc;
  text-shadow: 0 1px 14px rgba(0,0,0,.85), 0 0 34px rgba(0,0,0,.6);
}
body.ph-on.in-chat .msg.pherson .bubble em.action,
body.ph-on.in-chat .msg.pherson .bubble em {
  display: block; margin: 2px 0 9px;
  color: #c4a9f7; font-style: italic; font-weight: 400;
  font-size: 16px; line-height: 1.46;
}
body.ph-on.in-chat .msg.pherson .bubble strong { color: #fff; font-weight: 700; }

/* theirs: one glowing capsule, right */
body.ph-on.in-chat .msg.user { display: flex; justify-content: flex-end; }
body.ph-on.in-chat .msg.user .bubble {
  position: relative; max-width: 78%;
  padding: 13px 18px !important; border-radius: 20px !important;
  background: linear-gradient(135deg, rgba(139,92,246,.34), rgba(139,92,246,.14)) !important;
  border: 1px solid rgba(167,139,250,.5) !important;
  box-shadow: 0 0 26px -6px var(--ph-glow), inset 0 1px 0 rgba(255,255,255,.08);
  color: #fff !important; font-size: 16px; line-height: 1.45;
}
body.ph-on.in-chat .msg.user .bubble::after {
  content: '\2726'; position: absolute; top: -7px; right: -3px;
  font-size: 13px; color: var(--ph-rose); text-shadow: 0 0 10px var(--ph-glow);
}

/* the three dots while she's thinking */
body.ph-on.in-chat .typing { padding: 4px 0 12px; }
body.ph-on.in-chat .typing span {
  width: 9px !important; height: 9px !important; border-radius: 50%;
  background: var(--ph-purple) !important; opacity: .55;
  box-shadow: 0 0 12px var(--ph-glow);
}

/* composer: one pill, one round send */
body.ph-on.in-chat .composer-wrap {
  background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 0 14px calc(env(safe-area-inset-bottom, 0px) + 66px) !important;
}
body.ph-on.in-chat .composer {
  display: flex !important; align-items: center; gap: 8px;
  padding: 6px 6px 6px 20px !important; border-radius: 100px !important;
  background: rgba(24,19,36,.86) !important;
  border: 1px solid var(--ph-line) !important;
  box-shadow: 0 12px 34px -16px rgba(0,0,0,.85) !important;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
body.ph-on.in-chat .composer #input {
  flex: 1; background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 12px 0 !important; margin: 0 !important; resize: none;
  font-size: 16px; color: var(--ph-ink); max-height: 108px;
}
body.ph-on.in-chat .composer #input::placeholder { color: var(--ph-mute); }
body.ph-on.in-chat .composer-row {
  flex: 0 0 auto; margin: 0 !important; padding: 0 !important; border: 0 !important;
}
body.ph-on.in-chat .composer-hint,
body.ph-on.in-chat .composer-disclaimer,
body.ph-on.in-chat .composer-upload-btn,
body.ph-on.in-chat #directorBtn { display: none !important; }
body.ph-on.in-chat .composer-buttons { gap: 0 !important; margin: 0 !important; }
body.ph-on.in-chat #send {
  width: 44px !important; height: 44px !important; border-radius: 50% !important;
  display: grid !important; place-items: center; padding: 0 !important;
  background: linear-gradient(140deg, var(--ph-purple-2), #b06cf0) !important;
  border: 0 !important; color: #fff !important;
  box-shadow: 0 6px 18px -6px var(--ph-glow) !important;
}
body.ph-on.in-chat #send svg { width: 20px; height: 20px; }
body.ph-on.in-chat #send:active { transform: scale(.93); }

/* admin message tools stay, just out of the way until you want them */
body.ph-on.in-chat .msg-actions { opacity: 0; transition: opacity .18s; }
body.ph-on.in-chat .msg:hover .msg-actions,
body.ph-on.in-chat .msg:focus-within .msg-actions { opacity: .8; }

/* ===========================================================================
   MEMORY CARDS — with the photo behind them
   =========================================================================== */
.ph-mcard {
  background-size: cover; background-position: center;
  border-color: rgba(255,255,255,.09);
}
.ph-mcard.has-bg::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(185deg, rgba(12,9,20,.62) 0%, rgba(12,9,20,.80) 46%, rgba(12,9,20,.94) 100%);
}
.ph-mcard.has-bg::after {
  background: linear-gradient(transparent, rgba(139,92,246,.14));
}
.ph-mcard.has-bg > * { position: relative; z-index: 1; }
.ph-mcard.has-bg .ph-mcard-t { color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.7); }
.ph-mcard.has-bg .ph-mcard-b { color: #ded5ee; text-shadow: 0 1px 10px rgba(0,0,0,.7); }
.ph-mcard.has-bg .ph-mcard-f { color: rgba(226,218,242,.72); }

/* the reader gets the photo too, as a header plate */
.ph-reader-photo {
  height: 156px; margin: -26px -24px 20px; border-radius: 26px 26px 0 0;
  background-size: cover; background-position: center; position: relative;
}
.ph-reader-photo::after {
  content: ''; position: absolute; inset: 0; border-radius: 26px 26px 0 0;
  background: linear-gradient(rgba(12,9,20,.15), rgba(26,20,40,.98));
}

/* she's reading back through everything that already happened */
.ph-gather {
  display: flex; align-items: center; gap: 14px;
  padding: 18px; border-radius: var(--ph-r);
  background: linear-gradient(120deg, rgba(139,92,246,.16), transparent 72%);
  border: 1px solid rgba(167,139,250,.28); margin-bottom: 14px;
}
.ph-gather-spin {
  width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%;
  border: 2px solid rgba(167,139,250,.25); border-top-color: var(--ph-purple);
  animation: ph-spin .9s linear infinite;
}
@keyframes ph-spin { to { transform: rotate(360deg); } }
.ph-gather-t { font-size: 14px; font-weight: 700; color: var(--ph-purple); }
.ph-gather-s { font-size: 12.5px; color: var(--ph-mute); margin-top: 3px; line-height: 1.5; }

/* ===========================================================================
   THE BLACK BAR — found it
   #phOffer is a fixed, padded, dark, rounded card that slides up when she has
   a memory to offer. It was hidden by translating it 130% of its OWN height —
   but an empty card is only its padding, ~33px tall, so 130% of nothing is
   nothing and it sat there as a dark rounded bar above the nav. Exactly the
   "hidden container still being rendered" case.
   Hidden by visibility now, which can't be defeated by having no content.
   =========================================================================== */
.ph-offer { visibility: hidden; opacity: 0; pointer-events: none;
            transition: transform .46s cubic-bezier(.2,.9,.25,1), opacity .3s, visibility .46s; }
.ph-offer.is-on { visibility: visible; opacity: 1; pointer-events: auto; }
.ph-offer:empty { display: none; }

/* ===========================================================================
   THE ACTION BAR — only ever inside a chat, and collapsible
   =========================================================================== */
.ph-qbar {
  left: 50%; right: auto; transform: translateX(-50%);
  width: min(430px, calc(100vw - 20px));
  bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
  padding: 8px 6px; border-radius: 26px; overflow: visible;
  flex-direction: column; gap: 0;
}
.ph-qrow { display: flex; align-items: center; justify-content: space-around; width: 100%; }
.ph-q {
  flex: 1; flex-direction: column; gap: 5px; padding: 7px 4px;
  font-size: 11px; font-weight: 600; letter-spacing: -.01em; line-height: 1.15;
  text-align: center; border-radius: 16px;
}
.ph-q svg { width: 20px; height: 20px; }
.ph-q .ph-qglyph {
  font-size: 17px; font-weight: 800; letter-spacing: .06em;
  line-height: 20px; height: 20px; display: block; color: var(--ph-purple);
}
.ph-q.is-armed { background: rgba(167,139,250,.18); color: var(--ph-purple); }

.ph-qfab {
  flex: 0 0 56px; width: 56px; height: 56px; margin: -14px 4px 0;
  border-radius: 50%; display: grid; place-items: center; border: 0; cursor: pointer;
  background: radial-gradient(circle at 34% 28%, #d7bcff, var(--ph-purple-2) 62%, #7c3aed);
  color: #fff; box-shadow: 0 0 0 4px rgba(139,92,246,.18), 0 10px 26px -8px var(--ph-glow);
  transition: transform .2s;
}
.ph-qfab:active { transform: scale(.92); }
.ph-qfab svg { width: 24px; height: 24px; }

/* collapsed: one quiet strip, so the scene is the whole screen */
.ph-qpeek {
  display: none; width: 100%; background: none; border: 0; cursor: pointer;
  padding: 6px 0 4px; color: var(--ph-mute);
  font: inherit; font-size: 12.5px; font-weight: 600;
}
.ph-qpeek svg { width: 20px; height: 20px; display: block; margin: 0 auto 1px; opacity: .8; }
body.ph-q-collapsed .ph-qbar {
  background: rgba(14,11,22,.62); border-color: transparent; box-shadow: none;
  padding: 2px 6px 6px;
}
body.ph-q-collapsed .ph-qrow { display: none; }
body.ph-q-collapsed .ph-qpeek { display: block; }

/* ===========================================================================
   CHANGE SCENE — the drawer owns the screen while it's open
   The chat header and the action bar are both fixed, so they sat on top of the
   drawer and covered its close button. While it's open, they go away.
   =========================================================================== */
body.ph-dir-open .ph-qbar,
body.ph-dir-open .chat-char-header,
body.ph-dir-open .chat-back-btn,
body.ph-dir-open .ph-nav { display: none !important; }

/* one-time explainer, the first time they open it */
.ph-tip {
  position: fixed; inset: 0; z-index: 1400; display: none;
  align-items: center; justify-content: center; padding: 22px;
  background: rgba(6,4,12,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.ph-tip.is-on { display: flex; }
.ph-tip-card {
  width: 100%; max-width: 380px; padding: 26px 24px 22px; text-align: center;
  background: linear-gradient(170deg, #221a36, #14101f);
  border: 1px solid rgba(167,139,250,.34); border-radius: 26px;
  box-shadow: 0 30px 70px -22px rgba(0,0,0,.85);
  animation: ph-pop .32s cubic-bezier(.2,.9,.25,1);
}
@keyframes ph-pop { from { transform: scale(.92); opacity: 0; } }
.ph-tip-art { font-size: 40px; line-height: 1; margin-bottom: 14px; }
.ph-tip-t {
  font-size: 21px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 10px;
  background: linear-gradient(92deg, var(--ph-purple), var(--ph-rose));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ph-tip-b { font-size: 14px; line-height: 1.62; color: var(--ph-ink-2); margin-bottom: 8px; }
.ph-tip-list { text-align: left; margin: 14px 0 20px; display: grid; gap: 9px; }
.ph-tip-li { display: flex; gap: 10px; font-size: 13.5px; color: var(--ph-ink-2); line-height: 1.45; }
.ph-tip-li b { color: var(--ph-ink); font-weight: 700; }
.ph-tip-li span:first-child { flex: 0 0 20px; font-size: 15px; }
.ph-tip-btn {
  width: 100%; padding: 14px; border-radius: 100px; border: 0; cursor: pointer;
  background: linear-gradient(120deg, var(--ph-purple-2), var(--ph-rose));
  color: #fff; font: inherit; font-size: 15px; font-weight: 700;
}

/* ===========================================================================
   "WE'RE WORKING ON IT"
   =========================================================================== */
.ph-notice-tag {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px;
  padding: 6px 13px; border-radius: 100px;
  background: rgba(251,191,36,.14); border: 1px solid rgba(251,191,36,.34);
  color: #fbbf24; font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
}
.ph-tip-card.is-notice { border-color: rgba(251,191,36,.3); }
.ph-tip-card.is-notice .ph-tip-t {
  background: linear-gradient(92deg, #fcd34d, #fbbf24);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ph-tip-card.is-notice .ph-tip-btn { background: linear-gradient(120deg, #f59e0b, #fbbf24); color: #1c1408; }

/* ===========================================================================
   YOU + GEMS — the light half of the app
   =========================================================================== */
.ph-light {
  background: linear-gradient(180deg, #f6f2fa 0%, #efe8f7 42%, #f4eff9 100%);
  color: #2a2338;
}
.ph-lcard {
  background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.9);
  border-radius: 22px; box-shadow: 0 10px 28px -20px rgba(80,60,120,.55);
  padding: 18px; margin-bottom: 14px;
}
.ph-light .ph-wrap { padding: 0 16px; }
.ph-ltop { padding: calc(env(safe-area-inset-top, 0px) + 20px) 0 4px; }

/* profile card */
.ph-prof { display: flex; align-items: flex-start; gap: 16px; position: relative; }
.ph-prof-av {
  position: relative; width: 84px; height: 84px; flex: 0 0 84px; border-radius: 50%;
  background: #ddd3ea center/cover no-repeat; display: grid; place-items: center;
  font-size: 30px; font-weight: 700; color: #8b5cf6;
}
.ph-prof-edit {
  position: absolute; right: -2px; bottom: -2px; width: 30px; height: 30px;
  border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--ph-purple-2); border: 3px solid #f6f2fa; color: #fff;
}
.ph-prof-edit svg { width: 13px; height: 13px; }
.ph-prof-n {
  font-size: 27px; font-weight: 800; letter-spacing: -.03em;
  display: flex; align-items: center; gap: 8px; line-height: 1.1;
}
.ph-prof-badge {
  width: 23px; height: 23px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ph-purple-2); color: #fff; font-size: 11px; flex: 0 0 23px;
}
.ph-prof-h { font-size: 15.5px; color: #8b8299; margin-top: 4px; }
.ph-prof-since {
  display: flex; align-items: center; gap: 7px; margin-top: 10px;
  font-size: 13.5px; color: #8b8299;
}
.ph-prof-since svg { width: 15px; height: 15px; }
.ph-prof-gear {
  position: absolute; top: 0; right: 0; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.95); color: #4b4359;
  box-shadow: 0 6px 16px -10px rgba(80,60,120,.5);
}
.ph-prof-gear svg { width: 18px; height: 18px; }

/* chat limit */
.ph-limit-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ph-limit-lab {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #6f6780;
}
.ph-limit-q {
  width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center;
  border: 1.4px solid #b8b0c6; color: #8b8299; font-size: 11px; font-weight: 700; cursor: pointer;
}
.ph-limit-n { font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: var(--ph-purple-2); }
.ph-limit-bar { height: 9px; border-radius: 5px; background: rgba(139,92,246,.12); margin: 16px 0 12px; overflow: hidden; }
.ph-limit-bar i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #8b5cf6, #d8a9f7); transition: width .5s; }
.ph-limit-s { font-size: 14.5px; color: #6f6780; }
.ph-limit-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; position: relative;
  width: 100%; margin-top: 18px; padding: 17px; border-radius: 100px; border: 0; cursor: pointer;
  background: linear-gradient(100deg, #8b5cf6, #c98ef0 70%, #dda6f5);
  color: #fff; font: inherit; font-size: 16px; font-weight: 700;
  box-shadow: 0 12px 28px -12px rgba(139,92,246,.7);
}
.ph-limit-btn svg { width: 17px; height: 17px; }
.ph-limit-btn .ph-limit-arrow { position: absolute; right: 20px; opacity: .85; }

/* setting rows */
.ph-row { display: flex; align-items: flex-start; gap: 14px; }
.ph-row-ico {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: 14px;
  display: grid; place-items: center; background: rgba(139,92,246,.11); color: var(--ph-purple-2);
}
.ph-row-ico svg { width: 19px; height: 19px; }
.ph-row-b { flex: 1; min-width: 0; }
.ph-row-t { font-size: 16px; font-weight: 700; letter-spacing: -.015em; }
.ph-row-s { font-size: 13.5px; line-height: 1.5; color: #8b8299; margin-top: 4px; }
.ph-row-go { color: #b0a8bf; align-self: center; flex: 0 0 auto; }
.ph-row-go svg { width: 17px; height: 17px; }
.ph-lcard.is-tap { cursor: pointer; transition: transform .16s; }
.ph-lcard.is-tap:active { transform: scale(.985); }

.ph-toggle {
  position: relative; width: 56px; height: 32px; flex: 0 0 56px; align-self: center;
  border-radius: 100px; border: 0; cursor: pointer; background: #cfc7db; transition: background .22s;
}
.ph-toggle i {
  position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%;
  background: #fff; transition: transform .22s; box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.ph-toggle.is-on { background: var(--ph-purple-2); }
.ph-toggle.is-on i { transform: translateX(24px); }

.ph-logout {
  display: flex; align-items: center; justify-content: center; gap: 10px; position: relative;
  width: 100%; padding: 19px; border-radius: 22px; cursor: pointer;
  background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.9);
  color: #e0483f; font: inherit; font-size: 16px; font-weight: 700;
  box-shadow: 0 10px 28px -20px rgba(80,60,120,.55);
}
.ph-logout svg { width: 19px; height: 19px; position: absolute; right: 22px; }

/* ------------------------------------------------------------------ gems */
.ph-gemsheet { position: fixed; inset: 0; z-index: 1250; display: none; overflow-y: auto; }
.ph-gemsheet.is-on { display: block; }
.ph-gem-head { display: flex; align-items: flex-start; gap: 12px; padding: calc(env(safe-area-inset-top, 0px) + 22px) 0 18px; }
.ph-gem-title { font-family: 'Playfair Display', Georgia, serif; font-size: 34px; font-weight: 600; letter-spacing: -.02em; }
.ph-gem-sub { font-size: 15px; color: #8b8299; margin-top: 3px; }
.ph-gem-x {
  margin-left: auto; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.95); color: #6d3fd4;
  box-shadow: 0 6px 16px -10px rgba(80,60,120,.5);
}
.ph-gem-x svg { width: 19px; height: 19px; }

.ph-gem-hero {
  position: relative; overflow: hidden; padding: 24px; border-radius: 26px; margin-bottom: 22px;
  background: linear-gradient(128deg, #ede2fb 0%, #f6e9f4 46%, #fdf3e6 100%);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 14px 34px -22px rgba(110,70,170,.6);
}
.ph-gem-hero-art {
  position: absolute; right: -14px; top: 26px; font-size: 128px; line-height: 1;
  filter: drop-shadow(0 12px 26px rgba(139,92,246,.45)); opacity: .95;
}
.ph-gem-chip {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.6); font-size: 25px; margin-bottom: 16px;
}
.ph-gem-big { font-family: 'Playfair Display', Georgia, serif; font-size: 62px; font-weight: 600; line-height: .9; letter-spacing: -.03em; }
.ph-gem-word { font-size: 17px; font-weight: 800; letter-spacing: .22em; color: var(--ph-purple-2); margin-top: 8px; }
.ph-gem-pocket {
  display: inline-block; margin-top: 12px; padding: 6px 14px; border-radius: 100px;
  background: rgba(139,92,246,.14); color: #6d3fd4;
  font-size: 11.5px; font-weight: 800; letter-spacing: .13em;
}
.ph-gem-rate {
  position: relative; display: flex; align-items: center; gap: 9px; margin-top: 20px;
  padding: 13px 18px; border-radius: 100px; background: rgba(255,255,255,.68);
  font-size: 14px; color: #4b4359; font-weight: 500;
}
.ph-gem-rate svg { width: 16px; height: 16px; color: var(--ph-purple-2); flex: 0 0 16px; }
.ph-gem-rate b { font-weight: 700; }

.ph-pack {
  position: relative; display: flex; align-items: center; gap: 16px; width: 100%;
  padding: 20px 18px; margin-bottom: 14px; border-radius: 22px; cursor: pointer; text-align: left;
  background: rgba(255,255,255,.66); border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 10px 28px -20px rgba(80,60,120,.55);
  transition: transform .16s;
}
.ph-pack:active { transform: scale(.985); }
.ph-pack.is-pop { border-color: rgba(139,92,246,.42); box-shadow: 0 12px 30px -20px rgba(139,92,246,.7); }
.ph-pack.is-best { border-color: rgba(232,169,42,.5); background: linear-gradient(120deg, rgba(253,246,232,.9), rgba(255,255,255,.66)); }
.ph-pack-tag {
  position: absolute; top: -10px; left: 18px; padding: 5px 13px; border-radius: 100px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .07em; color: #fff;
  background: var(--ph-purple-2);
}
.ph-pack.is-best .ph-pack-tag { background: #e8a92a; color: #3d2c05; }
.ph-pack-art { font-size: 40px; line-height: 1; flex: 0 0 auto; filter: drop-shadow(0 6px 14px rgba(139,92,246,.4)); }
.ph-pack-b { flex: 1; min-width: 0; }
.ph-pack-n { font-family: 'Playfair Display', Georgia, serif; font-size: 30px; font-weight: 600; letter-spacing: -.02em; }
.ph-pack-n span { font-family: Inter, sans-serif; font-size: 17px; font-weight: 500; color: #4b4359; }
.ph-pack-m { display: flex; align-items: center; gap: 9px; margin-top: 7px; flex-wrap: wrap; }
.ph-pack-lab { font-size: 12px; font-weight: 800; letter-spacing: .16em; color: #8b8299; }
.ph-pack-each { padding: 4px 11px; border-radius: 100px; background: rgba(139,92,246,.10); color: #6f6780; font-size: 12px; font-weight: 600; }
.ph-pack-price {
  flex: 0 0 auto; padding: 14px 22px; border-radius: 100px;
  background: rgba(139,92,246,.13); color: #6d3fd4;
  font-size: 20px; font-weight: 700; letter-spacing: -.02em;
}
.ph-pack.is-pop .ph-pack-price { background: linear-gradient(120deg, #8b5cf6, #b57af2); color: #fff; box-shadow: 0 8px 20px -10px rgba(139,92,246,.8); }
.ph-pack.is-best .ph-pack-price { background: linear-gradient(120deg, #e8a92a, #f3c65e); color: #3d2c05; }

.ph-gem-safe { display: flex; align-items: center; gap: 14px; padding: 17px 18px; border-radius: 22px;
  background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.9); margin-top: 8px; }
.ph-gem-safe-ico { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(139,92,246,.12); color: var(--ph-purple-2); }
.ph-gem-safe-ico svg { width: 18px; height: 18px; }
.ph-gem-safe-t { font-size: 14.5px; font-weight: 700; }
.ph-gem-safe-s { font-size: 13px; color: #8b8299; margin-top: 2px; }
.ph-gem-fine {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 22px 0 calc(30px + env(safe-area-inset-bottom, 0px));
  font-size: 12.5px; color: #9a92aa;
}
.ph-gem-fine svg { width: 14px; height: 14px; }

/* ===========================================================================
   2.12.23
   =========================================================================== */

/* --- chat: no header at all ------------------------------------------------
   Everything it held now lives in the action bar, so it was a strip of chrome
   covering the top of the scene for nothing. The scene is the screen. */
body.ph-on.in-chat .chat-char-header,
body.ph-on.in-chat .chat-back-btn { display: none !important; }
body.ph-on.in-chat .chat-scroll { padding-top: calc(env(safe-area-inset-top, 0px) + 18px); }

/* --- the old account page is gone ------------------------------------------
   #phYou replaces it. The markup stays in the DOM (hidden, not deleted) purely
   because the away-messages checkbox lives inside it and we drive that control
   rather than keeping a second copy of the setting. A hidden input still takes
   a programmatic click. */
body.ph-on #view-account .mobile-account { display: none !important; }

/* --- gems: a page, not a sheet ---------------------------------------------
   It was reading as a modal laid over Home — rounded top corners, Home showing
   above and behind it, no back affordance. Now it's a destination: full
   viewport, square corners, its own opaque background, starting at the top,
   with a back arrow. The bottom nav stays, because a wallet is a place in the
   app, not a checkout flow you get trapped in. */
.ph-gemsheet {
  position: fixed; inset: 0; z-index: 50;
  width: 100vw; height: 100vh; height: 100dvh;
  border-radius: 0 !important;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--ph-nav-h) + env(safe-area-inset-bottom, 0px) + 14px);
}
.ph-gemsheet::-webkit-scrollbar { width: 0; }
.ph-gem-head {
  display: flex; align-items: center; gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 0 18px;
}
.ph-gem-back {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.95); color: #4b3a6b;
  box-shadow: 0 6px 16px -10px rgba(80,60,120,.5);
}
.ph-gem-back svg { width: 20px; height: 20px; }
.ph-gem-title { font-size: 27px; line-height: 1.05; }
.ph-gem-sub { font-size: 13.5px; margin-top: 2px; }

/* art: drawn, not emoji — 💎 renders blue on Android and 💰 is a money bag,
   which is why the packs looked like dollar icons. */
.ph-pack-art { width: 58px; height: 58px; display: grid; place-items: center; }
.ph-pack-art svg { width: 100%; height: 100%; }
.ph-gem-hero-art {
  right: -18px; top: 34px; width: 210px; height: 210px; font-size: 0;
  opacity: .95; filter: drop-shadow(0 16px 30px rgba(139,92,246,.4));
}
.ph-gem-hero-art svg { width: 100%; height: 100%; }
.ph-gem-chip svg { width: 26px; height: 26px; }
.ph-gem-hero { position: relative; z-index: 0; }
.ph-gem-hero > *:not(.ph-gem-hero-art) { position: relative; z-index: 1; }

/* --- the tip modal must never be the only thing on screen ------------------- */
.ph-tip-card { max-height: 86vh; overflow-y: auto; }

/* ===========================================================================
   2.12.24
   =========================================================================== */

/* --- the gem page was invisible, and it was my fault ------------------------
   I dropped it to z-index 50 last round so the nav would sit on top of it. But
   the app has a dozen fixed layers between 1200 and 2100, so 50 put the page
   underneath them and you got a black screen with a working nav.
   It goes back above them, and the nav goes one higher still. */
.ph-gemsheet {
  z-index: 1255;
  background: linear-gradient(180deg, #f6f2fa 0%, #efe8f7 42%, #f4eff9 100%);
}
.ph-nav { z-index: 1260; }

/* --- the action bar belongs to the chat, and nothing else -------------------
   body.ph-on.in-chat is chat.js's, and it stays set while my screens sit over the
   top — so the bar followed you onto Chats and Memories. Now any of my screens
   being up hides it, whatever chat.js thinks the view is. */
body.ph-overlay .ph-qbar,
body.ph-overlay .ph-chatback { display: none !important; }

/* --- a way out of the chat -------------------------------------------------
   Removing the header took the exit with it. This is the exit: one button,
   bottom-left of the screen furniture, that goes back where you came from. */
.ph-chatback {
  position: fixed; z-index: 47; display: none;
  top: calc(env(safe-area-inset-top, 0px) + 12px); left: 12px;
  width: 42px; height: 42px; border-radius: 50%; place-items: center; cursor: pointer;
  background: rgba(22,17,34,.66); border: 1px solid rgba(255,255,255,.14); color: #efeaf7;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 22px -10px rgba(0,0,0,.8);
  transition: transform .16s;
}
body.ph-on.in-chat .ph-chatback { display: grid; }
body.ph-dir-open .ph-chatback,
body.cine-playing .ph-chatback { display: none !important; }
.ph-chatback:active { transform: scale(.9); }
.ph-chatback svg { width: 21px; height: 21px; }


/* ===========================================================================
   2.12.25 — THE HUB IS A PHONE UI, AND ONLY A PHONE UI
   Everything above is gated behind body.ph-on, which only goes on when this
   layer actually takes over. On a desktop-width viewport it never does, so the
   original app — sidebar, admin panel, the lot — is left completely alone.
   That's how "Desktop site" gets you back to the admin panel from a phone.
   =========================================================================== */
.ph-screen, .ph-nav, .ph-qbar, .ph-chatback, .ph-chathome,
.ph-offer, .ph-gemsheet, .ph-tip, .ph-reader { display: none; }
body.ph-on .ph-screen.is-on { display: block; }
body.ph-on .ph-nav { display: flex; }
body.ph-on.in-chat .ph-qbar { display: flex; }
body.ph-on.in-chat .ph-chatback,
body.ph-on.in-chat .ph-chathome { display: grid; }
body.ph-on .ph-offer { display: block; }
body.ph-on .ph-gemsheet.is-on { display: block; }
body.ph-on .ph-tip.is-on { display: flex; }
body.ph-on .ph-reader.is-on { display: flex; }
body.ph-on.ph-q-collapsed .ph-qrow { display: none; }
body.ph-on.ph-dir-open .ph-qbar,
body.ph-on.ph-dir-open .ph-chatback,
body.ph-on.ph-dir-open .ph-chathome,
body.ph-on.ph-overlay .ph-qbar,
body.ph-on.ph-overlay .ph-chatback,
body.ph-on.ph-overlay .ph-chathome { display: none !important; }

/* home, sitting beside back, so there's always a way to the top */
.ph-chathome { left: 62px; }

/* --- 2.12.26: a provider error is not the character talking ---------------- */
body.ph-on .msg.pherson.ph-broke .bubble {
  background: rgba(180,90,90,.12) !important;
  border: 1px solid rgba(220,120,120,.28) !important;
  border-radius: 14px !important; padding: 12px 15px !important;
  text-shadow: none !important; max-width: 88%;
}
.ph-broke-line { font-size: 14px; line-height: 1.5; color: #f0b8b8; font-style: normal; }

/* --- 2.12.27: gem card reordered — price leads, gems muted underneath ------- */
.ph-pack-price-lead {
  display: block; font-family: 'Playfair Display', Georgia, serif;
  font-size: 30px; font-weight: 600; letter-spacing: -.02em; color: #1c1330; margin-top: 6px;
}
.ph-pack.is-best .ph-pack-price-lead { color: #7a5a12; }
.ph-pack-gems-sub { display: block; font-size: 13.5px; color: #8b8299; font-weight: 600; margin-top: 2px; }
.ph-pack .ph-pack-price { display: none; }   /* the old trailing pill is replaced */
.ph-pack { align-items: flex-start; }
.ph-pack-art { align-self: center; }

/* --- 2.12.27: kill the spinner on the limit / paywall popup ----------------- */
body.ph-on .limit-pop .spinning,
body.ph-on .earn-refresh,
body.ph-on .limit-pop-refresh,
body.ph-on [class*="refresh"].spinning { animation: none !important; }
body.ph-on .limit-pop .spin,
body.ph-on .earn-spin { display: none !important; }

/* admin faucet toggle row shares the notice styling */

/* --- 2.12.27: with the faucet off, no "free boxes waiting" prompt ----------- */
body.ph-on .limit-pop-timer:has(strong),
body.ph-on .box-free-waiting,
body.ph-on .earn-boxes,
body.ph-on [class*="free-box"] { display: none !important; }

/* --- 2.12.27: regenerate-memories button in the empty album ---------------- */
.ph-regen-btn {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 16px;
  padding: 12px 20px; border-radius: 100px; cursor: pointer;
  background: linear-gradient(120deg, var(--ph-purple-2), #b06cf0);
  border: 0; color: #fff; font: inherit; font-size: 14px; font-weight: 700;
  box-shadow: 0 8px 20px -8px var(--ph-glow);
}
.ph-regen-btn:disabled { opacity: .7; cursor: default; }
.ph-regen-btn:active:not(:disabled) { transform: scale(.96); }

/* --- 2.12.28: director reachable without expanding the bar ------------------ */
.ph-qpeek-row { display: flex; align-items: center; width: 100%; gap: 8px; }
body.ph-on.ph-q-collapsed .ph-qpeek { flex: 1; }
.ph-qpeek-dir {
  display: none; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 7px 15px; border-radius: 100px; cursor: pointer;
  background: linear-gradient(120deg, rgba(139,92,246,.22), rgba(176,108,240,.16));
  border: 1px solid rgba(167,139,250,.4); color: var(--ph-purple);
  font: inherit; font-size: 12.5px; font-weight: 700;
}
body.ph-on.ph-q-collapsed .ph-qpeek-dir { display: inline-flex; }
.ph-qpeek-dir svg { width: 15px; height: 15px; }
.ph-qpeek-dir:active { transform: scale(.94); }
/* when expanded, the row is just the single peek control again */
body.ph-on:not(.ph-q-collapsed) .ph-qpeek-row { justify-content: center; }
body.ph-on:not(.ph-q-collapsed) .ph-qpeek-dir { display: none; }

/* --- 2.12.29: the mandatory rating gate ------------------------------------ */
.ph-rate-gate {
  position: fixed; inset: 0; z-index: 1500; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(6,4,12,.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.ph-rate-card {
  width: 100%; max-width: 400px; max-height: 90vh; overflow-y: auto;
  padding: 26px 22px; text-align: center; border-radius: 26px;
  background: linear-gradient(170deg, #221a36, #14101f);
  border: 1px solid rgba(167,139,250,.34);
  box-shadow: 0 30px 70px -22px rgba(0,0,0,.85);
}
.ph-rate-art { font-size: 38px; line-height: 1; margin-bottom: 10px; }
.ph-rate-title {
  font-size: 21px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 8px;
  background: linear-gradient(92deg, var(--ph-purple), var(--ph-rose));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ph-rate-sub { font-size: 13.5px; line-height: 1.55; color: var(--ph-ink-2); margin-bottom: 18px; }
.ph-rate-stars { display: flex; justify-content: center; gap: 8px; margin-bottom: 20px; }
.ph-star {
  font-size: 34px; line-height: 1; background: none; border: 0; cursor: pointer;
  color: rgba(255,255,255,.18); transition: transform .12s, color .12s;
}
.ph-star.is-lit { color: #fbbf24; }
.ph-star:active { transform: scale(.85); }
.ph-rate-label {
  display: block; text-align: left; font-size: 13px; font-weight: 600;
  color: var(--ph-ink); margin: 0 0 7px; line-height: 1.4;
}
.ph-rate-input {
  width: 100%; box-sizing: border-box; padding: 12px 14px; margin-bottom: 16px;
  border-radius: 14px; background: rgba(12,9,20,.6);
  border: 1px solid var(--ph-line); color: var(--ph-ink);
  font: inherit; font-size: 14px; resize: vertical; min-height: 44px;
}
.ph-rate-input:focus { outline: none; border-color: rgba(167,139,250,.5); }
.ph-rate-input::placeholder { color: var(--ph-mute); }
.ph-rate-submit {
  width: 100%; padding: 15px; border-radius: 100px; border: 0; cursor: pointer;
  background: linear-gradient(120deg, var(--ph-purple-2), var(--ph-rose));
  color: #fff; font: inherit; font-size: 15px; font-weight: 700;
}
.ph-rate-submit:disabled { opacity: .45; cursor: default; }
.ph-rate-note { font-size: 12.5px; color: var(--ph-rose); margin-top: 10px; min-height: 16px; }

/* --- 2.12.30: forced Director preview — composer locked, only Generate ------ */
body.ph-forced-preview #composer,
body.ph-forced-preview .composer,
body.ph-forced-preview #chatInputWrap,
body.ph-forced-preview .ph-actionbar {
  opacity: .35; pointer-events: none; filter: grayscale(.4);
}
.ph-forced-bar {
  position: sticky; bottom: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  margin: 8px 12px calc(12px + env(safe-area-inset-bottom));
  padding: 12px 14px; border-radius: 18px;
  background: linear-gradient(120deg, rgba(139,92,246,.2), rgba(176,108,240,.14));
  border: 1px solid rgba(167,139,250,.42);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.ph-forced-txt { display: flex; align-items: center; gap: 8px; flex: 1; font-size: 13.5px; font-weight: 600; color: var(--ph-ink); }
.ph-forced-txt svg { width: 18px; height: 18px; color: var(--ph-purple); flex: 0 0 auto; }
.ph-forced-go {
  flex: 0 0 auto; padding: 12px 20px; border-radius: 100px; border: 0; cursor: pointer;
  background: linear-gradient(120deg, var(--ph-purple-2), #b06cf0);
  color: #fff; font: inherit; font-size: 14px; font-weight: 700;
  box-shadow: 0 8px 20px -8px var(--ph-glow);
}
.ph-forced-go:disabled { opacity: .6; cursor: default; }
.ph-forced-go:active:not(:disabled) { transform: scale(.95); }

/* 2.12.33 — Pherson+ subscription card on the offers screen. The headline offer,
   so it reads richer than the gem packs: a soft purple gradient and a glow. */
.ph-pack.is-plus {
  border-color: rgba(139,92,246,.5);
  background: linear-gradient(120deg, rgba(243,236,255,.96), rgba(255,255,255,.7));
  box-shadow: 0 16px 36px -22px rgba(139,92,246,.85);
}
.ph-pack.is-plus .ph-pack-lab {
  background: linear-gradient(90deg,#8b5cf6,#a855f7);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 800;
}
.ph-tag-plus { background: linear-gradient(90deg,#8b5cf6,#a855f7) !important; color: #fff !important; }
.ph-pack.is-plus .ph-pack-price-lead { color: #6d28d9; font-size: 19px; }