/*
 * VELVET ROOM — CANONICAL UI DESIGN SYSTEM FOUNDATION V1
 * Marker: VR_ROOM_DESIGN_SYSTEM_FOUNDATION_V1_20260820
 *
 * Shared visual primitive owner for Velvet Room.
 * V1 does not replace surface-specific mode artwork, identity skins,
 * or functional layouts.
 */

:root {
  --vr-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --vr-font-serif: Georgia, "Times New Roman", serif;
  --vr-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --vr-bg-0: #000000;
  --vr-bg-1: #050507;
  --vr-bg-2: #0d0d12;
  --vr-bg-3: #13131b;

  --vr-text-1: #ffffff;
  --vr-text-2: rgba(255,255,255,.82);
  --vr-text-3: rgba(255,255,255,.72);
  --vr-text-4: rgba(255,255,255,.56);

  --vr-line-1: rgba(255,255,255,.08);
  --vr-line-2: rgba(255,255,255,.10);
  --vr-line-3: rgba(255,255,255,.16);

  --vr-glass-1: rgba(8,8,14,.58);
  --vr-glass-2: rgba(8,8,14,.74);
  --vr-glass-3: rgba(10,10,16,.86);

  --vr-pink-1: #ff4fa3;
  --vr-pink-2: #ff83c2;
  --vr-purple-1: #7c4dff;
  --vr-gold-1: #d4af37;
  --vr-cyan-1: #67c6ff;
  --vr-danger: #ff6b7a;
  --vr-success: #88f7bf;

  --vr-social-1: #c760ff;
  --vr-social-2: #8e32ff;
  --vr-social-glow: rgba(199,96,255,.26);

  --vr-friends-1: #f0b35e;
  --vr-friends-2: #ff8d5f;
  --vr-friends-glow: rgba(240,179,94,.25);

  --vr-work-1: #67c6ff;
  --vr-work-2: #70a8ff;
  --vr-work-glow: rgba(103,198,255,.24);
  /* VR_ROOM_R65_R3_CANONICAL_MODE_COLOR_AUTHORITY */
  --vr-social-rgb: 199,96,255;
  --vr-friends-rgb: 240,179,94;
  --vr-work-rgb: 103,198,255;

  --vr-all-1: #d4af37;
  --vr-all-2: #8f5cff;
  --vr-all-glow: rgba(212,175,55,.22);

  --vr-space-1: 4px;
  --vr-space-2: 8px;
  --vr-space-3: 12px;
  --vr-space-4: 16px;
  --vr-space-5: 20px;
  --vr-space-6: 24px;
  --vr-space-7: 32px;
  --vr-space-8: 40px;

  --vr-radius-xs: 8px;
  --vr-radius-sm: 12px;
  --vr-radius-md: 16px;
  --vr-radius-lg: 18px;
  --vr-radius-xl: 22px;
  --vr-radius-2xl: 26px;
  --vr-radius-pill: 999px;

  --vr-shadow-sm: 0 6px 18px rgba(0,0,0,.24);
  --vr-shadow-md: 0 12px 32px rgba(0,0,0,.28);
  --vr-shadow-lg: 0 22px 56px rgba(0,0,0,.42);
  --vr-shadow-inset: inset 0 1px 0 rgba(255,255,255,.05);

  --vr-motion-fast: 140ms;
  --vr-motion-standard: 220ms;
  --vr-motion-slow: 320ms;
  --vr-ease-standard: cubic-bezier(.2,.7,.2,1);

  --vr-touch-min: 44px;
  --vr-safe-top: env(safe-area-inset-top, 0px);
  --vr-safe-right: env(safe-area-inset-right, 0px);
  --vr-safe-bottom: env(safe-area-inset-bottom, 0px);
  --vr-safe-left: env(safe-area-inset-left, 0px);
}

