/* Signed-in presentation. Do not target guest pages, native media readiness or the admin panel. */
body.in-app {
  --xp-paper: #f5f6f9;
  --xp-surface: #ffffff;
  --xp-soft: #eef1f6;
  --xp-ink: #17233b;
  --xp-muted: #626d80;
  --xp-line: #dfe4ed;
  --xp-blue: #2456ef;
  --xp-blue-soft: #e9eeff;
  --xp-lime: #c5f165;
  --xp-shadow: 0 16px 50px #1826440b;
  --xp-icon: calc(clamp(21px, 1.45vw, 28px) * var(--ui-scale));
  --xp-control: max(44px, calc(clamp(46px, 3.15vw, 60px) * var(--ui-scale)));
  --nav-height: 80px;
  background: var(--xp-paper);
}
html[data-theme="dark"] body.in-app {
  --xp-paper: #111827;
  --xp-surface: #192234;
  --xp-soft: #202c40;
  --xp-ink: #f0f4ff;
  --xp-muted: #a4b0c5;
  --xp-line: #2d3a50;
  --xp-blue: #7597ff;
  --xp-blue-soft: #23355d;
  --xp-shadow: 0 16px 50px #0003;
}
body.in-app > .navbar {
  height: var(--nav-height);
  padding-inline: clamp(18px, 2.1vw, 40px);
  gap: 20px;
  background: var(--xp-paper);
  border-bottom: 0;
  box-shadow: none;
}
body.in-app > .navbar .brand-logo { width: 148px; height: 34px; }
body.in-app > .navbar #app-nav {
  height: 54px;
  gap: 4px;
  margin-inline: auto;
  padding: 5px;
  border: 1px solid var(--xp-line);
  border-radius: 30px;
  background: var(--xp-soft);
}
body.in-app > .navbar #app-nav button {
  position: relative;
  min-height: 42px;
  height: 42px;
  padding-inline: clamp(14px, 1.5vw, 25px);
  gap: 9px;
  border-radius: 24px;
  font-size: calc(13px * var(--ui-scale));
  font-weight: 650;
  color: var(--xp-muted);
}
body.in-app > .navbar #app-nav button > span[data-icon] { display: inline-flex; }
body.in-app > .navbar #app-nav button svg { width: 19px; height: 19px; }
body.in-app > .navbar #app-nav button:after { content: none; }
body.in-app > .navbar #app-nav button.active {
  background: var(--xp-surface);
  color: var(--xp-blue);
  box-shadow: 0 3px 10px #17233b0a;
}
body.in-app > .navbar #app-nav button:hover { color: var(--xp-blue); }
body.in-app > .navbar .nav-actions { gap: 12px; margin-inline-start: 0; }
body.in-app > .navbar .theme-toggle { border-color: var(--xp-line); background: var(--xp-surface); color: var(--xp-muted); }
body.in-app > .navbar #account-bar { gap: 7px; }
body.in-app > .navbar #premium,
body.in-app > .navbar #balance { min-height: 44px; border: 1px solid var(--xp-line); border-radius: 24px; padding-inline: 14px; background: var(--xp-surface); color: var(--xp-ink); font-size: calc(12px * var(--ui-scale)); }
body.in-app > .navbar #premium > span[data-icon] { color: var(--xp-blue); }
body.in-app > .navbar #balance { font-variant-numeric: tabular-nums; }
body.in-app > .navbar #account { padding-inline: 4px 0; }
body.in-app > .navbar #account-avatar { width: 40px; height: 40px; border: 3px solid var(--xp-surface); box-shadow: 0 0 0 1px var(--xp-line); }

body.in-app #app { padding: 0 14px 14px; background: var(--xp-paper); color: var(--xp-ink); }
body.in-app #app > .page { min-height: 0; }
body.in-app #app #stage { border-radius: 26px; background: #101725; box-shadow: var(--xp-shadow); isolation: isolate; }
/* Leave the remote video rendered underneath the opaque priming surface: LiveKit observes its size. */
body.in-app #app #stage-empty {
  --tc-bg: var(--xp-paper);
  padding: 24px 28px 110px;
  justify-content: safe center;
  background: radial-gradient(ellipse at 50% 25%, var(--xp-blue-soft), transparent 65%), var(--xp-paper);
  color: var(--xp-ink);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  isolation: isolate;
}
body.in-app #app #stage-empty:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .34;
  background-image: radial-gradient(var(--xp-muted) .7px, transparent .7px);
  background-size: 25px 25px;
  mask-image: radial-gradient(ellipse at center, #0005, transparent 68%);
}
body.in-app #app #stage-empty > :not(.xp-scene) { flex-shrink: 0; }
body.in-app #app .xp-enhanced .empty-orbit { display: none; }
body.in-app #app #stage-empty > .eyebrow { color: var(--xp-blue); font-size: calc(10px * var(--ui-scale)); letter-spacing: .16em; margin-bottom: 13px; }
body.in-app #app #stage-title { font-size: clamp(28px, 3.15vw, 48px); font-weight: 800; line-height: 1.15; letter-spacing: -.055em; max-width: 22ch; margin: 0 0 16px; text-wrap: balance; }
body.in-app #app #stage-description { font-size: calc(14px * var(--ui-scale)); line-height: 1.65; color: var(--xp-muted); max-width: 42ch; margin-bottom: 23px; text-wrap: pretty; }
body.in-app #app #start,
body.in-app #app #call-premium-required,
body.in-app #app #media-play { min-height: 52px; padding: 13px 27px; border-radius: 30px; background: #2456ef; color: white; font-size: calc(14px * var(--ui-scale)); font-weight: 650; box-shadow: 0 9px 24px #2456ef28; }
body.in-app #app #start:hover,
body.in-app #app #call-premium-required:hover,
body.in-app #app #media-play:hover { background: #1645d5; box-shadow: 0 12px 30px #2456ef36; }
body.in-app #app #cancel-search { min-height: 44px; border-radius: 24px; padding: 10px 24px; border: 1px solid var(--xp-line); background: var(--xp-surface); color: var(--xp-ink); }
body.in-app #app #stage-detail { font-size: calc(11px * var(--ui-scale)); color: var(--xp-muted); max-width: 48ch; line-height: 1.6; margin-top: 20px; }
body.in-app #app #recent-report { margin-top: 12px; min-height: 44px; color: var(--xp-muted); font-size: 11px; }