body[data-vr-ui="aligned-v1"] {
  --vr-mode-accent: var(--vr-social-1);
  --vr-mode-accent-2: var(--vr-social-2);
  --vr-mode-glow: var(--vr-social-glow);

  color-scheme: dark;
  font-family: var(--vr-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

body[data-vr-ui="aligned-v1"].mode-social,
body[data-vr-ui="aligned-v1"][data-mode="social"] {
  --vr-mode-accent: var(--vr-social-1);
  --vr-mode-accent-2: var(--vr-social-2);
  --vr-mode-glow: var(--vr-social-glow);
}

body[data-vr-ui="aligned-v1"].mode-friends,
body[data-vr-ui="aligned-v1"][data-mode="friends"],
body[data-vr-ui="aligned-v1"][data-mode="friends_family"] {
  --vr-mode-accent: var(--vr-friends-1);
  --vr-mode-accent-2: var(--vr-friends-2);
  --vr-mode-glow: var(--vr-friends-glow);
}

body[data-vr-ui="aligned-v1"].mode-work,
body[data-vr-ui="aligned-v1"][data-mode="work"] {
  --vr-mode-accent: var(--vr-work-1);
  --vr-mode-accent-2: var(--vr-work-2);
  --vr-mode-glow: var(--vr-work-glow);
}

body[data-vr-ui="aligned-v1"][data-mode="all"] {
  --vr-mode-accent: var(--vr-all-1);
  --vr-mode-accent-2: var(--vr-all-2);
  --vr-mode-glow: var(--vr-all-glow);
}

body[data-vr-ui="aligned-v1"],
body[data-vr-ui="aligned-v1"] *,
body[data-vr-ui="aligned-v1"] *::before,
body[data-vr-ui="aligned-v1"] *::after {
  box-sizing: border-box;
}

body[data-vr-ui="aligned-v1"] :where(button, input, textarea, select) {
  font: inherit;
}

body[data-vr-ui="aligned-v1"] :where(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--vr-mode-accent);
  outline-offset: 3px;
}

body[data-vr-ui="aligned-v1"] ::selection {
  background: color-mix(in srgb, var(--vr-mode-accent) 42%, transparent);
  color: var(--vr-text-1);
}

.vr-ui-surface {
  border: 1px solid var(--vr-line-2);
  border-radius: var(--vr-radius-lg);
  background: var(--vr-glass-2);
  box-shadow: var(--vr-shadow-md), var(--vr-shadow-inset);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.vr-ui-button {
  min-height: var(--vr-touch-min);
  border: 1px solid var(--vr-line-3);
  border-radius: var(--vr-radius-pill);
  padding: 0 var(--vr-space-4);
  color: var(--vr-text-1);
  background: rgba(255,255,255,.06);
  transition:
    transform var(--vr-motion-fast) var(--vr-ease-standard),
    border-color var(--vr-motion-standard) var(--vr-ease-standard),
    background var(--vr-motion-standard) var(--vr-ease-standard),
    box-shadow var(--vr-motion-standard) var(--vr-ease-standard);
}

.vr-ui-button[data-variant="primary"] {
  border-color: color-mix(in srgb, var(--vr-mode-accent) 58%, rgba(255,255,255,.16));
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--vr-mode-accent) 74%, #111),
      color-mix(in srgb, var(--vr-mode-accent-2) 62%, #08080c));
  box-shadow: 0 8px 24px var(--vr-mode-glow);
}

.vr-ui-button[data-variant="danger"] {
  border-color: color-mix(in srgb, var(--vr-danger) 55%, rgba(255,255,255,.16));
}

.vr-ui-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 var(--vr-space-3);
  border: 1px solid var(--vr-line-2);
  border-radius: var(--vr-radius-pill);
  background: rgba(255,255,255,.05);
  color: var(--vr-text-2);
  font-size: 12px;
  font-weight: 650;
}

@media (hover: hover) and (pointer: fine) {
  .vr-ui-button:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--vr-mode-accent) 38%, var(--vr-line-3));
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-vr-ui="aligned-v1"] *,
  body[data-vr-ui="aligned-v1"] *::before,
  body[data-vr-ui="aligned-v1"] *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media (prefers-contrast: more) {
  body[data-vr-ui="aligned-v1"] {
    --vr-line-1: rgba(255,255,255,.18);
    --vr-line-2: rgba(255,255,255,.26);
    --vr-line-3: rgba(255,255,255,.38);
    --vr-text-3: rgba(255,255,255,.88);
    --vr-text-4: rgba(255,255,255,.76);
  }
}

/* ========================================================================
 * VR_ROOM_UI_ALIGNMENT_WAVE1_CORE_SURFACES_20260820
 * Core visible alignment layer.
 *
 * CSS-only. No layout ownership changes. No mode-art/background replacement.
 * No post/profile identity skin replacement.
 * ====================================================================== */

body[data-vr-ui="aligned-v1"] .mode-social,
body[data-vr-ui="aligned-v1"].mode-social {
  --vr-local-accent: var(--vr-social-1);
  --vr-local-accent-2: var(--vr-social-2);
  --vr-local-glow: var(--vr-social-glow);
}
body[data-vr-ui="aligned-v1"] .mode-friends,
body[data-vr-ui="aligned-v1"].mode-friends {
  --vr-local-accent: var(--vr-friends-1);
  --vr-local-accent-2: var(--vr-friends-2);
  --vr-local-glow: var(--vr-friends-glow);
}
body[data-vr-ui="aligned-v1"] .mode-work,
body[data-vr-ui="aligned-v1"].mode-work {
  --vr-local-accent: var(--vr-work-1);
  --vr-local-accent-2: var(--vr-work-2);
  --vr-local-glow: var(--vr-work-glow);
}
body[data-vr-ui="aligned-v1"] .mode-all {
  --vr-local-accent: var(--vr-all-1);
  --vr-local-accent-2: var(--vr-all-2);
  --vr-local-glow: var(--vr-all-glow);
}

body[data-vr-ui="aligned-v1"] :where(
  .heroBtn,
  .heroMiniBtn,
  .heroCallBtn,
  .avatarEditBtn,
  .actionBtn,
  .sendBtn,
  .circleBtn,
  .refreshBtn,
  .attachBtn,
  .tabBtn,
  .vaultBtn,
  .mini-btn,
  .pill-btn,
  .back-btn,
  .public-action
) {
  border-color: var(--vr-line-3);
  box-shadow: var(--vr-shadow-inset);
  transition:
    transform var(--vr-motion-fast) var(--vr-ease-standard),
    border-color var(--vr-motion-standard) var(--vr-ease-standard),
    background var(--vr-motion-standard) var(--vr-ease-standard),
    box-shadow var(--vr-motion-standard) var(--vr-ease-standard),
    opacity var(--vr-motion-standard) var(--vr-ease-standard);
}

body[data-vr-ui="aligned-v1"] :where(
  .heroBtn,
  .actionBtn,
  .sendBtn,
  .refreshBtn,
  .attachBtn,
  .tabBtn,
  .mini-btn,
  .pill-btn,
  .public-action
) {
  min-height: var(--vr-touch-min);
}

body[data-vr-ui="aligned-v1"] :where(
  .heroBtn,
  .heroMiniBtn,
  .heroCallBtn,
  .avatarEditBtn,
  .actionBtn,
  .sendBtn,
  .circleBtn,
  .refreshBtn,
  .attachBtn,
  .tabBtn,
  .vaultBtn,
  .mini-btn,
  .pill-btn,
  .back-btn,
  .public-action
):disabled {
  opacity: .48;
  cursor: not-allowed;
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  body[data-vr-ui="aligned-v1"] :where(
    .heroBtn,
    .heroMiniBtn,
    .heroCallBtn,
    .avatarEditBtn,
    .actionBtn,
    .sendBtn,
    .circleBtn,
    .refreshBtn,
    .attachBtn,
    .tabBtn,
    .vaultBtn,
    .mini-btn,
    .pill-btn,
    .back-btn,
    .public-action
  ):not(:disabled):hover {
    transform: translateY(-1px);
    border-color: color-mix(
      in srgb,
      var(--vr-local-accent, var(--vr-mode-accent)) 42%,
      var(--vr-line-3)
    );
  }
}

body[data-vr-ui="aligned-v1"] .moonItem {
  border-radius: var(--vr-radius-pill);
  transition:
    transform var(--vr-motion-fast) var(--vr-ease-standard),
    opacity var(--vr-motion-standard) var(--vr-ease-standard),
    filter var(--vr-motion-standard) var(--vr-ease-standard);
}

body[data-vr-ui="aligned-v1"] .moonItem.active[data-mode="all"] {
  --vr-tab-accent: var(--vr-all-1);
  filter: drop-shadow(0 0 12px var(--vr-all-glow));
}
body[data-vr-ui="aligned-v1"] .moonItem.active[data-mode="social"] {
  --vr-tab-accent: var(--vr-social-1);
  filter: drop-shadow(0 0 12px var(--vr-social-glow));
}
body[data-vr-ui="aligned-v1"] .moonItem.active[data-mode="friends"] {
  --vr-tab-accent: var(--vr-friends-1);
  filter: drop-shadow(0 0 12px var(--vr-friends-glow));
}
body[data-vr-ui="aligned-v1"] .moonItem.active[data-mode="work"] {
  --vr-tab-accent: var(--vr-work-1);
  filter: drop-shadow(0 0 12px var(--vr-work-glow));
}