/* A small physical sculpture rather than a simulated camera feed. */
body.in-app #app .xp-scene { width: 380px; max-width: 86vw; height: clamp(175px, 24vh, 250px); min-height: 125px; position: relative; margin: 0 0 16px; flex-shrink: 1; perspective: 1000px; pointer-events: none; user-select: none; }
body.in-app #app .xp-scene-world { position: absolute; width: 340px; height: 230px; left: 50%; top: 50%; margin: -115px 0 0 -170px; transform: translate3d(var(--xp-pointer-x, 0px), var(--xp-pointer-y, 0px), 0); transform-style: preserve-3d; transition: transform .45s ease-out; }
body.in-app #app .xp-scene-halo { position: absolute; inset: -35px -30px -20px; background: radial-gradient(ellipse, #7699ff18, transparent 65%); }
body.in-app #app .xp-scene-floor { width: 190px; height: 23px; border-radius: 50%; position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%); background: #172b681c; filter: blur(13px); }
body.in-app #app .xp-scene-card { width: 156px; height: 160px; position: absolute; border-radius: 28px; border: 1px solid #ffffff55; transform-style: preserve-3d; overflow: hidden; }
body.in-app #app .xp-card-back { top: 24px; left: 44px; background: linear-gradient(138deg, #33446b, #111e3b 70%); box-shadow: -6px 6px 0 #0c1630, 0 28px 30px #172b6828, inset 1px 1px 3px #b1c3ff80; transform: rotate(-17deg) rotateY(24deg) rotateX(8deg); animation: xp-card-back 7s ease-in-out infinite; }
body.in-app #app .xp-card-front { top: 57px; left: 139px; background: radial-gradient(circle at 25% 15%, #7aabff80, transparent 55%), linear-gradient(145deg, #3e7bff, #214cdd 70%, #1534a4); box-shadow: 6px 6px 0 #1234a6, 0 28px 35px #214cdd30, inset 1px 1px 3px #d9e9ff90; transform: rotate(13deg) rotateY(-19deg) rotateX(8deg); animation: xp-card-front 6s ease-in-out infinite; }
body.in-app #app .xp-card-pin { display: block; position: absolute; top: 15px; left: 16px; width: 5px; height: 5px; border-radius: 50%; background: #ffffff9c; box-shadow: 9px 0 #ffffff35, 18px 0 #ffffff25; }
body.in-app #app .xp-sculpture { display: block; position: absolute; top: 20px; left: 29px; font: 114px/1.1 "DM Sans", sans-serif; color: #c5f165; text-shadow: 0 4px #739c32, 0 7px 8px #0003; transform: rotate(-15deg); }
body.in-app #app .xp-card-line { position: absolute; left: 24px; bottom: 18px; width: 63px; height: 4px; background: #ffffff26; border-radius: 10px; }
body.in-app #app .xp-card-front > svg { position: absolute; width: 100px; height: 88px; left: 26px; top: 19px; color: white; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 3px 1px #102e9670); }
body.in-app #app .xp-card-bars { position: absolute; left: 54px; bottom: 25px; height: 20px; display: flex; align-items: center; gap: 5px; }
body.in-app #app .xp-card-bars i { width: 4px; height: 6px; border-radius: 4px; background: #e5eeff; }
body.in-app #app .xp-card-bars i:nth-child(2),
body.in-app #app .xp-card-bars i:nth-child(4) { height: 12px; }
body.in-app #app .xp-card-bars i:nth-child(3) { height: 19px; }
body.in-app #app .xp-orbit { width: 355px; height: 134px; position: absolute; left: -5px; top: 48px; border: 1px solid #8195be50; border-radius: 50%; transform: rotate(-24deg); }
body.in-app #app .xp-orbit-back { border-bottom-color: transparent; border-left-color: transparent; }
body.in-app #app .xp-orbit-front { top: 87px; border-top-color: transparent; border-right-color: transparent; transform: rotate(25deg); }
body.in-app #app .xp-orb { position: absolute; display: block; border-radius: 50%; }
body.in-app #app .xp-orb-blue { width: 41px; height: 41px; left: 4px; top: 127px; background: radial-gradient(circle at 30% 25%, #9fc7ff, #376ef0 45%, #173399 90%); box-shadow: inset -5px -6px 9px #10318550, 0 8px 12px #1d46c82a; animation: xp-orb-drift 8s ease-in-out infinite; }
body.in-app #app .xp-orb-lime { width: 33px; height: 33px; right: 5px; top: 35px; background: radial-gradient(circle at 29% 22%, #edffba, #c5f165 45%, #80ab39 90%); box-shadow: 0 8px 12px #739c3223; animation: xp-orb-drift 6s ease-in-out -2s infinite reverse; }
body.in-app #app .xp-orb-pearl { width: 14px; height: 14px; left: 101px; top: 4px; background: radial-gradient(circle at 25% 20%, #fff, #dce3f3 55%, #9eacca); box-shadow: 0 6px 8px #172b681c; }
body.in-app #app #stage[data-xp-phase="waiting"] .xp-card-front { animation-duration: 3s; }
body.in-app #app #stage[data-xp-phase="waiting"] .xp-orb-lime,
body.in-app #app #stage[data-xp-phase="connecting"] .xp-orb-lime { animation: xp-connecting 1.8s ease-in-out infinite; }
body.in-app #app #stage[data-xp-phase="waiting"] .xp-card-bars i,
body.in-app #app #stage[data-xp-phase="connecting"] .xp-card-bars i { animation: xp-bar 1.2s ease-in-out infinite alternate; }
body.in-app #app #stage .xp-card-bars i:nth-child(2) { animation-delay: -.6s; }
body.in-app #app #stage .xp-card-bars i:nth-child(3) { animation-delay: -.9s; }
body.in-app #app #stage .xp-card-bars i:nth-child(4) { animation-delay: -.3s; }
body.in-app #app #stage[data-xp-mode="premium"] .xp-orb-lime { box-shadow: 0 0 0 7px #c5f16520, 0 0 0 14px #c5f1650c; }
body.in-app #app .xp-scene.xp-paused *,
body.in-app #app .xp-scene.xp-paused { animation-play-state: paused !important; }