body[data-vr-ui="aligned-v1"] :where(.postcard, .feedPost, .vrSectionMiniCard) {
  border-color: var(--vr-line-2);
  box-shadow: var(--vr-shadow-md), var(--vr-shadow-inset);
}

body[data-vr-ui="aligned-v1"] :where(.postcard, .feedPost, .vrSectionMiniCard).mode-social {
  border-color: color-mix(in srgb, var(--vr-social-1) 20%, var(--vr-line-2));
}
body[data-vr-ui="aligned-v1"] :where(.postcard, .feedPost, .vrSectionMiniCard).mode-friends {
  border-color: color-mix(in srgb, var(--vr-friends-1) 22%, var(--vr-line-2));
}
body[data-vr-ui="aligned-v1"] :where(.postcard, .feedPost, .vrSectionMiniCard).mode-work {
  border-color: color-mix(in srgb, var(--vr-work-1) 22%, var(--vr-line-2));
}

body[data-vr-ui="aligned-v1"] .heroBtn {
  border-radius: var(--vr-radius-pill);
  background-color: rgba(255,255,255,.055);
}

body[data-vr-ui="aligned-v1"] .heroBtn.primary {
  border-color: color-mix(in srgb, var(--vr-mode-accent) 58%, var(--vr-line-3));
  box-shadow:
    0 8px 24px var(--vr-mode-glow),
    var(--vr-shadow-inset);
}

body[data-vr-ui="aligned-v1"] :where(
  .heroMiniBtn,
  .heroCallBtn,
  .avatarEditBtn,
  .iconBtn
) {
  border-radius: var(--vr-radius-pill);
}

body[data-vr-ui="aligned-v1"] .actionBtn,
body[data-vr-ui="aligned-v1"] .backBtn {
  border-radius: var(--vr-radius-pill);
}

body[data-vr-ui="aligned-v1"] .actionBtn.primary,
body[data-vr-ui="aligned-v1"] .heroBtn.primary {
  border-color: color-mix(in srgb, var(--vr-mode-accent) 56%, var(--vr-line-3));
  box-shadow:
    0 8px 24px var(--vr-mode-glow),
    var(--vr-shadow-inset);
}

body[data-vr-ui="aligned-v1"] :where(
  .actionBtn,
  .sendBtn,
  .refreshBtn,
  .attachBtn,
  .circleBtn
) {
  border-radius: var(--vr-radius-pill);
}

body[data-vr-ui="aligned-v1"] .sendBtn {
  box-shadow:
    0 8px 22px var(--vr-mode-glow),
    var(--vr-shadow-inset);
}

body[data-vr-ui="aligned-v1"] .tabBtn {
  border-radius: var(--vr-radius-pill);
  font-weight: 650;
}

body[data-vr-ui="aligned-v1"] .tabBtn.active {
  border-color: color-mix(in srgb, var(--vr-mode-accent) 58%, var(--vr-line-3));
  box-shadow:
    0 6px 20px var(--vr-mode-glow),
    var(--vr-shadow-inset);
}

body[data-vr-ui="aligned-v1"] :where(
  #friendRequestsList .card,
  #notificationsList .card
) {
  border-color: var(--vr-line-2);
  border-radius: var(--vr-radius-lg);
  box-shadow: var(--vr-shadow-sm), var(--vr-shadow-inset);
}

body[data-vr-ui="aligned-v1"] #friendRequestsList .btn {
  min-height: var(--vr-touch-min);
  border-radius: var(--vr-radius-pill);
  border-color: var(--vr-line-3);
}

body[data-vr-ui="aligned-v1"] :where(
  .mode-pill,
  .public-chip
) {
  border-radius: var(--vr-radius-pill);
  border-color: var(--vr-line-2);
  box-shadow: var(--vr-shadow-inset);
}