/* Video chrome stays legible over real footage in either theme. */
body.in-app #app #participant { top: 20px; left: 22px; gap: 10px; padding: 5px 6px 5px 15px; border-radius: 22px; border: 1px solid #ffffff29; background: #101b2bd6; color: #f4f7ff; backdrop-filter: blur(20px); box-shadow: 0 5px 20px #0002; }
body.in-app #app #participant button { min-height: 40px; width: 40px; height: 40px; border-radius: 50%; color: #e4eaff; }
body.in-app #app #participant button:hover { background: #ffffff18; color: white; }
body.in-app #app #remote-name { font-size: calc(13px * var(--ui-scale)); }
body.in-app #app #call-cost { background: #101b2bf2; color: #f4f7ff; border: 1px solid #ffffff36; border-radius: 10px; padding: 6px 9px; font-size: max(11px, calc(11px * var(--ui-scale))); font-weight: 500; line-height: 1.45; max-width: 280px; }
body.in-app #app #peer-verification { flex-shrink: 0; }
body.in-app #app .self-preview { border: 1px solid #ffffff5c; border-radius: 18px; box-shadow: 0 8px 30px #0004, 0 0 0 4px #ffffff08; background: #162136; }
body.in-app #app #camera-off { color: #cbd7ee; background: radial-gradient(ellipse at top, #263a60, #141e31); font-size: calc(12px * var(--ui-scale)); }
body.in-app #app .preview-tool { width: 34px; height: 34px; min-height: 34px; top: 6px; right: 6px; border-radius: 11px; background: #101b2bbf; color: white; opacity: .7; }
body.in-app #app .preview-tool:hover,
body.in-app #app .preview-tool:focus-visible,
body.in-app #app .self-group:focus-within .preview-tool { background: #101b2be8; opacity: 1; }
body.in-app #app #drag-handle { left: 6px; right: auto; }
body.in-app #app .preview-tool svg { width: 19px; height: 19px; }
body.in-app #app .self-controls { gap: 6px; margin-top: 10px; }
body.in-app #app .self-controls button { min-height: 44px; width: max(44px, calc(40px * var(--ui-scale))); height: max(44px, calc(40px * var(--ui-scale))); border: 1px solid #ffffff28; background: #101b2bd6; color: #f4f7ff; backdrop-filter: blur(18px); box-shadow: 0 4px 16px #0002; }
body.in-app #app .self-controls button svg { width: var(--xp-icon); height: var(--xp-icon); }
body.in-app #app .self-controls button:hover { background: #273952e8; color: white; }
body.in-app #app .self-controls button.muted { border-color: #ff9aab50; background: #542736e8; color: #ffbeca; }
body.in-app #app #bottom-controls { padding: 7px; gap: 7px; bottom: max(22px, env(safe-area-inset-bottom)); border: 1px solid #ffffff42; border-radius: 42px; background: #101b2bd6; backdrop-filter: blur(22px); box-shadow: 0 10px 35px #0003, inset 0 1px #ffffff12; }
body.in-app #app #bottom-controls button { width: var(--xp-control); height: var(--xp-control); min-height: 44px; border: 1px solid #ffffff15; background: #ffffff0b; color: #eef4ff; backdrop-filter: none; box-shadow: none; }
body.in-app #app #bottom-controls button:hover:not(:disabled) { background: #ffffff20; color: white; }
body.in-app #app #bottom-controls button svg { width: var(--xp-icon); height: var(--xp-icon); }
body.in-app #app #bottom-controls #next { background: #c5f165; border-color: #ddff9b; color: #172b0b; box-shadow: 0 2px 10px #c5f16520; }
body.in-app #app #bottom-controls #next:hover:not(:disabled) { background: #d4ff83; color: #172b0b; }
body.in-app #app #bottom-controls .friend-button.accepted { color: #c5f165; background: #c5f16514; }
body.in-app #app #bottom-controls .friend-button.pending { color: #ffd992; }
body.in-app #app #bottom-controls .locked:after { background: #17233b; border-color: #bccae3; }
body.in-app #app #bottom-controls .locked:before { border-color: #bccae3; }
body.in-app #app #toggle-controls,
body.in-app #app #end-call { width: 44px; height: 44px; min-height: 44px; bottom: max(29px, env(safe-area-inset-bottom)); border-radius: 50%; backdrop-filter: blur(16px); }
body.in-app #app #toggle-controls { right: 22px; background: #101b2bd6; border: 1px solid #ffffff2b; color: white; }
body.in-app #app #end-call { right: 76px; background: #542736e8; color: #ffbeca; border: 1px solid #ff9aab50; }
body.in-app #app #toggle-controls svg,
body.in-app #app #end-call svg { width: 21px; height: 21px; }
body.in-app #app #stage.ui-hidden .stage-overlay { opacity: 0; visibility: hidden; pointer-events: none; }
body.in-app #app #stage.ui-hidden #bottom-controls { transform: translate(-50%, 14px); }
body.in-app #app #stage.ui-hidden.chat-peek #chat-overlay { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }

body.in-app #app #chat-overlay { left: 22px; bottom: 22px; width: calc(clamp(260px, 21vw, 350px) * var(--ui-scale)); max-width: 30%; gap: 10px; }
body.in-app #app .chat-heading { padding: 8px 12px; min-height: 34px; border-radius: 12px; border: 1px solid #ffffff21; background: #101b2bc9; color: #dde7f8; backdrop-filter: blur(18px); font-size: calc(10px * var(--ui-scale)); font-weight: 650; }
body.in-app #app #dismiss-chat { width: 34px; height: 34px; min-height: 34px; color: #dde7f8; }
body.in-app #app #live-messages { gap: 8px; max-height: 31dvh; padding: 1px 1px 3px; scrollbar-width: thin; scrollbar-color: #becae25c transparent; }
body.in-app #app .live-bubble { padding: 10px 13px; border-radius: 14px 14px 14px 4px; background: #101b2bdc; border: 1px solid #ffffff21; color: #f3f6ff; font-size: calc(12px * var(--ui-scale)); backdrop-filter: blur(20px); box-shadow: 0 3px 12px #0001; }
body.in-app #app .live-bubble.own { border-radius: 14px 14px 4px 14px; border-color: #91adff50; background: #2456efed; color: white; }
body.in-app #app .live-bubble small { color: #c2cfe5; font-size: 10px; }
body.in-app #app .live-bubble.own small { color: #d9e4ff; }
body.in-app #app .live-bubble .original-message { color: #c6d1e5; opacity: 1; border-color: #ffffff24; }
body.in-app #app .live-bubble.own .original-message { color: #dce7ff; }
body.in-app #app .live-bubble .translation-notice { color: #ccd9f1; }
body.in-app #app .live-bubble.moderation-notice { border-color: #85c6ffb3; background: #123b65ed; color: #f2f8ff; }
body.in-app #app .live-bubble.moderation-notice > small { color: #b5dfff; }
body.in-app #app #live-form { padding: 4px; border: 1px solid #ffffff35; border-radius: 28px; background: #101b2bed; box-shadow: 0 5px 20px #0002; backdrop-filter: blur(20px); }
body.in-app #app #live-form input { min-width: 0; color: #f3f6ff; font-size: calc(12px * var(--ui-scale)); padding: 11px 10px; }
body.in-app #app #live-form input::placeholder { color: #b7c3d9; opacity: 1; }
body.in-app #app #live-form button { flex: 0 0 38px; width: 38px; height: 38px; min-height: 38px; border-radius: 50%; background: #c5f165; color: #172b0b; }
body.in-app #app #live-form button svg { width: 18px; height: 18px; }

/* Persistent conversations and stories use the same quiet paper surfaces. */
body.in-app #app #messages { border: 1px solid var(--xp-line); border-radius: 24px; overflow: hidden; background: var(--xp-surface); }
body.in-app #app #messages.active { grid-template-columns: minmax(290px, 340px) minmax(0, 1fr); }
body.in-app #app .conversation-list { border-right: 0; border-inline-end: 1px solid var(--xp-line); background: var(--xp-surface); padding: 30px 20px; min-height: 0; }
body.in-app #app .list-heading { padding-inline: 6px; }
body.in-app #app .list-heading h1 { color: var(--xp-ink); font-size: 27px; font-weight: 800; letter-spacing: -.055em; margin-bottom: 24px; }
body.in-app #app .list-heading .eyebrow,
body.in-app #app .stories-top .eyebrow { color: var(--xp-blue); font-size: 9px; letter-spacing: .12em; }
body.in-app #app .list-heading > button { width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--xp-line); color: var(--xp-ink); }
body.in-app #app .conversation-categories { padding: 4px; gap: 3px; background: var(--xp-soft); border-color: var(--xp-line); border-radius: 14px; }
body.in-app #app .conversation-categories button { min-height: 40px; border-radius: 10px; color: var(--xp-muted); font-size: calc(10px * var(--ui-scale)); }
body.in-app #app .conversation-categories button[aria-selected="true"] { background: var(--xp-surface); color: var(--xp-blue); box-shadow: 0 3px 8px #17233b08; }
body.in-app #app #direct-search { border-color: var(--xp-line); background: var(--xp-soft); border-radius: 14px; min-height: 46px; margin-bottom: 17px; color: var(--xp-muted); }
body.in-app #app #direct-search input { min-width: 0; font-size: calc(12px * var(--ui-scale)); color: var(--xp-ink); }
body.in-app #app .conversation-item { border-radius: 15px; padding: 14px 11px; color: var(--xp-ink); }
body.in-app #app .conversation-item.selected { background: var(--xp-blue-soft); }
body.in-app #app .conversation-item .avatar { width: 44px; height: 44px; border-radius: 15px; }
body.in-app #app .conversation-item strong { font-size: calc(13px * var(--ui-scale)); font-weight: 700; }
body.in-app #app .conversation-item small { color: var(--xp-muted); font-size: calc(11px * var(--ui-scale)); }
body.in-app #app #direct-panel { background: radial-gradient(ellipse at 60% 0, var(--xp-blue-soft), transparent 55%), var(--xp-paper); }
body.in-app #app .conversation-header { padding-inline: 28px; min-height: 82px; flex-shrink: 0; border-color: var(--xp-line); background: color-mix(in srgb, var(--xp-surface) 90%, transparent); }
body.in-app #app .conversation-header strong { color: var(--xp-ink); font-weight: 750; font-size: calc(14px * var(--ui-scale)); }
body.in-app #app .conversation-header small { color: var(--xp-muted); }
body.in-app #app .conversation-header button { min-width: 40px; min-height: 40px; border-radius: 50%; }
body.in-app #app .thread { min-height: 0; padding: 28px; gap: 14px; scrollbar-color: var(--xp-line) transparent; }
body.in-app #app .thread-message { border-radius: 17px 17px 17px 5px; background: var(--xp-surface); border: 1px solid var(--xp-line); color: var(--xp-ink); padding: 13px 17px; font-size: calc(13px * var(--ui-scale)); line-height: 1.65; box-shadow: 0 3px 10px #17233b04; }
body.in-app #app .thread-message.outgoing { border-radius: 17px 17px 5px 17px; background: #2456ef; border-color: #2456ef; color: white; }
body.in-app #app .thread-message small { color: var(--xp-muted); font-size: 10px; }
body.in-app #app .thread-message.outgoing small,
body.in-app #app .thread-message.outgoing .original-message { color: #dae5ff; }
body.in-app #app .thread-message .original-message { opacity: 1; color: var(--xp-muted); border-color: var(--xp-line); }
body.in-app #app .thread-bottom { padding: 18px 26px; border-color: var(--xp-line); background: var(--xp-surface); }
body.in-app #app .thread-bottom .composer { border: 1px solid var(--xp-line); background: var(--xp-soft); border-radius: 28px; padding: 4px; }
body.in-app #app .thread-bottom .composer input { min-width: 0; padding: 11px 14px; color: var(--xp-ink); font-size: calc(13px * var(--ui-scale)); }
body.in-app #app .thread-bottom .composer button { border-radius: 50%; width: 42px; height: 42px; min-height: 42px; flex: 0 0 42px; background: #2456ef; color: white; }
body.in-app #app .gift-message { background: var(--xp-blue-soft); border-color: color-mix(in srgb, var(--xp-blue) 23%, var(--xp-line)); color: var(--xp-ink); border-radius: 20px; box-shadow: 0 8px 24px #2456ef0a; }
body.in-app #app .empty-state { color: var(--xp-muted); }
body.in-app #app .empty-state > svg,
body.in-app #app .empty-state > [data-icon] { box-sizing: content-box; padding: 23px; width: 38px; height: 38px; color: var(--xp-blue); border: 1px solid var(--xp-line); border-radius: 27px; background: linear-gradient(145deg, var(--xp-surface), var(--xp-blue-soft)); box-shadow: 0 6px 0 var(--xp-line), 0 16px 26px #17233b08; transform: rotate(-7deg); margin-bottom: 32px; flex-shrink: 0; }
body.in-app #app .empty-state > [data-icon] { display: grid; place-items: center; }
body.in-app #app .empty-state > [data-icon] > svg { width: 38px; height: 38px; }
body.in-app #app .empty-state h2 { font-size: clamp(21px, 2.1vw, 31px); font-weight: 750; color: var(--xp-ink); line-height: 1.25; margin-bottom: 12px; text-wrap: balance; }
body.in-app #app .empty-state p { font-size: calc(13px * var(--ui-scale)); color: var(--xp-muted); max-width: 36ch; line-height: 1.8; text-wrap: pretty; }
body.in-app #app .conversation-list .empty-state { padding: 35px 10px; }
body.in-app #app .conversation-list .empty-state h2 { font-size: 18px; }
body.in-app #app .conversation-list .empty-state > svg,
body.in-app #app .conversation-list .empty-state > [data-icon] { width: 27px; height: 27px; padding: 16px; border-radius: 20px; }
body.in-app #app .conversation-list .empty-state > [data-icon] > svg { width: 27px; height: 27px; }
body.in-app #app #stories { border: 1px solid var(--xp-line); border-radius: 24px; background: radial-gradient(ellipse at 50% 35%, var(--xp-blue-soft), transparent 63%), var(--xp-paper); }
body.in-app #app .stories-top { top: 30px; left: 30px; right: 30px; }
body.in-app #app .stories-top > div { display: block; }
body.in-app #app .stories-top h1 { color: var(--xp-ink); font-size: 30px; font-weight: 800; }
body.in-app #app #add-story { min-height: 48px; padding-inline: 21px; border-radius: 26px; background: #2456ef; color: white; font-size: calc(12px * var(--ui-scale)); box-shadow: 0 6px 18px #2456ef20; }
body.in-app #app .story-empty { padding-top: 110px; padding-bottom: 45px; }
body.in-app #app .story-viewer { border: 1px solid #ffffff24; border-radius: 22px; box-shadow: 0 15px 45px #17233b1f; color: #f4f7ff; }
body.in-app #app .story-author strong { font-size: 14px; color: white; }
body.in-app #app .story-author p { color: #e0e8f7; font-size: 12px; }
body.in-app #app .story-actions button { width: 44px; height: 44px; min-height: 44px; color: white; background: #101b2bc9; border: 1px solid #ffffff2b; }
body.in-app #app .story-actions .friend-button.accepted { color: #c5f165; }
body.in-app #app .story-actions .friend-button.pending { color: #ffd992; }
body.in-app #app .story-hint { color: var(--xp-muted); font-size: 11px; }