body[data-vr-ui="aligned-v1"] .public-action {
  border-radius: var(--vr-radius-pill);
  background-color: rgba(8,8,14,.64);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body[data-vr-ui="aligned-v1"] .public-action.primary {
  border-color: color-mix(in srgb, var(--vr-mode-accent) 58%, var(--vr-line-3));
  box-shadow:
    0 8px 24px var(--vr-mode-glow),
    var(--vr-shadow-inset);
}

body[data-vr-ui="aligned-v1"] :where(
  .composer input,
  .composer textarea,
  .composer select,
  .panel input,
  .panel textarea,
  .panel select
) {
  border-color: var(--vr-line-2);
  border-radius: var(--vr-radius-md);
}

body[data-vr-ui="aligned-v1"] :where(
  .heroBtn,
  .heroMiniBtn,
  .heroCallBtn,
  .avatarEditBtn,
  .actionBtn,
  .sendBtn,
  .circleBtn,
  .refreshBtn,
  .attachBtn,
  .tabBtn,
  .vaultBtn,
  .mini-btn,
  .pill-btn,
  .back-btn,
  .public-action
):not(:disabled):active {
  transform: translateY(0) scale(.985);
}

/* ========================================================================
 * VR_ROOM_UI_ALIGNMENT_WAVE2_SURFACE_GRAMMAR_20260820
 * Platform core surface grammar + subtle mode atmosphere.
 *
 * DOCTRINE:
 * - object identity skins remain owned by the object origin mode
 * - surrounding presentation surfaces may carry current-mode ambience
 * - no banner/profile/background artwork is replaced here
 * ====================================================================== */

:root {
  --vr-glass-soft:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
    rgba(8,8,14,.66);

  --vr-glass-strong:
    linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.022)),
    rgba(8,8,14,.82);

  --vr-panel-border: rgba(255,255,255,.105);
  --vr-panel-highlight: inset 0 1px 0 rgba(255,255,255,.055);
  --vr-panel-shadow: 0 16px 42px rgba(0,0,0,.30);
}

/* Shared frame treatment for presentation surfaces only. */
body[data-vr-ui="aligned-v1"] :where(
  .panel,
  .feedSpeakSheetPanel,
  .public-card,
  .heroQuickActions
) {
  border-color: var(--vr-panel-border);
  box-shadow: var(--vr-panel-shadow), var(--vr-panel-highlight);
}

/* Subtle mode atmosphere. This is deliberately border/glow based so
 * it cannot replace background artwork or origin-mode content skins.
 */
body[data-vr-ui="aligned-v1"].mode-social :where(
  .panel,
  .feedSpeakSheetPanel,
  .public-card,
  .heroQuickActions
),
body[data-vr-ui="aligned-v1"][data-mode="social"] :where(
  .panel,
  .feedSpeakSheetPanel,
  .public-card,
  .heroQuickActions
) {
  border-color: color-mix(in srgb, var(--vr-social-1) 18%, var(--vr-panel-border));
  box-shadow:
    0 16px 42px rgba(0,0,0,.30),
    0 0 28px rgba(143,92,255,.055),
    var(--vr-panel-highlight);
}

body[data-vr-ui="aligned-v1"].mode-friends :where(
  .panel,
  .feedSpeakSheetPanel,
  .public-card,
  .heroQuickActions
),
body[data-vr-ui="aligned-v1"][data-mode="friends"] :where(
  .panel,
  .feedSpeakSheetPanel,
  .public-card,
  .heroQuickActions
) {
  border-color: color-mix(in srgb, var(--vr-friends-1) 21%, var(--vr-panel-border));
  box-shadow:
    0 16px 42px rgba(0,0,0,.30),
    0 0 30px rgba(240,179,94,.060),
    var(--vr-panel-highlight);
}

body[data-vr-ui="aligned-v1"].mode-work :where(
  .panel,
  .feedSpeakSheetPanel,
  .public-card,
  .heroQuickActions
),
body[data-vr-ui="aligned-v1"][data-mode="work"] :where(
  .panel,
  .feedSpeakSheetPanel,
  .public-card,
  .heroQuickActions
) {
  border-color: color-mix(in srgb, var(--vr-work-1) 20%, var(--vr-panel-border));
  box-shadow:
    0 16px 42px rgba(0,0,0,.30),
    0 0 30px rgba(103,198,255,.055),
    var(--vr-panel-highlight);
}