body.in-app #account-menu { border-radius: 22px; border: 1px solid var(--xp-line); background: var(--xp-surface); color: var(--xp-ink); box-shadow: 0 18px 60px #17233b26; padding: 10px; }
body.in-app #account-menu .menu-identity { padding: 16px 12px 20px; border-color: var(--xp-line); }
body.in-app #account-menu .menu-identity small { color: var(--xp-muted); }
body.in-app #account-menu > button { min-height: 46px; border-radius: 12px; padding-inline: 12px; text-align: start; }
body.in-app #account-menu > button:hover { color: var(--xp-blue); background: var(--xp-blue-soft); }
body.in-app #account-menu .menu-divider { background: var(--xp-line); }
body.in-app #modal { background: var(--xp-surface); color: var(--xp-ink); border: 1px solid var(--xp-line); border-radius: 24px; box-shadow: 0 24px 100px #0004; }
body.in-app #modal::backdrop { background: #0d173c66; backdrop-filter: blur(8px); }
body.in-app #modal .modal-heading { border-color: var(--xp-line); }
body.in-app #modal #modal-title { font-weight: 800; letter-spacing: -.04em; }
body.in-app #modal #modal-close { border-radius: 50%; width: 44px; height: 44px; min-height: 44px; }

@media (max-width: 1150px) and (min-width: 701px) {
  body.in-app > .navbar { gap: 12px; padding-inline: 20px; }
  body.in-app > .navbar .brand-logo { width: 130px; }
  body.in-app > .navbar #app-nav button { padding-inline: 14px; }
  body.in-app > .navbar #premium .premium-text { display: none; }
  body.in-app > .navbar #premium { width: 44px; padding: 0; }
  body.in-app #app #chat-overlay { bottom: 110px; max-width: 34%; }
}
@media (max-width: 900px) and (min-width: 701px) {
  body.in-app > .navbar #app-nav { margin-inline: 0 auto; }
  body.in-app > .navbar #app-nav button { min-width: 48px; padding-inline: 12px; }
  body.in-app > .navbar .nav-actions { gap: 6px; }
  body.in-app #app #messages.active { grid-template-columns: 280px minmax(0, 1fr); }
  body.in-app #app .conversation-list { padding-inline: 14px; }
  body.in-app #app .stories-top .eyebrow { max-width: 20ch; }
}
@media (max-width: 700px) {
  body.in-app { --nav-height: 112px; --xp-control: max(44px, min(calc(44px * var(--ui-scale)), calc((100vw - 147px) / 4))); --xp-icon: calc(22px * var(--ui-scale)); }
  body.in-app > .navbar { display: grid; height: 112px; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 60px 52px; padding-inline: 12px; gap: 0 8px; }
  body.in-app > .navbar .brand-logo { width: 116px; height: 30px; }
  body.in-app > .navbar .nav-actions { grid-row: 1; grid-column: 2; gap: 5px; }
  body.in-app > .navbar .theme-toggle { width: 44px; height: 44px; flex-basis: 44px; background: transparent; border: 0; }
  body.in-app > .navbar #account-bar { gap: 2px; }
  body.in-app > .navbar #premium { width: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; }
  body.in-app > .navbar #balance { padding-inline: 7px; min-height: 44px; border: 0; background: var(--xp-surface); font-size: calc(10px * var(--ui-scale)); }
  body.in-app > .navbar #account { min-width: 44px; padding: 0; }
  body.in-app > .navbar #account-avatar { width: 33px; height: 33px; border-width: 2px; }
  body.in-app > .navbar #app-nav { grid-row: 2; grid-column: 1 / -1; height: 48px; width: 100%; gap: 3px; margin: 0 0 4px; padding: 1px; border-radius: 25px; }
  body.in-app > .navbar #app-nav button { flex: 1; flex-direction: row; min-width: 0; height: 44px; min-height: 44px; padding: 0 7px; gap: 6px; font-size: calc(10px * var(--ui-scale)); border-radius: 23px; }
  body.in-app > .navbar #app-nav button > span:not([data-icon]) { display: inline; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.in-app > .navbar #app-nav button svg { width: 17px; height: 17px; }
  body.in-app #app { padding: 0; }
  body.in-app #app #stage { border-radius: 20px 20px 0 0; }
  body.in-app #app #stage-empty { padding: 14px 22px 99px; }
  body.in-app #app .xp-scene { height: clamp(125px, 22dvh, 190px); min-height: 90px; margin-bottom: 10px; }
  body.in-app #app .xp-scene-world { scale: .78; }
  body.in-app #app .xp-scene-floor { bottom: 2px; width: 150px; }
  body.in-app #app #stage-title { font-size: clamp(27px, 7.3vw, 35px); max-width: 18ch; margin-bottom: 12px; }
  body.in-app #app #stage-description { font-size: calc(13px * var(--ui-scale)); max-width: 34ch; margin-bottom: 17px; }
  body.in-app #app #stage-detail { font-size: calc(10px * var(--ui-scale)); margin-top: 16px; max-width: 36ch; }
  body.in-app #app #stage-empty > .eyebrow { font-size: calc(9px * var(--ui-scale)); margin-bottom: 10px; }
  body.in-app #app #start,
  body.in-app #app #call-premium-required,
  body.in-app #app #media-play { min-height: 48px; font-size: calc(13px * var(--ui-scale)); padding: 12px 23px; }
  body.in-app #app #stage[data-xp-camera="true"] #stage-empty { padding-bottom: 145px; }
  body.in-app #app #stage[data-xp-camera="true"] .xp-scene { height: 105px; min-height: 65px; }
  body.in-app #app #stage[data-xp-camera="true"] .xp-scene-world { scale: .59; }
  body.in-app #app #participant { top: 12px; left: 10px; max-width: calc(100% - 20px); flex-wrap: wrap; gap: 3px 7px; padding: 4px 5px 4px 10px; border-radius: 18px; }
  body.in-app #app #participant button { width: 36px; height: 40px; min-height: 40px; }
  body.in-app #app #participant > span:first-of-type { max-width: 100px; }
  body.in-app #app #remote-name { font-size: calc(12px * var(--ui-scale)); }
  body.in-app #app #call-cost { display: block; flex-basis: 100%; order: 3; padding: 6px 9px; max-width: 280px; font-size: max(11px, calc(11px * var(--ui-scale))); }
  body.in-app #app #call-cost:empty { display: none; }
  body.in-app #app #bottom-controls { gap: 5px; padding: 6px; bottom: max(14px, env(safe-area-inset-bottom)); border-radius: 36px; }
  body.in-app #app #toggle-controls { right: 10px; bottom: max(20px, env(safe-area-inset-bottom)); width: 44px; height: 44px; }
  body.in-app #app #end-call { right: 10px; bottom: max(82px, calc(env(safe-area-inset-bottom) + 66px)); }
  body.in-app #app .self-preview { border-radius: 13px; }
  body.in-app #app .preview-tool { top: 3px; right: 3px; width: 32px; height: 32px; min-height: 32px; border-radius: 9px; opacity: 1; }
  body.in-app #app #drag-handle { left: 3px; right: auto; }
  body.in-app #app .self-controls { gap: 2px; margin-top: 6px; }
  body.in-app #app .self-controls button { width: max(44px, calc(40px * var(--ui-scale))); height: max(44px, calc(40px * var(--ui-scale))); }
  body.in-app #app #chat-overlay { left: 10px; bottom: 92px; width: calc(240px * var(--ui-scale)); max-width: 55%; gap: 6px; }
  body.in-app #app .chat-heading { min-height: 30px; padding: 5px 9px; font-size: 10px; border-radius: 10px; }
  body.in-app #app #dismiss-chat { width: 36px; min-height: 36px; height: 36px; }
  body.in-app #app #live-messages { max-height: 24dvh; gap: 6px; }
  body.in-app #app .live-bubble { padding: 8px 10px; font-size: calc(11px * var(--ui-scale)); }
  body.in-app #app #live-form { padding: 3px; }
  body.in-app #app #live-form input { font-size: 16px; min-height: 44px; padding: 8px; }
  body.in-app #app #live-form button { width: 40px; height: 44px; min-height: 44px; flex-basis: 40px; }
  body.in-app #app #messages { border-radius: 20px 20px 0 0; border-width: 1px 0 0; }
  body.in-app #app #messages.active { display: block; }
  body.in-app #app .conversation-list { padding: 23px 16px; border: 0; }
  body.in-app #app .list-heading h1 { font-size: 27px; margin-bottom: 21px; }
  body.in-app #app .conversation-categories button { min-height: 44px; font-size: calc(10px * var(--ui-scale)); }
  body.in-app #app .conversation-header { min-height: 72px; height: auto; padding: 10px 14px; gap: 9px; }
  body.in-app #app .conversation-header button { min-height: 44px; min-width: 40px; }
  body.in-app #app .thread { padding: 20px 15px; }
  body.in-app #app .thread-message { max-width: 88%; font-size: calc(12px * var(--ui-scale)); padding: 11px 14px; }
  body.in-app #app .thread-bottom { padding: 12px 12px max(13px, env(safe-area-inset-bottom)); }
  body.in-app #app .thread-bottom .composer input { font-size: 16px; padding-inline: 10px; }
  body.in-app #app .empty-state { padding: 25px; }
  body.in-app #app .empty-state h2 { font-size: 23px; }
  body.in-app #app .empty-state p { font-size: calc(12px * var(--ui-scale)); }
  body.in-app #app #stories { border-width: 1px 0 0; border-radius: 20px 20px 0 0; }
  body.in-app #app .stories-top { top: 22px; left: 20px; right: 20px; gap: 12px; justify-content: space-between; }
  body.in-app #app .stories-top h1 { font-size: 27px; }
  body.in-app #app .stories-top .eyebrow { max-width: 20ch; line-height: 1.5; }
  body.in-app #app #add-story { padding-inline: 15px; min-height: 44px; font-size: calc(11px * var(--ui-scale)); }
  body.in-app #app .story-viewer { border-radius: 17px; }
  body.in-app #app #stories:has(#story-viewer:not([hidden])) .stories-top > div { padding: 10px 13px; border-radius: 16px; border: 1px solid #ffffff28; background: #101b2bbf; backdrop-filter: blur(16px); }
  body.in-app #app #stories:has(#story-viewer:not([hidden])) .stories-top h1 { color: white; font-size: 21px; }
  body.in-app #app #stories:has(#story-viewer:not([hidden])) .stories-top .eyebrow { display: none; }
  body.in-app #app #stories:has(#story-viewer:not([hidden])) .story-delete { top: 84px; width: 44px; height: 44px; min-height: 44px; background: #101b2bc9; color: white; }
  body.in-app #app .story-empty { padding-top: 120px; }
  body.in-app #account-menu { top: 62px; right: 10px; max-width: calc(100vw - 20px); max-height: calc(100dvh - 75px); overflow-y: auto; }
  body.in-app #modal { border-radius: 22px; max-height: calc(100dvh - 24px); }
}
@media (max-width: 360px) {
  body.in-app > .navbar { padding-inline: 8px; gap: 0 3px; }
  body.in-app > .navbar .brand-logo { width: 92px; }
  body.in-app > .navbar .nav-actions { gap: 0; }
  body.in-app > .navbar #balance { padding-inline: 5px; }
  body.in-app > .navbar #app-nav button { padding-inline: 5px; gap: 5px; font-size: calc(9px * var(--ui-scale)); }
  body.in-app #app #bottom-controls { gap: 3px; padding: 5px; }
  body.in-app #app #chat-overlay { max-width: 51%; }
}
@media (max-height: 750px) and (min-width: 701px) {
  body.in-app #app .xp-scene { height: 155px; min-height: 100px; margin-bottom: 7px; }
  body.in-app #app .xp-scene-world { scale: .78; }
  body.in-app #app #stage-title { font-size: 31px; margin-bottom: 10px; }
  body.in-app #app #stage-description { margin-bottom: 16px; }
  body.in-app #app #stage-detail { margin-top: 14px; }
}
@media (max-height: 650px) {
  body.in-app #app #stage-empty { padding-top: 16px; padding-bottom: 94px; justify-content: flex-start; }
  body.in-app #app .xp-scene { min-height: 70px; height: 90px; margin-bottom: 5px; flex-shrink: 0; }
  body.in-app #app .xp-scene-world { scale: .48; }
  body.in-app #app .xp-scene-floor { width: 100px; bottom: 0; }
  body.in-app #app #stage-title { font-size: 25px; margin-bottom: 9px; }
  body.in-app #app #stage-description { font-size: calc(12px * var(--ui-scale)); margin-bottom: 14px; }
  body.in-app #app #stage-detail { margin-top: 12px; }
  body.in-app #app #stage-empty > .eyebrow { margin-bottom: 8px; }
}
@media (max-height: 500px) and (min-width: 701px) {
  body.in-app #app #stage-empty { display: grid; grid-template-columns: minmax(170px, 240px) minmax(0, 440px); align-content: safe center; justify-content: center; justify-items: start; gap: 0 25px; text-align: start; padding: 12px 28px 94px; }
  body.in-app #app #stage-empty > :not(.xp-scene):not(.empty-orbit) { grid-column: 2; }
  body.in-app #app #stage-empty > .eyebrow { display: none; }
  body.in-app #app .xp-scene { grid-column: 1; grid-row: 1 / span 8; width: 240px; height: 165px; min-height: 0; margin: 0; }
  body.in-app #app .xp-scene-world { scale: .64; }
  body.in-app #app #stage-title { font-size: 24px; margin-bottom: 8px; }
  body.in-app #app #stage-description { font-size: calc(12px * var(--ui-scale)); line-height: 1.5; margin-bottom: 10px; }
  body.in-app #app #start,
  body.in-app #app #call-premium-required,
  body.in-app #app #media-play { min-height: 44px; padding: 10px 22px; font-size: calc(12px * var(--ui-scale)); }
  body.in-app #app #stage-detail { font-size: calc(9px * var(--ui-scale)); margin-top: 8px; }
}
html[dir="rtl"] body.in-app #app #participant { left: auto; right: 22px; }
html[dir="rtl"] body.in-app #app .live-bubble { border-radius: 14px 14px 4px 14px; }
html[dir="rtl"] body.in-app #app .live-bubble.own { border-radius: 14px 14px 14px 4px; }
html[dir="rtl"] body.in-app #app .thread-message { border-radius: 17px 17px 5px 17px; }
html[dir="rtl"] body.in-app #app .thread-message.outgoing { border-radius: 17px 17px 17px 5px; }
html[dir="rtl"] body.in-app #app .conversation-item { text-align: start; }
html[dir="rtl"] body.in-app #account-menu { left: 24px; right: auto; }
@media (max-width: 700px) {
  html[dir="rtl"] body.in-app #app #participant { right: 10px; }
  html[dir="rtl"] body.in-app #account-menu { left: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  body.in-app #app .xp-scene *,
  body.in-app #app .xp-scene { animation: none !important; transition: none !important; }
  body.in-app #app .xp-scene-world { transform: none; }
}
@media (forced-colors: active) {
  body.in-app #app #bottom-controls,
  body.in-app #app #participant,
  body.in-app #app #live-form { border: 1px solid ButtonText; }
  body.in-app #app .xp-scene { opacity: .65; }
}
@keyframes xp-card-back { 0%,100% { transform: translateY(0) rotate(-17deg) rotateY(24deg) rotateX(8deg); } 50% { transform: translateY(-9px) rotate(-14deg) rotateY(24deg) rotateX(8deg); } }
@keyframes xp-card-front { 0%,100% { transform: translateY(0) rotate(13deg) rotateY(-19deg) rotateX(8deg); } 50% { transform: translateY(-12px) rotate(10deg) rotateY(-19deg) rotateX(8deg); } }
@keyframes xp-orb-drift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }
@keyframes xp-connecting { 0%,100% { transform: scale(1); box-shadow: 0 0 0 0 #c5f16500; } 50% { transform: scale(1.08); box-shadow: 0 0 0 11px #c5f16514; } }
@keyframes xp-bar { to { transform: scaleY(.4); opacity: .5; } }