/* ------------------------------------------------------------------------
 * FEED — presentation sections, not post identity
 * --------------------------------------------------------------------- */
body[data-vr-ui="aligned-v1"] :where(
  #pinnedSection,
  #clipsSection,
  .vrRepeatSection,
  .vrExactRepeatSection
) {
  border-radius: var(--vr-radius-xl);
  border-color: var(--vr-line-2);
}

body[data-vr-ui="aligned-v1"] :where(
  #pinnedSection,
  #clipsSection,
  .vrRepeatSection,
  .vrExactRepeatSection
).mode-social {
  border-color: color-mix(in srgb, var(--vr-social-1) 17%, var(--vr-line-2));
  box-shadow:
    0 14px 38px rgba(0,0,0,.24),
    0 0 30px rgba(143,92,255,.048),
    var(--vr-shadow-inset);
}

body[data-vr-ui="aligned-v1"] :where(
  #pinnedSection,
  #clipsSection,
  .vrRepeatSection,
  .vrExactRepeatSection
).mode-friends {
  border-color: color-mix(in srgb, var(--vr-friends-1) 20%, var(--vr-line-2));
  box-shadow:
    0 14px 38px rgba(0,0,0,.24),
    0 0 30px rgba(240,179,94,.052),
    var(--vr-shadow-inset);
}

body[data-vr-ui="aligned-v1"] :where(
  #pinnedSection,
  #clipsSection,
  .vrRepeatSection,
  .vrExactRepeatSection
).mode-work {
  border-color: color-mix(in srgb, var(--vr-work-1) 19%, var(--vr-line-2));
  box-shadow:
    0 14px 38px rgba(0,0,0,.24),
    0 0 30px rgba(103,198,255,.050),
    var(--vr-shadow-inset);
}

body[data-vr-ui="aligned-v1"] .feedSpeakSheetPanel {
  border-radius: var(--vr-radius-xl);
  background-color: rgba(7,7,12,.84);
  backdrop-filter: blur(22px) saturate(1.08);
  -webkit-backdrop-filter: blur(22px) saturate(1.08);
}

/* ------------------------------------------------------------------------
 * PROFILE PREVIEW — owner/viewer share the same base surface grammar
 * --------------------------------------------------------------------- */
body[data-vr-ui="aligned-v1"] .heroQuickActions {
  border-radius: var(--vr-radius-lg);
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)),
    rgba(0,0,0,.28);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

body[data-vr-ui="aligned-v1"] :where(
  .heroIdentityTop,
  .heroMetaRow
) {
  text-shadow: 0 1px 14px rgba(0,0,0,.54);
}

/* Keep profile controls visually connected without changing their grid. */
body[data-vr-ui="aligned-v1"] .heroQuickActions :where(
  .heroBtn,
  .heroMiniBtn,
  .heroCallBtn,
  .avatarEditBtn
) {
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)),
    rgba(8,8,12,.54);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ------------------------------------------------------------------------
 * CHANNEL — polished hero framing, preserved imagery
 * --------------------------------------------------------------------- */
body[data-vr-ui="aligned-v1"] .hero {
  border-color: var(--vr-line-2);
}

body[data-vr-ui="aligned-v1"] .hero :where(.actionBtn, .heroBtn) {
  background:
    linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.020)),
    rgba(8,8,14,.56);
}

/* ------------------------------------------------------------------------
 * MESSAGES — composer becomes the canonical conversational dock
 * --------------------------------------------------------------------- */
body[data-vr-ui="aligned-v1"] .composer {
  border-color: var(--vr-line-2);
  box-shadow:
    0 -10px 34px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.045);
  backdrop-filter: blur(20px) saturate(1.06);
  -webkit-backdrop-filter: blur(20px) saturate(1.06);
}

body[data-vr-ui="aligned-v1"] .composer :where(
  input,
  textarea
) {
  border-color: var(--vr-line-2);
  border-radius: var(--vr-radius-lg);
  background: rgba(255,255,255,.035);
  color: var(--vr-text-1);
}

body[data-vr-ui="aligned-v1"] .composer :where(
  input,
  textarea
)::placeholder {
  color: var(--vr-text-4);
}

/* ------------------------------------------------------------------------
 * MESSAGE CENTER — one hub language for cards, notices, summary chips
 * --------------------------------------------------------------------- */
body[data-vr-ui="aligned-v1"] .panel {
  border-radius: var(--vr-radius-xl);
}

body[data-vr-ui="aligned-v1"] .summaryChip {
  border-radius: var(--vr-radius-pill);
  border-color: var(--vr-line-2);
  background:
    linear-gradient(180deg, rgba(255,255,255,.050), rgba(255,255,255,.020)),
    rgba(8,8,14,.58);
  box-shadow: var(--vr-shadow-inset);
}

body[data-vr-ui="aligned-v1"] .notice {
  border-radius: var(--vr-radius-md);
  border-color: var(--vr-line-1);
  background: rgba(255,255,255,.025);
  color: var(--vr-text-3);
}

body[data-vr-ui="aligned-v1"] :where(
  #friendRequestsList .card,
  #notificationsList .card
) {
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
    rgba(7,7,12,.66);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ------------------------------------------------------------------------
 * RADAR / DISCOVER — public profile gate surface
 * --------------------------------------------------------------------- */
body[data-vr-ui="aligned-v1"] .public-card {
  border-radius: var(--vr-radius-2xl);
  border-color: color-mix(
    in srgb,
    var(--vr-mode-accent) 18%,
    var(--vr-line-2)
  );
  box-shadow:
    0 24px 64px rgba(0,0,0,.38),
    0 0 34px var(--vr-mode-glow),
    var(--vr-shadow-inset);
  backdrop-filter: blur(22px) saturate(1.08);
  -webkit-backdrop-filter: blur(22px) saturate(1.08);
}

body[data-vr-ui="aligned-v1"] .public-card-actions {
  gap: var(--vr-space-2);
}

body[data-vr-ui="aligned-v1"] .public-card-chiprow {
  gap: var(--vr-space-2);
}

/* ------------------------------------------------------------------------
 * Responsive refinement shared by core surfaces
 * --------------------------------------------------------------------- */
@media (max-width: 640px) {
  body[data-vr-ui="aligned-v1"] :where(
    .panel,
    .feedSpeakSheetPanel,
    .public-card,
    .heroQuickActions
  ) {
    box-shadow:
      0 12px 30px rgba(0,0,0,.25),
      var(--vr-panel-highlight);
  }

  body[data-vr-ui="aligned-v1"] .public-card {
    border-radius: var(--vr-radius-xl);
  }
}



/* ==============================================================
   VELVET_ROOM_CANONICAL_CONVERGENCE_V1
   One Room visual grammar. Mode changes atmosphere; identity-bearing
   objects keep their origin-mode identity.
   ============================================================== */

html[data-vr-surface],
body[data-vr-surface]{
  --vr-cv-panel: rgba(5,5,10,.78);
  --vr-cv-panel-strong: rgba(0,0,0,.88);
  --vr-cv-border: rgba(255,255,255,.14);
  --vr-cv-soft: rgba(255,255,255,.72);
  --vr-cv-accent: #e03a8f;
  --vr-cv-glow: rgba(224,58,143,.28);
}

html[data-vr-presentation-mode="social"],
body[data-vr-presentation-mode="social"]{
  --vr-cv-panel: rgba(8,3,18,.78);
  --vr-cv-panel-strong: rgba(4,1,12,.91);
  --vr-cv-border: rgba(197,92,255,.24);
  --vr-cv-accent: #d25cff;
  --vr-cv-glow: rgba(175,70,255,.32);
}

html[data-vr-presentation-mode="friends"],
body[data-vr-presentation-mode="friends"]{
  --vr-cv-panel: rgba(22,10,7,.72);
  --vr-cv-panel-strong: rgba(13,6,4,.90);
  --vr-cv-border: rgba(255,181,111,.26);
  --vr-cv-accent: #ffb36d;
  --vr-cv-glow: rgba(255,146,73,.26);
}

html[data-vr-presentation-mode="work"],
body[data-vr-presentation-mode="work"]{
  --vr-cv-panel: rgba(3,15,28,.76);
  --vr-cv-panel-strong: rgba(2,10,20,.91);
  --vr-cv-border: rgba(105,205,255,.26);
  --vr-cv-accent: #7bdcff;
  --vr-cv-glow: rgba(68,178,255,.26);
}

html[data-vr-presentation-mode="all"],
body[data-vr-presentation-mode="all"]{
  --vr-cv-panel: rgba(10,5,17,.76);
  --vr-cv-panel-strong: rgba(4,2,9,.91);
  --vr-cv-border: rgba(255,255,255,.16);
}

/* Reciprocal Friend Request is primary. One-way Follow remains real
   but visually secondary. */
html[data-vr-surface="profile"] #friendRequestBtn:not([hidden]){
  border-color: var(--vr-cv-accent) !important;
  box-shadow: 0 0 0 1px var(--vr-cv-border), 0 10px 26px var(--vr-cv-glow) !important;
}
html[data-vr-surface="profile"] #followBtn{
  opacity: .86;
  background: var(--vr-cv-panel-strong) !important;
  border-color: var(--vr-cv-border) !important;
}
html[data-vr-surface="profile"] #sendWinqBtn{
  border-color: rgba(205,126,255,.34) !important;
}
html[data-vr-surface="profile"] #giftBtn{
  border-color: rgba(244,197,66,.38) !important;
}

/* Missing profile hero media gets an intentional mode atmosphere
   instead of a dead black void. */
html[data-vr-presentation-mode="social"] .vr-mode-fallback-hero{
  background:
    radial-gradient(circle at 22% 24%, rgba(177,61,255,.32), transparent 28%),
    radial-gradient(circle at 78% 38%, rgba(42,92,255,.24), transparent 31%),
    radial-gradient(circle at 54% 72%, rgba(255,45,154,.18), transparent 34%),
    linear-gradient(160deg, #090212 0%, #120827 48%, #03020b 100%) !important;
}
html[data-vr-presentation-mode="friends"] .vr-mode-fallback-hero{
  background:
    radial-gradient(circle at 18% 28%, rgba(255,186,107,.30), transparent 30%),
    radial-gradient(circle at 76% 48%, rgba(255,93,92,.18), transparent 34%),
    linear-gradient(175deg, #4e241d 0%, #2b1017 52%, #0d0710 100%) !important;
}
html[data-vr-presentation-mode="work"] .vr-mode-fallback-hero{
  background:
    linear-gradient(115deg, transparent 0 52%, rgba(255,202,92,.08) 52% 53%, transparent 53%),
    radial-gradient(circle at 70% 25%, rgba(94,208,255,.24), transparent 29%),
    linear-gradient(160deg, #061829 0%, #08233b 46%, #030a12 100%) !important;
}
html[data-vr-presentation-mode="all"] .vr-mode-fallback-hero{
  background:
    radial-gradient(circle at 28% 25%, rgba(214,75,255,.24), transparent 30%),
    radial-gradient(circle at 75% 58%, rgba(255,150,88,.15), transparent 34%),
    linear-gradient(160deg, #10051b 0%, #151027 52%, #05040b 100%) !important;
}

/* Message Center stays dense enough for a phone without cramped overflow. */
html[data-vr-surface="message-center"] .tabBtn,
html[data-vr-surface="message-center"] .summaryChip{
  min-width: 0;
}
html[data-vr-surface="message-center"] .tabBtn{
  letter-spacing: -.015em;
}
html[data-vr-surface="message-center"] .panel,
html[data-vr-surface="message-center"] .card{
  border-color: var(--vr-cv-border) !important;
}
html[data-vr-surface="message-center"] .notice{
  background: var(--vr-cv-panel-strong) !important;
}

/* Conversation and structural panels remain foreground objects. */
html[data-vr-surface="messages"] .composer{
  background: var(--vr-cv-panel-strong) !important;
  border-color: var(--vr-cv-border) !important;
}
html[data-vr-surface="channel"] .hero{
  border-color: var(--vr-cv-border) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.34), 0 0 26px var(--vr-cv-glow) !important;
}
html[data-vr-surface="channel"] .actions{
  background: var(--vr-cv-panel);
  border-color: var(--vr-cv-border) !important;
}
html[data-vr-surface="channel"] [data-vr-empty-state="true"]{
  color: var(--vr-cv-soft) !important;
  font-style: normal !important;
}

/* Never inflate already-dense mobile controls. */
@media (max-width: 430px){
  html[data-vr-surface="message-center"] .tabBtn,
  html[data-vr-surface="message-center"] .summaryChip,
  html[data-vr-surface="profile"] .heroBtn,
  html[data-vr-surface="profile"] .heroMiniBtn{
    max-width: 100%;
  }
}